/* ─────────────────────────────────────────────────────────────────────────
   E-RESOURCES WORKSPACE + THE PROFILE CONTROL

   A full-screen surface, not a section of the page. It follows the pattern the
   library already established here (role="dialog", aria-modal, hash-routed),
   because a reader who has opened the library and then opens the workspace
   should not have to learn two different ideas of what "open" means.

   Tokens are inherited from index.html. The few defined here are the ones the
   marketing page has no use for.
   ───────────────────────────────────────────────────────────────────────── */

.wsp{
  --wsp-chrome:#0E2523;        /* deeper than --ink: chrome sits BEHIND ink */
  --wsp-line:rgba(255,255,255,.10);
  --wsp-t1:#F2F5F1;
  --wsp-t2:rgba(242,245,241,.72);
  --wsp-t3:rgba(242,245,241,.52);
  --wsp-rail:74px;             /* the rail's width on a desktop */
  --wsp-railh:58px;            /* and its height once it lies down on a phone */

  position:fixed; inset:0; z-index:9000;
  display:none; flex-direction:row;
  background:var(--paper);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  overscroll-behavior:contain;

  /* Entering. The surface is opaque and covers the page, so there is nothing
     to fade THROUGH — what reads as "opening" is the lift: the rail slides in
     from its own edge and the content settles up into place behind it. */
  opacity:0;
  transition:opacity .26s var(--ease);
}
.wsp.is-open{display:flex;}
.wsp.is-in{opacity:1;}
body.wsp-open{overflow:hidden;}

.wsp .wrail{transform:translateX(-10px); opacity:0;
  transition:transform .34s var(--ease), opacity .26s var(--ease);}
.wsp .wsp__body{transform:translateY(9px); opacity:0;
  transition:transform .38s var(--ease) .03s, opacity .3s var(--ease) .03s;}
.wsp.is-in .wrail,
.wsp.is-in .wsp__body{transform:none; opacity:1;}

/* ---- the rail ---------------------------------------------------------- */

/* It replaced a full-width bar. See the note over build() in sz-workspace.js:
   Exposure brings its own header, and two headers stacked on one screen is
   the seam a reader notices first. */
.wrail{
  flex:0 0 auto; width:var(--wsp-rail); z-index:26;
  display:flex; flex-direction:column; gap:3px;
  padding:12px 8px;
  background:var(--wsp-chrome); color:var(--wsp-t1);
  border-right:1px solid var(--wsp-line);
}
/* The mark is a link home. No tile behind it: the logo carries its own shape
   and its own light, and a plate under it only fought both. */
.wrail__mark{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:30px; margin:4px auto 14px;
  background:none; border:0; box-shadow:none;
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
.wrail__mark img{
  display:block; width:100%; height:auto;
  /* Lifts it off a near-black rail without putting a box around it. */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.wrail__mark:hover{transform:translateY(-1px);}
.wrail__mark:hover img{filter:drop-shadow(0 3px 7px rgba(0,0,0,.55));}
.wrail__mark:active{transform:translateY(0);}
.wrail__mark:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wrail__nav{display:flex; flex-direction:column; gap:3px;}
.wrail__foot{
  margin-top:auto; display:flex; flex-direction:column; gap:3px;
  padding-top:10px; border-top:1px solid var(--wsp-line);
}

.wrail__i{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-height:58px; padding:9px 2px; border-radius:10px;
  appearance:none; background:transparent; border:0;
  color:var(--wsp-t3); text-decoration:none; font:inherit; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.wrail__i:hover{background:rgba(255,255,255,.06); color:var(--wsp-t1);}
.wrail__i:focus-visible{outline:2px solid var(--verified); outline-offset:-2px;}
.wrail__i.is-on{background:rgba(255,255,255,.09); color:var(--wsp-t1);}
/* Where you are is marked by a gold edge as well as by weight and colour, so
   it survives a dimmed screen and a reader who cannot separate the two
   greens. */
.wrail__i.is-on::before{
  content:""; position:absolute; left:-8px; top:50%;
  width:3px; height:26px; margin-top:-13px;
  border-radius:0 3px 3px 0; background:var(--gold);
}
.wrail__ico{display:flex; align-items:center; justify-content:center;
  width:21px; height:21px;}
.wrail__ico svg{display:block; width:100%; height:100%;}
.wrail__cap{
  font-size:9.5px; font-weight:500; letter-spacing:.03em; line-height:1;
  white-space:nowrap;
}
/* A TOOL THIS PLAN DOES NOT OPEN. Quieter than the rest so it never reads as
   where you are - and nothing else: no padlock, no plan chip. Which plan opens
   it, and what it costs, is the job of the page behind it. */
.wrail__i--locked{color:var(--wsp-t3); opacity:.72;}
.wrail__i--locked:hover{opacity:1;}
.wrail__i--x{color:var(--wsp-t3);}
.wrail__i--x:hover{background:rgba(255,255,255,.09); color:var(--wsp-t1);}

/* Free and Pro must be distinguishable at a glance and never by colour
   alone — the ring appears as well as the colour changing. */
.wrail__av{
  display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px; border-radius:50%;
  background:rgba(255,255,255,.12); color:var(--wsp-t1);
  border:1px solid transparent;
  font-size:10.5px; font-weight:600; line-height:1;
}
.wrail__av.is-pro{
  background:rgba(184,136,47,.20); border-color:rgba(184,136,47,.75);
  color:#F0D9A8;
}
/* Too small for a mark at 21px, so the tier shows as the ring: none for
   Basic, gold for Pro, and a doubled gold ring for Supreme. */
.wrail__av.is-tier-basic{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35); color:var(--wsp-t1);
}
.wrail__av.is-tier-supreme{
  background:linear-gradient(180deg, rgba(232,201,138,.32), rgba(184,136,47,.18));
  border-color:#E8C98A; color:#FBEBC6;
  box-shadow:0 0 0 2px rgba(15,38,34,.9), 0 0 0 3px rgba(232,201,138,.55);
}

/* ---- body -------------------------------------------------------------- */

.wsp__body{flex:1 1 auto; min-width:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;}
.wsp__pane{display:none; padding:clamp(16px,3vw,30px) clamp(14px,3vw,26px) 64px;}
.wsp__pane.is-active{display:block;}
.wsp__pane--flush{padding:0; height:100%; position:relative;}

/* Exposure pads itself now (page.tsx, px-3.5 below 1120px). The stopgap
   that used to pad around the frame here is gone: kept, the two would add up
   to a 28px gutter on the website while the phone - which mounts the same
   build with no stopgap of its own - got the fix for the first time. */
.wsp__in{max-width:940px; margin:0 auto;}

/* Moving between Exposure, the Library and the Assistant. The same rise the
   library reader already knows (libViewIn), so the two surfaces agree about
   what a change of view looks like. Applied only on a real change of view —
   see the note over `shown` in sz-workspace.js. */
.wsp__pane.is-enter{animation:wspViewIn .3s var(--ease) both;}
@keyframes wspViewIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:none;}
}

.wsp h2{font-size:clamp(19px,2.6vw,25px); letter-spacing:-.02em; margin:0 0 6px;}
.wsp .sub{color:var(--muted); font-size:14.5px; line-height:1.6;
  margin:0 0 20px; max-width:62ch;}
.wsp .eyebrow-w{
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 8px;
}

/* Exposure is the console's own page, in the console's own process. The frame
   gets the whole pane so the page inside lays itself out at its natural width
   rather than being squeezed into a column it was not designed for. */
.xframe{
  display:block; width:100%; height:100%;
  min-height:100vh;
  border:0; background:var(--paper);
  opacity:0; transition:opacity .34s var(--ease);
}
.xframe.is-ready{opacity:1;}

/* What sits there while a separate application on a separate port starts up.
   A blank pane reads as a broken embed; this says which thing is opening, and
   after twelve seconds it says plainly that the thing is not answering. */
.xload{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:24px; text-align:center;
  background:var(--paper);
  transition:opacity .3s var(--ease);
}
/* opacity:0 hides it from eyes, not from a screen reader - the finished
   loader kept announcing "Opening Exposure..." to anyone listening, behind an
   iframe that had already rendered. visibility is what removes it from the
   accessibility tree, delayed by the fade so the transition still plays. */
.xload{visibility:visible;}
.xload.is-done{
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.xload__bar{
  position:relative; width:132px; height:2px; border-radius:2px;
  background:var(--hairline); overflow:hidden;
}
.xload__bar::after{
  content:""; position:absolute; inset:0 auto 0 0; width:40%;
  border-radius:2px; background:var(--verified);
  animation:wspLoad 1.25s var(--ease) infinite;
}
.xload__t{margin:0; font-size:13px; color:var(--muted-2); line-height:1.6;
  max-width:46ch;}
.xload.is-slow .xload__bar{display:none;}
@keyframes wspLoad{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(330%);}
}

/* ---- fields ------------------------------------------------------------ */

.wf{display:grid; gap:12px; margin:0 0 18px;}
@media (min-width:700px){ .wf.wf--2{grid-template-columns:1fr 1fr;} }
.wf label{display:block; font-size:12.5px; font-weight:500;
  color:var(--muted-2); margin:0 0 5px;}
.wf input, .wf select{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-sm); padding:11px 12px; min-height:44px;
  font-variant-numeric:tabular-nums;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.wf input:focus, .wf select:focus{
  outline:none; border-color:var(--verified);
  box-shadow:0 0 0 3px var(--verified-soft);
}

/* ---- results ----------------------------------------------------------- */

.wres{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:clamp(16px,2.6vw,24px);
  box-shadow:var(--shadow-sm); margin:0 0 16px;
}
.wrow{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:8px 0; font-size:14px; border-bottom:1px solid var(--paper);
}
.wrow:last-child{border-bottom:0;}
.wrow > span:first-child{color:var(--muted);}
.wrow b{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* A refusal is a RESULT, not an error state — the calculator declining to
   guess is the correct outcome and should not wear the colour of a failure. */
.wblock{
  background:var(--gold-soft); border:1px solid rgba(184,136,47,.30);
  border-radius:var(--r-md); padding:14px 16px; font-size:14px;
  color:#6B4E12; line-height:1.55;
}


/* ---- saved work ----------------------------------------------------------
   A list of documents, not a table of rows: each one is a thing the reader
   made and can open again, so it gets an edge of its own. The actions sit on
   the title's line wherever there is room and drop below it where there is
   not, rather than shrinking into targets nobody can hit. */
.wdocs{display:flex; flex-direction:column; gap:10px; max-width:860px;}
.wdoc{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); overflow:hidden;
}
.wdoc__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; padding:13px 16px;
}
.wdoc__main{min-width:0; flex:1 1 260px;}
.wdoc__meta{
  margin:0; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);
}
.wdoc__t{
  margin:3px 0 0; font-size:15px; font-weight:500; line-height:1.4;
  letter-spacing:-.01em;
}
.wdoc__act{display:flex; flex:0 0 auto; gap:8px;}
/* Deleting is final, so the question is asked on its own line under the
   document it is about and never as a dialog over the list. */
.wdoc__confirm{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:11px 16px; border-top:1px solid var(--hairline);
  background:var(--paper); font-size:13px; line-height:1.5;
}
.wdoc__empty{margin:0; font-size:14px; line-height:1.65; color:var(--muted);}

/* ---- gate -------------------------------------------------------------- */

.wgate{max-width:430px; margin:clamp(20px,7vh,64px) auto; text-align:left;}
.wgate__card{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:clamp(20px,3.4vw,30px);
  box-shadow:var(--shadow-md);
}
.wgate h2{margin-bottom:8px;}
.wgate .price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:16px 0 4px; padding-top:16px; border-top:1px solid var(--hairline);
}
.wgate .price b{font-size:clamp(28px,6vw,38px); font-weight:600;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.wgate .price span{color:var(--muted-2); font-size:14px;}
.wgate ul{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px;}
.wgate li{font-size:14px; color:var(--muted); padding-left:23px;
  position:relative; line-height:1.5;}
.wgate li::before{
  content:""; position:absolute; left:2px; top:6px;
  width:11px; height:6px; border-left:2px solid var(--verified);
  border-bottom:2px solid var(--verified); transform:rotate(-45deg);
}

.wbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; padding:13px 20px; margin-top:16px;
  background:var(--ink); color:#fff; border:0; border-radius:var(--r-sm);
  font:inherit; font-size:15px; font-weight:500; text-decoration:none;
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wbtn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);}
.wbtn:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wbtn--ghost{background:transparent; color:var(--ink); border:1px solid var(--hairline);}
/* The Saved list's buttons sit beside a title rather than under a form, so
   they do not take the full-width block treatment every other button here
   gets. Declared after .wbtn on purpose: at equal specificity the later rule
   wins, and declared before it these were silently overridden back to
   full-width 48px blocks stacked down the card. */
.wbtn--sm{
  width:auto; min-height:38px; padding:8px 14px; margin-top:0; font-size:13px;
}
.wbtn[disabled]{opacity:.55; transform:none; cursor:not-allowed;}

/* An inline control that reads as a link but is a button, because it changes
   what is on screen rather than navigating anywhere. */
.wlink{
  appearance:none; background:none; border:0; padding:0;
  font:inherit; font-size:inherit; color:var(--verified);
  text-decoration:underline; cursor:pointer;
}
.wlink:hover{color:var(--ink);}
.wlink:focus-visible{outline:2px solid var(--verified); outline-offset:2px; border-radius:2px;}

.wnote{margin-top:14px; font-size:12.5px; color:var(--muted-2); line-height:1.6;}
/* The honesty band. Not decoration — this is the page telling the reader what
   state the build is in, and it must never be stripped to make a demo look
   finished. */
.wflag{
  margin-top:16px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--gold-soft); border:1px solid rgba(184,136,47,.30);
  font-size:12.5px; line-height:1.6; color:#6B4E12;
}
.wflag b{font-weight:600;}
.werr{margin-top:10px; font-size:13px; color:#9A2C2C; line-height:1.5;}
.wok{margin-top:10px; font-size:13px; color:var(--verified); line-height:1.5;}

/* ---- locked state ------------------------------------------------------- */

.wlock{position:relative; overflow:hidden; border-color:rgba(184,136,47,.32);}
/* A single gold rule at the head of the card. The paywall should read as the
   premium edge of the product, not as a warning. */
.wlock::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--gold),#E0BC70,var(--gold));
}
.wlock__badge{
  display:inline-flex; align-items:center; gap:7px;
  margin:4px 0 14px; padding:5px 12px; border-radius:999px;
  background:var(--gold-soft); border:1px solid rgba(184,136,47,.32);
  font-size:12px; font-weight:600; letter-spacing:.04em; color:#6B4E12;
}
.wlock .price{margin-top:0; padding-top:0; border-top:0;}
.wlock__h{font-size:clamp(18px,2.4vw,22px); margin:10px 0 4px;}

/* ---- assistant dock ----------------------------------------------------- */

.wfab{
  position:absolute; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
  z-index:20; display:inline-flex; align-items:center; gap:9px;
  min-height:48px; padding:0 18px; border:0; border-radius:999px;
  background:var(--ink); color:#fff; font:inherit; font-size:14px; font-weight:500;
  box-shadow:var(--shadow-lg); cursor:pointer;
  transition:transform .18s var(--ease);
}
.wfab:hover{transform:translateY(-2px);}
.wfab:focus-visible{outline:2px solid var(--verified); outline-offset:3px;}
.wfab__i{font-size:15px; line-height:1;}
/* `hidden` is a UA rule of display:none, and any class that sets display beats
   it on specificity. Without this the attribute was set and ignored. */
.wfab[hidden]{display:none !important;}
.wpanel[hidden]{display:none !important;}

.wpanel{
  position:absolute; right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + 60px);
  z-index:21; width:min(400px, calc(100vw - 28px));
  max-height:min(560px, calc(100vh - 190px));
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); box-shadow:var(--shadow-xl); overflow:hidden;
}
.wpanel__bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--hairline);
  font-size:13px; letter-spacing:.02em;
}
.wpanel__x{
  appearance:none; background:transparent; border:0; font-size:22px; line-height:1;
  color:var(--muted); min-width:44px; min-height:44px; border-radius:var(--r-sm);
  cursor:pointer;
}
.wpanel__x:hover{color:var(--ink); background:var(--paper);}
.wpanel__x:focus-visible{outline:2px solid var(--verified); outline-offset:-2px;}
.wpanel__body{
  flex:1 1 auto; overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:12px;
}
.wpanel__hint{margin:0; font-size:13.5px; color:var(--muted); line-height:1.6;}
.wpanel__note{
  margin:0; padding:9px 14px 12px; font-size:11.5px; color:var(--muted-2);
  line-height:1.5; border-top:1px solid var(--paper);
}

.wmsg{max-width:100%; border-radius:var(--r-lg); padding:12px 15px;
  font-size:13.5px; line-height:1.62;}
.wmsg--you{align-self:flex-end; background:var(--ink); color:#EEF2ED;}
.wmsg--sz{align-self:flex-start; background:var(--surface);
  border:1px solid var(--hairline); box-shadow:var(--shadow-sm);}
.wmsg--sz .src{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--hairline);
  font-size:12px; color:var(--muted-2); line-height:1.65;
}
.wmsg--sz .src b{display:block; font-weight:600; color:var(--muted);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px;}

.wask{display:flex; gap:9px; align-items:flex-end;
  padding:12px 14px; border-top:1px solid var(--hairline);}
.wask textarea{
  flex:1 1 auto; font:inherit; font-size:15px; resize:none;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-md); padding:12px 13px; min-height:48px; max-height:160px;
  color:var(--ink); line-height:1.5;
}
.wask textarea:focus{outline:none; border-color:var(--verified);
  box-shadow:0 0 0 3px var(--verified-soft);}
.wask button{
  flex:0 0 auto; min-height:48px; min-width:48px; padding:0 18px;
  background:var(--ink); color:#fff; border:0; border-radius:var(--r-md);
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
}
.wask button:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}

/* On a phone the dock becomes a sheet: a 400px panel floating over a 375px
   screen is a panel with nowhere to float. */
@media (max-width:520px){
  .wpanel{
    left:0; right:0; bottom:0; width:100%;
    max-height:min(72vh, calc(100vh - 120px));
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0;
  }
  .wsp.has-panel .wfab{display:none;}
  .wfab__t{display:none;}
  .wfab{padding:0; width:52px; justify-content:center;}
}

/* ---- the rail lies down on a phone -------------------------------------- */

/* 74px of a 375px screen is a fifth of the reading width, so below 720px the
   rail becomes a bottom bar. It stays FIRST in the source — the way out and
   the navigation are what a screen reader should meet on entering a dialog —
   and is placed last by order, where a thumb can reach it.

   These rules sit after .wfab and .wpanel deliberately: a media query adds no
   specificity, so the dock's offsets can only be moved by rules the cascade
   reaches later. */
@media (max-width:720px){
  .wsp{flex-direction:column;}
  .wsp__body{order:1;}
  .wrail{
    order:2; width:auto; min-height:var(--wsp-railh);
    flex-direction:row; align-items:stretch; gap:4px;
    padding:5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    border-right:0; border-top:1px solid var(--wsp-line);
  }
  .wrail__mark{display:none;}
  .wrail__nav{flex-direction:row; flex:1 1 auto; justify-content:space-evenly;}
  .wrail__foot{
    margin-top:0; flex-direction:row; padding-top:0; padding-left:8px;
    border-top:0; border-left:1px solid var(--wsp-line);
  }
  .wrail__i{min-width:54px; min-height:48px; padding:6px 4px;}
  /* The active edge moves to the top of the item, where it reads as an
     underline for a bar rather than a stray mark down one side. */
  .wrail__i.is-on::before{
    left:50%; top:0; width:24px; height:3px; margin:0 0 0 -12px;
    border-radius:0 0 3px 3px;
  }
  /* The dock clears the bar instead of sitting under it. */
  .wfab{bottom:calc(var(--wsp-railh) + 14px);}
  .wpanel{bottom:calc(var(--wsp-railh) + 74px);}
  .xframe{min-height:calc(100vh - var(--wsp-railh));}
  /* It arrives from the edge it lives on. */
  .wsp .wrail{transform:translateY(10px);}
}
@media (max-width:520px){
  .wpanel{bottom:var(--wsp-railh);}
  /* SEVEN KEYS HAVE TO FIT, AND HOME IS THE WAY OUT. At 54px each they came
     to more than a 375px phone is wide, so the bar overflowed and Home - the
     last one, and the only one that leaves - sat off the right edge with no
     way to scroll to it. The keys give up their fixed width and share what
     there is; the caption shrinks with them and is allowed to sit tight
     rather than push its neighbour off. */
  /* The two groups grow in proportion to how many keys they hold - 3 and 4 -
     so every key across the bar gets the same width. Sharing the bar evenly
     between the GROUPS instead would give four keys half of it and leave
     Account reading "Acc...". */
  .wrail__nav{min-width:0; flex:3 1 0;}
  .wrail__foot{min-width:0; flex:4 1 0;}
  .wrail__i{min-width:0; flex:1 1 0; padding:6px 1px;}
  .wrail__cap{font-size:8.5px; letter-spacing:.01em; max-width:100%; overflow:hidden;
    text-overflow:ellipsis;}
  .wrail__foot{padding-left:6px; gap:2px;}
  .wrail__i.is-on::before{width:20px; margin-left:-10px;}
}
/* The narrowest phones (320px): "Dashboard", the longest caption, still lost
   its last letters. The bar's own side padding and the captions' tracking
   give up the few pixels it needs (2 Oct 2026). */
@media (max-width:360px){
  .wrail{padding-left:4px; padding-right:4px; gap:2px;}
  .wrail__foot{padding-left:4px;}
  .wrail__i{padding-left:0; padding-right:0;}
  .wrail__cap{font-size:8px; letter-spacing:-.01em; line-height:1.25; overflow:visible; text-overflow:clip;}
}

/* ---- the header profile control ---------------------------------------- */

.prof{position:relative; display:flex; align-items:center;}
.prof__btn{
  appearance:none; display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 14px; border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--hairline);
  font:inherit; font-size:14px; font-weight:500; color:var(--ink);
  text-decoration:none; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.prof__btn:hover{background:var(--paper); border-color:var(--muted-2);}
.prof__btn:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.prof__btn--in{padding-left:8px;}
.prof__av{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:12px; font-weight:600;
}
/* The chip no longer styles its own pill: it holds a .tier badge, which is
   the same object the account panel draws. */
.prof__plan{display:inline-flex;}

/* ---- the tier badge ----
   One object for every place a plan is named, and the same logo the pricing
   cards print: the mark, then the name in spaced capitals. Basic is a plain
   word; Pro is a silver spark and silver word on white, exactly as its card
   is; Supreme is a gold crown and gold word on ink, exactly as its card is.
   Each step up changes SHAPE as well as colour. */
.tier{
  display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  line-height:1; padding:5px 11px; border-radius:999px; white-space:nowrap;
  background:var(--paper); border:1px solid var(--hairline); color:var(--muted);
}
.tier__mark{width:13px; height:13px; flex:0 0 auto; display:block;}
.tier--basic{background:var(--surface); color:var(--ink);}
.tier--pro{
  padding-left:9px;
  background:#FFFFFF; border-color:rgba(92,101,108,.35);
  box-shadow:0 1px 2px rgba(40,48,54,.10);
}
.tier--supreme{
  padding-left:9px;
  background:linear-gradient(180deg, #1F4039, #0F2622);
  border-color:rgba(255,211,92,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(15,38,34,.25);
}
.tier--pro .tier__name,.tier--supreme .tier__name{font-weight:800;}

/* The marks, wherever they are drawn. */
.tier--pro .tier__mark,.plan[data-plan="pro"] .plan__mark{
  color:#5C656C; animation:mark-glint-silver 3.6s cubic-bezier(.45,.05,.35,1) infinite;
}
.tier--supreme .tier__mark,.plan[data-plan="supreme"] .plan__mark{
  color:#FFCF4D; animation:mark-glint-gold 2.4s ease-in-out infinite;
}

/* ---- the metals ----
   Pro is polished silver for a white ground; Supreme is bright gold for an
   ink one. Each is two layers clipped to the letters: a banded base, which is
   what reads as metal rather than as a flat grey or yellow, and a narrow
   streak of light that sweeps across and then rests.

   Readable first. Every band of the silver stays dark enough to hold its
   edge on white, and every band of the gold stays bright enough to hold its
   edge on ink - an earlier gold had a brown middle band that sank into the
   green card, and an earlier silver leaned on a blurred outline that went to
   mush at normal screen density. No blur touches either word's letters.

   The streak rests fully off the word, so the still frame - and what
   prefers-reduced-motion sees - is the banded metal on its own. The pricing
   cards in index.html use these same classes and keyframes. */
.metal{
  display:inline-block; padding:.14em 0; margin:-.14em 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.metal--silver{
  background-image:
    linear-gradient(105deg, transparent 42%, #A9B2B9 47%, #C3CAD0 50%, #A9B2B9 53%, transparent 58%),
    linear-gradient(180deg, #7D868D 0%, #5A636A 40%, #2E353B 54%, #4B535A 72%, #6F787F 100%);
  background-size:300% 100%, 100% 100%;
  background-position:130% 0, 0 0;
  animation:metal-sweep 3.6s cubic-bezier(.45,.05,.35,1) infinite;
}
.metal--gold{
  background-image:
    linear-gradient(105deg, transparent 40%, #FFF8DE 47%, #FFFFFF 50%, #FFF8DE 53%, transparent 60%),
    linear-gradient(180deg, #FFF1BF 0%, #FFD767 34%, #F0B43C 52%, #FFCB4F 68%, #FFE59A 100%);
  background-size:300% 100%, 100% 100%;
  background-position:130% 0, 0 0;
  filter:drop-shadow(0 0 3px rgba(255,196,70,.22));
  animation:metal-sweep 2.4s cubic-bezier(.45,.05,.35,1) infinite, metal-glow 2.4s ease-in-out infinite;
}
@keyframes metal-sweep{
  0%{background-position:130% 0, 0 0;}
  55%,100%{background-position:-30% 0, 0 0;}
}
@keyframes metal-glow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,196,70,.22));}
  30%{filter:drop-shadow(0 0 8px rgba(255,210,100,.6));}
}
/* the mark catches the light just before the word does */
@keyframes mark-glint-silver{
  0%,40%,100%{filter:brightness(1);}
  14%{filter:brightness(1.45);}
}
@keyframes mark-glint-gold{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,196,70,.35)) brightness(1);}
  16%{filter:drop-shadow(0 0 7px rgba(255,215,110,.9)) brightness(1.2);}
}
@media (prefers-reduced-motion:reduce){
  .metal,.tier__mark,.plan__mark{animation:none !important;}
}

.prof__type{display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.prof__active{font-size:12px; color:var(--verified); font-weight:600;}

.prof__panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:80;
  width:min(310px, calc(100vw - 28px));
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  padding:16px; text-align:left;
}
.prof__email{margin:0 0 4px; font-size:13.5px; font-weight:600;
  color:var(--ink); word-break:break-all;}
.prof__type{margin:0 0 8px; font-size:12.5px; color:var(--muted);}
.prof__type b{color:var(--ink); font-weight:600;}
.prof__type b.is-pro{color:var(--gold);}
.prof__sub{margin:0 0 12px; font-size:12.5px; color:var(--muted); line-height:1.55;}
a.prof__cta{display:flex; align-items:center; justify-content:center;
  text-decoration:none;}
.prof__price{
  display:flex; align-items:baseline; gap:6px; margin:0 0 10px;
  padding-top:12px; border-top:1px solid var(--hairline);
}
.prof__price b{font-size:26px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--ink);}
.prof__price span{font-size:13px; color:var(--muted-2);}
.prof__lbl{display:block; font-size:12px; font-weight:500;
  color:var(--muted-2); margin:6px 0 5px;}
.prof__panel input{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-sm); padding:10px 12px; min-height:44px;
}
.prof__panel input:focus{outline:none; border-color:var(--verified);
  box-shadow:0 0 0 3px var(--verified-soft);}
.prof__cta{
  appearance:none; width:100%; min-height:44px; margin-top:10px;
  background:var(--ink); color:#fff; border:0; border-radius:var(--r-sm);
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
}
.prof__cta:hover{background:var(--ink-2);}
.prof__cta:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.prof__fine{margin:9px 0 0; font-size:11.5px; color:var(--muted-2); line-height:1.5;}
.prof__err{margin:8px 0 0; font-size:12.5px; color:#9A2C2C;}
.prof__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline);
}
.prof__link{
  appearance:none; background:transparent; border:0; padding:8px 2px;
  min-height:44px; display:inline-flex; align-items:center;
  font:inherit; font-size:12.5px; color:var(--muted); text-decoration:underline;
  cursor:pointer;
}
.prof__link:hover{color:var(--ink);}
.prof__link:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}

/* The header is tight on a phone; the plan chip is the part that can go — the
   avatar still says who is signed in, and the panel states the plan. */
@media (max-width:900px){
  .prof__plan{display:none;}
  .prof__btn{padding:0 10px;}
  .prof__panel{position:fixed; top:auto; bottom:12px; right:12px; left:12px; width:auto;}
}

/* ---- locked resource cards on the marketing page ------------------------ */

/* Readable, not obscured. The card still has to sell the thing; what changes
   is that the CTA stops promising entry. */
.ecard.is-locked{position:relative;}
/* The plan that opens the card and its entry price, in three parts: the lock,
   the plan, the price. Where the card is too narrow for one line (four to a
   row on a desktop, a phone) the price wraps under the plan instead of the
   badge forcing its width on the card. It was width:max-content, which made
   its one-line width the card's minimum and pushed the row off the screen. */
.ecard__lock{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:1px 6px;
  margin:0 0 12px; padding:5px 11px; border-radius:14px;
  background:var(--gold-soft); border:1px solid rgba(184,136,47,.32);
  font-size:11.5px; font-weight:600; letter-spacing:.03em; color:#6B4E12;
  align-self:flex-start; max-width:100%;
}
.pro__btn.is-active{background:var(--verified);}

@media (prefers-reduced-motion:reduce){
  .wsp,.wsp *,.wsp *::before,.wsp *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
  /* Durations alone would still leave the surface holding its start position
     for the two frames before .is-in lands, which is a jump rather than an
     animation. With no motion asked for, there is no start position. */
  .wsp .wrail,.wsp .wsp__body{transform:none !important;}
  .wsp__pane.is-enter{animation:none !important;}
  .xload__bar::after{animation:none !important; width:100%;}
}

/* Answer-source tags. GROUNDED is reserved for the engine; the page
   catalogue wears its own label so the two can never be confused. */
.wmsg--sz .wtag{
  margin-top:9px; padding-top:7px; border-top:1px solid var(--hairline);
  font:600 9.5px/1.5 var(--mono, ui-monospace, monospace);
  letter-spacing:.09em; text-transform:uppercase;
}
.wmsg--sz .wtag--engine{color:var(--pine, #0E6E5C);}
.wmsg--sz .wtag--local{color:var(--muted);}

/* The assistant page fills the body edge to edge; its own grid handles
   spacing. */
/* The views layer is a column so a pane that wants the whole height can have
   it. Before the Exposure frame was given its own layer, panes were direct
   children of the scrolling body and height:100% resolved against it; through
   a plain wrapper it resolved against nothing and the assistant stopped short
   of the bottom of the window. */
.wsp__views{display:flex; flex-direction:column; min-height:100%;}
/* The Exposure frame is a SIBLING of this layer, not a child, so that it can
   be hidden rather than moved. An empty views layer still claiming the full
   height therefore pushed the calculator below the fold and left the pane
   looking blank. Empty means there is no view to show: stand aside. */
.wsp__views:empty{display:none;}
.wsp__views > .wsp__pane.is-active{flex:1 1 auto; min-height:0;}
/* .is-active carries two classes and therefore outranks a single-class
   rule: written as .wsp__pane--assistant alone, display:flex lost to
   display:block and the assistant sat at its 60vh floor with the rest of
   the window empty beneath it. */
.wsp__pane--assistant.is-active{padding:0; display:flex; flex-direction:column;}
/* The assistant fills the viewport below the site header so its composer
   sits at the bottom of the PAGE. Without a height here the pane is only
   as tall as its content (measured 495px), which left the ask bar floating
   mid-page with the thread scrolling behind it. */
.wsp__pane--assistant.is-active{height:calc(100dvh - var(--nav-h,66px)); overflow:hidden;}
.wsp__pane--assistant .szas{flex:1 1 auto; min-height:0; height:100%; max-height:100%;}

/* ---- the signed-out nav control ----
   One control. It was a pair; the second door only asked a stranger to
   choose before they knew what was behind either, and the page it leads to
   offers account creation anyway. */
.prof__btn--cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:9px 15px;border-radius:8px;
  font-size:13.4px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
.prof__btn--cta{
  background:var(--ink);border:1px solid var(--ink);color:var(--paper);
}
.prof__btn--cta:hover{opacity:.9}


/* ═══════════════════════════════════════════════════════════════════════════
   DEPTH, AND THE DARK THEME
   ───────────────────────────────────────────────────────────────────────────
   Two things live here, and they are related.

   DEPTH. Every surface in E-Resources is lit from above: a gradient down the
   face, a one-pixel highlight along the top edge, and a shadow that grows when
   the surface rises to meet the pointer. That is the whole trick, applied
   consistently — it is what separates a card a reader believes they can pick
   up from a rectangle with a border.

   THE DARK THEME. Scoped to the workspace root, never to <html>: the marketing
   page behind is a light document that nobody asked to darken, and it is still
   there when this closes. Exposure is a separate origin and cannot read this
   choice, so it is posted into the frame — see pushTheme in sz-workspace.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.wsp[data-theme="dark"]{
  /* THE DARK SURFACES CARRY ALMOST NO CHROMA, ON PURPOSE.
     The previous ramp ran 45-62% saturation at 4-13% lightness. That much
     colour that far down reads as murky rather than deep - the "eco theme"
     look - because the eye reads saturated darks as a cast over the screen
     instead of as an absence of light. A premium dark surface is nearly
     neutral and spends its chroma in one place: the accent.

     Three things changed together:
       - saturation dropped to 8-11%, a whisper of the brand teal, not a wash
       - the elevation steps widened from 7 lightness points to 14, so paper,
         card and raised card are actually distinguishable from one another
       - the hue was unified at 168. It used to drift 166-174 across the
         surfaces while --ink sat at 137, a different green family from its
         own background, which is the kind of mismatch that reads as unplanned
         without anyone being able to say why. */
  --paper:#12211D;              /* the ground */
  --surface:#1A2C27;            /* a card on it */
  --surface-2:#21362F;          /* a card on a card */
  --raised:#29403A;             /* hover / pressed */
  --ink:#F2F7F4;
  /* THE MUTED RAMP MOVED AS A SET when the cards and tiles gained their green
     ground, and it had to move as a set rather than one step at a time.

     A tint raises surface luminance, which costs contrast for light-grey
     text. Lifting only --muted-2 to cover it pushed tertiary text up against
     --muted and collapsed two levels of hierarchy into one; holding --muted-2
     down instead forced the tile tint so low that a tile became luminance
     0.0024 away from the card it sits on, i.e. invisible. Neither is a fix.
     So both steps moved together and the spacing survives as three levels.

     WCAG contrast against the LIGHTEST surface in the theme, a tile top at
     rgb(44,79,69), recomputed 1 Oct 2026: ink 8.39:1, muted 5.38:1,
     muted-2 4.07:1. muted-2 is therefore below 4.5:1 there and is fit only
     for large or non-essential text on a tile top. Elsewhere it clears AA:
     4.98:1 on --raised, 5.76:1 on --surface-2, 6.57:1 on --surface.
     Re-measure here before tinting any surface lighter. */
  --muted:#BACBC4;
  --muted-2:#9BB3A9;
  /* a lower alpha: an edge in the dark should be felt, not drawn */
  --hairline:rgba(255,255,255,.10);
  --verified:#55D6A6;
  --verified-soft:rgba(85,214,166,.15);
  --gold:#E2BE72;
  --gold-soft:rgba(226,190,114,.13);

  --wsp-chrome:#0F1C18;         /* chrome still sits BEHIND ink */
  --wsp-line:rgba(255,255,255,.09);

  /* Shadows on a dark ground are cast by absence of light, not by ink. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.44);
  --shadow-md:0 6px 16px -4px rgba(0,0,0,.56), 0 18px 36px -12px rgba(0,0,0,.5);
  --shadow-lg:0 12px 26px -8px rgba(0,0,0,.6), 0 34px 66px -18px rgba(0,0,0,.56);
  --shadow-xl:0 20px 40px -10px rgba(0,0,0,.66), 0 50px 96px -22px rgba(0,0,0,.6);
  --hl:inset 0 1px 0 rgba(255,255,255,.10);

  color-scheme:dark;
}

.wsp[data-theme="light"]{
  --surface-2:#FAFBF7;
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
}

/* The ground is not flat. A single wide pool of light behind the content
   keeps a full-screen surface from reading as a slab of paint, and it is
   cheap: two gradients, no image, no paint on scroll. */
.wsp{
  background:
    radial-gradient(115% 78% at 26% -12%,
      color-mix(in srgb, var(--verified) 9%, transparent) 0%, transparent 62%),
    radial-gradient(96% 64% at 108% 8%,
      color-mix(in srgb, var(--gold) 7%, transparent) 0%, transparent 58%),
    var(--paper);
}
/* Browsers without color-mix still get the ground, just without the pools. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .wsp{background:var(--paper);}
}

/* ---- the rail: a milled column, not a flat slab -------------------------
   It read pale and flat, and the reason was not opacity. One even near-black
   rectangle with one sheen across the top IS a flat rectangle, and dim glyphs
   floating on it have nothing to sit on. Three things answer that.

   GROUND. Light on a tall narrow column falls off down its length and catches
   the fold at its edge. So the ground is lit at the head, deepened at the
   foot, given a soft bloom where the light enters, and a bright hairline
   inside its right edge - just in from the dark border - which is the fold
   itself. That single lit line is what stops it reading as a cut-out.

   FACE. The items are keys on a console. A key has a top lip that catches
   light and a bottom edge in shade; at rest that is barely there, on hover it
   lifts, and the current one is brought forward, lit, and edged in gold that
   blooms onto the ground beside it.

   CONTRAST. The resting label was --wsp-t3, 52% - that is what "pale" was.
   It is --wsp-t2 now, and every glyph carries a hairline of shade beneath it
   so it sits ON its key rather than being printed into the rail.

   No color-mix here: the layers composite over --wsp-chrome, so the whole
   treatment follows whichever value the theme sets without a fallback block.
   ---------------------------------------------------------------------- */

.wrail{
  background:
    /* where the light enters */
    radial-gradient(130% 58% at 50% -8%, rgba(255,255,255,.085), transparent 62%),
    /* lit at the head */
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 34%),
    /* deepening to the foot */
    linear-gradient(180deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.34) 100%),
    var(--wsp-chrome);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.11),      /* the fold, catching light */
    inset 0 1px 0 rgba(255,255,255,.07),       /* the top lip */
    1px 0 0 var(--wsp-line),
    12px 0 36px -14px rgba(0,0,0,.62);         /* cast onto the page */
}
/* The mark sits in the lit part of the column and can afford a little bloom
   of its own; without it the top 40px is the one area with nothing in it. */
