/* ==========================================================================
   majiai.co tools library: shared styling for the 13 pages in tools/.

   Load order on a tool page:
     css/majaco-design-system.css  (generated, never edit)
     css/maji-site.css             (maji layer: dark green, maji pink)
     css/maji-tools.css            (this file)
     the page's own <style> block

   The page chrome (header, hero, footer, call to action) sits on dark green
   with maji pink accents, exactly like index.html. The working area of each
   tool sits in .tool-workspace, a light panel on the design-system light
   tokens. The tools' charts and the markup their scripts generate are drawn
   for a light background, so they stay readable without touching any script.

   The tool pages no longer load css/variables.css or css/style.css. Those two
   files are shared with the client portals and must stay byte-identical, so
   the parts the tools used are rebuilt here from design-system tokens:
     1. the legacy custom properties the tools' inline CSS and scripts read
     2. the page frame (hero, back link, workspace, call to action)
     3. base elements inside the workspace (reset, inputs, tables, buttons)
     4. tool components ported from css/style.css
   Pink is used only on dark green; on light surfaces accents are pine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Legacy custom properties (were css/variables.css), mapped to tokens.
   Values are the light-theme ones because every consumer sits in the light
   workspace. Weights 500 and 600 do not exist in the brand: they map to 400
   and 700. Mono maps to the brand sans with tabular figures where it is used.
   -------------------------------------------------------------------------- */
:root {
  --color-primary:       var(--color-pine);
  --color-primary-dark:  var(--color-pine-deep);
  --color-primary-light: color-mix(in srgb, var(--color-pine) 16%, var(--color-white));
  --color-primary-rgb:   0, 100, 88;
  --color-accent:        var(--color-lime);
  --color-dark:          var(--color-pine-deep);
  --color-bg:            var(--color-white);
  --color-bg-alt:        var(--color-off-white);
  --color-bg-dark:       var(--color-dark-green);
  --color-bg-dark-2:     color-mix(in srgb, var(--color-dark-green) 92%, var(--color-white));
  --color-text:          var(--color-dark-green);
  --color-text-muted:    var(--color-ink-soft);  /* was #7A7A7A: fails AA for small text */
  --color-text-light:    var(--color-white);
  --color-text-subtle:   var(--color-ink-soft);
  --color-border:        var(--color-line);
  --color-border-dark:   color-mix(in srgb, var(--color-white) 18%, var(--color-dark-green));
  --color-success:       var(--color-pine);
  --color-error:         var(--color-red);
  --color-warning:       var(--color-orange);

  --font-mono: var(--font-sans);

  --font-size-xs:   0.625rem;
  --font-size-sm:   0.8125rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5625rem;
  --font-size-2xl:  1.9375rem;
  --font-size-3xl:  2.4375rem;
  --font-size-4xl:  3.0625rem;
  --font-size-5xl:  3.8125rem;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   400;
  --font-weight-semibold: 700;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-snug:    1.4;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.7;

  --space-xs:  var(--space-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-5);
  --space-xl:  var(--space-6);
  --space-2xl: var(--space-7);
  --space-3xl: var(--space-8);
  --space-4xl: var(--space-9);
  --space-5xl: var(--space-10);

  --radius-xl:   var(--radius-lg);
  --radius-2xl:  var(--radius-lg);
  --radius-full: var(--radius-pill);
  --shadow-xl:   var(--shadow-lg);
  --shadow-green: 0 4px 20px color-mix(in srgb, var(--color-pine) 30%, transparent);

  --transition-fast: var(--duration-fast) ease;
  --transition-base: var(--duration-base) ease;
  --transition-slow: var(--duration-slow) ease;

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  --nav-height: var(--header-height);

  /* were declared in style.css for the interactive tools */
  --pine-primary:     var(--color-pine);
  --pine-dark:        var(--color-pine-deep);
  --pine-accent:      var(--color-pine);
  --pine-light:       color-mix(in srgb, var(--color-pine) 16%, var(--color-white));
  --pine-dark-bg:     var(--color-dark-green);
  --pine-primary-rgb: 0, 100, 88;

  /* tints used by the tools for result states */
  --tool-ok-tint:    color-mix(in srgb, var(--color-pine) 10%, var(--color-white));
  --tool-warn-tint:  color-mix(in srgb, var(--color-orange) 14%, var(--color-white));
  --tool-error-tint: color-mix(in srgb, var(--color-red) 9%, var(--color-white));
  --tool-error-line: color-mix(in srgb, var(--color-red) 35%, var(--color-white));
  /* "warning" text on white: orange alone fails AA, this mix is about 6.9:1 */
  --color-warn-text: color-mix(in srgb, var(--color-orange) 60%, var(--color-dark-green));
}

