/* Biz-Margin Calc — design system.
   Editorial system (the approved Creator design, Revisions 2–9, rolled out
   to Biz-Margin in its own identity): fashion-house / magazine art
   direction — cream, deep indigo, a periwinkle accent, and a warm metallic
   gold; Fraunces serif display type paired with Inter; colour-blocked
   lookbook panels in a curated set of deep executive tones; hairline rules
   instead of boxes; sharp 2–4px radii.
   ONE photographic background carries the whole site: a boardroom at dusk
   in indigo-blue tones (assets/background.jpg) on a REAL fixed layer —
   the <div class="bg-layer"> that is the first element inside <body> — at
   z-index:0, body painting background:transparent, content raised to
   z-index:1+. (The body::before / negative-z-index mechanism buries the
   photo under the body's own background paint; it is never used here.)
   Over the photograph lies only a light same-hue tint (≤ .34 light /
   ≤ .40 dark), so the photo stays unmistakably a photograph; legibility
   comes from soft dark text-shadows on type that sits directly on the
   photo and from translucent indigo panels (header, footer, hero search,
   chips) with backdrop blur.
   The Margin Index (drawer) carries its OWN photograph — assets/index.jpg,
   a finance desk — under a moderate indigo wash (.58 → .68), clearly
   visible like the front cover. Each of the ten Browse-the-collections
   cards carries its own themed photograph (assets/cards/<slug>.jpg, from
   the registry's img field) blended transparently under its executive
   accent colour.
   Reserved AdSense positions render NOTHING — no label, no box, no image;
   only the wrapper element and an invisible HTML comment mark the slot. */

:root{
  --paper:#F8F6F0;         /* warm ivory (legacy surface tone) */
  --bg:#17133E;            /* deep indigo fallback behind the photo */
  --bg-2:#EEE9DB;          /* deeper cream (on-ivory hover) */
  --surface:#FDFCF8;       /* warm ivory panels */
  --surface-2:#F4F0E4;
  --ink:#1B1930;           /* indigo-black — text on ivory surfaces */
  --muted:#625C74;         /* muted text on ivory surfaces */
  --line:#E3DCC8;          /* hairlines on ivory */
  --line-strong:#C9BB93;
  --plum:#232058;          /* deep indigo — the house colour */
  --plum-deep:#17133E;
  --plum-panel:#232058;
  --violet:#4F46E5;        /* periwinkle accent */
  --violet-deep:#3730A3;
  --gold:#B08D4C;          /* warm metallic gold (on ivory) */
  --gold-soft:#D3B678;     /* gold on deep colour / on the photo */
  --on-plum:#F7F3E8;
  --on-plum-dim:rgba(247,243,232,.78);
  --on-plum-faint:rgba(247,243,232,.55);
  --on-plum-line:rgba(247,243,232,.22);
  /* The tint over the background photograph is only a light veil — the
     photograph is indigo in its own pixels, so no colour blanket is
     needed. Deepest point .34 (light theme) / .40 (dark theme). */
  --wash-1:rgba(16,12,46,.18);
  --wash-2:rgba(12,9,36,.34);
  /* Soft dark halo that keeps cream type legible directly on the photo. */
  --txt-shadow:0 1px 3px rgba(5,4,16,.45), 0 1px 14px rgba(5,4,16,.55);
  /* Translucent indigo panel for hero controls floating over the photo. */
  --panel-trans:rgba(28,24,70,.55);
  --header-bg:rgba(28,24,70,.86);
  --footer-bg:rgba(19,16,50,.80);
  /* The drawer carries its own photograph (assets/index.jpg); only the
     head strip keeps a colour variable — a strong indigo (.95) so the
     "The Margin Index" title row stays crisp over the photo. */
  --drawer-head-bg:rgba(16,13,44,.95);
  --good:#1E7A4F; --warn:#9A6B1F; --bad:#A52A2A;
  --shadow-sm:0 1px 2px rgba(18,15,50,.18);
  --shadow-md:0 4px 18px rgba(18,15,50,.28);
  --shadow-lg:0 14px 44px rgba(8,6,24,.55);
  --radius:4px; --radius-sm:3px;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
}
[data-theme="dark"]{
  --paper:#17143A;
  --bg:#0A0820;
  --bg-2:#1B183F;
  --surface:#1E1B42;
  --surface-2:#282455;
  --ink:#F3EEDF;
  --muted:#B2ABC6;
  --line:#37336B;
  --line-strong:#554F88;
  --plum:#232058;
  --plum-deep:#17133E;
  --plum-panel:#1C1945;
  --violet:#A5B4FC;
  --violet-deep:#818CF8;
  --gold:#C9A86A;
  --gold-soft:#D3B678;
  --wash-1:rgba(7,5,22,.26);
  --wash-2:rgba(5,4,18,.40);
  --header-bg:rgba(10,8,28,.92);
  --footer-bg:rgba(7,5,20,.88);
  --drawer-head-bg:rgba(9,7,26,.96);
  --good:#4CC38A; --warn:#E5B95F; --bad:#F0837E;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 4px 18px rgba(0,0,0,.55);
  --shadow-lg:0 14px 44px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip; background:var(--plum-deep)}