.wrail__mark img{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(94,211,165,.08));
}
.wrail__mark:hover img{
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(94,211,165,.14));
}

.wrail__i{
  border:1px solid transparent;
  color:var(--wsp-t2);
  transition:background .18s var(--ease), color .18s var(--ease),
             box-shadow .18s var(--ease), border-color .18s var(--ease),
             transform .12s var(--ease);
}
/* A key face at rest: present, not announced. */
.wrail__i::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(0,0,0,.22);
  opacity:.9; transition:opacity .18s var(--ease);
}
.wrail__ico svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));}
.wrail__i:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 5px 14px -7px rgba(0,0,0,.6);
  color:var(--wsp-t1);
  transform:translateY(-1px);
}
.wrail__i.is-on{
  background:
    /* the key face, lit */
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.04) 64%),
    /* and the faintest cast of the brand green, so the current place is the
       product's colour and not just a brighter grey */
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 78%);
  border-color:rgba(255,255,255,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.38),
    0 7px 18px -9px rgba(0,0,0,.66);
  color:#FFF;
  transform:none;
}
.wrail__i.is-on::after{opacity:0;}
.wrail__i.is-on .wrail__ico svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));}
/* The gold edge blooms onto the ground beside it, which is how an edge-lit
   marker behaves and why it now reads as lit rather than drawn. */
/* GREEN, NOT GOLD. The marker read as an orange bar against a dark green
   rail - the one warm thing on the page, and it was marking "where you are",
   which is the product's own state and belongs in the product's own colour.
   The gold is kept for what gold MEANS here: the paid-tier ring on the
   avatar, a few lines down. */
.wrail__i.is-on::before{
  background:linear-gradient(180deg, #8CF5CB, var(--verified) 52%, #1F7A5C);
  box-shadow:0 0 8px 1px rgba(94,211,165,.32);
}
.wrail__i:active{transform:translateY(1px);}
.wrail__i:active::after{opacity:0;}
/* The theme switch reads as a switch: it lights up when the lights are off. */
.wrail__i--theme[aria-pressed="true"]{color:#F3DCA8;}
.wrail__i--theme[aria-pressed="true"] .wrail__ico svg{
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 0 7px rgba(243,220,168,.45));
}

/* The rule between what is ours and what is theirs, fading at both ends -
   a hairline that runs the full width reads as a seam in a flat sheet. */
.wrail__foot{
  border-top:0;
  background-image:linear-gradient(90deg, transparent, rgba(255,255,255,.17) 20%,
    rgba(255,255,255,.17) 80%, transparent);
  background-size:100% 1px; background-repeat:no-repeat; background-position:top center;
}

.wrail__av{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.45);
}
/* A paid tier's ring reads as metal, so it catches a little light of its own.
   Still never colour alone - the ring itself is the signal. */
.wrail__av.is-pro,
.wrail__av.is-tier-supreme{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px rgba(0,0,0,.45),
    0 0 11px -1px rgba(221,174,85,.5);
}

/* ON A DARK GROUND A RAISED THING IS LIGHTER, NOT DARKER. The treatment above
   deepens the column toward its foot, which is how a lit column behaves when
   the page beside it is paper. In the dark theme the page is already almost
   black, so deepening removes the one thing that separated them and the rail
   reads as a hole rather than a column. Here it is lifted instead: the whole
   face takes a white wash, brightest at the head, and only the last stretch
   falls away. Same light, same direction - the other side of the same idea.
   The fold and the divider carry a little more, because a dark ground gives
   a hairline less to sit against. */
.wsp[data-theme="dark"] .wrail{
  background:
    radial-gradient(130% 58% at 50% -8%, rgba(255,255,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 44%),
    linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.16) 100%),
    var(--wsp-chrome);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.14),
    inset 0 1px 0 rgba(255,255,255,.09),
    1px 0 0 rgba(0,0,0,.55),
    12px 0 36px -14px rgba(0,0,0,.7);
}
.wsp[data-theme="dark"] .wrail__foot{
  background-image:linear-gradient(90deg, transparent, rgba(255,255,255,.21) 20%,
    rgba(255,255,255,.21) 80%, transparent);
}
@media (max-width:720px){
  .wsp[data-theme="dark"] .wrail{
    background:
      radial-gradient(90% 180% at 50% 0%, rgba(255,255,255,.07), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 60%),
      var(--wsp-chrome);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 -1px 0 rgba(0,0,0,.55),
      0 -12px 34px -14px rgba(0,0,0,.7);
  }
  .wsp[data-theme="dark"] .wrail__foot{
    background-image:linear-gradient(180deg, transparent, rgba(255,255,255,.21) 22%,
      rgba(255,255,255,.21) 78%, transparent);
  }
}

/* LYING DOWN, THE LIGHT COMES FROM ABOVE THE BAR, NOT FROM ITS LEFT. These
   overrides have to sit after the treatment above, not in the layout media
   query further up the file, or the column's fold would be drawn down the
   side of a bottom bar and its foot-shade across the middle of it. */
@media (max-width:720px){
  .wrail{
    background:
      radial-gradient(90% 180% at 50% 0%, rgba(255,255,255,.075), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%),
      var(--wsp-chrome);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.11),     /* the lit fold, now the top edge */
      0 -1px 0 var(--wsp-line),
      0 -12px 34px -14px rgba(0,0,0,.62);
  }
  /* The divider stands up with the bar. */
  .wrail__foot{
    background-image:linear-gradient(180deg, transparent, rgba(255,255,255,.17) 22%,
      rgba(255,255,255,.17) 78%, transparent);
    background-size:1px 100%; background-position:left center;
    border-left:0;
  }
  /* A bar is shallow: a key that lifts on hover has nowhere to lift to, and
     the active marker is already an underline across its top. */
  .wrail__i:hover{transform:none;}
}

/* ---- panes and cards ----------------------------------------------------- */

.wsp .wres,
.wsp .wgate__card,
.wsp .wpanel,
.wsp .wdoc,
.wsp .wmsg--sz{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 100%, #fff 4%), var(--surface));
  box-shadow:var(--hl), var(--shadow-md);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .wsp .wres,.wsp .wgate__card,.wsp .wpanel,.wsp .wdoc,.wsp .wmsg--sz{
    background:var(--surface);
  }
}

.wsp .wrow{border-bottom-color:var(--hairline);}
.wsp .wdoc__confirm{border-top-color:var(--hairline);}

/* ---- controls ------------------------------------------------------------ */

/* One button treatment, used everywhere: lit from above, lifts to the
   pointer, and presses back down when it is actually clicked. A button that
   does not move on press is the commonest reason an interface feels flat. */
.wsp .wbtn{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 100%, #fff 14%), var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-md);
}
.wsp .wbtn:hover{
  transform:translateY(-1.5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-lg);
}
.wsp .wbtn:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.3);
}
.wsp .wbtn--ghost{
  background:
    linear-gradient(180deg, var(--surface-2, var(--surface)), var(--surface));
  color:var(--ink);
  box-shadow:var(--hl), var(--shadow-sm);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .wsp .wbtn{background:var(--ink);}
}
.wsp[data-theme="dark"] .wbtn{
  background:linear-gradient(180deg, #2E5A4C, #1F4238);
  color:#EAF1EC;
}

.wsp .wf input,
.wsp .wf select,
.wsp .wask textarea{
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0)), var(--surface);
  color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.wsp[data-theme="dark"] .wf input,