/* --------------------------------------------------------------------------
   2. Page frame
   -------------------------------------------------------------------------- */

/* Hero: the shared compact hero from css/maji-pages.css (.maji-hero.maji-hero--compact),
   plus a back link to the tools library */
.tool-hero__back { margin-bottom: var(--space-6); font-size: var(--text-small); }
.tool-hero__back svg { transform: scaleX(-1); }
.tool-hero__back:hover svg { transform: scaleX(-1) translateX(3px); }
.tool-hero .maji-hero__title { margin-top: var(--space-4); }
.tool-hero .maji-hero__lead { max-width: 44rem; }
.tool-hero .maji-hero__lead a { color: var(--link); }

/* Light workspace: the design system's light tokens, re-declared inside the dark page */
.tool-workspace {
  --bg:            var(--color-off-white);
  --bg-alt:        var(--color-off-white);
  --surface:       var(--color-white);
  --text:          var(--color-dark-green);
  --text-soft:     var(--color-ink-soft);
  --text-muted:    var(--color-ink-soft);
  --heading:       var(--color-dark-green);
  --brand:         var(--color-pine);
  --accent:        var(--color-pine);
  --link:          var(--color-pine);
  --line:          var(--color-line);
  --line-strong:   var(--color-line-strong);
  --focus-ring:    var(--color-pine);
  --btn-primary-bg:    var(--color-pine);
  --btn-primary-text:  var(--color-white);
  --btn-primary-hover: var(--color-pine-deep);
  --highlight-bg:   var(--color-lime);
  --highlight-text: var(--color-dark-green);
  --stat:           var(--color-pine);
  color-scheme: light;
  background: var(--bg);
  color: var(--text);
}
.tool-workspace .overline, .tool-workspace .card__index { color: var(--color-pine); }
.tool-workspace { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem); }
.tool-workspace .section { padding-block: 0; background: transparent; }
.tool-workspace .section + .section { margin-top: var(--space-6); }

/* maji disclaimer, shown at the top of each tool */
.tool-disclaimer {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-pine);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-7);
  max-width: none;
}
.tool-disclaimer strong { font-weight: var(--weight-regular); color: var(--color-dark-green); }

/* Call to action at the foot of a tool: .cta-band on dark green, maji pink */
.tool-cta { border-top: 1px solid var(--line); }
.tool-cta .lead { max-width: 36rem; }

/* --------------------------------------------------------------------------
   3. Base elements inside the workspace.
   The tools were written against the old reset (no default padding, no list
   bullets, links inheriting colour). :where() keeps it at zero specificity so
   any class rule, the page's own CSS and inline styles still win.
   -------------------------------------------------------------------------- */
:where(.tool-workspace) :where(*) { padding: 0; }
:where(.tool-workspace) :where(ul, ol) { list-style: none; }
:where(.tool-workspace) a { color: inherit; text-decoration: none; }
/* links inside running text are underlined so they do not rely on colour alone */
:where(.tool-workspace) :where(p, li, td) a:not(.btn) { text-decoration: underline; text-underline-offset: 0.15em; }
:where(.tool-workspace) p { max-width: none; }
:where(.tool-workspace) p + p { margin-top: 0; }
:where(.tool-workspace) :where(h1, h2, h3, h4, h5, h6) { line-height: var(--leading-heading); }
:where(.tool-workspace) :where(h5, h6) { font-weight: var(--weight-bold); }
:where(.tool-workspace) :where(input, select, textarea) { font-weight: var(--weight-light); }
:where(.tool-workspace) :where(code, kbd, samp, pre) { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* Form controls the tools render without their own class */
:where(.tool-workspace) :where(input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="date"], input[type="time"], select, textarea) {
  background-color: var(--color-white);
  color: var(--color-dark-green);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
}
:where(.tool-workspace) :where(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--color-pine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pine) 25%, transparent);
}
:where(.tool-workspace) :where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--color-pine); }

/* Buttons. The tools' scripts generate the old class names (btn-primary,
   btn-sm, btn-outline), so those are mapped onto the design-system button. */
