/* =====================================================================
   Smoothquill — design tokens + base components
   ---------------------------------------------------------------------
   Token SYSTEM harvested from dustbunnies-project (CSS custom properties +
   reusable component classes). Colors are Smoothquill's own: a professional,
   trust-oriented notary palette (navy/slate + a single warm accent), NOT the
   Dust Bunnies pink. Recolor the whole portal by editing :root below.
   ===================================================================== */

:root {
  /* Surfaces — warm "paper" to match the marketing site */
  --bg:        #F4EFE5;   /* app background (marketing --paper) */
  --surface:   #FFFFFF;   /* cards / panels (marketing --paper-card) */
  --surface-2: #FAF7F0;   /* subtle fills, read-only inputs (marketing --paper-light) */
  --surface-3: #E7DECF;

  /* Ink / text — marketing neutral ink ramp */
  --ink:    #1B1F2A;      /* primary text (marketing --ink) */
  --ink-2:  #3A3F4C;      /* marketing --ink-soft */
  --mid:    #666B78;      /* secondary text (marketing --ink-dim) */
  --muted:  #9CA0AB;      /* tertiary / placeholders (marketing --ink-faint) */
  --light:  #C4B89C;

  /* Brand — marketing oxblood + gold. Variable NAMES are kept (--navy is the
     primary-brand slot) so every component reference swaps value, not name. */
  --navy:      #6B1F1F;   /* primary brand — marketing oxblood */
  --navy-deep: #4F1414;   /* marketing --oxblood-deep */
  --navy-soft: #F1E3E1;   /* light oxblood wash for hovers/focus ring (derived) */
  --accent:      #B8893D; /* marketing --gold (exact) */
  --accent-deep: #946A2C; /* darkened gold for hover (derived) */
  --accent-soft: #F3E8D2;
  --sage:        #7A8B70; /* marketing --sage secondary — decorative, unused for now */

  /* Status — kept functional for legibility (NOT brand-tinted, per decision) */
  --green:     #1F7A4D;  --green-lt: #E5F4EC;
  --amber:     #9A6B12;  --amber-lt: #FBF1DD;
  --red:       #B23B3B;  --red-lt:   #FBEAEA;

  /* Borders — marketing --line / --line-strong (neutral ink, not navy) */
  --bdr:  rgba(27,31,42,.08);
  --bdr2: rgba(27,31,42,.16);

  /* Radii — sharpened to the marketing 4px convention (pills stay 999px) */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 8px;  --r-xl: 12px;  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(15,27,45,.06), 0 1px 3px rgba(15,27,45,.10);
  --sh-2: 0 6px 24px rgba(15,27,45,.12);

  /* Type — marketing Newsreader (serif) + Manrope (sans); webfonts loaded in
     notary/index.html. --font-mono points at the marketing JetBrains Mono but
     is NOT loaded (no component uses it yet → system-mono fallback). */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", "Georgia", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- base ---------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); }
/* Editorial serif display scale — big and confident, like the marketing hero.
   Newsreader's optical-size axis (loaded 6..72) sharpens at these sizes. */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; color: var(--ink); margin: 0 0 .3em; line-height: 1.12; letter-spacing: -.02em; }
h1 { font-size: 36px; } h2 { font-size: 26px; } h3 { font-size: 19px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* ---- layout -------------------------------------------------------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 40px 20px 100px; }
.center-narrow { max-width: 420px; margin: 8vh auto 0; padding: 0 18px; }
.row { display: flex; gap: 12px; align-items: center; }
.row-wrap { display: flex; gap: 12px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 24px; }  /* generous editorial rhythm for card groups */
.hidden { display: none !important; }

/* ---- topbar -------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--bdr);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-word { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 20px; color: var(--navy); letter-spacing: normal; }
.brand small { font-family: var(--font-sans); font-weight: 500; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

/* Wax brand seal — harvested VERBATIM from the marketing site's .logo-seal
   (data-URI SVG: wax-blob "S" with radial sheen). Same mark, same product. */