.wsp[data-theme="dark"] .wf select,
.wsp[data-theme="dark"] .wask textarea{
  background:linear-gradient(180deg, #08201D, #0B2521);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.wsp .wf input::placeholder,
.wsp .wask textarea::placeholder{color:var(--muted-2); opacity:.75;}

/* ---- the assistant dock -------------------------------------------------- */

.wsp .wfab{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 100%, #fff 16%), var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-lg);
}
.wsp[data-theme="dark"] .wfab{
  background:linear-gradient(180deg, #21554A, #143A33);
  color:#EAF1EC;
}
.wsp .wfab:active{transform:translateY(0); box-shadow:inset 0 2px 6px rgba(0,0,0,.34);}

/* ---- the loading layer --------------------------------------------------- */

.wsp .xload{background:transparent;}
.wsp .xframe{background:transparent;}

/* Dark reading surfaces that are not cards. */
.wsp[data-theme="dark"] .wblock,
.wsp[data-theme="dark"] .wflag{
  background:rgba(221,174,85,.10);
  border-color:rgba(221,174,85,.26);
  color:#EBD3A2;
}
.wsp[data-theme="dark"] .wlock__badge{
  background:rgba(221,174,85,.12);
  border-color:rgba(221,174,85,.3);
  color:#EBD3A2;
}
.wsp[data-theme="dark"] .werr{color:#F2877A;}
.wsp[data-theme="dark"] .wmsg--you{background:#2B5548; color:#EAF1EC;}

@media (prefers-reduced-motion:reduce){
  .wsp .wbtn:hover,.wsp .wfab:hover,.wrail__mark:hover{transform:none !important;}
}


/* ---- closing an account ---------------------------------------------------
   Set apart, at the bottom, behind its own rule. It is not styled red until
   it is armed: a permanently alarming panel is one a reader learns to ignore,
   and the thing that should alarm them is the confirmed step, not the heading.
   --------------------------------------------------------------------------- */

.wdanger{
  max-width:560px; margin:26px 0 0; padding:18px 18px 16px;
  border-radius:var(--r-lg); border:1px solid var(--hairline);
  background:var(--surface);
  box-shadow:var(--hl), var(--shadow-sm);
}
.wdanger h3{
  margin:0 0 6px; font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink);
}
.wdanger p{margin:0 0 10px; font-size:12.5px; line-height:1.6; color:var(--muted);}
.wdanger p b{color:var(--ink); font-weight:600;}
.wdanger .wnote{margin-top:-2px;}
.wdanger form{margin-top:14px;}
.wdanger .wf{margin-bottom:12px;}
.wdanger label b{font-weight:600; color:var(--ink);}
.wdanger__row{display:flex; flex-wrap:wrap; gap:9px;}
.wdanger__row .wbtn{width:auto; margin-top:0; flex:0 1 auto;}

/* Armed. Now it may shout.
   Prefixed with .wsp because the depth pass styles .wsp .wbtn, and a
   single-class modifier loses to it — which is why this arrived ink-green
   the first time. */
.wsp .wbtn--danger{
  background:linear-gradient(180deg,#B5453A,#9A2C2C); color:#FFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 2px 5px rgba(154,44,44,.32), 0 10px 22px -10px rgba(154,44,44,.6);
}
.wsp .wbtn--danger:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
             0 5px 12px rgba(154,44,44,.36), 0 16px 30px -12px rgba(154,44,44,.66);
}
/* Not yet armed: a way in, not a warning. */
.wsp .wbtn--danger-quiet{color:#9A2C2C; border-color:rgba(154,44,44,.34);}
.wsp .wbtn--danger-quiet:hover{border-color:rgba(154,44,44,.6);}

.wsp[data-theme="dark"] .wbtn--danger{
  background:linear-gradient(180deg,#C4564A,#8E2B27); color:#FFF3F1;
}
.wsp[data-theme="dark"] .wbtn--danger-quiet{
  color:#F2877A; border-color:rgba(242,135,122,.32);
}
.wsp[data-theme="dark"] .wbtn--danger-quiet:hover{border-color:rgba(242,135,122,.55);}


/* ---- the dashboard ---------------------------------------------------------
   A working surface, scanned rather than read: the summary first, one line a
   stream, with its state carried by a word in a pill and by a bar, never by
   colour alone. The entries below are the same document rows Saved uses, so
   a record looks like a record wherever it is listed.
   --------------------------------------------------------------------------- */

.wsp .sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.wsp__in--wide{max-width:1280px;}
/* Room under the last entry, so the docked Assistant button never sits over
   its Delete control with nowhere left to scroll. */
.wdash{padding-bottom:88px;}

.wdash__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:14px 0 16px;
}
.wdash__gap{flex:1 1 auto;}
.wdash__fy select,
.wdash__ent select,
.wdash__filter select{
  font:inherit; font-size:13.5px; font-weight:500; color:var(--ink);
  min-height:38px; padding:7px 34px 7px 12px; border-radius:var(--r-sm);
  border:1px solid var(--hairline); background-color:var(--surface);
  font-variant-numeric:tabular-nums; cursor:pointer;
}
.wdash__fy select:focus-visible,
.wdash__ent select:focus-visible,
.wdash__filter select:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}

/* Two sides of one account, as a switch rather than as two pages. */
.wseg{
  display:inline-flex; padding:3px; gap:2px; border-radius:10px;
  border:1px solid var(--hairline); background:var(--surface);
}
.wseg__b{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:13px; font-weight:500; color:var(--muted);
  min-height:32px; padding:5px 12px; border-radius:7px;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.wseg__b:hover{color:var(--ink);}
.wseg__b.is-on{background:var(--ink); color:var(--paper);}
.wseg__b:focus-visible{outline:2px solid var(--verified); outline-offset:1px;}

/* ---- the header ---- */

.wdash__title{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:14px 20px; margin:0 0 20px;
}
.wdash__title h2{margin-bottom:0;}
.wdash__title .sub{margin:8px 0 0;}
.wdash__title .wdash__bar{margin:0;}
.wdash__loading{margin:-10px 0 10px; font-size:12px; color:var(--muted-2);}

/* ---- the board ----
   Four columns. The hero takes two, beside two stat cards; the stream tiles
   take three beside the checklist; the chart three beside its sources; the
   ledger the full width. Measured against the references: 16px radius, a
   hairline edge and almost no shadow on white cards (Able Pro), all the
   colour mass spent on one hero (Berry, Datta, Gradient Able). */
.wboard{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; align-items:stretch;}
.whero{grid-column:span 2;}
/* Spans 4, not 3: the row it shares with .wbox--steps has to add up to the
   five columns above, or the tiles leave a column-wide hole beside them. */
.wbox--tiles,.wbox--pace,.wbox--split{grid-column:span 4;}
.wbox--steps,.wbox--src{grid-column:span 1;}
.wbox--ledger,.wbox--focus,.wbox--audit{grid-column:1 / -1;}
/* The evidence and filings panel spans the board: it holds a calendar, and in one column of five it ran
   218px wide and over a thousand tall (2 Oct 2026). */
.wbox--audit{margin-top:4px; padding:18px 20px;}

.wbox,.wstat{
  min-width:0; border-radius:16px; background:var(--surface); border:1px solid var(--hairline);
  box-shadow:0 1px 2px rgba(17,44,40,.04), 0 12px 28px -22px rgba(17,44,40,.35);
}
.wbox__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 12px;}
.wbox__head h3{margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink);}
.wbox__head p{margin:3px 0 0; font-size:12.5px; color:var(--muted-2); line-height:1.45;}
.wbox__empty{margin:0; padding:4px 20px 22px; font-size:13.5px; line-height:1.6; color:var(--muted);}
.wbox__note{margin:0; padding:0 20px 14px; font-size:12px; color:var(--muted-2);}
.wbox__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 20px; border-top:1px solid var(--hairline);}
.wbox__count{font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums;}

/* ---- the hero ---- */

.whero{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  /* 16px, matching every other card in the row. It was 18 and the hero
     alone carried a rounder corner, which is the kind of two-pixel
     difference nobody names but everybody sees as "not symmetrical". */
  border-radius:16px; color:#F2F5F1;
  background:linear-gradient(140deg, #25594E 0%, #16382F 46%, #0C231F 100%);
  box-shadow:0 18px 40px -24px rgba(12,35,31,.75), inset 0 1px 0 rgba(255,255,255,.08);
}
.whero__orb{position:absolute; border-radius:50%; pointer-events:none;}
.whero__orb--a{width:260px; height:260px; top:-120px; right:-70px;
  background:radial-gradient(circle at 30% 70%, rgba(255,255,255,.10), rgba(255,255,255,.02) 70%);}
.whero__orb--b{width:220px; height:220px; top:-40px; right:-150px;
  background:radial-gradient(circle at 20% 50%, rgba(233,199,125,.22), rgba(233,199,125,0) 70%);}
.whero__main{position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 24px 18px; flex:1 1 auto;}
.whero__copy{min-width:0;}
.whero__eyebrow{margin:0; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,245,241,.62);}
.whero__h{margin:10px 0 8px; font-size:clamp(21px,2.1vw,27px); font-weight:600; letter-spacing:-.02em; line-height:1.15; color:#fff;}
.whero__sub{margin:0; font-size:13px; line-height:1.55; color:rgba(242,245,241,.74); font-variant-numeric:tabular-nums;}
.whero__ring{position:relative; flex:0 0 auto; width:148px; height:148px;}
.whero__ringtxt{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.whero__ringtxt b{font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1; color:#fff;}
.whero__ringtxt b small{font-size:.5em; color:rgba(242,245,241,.62); font-weight:500;}
.whero__ringtxt span{margin-top:5px; font-size:11.5px; color:rgba(242,245,241,.66);}
.whero .wring__track{stroke:rgba(255,255,255,.12);}
.whero .wring__arc--ok{stroke:#6FE0B0;}
.whero .wring__arc--gold{stroke:#E9C77D;}
.whero .wring__arc--risk{stroke:#F2877A;}
.whero__strip{
  position:relative; margin:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  background:rgba(0,0,0,.20); border-top:1px solid rgba(255,255,255,.08);
}
.whero__fact{padding:12px 16px 13px 24px; min-width:0;}
.whero__fact + .whero__fact{border-left:1px solid rgba(255,255,255,.07); padding-left:16px;}
.whero__fact dt{display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(242,245,241,.62);}
.whero__fact dd{margin:4px 0 0; font-size:15px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap;}
.whero__meter{display:block; margin-top:6px; height:4px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; max-width:110px;}
.whero__meter > span{display:block; height:100%; border-radius:2px; background:#E9C77D;}
.whero .wdot--none{border-color:rgba(242,245,241,.6);}

/* ---- rings, dots, bars ---- */

.wring{display:block; width:100%; height:100%;}
.wring__track{stroke:var(--hairline);}
.wring__arc{transition:stroke-dasharray .6s var(--ease);}
.wring__arc--ok{stroke:var(--verified);}
.wring__arc--gold{stroke:var(--gold);}
.wring__arc--risk{stroke:#B23A32;}

.wdot{display:inline-grid; place-items:center; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--muted-2); font-style:normal;}
.wdot--ok{background:var(--verified);}
.wdot--gold{background:var(--gold);}
.wdot--risk{background:#B23A32;}
.wdot--none{background:transparent; border:1.5px solid var(--muted-2);}

.wbars{display:block; width:132px; height:44px; flex:0 0 auto;}
.wbars__b{fill:var(--verified); opacity:.45;}
.wbars--gold .wbars__b{fill:var(--gold);}
.wbars__b.is-now{opacity:1;}
.wbars__b.is-future{opacity:.14;}

.wbar{display:block; width:100%; height:8px; border-radius:4px; background:var(--hairline); overflow:hidden;}
.wbar--thin{height:4px; margin-top:7px;}
.wbar__fill{display:block; height:100%; border-radius:inherit; background:var(--gold); transition:width .5s var(--ease);}
.wbar__fill.is-full{background:var(--verified);}

/* ---- the stat cards ---- */

.wstat{--tone:var(--verified); --tone-soft:var(--verified-soft); display:flex; flex-direction:column; padding:18px 18px 0; overflow:hidden;}
.wstat--gold{--tone:var(--gold); --tone-soft:var(--gold-soft);}
.wstat--risk{--tone:#B23A32; --tone-soft:rgba(178,58,50,.08);}
.wstat__head{display:flex; align-items:center; gap:12px;}
.wstat__head h3{margin:0; font-size:14.5px; font-weight:600; color:var(--ink);}
.wstat__ico{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--tone); background:var(--tone-soft);}
.wstat__ico .wi{width:20px; height:20px;}
/* A WELL, not a patch. Now that the card around it is green, a flat fill of
   --paper reads as a hole punched in the card rather than a surface cut into
   it. --wel-in is the theme's pressed shadow and it is what the rest of the
   workspace uses for recessed things: light off the top edge, shadow inside.
   Raised cards, recessed wells - that pairing is what makes the board read
   as having depth at all, rather than as flat shapes of different colours. */
.wstat__panel{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:14px 0 18px; padding:16px; border-radius:12px; background:var(--paper);
  box-shadow:var(--wel-in);
}
.wsp[data-theme="dark"] .wstat__panel{
  /* leans green with the card instead of going neutral-black against it */
  background:linear-gradient(168deg, rgba(10,26,22,.92), rgba(8,18,16,.96));
}
.wstat__fig{margin-left:auto; text-align:right;}
.wstat__value{margin:0; font-size:clamp(24px,2vw,30px); font-weight:600; letter-spacing:-.02em; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums;}
.wstat__value small{font-size:.5em; font-weight:500; color:var(--muted-2); letter-spacing:0;}
.wstat--risk .wstat__value{color:#9A2C2C;}
.wstat__foot{display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px 8px; margin-top:8px;}
.wstat__note{font-size:12px; color:var(--muted-2);}
.wstat__band{margin:auto -18px 0; padding:11px 18px; font-size:12.5px; line-height:1.45; color:var(--tone); background:var(--tone-soft);}
.wstat__band .wlink{color:inherit; font-weight:600;}

.wdelta{display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px;
  font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;}
.wdelta--up{color:var(--verified); background:var(--verified-soft);}
.wdelta--down{color:#9A2C2C; background:rgba(154,44,44,.09);}
.wdelta--flat{color:var(--gold); background:var(--gold-soft);}

/* ---- stream tiles ---- */

.wtiles{display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0,1fr)); gap:12px; padding:0 20px 20px;}
@media (max-width:900px){ .wtiles{grid-template-columns:repeat(auto-fill, minmax(230px,1fr));} }
.wtile{
  display:flex; flex-direction:column; gap:12px; text-align:left; cursor:pointer;
  appearance:none; font:inherit; color:inherit; padding:14px 14px 13px; border-radius:14px;
  background:var(--surface); border:1px solid var(--hairline);
  transition:border-color .16s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.wtile:hover{border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline)); transform:translateY(-1px);
  box-shadow:0 10px 22px -16px rgba(17,44,40,.4);}
.wtile:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wtile.is-on{border-color:var(--verified); box-shadow:0 0 0 1px var(--verified), 0 10px 22px -16px rgba(17,44,40,.4);}
.wtile.is-empty{background:transparent; border-style:dashed;}
.wtile__head{display:flex; align-items:center; gap:9px; min-width:0;}
.wtile__name{flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wtile__body{display:flex; align-items:center; gap:14px;}
.wtile__ring{position:relative; flex:0 0 auto; width:76px; height:76px;}
/* Flex, not grid: as a grid the figure and its % sign became two stacked
   cells. */
.wtile__pct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.wtile__pct small{font-size:.62em; color:var(--muted-2);}
.wtile__stats{flex:1 1 auto; display:grid; gap:5px; min-width:0;}
.wtile__stat{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted);}
.wtile__stat b{font-size:13.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.wtile__stat b.is-risk{color:#9A2C2C;}
.wtile__extra{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding-top:10px; border-top:1px dashed var(--hairline);}
.wtile__subs{flex:1 1 100%; display:flex; align-items:center; gap:8px; min-width:0; font-size:12px; color:var(--muted);}
.wtile__subk{flex:0 0 auto; font-weight:600; color:var(--ink);}
.wtile__subv{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wtile__subshort{flex:0 0 auto; font-weight:600; color:#9A2C2C;}
.wtile__subs .wi{flex:0 0 auto; color:var(--muted-2); transition:transform .16s var(--ease);}
.wtile:hover .wtile__subs .wi{transform:translateX(2px); color:var(--verified);}
.wtile__ec{display:inline-flex; align-items:center; gap:4px; margin:0; font-size:12px; font-weight:600; color:#9A2C2C;}
.wtile__val{display:inline-flex; align-items:center; gap:4px; margin:0; font-size:12px; font-weight:600; color:var(--verified); font-variant-numeric:tabular-nums;}

/* ---- next steps ---- */

.wsteps__prog{margin:0 20px 6px; padding:12px 14px; border-radius:12px; background:var(--paper);}
.wsteps__prog div{display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:12.5px; color:var(--muted);}
.wsteps__prog b{color:var(--ink); font-variant-numeric:tabular-nums;}
.wsteps{list-style:none; margin:0; padding:4px 0 10px;}
.wstep{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 20px;}
.wstep + .wstep{border-top:1px solid var(--hairline);}
.wstep .wdot{width:10px; height:10px;}
.wstep--done .wdot{width:18px; height:18px; color:#fff;}
.wi--dot{width:12px; height:12px; stroke-width:2.6;}
.wstep__txt p{margin:0; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35;}
.wstep__txt span{display:block; margin-top:2px; font-size:12px; color:var(--muted-2); line-height:1.4;}
.wstep__txt .is-risk{color:#9A2C2C; font-weight:600;}
.wstep--done .wstep__txt p{color:var(--muted); font-weight:500;}

/* ---- through the year ---- */

.wpace__top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:0 20px 4px;}
.wpace__big{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  font-size:28px; font-weight:600; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;}
.wpace__big small{font-size:.5em; color:var(--muted-2); font-weight:500; letter-spacing:0;}
.wpace__of{font-size:13.5px; font-weight:500; color:var(--muted); letter-spacing:0;}
.wpicks{display:flex; flex-wrap:wrap; gap:6px;}
.wpicks__b{
  display:inline-flex; align-items:center; gap:7px; appearance:none; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:500; color:var(--muted);
  padding:4px 11px 4px 4px; border-radius:999px; border:1px solid var(--hairline); background:var(--surface);
}
.wpicks__b .wmark{width:22px; height:22px; border-radius:50%; font-size:9px;}
.wpicks__b:hover{color:var(--ink); border-color:color-mix(in srgb, var(--verified) 40%, var(--hairline));}
.wpicks__b.is-on{color:var(--paper); background:var(--ink); border-color:var(--ink);}
.wpicks__b:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wch__wrap{padding:4px 12px 0;}
.wch{display:block; width:100%; height:auto; overflow:visible;}
.wch__grid{stroke:var(--hairline); stroke-width:1; stroke-dasharray:3 4;}
.wch__tick{fill:var(--muted-2); font-size:11px; font-family:inherit; font-variant-numeric:tabular-nums;}
.wch__stop1{stop-color:var(--verified); stop-opacity:.30;}
.wch__stop2{stop-color:var(--verified); stop-opacity:0;}
.wch__zone{fill:var(--verified); opacity:.035;}
.wch__line{fill:none; stroke:var(--verified); stroke-width:2.8; stroke-linecap:round;}
.wch__line--out{stroke:var(--gold); stroke-width:2.4;}
.wch__halo{fill:var(--verified); opacity:.16;}
.wch__dot{fill:var(--surface); stroke:var(--verified); stroke-width:2.6;}
.wch__target{stroke:var(--gold); stroke-width:1.6; stroke-dasharray:6 5;}
.wch__tagbg{fill:var(--gold-soft); stroke:color-mix(in srgb, var(--gold) 40%, transparent);}
.wch__tlabel{fill:var(--gold); font-size:11px; font-weight:600; font-family:inherit;}
.wch__now{stroke:var(--muted-2); stroke-width:1; stroke-dasharray:2 4; opacity:.7;}
.wch__legend{list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; margin:6px 0 16px; padding:0 20px; font-size:12px; color:var(--muted);}
.wch__legend li{display:inline-flex; align-items:center; gap:7px;}
.wch__late{color:var(--muted-2);}
.wkey{display:inline-block; width:18px; height:0; border-top:2.8px solid var(--verified); border-radius:2px;}
.wkey--target{border-top:2px dashed var(--gold);}
.wkey--out{border-top-color:var(--gold);}
.wkey--now{border-top:1.5px dotted var(--muted-2);}

/* ---- certificate sources ---- */

.wsrcs{list-style:none; margin:0; padding:0 0 10px;}
.wsrc{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 20px;}
.wsrc + .wsrc{border-top:1px solid var(--hairline);}
.wsrc__av{display:grid; place-items:center; width:36px; height:36px; border-radius:11px; font-size:12px; font-weight:700;
  --m:#23877A; color:var(--m); background:color-mix(in srgb, var(--m) 14%, transparent);}
.wsrc__av--1{--m:#2F6DB0;} .wsrc__av--2{--m:#B7791F;} .wsrc__av--3{--m:#7157C4;} .wsrc__av--4{--m:#B4483C;}
.wsrc__main{min-width:0;}
.wsrc__main p{margin:0; font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wsrc__main > span{display:block; margin-top:1px; font-size:11.5px; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wsrc__kg{font-size:13.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.wsrc--tail{grid-template-columns:minmax(0,1fr) auto; font-size:12.5px; color:var(--muted);}
.wsrc--tail b{font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums;}

/* ---- one stream, opened ---- */

.wfocus__bar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px 0;}
.wfocus{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; padding:12px 20px 18px;}
.wfocus__id{display:flex; align-items:center; gap:12px; min-width:0;}
.wfocus__id .wmark{width:44px; height:44px; border-radius:13px; font-size:13px;}
.wfocus__name{min-width:0;}
.wfocus__name h3{margin:0; font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--ink); outline:none;}
.wfocus__name p{margin:2px 0 0; font-size:12.5px; color:var(--muted-2);}
.wfocus__body{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.wfocus__figs{display:grid; grid-template-columns:repeat(4, auto); gap:6px 30px; margin:0;}
.wfocus__figs dt{font-size:12px; color:var(--muted-2);}
.wfocus__figs dd{margin:3px 0 0; font-size:17px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.wfocus__figs dd.is-risk{color:#9A2C2C;}
@media (max-width:760px){ .wfocus__figs{grid-template-columns:repeat(2, auto);} }

/* A share of a whole, drawn as one bar per figure; the table under it is the key. */
.wdist{display:grid; gap:9px; padding:0 20px 14px;}
.wdist__row{display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:12px;}
.wdist__k{font-size:12px; color:var(--muted);}
.wdist__bar{display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--hairline);}
.wdist__s{display:block; height:100%; border-radius:0; box-shadow:inset -2px 0 0 var(--surface);}
.wdist__s:last-child{box-shadow:none;}

.wsw{--sw:#2F6DB0; display:inline-block; flex:0 0 auto; width:10px; height:10px; border-radius:3px; background:var(--sw);}
.wsw--0{--sw:#1E9A6B;} .wsw--1{--sw:#2B7BE4;} .wsw--2{--sw:#E0A030;}
.wsw--3{--sw:#7B5CF0;} .wsw--4{--sw:#D9573F;} .wsw--5{--sw:#34A6C2;}
.wsw--6{--sw:#B8702F;} .wsw--7{--sw:#74A838;} .wsw--8{--sw:#E0608F;} .wsw--9{--sw:#6278C8;}
.wsw--none{--sw:transparent; box-shadow:inset 0 0 0 1.5px var(--muted-2);}
.wdist__s.wsw--none{background:repeating-linear-gradient(135deg, var(--muted-2) 0 2px, transparent 2px 5px); opacity:.5;}
.wsw--Au{--sw:#E6B01E;} .wsw--Cu{--sw:#D2692F;} .wsw--Al{--sw:#7FA6C6;} .wsw--Fe{--sw:#5D6E7B;}

.wsplit__wrap{overflow-x:auto; padding:0 8px 10px;}
.wsplit{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums;}
.wsplit th,.wsplit td{padding:10px 12px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--hairline); white-space:nowrap;}
.wsplit thead th{padding-top:6px; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--muted-2);}
.wsplit tbody tr:last-child > *{border-bottom:0;}
.wsplit tbody th{font-weight:600; color:var(--ink);}
.wsplit td{color:var(--ink);}
.wsplit .is-num{text-align:right;}
.wsplit td.is-risk{color:#9A2C2C; font-weight:600;}
.wsplit tr.is-quiet th,.wsplit tr.is-quiet td{color:var(--muted-2); font-weight:500;}
.wsplit__name{display:inline-flex; align-items:center; gap:9px;}
.wsplit__group th{padding:14px 12px 6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.wsplit__dash{color:var(--muted-2);}
.wsplit__sub{display:block; font-size:11px; font-weight:500; color:var(--muted-2);}

/* ---- processing, against the plant ---- */
.wproc{list-style:none; margin:0; padding:2px 20px 6px; display:grid; gap:12px;}
.wproc__row{display:grid; grid-template-columns:150px minmax(0,1fr) 92px; align-items:center; gap:14px;}
.wproc__k{font-size:12.5px; color:var(--muted);}
.wproc__bar{position:relative; height:12px; border-radius:6px; background:var(--hairline);}
.wproc__fill{display:block; height:100%; border-radius:inherit; background:var(--verified); opacity:.75;}
.wproc__row:last-child .wproc__fill{background:var(--gold); opacity:1;}
.wproc__cap{position:absolute; top:-5px; bottom:-5px; width:0; border-left:2px dashed #9A2C2C;}
.wproc__v{font-size:13px; font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.wproc__note{margin:10px 20px 0; font-size:12.5px; color:var(--muted);}
.wproc__note.is-risk{color:#9A2C2C; font-weight:600;}
.wproc__ret{display:flex; align-items:center; gap:6px; margin:10px 20px 18px; padding:10px 12px; border-radius:10px;
  background:var(--paper); font-size:12.5px; font-weight:600; color:var(--ink);}
.wproc__ret span{font-weight:500; color:var(--muted-2);}
@media (max-width:640px){ .wproc__row{grid-template-columns:minmax(0,1fr) auto;} .wproc__bar{grid-column:1 / -1; order:3;} }

/* ---- settings: installed capacity ---- */
.wcap{margin:0 0 20px; border:1px dashed var(--hairline); border-radius:var(--r-sm); padding:10px 14px;}
.wcap summary{cursor:pointer; font-size:14px; font-weight:600; color:var(--ink);}
.wcap__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-top:12px;}
.wcap__f{display:grid; gap:4px; font-size:12.5px; color:var(--muted);}
.wcap__in{display:flex; align-items:center; gap:8px;}
.wcap__in input{width:100%; min-height:40px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline);
  background:var(--surface); color:var(--ink); font:inherit; font-variant-numeric:tabular-nums;}
.wcap__in i{flex:0 0 auto; font-style:normal; font-size:11.5px; color:var(--muted-2);}
.wsplit__act{width:1%; padding-top:4px !important; padding-bottom:4px !important;}
.wsplit__act .wicon{width:32px; height:32px;}

/* ---- stream marks, pills, tags ---- */

.wmark{
  --m:#5B6B66;
  display:inline-grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; color:var(--m);
  background:color-mix(in srgb, var(--m) 14%, transparent);
}
.wmark--plastic{--m:#2F6DB0;}
.wmark--ewaste{--m:#7157C4;}
.wmark--battery{--m:#B7791F;}
.wmark--tyre{--m:#4E5B68;}
.wmark--usedoil{--m:#8C5A2E;}
.wmark--elv{--m:#B4483C;}
.wmark--nonferrous{--m:#23877A;}
.wpicks__b.is-on .wmark{color:#fff; background:rgba(255,255,255,.16);}

.wpill{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:3px 9px; border-radius:999px; white-space:nowrap;
  font-size:11.5px; font-weight:600; line-height:1.3; border:1px solid transparent;}
.wpill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.wpill--ok{color:var(--verified); background:var(--verified-soft);}
.wpill--risk{color:#9A2C2C; background:rgba(154,44,44,.08); border-color:rgba(154,44,44,.18);}
.wpill--none{color:var(--muted-2); border-color:var(--hairline); border-style:dashed;}
.wpill--warn{color:#8A6212; background:var(--gold-soft); border-color:color-mix(in srgb, var(--gold) 30%, transparent);}
.wpill--none::before{background:transparent; border:1.5px solid currentColor; width:5px; height:5px;}
.wtag{display:inline-flex; padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  color:var(--verified); background:var(--verified-soft);}
.wtag--warn{color:#8A6212; background:var(--gold-soft);}
.wtag--risk{color:#9A2C2C; background:rgba(154,44,44,.08);}

/* ---- the ledger ---- */

.wchip{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; appearance:none; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:500; padding:5px 8px 5px 11px; border-radius:999px;
  color:var(--verified); background:var(--verified-soft); border:1px solid transparent;}
.wchip:hover{border-color:var(--verified);}
.wchip:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wtabs{display:flex; gap:4px; padding:0 16px; border-bottom:1px solid var(--hairline); overflow-x:auto;}
.wtabs__b{position:relative; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; appearance:none;
  background:none; border:0; cursor:pointer; font:inherit; font-size:13px; font-weight:500; color:var(--muted);
  min-height:42px; padding:8px 8px 11px;}
.wtabs__b:hover,.wtabs__b.is-on{color:var(--ink);}
.wtabs__b.is-on::after{content:""; position:absolute; left:6px; right:6px; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--verified);}
.wtabs__b:focus-visible{outline:2px solid var(--verified); outline-offset:-2px; border-radius:6px;}
.wtabs__n{min-width:20px; padding:1px 6px; border-radius:999px; text-align:center; font-size:11px; font-weight:600;
  color:var(--muted-2); background:var(--hairline); font-variant-numeric:tabular-nums;}
.wtabs__b.is-on .wtabs__n{color:var(--verified); background:var(--verified-soft);}
.wleds{list-style:none; margin:0; padding:0;}
.wled{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:4px 14px; padding:12px 20px; border-bottom:1px solid var(--hairline);}
.wled:last-child{border-bottom:0;}
.wled:hover{background:color-mix(in srgb, var(--ink) 2.5%, transparent);}
.wled .wmark{width:38px; height:38px; border-radius:12px; font-size:11.5px;}
.wled__main{min-width:0;}
.wled__t{margin:0; font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.wled__m{margin:2px 0 0; font-size:12.5px; color:var(--muted); overflow-wrap:anywhere;}
.wled__ref{margin-left:4px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; color:var(--muted-2);}
.wled__n{margin:3px 0 0; font-size:12px; color:var(--muted-2);}
.wled__fig{text-align:right; white-space:nowrap;}
.wled__fig b{display:block; font-size:14.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.wled__fig b.is-in{color:var(--verified);}
.wled__fig b.is-out{color:var(--muted);}
.wled__fig span{display:block; margin-top:2px; font-size:11.5px; color:var(--muted-2);}
.wled__act{display:flex; gap:2px;}
.wled__confirm{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:8px;
  padding:9px 12px; border-radius:10px; background:rgba(154,44,44,.06); font-size:12.5px; color:var(--ink);}
.wled__confirm span{margin-right:auto;}

.wicon{display:inline-grid; place-items:center; width:36px; height:36px; appearance:none; background:transparent;
  border:1px solid transparent; border-radius:10px; color:var(--muted-2); cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease);}
.wicon:hover{color:var(--ink); background:var(--hairline);}
.wicon--danger:hover{color:#9A2C2C; background:rgba(154,44,44,.08);}
.wicon:focus-visible{outline:2px solid var(--verified); outline-offset:1px;}
.wicon--box{width:38px; height:38px; border-color:var(--hairline); background:var(--surface); color:var(--muted);}
.wi{width:18px; height:18px; display:block; flex:0 0 auto;}
.wi--sm{width:14px; height:14px;}
.wi--xs{width:12px; height:12px;}
.wbtn .wi{width:16px; height:16px;}
.wbtn--xs{width:auto; min-height:32px; padding:5px 11px; margin-top:0; gap:6px; font-size:12.5px; border-radius:9px;}
.wbtn--xs .wi{width:14px; height:14px;}

@media (max-width:1180px){
  .wboard{grid-template-columns:repeat(2, minmax(0,1fr));}
  .whero,.wbox--tiles,.wbox--pace,.wbox--steps,.wbox--src,.wbox--split{grid-column:1 / -1;}
}
@media (max-width:640px){
  .wboard{grid-template-columns:minmax(0,1fr);}
  .wstat,.wtgt{grid-column:1 / -1;}
  .whero__main{flex-direction:column; align-items:flex-start;}
  .whero__strip{grid-template-columns:repeat(2, minmax(0,1fr));}
  .whero__fact:nth-child(3){border-left:0; padding-left:24px;}
  .wled{grid-template-columns:auto minmax(0,1fr) auto;}
  .wled__act{grid-column:2 / -1; justify-content:flex-end;}
}

.wsp[data-theme="dark"] .whero{background:linear-gradient(140deg, #2A5346 0%, #1C3A31 58%, #16302A 100%);}
/* The dark box-shadow override that used to live here is GONE, and its
   absence is the fix rather than an omission.

   It read .wsp[data-theme="dark"] .wbox - specificity (0,3,0) - while the
   elevation system that gives every raised surface its shadow is written as
   .wsp .wbox, which is (0,2,0). The attribute selector won, so --wel-1 never
   applied to a .wbox or a .wstat in dark mode, and with it went var(--hl):
   the inset top highlight that is the whole reason a card reads as lit from
   above. .wtgt and .whero are not named in that selector, which is exactly
   why those two looked raised while every stat and box beside them looked
   like a flat rectangle. It was a leftover from before the --wel tokens
   existed, and the dark theme already redefines --hl and --wel-1 on its own
   (see the token block), so deleting it is all that was needed. */
.wsp[data-theme="dark"] .wstat--risk{--tone:#F2877A; --tone-soft:rgba(242,135,122,.10);}
.wsp[data-theme="dark"] .wstat--risk .wstat__value,
.wsp[data-theme="dark"] .wtile__stat b.is-risk,
.wsp[data-theme="dark"] .wtile__ec,
.wsp[data-theme="dark"] .wstep__txt .is-risk,
.wsp[data-theme="dark"] .wpill--risk{color:#F2877A;}
.wsp[data-theme="dark"] .wpill--risk{background:rgba(242,135,122,.1); border-color:rgba(242,135,122,.24);}
.wsp[data-theme="dark"] .wring__arc--risk,.wsp[data-theme="dark"] .wdot--risk{stroke:#F2877A; background:#F2877A;}
.wsp[data-theme="dark"] .wdelta--down{color:#F2877A; background:rgba(242,135,122,.1);}
.wsp[data-theme="dark"] .wmark,
.wsp[data-theme="dark"] .wsrc__av{color:color-mix(in srgb, var(--m) 55%, #fff); background:color-mix(in srgb, var(--m) 24%, transparent);}
.wsp[data-theme="dark"] .wled__confirm{background:rgba(242,135,122,.08);}
.wsp[data-theme="dark"] .wicon--danger:hover{color:#F2877A; background:rgba(242,135,122,.1);}
.wsp[data-theme="dark"] .wpicks__b.is-on{background:#2B5548; border-color:#2B5548; color:#EAF1EC;}
.wsp[data-theme="dark"] .wfocus__figs dd.is-risk,
.wsp[data-theme="dark"] .wsplit td.is-risk,
.wsp[data-theme="dark"] .wtile__subshort,
.wsp[data-theme="dark"] .wproc__note.is-risk,
.wsp[data-theme="dark"] .wtag--risk{color:#F2877A;}
.wsp[data-theme="dark"] .wpill--warn,.wsp[data-theme="dark"] .wtag--warn{color:#E9C77D;}
.wsp[data-theme="dark"] .wproc__cap{border-left-color:#F2877A;}
.wsp[data-theme="dark"] .wsw--Fe{--sw:#8A98A1;}

@media (prefers-reduced-motion:reduce){
  .wbar__fill,.wring__arc,.wtile{transition:none;}
  .wtile:hover{transform:none;}
}

/* ---- setup ---- */

.wsetup{max-width:760px;}
.wchecks{border:0; padding:0; margin:0 0 20px; min-width:0;}
.wchecks legend{padding:0; margin:0 0 10px; font-size:14.5px; font-weight:600; color:var(--ink);}
.wchecks--grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px;}
.wchecks--grid legend{grid-column:1 / -1;}
.wchecks--grid .whint{grid-column:1 / -1;}
.wcheck{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  min-height:44px; padding:8px 12px; border-radius:var(--r-sm);
  border:1px solid var(--hairline); background:var(--surface);
  font-size:14px; color:var(--ink);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.wcheck:hover{border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline));}
.wcheck input{width:18px; height:18px; flex:0 0 auto; accent-color:var(--verified); margin:0;}
.wcheck:has(input:checked){border-color:var(--verified); background:var(--verified-soft);}
.wcheck--card{align-items:flex-start; padding:12px 14px; margin-bottom:8px;}
.wcheck--card input{margin-top:2px;}
.wcheck b{display:block; font-weight:600;}
.wcheck__d{display:block; margin-top:2px; font-size:12.5px; color:var(--muted); line-height:1.45;}

.whint{margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--muted-2);}
.whint--worth b{color:var(--ink); font-variant-numeric:tabular-nums;}
.wopt{font-weight:400; color:var(--muted-2);}

/* A rate box: the rupee sign and the unit sit inside the field, so the only
   thing the reader has to get right is the number. */
.wprice{position:relative; display:flex; align-items:center;}
.wprice__cur{position:absolute; left:11px; font-size:13px; color:var(--muted-2); pointer-events:none;}
.wprice__unit{position:absolute; right:11px; font-size:11.5px; color:var(--muted-2); pointer-events:none;}
.wprice input{width:100%; padding-left:24px; padding-right:56px; font-variant-numeric:tabular-nums;}

/* ---- windows over the dashboard ----
   The entry, the target, the price and the whole position open as one kind
   of window: centred, with the board still there behind a scrim. It
   replaced a tall panel down the right-hand side, where every field was a
   row of its own and the lower half of the form sat below the fold. A
   window is laid out ACROSS instead, and sized so that a whole entry -
   header, every field, every hint, the error line and the buttons - is on
   screen at once on a laptop, with nothing to scroll and nothing running
   off its edge. The header and the footer sit outside the part that could
   scroll, so they are always in view. */
.wdrawer{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px;}
.wdrawer__scrim{
  position:absolute; inset:0; width:100%; border:0; padding:0; cursor:default;
  background:rgba(4,17,15,.42);
  animation:wdFade .2s var(--ease) both;
}
.wdrawer__panel{
  position:relative; z-index:1; display:flex; flex-direction:column; min-height:0;
  width:min(1100px, calc(100vw - 48px));
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  margin:0; padding:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--hairline); border-radius:16px;
  box-shadow:var(--shadow-xl);
  animation:wdIn .22s var(--ease) both;
}
.wdrawer__head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none;
  margin:0; padding:13px 16px 12px 20px; border-bottom:1px solid var(--hairline);}
.wwin__ttl{min-width:0;}
.wsp .wwin__title{margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--ink);}
.wdrawer__x{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  appearance:none; border:1px solid var(--hairline); background:transparent; color:var(--muted);
  width:40px; height:40px; padding:0; border-radius:var(--r-sm); cursor:pointer;
}
.wdrawer__x .wi{width:18px; height:18px;}
.wdrawer__x:hover{color:var(--ink); background:var(--hairline);}
.wdrawer__x:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wwin__body{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px 20px;
  overscroll-behavior:contain;}
.wdrawer__foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; flex:none;
  margin:0; padding:11px 20px; border-top:1px solid var(--hairline);
  background:var(--surface-2, var(--surface)); border-radius:0 0 16px 16px;}
.wwin__foot .werr{flex:1 1 280px; min-width:0; margin:0; font-size:12.5px; line-height:1.4;}
.wwin__acts{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto;}
@keyframes wdIn{from{transform:translateY(10px) scale(.985); opacity:0;} to{transform:none; opacity:1;}}
@keyframes wdFade{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .wdrawer__panel,.wdrawer__scrim{animation:none;}
}

/* The fields, four across on a laptop, three, two, then one. */
.wdrawer .wwin__grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px 14px;
  margin:0; align-items:start;}
.wwin__f{min-width:0;}
/* The last field takes what is left of its row (see wlast()). */
.wwin__f--rest{grid-column:span var(--s4, 4);}
.wwin__f--w2{grid-column:span 2;}
.wdrawer .wwin__f label,
.wdrawer .wwin__k{display:block; margin:0 0 4px; font-size:12px; font-weight:500; line-height:16px;
  color:var(--muted-2);}
.wsp .wwin .wwin__f > input,
.wsp .wwin .wwin__f > select,
.wsp .wwin .wwin__pair select,
.wsp .wwin .wprice input{min-height:40px; padding:8px 10px; font-size:14px; border-radius:var(--r-sm);}
.wsp .wwin .wprice input{padding-left:24px; padding-right:56px;}
.wdrawer .wwin__f .whint{margin:4px 0 0; font-size:11.5px; line-height:1.35;}
.wwin__static{display:flex; align-items:center; min-height:40px; margin:0; font-size:13px; color:var(--muted);}
.wwin__pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px;}
/* The split, as a small inline control under the sub-type box. */
.wdrawer .wwin__f .wwin__check{display:flex; align-items:center; gap:7px; width:max-content; max-width:100%;
  margin:6px 0 0; font-size:12px; font-weight:500; line-height:1.3; color:var(--muted); cursor:pointer;}
.wsp .wwin .wf .wwin__check input{flex:none; width:16px; height:16px; min-height:0; margin:0; padding:0;
  border-radius:4px; box-shadow:none; accent-color:var(--verified); cursor:pointer;}
.wdrawer .wwin__f .wwin__check:hover{color:var(--ink);}
/* The split itself: straight under the row that asks for it, the width of
   the window, one sub-type to a column. On a laptop every stream's split
   fits in one row; where it would not, only this box scrolls. */
.wwin__splitbox{grid-column:1 / -1; min-width:0; max-height:max(128px, calc(100vh - 600px));
  overflow-y:auto; padding:10px 12px 12px; border-radius:12px;
  background:var(--surface-2, var(--paper)); border:1px solid var(--hairline);}
.wdrawer .wwin__splitbox .whint{margin:0 0 8px;}
.wdrawer .wwin__splitbox .wsplitin{grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); gap:8px;}
.wdrawer .wwin__splitbox .wsplitin__f{display:grid; gap:3px; margin:0; font-size:11.5px; color:var(--muted);}
.wdrawer .wwin__splitbox .wsplitin__in input{min-height:34px; padding:5px 8px; font-size:13px;}
.wdrawer .wwin__splitbox .wsplitin__in--price input{min-height:30px; padding:4px 6px; font-size:12px;}
/* Add a price: what the figure is, read-only, then the rate. */
.wwin--price .wdrawer__panel{width:min(820px, calc(100vw - 48px));}
.wdrawer .wwin__ro{margin:0 0 14px;}
.wdrawer .wwin__ro dt{margin:0 0 4px; font-size:12px; font-weight:500; line-height:16px; color:var(--muted-2);}
.wdrawer .wwin__ro dd{display:flex; align-items:center; min-height:40px; margin:0; padding:6px 12px;
  border-radius:var(--r-sm); border:1px dashed var(--hairline); background:var(--surface-2, var(--paper));
  font-size:14px; line-height:1.3; color:var(--ink); overflow-wrap:anywhere;}
.wdrawer .wwin__ro dd b{font-weight:600; font-variant-numeric:tabular-nums;}
.wwin__note{margin:20px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted);}
/* The whole position: wider, and on the paper ground so its cards read. */
.wwin--pos .wdrawer__panel{width:min(1120px, calc(100vw - 48px));}
.wwin--pos .wwin__body{padding:16px 18px 20px; background:var(--paper);}

/* While a window is open the page behind it holds still, and keeps its
   gutter so nothing shifts sideways. */
.wsp.has-win .wsp__body{overflow:hidden; scrollbar-gutter:stable;}

.wsp[data-theme="dark"] .wpill--risk{color:#F2877A;}
.wsp[data-theme="dark"] .wpill--risk{background:rgba(242,135,122,.1); border-color:rgba(242,135,122,.24);}
.wsp[data-theme="dark"] .wdrawer__scrim{background:rgba(0,0,0,.56);}
.wsp[data-theme="dark"] .wseg__b.is-on{background:#2B5548; color:#EAF1EC;}

@media (max-width:1099px){
  .wdrawer .wwin__grid{grid-template-columns:repeat(3, minmax(0,1fr));}
  .wwin__f--rest{grid-column:span var(--s3, 3);}
}
@media (max-width:859px){
  .wdrawer .wwin__grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .wwin__f--rest{grid-column:span var(--s2, 2);}
}
/* A phone: the window becomes the whole screen, and may scroll. */
@media (max-width:720px){
  .wdash__gap{display:none;}
  .wdrawer.wwin{padding:0; place-items:stretch;}
  .wwin .wdrawer__panel,
  .wwin--pos .wdrawer__panel,
  .wwin--price .wdrawer__panel{width:100%; height:100%; max-height:none; border:0; border-radius:0;}
  .wwin .wdrawer__foot{border-radius:0; padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px));}
  .wwin__splitbox{max-height:none;}
}
@media (max-width:599px){
  .wdrawer .wwin__grid{grid-template-columns:minmax(0,1fr);}
  .wwin__f--rest,.wwin__f--w2{grid-column:auto;}
}


/* ==========================================================================
   TWO MEASUREMENTS - certificates and waste
   Every ring is split by what it is made of; statistics sit under the board.
   ========================================================================== */

/* Colour by stream, the same hues the stream marks wear. */
.wmk{--sw:#5B6B66;}
/* Richer than they were (the owner found the rings pale): the same hues,
   more saturated, so the gloss in ring() has colour to work on. */
.wmk--plastic{--sw:#2B7BE4;} .wmk--ewaste{--sw:#7B5CF0;} .wmk--battery{--sw:#E0962A;} .wmk--tyre{--sw:#5A6E84;}
.wmk--usedoil{--sw:#B8702F;} .wmk--elv{--sw:#D9573F;} .wmk--nonferrous{--sw:#1AA58E;} .wmk--cnd{--sw:#9C8363;}
.wmark--cnd{--m:#7A6A55;}
.wring__arc.wsw,.wring__arc.wmk{stroke:var(--sw); background:none; width:auto; height:auto; box-shadow:none;}
.wring__arc.wsw--none{stroke:var(--muted-2); opacity:.45;}
.whero .wring__arc.wmk{stroke:color-mix(in srgb, var(--sw) 90%, #fff);}
.wtile__ring--lg{width:96px; height:96px;}
.wtile__ring--lg .wtile__pct{font-size:18px;}

/* Lapse ageing, soonest in the warmest colour. */
.wage--d30{--sw:#B23A32;} .wage--d90{--sw:#D4892C;} .wage--d180{--sw:#D4B04A;}
.wage--d365{--sw:#4E8FA0;} .wage--later{--sw:#1F7A5C;}
.wdist__s[class*="wage--"]{background:var(--sw);}
.wdist__row--solo{grid-template-columns:minmax(0,1fr);}

/* Statistics */
.wstats-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:28px 2px 12px;}
.wstats-head h3{margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink);}
.wstats-head p{margin:0; font-size:12.5px; color:var(--muted-2);}
.wstats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; align-items:stretch;}
.wstatbox{grid-column:span 1; display:flex; flex-direction:column;}
.wstatbox--wide{grid-column:span 2;}
.wboard + .wstats-head{margin-top:28px;}
.wboard--ledger{margin-top:16px;}
.wboard--focus .wstats-head,.wboard--focus .wstats{grid-column:1 / -1;}
.wboard--focus .wstats-head{margin:12px 2px 0;}

.wdonut{display:flex; flex-direction:column; align-items:center; gap:14px; padding:4px 18px 18px;}
.wkeylist{list-style:none; margin:0; padding:0; width:100%; display:grid; gap:7px;}
.wkeylist--pad{padding:0 20px 18px;}
.wkeylist li{display:grid; grid-template-columns:10px minmax(0,1fr) auto 40px; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);}
.wkeylist li i{width:10px; height:10px; border-radius:3px; background:var(--sw); font-style:normal;}
.wkeylist li i.wsw--none{background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted-2);}
.wkeylist li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wkeylist li b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.wkeylist li em{font-style:normal; text-align:right; color:var(--muted-2); font-variant-numeric:tabular-nums;}

/* Monthly bars */
.wmc__b{fill:var(--verified);}
.wmc--in{fill:var(--verified); --sw:var(--verified);}
.wmc--out{fill:var(--gold); --sw:var(--gold);}
.wmc--sold{fill:#2F6DB0; --sw:#2F6DB0;}
.wmc__b.is-future{opacity:.25;}
.wkey--bar{width:12px; height:10px; border:0; border-radius:3px; background:var(--sw);}
.wch__area--flat{fill:var(--verified); opacity:.1;}

/* Recycling rate by stream */
.wrates{list-style:none; margin:0; padding:0 20px 18px; display:grid; gap:12px;}
.wrates li{display:grid; grid-template-columns:30px minmax(0,1fr) 44px; align-items:center; gap:4px 10px;}
.wrates .wmark{grid-row:span 2;}
.wrates__n{font-size:13px; font-weight:600; color:var(--ink);}
.wrates .wbar{grid-column:2;}
.wrates b{grid-column:3; grid-row:1 / span 2; text-align:right; font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums;}

/* Split inputs - in the drawer, and in the opening inventory */
.wsplitin{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;}
.wsplitin__f{display:grid; gap:4px; font-size:12px; color:var(--muted); min-width:0;}
.wsplitin__f > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wsplitin__in{display:flex; align-items:center; gap:6px;}
.wsplitin__in input{width:100%; min-width:0; min-height:40px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline);
  background:var(--surface); color:var(--ink); font:inherit; font-variant-numeric:tabular-nums;}
.wsplitin__in i{flex:0 0 auto; font-style:normal; font-size:11px; color:var(--muted-2);}
/* The rate under a quantity. Smaller and quieter, because the quantity is the
   figure being stated and the rate is what it was bought at - but the same
   field colours, so a number typed into it reads as plainly as any other. */
.wsplitin__in--price{gap:4px; margin-top:1px;}
.wsplitin__in--price input{min-height:34px; padding:5px 8px; font-size:12.5px;}
.wsplitin__in--price i{font-size:10.5px;}
.wsplitin__cur{flex:0 0 auto; font-style:normal; font-size:11.5px; color:var(--muted-2);}
.wcheck--inline{min-height:40px; padding:6px 12px;}
.wdrawer__eyebrow{margin:0 0 2px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);}

.winv{max-width:980px;}
.winv__on{display:grid; gap:6px; max-width:420px; margin-bottom:16px;}
.winv__on label{font-size:13.5px; font-weight:600; color:var(--ink);}
.winv__on input{min-height:42px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--surface); color:var(--ink); font:inherit;}
.winv__stream{margin:0 0 10px; border:1px solid var(--hairline); border-radius:14px; background:var(--surface);}
.winv__stream > summary{display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--ink);}
.winv__body{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; padding:0 16px 16px;}
.winv__block{display:grid; align-content:start; gap:10px; padding:12px; border-radius:12px; background:var(--paper);}
.winv__block h4{display:flex; align-items:center; gap:6px; margin:0; font-size:13px; font-weight:600; color:var(--ink);}
.winv__row{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; align-items:end;}
.winv__sel{display:grid; gap:4px; font-size:12px; color:var(--muted);}
.winv__sel select{min-height:40px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--surface); color:var(--ink); font:inherit;}

@media (max-width:1180px){
  .wstats{grid-template-columns:repeat(2, minmax(0,1fr));}
  .wstatbox--wide{grid-column:1 / -1;}
}
@media (max-width:640px){
  .wstats{grid-template-columns:minmax(0,1fr);}
  .wstatbox,.wstatbox--wide{grid-column:1 / -1;}
  .wseg__b{font-size:12px; padding:6px 10px;}
}
.wsp[data-theme="dark"] .wage--d30{--sw:#F2877A;}


/* ==========================================================================
   ITEMS, STREAMS ADDED AND REMOVED, FIGURES BELOW ZERO, A STREAM EDITED IN PLACE
   ========================================================================== */

/* Lines picked one by one */
.wlines{display:grid; gap:8px; justify-items:start;}
.wlines__row{display:grid; grid-template-columns:minmax(0,1fr) 150px 38px; gap:8px; align-items:center; width:100%;}
.wlines__row--item{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 130px 38px;}
/* The rate rides in the quantity's track, stacked under it. The row keeps
   its shape and grows downward instead of taking width off the selects, which
   inside the base card have none to give. */
.wlines__qty{display:grid; gap:3px; min-width:0;}
.wlines__row--priced{align-items:start;}
.wlines__row--priced > select{align-self:start;}
.wlines select{min-width:0; width:100%; min-height:40px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline);
  background:var(--surface); color:var(--ink); font:inherit; font-size:13px;}
@media (max-width:640px){
  .wlines__row,.wlines__row--item{grid-template-columns:minmax(0,1fr) 38px;}
  .wlines__row > select,.wlines__row > .wsplitin__in,.wlines__row > .wlines__qty{grid-column:1;}
  .wlines__row > .wicon{grid-column:2; grid-row:1;}
}

/* Opening inventory */
.winv__top{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:end; margin-bottom:6px;}
.winv__top .winv__on{margin:0; min-width:180px;}
.winv__on--unit{min-width:110px !important;}
.winv__on select{min-height:42px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--surface); color:var(--ink); font:inherit;}
.winv__src{margin-left:auto; font-size:11.5px; font-weight:400; color:var(--muted-2); text-align:right;}
.winv__block h4 .wopt{font-weight:400;}
.wnote--req{margin:0 0 14px; padding:10px 14px; border-radius:12px; font-size:13.5px; color:var(--ink);
  background:color-mix(in srgb, var(--gold) 12%, transparent); border:1px solid color-mix(in srgb, var(--gold) 35%, transparent);}

/* A tile and its remove control */
.wtilew{position:relative; display:flex; min-width:0;}
.wtilew > .wtile{flex:1 1 auto; min-width:0;}
.wtile__rm{position:absolute; top:8px; right:8px; width:28px; height:28px; opacity:0; transition:opacity .15s var(--ease);
  background:var(--surface);}
.wtilew:hover .wtile__rm,.wtile__rm:focus-visible,.wtilew:focus-within .wtile__rm{opacity:1;}
@media (hover:none){ .wtile__rm{opacity:1;} }
.wtilew:hover .wtile .wpill{visibility:hidden;}
.wbox__head .wdash__addst{margin-left:auto;}
.wdash__addst select{min-height:34px; padding:4px 10px; border-radius:var(--r-sm); border:1px dashed var(--hairline);
  background:transparent; color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer;}
.wfocus__rm{margin-left:auto;}

/* The ask-each-time dialog */
.wmodal{display:grid; place-items:center; padding:16px;}
.wmodal__panel{position:relative; width:min(480px, 100%); padding:22px 22px 18px; border-radius:16px;
  background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-xl); animation:wdFade .2s var(--ease) both;}
.wmodal__panel h3{margin:0 0 8px; font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink); text-wrap:balance;}
.wmodal__panel p{margin:0 0 10px; font-size:13.5px; line-height:1.55; color:var(--muted);}
.wmodal__list{margin:0 0 14px; padding-left:18px; display:grid; gap:6px; font-size:13px; line-height:1.5; color:var(--muted);}
.wmodal__list b{color:var(--ink);}
.wmodal__opts{display:flex; flex-wrap:wrap; gap:8px;}


/* Figures below zero */
.wwarn{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end; justify-content:space-between; margin:0 0 16px; padding:16px 20px;
  border-color:rgba(154,44,44,.35); background:color-mix(in srgb, #9A2C2C 6%, var(--surface));}
.wwarn__txt{flex:1 1 420px; min-width:0;}
.wwarn h3{margin:0 0 4px; font-size:15px; font-weight:600; color:#9A2C2C;}
.wwarn p{margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--muted);}
.wwarn__list{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:12.5px;}
.wwarn__list li{display:flex; justify-content:space-between; gap:12px; max-width:560px; color:var(--muted);}
.wwarn__list b{color:#9A2C2C; font-variant-numeric:tabular-nums; white-space:nowrap;}
.wwarn__act{display:flex; flex-wrap:wrap; gap:8px;}
.wsp[data-theme="dark"] .wwarn h3,.wsp[data-theme="dark"] .wwarn__list b{color:#F2877A;}

/* ═══ A STREAM'S ENTRIES, DATE BY DATE ════════════════════════════════════
   Read-only rows, newest first, under month headings. Each row: the day, the
   record in words, its sub-type, the quantity and rate, and two actions -
   Details (the entry window, prefilled and editable) and Save as PDF. Laid
   out to fit: no sideways scroll at any width from 360px up. Flat on
   purpose - no shadow and no lift on anything in this list. */
.wbox--edit{grid-column:1 / -1;}
.went-box__head{flex-wrap:wrap;}
.went-box__tools{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px;}
.wsp .went-box__tool,
.wsp .went-box__tool:hover,
.wsp .went-box__tool:active{min-height:44px; box-shadow:none; transform:none;}
.went-box__list{padding:0 0 6px;}
.went-grp__h{display:flex; align-items:baseline; gap:10px; margin:0; padding:16px 20px 8px;
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--hairline);}
.went-grp__n{font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted-2);
  font-variant-numeric:tabular-nums;}
.went-grp__list{list-style:none; margin:0; padding:0;}
.went{display:grid; grid-template-columns:52px minmax(0,1fr) auto auto; align-items:center; gap:4px 16px;
  padding:10px 20px; border-bottom:1px solid var(--hairline);}
.went:last-child{border-bottom:0;}
.went:hover{background:color-mix(in srgb, var(--ink) 2.5%, transparent);}
.went__date{display:grid; justify-items:center; align-content:center; width:52px; min-height:52px; padding:4px 0;
  border-radius:12px; border:1px solid var(--hairline); background:var(--surface-2, var(--surface));
  line-height:1.15; text-align:center;}
.went__date b{font-size:18px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.went__date span{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--verified);}
.went__date small{font-size:10.5px; color:var(--muted-2);}
.went__date.is-none span{font-size:10.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted-2);}
.went__main{min-width:0;}
.went__t{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:14px; line-height:1.35;}
.went__rec{font-weight:600; color:var(--ink); overflow-wrap:anywhere;}
.went__cat{display:inline-flex; max-width:100%; padding:1px 9px; border-radius:999px; font-size:11.5px; font-weight:500;
  color:var(--ink); background:var(--verified-soft); overflow-wrap:anywhere;}
.went__cat.is-none{color:var(--muted-2); background:transparent; border:1px dashed var(--hairline);}
.went__m{margin:3px 0 0; display:flex; flex-wrap:wrap; font-size:12.5px; line-height:1.45; color:var(--muted);
  overflow-wrap:anywhere;}
.went__m > span + span::before{content:"·"; margin:0 7px; color:var(--muted-2);}
.went__note{font-style:italic; color:var(--muted-2);}
.went__fig{text-align:right; white-space:nowrap;}
.went__fig b{display:block; font-size:15px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
.went__fig b.is-in{color:var(--verified);}
.went__fig b.is-out{color:var(--muted);}
.went__rate,.went__norate{display:block; margin-top:2px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;}
.went__norate{font-style:italic; color:var(--muted-2);}
.wtag--base{color:var(--muted); background:var(--hairline);}

/* The two actions, on this list and on the board's Ledger alike. */
.went__act{display:flex; gap:6px; justify-content:flex-end;}
.went__btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px;
  padding:0 12px; appearance:none; background:transparent; border:1px solid var(--hairline); border-radius:10px;
  color:var(--ink); font:inherit; font-size:12.5px; font-weight:500; white-space:nowrap; cursor:pointer;
  box-shadow:none; transition:background .15s var(--ease), border-color .15s var(--ease);}
.went__btn .wi{width:16px; height:16px; color:var(--muted);}
.went__btn:hover{background:var(--verified-soft); border-color:color-mix(in srgb, var(--verified) 40%, transparent);}
.went__btn:hover .wi{color:var(--verified);}
.went__btn:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .went:hover{background:var(--surface-2, var(--surface));}
  .went__btn:hover{border-color:var(--verified);}
}

/* Narrower: the words on the two actions go (their accessible names stay),
   and a row becomes the day beside two lines - what it is, then the figure
   and the actions. */
@media (max-width:1100px){
  .wled .went__bt{display:none;}
  .wled .went__btn{width:44px; padding:0;}
}
@media (max-width:719px){
  .went-box__tools{justify-content:flex-start;}
  .went{grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:"date main main" "date fig act";
    gap:6px 12px; padding:12px 14px;}
  .went__date{grid-area:date; align-self:start; width:44px; min-height:48px;}
  .went__main{grid-area:main;}
  .went__fig{grid-area:fig; align-self:center; text-align:left; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;}
  .went__rate,.went__norate{margin-top:0;}
  .went__act{grid-area:act;}
  .went__bt{display:none;}
  .went__btn{width:44px; padding:0;}
  .went-grp__h{padding:14px 14px 8px;}
}
@media (max-width:640px){
  .wled .went__act{grid-column:2 / -1;}
}
@media (prefers-reduced-motion:reduce){
  .went__btn{transition:none;}
}

/* The Details window's extras: why a calculated figure's quantity is not
   editable, and Delete - asked for, then confirmed - at the left of the
   buttons. */
.wwin__lock{display:flex; align-items:flex-start; gap:8px; margin:0 0 14px; padding:10px 12px; border-radius:10px;
  font-size:12.5px; line-height:1.45; color:var(--ink); background:var(--wattn-soft);
  border:1px solid color-mix(in srgb, var(--wattn) 30%, transparent);}
.wwin__lock .wi{flex:none; margin-top:2px; color:var(--wattn);}
.wwin__acts:has(> .wwin__del){flex:1 1 100%;}
.wwin__acts .wwin__del{order:-1; margin-right:auto;}
.wwin__confirm{flex:1 1 220px; margin-right:auto; font-size:13px; font-weight:500; color:#9A2C2C;}
.wsp[data-theme="dark"] .wwin__confirm{color:#F2877A;}

/* ═══ SAVE AS PDF ═════════════════════════════════════════════════════════
   The print-only record (sz-workspace.js printDoc). Never shown on screen;
   while it prints, everything else on the page is hidden, so it is set in
   the fonts this page already loaded and nothing is fetched. A document for
   a file, not a screen: a deep-green band, one large title, a two-column
   grid of facts, gold only on money, and colours that stay crisp printed in
   black and white. Its own tokens, because it is always paper. */
.szp{display:none;}
@page szp{size:A4; margin:14mm 14mm 13mm;}
@media print{
  html.szp-printing,
  html.szp-printing body{background:#fff !important; margin:0 !important; padding:0 !important;
    height:auto !important; min-height:0 !important; overflow:visible !important;}
  html.szp-printing body > *:not(.szp){display:none !important;}
  html.szp-printing .szp{display:block !important;}
}
.szp{
  --szp-ink:#0F2A22; --szp-soft:#3B574E; --szp-muted:#5F7871; --szp-rule:#D5E0DA; --szp-rule-soft:#E8EFEB;
  --szp-band:#0F3B2E; --szp-on-band:#FFFFFF; --szp-on-band-2:#CFE3DA;
  --szp-gold:#7F5A10; --szp-gold-line:#B8923E; --szp-paper:#FFFFFF;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--szp-ink); background:var(--szp-paper);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.szp *{box-sizing:border-box;}
/* The page behind styles bare footer, h1 and h2; each is reset here, not inherited. */
.szp__page{page:szp; display:flex; flex-direction:column; min-height:262mm; font-size:10.5pt; line-height:1.5;
  break-after:page;}
.szp__page:last-child{break-after:auto;}
.szp__band{display:flex; align-items:center; justify-content:space-between; gap:10mm; padding:7mm 8mm;
  border-radius:2.5mm; background:var(--szp-band); color:var(--szp-on-band);}
.szp__brand{display:flex; flex-direction:column; gap:1.2mm;}
.szp__word{font-size:21pt; font-weight:600; letter-spacing:-.01em; line-height:1;}
.szp__word b{font-weight:700;}
.szp__kind{font-size:8pt; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--szp-on-band-2);}
.szp__who{display:flex; flex-direction:column; align-items:flex-end; gap:1mm; text-align:right; font-size:9.5pt;
  color:var(--szp-on-band-2);}
.szp__who b{font-size:11.5pt; font-weight:600; color:var(--szp-on-band);}
.szp__title{padding:9mm 0 6mm; border-bottom:.45mm solid var(--szp-ink);}
.szp__eyebrow{margin:0 0 2mm; font-size:8.5pt; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--szp-muted);}
.szp__title h1{margin:0; max-width:none; font-family:inherit; font-size:25pt; font-weight:600; line-height:1.15; letter-spacing:-.015em; color:var(--szp-ink);}
.szp__sub{margin:2mm 0 0; font-size:13pt; color:var(--szp-soft);}
.szp__facts{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:10mm; margin:5mm 0 0;}
.szp__fact{padding:3mm 0; border-bottom:.25mm solid var(--szp-rule); break-inside:avoid;}
.szp__fact dt{margin:0 0 .8mm; font-size:7.5pt; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--szp-muted);}
.szp__fact dd{margin:0; font-size:11pt; font-weight:500; color:var(--szp-ink); overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
.szp__fact.is-num dd{font-size:16pt; font-weight:600; letter-spacing:-.01em;}
.szp__fact.is-money dd{font-weight:600; color:var(--szp-gold);}
.szp__fact.is-quiet dd{font-weight:400; font-style:italic; color:var(--szp-muted);}
.szp__fact.is-mono dd{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:10pt;}
.szp__later{display:flex; align-items:baseline; gap:4mm; margin:6mm 0 0; padding:3.5mm 4mm;
  border:.3mm solid var(--szp-gold-line); border-left-width:1.2mm; border-radius:1.5mm; font-size:10pt; break-inside:avoid;}
.szp__later b{flex:none; font-size:8pt; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--szp-gold);}
.szp__note{margin:6mm 0 0; break-inside:avoid;}
.szp__note h2{margin:0 0 2mm; max-width:none; font-family:inherit; line-height:1.3; font-size:7.5pt; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--szp-muted);}
.szp__note p{margin:0; font-size:10.5pt; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere;}
.szp__foot{margin-top:auto; padding:3mm 0 0; background:none; border-top:.45mm solid var(--szp-ink); font-size:8pt; line-height:1.5;
  color:var(--szp-muted); break-inside:avoid;}
.szp__page > :nth-last-child(2){margin-bottom:8mm;}
.szp__reg{width:100%; margin:5mm 0 0; border-collapse:collapse; font-size:9pt; table-layout:auto;}
.szp__reg thead{display:table-header-group;}
.szp__reg th{padding:2mm 2.5mm; text-align:left; font-size:7pt; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--szp-muted); border-bottom:.45mm solid var(--szp-ink);}
.szp__reg td{padding:2.2mm 2.5mm; vertical-align:top; border-bottom:.25mm solid var(--szp-rule); overflow-wrap:anywhere;}
.szp__reg tr{break-inside:avoid;}
.szp__reg .is-num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
.szp__reg td.is-money{font-weight:600; color:var(--szp-gold);}
.szp__reg td.is-quiet{font-style:italic; color:var(--szp-muted);}
.szp__reg td.is-mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:8.5pt;}


/* ==========================================================================
   TOTALS, NOT BALANCES — the way back, ± on a tile, the inventory's Total
   ========================================================================== */

.wback{display:inline-flex; align-items:center; gap:6px; min-height:34px; margin:0 0 10px -6px; padding:4px 10px 4px 6px;
  border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:600; cursor:pointer;}
.wback:hover{color:var(--ink); border-color:var(--hairline); background:var(--surface);}
.wback:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wback .wi{width:16px; height:16px;}

.wtilew .wtile__head{padding-right:62px;}
.wtile__pm{position:absolute; top:9px; right:40px; width:28px; height:28px; border:1px solid var(--hairline); border-radius:8px;
  background:var(--surface); color:var(--ink); font-size:16px; font-weight:600; line-height:1;}
.wtile__pm:hover{border-color:var(--verified); color:var(--verified);}
.wtile__pm:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wtilew:hover .wtile .wpill{visibility:visible;}

.wpm h3{margin-bottom:12px;}
.wpm__sign{margin:0 0 12px;}
.wpm__qty{display:grid; gap:6px; margin-bottom:6px;}
.wpm__qty label{font-size:13px; font-weight:600; color:var(--ink);}
.wpm__qty input{flex:1 1 auto; min-width:0; min-height:42px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline);
  background:var(--surface); color:var(--ink); font:inherit; font-variant-numeric:tabular-nums;}
.wpm__qty select{flex:0 0 84px; min-height:42px; padding:6px 8px; border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--surface); color:var(--ink); font:inherit;}

.winv__row--total{align-items:start;}
.winv__row--total .wsplitin__f > span:first-child{font-weight:600; color:var(--ink);}
.winv__row--total input[readonly]{background:var(--paper); color:var(--ink); font-weight:600; cursor:default;}
.winv__sumhint{margin:0; align-self:center;}
.winv__ratehint{margin:2px 0 0;}
/* What saving a base will take away. Warm rather than alarming - this is a
   thing the reader meant to do, told plainly before they do it. */
.winv__replaces{margin:2px 0 0; padding:10px 12px; border-radius:10px;
  background:var(--surface-2, var(--paper)); border:1px solid var(--hairline);
  border-left:3px solid var(--gold);}
.winv__replaces b{color:var(--ink);}
.winv__linetotal{margin:0; font-size:13px; color:var(--muted);}
.winv__linetotal b{color:var(--ink); font-variant-numeric:tabular-nums;}


/* ==========================================================================
   STREAM TILES — the full name, a stream icon, one amount
   ========================================================================== */
.wmark svg{width:58%; height:58%; display:block;}
.wtilew .wtile__head{padding-right:70px; align-items:flex-start;}
.wtile__name{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; padding-top:5px; text-wrap:balance;}
.wtile__head .wmark{width:32px; height:32px;}
.wtile__amt{flex:1 1 auto; min-width:0; display:grid; gap:3px;}
.wtile__amt b{font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.wtile__amt span{font-size:12px; color:var(--muted-2);}
.wtile__pm{right:42px;}
.wtile__rm{top:9px;}
.wtilew:hover .wtile__rm,.wtilew:focus-within .wtile__rm{opacity:1;}


/* ==========================================================================
   INVENTORY TILES, ± DETAILS, SUPPLIERS AND CUSTOMERS, SETTINGS
   ========================================================================== */

/* A tile: the stream, and what is held now, in the ring */
.wtile__inv{display:grid; justify-items:center; gap:8px; padding:4px 0 2px;}
.wtile__ring--inv{width:128px; height:128px;}
.wtile__ring--inv .wtile__pct{flex-direction:column;}
.wtile__ring--inv .wtile__pct > span{display:grid; justify-items:center; line-height:1.05;}
.wtile__ring--inv .wtile__pct{font-size:21px; font-weight:600; letter-spacing:-.01em;}
.wtile__ring--inv .wtile__pct small{font-size:.55em; margin-left:2px;}
.wtile__ring--inv .wtile__pct em{font-style:normal; font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-top:3px;}
.wtile__ring--inv .wring__arc{transition:stroke-width .15s var(--ease); cursor:help;}
.wtile__ring--inv .wring__arc:hover{stroke-width:16px;}
.wtile__cap{min-height:18px; font-size:12.5px; color:var(--muted); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wtile__cap.is-tip{color:var(--ink); font-weight:600;}
.wtile .wtile__extra{justify-content:center;}

/* The stat card's inventory bar */
.wstock{display:flex; gap:2px; width:100%; height:12px; margin:22px 0 6px; border-radius:6px; overflow:hidden;}
.wstock span{display:block; height:100%; background:var(--sw);}
.wstock--empty{background:var(--hairline);}

/* The floating Add entry */
.wfab[data-fab-mode="add"] .wfab__i{font-size:20px; font-weight:500;}

/* ± with details */
.wpm--more{width:min(560px, 100%); max-height:calc(100vh - 32px); overflow-y:auto;}
.wpm__more{display:grid; gap:10px; margin:8px 0 14px; padding-top:12px; border-top:1px solid var(--hairline);}
.wpm__row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.wpm__more label{display:block; margin:0 0 4px; font-size:12.5px; font-weight:600; color:var(--ink);}
.wpm__more input,.wpm__more select{width:100%; min-width:0; min-height:40px; padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline);
  background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px;}
@media (max-width:560px){ .wpm__row{grid-template-columns:minmax(0,1fr);} }

/* Suppliers and customers */
.wbox--src .wbox__head .wicon--box{flex:0 0 auto;}
.wparty{display:flex; gap:8px; align-items:center; padding:0 20px 12px;}
.wparty input{flex:1 1 auto; min-width:0; min-height:36px; padding:4px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--surface); color:var(--ink); font:inherit;}
.wparty__err{margin:-4px 20px 10px;}
.wsrc--logged .wsrc__main span{color:var(--muted-2);}
.wsrc--logged .wicon{width:30px; height:30px;}

/* Settings */
.wset{max-width:880px;}
.wset form{display:grid; gap:14px;}
.wset__card{padding:18px 20px 20px; border-radius:16px; background:var(--surface); border:1px solid var(--hairline);}
.wset__head{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;}
.wset__head h3{margin:0; font-size:15.5px; font-weight:600; color:var(--ink);}
.wset__head h3 .wopt{font-size:12px; font-weight:500; margin-left:6px;}
.wset__head p{margin:3px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted-2);}
.wset__n{flex:0 0 auto; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:12px; font-weight:700;
  color:var(--verified); background:var(--verified-soft);}
.wset__roles,.wset__streams{border:0; margin:0; padding:0; min-width:0;}
.wset__roles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.wrole{position:relative; display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--hairline);
  background:var(--paper); cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease);}
.wrole input{position:absolute; opacity:0; pointer-events:none;}
.wrole__ico{flex:0 0 auto; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--verified); background:var(--verified-soft);}
.wrole__ico .wi{width:20px; height:20px;}
.wrole__t{flex:1 1 auto; min-width:0; display:grid; gap:3px;}
.wrole__t b{font-size:14px; font-weight:600; color:var(--ink);}
.wrole__t span{font-size:12.5px; line-height:1.45; color:var(--muted);}
.wrole__tick{flex:0 0 auto; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--hairline); color:transparent;}
.wrole__tick .wi{width:13px; height:13px;}
.wrole:hover{border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline));}
.wrole:has(input:checked){border-color:var(--verified); background:var(--verified-soft);}
.wrole:has(input:checked) .wrole__tick{background:var(--verified); border-color:var(--verified); color:#fff;}
.wrole:has(input:focus-visible){outline:2px solid var(--verified); outline-offset:2px;}
.wset__streams{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px;}
.wchip{display:flex; align-items:center; gap:10px; min-height:48px; padding:7px 12px 7px 8px; border-radius:12px; border:1.5px solid var(--hairline);
  background:var(--paper); cursor:pointer; font-size:13.5px; font-weight:500; color:var(--ink); transition:border-color .15s var(--ease), background .15s var(--ease);}
.wchip input{position:absolute; opacity:0; pointer-events:none;}
.wchip:hover{border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline));}
.wchip:has(input:checked){border-color:var(--verified); background:var(--verified-soft);}
.wchip:has(input:focus-visible){outline:2px solid var(--verified); outline-offset:2px;}
.wset__cap{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 20px;}
.wset__caprow{display:grid; grid-template-columns:30px minmax(0,1fr) 170px; align-items:center; gap:10px; padding:4px 0; border-bottom:1px dashed var(--hairline);}
.wset__caprow label{font-size:13.5px; color:var(--ink);}
.wset__caprow .wcap__in input{min-height:38px; text-align:right; font-variant-numeric:tabular-nums;}
.wset__foot{position:sticky; bottom:0; z-index:2; display:flex; justify-content:flex-end; gap:8px; padding:12px 0 4px;
  background:linear-gradient(to bottom, transparent, var(--paper) 30%);}
@media (max-width:700px){
  .wset__roles,.wset__cap{grid-template-columns:minmax(0,1fr);}
  .wset__caprow{grid-template-columns:30px minmax(0,1fr) 140px;}
}

.wtile__num{font-weight:600; white-space:nowrap;}
.wres.wset{background:none; border:0; box-shadow:none; padding:0;}
.wset__foot{background:none; padding:6px 0 0;}

/* ==========================================================================
   PORTFOLIO — holdings, inflow, outflow, net change
   ========================================================================== */
.wnet{display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--muted); background:var(--hairline);}
.wnet .wi{width:12px; height:12px;}
.wnet--up{color:#1F7A5C; background:rgba(31,122,92,.12);}
.wnet--down{color:#B23A32; background:rgba(178,58,50,.1);}
.wsp[data-theme="dark"] .wnet--up{color:#6FD3A8; background:rgba(111,211,168,.14);}
.wsp[data-theme="dark"] .wnet--down{color:#F2877A; background:rgba(242,135,122,.14);}
.whero .wnet--hero{font-size:15px; padding:4px 11px; vertical-align:middle; background:rgba(255,255,255,.12); color:#fff;}
.whero .wnet--hero.wnet--up{color:#8FE3BE;}
.whero .wnet--hero.wnet--down{color:#FFB3A9;}
.whero__h .whero__u{font-size:.5em; font-weight:500; opacity:.8;}
.wtile__flow{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; padding-top:10px; border-top:1px dashed var(--hairline);}
.wtile__flow > span{display:grid; gap:3px; justify-items:center; min-width:0;}
.wtile__flow i{font-style:normal; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2);}
.wtile__flow b{font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.wtile__flow .wnet{font-size:11px; padding:1px 6px;}
/* Scoped to descendants: the workspace root itself carries .is-in (its entry
   transition), and a bare .is-in rule recoloured all of its text green. */
.wsp .is-in{color:#1F7A5C;} .wsp .is-out{color:#A0661C;}
.wsp[data-theme="dark"] .is-in{color:#6FD3A8;} .wsp[data-theme="dark"] .is-out{color:#E2B25C;}
.wfocus__figs dd.is-strong{font-size:1.25em;}
.whero__ringtxt b{font-size:clamp(20px, 2.2vw, 30px); white-space:nowrap;}
.wtile__flow > span:last-child{grid-column:1 / -1;}
.wtile__flow{grid-template-columns:repeat(2, minmax(0,1fr));}
.wgate__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.wgate__acts .wbtn{flex:1 1 180px; width:auto;}

/* Choose a plan and pay */
.wbuy{max-width:620px;}
/* Two or one, where only some plans open the surface being sold. */
.wbuy__tiers{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:8px; margin:16px 0 12px;}
.wbuy__tier{display:grid; gap:4px; text-align:left; padding:12px 12px 10px; border-radius:12px; border:1.5px solid var(--hairline); background:var(--paper);
  font:inherit; color:var(--ink); cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease);}
.wbuy__tier b{font-size:14px;}
.wbuy__tier span{font-size:12px; line-height:1.4; color:var(--muted);}
.wbuy__tier em{font-style:normal; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:4px;}
.wbuy__tier:hover{border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline));}
.wbuy__tier.is-on{border-color:var(--verified); background:var(--verified-soft);}
.wbuy__tier:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wbuy__terms{margin-bottom:14px;}
/* opacity .75 measured 4.3:1 on white (axe, 29 Sept 2026); .9 clears the 4.5:1 floor on both the resting and the selected pill. */
.wbuy__terms small{font-size:11px; opacity:.9;}
.wbuy__total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0; margin-bottom:12px; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
.wbuy__total span{font-size:13.5px; color:var(--muted);}
.wbuy__total b{font-size:22px; font-variant-numeric:tabular-nums;}
@media (max-width:560px){ .wbuy__tiers{grid-template-columns:minmax(0,1fr);} }


/* Back from Cashfree */
.wbill{text-align:left;}
.wbill__mark{display:inline-grid; place-items:center; width:46px; height:46px; margin:6px 0 4px; border-radius:50%;
  background:var(--hairline); color:var(--ink);}
.wbill__mark .wi{width:24px; height:24px;}
.wbill--ok .wbill__mark{background:var(--verified-soft); color:var(--verified);}
.wbill--bad .wbill__mark{background:rgba(178,58,50,.1); color:#B23A32;}
.wbill__spin{width:22px; height:22px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; animation:wbillSpin .9s linear infinite;}
@keyframes wbillSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .wbill__spin{animation:none; border-right-color:currentColor; opacity:.5;} }
.wsp[data-theme="dark"] .wbill--bad .wbill__mark{color:#F2877A;}


/* ═══════════════════════════════════════════════════════════════════════════
   DEPTH

   One elevation scale, used everywhere, instead of a different hand-rolled
   shadow per component. Three things together make a surface read as a
   surface rather than a rectangle of paint, and all three are needed:

     the lit top edge   a one-pixel inset highlight, because a real edge
                        catches the light before the face does
     the contact shadow tight, dark, barely blurred — how close the thing
                        sits to what is under it
     the ambient shadow wide, soft, faint — the room it is standing in

   A single mid-grey blur gives none of that away and is why most cards look
   flat. The scale is small on purpose: at rest, raised, and floating. A
   surface that can be at six heights is a surface nobody can read the height
   of.
   ═══════════════════════════════════════════════════════════════════════════ */

.wsp{
  /* Light from above, so the face of a card is a touch brighter at the top.
     Kept this faint deliberately — it should be felt, not seen. */
  --wel-face:linear-gradient(177deg, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
  --wel-1:var(--hl),
          0 1px 2px rgba(17,44,40,.055),
          0 10px 24px -18px rgba(17,44,40,.34);
  --wel-2:var(--hl),
          0 2px 4px rgba(17,44,40,.07),
          0 10px 20px -10px rgba(17,44,40,.16),
          0 26px 48px -26px rgba(17,44,40,.4);
  --wel-3:var(--hl),
          0 4px 10px rgba(17,44,40,.09),
          0 20px 40px -14px rgba(17,44,40,.22),
          0 48px 90px -38px rgba(17,44,40,.45);
  /* Pressed: the light comes off the top edge and the shadow moves inside. */
  --wel-in:inset 0 2px 5px rgba(17,44,40,.13);
}

/* On a dark ground there is no white to catch, so the top edge is a faint
   rim of the surface's own colour and the shadows deepen instead. */
.wsp[data-theme="dark"]{
  --wel-face:linear-gradient(177deg, rgba(255,255,255,.055), rgba(255,255,255,0) 58%);
  /* THE GREEN GROUND. The cards sat on the neutral --surface and read as
     grey slabs next to a green hero, which is what made the row look like
     two unrelated designs rather than one board. This is a tint laid UNDER
     the sheen, not a replacement for either: the card keeps its own fill and
     gains a deep green cast, so the row belongs to the hero without
     competing with it - the hero stays the saturated one because it is the
     thing the eye should land on first. */
  --wcard-green:linear-gradient(168deg, rgba(85,214,166,.055) 0%,
                                        rgba(85,214,166,.02) 52%,
                                        rgba(85,214,166,0) 100%);
  /* A STEP LIGHTER THAN THE CARD. The stream tiles sit ON a card that is now
     green, so giving them the card's own tint would have dissolved them into
     it, and leaving them on the neutral --surface made them read as black
     holes cut through it - which is what they looked like. They are the one
     thing on this board you press, so they take the lighter tone: raised on
     the surface they sit on, the same way the cards are raised on the pane.
     Card top lands at rgb(37,66,58) and a tile at rgb(44,79,69). */
  --wtile-green:linear-gradient(168deg, rgba(120,230,190,.09) 0%,
                                        rgba(120,230,190,.04) 55%,
                                        rgba(120,230,190,.01) 100%);
  --wel-1:var(--hl), 0 1px 2px rgba(0,0,0,.42), 0 12px 26px -18px rgba(0,0,0,.6);
  --wel-2:var(--hl), 0 2px 5px rgba(0,0,0,.5), 0 12px 24px -10px rgba(0,0,0,.45),
          0 30px 54px -26px rgba(0,0,0,.66);
  --wel-3:var(--hl), 0 5px 12px rgba(0,0,0,.55), 0 24px 46px -14px rgba(0,0,0,.55),
          0 54px 100px -38px rgba(0,0,0,.72);
  --wel-in:inset 0 2px 6px rgba(0,0,0,.5);
}

/* ---- cards ---- */

/* The gradient sits in the background layer ABOVE the fill, so a card keeps
   whatever colour its variant gives it and only gains the light. */
.wsp .wbox,
.wsp .wstat{
  background-image:var(--wel-face);
  box-shadow:var(--wel-1);
  transition:box-shadow .22s var(--ease);
}

/* Dark only: sheen first, green beneath it, the card's own fill under both.
   Order matters - the sheen has to stay the topmost layer or the highlight
   ends up under the tint and the card stops reading as lit from above. */
.wsp[data-theme="dark"] .wbox,
.wsp[data-theme="dark"] .wstat,
.wsp[data-theme="dark"] .wtgt{
  background-image:var(--wel-face), var(--wcard-green);
}
/* :not(.is-empty) - an empty slot is a dashed transparent placeholder, and a
   painted gradient would turn "nothing here yet" into a filled tile. */
.wsp[data-theme="dark"] .wtile:not(.is-empty){
  background-image:var(--wel-face), var(--wtile-green);
}

/* ---- stream tiles: the one thing on the dashboard you press ---- */

.wsp .wtile{
  background-image:var(--wel-face);
  box-shadow:var(--wel-1);
  transition:border-color .16s var(--ease), box-shadow .22s var(--ease),
             transform .22s var(--ease);
}
.wsp .wtile:hover{ transform:translateY(-2px); box-shadow:var(--wel-2); }
.wsp .wtile:active{ transform:translateY(0); box-shadow:var(--wel-1); }
.wsp .wtile.is-on{ box-shadow:0 0 0 1px var(--verified), var(--wel-2); }
/* A tile with nothing in it is a slot, not an object: no face, no shadow. */
.wsp .wtile.is-empty{ background-image:none; box-shadow:none; }

/* ---- controls ---- */

/* NOT .wbtn--sm. That is a SIZE on the primary button, which is filled dark
   by .wsp .wbtn using the background shorthand - and this rule's light face
   replaced that gradient while leaving the colour transparent, so every
   primary submit on the dashboard came out white text on white. The light
   face belongs on light chrome, which is what these two are. */
.wsp .wicon,
.wsp .wchip{
  background-image:var(--wel-face);
  box-shadow:var(--wel-1);
  transition:background-color .16s var(--ease), border-color .16s var(--ease),
             box-shadow .18s var(--ease), transform .18s var(--ease);
}
.wsp .wicon:hover,
.wsp .wchip:hover{ transform:translateY(-1px); box-shadow:var(--wel-2); }
.wsp .wicon:active,
.wsp .wchip:active{ transform:translateY(0); box-shadow:var(--wel-in); }
/* A ghost button is deliberately flat — it is the quieter of two choices,
   and giving it the same body as the primary one flattens the pair. */
.wsp .wbtn--ghost{ background-image:none; box-shadow:none; }
.wsp .wbtn--ghost:hover{ transform:none; box-shadow:none; }

/* The primary button is the one thing on a pane that should look pressable
   from across the room. */
.wsp .wbtn{ box-shadow:var(--wel-2); }
.wsp .wbtn:hover{ box-shadow:var(--wel-3); }
.wsp .wbtn:active{ transform:translateY(0); box-shadow:var(--wel-in); }

/* ---- fields: recessed, so what you type into reads as cut INTO the card ---- */

.wsp .wf input,
.wsp .wf select,
.wsp .wf textarea,
.wsp .wprice input,
.wsp .wask textarea{
  box-shadow:var(--wel-in);
}
.wsp .wf input:focus,
.wsp .wf select:focus,
.wsp .wf textarea:focus,
.wsp .wprice input:focus,
.wsp .wask textarea:focus{
  box-shadow:var(--wel-in), 0 0 0 3px var(--verified-soft);
}

/* ---- things that float ---- */

.wsp .wdrawer__panel,
.wsp .wmodal__panel{ box-shadow:var(--wel-3); }
.wsp .wfab{ box-shadow:var(--wel-3); }
.wsp .wfab:hover{ transform:translateY(-2px); }

/* ---- the hero keeps its own light, and gains the room ---- */

.wsp .whero{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 4px 12px rgba(12,35,31,.18),
             0 28px 56px -28px rgba(12,35,31,.8);
}

/* Depth is drawn, not animated. What goes here is the MOVEMENT — a card that
   rises under the pointer — not the shadow that shows it is raised. */
@media (prefers-reduced-motion:reduce){
  .wsp .wtile,
  .wsp .wbtn,
  .wsp .wicon,
  .wsp .wchip,
  .wsp .wfab{ transition:box-shadow .01ms, border-color .01ms; }
  .wsp .wtile:hover,
  .wsp .wtile:active,
  .wsp .wbtn:active,
  .wsp .wicon:hover,
  .wsp .wicon:active,
  .wsp .wchip:hover,
  .wsp .wchip:active,
  .wsp .wfab:hover{ transform:none; }
}

/* ---- the rest of the section, on the same scale ---- */

/* Saved work, and the panels the Assistant and the upgrade panes put on the
   ground. Same material as a dashboard card, because they are the same kind
   of thing: a sheet resting on the pane. */
.wsp .wdoc,
.wsp .wpanel,
.wsp .wnote{
  background-image:var(--wel-face);
  box-shadow:var(--wel-1);
  transition:box-shadow .22s var(--ease);
}
.wsp .wdoc:hover{ box-shadow:var(--wel-2); }

/* The assistant's composer is a thing you reach for — it sits above the
   thread, not in it. */
.wsp .wask{ box-shadow:var(--wel-2); }

/* An answer is paper; a question is ink on it. Only the answer gets a body,
   so the two do not read as one undifferentiated stack of bubbles. */
.wsp .wmsg--sz{
  background-image:var(--wel-face);
  box-shadow:var(--wel-1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MY TARGETS

   The card sits between Inflow and Outflow and is built like them, because it
   is the same kind of thing: one figure about the year, with a way in. It
   says only how many targets there are and how many are not ready — the
   arithmetic behind that lives in kb/ledger.py target_totals(), like every
   other number on this page.
   ═══════════════════════════════════════════════════════════════════════════ */

.wtgt{
  min-width:0; display:flex; flex-direction:column; gap:10px;
  /* 18px sides, the same inset .wstat uses, so the two cards' contents start
     on the same line instead of 2px apart. */
  padding:18px 18px 16px; border-radius:16px; text-align:left;
  appearance:none; font:inherit; color:inherit; cursor:pointer;
  background:var(--surface); background-image:var(--wel-face);
  border:1px solid var(--hairline); box-shadow:var(--wel-1);
  transition:border-color .16s var(--ease), box-shadow .22s var(--ease),
             transform .22s var(--ease);
}
.wtgt:hover{transform:translateY(-2px); box-shadow:var(--wel-2);
  border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline));}
.wtgt:active{transform:translateY(0); box-shadow:var(--wel-1);}
.wtgt:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wtgt__head{display:flex; align-items:center; gap:12px;}
/* 42/12, matching .wstat__ico. These sit side by side in the same row at the
   same card width, and a 30px badge beside a 42px one reads as a mistake. */
.wtgt__ico{flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px;
  border-radius:12px; background:var(--verified-soft); color:var(--verified);}
.wtgt__ico .wi{width:20px; height:20px;}
.wtgt__ico .wi{width:16px; height:16px;}
.wtgt__label{flex:1 1 auto; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);}
.wtgt__go{flex:0 0 auto; color:var(--muted-2); transition:transform .18s var(--ease);}
.wtgt:hover .wtgt__go{transform:translateX(2px);}
.wtgt__fig{display:flex; align-items:baseline; gap:7px; font-variant-numeric:tabular-nums;}
.wtgt__fig b{font-size:26px; font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1;}
.wtgt__fig span{font-size:12.5px; color:var(--muted);}
.wtgt__note{margin:0; font-size:12px; line-height:1.45; color:var(--muted-2);}
.wtgt__note b{color:var(--ink); font-weight:600;}
.wtgt__note.is-risk b{color:#9A2C2C;}
.wsp[data-theme="dark"] .wtgt__note.is-risk b{color:#F2877A;}
.wtgt__empty{margin:0; font-size:12.5px; line-height:1.5; color:var(--muted-2);}

/* ---- the second corner button ----
   Stacked over .wfab on the offset .wpanel already uses, so the two agree
   about how far apart floating things sit. */
/* Position only. Everything else it inherits from .wfab, because the two
   corner buttons are one pair - see the note further down. */
.wfab--tgt{ bottom:calc(clamp(14px,3vw,26px) + 60px); }
@media (max-width:720px){
  .wfab--tgt{bottom:calc(var(--wsp-railh) + 74px);}
}
/* On a phone the primary button loses its label and becomes a circle; this
   one follows, or the two stop looking like a pair. */
@media (max-width:560px){
  .wfab--tgt .wfab__t{display:none;}
  .wfab--tgt{padding:0; width:52px; justify-content:center;}
}

/* ---- the targets view ---- */

.wtgts{display:grid; gap:10px;}
.wtgtrow{
  display:grid; gap:10px 16px; padding:14px 16px; border-radius:13px;
  grid-template-columns:minmax(0,1fr) auto;
  background:var(--surface); background-image:var(--wel-face);
  border:1px solid var(--hairline); box-shadow:var(--wel-1);
}
.wtgtrow__main{min-width:0;}
.wtgtrow__title{margin:0; font-size:14.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis;}
.wtgtrow__where{margin:3px 0 0; font-size:12.5px; color:var(--muted);}
.wtgtrow__where b{color:var(--ink); font-weight:600;}
.wtgtrow__meta{display:flex; flex-wrap:wrap; gap:4px 12px; margin:7px 0 0;
  font-size:11.5px; color:var(--muted-2);}
.wtgtrow__ctx{margin:7px 0 0; padding-top:7px; border-top:1px dashed var(--hairline);
  font-size:11.5px; line-height:1.5; color:var(--muted-2);}
.wtgtrow__side{display:flex; flex-direction:column; align-items:flex-end; gap:7px;
  font-variant-numeric:tabular-nums;}
.wtgtrow__qty{font-size:17px; font-weight:600; color:var(--ink); line-height:1;}
.wtgtrow__held{font-size:11.5px; color:var(--muted);}
.wtgtrow__acts{display:flex; gap:6px; margin-top:2px;}
@media (max-width:560px){
  .wtgtrow{grid-template-columns:minmax(0,1fr);}
  .wtgtrow__side{align-items:flex-start;}
}


/* ---- the dropdown the operating system paints ----
   A <select>'s open list is drawn by the platform, not by this stylesheet,
   and it takes its light or dark from the color-scheme in force ON THE
   CONTROL. The workspace declares dark on its own root, but the popup was
   still coming up white with near-white text on it — unreadable — because
   the page underneath the workspace is a light document and the popup was
   resolving against that. Declaring it on the controls themselves, and
   painting the options explicitly, settles it on every engine rather than
   relying on inheritance the platform is free to ignore. */
.wsp[data-theme="dark"] select,
.wsp[data-theme="dark"] input,
.wsp[data-theme="dark"] textarea{ color-scheme:dark; }
.wsp[data-theme="dark"] select option,
.wsp[data-theme="dark"] select optgroup{
  background-color:#0E2724;      /* --surface, written out: the popup is
                                    outside the element tree the variable
                                    resolves in on some engines */
  color:#EAF1EC;
}
.wsp[data-theme="light"] select,
.wsp[data-theme="light"] input,
.wsp[data-theme="light"] textarea{ color-scheme:light; }
.wsp[data-theme="light"] select option,
.wsp[data-theme="light"] select optgroup{ background-color:#fff; color:#112C28; }


/* ---- the second corner button ----
   ONE PAIR, NOT TWO KINDS. It first shipped as a pale pill against the dark
   one, which read as two unrelated controls that happened to be stacked.
   They do the same sort of thing from the same corner, so they are the same
   button in two words - only the label and the icon differ. */
.wsp .wfab--tgt{ min-width:0; }
.wsp .wfab--tgt .wfab__i{ display:inline-flex; align-items:center; }
.wsp .wfab--tgt .wfab__i .wi{ width:17px; height:17px; }

/* The swatch that names a band of the wheel. In the resting caption it takes
   its colour from the same --sw token the arc is stroked with; on hover it is
   given the arc's own computed stroke inline, which wins over the token. */
.wtile__sw{display:inline-block; flex:0 0 auto; width:9px; height:9px; border-radius:2px;
  vertical-align:baseline; background:var(--sw, currentColor);}
.wtile__cap.is-tip .wtile__sw{margin-right:6px;}

/* WHAT THE HOLDING IS MADE OF, under the ring. The ring gives the shape of a
   position and the number in the middle gives its size; neither says which
   band is which, and no amount of hovering says what any of it cost. Each row
   is one sub-type in the colour it is drawn in, its quantity, and what it is
   carried at - so the stream figure below is visibly the sum of the rows
   above it rather than a number the reader has to take on trust. */
.wdist2{display:grid; gap:3px; padding-top:10px; border-top:1px dashed var(--hairline); font-size:12px;}
.wdist2__r{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:baseline;}
.wdist2--money .wdist2__r{grid-template-columns:minmax(0,1fr) auto minmax(52px,auto);}
.wdist2__n{display:flex; align-items:baseline; gap:6px; min-width:0; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wdist2__q{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); white-space:nowrap;}
.wdist2__v{font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; text-align:right;}
/* A sub-type with no rate recorded says so in words. It is not worth nothing;
   nobody has said what it cost. */
.wdist2__v.is-none{font-size:11px; color:var(--muted-2); font-variant-numeric:normal;}
@media (max-width:420px){
  .wdist2--money .wdist2__r{grid-template-columns:minmax(0,1fr) auto;}
  .wdist2--money .wdist2__v{grid-column:2; text-align:right;}
}

/* ---- starting again, at one of three widths ---- */
.wrs{display:flex; flex-direction:column; gap:8px;}
/* A card on a card - these rows sit inside a settings card, so --surface
   would make them invisible against it. --surface-2 is the token for exactly
   that, and it is defined in both themes. */
.wrs__opt{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 13px; border-radius:11px; border:1px solid var(--hairline);
  background:var(--surface-2);}
.wrs__txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.wrs__txt b{font-size:13.5px; font-weight:600; color:var(--ink);}
.wrs__txt span{font-size:12px; color:var(--muted-2);}
.wrs__opt .wbtn{flex:0 0 auto;}
@media (max-width:560px){
  .wrs__opt{flex-direction:column; align-items:flex-start; gap:9px;}
}

/* ---- meeting a target ---- */
.wtgtrow.is-met{ opacity:.72; }
.wtgtrow.is-met .wtgtrow__title{ text-decoration:line-through; text-decoration-color:var(--muted-2); }
.wtgtrow__met{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--hairline);
  font-size:12.5px; color:var(--muted);}
.wtgtrow__met b{color:var(--ink);}


/* ---- the ring's key ----
   Which colour is which stream, beside the ring rather than one hover at a
   time. Each row carries the stream's own .wmk-- class, so the swatch reads
   the same --sw token the arc is stroked from and the two cannot drift. */
.whero__key{position:relative; display:flex; flex-wrap:wrap; gap:6px 16px; margin:0;
  padding:0 24px 14px; list-style:none;}
.whero__key li{display:flex; align-items:center; gap:7px; font-size:11.5px;
  color:rgba(242,245,241,.74); font-variant-numeric:tabular-nums;}
.whero__key b{font-weight:600; color:#fff;}
.whero__sw{width:9px; height:9px; border-radius:2px; flex:0 0 auto;
  background:color-mix(in srgb, var(--sw) 70%, #fff);}
@media (max-width:640px){ .whero__key{padding:0 20px 12px;} }

/* ---- what a flow was made of ----
   Under Inflow and Outflow: every way a quantity came or went this year,
   rather than a sentence naming the ways it could have. */
.wstat__break{margin:0; padding:0; list-style:none; display:grid; gap:3px;}
.wstat__break li{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--muted-2);}
.wstat__break b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}


/* ---- the base, at the head of Inflow ---- */
.wstat__base{display:flex; align-items:center; gap:8px; margin:0 0 7px; padding:0 0 7px;
  border-bottom:1px dashed var(--hairline); font-size:11.5px; color:var(--muted-2);}
.wstat__base span{flex:1 1 auto;}
.wstat__base b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.wicon--xs{width:26px; height:26px; flex:0 0 auto;}
.wicon--xs .wi{width:13px; height:13px;}
.wstat__odd{margin:7px 0 0; font-size:11px; line-height:1.45; color:var(--muted-2);}

.wstat__breakhead{margin:8px 0 3px; font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);}
.wstat__breakhead:first-child{margin-top:0;}

/* ---- one flow, in full ---- */
.wflow__hero{position:relative; overflow:hidden; margin:0 0 16px; padding:20px 22px;
  border-radius:18px; color:#F2F5F1;
  background:linear-gradient(140deg, #25594E 0%, #16382F 46%, #0C231F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 4px 12px rgba(12,35,31,.18),
             0 28px 56px -28px rgba(12,35,31,.8);}
.wflow__hero--out{background:linear-gradient(140deg, #4A3C23 0%, #2E2716 46%, #1B160C 100%);}
.wflow__hero .eyebrow-w{color:rgba(242,245,241,.62);}
.wflow__big{margin:8px 0 0; font-size:clamp(26px,3.4vw,38px); font-weight:600;
  letter-spacing:-.02em; line-height:1; color:#fff; font-variant-numeric:tabular-nums;}
.wflow__big small{font-size:.5em; color:rgba(242,245,241,.62);}
.wflow__base{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0;
  font-size:12.5px; color:rgba(242,245,241,.74);}
.wflow__base b{color:#fff; font-variant-numeric:tabular-nums;}
.wflow__base i{flex:1 1 100%; font-style:normal; font-size:11px; color:rgba(242,245,241,.5);}
.wflow__base .wicon{border-color:rgba(255,255,255,.18); color:rgba(242,245,241,.8);}
.wflow__base .wicon:hover{color:#fff;}
.wflow__sum{margin:12px 0 0; padding-top:10px; border-top:1px dashed rgba(255,255,255,.14);
  font-size:11.5px; color:rgba(242,245,241,.62); font-variant-numeric:tabular-nums;}
.wboard--flow{grid-template-columns:repeat(2, minmax(0,1fr));}
.wboard--flow > .wbox{grid-column:span 1;}
@media (max-width:820px){ .wboard--flow{grid-template-columns:minmax(0,1fr);} }
.wflow__pad{padding:0 20px 18px;}
.wflow__list{display:grid; gap:9px;}
.wflow__row{display:grid; grid-template-columns:minmax(0,1fr) 90px auto; align-items:center; gap:12px;}
.wflow__name{font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wflow__kg{font-size:13px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.wflow__months{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:4px; align-items:end;}
.wflow__m{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0;}
.wflow__m.is-future{opacity:.35;}
.wflow__mbar{display:flex; align-items:flex-end; justify-content:center; width:100%; height:64px;
  background:var(--hairline); border-radius:3px; overflow:hidden;}
.wflow__mfill{display:block; width:100%; border-radius:3px;}
.wflow__mfill--ok{background:var(--verified);}
.wflow__mfill--gold{background:var(--gold);}
.wflow__ml{font-size:9.5px; color:var(--muted-2);}
.wflow__mv{font-size:9px; color:var(--muted-2); font-variant-numeric:tabular-nums; min-height:11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.wstat__go{margin-left:auto;}

/* ---- the board, tightened ----
   Everything the cards used to spell out has a page of its own now, so they
   go back to being what a card is: one figure and a way through to the rest.
   The ring comes down with them - it was setting the height of the whole row
   and leaving the cards beside it half empty. */
.wsp .whero__ring{width:118px; height:118px;}
.wsp .whero__ringtxt b{font-size:27px;}
/* THE FIGURE FITS ITS RING (see fitChars in sz-workspace.js): each ring is a
   size container, and its centre figure is as large as its own length allows
   inside the hole - never larger than the design size, never over the arc. */
.whero__ring,.wtile__ring{container-type:inline-size;}
.wsp .whero__ring .whero__ringtxt b{font-size:min(27px, calc(112cqi / var(--chars, 6)));}
.wtile__ring--inv .wtile__pct .wtile__num{font-size:min(21px, calc(112cqi / var(--chars, 6)));}
.wtile__ring--lg .wtile__pct > span{font-size:min(18px, calc(102cqi / var(--chars, 6)));}
/* The gloss passes over each arc are paint only. */
.wring__tube,.wring__light{pointer-events:none;}

.wsp .whero__main{padding:18px 20px 14px;}
.wsp .whero__h{margin:8px 0 6px; font-size:clamp(19px,1.9vw,24px);}
.wsp .whero__sub{font-size:12.5px;}
.wsp .whero__key{padding:0 20px 10px; gap:5px 14px;}
.wsp .whero__fact{padding-top:10px; padding-bottom:10px;}

.wsp .wstat__base{margin:0; padding:0; border:0;}
.wsp .wstat__panel{gap:10px;}
.wsp .wflow__odd{margin:10px 0 0; font-size:11.5px; line-height:1.5; color:rgba(242,245,241,.6);}

/* ---- starting again ---- */
.wdanger__head{display:flex; align-items:center; gap:8px; margin:0 0 10px !important;
  color:#9A2C2C !important; font-size:13.5px !important;}
.wdanger__head b{color:#9A2C2C !important;}
.wdanger__head .wi{width:16px; height:16px; flex:0 0 auto;}
.wdanger__what{margin:0 0 9px !important;}
.wdanger__confirm{display:block; margin:14px 0 6px; font-size:12.5px; color:var(--muted);}
.wdanger__confirm b{font-weight:600; color:var(--ink);}
.wdanger input[type="email"]{
  width:100%; max-width:340px; min-height:42px; margin:0 0 12px; padding:10px 12px;
  font:inherit; font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-sm);
  box-shadow:var(--wel-in);
}
.wdanger input[type="email"]:focus{
  outline:none; border-color:#9A2C2C; box-shadow:var(--wel-in), 0 0 0 3px rgba(154,44,44,.16);
}
.wsp[data-theme="dark"] .wdanger__head,
.wsp[data-theme="dark"] .wdanger__head b{color:#F2877A !important;}
.winv__has{margin-left:8px; font-style:normal; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--verified);
  background:var(--verified-soft); border-radius:999px; padding:2px 7px;}

/* The tile caption now carries the sub-type NAMES, each with the colour it
   is drawn in on the wheel above. Laid out as wrapping chips rather than one
   run of text, so a swatch can never end a line away from its own name; it
   grows to at most three rows - enough for plastic's five categories at the
   widths the tiles are laid out in - and keeps the ring above it rather than
   pushing the card taller and taller. */
.wsp .wtile__cap{white-space:normal; min-height:32px; line-height:1.35;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:2px 9px; max-height:58px; overflow:hidden;}
.wsp .wtile__sub{display:inline-flex; align-items:center; gap:5px; min-width:0;}
.wsp .wtile__cap.is-tip{display:block; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

/* ═══ WHAT IS HELD, IN RUPEES ═════════════════════════════════════════════
   "Book value", not "worth" or "balance": it is what the priced certificates
   cost, read off the lot prices on the entries. It is not a market price and
   the product must not imply it is.

   The unpriced quantity sits beside the money rather than inside it. A holding
   half bought without a recorded price, carried in full at the half that had
   one, would read as a portfolio worth twice what anybody paid — and it would
   be believed, because it looks like a valuation. So the two are always shown
   together, and neither is allowed to stand for the other.
   ══════════════════════════════════════════════════════════════════════ */
.wbook{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 7px;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--hairline);
  font-size:12px; line-height:1.4;
}
.wbook b{font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.wbook i{font-style:normal; color:var(--muted-2);}
/* The unpriced remainder: present, quiet, and never mistaken for a total. */
.wbook em{
  font-style:normal; font-size:11px; color:var(--muted-2);
  padding:1px 7px; border-radius:999px;
  background:var(--paper); box-shadow:inset 0 0 0 1px var(--hairline);
}
.wbook--none{color:var(--muted-2); font-size:11.5px;}

/* On a tile the line is centred with the ring above it. */
.wtile .wbook{justify-content:center; text-align:center;}

/* On the hero it sits under the quantity strip, on the hero's own ground. */
.whero__book{
  padding:10px clamp(14px,3vw,22px) 14px;
}
.whero__book .wbook{
  margin-top:0; padding-top:0; border-top:0;
  color:rgba(255,255,255,.82);
}
.whero__book .wbook b{color:#FFF;}
.whero__book .wbook i{color:rgba(255,255,255,.62);}
.whero__book .wbook em{
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.whero__book .wbook--none{color:rgba(255,255,255,.6);}


/* ═══ A LOCKED SURFACE MAKING ITS OWN CASE ════════════════════════════════
   What the tool does, three reasons it earns its price, a sample of the real
   output, and the checkout underneath - so the reader decides and buys in one
   place instead of being sent to a pricing page to work out which plan it was
   they wanted. The sample carries the weight: somebody deciding whether to pay
   wants the shape of the output, not adjectives about it. */
.wups{max-width:940px; margin:0 auto; display:grid; gap:22px;}
.wups__top{display:grid; gap:8px;}
.wups__h{margin:2px 0 0; font-size:clamp(21px,3vw,30px); line-height:1.18; letter-spacing:-.01em;
  text-wrap:balance; color:var(--ink);}
.wups__lede{margin:0; max-width:64ch; font-size:15px; line-height:1.55; color:var(--muted);}
.wups__on{margin:4px 0 0; font-size:13px; color:var(--muted-2);}

.wups__pts{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px;}
.wups__pts li{display:grid; gap:5px; align-content:start; padding:15px 16px;
  border:1px solid var(--hairline); border-radius:12px; background:var(--surface);}
.wups__pts b{font-size:13.5px; color:var(--ink); line-height:1.3;}
.wups__pts span{font-size:12.5px; line-height:1.5; color:var(--muted);}

/* The sample. Set apart as a quotation would be, because that is what it is. */
.wups__demo{margin:0; padding:18px 20px; border-radius:14px;
  border:1px solid var(--hairline); background:var(--surface-2, var(--paper));
  border-left:3px solid var(--verified); display:grid; gap:7px;}
.wups__demo figcaption{font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);}
.wups__q{margin:0; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4;}
.wups__a{margin:0; font-size:13.5px; line-height:1.55; color:var(--muted);}
.wups__cite{margin:0; font-size:11.5px; line-height:1.45; color:var(--muted-2); font-style:italic;}

.wups__buy{padding:20px; border-radius:16px; border:1px solid var(--hairline);
  background:var(--surface);}
.wups__foot{margin:0;}

@media (max-width:640px){
  .wups{gap:18px;}
  .wups__buy{padding:16px;}
  .wups__demo{padding:15px 16px;}
}

/* ═══ THE WHOLE POSITION ═════════════════════════════════════════════════
   One screen, reached from the hero: the verdict, the streams, what falls
   due, and the waste. See panePosition() in sz-workspace.js.

   The hero is opened by a STRETCHED BUTTON. The button sits last in the
   card and is left position:static, so its ::after is placed against the
   card itself (.whero is position:relative) and covers all of it. Coming
   last in the markup it paints over the positioned parts before it, which
   is what makes the whole card take the click while its heading and figures
   stay a heading and figures. The ring's hover names give way to it.

   The band and the hero keep their own dark ground in both themes, with
   literal light text on it; everything else is on --surface with --ink, and
   no rule here sets --ink against --paper. */
.whero__go{
  position:static; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  margin:2px 20px 14px; padding:7px 13px 7px 14px; border-radius:999px;
  appearance:none; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08);
  font:inherit; font-size:12.5px; font-weight:600; line-height:1.2; color:#fff; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.whero__go span{display:inline-block; transition:transform .18s var(--ease);}
.whero__go::after{content:""; position:absolute; inset:0; z-index:1; border-radius:16px; cursor:pointer;
  transition:background .18s var(--ease), box-shadow .18s var(--ease);}
.whero__go:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34);}
.whero__go:hover::after{background:rgba(255,255,255,.035);}
.whero__go:hover span,
.whero__go:focus-visible span{transform:translateX(3px);}
.whero__go:focus{outline:none;}
.whero__go:focus-visible{background:rgba(255,255,255,.18); border-color:#6FE0B0;}
.whero__go:focus-visible::after{box-shadow:inset 0 0 0 2px #6FE0B0;}

/* ---- the board: the band and the streams across the top, what falls due
   and the waste side by side under them on a wide screen ---- */
.wpos{display:block;}
.wsp .wboard--pos{grid-template-columns:minmax(0,1fr);}
.wsp .wboard--pos > *{grid-column:1 / -1; margin:0;}
@media (min-width:1181px){
  .wsp .wboard--pos{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
  .wsp .wboard--pos > .wpos__duebox{grid-column:1;}
  .wsp .wboard--pos > .wpos__waste{grid-column:2;}
  .wsp .wboard--pos-solo > .wpos__duebox{grid-column:1 / -1;}
}

/* ---- A. the verdict band ---- */
.wpos__hero{padding:22px 24px 20px;}
.wpos__big{margin:8px 0 0; font-size:clamp(22px,2.8vw,32px); font-weight:600; letter-spacing:-.02em;
  line-height:1.15; color:#fff; text-wrap:balance;}
.wpos__big:focus{outline:none;}
.wpos__big:focus-visible{outline:2px solid #6FE0B0; outline-offset:4px; border-radius:4px;}
.wpos__line{margin:8px 0 0; max-width:86ch; font-size:13.5px; line-height:1.55; color:rgba(242,245,241,.8);
  font-variant-numeric:tabular-nums;}
.wpos__facts{margin:18px -24px 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  gap:1px; background:rgba(255,255,255,.08); border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);}
.wpos__fact{padding:12px 16px 13px 24px; min-width:0; background:rgba(4,18,15,.62);}
.wpos__fact dt{font-size:11.5px; color:rgba(242,245,241,.66);}
.wpos__fact dd{margin:4px 0 0; font-size:18px; font-weight:600; letter-spacing:-.01em; color:#fff;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.wpos__fact dd span{display:block; margin-top:3px; font-size:11.5px; font-weight:500; letter-spacing:0;
  line-height:1.4; color:rgba(242,245,241,.66);}
.wpos__step{margin:16px 0 0; border-radius:12px; background:var(--surface); color:var(--ink);
  box-shadow:0 10px 24px -16px rgba(0,0,0,.6);}
.wpos__stepk{margin:0; padding:11px 16px 0; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);}
.wpos__step .wsteps{padding:0 0 4px;}
.wpos__step .wstep{padding:8px 16px 10px;}

/* ---- B. the streams ---- */
.wpos__tbl tbody + tbody > tr:first-child > *{border-top:1px solid var(--hairline);}
.wpos__tbl .wpos__s > tr > *{border-bottom:0;}
.wpos__nm{display:inline-flex; align-items:center; gap:10px; min-width:0;}
.wpos__nm b{font-weight:600; color:var(--ink);}
.wpos__mark svg{width:16px; height:16px;}
.wpos__tog{display:inline-flex; align-items:center; gap:6px; margin:-4px 0 -4px -6px; padding:4px 8px 4px 4px;
  appearance:none; border:0; border-radius:9px; background:transparent; font:inherit; color:inherit;
  text-align:left; cursor:pointer;}
button.wpos__tog:hover{background:var(--hairline);}
.wpos__tog:focus-visible{outline:2px solid var(--verified); outline-offset:1px;}
.wpos__tog--none{cursor:auto; padding-left:26px;}
.wpos__chev{width:16px; height:16px; color:var(--muted-2); transition:transform .18s var(--ease);}
.wpos__tog[aria-expanded="true"] .wpos__chev{transform:rotate(90deg);}
.wpos__note{max-width:40ch; margin-top:3px; padding-left:60px; white-space:normal; line-height:1.4;}
.wpos__sub > *{background:var(--surface-2, var(--paper)); font-size:12.5px;}
.wpos__sub > th{padding-left:66px; font-weight:500;}
.wpos__sub .wpos__note{padding-left:19px;}
.wpos__subn{display:inline-flex; align-items:center; gap:9px;}
.wpos__mix,.wsplit td.wpos__mix{white-space:normal; min-width:180px;}
.wpos__mix b{font-weight:600; color:var(--ink);}
.wpos__quiet{color:var(--muted-2); font-weight:500;}
/* The reader's own targets on a stream, a line under its pill. */
.wpos__my{max-width:24ch; margin-top:4px; white-space:normal; line-height:1.4;}
.wpos__foot{margin:0; padding:6px 20px 18px; max-width:120ch; font-size:12px; line-height:1.55; color:var(--muted-2);}

/* ---- C. due next ---- */
.wpos__due{list-style:none; margin:0; padding:0 0 8px;}
.wpos__di{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:14px; padding:12px 20px;}
.wpos__di + .wpos__di{border-top:1px solid var(--hairline);}
.wpos__date{display:grid; justify-items:center; width:56px; padding:7px 0; border-radius:10px;
  border:1px solid var(--hairline); background:var(--surface-2, var(--paper)); line-height:1;}
.wpos__date b{font-size:19px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.wpos__date span{margin-top:4px; font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap;}
.wpos__di--overdue .wpos__date{border-color:rgba(154,44,44,.4); background:rgba(154,44,44,.06);}
.wpos__di--soon .wpos__date{border-color:color-mix(in srgb, var(--gold) 50%, transparent);}
.wpos__dk{margin:0; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2);}
.wpos__dtt{margin:2px 0 0; font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink); overflow-wrap:anywhere;}
.wpos__dm{display:block; margin-top:3px; font-size:12px; line-height:1.45; color:var(--muted);}
.wpos__dm .is-risk{color:#9A2C2C; font-weight:600;}
.wpos__dt .wbtn{margin-top:8px;}
.wpos__du{display:flex; flex-direction:column; align-items:flex-end; gap:5px;}
.wpos__when{font-size:11.5px; color:var(--muted-2); white-space:nowrap; font-variant-numeric:tabular-nums;}
.wpos__cite{margin-top:6px;}
.wpos__cite summary{width:max-content; cursor:pointer; font-size:11.5px; font-weight:600; color:var(--muted); border-radius:4px;}
.wpos__cite summary:hover{color:var(--ink);}
.wpos__cite summary:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wpos__cite p{margin:6px 0 0; padding:6px 0 6px 10px; border-left:2px solid var(--hairline);
  font-size:11.5px; line-height:1.5; color:var(--muted);}
.wpos__pad{padding:0 20px 18px;}

/* ---- D. the waste ---- */
.wpos__retc{white-space:normal !important; min-width:170px;}
.wpos__ret{display:block; max-width:30ch; line-height:1.35;}
.wpos__note.is-risk{color:#9A2C2C; font-weight:600;}

/* ---- narrower screens ---- */
@media (max-width:720px){
  .wsp .wpos__tbl .wpos__opt{display:none;}
  .wpos__note{padding-left:0;}
  .wpos__sub > th{padding-left:24px;}
}
@media (max-width:640px){
  .wpos__hero{padding:18px 16px 16px;}
  .wpos__facts{margin:16px -16px 0; grid-template-columns:repeat(2, minmax(0,1fr));}
  .wpos__fact{padding:11px 12px 12px 16px;}
  .wpos__fact dd{font-size:16px;}
  .wpos__di{grid-template-columns:auto minmax(0,1fr); padding:12px 16px;}
  .wpos__du{grid-column:2; flex-direction:row; align-items:center;}
  .whero__go{margin:2px 16px 14px;}
}

/* ---- the dark theme: the red that reads on a dark card ---- */
.wsp[data-theme="dark"] .wpos__dm .is-risk,
.wsp[data-theme="dark"] .wpos__note.is-risk{color:#F2877A;}
.wsp[data-theme="dark"] .wpos__di--overdue .wpos__date{border-color:rgba(242,135,122,.45); background:rgba(242,135,122,.08);}
.wsp[data-theme="dark"] .wpos__step{box-shadow:0 10px 24px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);}

@media (prefers-reduced-motion:reduce){
  .whero__go,.whero__go span,.whero__go::after,.wpos__chev{transition:none;}
  .whero__go:hover span,.whero__go:focus-visible span{transform:none;}
}
/* ═══ end of the whole position ════════════════════════════════════════ */

/* ═══ WINDOWS, PRICES AND THE CORNER PAIR ═════════════════════════════════
   The attention colour. A Not priced figure and an Unpriced -> Priced tag
   are things to act on or to notice, not faults, so they take the gold the
   Lapsing pill already uses - dark enough on white and light enough on the
   dark card to pass AA as text in both themes (#8A6212 on #FFFFFF 5.5:1;
   #E9C77D on #171C1B 10.6:1). The two tokens flip together. */
.wsp{--wattn:#8A6212; --wattn-soft:rgba(184,136,47,.14);}
.wsp[data-theme="dark"]{--wattn:#E9C77D; --wattn-soft:rgba(233,199,125,.12);}

/* NOT PRICED IS A BUTTON: coloured, underlined and tagged, so it reads as a
   control without depending on its colour. */
.wunp{display:inline-flex; align-items:center; gap:5px; min-height:32px; margin:-6px -8px; padding:6px 8px;
  appearance:none; border:0; border-radius:8px; background:transparent; cursor:pointer;
  font:inherit; font-weight:600; font-variant-numeric:tabular-nums; color:var(--wattn); white-space:nowrap;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px;
  transition:background .15s var(--ease);}
.wunp:hover{background:var(--wattn-soft); text-decoration-thickness:2px;}
.wunp:focus-visible{outline:2px solid var(--verified); outline-offset:1px;}
.wunp__i{flex:none; width:14px; height:14px;}
.wpos__unp .wunp{min-height:0; margin:-3px -5px; padding:3px 5px; font-size:inherit;}

/* UNPRICED -> PRICED, beside an entry that was given its price later. */
.wtag--later{color:var(--wattn); background:var(--wattn-soft); white-space:nowrap; vertical-align:middle;}
.winv__later{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0;}

/* What just happened, said once, in the dashboard's own words. */
.wdash__notice{display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:10px 14px; border-radius:10px;
  font-size:13px; font-weight:500; line-height:1.45; color:var(--ink); background:var(--verified-soft);
  border:1px solid color-mix(in srgb, var(--verified) 30%, transparent);}
.wdash__notice .wi{flex:none; width:16px; height:16px; color:var(--verified);}
.wdash__notice:focus{outline:none;}
.wdash__notice:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}

/* The position, in its window: one column, every block the window's full
   width. The window stops at 1120px, and at half of that the waste table
   (about 840px of columns) ran a third of itself off behind a sideways
   scroll - so due next and the waste are stacked in here, never side by
   side. */
.wsp .wwin--pos .wboard--pos{grid-template-columns:minmax(0,1fr);}
.wsp .wwin--pos .wboard--pos > .wpos__duebox,
.wsp .wwin--pos .wboard--pos > .wpos__waste{grid-column:1 / -1;}
/* NO SIDEWAYS SCROLL IN THE WINDOW, from a 1024px screen up (a 976px
   window). Every cell of .wsplit is nowrap, which on a page is right and
   in here put 1167px of columns into 1066px once a stream's sub-types
   were open. So in the window: tighter cells, headings, names, notes and
   the not-priced line may wrap, sub-types indent less, and counted is a
   note under the target instead of a column. Figures stay on one line. */
.wsp .wwin--pos .wpos__tbl th,
.wsp .wwin--pos .wpos__tbl td{padding-left:8px; padding-right:8px;}
.wsp .wwin--pos .wpos__tbl thead th{white-space:normal; vertical-align:bottom;}
.wsp .wwin--pos .wpos__tbl tbody th{white-space:normal; min-width:150px;}
.wsp .wwin--pos .wpos__tbl .wpos__nm{display:inline-flex;}
.wsp .wwin--pos .wpos__note{padding-left:30px;}
.wsp .wwin--pos .wpos__sub > th{padding-left:36px;}
.wsp .wwin--pos .wpos__sub .wpos__note{padding-left:19px;}
.wsp .wwin--pos .wpos__unp,
.wsp .wwin--pos .wpos__cnt{white-space:normal;}
.wsp .wwin--pos .wsplit td.wpos__mix{min-width:140px;}
.wsp .wwin--pos .wpos__retc{min-width:140px;}
/* The status cell may wrap. Its pill names whose target the row is judged
   against ("Short of the EPR target", "Short of your target") and the
   reader's own targets are a line under it; held to one line, those words
   would add about 100px to a table with under 80px to spare at 1024px.
   Wrapping, the column needs its longest word, about what "No target"
   took on one line before. */
.wsp .wwin--pos .wpos__tbl td.wpos__st{white-space:normal; min-width:104px;}
.wsp .wwin--pos .wpos__st .wpill{white-space:normal; max-width:100%;}
.wsp .wwin--pos .wpos__edit{padding:6px 10px;}
/* Edit, next to every stream: a real 44px control. */
.wsp .wpos__edit{min-height:44px; min-width:44px; padding:6px 12px; gap:6px; text-decoration:none;}
.wsp .wpos__edit .wi{width:15px; height:15px;}
.wpos__quietline{margin:0; padding:0 20px 16px; font-size:12px; line-height:1.5; color:var(--muted-2);}

/* ---- the corner pair ----
   ONE SIZE FOR BOTH. Add entry and Add target are one control in two words:
   the same width, height, padding, radius, type and 18px icon box, the same
   colours, shadow, hover and press (from .wfab), and the same right edge. They
   used to size to their labels, so the two stacked buttons ended at
   different places and read as unrelated. */
.wsp .wfab[data-fab-mode="add"],
.wsp .wfab--tgt{width:148px; min-width:0; height:48px; min-height:48px; padding:0 18px 0 16px;
  justify-content:flex-start; gap:10px; border-radius:999px; font-size:14px; font-weight:500; line-height:1;}
.wsp .wfab[data-fab-mode="add"] .wfab__i,
.wsp .wfab--tgt .wfab__i{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; font-size:0;}
.wsp .wfab[data-fab-mode="add"] .wfab__i .wi,
.wsp .wfab--tgt .wfab__i .wi{width:18px; height:18px;}
@media (max-width:560px){
  .wsp .wfab[data-fab-mode="add"],
  .wsp .wfab--tgt{width:52px; height:52px; min-height:52px; padding:0; justify-content:center;}
  .wsp .wfab[data-fab-mode="add"] .wfab__t,
  .wsp .wfab--tgt .wfab__t{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .wunp{transition:none;}
}
/* ═══ end of windows, prices and the corner pair ═════════════════════════ */

/* Settings: the company name printed on entry PDFs. */
.wset__company{width:min(420px,100%); min-height:44px; padding:10px 12px; border:1px solid var(--hairline); border-radius:var(--r-sm,8px); background:var(--surface); color:var(--ink); font:inherit;}
.wset__company:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}


/* ==========================================================================
   PREMIUM DARK (24 Sept 2026)
   The dark workspace read as bottle glass and algae: the page ground carried
   green pools, and every card and tile carried a green wash on top of that.
   The ground is now graphite, the card is a step lighter and the tile a step
   lighter again - three levels of lightness, not three greens - with one soft
   light from above. Colour is kept for what means something: emerald for
   good, gold for money and attention, coral for risk. Same palette as the
   phone app, so the two read as one product.
   ========================================================================== */
.wsp[data-theme="dark"]{
  background:
    radial-gradient(130% 52% at 50% -14%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(90% 50% at 0% 0%, rgba(85,214,166,.09), transparent 62%),
    radial-gradient(80% 44% at 100% 100%, rgba(226,190,114,.035), transparent 60%),
    var(--paper);
}

/* ==========================================================================
   THE LOCKED SURFACES, AS ADVERTISEMENTS (24 Sept 2026)
   A reader without the plan used to meet a paragraph and a list. They now meet
   the product: a framed shot of the real screen, three plain benefits, the
   plans side by side with what each opens, and the checkout. The shots are of
   a sample company and captioned so; every claim below them is one the
   product keeps.
   ========================================================================== */
.wad{max-width:1120px; margin:0 auto; display:grid; gap:34px;}
.wad__hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); gap:clamp(24px,4vw,56px); align-items:center;}
.wad__copy{display:grid; gap:14px; align-content:center;}
.wad__h{margin:0; font-size:clamp(28px,3.8vw,44px); line-height:1.08; letter-spacing:-.022em; font-weight:700;
  color:var(--ink); text-wrap:balance;}
.wad__h3{margin:2px 0 4px; font-size:clamp(20px,2.4vw,26px); line-height:1.15; letter-spacing:-.012em; color:var(--ink);}
.wad__lede{margin:0; max-width:52ch; font-size:16px; line-height:1.62; color:var(--muted);}
.wad__chips{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.wad__chips li{padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink);
  border:1px solid var(--hairline); background:var(--verified-soft);}
.wad__cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:6px;}
.wad__cta .wbtn{width:auto; min-width:170px;}
.wad__from{font-size:13px; line-height:1.45; color:var(--muted-2); max-width:34ch;}
.wad__from b{color:var(--ink); font-variant-numeric:tabular-nums;}

.wad__shot{margin:0; min-width:0;}
.wad__frame{border-radius:14px; overflow:hidden; border:1px solid var(--hairline); background:var(--surface);
  box-shadow:var(--shadow-lg);}
.wad__bar{display:flex; gap:6px; padding:9px 12px; border-bottom:1px solid var(--hairline); background:var(--surface-2, var(--surface));}
.wad__bar i{width:9px; height:9px; border-radius:50%; background:var(--hairline); box-shadow:inset 0 0 0 1px rgba(128,128,128,.25);}
.wad__frame img{display:block; width:100%; height:auto; background:#F4F5F1;}
.wad__shot figcaption{margin-top:9px; font-size:11.5px; line-height:1.4; color:var(--muted-2);}

.wad__pts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;}
.wad__pts li{display:grid; gap:7px; align-content:start; padding:18px 18px 19px; border-radius:14px;
  border:1px solid var(--hairline); border-top:2px solid var(--verified); background:var(--surface);}
.wad__pts b{font-size:15px; line-height:1.3; color:var(--ink);}
.wad__pts span{font-size:13.5px; line-height:1.55; color:var(--muted);}

.wad__trio{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px;}
.wad__card{display:grid; gap:8px; align-content:start; padding:12px 12px 18px; border-radius:16px;
  border:1px solid var(--hairline); background:var(--surface);}
.wad__card .wad__frame{box-shadow:none;}
.wad__card .wad__shot figcaption{display:none;}
.wad__card h3{margin:8px 6px 0; font-size:16px; color:var(--ink);}
.wad__card p{margin:0 6px; font-size:13.5px; line-height:1.55; color:var(--muted);}

.wad__plans{padding:clamp(18px,3vw,30px); border-radius:20px; border:1px solid var(--hairline); background:var(--surface);
  scroll-margin-top:14px;}
.wplans__terms{margin:14px 0 18px;}
.wplans__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:20px;}
.wplan{display:grid; gap:11px; align-content:start; text-align:left; cursor:pointer; padding:20px 20px 18px;
  border-radius:16px; border:1.5px solid var(--hairline); background:var(--paper); color:var(--ink); font:inherit;
  transition:border-color .16s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);}
.wplan:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline));}
.wplan.is-on{border-color:var(--verified); box-shadow:0 0 0 3px var(--verified-soft);}
.wplan:focus-visible{outline:2px solid var(--verified); outline-offset:3px;}
.wplan__top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.wplan__top b{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;}
.wplan__tag{font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.04em; padding:3px 9px; border-radius:999px;
  background:var(--verified-soft); color:var(--ink);}
.wplan__tag--all{background:var(--gold-soft); color:var(--gold);}
.wplan__price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.wplan__price em{font-style:normal; font-size:clamp(26px,2.6vw,32px); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.wplan__price small{font-size:12.5px; color:var(--muted-2);}
.wplan__line{font-size:13px; line-height:1.45; color:var(--muted);}
.wplan__list{display:grid; gap:9px; padding-top:13px; border-top:1px solid var(--hairline);}
.wplan__f{display:flex; align-items:center; gap:9px; font-size:13.5px; line-height:1.3;}
.wplan__f svg{flex:none; color:var(--verified);}
.wplan__f.is-off{opacity:.42;}
.wplan__f.is-off svg{color:var(--muted-2);}

/* Supreme is the whole product, so it is drawn as the deep card - the same
   treatment the marketing page's plan gives it. */
.wplan--supreme{background:linear-gradient(165deg,#17352E 0%,#0E211C 100%); border-color:#17352E; color:#F2F5F1;}
.wplan--supreme .wplan__top b{color:#E5BD6F;}
.wplan--supreme .wplan__line,.wplan--supreme .wplan__price small{color:rgba(242,245,241,.7);}
.wplan--supreme .wplan__list{border-top-color:rgba(255,255,255,.14);}
.wplan--supreme .wplan__tag--all{background:rgba(229,189,111,.16); color:#E5BD6F;}
.wplan--supreme .wplan__f svg{color:#5ED3A5;}
.wplan--supreme.is-on{border-color:#E5BD6F; box-shadow:0 0 0 3px rgba(229,189,111,.22);}

.wad__trust{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;}
.wad__trust li{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);}
.wad__trust svg{flex:none; color:var(--verified);}

@media (max-width:980px){
  .wad__hero{grid-template-columns:minmax(0,1fr);}
  .wad__cta .wbtn{width:100%;}
}
@media (max-width:640px){
  .wad{gap:26px;}
  .wad__plans{padding:16px;}
  .wplan{padding:16px;}
  .wad__trust{justify-content:flex-start;}
}
@media (prefers-reduced-motion:reduce){ .wplan{transition:none;} .wplan:hover{transform:none;} }
/* The plans section is the full width of the page; the checkout under the
   cards keeps a readable measure of its own. */
.wad .wad__plans.wbuy{max-width:none;}
.wad__plans .wbuy__total,.wad__plans > .wbtn,.wad__plans > [data-msg],.wad__plans > .wnote,.wad__plans > .wf,.wad__plans > .wflag,.wad__plans > .wbuy__legal{max-width:560px;}
/* The Terms and Refund policy, one quiet line under the Pay button. */
.wbuy__legal{margin:10px 0 0; font-size:12px; line-height:1.55; color:var(--muted-2);}
.wad__plans > .wbtn{width:100%;}

/* Shown for comparison, not offered: it does not open the surface being sold. */
.wplan.is-unavailable{cursor:default; opacity:.55;}
.wplan.is-unavailable:hover{transform:none; border-color:var(--hairline);}
/* The three cards line up: every picture is the same shape, cropped from the top. */
.wad__card .wad__frame img{aspect-ratio:16/10; object-fit:cover; object-position:top center;}
.wad__card:nth-child(2) .wad__frame img{object-position:center;}

/* ---- premium dark, second pass: the Library's material -------------------
   The Library's dark reads as glass because its surfaces are near-black with a
   lit top edge and a soft glow at one corner - never a wall of green. The hero
   card, the buttons and the floating buttons were still the last flat slabs of
   teal. They are now the same material: a dark face, a hairline lit from above,
   one faint emerald glow, and a LIGHT primary button, so the one thing to press
   is the brightest thing on the page. */
.wsp[data-theme="dark"] .whero{
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(120,235,190,.20), transparent 60%),
    linear-gradient(162deg, #2A5346 0%, #1C3A31 58%, #16302A 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 44px -26px rgba(0,0,0,.6);
}
.wsp[data-theme="dark"] .whero__orb--a,
.wsp[data-theme="dark"] .whero__orb--b{
  background:radial-gradient(circle at 30% 70%, rgba(255,255,255,.045), rgba(255,255,255,0) 70%);
}
.wsp[data-theme="dark"] .wbtn:not(.wbtn--ghost):not(.wbtn--danger):not(.wbtn--danger-quiet){
  background:linear-gradient(180deg, #F4F9F6, #CFE3D9);
  color:#0E1F1A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px -10px rgba(0,0,0,.7);
}
.wsp[data-theme="dark"] .wbtn:not(.wbtn--ghost):not(.wbtn--danger):not(.wbtn--danger-quiet):hover{
  background:linear-gradient(180deg, #FFFFFF, #E8EEEA);
}
.wsp[data-theme="dark"] .wbtn[disabled]{background:#2A423B; color:#9BB3A9; box-shadow:none;}
.wsp[data-theme="dark"] .wfab{
  background:linear-gradient(180deg, #34594D, #234139);
  color:#DCF2E9;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 14px 30px -12px rgba(0,0,0,.6);
}
.wsp[data-theme="dark"] .wstat__panel{
  background:linear-gradient(180deg, rgba(6,18,14,.42), rgba(6,18,14,.28));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.05);
}


/* ==========================================================================
   DEEP JADE (25 Sept 2026) - the research-backed dark theme.
   Grounds and cards are a low-chroma jade (hue ~172, chroma ~0.02), each step
   about 0.04 lighter in OKLCH, so depth reads as light rather than as green.
   Colour is kept for meaning: one mint accent (#47D9B0) for the primary action
   and focus, a separate green for "good", gold only for money, coral for risk.
   Glows appear in exactly one place, the hero panel. This block comes last on
   purpose: it supersedes the earlier dark passes above it.
   ========================================================================== */
.wsp[data-theme="dark"]{
  --paper:#0C1B17; --surface:#13241F; --surface-2:#1A2E28; --raised:#223832;
  --ink:#EEF3EF; --muted:#B9C8C1; --muted-2:#8FA39B;
  --hairline:#2A3F39;
  --verified:#6ACB86; --verified-soft:#16352A;
  --gold:#D4A54B; --gold-soft:#33291A;
  --wsp-chrome:#091512;
  --wsp-line:rgba(255,255,255,.07);
  --hl:inset 0 1px 0 rgba(255,255,255,.04);
  --wel-face:linear-gradient(transparent,transparent);
  --wcard-green:linear-gradient(transparent,transparent);
  --wtile-green:linear-gradient(transparent,transparent);
  --wel-1:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.30);
  --wel-2:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
  --wel-3:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 48px rgba(0,0,0,.40);
  --wel-in:inset 0 1px 3px rgba(0,0,0,.40);
  background:var(--paper);
}
.wsp[data-theme="dark"] .wbox,
.wsp[data-theme="dark"] .wstat,
.wsp[data-theme="dark"] .wtgt{border-color:var(--hairline);}
.wsp[data-theme="dark"] .wtile:not(.is-empty){background-color:var(--surface-2);}
.wsp[data-theme="dark"] .whero{
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(71,217,176,.22), transparent 60%),
    linear-gradient(160deg, #0E3328 0%, #0B2620 45%, #0C1B17 100%);
  border:1px solid #2A3F39;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.28);
}
.wsp[data-theme="dark"] .whero__orb--a,
.wsp[data-theme="dark"] .whero__orb--b{background:radial-gradient(circle at 30% 70%, rgba(255,255,255,.04), rgba(255,255,255,0) 70%);}
/* the primary action is the accent: mint, with the ground as its text */
.wsp[data-theme="dark"] .wbtn:not(.wbtn--ghost):not(.wbtn--danger):not(.wbtn--danger-quiet),
.wsp[data-theme="dark"] .wfab{
  background:#47D9B0; color:#0C1B17; border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -10px rgba(0,0,0,.6);
}
.wsp[data-theme="dark"] .wbtn:not(.wbtn--ghost):not(.wbtn--danger):not(.wbtn--danger-quiet):hover,
.wsp[data-theme="dark"] .wfab:hover{background:#6FE6C3;}
.wsp[data-theme="dark"] .wbtn:not(.wbtn--ghost):not(.wbtn--danger):not(.wbtn--danger-quiet):active,
.wsp[data-theme="dark"] .wfab:active{background:#35BF98;}
.wsp[data-theme="dark"] .wbtn[disabled]{background:#223832; color:#8FA39B; box-shadow:none;}
.wsp[data-theme="dark"] .wstat__panel{background:rgba(0,0,0,.18); box-shadow:inset 0 1px 3px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.04);}
.wsp[data-theme="dark"] .wpicks__b.is-on,
.wsp[data-theme="dark"] .wseg__b.is-on{background:#173B33; border-color:#173B33; color:#EEF3EF;}
.wsp[data-theme="dark"] .wmsg--you{background:#173B33; color:#EEF3EF;}
.wsp[data-theme="dark"] :focus-visible{outline-color:#47D9B0;}
.wsp[data-theme="dark"] .wf input:focus,
.wsp[data-theme="dark"] .wf select:focus,
.wsp[data-theme="dark"] .wf textarea:focus{box-shadow:var(--wel-in), 0 0 0 3px rgba(71,217,176,.35);}


/* THE FILING CALENDAR (D13-D16, D27) and the small tags of D32.
   Overdue is amber, not alarm red: it says "do this", and a return that may
   not apply to this entity is neutral and not counted as late. */
.wfil__review{margin-top:12px;border-top:1px solid var(--wsp-line);padding-top:6px}
.wfil__review>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.wfil__list{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px;}
.wfil{padding:12px 14px; border:1px solid var(--hairline); border-radius:12px; background:var(--wcard, transparent);}
.wfil--overdue{border-color:color-mix(in srgb, var(--wattn) 45%, transparent); background:var(--wattn-soft);}
.wfil--filed{border-color:color-mix(in srgb, var(--verified) 30%, transparent);}
.wfil__top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px;}
.wfil__st{flex:none; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); background:var(--hairline);}
.wfil__st--overdue{color:var(--wattn); background:var(--wattn-soft);}
.wfil__st--filed{color:var(--verified); background:var(--verified-soft);}
.wfil__meta,.wfil__note,.wfil__ack{margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted);}
.wfil__note{color:var(--ink);}
.wfil__acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.wfil__panel{margin-top:10px; padding:10px 12px; border-radius:10px; border:1px dashed var(--hairline);}
.wfil__panel[hidden]{display:none;}
.wfil__panel label{display:block; margin:8px 0 3px; font-size:12px; font-weight:600;}
.wfil__panel input{display:block; width:100%; max-width:360px;}
.wfil__panel .wbtn{margin-top:10px;}
.wfil__hist{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:12.5px; line-height:1.45;}
.wfil__hist li{display:grid; gap:2px;}
.wfil__why{color:var(--muted);}
.wfil__hist time{font-size:11.5px; color:var(--muted-2);}
.wtag--noref{color:var(--wattn); background:var(--wattn-soft); white-space:nowrap; vertical-align:middle;}

/* ═══ Movement (inflow + outflow in one card) and My returns (10 Oct 2026) ═══ */
.wstat--move{padding-bottom:14px;}
.wmv{display:grid; gap:8px; margin-top:12px;}
.wmv__row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:58px;
  text-align:left; padding:8px 12px; border-radius:12px; border:1px solid var(--hairline); background:transparent; color:inherit; font:inherit; cursor:pointer;}
.wmv__row:hover{background:var(--verified-soft);}
.wmv__row--out:hover{background:var(--gold-soft);}
.wmv__row:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wmv__tag{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink);}
.wmv__chart{min-width:0;}
.wmv__chart .wbars{width:100%; height:28px; display:block;}
.wmv__fig{display:grid; justify-items:end; text-align:right; line-height:1.2; min-width:0;}
.wmv__val{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.wmv__note{font-size:11px; color:var(--muted); max-width:15ch;}
.wmv__foot{justify-content:flex-start; padding:8px 2px 0;}
.wflow__switch{margin:0 0 14px; width:max-content; max-width:100%;}
.wflow__switch .wseg__b b{margin-left:5px; font-variant-numeric:tabular-nums;}

.wstat--returns .wret__cardbody{display:grid; gap:10px; padding:14px 0 16px;}
.wret__big{margin:0; font-size:26px; font-weight:700; letter-spacing:-.01em; line-height:1.1; color:var(--ink);}
.wstat--risk .wret__big{color:var(--wattn);}
.wret__nextline{font-size:13px; line-height:1.4; color:var(--muted);}
.wret__nextline b{color:var(--ink); font-weight:600;}
.wret__nextline i{font-style:normal; color:var(--muted-2);}
.wret__chips{display:flex; flex-wrap:wrap; gap:6px;}
.wretchip{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid var(--hairline); color:var(--muted); background:transparent;}
.wretchip.is-on{color:var(--ink); background:var(--wattn-soft); border-color:color-mix(in srgb, var(--wattn) 35%, transparent);}
.wretchip--ok{color:var(--verified); background:var(--verified-soft); border-color:transparent;}
.wretchip--note{color:#8A6212; background:var(--gold-soft); border-color:transparent;}

.wret__win{display:grid; gap:14px;}
.wret__tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;}
.wrett{padding:12px 14px; border-radius:14px; border:1px solid var(--hairline); display:grid; gap:2px; background:var(--wcard, transparent);}
.wrett b{font-size:24px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums;}
.wrett span{font-size:12px; color:var(--muted);}
.wrett--late.is-on{background:var(--wattn-soft); border-color:color-mix(in srgb, var(--wattn) 40%, transparent);}
.wrett--late.is-on b{color:var(--wattn);}
.wrett--ok.is-on b{color:var(--verified);}
@media (max-width:640px){ .wret__tiles{grid-template-columns:repeat(2, minmax(0,1fr));} }
.wret__bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;}
.wret__pills{display:flex; flex-wrap:wrap; gap:6px;}
.wret__pill{min-height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--hairline); background:transparent; color:var(--ink);
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;}
.wret__pill:hover{background:var(--verified-soft);}
.wret__pill.is-on{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.wret__pill:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wret__intro{max-width:72ch; margin:0;}
.wret__notes{padding:14px 18px;}
.wret__notes h3{margin:0 0 6px; font-size:14.5px;}
.wret__notes ul{margin:0; padding-left:18px; font-size:13px; line-height:1.55;}
.wret__list{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items:start;}

.wret{padding:16px 18px; border:1px solid var(--hairline); border-radius:16px; background:var(--wcard, transparent); display:grid; gap:10px; align-content:start; min-width:0;}
.wret--overdue{border-color:color-mix(in srgb, var(--wattn) 40%, transparent);}
.wret--filed{border-color:color-mix(in srgb, var(--verified) 28%, transparent);}
.wret__head{display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:space-between; align-items:flex-start;}
.wret__titles{min-width:0; flex:1 1 200px;}
.wret__title{margin:0; font-size:16px; font-weight:650; line-height:1.3; overflow-wrap:anywhere;}
.wret__orig{margin:2px 0 0; font-size:12px; color:var(--muted);}
.wret__tools{display:flex; flex-wrap:wrap; gap:6px;}
.wret__meta{margin:0; font-size:12.5px; line-height:1.45; color:var(--muted);}
.wret__status{margin:0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; font-size:13px; line-height:1.45;}
.wret__stxt{flex:1 1 220px; min-width:0;}
.wret__edit{padding:12px 14px; border-radius:12px; border:1px dashed var(--hairline); display:grid; gap:8px;}
.wret__edit label{font-size:12px; font-weight:600;}
.wret__edit input{width:100%; max-width:420px;}
.wret__edit .whint{margin:0;}
.wret__editacts{display:flex; flex-wrap:wrap; gap:8px;}
.wret__src{margin:0; font-size:12px; line-height:1.5; color:var(--muted); display:flex; gap:6px; align-items:flex-start;}
.wret__src .wi{flex:none; margin-top:2px;}
.wret__src--ok{color:var(--verified);}
.wret__src--gap{color:#8A6212;}
.wret__rule>summary{cursor:pointer; min-height:36px; display:flex; align-items:center; font-size:12.5px; font-weight:600;}
.wret__rule p{margin:2px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted);}
.wret .wfil__list{margin-top:2px;}
.wret__empty{padding:30px 20px; text-align:center; border:1px dashed var(--hairline); border-radius:16px; display:grid; gap:8px; justify-items:center;}
.wret__empty h3{margin:0; font-size:16px;}
.wret__empty p{margin:0; max-width:52ch; font-size:13px; line-height:1.55; color:var(--muted);}
.wret__aside{padding:6px 2px;}
.wret__aside>summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600;}
.wret__aside ul{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px;}
.wret__aside li{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; padding:8px 12px; border:1px solid var(--hairline); border-radius:12px; font-size:12.5px;}
.wret__live{margin:0; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;}
.wsp[data-theme="dark"] .wret__src--gap, .wsp[data-theme="dark"] .wretchip--note{color:#E9C77D;}
@media (prefers-reduced-motion:no-preference){ .wmv__row,.wret__pill{transition:background .15s ease;} }
.wret__stream{margin:0 0 4px; display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.wret__stream .wmk{display:inline-block; width:9px; height:9px; border-radius:3px; flex:none;}

/* ═══ The filing form (10 Oct 2026): a label above its box, its help under it, nothing beside a label ═══ */
.wfld{display:grid; gap:4px; margin:12px 0 0;}
.wfld label{font-size:12.5px; font-weight:600; color:var(--ink);}
.wfld .wopt{margin-left:6px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2);}
.wfld input{display:block; width:100%; max-width:420px; min-height:40px; padding:8px 11px; font:inherit; font-size:14px;
  color:var(--ink); background:var(--surface); border:1px solid var(--hairline); border-radius:10px;}
.wfld input[type="date"]{max-width:220px;}
.wfld input:focus-visible{outline:2px solid var(--verified); outline-offset:1px; border-color:var(--verified);}
.wfld .whint{margin:0; font-size:12px; line-height:1.5; color:var(--muted);}
.wfil__rec>summary{cursor:pointer; min-height:40px; display:flex; align-items:center; font-weight:600; font-size:13px;}
.wfil__form{padding:2px 0 4px;}
.wfil__form .wbtn,.wfil__panel .wbtn{width:auto; margin-top:14px;}
.wfil__panel .wfld:first-child{margin-top:0;}
.wfil__noack{display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:600; color:#8A6212; background:var(--gold-soft);}
.wsp[data-theme="dark"] .wfil__noack{color:#E9C77D;}
.wfil__memo{margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted);}

/* ═══ The way back: an arrow, not a word, set into the title (10 Oct 2026) ═══ */
.wdash__title .has-back{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-items:start;}
.wdash__title .has-back>*{grid-column:2;}
.wdash__title .has-back>.wback{grid-column:1; grid-row:1 / span 4; margin:2px 0 0;}
.wback{display:inline-grid; place-items:center; width:40px; height:40px; min-height:40px; padding:0; gap:0;
  border:1px solid var(--hairline); border-radius:12px; background:var(--surface); color:var(--ink);
  box-shadow:var(--wel-1); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);}
.wback:hover{color:var(--ink); border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline)); background:var(--surface); transform:translateX(-2px);}
.wback .wi{width:18px; height:18px;}

/* ═══ A whole card is a button: the arrow stretches over it; rows and edit buttons stay above (10 Oct 2026) ═══ */
.wstat--link{position:relative; cursor:pointer; background-image:var(--wel-face);
  transition:border-color .16s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);}
.wstat--link:hover{transform:translateY(-2px); box-shadow:var(--wel-2); border-color:color-mix(in srgb, var(--verified) 45%, var(--hairline));}
.wstat--link:active{transform:translateY(0); box-shadow:var(--wel-1);}
.wstat--link .wstat__go{position:static;}
.wstat--link .wstat__go::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; cursor:pointer;}
.wstat--link:hover .wstat__go{color:var(--ink);}
.wstat--link:has(.wstat__go:focus-visible){outline:2px solid var(--verified); outline-offset:2px;}
.wstat--link .wstat__go:focus-visible{outline:none;}
.wstat--link .wmv__row{position:relative; z-index:2;}
/* the Base row is part of the card: only the pencil is a control of its own (15 Oct 2026) */
.wstat--link .wstat__base{pointer-events:none;}
.wstat--link .wstat__base button{pointer-events:auto; position:relative; z-index:2;}
.wstat--link[role=button]{outline:none;}
.wstat--link[role=button]:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ .wstat--link,.wback{transition:none;} .wstat--link:hover,.wback:hover{transform:none;} }

/* a disclosure chevron on every expandable line in My returns (the flex summaries lose the browser's marker) */
.wret summary,.wret__aside>summary{list-style:none;}
.wret summary::-webkit-details-marker,.wret__aside>summary::-webkit-details-marker{display:none;}
.wret summary::before,.wret__aside>summary::before{content:""; flex:none; width:7px; height:7px; margin:0 11px 0 3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s var(--ease); opacity:.7;}
.wret details[open]>summary::before,.wret__aside[open]>summary::before{transform:rotate(45deg);}
@media (prefers-reduced-motion:reduce){ .wret summary::before,.wret__aside>summary::before{transition:none;} }

/* ═══ My returns setup (10 Oct 2026): which role is yours, stream by stream ═══ */
.wret__setup{display:grid; gap:14px; max-width:760px;}
.wsetup__stream{margin:0; padding:14px 16px 12px; border:1px solid var(--hairline); border-radius:16px; background:var(--wcard, transparent); display:grid; gap:8px; min-width:0;}
.wsetup__stream legend{padding:0 6px; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:650; color:var(--ink);}
.wsetup__stream legend .wmk{display:inline-block; width:10px; height:10px; border-radius:3px; flex:none;}
.wsetup__stream legend em{font-style:normal; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:1px 7px; border-radius:999px; color:#8A6212; background:var(--gold-soft);}
.wsetup__role{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:10px 12px; border:1px solid var(--hairline); border-radius:12px; cursor:pointer; min-height:48px;}
.wsetup__role:hover{background:var(--verified-soft);}
.wsetup__role:has(input:checked){border-color:color-mix(in srgb, var(--verified) 55%, var(--hairline)); background:var(--verified-soft);}
.wsetup__role:has(input:focus-visible){outline:2px solid var(--verified); outline-offset:2px;}
.wsetup__role input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--verified); cursor:pointer;}
.wsetup__txt{display:grid; gap:2px; min-width:0;}
.wsetup__txt b{font-size:14px; font-weight:650; color:var(--ink);}
.wsetup__what{display:grid; gap:1px; font-size:12.5px; line-height:1.45; color:var(--muted);}
.wsetup__what span span{color:var(--muted-2);}
.wsetup__bar{display:flex; flex-wrap:wrap; gap:10px;}
.wret__pending{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; padding:12px 16px; border:1px solid color-mix(in srgb, var(--gold) 45%, var(--hairline)); border-radius:14px; background:var(--gold-soft);}
.wret__pending p{margin:0; font-size:13px; line-height:1.5; color:var(--ink);}
.wret__chg{margin-left:auto;}
@media (prefers-reduced-motion:reduce){ .wsetup__role{transition:none;} }
.wret__setup .wbox{padding:16px 18px;}
.wret__setup .wbox h3{margin:0 0 6px;}
.wret__setup .wbox p{margin:0; max-width:68ch;}

/* the board says its figures carry evidence notes, and where they are (10 Oct 2026) */
.wevid{display:flex; align-items:center; gap:10px; width:100%; margin:0 0 14px; padding:10px 14px; min-height:44px; text-align:left;
  border:1px solid var(--hairline); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px; cursor:pointer;}
.wevid:hover{border-color:var(--muted-2);}
.wevid:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wevid .wi{width:16px; height:16px; flex:none;}
.wevid__go{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-weight:600; white-space:nowrap;}

/* plastic's holding, asked by kind of certificate (11 Oct 2026) */
.winv__kind{display:grid; gap:6px; margin:0 0 14px; padding:12px 14px; border:1px solid var(--hairline); border-radius:12px;}
.winv__kind h4{margin:0; font-size:13.5px; font-weight:600; color:var(--ink);}
.winv__kind .whint{margin:0;}
.winv__kind--old{border-style:dashed;}

/* an upgrade priced less the unused time of the plan it replaces (12 Oct 2026) */
.wbuy__credit{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.wbuy__credit--off{color:var(--verified);}
.wbuy__quote{margin:8px 0 12px;}
.wbuy__quote--shut{color:var(--ink);}

/* DASHBOARD SCREENS ARE CENTRED (15 Oct 2026). The overview already sat in a centred column; Settings, the set-up
   (Inventory) screen and the My returns set-up are narrower than that column and hugged its left edge, with the
   title block left of them. The whole column - title block and content together - is now the width of its
   content and centred. A browser without :has() keeps the content centred under a full-width title. */
.wdash .wset,.wdash .winv,.wdash .wret__setup,.wdash .wsetup{margin-left:auto; margin-right:auto;}
.wsp__in--wide.wdash:has(> .wset){max-width:880px;}
.wsp__in--wide.wdash:has(> .winv){max-width:980px;}
.wsp__in--wide.wdash:has(> .wret__setup),.wsp__in--wide.wdash:has(> .wsetup){max-width:760px;}
.wdash__title{text-align:left;}
@media (max-width:640px){
  .wdash .wset,.wdash .winv,.wdash .wret__setup,.wdash .wsetup{width:100%;}
}

/* ==========================================================================
   DARK, REFINED (15 Oct 2026) - Dashboard, Saved, Account and the shared controls.
   The Deep Jade cards sat only a hair above their ground (card #13241F on #0C1B17),
   so a card read as a faint outline rather than as a surface; the floating buttons
   were the one bright mint fill on a calm screen and fought the cards; and a ghost
   button (Sign out, Change password) picked up the filled-button gradient. Now:
   - the ground goes a step darker and the card a step lighter, so elevation is
     visible (card on ground 1.10:1 -> 1.22:1, tile on card 1.13:1 -> 1.17:1) and
     the edge is firmer (1.76:1 against a card). Contrast of text, measured 15 Oct
     2026: ink 13.6:1 on a card, 11.7:1 on a tile; muted 8.8:1 and 7.5:1; muted-2
     5.7:1 and 4.9:1; on --raised (hover) it stays at its old value, 4.98:1;
   - the floating buttons are a raised teal surface with a mint edge and mint icon,
     not a mint fill, and keep a visible focus ring;
   - ghost buttons are transparent with an edge, as in the light theme.
   The primary buttons inside cards stay mint: that is the one accent.
   ========================================================================== */
.wsp[data-theme="dark"]{
  --paper:#091512; --surface:#162922; --surface-2:#1E352E;
  --hairline:#355149;
  --wsp-chrome:#071110;
}
.wsp[data-theme="dark"] .wbtn--ghost{
  background:transparent; color:var(--ink); border:1px solid var(--hairline); box-shadow:none;
}
.wsp[data-theme="dark"] .wbtn--ghost:hover{background:var(--surface-2); border-color:#4A6A60; box-shadow:none;}
.wsp[data-theme="dark"] .wbtn--ghost.wbtn--danger-quiet{color:#F2877A;}
.wsp[data-theme="dark"] .wfab,
.wsp[data-theme="dark"] .wfab:hover{
  background:#1F3A33; color:#E6F6EF; border:1px solid rgba(71,217,176,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 12px 26px -12px rgba(0,0,0,.7);
}
.wsp[data-theme="dark"] .wfab:hover{background:#27463D; border-color:rgba(71,217,176,.75);}
.wsp[data-theme="dark"] .wfab:active{background:#1A322C;}
.wsp[data-theme="dark"] .wfab .wfab__i{color:#47D9B0;}
.wsp[data-theme="dark"] .wfab:focus-visible{outline:2px solid #47D9B0; outline-offset:3px;}

/* SAVED AND ACCOUNT ARE CENTRED (16 Oct 2026): the column sits in the middle of the page, with its heading, and its
   blocks are centred in it instead of hugging the left edge. */
.wsp__in--mid{max-width:860px;}
.wsp__in--mid > .eyebrow-w,.wsp__in--mid > h2,.wsp__in--mid > .sub,.wsp__in--mid > p{text-align:center;}
.wsp__in--mid .wres,.wsp__in--mid .wdocs,.wsp__in--mid .wdanger{margin-left:auto;margin-right:auto;}
.wsp__in--mid .wres{width:100%;}
.wsp__in--mid > .sub{margin-left:auto;margin-right:auto;}
.wsp__in--mid > .wbtn{display:flex;justify-content:center;width:100%;max-width:560px;margin-left:auto;margin-right:auto;}

/* ==========================================================================
   PREMIUM DASHBOARD LOOK (16 Oct 2026) - colour, surface, depth and type only.
   No element moves, no label changes, no logic: every rule below is scoped to
   a theme and changes paint (tokens, backgrounds, borders, shadows, strokes).
   ========================================================================== */

/* ---- LIGHT: white cards on a cool mint-white ground, a pale hero, a mint ring ---- */
.wsp[data-theme="light"]{
  --paper:#F6FAF8; --surface:#FFFFFF; --surface-2:#F0F8F4;
  --ink:#10231E; --muted:#526B63; --muted-2:#5F7369;
  --hairline:#DDEAE5;
  --verified:#0B7F55; --verified-soft:#E4F5EC;
  --wel-face:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 55%);
  --wel-1:0 1px 2px rgba(15,65,47,.04), 0 6px 24px rgba(15,65,47,.055);
  --wel-2:0 2px 4px rgba(15,65,47,.05), 0 12px 32px rgba(15,65,47,.09);
  --wel-3:0 4px 10px rgba(15,65,47,.06), 0 20px 48px rgba(15,65,47,.12);
  --wel-in:inset 0 2px 4px rgba(15,65,47,.10);
  background:
    radial-gradient(90% 60% at 18% -12%, rgba(49,201,145,.11), transparent 60%),
    radial-gradient(70% 50% at 104% 4%, rgba(67,141,232,.05), transparent 60%),
    #F6FAF8;
}
.wsp[data-theme="light"] .wbox,
.wsp[data-theme="light"] .wstat,
.wsp[data-theme="light"] .wtgt{background-color:#fff; border:1px solid var(--hairline);}
.wsp[data-theme="light"] .wtile:not(.is-empty){background-color:#fff; border-color:var(--hairline);}
.wsp[data-theme="light"] .wtile:hover{border-color:#BFE3D2;}

/* the hero: white fading to mint, ink text, a mint ring that glows a little */
.wsp[data-theme="light"] .whero{
  color:var(--ink); border:1px solid var(--hairline);
  background:
    radial-gradient(70% 90% at 92% 8%, rgba(49,201,145,.22), transparent 62%),
    linear-gradient(150deg, #FFFFFF 0%, #F2FAF6 55%, #E4F5EC 100%);
  box-shadow:var(--wel-2);
}
.wsp[data-theme="light"] .whero__orb--a,
.wsp[data-theme="light"] .whero__orb--b{background:radial-gradient(circle at 30% 70%, rgba(49,201,145,.10), rgba(49,201,145,0) 70%);}
.wsp[data-theme="light"] .whero__eyebrow{color:var(--muted);}
.wsp[data-theme="light"] .whero__h,
.wsp[data-theme="light"] .whero__ringtxt b,
.wsp[data-theme="light"] .whero__fact dd,
.wsp[data-theme="light"] .whero__key b,
.wsp[data-theme="light"] .whero__book .wbook b{color:var(--ink);}
.wsp[data-theme="light"] .whero__sub,
.wsp[data-theme="light"] .whero__fact dt,
.wsp[data-theme="light"] .whero__ringtxt span,
.wsp[data-theme="light"] .whero__ringtxt b small,
.wsp[data-theme="light"] .whero__key li,
.wsp[data-theme="light"] .whero__book .wbook i,
.wsp[data-theme="light"] .whero__book .wbook--none{color:var(--muted);}
.wsp[data-theme="light"] .whero__strip{background:rgba(255,255,255,.62); border-top:1px solid var(--hairline);}
.wsp[data-theme="light"] .whero__fact + .whero__fact{border-left-color:var(--hairline);}
.wsp[data-theme="light"] .whero .wring__track{stroke:rgba(15,65,47,.09);}
.wsp[data-theme="light"] .whero .wring__arc--ok{stroke:#1DBB84; filter:drop-shadow(0 2px 5px rgba(29,187,132,.35));}
.wsp[data-theme="light"] .whero .wring__arc--gold{stroke:#E4A52B;}
.wsp[data-theme="light"] .whero .wring__arc--risk{stroke:#D9534F;}
.wsp[data-theme="light"] .whero .wdot--none{border-color:var(--muted-2);}
.wsp[data-theme="light"] .whero__meter{background:rgba(15,65,47,.10);}
.wsp[data-theme="light"] .whero .wnet--hero{background:#E4F5EC; color:var(--verified);}
.wsp[data-theme="light"] .whero__go{border-color:#BFE3D2; background:#E9F7F0; color:#0B6B49;}
.wsp[data-theme="light"] .whero__go:hover{background:#D9F1E5; border-color:#9ED6BD;}
.wsp[data-theme="light"] .whero__go:hover::after{background:rgba(14,138,94,.04);}

/* icon chips: a tinted square with a clear glyph */
.wsp[data-theme="light"] .wstat__ico,
.wsp[data-theme="light"] .wtgt__ico{background:#E4F5EC; color:#0B7F55; box-shadow:inset 0 0 0 1px rgba(14,138,94,.12);}
.wsp[data-theme="light"] .wstat--risk .wstat__ico{background:#FDEDEA; color:#C2453B; box-shadow:inset 0 0 0 1px rgba(194,69,59,.14);}
.wsp[data-theme="light"] .wstat__value,
.wsp[data-theme="light"] .wmv__val{color:var(--ink); font-variant-numeric:tabular-nums;}

/* controls: primary is a refined green, secondary is white with a soft edge */
.wsp[data-theme="light"] .wbtn:not(.wbtn--ghost):not(.wbtn--danger):not(.wbtn--danger-quiet){
  background:linear-gradient(180deg, #0D8C5C, #0A7F55); color:#fff; border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px -6px rgba(10,127,85,.45);
}
.wsp[data-theme="light"] .wbtn:not(.wbtn--ghost):not(.wbtn--danger):not(.wbtn--danger-quiet):hover{background:linear-gradient(180deg, #10996A, #0B8558);}
.wsp[data-theme="light"] .wbtn--ghost{background:#fff; border:1px solid var(--hairline); color:var(--ink);}
.wsp[data-theme="light"] .wbtn--ghost:hover{background:#F0F8F4; border-color:#BFE3D2;}
.wsp[data-theme="light"] .wfab{background:linear-gradient(180deg, #0D8C5C, #0A7F55); color:#fff; border:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -8px rgba(10,127,85,.5);}
.wsp[data-theme="light"] .wfab:hover{background:linear-gradient(180deg, #10996A, #0B8558);}
.wsp[data-theme="light"] .wicon,
.wsp[data-theme="light"] .wchip{background-color:#fff; border-color:var(--hairline);}
/* A SELECTED STREAM MUST SHOW IN LIGHT MODE (owner, 31 Oct 2026): the white rule above, and the white face gradient, beat the
   checked style. Selected is a green fill, a solid green edge and bold text. */
.wsp[data-theme="light"] .wchip:has(input:checked){background-color:#D7F0E4; background-image:none; border-color:#0B7F55; box-shadow:inset 0 0 0 1px #0B7F55; color:#0A5C3E; font-weight:600;}
.wsp[data-theme="light"] :focus-visible{outline-color:#0B7F55;}

/* the rail: ink-green stays, the active item is a pale mint key with a green edge */
.wsp[data-theme="light"] .wrail__i.is-on{background:rgba(49,201,145,.16); color:#D8F7EA;}

/* ---- DARK: emerald glow, glass cards, outlined pills (the attached reference) ---- */
.wsp[data-theme="dark"] .wstat,
.wsp[data-theme="dark"] .wbox,
.wsp[data-theme="dark"] .wtgt{
  border-color:rgba(70,200,150,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px -14px rgba(0,0,0,.6);
}
.wsp[data-theme="dark"] .whero{
  border-color:rgba(70,200,150,.28);
  background:
    radial-gradient(80% 100% at 88% 6%, rgba(52,229,168,.20), transparent 60%),
    linear-gradient(155deg, #0F3A2E 0%, #0A2A22 52%, #08201A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(52,229,168,.05);
}
.wsp[data-theme="dark"] .whero .wring__track{stroke:rgba(255,255,255,.09);}
.wsp[data-theme="dark"] .whero .wring__arc--ok{stroke:#34E5A8; filter:drop-shadow(0 0 7px rgba(52,229,168,.6));}
.wsp[data-theme="dark"] .whero__go{border-color:rgba(52,229,168,.55); background:rgba(52,229,168,.06); color:#E6FBF3;}
.wsp[data-theme="dark"] .whero__go:hover{background:rgba(52,229,168,.14); border-color:rgba(52,229,168,.8);}
.wsp[data-theme="dark"] .wstat__ico,
.wsp[data-theme="dark"] .wtgt__ico{background:rgba(52,229,168,.12); color:#47D9B0; box-shadow:inset 0 0 0 1px rgba(52,229,168,.28);}
.wsp[data-theme="dark"] .wstat--risk .wstat__ico{background:rgba(242,135,122,.12); color:#F2877A; box-shadow:inset 0 0 0 1px rgba(242,135,122,.28);}
.wsp[data-theme="dark"] .wmv__row{background:rgba(255,255,255,.02); border-color:rgba(70,200,150,.14);}
/* Measured 16 Oct 2026 (WCAG ratios): ink 16.4:1 on a card, muted 5.8:1, muted-2 5.1:1 (4.7:1 on the mint surface), brand green text 5.0:1 on white and 4.65:1 on mint, white on the primary button 5.0:1 at its darker end and 4.3:1 at the lighter top edge. */

/* prices are GST-inclusive (Terms, "Prices"); the plan prices say so (16 Oct 2026) */
.wbuy__tier em small,.wplan__price small{font-weight:500;}
.wbuy__gst{margin:4px 0 0; font-size:12px; color:var(--muted); text-align:right;}

/* reminders for returns: the switch, and the window with them off (16 Oct 2026) */
.wret__rem{margin:0 0 12px;}
.wret__sw{display:flex; align-items:center; gap:12px; width:100%; max-width:560px; text-align:left; padding:10px 12px; min-height:48px; border:1px solid var(--hairline); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; cursor:pointer;}
.wret__sw:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wret__swtrack{flex:0 0 auto; position:relative; width:40px; height:24px; border-radius:99px; background:var(--hairline); transition:background .18s var(--ease);}
.wret__swtrack i{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s var(--ease);}
.wret__sw[aria-checked="true"] .wret__swtrack{background:var(--verified);}
.wret__sw[aria-checked="true"] .wret__swtrack i{transform:translateX(16px);}
.wret__swtxt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.wret__swtxt b{font-size:13.5px; font-weight:600;}
.wret__swtxt small{font-size:12px; color:var(--muted); line-height:1.4;}
.wret__win.is-quiet .wret--overdue .wfil__st,.wret__win.is-quiet .wret--overdue .wret__stxt,
.wret__win.is-quiet .wret--soon .wfil__st,.wret__win.is-quiet .wret--soon .wret__stxt,
.wret__win.is-quiet .wret--upcoming .wfil__st,.wret__win.is-quiet .wret--upcoming .wret__stxt,
.wret__win.is-quiet .wfil__st--overdue{display:none;}
.wret__win.is-quiet .wfil--overdue{border-color:var(--hairline); background:var(--wcard, transparent);}
@media (prefers-reduced-motion:reduce){.wret__swtrack,.wret__swtrack i{transition:none;}}

/* ==========================================================================
   GLASS (16 Oct 2026): frosted cards over lit grounds, with a leaf and a target drawn as inline SVG.
   Paint only: no markup, label, position or logic changes. Every picture is behind the content
   (z-index:-1 inside an isolated card) and ignores the pointer, so nothing can be covered or blocked.
   Where a generated image is supplied later it replaces the inline drawing by changing one variable.
   ========================================================================== */
.wsp{--wimg-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'%3E%3Cg fill='none' stroke='%231DBB84' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 138C60 100 58 70 62 30'/%3E%3Cpath d='M62 90C92 84 108 58 100 22C70 24 54 54 62 90Z' fill='rgba(49,201,145,.16)'/%3E%3Cpath d='M60 112C34 108 20 86 26 58C52 62 66 86 60 112Z' fill='rgba(49,201,145,.16)'/%3E%3Cpath d='M62 90C78 70 90 50 98 28' stroke-opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); --wimg-target:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 110'%3E%3Cg fill='none' stroke='%231DBB84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='70' cy='62' r='38'/%3E%3Ccircle cx='70' cy='62' r='26'/%3E%3Ccircle cx='70' cy='62' r='13' fill='rgba(49,201,145,.20)'/%3E%3Cpath d='M70 62L118 14M118 14l-15 2M118 14l-2 15'/%3E%3Cpath d='M14 104c34-14 78-14 112 0' stroke-opacity='.45'/%3E%3C/g%3E%3C/svg%3E");}
.wsp[data-theme="dark"]{--wimg-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'%3E%3Cg fill='none' stroke='%235EE6B0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 138C60 100 58 70 62 30'/%3E%3Cpath d='M62 90C92 84 108 58 100 22C70 24 54 54 62 90Z' fill='rgba(52,229,168,.16)'/%3E%3Cpath d='M60 112C34 108 20 86 26 58C52 62 66 86 60 112Z' fill='rgba(52,229,168,.16)'/%3E%3Cpath d='M62 90C78 70 90 50 98 28' stroke-opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); --wimg-target:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 110'%3E%3Cg fill='none' stroke='%235EE6B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='70' cy='62' r='38'/%3E%3Ccircle cx='70' cy='62' r='26'/%3E%3Ccircle cx='70' cy='62' r='13' fill='rgba(52,229,168,.22)'/%3E%3Cpath d='M70 62L118 14M118 14l-15 2M118 14l-2 15'/%3E%3Cpath d='M14 104c34-14 78-14 112 0' stroke-opacity='.45'/%3E%3C/g%3E%3C/svg%3E");}

/* the ground is lit, so the frosted cards have something to blur */
.wsp[data-theme="dark"]{
  background:
    radial-gradient(55% 48% at 88% -6%, rgba(40,210,150,.20), transparent 62%),
    radial-gradient(46% 42% at 4% 100%, rgba(20,150,105,.16), transparent 62%),
    radial-gradient(40% 36% at 52% 55%, rgba(30,120,90,.10), transparent 70%),
    linear-gradient(180deg, #06120E, #0A1A15);
}
.wsp[data-theme="light"]{
  background:
    radial-gradient(55% 48% at 88% -6%, rgba(49,201,145,.20), transparent 62%),
    radial-gradient(46% 42% at 2% 100%, rgba(120,200,235,.14), transparent 62%),
    radial-gradient(40% 36% at 55% 50%, rgba(49,201,145,.07), transparent 70%),
    linear-gradient(180deg, #F3FAF7, #EAF6F1);
}
/* a faint leaf in the top-right corner of the page, behind everything */
.wsp::before{content:""; position:absolute; top:-10px; right:-30px; width:380px; height:440px; z-index:-1; pointer-events:none;
  background:var(--wimg-leaf) no-repeat right top/contain; opacity:.10;}
.wsp[data-theme="light"]::before{opacity:.16;}

/* FROSTED CARDS */
.wsp[data-theme="dark"] .wbox,
.wsp[data-theme="dark"] .wstat,
.wsp[data-theme="dark"] .wtgt{
  background:linear-gradient(155deg, rgba(36,98,78,.46) 0%, rgba(11,36,29,.66) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(100,230,185,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 24px rgba(52,229,168,.04), 0 16px 40px -18px rgba(0,0,0,.65);
}
.wsp[data-theme="light"] .wbox,
.wsp[data-theme="light"] .wstat,
.wsp[data-theme="light"] .wtgt{
  background:linear-gradient(155deg, rgba(255,255,255,.90) 0%, rgba(238,249,243,.74) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(125%); backdrop-filter:blur(16px) saturate(125%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(140,205,178,.40), inset 0 1px 0 #fff, 0 12px 34px -14px rgba(15,65,47,.16);
}
.wsp[data-theme="dark"] .wtile:not(.is-empty){background-color:rgba(255,255,255,.035); border-color:rgba(100,230,185,.16);}
.wsp[data-theme="light"] .wtile:not(.is-empty){background-color:rgba(255,255,255,.7);}

/* the banner (evidence note): a frosted pill with a green wash and its Read link at the right */
.wsp[data-theme="dark"] .wevid{
  background:linear-gradient(100deg, rgba(40,150,110,.34), rgba(14,52,41,.55) 60%);
  border:1px solid rgba(100,230,185,.30); color:#EAF7F1; border-radius:14px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.wsp[data-theme="dark"] .wevid .wi{color:#47D9B0;}
.wsp[data-theme="light"] .wevid{background:linear-gradient(100deg, rgba(228,245,236,.95), rgba(255,255,255,.8) 70%); border:1px solid rgba(140,205,178,.55); border-radius:14px;}
.wevid__go{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:600;}

/* icon chips: a rounded square with a lit green face */
.wsp[data-theme="dark"] .wstat__ico,
.wsp[data-theme="dark"] .wtgt__ico{
  background:linear-gradient(145deg, #1F8062, #0F4A39); color:#D5FCEB;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(120,240,200,.30), 0 6px 14px -6px rgba(0,0,0,.6);
}
.wsp[data-theme="light"] .wstat__ico,
.wsp[data-theme="light"] .wtgt__ico{
  background:linear-gradient(145deg, #E9F8F1, #CDEFE0); color:#0B7F55;
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(14,138,94,.18);
}

/* the hero ring: a thicker, glowing ring in dark; a mint one in light */
.wsp[data-theme="dark"] .whero{
  background:
    radial-gradient(75% 95% at 90% 6%, rgba(52,229,168,.26), transparent 60%),
    linear-gradient(155deg, rgba(20,86,66,.70) 0%, rgba(8,32,26,.86) 100%);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(100,230,185,.30);
}
.wsp[data-theme="dark"] .whero .wring__arc--ok{filter:drop-shadow(0 0 9px rgba(52,229,168,.75));}
.wsp[data-theme="dark"] .whero__ring{filter:drop-shadow(0 0 18px rgba(52,229,168,.18));}

/* pictures behind the content of two cards: a target in My targets (while it is empty) and a leaf in My returns */
.wsp .wtgt,.wsp .wstat--returns{position:relative; isolation:isolate; overflow:hidden;}
.wsp .wtgt:has(.wtgt__empty)::before{
  content:""; position:absolute; right:6px; bottom:0; width:64%; height:44%; z-index:-1; pointer-events:none;
  background:var(--wimg-target) no-repeat right bottom/contain; opacity:.55;
}
.wsp .wstat--returns::before{
  content:""; position:absolute; right:4px; bottom:2px; width:46%; height:58%; z-index:-1; pointer-events:none;
  background:var(--wimg-leaf) no-repeat right bottom/contain; opacity:.55;
}
.wsp[data-theme="light"] .wtgt:has(.wtgt__empty)::before,
.wsp[data-theme="light"] .wstat--returns::before{opacity:.75;}

/* outlined glass pills for the secondary actions on the hero */
.wsp[data-theme="dark"] .whero__go{background:rgba(52,229,168,.07); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}

/* when the browser has no backdrop-filter the cards keep a solid, readable fill */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wsp[data-theme="dark"] .wbox,.wsp[data-theme="dark"] .wstat,.wsp[data-theme="dark"] .wtgt{background:#12302A;}
  .wsp[data-theme="light"] .wbox,.wsp[data-theme="light"] .wstat,.wsp[data-theme="light"] .wtgt{background:#fff;}
}
@media (prefers-reduced-transparency:reduce){
  .wsp[data-theme="dark"] .wbox,.wsp[data-theme="dark"] .wstat,.wsp[data-theme="dark"] .wtgt{background:#12302A; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .wsp[data-theme="light"] .wbox,.wsp[data-theme="light"] .wstat,.wsp[data-theme="light"] .wtgt{background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;}
}


/* BOTANICAL WORKSPACE — owner reference, October 2026.
   Presentation only. Stream colours still encode data; all actions and API payloads are unchanged. */
.wsp{isolation:isolate; --wimg-target:url("img/dash/jade-target.webp"); --wimg-leaf:url("img/dash/jade-leaves.webp");}
.wsp[data-theme="dark"],.wsp[data-theme="light"]{--wimg-target:url("img/dash/jade-target.webp");--wimg-leaf:url("img/dash/jade-leaves.webp");}
.wsp[data-theme="light"]{--ink:#102E28;--muted:#50675F;--muted-2:#597369;--verified:#08794F;--hairline:#D4E9DF;--surface:#FFF;--paper:#F3FAF7;}
.wsp[data-theme="dark"]{--ink:#EDF9F3;--muted:#B9D2C8;--muted-2:#A5C4B8;--verified:#4FE3B2;--hairline:#2E6250;--surface:#10372C;--paper:#061E17;}
.wsp::before{top:-80px;right:-60px;width:520px;height:650px;opacity:.12;}
.wsp[data-theme="light"]::before{opacity:.09;}
.wsp__pane{padding:clamp(20px,2.6vw,40px) clamp(16px,2.6vw,42px) 80px;}
.wsp__pane--flush{padding:0;}
.wsp__body{min-height:0;}
.wsp__body:has(> .wsp__pane--flush.is-active){overflow:hidden;}
.wsp .wsp__pane--flush.is-active{height:100%;}
.wsp .xframe{min-height:0;height:100%;}
.wsp__in--wide{max-width:1500px;}
.wsp h2{font-size:clamp(25px,2.5vw,36px);letter-spacing:-.035em;line-height:1.16;}
.wdash__title{margin-bottom:22px;}
.wevid{min-height:46px;align-items:center;gap:10px;padding:11px 16px;}
.wboard{gap:16px;}
.wboard > *{min-width:0;}
.wsp .whero,.wsp .wstat,.wsp .wtgt,.wsp .wbox{border-radius:18px;}
.wsp[data-theme="dark"] .whero,.wsp[data-theme="dark"] .wstat,.wsp[data-theme="dark"] .wtgt,.wsp[data-theme="dark"] .wbox{
 background:radial-gradient(ellipse at 0 0,rgba(37,140,104,.20),transparent 65%),linear-gradient(135deg,rgba(16,64,49,.93),rgba(6,34,26,.94));
 border-color:#28654F;box-shadow:inset 0 1px 0 #FFFFFF12,0 12px 32px -20px #0008;
}
.wsp[data-theme="light"] .whero,.wsp[data-theme="light"] .wstat,.wsp[data-theme="light"] .wtgt,.wsp[data-theme="light"] .wbox{
 background:linear-gradient(140deg,#FFFFFFFA,#F5FCF8F5);border-color:#D4E9DF;box-shadow:0 8px 26px -15px #28604B36,inset 0 1px 0 #FFF;
}
.whero__main{padding:24px;gap:16px;}
.whero__h{font-size:clamp(30px,3vw,48px);letter-spacing:-.035em;}
.whero__eyebrow{line-height:1.5;letter-spacing:.075em;}
.whero__ring{width:clamp(112px,11vw,158px);height:clamp(112px,11vw,158px);}
.whero__strip{margin-top:auto;}
.whero__fact{padding:14px;}
.whero__fact dt{line-height:1.35;}
.whero__fact dd{white-space:normal;overflow-wrap:anywhere;}
.whero__go{min-height:44px;}
.wtgt{padding-bottom:120px;}
.wsp .wtgt:has(.wtgt__empty)::before{width:145px;height:130px;right:8px;bottom:-8px;opacity:.90;}
.wsp .wtgt:not(:has(.wtgt__empty)){padding-bottom:22px;}
.wsp .wstat--returns::before{width:112px;height:150px;right:-26px;bottom:-22px;opacity:.25;}
.wstat--returns{padding-bottom:20px;}
.wstat--returns .wstat__head,.wstat--returns p,.wstat--returns button{position:relative;}
.wsp[data-theme="light"] .wstat--returns::before{opacity:.20;}
.wstat__head{gap:10px;}
.wstat__ico,.wtgt__ico{flex-shrink:0;}
.wmv__row{gap:8px;min-height:76px;}
.wmv__val{font-variant-numeric:tabular-nums;}
.wtiles{align-items:stretch;gap:14px;}
.wtile{min-width:0;gap:14px;padding:16px;}
.wtile__name{white-space:normal;overflow:visible;line-height:1.35;}
.wtile__body{min-width:0;gap:14px;flex:1;}
.wtile__stats{align-content:center;}
.wtile__extra{margin-top:auto;}
.wsp[data-theme="dark"] .wtile:not(.is-empty){background:linear-gradient(145deg,#154B3A70,#062B2270);border-color:#28654F;}
.wsp[data-theme="light"] .wtile:not(.is-empty){background:#FFFFFFD9;border-color:#D4E9DF;}
.wsp[data-theme="dark"] .wring__arc--ok{filter:drop-shadow(0 0 4px #36DFA680);}
.wsp[data-theme="light"] .wrail{background:linear-gradient(180deg,#F8FFFB,#ECF7F1);--wsp-t1:#123E2C;--wsp-t2:#3D6554;--wsp-t3:#4B705F;--wsp-line:#CCE5D8;}
.wsp[data-theme="light"] .wrail__i.is-on{color:#075B3D;background:#DDF5E9;border-color:#B6E4CF;}
.wsp[data-theme="light"] .wrail__av{color:#075B3D;background:#DDF5E9;}
.wsp[data-theme="light"] .wrail__ico svg{filter:none;}
.wsp[data-theme="dark"] .wrail{background:linear-gradient(180deg,#061E18,#09271E);}
.wsp :is(button,input,select,textarea):focus-visible{outline:2px solid var(--verified);outline-offset:3px;}
@media(min-width:1180px){
 .wboard{grid-template-columns:repeat(5,minmax(0,1fr));}
 .wbox--steps{min-width:0;}
 .wstep{grid-template-columns:auto minmax(0,1fr);padding:12px 16px;}
 .wstep > button{grid-column:2;justify-self:start;}
}
@media(min-width:721px) and (max-width:1179px){
 .wboard{grid-template-columns:repeat(2,minmax(0,1fr));}
 .whero{grid-column:1/-1;}
 .wboard > .wtgt,.wboard > .wstat{grid-column:auto;}
 .wboard > .wbox{grid-column:1/-1;}
 .wtiles{grid-template-columns:repeat(2,minmax(0,1fr));}
 .wtgt{min-height:230px;}
}
@media(max-width:720px){
 .wsp__pane{padding:20px 14px calc(110px + env(safe-area-inset-bottom));}
 .wsp__pane--flush{padding:0;}
 .wsp__in,.wsp__in--wide{width:100%;min-width:0;}
 .wdash__title{align-items:flex-start;gap:16px;}
 .wsp h2{font-size:28px;}
 .wsp .sub{font-size:14px;}
 .wboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .wboard > .whero,.wboard > .wbox,.wboard > .wstat{grid-column:1/-1;}
 .wboard > .wtgt,.wboard > .wstat--move{grid-column:1/-1;}
 .whero__main{padding:20px 16px;gap:8px;}
 .whero__h{font-size:36px;}
 .whero__eyebrow{font-size:10px;letter-spacing:.04em;}
 .whero__ring{width:112px;height:112px;}
 .whero__ringtxt b{font-size:27px;}
 .whero__strip{grid-template-columns:repeat(3,minmax(0,1fr));}
 .whero__fact,.whero__fact + .whero__fact{padding:12px 10px;}
 .whero__fact dt{font-size:11px;}
 .whero__fact dd{font-size:15px;}
 .wtiles{grid-template-columns:1fr;padding:0 14px 14px;}
 .wtile{padding:16px;}
 .wtile__ring{width:90px;height:90px;}
 .wtile__name{font-size:16px;}
 .wbox__head{padding:18px 16px 14px;flex-wrap:wrap;}
 .wevid{padding:12px;align-items:flex-start;}
 .wevid__go{flex-shrink:0;}
 .wsp .wtgt:has(.wtgt__empty){min-height:220px;padding-bottom:88px;}
 .wsp .wtgt:has(.wtgt__empty)::before{height:130px;width:145px;}
 .wrail{padding-bottom:calc(6px + env(safe-area-inset-bottom));}
 .wrail__i{min-height:48px;}
 .wrail__cap{font-size:9px;line-height:1.2;}
 .wsp input,.wsp select,.wsp textarea{font-size:16px;max-width:100%;}
 .wsp :is(.wbtn,.wicon,.wchip){min-height:44px;}
 .wsp table{font-size:12px;}
 .wfab{max-width:calc(50vw - 24px);white-space:normal;}
}
@media(max-width:360px){
 .whero__main{flex-wrap:wrap;}
 .whero__ring{margin-inline:auto;}
 .wrail__cap{font-size:8px;}
}
/* Phone GPUs need no stacked blur layers; the opaque tints retain the same look. */
@media(max-width:720px),(prefers-reduced-transparency:reduce){
 .wsp :is(.whero,.wbox,.wstat,.wtgt,.wevid){backdrop-filter:none;-webkit-backdrop-filter:none;}
}
.wsp .whero__h{font-size:clamp(30px,3vw,46px);}
.wsp .whero__main{padding:24px;}
.wsp .whero__ring{width:140px;height:140px;}
.wsp .wtile__inv{display:flex;align-items:center;gap:14px;min-height:108px;}
.wsp .wtile__ring--inv{width:104px;height:104px;}
.wsp .wtile__cap{flex:1;justify-content:flex-start;text-align:left;max-height:none;overflow:visible;}
.wsp .wtile__flow{grid-template-columns:repeat(3,minmax(0,1fr));}
.wsp .wtile__flow > span:last-child{grid-column:auto;}
.wsp .wtile__flow > span + span{border-left:1px dashed var(--hairline);}
.wsp[data-theme="dark"] :is(.wicon,.whero__go,.wstat__go,.wtgt__go){background:#123E30;background-image:none;color:#E8FFF4;border-color:#3B8064;box-shadow:inset 0 1px 0 #FFFFFF12;}
.wsp[data-theme="dark"] :is(.wicon,.whero__go,.wstat__go,.wtgt__go)::after{background:none;}
.wsp[data-theme="dark"] .whero__go{color:#E8FFF4;}
.wsp[data-theme="light"] :is(.wicon,.whero__go,.wstat__go,.wtgt__go){background:#F4FCF8!important;color:#14533B!important;border-color:#BFDCCD;box-shadow:inset 0 1px 0 #FFF;}
.wsp[data-theme] :is(.wicon,.whero__go,.wstat__go,.wtgt__go)::after{content:none!important;}
.wsp[data-theme="dark"] :is(.wicon,.whero__go,.wstat__go,.wtgt__go){background:#123E30!important;color:#E8FFF4!important;}
@media(max-width:720px){
 .wsp .whero__main{padding:20px 16px;flex-direction:row;align-items:center;flex-wrap:nowrap;}
 .wsp .whero__copy{flex:1;}
 .wsp .whero__h{font-size:36px;}
 .wsp .whero__ring{width:112px;height:112px;}
 .wsp .wtile__ring--inv{width:96px;height:96px;}
 .wsp .wtilew .wtile__head{padding-right:96px;}
 .wsp .wtile__pm,.wsp .wtile__rm{width:44px;height:44px;top:8px;}
 .wsp .wtile__pm{right:54px;}
 .wsp .wtile__rm{right:8px;opacity:1;}
}

/* Compact decorative target: subordinate to live text in both themes. */
.wsp .wtgt{justify-content:flex-start;}
.wsp .wtgt:has(.wtgt__empty){padding-bottom:108px;}
.wsp .wtgt:has(.wtgt__empty)::before{
 width:120px;height:108px;right:calc(50% - 60px);bottom:12px;
 background-position:center;background-size:contain;
 opacity:.65;mix-blend-mode:screen;
 -webkit-mask-image:radial-gradient(ellipse at center,#000 42%,transparent 76%);
 mask-image:radial-gradient(ellipse at center,#000 42%,transparent 76%);
}
.wsp[data-theme="light"] .wtgt:has(.wtgt__empty)::before{opacity:.62;mix-blend-mode:multiply;}
@media(max-width:720px){
 .wsp .wtgt:has(.wtgt__empty){min-height:0;padding:16px;gap:10px;}
 .wsp .wtgt:has(.wtgt__empty) .wtgt__fig,
 .wsp .wtgt:has(.wtgt__empty) .wtgt__empty{max-width:calc(100% - 94px);}
 .wsp .wtgt:has(.wtgt__empty)::before{width:100px;height:106px;right:8px;bottom:8px;}
 .wsp .wtgt__head{gap:10px;}
 .wsp .wtgt__ico{width:36px;height:36px;border-radius:11px;}
 .wsp .wtgt__label{font-size:11px;}
 .wsp .wstat{padding:16px;}
 .wsp .wmv__row{min-height:58px;}
 .wsp .wtile{gap:10px;padding:14px;}
 .wsp .wtile__inv{min-height:84px;gap:12px;}
 .wsp .wtile__ring--inv{width:80px;height:80px;}
}

/* Phone density only. Desktop geometry and all original actions stay intact. */
.wsp .wphone-more{display:none;}
@media(max-width:720px){
 .wsp .wdash__title{margin-bottom:12px;gap:10px;}
 .wsp .whero__main{padding:14px;}
 .wsp .whero__ring{width:88px;height:88px;}
 .wsp .whero__h{font-size:30px;}
 .wsp .whero__ringtxt b{font-size:22px;}
 .wsp .whero__fact,.wsp .whero__fact + .whero__fact{padding:8px;}
 .wsp .wboard > .wstat--move,.wsp .wboard > .wstat--returns{grid-column:span 1;}
 .wsp .wstat__head{gap:6px;flex-wrap:wrap;}
 .wsp .wstat__head h3{font-size:13px;}
 .wsp .wstat__ico{width:30px;height:30px;}
 .wsp .wstat--returns h4{font-size:19px;}
 .wsp .wmv__row{flex-wrap:wrap;padding:8px;min-height:0;}
 .wsp .wmv__row + .wmv__row{margin-top:6px;}
 .wsp .wmv__base{flex-wrap:wrap;gap:6px;}
 .wsp .wbox__head{padding:14px;gap:8px;}
 .wsp .wbox__head p{font-size:12px;line-height:1.4;}
 .wsp .wbox--tiles:not(.is-phone-expanded) .wtilew:nth-child(n+3),
 .wsp .wbox--steps:not(.is-phone-expanded) .wstep:nth-child(n+3){display:none;}
 .wsp .wphone-more{display:flex;justify-content:center;margin:0 14px 14px;width:calc(100% - 28px);min-height:44px;}
 .wsp .wtiles{gap:10px;}
 .wsp .wtile__inv{min-height:68px;}
 .wsp .wtile__ring--inv{width:64px;height:64px;}
 .wsp .wtile__flow{padding-top:8px;}
 .wsp .wsteps{gap:6px;}
}

@media(max-width:720px){
 .wsp .wstats-head{margin-top:16px;justify-content:space-between;}
 .wsp .wstats-head .wphone-more{width:auto;margin:0;padding:8px 12px;}
 .wsp .wstats-head > p{flex-basis:100%;}
 .wsp .wstats-head:not(.is-phone-expanded) + .wstats{display:none;}
}

.wbuy__invoice{min-width:0;border:1px solid var(--hairline);border-radius:12px;padding:16px;gap:12px;margin:16px 0;}
.wbuy__invoice legend{padding:0 6px;font-weight:600;}
.wbuy__invoice :is(input,select){width:100%;min-width:0;max-width:100%;}
@media(max-width:720px){.wbuy__invoice{padding:12px;}.wbuy__invoice :is(input,select){font-size:16px;min-height:44px;}}

/* THE ACCOUNT PAGE AS STACKED SECTIONS, and the profile menu as a vertical list (16 Oct 2026) */
.wacct{display:flex; flex-direction:column; align-items:stretch; gap:16px;}
.wacct > .eyebrow-w,.wacct > h2{margin:0; text-align:center;}
.wacct__card,.wacct .wdanger{width:100%; max-width:600px; margin:0 auto; padding:18px 20px; border:1px solid var(--hairline); border-radius:16px; background:var(--surface); box-shadow:var(--wel-1); display:flex; flex-direction:column; gap:12px;}
.wacct__card h3,.wacct .wdanger h3{margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em;}
.wacct__card .wres{max-width:none; margin:0; border:0; padding:0; box-shadow:none; background:transparent;}
.wacct__card > .wbtn,.wacct__card > a.wbtn{width:100%; max-width:none; justify-content:center;}
.wacct__note{margin:0; font-size:12.5px; line-height:1.5; color:var(--muted);}
.wacct__devs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.wacct__dev{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--hairline);}
.wacct__dev:first-child{border-top:0;}
.wacct__devi{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--verified-soft); color:var(--verified);}
.wacct__devi .wi{width:16px; height:16px;}
.wacct__devt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.wacct__devt b{font-size:13.5px; font-weight:600;}
.wacct__devt small{font-size:12px; color:var(--muted);}
.wacct__tag{font-style:normal; font-size:11px; font-weight:700; padding:1px 8px; margin-left:6px; border-radius:99px; background:var(--verified-soft); color:var(--verified);}
.wacct__all{align-self:flex-start;}
@media (max-width:520px){ .wacct__dev{grid-template-columns:auto minmax(0,1fr);} .wacct__dev .wbtn{grid-column:1 / -1; width:100%;} }
.prof__row{flex-direction:column; align-items:stretch; gap:0;}
.prof__link{display:flex; justify-content:flex-start; width:100%; padding:10px 2px; text-decoration:none; font-size:14px; color:var(--ink); border-top:1px solid var(--hairline);}
.prof__row .prof__link:first-child{border-top:0;}
.prof__link::after{content:"\203A"; margin-left:auto; color:var(--muted-2); font-size:18px;}
.prof__link:hover{background:var(--surface-2, transparent);}
.prof__link--out{color:#9A2C2C;}

/* OVERFLOW FIXES from the measured pass of 16 Oct 2026 (360 to 1920 px, every E-Resources screen, signed in and free) */
.winv__body{grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr));}
.winv__kind,.winv__body > *{min-width:0;}
@media (max-width:420px){
  .wset__card{padding-left:14px; padding-right:14px;}
  .winv__body{padding:0 12px 14px;}
  .winv__kind{padding:10px 12px;}
  .wlines__row{grid-template-columns:minmax(0,1fr) minmax(0,120px) 38px;}
}
/* In & out and My returns side by side clipped their own text on a phone ("came in this y"); under 560 px each takes a full row */
@media (max-width:560px){
  .wsp .wboard > .wstat--move,.wsp .wboard > .wstat--returns{grid-column:1 / -1;}
}
/* the little bar chart in In & out drew past the card on a narrow card (1280 px, five columns); it now stays inside its cell and gives way when the card is too narrow for it */
.wmv__chart{overflow:hidden;}
.wstat--move{container-type:inline-size;}
@container (max-width:300px){ .wmv__row{grid-template-columns:auto minmax(0,1fr);} .wmv__chart{display:none;} .wmv__fig{justify-items:end;} }

/* phone: the floating buttons tuck away while reading down the page (see build() in sz-workspace.js) */
@media (max-width:720px){
  .wsp .wfab,.wsp .wfab--tgt{transition:transform .22s var(--ease), opacity .18s var(--ease), visibility 0s linear 0s;}
  .wsp.is-tucked .wfab,.wsp.is-tucked .wfab--tgt{transform:translateX(calc(100% + 28px)); opacity:0; visibility:hidden; pointer-events:none; transition:transform .22s var(--ease), opacity .18s var(--ease), visibility 0s linear .22s;}
  /* room under the last card so the buttons never sit on the last line */
  .wsp .wsp__pane:not(.wsp__pane--flush){padding-bottom:calc(150px + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion:reduce){ .wsp .wfab,.wsp .wfab--tgt,.wsp.is-tucked .wfab,.wsp.is-tucked .wfab--tgt{transition:none;} }

/* Overview density: four summaries and the first stream row on a laptop.
   Content determines height; no fixed-height clipping or disabled scrolling.
   Detail windows, forms and narrow touch layouts retain their own spacing. */
.wsp.is-launch.is-in,.wsp.is-launch.is-in .wrail,.wsp.is-launch.is-in .wsp__body{transition:none;}
.wsp.is-launch .wsp__pane.is-enter{animation:none;}
.whero__legend{position:relative;z-index:2;padding:0 16px 8px;color:var(--muted);font-size:12px;}
.whero__legend summary{cursor:pointer;min-height:28px;line-height:28px;}
.whero__legend .whero__key{padding:8px 0;}
@media (pointer:coarse){.whero__legend summary{min-height:44px;line-height:44px;}}
@media (min-width:980px){
  .wsp__pane:has(.wdash--overview){padding:20px 24px 64px;}
  .wdash--overview .wdash__title{margin-bottom:16px;gap:12px;}
  .wdash--overview .wdash__title h2{font-size:28px;line-height:1.2;}
  .wdash--overview > .wboard:not(.wboard--ledger){grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
  .wdash--overview .wboard > .whero{grid-column:span 2;}
  .wdash--overview .wboard > .wtgt,.wdash--overview .wboard > .wstat{grid-column:span 1;}
  .wdash--overview .wboard > .wbox--tiles{grid-column:span 4;}
  .wdash--overview .wboard > .wbox--steps{grid-column:span 1;}
  .wdash--overview .whero__main{padding:14px 16px;gap:12px;}
  .wdash--overview .whero__h{margin:6px 0;font-size:30px;}
  .wdash--overview .whero__ring{width:96px;height:96px;}
  .wdash--overview .whero__ringtxt b{font-size:26px;}
  .wdash--overview .whero__sub{font-size:12px;line-height:1.4;}
  .wdash--overview .whero__fact,.wdash--overview .whero__fact + .whero__fact{padding:8px 10px;}
  .wdash--overview .whero__key{gap:4px 10px;padding:0 16px 8px;}
  .wdash--overview .whero__book{padding:6px 16px;}
  .wdash--overview .whero__go{min-height:36px;margin:0 16px 12px;}
  .wdash--overview .wtgt,.wdash--overview .wtgt:has(.wtgt__empty){min-height:0;padding:14px;gap:12px;}
  .wdash--overview .wtgt:has(.wtgt__empty)::before{width:80px;height:80px;opacity:.3;}
  .wdash--overview .wtgt__empty{position:relative;z-index:1;}
  .wdash--overview .wtgt__head,.wdash--overview .wstat__head{gap:8px;}
  .wdash--overview .wtgt__ico,.wdash--overview .wstat__ico{width:32px;height:32px;}
  .wdash--overview .wtgt__label{letter-spacing:.04em;}
  .wdash--overview .wstat{padding:14px;}
  .wdash--overview .wstat__head h3{font-size:13px;}
  .wdash--overview .wmv{margin-top:10px;gap:6px;}
  .wdash--overview .wmv__row{min-height:52px;padding:8px;gap:6px;}
  .wdash--overview .wmv__foot{padding-top:8px;}
  .wdash--overview .wstat--returns .wret__cardbody{gap:8px;padding:10px 0 0;}
  .wdash--overview .wstat--returns h4{font-size:21px;}
  .wdash--overview .wbox__head{padding:14px 16px 10px;}
  .wdash--overview .wtiles{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px;padding:0 16px 16px;}
  .wdash--overview .wtile{padding:12px;gap:10px;}
  .wdash--overview .wtile__inv{min-height:64px;gap:10px;}
  .wdash--overview .wtile__ring--inv{width:64px;height:64px;}
  .wdash--overview .wtile__head{gap:8px;}
  .wdash--overview .wtile__name{font-size:13px;}
  .wdash--overview .wtile__flow,.wdash--overview .wtile__extra{padding-top:8px;}
}
@media (min-width:980px) and (max-width:1179px){
  .wdash--overview .wdash__title{flex-wrap:wrap;}
  .wdash--overview .whero__ring{width:80px;height:80px;}
  .wdash--overview .wstat__ico,.wdash--overview .wtgt__ico{display:none;}
  .wdash--overview .wmv__chart{display:none;}
  .wdash--overview .wtile__inv{flex-wrap:wrap;}
}

/* Restored stream-card spacing and larger, optically centred ring figures. */
.wsp .wdash--overview .wtile{padding:16px;gap:14px;}
.wsp .wdash--overview .wtile__head{gap:10px;}
.wsp .wdash--overview .wtile__name{font-size:15px;line-height:1.35;}
.wsp .wdash--overview .wtile__inv{min-height:108px;gap:14px;flex-wrap:nowrap;}
.wsp .wdash--overview .wtile__ring--inv{width:104px;height:104px;flex:0 0 104px;}
.wsp .wdash--overview .whero__ring{width:116px;height:116px;flex:0 0 116px;}
.wsp .wtile__pct,.wsp .whero__ringtxt{text-align:center;font-variant-numeric:tabular-nums;}
.wsp .wtile__pct > span{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.wsp .wtile__ring--inv .wtile__pct .wtile__num{display:flex;flex-direction:column;align-items:center;font-size:min(24px,calc(124cqi / var(--chars,6)));line-height:1.05;letter-spacing:0;}
.wsp .wtile__ring--inv .wtile__num small{display:block;margin:3px 0 0;line-height:1;font-size:11px;letter-spacing:0;}
.wsp .wtile__ring--inv .wtile__pct em{font-size:9px;letter-spacing:.04em;margin-top:4px;line-height:1;}
.wsp .whero__ring .whero__ringtxt b{display:flex;flex-direction:column;align-items:center;line-height:1.05;letter-spacing:0;font-size:min(28px,calc(124cqi / var(--chars,6)));}
.wsp .whero__ringtxt b small{display:block;margin-top:4px;line-height:1;letter-spacing:0;}
@media(min-width:980px) and (max-width:1179px){
 .wsp .wdash--overview .wtile__inv{flex-wrap:wrap;justify-content:center;}
 .wsp .wdash--overview .wtile__cap{text-align:center;justify-content:center;}
 .wsp .wdash--overview .whero__ring{width:104px;height:104px;flex-basis:104px;}
}
@media(max-width:720px){
 .wsp .wdash--overview .wtile__ring--inv{width:96px;height:96px;flex-basis:96px;}
 .wsp .wdash--overview .wtile__inv{min-height:100px;}
 .wsp .wdash--overview .whero__ring{width:104px;height:104px;flex-basis:104px;}
}

@media(min-width:980px){
 .wsp .wdash--overview .whero__main{padding-top:10px;padding-bottom:10px;}
 .wsp .wdash--overview .whero__fact{padding-top:6px;padding-bottom:6px;}
 .wsp .wdash--overview .whero__go{margin-bottom:8px;}
 .wsp .wdash--overview .wbox__head{padding-top:12px;padding-bottom:8px;}
 .wsp .wdash--overview .wbox__head p{font-size:12px;line-height:1.4;margin-top:4px;}
}

@media(min-width:980px){
 .wsp .wdash--overview .wdash__title{margin-bottom:12px;}
 .wsp .wdash--overview .wbox__head{padding-bottom:6px;}
}

/* SETTINGS (25 Oct 2026): usage as percentages, device sign-out confirmed in place, everything fits a 320px phone. */
.wsp .wacct > h2.wacct__h{overflow-wrap:anywhere; word-break:break-word; font-size:clamp(18px,4.8vw,26px); line-height:1.25;}
.wacct__links{display:flex; flex-wrap:wrap; gap:8px;}
.wacct__links .wbtn{width:auto; max-width:none;}
.wacct__confirm{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
  background:color-mix(in srgb,var(--surface) 80%,#B3261E 6%); border:1px dashed var(--hairline);}
.wacct__confirm > span{flex:1 1 160px; font-size:13.5px; font-weight:600;}
.wacct__confirm--all{margin-top:4px;}
.wuse__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.wuse__head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13.5px;}
.wuse__head b{font-variant-numeric:tabular-nums;}
.wuse__bar{height:10px; margin-top:6px; border-radius:10px; background:color-mix(in srgb,var(--hairline) 70%,transparent); overflow:hidden;}
.wuse__bar i{display:block; height:100%; border-radius:10px; background:var(--verified);}
.wuse__row.is-low .wuse__bar i{background:#B7791F;}
.wuse__row.is-out .wuse__bar i{background:#B3261E;}
.wuse__row.is-out .wuse__head b{color:#B3261E;}
.wuse__eta{margin:6px 0 0; font-size:12.5px; color:var(--muted);}
.wbuy__termline,.wplans__termline{margin:0 0 10px; font-size:13px; color:var(--muted);}
@media (max-width:560px){
  .wacct{gap:12px;}
  .wacct__card,.wacct .wdanger{padding:16px 14px; border-radius:14px;}
  .wacct__dev{grid-template-columns:auto minmax(0,1fr); row-gap:8px;}
  .wacct__dev > .wbtn{grid-column:1 / -1; justify-self:stretch; min-height:44px;}
  .wacct__confirm .wbtn{flex:1 1 auto; min-height:44px;}
  .wacct__links .wbtn{flex:1 1 auto; min-height:44px; justify-content:center;}
  .wacct__all{align-self:stretch; min-height:44px;}
}

/* ENTITIES (29 Oct 2026): the entity picker beside the financial year, and the one-time offer to set up another. */
.wdash__ent select{max-width:min(260px,62vw); text-overflow:ellipsis;}
.wask{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px;
  padding:16px 18px; margin:0 0 16px; border-radius:16px;
  border:1px solid var(--hairline); background:var(--surface);
}
.wask__t b{display:block; font-size:15px; color:var(--ink);}
.wask__t p{margin:4px 0 0; font-size:13.5px; color:var(--muted);}
.wask__acts{display:flex; gap:8px;}
.wdash .wask{grid-column:1 / -1;}

/* SMARTER STREAM CARDS (29 Oct 2026): the categories, their quantities and what they are carried at sit in a column
   beside the ring, so a stream with one category no longer leaves an empty band under it. */
.wsp .wtile__inv{display:flex; align-items:center; gap:16px; min-height:108px;}
.wtile__side{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; align-self:stretch; justify-content:center;}
.wsp .wtile__side .wtile__cap{flex:none; min-height:0; text-align:left; font-size:12px; color:var(--muted-2);
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
.wtile__side .wdist2{padding-top:0; border-top:0; gap:8px; font-size:12.5px;}
.wtile__side .wdist2__r,
.wtile__side .wdist2--money .wdist2__r{grid-template-columns:minmax(0,1fr) auto; gap:1px 8px;}
.wtile__side .wdist2__n{grid-column:1 / -1; font-weight:600; color:var(--ink); white-space:normal; line-height:1.3;}
.wtile__side .wdist2__q{grid-column:1; font-variant-numeric:tabular-nums; color:var(--ink);}
.wtile__side .wdist2__v{grid-column:2; text-align:right; color:var(--muted);}
.wtile__side .wbook,
.wtile__side [class*="wbook"]{margin:0; font-size:12px;}
@media (max-width:420px){ .wsp .wtile__inv{gap:12px;} }

/* IN & OUT, MONTH BY MONTH (29 Oct 2026): the four cards no longer squeeze into narrow columns, and the month chart
   takes a full row so its twelve months, their bars and their figures each have room. */
.wsp .wboard.wboard--flow{grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));}
.wsp .wboard.wboard--flow > .wbox:last-child{grid-column:1 / -1;}
.wsp .wflow__months{gap:8px;}
.wsp .wflow__mbar{height:96px; border-radius:6px;}
.wsp .wflow__mfill{border-radius:6px 6px 3px 3px;}
.wsp .wflow__ml{font-size:11.5px; font-weight:600; color:var(--muted);}
.wsp .wflow__mv{font-size:11px; color:var(--ink); font-weight:600;}
@media (max-width:560px){
  .wsp .wflow__months{gap:3px;}
  .wsp .wflow__ml{font-size:9.5px;}
  .wsp .wflow__mv{display:none;}
}

/* CHECKOUT (29 Oct 2026): two 6-month terms struck through beside the 12-month price; email and mobile only. */
.wbuy__was{color:var(--muted-2); font-weight:500; text-decoration-thickness:1.5px; margin-right:2px;}
.wbuy__contact{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%),1fr)); gap:12px;}
.wbuy__biz{display:flex; align-items:center; gap:8px; margin:6px 0 4px; font-size:13.5px; color:var(--ink); cursor:pointer;}
.wbuy__biz input{width:16px; height:16px; accent-color:var(--verified);}
.wbuy__tier em small{display:block; margin-top:2px;}

/* HISTORY (29 Oct 2026): History and Saved, one section, two tabs. */
.whist__tabs{margin:14px 0 18px;}
.wdoc__act{flex-wrap:wrap;}

/* DASHBOARD SKELETON (29 Oct 2026): the board's shape while it is read. */
.wskel{display:grid; gap:16px; margin-top:14px;}
.wskel__bar{display:flex; gap:8px; justify-content:flex-end;}
.wskel__bar i{display:block; width:150px; height:38px; border-radius:10px;}
.wskel__bar i:last-child{width:38px;}
.wskel__grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(220px,100%),1fr));}
.wskel__grid b{display:block; height:210px; border-radius:16px;}
.wskel__grid .wskel__hero{grid-column:span 2; min-width:0;}
.wskel__grid--tiles b{height:260px;}
.wskel__bar i, .wskel__grid b{
  background:linear-gradient(100deg, var(--surface) 30%, var(--hairline) 50%, var(--surface) 70%);
  background-size:300% 100%; border:1px solid var(--hairline); animation:wskel 1.4s ease-in-out infinite;}
@keyframes wskel{0%{background-position:100% 0;}100%{background-position:0 0;}}
@media (max-width:720px){ .wskel__grid .wskel__hero{grid-column:auto;} .wskel__bar i{width:110px;} }
@media (prefers-reduced-motion:reduce){ .wskel__bar i, .wskel__grid b{animation:none;} }

/* PICKERS (29 Oct 2026): the year, the entity and "Add a stream" open a list in the site's style, not the
   operating system's. The native <select> stays, hidden, and carries the value. */
.wpick{position:relative; display:inline-flex;}
.wpick__native{position:absolute !important; inset:0; width:100% !important; height:100% !important; opacity:0;
  pointer-events:none; margin:0 !important;}
.wpick__btn{appearance:none; display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:40px; max-width:min(280px,64vw); padding:8px 12px 8px 14px; border-radius:12px;
  border:1px solid var(--hairline); background:var(--surface); color:var(--ink);
  font:inherit; font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer;
  box-shadow:0 1px 2px rgba(15,65,47,.05); transition:border-color .16s var(--ease), box-shadow .16s var(--ease);}
.wpick__btn:hover{border-color:var(--verified);}
.wpick__btn[aria-expanded="true"]{border-color:var(--verified); box-shadow:0 0 0 3px color-mix(in srgb, var(--verified) 16%, transparent);}
.wpick__btn:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
.wpick__btn:disabled{opacity:.55; cursor:default;}
.wpick__t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.wpick__chev{flex:none; color:var(--muted); transition:transform .18s var(--ease);}
.wpick__btn[aria-expanded="true"] .wpick__chev{transform:rotate(180deg);}
.wpick--add .wpick__btn{color:var(--verified); border-style:dashed;}
.wpick__menu{position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:100%; width:max-content;
  max-width:min(340px,86vw); max-height:320px; overflow:auto; margin:0; padding:6px; list-style:none;
  border:1px solid var(--hairline); border-radius:14px; background:var(--surface);
  box-shadow:0 18px 40px -18px rgba(15,45,35,.35), 0 2px 6px rgba(15,45,35,.08);
  animation:wpick-in .14s var(--ease);}
.wpick__menu[hidden]{display:none;}
.wpick__menu li{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:40px;
  padding:8px 12px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer;
  white-space:nowrap; outline:none;}
.wpick__menu li:hover, .wpick__menu li:focus{background:color-mix(in srgb, var(--verified) 10%, transparent);}
.wpick__menu li[aria-selected="true"]{font-weight:600; color:var(--verified);}
.wpick__menu li[aria-selected="true"]::after{content:""; width:7px; height:12px; margin-right:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(40deg) translate(-2px,-2px);}
.wpick__menu li[aria-disabled="true"]{opacity:.45; cursor:default; background:none;}
.wpick__menu li.is-add{margin-top:4px; border-top:1px solid var(--hairline); border-radius:0 0 9px 9px; color:var(--verified); font-weight:600;}
@keyframes wpick-in{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .wpick__menu{animation:none;} .wpick__chev{transition:none;} }

/* COLLAPSIBLES (29 Oct 2026): one chevron, one weight, everywhere in E-Resources, instead of the browser's triangle. */
.wsp details>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:0; border-radius:8px;}
.wsp details>summary::-webkit-details-marker{display:none;}
.wsp details>summary::before{content:""; flex:none; width:7px; height:7px; margin:0 11px 0 3px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; opacity:.7;
  transform:rotate(-45deg); transition:transform .18s var(--ease);}
.wsp details[open]>summary::before{transform:rotate(45deg);}
.wsp details>summary:hover{color:var(--ink);}
.wsp details>summary:focus-visible{outline:2px solid var(--verified); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ .wsp details>summary::before{transition:none;} }

/* TOGGLES (29 Oct 2026): every two- or three-way switch in E-Resources is the same pill, matching the site's
   6 / 12 month switch. */
.wsp .wseg{border-radius:999px; padding:4px; gap:3px; background:var(--surface); border:1px solid var(--hairline);
  box-shadow:0 1px 2px rgba(15,65,47,.05);}
.wsp .wseg__b{border-radius:999px; min-height:36px; padding:6px 16px; font-weight:600;}
.wsp .wseg__b.is-on{background:var(--ink); color:var(--paper, #fff);}
.wsp .wseg__b.is-on small{color:inherit; opacity:.8;}

/* MY TARGETS, PLANNED AGAIN (30 Oct 2026): a summary strip, Outstanding / Met / All tabs, one row for both kinds of
   target with a held bar and every action, and a board card that names the next two. */
.wtgtsum{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px;
  padding:16px 20px; margin:0 0 14px;}
.wtgtsum__stats{display:grid; grid-template-columns:repeat(4, minmax(92px,auto)); gap:6px 28px;}
.wtgtsum__s b{display:block; font-size:24px; font-weight:600; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums;}
.wtgtsum__s span{display:block; margin-top:3px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2);}
.wtgtsum__s.is-ok b{color:var(--verified);}
.wtgtsum__s.is-risk b{color:var(--risk, #b4382e);}
.wtgtsum .wbtn{display:inline-flex; align-items:center; gap:6px;}
.wtgtsum .wbtn svg{width:15px; height:15px;}
.wtgt__tabs{margin:0 0 14px;}
.wtgt__tabs small{font-size:11.5px; opacity:.7; margin-left:2px; font-variant-numeric:tabular-nums;}
.wtgt__empty{padding:22px 20px; margin:0; color:var(--muted);}
.wtgts{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.wsp .wtgtrow{border:1px solid var(--hairline); border-radius:16px; background:var(--surface); padding:16px 18px;
  box-shadow:0 1px 2px rgba(15,65,47,.04), 0 8px 22px -16px rgba(15,65,47,.22);}
.wsp .wtgtrow--epr{border-left:3px solid var(--verified);}
.wtgtkind{display:inline-flex; margin:0 0 6px; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:color-mix(in srgb, var(--muted) 10%, transparent);}
.wtgtkind--epr{color:var(--verified); background:color-mix(in srgb, var(--verified) 12%, transparent);}
.wtgtbar{display:block; height:7px; margin:10px 0 2px; max-width:420px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--muted) 14%, transparent);}
.wtgtbar i{display:block; height:100%; border-radius:999px; background:var(--verified); transition:width .3s var(--ease);}
.wtgtbar--risk i{background:var(--gold, #b8882f);}
.wtgtbar--none i{background:var(--muted-2);}
.wtgtrow__done{display:inline-flex; align-items:center; gap:6px;}
.wtgtrow__done svg{width:15px; height:15px;}
.wtgtrow__ask{padding:12px 14px; border-radius:12px; background:color-mix(in srgb, var(--verified) 7%, transparent);}
.wtgtrow__confirm{grid-column:1 / -1;}
.wtgt__fig em.wtgt__met{font-style:normal; margin-left:8px; font-size:12px; font-weight:600; color:var(--verified);}
.wtgt__list{list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px dashed var(--hairline); display:grid; gap:8px; text-align:left;}
.wtgt__mini{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.wtgt__mn{display:flex; flex-direction:column; min-width:0;}
.wtgt__mn b{font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wtgt__mn i{font-style:normal; font-size:11.5px; color:var(--muted);}
@media (max-width:640px){ .wtgtsum__stats{grid-template-columns:repeat(2, minmax(0,1fr));} .wtgtsum .wbtn{width:100%; justify-content:center;} }
@media (prefers-reduced-motion:reduce){ .wtgtbar i{transition:none;} }

/* ACCOUNT DETAILS: the optional username field (30 Oct 2026) */
.wacct__lab{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin:2px 0 6px;}
.wacct__lab i{margin-left:6px; font-style:normal; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); background:var(--hairline); border-radius:999px; padding:2px 7px;}
.wacct__in{width:100%; max-width:340px; min-height:42px; margin:0 0 6px; padding:10px 12px; font:inherit; font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-sm); box-shadow:var(--wel-in);}
.wacct__in:focus{outline:none; border-color:var(--verified); box-shadow:var(--wel-in), 0 0 0 3px var(--verified-soft);}
.wacct__in:disabled{opacity:.6;}
[data-form="acct-username"] .wnote,[data-form="acct-username"] .werr{margin:2px 0 8px; padding:0; border:0; background:none; box-shadow:none;}
@media(max-width:720px){.wacct__in{max-width:none; font-size:16px; min-height:44px;}}

/* A PLAN IS ALREADY ACTIVE (30 Oct 2026): the held plan is marked, a smaller plan is shown but not offered */
.wbuy__held{margin-left:6px; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--verified); background:var(--verified-soft); border-radius:999px; padding:2px 7px;}
.wbuy__tier.is-lower{opacity:.55; cursor:not-allowed;}
.wplan__tag--held{background:var(--verified-soft); color:var(--verified);}
.wplan.is-unavailable{opacity:.6;}

/* Out on a tile says how much of it was certificates that expired unused (31 Oct 2026). */
.wtile__flow .wtile__sub{font-size:10px; line-height:1.2; color:var(--muted-2); white-space:nowrap;}

/* ============================================================
   "YOUR BASE" TIDY-UP (owner, 31 Oct 2026: "it is very cluttered and unorganised"). Layout only: the same fields, the same
   behaviour, in an order the eye can follow. Appended last so it wins over the earlier, scattered rules.
   ============================================================ */
.wsp .winv{max-width:880px;}
/* the date and the unit on one aligned line; the kg/g extender sits beside the unit, not under it */
.wsp .winv__top{display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 20px; margin:6px 0 4px; padding:14px 16px; border:1px solid var(--hairline); border-radius:14px; background:var(--surface);}
.wsp .winv__top .winv__on{margin:0; min-width:0; max-width:none; display:grid; grid-template-columns:auto auto; align-items:center; gap:6px 8px;}
.wsp .winv__top .winv__on > label{grid-column:1 / -1; margin:0; font-size:12.5px; font-weight:600; color:var(--muted);}
.wsp .winv__top .winv__on input,.wsp .winv__top .winv__on select{min-height:40px;}
.wsp .winv__top .winv__on--unit{min-width:0 !important;}
.wsp .winv__top .szua-btn{min-height:40px; white-space:nowrap;}
.wsp .winv__top + .whint{margin:6px 2px 14px;}
/* a section (Base certificates / Base waste): one clear heading, streams as a calm list */
.wsp .winv .wset__card{padding:18px 18px 8px; margin:0 0 16px;}
.wsp .winv__stream{margin:0 0 8px; border-radius:12px; box-shadow:none; overflow:hidden;}
.wsp .winv__stream > summary{min-height:48px; padding:10px 14px; list-style:none; display:flex; align-items:center; gap:10px;}
.wsp .winv__stream > summary::-webkit-details-marker{display:none;}
.wsp .winv__stream[open] > summary{border-bottom:1px solid var(--hairline); background:color-mix(in srgb, var(--paper) 70%, var(--surface));}
.wsp .winv__src{display:inline-flex; align-items:center; gap:8px; font-size:12px;}
/* an opened stream: roomy, single reading column, quiet fields */
.wsp .winv__body{grid-template-columns:1fr; gap:16px; padding:16px;}
.wsp .winv__block,.wsp .winv__kind{background:transparent; padding:0; border:0;}
.wsp .winv__kind + .winv__kind{padding-top:16px; border-top:1px dashed var(--hairline); border-radius:0;}
.wsp .winv__kind h4,.wsp .winv__block h4{font-size:13px; letter-spacing:.01em;}
.wsp .winv .wsplitin{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px 14px;}
.wsp .winv .wsplitin__in input{min-height:38px; font-size:13.5px;}
.wsp .winv .wsplitin__in--price input{min-height:32px; font-size:12px; opacity:.92;}
.wsp .winv .whint{font-size:12px; line-height:1.5;}
/* Save and "I hold nothing yet" stay in reach on a long form */
.wsp .winv form > .wdanger__row{position:sticky; bottom:0; z-index:3; margin:14px -4px 0; padding:12px 4px 14px; background:linear-gradient(to top, var(--paper) 72%, transparent); backdrop-filter:blur(6px);}
@media (max-width:640px){
  .wsp .winv__top{padding:12px;}
  .wsp .winv .wsplitin{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));}
}

/* ---- settings: Save first, starting again folded away (owner, 31 Oct 2026) ---- */
.wsp .wset__foot{position:sticky; bottom:12px; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:18px 0 0; padding:10px 10px 10px 16px; border:1px solid var(--hairline); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--hl), 0 10px 30px -14px rgba(17,44,40,.35);}
.wsp .wset__foot-note{margin:0; font-size:12.5px; color:var(--muted-2);}
.wsp .wset__foot-btns{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.wsp .wset__foot .wbtn{width:auto; margin-top:0;}
.wsp .wbtn.wset__save{min-height:46px; padding:0 26px; font-size:14.5px; font-weight:600; gap:8px;}
.wsp .wbtn.wset__save .wi{width:17px; height:17px;}
@media (max-width:560px){
  .wsp .wset__foot{flex-direction:column; align-items:stretch; padding:10px;}
  .wsp .wset__foot-note{text-align:center;}
  .wsp .wset__foot-btns{flex-direction:row-reverse;}
  .wsp .wbtn.wset__save{flex:1 1 auto; justify-content:center;}
}

.wsp .wset__zone{margin:28px 0 0; border:1px solid var(--hairline); border-radius:var(--r-lg); background:var(--surface);}
.wsp .wset__zone > summary{display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 16px; cursor:pointer; list-style:none;}
.wsp .wset__zone > summary::-webkit-details-marker{display:none;}
.wsp .wset__zone > summary::before,.wsp .wset__zone > summary::after{content:none; display:none;}
.wsp .wset__zone > summary:focus-visible{outline:2px solid var(--verified); outline-offset:2px; border-radius:var(--r-lg);}
.wsp .wset__zone-ico{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 auto;
  border-radius:9px; color:#9A2C2C; background:rgba(154,44,44,.08);}
.wsp .wset__zone-ico .wi{width:16px; height:16px;}
.wsp .wset__zone-t{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto;}
.wsp .wset__zone-t b{font-size:14px; font-weight:600; color:var(--ink);}
.wsp .wset__zone-t span{font-size:12px; color:var(--muted-2);}
.wsp .wset__zone-chev{display:inline-flex; color:var(--muted-2); transition:transform .18s ease;}
.wsp .wset__zone[open] .wset__zone-chev{transform:rotate(90deg);}
.wsp .wset__zone-body{padding:0 16px 16px; border-top:1px solid var(--hairline); padding-top:14px;}
.wsp .wset__zone .wdanger{max-width:none; margin:0; box-shadow:none; background:var(--surface-2);}
.wsp .wset__zone .wrs__opt .wbtn{gap:6px; color:#9A2C2C;}
.wsp[data-theme="dark"] .wset__zone .wrs__opt .wbtn{color:#F2877A;}
.wsp .wdanger input[type="text"]{
  display:block; width:100%; max-width:260px; min-height:42px; margin:0 0 12px; padding:10px 12px;
  font:inherit; font-size:14px; letter-spacing:.08em; color:var(--ink);
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-sm);
  box-shadow:var(--wel-in);
}
.wsp .wdanger input[type="text"]:focus{outline:none; border-color:#9A2C2C; box-shadow:var(--wel-in), 0 0 0 3px rgba(154,44,44,.16);}
.wsp[data-theme="dark"] .wset__zone-ico{color:#F2877A; background:rgba(242,135,122,.1);}
.wsp[data-theme="dark"] .wset__foot{box-shadow:var(--hl), 0 10px 30px -14px rgba(0,0,0,.6);}
@media (prefers-reduced-motion:reduce){ .wsp .wset__zone-chev{transition:none;} }

/* ---- renaming a saved calculation or a History line (owner, 31 Oct 2026) ---- */
.wsp .wdoc__rename{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 0;}
.wsp .wdoc__rename input{flex:1 1 220px; min-width:0; min-height:38px; padding:8px 11px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-sm); box-shadow:var(--wel-in);}
.wsp .wdoc__rename input:focus{outline:none; border-color:var(--verified); box-shadow:var(--wel-in), 0 0 0 3px rgba(28,122,85,.16);}
.wsp .wdoc__rename .wbtn{width:auto; margin-top:0;}
.wsp .wdoc__rename .werr{flex-basis:100%; margin:0;}
.wsp .wdoc__act [data-calc-rename] .wi{width:14px; height:14px;}

/* ---- no Next steps card (owner, 31 Oct 2026): the stream tiles take the whole row ---- */
.wsp .wboard > .wbox--tiles{grid-column:1 / -1;}
@media (min-width:980px){ .wsp .wdash--overview .wboard > .wbox--tiles{grid-column:1 / -1;} }

/* ==== YOUR POSITION, REVISED (owner, 31 Oct 2026) ====================================================
   The headline band, then what is coming as a grid of small cards (it was one tall list, about 500px
   for six dates), then the streams and the waste at full width so their tables never scroll sideways.
   No "Next step" here any more. */
.wsp .wboard--pos{gap:14px;}
.wsp .wpos__hero{padding:20px 22px 0; border-radius:18px; overflow:hidden;}
.wsp .wpos__big{font-size:clamp(20px,2.4vw,28px);}
.wsp .wpos__facts{margin:16px -22px 0; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;}
.wsp .wpos__fact{padding:12px 16px 14px 22px;}
.wsp .wpos__fact dd{font-size:17px;}

.wsp .wpos__duebox .wbox__head p{display:none;}
.wsp .wpos__due{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; padding:0 16px 16px;}
.wsp .wpos__di{grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; gap:4px 12px; padding:12px;
  border:1px solid var(--hairline); border-radius:14px; background:var(--surface);}
.wsp .wpos__di + .wpos__di{border-top:1px solid var(--hairline);}
.wsp .wpos__di .wpos__date{grid-row:1 / span 2; width:46px; padding:6px 0;}
.wsp .wpos__di .wpos__date b{font-size:16px;}
.wsp .wpos__di .wpos__du{grid-column:2; grid-row:1; flex-direction:row; align-items:center; justify-content:space-between; gap:8px;}
.wsp .wpos__di .wpos__dt{grid-column:2; grid-row:2; min-width:0;}
.wsp .wpos__di .wpos__dk{display:none;}
.wsp .wpos__di .wpos__dtt{margin:0; font-size:13px;}
.wsp .wpos__di .wpos__dm{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11.5px;}
.wsp .wpos__di .wpos__dt .wbtn{margin-top:6px;}
.wsp .wpos__di--overdue{border-color:rgba(154,44,44,.35);}
.wsp .wpos__di--soon{border-color:color-mix(in srgb, var(--gold) 45%, var(--hairline));}
.wsp[data-theme="dark"] .wpos__di{background:var(--surface-2, var(--surface));}

@media (max-width:760px){
  .wsp .wpos__hero{padding:16px 16px 0; border-radius:16px;}
  .wsp .wpos__facts{margin:14px -16px 0; grid-template-columns:repeat(2, minmax(0,1fr));}
  .wsp .wpos__fact{padding:10px 12px 12px 16px;}
  .wsp .wpos__fact dd{font-size:15px;}
  .wsp .wpos__due{grid-template-columns:minmax(0,1fr); padding:0 12px 12px;}
  .wsp .wwin--pos .wwin__body{padding:12px 10px 18px;}
}

/* ---- History and Saved: repeat numbers and a Total's items (owner, 31 Oct 2026) ---- */
.wsp .wdoc__n{font-weight:500; color:var(--muted-2); font-variant-numeric:tabular-nums;}
.wsp .wdoc__items{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; padding:0; list-style:none;}
.wsp .wdoc__items li{display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 9px 3px 4px; border:1px solid var(--hairline);
  border-radius:999px; background:var(--surface-2, var(--paper)); font-size:12px; color:var(--ink); overflow-wrap:anywhere;}
.wsp .wdoc__items b{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--verified-soft, rgba(28,122,85,.12)); color:var(--verified); font-size:10.5px; font-weight:700;}