.tool-workspace .btn { min-height: 2.75rem; padding: 0 var(--space-5); font-weight: var(--weight-regular); }
.tool-workspace .btn-primary { background: var(--color-pine); color: var(--color-white); border-color: var(--color-pine); }
.tool-workspace .btn-primary:hover { background: var(--color-pine-deep); border-color: var(--color-pine-deep); color: var(--color-white); }
.tool-workspace .btn-outline, .tool-workspace .btn-secondary { background: var(--color-white); color: var(--color-dark-green); border-color: var(--color-line-strong); }
.tool-workspace .btn-outline:hover, .tool-workspace .btn-secondary:hover { border-color: var(--color-pine); background: var(--color-pine-tint); }
.tool-workspace .btn-dark { background: var(--color-dark-green); color: var(--color-white); border-color: var(--color-dark-green); }
.tool-workspace .btn-dark:hover { background: var(--color-pine-deep); border-color: var(--color-pine-deep); }
.tool-workspace .btn:not(.btn-primary):not(.btn-outline):not(.btn-secondary):not(.btn-dark):not(.btn--primary):not(.btn--secondary):not(.btn--text) {
  background: var(--color-white); color: var(--color-dark-green); border-color: var(--color-line-strong);
}
.tool-workspace .btn:not(.btn-primary):not(.btn-outline):not(.btn-secondary):not(.btn-dark):not(.btn--primary):not(.btn--secondary):not(.btn--text):hover {
  border-color: var(--color-pine); background: var(--color-pine-tint);
}
.tool-workspace .btn-sm { min-height: 2.25rem; padding: 0 var(--space-4); font-size: var(--text-small); }
.tool-workspace .btn-lg { min-height: 3.5rem; padding: 0 var(--space-6); font-size: var(--text-subtitle); }
.tool-workspace .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   4. Tool components (ported from css/style.css, rebuilt on tokens)
   -------------------------------------------------------------------------- */

/* ---- Layout ---- */
.tool-page { min-height: auto; }
.container--wide { max-width: 1800px; }

/* ---- Content card: the boxed panel every tool uses ---- */
.content-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: var(--space-6);
  transition: box-shadow 0.3s ease;
}
.content-card:hover { box-shadow: var(--shadow-md); }
.content-card--wide .cascade-scroll { overflow-x: auto; }
.content-card h2 {
  font-size: var(--text-h4);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  line-height: var(--leading-heading);
  margin-bottom: var(--space-5);
  color: var(--color-dark-green);
}
.content-card h3 {
  font-size: var(--text-subtitle);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  color: var(--color-dark-green);
}
.content-card > h3:not(:first-child) { margin-top: var(--space-6); }
.content-card p { color: var(--color-ink-soft); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
.content-card p:last-child { margin-bottom: 0; }
.content-card ul, .content-card ol { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.content-card ul li, .content-card ol li { position: relative; padding-left: 1.5rem; color: var(--color-ink-soft); line-height: var(--line-height-relaxed); }
.content-card ul li::before { content: ""; position: absolute; left: 0.25rem; top: 0.7em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-pine); }
.content-card ol { counter-reset: list-counter; }
.content-card ol li { counter-increment: list-counter; }
.content-card ol li::before { content: counter(list-counter) "."; color: var(--color-pine); font-weight: var(--weight-bold); font-size: var(--text-small); position: absolute; left: 0; top: 0.1em; }

/* ---- Tables ---- */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-line); }
.tool-workspace table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.tool-workspace thead { background: var(--color-off-white); }
.tool-workspace th {
  text-align: left; padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-regular); font-size: var(--text-small);
  text-transform: uppercase; letter-spacing: var(--tracking-overline);
  color: var(--color-ink-soft); border-bottom: 1px solid var(--color-line);
}
.tool-workspace td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line); color: var(--color-ink-soft); line-height: var(--leading-snug); }
.tool-workspace td strong { color: var(--color-dark-green); }
.tool-workspace tr:last-child td { border-bottom: none; }
.tool-workspace tbody tr:hover { background: var(--color-off-white); }

/* ---- Formula display ---- */
.formula {
  position: relative;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  background: var(--color-off-white);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-pine);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--color-dark-green);
  overflow-x: auto;
  margin-block: var(--space-4);
  transition: box-shadow 0.3s ease;
}
.formula:hover { box-shadow: var(--shadow-sm); }
.formula .equals, .formula .op, .formula .var { color: var(--color-pine); }

/* ---- Phase steps (TOC subordination) ---- */
.phase-steps { display: grid; gap: var(--space-6); }
.phase-step { display: flex; gap: var(--space-5); align-items: flex-start; }
.phase-step__number {
  width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 50%;
  background: var(--color-pine); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-regular); font-size: var(--text-subtitle); font-variant-numeric: tabular-nums;
}
.phase-step__content h3 { font-size: var(--text-subtitle); font-weight: var(--weight-regular); margin-bottom: var(--space-2); color: var(--color-dark-green); }
.phase-step__content p { color: var(--color-ink-soft); line-height: var(--line-height-relaxed); }

