@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ---- Palette ---- */
    --cream: #FBF6EC;
    --cream-deep: #F1E9D8;
    --forest: #2F4730;
    --forest-mid: #3E5233;
    --forest-deep: #1F3120;
    --rust: #C1502E;
    --rust-deep: #9E3F22;
    --rust-wash: #FBEFE8;
    --harvest: #D7A33B;
    --harvest-deep: #C4922A;
    --ink: #2B2620;
    --ink-soft: #3A3530;
    --sage: #93A982;
    --line: #DCD2BC;
    --white: #FFFEFB;
    --taupe: #8a8170;
    --taupe-deep: #6b6253;
    --parchment: #EEE7D6;
    --paper: #F7F2E6;
    --butter: #FEF9E7;
    --butter-deep: #FBF3E4;
    --butter-ink: #8a6d1f;
    --amber: #F0B429;
    --amber-deep: #D99A0F;
    --amber-ink: #3B2F00;
    --lavender: #EADFF0;
    --lavender-ink: #5B3B7A;
    --danger-ink: #A94442;
    --danger-deep: #B4232A;

    /* Status tints (badges, pills, notice boxes) — one family for the app */
    --status-danger-bg: #FADBD8;
    --status-warn-bg: #FDEBD0;
    --status-ok-bg: #D5F5E3;
    --status-info-bg: #D6EAF8;
    --status-line: #ccc;

    /* ---- Semantic layer: reference these in markup/JS; a theme (e.g.
       dark mode) overrides this block, not the palette above ---- */
    color-scheme: light;
    --bg: var(--cream);
    --surface: var(--white);
    --surface-2: var(--parchment);
    --surface-alt: var(--cream-deep);
    --input-bg: var(--white);
    --row-hover: var(--cream);
    --text: var(--ink);
    --text-muted: var(--taupe);
    --text-soft: var(--taupe-deep);
    --text-faint: #bbb;
    --heading: var(--forest-deep);
    --heading-line: var(--forest);
    --green-ink: var(--forest);
    --accent: var(--rust);
    --accent-ink: var(--rust-deep);
    --border: var(--line);
    --line-soft: var(--parchment);
    --highlight: var(--butter);
    --shadow-soft: rgba(0,0,0,0.2);
    --shadow-strong: rgba(0,0,0,0.3);
    --lift: rgba(255,255,255,0.08);

    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ---- Dark theme ----------------------------------------------------
   Two triggers, same tokens (keep the two blocks identical):
   1. Auto: the device is in dark mode, on a page opted in via
      data-theme-capable (staff pages only — public pages stay light),
      unless the user chose Light in Settings (data-theme="light").
   2. Manual: the user chose Dark in Settings (data-theme="dark").
   The stored choice lives in localStorage 'fs-theme', applied by a tiny
   head snippet on each capable page. Brand constants (--forest, --harvest,
   --rust, --sage, --amber, --cream as text-on-forest) stay untouched. */
