/**
 * Redesign "Blueprint" additions: style menu (flavors), start-here block,
 * saved list, article actions, section anchors, error-budget calculator.
 *
 * Own file (redesign.css is served immutable for 30 days). Reuses the live
 * tokens (--paper, --ink, --rouge ...). The default flavor ("paper") adds no
 * override: the site looks exactly as before until a visitor picks another one.
 */

/* ============ FLAVORS (token overrides, keyed on <html data-flavor>) ============ */
html[data-flavor="ink"]{
  color-scheme:light;
  --paper:#F6F8FC;--paper-2:#E9EEF7;--paper-deep:#DCE4F1;
  --ink:#10295C;--ink-2:#2A4478;--ink-3:#46598A;
  --hair:rgba(16,41,92,.10);--rule:rgba(16,41,92,.22);
  --rouge:#BF3F0A;--rouge-deep:#8F2E06;
  /* own the secondary accents too: a visitor already in the site's dark mode must not inherit its dark values */
  --steel:#33526B;--sap:#3D5A3F;--ochre:#B7892D;
}
html[data-flavor="console"]{
  color-scheme:dark;
  --paper:#0B110E;--paper-2:#101A15;--paper-deep:#070C09;
  --ink:#CFE8D8;--ink-2:#B4D3C1;--ink-3:#8DB09B;
  --hair:rgba(207,232,216,.10);--rule:rgba(207,232,216,.22);
  --rouge:#5CFF9D;--rouge-deep:#3BD67D;
}
html[data-flavor="dusk"]{
  color-scheme:dark;
  --paper:#1D1537;--paper-2:#261C47;--paper-deep:#140E29;
  --ink:#E6DCFF;--ink-2:#CDBFF0;--ink-3:#A898D6;
  --hair:rgba(230,220,255,.10);--rule:rgba(230,220,255,.22);
  --rouge:#FF8FA3;--rouge-deep:#E0687F;
}
html[data-flavor="blueprint"]{
  color-scheme:dark;
  --paper:#10295C;--paper-2:#0C2049;--paper-deep:#091A3D;
  --ink:#CFE3FF;--ink-2:#B9CDEE;--ink-3:#94AEDC;
  --hair:rgba(207,227,255,.10);--rule:rgba(207,227,255,.22);
  --rouge:#FFBF47;--rouge-deep:#E0A02A;
}
/* Bridge to the legacy colour variables: style.css / themes.css still colour every
   h1-h6 and some widgets with --yawc-text-primary (a fixed #1a1a1a), which is
   invisible on a dark flavor. Map them onto the flavor's own palette. */
html[data-flavor="ink"],html[data-flavor="console"],html[data-flavor="dusk"],html[data-flavor="blueprint"]{
  --yawc-text-primary:var(--ink);--yawc-text-secondary:var(--ink-2);--yawc-text-light:var(--ink-3);
  --yawc-bg-primary:var(--paper);--yawc-bg-secondary:var(--paper-2);--yawc-bg-dark:var(--paper-deep);
  --theme-text-primary:var(--ink);--theme-text-secondary:var(--ink-2);--theme-text-tertiary:var(--ink-3);
  --theme-bg-primary:var(--paper);--theme-bg-secondary:var(--paper-2);--theme-bg-tertiary:var(--paper-deep);
}
/* Secondary accents (tags, status colours) are tuned for a light ground: lighten on dark flavors. */
html[data-flavor="console"],html[data-flavor="dusk"],html[data-flavor="blueprint"]{
  --steel:#8DBBE0;--sap:#8FD6A0;--ochre:#E0B85A;
}
/* The logo prefix uses a fixed brand red (arewel-brand.css): follow the flavor's accent. */
html[data-flavor="ink"] .arewel-prefix,html[data-flavor="console"] .arewel-prefix,
html[data-flavor="dusk"] .arewel-prefix,html[data-flavor="blueprint"] .arewel-prefix{color:var(--rouge)}
/* Dark flavors: no paper noise (multiply on a dark ground only muddies it) and
   light dots instead of dark ones. */
html[data-flavor="console"] body::before,html[data-flavor="dusk"] body::before,html[data-flavor="blueprint"] body::before{display:none}
/* v3 look: the blueprint grid on every flavor and on the site's own dark mode,
   replacing the dot pattern. Drawn with the flavor's own hairline colour. */
html body.yawc-redesign-active{
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);
  background-size:48px 48px;
}