/* ---- Numbered pitfalls (Manufacturing Psychology) ---- */
.pitfalls-list { display: grid; gap: var(--space-5); }
.pitfall-item {
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 3rem); display: flex; gap: var(--space-6); align-items: flex-start;
  transition: box-shadow 0.3s ease;
}
.pitfall-item:hover { box-shadow: var(--shadow-md); }
.pitfall-item__num {
  flex-shrink: 0; min-width: 2.75rem; padding-top: 0.2rem;
  font-size: var(--text-h4); line-height: 1; color: var(--color-pine);
  font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-heading);
}
.pitfall-item__num::before { content: "0"; }
.pitfall-item__body h3 { font-size: var(--text-h4); font-weight: var(--weight-regular); margin-bottom: var(--space-4); color: var(--color-dark-green); }
.pitfall-item__body p { color: var(--color-ink-soft); line-height: var(--line-height-relaxed); }
.pitfall-item__body p + p { margin-top: var(--space-4); }
@media (max-width: 39.9rem) { .pitfall-item { flex-direction: column; gap: var(--space-3); } }

/* ---- Calculator rows ---- */
.calc-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.calc-grid h3 { font-size: var(--text-subtitle); font-weight: var(--weight-regular); margin-bottom: var(--space-1); }
.calc-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; }
.calc-row label { flex: 1; min-width: 180px; font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-dark-green); }
.calc-row input[type="number"] {
  width: 160px; min-height: 2.75rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-size: var(--text-body); font-variant-numeric: tabular-nums;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.calc-row input[type="number"]:focus { outline: none; border-color: var(--color-pine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pine) 20%, transparent); }
@media (max-width: 639px) {
  .calc-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .calc-row input[type="number"] { width: 100%; }
}

/* ---- Result tiles ---- */
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.result-item {
  background: var(--color-off-white); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease;
}
.result-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.result-label { font-size: var(--text-small); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--color-ink-soft); }
.result-value { font-size: var(--text-title); font-weight: var(--weight-regular); color: var(--color-dark-green); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.result-item.result-animate-in { animation: resultSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes resultSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* Outcome colours, one rule across the tools (Toby, 20 Oct 2026: pine not red):
   better = dark green, warning = soft grey, worse = pine */
.result-item.result-optimal { border-left: 3px solid var(--color-dark-green); }
.result-item.result-warning { border-left: 3px solid var(--color-grey); background: color-mix(in srgb, var(--color-grey) 10%, var(--color-white)); }
.result-item.result-danger  { border-left: 3px solid var(--color-pine); background: var(--color-pine-tint); }
.result-total-highlight { font-weight: var(--weight-regular) !important; color: var(--color-pine-deep) !important; font-size: var(--text-h4) !important; }

/* ---- Chart containers and tooltip ---- */
.chart-container { position: relative; width: 100%; overflow-x: auto; }
.chart-container canvas { display: block; }
.chart-tooltip {
  position: fixed; z-index: 1000; pointer-events: none; white-space: nowrap;
  background: var(--color-dark-green); color: var(--color-white);
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--text-small); font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.15s ease;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip__row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.chart-tooltip__swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---- Sliders (Speed-Downtime) ---- */
.slider-group { display: flex; flex-direction: column; gap: var(--space-2); }
.slider-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-1) 0; }
.slider-row label { min-width: 160px; font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-dark-green); }
.slider-row input[type="range"] {
  --slider-fill: var(--color-pine);
  flex: 1; min-width: 120px; height: 8px; -webkit-appearance: none; appearance: none; outline: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--slider-fill) 0%, var(--slider-fill) var(--fill-pct, 50%), var(--color-line-strong) var(--fill-pct, 50%), var(--color-line-strong) 100%);
  transition: background 0.1s ease;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: var(--color-pine); border: 2px solid var(--color-white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-pine) 35%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.slider-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider-row input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; background: var(--color-pine); border: 2px solid var(--color-white); }
.slider-row input[type="range"]::-moz-range-progress { background: var(--color-pine); border-radius: var(--radius-pill); height: 8px; }
.slider-row input[type="range"]:focus-visible { outline: 3px solid var(--color-pine); outline-offset: 4px; }
.slider-value {
  min-width: 120px; text-align: center; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--pine-light); color: var(--color-pine-deep);
  font-size: var(--text-small); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums;
  transition: background 0.3s ease, transform 0.15s ease;
}
.slider-value.slider-value--changed { animation: sliderPop 0.3s ease; }
@keyframes sliderPop { 0% { transform: scale(1); } 50% { transform: scale(1.08); background: var(--color-pine); color: var(--color-white); } 100% { transform: scale(1); } }
@media (max-width: 639px) { .slider-row { flex-wrap: wrap; } .slider-row label { min-width: 100%; } }