body{
  margin:0; background:transparent; color:var(--on-plum); font-family:var(--font-ui);
  line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
/* The one background image: a REAL fixed layer — the <div class="bg-layer">
   that is the first element inside <body> — at z-index:0, with all page
   content raised above it (z-index:1+). The photograph is indigo in its
   own pixels; over it lies only a light same-hue tint gradient
   (var(--wash-1) → var(--wash-2), ≤ .34 light / ≤ .40 dark), so the photo
   stays unmistakably a photograph across the whole viewport. html's solid
   indigo background remains only as the pre-load fallback behind
   everything. */
.bg-layer{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(var(--wash-1), var(--wash-2)),
    url("assets/background.jpg") center / cover no-repeat var(--plum-deep);
}
/* At night the same photograph gets a lift so it still reads clearly. */
[data-theme="dark"] .bg-layer{filter:brightness(1.12) saturate(1.1)}
::selection{background:#EAD9AE; color:#1B1930}
a{color:var(--gold-soft); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-family:var(--font-display); line-height:1.12; margin:.2em 0 .45em; font-weight:600}
h1{font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.01em}
h2{font-size:1.45rem}
h3{font-family:var(--font-display); font-size:1.12rem; font-weight:600; line-height:1.25; margin:.2em 0 .45em}
p{margin:.4em 0 .8em}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:2px}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:6px; border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Header / masthead bar — translucent indigo over the photo ---------- */
header.site{
  position:sticky; top:0; z-index:40; color:var(--on-plum);
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--on-plum-line);
}
.hwrap{max-width:1180px; margin:0 auto; padding:.65rem 1.1rem; display:flex; align-items:center; gap:.8rem}
.iconbtn{
  background:transparent; color:var(--on-plum); border:1px solid var(--on-plum-line);
  width:40px; height:40px; border-radius:var(--radius-sm); font-size:1.05rem; cursor:pointer; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.iconbtn:hover{background:rgba(247,243,232,.09); border-color:var(--on-plum-faint)}
.logo-slot{display:flex; align-items:center; gap:.75rem; min-width:0; flex:1 1 auto}
.logo-slot:hover{text-decoration:none}
.logo-ph{
  width:40px; height:40px; flex:none; border:1px dashed var(--on-plum-faint); border-radius:2px;
  display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:600;
  letter-spacing:.08em; color:var(--on-plum-dim); background:rgba(247,243,232,.04); text-align:center; line-height:1.25;
}
.site-name{font-family:var(--font-display); font-weight:600; font-size:1.28rem; color:var(--on-plum); white-space:nowrap; line-height:1.1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.site-name:hover{text-decoration:none}
.site-name small{display:block; font-family:var(--font-ui); font-size:.58rem; font-weight:600; letter-spacing:.2em; color:var(--gold-soft); margin-top:.18rem}
.hspace{flex:1}
.hbadge{
  margin-left:auto; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-plum-dim); border:1px solid var(--on-plum-line); padding:.38rem .65rem; border-radius:2px; white-space:nowrap;
}
@media (max-width:560px){ .hbadge{display:none} }
/* Narrow phones: one clean header row — fixed-size icons at the right,
   the wordmark truncates, and the tagline line is hidden entirely. */
@media (max-width:480px){
  .hwrap{gap:.55rem; padding:.6rem .8rem}
  .site-tag{display:none}
  .site-name{font-size:1.08rem}
  .iconbtn{width:38px; height:38px}
}

/* ---------- Drawer / the index — its own photograph ----------
   The Margin Index carries a DIFFERENT photograph of its own —
   assets/index.jpg, a finance desk (laptop, notebook, pen) — under a
   moderate indigo wash (rgba(28,24,70,.58) → rgba(19,16,52,.68)), so the
   image is clearly visible, "as clear as the front cover", while the
   cream menu text stays readable. No backdrop blur: nothing hides the
   photograph. The indigo scheme (cream text) is used in BOTH themes, and
   the drawer-head keeps its stronger indigo strip (.95/.96) for the
   title row. */
.scrim{position:fixed; inset:0; background:rgba(14,11,38,.55); z-index:50; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s}
.scrim.on{opacity:1; visibility:visible}
.drawer{
  position:fixed; top:0; left:0; height:100dvh; width:min(360px,88vw);
  background:
    linear-gradient(rgba(28,24,70,.58), rgba(19,16,52,.68)),
    url("assets/index.jpg") center / cover no-repeat var(--plum-deep);
  color:var(--on-plum);
  z-index:60; transform:translateX(-105%); transition:transform .28s cubic-bezier(.32,.72,.24,1);
  overflow-y:auto; box-shadow:var(--shadow-lg); padding:0 1.1rem 1.4rem;
}
.drawer summary, .drawer .tool-link, .drawer h3{text-shadow:var(--txt-shadow)}
.drawer a{color:var(--gold-soft)}
.drawer.open{transform:none}
.drawer-head{
  position:sticky; top:0; z-index:2; margin:0 -1.1rem 1rem; padding:.9rem 1.1rem;
  background:var(--drawer-head-bg); color:var(--on-plum);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer-head strong{font-family:var(--font-display); font-size:1.2rem; font-weight:600; letter-spacing:.01em}
.drawer-head .iconbtn{color:var(--on-plum); border-color:var(--on-plum-line)}
.drawer-head .iconbtn:hover{background:rgba(247,243,232,.08); border-color:var(--on-plum-faint)}
.drawer details{border-bottom:1px solid var(--on-plum-line); padding:.15rem 0 .55rem}
.drawer summary{
  cursor:pointer; font-weight:600; padding:.65rem .2rem; list-style:none; display:flex; align-items:center; gap:.6rem;
  transition:color .15s ease;
}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary:hover{color:var(--gold-soft)}
.dot{width:9px; height:9px; border-radius:1px; flex:none}
.drawer .tool-link{display:block; padding:.42rem .55rem; border-radius:2px; color:var(--on-plum); font-size:.94rem; transition:background .12s ease}
.drawer .tool-link:hover{background:rgba(247,243,232,.09); text-decoration:none}
.drawer h3{margin:1.2rem 0 .4rem; font-size:1rem}

/* ---------- Layout ---------- */
main{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:1.4rem 1.1rem 3rem}

/* ---------- Hero — type directly over the background photograph ---------- */
.hero{
  color:var(--on-plum);
  margin:0 calc(50% - 50vw) 2.4rem;
  padding:clamp(2.8rem,6vw,4.6rem) 0 clamp(2.4rem,5vw,3.6rem);
  border-bottom:1px solid rgba(211,182,120,.5);
}
.hero.col-hero{background:var(--plum); background:color-mix(in srgb, var(--acc, var(--plum)) 55%, transparent)}
.hero-inner{max-width:72rem; margin:0 auto; padding:0 1.1rem}
.hero h1{
  color:var(--on-plum); font-size:clamp(2.7rem,6.2vw,4.3rem); font-weight:600;
  line-height:1.02; letter-spacing:-.015em; margin:.3em 0 .35em; max-width:16ch;
}
.col-hero h1{max-width:22ch}
.hero p{max-width:58ch; color:var(--on-plum-dim); font-size:1.06rem; margin:0}
.hero-idx{
  font-family:var(--font-display); font-size:clamp(2.6rem,5vw,3.6rem); font-weight:500;
  line-height:1; color:var(--gold-soft); margin-bottom:.6rem;
}
.eyebrow{
  display:inline-block; font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft);
}
/* search (the .searchbox class is on the <input> itself) */
.searchbox{
  width:100%; padding:.75rem 1rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font:inherit; background:var(--surface); color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.searchbox:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(79,70,229,.14)}
/* The hero search sits on a translucent indigo panel with a backdrop
   blur, floating over the photograph instead of a solid ivory box. */
.hero .searchbox{
  max-width:640px; margin-top:1.6rem; font-size:1.02rem; padding:.95rem 1.1rem;
  background:var(--panel-trans); color:var(--on-plum);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--on-plum-line); border-radius:var(--radius-sm);
}
.hero .searchbox::placeholder{color:var(--on-plum-faint)}
.hero .searchbox:focus{border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(211,182,120,.45)}
.search-results{
  background:var(--surface); color:var(--ink); margin-top:.5rem; max-width:640px;
  border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  max-height:330px; overflow:auto; padding:.35rem;
}
.search-results a{display:flex; gap:.6rem; align-items:baseline; padding:.55rem .65rem; border-radius:2px; color:var(--ink)}
.search-results a:hover{background:var(--surface-2); text-decoration:none}
.search-results .col{margin-left:auto; font-size:.74rem; color:var(--muted); white-space:nowrap}
.chips{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.2rem; align-items:center}
.chips-label{font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-right:.2rem}
.chips a{
  color:var(--on-plum); font-size:.85rem; font-weight:500;
  background:var(--panel-trans);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(247,243,232,.38); padding:.42rem .8rem; border-radius:2px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.chips a:hover{background:var(--on-plum); color:var(--plum); border-color:var(--on-plum); text-decoration:none}

/* Legibility on the photograph: every piece of cream type that sits
   directly on the photo (hero, section heads, features band, tool
   heads, crumbs) carries a soft dark text-shadow instead of relying on a
   colour blanket over the image. Panelled surfaces need none. */
.hero h1, .hero p, .hero-idx, .eyebrow, .chips-label,
.sec-head h2, .sec-head .sec-idx,
.feats .fic, .feats .feat b, .feats .feat p,
.tool-head h1, .tool-head p, .crumbs, .crumbs a{
  text-shadow:var(--txt-shadow);
}

/* ---------- Calculate button + results reveal ---------- */
.calc-actions{margin-top:1.15rem}
.calc-btn{
  width:100%; padding:.95rem 1.2rem;
  background:var(--plum); border:1px solid var(--plum); color:var(--on-plum);
  font-size:.82rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.calc-btn:hover{background:var(--violet-deep); border-color:var(--gold); color:var(--on-plum)}
#resultPanel.flash{animation:resultflash 1.6s ease}
@keyframes resultflash{
  0%{box-shadow:0 0 0 0 rgba(211,182,120,0), var(--shadow-sm)}
  18%{box-shadow:0 0 0 3px var(--gold-soft), var(--shadow-md)}
  70%{box-shadow:0 0 0 3px rgba(211,182,120,.55), var(--shadow-md)}
  100%{box-shadow:0 0 0 0 rgba(211,182,120,0), var(--shadow-sm)}
}

/* ---------- Section heads — the lookbook index, over the photo ---------- */
.sec-head{
  display:flex; align-items:baseline; gap:1rem;
  border-bottom:1px solid var(--on-plum-line); padding-bottom:.65rem; margin:2.6rem 0 1.2rem;
}
.sec-head .sec-idx{font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--gold-soft)}
.sec-head h2{margin:0; font-size:clamp(1.5rem,3vw,1.9rem); color:var(--on-plum)}
.sec-head.light{border-bottom-color:var(--on-plum-line)}
.sec-head.light .sec-idx{color:var(--gold-soft)}
.sec-head.light h2{color:var(--on-plum)}

/* ---------- Collection cards — lookbook grid ----------
   Every Browse-the-collections card carries its OWN themed photograph
   (registry img field → inline --card-img), blended transparently into
   its executive accent colour. Layer order inside the card's own
   stacking context (isolation:isolate): the solid accent (card
   background) → the photograph (.card-media, z-index:-3, at 50% opacity,
   so the accent tints it) → an accent gradient (::before, z-index:-2,
   55% at the top deepening to 78% at the foot, so the colour identity
   and the text zone win low on the card while the image reads clearly up
   top) → the hover shade (::after, z-index:-1) → the text. Hover lifts
   the photograph slightly. */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:.9rem}
