/* ═══════════════════════════════════════════════════════════════
   Utility by Vayunex Labs — design system
   Palette from the Vayunex letterhead: deep plum ink, violet wings.
   Display: Bricolage Grotesque · UI: Instrument Sans
   Document: Source Serif 4 · Verification artifacts: Spline Sans Mono
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #241238;            /* the letterhead footer plum */
  --ink-soft: #3A2555;
  --plum-950: #170B28;
  --violet: #7C3AED;
  --violet-deep: #5B21B6;
  --orchid: #A855F7;
  --wing: #CBB7EF;
  --line: #E6DDF5;
  --mist: #F7F4FC;           /* app canvas */
  --card: #FFFFFF;
  --muted: #6E5C8A;
  --paper: #FFFFFF;

  --ok: #147D5B;      --ok-bg: #E7F6EF;    --ok-line: #B5E2CE;
  --warn: #9A5B07;    --warn-bg: #FBF1DC;  --warn-line: #EBD5A8;
  --bad: #B42318;     --bad-bg: #FCECEA;   --bad-line: #F2C3BE;

  --grad: linear-gradient(90deg, var(--violet-deep), var(--violet) 45%, var(--orchid));
  --shadow-1: 0 1px 2px rgba(36, 18, 56, .06), 0 8px 24px -12px rgba(91, 33, 182, .18);
  --shadow-2: 0 2px 6px rgba(36, 18, 56, .08), 0 24px 48px -20px rgba(91, 33, 182, .3);

  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-ui: "Instrument Sans", "Segoe UI", sans-serif;
  --font-doc: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "Spline Sans Mono", Consolas, monospace;

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 85% -160px, rgba(168, 85, 247, .10), transparent 60%),
    var(--mist);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a { color: var(--violet-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 22px; }

/* ── the twin-rule motif, lifted from the letterhead's top-right bars ── */
.twinrule { display: grid; gap: 5px; justify-items: end; }
.twinrule i { display: block; height: 5px; border-radius: 99px; background: var(--grad); }
.twinrule i:first-child { width: 132px; }
.twinrule i:last-child { width: 84px; opacity: .45; }

/* ═══════════════ nav ═══════════════ */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 244, 252, .84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 26px;
  height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px; letter-spacing: -.01em;
}
.brand-word small {
  display: block; font-family: var(--font-ui); font-weight: 600;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--violet); margin-top: -2px;
}
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 7px 14px; border-radius: 99px;
  font-weight: 600; font-size: 13.5px; color: var(--ink-soft);
}
.nav-links a:hover { background: #EEE7FA; text-decoration: none; }
.nav-links a.active { background: var(--ink); color: #fff; }

.nav-user { display: flex; align-items: center; gap: 9px; padding-left: 16px; margin-left: 4px; border-left: 1.5px solid var(--line); }
.nav-user form { margin: 0; }
.avatar {
  width: 27px; height: 27px; border-radius: 50%; flex: none;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font-ui);
}
.nav-who { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.linkbtn {
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font: 600 12.5px/1 var(--font-ui); color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--bad); }

.app-foot {
  border-top: 1px solid var(--line);
  padding: 18px 0 26px; margin-top: 60px;
  color: var(--muted); font-size: 12.5px;
}
.app-foot .container { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* ═══════════════ buttons, badges, fields ═══════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--font-ui);
  padding: 11px 18px; border-radius: 99px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none !important;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--plum-950); box-shadow: var(--shadow-1); }