/* ---- Speed-Downtime comparison ---- */
.sd-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; margin-top: var(--space-4); }
.sd-comparison__vs { font-size: var(--text-h4); font-weight: var(--weight-regular); color: var(--color-ink-soft); text-align: center; }
.sd-comparison__card { text-align: center; padding: var(--space-5); border-radius: var(--radius-md); transition: transform 0.3s ease; }
.sd-comparison__card:hover { transform: translateY(-2px); }
.sd-comparison__card.sd-card--you { background: var(--color-off-white); border: 1px solid var(--color-line-strong); }
.sd-comparison__card.sd-card--optimal { background: var(--tool-ok-tint); border: 2px solid var(--color-pine); }
.sd-comparison__card .sd-card__label { font-size: var(--text-small); text-transform: uppercase; letter-spacing: var(--tracking-overline); font-weight: var(--weight-regular); color: var(--color-ink-soft); margin-bottom: var(--space-1); }
.sd-comparison__card .sd-card__value { font-size: var(--text-h2); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); font-variant-numeric: tabular-nums; }
.sd-card--optimal .sd-card__value { color: var(--color-pine); }
.sd-card--you .sd-card__value { color: var(--color-dark-green); }
.sd-comparison__card .sd-card__sub { font-size: var(--text-small); color: var(--color-ink-soft); margin-top: 4px; }

/* ---- Time Hierarchy cascade ---- */
.nth-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.nth-controls__sep { width: 1px; height: 24px; background: var(--color-line); margin: 0 0.25rem; }
.nth-legend { display: inline-flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; font-size: var(--text-small); margin-bottom: 0.5rem; color: var(--color-ink-soft); }
.nth-legend__item { display: flex; align-items: center; gap: 6px; }
.nth-legend__swatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--color-line); }
.nth-legend__swatch--remaining { background: var(--color-lime); }
.nth-legend__swatch--set-aside { background: color-mix(in srgb, var(--color-dark-green) 6%, var(--color-white)); border: 2px dashed color-mix(in srgb, var(--color-dark-green) 45%, var(--color-white)); }
.nth-legend__swatch--loss      { background: color-mix(in srgb, var(--color-grey) 40%, var(--color-white)); }

.cascade-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 40px 20px; background: var(--color-off-white); border-radius: var(--radius-md); position: relative; }
.cascade-container { display: grid; grid-template-columns: repeat(100, 1fr); grid-template-rows: repeat(7, auto); gap: 6px; min-width: 0; width: 100%; padding: 8px; }
.block {
  border-radius: var(--radius-sm); padding: 10px 8px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; min-height: 50px;
  position: relative; transition: all 0.3s ease; overflow: hidden;
}
.block.has-detail { cursor: pointer; }
.block.has-detail:hover { box-shadow: var(--shadow-md); }
.block.has-detail:focus-visible { outline: 3px solid var(--color-pine); outline-offset: 2px; }
.block.root .block-title, .block.root .block-desc { color: var(--color-white); }
.expand-icon {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; font-family: inherit; line-height: 1;
  background: color-mix(in srgb, var(--color-white) 90%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold); font-size: 1.125rem; color: var(--color-pine);
}
.expand-icon:hover { background: var(--color-white); }
.expand-icon:focus-visible { outline: 3px solid var(--color-dark-green); outline-offset: 2px; }
.row-hidden { display: none; }
.collapse-all {
  position: absolute; top: 20px; right: 20px; z-index: 100; cursor: pointer;
  background: var(--color-pine); color: var(--color-white); padding: 10px 20px; border: none;
  border-radius: var(--radius-pill); font-weight: var(--weight-regular); font-size: 0.9em;
}
.collapse-all:hover { background: var(--color-pine-deep); }
/* Nothing in the graphic below 13px (Toby, 20 Oct 2026). */
.block-title { font-size: 0.9375rem; line-height: 1.25; font-weight: var(--weight-bold); margin-bottom: 4px; }
.block-desc { font-size: 0.8125rem; line-height: 1.35; margin-top: 4px; }
.block-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; font-weight: var(--weight-bold); }
.block-more { font-size: 0.8125rem; margin-top: 6px; text-decoration: underline; text-underline-offset: 2px; }
.block-detail { display: none; font-size: 0.8125rem; line-height: 1.45; text-align: left; color: var(--color-dark-green); margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--color-dark-green) 20%, transparent); }
.block.open .block-detail { display: block; }
.block-detail p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
/* Compact version of the .content-card list style (dot bullets), dark text. */
.content-card .block-detail ul { gap: 2px; margin: 6px 0 0; padding: 0; }
.content-card .block-detail ul li { padding-left: 1rem; font-size: inherit; line-height: inherit; color: inherit; }
.content-card .block-detail ul li::before { left: 0.15rem; top: 0.6em; width: 0.35rem; height: 0.35rem; background: var(--color-dark-green); }
.block .nowrap { white-space: nowrap; }
.nth-scroll-hint { display: none; font-size: var(--text-small); color: var(--color-ink-soft); margin: 0 0 0.5rem; }
.block.root { background: linear-gradient(135deg, var(--color-pine-deep), var(--color-pine)); color: var(--color-white); }
.block.primary { background: var(--color-lime); color: var(--color-dark-green); }
/* Two grey kinds, told apart by fill, edge and badge: set aside (pale, dashed edge,
   outlined badge) and loss (mid grey, solid badge). Dark text on both. */