@media (prefers-color-scheme: dark) {
    :root[data-theme-capable]:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #1F1B14;
        --surface: #28231A;
        --surface-2: #3A3325;
        --surface-alt: #322C20;
        --input-bg: #241F16;
        --row-hover: #322C20;
        --text: #EDE6D6;
        --text-muted: #9A907C;
        --text-soft: #B7AC95;
        --text-faint: #6B6253;
        --heading: #C4D1B8;
        --heading-line: #55744F;
        --green-ink: #A9C29A;
        --accent: #D97951;
        --accent-ink: #E09B7C;
        --border: #494130;
        --line: #494130;
        --line-soft: #383122;
        --highlight: #3A3320;
        --butter: #3A3320;
        --butter-deep: #423A22;
        --butter-ink: #D9BC6A;
        --paper: #2B261C;
        --parchment: #3A3325;
        --rust-wash: #3B2418;
        --lavender: #453B52;
        --lavender-ink: #CBB6E4;
        --danger-ink: #E29387;
        --ink-soft: #D8D0BE;
        --status-danger-bg: #4C2A25;
        --status-warn-bg: #4A3A20;
        --status-ok-bg: #27402C;
        --status-info-bg: #24394A;
        --status-line: #5C5346;
        --shadow-soft: rgba(0,0,0,0.45);
        --shadow-strong: rgba(0,0,0,0.6);
        --lift: rgba(255,255,255,0.06);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1F1B14;
    --surface: #28231A;
    --surface-2: #3A3325;
    --surface-alt: #322C20;
    --input-bg: #241F16;
    --row-hover: #322C20;
    --text: #EDE6D6;
    --text-muted: #9A907C;
    --text-soft: #B7AC95;
    --text-faint: #6B6253;
    --heading: #C4D1B8;
    --heading-line: #55744F;
    --green-ink: #A9C29A;
    --accent: #D97951;
    --accent-ink: #E09B7C;
    --border: #494130;
    --line: #494130;
    --line-soft: #383122;
    --highlight: #3A3320;
    --butter: #3A3320;
    --butter-deep: #423A22;
    --butter-ink: #D9BC6A;
    --paper: #2B261C;
    --parchment: #3A3325;
    --rust-wash: #3B2418;
    --lavender: #453B52;
    --lavender-ink: #CBB6E4;
    --danger-ink: #E29387;
    --ink-soft: #D8D0BE;
    --status-danger-bg: #4C2A25;
    --status-warn-bg: #4A3A20;
    --status-ok-bg: #27402C;
    --status-info-bg: #24394A;
    --status-line: #5C5346;
    --shadow-soft: rgba(0,0,0,0.45);
    --shadow-strong: rgba(0,0,0,0.6);
    --lift: rgba(255,255,255,0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    margin: 0 0 0.4em;
    color: var(--heading);
}

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

/* ---------- Header ---------- */
header.site {
    background: var(--forest);
    color: var(--cream);
    padding: 18px 28px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 4px solid var(--harvest);
}
header.site .brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
header.site .brand small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--sage);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}
header.site .who {
    font-size: 0.85rem;
    color: var(--cream-deep);
    display: flex;
    align-items: center;
    gap: 14px;
}
header.site .who button {
    background: transparent;
    border: 1px solid var(--sage);
    color: var(--cream);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-body);
}
header.site .who button:hover { background: var(--lift); }

/* ---------- Tabs ---------- */
nav.tabs {
    display: flex;
    gap: 4px;
    padding: 0 24px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}
nav.tabs button {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-soft);
    cursor: pointer;
    white-space: nowrap;
}
nav.tabs button:hover { color: var(--heading); }
nav.tabs button.active {
    color: var(--accent-ink);
    border-bottom-color: var(--accent);
}

/* Sub-tabs inside a tab (Settings) — same look as the main nav, smaller */
nav.subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}
nav.subtabs button {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-soft);
    cursor: pointer;
    white-space: nowrap;
}
nav.subtabs button:hover { color: var(--heading); }
nav.subtabs button.active {
    color: var(--accent-ink);
    border-bottom-color: var(--accent);
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 80px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 22px;
    margin-bottom: 24px;
}
.panel .panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.eyebrow {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: var(--sage);
    font-weight: 600;
    margin-bottom: 4px;
}

/* ---------- Tables (ledger style) ---------- */
table.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
table.ledger th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--heading);
    border-bottom: 2px solid var(--heading-line);
    padding: 8px 10px;
}
table.ledger td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
table.ledger tr:hover td { background: var(--row-hover); }
table.ledger .num { font-family: var(--font-mono); text-align: right; }

/* ---------- Buttons ---------- */
button.primary, button.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 9px 16px;
    border-radius: 4px;
    border: 1px solid var(--forest);
    background: var(--forest);
    color: var(--cream);
    cursor: pointer;
}
button.primary:hover, button.btn:hover { background: var(--forest-deep); }
button.pending-save {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--forest-deep);
    animation: pending-save-pulse 1.6s ease-in-out infinite;
}
button.pending-save:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
@keyframes pending-save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(240, 180, 41, 0); }
}
button.secondary {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
}
button.secondary:hover { border-color: var(--forest); }
button.danger {
    background: transparent;
    border: 1px solid var(--rust);
    color: var(--accent-ink);
}
button.danger:hover { background: var(--rust); color: var(--white); }
button.link {
    background: none;
    border: none;
    color: var(--accent-ink);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 0;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Forms ---------- */
label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 4px;
}
input, select, textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text);
}
/* Required-but-empty (Frank, 2026-09-14): a mild red border until the field
   is filled, then it goes; .req-msg is the line under the field on save. */
