/* ============================================================
   Levo Tools — shared brand tokens
   Single source of truth for colour and type across tools.levo.aero.

   Consumed by:
     /index.html               — the hub (light context)
     /roi/index.html           — Operator Revenue Calculator (light sheet + dark readout)
     /productivity/index.html  — Productivity ROI Calculator (same two-surface shape)

   Each calculator aliases these semantic tokens onto its own local names in a
   :root block at the top of its <style>; none of them defines a colour value.

   Two layers, deliberately:
     1. RAW PALETTE  — the exact Canva brand hexes. Never referenced directly
                       by a component; change a brand colour here and only here.
     2. SEMANTIC     — what a colour is *for*, split into an ON-WHITE set and an
                       ON-DARK set so the same file dresses the light hub and the
                       calculator's dark readout panel without either fighting
                       the other.

   Section 3 holds the hub's own components. Everything there is scoped under
   `.hub` so that linking this file into the calculator (which reuses generic
   class names like .wrap, .hero, .eyebrow, .foot, .line) cannot leak a single
   declaration into it. Only :root tokens are global.

   Fonts: load Inter + Playfair Display from the page, with the same Google
   Fonts URL on both pages so the second page is a cache hit:
   https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap
   ============================================================ */


/* ------------------------------------------------------------
   1. RAW PALETTE — Levo Canva brand kit
   ------------------------------------------------------------ */
:root{
  --levo-teal:            #0e7375;  /* primary brand accent          */
  --levo-deep-teal:       #1a5256;  /* headers, dark panels, brand text */
  --levo-dark-slate:      #374151;  /* body copy on white            */
  --levo-charcoal:        #181d27;  /* headlines, near-black         */
  --levo-white:           #ffffff;
  --levo-soft-mint:       #f0fdfa;  /* tinted surfaces; the glow on dark */

  /* Derived shades — tints and steps off the six above, not new brand colours. */
  --levo-deep-teal-dark:  #154a4e;  /* one step under Deep Teal: panel floor  */
  --levo-teal-hairline:   #2e6b6e;  /* rule that reads on a deep-teal ground  */
  --levo-mint-bright:     #eaf6f8;  /* primary text on dark                   */
  --levo-mint-soft:       #d2e7e7;  /* secondary text on dark                 */
  --levo-mint-dim:        #b3cfd1;  /* muted text / captions on dark          */
  --levo-paper:           #edf2f4;  /* page ground behind white cards         */
  --levo-slate-muted:     #5b6b75;  /* muted text on white                    */
  --levo-line:            #d3dce0;  /* hairline on white                      */
  --levo-coral:           #ffa3ab;  /* negative figures on dark               */
  --levo-amber:           #b4671f;  /* warnings on white                      */
  --levo-amber-tint:      #fdf6ec;  /* the ground under an amber warning      */
}


/* ------------------------------------------------------------
   2. SEMANTIC TOKENS
   ------------------------------------------------------------ */