.block.set-aside { background: color-mix(in srgb, var(--color-dark-green) 6%, var(--color-white)); border: 2px dashed color-mix(in srgb, var(--color-dark-green) 45%, var(--color-white)); color: var(--color-dark-green); }
.block.set-aside .block-badge { background: var(--color-white); color: var(--color-dark-green); border: 1px solid var(--color-dark-green); }
.block.loss { background: color-mix(in srgb, var(--color-grey) 40%, var(--color-white)); color: var(--color-dark-green); }
.block.loss .block-badge { background: var(--color-dark-green); color: var(--color-white); }
.block.plan { background: var(--color-white); border: 3px dashed var(--color-pine); color: var(--color-dark-green); }
.block.plan .block-badge { background: var(--color-lime); color: var(--color-dark-green); }
.block.actuals { background: var(--color-white); border: 3px dashed var(--color-grey); color: var(--color-dark-green); }
.block.actuals .block-badge { background: var(--color-dark-green); color: var(--color-white); }
/* "Show me" highlights: solid pine ring for the numerator, dashed dark outline for the denominator */
.highlight-numerator { box-shadow: 0 0 0 4px var(--color-pine) inset; animation: pulse-numerator 1s ease-in-out 3; }
.highlight-denominator { outline: 3px dashed var(--color-dark-green); outline-offset: -8px; }
@keyframes pulse-numerator { 0%, 100% { box-shadow: 0 0 0 4px var(--color-pine) inset; } 50% { box-shadow: 0 0 0 8px var(--color-pine) inset; } }
.show-me-btn {
  background: var(--color-pine); color: var(--color-white); border: none; cursor: pointer;
  min-height: 2.25rem; padding: 0 var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--text-small); font-weight: var(--weight-regular); white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.show-me-btn:hover { background: var(--color-pine-deep); }
.legend-box { display: inline-flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; font-size: var(--text-small); color: var(--color-ink-soft); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--color-line); flex-shrink: 0; }
@media (max-width: 768px) { .cascade-scroll { overflow-x: auto; } .cascade-container { min-width: 960px; } .nth-scroll-hint { display: block; } }