.btn-violet { background: var(--grad); color: #fff; }
.btn-violet:hover { filter: brightness(1.06); box-shadow: var(--shadow-1); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--wing); background: #FBF9FF; }
.btn-danger-ghost { background: #fff; border-color: var(--bad-line); color: var(--bad); }
.btn-danger-ghost:hover { background: var(--bad-bg); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 7px 13px; font-size: 13px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 99px;
}
.chip-draft { background: #EFE9F9; color: var(--ink-soft); }
.chip-signed { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.chip-soon { background: #EFE9F9; color: var(--muted); }

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block; margin-bottom: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea, .field select {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #FDFCFF; color: var(--ink);
  font: 500 14px/1.45 var(--font-ui);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus,
.editor:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ═══════════════ homepage ═══════════════ */

.masthead {
  margin: 30px auto 0;
  border-radius: var(--r-lg);
  background:
    radial-gradient(720px 300px at 12% -40%, rgba(168, 85, 247, .38), transparent 62%),
    radial-gradient(560px 300px at 96% 130%, rgba(124, 58, 237, .32), transparent 60%),
    var(--ink);
  color: #fff;
  padding: 52px 54px 46px;
  position: relative; overflow: hidden;
}
.masthead .twinrule { position: absolute; top: 30px; right: 34px; }
.masthead-kicker {
  font: 600 12px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase;
  color: var(--wing); margin: 0 0 14px;
}
.masthead h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.04;
  margin: 0 0 12px; max-width: 15ch;
}
.masthead p { color: #D9CDF0; max-width: 52ch; margin: 0; font-size: 15.5px; }
.masthead-stats { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.masthead-stats div { font-size: 12.5px; color: var(--wing); }
.masthead-stats b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 21px; color: #fff; letter-spacing: -.01em;
}

.shelf { margin: 34px 0 8px; }
.shelf-label {
  font: 700 11.5px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px; }

.card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 24px 22px;
  box-shadow: var(--shadow-1); color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.card:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow-2); border-color: var(--wing);
}
.card .twinrule { justify-items: start; margin-bottom: 6px; }
.card .twinrule i:first-child { width: 44px; }
.card .twinrule i:last-child { width: 26px; }
.card h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; letter-spacing: -.01em; margin: 0;
}
.card p { margin: 0; color: var(--muted); font-size: 13.8px; flex: 1; }
.card-meta { font-size: 12px; color: var(--muted); }
.card-cta { font-weight: 700; font-size: 14px; color: var(--violet-deep); }
.card-verify { background: linear-gradient(160deg, #FDFBFF, #F3EBFD); }
.card-soon { opacity: .62; }
.card-soon .chip { position: absolute; top: 18px; right: 18px; }

.recent { margin: 40px 0 10px; }
.recent-list { display: flex; flex-direction: column; gap: 8px; }
.recent-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 12px 16px; color: var(--ink);
}
.recent-row:hover { border-color: var(--wing); text-decoration: none; }
.recent-row .r-sub { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row .r-ref { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ═══════════════ editor workbench ═══════════════ */

/* rail | drag handle | preview. The rail width is a custom property so the
   splitter can move it, and localStorage can remember where you left it. */
.workbench {
  --rail-w: 460px;
  display: grid; grid-template-columns: var(--rail-w) 6px minmax(0, 1fr);
  gap: 22px 16px; align-items: start;
  margin-top: 24px;
}

.rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.panel {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.panel > h3, .panel summary h3 {
  display: inline; font: 700 12px/1 var(--font-ui);
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
}
.panel > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.panel > h3::after { content: ""; flex: 1; height: 1.5px; background: var(--line); border-radius: 2px; }

.panel details summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
}
.panel details summary::-webkit-details-marker { display: none; }
.panel details summary::after {
  content: "+"; margin-left: auto; font: 600 16px/1 var(--font-ui); color: var(--muted);
}
.panel details[open] summary::after { content: "–"; }
.panel details[open] summary { margin-bottom: 14px; }

.statusbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 12px 16px; box-shadow: var(--shadow-1);
}
.savestate { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.savestate.busy { color: var(--violet-deep); }
.savestate.err { color: var(--bad); font-weight: 600; }

/* toolbar */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 3px; align-items: center;
  border: 1.5px solid var(--line); border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 6px; background: #FBF9FF;
}
.toolbar .tb {
  min-width: 30px; height: 30px; padding: 0 7px;
  border: none; border-radius: 6px; background: transparent;
  font: 600 13px/1 var(--font-ui); color: var(--ink-soft); cursor: pointer;
}
.toolbar .tb:hover { background: #EEE6FA; }
.toolbar .tb svg { width: 15px; height: 15px; display: block; margin: 0 auto; }
.toolbar select.tb { padding: 0 4px; font-size: 12.5px; }
.toolbar .tb-color { padding: 0; width: 30px; border: none; background: transparent; cursor: pointer; height: 30px; }
.toolbar .sep { width: 1.5px; height: 20px; background: var(--line); margin: 0 4px; }

.editor {
  min-height: 300px; max-height: 55vh; overflow-y: auto;
  border: 1.5px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 16px 18px; background: #FDFCFF;
}
.editor:empty::before {
  content: attr(data-placeholder);
  color: #A79ABF; font-style: italic;
}
.editor[contenteditable="false"] { background: #F4F1FA; color: var(--muted); }

/* both the editor pane and the sheet body speak the document language */
.letterbody { font-family: var(--font-doc); font-size: 15px; line-height: 1.75; color: #2B2140; }
.letterbody p { margin: 0 0 11px; }
.letterbody h2, .letterbody h3 {
  font-family: var(--font-doc); color: var(--ink);
  margin: 18px 0 8px; line-height: 1.25;
}
.letterbody h2 { font-size: 19px; } .letterbody h3 { font-size: 16.5px; }
.letterbody ul, .letterbody ol { margin: 0 0 11px; padding-left: 26px; }
.letterbody li { margin-bottom: 4px; }
.letterbody blockquote {
  margin: 12px 0; padding: 6px 16px;
  border-left: 3px solid var(--orchid); color: var(--ink-soft);
  background: #FAF7FF;
}
.letterbody hr { border: none; border-top: 1.5px solid var(--line); margin: 16px 0; }
.letterbody a { color: var(--violet-deep); text-decoration: underline; }

.actions { display: flex; flex-wrap: wrap; gap: 9px; }
.hint { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.api-error { margin: 10px 0 0; font-size: 13px; color: var(--bad); font-weight: 600; }

/* saved letters */
.saved-list { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; }
.saved-row {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 12px; background: #FDFCFF;
}
.saved-row.current { border-color: var(--violet); background: #F6F0FE; }
.saved-main { flex: 1; min-width: 0; color: var(--ink); }
.saved-main:hover { text-decoration: none; }
.saved-sub { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.saved-meta { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.saved-del {
  border: none; background: none; color: var(--muted);
  font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.saved-del:hover { background: var(--bad-bg); color: var(--bad); }
.del-form { margin: 0; display: flex; }
.saved-empty { color: var(--muted); font-size: 13px; margin: 2px 0; }

/* ── the specimen case: preview stage ── */
.stage {
  position: sticky; top: 78px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(640px 380px at 50% 6%, rgba(168, 85, 247, .16), transparent 68%),
    linear-gradient(180deg, #221136, var(--plum-950));
  border: 1.5px solid #37215A;
  padding: 26px 26px 30px;
  overflow: hidden;
}
.stage-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; color: var(--wing);
  font: 600 11.5px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
}
.stage-bar .twinrule { margin-left: auto; }
.stage-bar .twinrule i:first-child { width: 60px; }
.stage-bar .twinrule i:last-child { width: 36px; }
.sheet-scaler { display: flex; justify-content: center; align-items: flex-start; }
/* .pages is scaled with a transform, which does not change layout size — so the
   wrapper is given the scaled dimensions instead, and the pane scrolls right. */
.pages-fit { overflow: hidden; margin: 0 auto; }
.pages-fit > .pages { transform-origin: top left; }
.page-count {
  font: 600 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: none;
  color: #fff; background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(203, 183, 239, .3);
  padding: 4px 9px; border-radius: 99px;
}

/* ═══════════════ the A4 sheet ═══════════════ */

/* ── paper geometry, in one place ──
   Screen work happens in CSS px (the unit the browser measures layout in);
   print happens in the paper's own physical unit. Both come off the same
   .paper-* class, so the pagination engine, the on-screen sheet and @page can
   never disagree about how tall a page is. Mirrors letterhead.models.PAPERS. */
.paper-a4     { --sheet-w: 794px;  --sheet-h: 1123px; --print-w: 210mm;  --print-h: 296.6mm; }
.paper-letter { --sheet-w: 816px;  --sheet-h: 1056px; --print-w: 8.5in;  --print-h: 10.97in; }
/* the print height is a whisker under the sheet: a sub-pixel rounding error on
   a page cut to exactly the paper is enough to push a blank sheet out after
   every real one. */

/* The stack of pages. Every page is a full letterhead — logo, rule, footer —
   because a second page of a letter is still letterhead paper. */
.pages {
  width: var(--sheet-w, 794px); flex: none;
  display: flex; flex-direction: column; gap: 22px;
  transform-origin: top center;
}

.sheet {
  width: var(--sheet-w, 794px); height: var(--sheet-h, 1123px); flex: none;
  background: var(--paper);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(11, 4, 24, .65);
  font-family: var(--font-doc);
}

/* Everything on the sheet is printed stationery — the gradient header rule, the
   dark footer bar, the table headers, the signature ribbon. Without this the
   browser drops all of it whenever "Background graphics" is unticked in the
   print dialog, which is the default in Chrome's Save-as-PDF. */
.sheet, .sheet * {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.cont-marker {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 1.5px dashed var(--line);
}

.foot-page {
  align-self: flex-end; margin-left: auto;
  flex: none;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--wing);
  white-space: nowrap; padding-left: 18px;
}

.noscript-note {
  background: var(--warn-bg); border: 1.5px solid var(--warn-line); color: var(--warn);
  padding: 14px 18px; border-radius: var(--r-md); font-weight: 600;
}
.sheet-water {
  position: absolute; top: 50%; left: 50%;
  width: 46%; transform: translate(-50%, -50%);
  opacity: .04; pointer-events: none; filter: grayscale(20%);
}

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 42px 56px 20px; gap: 24px;
}
.sheet-logo img { display: block; max-height: 78px; max-width: 300px; }
.sheet-logo img.broken { display: none; }
.sheet-logo-fallback {
  display: none;
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  letter-spacing: -.01em; color: var(--violet-deep);
}
.sheet-logo img.broken + .sheet-logo-fallback { display: block; }
.sheet-rules i { height: 6px; }

.sheet-divider { height: 3px; margin: 0 56px; background: var(--grad); border-radius: 99px; }

.sheet-body {
  flex: 1; min-height: 0;
  padding: 26px 56px 30px;
  position: relative; z-index: 1;
}
.page-flow { display: block; }

.sheet-meta { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 18px; }
.sheet-to { white-space: pre-line; font-size: 14.5px; line-height: 1.6; color: #2B2140; max-width: 380px; }
.sheet-refdate { text-align: right; flex: none; }
.sheet-refdate > div { margin-bottom: 6px; }
.sheet-refdate .k {
  display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.sheet-refdate .v { font-size: 14px; color: var(--ink); font-family: var(--font-mono); }

.sheet-subject { margin: 4px 0 16px; font-size: 15.5px; }
.sheet-subject .k { font-weight: 700; color: var(--violet-deep); margin-right: 6px; }
.sheet-subject #sh-subject, .sheet-subject .subj { font-weight: 600; }

.sheet-tail { margin-top: 30px; }
.sheet-signoff { margin-top: 0; }
.signoff-lead { margin-bottom: 34px; }
.signoff-name { font-weight: 600; font-size: 16px; }
.signoff-role { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ── signature ribbon ── */
.sig-ribbon {
  margin-top: 26px;
  position: relative;
  display: flex; gap: 14px; align-items: flex-start;
  border: 1.5px solid #DACBF6; border-radius: 12px;
  background: linear-gradient(180deg, #FBF9FF, #F5EFFC);
  padding: 14px 18px 13px 22px;
  overflow: hidden;
  font-family: var(--font-ui);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.sig-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--grad); }
.sig-seal {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.sig-seal svg { width: 20px; height: 20px; }
.sig-lines { min-width: 0; }
.sig-title {
  font-weight: 700; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--violet-deep); margin-bottom: 3px;
}
.sig-who { font-size: 13px; color: var(--ink); }
.sig-code {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  margin-top: 6px; font-family: var(--font-mono);
}
.sig-id { font-size: 14.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.sig-hash { font-size: 10.5px; color: var(--muted); }
.sig-note { margin-top: 5px; font-size: 11px; color: var(--muted); }
.sig-note b { color: var(--ink-soft); font-family: var(--font-mono); font-weight: 600; }

/* ── sheet footer, faithful to the printed letterhead ──
   Every level of this is a flex item, and a flex item defaults to
   min-width:auto — it refuses to shrink below the width of its own text. Long
   addresses therefore push the bar wider than the paper it sits on. min-width:0
   down the whole chain gives them permission to shrink, and the address text
   wraps to a second line rather than running off the edge. */
.sheet-foot {
  margin-top: auto; width: 100%; overflow: hidden;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.foot-rule { height: 5px; background: var(--grad); }
.foot-inner {
  background: var(--ink); color: #EFE9FA;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 16px 40px 18px;
  font-family: var(--font-ui); font-size: 11.5px;
  min-width: 0; max-width: 100%;
}
.foot-col {
  display: flex; flex-direction: column; gap: 7px;
  min-width: 0; flex: 0 1 auto;
}
.foot-col.right { text-align: left; }
.foot-item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.foot-item > span:last-child {
  min-width: 0; overflow-wrap: anywhere; line-height: 1.35;
  padding-top: 3px;   /* optically centres one line against the 21px icon */
}
.foot-item .fi {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  background: var(--grad); display: flex; align-items: center; justify-content: center;
}
.foot-item .fi svg { width: 11px; height: 11px; color: #fff; }

/* ═══════════════ sign in ═══════════════ */

.signin-page {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(760px 420px at 15% -10%, rgba(168, 85, 247, .20), transparent 62%),
    radial-gradient(620px 400px at 92% 108%, rgba(91, 33, 182, .18), transparent 60%),
    var(--mist);
}
.signin-wrap { width: 100%; max-width: 470px; }

/* the card is a miniature letterhead: logo header, gradient rule, contact footer */
.signin-sheet {
  background: var(--paper);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 2px 8px rgba(36, 18, 56, .07), 0 40px 80px -30px rgba(36, 18, 56, .45);
}
.signin-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 26px 30px 18px;
}
.signin-logo img { display: block; max-height: 52px; max-width: 190px; }
.signin-logo img.broken { display: none; }
.signin-logo img.broken + .sheet-logo-fallback { display: block; font-size: 24px; }
.signin-head .twinrule i:first-child { width: 74px; }
.signin-head .twinrule i:last-child { width: 46px; }
.signin-sheet .sheet-divider { margin: 0 30px; }

.signin-body { padding: 26px 30px 28px; }
.signin-kicker {
  font: 700 10.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase;
  color: var(--violet); margin: 0 0 9px;
}
.signin-body h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 25px;
  letter-spacing: -.02em; line-height: 1.15; margin: 0 0 8px;
}
.signin-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.signin-form .field { margin-bottom: 15px; }
.signin-form input { padding: 11px 13px; font-size: 15px; }
.signin-go { width: 100%; margin-top: 4px; padding: 13px; font-size: 15px; }
.signin-alt { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.signin-foot { text-align: center; margin: 18px 0 0; font-size: 12px; color: var(--muted); }

.pw-wrap { display: block; position: relative; }
.pw-wrap input { padding-right: 62px !important; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px;
  font: 600 12px/1 var(--font-ui); color: var(--violet-deep);
}
.pw-toggle:hover { background: #F1E9FD; }

.notice {
  border: 1.5px solid; border-radius: var(--r-sm);
  padding: 11px 14px; margin-bottom: 18px; font-size: 13.2px; line-height: 1.5;
}
.notice code {
  font-family: var(--font-mono); font-size: 12px;
  background: rgba(36, 18, 56, .07); padding: 2px 6px; border-radius: 4px;
  display: inline-block; margin-top: 2px;
}
.notice-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

/* ═══════════════ verify page ═══════════════ */

.verify-wrap { max-width: 660px; margin: 44px auto 0; }
.verify-head { text-align: center; margin-bottom: 22px; }
.verify-head .twinrule { justify-items: center; margin: 0 auto 16px; }
.verify-head h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; margin: 0 0 8px;
}
.verify-head p { color: var(--muted); margin: 0 auto; max-width: 46ch; }

.verify-card {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 26px 28px;
}
.verify-form { display: flex; gap: 10px; }
.verify-form input {
  flex: 1; padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  font: 600 16px/1 var(--font-mono); letter-spacing: .05em;
  color: var(--ink); background: #FDFCFF; text-transform: uppercase;
}
.verify-form input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.14); }

.vresult { margin-top: 22px; border-radius: var(--r-md); border: 1.5px solid; overflow: hidden; }
.vband { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-weight: 700; font-size: 15.5px; }
.vband svg { width: 22px; height: 22px; flex: none; }
.vresult.ok { border-color: var(--ok-line); } .vresult.ok .vband { background: var(--ok-bg); color: var(--ok); }
.vresult.warn { border-color: var(--warn-line); } .vresult.warn .vband { background: var(--warn-bg); color: var(--warn); }
.vresult.bad { border-color: var(--bad-line); } .vresult.bad .vband { background: var(--bad-bg); color: var(--bad); }
.vband small { display: block; font-weight: 500; font-size: 12.5px; margin-top: 1px; }

.vdetails { padding: 16px 18px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; background: #fff; }
.vdetails div { min-width: 0; }
.vdetails .k {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.vdetails .v { font-size: 14px; word-break: break-word; }
.vdetails .v.mono { font-family: var(--font-mono); font-size: 12.5px; }
.vdetails .wide { grid-column: 1 / -1; }
.verify-note { margin-top: 16px; font-size: 12.5px; color: var(--muted); }

/* ═══════════════ document suite — items, money, commercial sheet ═══════════════ */

.mono { font-family: var(--font-mono); }

/* ── line-item editor grid (rail) ── */
.items-table-wrap { overflow-x: auto; margin-bottom: 8px; }
table.items-edit { width: 100%; border-collapse: collapse; min-width: 430px; }
.items-edit th {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 0 4px 5px;
}
.items-edit td { padding: 0 2px 6px; vertical-align: top; }
.items-edit input {
  width: 100%; padding: 7px 8px;
  border: 1.5px solid var(--line); border-radius: 7px;
  background: #FDFCFF; color: var(--ink);
  font: 500 13px/1.4 var(--font-ui);
}
.items-edit input:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
.items-edit .c-desc { width: 34%; min-width: 120px; }
.items-edit .c-hsn { width: 12%; }
.items-edit .c-qty { width: 11%; }
.items-edit .c-unit { width: 11%; }
.items-edit .c-rate { width: 16%; }
.items-edit .c-gst { width: 11%; }
.items-edit .c-x { width: 26px; }
.items-edit.tax-off .gcol { display: none; }
.items-edit input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.items-edit input::-webkit-outer-spin-button,
.items-edit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.it-del {
  border: none; background: none; cursor: pointer; padding: 8px 4px;
  color: var(--muted); font-size: 12px; line-height: 1; border-radius: 6px;
}
.it-del:hover { color: var(--bad); background: var(--bad-bg); }
.it-del:disabled { opacity: .35; cursor: default; }

.items-sum {
  margin-top: 10px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #FBF9FF; font-size: 13px;
}
.items-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.items-sum span { color: var(--muted); }
.items-sum b { font-family: var(--font-mono); font-weight: 600; }
.items-sum .grand { border-top: 1.5px solid var(--line); margin-top: 5px; padding-top: 6px; }
.items-sum .grand span { color: var(--ink); font-weight: 700; }
.items-sum .grand b { color: var(--violet-deep); }

/* ── on-sheet: document title ── */
.sheet-doctitle {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 15px; letter-spacing: .34em; text-indent: .34em; text-align: center;
  color: var(--violet-deep);
  margin: -2px 0 16px; padding-bottom: 8px;
  border-bottom: 1.5px solid var(--line);
}

/* ── on-sheet: billed-to block ── */
.sheet-to-block { max-width: 380px; }
.sheet-to-label {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.sheet-to-gstin { font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.sheet-to-gstin b { font-family: var(--font-mono); font-weight: 600; }

/* ── on-sheet: item table ── */
.inv-table {
  width: 100%; border-collapse: collapse;
  margin: 4px 0 14px;
  font-family: var(--font-ui); font-size: 12.5px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.inv-table th {
  background: var(--ink); color: #EFE9FA;
  font-weight: 600; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  padding: 7px 9px; text-align: left;
}
.inv-table td {
  padding: 7px 9px; vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: #2B2140;
}
.inv-table .c-i { width: 30px; color: var(--muted); }
.inv-table .c-h { width: 76px; font-family: var(--font-mono); font-size: 11.5px; }
.inv-table .c-q { width: 76px; }
.inv-table .c-r, .inv-table .c-a { width: 96px; text-align: right; font-family: var(--font-mono); font-size: 12px; }
.inv-table .c-g { width: 56px; text-align: right; }
.inv-table th.c-r, .inv-table th.c-a, .inv-table th.c-g { text-align: right; }
.inv-table td.c-d { font-weight: 500; }
.inv-table-cont { margin-top: 2px; }

/* ── on-sheet: totals ── */
.inv-totalbar { margin: 0 0 16px; }
.inv-totals {
  margin-left: auto; width: 300px;
  font-family: var(--font-ui); font-size: 13px;
}
.inv-totals .tr {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 4px 9px;
}
.inv-totals .tr span { color: var(--muted); }
.inv-totals .tr b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.inv-totals .tr.grand {
  margin-top: 4px; border-top: 2px solid var(--ink);
  background: #F6F0FE; border-radius: 0 0 8px 8px;
  padding-top: 7px; padding-bottom: 7px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.inv-totals .tr.grand span { color: var(--ink); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.inv-totals .tr.grand b { color: var(--violet-deep); font-size: 15px; }
.inv-words {
  margin-top: 10px; padding: 8px 12px;
  border: 1px dashed var(--wing); border-radius: 8px;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft);
  font-style: italic;
}

/* ── on-sheet: labelled note blocks (terms, payment details) ── */
.sheet-note { margin: 0 0 14px; }
.sheet-note-label {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.sheet-note-body {
  white-space: pre-line;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.6; color: #2B2140;
}

/* ── nav search ── */
.navsearch { position: relative; display: flex; align-items: center; margin-left: 14px; }
.navsearch-i {
  position: absolute; left: 10px; width: 15px; height: 15px;
  color: var(--muted); pointer-events: none;
}
.navsearch input {
  width: 190px; padding: 7px 12px 7px 31px;
  border: 1.5px solid var(--line); border-radius: 99px;
  background: #FDFCFF; color: var(--ink);
  font: 500 13px/1.4 var(--font-ui);
}
.navsearch input::placeholder { color: var(--muted); }
.navsearch input:focus {
  outline: none; border-color: var(--violet); width: 230px;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
.navsearch input { transition: width .18s ease; }

/* ── search results page ── */
.search-page { max-width: 940px; margin: 30px auto 60px; }
.search-head { margin-bottom: 20px; }
.search-head .twinrule { justify-items: start; margin-bottom: 14px; }
.search-head h1 {
  font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px;
}
.search-head p { color: var(--muted); margin: 0; max-width: 62ch; }

.search-bigform { display: flex; gap: 10px; margin-bottom: 16px; }
.search-bigform input {
  flex: 1; padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink);
  font: 500 15px/1.4 var(--font-ui);
}
.search-bigform input:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}

.search-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.fchip {
  padding: 6px 14px; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.fchip:hover { border-color: var(--wing); text-decoration: none; }
.fchip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.search-count { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.search-list { display: flex; flex-direction: column; gap: 8px; }
.search-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.search-row:hover { border-color: var(--wing); }
.search-main { flex: 1; min-width: 0; color: var(--ink); }
.search-main:hover { text-decoration: none; }
.s-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.s-type { flex: none; }
.s-sub {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-meta {
  display: block; margin-top: 3px;
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-amount { flex: none; font-size: 13.5px; font-weight: 600; color: var(--violet-deep); }

.search-empty {
  background: var(--card); border: 1.5px dashed var(--line); border-radius: var(--r-md);
  padding: 26px 24px; color: var(--muted);
}
.search-empty p { margin: 0 0 8px; }
.search-empty p:last-child { margin-bottom: 0; }

/* ── home: desk card counts ── */
.card-count {
  display: inline-block; margin-left: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--violet-deep); background: #F6F0FE;
  border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px;
  vertical-align: 3px;
}
.recent-row .r-type { flex: none; }

/* ═══════════════ print ═══════════════ */

.print-page { background: #4A3567; min-height: 100vh; padding: 26px 0 90px; }
.print-page .sheet { margin: 0 auto; }
.printbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 22px;
  background: rgba(23, 11, 40, .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #472C6F;
}
.printbar .spacer { flex: 1; }

/* the pre-flight checklist — the difference between a clean PDF and a bad one
   is almost always three settings in the browser's own dialog */
.printtips {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  color: var(--wing); font-size: 12px;
}
.printtips b { color: #fff; font-weight: 600; }
.printtips .tip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(203, 183, 239, .25);
  border-radius: 99px; padding: 4px 11px; white-space: nowrap;
}

@media print {
  /* overflow has to be reset too: an overflow:hidden or :auto ancestor left
     over from a full-screen mode is a classic cause of "only page one prints" */
  body { background: #fff !important; display: block; overflow: visible !important; }
  .no-print, .nav, .app-foot, .rail, .statusbar, .stage-bar, .printbar,
  .sharebar, .splitter, .fs-bar, .share-head, .share-foot { display: none !important; }
  main, .container, .workbench, .stage, .sheet-scaler, .print-page,
  .share-page, .share-stage {
    display: block !important; margin: 0 !important; padding: 0 !important;
    background: none !important; border: none !important; max-width: none !important;
    overflow: visible !important;
  }
  .stage { position: static !important; border-radius: 0 !important; }
  .sheet-scaler { height: auto !important; }
  .pages-fit {
    width: auto !important; height: auto !important;
    overflow: visible !important; margin: 0 !important;
  }

  /* A full-screen mode left open must never reach the paper. These selectors
     have to out-specify the screen rules that hid the other pane — both sides
     are !important, so specificity is what decides. */
  body.mode-write .stage, body.mode-preview .stage,
  body.mode-write .workbench, body.mode-preview .workbench,
  body.mode-write .container, body.mode-preview .container {
    display: block !important;
    position: static !important; inset: auto !important;
    margin: 0 !important; padding: 0 !important; max-width: none !important;
  }
  body.mode-write #content-panel, body.mode-write .rail,
  body.mode-preview .rail { display: none !important; }
  body.mode-preview .sheet-scaler {
    overflow: visible !important; height: auto !important; padding: 0 !important;
  }

  .pages {
    display: block !important; width: auto !important;
    gap: 0 !important; transform: none !important;
  }
  /* one sheet per physical page; the last one must not trail a blank page */
  .sheet {
    width: var(--print-w) !important; height: var(--print-h) !important;
    margin: 0 !important; box-shadow: none !important;
    break-after: page; page-break-after: always;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* the letterhead furniture must survive the print pipeline on every page */
  .sheet-head, .sheet-divider, .sheet-foot, .foot-rule, .foot-inner,
  .foot-item .fi, .twinrule i, .inv-table th, .inv-totals .tr.grand,
  .sig-ribbon, .sig-spine, .sig-seal, .sheet-water {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Re-assert each element's own display, not one blanket value. The footer is
     a block stacking a gradient rule above a contact bar — forced to flex it
     becomes a row instead, which collapses the rule to nothing and lets the
     dark bar size itself to its text rather than to the paper. That is the
     footer hanging off the edge of the page. */
  .sheet-head { display: flex !important; }
  .sheet-divider, .sheet-foot, .foot-rule { display: block !important; }
  .foot-inner { display: flex !important; }
  .sheet-logo img, .sheet-water { display: block !important; }
  .sheet-logo img.broken { display: none !important; }
  .pages .sheet:last-child { break-after: auto; page-break-after: auto; }
  .editor-only { display: none !important; }
}

/* ═══════════════ manual page breaks ═══════════════ */

/* In the editor a page break is a visible marker you can select and delete.
   On the sheet it is consumed by the paginator and never drawn. */
.editor .page-break {
  position: relative; height: 0;
  border-top: 2px dashed var(--orchid);
  margin: 22px 0; user-select: none;
}
.editor .page-break::after {
  content: "Page break";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #FBF9FF; border: 1.5px solid var(--wing); border-radius: 99px;
  padding: 2px 12px;
  font: 700 9.5px/1.6 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--violet-deep);
}
.sheet .page-break { display: none; }

.editor mark { background: #FDF0A8; color: inherit; padding: 0 1px; }

/* ═══════════════ editor chrome: split, full screen, toolbar ═══════════════ */

/* the drag handle between the rail and the preview */
.splitter {
  align-self: stretch; position: relative;
  cursor: col-resize; touch-action: none;
  border-radius: 99px; background: transparent;
  transition: background .14s ease;
}
.splitter::before {
  content: ""; position: absolute; inset: 0 1px;
  border-radius: 99px; background: var(--line);
  transition: background .14s ease;
}
.splitter:hover::before, .splitter.dragging::before { background: var(--violet); }
.splitter::after {
  content: ""; position: absolute; inset: -6px -8px; /* fat invisible grab area */
}
body.splitting { cursor: col-resize; user-select: none; }
body.splitting iframe { pointer-events: none; }

/* panel header actions (Full screen, word count, …).
   The hairline rule between the label and the buttons is the h3's ::after,
   which always renders last — `order` puts it back in the middle. */
.panel > h3 .h3-actions {
  order: 3; display: flex; align-items: center; gap: 6px;
  padding-left: 10px;
}
.panel > h3::after { order: 2; }

.minibtn {
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  border-radius: 99px; padding: 4px 10px;
  font: 600 11px/1.4 var(--font-ui); letter-spacing: .04em;
  color: var(--ink-soft); text-transform: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.minibtn:hover { border-color: var(--wing); background: #FBF9FF; color: var(--violet-deep); }
.minibtn svg { width: 12px; height: 12px; }
.minibtn.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.countline {
  font: 500 11px/1 var(--font-mono); color: var(--muted);
  text-transform: none; letter-spacing: 0;
}

/* sticks below the app bar, not behind it — the nav is 62px and sticky too */
.toolbar { position: sticky; top: 62px; z-index: 3; }
body.mode-write .toolbar { top: 0; }
.toolbar .tb.on { background: var(--ink); color: #fff; }
.toolbar select.tb {
  border: 1.5px solid var(--line); border-radius: 6px; background: #fff;
  height: 30px; color: var(--ink-soft);
}
.tb-group { display: flex; gap: 3px; align-items: center; }

/* find & replace strip */
.findbar {
  display: none; gap: 7px; align-items: center; flex-wrap: wrap;
  border: 1.5px solid var(--line); border-top: none;
  padding: 8px; background: #FBF9FF;
}
.findbar.open { display: flex; }
.findbar input {
  flex: 1; min-width: 110px; padding: 6px 10px;
  border: 1.5px solid var(--line); border-radius: 7px; background: #fff;
  font: 500 13px/1.4 var(--font-ui); color: var(--ink);
}
.findbar input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.14); }
.findbar .findcount { font: 500 11.5px/1 var(--font-mono); color: var(--muted); min-width: 56px; }

/* ── full-screen writing mode ── */
body.mode-write { overflow: hidden; }
body.mode-write .nav, body.mode-write .app-foot, body.mode-write .stage,
body.mode-write .splitter, body.mode-write .rail > *:not(#content-panel) { display: none !important; }
body.mode-write .workbench { display: block; margin: 0; }
body.mode-write .container { max-width: none; padding: 0; }
body.mode-write .rail { display: block; }
body.mode-write #content-panel {
  position: fixed; inset: 0; z-index: 120;
  border: none; border-radius: 0; box-shadow: none;
  padding: 0; background: var(--mist);
  display: flex; flex-direction: column;
}
body.mode-write #content-panel > h3 {
  margin: 0; padding: 12px 22px;
  background: var(--card); border-bottom: 1.5px solid var(--line);
}
body.mode-write #content-panel .toolbar {
  border-left: none; border-right: none; border-radius: 0;
  padding: 8px 22px; justify-content: center;
}
body.mode-write #content-panel .findbar { border-left: none; border-right: none; padding: 8px 22px; }
body.mode-write #content-panel .editor {
  flex: 1; min-height: 0; max-height: none;
  border: none; border-radius: 0; background: var(--mist);
  padding: 44px max(24px, calc(50% - 27rem)) 30vh;
  font-size: 17px; line-height: 1.85;
}
body.mode-write #content-panel .editor:focus { box-shadow: none; }

/* ── full-screen preview ── */
body.mode-preview { overflow: hidden; }
body.mode-preview .nav, body.mode-preview .app-foot,
body.mode-preview .rail, body.mode-preview .splitter { display: none !important; }
body.mode-preview .workbench { display: block; margin: 0; }
body.mode-preview .container { max-width: none; padding: 0; }
body.mode-preview .stage {
  position: fixed; inset: 0; z-index: 120;
  border: none; border-radius: 0;
  padding: 0; display: flex; flex-direction: column;
}
body.mode-preview .stage-bar { display: none; }
body.mode-preview .sheet-scaler {
  flex: 1; min-height: 0; height: auto !important;
  overflow: auto; padding: 26px 20px 40px;
  align-items: flex-start; justify-content: flex-start;
}
body.mode-preview .pages { margin: 0 auto; }

/* the toolbar that floats over full-screen preview */
.fs-bar {
  display: none;
  align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px;
  background: rgba(23, 11, 40, .94);
  border-bottom: 1px solid #472C6F;
  color: var(--wing); font: 600 11.5px/1 var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase;
}
body.mode-preview .fs-bar { display: flex; }
.fs-bar .spacer { flex: 1; }
.fs-btn {
  border: 1px solid rgba(203, 183, 239, .3); background: rgba(255, 255, 255, .09);
  color: #fff; cursor: pointer; border-radius: 99px;
  padding: 6px 12px; font: 600 11.5px/1 var(--font-ui); letter-spacing: .06em;
}
.fs-btn:hover { background: rgba(255, 255, 255, .19); }
.fs-btn.on { background: var(--grad); border-color: transparent; }
.fs-zoom {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0;
  color: #fff; min-width: 46px; text-align: center; text-transform: none;
}
.fs-page { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: #fff; }

/* ═══════════════ share panel (rail) ═══════════════ */

.share-off p { margin: 0 0 12px; }
.share-live {
  border: 1.5px solid var(--ok-line); background: var(--ok-bg);
  border-radius: var(--r-sm); padding: 12px 13px; margin-bottom: 12px;
}
.share-live .share-state {
  display: flex; align-items: center; gap: 7px;
  font: 700 10.5px/1 var(--font-ui); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ok); margin-bottom: 9px;
}
.share-live .share-state svg { width: 13px; height: 13px; }
.share-copyrow { display: flex; gap: 7px; }
.share-copyrow input {
  flex: 1; min-width: 0; padding: 8px 11px;
  border: 1.5px solid #BFE3D2; border-radius: 7px; background: #fff;
  font: 500 12px/1.4 var(--font-mono); color: var(--ink);
}
.share-copyrow input:focus { outline: none; border-color: var(--ok); }
.share-meta { margin: 9px 0 0; font-size: 11.5px; color: #3F7D63; }

/* ═══════════════ the customer-facing shared page ═══════════════ */

.share-page {
  background:
    radial-gradient(900px 420px at 82% -180px, rgba(168, 85, 247, .18), transparent 62%),
    linear-gradient(180deg, #2A1745, var(--plum-950));
  min-height: 100vh; padding-bottom: 70px;
}
.sharebar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(23, 11, 40, .88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #472C6F;
}
.sharebar-in {
  max-width: 1000px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sharebar-mark { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sharebar-mark img { max-height: 30px; max-width: 130px; display: block; }
.sharebar-mark .word {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff;
}
.sharebar-doc { min-width: 0; color: var(--wing); font-size: 12.5px; }
.sharebar-doc b { display: block; color: #fff; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42ch; }
.sharebar .spacer { flex: 1; }
.share-badge {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 99px; padding: 6px 13px;
  font: 600 11.5px/1 var(--font-ui); letter-spacing: .05em;
}
.share-badge svg { width: 14px; height: 14px; }
.share-badge.ok { background: rgba(20, 125, 91, .22); color: #8FE7C4; border: 1px solid rgba(143, 231, 196, .4); }
.share-badge.draft { background: rgba(255, 255, 255, .1); color: var(--wing); border: 1px solid rgba(203, 183, 239, .3); }

.share-head {
  max-width: 1000px; margin: 0 auto; padding: 30px 22px 4px;
  color: #fff;
}
.share-head .twinrule { justify-items: start; margin-bottom: 14px; }
.share-head h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.02em; margin: 0 0 6px;
}
.share-head p { color: #C9B8E8; margin: 0; font-size: 14px; max-width: 62ch; }
.share-facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.share-facts div { font-size: 12px; color: var(--wing); }
.share-facts b { display: block; color: #fff; font-size: 15px; font-family: var(--font-mono); font-weight: 600; }

.share-stage { max-width: 1000px; margin: 0 auto; padding: 22px 22px 0; }
.share-stage .sheet-scaler { display: block; }
.share-stage .pages { margin: 0 auto; }
.share-foot {
  max-width: 1000px; margin: 0 auto; padding: 26px 22px 0;
  color: #A794C6; font-size: 12.5px;
}
.share-foot a { color: var(--wing); text-decoration: underline; }

.share-gone { max-width: 520px; margin: 90px auto; text-align: center; }
.share-gone h1 { font-family: var(--font-display); font-size: 28px; margin: 0 0 10px; }
.share-gone p { color: var(--muted); }

/* ═══════════════ logo settings ═══════════════ */

.logo-box {
  display: flex; gap: 14px; align-items: center;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; background: #FDFCFF; margin-bottom: 12px;
}
.logo-thumb {
  width: 96px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.logo-thumb img { max-width: 100%; max-height: 100%; display: block; }
.logo-thumb .none {
  font: 600 9.5px/1.3 var(--font-ui); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
.logo-facts { min-width: 0; flex: 1; }
.logo-facts .lstate { font-size: 12.5px; font-weight: 600; }
.logo-facts .lstate.good { color: var(--ok); }
.logo-facts .lstate.bad { color: var(--warn); }
.logo-facts .lsrc {
  font-size: 11px; color: var(--muted); font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.logo-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }

/* ═══════════════ responsive + motion ═══════════════ */

@media (max-width: 1120px) {
  .workbench { grid-template-columns: 1fr; }
  .splitter { display: none; }
  .stage { position: static; }
}
@media (max-width: 1000px) {
  .navsearch input { width: 140px; }
  .navsearch input:focus { width: 170px; }
}
@media (max-width: 640px) {
  .masthead { padding: 36px 26px 34px; }
  .masthead .twinrule { display: none; }
  .nav-inner { gap: 10px; flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .nav-links a { padding: 7px 10px; font-size: 13px; }
  .nav-who, .brand-word small { display: none; }
  .nav-user { padding-left: 10px; gap: 7px; }
  .navsearch { order: 3; width: 100%; margin: 4px 0 0; }
  .navsearch input, .navsearch input:focus { width: 100%; }
  .verify-form { flex-direction: column; }
  .search-bigform { flex-direction: column; }
  .search-row { flex-wrap: wrap; }
  .vdetails { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}