/* AltarNews application styles.
   Layout follows design guide page 09: 240px sidebar, 64px header rhythm,
   1200px content maximum, 24-32px padding, cards at 12px, controls at 8px. */

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 100;
  background: var(--surface); color: var(--text); padding: var(--space-3); border-radius: var(--radius-control); }

/* -- Shell ---------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100svh; }

.sidebar { display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-6) var(--space-4); background: var(--surface);
  border-right: 1px solid var(--border); }
.sidebar-head { display: flex; align-items: center; gap: var(--space-3); }
.sidebar-head strong { display: block; font-size: var(--text-card); line-height: var(--leading-card); }
.sidebar-head span { display: block; font-size: var(--text-label); color: var(--muted); overflow-wrap: anywhere; }

.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.nav a { display: block; min-height: var(--control-height); padding: 11px var(--space-3);
  border-radius: 6px; color: var(--muted); text-decoration: none;
  font-size: var(--text-label); font-weight: 600; }
.nav a:hover { background: var(--raised); color: var(--text); }
.nav a[aria-current="page"] { background: var(--raised); color: var(--action); }

.sidebar-foot { margin-top: auto; display: grid; gap: var(--space-3);
  font-size: var(--text-caption); color: var(--muted); }
.prefs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pref-link, .linkish { background: none; border: 0; padding: 0; color: var(--link);
  font: 600 var(--text-caption)/var(--leading-caption) var(--font); cursor: pointer; text-decoration: none; }
.linkish { color: var(--muted); text-align: left; overflow-wrap: anywhere; }
.linkish:hover, .pref-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.content { min-width: 0; max-width: var(--content-max); width: 100%;
  padding: var(--space-8) var(--space-8) var(--space-16); }
.menu-toggle { display: none; }

.plain { display: grid; place-items: center; min-height: 100svh; padding: var(--space-6); }

/* -- Typography ----------------------------------------------------------- */
h1 { font-size: var(--text-page); line-height: var(--leading-page); font-weight: 700; margin: 0 0 var(--space-2); }
h2 { font-size: var(--text-section); line-height: var(--leading-section); font-weight: 600; margin: var(--space-8) 0 var(--space-4); }
h3 { font-size: var(--text-card); line-height: var(--leading-card); font-weight: 600; margin: 0 0 var(--space-1); }
p { margin: 0 0 var(--space-4); }
.lead { color: var(--muted); max-width: 60ch; }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--muted); }

.page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-head h1 { margin: 0; }

/* -- Controls ------------------------------------------------------------- */
.button, button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 10px var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--action); color: var(--on-action);
  font: 700 var(--text-label)/var(--leading-label) var(--font);
  text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--action-hover); }
.button.secondary { background: transparent; color: var(--text); border-color: var(--control-border); }
.button.secondary:hover { background: var(--raised); }
.button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.button[disabled], .button[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

label { display: grid; gap: var(--space-2); font-size: var(--text-label);
  font-weight: 600; margin-bottom: var(--space-4); }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=url],
input[type=datetime-local], input[type=file], select, textarea {
  width: 100%; min-height: var(--control-height); padding: 10px var(--space-3);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--control-border); border-radius: var(--radius-control);
  font: 400 var(--text-body)/var(--leading-body) var(--font);
}
textarea { min-height: 120px; resize: vertical; }
.help { font-weight: 400; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--muted); }
.form { max-width: var(--form-max); }
.field-error { color: var(--danger); font-size: var(--text-label); font-weight: 600; }

/* -- Cards, stats, pills -------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--space-6); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-4); margin-bottom: var(--space-8); }
.stat { background: var(--raised); border-radius: var(--radius-control); padding: var(--space-4); }
.stat strong { display: block; font-size: var(--text-section); line-height: var(--leading-section); font-weight: 700; }
.stat span { display: block; font-size: var(--text-label); color: var(--muted); margin-top: var(--space-1); }

.pill { display: inline-block; padding: 4px 10px; border-radius: 11px;
  background: var(--raised); color: var(--muted);
  font: 700 var(--text-caption)/var(--leading-caption) var(--font); white-space: nowrap; }
.pill-scheduled { color: var(--action); }
.pill-sending { color: var(--action); }
.pill-sent { color: var(--success); }
.pill-failed { color: var(--danger); }
.pill-paused { color: var(--warning); }
.pill-verified { color: var(--success); }
.pill-unverified { color: var(--warning); }

.flashes { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.flash { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  background: var(--raised); font-size: var(--text-label); font-weight: 600; }
.flash-success { color: var(--success); }
.flash-error { color: var(--danger); }
.banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  background: var(--raised); font-weight: 600; }
.banner-warning { color: var(--warning); }

.empty { background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-card); padding: var(--space-12) var(--space-6); text-align: center; }
.empty h2 { margin-top: 0; }

/* -- Lists and tables ----------------------------------------------------- */
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.row:first-child { border-top: 0; }
.row a { color: inherit; text-decoration: none; font-weight: 600; }
.row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.row .meta { color: var(--muted); font-size: var(--text-label); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-label); }
th { text-align: left; color: var(--action); font-size: var(--text-caption);
  text-transform: uppercase; letter-spacing: .05em; padding: 0 var(--space-3) var(--space-3); }
td { padding: var(--space-3); border-top: 1px solid var(--border); overflow-wrap: anywhere; }
tbody tr:nth-child(odd) { background: var(--surface); }

