/* mooncrier.
   Two layers: the printed paper (vintage cells after the old niaz.online journal: framed ads,
   dark category blocks; neon at night), the one place that looks like a newspaper, for fun; and the
   app around it, modern throughout: bars, drawer, sheets, cards, forms. */

:root {
  /* "Ink & pen": the app is warm ink on warm white, friendly rather than stern; the pen (a warm red)
     is the one hand that draws on it: the logo, Place an ad, ticks, title strokes, progress and the
     reader's circles. Night: warm near-black, cream ink, the pen glowing. */
  /* the app */
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f2f0eb;
  --text: #1c1a17;
  --text-2: #67625a;
  --hair: rgba(28, 26, 23, 0.09);
  --hair-2: rgba(28, 26, 23, 0.17);
  --primary: #1c1a17;
  --primary-ink: #ffffff;
  --primary-soft: rgba(28, 26, 23, 0.06);
  --ok: #2d7a46;
  --ok-soft: rgba(45, 122, 70, 0.11);
  --warn: #9a5a00;
  --gold: #a26d12;
  --gold-soft: rgba(196, 140, 30, 0.13);
  /* Background colours: heritage printing inks (saffron, salmon, duck egg, sage). The box is the
     paper's own cream with the ink mixed in, so it keeps the paper's warmth (see .tint- below). */
  --ti-yellow: #c99a2e;
  --ti-pink: #d27d62;
  --ti-blue: #5f97a3;
  --ti-green: #7f9a62;
  --tint-yellow: color-mix(in oklab, var(--cell) 68%, var(--ti-yellow));
  --tint-pink: color-mix(in oklab, var(--cell) 70%, var(--ti-pink));
  --tint-blue: color-mix(in oklab, var(--cell) 70%, var(--ti-blue));
  --tint-green: color-mix(in oklab, var(--cell) 70%, var(--ti-green));
  --warn-soft: rgba(154, 90, 0, 0.11);
  /* Errors in raspberry, so they never look like the pen. */
  --bad: #c4203b;
  --pen: #e5432a;
  --theme-c: #faf9f6;
  --shadow-1: 0 1px 2px rgba(40, 28, 10, 0.06), 0 1px 3px rgba(40, 28, 10, 0.05);
  --shadow-2: 0 12px 34px rgba(40, 28, 10, 0.16), 0 2px 8px rgba(40, 28, 10, 0.07);
  --r: 14px;
  /* the paper: a soft warm off-white, paper rather than newsprint */
  --paper: #f7f4ee;
  --cell: #fdfcf9;
  --ink: #1c1a17;
  --ink-2: #3b362f;
  --frame: #1c1a17;
  --muted: #6e665b;
  --line: #cfc6b4;
  --head: #1c1a17;
  --headink: #ffffff;
  --accent: #c0391f;
  --ink-red: #c0391f;
  --ink-blue: #24507f;
  --ink-green: #2e6b3a;
  --grain: rgba(70, 45, 10, 0.03);
  --glow: none;
  --bc: #e5432a;
  --bc-ink: #ffffff;
  --hl: #f7dccf;
  --hl-head: #6e2318;
  --a1: #e9b949;
  --a2: #d9472b;
  --a3: #2f5d8a;
  --artline: #1c1a17;
  /* type: self-hosted faces per script (scripts/fonts.mjs), Noto for the rest */
  --rest: 'Noto Sans Hebrew', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR';
  --f-ui: 'Inter', 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Roboto, var(--rest), sans-serif;
  --f-news: 'Roboto Condensed', 'Vazirmatn', 'Arial Narrow', var(--rest), sans-serif;
  --f-serif: 'Source Serif 4', 'Vazirmatn', Georgia, 'Frank Ruhl Libre', var(--rest), serif;
  color-scheme: light;
}
:root[lang='fa'], :root[lang='ar'] {
  --f-ui: 'Vazirmatn', 'Inter', system-ui, sans-serif;
  --f-news: 'Vazirmatn', 'Roboto Condensed', sans-serif;
  --f-serif: 'Vazirmatn', 'Source Serif 4', serif;
}