.card{
  --acc:#232058;
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--acc); color:var(--on-plum);
  border-radius:var(--radius); padding:1.6rem 1.5rem 1.45rem;
  display:flex; flex-direction:column;
}
.card-media{
  position:absolute; inset:0; z-index:-3; pointer-events:none;
  background-image:var(--card-img); background-size:cover; background-position:center;
  opacity:.5; transition:opacity .25s ease;
}
.card:hover .card-media{opacity:.68}
.card::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--acc) 55%, transparent),
    color-mix(in srgb, var(--acc) 66%, transparent) 55%,
    color-mix(in srgb, var(--acc) 78%, transparent));
}
.card::after{
  content:""; position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,.18);
  opacity:0; transition:opacity .22s ease;
}
.card:hover::after{opacity:1}
.card-idx{
  font-family:var(--font-display); font-size:2.5rem; font-weight:500; line-height:1;
  color:rgba(247,243,232,.5); margin-bottom:1.1rem; transition:color .22s ease;
}
.card:hover .card-idx{color:rgba(247,243,232,.85)}
.card h3{font-size:1.42rem; font-weight:600; color:var(--on-plum); margin:0 0 .45rem}
.card p{color:var(--on-plum-dim); font-size:.93rem; margin:0 0 1.2rem}
.card .more{
  margin-top:auto; font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-soft);
}
.card .more:hover{color:var(--on-plum); text-decoration:none}