:root{

  /* ---- 2a. ON-WHITE (the hub, and the calculator's input sheet) ---- */
  --bg-page:        var(--levo-paper);
  --bg-surface:     var(--levo-white);
  --bg-tint:        var(--levo-soft-mint);   /* inputs, pills, callouts */
  --text-strong:    var(--levo-charcoal);
  --text-body:      var(--levo-dark-slate);
  --text-muted:     var(--levo-slate-muted);
  --text-brand:     var(--levo-deep-teal);   /* brand-coloured text on white */
  --accent:         var(--levo-teal);        /* buttons, sliders, focus */
  --accent-hover:   var(--levo-deep-teal);
  --border:         var(--levo-line);
  --border-brand:   rgba(14, 115, 117, .20); /* teal hairline on a mint pill */
  --border-brand-strong: rgba(14, 115, 117, .25);
  --warn:           var(--levo-amber);
  --warn-surface:   var(--levo-amber-tint); /* banner ground for a failed/invalid state */

  /* ---- 2b. ON-DARK (the calculator's readout panel, both page headers) ---- */
  --dark-header:     var(--levo-deep-teal);      /* flat header bar         */
  --dark-panel-top:  var(--levo-deep-teal);      /* panel gradient, top     */
  --dark-panel-base: var(--levo-deep-teal-dark); /* panel gradient, bottom  */
  --dark-accent:     var(--levo-soft-mint);      /* the mint that glows     */
  --dark-text:       var(--levo-mint-bright);
  --dark-text-soft:  var(--levo-mint-soft);
  --dark-text-muted: var(--levo-mint-dim);
  --dark-border:     var(--levo-teal-hairline);
  --dark-negative:   var(--levo-coral);
  --dark-chip-bg:    rgba(240, 253, 250, .12);   /* mint pill on dark       */
  --dark-chip-line:  rgba(240, 253, 250, .22);
  --dark-glow:       rgba(240, 253, 250, .25);   /* text-shadow on mint type */
  --dark-glow-soft:  rgba(240, 253, 250, .22);
  --dark-scrim:      rgba(21, 74, 78, .55);      /* modal backdrop          */

  /* ---- 2c. Type ---- */
  --font-body:    'Inter', Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: 'Playfair Display', Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* ---- 2d. Metrics ---- */
  --wrap:   1120px;   /* matches the calculator's container */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(24, 29, 39, .04), 0 8px 24px rgba(24, 29, 39, .06);
}


/* ============================================================
   3. HUB COMPONENTS — scoped to `.hub` (set on <body> in /index.html)
   The calculators never carry this class, so nothing below can reach
   them even though they reuse generic names like .wrap and .foot.
   Only the :root tokens above are global. Sections 1 and 2 are shared
   with both calculators — edit this section freely, those two never.

   DESIGN INTENT — the page has one job.
   Our two calculators sound alike in summary ("more money from the
   fleet you already have"), so a visitor's real task is telling them
   apart. The layout is therefore a FORK, not a catalogue: two equal
   columns, each led by the QUESTION that tool answers, set in display
   type. The product name is demoted to a muted eyebrow, and the page's
   own <h1> is deliberately small, plain Inter — if the h1 competed
   with the questions it would win, and the questions are the thing
   that has to be read first.

   Consequences worth keeping: no icons (two items don't need
   wayfinding), no stat or testimonial band (nothing to scroll past),
   no third "coming soon" column (it would imply the fork has a wrong
   answer you should wait for). Everything on the page is either a
   question, what it costs you to answer it, or the way in.
   ============================================================ */

.hub,
.hub *,
.hub *::before,
.hub *::after { box-sizing: border-box; }

.hub {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-strong);
  background: var(--bg-page);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.hub .wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* --- top bar: same deep-teal band + mint underline as both calculators --- */
.hub .topbar {
  background: var(--dark-header);
  border-bottom: 3px solid var(--dark-accent);
  color: var(--levo-white);
}
.hub .topbar .wrap {
  display: flex; align-items: center; gap: 14px;
  padding-top: 16px; padding-bottom: 16px;
}
.hub .logo-img { height: 26px; width: auto; display: block; }
.hub .htitle {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dark-accent); position: relative; top: 4px;
}

/* --- intro: a label for the page, not a hero --- */
.hub .intro { padding: 52px 0 30px; max-width: 54ch; }
.hub .intro h1 {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 700; line-height: 1.35;
  letter-spacing: -.005em;
  margin: 0 0 6px;
  color: var(--text-strong);
}
.hub .intro p { margin: 0; font-size: 15px; color: var(--text-muted); }