/* -- Definition rows (send review) ---------------------------------------- */
.details { display: grid; gap: 0; margin: var(--space-6) 0; }
.detail { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.detail dt { color: var(--muted); font-size: var(--text-label); }
.detail dd { margin: 0; overflow-wrap: anywhere; }

/* -- Editor (guide page 14) ----------------------------------------------- */
.editor { display: grid; grid-template-columns: 200px minmax(0, 1fr) 240px;
  gap: var(--space-6); align-items: start; }
.editor-bar { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-4); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); }
.editor-bar .save-state { color: var(--muted); font-size: var(--text-label); }
.palette { display: grid; gap: var(--space-2); }
.palette h2, .settings h2 { font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin: 0 0 var(--space-2); }
.palette button { min-height: var(--control-height); padding: 10px var(--space-3);
  text-align: left; background: var(--raised); color: var(--text);
  border: 0; border-radius: 6px; font: 600 var(--text-label)/1 var(--font); cursor: pointer; }
.palette button:hover { background: var(--border); }

/* The canvas renders as the recipient sees it - light, not the app theme.
   Guide page 19: the church is the sender, not AltarSuite. */
.canvas { background: #FFFFFF; color: #14213A; border-radius: 4px;
  padding: var(--space-6); min-height: 320px; }
.canvas .block { position: relative; border: 1px solid transparent; border-radius: 4px;
  padding: var(--space-2); margin-bottom: var(--space-2); }