/* ---------- Tool link cards — ivory panels ---------- */
.tool-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:.8rem}
.tool-link-card{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--acc, var(--gold));
  border-radius:var(--radius-sm); padding:.95rem 1rem; color:var(--ink);
  transition:border-color .18s ease, background .18s ease;
}
.tool-link-card:hover{text-decoration:none; border-color:var(--line-strong); background:var(--surface-2)}
.tool-link-card .tl-idx{font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--gold); line-height:1.3; flex:none}
.tool-link-card .tl-body strong, .tool-link-card .tl-body b{display:block; font-size:.99rem; font-weight:600}
.tool-link-card .tl-body span{color:var(--muted); font-size:.86rem}

/* ---------- Features band — type over the photo, hairline-ruled ---------- */
.feats{
  margin:2.8rem calc(50% - 50vw) -3rem;
  color:var(--on-plum);
  padding:2.8rem 0 3.2rem; border-top:1px solid rgba(211,182,120,.45);
}
.feats-inner{max-width:72rem; margin:0 auto; padding:0 1.1rem}
.feats .sec-head{margin-top:0}
.feats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem}
.feat{border-left:1px solid var(--on-plum-line); padding-left:1.15rem}
.feat .fic{display:block; font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--gold-soft); margin-bottom:.5rem}
.feat b{display:block; font-family:var(--font-display); font-size:1.18rem; font-weight:600; color:var(--on-plum); margin-bottom:.3rem}
.feat p{color:var(--on-plum-dim); font-size:.92rem; margin:0}