/* ============ TITLE BLOCK (template-parts/redesign/titleblock.php) ============ */
.titleblock{border-bottom:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 88%,transparent)}
.titleblock__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;margin:0;border-left:1px solid var(--rule)}
.titleblock__cell{padding:12px 20px 14px;border-right:1px solid var(--rule);min-width:0}
.titleblock dt{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px}
.titleblock dd{margin:0;font-family:"Instrument Serif",serif;font-size:22px;line-height:1.15;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.titleblock dd em{font-style:italic;color:var(--rouge)}
@media (max-width:760px){
  .titleblock__grid{grid-template-columns:1fr 1fr}
  .titleblock__cell{border-bottom:1px solid var(--rule);padding:10px 14px 12px}
  .titleblock__cell:nth-last-child(-n+2){border-bottom:0}
  .titleblock dd{font-size:19px}
}
@media print{.titleblock{display:none}}
/* A flavor owns the colours: the light/dark toggle would do nothing, so hide it. */
html[data-flavor="ink"] .yawc-dark-mode-toggle,
html[data-flavor="console"] .yawc-dark-mode-toggle,
html[data-flavor="dusk"] .yawc-dark-mode-toggle,
html[data-flavor="blueprint"] .yawc-dark-mode-toggle{display:none!important}

/* The site's own dark mode (default flavor): the dark --rouge is too dim for small text on dark paper.
   Same lighter red the live dark theme already uses for hot text (#F08A78 in redesign-wow.css). */
html[data-theme="dark"]:not([data-flavor="ink"]):not([data-flavor="console"]):not([data-flavor="dusk"]):not([data-flavor="blueprint"]) :is(.bp-choice__k,.bp-bm[aria-pressed="true"],.bp-bm:hover,.path__mine,.bp-flv__tick,.titleblock dd em){color:#F08A78}
html[data-theme="dark"]:not([data-flavor="ink"]):not([data-flavor="console"]):not([data-flavor="dusk"]):not([data-flavor="blueprint"]) .bp-btn--accent{color:#F08A78;border-color:#F08A78}
html[data-theme="dark"]:not([data-flavor="ink"]):not([data-flavor="console"]):not([data-flavor="dusk"]):not([data-flavor="blueprint"]) .bp-btn--accent:hover{background:#F08A78;color:var(--paper)}

/* ============ SHARED BITS ============ */
.bp-mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.bp-dim{color:var(--ink-3)}
.bp-btn{
  font:inherit;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--ink);text-decoration:none;
}
.bp-btn:hover{background:var(--ink);color:var(--paper)}
.bp-btn--accent{border-color:var(--rouge);color:var(--rouge)}
.bp-btn--accent:hover{background:var(--rouge);color:var(--paper)}
.bp-toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);
  background:var(--paper-2);color:var(--ink);border:1px solid var(--rouge);padding:10px 16px;
  opacity:0;pointer-events:none;transition:.25s;z-index:10001;max-width:90vw;text-align:center;
}
.bp-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.bp-toast{transition:none}}