/* --- the fork --- */
.hub .fork {
  list-style: none; margin: 0; padding: 0 0 8px;
  display: grid; gap: 20px; grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .hub .fork { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.hub .tool {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
}

/* --- flow marks: what each tool models, drawn as a diagram ---
   Deliberately NOT a money/time pair. Both tools output dollars — Productivity
   computes contribution, not hours saved — so a clock or stopwatch on that card
   would state something the tool does not calculate.

   The pair is an exact mirror about the box, so the only thing that differs is
   which side carries the multiplicity:
     Operator Revenue  three flows in, one out  (demand arriving from several
                       outside sources you aren't capturing today)
     Productivity ROI  one flow in, three out   (the same fleet and staff
                       producing more)
   Both marks are populated on both sides, so neither reads as unfinished.

   Sized here rather than on the element: the viewBox stays 0 0 28 28 and CSS
   scales it. Below about 36px the box's hole closes up at this stroke weight,
   so do not shrink it without re-checking that. 40px was picked over 36 for a
   little more presence against the card's 26px padding.

   aria-hidden: the question and the bolded clause carry the meaning, and a
   screen reader should not have to parse a diagram to get it. */
.hub .flow {
  display: block;
  width: 40px; height: 40px;
  color: var(--accent);
  margin: 0 0 14px;
}

.hub .toolname {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}

/* The question. The largest thing in its column, on purpose. */
.hub .q {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(21px, 2.3vw, 26px);
  line-height: 1.2; letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--text-strong);
  text-wrap: balance;
}

.hub .desc { margin: 0 0 18px; font-size: 15px; color: var(--text-body); }
/* The clause that separates the two tools, held apart from the prose
   around it so the contrast is visible without being read. */
.hub .desc b { color: var(--text-brand); font-weight: 700; }

/* The honest limit on the answer. Sits between the pitch and the input
   list because it is part of choosing correctly, not fine print. */
.hub .caveat {
  margin: -8px 0 18px; font-size: 13px; line-height: 1.5;
  color: var(--text-muted); padding-left: 12px;
  border-left: 2px solid var(--border);
}

/* --- what it costs you to answer the question --- */
.hub .need {
  margin: 0 0 20px; padding: 14px 16px;
  background: var(--bg-tint);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-sm);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  font-size: 13px;
}
@media (max-width: 420px) {
  .hub .need { grid-template-columns: 1fr; gap: 2px; }
  .hub .need dd { margin-bottom: 8px; }
}
.hub .need dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
  padding-top: 3px; white-space: nowrap;
}
.hub .need dd { margin: 0; color: var(--text-body); }
.hub .need ul { list-style: none; margin: 0; padding: 0; display: inline; }
.hub .need li { display: inline; }
/* Separator is CSS-generated so screen readers get a clean list of
   items instead of a string full of middots. */
.hub .need li:not(:last-child)::after { content: " · "; color: var(--text-muted); }

/* --- actions: pinned to the card floor so both cards line up --- */
.hub .actions {
  margin-top: auto; padding-top: 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.hub .open {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  background: var(--accent); color: var(--levo-white);
  padding: 11px 18px; border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
}
.hub .open:hover { background: var(--accent-hover); text-decoration: none; }
.hub .copy {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--text-brand); background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.hub .copy:hover { background: var(--bg-tint); border-color: var(--border-brand-strong); }

/* --- the two things a visitor has to be told, not sold --- */
.hub .notes {
  margin: 34px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--border);
  display: grid; gap: 14px; max-width: 74ch;
}
@media (min-width: 800px) {
  .hub .notes { grid-template-columns: 1fr 1fr; gap: 28px; max-width: none; }
}
.hub .notes p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.hub .notes b { color: var(--text-body); font-weight: 700; }

/* --- footer --- */
.hub .foot {
  margin-top: 30px; padding: 18px 0 40px;
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px;
}

/* --- toast: success-only confirmation, same behaviour as the tools --- */
.hub .toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--text-brand); color: var(--levo-white);
  font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 9px;
  transition: .25s; pointer-events: none; z-index: 20;
}
.hub .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- accessibility --- */
.hub a { color: var(--text-brand); }
.hub a:hover { text-decoration: underline; }
.hub :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub .topbar :focus-visible { outline: 2px solid var(--levo-white); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::before, .hub *::after { animation: none !important; transition: none !important; }
}