.req-empty { border-color: #d98a8a !important; box-shadow: 0 0 0 2px rgba(217, 138, 138, 0.22); border-radius: 4px; }
.req-msg   { color: #c0504d; font-size: 0.85rem; font-weight: 600; margin-top: 4px; }
/* Checkboxes/radios are not text fields: the width:100% above stretches
   them across their flex label, shoving the label text to the far edge
   (the Platform switches misalignment, 2026-08-24). */
input[type="checkbox"], input[type="radio"] {
    width: auto;
    flex: 0 0 auto;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--harvest);
    outline-offset: 1px;
    border-color: var(--harvest);
}
input[readonly] { background: var(--surface-alt); color: var(--text-soft); }
.field { margin-bottom: 14px; }
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; }

/* ---------- Badges / chips ---------- */
.badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.badge.admin { background: var(--harvest); color: var(--forest-deep); }
.badge.staff { background: var(--sage); color: var(--forest-deep); }
.badge.weight { background: var(--surface-alt); color: var(--heading); border: 1px solid var(--line); }
.badge.each { background: var(--lavender); color: var(--lavender-ink); }

/* ---------- Converter popover (ingredient -> human units) ---------- */
.converter-box {
    border: 1px dashed var(--rust);
    background: var(--rust-wash);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 10px;
}
.converter-box .row { display: flex; justify-content: space-between; padding: 3px 0; font-family: var(--font-mono); font-size: 0.88rem; }

/* ---------- Inline hints — the site-wide ⓘ convention ----------
   A small clickable dot that reveals a one-or-two-sentence description in
   place. Click toggles (works on touch, unlike title= tooltips); long-form
   how-tos belong in Help. Markup comes from the hint() helper in app.js. */
.hint-dot {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: var(--sage);
    font-size: 0.95em;
    line-height: 1;
    vertical-align: baseline;
}
.hint-dot:hover { color: var(--heading); }
.hint-line {
    display: none;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-soft);
    background: var(--highlight);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 6px 0;
    max-width: 560px;
    line-height: 1.5;
    white-space: normal;
}
.hint-line.open { display: block; }

/* ---------- Empty state ---------- */
.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-style: italic;
}

/* ---------- Toast ---------- */
#toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--forest-deep);
    color: var(--cream);
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 0.88rem;
    box-shadow: 0 6px 20px var(--shadow-soft);
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 999;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.error { background: var(--rust-deep); }