/* Night: the app goes dark, the paper is printed in neon. */
:root[data-theme='night'] {
  --bg: #100f0d;
  --surface: #191714;
  --surface-2: #23201c;
  --text: #f1eadf;
  --text-2: #a69c8e;
  --hair: rgba(241, 234, 223, 0.09);
  --hair-2: rgba(241, 234, 223, 0.17);
  --primary: #f1eadf;
  --primary-ink: #100f0d;
  --primary-soft: rgba(241, 234, 223, 0.1);
  --ok: #6fdc8c;
  --ok-soft: rgba(111, 220, 140, 0.12);
  --warn: #ffc857;
  --gold: #f2c14e;
  --gold-soft: rgba(242, 193, 78, 0.14);
  /* At night the same inks are neon, mixed into the dark paper. */
  --ti-yellow: #f2b84b;
  --ti-pink: #ff8466;
  --ti-blue: #5fc4d0;
  --ti-green: #8fd67a;
  --tint-yellow: color-mix(in oklab, var(--cell) 80%, var(--ti-yellow));
  --tint-pink: color-mix(in oklab, var(--cell) 80%, var(--ti-pink));
  --tint-blue: color-mix(in oklab, var(--cell) 80%, var(--ti-blue));
  --tint-green: color-mix(in oklab, var(--cell) 80%, var(--ti-green));
  --warn-soft: rgba(255, 200, 87, 0.12);
  --bad: #ff8095;
  --pen: #ff6847;
  --theme-c: #100f0d;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, 0.55);
  --paper: #0e0d0c;
  --cell: #171512;
  --ink: #f1eadf;
  --ink-2: #cfc5b6;
  --frame: #ff6b4a;
  --muted: #9a9083;
  --line: #3a332b;
  --head: transparent;
  --headink: #ffc857;
  --accent: #ffc857;
  --ink-red: #ff6b4a;
  --ink-blue: #7fc8ff;
  --ink-green: #9dff7a;
  --grain: rgba(255, 240, 220, 0.025);
  --glow: 0 0 6px currentColor, 0 0 16px currentColor;
  --bc: #ff6847;
  --bc-ink: #0e0d0c;
  --hl: #2a2116;
  --hl-head: rgba(255, 200, 87, 0.2);
  --a1: none;
  --a2: none;
  --a3: none;
  --artline: #ffc857;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; color: var(--text); background: var(--bg); font: 400 16px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; }
body.app, .paperbg { background-color: var(--paper); background-image: radial-gradient(var(--grain) 1px, transparent 1px), radial-gradient(var(--grain) 1px, transparent 1px); background-size: 4px 4px, 7px 7px; background-position: 0 0, 2px 3px; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.ico { display: inline-flex; flex: none; }
.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[dir='rtl'] .ico.flip svg { transform: scaleX(-1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= The paper's chrome ================= */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 4px;
  height: 52px; padding: 0 6px; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 84%, transparent); color: var(--text);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: none; background: none; color: inherit; cursor: pointer; border-radius: 12px; text-decoration: none; }
.tb-btn:hover { background: var(--surface-2); }
.topbar .brand { direction: ltr; display: flex; align-items: center; min-width: 0; padding: 0 4px; font-size: 20px; text-decoration: none; overflow: hidden; }
.tb-edition { margin-inline-start: auto; margin-inline-end: 2px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 5px 10px; border: none; border-radius: 12px; background: var(--surface-2); color: inherit; cursor: pointer; font: 500 11.5px/1.2 var(--f-ui); white-space: nowrap; }
.tb-edition:hover { background: color-mix(in srgb, var(--text) 9%, var(--surface-2)); }
.tb-edition b { font-size: 13px; font-weight: 700; }
:root[dir='rtl'] .tb-edition { align-items: flex-start; }
/* The paper's bar in ink by day (at night it is already dark): the logo in cream with the red moon,
   the controls in cream. */
/* Solid, the very ink of the section headings (a see-through bar let the paper lighten it). */
:root:not([data-theme='night']) .topbar { background: var(--head); -webkit-backdrop-filter: none; backdrop-filter: none; color: #f1eadf; border-bottom-width: 0; }
/* The phone's own bar (theme-color) matches the dark bar on the paper's pages (paper.js reads this). */
:root:not([data-theme='night']):has(.topbar) { --theme-c: #1c1a17; }
/* A pen-red rule along the top of the bar (day and night), fading out at both ends. */
.topbar { border-top: 2px solid transparent; }
.topbar::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--pen) 18%, var(--pen) 82%, transparent); pointer-events: none; }
:root:not([data-theme='night']) .topbar .logo { color: #f6f1e7; }
:root:not([data-theme='night']) .topbar .logo-tag { color: rgba(241, 234, 223, 0.62); }
:root:not([data-theme='night']) .topbar .tb-btn:hover { background: rgba(255, 255, 255, 0.1); }
:root:not([data-theme='night']) .topbar .tb-edition { background: rgba(255, 255, 255, 0.1); }
:root:not([data-theme='night']) .topbar .tb-edition:hover { background: rgba(255, 255, 255, 0.16); }
/* Day/night in one tap: a moon by day, a sun at night. */
.tb-theme > span { display: contents; }
.tb-theme .th-night, :root[data-theme='night'] .tb-theme .th-day { display: none; }
:root[data-theme='night'] .tb-theme .th-night { display: contents; }
/* Print size (and, on a phone, day/night): a small card under the bar. */
.viewpop { inset: auto; top: calc(58px + env(safe-area-inset-top)); right: 8px; margin: 0; width: min(280px, calc(100vw - 16px)); padding: 6px 8px 10px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
:root[dir='rtl'] .viewpop { right: auto; left: 8px; }
.viewpop h3 { font-size: 12px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin: 10px 4px 8px; }
:root[lang='fa'] .viewpop h3 { text-transform: none; letter-spacing: 0; }
@media (max-width: 479px) { .topbar .tb-theme { display: none; } }
/* The paper's tools: in the strip at the foot on a phone or tablet; on a wide screen in the top bar
   (Sections, Search, Circled, then Place an ad at the end), and no strip. */
.tb-nav, .tb-post { display: none; }
@media (min-width: 900px) {
  .tb-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 14px; }
  .tb-link { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: none; border-radius: 10px; background: none; color: var(--text-2); font: 600 13.5px/1 var(--f-ui); text-decoration: none; cursor: pointer; }
  .tb-link .ico svg { width: 17px; height: 17px; }
  .tb-link:hover, .tb-link.on { background: var(--surface-2); color: var(--text); }
  .tb-link.on .ico svg { fill: currentColor; }
  /* By day the paper's top bar is ink (above), so its links are light on it. */
  :root:not([data-theme='night']) .tb-link { color: rgba(241, 234, 223, 0.78); }
  :root:not([data-theme='night']) .tb-link:hover, :root:not([data-theme='night']) .tb-link.on { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .tb-post { display: inline-flex; align-items: center; gap: 6px; height: 38px; margin-inline: 8px 4px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--pen); color: #fff; font: 700 13.5px/1 var(--f-ui); text-decoration: none; white-space: nowrap; }
  .tb-post .ico svg { width: 17px; height: 17px; stroke-width: 2.4; }
  .tb-post:hover { filter: brightness(1.06); }
  :root[data-theme='night'] .tb-post { color: #1a0904; }
}
/* The smallest phones: a slightly smaller logo, and the edition button without its date line. */
@media (max-width: 359px) { .topbar .brand { font-size: 17px; } .tb-edition > span { display: none; } }
@media (min-width: 480px) { .viewpop .vp-theme { display: none; } }
.crumbs {
  position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 25;
  background: color-mix(in srgb, var(--bg) 84%, transparent); color: var(--text-2);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--hair);
  font: 500 12.5px/1 var(--f-ui);
  padding: 7px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumbs b { font-weight: 700; color: var(--text); }
.crumbs .sep { opacity: 0.55; margin: 0 5px; }

/* ================= The app bar (every other page) ================= */

.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 6px;
  min-height: 56px; padding: env(safe-area-inset-top) 8px 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.ab-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: none; background: none; color: var(--text); border-radius: 12px; cursor: pointer; text-decoration: none; }
.ab-btn:hover { background: var(--surface-2); }
.ab-title { flex: 1; min-width: 0; font-weight: 650; font-size: 16.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-title small { display: block; font-weight: 500; font-size: 12px; color: var(--text-2); }
/* The page bars carry the typewritten name alone (the moon mark is the paper's own masthead's). */
.ab-brand { display: inline-flex; align-items: center; font-size: 19px; color: var(--text); text-decoration: none; padding: 0 8px; }
.ab-close { margin-inline-start: 2px; }
@media (max-width: 479px) { .appbar.has-close .ab-brand { display: none; } }
/* Desktop: the bar spans exactly the page's own column (its width and side padding: --bar-w,
   --bar-p), so the menu sits over the content's left edge and × over its right, whatever the page.
   Measured in % of the page, not vw, so a scrollbar doesn't push it off. Close is a bordered target. */
.appbar { --bar-w: 1080px; --bar-p: 16px; }
body:has(main.wrap.narrow) .appbar, body:has(main.desk-wrap) .appbar { --bar-w: 640px; }
body:has(main.notice-page) .appbar { --bar-w: 760px; --bar-p: 0px; }
body:has(main.searching) .appbar { --bar-w: 760px; --bar-p: 10px; }
body:has(main.wgp) .appbar, body:has(.flow) .appbar { --bar-w: 1040px; }
body:has(main.editor-wrap) .appbar { --bar-w: 1120px; }
@media (min-width: 720px) {
  .appbar { padding-inline: max(12px, calc((100% - var(--bar-w)) / 2 + var(--bar-p))); }
  .ab-close { border: 1px solid var(--hair-2); border-radius: 50%; width: 40px; height: 40px; }
  .ab-close:hover { border-color: var(--text); background: var(--surface-2); }
}

/* ================= Drawer ================= */

.drawer { position: fixed; inset: 0; z-index: 80; display: flex; }
.drawer-in {
  position: relative; z-index: 2; width: min(320px, 86vw); height: 100%; overflow-y: auto;
  background: var(--bg); padding: calc(14px + env(safe-area-inset-top)) 14px 24px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-2); border-start-end-radius: 22px; border-end-end-radius: 22px;
  transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root[dir='rtl'] .drawer-in { transform: translateX(100%); }
.drawer.open .drawer-in { transform: none; }
.dr-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-in .brand { display: inline-flex; align-items: center; font-size: 24px; text-decoration: none; }
.drawer-in .tagline { color: var(--text-2); font-size: 13px; margin: 2px 4px 14px; }
.dr-list { display: grid; gap: 2px; }
.dr-list a, .dr-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; text-decoration: none; font-weight: 550; font-size: 15px; background: none; border: none; cursor: pointer; text-align: start; width: 100%; }
.dr-list a:hover, .dr-link:hover { background: var(--surface-2); }
.dr-list a[aria-current] { background: var(--primary-soft); color: var(--primary); }
.drawer-in h3 { font-size: 12px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 12px 8px; }
:root[lang='fa'] .drawer-in h3 { text-transform: none; letter-spacing: 0; }
.dr-editions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.dr-editions a { padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); text-decoration: none; font-size: 14px; font-weight: 550; }
.dr-editions a[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.drawer .seg { margin: 0 8px; }
.drawer-scrim { position: absolute; inset: 0; border: none; background: rgba(8, 6, 14, 0.4); cursor: pointer; opacity: 0; transition: opacity 0.28s; }
.drawer.open .drawer-scrim { opacity: 1; }

/* ================= The sheet: a grid of one-column cells ================= */

.journal { padding-bottom: calc(84px + env(safe-area-inset-bottom)); min-height: calc(100dvh - 52px); }
.sheet {
  --cols: 4; --row: 74px; --gap: 6px; --fs: 13px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 74px;
  grid-auto-flow: row dense;
  gap: var(--gap);
  padding: var(--gap);
}
.sheet.packed { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--row); grid-auto-flow: row; }
.cell[data-h='2'] { grid-row: span 2; }
.cell[data-h='3'] { grid-row: span 3; }
.cell { position: relative; display: block; min-width: 0; color: var(--ink); text-decoration: none; transform-origin: 0 0; }
.cell.flip { transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Framed text ad (the classic box). */
.cell .frame {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  text-align: center; overflow: hidden;
  padding: 3px 6px;
  background: var(--cell);
  border: 1.5px solid var(--frame);
  font-size: var(--fs); line-height: 1.2;
}
.cell .l { display: block; max-width: 100%; overflow-wrap: anywhere; }
/* Every block is set once at one width and scaled to its column, like a printed clipping: its
   lines never move when the window changes size. paper.js (dwFit) gives each block its scale (--k,
   the column's width ÷ 160px) and the .clip class; without it, blocks simply fill their cell. */
.cell.clip .frame { inset: 0 auto auto 0; width: 160px; height: calc(100% / var(--k, 1)); scale: var(--k, 1); transform-origin: 0 0; font-size: 13.4px; }
.cell.clip.filler .frame { font-size: 11.5px; }
.cell .l-h { font-family: var(--f-news); font-weight: 700; font-size: 1.14em; line-height: 1.1; letter-spacing: 0.005em; text-wrap: balance; }
/* The poster's own line breaks print; the browser avoids a lone last word. */
.cell .l-b { font-family: var(--f-serif); font-weight: 400; font-size: 0.93em; line-height: 1.24; color: var(--ink-2); font-optical-sizing: auto; white-space: pre-line; text-wrap: pretty; }
.cell .l-run { white-space: pre-line; text-wrap: pretty; }
.cell .l-c { font-family: var(--f-news); font-weight: 700; font-size: 1.04em; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.cell .l-c.tel { unicode-bidi: isolate; }
/* A phone number is drawn, not written (ui.ts drawnNumber): its outlines, sized in em, in the line's colour. */
.cell .l-c svg { max-width: 100%; overflow: visible; fill: currentColor; vertical-align: -0.15em; }
.cell[lang='fa'] .frame, .cell[lang='ar'] .frame { line-height: 1.42; }
.cell[lang='fa'] .l-h, .cell[lang='ar'] .l-h { font-family: 'Vazirmatn', var(--f-news); font-weight: 800; font-size: 1.08em; line-height: 1.35; letter-spacing: 0; }
.cell[lang='fa'] .l-b, .cell[lang='ar'] .l-b { font-family: 'Vazirmatn', var(--f-serif); font-weight: 400; font-size: 0.9em; line-height: 1.5; }
.cell[lang='fa'] .l-c, .cell[lang='ar'] .l-c { font-family: 'Vazirmatn', var(--f-news); font-weight: 800; letter-spacing: 0.02em; }
/* National editions: a dateline with the ad's city, as in a national paper ("MANCHESTER"). */
.cell .l-w { font-family: var(--f-ui); font-weight: 700; font-size: 0.7em; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.66; }
.cell[lang='fa'] .l-w { font-family: 'Vazirmatn', sans-serif; letter-spacing: 0; text-transform: none; font-size: 0.78em; }
.cell.ad.s-1x2 .frame, .cell.ad.s-1x3 .frame { justify-content: space-between; padding: 8px 8px 7px; }
.cell.ad.s-1x2 .l-h { font-size: 1.32em; }
.cell.ad.s-1x3 .l-h { font-size: 1.5em; }
.cell.ad.s-1x2 .l-b, .cell.ad.s-1x3 .l-b { font-size: 0.97em; line-height: 1.32; }
.cell.ad.s-1x2 .l-c, .cell.ad.s-1x3 .l-c { font-size: 1.2em; }
.cell.ad { cursor: pointer; }
.cell.ad:hover .frame { background: color-mix(in srgb, var(--cell) 90%, var(--frame)); }
.cell.ad:active .frame { filter: brightness(0.95); }
.cell.ad.seeker .frame { border-style: dashed; }
:root[data-theme='night'] .cell.ad .frame { box-shadow: 0 0 6px rgba(255, 107, 74, 0.45), inset 0 0 4px rgba(255, 107, 74, 0.22); }
:root[data-theme='night'] .cell.ad .l-h { color: #fff; }
:root[data-theme='night'] .cell.ad .l-c { color: #ffc857; text-shadow: 0 0 6px rgba(255, 200, 87, 0.55); }
:root[data-theme='night'] .cell.ad .l-c svg { filter: drop-shadow(0 0 6px rgba(255, 200, 87, 0.55)); }

/* Paid space: spot ink, ornamental borders, logo cuts. A spot ink only changes the colour: the rule
   keeps its width, so the text inside sets exactly as before. */
.cell.ad.ink-red .frame { border-color: var(--ink-red); } .cell.ad.ink-red .l-h { color: var(--ink-red); }
.cell.ad.ink-blue .frame { border-color: var(--ink-blue); } .cell.ad.ink-blue .l-h { color: var(--ink-blue); }
.cell.ad.ink-green .frame { border-color: var(--ink-green); } .cell.ad.ink-green .l-h { color: var(--ink-green); }
.cell.ad.border-double .frame { border-width: 5px; border-style: double; }
.cell.ad.border-dotted .frame { border-style: dotted; border-width: 3px; }
.cell.ad.border-deco .frame { outline: 1.5px solid currentColor; outline-offset: -7px; padding: 10px 12px; }
.cell.ad.ink-red.border-deco .frame { outline-color: var(--ink-red); } .cell.ad.ink-blue.border-deco .frame { outline-color: var(--ink-blue); } .cell.ad.ink-green.border-deco .frame { outline-color: var(--ink-green); }
:root[data-theme='night'] .cell.ad.ink-red .frame { box-shadow: 0 0 10px var(--ink-red), inset 0 0 6px var(--ink-red); }
:root[data-theme='night'] .cell.ad.ink-blue .frame { box-shadow: 0 0 10px var(--ink-blue), inset 0 0 6px var(--ink-blue); }
:root[data-theme='night'] .cell.ad.ink-green .frame { box-shadow: 0 0 10px var(--ink-green), inset 0 0 6px var(--ink-green); }
/* Background colour (the paid tint), printed the way papers printed a coloured box: a fine screen of
   spot-ink dots over the paper, the ink a touch heavier at the edges, and the box ruled in a deeper
   shade of its own colour (unless a spot ink was chosen for the rule). */
.cell.ad.tint-yellow { --ti: var(--ti-yellow); --tb: var(--tint-yellow); }
.cell.ad.tint-pink { --ti: var(--ti-pink); --tb: var(--tint-pink); }
.cell.ad.tint-blue { --ti: var(--ti-blue); --tb: var(--tint-blue); }
.cell.ad.tint-green { --ti: var(--ti-green); --tb: var(--tint-green); }
.cell.ad[class*='tint-'] .frame {
  background-color: var(--tb);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ti) 42%, transparent) 0.8px, transparent 1.2px);
  background-size: 3px 3px;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--ti) 24%, transparent);
}
.cell.ad[class*='tint-']:not([class*='ink-']) .frame { border-color: color-mix(in oklab, var(--ti) 55%, var(--ink)); }
:root[data-theme='night'] .cell.ad[class*='tint-'] .frame {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ti) 20%, transparent) 0.8px, transparent 1.2px);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ti) 38%, transparent), inset 0 0 16px color-mix(in srgb, var(--ti) 22%, transparent);
}
:root[data-theme='night'] .cell.ad[class*='tint-']:not([class*='ink-']) .frame { border-color: color-mix(in oklab, var(--ti) 75%, var(--cell)); }
:root[data-theme='night'] .cell.ad[class*='tint-'] .l-b, :root[data-theme='night'] .cell.ad[class*='tint-'] .l-run { color: #f1eadf; }
.cell.slot-front .frame::before, .cell.slot-top .frame::before { content: '★'; position: absolute; top: 2px; inset-inline-end: 5px; font-size: 10px; color: var(--accent); }
/* Looks (the old wizard's templates). Classic is the default above. */
.cell.look-runin .frame { align-items: stretch; justify-content: space-between; text-align: start; padding: 4px 8px; }
.cell.look-runin .l-run { font-family: var(--f-serif); font-size: 0.95em; line-height: 1.26; color: var(--ink-2); }
.cell.look-runin .l-run .l-h { display: inline; font-family: var(--f-news); font-weight: 800; font-size: 1em; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.cell.look-runin .l-run .l-h::after { content: '.'; }
.cell.look-runin .l-run .l-b { display: inline; font-size: 1em; }
.cell.look-runin .l-c { text-align: end; }
.cell.look-ruled .frame { justify-content: center; padding: 4px 9px; }
.cell.look-ruled .l-h { font-variant: small-caps; letter-spacing: 0.05em; padding-bottom: 2px; }
.cell.look-ruled .l-b { width: 100%; margin: 2px 0; padding: 2px 0; border-top: 1px solid var(--frame); border-bottom: 1px solid var(--frame); }
.cell.look-payfirst .l-h { font-size: 1em; }
.cell.look-payfirst .l-p { font-family: var(--f-news); font-weight: 800; font-size: 1.5em; line-height: 1.05; letter-spacing: -0.01em; }
.cell[lang='fa'].look-payfirst .l-p { font-family: 'Vazirmatn', var(--f-news); font-weight: 900; }
.cell.look-bar .frame { justify-content: space-between; padding: 0 6px 4px; }
.cell.look-bar .l-h { align-self: stretch; max-width: none; margin: 0 -6px; padding: 2px 6px 3px; background: var(--frame); color: var(--cell); }
/* The bar runs edge to edge at every size: bigger blocks have more padding, so it reaches further
   (and is a little deeper); inside a Deco border it stops at the inner rule. */
.cell.ad.look-bar.s-1x2 .frame, .cell.ad.look-bar.s-1x3 .frame { padding: 0 8px 7px; }
.cell.ad.look-bar.s-1x2 .l-h, .cell.ad.look-bar.s-1x3 .l-h { margin: 0 -8px; padding: 4px 8px 5px; }
.cell.ad.look-bar.border-deco .frame { padding: 7px 12px 10px; }
.cell.ad.look-bar.border-deco .l-h { margin: 0 -5px; padding-inline: 5px; }
.cell.ad.look-bar.ink-red .l-h { background: var(--ink-red); color: #fff; }
.cell.ad.look-bar.ink-blue .l-h { background: var(--ink-blue); color: #fff; }
.cell.ad.look-bar.ink-green .l-h { background: var(--ink-green); color: #fff; }
:root[data-theme='night'] .cell.ad.look-bar .l-h { color: #160e0a; text-shadow: none; }
.cell.look-banner .frame { justify-content: space-between; }
.cell.look-banner .l-h { font-weight: 900; font-size: 1.75em; line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; }
.cell[lang='fa'].look-banner .l-h { font-size: 1.5em; line-height: 1.2; }
.cell.look-banner .l-b { font-size: 0.85em; }

/* The trust seals: small square stamps side by side just inside the frame's bottom corner, bottom
   right (bottom left in right-to-left papers), printed in the frame's own ink with the symbol left
   in paper: a check for a verified employer (at the corner), a handset for a verified phone beside
   it. The ad's label names them and the full notice spells them out. */
.cell .seals { position: absolute; bottom: 2px; inset-inline-end: 2px; z-index: 1; display: flex; gap: 2px; }
.cell .seal { display: block; width: 11px; height: 11px; background: var(--frame); -webkit-mask: center / 100% 100% no-repeat; mask: center / 100% 100% no-repeat; }
.cell .seal.seal-employer { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='m5.5 12.5 4 4 9-9' fill='none' stroke='%23000' stroke-width='3.4'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='m5.5 12.5 4 4 9-9' fill='none' stroke='%23000' stroke-width='3.4'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E"); }
.cell .seal.seal-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath transform='translate(3.6 3.6) scale(.7)' d='M5 3h4l2 5-2.6 1.6a12 12 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2.1 2C10.6 20.6 3.4 13.4 3 5.1A2 2 0 0 1 5 3z'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath transform='translate(3.6 3.6) scale(.7)' d='M5 3h4l2 5-2.6 1.6a12 12 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2.1 2C10.6 20.6 3.4 13.4 3 5.1A2 2 0 0 1 5 3z'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E"); }
.cell.ad.ink-red .seal { background: var(--ink-red); } .cell.ad.ink-blue .seal { background: var(--ink-blue); } .cell.ad.ink-green .seal { background: var(--ink-green); }
:root[data-theme='night'] .cell .seals { filter: drop-shadow(0 0 2px rgba(255, 107, 74, 0.7)); }
:root[data-theme='night'] .cell.ad.ink-red .seals { filter: drop-shadow(0 0 2px var(--ink-red)); }
:root[data-theme='night'] .cell.ad.ink-blue .seals { filter: drop-shadow(0 0 2px var(--ink-blue)); }
:root[data-theme='night'] .cell.ad.ink-green .seals { filter: drop-shadow(0 0 2px var(--ink-green)); }
/* A reply line set to the end (the run-in look) keeps clear of the seals. */
.cell.look-runin .frame:has(.seals) .l-c { padding-inline-end: 14px; }
.cell.look-runin .frame:has(.seal + .seal) .l-c { padding-inline-end: 27px; }
.seal-detail { flex-basis: 100%; font-size: 12.5px; color: var(--text-2); }
/* A logo is sized like the type around it: when an ad's type is shrunk to fit (--fit, set by
   paper.js), its logo shrinks by the same factor, so the whole ad always fits. */
.cutwrap { display: block; width: calc(48% * var(--fit, 1)); max-height: calc(34% * var(--fit, 1)); aspect-ratio: 3 / 2; }
.cutwrap svg { width: 100%; height: 100%; fill: var(--ink); }
:root[data-theme='night'] .cutwrap svg { fill: none; stroke: #ffc857; stroke-width: 1.2; filter: drop-shadow(0 0 3px #ffc857); }
/* A logo prints in the ad's spot colour, like its headline and border (a neon outline at night). */
.cell.ad.ink-red .cutwrap svg { fill: var(--ink-red); }
.cell.ad.ink-blue .cutwrap svg { fill: var(--ink-blue); }
.cell.ad.ink-green .cutwrap svg { fill: var(--ink-green); }
:root[data-theme='night'] .cell.ad.ink-red .cutwrap svg { fill: none; stroke: var(--ink-red); filter: drop-shadow(0 0 3px var(--ink-red)); }
:root[data-theme='night'] .cell.ad.ink-blue .cutwrap svg { fill: none; stroke: var(--ink-blue); filter: drop-shadow(0 0 3px var(--ink-blue)); }
:root[data-theme='night'] .cell.ad.ink-green .cutwrap svg { fill: none; stroke: var(--ink-green); filter: drop-shadow(0 0 3px var(--ink-green)); }
/* Logo positions: top (default), after the headline, in the text (wrapped), bottom. */
.cutwrap.cut-head { width: calc(48% * var(--fit, 1)); max-height: calc(34% * var(--fit, 1)); margin: 2px 0; }
/* A bottom logo comes after the text, and the box shares its free space evenly between headline,
   text, logo and reply line, so the layout balances itself whatever the logo's size (never one
   big hole above a small logo); a little room always stays above the reply line. */
.cutwrap.cut-bottom { width: calc(48% * var(--fit, 1)); max-height: calc(34% * var(--fit, 1)); margin-top: 0.3em; margin-bottom: 0.35em; }
.cell .l .cutwrap.cut-wrap { float: inline-start; width: calc(34% * var(--fit, 1)); max-height: calc(3em * var(--fit, 1)); margin: 2px 0 1px; margin-inline-end: 5px; }
.cell .l-b:has(.cut-wrap), .cell .l-run:has(.cut-wrap) { text-align: start; }
.cell .l-b:has(.cut-wrap)::after, .cell .l-run:has(.cut-wrap)::after { content: ''; display: block; clear: both; }

/* Category header (1×1): a dark block, as in the old journal. */
.cell.section {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--head); color: var(--headink);
  padding: 4px 10px; font-family: var(--f-news); font-weight: 700;
  font-size: calc(var(--fs) * 1.3); line-height: 1.12;
}
.cell.section.accent { background: var(--accent); }
.cell.section .s-n { position: absolute; top: 4px; inset-inline-end: 7px; font: 600 10px var(--f-ui); opacity: 0.7; }
:root[lang='en'] .cell.section .s-t { text-transform: uppercase; letter-spacing: 0.045em; font-size: 0.9em; }
:root[lang='fa'] .cell.section, :root[lang='ar'] .cell.section { font-family: 'Vazirmatn', sans-serif; font-weight: 900; line-height: 1.35; }
:root[data-theme='night'] .cell.section { border: 1.5px solid #ffc857; box-shadow: 0 0 10px rgba(255, 200, 87, 0.45), inset 0 0 8px rgba(255, 200, 87, 0.22); text-shadow: 0 0 8px rgba(255, 200, 87, 0.7); }
:root[data-theme='night'] .cell.section.accent { background: none; border-color: #ff6b4a; color: #ff6b4a; box-shadow: 0 0 10px rgba(255, 107, 74, 0.5); text-shadow: 0 0 8px rgba(255, 107, 74, 0.7); }

/* Main category (1×2): the colour illustration and title straight on the paper (no fill), inside
   a single border. (Night: a single neon outline, below.) */
.cell.group .frame {
  justify-content: center; gap: 5%; padding: 10px 8px;
  border-width: 1.5px;
  background: transparent;
}
.cell.group .art { width: 60%; max-height: 56%; display: flex; justify-content: center; }
.cell.group .art svg { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; }
.cell.group .a1 { fill: var(--a1); stroke: var(--artline); stroke-width: 2.5; }
.cell.group .a2 { fill: var(--a2); stroke: var(--artline); stroke-width: 2.5; }
.cell.group .a3 { fill: var(--a3); stroke: var(--artline); stroke-width: 2.5; }
.cell.group .ln { fill: none; stroke: var(--artline); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cell.group .ln.w { stroke: #fff; }
.cell.group .g-t { font-family: var(--f-news); font-weight: 800; font-size: calc(var(--fs) * 1.45); line-height: 1.08; }
:root[lang='en'] .cell.group .g-t { text-transform: uppercase; letter-spacing: 0.02em; }
:root[lang='fa'] .cell.group .g-t, :root[lang='ar'] .cell.group .g-t { font-family: 'Vazirmatn', sans-serif; font-weight: 900; font-size: calc(var(--fs) * 1.55); line-height: 1.3; }
:root[data-theme='night'] .cell.group .frame { border-color: #ffc857; box-shadow: 0 0 10px rgba(255, 200, 87, 0.45), inset 0 0 6px rgba(255, 200, 87, 0.2); }
:root[data-theme='night'] .cell.group svg { filter: drop-shadow(0 0 4px #ffc857); }
:root[data-theme='night'] .cell.group .ln.w { stroke: #ff6b4a; }
:root[data-theme='night'] .cell.group .g-t { color: #ff6b4a; text-shadow: var(--glow); }

/* Fillers ("dummies") in the holes. */
.cell.filler .frame { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); font-family: var(--f-serif); font-size: calc(var(--fs) * 0.86); font-style: italic; padding: 4px 8px; line-height: 1.3; }
a.cell.filler:hover .frame { color: var(--ink); border-color: var(--muted); }
:root[lang='fa'] .cell.filler .frame { font-style: normal; font-family: 'Vazirmatn', sans-serif; }

/* Circled ads: a red-pen ring. */
/* The red pen: every circle drawn by hand, so no two alike (paper.js gives each ad its own tilt,
   shape, size and pen weight from its id, so it's the same loop every visit), with a short second
   stroke where the pen came round past its start. */
/* Not on your own ad in a preview: its ::after is the “Yours” tag. */
.cell.ad.circled:not(.mine)::after { content: ''; position: absolute; inset: var(--pen-in, -4px -5px); border: var(--pen-w, 2.5px) solid var(--pen); border-radius: var(--pen-shape, 50% 46% 52% 48% / 46% 54% 46% 54%); transform: rotate(var(--pen-r, -1.5deg)); pointer-events: none; }
.cell.ad.circled:not(.mine)::before { content: ''; position: absolute; z-index: 1; inset: var(--pen-in2, -6px -3px); border: calc(var(--pen-w, 2.5px) * 0.85) solid var(--pen); border-radius: var(--pen-shape2, 46% 54% 50% 50% / 52% 48% 52% 48%); transform: rotate(var(--pen-r2, 4deg)); clip-path: var(--pen-tail, inset(0 0 58% 52%)); pointer-events: none; opacity: 0.9; }
:root[data-theme='night'] .cell.ad.circled:not(.mine)::after, :root[data-theme='night'] .cell.ad.circled:not(.mine)::before { box-shadow: 0 0 10px var(--pen); }
.sheet.only-circled .cell.ad:not(.circled), .sheet.only-circled .cell.filler { display: none; }
.cell.fresh .frame { animation: inkin 1.2s ease-out; }
@keyframes inkin { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.empty { text-align: center; color: var(--text-2); margin: 40px 16px; }

/* Highlight: a solid frame around the cell (in the gap between cells, so it never covers type)
   plus a soft wash of the same colour on the cell. The reading guide glides the frame from cell
   to cell; "you were here" drops one on the cell you were reading after a reflow or when a
   notice closes. */
.sheet { position: relative; }
.cell .frame, .cell.section { transition: background-color 0.35s ease-out, box-shadow 0.35s ease-out; }
:root[data-theme] .cell.lit .frame { background-color: var(--hl); transition-duration: 0.08s; }
:root[data-theme] .cell.section.lit { background-color: var(--hl-head); transition-duration: 0.08s; }
:root[data-theme] .cell.group.lit .frame { background-color: var(--hl); }
.bracket {
  position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none;
  /* One solid square frame, like the cells' own, laid over the cell's rule (see placeBracket). */
  box-shadow: inset 0 0 0 3px var(--bc);
  transition: left 0.18s cubic-bezier(0.3, 0.7, 0.3, 1), top 0.18s cubic-bezier(0.3, 0.7, 0.3, 1), width 0.18s cubic-bezier(0.3, 0.7, 0.3, 1), height 0.18s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.3s;
}
.bracket.mark { animation: br-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes br-in { from { opacity: 0; scale: 1.1; } }
.bracket.out { opacity: 0; }
.bracket b { position: absolute; top: -9px; inset-inline-start: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bc); color: var(--bc-ink); font: 700 11px/20px var(--f-ui); text-align: center; box-shadow: var(--shadow-1); }
.bracket b:empty { display: none; }
:root[data-theme='night'] .bracket { filter: drop-shadow(0 0 4px var(--bc)); }
.tourhint, .zoomhud { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font: 600 13.5px/1.2 var(--f-ui); box-shadow: var(--shadow-2); max-width: calc(100vw - 32px); }
.tourhint { bottom: calc(84px + env(safe-area-inset-bottom)); animation: rise 0.3s ease-out; }
.zoomhud { top: 45%; font-size: 15px; padding: 12px 20px; }
.tourhint .arrow { display: inline-block; animation: nudge 0.9s ease-in-out infinite; }
:root[dir='rtl'] .tourhint .arrow { transform: scaleX(-1); animation-name: nudge-rtl; }
@keyframes nudge { 50% { transform: translateX(5px); } }
@keyframes nudge-rtl { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateX(5px); } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ================= Section icons (headings and the Sections list) =================
   The group art's two-tone style. On the dark heading by day the shapes are outlined in cream, so
   the colours read as cut paper on ink; at night they are amber neon outlines like the heading's. */
.ci { --ol: var(--artline); display: block; }
.ci svg { display: block; width: 100%; height: 100%; }
.ci .a0 { fill: #fbfaf6; stroke: var(--ol); stroke-width: 2.5; stroke-linejoin: round; }
.ci .a1 { fill: var(--a1); stroke: var(--ol); stroke-width: 2.5; stroke-linejoin: round; }
.ci .a2 { fill: var(--a2); stroke: var(--ol); stroke-width: 2.5; stroke-linejoin: round; }
.ci .a3 { fill: var(--a3); stroke: var(--ol); stroke-width: 2.5; stroke-linejoin: round; }
.ci .ln { fill: none; stroke: var(--ol); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ci .ln.w { stroke: #fff; }
.cell.section:has(> .ci) { gap: calc(var(--fs) * 0.6); }
.cell.section > .ci { flex: none; width: calc(var(--fs) * 2.5); height: calc(var(--fs) * 2.5); --ol: #f6f1e7; }
.cell.section:has(> .ci) .s-t { text-align: start; min-width: 0; }
:root[data-theme='night'] .ci .a0 { fill: none; }
:root[data-theme='night'] .ci .ln.w { stroke: #ff6b4a; }
:root[data-theme='night'] .cell.section > .ci { --ol: #ffc857; }
:root[data-theme='night'] .cell.section > .ci svg { filter: drop-shadow(0 0 3px #ffc857); }

/* ================= Reading aids on the sheet (not the printed look: outside its fingerprint) ================= */
/* "You were here" (markHere): the frame is part of the cell, 1.5px out over its rule, so it moves
   and resizes with the cell whatever happens; the cell is lifted so the frame's half in the gap
   shows over its neighbours. */
.bracket.on-cell { left: -1.5px; top: -1.5px; right: -1.5px; bottom: -1.5px; transition: opacity 0.3s; }
.cell:has(> .bracket.on-cell) { z-index: 5; }

/* ================= Reading guide (a card on the paper until "Got it") =================
   A floating card (it never pushes the paper) with a blueprint of the page: thin ink lines on the
   paper's own colour, the pen marking each step. paper.js sets .gd-fig[data-step] (1-6); each step's
   marks animate from there. Reduced motion: every step shows its finished drawing, no movement. */
.guide { position: fixed; z-index: 35; inset-inline: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 360px; padding: 8px 10px 10px; border: 1px solid var(--hair-2); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); animation: gd-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (min-width: 900px) { .guide { inset-inline: auto 20px; width: 360px; margin: 0; } }
@keyframes gd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gd-head { display: flex; align-items: center; gap: 8px; padding: 0 0 6px 4px; }
.gd-head b { flex: 1; font: 700 14px/1.3 var(--f-ui); }
:root[dir='rtl'] .gd-head { padding: 0 4px 6px 0; }
.gd-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 10px; background: none; color: var(--text-2); cursor: pointer; }
.gd-x:hover { background: var(--surface-2); color: var(--text); }
.gd-x .ico svg { width: 18px; height: 18px; }
.gd-fig { border: 1px solid var(--hair); border-radius: 12px; background: var(--paper); overflow: hidden; }
.gd-foot { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; padding-inline-start: 4px; }
.gd-steps { flex: 1; display: grid; align-items: center; min-height: 2.7em; margin: 0; padding: 0; list-style: none; font: 550 13.5px/1.35 var(--f-ui); }
.gd-steps li { grid-area: 1 / 1; opacity: 0; transition: opacity 0.25s; }
.gd-steps li.on { opacity: 1; }
.gd-dots { display: flex; flex: none; }
.gd-dots button { display: grid; place-items: center; width: 14px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; }
.gd-dots button::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--hair-2); transition: width 0.2s, background-color 0.2s; }
.gd-dots button.on::before { width: 12px; background: var(--pen); }
.gd-acts { display: flex; gap: 8px; }
.gd-acts .btn { flex: 1 1 auto; padding: 0 12px; }
.gd-acts .btn .ico svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* The drawing */
.gd-svg { display: block; width: 100%; height: auto; color: var(--ink); }
.gd-svg path, .gd-svg rect, .gd-svg circle { stroke-linecap: round; stroke-linejoin: round; }
.gd-gl { fill: none; stroke: currentColor; stroke-opacity: 0.07; stroke-width: 0.6; }
.gd-page { fill: var(--cell); stroke: currentColor; stroke-opacity: 0.5; }
.gd-rule { fill: none; stroke: currentColor; stroke-opacity: 0.45; }
.gd-box { fill: var(--cell); stroke: currentColor; stroke-opacity: 0.75; }
.gd-hatch { stroke: none; }
.gd-hatchline { stroke: currentColor; stroke-opacity: 0.5; stroke-width: 0.8; }
.gd-knock { fill: var(--cell); }
.gd-t1 { fill: none; stroke: currentColor; stroke-opacity: 0.8; stroke-width: 2.2; }
.gd-t1.gd-big { stroke-width: 3; }
.gd-t2 { fill: none; stroke: currentColor; stroke-opacity: 0.32; }
.gd-t2.gd-solid { stroke-opacity: 0.6; stroke-width: 1.2; }
.gd-aa { fill: currentColor; font-family: var(--f-ui); font-size: 8.5px; font-weight: 700; text-anchor: middle; }
.gd-bi, .gd-bi-on, .gd-star, .gd-star-on { fill: none; stroke: currentColor; stroke-opacity: 0.7; stroke-width: 3; }
/* the pen */
.gd-wash { fill: var(--pen); stroke: none; opacity: 0; }
.gd-hl, .gd-aa-hl, .gd-bar-hl { fill: none; stroke: var(--pen); stroke-width: 1.8; opacity: 0; }
/* Drawn by moving a dash along the path; the gap is longer than the path and the dash starts just
   off it, so no round cap shows as a stray dot before the pen arrives. */
.gd-read { fill: none; stroke: var(--pen); stroke-width: 1.4; stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.gd-ring { fill: none; stroke: var(--pen); stroke-width: 2.2; stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.gd-n { opacity: 0; transform-box: fill-box; transform-origin: center; }
.gd-n circle { fill: var(--bc); }
.gd-n text { fill: var(--bc-ink); font-family: var(--f-ui); font-size: 7px; font-weight: 700; text-anchor: middle; }
.gd-tap { fill: none; stroke: var(--pen); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gd-bi-on, .gd-star-on { stroke: var(--pen); stroke-opacity: 1; opacity: 0; }
.gd-bi-on.gd-fill, .gd-star-on { fill: var(--pen); }
.gd-scrim { --gd-dim: 0.14; fill: #000; opacity: 0; }
.gd-panel { fill: var(--cell); stroke: currentColor; stroke-opacity: 0.75; }
.gd-sheet { transform: translateY(104px); }
.gd-grid { transform-box: view-box; transform-origin: 32.5px 24px; }
:root[dir='rtl'] .gd-grid { transform-origin: 287.5px 24px; }
/* 1: read across, row by row (the reading line, the numbers, a wash as each box is reached) */
.gd-fig[data-step='1'] .gd-read { animation: gd-draw 2.2s linear 0.15s both; }
.gd-fig[data-step='1'] .gd-n { animation: gd-pop 0.35s calc(var(--d) + 0.15s) both; }
.gd-fig[data-step='1'] .gd-wash { animation: gd-flash 0.7s calc(var(--d) + 0.15s) both; }
/* 2: each heading, then the boxes of its section */
.gd-fig[data-step='2'] .gd-hl { animation: gd-on 0.3s var(--s) both; }
.gd-fig[data-step='2'] .gd-c:not(.gd-h) .gd-wash { animation: gd-tint 0.35s var(--s) both; }
/* 3: tap a box, the notice rises */
.gd-fig[data-step='3'] .gd-c6 .gd-wash { animation: gd-flash 0.8s 0.3s both; }
.gd-fig[data-step='3'] .t-cell { animation: gd-tap 0.65s 0.3s both; }
.gd-fig[data-step='3'] .gd-sheet { animation: gd-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s both; }
.gd-fig[data-step='3'] .gd-scrim { animation: gd-dim 0.45s 0.9s both; }
/* 4: ☆ in the notice, the notice goes, the pen circles the box */
.gd-fig[data-step='4'] .t-star { animation: gd-tap 0.6s 0.3s both; }
.gd-fig[data-step='4'] .gd-star-on { animation: gd-on 0.2s 0.45s both; }
.gd-fig[data-step='4'] .gd-sheet { animation: gd-up 0.4s cubic-bezier(0.4, 0, 0.6, 1) 1s reverse both; }
.gd-fig[data-step='4'] .gd-scrim { animation: gd-dim 0.4s 1s reverse both; }
.gd-fig[data-step='4'] .gd-ring { animation: gd-draw 0.6s ease-out 1.45s both; }
.gd-fig[data-step='5'] .gd-ring, .gd-fig[data-step='6'] .gd-ring { stroke-dashoffset: 0; }
/* 5: Aa makes the print bigger or smaller */
.gd-fig[data-step='5'] .gd-aa-hl { animation: gd-on 0.3s 0.1s both; }
.gd-fig[data-step='5'] .t-aa { animation: gd-tap 0.6s 0.2s both; }
.gd-fig[data-step='5'] .gd-grid { animation: gd-zoom 2.4s ease-in-out 0.3s both; }
/* 6: the bottom bar: sections, search, circled */
.gd-fig[data-step='6'] .gd-bar-hl { animation: gd-on 0.3s 0.1s both; }
.gd-fig[data-step='6'] .gd-bi-on { animation: gd-on 0.25s var(--s) both; }
@keyframes gd-draw { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }
@keyframes gd-pop { from { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@keyframes gd-flash { 0% { opacity: 0; } 30% { opacity: 0.22; } 100% { opacity: 0; } }
@keyframes gd-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-tint { from { opacity: 0; } to { opacity: 0.12; } }
@keyframes gd-tap { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes gd-up { from { transform: translateY(104px); } to { transform: translateY(0); } }
@keyframes gd-dim { from { opacity: 0; } to { opacity: var(--gd-dim); } }
@keyframes gd-zoom { 0%, 15% { transform: scale(1); } 40%, 70% { transform: scale(1.22); } 92%, 100% { transform: scale(1); } }
:root[data-theme='night'] .gd-scrim { --gd-dim: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .guide, .guide * { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .gd-steps li, .gd-dots button::before { transition: none; }
}

/* ================= Bottom bar, sections sheet, back to top ================= */

.bottombar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around; align-items: flex-end;
  height: calc(62px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--hair);
}
.bb { flex: 1; max-width: 110px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: none; color: var(--text-2); font: 600 10.5px/1 var(--f-ui); text-decoration: none; cursor: pointer; }
.bb:hover, .bb.on { color: var(--primary); }
.bb.on .ico svg { fill: currentColor; }
/* Place an ad: a round red button raised above the bar (like the old app's), ringed in the bar's colour. */
.bb.post { color: var(--text); justify-content: flex-end; padding-bottom: 9px; gap: 4px; }
.bb.post .ico { width: 54px; height: 54px; margin-top: -24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--pen); color: #ffffff; box-shadow: 0 0 0 4px var(--surface), 0 6px 16px color-mix(in srgb, var(--pen) 38%, transparent); transition: transform 0.15s; }
.bb.post .ico svg { width: 26px; height: 26px; stroke-width: 2.4; }
.bb.post:hover .ico { transform: translateY(-2px); }
.bb.post:active .ico { transform: scale(0.95); }
:root[data-theme='night'] .bb.post .ico { color: #1a0904; box-shadow: 0 0 0 4px var(--surface), 0 0 18px var(--pen); }
.popsheet { position: fixed; inset: 0; z-index: 75; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 6, 14, 0.38); animation: fade 0.2s; }
.ps-in { width: min(520px, 100%); max-height: 78dvh; display: flex; flex-direction: column; background: var(--bg); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-2); padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); animation: slideup 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ps-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; font-size: 16px; }
.indexlist { overflow-y: auto; display: grid; gap: 2px; padding: 0 4px 6px; }
.indexlist a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 46px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 500; }
.indexlist a .ci { width: 30px; height: 30px; flex: none; }
.indexlist a.grp .ci { width: 34px; height: 34px; margin-inline: -2px; }
.indexlist a:hover { background: var(--surface-2); }
.indexlist a .n { margin-inline-start: auto; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; text-align: center; }
.indexlist a.grp { margin-top: 8px; font-weight: 750; color: var(--primary); }
.indexlist a.grp:first-child { margin-top: 0; }
@keyframes fade { from { opacity: 0; } }
@keyframes slideup { from { transform: translateY(40px); opacity: 0; } }
.totop { position: fixed; z-index: 29; bottom: calc(76px + env(safe-area-inset-bottom)); inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* A wide screen has the paper's tools in the top bar (masthead), so no strip and no room for one. */
@media (min-width: 900px) {
  .bottombar { display: none; }
  .journal { padding-bottom: 32px; }
  .totop { bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ================= The notice sheet (step two, over the paper) ================= */

.nsheet { position: fixed; inset: 0; z-index: 70; }
.ns-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 14, 0.45); opacity: 0; transition: opacity 0.28s; }
.nsheet.open .ns-backdrop { opacity: 1; }
.ns-panel {
  position: absolute; inset-inline: 0; bottom: 0; height: 93dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-2);
  transform: translateY(100%); transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nsheet.open .ns-panel { transform: none; }
.nsheet.dragging .ns-panel { transition: none; }
.ns-top { position: absolute; z-index: 3; top: 0; inset-inline: 0; height: 46px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; pointer-events: none; }
.ns-top .ab-btn { pointer-events: auto; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-1); width: 36px; height: 36px; border-radius: 50%; }
.ns-grab { position: absolute; top: 0; left: 0; right: 0; height: 22px; pointer-events: auto; touch-action: none; cursor: grab; }
.ns-grab::after { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--hair-2); }
.ns-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ns-loading { padding: 40px 20px; text-align: center; color: var(--text-2); }
@media (min-width: 900px) {
  .ns-panel { top: 0; bottom: 0; height: auto; inset-inline-start: auto; inset-inline-end: 0; width: 540px; border-radius: 0; transform: translateX(100%); }
  :root[dir='rtl'] .ns-panel { transform: translateX(-100%); }
  .nsheet.open .ns-panel { transform: none; }
  .ns-grab { display: none; }
  .ns-top { height: 56px; }
}

/* ================= Modern building blocks ================= */

.wrap { max-width: 1080px; margin: 0 auto; padding: 20px 16px 64px; }
.wrap.narrow { max-width: 640px; }
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 20px; padding: 20px; box-shadow: var(--shadow-1); }
.card + .card { margin-top: 14px; }
.card.center { text-align: center; }
.card h2 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.card > .sub:first-of-type { margin-top: 0; }
h1 { font-size: clamp(24px, 4vw, 30px); line-height: 1.18; letter-spacing: -0.015em; font-weight: 750; margin: 6px 0 8px; }
:root[lang='fa'] h1 { letter-spacing: 0; font-weight: 800; }
.sub { color: var(--text-2); font-size: 15px; margin: 0 0 16px; }
.note { color: var(--text-2); font-size: 13px; }
.muted { color: var(--text-2); }

.field { display: grid; gap: 6px; margin: 0 0 14px; }
.field > span, .label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.field > span small, .label small { font-weight: 450; color: var(--text-2); }
.field input:not([type='radio']):not([type='checkbox']):not([type='hidden']):not([type='file']), .field textarea, .field select, .input {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--hair-2); border-radius: 12px;
  padding: 12px 14px; min-height: 48px; transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.field .hint { font-size: 12.5px; color: var(--text-2); }
.field.invalid input, .field.invalid textarea { border-color: var(--bad); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1.5px solid transparent;
  font: 650 15px/1 var(--f-ui); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--primary); color: var(--primary-ink);
  transition: transform 0.08s, filter 0.15s, background 0.15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn.busy { opacity: 0.6; pointer-events: none; }
.btn.secondary { background: var(--primary-soft); color: var(--primary); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--hair-2); }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.btn.danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.block, .btn.wide { display: flex; width: 100%; }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn.icon { width: 48px; padding: 0; }
.btn .ico svg { width: 20px; height: 20px; }
:root[data-theme='night'] .btn:not(.ghost):not(.secondary):not(.danger) { box-shadow: 0 0 16px rgba(255, 107, 74, 0.35); }
.btn.busy::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: none; padding: 0; color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair-2); font-size: 13.5px; font-weight: 550; color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.tint { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.chip .ico svg { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--surface-2); color: var(--text-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--primary-soft); color: var(--bad); }
.pill .ico svg { width: 14px; height: 14px; stroke-width: 2.4; }

.seg { display: flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--surface-2); }
.seg > button, .seg > label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 0 6px; white-space: nowrap; border: none; border-radius: 10px; background: none; color: var(--text-2); font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; }
.seg > label { position: relative; }
.seg > label input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.seg > button.on, .seg > label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg.small > button { min-height: 36px; font-size: 13.5px; }
.seg .ico svg { width: 18px; height: 18px; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.choice { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--hair-2); background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .c-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); margin-bottom: 8px; }
.choice b { font-size: 15.5px; }
.choice small { color: var(--text-2); font-size: 13px; }
.choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface)); }
.choice:has(input:checked) .c-ico { background: var(--primary); color: var(--primary-ink); }
.choice:has(input:checked)::after {
  content: ''; position: absolute; top: 10px; inset-inline-end: 12px; width: 26px; height: 22px; background: var(--pen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M3 12.5c2.2 1.4 4.3 3.6 6.2 6.6C12.6 11.4 17 5.6 23.5 2.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M3 12.5c2.2 1.4 4.3 3.6 6.2 6.6C12.6 11.4 17 5.6 23.5 2.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.choice:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.switch input { appearance: none; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--hair-2); position: relative; cursor: pointer; transition: background 0.2s; margin: 0; }
.switch input::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: inset-inline-start 0.2s; }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { inset-inline-start: 21px; }

.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-2); animation: rise 0.25s ease-out; max-width: calc(100vw - 32px); }
body.doc .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
body.p-editor .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
.badge-ico { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--ok-soft); color: var(--ok); }
.badge-ico.warn { background: var(--warn-soft); color: var(--warn); }
.badge-ico.bad { background: var(--primary-soft); color: var(--bad); }
.badge-ico .ico svg { width: 30px; height: 30px; }
.msg { padding-top: 48px; }
.msg .btn { margin-top: 8px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--primary-soft); color: var(--text); margin: 0 0 14px; }
.banner.ok { background: var(--ok-soft); }
.banner.warn { background: var(--warn-soft); }
.banner > .ico { color: var(--primary); }
.banner.ok > .ico { color: var(--pen); }
.banner p { margin: 0; flex: 1; font-size: 14.5px; }
.foot { max-width: 1080px; margin: 0 auto; padding: 22px 16px 96px; color: var(--text-2); font-size: 12.5px; text-align: center; }
body.doc .foot { padding-bottom: 40px; }
.foot p { margin: 4px 0; }
.foot a { color: var(--text-2); }

/* A printed block at a fixed size (notice, post preview, desk). */
/* One ad on its own (posting's side panel and last step, the editor, the ad page's "As printed"):
   at the size it prints, one paper column at the default size, in the paper's exact shapes
   (a 1×2 is two rows and the gap between them). */
.cellbox { --fs: 14px; width: 10.5rem; max-width: 100%; margin: 0 auto; }
.cellbox .cell { width: 100%; height: auto; aspect-ratio: 168 / 84; }
.cellbox .cell[data-h='2'] { aspect-ratio: 168 / 174; }
.cellbox .cell[data-h='3'] { aspect-ratio: 168 / 264; }
/* Your ad among its neighbours, at the paper's own column width. */
.sheet.print.packed { grid-template-columns: repeat(var(--cols), var(--colw, 10.5rem)); justify-content: center; }
.cell.mine[data-tag='']::after { content: none; }

/* ================= The full notice ================= */

.n-print { position: relative; padding: 30px 16px 26px; border-bottom: 1px solid var(--hair); }
.n-print .tag { position: absolute; top: 10px; inset-inline-start: 14px; font: 600 11px var(--f-ui); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
:root[lang='fa'] .n-print .tag { text-transform: none; letter-spacing: 0; }
.n-main { max-width: 720px; margin: 0 auto; padding: 18px 18px 24px; }
.n-title { font-size: clamp(24px, 3.6vw, 32px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 750; margin: 10px 0 6px; }
:root[lang='fa'] .n-title { letter-spacing: 0; font-weight: 800; line-height: 1.4; }
.n-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text-2); font-size: 15px; margin: 0; }
.n-by b { color: var(--text); font-weight: 650; }
/* Tiles at least 160px, so a phone has two a row and a place name ("Manchester") fits whole. */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; margin: 20px 0 6px; padding: 0; list-style: none; }
.fact { display: flex; gap: 10px; align-items: center; padding: 11px 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; min-width: 0; }
.fact .ico { width: 34px; height: 34px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); align-items: center; justify-content: center; }
.fact .ico svg { width: 20px; height: 20px; }
.fact small { display: block; font-size: 12px; color: var(--text-2); font-weight: 500; }
.fact b { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.n-sec h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-2); margin: 26px 0 10px; }
:root[lang='fa'] .n-sec h2 { text-transform: none; letter-spacing: 0; font-size: 14px; }
.n-desc p { font-size: 16.5px; line-height: 1.65; margin: 0 0 12px; max-width: 66ch; }
:root[lang='fa'] .n-desc p { line-height: 1.95; }
.n-desc p.bullet { padding-inline-start: 1.1em; position: relative; margin-bottom: 6px; }
.n-desc p.bullet::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.n-desc .source { font-size: 14px; color: var(--text-2); }
.n-desc .source a { color: var(--primary); }
.n-photos { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -18px; padding-inline: 18px; scrollbar-width: none; }
.n-photos figure { margin: 0; flex: none; scroll-snap-align: start; }
.n-photos img { display: block; height: 220px; width: auto; max-width: 82vw; object-fit: cover; border-radius: 16px; background: var(--surface-2); }
.n-photos figcaption { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.n-reply { margin-top: 10px; }
.n-reply .card { padding: 18px; }
.n-closed { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); color: var(--text-2); }
.n-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--text-2); }
/* Quiet links in the footer of the notice; real buttons (Send report) keep their own colours. */
.n-meta a:not(.btn), .n-meta button:not(.btn) { color: var(--text-2); }
.n-report { margin-top: 12px; }
.n-actions {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: 8px; align-items: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--hair);
}
.n-actions .btn.main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.n-actions .btn.icon.on { color: var(--pen); border-color: var(--pen); }
.n-actions .btn.icon.on .ico svg { fill: currentColor; }
.n-actions .tel { direction: ltr; unicode-bidi: isolate; }
/* "Show number" takes the main button's place; if the check needs a tick, it takes the button's. */
.n-actions .n-call { flex: 1; min-width: 0; display: flex; justify-content: center; }
.n-call .btn.main.said { white-space: normal; line-height: 1.3; font-size: 14px; padding: 6px 16px; }
.n-call .n-check:empty { display: none; }
.verified { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 650; }
.verified .ico svg { width: 13px; height: 13px; stroke-width: 2.6; }
.notice-page { max-width: 760px; margin: 0 auto; }
.notice-page .n-print { border: none; }
@media (min-width: 900px) {
  .notice-page { margin-top: 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-1); }
  .notice-page .n-print { border-bottom: 1px solid var(--hair); }
  .notice-page .n-actions { position: sticky; bottom: 0; background: color-mix(in srgb, var(--surface) 90%, transparent); }
}

/* ================= Place an ad ================= */

.flow { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }
.progress { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 29; height: 3px; margin: 0 -16px 22px; background: linear-gradient(var(--hair), var(--hair)), var(--bg); }
.progress span { display: block; height: 100%; width: 25%; background: var(--pen); border-radius: 0 3px 3px 0; transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.flow-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.flow-aside { display: none; }
@media (min-width: 960px) {
  /* Wide enough for your ad among its neighbours at the size they print (two paper columns). */
  .flow-grid { grid-template-columns: minmax(0, 1fr) 420px; }
  .flow-aside { display: block; }
  .flow-aside .sticky { position: sticky; top: 90px; }
}
html:not(.js) .js-only { display: none !important; }
.js .step { display: none; }
.js .step.active { display: block; animation: stepin 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes stepin { from { opacity: 0; transform: translateY(10px); } }
.step { margin: 0 0 28px; }
.step h1 { margin-top: 4px; }
/* The step's buttons stay pinned to the bottom of the screen, so the way on is always in view
   however long the step is. */
.step-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 10px; align-items: center;
  margin: 22px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--hair);
}
.done-wrap .step-actions { position: static; background: none; border: none; backdrop-filter: none; }
.step-actions .btn.primary-act { flex: 1; }
.step-actions [data-prev] { flex: none; }
@media (min-width: 600px) {
  .step-actions { margin-inline: 0; padding-inline: 0; }
  .step-actions .btn.primary-act { flex: 0 1 auto; min-width: 200px; margin-inline-start: auto; }
}
.flow-aside .card.with-stage .aside-single { display: none; }
/* "There's more below": while the step continues under the pinned bar, the content fades into it,
   a thin accent line along its top shows how far down you are, and a chip invites you on. */
.step-actions::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; background: linear-gradient(to bottom, transparent, var(--bg)); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.step-actions.more::before { opacity: 1; }
.step-actions.more { border-top-color: transparent; box-shadow: 0 -10px 24px rgba(40, 28, 10, 0.07); }
.step-actions .scrollline { position: absolute; top: -1px; left: 0; height: 3px; width: 0; border-radius: 0 3px 3px 0; background: var(--pen); opacity: 0; transition: width 0.15s linear, opacity 0.2s; }
:root[dir='rtl'] .step-actions .scrollline { left: auto; right: 0; border-radius: 3px 0 0 3px; }
.step-actions.more .scrollline { opacity: 1; }
.more-chip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); background: var(--surface); color: var(--primary); font: 600 13px/1.2 var(--f-ui); box-shadow: var(--shadow-2); cursor: pointer; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.step-actions.more .more-chip { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.more-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: nudge-down 1.2s ease-in-out infinite; }
@keyframes nudge-down { 50% { transform: translateY(3px); } }
.flow-aside .stage { margin-bottom: 14px; }
/* Look picker and the AI's suggestions: small printed thumbnails of your own ad. */
.looks, .suggests { display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: 10px; }
@media (max-width: 440px) { .looks, .suggests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.look-opt, .suggest { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--hair-2); background: var(--surface); cursor: pointer; text-align: start; font: inherit; color: inherit; }
.look-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none; }
.look-opt:has(input:checked), .suggest.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.look-opt:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.look-opt .mini, .suggest .mini { display: block; padding: 8px 6px; border-radius: 10px; }
.look-opt .cellbox, .suggest .cellbox { --fs: 9.5px; width: 120px; max-width: 100%; margin: 0 auto; }
.look-opt .cellbox .cell, .suggest .cellbox .cell { height: auto; aspect-ratio: 168 / 84; pointer-events: none; }
/* Every size as wide as a 1×1 (its words as big), in its printed shape: a taller ad is a taller tile. */
.look-opt .cellbox .cell.s-1x2, .suggest .cellbox .cell.s-1x2 { aspect-ratio: 168 / 174; width: 100%; }
.look-opt .cellbox .cell.s-1x3, .suggest .cellbox .cell.s-1x3 { aspect-ratio: 168 / 264; width: 100%; }
.look-name { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 0 2px; }
.look-name b { font-size: 13px; font-weight: 650; }
.look-name small { font-size: 12px; color: var(--text-2); font-weight: 600; }
.look-opt:has(input:checked) .look-name small, .suggest.on .look-name small { color: var(--primary); }
.suggest::before { content: ''; position: absolute; top: -1px; inset-inline-end: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); opacity: 0; }
.suggest.on::before { opacity: 1; }

/* Confirm dialog (dwConfirm): centred card, the safe choice on the left. */
.popsheet.confirm { align-items: center; padding: 16px; z-index: 95; }
.popsheet.confirm .ps-in { width: min(420px, 100%); border-radius: 20px; padding: 22px 22px 18px; animation: pop 0.22s cubic-bezier(0.2, 1.2, 0.4, 1); }
.cf-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.cf-text { margin: 0 0 18px; color: var(--text-2); font-size: 14.5px; }
.cf-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn.danger-fill { background: var(--bad); color: #fff; }
.bigtext { position: relative; }
.bigtext textarea { min-height: 170px; font-size: 17px; padding: 14px 16px 34px; }
.bigtext .count { position: absolute; bottom: 10px; inset-inline-end: 14px; font-size: 12px; color: var(--text-2); }
.examples { margin: -4px 0 18px; }
.examples .label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-2); font-size: 13px; }
.altcall { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--hair-2); text-decoration: none; margin-top: 18px; }
.altcall:hover { border-color: var(--primary); }
.altcall .ico { width: 40px; height: 40px; border-radius: 12px; background: #34c759; color: #fff; align-items: center; justify-content: center; }
.altcall b { display: block; font-size: 15px; }
.altcall small { color: var(--text-2); font-size: 13px; }
.stage { border-radius: 20px; padding: 16px; margin: 0 0 18px; border: 1px solid var(--hair); }
.stage .sheet { padding: 0; }
.cell.ghost { opacity: 0.42; filter: grayscale(0.4); pointer-events: none; }
/* "Yours" in a preview: the neighbours are greyed out, and a small label sits just above the ad,
   clear of its frame, so the border and colour you pick show exactly as they'll print. */
.cell.mine { z-index: 2; }
.cell.mine::after { content: attr(data-tag); position: absolute; bottom: 100%; inset-inline-start: 0; margin-bottom: 3px; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font: 700 10px/1.4 var(--f-ui); pointer-events: none; }
.stage .sheet, .pv .sheet, .minisheet .sheet { margin-top: 16px; }
.stage-cap { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); margin: 0 2px 10px; }
.ai-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 14px; margin: 0 0 16px; }
.ai-note .ico { color: var(--primary); }
.ai-note.warn { background: var(--warn-soft); }
.ai-note.bad { background: var(--primary-soft); }
.ai-note p { margin: 0; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.size { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 16px; border: 1.5px solid var(--hair-2); background: var(--surface); cursor: pointer; text-align: center; }
.size input { position: absolute; opacity: 0; pointer-events: none; }
.size .vis { display: flex; flex-direction: column; gap: 2px; width: 34px; }
.size .vis i { display: block; height: 15px; border: 1.5px solid var(--text-2); border-radius: 2px; }
.size b { font-size: 14px; }
.size small { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.size:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface)); }
.size:has(input:checked) .vis i { border-color: var(--primary); background: var(--primary-soft); }
.size:has(input:checked) small { color: var(--primary); }
/* Size tiles: your own ad at each size, bottoms aligned so the names line up. */
.size .mini { display: flex; align-items: flex-end; justify-content: center; flex: 1; width: 100%; box-sizing: border-box; padding: 8px 6px; border-radius: 10px; }
.size .cellbox { --fs: 9px; width: 100%; max-width: 104px; margin: 0; }
.size .cellbox .cell, .size .cellbox .cell[data-h] { height: auto; aspect-ratio: 168 / 84; pointer-events: none; }
.size .cellbox .cell.s-1x2 { aspect-ratio: 168 / 174; }
.size .cellbox .cell.s-1x3 { aspect-ratio: 168 / 264; }
.size .cellbox .vis { margin: 0 auto; }
.cutpick [data-cut-remove] { margin-top: 8px; }
/* "Your wording is kept": shown when a suggestion is picked after the poster wrote their own. */
.wording-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.wording-offer[hidden] { display: none; }
.wording-offer span { flex: 1; min-width: 180px; }
.count-line { display: block; text-align: end; font-variant-numeric: tabular-nums; }
.count-line.over { color: var(--primary); font-weight: 700; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.swatch { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1.5px solid var(--hair-2); background: var(--surface); cursor: pointer; font-size: 13.5px; font-weight: 550; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hair-2); background: var(--surface-2); }
.swatch:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.extras-head { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 10px; }
.extras-head .price { font-size: 13px; color: var(--text-2); }
.summary { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair); margin: 4px 0 16px; }
.summary div { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.summary .total { padding-top: 8px; border-top: 1px dashed var(--hair-2); font-weight: 750; font-size: 16px; }
.done-wrap { text-align: center; padding-top: 16px; }
.done-wrap [data-devlink] .btn { white-space: normal; line-height: 1.3; padding: 10px 16px; }
.done-wrap .badge-ico { width: 76px; height: 76px; border-radius: 24px; animation: pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
.countdown { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 18px; padding: 8px 14px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.tips { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tips li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.tips li .ico { color: var(--pen); }
.tips li .ico svg { width: 18px; height: 18px; }

/* ================= Manage your ad ================= */

/* The editor: summary on top; preview (sticky) beside tabs for wording, details, upgrade, settings. */
.editor-wrap { max-width: 1120px; padding-bottom: 110px; }
.ed-head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.ed-head-main { flex: 1 1 380px; min-width: 0; }
.ed-head h1 { margin: 10px 0 0; }
.ed-stats { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ed-stats .stat { min-width: 84px; padding: 10px 12px; }
.ed-stats .stat b { font-size: 20px; }
.ed-stats .stat small { display: flex; align-items: center; gap: 4px; }
.ed-stats .stat .ico svg { width: 14px; height: 14px; }
.ed-stats .btn { align-self: center; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ed-preview .card { padding: 14px; }
.ed-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
.ed-pv-head .seg { flex: 0 1 260px; }
.pv { border-radius: 14px; }
.pv.paperbg { padding: 12px 10px; }
.pv .sheet { padding: 0; }
.pvn { padding: 14px 16px; background: var(--bg); border: 1px solid var(--hair); max-height: 460px; overflow: auto; }
.pvn h3 { margin: 10px 0 2px; font-size: 20px; line-height: 1.2; }
.pvn .n-by { font-size: 14px; margin-bottom: 10px; }
.pvn-desc p { font-size: 14.5px; line-height: 1.6; margin: 0 0 8px; }
.pvn-photos { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; }
.pvn-photos img { height: 70px; border-radius: 10px; }
@media (min-width: 980px) {
  .editor { grid-template-columns: 400px minmax(0, 1fr); gap: 20px; }
  .ed-preview { position: sticky; top: 76px; }
}
.tabs { position: sticky; top: calc(57px + env(safe-area-inset-top)); z-index: 6; display: flex; gap: 4px; padding: 6px; margin: 0 0 12px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border: none; border-radius: 11px; background: none; color: var(--text-2); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.tabs button .ico svg { width: 18px; height: 18px; }
.tabs button:hover { color: var(--text); background: var(--surface-2); }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.tabs button.on .ico { color: var(--primary); }
.js .tabpanel:not(.on) { display: none; }
.tabpanel + .tabpanel { margin-top: 14px; }
.js .nojs-save { display: none; }
.size.off { opacity: 0.45; cursor: not-allowed; }
.placement { display: grid; gap: 8px; margin: 0 0 6px; }
.switch.row { padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--hair-2); background: var(--surface); }
.switch.row:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.switch.row > span:first-child { flex: 1; min-width: 0; }
.switch.row b { display: block; font-size: 14.5px; font-weight: 600; }
.switch.row small { color: var(--text-2); font-size: 12.5px; }
.switch.row .cost { font-weight: 700; font-size: 14px; white-space: nowrap; }
.paybar { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair-2); box-shadow: var(--shadow-2); }
.paybar small { display: block; color: var(--text-2); font-size: 12px; }
.paybar b { font-size: 20px; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.danger-zone b { display: block; font-size: 14.5px; }
.danger-zone small { color: var(--text-2); font-size: 12.5px; }
.warnbox { border-color: var(--bad); margin-bottom: 14px; }
.savebar { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--text); color: var(--bg); box-shadow: var(--shadow-2); animation: rise 0.25s ease-out; max-width: calc(100vw - 24px); }
.savebar > span { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-inline-end: 8px; white-space: nowrap; }
.savebar .ico svg { width: 18px; height: 18px; }
.savebar .btn.ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); }
.savebar .btn.ghost:hover { background: color-mix(in srgb, var(--bg) 12%, transparent); }
/* Trust seal tab */
.trust-opt { display: flex; gap: 14px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--hair-2); background: var(--surface); margin-top: 12px; }
.trust-opt .t-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ok-soft); color: var(--ok); }
.trust-opt b { font-size: 16px; }
.trust-opt p { margin: 4px 0 12px; color: var(--text-2); font-size: 14px; }
.t-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-tag { font-weight: 700; font-size: 14px; margin-inline-end: auto; }
.trust-form { margin: 12px 0 4px; padding: 16px; border-radius: 16px; background: var(--surface-2); }
.trust-done, .trust-wait { display: flex; gap: 16px; align-items: flex-start; }
.trust-done h2, .trust-wait h2 { margin-top: 4px; }
.seal-big { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ok); color: #fff; }
.seal-big.warn { background: var(--warn-soft); color: var(--warn); }
.seal-big.wait { background: var(--surface-2); color: var(--text-2); }
.seal-big .ico svg { width: 28px; height: 28px; stroke-width: 2.6; }
.spinner { flex: none; width: 40px; height: 40px; margin: 4px; border-radius: 50%; border: 3px solid var(--hair-2); border-top-color: var(--primary); animation: spin 0.8s linear infinite; }
@media (max-width: 520px) { .savebar > span { display: none; } .tabs button span { font-size: 13px; } .tabs button { padding: 0 10px; } }