/* ---------- Tool page ---------- */
.crumbs{font-size:.86rem; color:var(--on-plum-dim); margin:.4rem 0 1.1rem; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.crumbs a{color:var(--on-plum-dim); font-weight:600}
.crumbs a:hover{color:var(--gold-soft)}
.tool-head{display:flex; gap:1.05rem; align-items:flex-start; margin-bottom:1.4rem}
.tool-chip{
  width:54px; height:54px; flex:none; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--acc, var(--plum)); color:var(--on-plum);
  font-family:var(--font-display); font-size:1.3rem; font-weight:600;
}
.tool-head h1{margin:.25rem 0 .25rem; font-size:clamp(1.7rem,3.6vw,2.3rem); color:var(--on-plum)}
.tool-head p{color:var(--on-plum-dim); max-width:70ch; margin:0}
.toolgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:1.15rem; align-items:start}
@media (max-width:840px){ .toolgrid{grid-template-columns:1fr} }
.panel{
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.5rem 1.5rem; box-shadow:var(--shadow-md);
}
.calc-panel{border-top:3px solid var(--acc, var(--plum))}
.panel h2{margin-top:0; font-size:1.35rem}
.panel:not(#resultPanel) a{color:var(--violet)}
#resultPanel{
  position:sticky; top:84px;
  background:var(--plum-panel); color:var(--on-plum); border-color:var(--plum-deep);
}
#resultPanel h2{color:var(--on-plum)}
@media (max-width:840px){ #resultPanel{position:static} }
.field{margin-bottom:1rem}
.field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem}
.field label .unit{color:var(--muted); font-weight:500}
.field .hint{font-weight:400; color:var(--muted); font-size:.8rem}
.field input,.field select,.field textarea{
  width:100%; padding:.65rem .8rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font:inherit; background:var(--surface); color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
@media (max-width:480px){ .field-row{grid-template-columns:1fr} }
.btn{
  background:var(--violet); color:#fff; border:1px solid var(--violet); padding:.62rem 1.15rem; border-radius:var(--radius-sm);
  font:inherit; font-weight:600; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--violet-deep); border-color:var(--violet-deep)}