/* ---------- Auth pages ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--forest);
    background-image: radial-gradient(circle at 20% 20%, rgba(215,163,59,0.12), transparent 40%);
}
.auth-card {
    background: var(--bg);
    border-radius: 8px;
    padding: 36px 34px;
    width: 360px;
    box-shadow: 0 20px 50px var(--shadow-strong);
    border-top: 5px solid var(--harvest);
}
.auth-card h1 { font-size: 1.6rem; }
.auth-card .sub { color: var(--text-soft); font-size: 0.85rem; margin-bottom: 22px; }
.auth-card .switcher { margin-top: 16px; text-align: center; font-size: 0.85rem; }
.error-msg { background: var(--status-danger-bg); color: var(--accent-ink); padding: 9px 12px; border-radius: 4px; font-size: 0.85rem; margin-bottom: 14px; }

@media (max-width: 700px) {
    header.site { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
    main { padding: 18px 14px 70px; }
    .field-row { flex-direction: column; gap: 0; }
}

/* ── Help page (2026-09-04): screen index + body, search results ── */
.help-head .panel-head { align-items: center; gap: 16px; flex-wrap: wrap; }
.help-search input { min-width: 260px; width: 100%; max-width: 420px; }
.help-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.help-index { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; font-size: 0.9rem; }
.help-index ul { list-style: none; margin: 0; padding: 0; }
.help-index > ul > li { margin: 0 0 10px; }
.help-index > ul > li > a { font-weight: 700; color: var(--heading); text-decoration: none; }
.help-index ul ul { margin: 4px 0 0 10px; border-left: 2px solid var(--line-soft); padding-left: 10px; }
.help-index ul ul li { margin: 3px 0; }
.help-index ul ul a { color: var(--text-soft); text-decoration: none; }
.help-index a:hover { text-decoration: underline; }
.help-body { max-width: 62rem; line-height: 1.55; }
.help-screen { padding: 4px 0 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; }
.help-screen:last-child { border-bottom: none; }
.help-screen h2 { margin: 6px 0 8px; }
.help-section { padding: 6px 0 4px; scroll-margin-top: 12px; }
.help-section h3 { margin: 12px 0 6px; font-size: 1.02rem; }
.help-items { margin: 4px 0 8px; padding-left: 20px; }
.help-items li { margin: 5px 0; }
.help-notes { margin: 8px 0 4px; padding: 8px 12px; background: var(--highlight); border: 1px solid var(--line-soft); border-radius: 6px; font-size: 0.92rem; }
.help-notes ol { margin: 4px 0 0; padding-left: 20px; }
.help-article summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; padding: 6px 0; }
.help-article > div { max-width: 52rem; }
.help-flash { animation: helpFlash 1.6s ease-out; }
@keyframes helpFlash { from { background: var(--highlight); } to { background: transparent; } }
.help-hit { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
.help-hit:hover { text-decoration: underline; }
.hint-help { margin-left: 6px; white-space: nowrap; }
@media (max-width: 760px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-index { position: static; max-height: none; }
}
.help-open { font-size: 0.78rem; font-weight: 500; color: var(--accent-ink); text-decoration: none; margin-left: 10px; white-space: nowrap; border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; }
.help-open:hover { background: var(--highlight); text-decoration: none; }
.help-hit-read { margin-left: 8px; }
.help-sub { font-size: 0.85rem; margin: 3px 0 0 2px; color: var(--text-soft); }
.help-sub-k { font-weight: 600; color: var(--heading); margin-right: 4px; }
.hint-line .help-sub { font-size: 0.78rem; }
.hint-line a.help-open, .hint-line a.help-jump { color: var(--accent-ink); }
.link-results { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.link-result { text-align: left; background: var(--surface-alt); border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-family: var(--font-body); color: var(--text); }
.link-result:hover { background: var(--highlight); }

/* Platform > Decorating editor rows (2026-09-06) */
.dc-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.dc-row label { display:flex; flex-direction:column; gap:4px; min-width:140px; }
.dc-row label input, .dc-row label select { width:100%; }

/* Kitchen Setup > Decorating picture cards (2026-09-06) */
.decor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.decor-card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column; opacity:0.75; }
.decor-card.on { opacity:1; border-color:var(--forest); }
.decor-card.mine { border-style:dashed; }
.decor-card img, .decor-nopic { width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; display:block; }   /* square: the catalog pictures are 1:1, show the whole cake (Frank 2026-09-09) */
.decor-nopic { display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.8rem; background:var(--surface-alt); }
.decor-card-body { padding:8px 10px 10px; }
/* tap a card picture → the pair large (2026-09-10) */
.decor-lightbox { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.72); display:flex; align-items:center; justify-content:center; padding:16px; cursor:zoom-out; }
.decor-lightbox-inner { background:var(--surface); color:var(--text); border-radius:12px; padding:14px 16px; max-width:min(1100px,100%); max-height:100%; overflow:auto; }
.decor-lightbox-title { font-weight:600; font-size:1.05rem; margin-bottom:8px; }
.decor-lightbox-title span { font-weight:400; font-size:0.9rem; margin-left:8px; }
.decor-lightbox-pics { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.decor-lightbox-pics figure { margin:0; text-align:center; font-size:0.85rem; }
.decor-lightbox-pics img { width:min(480px, 80vw); aspect-ratio:1/1; object-fit:contain; border-radius:8px; display:block; background:var(--surface-alt); }