.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 960px) { .dash { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } .dash .col { display: grid; gap: 14px; } .dash .card + .card { margin-top: 0; } }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; }
.stat { padding: 12px; border-radius: 14px; background: var(--surface-2); }
.stat b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -0.01em; }
.stat small { color: var(--text-2); font-size: 12.5px; }
.timeline { display: flex; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.timeline li { flex: 1; font-size: 11.5px; color: var(--text-2); font-weight: 550; }
.timeline li::before { content: ''; display: block; height: 4px; border-radius: 2px; background: var(--hair-2); margin-bottom: 6px; }
.timeline li.done::before { background: var(--pen); }
.timeline li.now { color: var(--text); font-weight: 700; }
.timeline li.now::before { background: linear-gradient(90deg, var(--pen) 50%, var(--hair-2) 50%); }
.addons { display: grid; gap: 8px; margin: 12px 0 16px; }
.addon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--hair-2); background: var(--surface); cursor: pointer; }
.addon input[type='checkbox'] { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.addon .what { flex: 1; min-width: 0; }
.addon .what b { display: block; font-size: 14.5px; font-weight: 600; }
.addon .what small { color: var(--text-2); font-size: 12.5px; }
.addon .cost { font-weight: 700; font-size: 14px; white-space: nowrap; }
.addon:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.addon select { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--text); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 10px 0; }
.thumbs figure { margin: 0; position: relative; }
.thumbs img { width: 100%; height: 100px; object-fit: cover; border-radius: 12px; display: block; background: var(--surface-2); }
.thumbs figcaption { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.thumbs form { position: absolute; top: 6px; inset-inline-end: 6px; }
.thumbs form button { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.thumbs form button .ico svg { width: 16px; height: 16px; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border-radius: 16px; border: 1.5px dashed var(--hair-2); text-align: center; cursor: pointer; color: var(--text-2); font-size: 14px; }
.drop:hover, .drop.over { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.drop input { display: none; }
.minisheet .sheet { padding: 0; }
.cutpick #cutpreview svg { width: 120px; height: 80px; fill: var(--text); border: 1px dashed var(--hair-2); border-radius: 8px; margin-top: 8px; }

/* ================= Search ================= */

.searchhead { padding: 14px 10px 8px; max-width: 760px; margin: 0 auto; }
/* Search has no strip at the foot (it's the paper's), so it keeps no room for one. */
.journal.searching { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
/* The results sit under the box, as wide as it (the grid takes as many columns as fit there). */
.journal.searching .sheet { max-width: 760px; margin-inline: auto; }
body:not(:has(.bottombar)) .totop { bottom: calc(20px + env(safe-area-inset-bottom)); }
.searchbox { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--hair-2); box-shadow: var(--shadow-1); }
:root[dir='rtl'] .searchbox { padding: 4px 14px 4px 4px; }
.searchbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.searchbox .ico { color: var(--text-2); }
/* The spark: this box understands meaning. It shimmers only while the AI is reading a longer
   search (paper.js adds .thinking), so the motion always means something. */
.searchbox .sb-spark { color: var(--pen); }
.searchbox .sb-spark svg { fill: color-mix(in srgb, var(--pen) 18%, transparent); }
.searchbox.thinking .sb-spark svg { animation: spark-think 0.9s ease-in-out infinite; transform-origin: 50% 46%; }
@keyframes spark-think {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.22) rotate(18deg); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) { .searchbox.thinking .sb-spark svg { animation: none; opacity: 0.6; } }
/* What it understood, under the box. */
.chips.understood { align-items: center; }
.chips.understood .u-label { display: inline-flex; align-items: center; gap: 5px; margin-inline-end: 2px; font: 600 12px/1 var(--f-ui); color: var(--text-2); }
.chips.understood .u-label .ico svg { width: 14px; height: 14px; color: var(--pen); }
.searchbox input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 17px; color: var(--text); padding: 10px 6px; outline: none; }
.searchbox .btn { min-height: 42px; border-radius: 12px; }
.searchhead .chips { margin-top: 10px; }
.search-empty { max-width: 560px; margin: 16px auto; padding: 0 16px; }
/* Search over the paper (paper.js openSearch): the whole screen on a phone, a panel dropping from
   the top on a wide screen; under an ad's sheet (70), over the bars (30). */
.srsheet { position: fixed; inset: 0; z-index: 60; }
.sr-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 14, 0.42); opacity: 0; transition: opacity 0.22s; }
.srsheet.open .sr-backdrop { opacity: 1; }
.sr-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); opacity: 0; transform: translateY(-14px); transition: opacity 0.2s, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.srsheet.open .sr-panel { opacity: 1; transform: none; }
.sr-top { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 6px 8px 10px; border-bottom: 1px solid var(--hair); }
.sr-top .searchbox { flex: 1; min-width: 0; }
.sr-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 calc(24px + env(safe-area-inset-bottom)); transition: opacity 0.15s; }
.sr-body.loading { opacity: 0.5; }
.sr-body .sheet { max-width: 760px; margin-inline: auto; }
.sr-chips { max-width: 760px; margin: 2px auto 8px; padding: 0 10px; }
@media (min-width: 900px) {
  .sr-panel { inset: 0 auto auto 50%; width: min(820px, calc(100% - 48px)); max-height: min(86vh, 920px); border-radius: 0 0 18px 18px; box-shadow: var(--shadow-2); transform: translate(-50%, -14px); }
  .srsheet.open .sr-panel { transform: translate(-50%, 0); }
  .sr-top { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sr-panel, .sr-backdrop { transition: none; } }
.search-empty h2 { font-size: 13px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin: 20px 0 10px; }
:root[lang='fa'] .search-empty h2 { text-transform: none; letter-spacing: 0; }

/* ================= The call screen ================= */

body.p-desk { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--pen) 7%, var(--bg)), var(--bg)); }
.desk-wrap { min-height: calc(100dvh - 56px); display: flex; align-items: center; justify-content: center; padding: 20px 16px 40px; }
.phone { width: 100%; max-width: 340px; border-radius: 44px; padding: 36px 22px 28px; text-align: center; background: #121018; color: #f4f2f8; font-family: var(--f-ui); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ph-brand { font-size: 12px; opacity: 0.6; }
.ph-name { font-size: 27px; font-weight: 600; margin: 4px 0 2px; }
.ph-status { font-size: 15px; opacity: 0.65; min-height: 22px; }
.ph-card { position: relative; margin: 18px 0 10px; padding: 12px 14px; background: #fbf7ee; color: #1c1a17; border: 1.5px solid #1c1a17; text-align: center; font: 14px/1.4 var(--f-serif); }
.ph-card b { display: block; margin-bottom: 4px; font-family: var(--f-news); font-size: 1.12em; }
.ph-card .stamp { position: absolute; inset-inline-end: 8px; bottom: 4px; font: 600 11px var(--f-ui); color: #1e7f43; }
.ph-caption { font-size: 14px; opacity: 0.75; min-height: 40px; margin: 10px 0; }
.ph-row { display: flex; justify-content: space-around; margin: 14px 4px 18px; }
.rb { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: inherit; background: none; border: none; cursor: pointer; }
.rb span { width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.rb.ok span { background: #34c759; color: #fff; }
.rb.on span { background: #f4f2f8; color: #14121a; }
.call { width: 72px; height: 72px; border-radius: 50%; border: none; font-size: 28px; background: #34c759; color: #fff; cursor: pointer; margin-top: 8px; box-shadow: 0 8px 24px rgba(52, 199, 89, 0.4); }
.call.end { background: #ff3b30; box-shadow: 0 8px 24px rgba(255, 59, 48, 0.4); }
.ph-type { display: flex; gap: 6px; margin: 10px 0; }
.ph-type input { flex: 1; min-width: 0; border-radius: 20px; border: none; padding: 10px 14px; font-size: 15px; }
.ph-type .btn { border-radius: 20px; background: #34c759; border: none; color: #fff; box-shadow: none; min-height: 40px; }
.ph-alt { display: block; margin-top: 16px; font-size: 12.5px; opacity: 0.6; }

@media (max-width: 420px) {
  .choice { padding: 14px 12px; }
  .choice b { font-size: 14.5px; }
}
@media (min-width: 900px) { .bb { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Where: the bar above the paper, its sheet, and the national edition's invitation ---------- */
.wherebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px 8px; }
.where-btn { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.where-btn:hover { border-color: var(--primary); }
.where-btn > .ico svg { color: var(--primary); }
.wb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wb-text b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-text small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wb-change { flex: none; margin-inline-start: 4px; padding-inline-start: 10px; border-inline-start: 1px solid var(--hair-2); font-size: 13px; font-weight: 650; color: var(--primary); }
.where-clear { font-size: 13px; font-weight: 600; color: var(--text-2); }
.wherecard { display: grid; gap: 12px; margin: 2px 12px 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair-2); box-shadow: var(--shadow-1, none); }
.wherecard.note { border-color: color-mix(in srgb, var(--primary) 40%, var(--hair-2)); }
.wc-text { display: flex; flex-direction: column; gap: 3px; }
.wc-text b { font-size: 15.5px; font-weight: 700; }
.wc-text span { font-size: 14px; color: var(--text-2); }
.wc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wherecard .chip small, .where-in .chip small { font-size: 11.5px; font-weight: 700; color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.chip.on small { color: inherit; }
.where-in { display: grid; gap: 10px; padding: 2px 14px 14px; overflow-y: auto; }
.where-in h4 { margin: 8px 0 0; font: 700 12px/1.2 var(--f-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.where-in .hint { margin: -2px 0 0; font-size: 12.5px; color: var(--text-2); }
.where-in .locate { justify-self: start; }
.where-more { margin: 6px 0 0; }
.locate.busy { opacity: 0.6; pointer-events: none; }
.linkish { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }
.linkish .ico svg { width: 16px; height: 16px; }
/* The drawer's editions: each country folds open to its cities (a few; the search finds the rest). */
.dr-editions { display: grid; gap: 4px; padding: 0; }
.ed-country { border-radius: 12px; }
.ed-country summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; cursor: pointer; list-style: none; font-weight: 650; font-size: 15px; }
.ed-country summary::-webkit-details-marker { display: none; }
.ed-country summary::after { content: ''; width: 7px; height: 7px; margin-inline-start: auto; border: solid var(--text-2); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translateY(-2px); transition: transform 0.18s; }
.ed-country[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.ed-country summary:hover { background: var(--surface-2); }
.ed-country summary small { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ed-cities { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 10px; }
.dr-editions a.ed-nation { font-weight: 700; }
.dr-editions a.ed-wire { justify-self: start; margin: 6px 8px 0; }

/* The place picker: one search box, a handful of results; before typing, recent places and the
   page's own short lists. */
.pp { display: grid; gap: 10px; }
.drawer .pp { padding: 0 8px; }
.pp-search { position: relative; display: flex; align-items: center; }
.pp-search .ico { position: absolute; inset-inline-start: 12px; color: var(--text-2); pointer-events: none; display: flex; }
.pp-search .ico svg { width: 18px; height: 18px; }
.pp-search input { width: 100%; min-height: 44px; padding: 10px 14px; padding-inline-start: 40px; border-radius: 12px; border: 1.5px solid var(--hair-2); background: var(--surface); color: var(--text); font: inherit; font-size: 15.5px; -webkit-appearance: none; appearance: none; }
.pp-search input::-webkit-search-cancel-button { cursor: pointer; }
.pp-search input:focus { outline: none; border-color: var(--text-2); box-shadow: 0 0 0 3px var(--hair); }
.pp.busy .pp-search::after { content: ''; position: absolute; inset-inline-end: 38px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hair-2); border-top-color: var(--primary); animation: spin 0.7s linear infinite; }
.pp-hits { display: grid; gap: 2px; max-height: min(52vh, 420px); overflow-y: auto; margin: -4px 0 0; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); }
.pp-opt { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.pp-opt[aria-selected='true'] { background: var(--primary-soft); }
.pp-name { font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-name b { font-weight: 800; color: var(--primary); }
.pp-within { grid-column: 1; font-size: 12.5px; color: var(--text-2); }
.pp-n { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.pp-opt.k-country .pp-name, .pp-opt.k-wire .pp-name { font-weight: 750; }
.pp-none { display: grid; gap: 3px; padding: 12px; font-size: 14px; }
.pp-none span { color: var(--text-2); font-size: 13px; }
.pp-rest { display: grid; gap: 10px; }
.pp-rest[hidden], .pp-recent[hidden] { display: none; }
.pp-recent { display: grid; gap: 8px; }
.pp h4, .pp-recent h4 { margin: 4px 0 0; font: 700 12px/1.2 var(--f-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
:root[lang='fa'] .pp h4 { text-transform: none; letter-spacing: 0; }
.drawer .pp-recent h4 { margin-inline: 4px; }
.pp-recent .chip small { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.chips-more { align-self: center; font-size: 12.5px; color: var(--text-2); padding: 0 4px; }
/* An empty neighbourhood shows the rest of the city under this heading. */
.elsewhere { margin: 14px 12px 8px; font: 700 12.5px/1.2 var(--f-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.empty-where { margin-top: 12px; }

/* ---------- Logo picker: one box (posting step 3 and the editor) ---------- */
.sr-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.logo-pick { display: grid; gap: 14px; margin: 0 0 16px; }
.logo-pick:not(.has) .logo-tile, .logo-pick:not(.has) .logo-opts { display: none; }
.logo-pick.has .drop { display: none; }
.logo-pick.has { grid-template-columns: 148px minmax(0, 1fr); align-items: start; }
@media (max-width: 520px) { .logo-pick.has { grid-template-columns: 1fr; } .logo-pick.has .logo-tile { max-width: 200px; } }
.logo-pick:has(.sr-file:focus-visible) .drop, .logo-pick:has(.sr-file:focus-visible) .logo-art { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.logo-tile { position: relative; }
.logo-art { display: grid; place-items: center; height: 112px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--hair-2); cursor: pointer; }
.logo-art:hover { border-color: var(--primary); }
.logo-art img, .logo-art svg { max-width: 100%; max-height: 86px; }
.logo-art svg { fill: var(--ink); }
:root[data-theme='night'] .logo-art img { filter: invert(1); }
.logo-x { position: absolute; top: -9px; inset-inline-end: -9px; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); background: var(--text); color: var(--bg); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); }
.logo-x:hover { background: var(--primary); color: var(--primary-ink); }
.logo-x .ico svg { width: 15px; height: 15px; }
.logo-opts { display: grid; gap: 10px; min-width: 0; }
.logo-opts .field { margin: 0; }
.logo-wrap-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.logo-wrap-hint[hidden] { display: none; }
.logo-wrap-hint b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--text); }
.logo-wrap-hint .linkish { display: inline; font-size: inherit; }
/* Logo sizes, per position. */
/* Small, Medium and Large step up by about 1.4× each (width and the share of the box's height). */
.cutwrap.size-s { width: calc(34% * var(--fit, 1)); max-height: calc(24% * var(--fit, 1)); }
.cutwrap.size-l { width: calc(68% * var(--fit, 1)); max-height: calc(48% * var(--fit, 1)); }
.cell .l .cutwrap.cut-wrap.size-s { width: calc(24% * var(--fit, 1)); max-height: calc(2.1em * var(--fit, 1)); }
.cell .l .cutwrap.cut-wrap.size-l { width: calc(48% * var(--fit, 1)); max-height: calc(4.2em * var(--fit, 1)); }

/* ---------- Where, in the top bar: the edition button picks city and neighbourhood ---------- */
.tb-edition.is-where b { display: inline-flex; align-items: center; gap: 4px; max-width: 46vw; }
.tb-edition.is-where b .ico svg { width: 13px; height: 13px; }
.tbe-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbe-caret { flex: none; width: 0; height: 0; margin: 3px 0 0 2px; border: 4px solid transparent; border-top-color: currentColor; opacity: 0.85; }
.where-now { margin: 0 0 2px; font-size: 14px; color: var(--text-2); }
.where-now b { color: var(--text); }
/* A first-visit note under the edition button: floats over the paper, never pushes it down. */
.where-hint { position: fixed; z-index: 40; top: calc(60px + env(safe-area-inset-top)); inset-inline-end: 10px; width: min(380px, calc(100vw - 20px)); display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair-2); box-shadow: var(--shadow-2); animation: slideup 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.where-hint::before { content: ''; position: absolute; top: -7px; inset-inline-end: 38px; width: 12px; height: 12px; background: var(--surface); border-top: 1px solid var(--hair-2); border-left: 1px solid var(--hair-2); transform: rotate(45deg); }
.where-hint p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.where-hint p b { display: block; margin-bottom: 2px; font-size: 15px; color: var(--text); }
.where-hint .chip small { font-size: 11.5px; font-weight: 700; color: var(--primary); }
/* A narrowed paper says so in the section strip: "Hackney ×". */
/* One fixed height, chip or no chip, so the strip never jumps. */
.crumbs { display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 28px; padding-block: 0; }
.crumb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumb-near { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 8px; line-height: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.2); color: inherit; font-weight: 700; text-decoration: none; }
.crumb-near:hover { background: rgba(255, 255, 255, 0.32); }
.crumb-near .ico svg { width: 12px; height: 12px; }

/* ---------- Scrollbars: thin and quiet, in the paper's own colours ---------- */
/* Firefox and current Chrome/Edge read the standard properties; strips that hide their bar
   (chips, tabs, photos) keep scrollbar-width: none, which is more specific than these. */
html, * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-2) 42%, transparent) transparent; }
:root[data-theme='night'], :root[data-theme='night'] * { scrollbar-color: color-mix(in srgb, var(--primary) 50%, transparent) transparent; }
/* Safari reads these: a slim pill floating in a transparent track, coral under the pointer. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--text-2) 42%, transparent); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--primary); }
:root[data-theme='night'] ::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--primary) 50%, transparent); }
:root[data-theme='night'] ::-webkit-scrollbar-thumb:hover { background-color: var(--primary); box-shadow: 0 0 6px var(--primary); }

/* ---------- The notice's footer: "Claim it" and "Report this ad" as one row of matching links ---------- */
.n-meta { align-items: center; gap: 10px 22px; }
.n-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13.5px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-2) 40%, transparent); text-underline-offset: 3px; cursor: pointer; }
.n-link:hover { color: var(--text); text-decoration-color: currentColor; }
.n-link .ico svg { width: 15px; height: 15px; }
.n-report { margin: 0; }
.n-report > summary { list-style: none; }
.n-report > summary::-webkit-details-marker { display: none; }
.n-report[open] { flex-basis: 100%; }
.n-report[open] > summary { color: var(--text); }

/* ---------- Form fields: a real arrow on dropdowns, and a calm ink focus ring (red reads as an error) ---------- */
.field select, select.input {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f675b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px; background-position: right 14px center;
}
[dir='rtl'] .field select, [dir='rtl'] select.input { background-position: left 14px center; }
:root[data-theme='night'] .field select, :root[data-theme='night'] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8afa2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.field input:focus, .field textarea:focus, .field select:focus, .input:focus, .searchbox:focus-within {
  border-color: color-mix(in srgb, var(--text) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 9%, transparent);
}

/* Posting, step 3: "Prints in: Hackney, London · Change"; Change turns the line into a place search. */
.prints-line { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 14px; border-radius: 12px; border: 1.5px solid var(--hair-2); background: var(--surface); }
[dir='rtl'] .prints-line { padding: 6px 14px 6px 8px; }
.prints-line[hidden], .prints-pick[hidden] { display: none; }
.prints-line > .ico { color: var(--primary); display: flex; }
.prints-line > .ico svg { width: 18px; height: 18px; }
.prints-name { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; min-width: 0; flex: 1; }
.prints-name b { font-size: 15.5px; font-weight: 700; }
.prints-name small { font-size: 13px; color: var(--text-2); }
.prints-pick .pp-hits { max-height: 300px; }
/* Inside a form field the picker keeps room for its search icon. */
.field .pp-search input:not([type='radio']):not([type='checkbox']):not([type='hidden']):not([type='file']) { padding-inline-start: 40px; }

/* The printed phone number: a list of verified numbers, or a box; what's wrong shows under it. */
.phone-field > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.phone-back { font-size: 13px; }
.phone-back[hidden], .phone-field select[hidden], .phone-field input[hidden] { display: none; }
.field .phone-note { color: var(--bad); }
.phone-field.invalid input:not([type='radio']):not([type='checkbox']):not([type='hidden']):not([type='file']) { border-color: var(--bad); }

/* Posting, step 3: the checks so far. The typesetter's first check is ticked (or flagged for an
   editor's look); the second check, of their edits when the ad is sent, waits as an empty circle. */
.checks { list-style: none; display: grid; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.checks[hidden] { display: none; }
.checks li { display: flex; align-items: flex-start; gap: 10px; }
.checks .ck { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 0; border-radius: 50%; }
.checks .ck svg { width: 13px; height: 13px; }
.checks .ck-done .ck { background: var(--ok); color: #fff; }
.checks .ck-done .ck .ico:last-child { display: none; }
.checks.warn .ck-done .ck { background: var(--warn); }
.checks.warn .ck-done .ck .ico:first-child { display: none; }
.checks.warn .ck-done .ck .ico:last-child { display: flex; }
.checks .ck-todo .ck { border: 1.5px solid var(--text-2); opacity: 0.7; }
.checks .ck-todo .ck-text { color: var(--text-2); }
.checks .ck-text { line-height: 20px; }
:root[data-theme='night'] .checks .ck-done .ck { color: #0e0d0c; }

/* The phone box: the country code (fixed, or a short list) joined to the number. */
.tel-in { display: flex; align-items: stretch; width: 100%; border: 1.5px solid var(--hair-2); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.tel-in[hidden] { display: none; }
.tel-in:focus-within { border-color: var(--text-2); box-shadow: 0 0 0 3px var(--hair); }
.tel-cc { flex: none; display: flex; align-items: center; padding: 0 12px; border: 0; border-inline-end: 1px solid var(--hair-2); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
select.tel-cc { -webkit-appearance: none; appearance: none; cursor: pointer; padding-inline-end: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f675b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 14px; background-position: right 8px center; }
select.tel-cc:focus { outline: none; }
.field .tel-in input.tel-num:not([type='radio']):not([type='checkbox']):not([type='hidden']):not([type='file']) { flex: 1; min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-variant-numeric: tabular-nums; }
.phone-field.invalid .tel-in { border-color: var(--bad); }

/* The Text box with a logo in it: a layer behind the box marks the [logo] markers. The one that
   places the logo is tinted; any others are struck through (sending drops them). */
.mark-wrap { position: relative; display: block; border-radius: 12px; background: var(--surface); }
.field .mark-wrap textarea { position: relative; z-index: 1; display: block; width: 100%; background: transparent; }
.mark-back { position: absolute; inset: 0; box-sizing: border-box; border-style: solid; border-color: transparent; color: transparent; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; overflow: hidden; pointer-events: none; }
.mark-back mark { color: transparent; background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 4px; }
.mark-back s { color: transparent; text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 2px; background: color-mix(in srgb, var(--bad) 12%, transparent); border-radius: 4px; }
.field .mark-note { display: block; color: var(--warn); }
.mark-note[hidden] { display: none; }

/* Paid options: the price in a gold tag, and a gold outline once chosen, so what costs money is
   never mistaken for what's free. */
.prem { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.extras-head .prem { font-size: 12.5px; }
.switch.row .prem { margin-inline: 8px; }
.size.paid-opt:has(input:checked), .look-opt.paid-opt:has(input:checked), .suggest.paid-opt.on, .switch.row.paid-opt:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold-soft) 70%, var(--surface)); }
.size.paid-opt:has(input:checked) .vis i { border-color: var(--gold); background: var(--gold-soft); }
.size.paid-opt:has(input:checked) small, .look-opt.paid-opt:has(input:checked) .look-name small:not(.prem), .suggest.paid-opt.on .look-name small:not(.prem) { color: var(--gold); }
.look-opt:has(input:checked) .look-name small.prem, .suggest.on .look-name small.prem, .size:has(input:checked) small.prem { color: var(--gold); }
.suggest.paid-opt.on::before { background: var(--gold); }

/* A paid ad's preview wears a gold crown seal on its corner (beside the red "Your ad" label) once any
   paid option is on: a bigger size, colour, border, logo, bold look or placement.
   Crown: Lucide's "crown" (ISC; THIRD_PARTY_NOTICES.md). */
.cell.mine.paid::before, .mini-bar.paid .mb-ad::after {
  content: ''; position: absolute; z-index: 3; top: -11px; inset-inline-end: -11px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--paper); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.56 3.27a.5.5 0 0 1 .88 0l2.95 5.6a1 1 0 0 0 1.52.3l4.27-3.67a.5.5 0 0 1 .8.52l-2.83 10.24a1 1 0 0 1-.96.74H5.81a1 1 0 0 1-.96-.74L2.02 6.02a.5.5 0 0 1 .8-.52l4.27 3.67a1 1 0 0 0 1.52-.3z'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") no-repeat 50% 46% / 13px 13px; pointer-events: none;
}
:root[data-theme='night'] .cell.mine.paid::before, :root[data-theme='night'] .mini-bar.paid .mb-ad::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1406' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.56 3.27a.5.5 0 0 1 .88 0l2.95 5.6a1 1 0 0 0 1.52.3l4.27-3.67a.5.5 0 0 1 .8.52l-2.83 10.24a1 1 0 0 1-.96.74H5.81a1 1 0 0 1-.96-.74L2.02 6.02a.5.5 0 0 1 .8-.52l4.27 3.67a1 1 0 0 0 1.52-.3z'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); }

/* "Max standout": the badge on the priciest, most eye-catching extra's title. */
.standout { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #fff; font: 800 10.5px/1.4 var(--f-ui); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
:root[data-theme='night'] .standout { color: #1b1406; box-shadow: 0 0 8px rgba(242, 193, 78, 0.45); }
:root[lang='fa'] .standout { letter-spacing: 0; text-transform: none; font-family: 'Vazirmatn', var(--f-ui); }
/* Inside a form field, the phone box's country list keeps to its own small width beside the number. */
.field .tel-in select.tel-cc { flex: none; width: auto; min-height: 0; margin: 0; border: 0; border-inline-end: 1px solid var(--hair-2); border-radius: 0; box-shadow: none; padding: 0 26px 0 12px; background-color: var(--surface-2); font-size: 15px; }
.field .tel-in select.tel-cc:focus { box-shadow: none; border-color: var(--hair-2); }

/* The reply line (box number, phone, reference) always prints: if an ad is still too full at the
   smallest type (paper.js marks it .squeezed), its body text gives way instead. */
.cell .frame > .l-c, .cell .frame > .l-h, .cell .frame > .l-p, .cell .frame > .cutwrap, .cell .frame > .l-w { flex-shrink: 0; }
.cell .frame.squeezed > .l-b, .cell .frame.squeezed > .l-run { min-height: 0; overflow: hidden; }
/* Tall blocks keep a little breathing room between their parts (the free space is shared on top
   of it), and a headline bar never touches the text under it. */
.cell.ad.s-1x2 .frame, .cell.ad.s-1x3 .frame { row-gap: 0.25em; }
.cell.ad.look-bar .l-h { margin-bottom: 0.2em; }

/* Step 3: what the typesetter read from the ad (pay live from the wording, the rest from the
   description), as small tags under the Text field. "No pay given" is dashed and asks for it. */
.readout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 16px; }
.readout-lead { font-size: 12.5px; color: var(--text-2); margin-inline-end: 2px; }
.rtag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hair); font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.rtag > span:not(.ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtag svg { width: 14px; height: 14px; flex: none; color: var(--text-2); }
.rtag[data-fact-pay]:not(.tag-missing) { background: var(--ok-soft); border-color: transparent; }
.rtag[data-fact-pay]:not(.tag-missing) svg { color: var(--ok); }
.rtag.tag-missing { background: none; border-style: dashed; border-color: var(--hair-2); color: var(--text-2); font-weight: 550; cursor: help; }

/* Step 3: the wording, as a chat with the typesetter. Their requests on one side; the typesetter's
   versions, printed at their real size in the chosen look, on the other. Tap a version to use it. */
.wording-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wording-head small { font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; }
.wording-head small.low { color: var(--warn); }
.thread { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; background: var(--surface); }
.cmsg { max-width: 88%; font-size: 14px; line-height: 1.4; }
.cmsg.you { align-self: flex-end; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: var(--primary-soft); color: var(--text); overflow-wrap: anywhere; }
[dir='rtl'] .cmsg.you { border-radius: 16px 16px 16px 4px; }
.cmsg.ts { align-self: flex-start; }
.cmsg.say { padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--surface-2); color: var(--text); }
[dir='rtl'] .cmsg.say { border-radius: 16px 16px 4px 16px; }
.cmsg.say.bad { color: var(--bad); }
.cmsg.wait { color: var(--text-2); font-style: italic; animation: chat-wait 1.2s ease-in-out infinite; }
@keyframes chat-wait { 50% { opacity: 0.45; } }
.proof-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.proof-row.own { align-self: flex-end; align-items: flex-end; }
.vbub { display: block; max-width: 100%; padding: 9px 12px; border: 1.5px solid var(--hair-2); border-radius: 16px 16px 16px 4px; background: var(--surface-2); text-align: start; font: inherit; font-size: 14px; line-height: 1.45; color: var(--text-2); cursor: pointer; transition: border-color 0.15s, color 0.15s; overflow-wrap: anywhere; }
.vbub .vh { color: var(--text); font-weight: 700; }
.vbub:hover, .vbub:focus-visible { color: var(--text); }
[dir='rtl'] .vbub { border-radius: 16px 16px 4px 16px; }
.proof-row.own .vbub { border-radius: 16px 16px 4px 16px; }
[dir='rtl'] .proof-row.own .vbub { border-radius: 16px 16px 16px 4px; }
.proof-row.on .vbub { border-color: var(--primary); background: var(--surface); color: var(--text); }
.proof-row .note { margin: 0; max-width: 20rem; font-size: 13px; color: var(--text-2); }
.proof-row .in-use { color: var(--primary); font-weight: 700; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.quick .chip:disabled { opacity: 0.45; cursor: default; }
.composer { display: flex; align-items: center; gap: 8px; padding: 3px; padding-inline-start: 14px; border: 1.5px solid var(--hair-2); border-radius: 999px; background: var(--surface); }
.composer:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.composer input[data-ask] { flex: 1; min-width: 0; width: auto; height: auto; padding: 8px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 16px; font-family: inherit; color: var(--text); outline: none; appearance: none; }
.composer .send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--primary); color: var(--primary-ink); cursor: pointer; }
.composer .send .ico svg { width: 18px; height: 18px; stroke-width: 2.2; }
.composer .send:disabled { opacity: 0.4; cursor: default; }
.rtag.tag-missing { cursor: pointer; }

/* The looks the typesetter suggested (each with wording written for it) carry a ✦. */
.look-opt .sug { display: none; color: var(--gold); }
.look-opt.suggested .sug { display: inline; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The wording step is a chat screen, edge to edge: the heading with the ad (small, in the corner),
   then the messages (the only part that scrolls), then the quick buttons and the ask box, between
   the top bar and the step's buttons. */
.chat-screen .flow { padding-bottom: 0; }
.js .chat-step.active { display: flex; flex-direction: column; height: calc(100dvh - 81px - env(safe-area-inset-top)); margin: -22px -16px 0; padding-top: 10px; }
.chat-step .chat-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 16px 10px; }
.chat-step .ch-title { display: grid; gap: 2px; min-width: 0; }
.chat-step .ch-title h1 { margin: 0; font-size: 24px; }
.chat-step .ch-title small { font-size: 12.5px; font-weight: 550; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chat-step .ch-title small.low { color: var(--warn); }
.chat-step .readout { flex: none; margin: 0; padding: 0 16px 10px; }
.chat-step .thread { flex: 1 1 auto; min-height: 0; border-block: 1px solid var(--hair); }
.chat-step .chat-foot { flex: none; display: grid; gap: 8px; padding: 10px 16px 0; }
.chat-step .chat-foot .ai-note { margin: 0; }
.chat-step .step-actions { margin: 10px 0 0; padding-inline: 16px; }
@media (min-width: 600px) { .chat-step .step-actions { padding-inline: 16px; } }
/* The ad: small by the heading; tap it to edit. */
.proof-area { flex: none; display: grid; justify-items: center; gap: 4px; }
.wording-proof { cursor: pointer; border-radius: 10px; }
.wording-proof .mini { display: block; padding: 5px; border-radius: 10px; box-shadow: var(--shadow-1); }
.wording-proof .cellbox { display: block; width: 8rem; max-width: none; }
/* In the corner it's always a 1×1 window: a taller ad shows its top, fading out at the bottom. */
.chat-head .wording-proof .mini { height: calc(4rem + 10px); overflow: hidden; }
.chat-head .wording-proof:not([data-size='1x1']) .mini { -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%); mask-image: linear-gradient(to bottom, #000 58%, transparent 96%); }
.chat-head .proof-area.zoom .wording-proof .mini { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.wording-proof .cell { pointer-events: auto; }
.proof-hint { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--primary); }
/* Editing on a phone: the ad zooms up to the middle of the screen, the rest dimmed behind it. */
.proof-area.zoom { position: fixed; inset: 0; z-index: 60; align-content: start; justify-items: center; gap: 12px; padding: calc(72px + env(safe-area-inset-top)) 16px 16px; overflow-y: auto; }
/* The backdrop fades in behind the ad as it zooms up, and out as it goes back to its corner. */
.proof-scrim { position: fixed; inset: 0; z-index: 59; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.proof-scrim.on { opacity: 1; pointer-events: auto; }
.proof-area.zoom .wording-proof .mini { box-shadow: var(--shadow-2); }
.proof-area.zoom .edit-bar { animation: eb-in 0.3s 0.1s both cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes eb-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .proof-scrim { transition: none; } .proof-area.zoom .edit-bar { animation: none; } }
.proof-area.zoom .wording-proof { cursor: default; }
/* Every size at the same width, so the words are as big to edit in a 1×3 as in a 1×1 (a taller ad
   reaches further down; the layer scrolls if it must). */
.proof-area.zoom .wording-proof .cellbox,
.proof-area.zoom .wording-proof[data-size] .cellbox { width: min(21rem, calc(100vw - 48px)); }
.proof-area.zoom .proof-hint, .proof-area.in-aside .proof-hint { display: none; }
.proof-zoom body { overflow: hidden; }
/* On wide screens the side panel shows the ad itself, large and editable in place. */
.proof-area.in-aside { margin-bottom: 14px; }
.proof-area.in-aside .wording-proof { cursor: text; }
/* (Stretched, so the box's width can be a share of the panel's.) */
.proof-area.in-aside { justify-items: stretch; }
.proof-area.in-aside .wording-proof .mini { padding: 12px; box-shadow: none; }
.proof-area.in-aside .wording-proof .cellbox { width: 21rem; max-width: 100%; margin: 0 auto; }
/* Taller sizes as wide as a 1×1, unless the window is too short to show them whole (then only as
   much narrower as it takes, keeping room for the editing controls under them). */
.proof-area.in-aside .wording-proof[data-size='1x2'] .cellbox { width: min(21rem, calc((100vh - 330px) * 168 / 174)); }
.proof-area.in-aside .wording-proof[data-size='1x3'] .cellbox { width: min(21rem, calc((100vh - 330px) * 168 / 264)); }
.proof-area.in-aside .edit-bar { justify-self: center; }
/* What can be typed in shows itself; the logo can be tapped. */
.wording-proof [contenteditable] { outline: 1px dashed color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; border-radius: 0; cursor: text; transition: outline-color 0.15s; }
.wording-proof [contenteditable]:hover { outline-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.wording-proof [contenteditable]:focus { outline: 1px dashed var(--primary); }
.wording-proof .cutwrap.tappable { cursor: pointer; }
.chat-step.placing .wording-proof .l-b, .proof-area.placing .wording-proof .l-b { outline: 1px dashed var(--gold); cursor: crosshair; }
.chat-step.placing .wording-proof .cutwrap { outline: 1px dashed var(--gold); outline-offset: 1px; border-radius: 0; }
/* While editing: Done, the length, and the logo's place and size. */
.edit-bar { display: grid; gap: 10px; width: min(22rem, 100%); }
.edit-bar[hidden] { display: none; }
.edit-bar .eb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.edit-bar .count-line { text-align: start; font-size: 12.5px; color: var(--text-2); }
.edit-bar .eb-logo { display: grid; gap: 8px; }
.edit-bar .eb-logo[hidden] { display: none; }
.edit-bar .eb-group { display: grid; gap: 4px; }
.edit-bar .eb-group .label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.edit-bar .eb-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.edit-bar .eb-seg button { flex: 1 1 auto; padding: 7px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.edit-bar .eb-seg button[aria-pressed='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.edit-bar .hint { margin: 0; font-size: 12.5px; color: var(--gold); font-weight: 600; }
@media (min-width: 960px) {
  .js .chat-step.active { height: calc(100dvh - 120px); margin: 0; padding-top: 0; }
  .chat-step .chat-head { padding-inline: 0; }
  .chat-step .chat-head .proof-area { display: none; }
  .chat-step .readout, .chat-step .chat-foot { padding-inline: 0; }
  .chat-step .thread { border: 1px solid var(--hair); border-radius: 16px; }
  .chat-step .step-actions { padding-inline: 0; }
}

/* Under each version: "✓ In use" or a "Use this" button, then what changed. */
.vmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 13px; color: var(--text-2); }
.proof-row.own .vmeta { justify-content: flex-end; }
.vmeta .in-use { color: var(--primary); font-weight: 700; }
.vmeta .use-this { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Their ad's page while it waits for them: the one thing to do, at the top. */
/* Plain like the other cards: the Publish button carries the colour. */
.publish-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.publish-box h2 { margin: 0 0 2px; font-size: 18px; }
.publish-box .sub { margin: 0; }
.publish-box .btn { flex: none; }

/* Which version a request changes, quoted like a reply: in their request, and above the ask box
   while an earlier version is in use. Tapping a quote scrolls to that version and lights it up. */
.quote { display: grid; gap: 1px; width: 100%; margin: 0 0 6px; padding: 5px 8px 5px 10px; border: 0; border-inline-start: 3px solid var(--primary); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--surface) 70%, transparent); text-align: start; font: inherit; font-size: 12.5px; line-height: 1.35; color: var(--text-2); cursor: pointer; }
[dir='rtl'] .quote { border-radius: 8px 0 0 8px; }
.quote b { color: var(--primary); font-weight: 700; font-size: 11.5px; }
.quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmsg.you { display: grid; }
.reply-to { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.reply-to[hidden] { display: none; }
.reply-to .rt-label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--text-2); }
.reply-to .quote { margin: 0; background: var(--surface); }
.reply-to .rt-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; font-size: 20px; line-height: 1; color: var(--text-2); cursor: pointer; }
.reply-to .rt-x:hover { background: var(--surface); color: var(--text); }
.vmeta .vnum { font-weight: 700; color: var(--text); }
.proof-row.flash .vbub { animation: v-flash 1.5s ease-out; }
@keyframes v-flash { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--chat-green, var(--gold)) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* A problem with a box, said under it. */
.field-error { display: block; font-size: 12.5px; font-weight: 600; color: var(--bad); }
.field-error[hidden] { display: none; }
.field.invalid .tel-in { border-color: var(--bad); }
[data-too-long].flash { animation: tl-flash 0.9s ease-out; }
@keyframes tl-flash { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 30%, transparent); } }
/* The typesetter's first check, under the preview. */
.stage-check { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.stage-check[hidden] { display: none; }
.stage-check .ico svg { width: 16px; height: 16px; }
.stage-check > span:not(.ico) { flex: 1 1 auto; min-width: 0; }
.stage-check.warn { color: var(--warn); }

/* Dragging the logo: it can be picked up while editing; a copy follows the finger, a guide line
   shows where it will land (a bar between the parts, a caret among the words). */
.chat-step.editing .wording-proof .cutwrap.tappable, .proof-area.in-aside .wording-proof .cutwrap.tappable { cursor: grab; touch-action: none; }
.wording-proof .cutwrap.dragging { opacity: 0.25; }
.logo-ghost { position: fixed; z-index: 80; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)); }
.logo-ghost svg { display: block; width: 100%; height: 100%; }
.drop-mark { position: fixed; z-index: 79; pointer-events: none; background: var(--gold); border-radius: 2px; }
.drop-mark[hidden] { display: none; }
.logo-dragging, .logo-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.edit-bar .eb-drag { color: var(--text-2); font-weight: 500; }

/* "We read" sits with the heading, beside the small ad. */
.chat-step .ch-title .readout { margin: 6px 0 0; padding: 0; gap: 4px; }
.chat-step .ch-title .readout-lead { width: 100%; }

/* ---- The chat, in the colours people know from their messaging apps ----
   A soft wallpaper; their requests in light green bubbles on the right; the typesetter's words in
   white bubbles on the left, signed in teal; quotes with a teal bar. Versions of the ad stay little
   pieces of newsprint (they're the ad), the one in use ringed in green with a green "In use";
   a send button in the same green. Day and night as those apps have them. */
.chat-step {
  --chat-bg: #efeae2; --chat-in: #ffffff; --chat-out: #d9fdd3; --chat-text: #111b21; --chat-meta: #667781;
  --chat-green: #00a884; --chat-green-ink: #ffffff; --chat-name: #008069; --chat-bar: #06cf9c;
  --chat-quote-in: #f0f2f5; --chat-quote-out: #c7f0c0; --chat-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
:root[data-theme='night'] .chat-step {
  --chat-bg: #0b141a; --chat-in: #202c33; --chat-out: #005c4b; --chat-text: #e9edef; --chat-meta: #8696a0;
  --chat-green: #00a884; --chat-green-ink: #0b141a; --chat-name: #06cf9c; --chat-bar: #06cf9c;
  --chat-quote-in: #1a2329; --chat-quote-out: #025144; --chat-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.3);
}
.chat-step .thread { background: var(--chat-bg); }
.cmsg.you { background: var(--chat-out); color: var(--chat-text); border-radius: 12px 12px 4px 12px; padding: 7px 11px; box-shadow: var(--chat-shadow); }
[dir='rtl'] .cmsg.you { border-radius: 12px 12px 12px 4px; }
.cmsg.say { background: var(--chat-in); border: 0; border-radius: 12px 12px 12px 4px; padding: 7px 11px; color: var(--chat-text); box-shadow: var(--chat-shadow); }
[dir='rtl'] .cmsg.say { border-radius: 12px 12px 4px 12px; }
.cmsg.say::before { content: '✦ Typesetter'; display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--chat-name); }
:root[lang='fa'] .cmsg.say::before { content: '✦ حروف‌چین'; }
/* What it couldn't do: a plain message, marked with a red rule, not shouted in red. */
.cmsg.say.bad { color: var(--chat-text); box-shadow: inset 3px 0 0 var(--bad), var(--chat-shadow); }
[dir='rtl'] .cmsg.say.bad { box-shadow: inset -3px 0 0 var(--bad), var(--chat-shadow); }
.cmsg.wait { font-style: normal; color: var(--chat-meta); }
.cmsg.wait::after { content: ' …'; animation: chat-wait 1.2s ease-in-out infinite; }
/* Quotes (in a request, and in the bar above the box): a teal bar and name. */
.chat-step .quote { border-inline-start-color: var(--chat-bar); background: var(--chat-quote-in); color: var(--chat-meta); }
.chat-step .quote b { color: var(--chat-name); }
.cmsg.you .quote { background: var(--chat-quote-out); }
/* Versions: little pieces of newsprint. */
.vbub { background: var(--cell); border: 1px solid var(--hair-2); border-inline-start: 4px solid var(--text-2); border-radius: 6px; color: var(--ink-2, var(--text)); font-family: var(--f-serif); font-size: 14.5px; line-height: 1.4; box-shadow: var(--chat-shadow, 0 1px 2px rgba(0, 0, 0, 0.05)); }
[dir='rtl'] .vbub, .proof-row.own .vbub, [dir='rtl'] .proof-row.own .vbub { border-radius: 6px; }
.vbub .vh { font-family: var(--f-news); font-weight: 700; font-size: 15px; letter-spacing: 0.005em; color: var(--ink, var(--text)); }
.proof-row:not(.on) .vbub { opacity: 0.8; }
.proof-row:not(.on) .vbub:hover { opacity: 1; }
.proof-row.on .vbub { border-color: color-mix(in srgb, var(--chat-green) 50%, var(--hair-2)); border-inline-start-color: var(--chat-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-green) 20%, transparent), var(--chat-shadow); }
.vmeta { gap: 4px 8px; font-size: 12.5px; color: var(--chat-meta); }
.vmeta .vnum { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--chat-in) 75%, transparent); color: var(--chat-meta); font-size: 11.5px; font-weight: 700; box-shadow: var(--chat-shadow); }
.vmeta .in-use { padding: 1px 9px; border-radius: 999px; background: var(--chat-green); color: var(--chat-green-ink); font-size: 11.5px; font-weight: 800; }
.vmeta .use-this { padding: 1px 10px; border: 1px solid var(--chat-green); border-radius: 999px; color: var(--chat-name); font-size: 11.5px; font-weight: 800; text-decoration: none; background: var(--chat-in); }
.vmeta .use-this:hover { background: var(--chat-green); color: var(--chat-green-ink); }
.vmeta .vnote { font-style: italic; color: var(--chat-meta); }
/* The bar above the ask box: which version the next request changes. */
.reply-to { background: var(--surface); border: 1px solid var(--hair); }
.reply-to .rt-label { color: var(--chat-name); }
/* The ask box and its green send button. */
.chat-step .composer:focus-within { border-color: var(--chat-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--chat-green) 16%, transparent); }
.chat-step .composer .send { background: var(--chat-green); color: var(--chat-green-ink); }
.chat-step .quick .chip:hover:not(:disabled) { border-color: var(--chat-green); color: var(--chat-name); }


/* The preview on phones: small, in the corner of the step's heading (the page in miniature: the
   section, your ad, its neighbours). Tap it to see it full size; × or a tap outside puts it back. */
.step-head { display: block; }
.stage-home .stage-hint, .stage-close, .head-check { display: none; }
@media (max-width: 959px) {
  .step-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
  .step-head .s-title { flex: 1 1 0; }
  .step-head .s-title { min-width: 0; }
  .step-head .s-title .sub { margin-bottom: 6px; }
  .head-check { display: flex; flex-basis: 100%; margin: 0; }
  .head-check[hidden] { display: none; }
  .stage-home { flex: none; display: grid; justify-items: center; gap: 4px; }
  .stage-home .stage-hint { display: block; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--primary); }
  .stage-home .stage:not(.zoom) { width: 9.5rem; margin: 0; padding: 6px; border-radius: 12px; cursor: zoom-in; box-shadow: var(--shadow-1); }
  .stage-home .stage:not(.zoom) .stage-cap, .stage-home .stage:not(.zoom) .stage-check { display: none; }
  .stage-home .stage:not(.zoom) .sheet { margin-top: 0; pointer-events: none; }
  .stage-home .stage:not(.zoom) .cell.mine::after { display: none; }
  .stage.zoom { position: fixed; z-index: 60; top: calc(68px + env(safe-area-inset-top)); left: 12px; right: 12px; max-height: calc(100dvh - 100px); overflow: auto; margin: 0; background-color: var(--paper); box-shadow: var(--shadow-2); }
  .stage.zoom .stage-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 20px; line-height: 1; box-shadow: var(--shadow-1); cursor: pointer; }
  .stage.zoom .stage-cap { padding-inline-end: 34px; }
}

/* In a preview the category block scales as a whole with its column (spacing and count too). */
.sheet.print .cell.section { padding: 0.3em 0.75em; }
.sheet.print .cell.section .s-n { top: 0.3em; inset-inline-end: 0.55em; font-size: calc(var(--fs) * 0.77); }

/* "We read" in Design too: under the heading (and its check line). */
.head-readout { margin: 8px 0 16px; }
.s-title .sub + .head-readout { margin-top: -4px; }
@media (max-width: 959px) { .step-head .head-readout { margin: 6px 0 0; gap: 4px; } }

/* Phones: the slim bar that stays at the top once a step's heading has scrolled away, with the
   step's name and your ad (a 1×1 window; a taller ad fades at the bottom). Tap the ad to enlarge.
   It hangs from a sticky anchor of no height, right under the progress line, so it moves with the
   top bar (an overscroll can't pull them apart) and never pushes the page down. Solid, not see-through. */
.mini-anchor { display: none; }
.mini-bar[hidden] { display: none; }
@media (max-width: 959px) {
  .mini-anchor { display: block; position: sticky; z-index: 29; top: calc(59px + env(safe-area-inset-top)); height: 0; margin: 0 -16px; }
  .mini-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px; background: var(--bg); border-bottom: 1px solid var(--hair); box-shadow: 0 6px 16px rgba(40, 28, 10, 0.08); animation: mb-in 0.2s ease-out; }
  .mini-bar .mb-title { min-width: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mini-bar .mb-ad { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; }
  .mini-bar.paid .mb-ad::after { top: -4px; inset-inline-end: -6px; width: 18px; height: 18px; background-size: 11px 11px; }
  .mini-bar .mini { display: block; height: calc(3.5rem + 8px); padding: 4px; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-1); }
  .mini-bar .cellbox { display: block; width: 7rem; max-width: none; }
  .mini-bar .cellbox .cell { pointer-events: none; }
  /* A 1×2 or 1×3 ad gets a taller window (one and a half times a 1×1), fading at its foot. */
  .mini-bar:not([data-size='1x1']) .mini { height: calc(5.25rem + 8px); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); }
}
@keyframes mb-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .mini-bar:not([hidden]) { animation: none; } }

