/* ─── HAND-MAINTAINED as of the Phase 3 CSS refactor (see docs/css-refactor-plan.md).
   This file was originally machine-generated, but chrome/annotation/badge type and
   color values below (divider headings, screen-id/desc, badges, component-spec,
   annotations, and Halyard's dialog transcript) were hand-edited to hold their
   correct final values directly, replacing screens-type.css's !important overrides
   (deleted; its job is done). If this file is ever regenerated, those hand-edited
   declarations must be re-applied — grep this repo's docs/css-refactor-plan.md
   Phase 3 for the full rule-by-rule mapping. ───────────────────────────────────── */
/* FOLIO palette — single token set. The duplicate --f-* twin set was removed
   2026-08-07 (it was 100% unused; every component references the unprefixed
   names). Edit colours HERE. */
.wf-embed{--sage:#2D6A4F;--sage-mid:#E8F5EE;--sage-light:#F0FAF4;--terra:#C25B3C;--terra-light:#FAEAE5;--honey:#D4842A;--honey-light:#FDF3E7;--cream:#FAF7F2;--sand:#F5EFE6;--bark:#5C4A35;--stone:#7A6E62;--pebble:#6D6154;--rule:#DDD5C8;--violet:#6B5B9A;--violet-light:#F0EDF8;--white:#FFFFFF;--black:#2A2218;--serif:'Source Serif 4',Georgia,serif;--sans:'Public Sans',system-ui,sans-serif;--page:#F0EBE1;font-family:var(--sans);background:var(--page);color:var(--black);font-size:13px;line-height:1.6;scroll-behavior:smooth}
@scope (.wf-embed){.pf-nav-link.active{color:#E8E6F0;background:rgba(157,143,224,0.12)}
*{box-sizing:border-box;margin:0;padding:0}
.wf-section{background:var(--paper)}
*{box-sizing:border-box;margin:0;padding:0}
.ci-item.active{background:rgba(45,106,79,.3);color:var(--cream)}
.ci-item.active .n{color:var(--honey)}
.ss:nth-child(even){background:var(--paper)}
.phone-showcase{display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap}
.phone-frame-wrap{flex-shrink:0}
.phone-frame{width:320px;background:var(--bark);border-radius:28px;padding:11px}
.phone-screen{background:var(--cream);border-radius:12px;overflow:hidden;min-height:560px;display:flex;flex-direction:column}
.phone-status{background:var(--cream);padding:10px 20px 6px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--stone)}
.phone-notch{width:80px;height:16px;background:var(--bark);border-radius:0 0 10px 10px;margin:0 auto}
.app-header{padding:12px 20px 8px;background:var(--cream)}
.app-header h3{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--bark)}
.app-header .sub{font-size:10px;color:var(--pebble);margin-top:2px}
.balance-hero{text-align:center;padding:28px 20px 24px;background:var(--cream)}
.balance-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pebble);margin-bottom:10px}
.balance-number{font-family:var(--serif);font-size:52px;font-weight:600;color:var(--bark);line-height:1}
.balance-sync{font-size:10px;color:var(--pebble);margin-top:8px}
.balance-sync.live:before{content:"● ";color:var(--sage);font-size:8px}
.balance-sub{font-size:12px;color:var(--stone);margin-top:6px;font-style:italic}
.card{background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:14px;margin-bottom:10px}
.card.sage-left{border-left:3px solid var(--sage)}
.card.terra-left{border-left:3px solid var(--terra)}
.card.honey-left{border-left:3px solid var(--honey)}
.card-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--pebble);margin-bottom:6px}
.card-body{font-size:12px;color:var(--stone);line-height:1.6}
.txn-list{display:flex;flex-direction:column;gap:1px;background:var(--rule);border-radius:8px;overflow:hidden}
.txn-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--white)}
.txn-icon{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.txn-name{font-size:12px;font-weight:500;color:var(--bark);flex:1}
.txn-date{font-size:10px;color:var(--pebble)}
.txn-amount{font-size:13px;font-weight:600;color:var(--bark)}
.txn-amount.out{color:var(--stone)}
.txn-amount.in{color:var(--sage)}
.txn-pending{font-size:9px;color:var(--honey);background:var(--honey-light);padding:2px 5px;border-radius:4px}
.alert-card{background:var(--honey-light);border:1px solid rgba(212,132,42,.3);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.alert-card .alert-text{font-size:12px;color:var(--bark);line-height:1.6}
.alert-card .alert-cta{font-size:11px;font-weight:600;color:var(--honey);margin-top:6px;cursor:pointer}
.pulse-bar-wrap{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.pulse-row{display:flex;align-items:center;gap:8px}
.pulse-week{font-size:10px;color:var(--pebble);min-width:48px}
.pulse-track{flex:1;height:8px;background:var(--sand);border-radius:4px;overflow:hidden}
.pulse-fill{height:100%;border-radius:4px;background:var(--sage);transition:width .3s}
.pulse-amount{font-size:11px;font-weight:500;color:var(--bark);min-width:44px;text-align:right}
.pulse-avg{border-top:1px dashed var(--rule);margin-top:8px;padding-top:8px;font-size:10px;color:var(--stone);display:flex;justify-content:space-between}
.jar-wrap{text-align:center;padding:20px 0 10px}
.jar{width:80px;height:90px;margin:0 auto 12px;position:relative}
.jar-body{width:80px;height:72px;background:var(--sand);border:2px solid var(--rule);border-radius:8px;position:absolute;bottom:0;overflow:hidden}
.jar-fill{position:absolute;bottom:0;left:0;right:0;background:rgba(45,106,79,.25);border-top:2px solid var(--sage);transition:height .5s}
.jar-lid{width:88px;height:16px;background:var(--rule);border-radius:4px;position:absolute;top:-8px;left:-4px;border:2px solid var(--pebble)}
.jar-label{font-family:var(--serif);font-size:13px;font-weight:600;color:var(--bark)}
.jar-amount{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--sage);margin-top:4px}
.jar-target{font-size:11px;color:var(--pebble);margin-top:2px}
.input-field{background:var(--white);border:1.5px solid var(--rule);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--bark);width:100%;font-family:var(--sans);transition:border-color .2s}
.input-field:focus{border-color:var(--sage);outline:none}
.input-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-bottom:5px}
.input-hint{font-size:10px;color:var(--pebble);margin-top:4px}
.btn-primary{background:var(--sage);color:var(--white);border:none;border-radius:24px;padding:13px 24px;font-size:14px;font-weight:600;width:100%;cursor:pointer;font-family:var(--sans);letter-spacing:.01em}
.btn-secondary{background:var(--white);color:var(--bark);border:1.5px solid var(--rule);border-radius:24px;padding:11px 24px;font-size:13px;font-weight:500;width:100%;cursor:pointer;font-family:var(--sans)}
.btn-ghost{background:transparent;color:var(--stone);border:none;padding:8px;font-size:12px;cursor:pointer;font-family:var(--sans)}
.tab-bar{display:flex;justify-content:space-around;padding:10px 0 14px;background:var(--white);border-top:1px solid var(--rule)}
.tab-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;flex:1}
.tab-icon{width:22px;height:22px;border-radius:6px;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:12px}
.tab-item.active .tab-icon{background:var(--sage-mid)}
.tab-lbl{font-size:9px;color:var(--pebble);letter-spacing:.04em}
.tab-item.active .tab-lbl{color:var(--sage);font-weight:600}
.insight-card{background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:14px;margin-bottom:8px}
.insight-icon{font-size:20px;margin-bottom:8px}
.insight-text{font-size:13px;color:var(--bark);line-height:1.6;font-family:var(--serif);font-style:italic}
.insight-tag{display:inline-block;background:var(--sage-mid);color:var(--sage);font-size:9px;padding:2px 7px;border-radius:10px;margin-top:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.onboarding-wrap{padding:32px 20px 24px;text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.onboarding-mark{font-family:var(--serif);font-size:48px;font-weight:700;color:var(--sage);margin-bottom:20px}
.onboarding-headline{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--bark);margin-bottom:10px;line-height:1.3}
.onboarding-body{font-size:13px;color:var(--stone);line-height:1.7;max-width:240px;margin-bottom:24px}
.clarity-wrap{padding:20px;text-align:center}
.clarity-days{display:flex;gap:6px;justify-content:center;margin:16px 0}
.clarity-day{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600}
.clarity-day.checked{background:var(--sage);color:var(--white)}
.clarity-day.missed{background:var(--sand);color:var(--pebble)}
.clarity-sentence{font-family:var(--serif);font-size:14px;color:var(--bark);line-height:1.6;font-style:italic;max-width:220px;margin:0 auto}
.anno-panel{flex:1;min-width:300px}
.anno{font-family:var(--anno-type);margin-top:0;background:var(--paper-2);border-radius:8px;padding:14px 18px}
.anno h4{font-family:var(--anno-type);font-size:9px;text-transform:uppercase;margin-bottom:12px}
.alist{display:flex;flex-direction:column;gap:8px}
.aitem{display:flex;align-items:flex-start;gap:8px}
.anum{font-family:var(--anno-type);min-width:16px;height:16px;border-radius:50%;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.atxt{font-size:11px;color:var(--ink);line-height:1.6}
.atxt strong{color:var(--ink);font-weight:700}
.sref,.fref,.iref{font-family:var(--anno-type);font-size:9px;padding:1px 5px;border-radius:3px}
.sref{background:var(--paper);color:var(--mid);border:1px solid var(--line)}
.fref{background:var(--paper);color:var(--mid);border:1px solid var(--line)}
.iref{background:var(--paper);color:var(--mid);border:1px solid var(--line)}
.comp-spec{margin-top:14px;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.comp-spec-hdr{background:var(--sand);padding:6px 12px;font-size:9px;color:var(--stone);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--rule)}
.csrow{display:flex;border-bottom:1px solid var(--rule)}
.csrow:last-child{border-bottom:none}
.csk{width:130px;padding:7px 12px;font-size:10px;font-weight:600;color:var(--stone);background:var(--sand);border-right:1px solid var(--rule);flex-shrink:0}
.csv{padding:7px 12px;font-size:11px;color:var(--black);line-height:1.5}
.csv code{font-size:9px;background:var(--bark);color:var(--honey-light);padding:1px 4px;border-radius:3px}
.rn{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rc{background:var(--paper);border:1px solid var(--line);padding:10px 12px;border-radius:4px}
.rc h5{font-family:var(--site-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.rc li{font-family:var(--body);font-size:10px;color:var(--mid);line-height:1.7;list-style:none}
.rc li:before{content:"· ";color:var(--line)}
.c-e3d20a{font-size:10px;color:var(--stone);text-align:center;margin-bottom:8px;letter-spacing:.06em;text-transform:uppercase}
.c-d0af74{width:100%;padding:0 20px}
.c-8e8697{margin-bottom:16px}
.c-2965bd{font-size:28px;margin-bottom:16px}
.c-d51702{margin-bottom:8px}
.c-538133{text-align:center;margin-bottom:16px}
.c-a7409f{margin-bottom:10px}
.c-226d4e{width:100%;text-align:center}
.c-413001{background:var(--sage-light);border-radius:10px;padding:12px 14px;margin-bottom:20px;text-align:left;width:100%}
.c-d00089{font-size:11px;color:var(--bark);line-height:1.7}
.c-a58b07{margin-bottom:4px}
.c-08f7fc{color:var(--terra)}
.c-d9e14a{font-size:9px}
.c-085e0d{padding:12px 20px 0;display:flex;justify-content:space-between;align-items:center}
.c-33787e{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--bark)}
.c-e5e6f8{font-size:20px}
.c-33c77f{padding:0 20px}
.c-b3c308{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.c-2b42f5{font-size:11px;font-weight:600;color:var(--stone);letter-spacing:.04em;text-transform:uppercase}
.c-7af65a{font-size:11px;color:var(--sage);font-weight:600;cursor:pointer}
.c-4db52f{background:var(--sage-mid)}
.c-da5cd6{flex:1}
.c-dd9ef1{background:var(--honey-light)}
.c-44d0f2{background:var(--terra-light)}
.c-97bc0d{background:var(--violet-light)}
.c-553a64{margin-top:14px}
.c-6e2b82{padding-bottom:16px}
.c-76d72c{color:var(--bark)}
.c-563a82{font-size:10px;color:var(--honey);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.c-4a5e3e{background:var(--terra-light);border-color:rgba(194,91,60,.25)}
.c-9b53b0{font-size:10px;color:var(--terra);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.c-232a19{margin-top:14px;opacity:.7}
.c-6ce2ce{font-size:11px;font-weight:600;color:var(--stone);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.c-a08f07{padding:0 20px 20px}
.c-fa3e1c{margin-bottom:12px}
.c-dc2409{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.c-57ca93{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--bark)}
.c-381f17{font-size:12px;color:var(--stone)}
.c-617963{margin-bottom:14px}
.c-cd623e{font-size:10px;color:var(--pebble);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.c-057353{width:90%}
.c-6d5673{width:100%}
.c-fa3443{width:68%}
.c-c43306{width:108%}
.c-cdc43c{font-weight:600;color:var(--bark)}
.c-4e0609{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.c-0f4d6f{display:flex;justify-content:space-between;font-size:12px}
.c-44464f{color:var(--stone)}
.c-18fc65{color:var(--bark);font-weight:500}
.c-b08b1b{color:var(--pebble)}
.c-9a56f9{height:30%}
.c-5fa2ce{border-bottom:1px solid var(--rule);padding-bottom:12px}
.c-510ea6{display:flex;justify-content:space-between;align-items:center}
.c-7fa563{padding:20px}
.c-298090{font-family:var(--serif);font-size:16px;color:var(--bark);margin-bottom:20px;line-height:1.5}
.c-b06c29{text-align:center;margin-bottom:24px}
.c-e48d43{font-family:var(--serif);font-size:52px;font-weight:700;color:var(--sage)}
.c-41b3f0{font-size:11px;color:var(--pebble);margin-top:6px}
.c-c2bf5c{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.c-5a917b{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:14px;text-align:center;font-size:18px;font-weight:600;color:var(--bark)}
.c-6c5d6a{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:14px;text-align:center;font-size:18px;color:var(--pebble)}
.c-49c4d9{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:14px;text-align:center;font-size:18px;color:var(--stone)}
.c-fac14c{padding:10px 0 4px}
.c-09f2b9{font-size:10px;color:var(--pebble);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.c-d6c6d5{text-align:center;margin-top:12px}
.c-c9c2be{font-size:12px;color:var(--sage)}
@media (max-width:760px){.ss{padding:16px 20px}
.phone-status{flex-wrap:wrap;row-gap:10px}
.pulse-avg{flex-wrap:wrap;row-gap:10px}
.c-085e0d{flex-wrap:wrap;row-gap:10px}
.c-b3c308{flex-wrap:wrap;row-gap:10px}
.c-0f4d6f{flex-wrap:wrap;row-gap:10px}
.c-510ea6{flex-wrap:wrap;row-gap:10px}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
}

/* ─── the following migrated from revamp.css (Phase 4 completion, now that
   Phase 5's hashed-class retirement is done). Hand-owned like the rest of
   this file — see the header note about hand-maintenance from Phase 3. ─── */

/* ICONS — real drawn glyphs replaced the emoji; these size and colour them. */
body.proj-folio .tab-icon {
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 21px !important;
  color: var(--stone);
}
body.proj-folio .tab-item.active .tab-icon { color: var(--sage); }
body.proj-folio .txn-icon { font-size: 16px !important; color: var(--bark); }
body.proj-folio .v-ico-yes { color: var(--sage); }
body.proj-folio .v-ico-no  { color: var(--terra); }

/* FOLIO — product serif with real tabular figures (was Lora, a blog serif),
   and a phone frame that reads manufactured rather than drawn */
body.proj-folio .balance-amount,
body.proj-folio .balance-hero div,
body.proj-folio .wf-embed .amt { font-variant-numeric: tabular-nums; }

body.proj-folio .phone-frame {
  width: 320px !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
/* border-radius/box-shadow removed 2026-09-07 — dead weight duplicating
   screens.css's scoped .phone-screen rule (the "ONE STAGING TREATMENT, ALL
   FOUR PROJECTS" block), which always wins these two properties via scope
   proximity regardless of this rule's higher specificity. Only the
   properties screens.css doesn't declare (position, overflow) stay here. */
body.proj-folio .phone-screen {
  position: relative !important;
  overflow: hidden !important;
}
body.proj-folio .phone-notch {
  display: none !important;
}
body.proj-folio .phone-status {
  position: relative !important; z-index: 5 !important;
  min-height: 42px !important;
  padding: 12px 22px 4px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  font-variant-numeric: tabular-nums;
}

/* B4 · Folio onboarding headline colliding with its body copy */
body.proj-folio .onboarding-headline {
  line-height: 1.28 !important;
  margin-bottom: 14px !important;
  max-width: 12ch;
  margin-left: auto; margin-right: auto;
}
body.proj-folio .onboarding-body { margin-bottom: 20px !important; }
body.proj-folio .onboarding-wrap { padding: 28px 20px 22px !important; row-gap: 0; }

/* ─── 2026-08-07 batch ─────────────────────────────────────────────────────
   A · legibility. --pebble darkened to #6D6154 directly in the token block
   (was #B5A99A, ~1.9:1 on cream — a real legibility failure). Now ~5.2:1 on
   cream and ~5.0:1 on sage-mid, clearing WCAG AA for all muted labels. */


/* F1 · the two green-accent cards now read as filled sage panels (pop) instead
   of a thin left stripe. Fill + no stroke; dark text stays legible on the light
   sage, and the clarity day-dots keep working. */
body.proj-folio .wf-embed .card.sage-left {
  background: var(--sage-mid); border: none;
}
/* Filling the card sage-mid made the sand-coloured "missed" day dots vanish
   into it (~1:1). Re-cast missed days as an EMPTY ring (checked = filled green,
   missed = outline) so the distinction is graphical, not just tone: the ring
   clears the 3:1 non-text bar and the letter clears 4.5:1 on the sage card. */
body.proj-folio .wf-embed .clarity-day.missed {
  background: transparent;
  border: 2px solid #8A7E6B;
  color: #6D6154;
}

/* F2 · savings jar redesigned as one cohesive SVG (was a lid square floating
   over a body square). Reset the old fixed-size relative box that positioned
   those pieces. */
body.proj-folio .wf-embed .jar {
  position: static; width: auto; height: auto; margin: 0 auto 12px;
}
body.proj-folio .wf-embed .jar-svg { display: inline-block; width: 80px; height: auto; }