/* Carbon Dean gate: the request form and the operator panel.
   The same tokens as the app, copied rather than imported, so this small
   surface never depends on the app's stylesheet. */
:root {
  --ink:#202522; --muted:#68706b; --canvas:#f7f6f1; --paper:#fffefa; --sand:#ebe9df;
  --line:#deded4; --line-strong:#cdcec3; --forest:#174f46; --forest-deep:#103f38;
  --mint:#dcece4; --rose:#fae3dc; --rose-ink:#954231; --radius:16px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font:15px/1.55 Manrope,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body:before { content:""; position:fixed; inset:0; z-index:-1; opacity:.42; pointer-events:none; background-image:radial-gradient(rgba(23,79,70,.1) .55px,transparent .7px); background-size:9px 9px; }
h1,h2,.brand { font-family:Newsreader,Georgia,serif; letter-spacing:-.035em; font-weight:500; margin:0; }
h1 { font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.03; }
h2 { font-size:1.35rem; line-height:1.15; }
p { margin:0; }
a { color:var(--forest); text-underline-offset:3px; text-decoration-thickness:1px; }
.eyebrow { color:var(--forest); font:500 10px/1 "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px; }
.lede { color:var(--muted); font-size:1.08rem; line-height:1.55; max-width:58ch; margin-top:14px; }
.muted { color:var(--muted); }
.hint { color:var(--muted); font-size:.86rem; margin-top:6px; }
.optional { color:var(--muted); font-weight:500; font-size:.85em; margin-left:6px; }
.required { color:var(--forest); font-weight:600; font-size:.72em; letter-spacing:.06em; text-transform:uppercase; margin-left:7px; vertical-align:.08em; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; padding:0 max(24px,calc(50% - 560px)); background:rgba(247,246,241,.9); border-bottom:1px solid var(--line); }
a.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; font-size:1.35rem; font-weight:600; }
.mark { width:31px; height:31px; display:block; flex:none; }
.topbar-note { color:var(--muted); font-size:.9rem; }
form.inline { display:flex; align-items:center; gap:12px; margin:0; }

main { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:48px 0 72px; }
main.narrow { width:min(640px,calc(100% - 48px)); }
.page-heading { margin-bottom:26px; }
/* The admin pages carry their navigation above the heading, so the heading
   itself stops being the only thing on the screen. */
.page-heading.compact { margin-bottom:18px; }
.page-heading.compact h1 { font-size:clamp(1.45rem,2.3vw,1.9rem); }
.adminnav { display:flex; flex-wrap:wrap; gap:26px; align-items:baseline; margin:0 0 20px; padding-bottom:11px; border-bottom:1px solid var(--line); }
.adminnav a { display:inline-flex; align-items:baseline; gap:7px; color:var(--muted); font-weight:600; font-size:1rem; text-decoration:none; }
.adminnav a:hover { color:var(--forest); }
.adminnav a.active { color:var(--forest); }
.adminnav .count { font:500 10px/1 "DM Mono",monospace; color:var(--forest); background:var(--mint); border-radius:999px; padding:4px 7px; }
.adminnav a.active .count { color:var(--paper); background:var(--forest); }

.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.field { margin-bottom:18px; }
.field:last-child { margin-bottom:0; }
label, legend { display:block; font-weight:600; font-size:.92rem; margin-bottom:6px; }
input[type=text], input[type=email], input[type=number], input[type=url], textarea {
  width:100%; padding:11px 13px; color:var(--ink); background:#fffefa; border:1px solid var(--line-strong); border-radius:9px;
  font:inherit; transition:border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
input:focus, textarea:focus { outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(23,79,70,.14); }
textarea { resize:vertical; }
/* Six digits, six slots, drawn in the background of one ordinary input.
   No JS and no six-box markup, so paste and the iOS one-time-code autofill
   keep working exactly as they did. Every measurement is in ch, which is the
   width of a digit in whatever font actually loaded -- the slots line up
   under DM Mono and under the fallback monospace alike. */
input[type=text].code-input {
  --slot:3.2ch; --gap:.7ch;
  /* Letter-spacing lands after the sixth digit too, so the text runs a gap
     and a half-slot past the last slot. Without room for that the field
     scrolls on the sixth digit and every digit slides a slot to the left.
     The slots are drawn at their own width, so the extra room is invisible. */
  width:calc(6 * var(--slot) + 6 * var(--gap) + (var(--slot) - 1ch) / 2 + 3px);
  max-width:100%;
  padding:14px 0 13px;
  /* The first digit is centred in its slot; each one after clears the slot
     and the gap it follows. */
  padding-left:calc((var(--slot) - 1ch) / 2);
  letter-spacing:calc(var(--slot) + var(--gap) - 1ch);
  font:500 1.75rem/1 "DM Mono",ui-monospace,monospace;
  text-align:left;
  color:var(--ink);
  background-color:transparent;
  background-image:repeating-linear-gradient(90deg,
    var(--line-strong) 0 var(--slot), transparent var(--slot) calc(var(--slot) + var(--gap)));
  background-size:calc(6 * var(--slot) + 5 * var(--gap)) 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  border:0;
  border-radius:0;
  overflow:hidden;
  caret-color:var(--forest);
  transition:background-image 160ms var(--ease-out);
}
input[type=text].code-input:focus {
  outline:none;
  box-shadow:none;
  background-image:repeating-linear-gradient(90deg,
    var(--forest) 0 var(--slot), transparent var(--slot) calc(var(--slot) + var(--gap)));
}
input[type=text].code-input::placeholder { color:var(--line-strong); }
/* "Enter the code." is the heading and "Six digits" is the line under it, so
   a visible "Code" label over the slots is the third time of asking. It stays
   in the markup for anyone hearing the page rather than seeing it. */
.label-quiet { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

fieldset.choices { border:0; padding:0; margin:0 0 18px; }
.choice { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line-strong); border-radius:11px; margin-bottom:8px; cursor:pointer; font-weight:400; transition:border-color 160ms ease,background 160ms ease; }
.choice:has(input:checked) { border-color:var(--forest); background:var(--mint); }
.choice input { margin-top:4px; accent-color:var(--forest); }
.choice strong { display:block; font-weight:700; }
.choice small { display:block; color:var(--muted); font-size:.86rem; }
[hidden] { display:none !important; }
.offscreen { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

button, .button {
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:11px; border:1px solid var(--forest);
  background:var(--forest); color:#f8f7f0; font:700 13px/1 Manrope,sans-serif; text-decoration:none; cursor:pointer;
  transition:transform 160ms var(--ease-out),background 160ms ease,border-color 160ms ease,opacity 160ms ease;
}
button.secondary, .button.secondary { background:transparent; color:var(--forest); border-color:var(--line-strong); }
button.small { padding:8px 12px; font-size:12px; }
button:disabled { opacity:.6; cursor:progress; }
button:active:not(:disabled) { transform:scale(.97); }
@media (hover:hover) and (pointer:fine) {
  button:hover:not(:disabled), .button:hover { background:var(--forest-deep); border-color:var(--forest-deep); }
  button.secondary:hover:not(:disabled), .button.secondary:hover { background:rgba(23,79,70,.07); color:var(--forest-deep); border-color:rgba(23,79,70,.38); }
}
.actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px; }
.actions .hint { margin:0; }
a.quiet { color:var(--muted); font-size:.9rem; }

.error { background:var(--rose); color:var(--rose-ink); border-radius:11px; padding:12px 14px; margin-bottom:18px; font-size:.95rem; }
.notice { background:var(--mint, #dcece4); color:var(--forest, #174f46); border-radius:11px; padding:12px 14px; margin-bottom:18px; font-size:.95rem; }
.flash { background:var(--mint); color:var(--forest-deep); border-radius:11px; padding:12px 14px; margin-bottom:18px; font-size:.95rem; }
.empty { color:var(--muted); padding:30px 0; }

.subnav { display:flex; gap:22px; margin-top:18px; border-bottom:1px solid var(--line); }
.subnav a { color:var(--muted); text-decoration:none; font-weight:600; font-size:.92rem; padding:0 2px 12px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.subnav a.active { color:var(--forest); border-bottom-color:var(--forest); }
.subnav .count { font:500 10px/1 "DM Mono",monospace; color:var(--muted); margin-left:4px; }

.request { display:grid; grid-template-columns:1fr auto; gap:24px; margin-bottom:12px; }
.request-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.request-email { margin:4px 0 12px; }
.chip { padding:3px 8px; border-radius:999px; font:500 9.5px/1.2 "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; border:1px solid rgba(23,79,70,.16); color:var(--forest); background:rgba(255,254,250,.6); }
.chip.practitioner { background:var(--mint); }
.facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 22px; margin:0; }
.facts .wide { grid-column:1 / -1; }
.facts dt { font:500 9.5px/1.2 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.facts dd { margin:0; font-size:.95rem; }
.request-actions { display:flex; flex-direction:column; gap:10px; min-width:280px; }
.request-actions form { display:flex; gap:8px; }
.request-actions input[type=text] { flex:1; padding:9px 11px; font-size:.9rem; }

@media (max-width:760px) {
  input[type=text].code-input { --slot:2.6ch; --gap:.55ch; font-size:1.4rem; }
  @media (max-width:400px) { input[type=text].code-input { --slot:2.3ch; --gap:.45ch; } }
  .request { grid-template-columns:1fr; }
  .facts { grid-template-columns:1fr 1fr; }
  .request-actions { min-width:0; }
  .topbar { padding:0 16px; }
  .topbar .topbar-note { display:none; }
}
/* Prep queue: one row per request, one next step each. */
main.wide { width:min(1360px,calc(100% - 48px)); }
.prep-list { display:flex; flex-direction:column; gap:10px; }
.prep-row { display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; }
.prep-row-main { min-width:0; }
.prep-row-sub { color:var(--muted); font-size:.92rem; margin-top:3px; }
.prep-row-status { margin-top:10px; font-size:.95rem; }
.prep-row-status.status-draft { color:var(--forest-deep); font-weight:600; }
.prep-row-status.status-failed { color:var(--rose-ink); }
.prep-row-action { display:flex; align-items:center; gap:14px; flex:none; }
.prep-row-action form { margin:0; }

/* Review: the draft as they'll see it, and the decision beside it. */
.review-heading { margin-bottom:22px; }
.review-heading h1 { margin:10px 0 6px; }
.review { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
.review-draft { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.review-draft-bar { display:flex; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--muted); }
.review-draft iframe { display:block; width:100%; height:calc(100vh - 230px); min-height:560px; border:0; background:#fff; }
.review-placeholder { padding:48px 32px; }
.review-placeholder h2 { margin-bottom:8px; }
.review-panel { position:sticky; top:20px; display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - 40px); overflow-y:auto; }
.panel-block { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.panel-block form { margin:0; }
.panel-block .hint { margin-top:10px; }
.panel-block textarea { margin-bottom:8px; }
.wide-button { width:100%; justify-content:center; padding:14px 18px; font-size:14px; }
.checks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.checks li { padding-left:26px; position:relative; }
.checks li::before { position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; font:700 11px/18px Manrope,sans-serif; text-align:center; }
.checks li.ok::before { content:"✓"; background:var(--mint); color:var(--forest-deep); }
.checks li.warn::before { content:"!"; background:var(--rose); color:var(--rose-ink); }
.checks li.info::before { content:"·"; background:var(--sand); color:var(--muted); }
.checks strong { display:block; font-size:.93rem; }
.checks span { display:block; color:var(--muted); font-size:.85rem; margin-top:2px; }
.panel-more { padding:4px 4px 0; }
.panel-more summary { cursor:pointer; color:var(--muted); font-weight:600; font-size:.9rem; }
.panel-more form { margin-top:14px; }
.panel-more input[type=file] { display:block; margin:6px 0 8px; font-size:.85rem; }
button.danger { background:transparent; color:var(--rose-ink); border-color:rgba(149,66,49,.35); }
@media (hover:hover) and (pointer:fine) { button.danger:hover { background:var(--rose); border-color:var(--rose-ink); color:var(--rose-ink); } }
@media (max-width:980px) {
  .review { grid-template-columns:1fr; }
  .review-panel { position:static; order:-1; max-height:none; overflow:visible; }
  .review-draft iframe { height:75vh; min-height:0; }
  .prep-row { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { button, .button, .choice, input, textarea { transition:none; } button:active:not(:disabled) { transform:none; } }

/* Résumé review: the original beside the draft, the writer's reasons, the
   customer's own words, and what reviewing is costing. */
.review-original { margin-top:14px; background:var(--paper, #fffefa); border:1px solid var(--line, #deded4); border-radius:12px; padding:12px 14px; }
.review-original summary { cursor:pointer; font-weight:800; font-size:13px; }
.review-original pre { white-space:pre-wrap; font:12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; max-height:420px; overflow:auto; margin:10px 0 0; }
.review-original h3 { font-size:13px; margin:14px 0 0; }
.changes { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
.changes span { color:var(--muted, #68706b); }
.quote { border-left:3px solid var(--forest, #174f46); padding:4px 0 4px 10px; margin:6px 0; white-space:pre-wrap; }
.metrics { margin-top:22px; }
label.check { display:flex; gap:8px; align-items:flex-start; font-weight:700; margin-bottom:10px; }
label.check input { width:auto; margin-top:3px; }

/* Marketing agent (/admin/marketing): the four methods in order, starting
   work, and reading a draft. */
.mk-steps { list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mk-step { display:grid; grid-template-columns:30px 1fr; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.mk-step h2 { font-size:1rem; margin:2px 0 6px; }
.mk-step p { font-size:.86rem; margin:0 0 6px; }
.mk-step-n { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:500 12px/1 "DM Mono",monospace; border:1px solid var(--line); color:var(--muted); }
.mk-step.done .mk-step-n { background:var(--forest); border-color:var(--forest); color:var(--paper); }
.mk-step-state { font-weight:600; color:var(--forest); }
@media (max-width:900px) { .mk-steps { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .mk-steps { grid-template-columns:1fr; } }
.mk-new textarea { width:100%; }
.mk-kinds { border:0; padding:0; margin:0 0 14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.mk-kind { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; }
.mk-kind input { width:auto; margin-top:3px; }
.mk-kind > span { display:flex; flex-direction:column; gap:2px; font-size:.9rem; }
.mk-kind:has(input:checked) { border-color:var(--forest); background:var(--mint); }
@media (max-width:760px) { .mk-kinds { grid-template-columns:1fr 1fr; } }
.mk-draft { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 32px; max-width:820px; }
.mk-draft p, .mk-draft li { line-height:1.6; }
.mk-lead { font-family:Newsreader,Georgia,serif; font-size:1.35rem; line-height:1.4; margin:0 0 14px; }
.mk-block { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.mk-block h3 { font-size:.95rem; margin:0 0 10px; }
.mk-block ul { padding-left:20px; margin:0; }
.mk-block li { margin:0 0 8px; }
.mk-questions { background:#FBF4E4; border:1px solid #EAD9AE; border-radius:12px; padding:14px 18px; }
.mk-places { display:grid; gap:12px; }
.mk-place { border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.mk-place p { margin:0 0 6px; }
.mk-asks { list-style:none; padding:0; }
.mk-asks li { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
.mk-asks button { margin-top:0; white-space:nowrap; }
.mk-serp { border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:.9rem; }
.mk-serp-title { color:#1a0dab; font-size:1.05rem; }
.mk-serp-url { color:#006621; font-size:.85rem; }
.mk-page h2 { font-family:Newsreader,Georgia,serif; font-size:1.8rem; margin:18px 0 10px; }
.mk-page h3 { margin:22px 0 8px; }
.mk-cta { margin-top:22px; font-weight:700; color:var(--forest); }
.mk-tests { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mk-test { border:1px solid var(--line); border-radius:12px; padding:14px; }
.mk-test dl { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:.85rem; margin:10px 0 0; }
.mk-test dt { color:var(--muted); }
.mk-test dd { margin:0; }
@media (max-width:900px) { .mk-tests { grid-template-columns:1fr; } }
.mk-sources { font-size:.9rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.quiet-button { background:none; border:0; color:var(--muted); padding:0; text-decoration:underline; }
.mk-ask { margin:8px 0 0; max-width:820px; }
.mk-ask summary { cursor:pointer; color:var(--muted); font-size:.9rem; }
.mk-ask p { white-space:pre-wrap; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0 0; line-height:1.55; }
.mk-live h2 { margin:0 0 8px; }
.mk-live-line { display:flex; gap:10px; align-items:center; margin:0 0 6px; font-weight:600; color:var(--forest); }
.mk-live-meta { font:500 .85rem/1.4 "DM Mono",monospace; margin:0 0 12px; min-height:1.4em; }
.mk-pulse { width:9px; height:9px; border-radius:50%; background:var(--forest); animation:mk-pulse 1.6s ease-in-out infinite; flex:none; }
@keyframes mk-pulse { 0%,100% { opacity:.25; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .mk-pulse { animation:none; } }
.sr-status { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Start work: what's done, what's next, and a button that answers the press. */
.mk-kind { position:relative; }
.mk-kind.is-done { background:rgba(23,79,70,.035); }
.mk-kind.is-done strong::after { content:" ✓"; color:var(--forest); }
.mk-tag { display:inline-block; margin-top:6px; padding:3px 8px; border-radius:999px; font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; width:max-content; }
.mk-tag.next { background:var(--forest); color:var(--paper); }
.mk-tag.done { background:var(--mint); color:var(--forest-deep); }
.mk-redo { margin:-4px 0 12px; padding:10px 12px; border-radius:10px; background:#FBF4E4; border:1px solid #EAD9AE; color:var(--ink, #202522); }
button.is-busy { opacity:.75; cursor:progress; }
.mk-next { border-color:var(--forest); background:var(--mint); }
.mk-next h2 { font-size:1.1rem; margin:4px 0 6px; }
.mk-next textarea { width:100%; margin-top:6px; }
.mk-next .button, .mk-next button { margin-top:10px; }

/* The one line every page carries: where the privacy policy is. */
.legal-footer { max-width:1180px; margin:0 auto; padding:28px 20px 36px; font-size:12px; color:var(--muted); text-align:center; }
.legal-footer a { color:var(--muted); }

/* Employers: what they want, and the posting rules shown only while "Post
   jobs" is ticked (pure CSS, so it works without script). */
fieldset.employer-wants { border:0; padding:0; margin:0 0 18px; }
fieldset.employer-wants legend { font-weight:700; margin-bottom:8px; }
.employer-wants .check { display:flex; gap:10px; align-items:flex-start; font-weight:400; margin:6px 0; }
.employer-wants .check input { margin-top:4px; accent-color:var(--forest); }
.posting-rules { display:none; margin-top:12px; padding:14px 16px; border-radius:11px; background:var(--mint); color:var(--ink); font-size:.92rem; }
.employer-wants:has(input[name="wants_post"]:checked) .posting-rules { display:block; }
.posting-rules p { margin:0 0 6px; }
.posting-rules ul { margin:0; padding-left:18px; }
.posting-rules li { margin:5px 0; line-height:1.5; }
.chip.warn { color:var(--rose-ink); background:var(--rose); border-color:rgba(149,66,49,.25); }
.posting-text { white-space:pre-wrap; line-height:1.55; margin-top:10px; }
.list-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.chip { white-space:nowrap; }
.card + .card { margin-top:16px; }
.census-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.census-table th, .census-table td { text-align:left; padding:7px 8px 7px 0; border-bottom:1px solid var(--line); }
.census-table th { font-weight:700; }
/* Hiring articles: the review, the editor, and its preview. */
.article-numbers { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:14px 0; }
.article-numbers div { background:var(--mint); border-radius:10px; padding:10px 12px; }
.article-numbers strong { display:block; font:600 1.3rem/1.2 Newsreader,Georgia,serif; color:var(--forest); }
.article-numbers span { font-size:.85rem; color:var(--muted); }
.article-body h2 { margin:22px 0 8px; } .article-body h3 { margin:16px 0 6px; }
.article-body p, .article-body li { line-height:1.65; }
.article-social { white-space:pre-wrap; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.article-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.article-editor textarea.mono { font:13px/1.55 "DM Mono",monospace; }
.article-editor-preview { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
@media (max-width:900px) { .article-editor { grid-template-columns:1fr; } .article-editor-preview { position:static; max-height:none; } }

.gap-above { margin-top:14px; }