/* "We read", long: the first few tags, then "+N more" (tap to open the rest in place). */
.rtag.folded { display: none; }
.tag-more { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px dashed var(--hair-2); border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1.3; color: var(--text-2); cursor: pointer; }
.tag-more[hidden] { display: none; }
.tag-more:hover { color: var(--text); border-color: var(--text-2); }

/* The Publish box when the ad repeats one already running: its three choices. */
.publish-box .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.publish-box .acts form { display: contents; }
.copy-box { border-color: color-mix(in srgb, var(--warn) 40%, var(--hair-2)); }

/* ================= Your ad: the ad first, then what can be changed ================= */
.ed-menu { display: grid; gap: 14px; }
.ed-menu > .card { padding: 18px 20px; }
.ed-menu h2 { margin: 0 0 8px; font-size: 18px; }
.editor-wrap .tabpanel { scroll-margin-top: calc(68px + env(safe-area-inset-top)); }
.ed-options { list-style: none; margin: 0; padding: 0; }
.ed-options li + li { border-top: 1px solid var(--hair); }
.ed-options > li > a, .ed-options > li > button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 2px; border: 0; background: none; font: inherit; color: var(--text); text-align: start; text-decoration: none; cursor: pointer; }
.ed-options > li > a:hover .o-text b, .ed-options > li > button:hover .o-text b { color: var(--primary); }
.ed-options .o-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); }
.ed-options .o-ico svg { width: 20px; height: 20px; }
.ed-options .o-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ed-options .o-text b { font-size: 15.5px; font-weight: 700; }
.ed-options .o-text small { font-size: 13px; color: var(--text-2); }
.ed-options .o-go { flex: none; color: var(--text-2); transform: scaleX(-1); }
[dir='rtl'] .ed-options .o-go { transform: none; }
.ed-options .o-go svg { width: 18px; height: 18px; }
/* Done when the ad was placed (design, wording, where it runs): ticked and quieter, with Edit. */
.ed-options .o-row { display: flex; align-items: center; gap: 14px; padding: 12px 2px; }
.ed-options .o-ico.ok { background: var(--ok-soft); color: var(--ok); }
.ed-options li.done .o-text b { font-weight: 600; color: var(--text-2); }
.ed-options li.done .o-text small { color: color-mix(in srgb, var(--text-2) 80%, transparent); }
.ed-options .o-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-options .o-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-inline-start: 8px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: 12px; font-weight: 700; line-height: 1; vertical-align: 2px; font-variant-numeric: tabular-nums; }
.ed-options .o-edit { flex: none; background: none; font: inherit; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 84px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hair-2); border-radius: 999px; font-weight: 650; }
.ed-options .o-edit:hover { border-color: var(--text-2); }
.ed-options .o-edit svg { width: 17px; height: 17px; }
.longer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.longer div { display: grid; gap: 2px; }
.longer small { color: var(--text-2); font-size: 13px; }
.panel-back { margin: -4px 0 10px; }