/* ---- Split Solve ---- */
.ss-tabs { display: flex; gap: 0; margin-bottom: var(--space-6); background: var(--color-off-white); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 4px; width: fit-content; }
.ss-tab { padding: var(--space-2) var(--space-5); font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-ink-soft); background: none; border: none; cursor: pointer; border-radius: var(--radius-pill); transition: all 0.3s ease; }
.ss-tab:hover { color: var(--color-dark-green); background: color-mix(in srgb, var(--color-dark-green) 5%, transparent); }
.ss-tab--active, .ss-tab--active:hover { color: var(--color-white); background: var(--color-pine); }
.ss-phase h2 { font-size: var(--text-h4); font-weight: var(--weight-regular); margin-bottom: var(--space-5); }
.ss-phase h3 { font-size: var(--text-subtitle); font-weight: var(--weight-regular); margin-bottom: var(--space-2); margin-top: var(--space-4); }
.ss-form-group { margin-bottom: var(--space-4); }
.ss-form-group label { display: block; font-size: var(--text-small); font-weight: var(--weight-regular); margin-bottom: var(--space-1); color: var(--color-dark-green); }
.ss-form-group input[type="text"], .ss-form-group input[type="number"], .ss-form-group textarea {
  width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm); font-size: var(--text-body); font-family: inherit; transition: border-color var(--transition-fast);
}
.ss-form-group input:focus, .ss-form-group textarea:focus { outline: none; border-color: var(--color-pine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pine) 20%, transparent); }
.ss-row { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.ss-flex-1 { flex: 1; }
.ss-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); justify-content: flex-end; flex-wrap: wrap; }
.ss-review { background: var(--color-off-white); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-4); margin-bottom: var(--space-5); font-size: var(--text-small); line-height: var(--line-height-relaxed); }
.ss-tree { margin-bottom: var(--space-5); }
.ss-node {
  border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4);
  margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  flex-wrap: wrap; transition: border-color var(--transition-fast);
}
.ss-node--ok { border-color: var(--color-line); background: var(--color-off-white); }
.ss-node--cause { border-color: color-mix(in srgb, var(--color-pine) 40%, var(--color-white)); background: var(--color-pine-tint); }
.ss-node--unknown { border-color: var(--color-line); background: var(--color-white); }
.ss-node__header { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; font-size: var(--text-small); }
.ss-node__values { font-size: var(--text-small); color: var(--color-ink-soft); }
.ss-node__actions { display: flex; gap: 4px; flex-shrink: 0; }
.tool-workspace .ss-node__actions .btn { min-height: 2rem; padding: 2px 10px; font-size: var(--text-small); }
.ss-status { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: var(--weight-bold); flex-shrink: 0; transition: transform 0.2s ease; }
.ss-status:hover { transform: scale(1.15); }
.ss-status--ok { background: var(--color-pine); color: var(--color-white); }
.ss-status--cause { background: var(--color-pine); color: var(--color-white); animation: causeGlow 2s ease infinite; }
.ss-status--unknown { background: var(--color-line); color: var(--color-ink-soft); }
@keyframes causeGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-pine) 30%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-pine) 0%, transparent); } }
.ss-equation { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.ss-split-form { margin-left: 28px; margin-bottom: 8px; animation: nodeSlideIn 0.3s ease; }
.ss-split-form__inner { background: var(--tool-ok-tint); border: 2px solid var(--color-pine); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-md); }
.ss-split-form__inner h4 { font-size: var(--text-small); font-weight: var(--weight-regular); margin-bottom: var(--space-2); }
.ss-split-row { margin-bottom: 4px; }
.ss-split-row input { min-height: 2.25rem; padding: 4px 8px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); font-size: var(--text-small); font-family: inherit; }
.ss-split-row input:focus { outline: none; border-color: var(--color-pine); }
.ss-cause-card { border: 1px solid color-mix(in srgb, var(--color-pine) 30%, var(--color-white)); border-radius: var(--radius-md); background: var(--color-pine-tint); padding: var(--space-4); margin-bottom: var(--space-4); }
.ss-cause-card__header { font-size: var(--text-small); margin-bottom: var(--space-2); }
.ss-cause-card label { display: block; font-size: var(--text-small); font-weight: var(--weight-regular); margin-bottom: var(--space-1); color: var(--color-ink-soft); }
.ss-cause-card textarea { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); font-size: var(--text-small); font-family: inherit; }
.ss-cause-card textarea:focus { outline: none; border-color: var(--color-pine); }
.ss-btn-ok { color: var(--color-pine) !important; }
.ss-btn-cause { color: var(--color-pine) !important; }

.ss-progress { display: flex; align-items: center; margin-bottom: var(--space-6); position: relative; }
.ss-progress__step { display: flex; align-items: center; gap: var(--space-2); flex: 1; position: relative; cursor: pointer; padding: var(--space-2) 0; transition: opacity 0.3s ease; }
/* steps stay fully opaque so their labels keep AA contrast; state shows in the number badge */
.ss-progress__step:hover .ss-progress__label { color: var(--color-dark-green); }
.ss-progress__num {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-regular); font-size: var(--text-small); flex-shrink: 0; transition: all 0.3s ease;
  background: var(--color-line); color: var(--color-ink-soft);
}
.ss-progress__step--active .ss-progress__num { background: var(--color-pine); color: var(--color-white); }
.ss-progress__step--done .ss-progress__num { background: var(--pine-light); color: var(--color-pine-deep); }
.ss-progress__label { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-ink-soft); }
.ss-progress__step--active .ss-progress__label { color: var(--color-dark-green); }
.ss-progress__line { flex: 1; height: 2px; background: var(--color-line); margin: 0 var(--space-2); position: relative; overflow: hidden; }
.ss-progress__line--filled { background: var(--color-pine); }