.canvas .block:hover { border-color: #CDD7E5; }
.canvas .block-tools { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.canvas .block-tools button { border: 1px solid #CDD7E5; background: #FFFFFF; color: #53657D;
  border-radius: 6px; min-height: 32px; padding: 0 var(--space-2);
  font: 600 12px/1 var(--font); cursor: pointer; }
.canvas .block-tools button:hover { background: #EAF0F9; color: #14213A; }
.canvas [contenteditable] { outline: none; }
.canvas [contenteditable]:focus { outline: 2px solid #265DCC; outline-offset: 2px; }
.canvas h2.b { font-size: 20px; line-height: 1.3; margin: 0 0 8px; color: #14213A; }
.canvas p.b { font-size: 16px; line-height: 1.6; margin: 0 0 8px; color: #53657D; }
.canvas .b-button { display: inline-block; background: #265DCC; color: #FFFFFF;
  border-radius: 8px; padding: 12px 20px; font-weight: 700; font-size: 15px; }
.canvas .b-event { border-left: 3px solid #265DCC; padding-left: var(--space-4); }
.canvas .b-event strong { display: block; font-size: 17px; color: #14213A; }
.canvas .b-event span { font-size: 14px; color: #53657D; }
.canvas hr.b { border: 0; border-top: 1px solid #CDD7E5; margin: var(--space-4) 0; }
.canvas img.b { max-width: 100%; height: auto; display: block; }
.canvas .placeholder { color: #8A98AC; }

/* -- Progress ------------------------------------------------------------- */
.progress { height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; margin: var(--space-4) 0; }
.progress span { display: block; height: 100%; background: var(--action); }

/* -- DNS records ---------------------------------------------------------- */
.record { display: grid; gap: var(--space-2); padding: var(--space-4) 0;
  border-top: 1px solid var(--border); }
.record code { display: block; padding: var(--space-3); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 13px; overflow-wrap: anywhere; }

/* -- Wizard steps --------------------------------------------------------- */
.steps { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none;
  margin: 0 0 var(--space-8); padding: 0; font-size: var(--text-label); color: var(--muted); }
.steps li { display: flex; align-items: center; gap: var(--space-2); }
.steps li[aria-current="step"] { color: var(--action); font-weight: 700; }
.steps .num { display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--raised); font-size: 12px; font-weight: 700; }
.steps li[aria-current="step"] .num { background: var(--action); color: var(--on-action); }

.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-4); margin-bottom: var(--space-6); }

/* -- Responsive (guide page 17): below 1024 collapse, below 680 cards ------ */
@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  .menu-toggle { display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-height); margin: var(--space-4) var(--space-4) 0;
    padding: 0 var(--space-4); background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    font: 700 var(--text-label)/1 var(--font); cursor: pointer; }
  .sidebar { display: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar.open { display: flex; }
  .content { padding: var(--space-6) var(--space-4) var(--space-12); }
  .editor { grid-template-columns: 1fr; }
  .palette { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
@media (max-width: 680px) {
  h1 { font-size: 26px; line-height: 34px; }
  .row { grid-template-columns: 1fr; gap: var(--space-2); }
  .detail { grid-template-columns: 1fr; gap: var(--space-1); }
  /* Dense tables become labelled cards rather than a horizontal scroll. */
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack tr { display: block; border-top: 1px solid var(--border); padding: var(--space-3) 0; }
  table.stack tbody tr:nth-child(odd) { background: transparent; }
  table.stack td { display: grid; grid-template-columns: 40% 1fr; gap: var(--space-3);
    border: 0; padding: var(--space-1) 0; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-weight: 600; }
}
@media (max-width: 560px) {
  .button { width: 100%; }
  .button-row { display: grid; }
  .content { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ==========================================================================
   Editor canvas, block options, previews, templates, settings
   ========================================================================== */

/* The canvas approximates the email, so it keeps the light palette even when
   the application is dark - guide page 19. */
.canvas .block { cursor: pointer; }
.canvas .block.is-selected { border-color: #265DCC; box-shadow: 0 0 0 3px #265DCC26; }
.canvas .block:focus-visible { outline: 3px solid #265DCC; outline-offset: 2px; }
.canvas h3.b { font-size: 17px; line-height: 1.35; margin: 0 0 8px; color: #14213A; font-weight: 700; }
.canvas .b-caption { font-size: 13px; color: #8A98AC; margin: 0 0 8px; }
.canvas .b-button.is-outline { background: #FFFFFF; color: #265DCC; border: 2px solid #265DCC; }
.canvas .b-quote { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid #265DCC;
  font-size: 17px; line-height: 1.5; font-style: italic; color: #14213A; }
.canvas .b-quote cite { display: block; margin-top: 6px; font-size: 13px;
  font-style: normal; color: #8A98AC; }
.canvas .b-list { margin: 0 0 8px; padding-left: 20px; color: #53657D; font-size: 15px; line-height: 1.6; }
.canvas .b-list li { margin-bottom: 6px; }
.canvas .b-spacer { display: grid; place-items: center; border: 1px dashed #CDD7E5;
  border-radius: 4px; color: #8A98AC; font-size: 12px; }
.canvas .b-spacer[data-size="small"] { height: 20px; }
.canvas .b-spacer[data-size="medium"] { height: 36px; }
.canvas .b-spacer[data-size="large"] { height: 60px; }

.settings .options-kind { margin: 0 0 var(--space-3); font-size: var(--text-label);
  font-weight: 700; color: var(--action); }
.settings [data-options] { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }

.editor-footer { display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); }
.editor-footer details { flex: 1 1 340px; }
.editor-footer summary { cursor: pointer; font-weight: 700; font-size: var(--text-label); }

/* -- Previews -------------------------------------------------------------- */
.preview-widths { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.preview-frame { margin: 0; display: grid; gap: var(--space-2); min-width: 0; }
.preview-frame figcaption { font-size: var(--text-caption); color: var(--muted); font-weight: 600; }
.preview-frame iframe { width: 100%; height: 640px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: #EAF0F9; }
.preview-desktop { flex: 1 1 480px; }
.preview-mobile { flex: 0 0 340px; }
.preview-mobile iframe { width: 340px; max-width: 100%; height: 640px; }

/* -- Templates ------------------------------------------------------------- */
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4); margin-bottom: var(--space-8); }
.template-card { display: flex; flex-direction: column; gap: var(--space-3); }
.template-card h3 { margin: 0; }
.template-card .caption { flex: 1; margin: 0; }
.template-card .button-row { margin-top: auto; }

/* -- Settings -------------------------------------------------------------- */
.settings-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: start; }
.colour-row { display: flex; align-items: center; gap: var(--space-3); }
.colour-row input[type=color] { width: 56px; min-height: var(--control-height); padding: 4px;
  background: var(--bg); border: 1px solid var(--control-border);
  border-radius: var(--radius-control); cursor: pointer; }
.colour-row output { font-family: ui-monospace, Consolas, monospace; color: var(--muted); }

@media (max-width: 1023px) {
  .settings-split { grid-template-columns: 1fr; }
  .preview-mobile { flex: 1 1 100%; }
  .preview-mobile iframe { width: 100%; }
}
@media (max-width: 680px) {
  .preview-frame iframe { height: 520px; }
  .editor-footer { flex-direction: column; align-items: stretch; }
}

/* Re-subscribe reads as a positive action, unlike the muted unsubscribe link. */
.linkish.is-action { color: var(--action); }

/* -- Public signup page ---------------------------------------------------- */
.signup-card { width: min(100%, 440px); }
.signup-org { margin: 0 0 var(--space-2); font-size: var(--text-caption);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.signup-back { margin: var(--space-6) 0 0; }
.honeypot { position: absolute !important; left: -9999px !important; }
label.checkbox { display: flex; align-items: center; gap: var(--space-3); }
label.checkbox input { width: auto; min-height: 0; }

/* -- Image upload ---------------------------------------------------------- */
.upload-control { margin-bottom: var(--space-4); padding: var(--space-3);
  background: var(--raised); border-radius: var(--radius-control); }
.upload-control label { margin-bottom: var(--space-2); }
.upload-control .help { margin: 0; }
.upload-control .field-error { font-weight: 600; }
input[type=file] { padding: 9px var(--space-3); background: var(--bg);
  border: 1px solid var(--control-border); border-radius: var(--radius-control);
  color: var(--text); font: 400 var(--text-label)/1.4 var(--font); }

/* Workspace refresh — all application colours use the existing palette. */
[hidden] { display: none !important; }
a { color: var(--link); text-underline-offset: 4px; }
.icon { width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }
h1 { letter-spacing: -.035em; font-weight: 650; }
h2 { letter-spacing: -.025em; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.button { transition: background .15s, border-color .15s; font-weight: 600; }
.button.secondary { border-color: var(--border); background: var(--surface); }
.button.danger { border-color: var(--border); }
.button.danger:hover { border-color: var(--danger); }
input[type=search], input[type=number] { width:100%; min-height:44px; padding:10px 12px; background:var(--bg); color:var(--text); border:1px solid var(--control-border); border-radius:8px; font:inherit; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity:.75; }
input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { font-size:14px; }
input[type=checkbox], input[type=radio] { accent-color:var(--action); width:18px; height:18px; flex:0 0 auto; }
.shell { grid-template-columns:252px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100svh; overflow-y:auto; padding:30px 18px 20px; gap:28px; }
.sidebar-head { text-decoration:none; color:var(--text); gap:11px; padding:0 8px; }
.sidebar-head strong { font-size:21px; letter-spacing:-.6px; display:flex; align-items:center; gap:10px; }
.sidebar-head strong span { color:var(--brand-gold); font-size:10px; text-transform:uppercase; letter-spacing:1px; border:1px solid var(--border); padding:1px 5px; border-radius:4px; }
.workspace-card { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border); border-radius:10px; }
.workspace-card > div { min-width:0; }
.workspace-card strong { font-size:13px; display:block; overflow-wrap:anywhere; }
.workspace-card span:not(.workspace-mark) { font-size:11px; color:var(--muted); }
.workspace-mark,.avatar { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; background:var(--raised); border-radius:8px; color:var(--brand-gold); font-weight:600; }
.nav-label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 12px 10px; }
.nav { gap:5px; }
.nav a { display:flex; align-items:center; gap:12px; padding:12px; min-height:46px; font-weight:500; }
.nav a[aria-current=page] { box-shadow:inset 3px 0 var(--action); }
.nav .icon { width:19px; height:19px; opacity:.85; }
.admin-nav { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.nav-dot { width:6px; height:6px; background:var(--brand-gold); border-radius:50%; margin-left:auto; }
.sidebar-foot { gap:16px; }
.prefs { justify-content:space-between; border-bottom:1px solid var(--border); padding:0 4px 12px; }
.pref-link { min-height:32px; color:var(--muted); font-weight:500; }
.account { display:flex; gap:10px; align-items:center; padding:0 4px; }
.account > div:last-child { min-width:0; }
.account strong { font-weight:600; color:var(--text); display:block; font-size:12px; }
.account span { display:block; font-size:10px; overflow-wrap:anywhere; }
.avatar { color:var(--action); border-radius:50%; }
.signout { display:flex; gap:8px; align-items:center; min-height:36px; padding:0 4px; }
.content { max-width:1400px; margin:0 auto; padding:0 42px 64px; }
.workspace-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:11px; height:78px; margin-bottom:25px; border-bottom:1px solid var(--border); }
.workspace-top > span > span { margin:0 10px; opacity:.6; }
.workspace-top strong { font-weight:500; color:var(--text); }
.beta-label { display:flex; align-items:center; gap:7px; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; }
.beta-label i { width:5px; height:5px; background:var(--brand-gold); border-radius:50%; }
.page-head { align-items:center; margin-bottom:28px; }
.page-head .lead { margin:7px 0 0; font-size:14px; }
.eyebrow { color:var(--brand-gold); text-transform:uppercase; font-size:10px; letter-spacing:1.5px; font-weight:650; margin-bottom:7px; }
.welcome-panel { display:grid; grid-template-columns:minmax(0,1fr) 230px; position:relative; overflow:hidden; align-items:center; border:1px solid var(--border); background:var(--surface); border-radius:14px; min-height:238px; padding:32px; margin-bottom:24px; }
.welcome-panel h2 { font-size:29px; line-height:1.25; max-width:450px; margin:12px 0; }
.welcome-panel p:not(.eyebrow) { font-size:13px; color:var(--muted); max-width:400px; margin-bottom:20px; }
.text-link { display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:600; text-decoration:none; }
.text-link:hover { text-decoration:underline; }
.text-link .icon { width:16px; height:16px; }
.newsletter-illustration { height:190px; position:relative; }
.paper-back { position:absolute; width:143px; height:179px; background:var(--raised); border:1px solid var(--border); transform:rotate(12deg); left:51px; top:7px; border-radius:8px; }
.paper { position:absolute; background:var(--bg); border:1px solid var(--border); width:143px; height:179px; left:36px; top:0; transform:rotate(-7deg); border-radius:8px; padding:17px; box-shadow:0 12px 24px #0002; }
.paper-logo { display:block; color:var(--brand-gold); font-size:24px; margin-bottom:12px; }
.paper-heading,.paper-line { display:block; background:var(--muted); height:4px; border-radius:2px; opacity:.35; margin-bottom:6px; }
.paper-heading { background:var(--action); width:74%; height:6px; opacity:.85; }
.paper-line.short { width:65%; }
.paper-photo { height:33px; margin:12px 0; border-radius:3px; background:linear-gradient(135deg,var(--raised),var(--border)); border-left:3px solid var(--brand-gold); }
.paper-stamp { display:grid; place-items:center; position:absolute; bottom:0; right:17px; height:44px; width:44px; color:var(--brand-gold); background:var(--raised); border:1px solid var(--border); border-radius:12px; transform:rotate(8deg); }
.stats { gap:16px; margin-bottom:34px; }
.stat { border:1px solid var(--border); border-radius:12px; padding:20px 22px; background:var(--surface); }
.stat .stat-label { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin:0 0 12px; }
.stat-label .icon { color:var(--muted); opacity:.7; }
.stat strong { font-size:32px; font-weight:600; line-height:1.25; letter-spacing:-1px; }
.stat strong.stat-word { font-size:22px; line-height:40px; letter-spacing:-.6px; }
.stat > span { font-size:11px; }
.text-success { color:var(--success); }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:28px 0 16px; }
.section-head h2 { font-size:18px; margin:0; }
.section-head p { margin:4px 0 0; }
.setup-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:32px; }
.setup-card { display:flex; flex-direction:column; text-decoration:none; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; transition:border-color .15s; }
.setup-card:hover { border-color:var(--action); }
.step-marker { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--border); color:var(--brand-gold); font-size:12px; border-radius:8px; margin-bottom:18px; }
.is-done .step-marker { color:var(--success); }
.setup-card h3 { font-size:14px; margin-bottom:6px; }
.setup-card p { color:var(--muted); font-size:12px; line-height:1.6; flex:1; }
.list-card { padding:0 22px; }
.row { padding:18px 0; font-size:13px; }
.row small { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:4px; }
.row .meta { font-size:11px; }
.pill { font-size:10px; letter-spacing:.15px; border-radius:5px; padding:4px 8px; }
.empty { border-style:solid; padding:44px 24px; }
.empty > .icon { width:32px; height:32px; color:var(--action); margin-bottom:12px; }
.empty .lead { margin:8px auto 20px; font-size:14px; }
.filter-bar { display:flex; gap:12px; margin:0 0 20px; align-items:center; }
.filter-bar label { margin:0; }
.filter-bar select { width:auto; min-width:160px; }
.search-field { position:relative; flex:1; max-width:420px; }
.search-field .icon { position:absolute; left:12px; top:12px; color:var(--muted); width:18px; }
.search-field input { padding-left:40px; border-color:var(--border); background:var(--surface); }
.table-wrap { border-radius:12px; border:1px solid var(--border); background:var(--surface); }
.table-wrap.card { padding:0; }
th { color:var(--muted); font-weight:500; padding:14px 18px; font-size:10px; }
td { padding:18px; font-size:13px; }
td a { font-weight:500; text-decoration:none; }
td a:hover { text-decoration:underline; }
tbody tr:nth-child(odd) { background:transparent; }
tbody tr:hover { background:var(--raised); }
td time { font-size:11px; color:var(--muted); }
.back-link { display:inline-block; margin-bottom:16px; color:var(--muted); font-size:12px; text-decoration:none; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-actions { display:flex; gap:12px; padding-top:20px; border-top:1px solid var(--border); margin-top:8px; }
.card > h2:first-child { margin-top:0; font-size:20px; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.church-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; }
.church-card .section-head { margin:0 0 20px; }
.church-card h2 { margin:0 0 6px; font-size:20px; }
.church-card h2 a { text-decoration:none; color:var(--text); }
.church-symbol,.success-symbol { display:grid; place-items:center; width:40px; height:40px; color:var(--brand-gold); border:1px solid var(--border); border-radius:10px; background:var(--raised); }
.church-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 0; margin:0 0 16px; border-bottom:1px solid var(--border); }
.church-metrics dt { color:var(--muted); font-size:11px; }
.church-metrics dd { margin:6px 0 0; font-size:22px; }
.invite-result { max-width:740px; padding:40px; }
.invite-result .success-symbol { color:var(--success); margin-bottom:24px; }
.invite-result .record { margin:24px 0; gap:16px; }
.flow-steps { display:flex; gap:28px; padding:0 0 20px; margin:0 0 24px; list-style:none; border-bottom:1px solid var(--border); }
.flow-steps li { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); }
.flow-steps li > span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1px solid var(--border); font-size:11px; }
.flow-steps a { color:inherit; text-decoration:none; }
.flow-steps [aria-current=step] { color:var(--action); }
.flow-steps [aria-current=step] > span { background:var(--action); color:var(--on-action); border-color:var(--action); }
.editor { grid-template-columns:150px minmax(260px,1fr) 260px; gap:18px; }
.editor-bar { position:sticky; top:0; z-index:5; padding:16px 0; background:var(--bg); }
.editor-bar h1 { font-size:24px; line-height:1.3; }
.editor-bar .save-state { display:block; font-size:11px; margin-top:5px; }
.palette { position:sticky; top:112px; }
.palette button { background:var(--surface); border:1px solid var(--border); font-weight:500; font-size:12px; padding:10px; }
.canvas { min-height:520px; border-radius:10px; padding:24px 18px; box-shadow:0 8px 30px #0002; }
.canvas .block-tools { flex-wrap:wrap; opacity:.4; }
.canvas .block:hover .block-tools,.canvas .block.is-selected .block-tools,.canvas .block:focus-within .block-tools { opacity:1; }
.canvas .block-tools button { min-height:32px; font-size:10px; }
.canvas .block-tools button:disabled { opacity:.3; cursor:default; }
.settings { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px; }
.settings label { font-size:12px; }
.editor-info { font-size:12px; color:var(--muted); margin-bottom:24px; }
.editor-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:8px; }
.editor-toolbar button { min-height:32px; padding:4px 10px; font-size:11px; }
.editor-toolbar span { font-size:11px; color:var(--muted); }
.newsletter-meta { margin-top:24px; border-top:1px solid var(--border); padding-top:20px; }
.newsletter-meta h2 { margin:0 0 16px; }
.editor-footer { margin-top:28px; }
.editor-footer details { flex:1; }
summary { cursor:pointer; font-size:14px; font-weight:600; }
summary + form, summary + div, summary + p { margin-top:20px; }
.template-grid { gap:20px; }
.template-card { padding:0; overflow:hidden; }
.template-card > h3, .template-card > p, .template-card > .button-row { margin-left:22px; margin-right:22px; }
.template-card > .button-row { margin-bottom:22px; }
.template-card > h3 { margin-top:22px; }
.template-mini { height:132px; padding:18px 35px 0; overflow:hidden; background:var(--raised); border-bottom:1px solid var(--border); }
.template-sheet { background:var(--surface); border:1px solid var(--border); border-radius:5px 5px 0 0; padding:18px; min-height:140px; transform:translateY(4px); }
.template-sheet > span { display:block; height:5px; margin-bottom:7px; border-radius:2px; background:var(--border); }
.template-sheet > span:first-child { background:var(--brand-gold); width:38%; height:7px; margin-bottom:16px; }
.template-sheet > span:nth-child(3) { width:70%; }
.template-sheet > i { display:block; height:25px; background:var(--raised); margin:12px 0; border-left:3px solid var(--action); }
.preview-frame { margin:0; border-radius:12px; overflow:hidden; }
.preview-frame figcaption { padding:12px 16px; background:var(--surface); border:1px solid var(--border); font-size:12px; }
.preview-frame iframe { border:1px solid var(--border); border-top:0; }
.pagination { display:flex; gap:16px; justify-content:space-between; align-items:center; margin:20px 0; font-size:12px; color:var(--muted); }
.plain { display:flex; flex-direction:column; justify-content:center; align-items:center; }
.plain > .flashes { width:min(100%,480px); }
.auth-layout { width:min(100%,930px); display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--surface); }
.auth-story { padding:48px 40px; background:var(--raised); display:flex; flex-direction:column; justify-content:center; }
.auth-story h2 { font-size:34px; line-height:1.2; margin:28px 0 16px; }
.auth-story p { color:var(--muted); font-size:14px; }
.auth-form { padding:44px 36px; }
.auth-form h1 { font-size:26px; }
.auth-form .lead { font-size:13px; margin-bottom:28px; }
.auth-form .button { width:100%; }
.auth-form .prefs { border:0; margin-top:24px; }
.password-field { position:relative; }
.password-field input { padding-right:84px; }
.password-field button { position:absolute; right:8px; top:4px; height:36px; border:0; background:transparent; color:var(--link); font:inherit; font-size:10px; cursor:pointer; }
.auth-note { font-size:11px; color:var(--muted); margin:22px 0 0; line-height:1.65; }
.progress { display:block; width:100%; appearance:none; border:0; height:8px; }
.progress::-webkit-progress-bar { background:var(--raised); border-radius:4px; }
.progress::-webkit-progress-value { background:var(--action); border-radius:4px; }
.progress::-moz-progress-bar { background:var(--action); }
@media (min-width:1600px) { .content { padding-left:60px; padding-right:60px; } }
@media (max-width:1250px) { .content { padding-left:26px; padding-right:26px; }.editor { grid-template-columns:120px minmax(200px,1fr) 220px; gap:12px; }.settings { padding:14px; }.welcome-panel { grid-template-columns:1fr 180px; }.newsletter-illustration { transform:scale(.85); transform-origin:center; } }
@media (max-width:1023px) { .shell { display:block; }.sidebar { position:static; height:auto; padding:24px; }.menu-toggle { display:flex; justify-content:space-between; width:calc(100% - 32px); margin:16px 16px 0; }.content { padding:0 24px 48px; }.workspace-top { height:56px; margin-bottom:24px; }.editor { grid-template-columns:1fr 260px; }.palette { position:static; grid-column:1/-1; grid-template-columns:repeat(5,1fr); }.palette h2 { grid-column:1/-1; }.editor-bar { top:0; }.sidebar-foot { margin-top:10px; }.welcome-panel h2 { font-size:27px; } }
@media (max-width:680px) { .content { padding:0 16px 40px; }.welcome-panel { grid-template-columns:1fr; padding:24px; min-height:0; }.newsletter-illustration { display:none; }.welcome-panel h2 { font-size:26px; }.stats { grid-template-columns:1fr 1fr; gap:10px; }.stats .stat:last-child:nth-child(3) { grid-column:1/-1; }.stat { padding:16px; }.stat strong { font-size:28px; }.setup-grid,.two-column,.form-grid { grid-template-columns:1fr; }.setup-card { display:grid; grid-template-columns:30px 1fr; column-gap:14px; padding:18px; }.setup-card .step-marker { grid-row:1/4; margin:0; }.setup-card h3,.setup-card p,.setup-card .text-link { grid-column:2; }.setup-card p { margin-bottom:10px; }.page-head .button { width:auto; }.section-head { align-items:flex-start; }.section-head h2 { font-size:17px; }.filter-bar { flex-wrap:wrap; }.search-field { max-width:none; min-width:100%; }.filter-bar select { width:100%; }.editor { display:flex; flex-direction:column; }.editor > * { width:100%; }.palette { display:grid; grid-template-columns:repeat(3,1fr); }.editor-bar { position:static; }.editor-bar .button-row { display:flex; width:100%; gap:8px; }.editor-bar .button-row .button { width:auto; flex:1; font-size:11px; }.settings { margin-top:12px; }.canvas { min-height:280px; }.flow-steps { gap:12px; justify-content:space-between; }.flow-steps li { font-size:10px; gap:5px; }.flow-steps li > span { width:21px; height:21px; }.auth-layout { grid-template-columns:1fr; }.auth-story { padding:24px; }.auth-story h2 { font-size:24px; margin:12px 0; }.auth-story p { margin:0; }.auth-story img { width:30px; height:30px; }.auth-form { padding:28px 24px; }.plain { padding:16px; }.invite-result { padding:24px; }.table-wrap { padding:0 16px; }.table-wrap.card { padding:0 16px; }table.stack tr:first-child { border-top:0; }table.stack td { grid-template-columns:32% 1fr; padding:6px 0; }.row { grid-template-columns:1fr auto; gap:10px; }.row > .meta { grid-column:1/-1; }.form-actions { flex-wrap:wrap; }.pagination .button { width:auto; }.template-card .button-row { display:flex; }.template-card .button-row .button { width:auto; }.template-card .button-row form { flex:1; } }
.review-preview { margin-top:24px; }
.review-preview iframe { width:100%; height:420px; }
@media(max-width:680px) { .flow-steps a { padding:8px 0; } }

/* Static layout utilities, external for the strict content security policy. */
.layout-0c63e316 { margin-top:var(--space-8) }
.layout-247033b0 { width:min(100%,420px) }
.layout-267f9ba0 { width:min(100%,460px) }
.layout-a63f50dd { margin-top:var(--space-4) }
.layout-e62001d3 { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-8);align-items:start }
.layout-dace5902 { border:0;padding:0;margin:0 0 var(--space-4) }
.layout-d9f228dd { margin-bottom:var(--space-2) }
.layout-829662da { display:flex;align-items:center;gap:var(--space-2);font-weight:400 }
.layout-e753247d { width:auto;min-height:0 }
.layout-d462248a { margin-top:0 }
.layout-eb0a0679 { margin-top:var(--space-6) }
.layout-acebf715 { margin-bottom:var(--space-6) }
.layout-81658995 { margin-bottom:var(--space-4) }
.layout-11696618 { margin:0 }
.flow-steps button { border:0; background:none; color:inherit; font:inherit; cursor:pointer; padding:0; }
.flow-steps button:hover,.flow-steps a:hover { color:var(--action); }
.canvas .block-tools { opacity:.8; }
.editor-toolbar > div { display:flex; gap:6px; }
.editor-toolbar > div .button { width:auto; }
@media(max-width:680px) { .flow-steps button { min-height:36px; } }
.template-card > p.caption { margin:0 22px 14px; }
/* Compact application layout. */
.content { padding-top:32px; }
.organization-identity { display:flex; align-items:center; gap:12px; padding:8px; min-width:0; }
.organization-identity strong { font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.organization-logo { width:42px; height:42px; object-fit:contain; flex:0 0 42px; }
.organization-fallback { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; color:var(--muted); }
.login-card { width:min(100%,440px); padding:0; }
.login-brand { display:flex; align-items:center; gap:10px; padding:30px 32px 0; font-size:20px; }
.login-card .auth-form { padding:26px 32px 32px; }
.login-card h1 { margin-bottom:24px; font-size:24px; }
.logo-preview { display:flex; justify-content:flex-start; align-items:center; border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:16px; background:var(--bg); }
.logo-preview img { max-width:100%; width:auto; height:72px; object-fit:contain; }
.logo-url-options { margin:0 0 24px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.signup-logo { width:auto; max-width:100%; max-height:72px; object-fit:contain; margin-bottom:24px; }
.template-thumbnail { height:170px; overflow:hidden; border-bottom:1px solid var(--border); background:var(--raised); }
.template-thumbnail iframe { width:250%; height:500px; transform:scale(.4); transform-origin:0 0; pointer-events:none; border:0; background:#fff; }
#add-subscriber { scroll-margin-top:24px; }
@media(max-width:680px) { .content { padding-top:24px; }.login-brand { padding:24px 24px 0; }.login-card .auth-form { padding:24px; } }

/* Newsletter workspace: compact controls, a light email canvas and a stable inspector. */
body:has([data-editor]) .content { max-width:none; }
body:has([data-editor]) .editor { grid-template-columns:156px minmax(280px,1fr) 290px;align-items:start; }
body:has([data-editor]) .editor-bar { gap:16px; }
.editor-bar h1 { overflow-wrap:anywhere; }
.editor-stage { min-width:0; }
.editor .palette { max-height:calc(100vh - 150px);overflow:auto;align-content:start; }
.editor .settings { position:sticky;top:106px;max-height:calc(100vh - 125px);overflow:auto;padding:14px; }
.editor .canvas { max-width:648px;margin:0 auto;border-radius:3px;padding:24px; }
.editor .canvas[hidden],.live-preview[hidden],[data-options][hidden],[data-newsletter-meta][hidden] { display:none; }
.canvas-masthead { font-size:13px;font-weight:700;padding:0 8px 20px; }
.canvas-masthead img { display:block;max-width:220px;max-height:48px;object-fit:contain; }
.editor .canvas .block { padding:0;border-radius:2px;margin:0; }
.editor .canvas .block-content { min-height:24px;overflow-wrap:anywhere; }
.editor .canvas .block-content p { white-space:pre-wrap; }
.editor .canvas .block-content h2,.editor .canvas .block-content h3 { font-family:inherit; }
.editor .canvas .rich-content { font-size:16px;line-height:1.6;color:#53657d; }
.rich-content p,.rich-content div { margin:0 0 12px; }
.editor .canvas .block-tools { display:none;margin:0;padding:5px;background:#eaf0f9;position:relative;z-index:1;opacity:1; }
.editor .canvas .block.is-selected > .block-tools,.editor .canvas .block:focus-within > .block-tools { display:flex; }
.editor .canvas .block-tools button { min-height:28px;padding:3px 6px;font-size:10px; }
.block-drop-zone { height:8px;border-radius:2px;transition:height .12s,background .12s; }
.editor-dragging .block-drop-zone { height:20px;background:#265dcc0a;border:1px dashed #91afe8; }
.block-drop-zone.drag-over { height:32px;background:#265dcc44;border:2px solid #265dcc; }
.drag-handle { cursor:grab; }
.canvas-columns { display:grid;min-width:0; }
.canvas-column { min-width:0;border:1px dashed #cdd7e5;padding:4px; }
.active-column { border-color:#265dcc;background:#265dcc08; }
.column-selector,.empty-column { border:0;background:transparent;color:#53657d;font-size:10px;line-height:1.4;padding:6px;cursor:pointer; }
.column-selector:hover,.empty-column:hover { color:#265dcc;background:#eaf0f9; }
.empty-column { width:100%;min-height:80px; }
.canvas .canvas-column .block-tools { flex-wrap:wrap; }
.editor-view-switch,.inspector-tabs { display:flex;gap:3px;border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:8px;flex-wrap:wrap; }
.editor-view-switch button,.inspector-tabs button { border:0;border-radius:5px;background:transparent;color:var(--muted);padding:8px;font-size:12px;cursor:pointer; }
.editor-view-switch button[aria-pressed=true],.inspector-tabs button[aria-pressed=true] { background:var(--action);color:var(--on-action); }
.live-preview { text-align:center; }
.live-preview iframe { width:100%;max-width:680px;height:760px;border:1px solid var(--border);background:#fff; }
.live-preview[data-mode=mobile] iframe { width:375px;max-width:100%; }
.live-preview pre { white-space:pre-wrap;text-align:left;overflow-wrap:anywhere;background:var(--surface);padding:24px;border:1px solid var(--border);border-radius:8px; }
.editor-alert { padding:14px;margin:12px 0;color:var(--text);background:var(--surface);border:1px solid #c54b42;border-radius:6px; }
.rich-toolbar { display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px; }
.rich-toolbar button,.rich-link-controls button { background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px;font-size:11px;cursor:pointer; }
.rich-editor { min-height:180px;max-height:380px;overflow:auto;background:#fff;color:#14213a;border:1px solid var(--border);border-radius:5px;padding:12px;line-height:1.6;font-size:15px;white-space:pre-wrap; }
.rich-editor:focus { outline:2px solid #265dcc;outline-offset:1px; }
.rich-editor p,.rich-editor div { margin:0 0 10px; }
.rich-editor a { color:#265dcc;text-decoration:underline; }
.rich-link-controls { padding:8px 0; }
.reset-style { border:0;background:none;color:var(--muted);text-decoration:underline;font-size:11px;margin:-8px 0 12px;padding:0;cursor:pointer; }
.settings input[type=color] { width:100%;height:36px;padding:3px; }
.image-library-dialog { width:min(820px,92vw);max-height:85vh;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:24px; }
.image-library-dialog::backdrop { background:#0008; }
.dialog-heading { display:flex;align-items:center;justify-content:space-between;gap:16px; }
.image-library-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:16px 0; }
.library-image { display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);cursor:pointer;overflow:hidden;text-align:left; }
.library-image:hover { border-color:var(--action); }
.library-image img { width:100%;height:110px;object-fit:contain;background:#fff; }
.library-image span { font-size:12px;overflow-wrap:anywhere; }
body.editor-focus .sidebar,body.editor-focus .menu-toggle { display:none; }
body.editor-focus .content { margin-left:0;width:100%;padding:20px 30px; }
body.editor-focus .shell { grid-template-columns:1fr; }
body.editor-focus .steps,body.editor-focus .editor-info { display:none; }
@media(min-width:1600px) { body:has([data-editor]) .editor {grid-template-columns:180px minmax(440px,1fr) 320px;} }
@media(max-width:1180px) {
  body:has([data-editor]) .editor { grid-template-columns:120px minmax(240px,1fr) 250px;gap:12px; }
  body:has([data-editor]) .content { padding-left:22px;padding-right:22px; }
  .editor .canvas { padding:16px; }
  .editor-bar .button-row { flex-wrap:wrap; }
}
@media(max-width:980px) {
  body:has([data-editor]) .editor { grid-template-columns:minmax(0,1fr) 260px; }
  .editor .palette { grid-column:1 / -1;position:static;display:flex;flex-wrap:wrap;max-height:none;gap:6px; }
  .editor .palette h2 { width:100%;margin:8px 0 0; }
  .editor .palette button { min-height:34px;padding:6px 9px; }
  .editor .settings { top:90px; }
}
@media(max-width:760px) {
  body:has([data-editor]) .editor { display:flex;flex-direction:column; }
  .editor .settings,.editor-stage,.editor .palette { width:100%; }
  .editor .settings { position:static;max-height:none; }
  .editor-bar { position:static;flex-direction:column;align-items:flex-start; }
  .editor .canvas { padding:16px; }
  body.editor-focus .content { padding:16px; }
  .editor .canvas-columns { grid-template-columns:1fr!important; }
  .image-library-dialog { padding:16px; }
}

.column-layout-bar { display:block;width:100%;text-align:left;border:0;background:#eaf0f9;color:#53657d;padding:6px 10px;font-size:11px;cursor:pointer; }
.content-checks { border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:20px; }
.content-checks h2 { font-size:16px; }
.content-checks li { font-size:13px;margin-bottom:8px; }
body.editor-focus .flow-steps { display:none; }
.block-drop-zone { position:relative; }
.editor-dragging .block-drop-zone,.block-drop-zone.drag-over { height:8px; }
.editor-dragging .block-drop-zone::before { content:"";position:absolute;inset:-5px 0; }
/* Text is edited where it appears in the newsletter. */
.canvas .inline-editable { cursor:text;min-height:1.4em;white-space:pre-wrap;outline:none; }
.canvas .inline-editable:focus { outline:1px dashed #265dcc;outline-offset:3px; }
.canvas .inline-editable[data-empty=true]::before { content:attr(data-placeholder);color:#8a98ac;pointer-events:none; }
.canvas .inline-editable.b-button { min-width:80px; }
.canvas .event-detail { margin:3px 0;font-size:14px; }
.canvas .inline-list { white-space:pre-wrap;line-height:1.6; }

[data-options] input[type="range"] {width:100%;padding:0;accent-color:var(--accent,#265DCC);cursor:pointer;}
.editor-range-value {display:flex;align-items:center;gap:8px;}
.editor-range-value input[type="number"] {width:100px;}

.image-management-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:20px;margin:20px 0;}
.image-management-card{min-width:0;margin:0;}.image-management-card>a{display:block;}.image-management-card img{width:100%;height:180px;object-fit:contain;background:var(--bg);border-radius:8px;}.image-management-card .button-row{margin-top:16px;justify-content:space-between;}

body .card details{margin-top:16px}body .card details[open] summary{margin-bottom:16px}