/* ============ STYLE MENU ============ */
.bp-flv{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:10000}
.bp-flv__t{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;cursor:pointer;
  background:var(--paper-2);color:var(--ink);border:1px solid var(--ink);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.bp-flv__dot{width:12px;height:12px;border-radius:50%;background:var(--rouge);border:1px solid var(--ink)}
.bp-flv__menu{
  position:absolute;left:0;bottom:calc(100% + 8px);min-width:230px;display:none;
  background:var(--paper-2);border:1px solid var(--ink);padding:6px;
}
.bp-flv.is-open .bp-flv__menu{display:block}
.bp-flv__cap{display:block;padding:8px 8px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.bp-flv__opt{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px;cursor:pointer;text-align:left;
  background:none;color:var(--ink);border:0;border-left:3px solid transparent;
  font-family:"Newsreader",Georgia,serif;font-size:16px;
}
.bp-flv__opt:hover{background:var(--hair)}
.bp-flv__opt[aria-checked="true"]{border-left-color:var(--rouge);background:var(--hair)}
.bp-flv__sw{display:inline-flex;width:34px;height:20px;border:1px solid var(--ink);flex:none}
.bp-flv__sw i{flex:1}.bp-flv__sw i+i{flex:0 0 12px}
.bp-flv__opt b{font-weight:400;flex:1}
.bp-flv__tick{color:var(--rouge);visibility:hidden}
.bp-flv__opt[aria-checked="true"] .bp-flv__tick{visibility:visible}
@media print{.bp-flv,.bp-toast{display:none!important}}

/* ============ START HERE (home) ============ */
.bp-start__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.bp-choices{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.bp-choice{
  display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;min-height:44px;
  padding:22px 22px 24px;background:transparent;color:var(--ink);border:0;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.bp-choice:nth-child(2n){border-right:0}
.bp-choice:nth-last-child(-n+2){border-bottom:0}
.bp-choice:hover,.bp-choice.is-sel{background:var(--paper-2)}
.bp-choice.is-sel{box-shadow:inset 3px 0 0 var(--rouge)}
.bp-choice__k{color:var(--rouge)}
.bp-choice b{font-family:"Instrument Serif",serif;font-weight:400;font-size:26px;line-height:1.1}
.bp-choice__d{color:var(--ink-3);font-size:15px}
.bp-mine{display:flex;flex-direction:column;gap:28px}
.bp-resume{border:1px solid var(--ink);padding:22px;display:flex;flex-direction:column;gap:10px;background:var(--paper-2)}
.bp-resume h3{margin:0;font-family:"Instrument Serif",serif;font-weight:400;font-size:28px;line-height:1.1}
.bp-resume[hidden]{display:none}
.bp-resume p{margin:0}
.bp-resume .bp-btn{align-self:flex-start;margin-top:6px}
.bp-saved ul{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--rule)}
.bp-saved li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule)}
.bp-saved li a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.bp-saved li a:hover{color:var(--rouge)}
.bp-saved .bp-empty{color:var(--ink-3)}
.bp-saved .bp-rm{margin-left:auto;background:none;border:0;color:var(--ink-3);cursor:pointer;min-width:44px;min-height:44px}
.bp-saved .bp-rm:hover{color:var(--rouge)}
@media (max-width:900px){.bp-start__grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:560px){
  .bp-choices{grid-template-columns:1fr}
  .bp-choice{border-right:0}
  .bp-choice:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .bp-choice:last-child{border-bottom:0}
}

/* Path cards on the home page: personal progress + chosen start */
.path__mine{display:block;margin-top:8px;color:var(--rouge)}
.path.is-start{box-shadow:inset 3px 0 0 var(--rouge)}

/* ============ BOOKMARK BUTTON (cards + article) ============ */
.bp-bm{
  background:none;border:1px solid var(--rule);color:var(--ink-2);cursor:pointer;
  min-width:44px;min-height:44px;font-size:18px;line-height:1;
}
.bp-bm:hover,.bp-bm[aria-pressed="true"]{color:var(--rouge);border-color:var(--rouge)}
.index__row .bp-bm,.featured__kicker .bp-bm{margin-left:auto}
.index__row{align-items:center}

/* ============ ARTICLE ACTIONS + ANCHORS ============ */
.bp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 0;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bp-actions .bp-left{margin-left:auto}
.prose h2 .bp-anchor{
  margin-left:10px;background:none;border:0;color:var(--ink-3);cursor:pointer;opacity:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.6em;min-width:44px;min-height:44px;
}
.prose h2:hover .bp-anchor,.prose h2 .bp-anchor:focus-visible{opacity:1}
@media (hover:none){.prose h2 .bp-anchor{opacity:.6}}

/* ============ ERROR-BUDGET CALCULATOR ([yawc_budget_calculator]) ============ */
.bp-calc{border:1px solid var(--ink);margin:36px 0;background:var(--paper-2)}
.bp-calc__hd{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--ink);color:var(--ink-3)}
.bp-calc__in{padding:20px 18px 6px}
.bp-calc input[type=range]{width:100%;accent-color:var(--rouge);min-height:44px}
.bp-calc__ticks{display:flex;justify-content:space-between;gap:4px;flex-wrap:wrap}
.bp-calc__ticks button{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:8px 6px;min-height:44px;font:inherit;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px}
.bp-calc__ticks button.is-on{color:var(--rouge);text-decoration:underline}
.bp-calc__out{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:10px}
.bp-calc__out div{padding:16px 18px;border-right:1px solid var(--rule)}
.bp-calc__out div:last-child{border-right:0}
.bp-calc__out b{display:block;font-family:"Instrument Serif",serif;font-weight:400;font-size:40px;line-height:1;color:var(--ink)}
.bp-calc__inc{padding:16px 18px}
.bp-calc__inc label{display:flex;align-items:center;gap:12px;padding:8px 0;min-height:44px;border-bottom:1px solid var(--hair);cursor:pointer}
.bp-calc__inc label span:nth-of-type(1){flex:1}
.bp-calc__inc input[type=checkbox]{width:20px;height:20px;accent-color:var(--rouge)}
.bp-calc__track{height:10px;border:1px solid var(--ink);margin-top:16px;position:relative}
.bp-calc__track i{position:absolute;inset:0 auto 0 0;background:var(--rouge);width:0}
.bp-calc__track.is-over i{background:var(--rouge-deep)}
.bp-calc__scale{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:var(--ink-3)}
.bp-calc__verdict{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--ink);background:var(--paper)}
.bp-calc__verdict .is-ok{color:var(--sap)}
.bp-calc__verdict .is-bad{color:var(--rouge)}
html[data-flavor="console"] .bp-calc__verdict .is-ok,html[data-flavor="dusk"] .bp-calc__verdict .is-ok,html[data-flavor="blueprint"] .bp-calc__verdict .is-ok{color:#8FF0B0}
@media (max-width:560px){.bp-calc__out{grid-template-columns:1fr}.bp-calc__out div{border-right:0;border-bottom:1px solid var(--rule)}.bp-calc__out div:last-child{border-bottom:0}}