:root{
  color-scheme: light dark;

  /* --- the named values, everything else derives from them --- */
  --canvas:  #F6F7FB;   /* near-white, faint cool tint */
  --surface: #FFFFFF;   /* raised things */
  --raised:  #FFFFFF;   /* a control lifted off a quiet fill */
  --ink:     #14151C;   /* text, biased toward the accent hue */
  --accent:  #5B4BE8;   /* indigo-violet, sparingly at full strength */
  --broken:  #D92352;   /* promise broken */
  --risk:    #B67206;   /* at risk, nominal, unsequenced */
  --good:    #147A57;   /* only ever the improved side of a shadow result */

  --accent-2:  #7565F5; /* the light end of the brand gradient */
  --accent-3:  #4436C4; /* the dark end */
  --accent-hi: #5140DF; /* hover on a filled accent */
  --on-accent: #FFFFFF; /* what sits on top of a filled accent */
  --knob:      #FFFFFF; /* the switch knob */

  --ink-2: #63657C;
  --ink-3: #9193A9;
  --ink-4: #B9BACB;     /* decorative separators and switch tracks only, never text */

  --wash:      rgba(91,75,232,.075);
  --wash-2:    rgba(91,75,232,.14);
  --accent-u:  rgba(91,75,232,.34);   /* the dotted rule under a value a person set */
  --broken-wash: rgba(217,35,82,.085);
  --broken-2:    rgba(217,35,82,.20);
  --risk-wash:   rgba(182,114,6,.10);
  --risk-2:      rgba(182,114,6,.24);
  --risk-ink:    #6B5C43;             /* body text that has to sit on an amber wash */

  --sunk:  #EDEEF6;     /* the one subtle surface step */
  --sunk-2:#E4E6F1;
  --hair:  rgba(29,27,63,.07);
  --hover:   rgba(29,27,63,.045);
  --hover-2: rgba(29,27,63,.07);

  --glass:   rgba(255,255,255,.90);  /* a capsule standing inside an overlap band */
  --glass-2: rgba(255,255,255,.72);  /* a control sitting on a wash */
  --glass-3: #FFFFFF;
  --brk-glass: rgba(255,244,246,.90);

  --track:  #F2F3FA;    /* the lane well the capsules float on */
  --grid-1: rgba(29,27,63,.075);
  --grid-2: rgba(29,27,63,.032);
  --past:   rgba(20,21,28,.035);
  --band-fill:   rgba(182,114,6,.11);
  --band-stripe: rgba(182,114,6,.30);
  --band-edge:   rgba(182,114,6,.42);
  --brk-surface: #FFF4F6;

  --lift:   0 1px 2px rgba(26,24,58,.05), 0 6px 16px -8px rgba(26,24,58,.14);
  --lift-flat: 0 1px 2px rgba(26,24,58,.05), 0 6px 16px -8px rgba(26,24,58,.14);
  --lift-2: 0 1px 2px rgba(26,24,58,.05), 0 14px 34px -14px rgba(26,24,58,.22);
  --lift-3: 0 2px 6px rgba(26,24,58,.07), 0 28px 60px -22px rgba(26,24,58,.30);
  --lift-accent:   0 1px 2px rgba(53,40,170,.22), 0 10px 22px -10px rgba(53,40,170,.50);
  --lift-accent-2: 0 2px 4px rgba(53,40,170,.24), 0 14px 28px -10px rgba(53,40,170,.55);
  --lift-brk: 0 1px 2px rgba(217,35,82,.10), 0 6px 16px -8px rgba(217,35,82,.34);
  --seg-lift: 0 1px 2px rgba(26,24,58,.10);
  --now-glow: 0 0 0 2px rgba(91,75,232,.10), 0 0 16px rgba(91,75,232,.45);

  --lab: 196px;         /* crew label column */
  --fade-b: linear-gradient(to bottom, #000 0 calc(100% - 24px), transparent);
  --r-l: 16px;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    /* Dark is chosen, not inverted. Shadow stops separating things, so every
       token that used to lean on it now leans on a surface step plus the
       faintest hairline, and the indigo climbs in luminance to stay the accent. */
    --canvas:  #0E0F17;
    --surface: #171A25;
    --raised:  #262A39;
    --ink:     #ECEDF6;
    --accent:  #9184FF;
    --broken:  #FF7391;
    --risk:    #E8AE3E;
    --good:    #45CE9C;

    --accent-2:  #ADA2FF;
    --accent-3:  #6E5CE6;
    --accent-hi: #A79BFF;
    --on-accent: #121320;
    --knob:      #14151E;

    --ink-2: #A2A6BF;
    --ink-3: #767A94;
    --ink-4: #474B60;

    --wash:      rgba(145,132,255,.13);
    --wash-2:    rgba(145,132,255,.22);
    --accent-u:  rgba(145,132,255,.46);
    --broken-wash: rgba(255,115,145,.14);
    --broken-2:    rgba(255,115,145,.30);
    --risk-wash:   rgba(232,174,62,.14);
    --risk-2:      rgba(232,174,62,.32);
    --risk-ink:    #D5C6A6;

    --sunk:  #212533;
    --sunk-2:#2C3143;
    --hair:  rgba(178,186,230,.11);
    --hover:   rgba(178,186,230,.06);
    --hover-2: rgba(178,186,230,.10);

    --glass:   rgba(23,26,37,.90);
    --glass-2: rgba(255,255,255,.07);
    --glass-3: rgba(255,255,255,.13);
    --brk-glass: rgba(48,26,35,.92);

    --track:  #101219;   /* one step under the panel, ~4 L*, the same step light uses */
    --grid-1: rgba(178,186,230,.060);
    --grid-2: rgba(178,186,230,.028);
    --past:   rgba(145,132,255,.048); /* subtracting from near-black does nothing, so past lifts */
    --band-fill:   rgba(232,174,62,.10);
    --band-stripe: rgba(232,174,62,.20);
    --band-edge:   rgba(232,174,62,.13);  /* amber must never be louder than a broken promise */
    --brk-surface: #301A24;

    --lift:   0 0 0 1px rgba(178,186,230,.09), 0 2px 6px rgba(0,0,0,.40);
    --lift-flat: 0 2px 6px rgba(0,0,0,.45);  /* a thing already separated by a surface step */
    --lift-2: 0 0 0 1px rgba(178,186,230,.09), 0 10px 30px -14px rgba(0,0,0,.85);
    --lift-3: 0 0 0 1px rgba(178,186,230,.15), 0 24px 60px -22px rgba(0,0,0,.95);
    --lift-accent:   0 0 0 1px rgba(145,132,255,.40), 0 8px 22px -12px rgba(110,92,230,.85);
    --lift-accent-2: 0 0 0 1px rgba(145,132,255,.55), 0 12px 30px -12px rgba(110,92,230,.95);
    --lift-brk: 0 0 0 1px rgba(255,115,145,.30), 0 6px 18px -10px rgba(0,0,0,.70);
    --seg-lift: 0 0 0 1px rgba(178,186,230,.10);
    --now-glow: 0 0 0 2px rgba(145,132,255,.16), 0 0 18px rgba(145,132,255,.40);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  /* Dark is chosen, not inverted. Shadow stops separating things, so every
     token that used to lean on it now leans on a surface step plus the
     faintest hairline, and the indigo climbs in luminance to stay the accent. */
  --canvas:  #0E0F17;
  --surface: #171A25;
  --raised:  #262A39;
  --ink:     #ECEDF6;
  --accent:  #9184FF;
  --broken:  #FF7391;
  --risk:    #E8AE3E;
  --good:    #45CE9C;

  --accent-2:  #ADA2FF;
  --accent-3:  #6E5CE6;
  --accent-hi: #A79BFF;
  --on-accent: #121320;
  --knob:      #14151E;

  --ink-2: #A2A6BF;
  --ink-3: #767A94;
  --ink-4: #474B60;

  --wash:      rgba(145,132,255,.13);
  --wash-2:    rgba(145,132,255,.22);
  --accent-u:  rgba(145,132,255,.46);
  --broken-wash: rgba(255,115,145,.14);
  --broken-2:    rgba(255,115,145,.30);
  --risk-wash:   rgba(232,174,62,.14);
  --risk-2:      rgba(232,174,62,.32);
  --risk-ink:    #D5C6A6;

  --sunk:  #212533;
  --sunk-2:#2C3143;
  --hair:  rgba(178,186,230,.11);
  --hover:   rgba(178,186,230,.06);
  --hover-2: rgba(178,186,230,.10);

  --glass:   rgba(23,26,37,.90);
  --glass-2: rgba(255,255,255,.07);
  --glass-3: rgba(255,255,255,.13);
  --brk-glass: rgba(48,26,35,.92);

  --track:  #101219;   /* one step under the panel, ~4 L*, the same step light uses */
  --grid-1: rgba(178,186,230,.060);
  --grid-2: rgba(178,186,230,.028);
  --past:   rgba(145,132,255,.048); /* subtracting from near-black does nothing, so past lifts */
  --band-fill:   rgba(232,174,62,.10);
  --band-stripe: rgba(232,174,62,.20);
  --band-edge:   rgba(232,174,62,.13);  /* amber must never be louder than a broken promise */
  --brk-surface: #301A24;

  --lift:   0 0 0 1px rgba(178,186,230,.09), 0 2px 6px rgba(0,0,0,.40);
  --lift-flat: 0 2px 6px rgba(0,0,0,.45);  /* a thing already separated by a surface step */
  --lift-2: 0 0 0 1px rgba(178,186,230,.09), 0 10px 30px -14px rgba(0,0,0,.85);
  --lift-3: 0 0 0 1px rgba(178,186,230,.15), 0 24px 60px -22px rgba(0,0,0,.95);
  --lift-accent:   0 0 0 1px rgba(145,132,255,.40), 0 8px 22px -12px rgba(110,92,230,.85);
  --lift-accent-2: 0 0 0 1px rgba(145,132,255,.55), 0 12px 30px -12px rgba(110,92,230,.95);
  --lift-brk: 0 0 0 1px rgba(255,115,145,.30), 0 6px 18px -10px rgba(0,0,0,.70);
  --seg-lift: 0 0 0 1px rgba(178,186,230,.10);
  --now-glow: 0 0 0 2px rgba(145,132,255,.16), 0 0 18px rgba(145,132,255,.40);
}

:root[data-theme="light"]{
  color-scheme: light;
  /* --- the named values, everything else derives from them --- */
  --canvas:  #F6F7FB;   /* near-white, faint cool tint */
  --surface: #FFFFFF;   /* raised things */
  --raised:  #FFFFFF;   /* a control lifted off a quiet fill */
  --ink:     #14151C;   /* text, biased toward the accent hue */
  --accent:  #5B4BE8;   /* indigo-violet, sparingly at full strength */
  --broken:  #D92352;   /* promise broken */
  --risk:    #B67206;   /* at risk, nominal, unsequenced */
  --good:    #147A57;   /* only ever the improved side of a shadow result */

  --accent-2:  #7565F5; /* the light end of the brand gradient */
  --accent-3:  #4436C4; /* the dark end */
  --accent-hi: #5140DF; /* hover on a filled accent */
  --on-accent: #FFFFFF; /* what sits on top of a filled accent */
  --knob:      #FFFFFF; /* the switch knob */

  --ink-2: #63657C;
  --ink-3: #9193A9;
  --ink-4: #B9BACB;     /* decorative separators and switch tracks only, never text */

  --wash:      rgba(91,75,232,.075);
  --wash-2:    rgba(91,75,232,.14);
  --accent-u:  rgba(91,75,232,.34);   /* the dotted rule under a value a person set */
  --broken-wash: rgba(217,35,82,.085);
  --broken-2:    rgba(217,35,82,.20);
  --risk-wash:   rgba(182,114,6,.10);
  --risk-2:      rgba(182,114,6,.24);
  --risk-ink:    #6B5C43;             /* body text that has to sit on an amber wash */

  --sunk:  #EDEEF6;     /* the one subtle surface step */
  --sunk-2:#E4E6F1;
  --hair:  rgba(29,27,63,.07);
  --hover:   rgba(29,27,63,.045);
  --hover-2: rgba(29,27,63,.07);

  --glass:   rgba(255,255,255,.90);  /* a capsule standing inside an overlap band */
  --glass-2: rgba(255,255,255,.72);  /* a control sitting on a wash */
  --glass-3: #FFFFFF;
  --brk-glass: rgba(255,244,246,.90);

  --track:  #F2F3FA;    /* the lane well the capsules float on */
  --grid-1: rgba(29,27,63,.075);
  --grid-2: rgba(29,27,63,.032);
  --past:   rgba(20,21,28,.035);
  --band-fill:   rgba(182,114,6,.11);
  --band-stripe: rgba(182,114,6,.30);
  --band-edge:   rgba(182,114,6,.42);
  --brk-surface: #FFF4F6;

  --lift:   0 1px 2px rgba(26,24,58,.05), 0 6px 16px -8px rgba(26,24,58,.14);
  --lift-flat: 0 1px 2px rgba(26,24,58,.05), 0 6px 16px -8px rgba(26,24,58,.14);
  --lift-2: 0 1px 2px rgba(26,24,58,.05), 0 14px 34px -14px rgba(26,24,58,.22);
  --lift-3: 0 2px 6px rgba(26,24,58,.07), 0 28px 60px -22px rgba(26,24,58,.30);
  --lift-accent:   0 1px 2px rgba(53,40,170,.22), 0 10px 22px -10px rgba(53,40,170,.50);
  --lift-accent-2: 0 2px 4px rgba(53,40,170,.24), 0 14px 28px -10px rgba(53,40,170,.55);
  --lift-brk: 0 1px 2px rgba(217,35,82,.10), 0 6px 16px -8px rgba(217,35,82,.34);
  --seg-lift: 0 1px 2px rgba(26,24,58,.10);
  --now-glow: 0 0 0 2px rgba(91,75,232,.10), 0 0 16px rgba(91,75,232,.45);
}

/* ============ base (lean re-take of the prototype's) ============ */
*{ box-sizing: border-box; }
html{ height: 100%; }
body{
  margin: 0; min-height: 100%;
  background: var(--canvas); color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.mono{ font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -.01em; }

/* ============ shell ============ */
.shell{ display: grid; grid-template-columns: 216px minmax(0,1fr); min-height: 100vh; }
.rail{
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 22px; padding: 18px 14px;
}
.brand{ display: flex; align-items: center; gap: 9px; padding: 2px 8px; }
.brand-mark{
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  box-shadow: var(--lift-accent);
}
.brand-t{ font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.brand-s{ font-size: 10.5px; color: var(--ink-3); margin-top: -2px; }
.nav{ display: flex; flex-direction: column; gap: 2px; }
.nav button{
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 7.5px 10px; border-radius: 9px; color: var(--ink-2); font-weight: 600;
}
.nav button:hover{ background: var(--hover); color: var(--ink); }
.nav button.on{ background: var(--wash); color: var(--accent); }
.nav .cnt{ margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.rail-foot{ margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 8px; }
.modechip{
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px; background: var(--risk-wash); color: var(--risk);
}
.who{ font-size: 11.5px; color: var(--ink-3); }
.who b{ display: block; color: var(--ink-2); font-size: 12px; }
.linkish{ color: var(--ink-3); font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover{ color: var(--ink); }

.main{ padding: 22px 28px 60px; min-width: 0; }
.pagehead{ display: flex; align-items: center; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
h1{ font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.sub{ color: var(--ink-3); font-size: 12px; margin: 2px 0 18px; }
.spacer{ flex: 1; }

.datenav{ display: inline-flex; align-items: center; gap: 2px; background: var(--sunk); border-radius: 10px; padding: 3px; }
.datenav button{ padding: 4px 10px; border-radius: 8px; font-weight: 600; color: var(--ink-2); }
.datenav button:hover{ background: var(--surface); box-shadow: var(--seg-lift); color: var(--ink); }
.datenav .cur{ font-family: var(--mono); font-size: 12px; padding: 4px 12px; color: var(--ink); }

.seg{ display: inline-flex; background: var(--sunk); border-radius: 10px; padding: 3px; }
.seg button{ padding: 4px 12px; border-radius: 8px; font-weight: 600; font-size: 12px; color: var(--ink-2); }
.seg button.on{ background: var(--surface); box-shadow: var(--seg-lift); color: var(--ink); }

/* ============ cards and rows ============ */
.card{
  background: var(--surface); border-radius: var(--r-l, 16px);
  box-shadow: var(--lift); padding: 16px 18px; margin-bottom: 14px;
}
.card h2{ font-size: 13.5px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.cardhead{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.drive{ font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.drive b{ color: var(--good); font-weight: 500; }
.warn{ font-size: 11px; font-weight: 600; color: var(--risk); background: var(--risk-wash); padding: 2px 8px; border-radius: 999px; }

.stops{ display: flex; flex-direction: column; }
.stop{
  display: grid; grid-template-columns: 86px minmax(0,1fr) auto; gap: 4px 14px;
  align-items: baseline; padding: 7px 10px; border-radius: 10px; margin: 0 -10px;
}
.stop:hover{ background: var(--hover); }
.stop + .stop{ border-top: 1px solid var(--hair); }
.stop .t{ font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.stop .t .eta{ color: var(--accent); }
.stop .who-line{ min-width: 0; }
.stop .nm{ font-weight: 600; font-size: 12.5px; }
.stop .ad{ color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips{ display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.chip{
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 2px 7px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); white-space: nowrap;
}
.chip.win{ background: var(--wash); color: var(--accent); }
.chip.brk{ background: var(--broken-wash); color: var(--broken); }
.chip.rsk{ background: var(--risk-wash); color: var(--risk); }
.chip.ok{ background: rgba(20,122,87,.09); color: var(--good); }
.chip.pos{ background: var(--sunk-2); color: var(--ink-2); }

.callout{
  border-radius: var(--r-l, 16px); padding: 13px 16px; margin-bottom: 14px;
  background: var(--wash); color: var(--ink); font-size: 12.5px;
}
.callout.riskc{ background: var(--risk-wash); }
.callout b{ font-weight: 700; }

/* proposal cards */
.reason{ font-size: 12.5px; color: var(--ink-2); margin: 6px 0 8px; }
.seqline{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); line-height: 1.8; }
.seqline b{ color: var(--ink); font-weight: 500; }
.gain{ font-family: var(--mono); font-size: 12px; color: var(--good); font-weight: 500; }
.approve{
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 6px 14px; border-radius: 9px; background: var(--sunk); color: var(--ink-4);
  font-weight: 600; font-size: 12px; cursor: not-allowed;
}

/* tables */
table.grid{ width: 100%; border-collapse: collapse; font-size: 12px; }
table.grid th{
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--hair);
}
table.grid td{ padding: 7px 10px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 11.5px; }
table.grid td.txt{ font-family: inherit; font-size: 12.5px; }
.tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile{ background: var(--surface); border-radius: 14px; box-shadow: var(--lift); padding: 13px 15px; }
.tile .v{ font-family: var(--mono); font-size: 21px; font-weight: 500; letter-spacing: -.03em; }
.tile .k{ font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.tile .v small{ font-size: 12px; color: var(--ink-3); }

/* login */
.loginwrap{ min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login{
  width: min(360px, 92vw); background: var(--surface); border-radius: 20px;
  box-shadow: var(--lift-3); padding: 30px 28px;
}
.login .brand{ padding: 0; margin-bottom: 18px; }
.login label{ display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); margin: 12px 0 4px; }
.login input{
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair);
  background: var(--sunk); color: var(--ink); font: inherit;
}
.login input:focus{ outline: 2px solid var(--accent); outline-offset: 0; background: var(--surface); }
.btn-primary{
  width: 100%; margin-top: 18px; padding: 10px; border-radius: 11px; font-weight: 700;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  color: var(--on-accent); box-shadow: var(--lift-accent);
}
.btn-primary:hover{ filter: brightness(1.05); }
.err{ color: var(--broken); font-size: 12px; margin-top: 10px; min-height: 16px; }
.note{ color: var(--ink-3); font-size: 11px; margin-top: 14px; }
.empty{ color: var(--ink-3); padding: 30px 0; text-align: center; }
@media (max-width: 760px){
  .shell{ grid-template-columns: 1fr; }
  .rail{ position: static; height: auto; flex-direction: row; align-items: center; }
  .nav{ flex-direction: row; }
  .rail-foot{ margin-top: 0; margin-left: auto; flex-direction: row; align-items: center; }
  .main{ padding: 14px; }
}

/* settings forms */
.frow{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; font-size: 12.5px; }
.frow label{ color: var(--ink-2); }
.frow input, .frow select{
  padding: 7px 10px; border-radius: 9px; border: 1px solid var(--hair);
  background: var(--sunk); color: var(--ink); font: inherit;
}
.frow input:focus, .frow select:focus{ outline: 2px solid var(--accent); outline-offset: 0; background: var(--surface); }
.btn-small{
  padding: 7px 16px; border-radius: 9px; font-weight: 700; font-size: 12px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  color: var(--on-accent); box-shadow: var(--lift-accent);
}