.ss-tree-v2 { margin-bottom: var(--space-5); position: relative; }
.ss-tree-v2 .ss-node { position: relative; border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: 8px; transition: all 0.3s ease; border-width: 2px; }
.ss-tree-v2 .ss-node:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.ss-tree-connector { position: relative; margin-left: 10px; padding-left: 18px; }
.ss-tree-connector::before { content: ""; position: absolute; left: 0; top: -4px; bottom: 4px; width: 2px; background: var(--color-line-strong); }
.ss-tree-connector .ss-node::before { content: ""; position: absolute; left: -18px; top: 50%; width: 16px; height: 2px; background: var(--color-line-strong); }
.ss-tree-connector .ss-node--ok::before { background: var(--color-pine); }
.ss-tree-connector .ss-node--cause::before { background: var(--color-pine); }
.ss-node-enter { animation: nodeSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes nodeSlideIn { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ss-phase-enter { animation: phaseSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes phaseSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ---- Shared content patterns (consistency pass, 20 Oct 2026) ----
   One look per job across the tools: callouts, two-up comparisons, metric
   bars, small notes and the step-down ladder. Use these instead of inline
   styles. Radii from tokens only (4px / 12px), text from the type scale. */
.content-card > p, .content-card > ul, .content-card > ol { max-width: 75ch; }

.tool-workspace .callout {
  background: var(--color-pine-tint);
  border: 1px solid color-mix(in srgb, var(--color-pine) 18%, var(--color-white));
  border-left: 3px solid var(--color-pine);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
  color: var(--color-dark-green);
  line-height: var(--line-height-relaxed);
  max-width: none;
}
.tool-workspace .callout p { color: var(--color-dark-green); margin-bottom: var(--space-2); }
.tool-workspace .callout p:last-child { margin-bottom: 0; }
.tool-workspace .callout .formula { margin-block: var(--space-3); }

.constraint-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-block: var(--space-4); }
.constraint-pair__item {
  background: var(--color-off-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-dark-green);
  line-height: var(--line-height-relaxed);
}
.constraint-pair__item--pine { background: var(--color-pine-tint); border-color: color-mix(in srgb, var(--color-pine) 30%, var(--color-white)); }
.constraint-pair__label { font-size: var(--text-small); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--color-ink-soft); margin-bottom: var(--space-2); }
.constraint-pair__item--pine .constraint-pair__label { color: var(--color-pine); }
@media (max-width: 39.9rem) { .constraint-pair { grid-template-columns: 1fr; gap: var(--space-4); } }

.tool-workspace .metric { margin-bottom: var(--space-5); }
.tool-workspace .metric-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3);
  background: var(--color-dark-green); color: var(--color-lime);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--text-body); margin: 0 0 var(--space-2); max-width: none;
}
.tool-workspace .tool-note { font-size: var(--text-small); color: var(--color-ink-soft); line-height: var(--line-height-relaxed); }

.ladder { margin-top: var(--space-5); }
.ladder__level { background: var(--color-pine-tint); border-left: 3px solid var(--color-pine); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--color-dark-green); }
.ladder__level--end { border-left-color: var(--color-dark-green); }
.ladder__level span { color: var(--color-ink-soft); }
.ladder__step { font-size: var(--text-small); color: var(--color-ink-soft); padding-block: var(--space-1); }
.ladder__nest { padding-left: var(--space-5); }

/* ---- Small screens ---- */
@media (max-width: 639px) {
  .sd-comparison { grid-template-columns: 1fr; }
  .sd-comparison__vs { display: none; }
  .ss-progress { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .ss-progress__line { display: none; }
  .ss-tabs { width: 100%; }
  .ss-tab { flex: 1; text-align: center; padding: var(--space-2); }
  /* Tables: tighter cells and a sensible minimum width, so rows scroll sideways instead of growing very tall */
  .tool-workspace th, .tool-workspace td { padding: var(--space-3); }
  .table-wrapper table { min-width: 36rem; }
  /* Compact hero mark: keep it clear of the title on phones */
  .tool-hero .maji-hero__ring { display: none; }
}

/* ---- Print: the tool only, no site chrome ---- */
@media print {
  .site-header, .site-footer, .tool-cta, .skip-link, .tool-hero__back, .maji-hero__ring { display: none !important; }
  html.theme-maji, html.theme-maji body, .tool-hero { background: #fff !important; color: #000 !important; }
  .tool-hero * { color: #000 !important; }
  body { font-size: 12pt; }
}