/* Editing an ad: the three steps as tabs under the top bar (instead of the progress line). */

/* Your ad: extras chosen but not paid for, each with Pay and Cancel. */
.orders { padding: 16px 20px; margin-bottom: 14px; }
.orders h2 { margin: 0 0 2px; font-size: 17px; }
.orders .sub { margin: 0 0 8px; }
.orders ul { list-style: none; margin: 0; padding: 0; }
.orders li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); }
.orders li b { flex: 1; min-width: 0; font-weight: 600; }
.orders li .amt { font-variant-numeric: tabular-nums; color: var(--text-2); }
.orders .icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.orders .icon-btn:hover { background: var(--surface-2); color: var(--text); }
.orders .icon-btn svg { width: 16px; height: 16px; }
.orders-pay { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hair); }
.orders-pay b { font-size: 17px; }

/* Trust seal: what's under way, then the other seal still on offer. */
.trust-sep { margin: 18px 0; border: 0; border-top: 1px solid var(--hair); }
.trust-more { margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--text-2); }

/* "Not in the paper yet" stays in view while you look over the ad. Once it's stuck it hangs from the
   top bar like a sheet: square top corners flush against the bar, no top border, rounded bottom,
   slim (the explanation goes, the button gets smaller) and solid, so the page doesn't show through. */