.btn.ghost{
  background:transparent; color:var(--violet); border:1px solid var(--line-strong);
}
.btn.ghost:hover{background:rgba(79,70,229,.06); border-color:var(--violet)}
#resultPanel .btn.ghost{color:var(--on-plum); border-color:rgba(247,243,232,.4)}
#resultPanel .btn.ghost:hover{background:rgba(247,243,232,.08); border-color:var(--gold-soft); color:var(--gold-soft)}
.btnrow{display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1.1rem}
.result-row{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.65rem .1rem;
}
.result-row + .result-row{border-top:1px solid var(--on-plum-line)}
.result-row .k{color:var(--on-plum-dim); font-size:.92rem}
.result-row:first-child .k{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft);
}
.result-row .v{
  font-weight:600; color:var(--on-plum); text-align:right; font-variant-numeric:tabular-nums; font-size:1.02rem;
  overflow-wrap:anywhere; max-width:62%;
}
.result-row:first-child .v{
  font-family:var(--font-display); font-size:1.9rem; font-weight:600; line-height:1.1;
}
.result-row .v.small{font-size:.88rem; font-weight:500; white-space:pre-wrap; text-align:left; max-width:100%; color:var(--on-plum-dim)}
.result-row:has(.v.small){flex-direction:column; gap:.2rem}
/* Notes: inside the deep-indigo results panel they read cream-on-indigo;
   inside an ivory panel (the How-It-Works estimates note, static pages)
   they read ink-on-ivory with a gold rule. */
.note{
  margin-top:1rem; font-size:.9rem; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--gold); padding:.75rem .9rem; border-radius:var(--radius-sm);
}
.note a{color:var(--violet)}
#resultPanel .note{
  color:var(--on-plum);
  background:rgba(247,243,232,.06); border-color:var(--on-plum-line);
  border-left-color:var(--gold-soft);
}
#resultPanel .note a{color:var(--gold-soft)}
.how{color:var(--muted); line-height:1.65}
table.data{width:100%; border-collapse:collapse; margin:.8rem 0; font-size:.93rem}
table.data th,table.data td{border-bottom:1px solid var(--line); padding:.55rem .7rem; text-align:left}
table.data th{
  font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border-bottom:2px solid var(--ink);
}
table.data tr:hover td{background:var(--surface-2)}
.pager{display:flex; justify-content:space-between; gap:.8rem; margin-top:1.6rem; flex-wrap:wrap}
.pager a{
  flex:1; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.85rem 1rem; color:var(--ink); transition:border-color .16s ease, background .16s ease;
}
.pager a:hover{text-decoration:none; border-color:var(--line-strong); background:var(--surface-2)}
.pager small{display:block; color:var(--gold); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.68rem; margin-bottom:.2rem}
.check li{margin:.3rem 0}
.pass{color:var(--good); font-weight:700}.warn{color:var(--warn); font-weight:700}.fail{color:var(--bad); font-weight:700}
#resultPanel .pass{color:#7BD8AC}.note .pass{color:#7BD8AC}
#resultPanel .note .pass{color:#7BD8AC}

/* ---------- Reserved ad positions (swap point for real AdSense later) ----------
   The reserved area renders NOTHING — no image, no label, no box — and
   stays fully collapsed so it leaves no gap in the page. Only the wrapper
   element and an invisible HTML comment mark the position. */
.ad-slot{margin:0; height:0; overflow:hidden}

/* ---------- Footer — translucent indigo over the photo ---------- */
footer.site{
  position:relative; z-index:1;
  border-top:4px double var(--gold); margin-top:2.5rem; color:var(--on-plum-dim);
  background:var(--footer-bg);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.fwrap{max-width:1180px; margin:0 auto; padding:1.9rem 1.1rem 2.2rem; font-size:.92rem}
.fwrap strong{font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--on-plum)}
.fwrap nav{display:flex; gap:1.2rem; flex-wrap:wrap; margin:.6rem 0 .9rem}
.fwrap nav a{color:var(--on-plum); font-weight:600}
.fwrap nav a:hover{color:var(--gold-soft); text-decoration:none}
.hidden{display:none !important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- Print ---------- */
@media print{
  header.site, footer.site, .drawer, .scrim, .btnrow, .ad-slot, .pager, .chips, .no-print{display:none !important}
  body{background:#fff; color:#000}
  .bg-layer{display:none !important}
  #resultPanel{position:static; background:#fff; color:#000; border:1px solid #999}
  #resultPanel h2, .result-row .v{color:#000}
  .result-row .k, .result-row:first-child .k{color:#444}
  .result-row + .result-row{border-top-color:#ccc}
  .note{background:#fff; color:#000; border-color:#999}
  .panel{box-shadow:none}
  main{max-width:none}
}