.logo-seal {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22b%22%20cx%3D%2238%25%22%20cy%3D%2232%25%22%20r%3D%2268%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%238B2D2D%22%2F%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%236B1F1F%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%232A0808%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22s%22%20cx%3D%2230%25%22%20cy%3D%2222%25%22%20r%3D%2238%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FFFFFF%22%20stop-opacity%3D%220.55%22%2F%3E%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23FFFFFF%22%20stop-opacity%3D%220.1%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFFFFF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22c%22%20cx%3D%2245%25%22%20cy%3D%2240%25%22%20r%3D%2260%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%237A2424%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234F1414%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2256%22%20rx%3D%2244%22%20ry%3D%2240%22%20fill%3D%22rgba%2827%2C31%2C42%2C0.3%29%22%20filter%3D%22blur%283px%29%22%2F%3E%3Cpath%20d%3D%22M%2050%205%20C%2060%204%2C%2070%206%2C%2078%2012%20C%2084%2017%2C%2088%2024%2C%2091%2032%20C%2094%2040%2C%2095%2048%2C%2092%2056%20C%2089%2065%2C%2084%2073%2C%2076%2079%20C%2070%2084%2C%2062%2087%2C%2054%2088%20C%2050%2090%2C%2045%2092%2C%2040%2092%20C%2032%2092%2C%2024%2090%2C%2017%2085%20C%209%2079%2C%205%2070%2C%204%2060%20C%203%2050%2C%205%2039%2C%2011%2030%20C%2017%2021%2C%2026%2014%2C%2036%209%20C%2041%206%2C%2045%205%2C%2050%205%20Z%22%20fill%3D%22url%28%23b%29%22%20stroke%3D%22%231F0606%22%20stroke-width%3D%220.4%22%2F%3E%3Cpath%20d%3D%22M%2050%205%20C%2060%204%2C%2070%206%2C%2078%2012%20C%2084%2017%2C%2088%2024%2C%2091%2032%20C%2094%2040%2C%2095%2048%2C%2092%2056%20C%2089%2065%2C%2084%2073%2C%2076%2079%20C%2070%2084%2C%2062%2087%2C%2054%2088%20C%2050%2090%2C%2045%2092%2C%2040%2092%20C%2032%2092%2C%2024%2090%2C%2017%2085%20C%209%2079%2C%205%2070%2C%204%2060%20C%203%2050%2C%205%2039%2C%2011%2030%20C%2017%2021%2C%2026%2014%2C%2036%209%20C%2041%206%2C%2045%205%2C%2050%205%20Z%22%20fill%3D%22url%28%23s%29%22%2F%3E%3Ccircle%20cx%3D%2249%22%20cy%3D%2249%22%20r%3D%2231%22%20fill%3D%22none%22%20stroke%3D%22%232A0808%22%20stroke-width%3D%221.5%22%20opacity%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%2248.6%22%20cy%3D%2248.6%22%20r%3D%2230%22%20fill%3D%22none%22%20stroke%3D%22%238B2D2D%22%20stroke-width%3D%220.5%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%2249%22%20cy%3D%2249%22%20r%3D%2228%22%20fill%3D%22url%28%23c%29%22%2F%3E%3Ctext%20x%3D%2249.8%22%20y%3D%2259%22%20text-anchor%3D%22middle%22%20font-family%3D%22DM%20Serif%20Display%2C%20Newsreader%2C%20Georgia%2C%20serif%22%20font-size%3D%2230%22%20fill%3D%22%231F0606%22%20opacity%3D%220.4%22%3ES%3C%2Ftext%3E%3Ctext%20x%3D%2249.2%22%20y%3D%2258.4%22%20text-anchor%3D%22middle%22%20font-family%3D%22DM%20Serif%20Display%2C%20Newsreader%2C%20Georgia%2C%20serif%22%20font-size%3D%2230%22%20fill%3D%22%23E8C8B0%22%20opacity%3D%220.85%22%3ES%3C%2Ftext%3E%3C%2Fsvg%3E');
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: rotate(-3deg);
  filter: drop-shadow(0 1px 2px rgba(27, 31, 42, 0.22));
}

/* ---- official-record framing (dashboard status card only) ---------- */
/* Certificate header: mono label + a REAL derived reference number. */
.cert-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cert-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--mid); }
.cert-id    { font-family: var(--font-mono); font-size: 12px; color: var(--mid); white-space: nowrap; }
/* Double-hairline certificate rule under the header. */
.cert-rule  { height: 0; border: none; border-top: 1px solid var(--bdr2); box-shadow: 0 2px 0 -1px var(--bdr); margin: 12px 0 4px; }

/* Seal accent on the status card: faint watermark while in progress, crisp +
   full-opacity once fully verified ("you've been certified" payoff). The host
   card sets position:relative via .sealable. */
.sealable { position: relative; overflow: hidden; }
.status-seal {
  position: absolute; top: -14px; right: -14px; width: 132px; height: 132px;
  pointer-events: none; transform: rotate(-12deg); transform-origin: center;
  opacity: .08; filter: grayscale(.2);
  transition: opacity .4s ease, filter .4s ease;
}
.status-seal.is-verified { opacity: 1; filter: none; }
.status-seal svg { width: 100%; height: 100%; display: block; }

/* ---- card / panel -------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--sh-1);
}
.card + .card { margin-top: 20px; }
/* Primary-action card: a restrained oxblood top-rule + lift to give the stack
   of white boxes hierarchy (no layout change). */
.card-feature { border-top: 3px solid var(--navy); box-shadow: var(--sh-2); }
.section-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 4px; line-height: 1.18; letter-spacing: -.015em; }
.section-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }

/* Mono eyebrow — the marketing site's spaced-out micro-label, used as a small
   recurring brand texture above headings/cards. Uses --font-mono (JetBrains
   Mono, loaded in notary/index.html). */