.publish-box.pin { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 20; background: var(--surface); transition: padding 0.15s, border-radius 0.15s, box-shadow 0.15s; }
.publish-box.pin.stuck { flex-wrap: nowrap; padding: 8px 10px 8px 18px; border-top-color: transparent; border-radius: 0 0 16px 16px; box-shadow: 0 10px 24px rgba(40, 28, 10, 0.14); }
[dir='rtl'] .publish-box.pin.stuck { padding: 8px 18px 8px 10px; }
.publish-box.pin.stuck .sub, .publish-box.pin.stuck .field-error { display: none; }
.publish-box.pin.stuck h2 { margin: 0; font-size: 15.5px; }
.publish-box.pin.stuck .btn { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14.5px; }
:root[data-theme='night'] .publish-box.pin.stuck { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }

/* Trust seal: whether a phone seal shows on this ad. */
.trust-here { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 14px; color: var(--text-2); }
.trust-here .ico svg { width: 17px; height: 17px; }
.trust-here.ok { color: var(--ok); }

/* Inside a panel, "Not in the paper yet" stays at the top of the page instead of covering the panel. */
body.in-panel .publish-box.pin { position: static; }
/* The Trust seal steps: the number a code went to, and a development code. */
.sent-to { margin: 0 0 12px; color: var(--text-2); }
.sent-to b { color: var(--text); }
.dev-code { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.dev-code b { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Trust seals: a card for each seal, always shown, with where it stands; one with a step to take
   now is outlined and comes first. */
.seal-card { margin-top: 14px; padding: 16px; border: 1.5px solid var(--hair-2); border-radius: 16px; background: var(--surface); }
.seal-card.now { border-color: var(--primary); }
.seal-card .seal-head { display: flex; align-items: center; gap: 12px; }
.seal-card .seal-head b { flex: 1; min-width: 0; font-size: 16.5px; }
.seal-card .t-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ok-soft); color: var(--ok); }
.seal-body { margin-top: 8px; padding-inline-start: 56px; }
.seal-body > p { margin: 6px 0 10px; color: var(--text-2); font-size: 14.5px; }
.seal-body > p b { color: var(--text); }
.seal-body .tips { margin: 6px 0; }
.seal-body .ai-note { margin: 4px 0 10px; }
@media (max-width: 479px) { .seal-body { padding-inline-start: 0; } }

/* Report: the reasons a reader of this ad could have, as rows to tap; a note and Send appear once one
   is chosen. */
.report-form { margin-top: 12px; }
.report-form .reasons { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.report-form legend { padding: 0; margin-bottom: 8px; font-weight: 650; color: var(--text); }
.report-form .reason { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--hair-2); border-radius: 14px; background: var(--surface); cursor: pointer; }
.report-form .reason:hover { border-color: var(--text-2); }
.report-form .reason input { position: absolute; opacity: 0; pointer-events: none; }
.report-form .r-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.report-form .r-ico svg { width: 18px; height: 18px; }
.report-form .r-text { display: grid; gap: 1px; min-width: 0; }
.report-form .r-text b { font-size: 14.5px; font-weight: 650; color: var(--text); }
.report-form .r-text small { font-size: 13px; color: var(--text-2); }
.report-form .reason:has(input:checked) { border-color: var(--primary); }
.report-form .reason:has(input:checked) .r-ico { background: var(--primary); color: var(--primary-ink); }
.report-form .reason:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.report-form .report-more { display: none; margin-top: 12px; gap: 10px; justify-items: start; }
.report-form:has(input[name='reason']:checked) .report-more { display: grid; }
.report-form .report-more .field { width: 100%; }
@media (min-width: 720px) { .report-form .reasons { grid-template-columns: 1fr 1fr; } }