.eyebrow {
  display: block; font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); margin: 0 0 12px;
}

/* ---- buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
  cursor: pointer; font-family: inherit; border: 1px solid transparent;
  transition: all .18s ease; white-space: nowrap; text-decoration: none;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.b-navy   { background: var(--navy); color: #fff; box-shadow: 0 3px 10px rgba(107,31,31,.25); }
.b-navy:hover { background: var(--navy-deep); }
.b-accent { background: var(--accent); color: #fff; }
.b-accent:hover { background: var(--accent-deep); }
.b-outline { background: transparent; color: var(--navy); border-color: var(--bdr2); }
.b-outline:hover { background: var(--navy-soft); }
.b-ghost { background: transparent; color: var(--mid); }
.b-ghost:hover { color: var(--ink); }
.b-danger { background: transparent; color: var(--red); border-color: rgba(178,59,59,.35); }
.b-danger:hover { background: var(--red-lt); }
.b-sm { padding: 6px 13px; font-size: 12px; }
.b-lg { padding: 13px 26px; font-size: 14px; }
.b-full { width: 100%; }

/* ---- form fields --------------------------------------------------- */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.fi {
  width: 100%; padding: 10px 13px; border: 1px solid var(--bdr2);
  border-radius: var(--r-md); background: var(--surface);
  font-size: 14px; color: var(--ink); outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.fi:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
.fi::placeholder { color: var(--muted); }
.fi-ro { background: var(--surface-2); color: var(--muted); }
select.fi { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mid) 50%), linear-gradient(135deg, var(--mid) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

/* yes/no & checkbox group */
.yn { display: inline-flex; border: 1px solid var(--bdr2); border-radius: var(--r-sm); overflow: hidden; }
.yn button { border: none; background: var(--surface); color: var(--mid); padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.yn button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.check-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; }
.check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); }

/* ---- toggle switch (iOS style, harvested) -------------------------- */
.switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--bdr2); border-radius: 999px; transition: background .18s, border-color .18s; cursor: pointer; }
.switch .track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.switch input:checked + .track { background: var(--green); border-color: var(--green); }
.switch input:checked + .track::before { transform: translateX(19px); }

/* ---- banners ------------------------------------------------------- */
.banner { border-radius: var(--r-md); padding: 13px 16px; font-size: 13px; line-height: 1.5; border: 1px solid transparent; }
.banner-info  { background: var(--accent-soft); border-color: rgba(184,137,61,.3); color: #5C4023; }
.banner-green { background: var(--green-lt); border-color: rgba(31,122,77,.3); color: #14502f; }
.banner-amber { background: var(--amber-lt); border-color: rgba(154,107,18,.3); color: #6a4a0c; }
.banner strong { font-weight: 700; }

/* ---- pipeline checklist ------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--bdr); }
.checklist li:last-child { border-bottom: none; }
.check-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.check-mark.done { background: var(--green); color: #fff; }
.check-mark.todo { background: var(--surface-3); color: var(--muted); }
.check-body { flex: 1; }
.check-body .t { font-weight: 600; color: var(--ink); font-size: 14px; }
.check-body .d { font-size: 12.5px; color: var(--muted); }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pill-grey  { background: var(--surface-2); color: var(--mid); }
.pill-amber { background: var(--amber-lt); color: var(--amber); }
.pill-green { background: var(--green-lt); color: var(--green); }
.pill-red   { background: var(--red-lt); color: var(--red); }

/* ---- schedule grid ------------------------------------------------- */
.sched-day { padding: 12px 0; border-bottom: 1px solid var(--bdr); }
.sched-day:last-child { border-bottom: none; }
.sched-day .day-name { font-weight: 600; font-size: 13px; color: var(--ink); min-width: 96px; }
.sched-block { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.sched-block select { flex: 0 1 130px; }
.time-sep { font-size: 12px; color: var(--muted); }

/* ---- map ----------------------------------------------------------- */
#map-canvas { width: 100%; height: 300px; border-radius: var(--r-md); border: 1px solid var(--bdr2); background: var(--surface-2); }
.radius-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.radius-row input[type="range"] { flex: 1; accent-color: var(--navy); }
.radius-val { font-weight: 700; color: var(--navy); min-width: 64px; text-align: right; }

/* ---- toast --------------------------------------------------------- */
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 20px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 9999; max-width: 90vw; text-align: center; box-shadow: var(--sh-2); }
.toast.show { opacity: 1; }
.toast.err { background: var(--red); }

/* ---- misc ---------------------------------------------------------- */
.spinner { width: 26px; height: 26px; border: 3px solid var(--bdr2); border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.divider { height: 1px; background: var(--bdr); margin: 18px 0; border: none; }
.link-btn { background: none; border: none; color: var(--navy); cursor: pointer; font-size: 13px; font-family: inherit; text-decoration: underline; padding: 0; }