/* The chief editor's offer on Your ad: one card above the rest while it's open (src/chief/chief.ts),
   the ad printed with the extra beside the words, the two buttons under them. */
.promo-box { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'text' 'acts'; align-items: start; gap: 12px 20px; padding: 16px 20px; margin-bottom: 14px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold-soft) 60%, var(--surface)); }
.promo-box.with-pv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'text pv' 'acts pv'; }
.promo-box .promo-text { grid-area: text; min-width: 0; }
.promo-box .kicker { display: flex; align-items: flex-start; gap: 6px; color: var(--gold); font-size: 12.5px; font-weight: 700; line-height: 18px; letter-spacing: 0.05em; text-transform: uppercase; }
.promo-box .kicker .ico svg { width: 18px; height: 18px; stroke-width: 2; display: block; }
.promo-box h2 { margin: 2px 0 4px; font-size: 18px; }
.promo-box .sub { margin: 0; }
.promo-box .note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.promo-box .acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.promo-box .acts form { display: contents; }
.promo-pv { grid-area: pv; padding: 8px; border-radius: 10px; }
.promo-pv .cellbox { --fs: 11px; width: 8.5rem; }
.promo-pv .cellbox .cell { pointer-events: none; }
@media (max-width: 560px) {
  .promo-box { padding: 14px 16px; }
  .promo-box .kicker { font-size: 11px; letter-spacing: 0.03em; gap: 5px; }
  .promo-box .kicker .ico svg { width: 16px; height: 16px; margin-top: 1px; }
  .promo-box.with-pv { grid-template-areas: 'text pv' 'acts acts'; gap: 12px 12px; }
  .promo-pv { padding: 5px; }
  .promo-pv .cellbox { --fs: 8px; width: 6.25rem; }
  .promo-box .acts .btn { flex: 1 1 auto; justify-content: center; padding-inline: 12px; }
}

/* About, Privacy, Terms: plain reading pages. */
.legal { padding-block: 24px 48px; line-height: 1.6; }
.legal h1 { margin: 0 0 12px; font-size: 28px; }
.legal h2 { margin: 28px 0 8px; font-size: 19px; }
.legal h3 { margin: 18px 0 6px; font-size: 16px; }
.legal p, .legal li { color: var(--text); font-size: 15.5px; }
.legal ul { padding-inline-start: 20px; }
.legal li + li { margin-top: 6px; }
.legal-updated { margin-top: 32px; font-size: 13px; }

/* Paying the review fee: the box to tick, then the price and the button. */
.fee-form { display: grid; gap: 10px; }
.fee-form .consent { margin: 0; }
.fee-form .consent-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.fee-form .consent-row input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); }
.fee-form .consent.invalid .consent-row { color: var(--text); }
.fee-form .consent-row, .fee-form .consent-row span { font-weight: 400; }

/* Big papers: the browser skips the blocks far off the screen (no style, layout or painting until
   the reader comes near), so a paper of thousands of ads scrolls like a short one. A block's shape
   comes from the grid, not its contents, so skipping changes nothing on the page. The glow and the
   red pen draw a little outside a block: the clip edge is moved out for them, and circled ads and
   your own (with its tag above) are never skipped. */
.journal .cell:not(.circled):not(.mine) { content-visibility: auto; contain-intrinsic-size: auto 80px; overflow-clip-margin: 14px; }

/* The marker at the end of a big paper's first chunk: a quiet spinner while the next one comes. */
.sheet-more { display: grid; place-items: center; min-height: 80px; }
.sheet-more .spinner { opacity: 0; transition: opacity 0.2s; }
.sheet-more.busy .spinner { opacity: 1; }

/* ================= The logo =================
   The speaking moon (a crescent whose foot is a speech-bubble tail) in the pen colour, then the name:
   "moon" heavy, "crier" light, the second o a full moon fitted to Inter's own o (its advance less the
   letter-spacing, the disc on the o's ink), so spacing, baseline and height match the letter. */
/* One lockup: the moon on the left, its open mouth holding the start of the name ("m" sits in it); the
   motto in small spaced capitals under the name, ending exactly where "mooncrier" ends and starting
   clear of the moon's belly and tip. Without a motto (the app bar) the moon hangs below the name. */
.logo { position: relative; display: inline-block; padding: 0 0 0.75em 1.424em; color: var(--text); line-height: 1; white-space: nowrap; direction: ltr; }
.logo.has-tag { padding-bottom: 0.19em; }
.logo-mark { position: absolute; left: 0; top: -0.03em; width: 1.78em; height: 1.78em; fill: var(--pen); }
.logo-text { position: relative; display: inline-grid; }
/* Optically flush: the motto's last stroke (the M's right stem) ends on the right edge of the r's
   stem, not at the tip of its arm. In Inter the r's stem ends at 0.165em of its 0.376em advance and
   the M (600) leaves 0.073em after its ink, so the motto sits (0.376 - 0.035 - 0.165) / 0.36 - 0.22 -
   0.073 ≈ 0.2em (its own size) in from the end of the name's box. */
.logo-tag { justify-self: end; margin: 0.3em 0.197em 0 0; font: 600 0.36em/1.25 var(--f-ui); text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-2); }
:root[lang='fa'] .logo-tag { text-transform: none; letter-spacing: 0; margin-right: 0; font-size: 0.46em; }
.wm { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; letter-spacing: -0.035em; }
.wm b { font-weight: 800; }
.wm-o { position: relative; display: inline-block; width: 0.5839em; height: 0.5527em; vertical-align: baseline; }
.wm-o::before { content: ''; position: absolute; left: 0.0315em; bottom: -0.0068em; width: 0.556em; height: 0.556em; border-radius: 50%; background: var(--pen); }
:root[data-theme='night'] .logo-mark, :root[data-theme='night'] .wm-o::before { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pen) 55%, transparent)); }

/* Pen strokes under page titles. */
.step h1::after, .msg h1::after {
  content: ''; display: block; width: 128px; max-width: 60%; height: 10px; margin-top: 7px; background: var(--pen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7.2C34 3.4 78 2.4 125 4.4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7.2C34 3.4 78 2.4 125 4.4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.msg h1::after { margin-inline: auto; }
:root[dir='rtl'] .step h1::after { transform: scaleX(-1); }

/* The moment an ad goes in the paper: the pen circles it on its page’s preview. */
@property --draw { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.pen-ring {
  position: absolute; z-index: 3; inset: -7px -8px; pointer-events: none; background: none; box-shadow: none;
  border: 2.6px solid var(--pen); border-radius: 50% 46% 52% 48% / 46% 54% 46% 54%; transform: rotate(-3deg);
  -webkit-mask: conic-gradient(from -40deg, #000 var(--draw), transparent 0); mask: conic-gradient(from -40deg, #000 var(--draw), transparent 0);
  animation: pen-draw 0.85s cubic-bezier(0.5, 0.1, 0.3, 1) 0.45s both;
}
@keyframes pen-draw { from { --draw: 0deg; } to { --draw: 360deg; } }
:root[data-theme='night'] .pen-ring { box-shadow: 0 0 10px var(--pen); }
@media (prefers-reduced-motion: reduce) { .pen-ring { animation: none; } }

/* ================= The careers widget (/w/:key, in a frame on the employer's own page) =================
   A window onto the paper (web/public/widget.ts sets --cols, --cw, --row and --fs on the sheet): a
   slim bar with our name, their sections as in the paper, their jobs among the other ads and
   circled in red pen, and bits of made-up ads cut off at the edges, as if cut from a bigger page.
   The page around is theirs, so the frame is transparent apart from the bar. */
body.widget { margin: 0; background: transparent; min-height: 0; }
.wg { padding: 0 1px 4px; }
.wg-sheet { --cols: 1; --cw: 150px; --row: 75px; --peek: 0px; position: relative; }
.wg-sheet.edged { --peek: 14px; overflow: hidden; }
.wg-grid, .wg-strip { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--row); gap: 6px; }
.wg-grid { grid-auto-flow: row dense; padding-block: 5px 0; padding-inline: 6px calc(5px + var(--peek)); }
.wg-sheet.edged .wg-grid { padding-top: 6px; }
.wg-grid .cell[data-h='2'], .wg-side .cell[data-h='2'] { grid-row: span 2; }
.wg-grid .cell[data-h='3'] { grid-row: span 3; }
.wg-empty { margin: 0; padding: 14px 4px; font: 14px/1.45 var(--f-ui); color: var(--text-2); text-align: center; }
/* The bar: a slim ink strip with only our name, and a link that opens the paper at one of their jobs. */
.wg-mast { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; box-sizing: border-box; padding: 5px 10px 5px 11px; border-radius: 3px; background: #1c1a17; color: #f6f1e7; text-decoration: none; }
/* The name is all lowercase, so its letters' middle is the x-height's, which sits below the line's
   own middle (the line keeps room for capitals): lifted that much, the letters sit on the bar's centre. */
.wg-mast .wm { position: relative; top: -0.07em; font-size: 16px; line-height: 1; white-space: nowrap; }
.wg-go { font: 600 11.5px/1 var(--f-ui); color: rgba(241, 234, 223, 0.72); white-space: nowrap; }
.wg-mast:hover .wg-go, .wg-mast:focus-visible .wg-go { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* The edges: made-up bits of the paper (widget.ts bits), faint and cut off. Above and below, a row
   of them shows its foot or its top; at the end side, a column shows its first few pixels. The
   columns and rows are the grid's own, so it all reads as one page. */
.wg-edge { position: relative; height: calc(var(--row) * 0.36); overflow: hidden; pointer-events: none; }
.wg-edge .wg-strip { position: absolute; inset-inline: 6px calc(5px + var(--peek)); grid-template-rows: var(--row); }
.wg-top .wg-strip { bottom: 0; }
.wg-bot { margin-top: 6px; -webkit-mask-image: linear-gradient(#000 15%, transparent); mask-image: linear-gradient(#000 15%, transparent); }
.wg-bot .wg-strip { top: 0; }
.wg-side { position: absolute; top: calc(var(--row) * -0.64); bottom: 0; inset-inline-start: calc(100% - var(--peek) + 1px); width: var(--cw); pointer-events: none; -webkit-mask-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0.2) var(--peek)); mask-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0.2) var(--peek)); }
:root[dir='rtl'] .wg-side { -webkit-mask-image: linear-gradient(to left, #000, rgba(0, 0, 0, 0.2) var(--peek)); mask-image: linear-gradient(to left, #000, rgba(0, 0, 0, 0.2) var(--peek)); }
.wg-side .wg-strip { grid-template-columns: minmax(0, 1fr); }
.wg-bit { opacity: 0.5; }
.wg-bit.inv .frame { background: var(--head); border-color: var(--head); color: var(--headink); }
.wg-bit.inv .l-b { color: inherit; }
.wg-bit.thick .frame { border-width: 3px; }
/* Their jobs: circled in red pen, as a reader would, each loop a little different. */
.wg-grid .cell.wg-own { z-index: 1; }
.wg-grid .cell.wg-own::after { content: ''; position: absolute; inset: -4px -5px; border: 2.4px solid var(--pen); border-radius: var(--wg-shape, 50% 46% 52% 48% / 46% 54% 46% 54%); transform: rotate(var(--wg-r, -1.5deg)); pointer-events: none; }
:root[data-theme='night'] .wg-grid .cell.wg-own::after { box-shadow: 0 0 8px var(--pen); }
/* The paper around them: context only (not links), a touch quieter so theirs lead. */
.wg-grid .cell.section.wg-sec, .wg-grid .cell.wg-nb { pointer-events: none; }
/* A heading's count and padding grow with its type too (10px and 4px/10px at the usual 150px column). */
.wg-grid .cell.section { padding: calc(var(--fs) * 0.32) calc(var(--fs) * 0.8); }
.wg-grid .cell.section .s-n { top: calc(var(--fs) * 0.32); inset-inline-end: calc(var(--fs) * 0.56); font-size: calc(var(--fs) * 0.8); }
.wg-grid .cell.wg-nb { opacity: 0.72; }
.wg-more { display: block; padding: 10px 6px 4px; font: 600 13px/1.3 var(--f-ui); color: var(--text-2); text-align: end; text-decoration: none; }
.wg-more:hover { color: var(--text); text-decoration: underline; }
/* A fixed-height window (data-height on the line): it scrolls inside, the strip stays on top. */
body.wg-fixed .wg-mast { position: sticky; top: 0; z-index: 5; }
/* A reader's circles are their own marks in the paper, not for the employer's page. */
body.widget .cell.ad.circled:not(.wg-own)::before, body.widget .cell.ad.circled:not(.wg-own)::after { content: none; }
/* Your ad · On your website: the line to copy, and the pages it's on. */
.snip { display: flex; gap: 10px; align-items: center; margin: 14px 0 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--surface-2); }
.snip code { flex: 1; min-width: 0; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; color: var(--text); }
/* The line, coloured in the paper's inks (ui.ts highlightTag): quiet enough to read as one line. */
.snip { --hl-tag: #a33a22; --hl-attr: #24507f; --hl-val: #2e6b3a; }
:root[data-theme='night'] .snip { --hl-tag: #ff8f73; --hl-attr: #8fbbea; --hl-val: #a9d69c; }
.snip .hl-tag { color: var(--hl-tag); font-weight: 600; }
.snip .hl-attr { color: var(--hl-attr); white-space: nowrap; }
.snip .hl-val { color: var(--hl-val); }
.snip .hl-p { color: var(--text-2); }
.website h3 { font-size: 13px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin: 22px 0 8px; }
.wpages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wpages li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; }
.wpages .wp-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wpages b { font-size: 14px; overflow-wrap: anywhere; }
.wpages small { font-size: 13px; color: var(--text-2); }
.wpages .wp-live small { color: var(--ok); }
.wpages form { margin: 0; }
.wg-email { margin: 6px 0 4px; }
.wg-email .wg-row { display: flex; gap: 8px; margin-top: 6px; }
.wg-email .wg-row input { flex: 1; min-width: 0; }
.wg-updates { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--text-2); }
.wg-updates .ico { color: var(--pen); }
.wg-updates span { flex: 1; min-width: 0; }
.wg-opts { display: grid; gap: 10px; margin: 14px 0 6px; }
.wg-opt { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.wg-opt .seg { margin: 0; }
@media (max-width: 560px) { .wg-opt { grid-template-columns: 1fr; gap: 6px; } }
.wg-preview { display: grid; justify-items: center; gap: 10px; margin: 16px 0 6px; padding: 16px 12px 18px; border-radius: 14px; background: #f1ede6; transition: background 0.2s; }
.wg-preview.dark-site { background: #1d1b18; }
.wg-preview .wg-pv-label { justify-self: start; font: 600 12px/1 var(--f-ui); color: #6a6359; text-transform: uppercase; letter-spacing: 0.06em; }
.wg-preview.dark-site .wg-pv-label { color: #a69c8e; }
.wg-preview iframe { display: block; width: 100%; max-width: 380px; height: 420px; border: 0; background: transparent; }
/* /widget: your jobs on your own site, no login. */
.wgp { max-width: 1040px; }
.wgp-hero { max-width: 720px; margin: 8px 0 22px; }
.wgp-hero h1::after { content: ''; display: block; width: 128px; height: 10px; margin-top: 7px; background: var(--pen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7.2C34 3.4 78 2.4 125 4.4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7.2C34 3.4 78 2.4 125 4.4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.wgp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 22px; align-items: start; }
@media (max-width: 820px) { .wgp-grid { grid-template-columns: 1fr; } }
.wgp-form { display: grid; gap: 14px; }
.wgp-form h2, .wgp-result h2 { margin: 0; font-size: 19px; }
.wgp-form .hint { color: var(--text-2); font-size: 12.5px; }
.wgp-demo { margin: 0; display: grid; gap: 10px; padding: 16px 12px 18px; border-radius: 14px; background: #f1ede6; justify-items: center; }
.wgp-demo .wg-pv-label { justify-self: start; font: 600 12px/1 var(--f-ui); color: #6a6359; text-transform: uppercase; letter-spacing: 0.06em; }
.wgp-demo iframe { display: block; width: 100%; max-width: 380px; height: 520px; border: 0; background: transparent; }
:root[data-theme='night'] .wgp-demo { background: #23201c; }
.wgp-how { list-style: none; counter-reset: wgp; margin: 26px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.wgp-how li { counter-increment: wgp; display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); }
.wgp-how li::before { content: counter(wgp); font: 800 15px/1 var(--f-ui); color: var(--pen); }
.wgp-how b { font-size: 15px; }
.wgp-how span { font-size: 14px; color: var(--text-2); }