: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);
}
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }
body{
  margin: 0;
  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;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

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; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hide{ display: none !important; }

/* ================= shell ================= */
.app{
  display: grid;
  grid-template-columns: 222px minmax(0,1fr) 348px;
  grid-template-rows: minmax(0,1fr) 38px;
  height: 100dvh;
  width: 100%;
}

/* ---------- rail ---------- */
.rail{
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; gap: 24px;
  padding: 17px 14px 14px;
  min-height: 0;
  background: var(--canvas);
}
.brand{ display:flex; align-items:center; gap:10px; padding: 2px 8px 0; }
.mark{
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(150deg, var(--accent-2), var(--accent) 55%, var(--accent-3));
  box-shadow: var(--lift-accent);
  display: grid; place-items: center;
  color: var(--on-accent);   /* the mark is drawn in currentColor, so it follows the accent */
}
.brand-t{ display:flex; flex-direction:column; line-height:1.15; }
.brand-t b{ font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }
.brand-t span{ font-size: 11px; color: var(--ink-3); font-weight: 500; }

.nav{ display:flex; flex-direction:column; gap: 1px; }
.nav-h{ font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 8px; }
.nav .ni{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding: 8px 10px; border-radius: 9px;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 13px;
  transition: background .14s ease, color .14s ease;
}
.nav .ni svg{ flex:none; opacity:.7; }
.nav .ni:hover{ background: var(--hover); color: var(--ink); }
.nav .ni[aria-current="page"]{ background: var(--wash); color: var(--accent); font-weight: 600; }
.nav .ni[aria-current="page"] svg{ opacity: 1; }
.nav .ni .tail{ margin-left:auto; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.nav .ni .tail.acc{ color: var(--accent); }
.nav .ni[aria-current="page"] .tail{ color: var(--accent); }

.rail-foot{ margin-top:auto; display:flex; flex-direction:column; gap: 12px; }
.who{ display:flex; align-items:center; gap:9px; padding: 9px 10px; border-radius: 11px; background: var(--surface); box-shadow: var(--lift); }
.who .chip{ width:26px; height:26px; border-radius:8px; background: var(--sunk-2); color: var(--ink-2); display:grid; place-items:center; font-size:10.5px; font-weight:700; letter-spacing:.02em; }
.who div{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.who b{ font-size:12.5px; font-weight:600; }
.who span{ font-size:11px; color: var(--ink-3); }

/* ---------- main ---------- */
.main{
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-rows: minmax(0,1fr);
  min-height: 0; min-width: 0;
  padding: 15px 6px 10px 6px;
}

.toolbar{ display:flex; flex-direction:column; gap: 9px; padding: 0 4px; min-width: 0; }
.tb-top{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; min-width: 0; }
h1{
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.026em; line-height: 1.2;
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.day-sub{ display:flex; align-items:center; gap:7px; flex-wrap: wrap; min-width: 0; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  height: 21px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: -.005em;
  background: var(--sunk); color: var(--ink-2);
}
.tag.live{ background: var(--wash); color: var(--accent); }
.dot{ width:6px; height:6px; border-radius:50%; background: currentColor; flex:none; }

.tb-actions{ margin-left:auto; display:flex; align-items:center; gap: 10px; position: relative; }

.seg{ display:flex; gap:2px; padding:3px; border-radius: 10px; background: var(--sunk); }
.seg button{
  padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2);
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.seg button:hover{ color: var(--ink); }
.seg button[aria-pressed="true"]{ background: var(--raised); color: var(--ink); box-shadow: var(--seg-lift); }
.seg.lens button[aria-pressed="true"]{ color: var(--accent); }

.tgl{
  display:inline-flex; align-items:center; gap: 8px; height: 30px; padding: 0 11px 0 9px;
  border-radius: 9px; background: transparent; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  transition: background .14s ease, color .14s ease;
}
.tgl:hover{ background: var(--sunk); color: var(--ink); }
.tgl .sw{ width: 22px; height: 13px; border-radius: 999px; background: var(--ink-4); position: relative; transition: background .16s ease; flex:none; }
.tgl .sw::after{ content:""; position:absolute; top:2px; left:2px; width:9px; height:9px; border-radius:50%; background: var(--knob); transition: transform .16s ease; }
.tgl[aria-pressed="true"] .sw{ background: var(--risk); }
.tgl.acc[aria-pressed="true"] .sw{ background: var(--accent); }
.tgl[aria-pressed="true"] .sw::after{ transform: translateX(9px); }

.btn-primary{
  display:inline-flex; align-items:center; gap: 8px; height: 34px; padding: 0 15px;
  border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600;
  letter-spacing: -.01em; box-shadow: var(--lift-accent);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary:hover{ background: var(--accent-hi); box-shadow: var(--lift-accent-2); }
.btn-primary:active{ transform: translateY(1px); }

/* readouts, integrated in the toolbar rather than boxed into tiles */
.readouts{ display:flex; align-items:baseline; flex-wrap: wrap; gap: 6px 0; padding-left: 1px; }
.ro{ display:flex; align-items:baseline; gap: 5px; padding-right: 11px; flex: none; }
.ro + .ro{ padding-left: 11px; position: relative; }
/* a separator belongs between two readouts, never at the head of a wrapped line */
.ro.lead{ padding-left: 0; }
.ro.lead::before{ display: none; }
.ro + .ro::before{
  content:""; position:absolute; left:0; top: 50%; transform: translateY(-50%);
  width:3px; height:3px; border-radius:50%; background: var(--ink-4);
}
.ro b{ font-family: var(--mono); font-size: 14.5px; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.ro span{ font-size: 11.5px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.ro.bad b{ color: var(--broken); }
.ro.warn b{ color: var(--risk); }
.ro.acc b{ color: var(--accent); }

/* ---------- findings strip ---------- */
.strip{ display:flex; flex-direction:column; gap: 9px; padding: 0 4px; min-width: 0; }
.bands{ display:flex; gap: 10px; }
.sb{
  display:flex; align-items:center; gap: 9px; min-width: 0;
  height: 42px; padding: 0 12px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--lift);
  transition: box-shadow .16s ease, transform .12s ease;
}
.sb:hover{ box-shadow: var(--lift-2); }
.sb.first{ flex: 1.45 1 0; }
.sb.second{ flex: 1 1 0; }
.sb .sbt{ font-size: 12.5px; font-weight: 700; letter-spacing: -.018em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; text-align:left; }
.sb .chev{ color: var(--ink-3); flex:none; transition: transform .2s ease; }
.sb[aria-expanded="true"] .chev{ transform: rotate(90deg); color: var(--accent); }

.f-icon{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; }
.f-icon.bad{ background: var(--broken-wash); color: var(--broken); }
.f-icon.warn{ background: var(--risk-wash); color: var(--risk); }
.f-count{
  font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  margin-left: auto; flex:none; white-space: nowrap;
}
.f-count.bad{ background: var(--broken-wash); color: var(--broken); }
.f-count.warn{ background: var(--risk-wash); color: var(--risk); }

.panel{
  background: var(--surface); border-radius: var(--r-l); box-shadow: var(--lift-2);
  padding: 9px 14px 11px;
  animation: drop .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes drop{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }
.panel .pfoot{ display:flex; align-items:center; gap: 10px; margin-top: 8px; }
.panel .pnote{ font-size: 11.5px; color: var(--ink-2); }

.breaches{ display:flex; flex-direction:column; gap: 1px; }
.br{
  display:grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items:center; gap: 10px;
  padding: 6px 8px; border-radius: 10px; margin: 0 -8px; line-height: 1.32;
  transition: background .14s ease;
}
.br:hover{ background: var(--sunk); }
.br-t{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.br-t b{ font-size: 12.5px; font-weight: 600; letter-spacing: -.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.br-t span{ font-size: 11.5px; color: var(--ink-2); }
.br-t span .mono{ color: var(--ink); }
.zips{ display:flex; gap:5px; flex:none; }
.zip{ font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 5px; background: var(--risk-wash); color: var(--risk); white-space: nowrap; }
.delta{ font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 999px;
  background: var(--broken-wash); color: var(--broken); white-space: nowrap; flex: none; }
.delta.warn{ background: var(--risk-wash); color: var(--risk); }
.br-act{ display:flex; gap:6px; flex:none; }
.mini{
  height: 26px; padding: 0 11px; border-radius: 8px; background: var(--sunk);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  transition: background .14s ease, color .14s ease;
  white-space: nowrap;
}
.mini:hover{ background: var(--wash-2); color: var(--accent); }
.mini.ghost{ background: transparent; color: var(--ink-2); }
.mini.ghost:hover{ background: var(--wash); color: var(--accent); }

/* compact variant, used in the inspector at rest */
.br.cbr{ grid-template-columns: minmax(0,1fr) auto; gap: 5px 9px; padding: 7px 9px; margin: 0 -9px; }
.br.cbr .br-act{ grid-column: 1 / -1; }

/* ---------- board ---------- */
.board{
  background: var(--surface); border-radius: var(--r-l); box-shadow: var(--lift-2);
  display: grid; grid-template-rows: auto minmax(0,1fr);
  min-height: 0; min-width: 0; overflow: hidden; margin: 0 4px;
}
.board-top{ display:flex; align-items:center; gap: 12px; padding: 9px 14px 7px 16px; flex-wrap: nowrap; }
.board-top h2{ flex: none; white-space: nowrap; margin:0; font-size: 13px; font-weight: 700; letter-spacing: -.018em; }
.board-top .hint{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--ink-2); }
.board-top .right{ margin-left:auto; display:flex; align-items:center; gap: 8px; }
.legend{ display:flex; align-items:center; gap: 12px; }
.lg{ display:flex; align-items:center; gap: 6px; font-size: 11px; color: var(--ink-2); font-weight: 500; }
.lg i{ width: 14px; height: 9px; border-radius: 3px; display:block; }
.lg i.norm{ background: var(--sunk-2); }
.lg i.bad{ background: var(--broken-2); }
.lg i.ov{ background: repeating-linear-gradient(135deg, var(--risk-2) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--risk-wash); }

.scroller{ overflow: auto; min-height: 0; padding: 0 0 14px; scrollbar-width: thin; }
/* a scrolling region runs past the bottom of its panel, so say so with an edge
   rather than a row cut through its own x-height. Only when there is more to see. */
.scroller[data-edge="on"]{ -webkit-mask-image: var(--fade-b); mask-image: var(--fade-b); }
.scroller::-webkit-scrollbar{ width: 10px; height: 10px; }
.scroller::-webkit-scrollbar-thumb{ background: var(--sunk-2); border-radius: 99px; border: 3px solid var(--surface); }
.scroller::-webkit-scrollbar-track{ background: transparent; }

.lanes{ min-width: 100%; width: max-content; display: flex; flex-direction: column; gap: 5px; }
[data-zoom="1"] .lanes{ min-width: calc(var(--lab) + 1120px); }
[data-zoom="2"] .lanes{ min-width: calc(var(--lab) + 1720px); }

.rowgrid{ display:grid; grid-template-columns: var(--lab) minmax(0,1fr); }

.timehead{
  position: sticky; top: 0; z-index: 10; background: var(--surface);
  padding-bottom: 4px;
}
.timehead .corner{
  position: sticky; left: 0; z-index: 4; background: var(--surface);
  display:flex; align-items:flex-end; padding: 0 14px 6px 16px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.ticks{ position: relative; height: 26px; }
.tick{ position:absolute; bottom: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
[data-zoom="fit"] .tick.end{ display: none; }
.ticks .rule{ position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--hair); }
.nowpill{
  position:absolute; bottom: 4px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--accent);
  background: var(--wash-2); padding: 2px 7px; border-radius: 999px; z-index: 3;
  box-shadow: var(--now-glow); white-space: nowrap;
}

.lane{ position: relative; }
.lane-label{
  position: sticky; left: 0; z-index: 8; background: var(--surface);
  display:flex; align-items:center; gap: 9px; padding: 0 12px 0 16px;
  text-align: left; width: 100%; height: 100%;
  transition: background .14s ease;
}
.avs{ display:flex; flex:none; }
.av{
  width: 23px; height: 23px; border-radius: 8px; flex:none;
  background: var(--sunk-2); color: var(--ink-2);
  display:grid; place-items:center; font-size: 9.5px; font-weight: 700; letter-spacing: .01em;
}
.avs .av + .av{ margin-left: -6px; background: var(--sunk); color: var(--ink-2); box-shadow: -2px 0 0 0 var(--surface); }
.lane-label .lt{ min-width: 0; display:flex; flex-direction:column; line-height: 1.25; }
.lane-label .lt b{ font-size: 12.5px; font-weight: 600; letter-spacing: -.018em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lane-label .lt span{ font-size: 10.5px; color: var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lane:hover .av{ background: var(--sunk-2); }
.lane.sel .lane-label .av{ background: var(--accent); color: var(--on-accent); }
.lane.sel .lane-label .avs .av + .av{ background: var(--accent-2); color: var(--on-accent); }
.lane.sel .lane-label .lt b{ color: var(--accent); }

.track{ position: relative; padding: 5px 0; background: var(--track); border-radius: 12px; }
.track .grid{
  position:absolute; inset: 0; pointer-events:none;
  border-radius: 12px;
  background-image:
    repeating-linear-gradient(to right, var(--grid-1) 0 1px, transparent 1px calc(100% / 9.5)),
    repeating-linear-gradient(to right, var(--grid-2) 0 1px, transparent 1px calc(100% / 19));
}
.track .past{ position:absolute; top:0; bottom:0; left:0; background: var(--past); border-radius: 12px 0 0 12px; pointer-events:none; }
.nowline{ position:absolute; top:0; bottom:0; width: 1.5px; background: var(--accent); z-index: 5; pointer-events:none; box-shadow: var(--now-glow); }

.band{
  position:absolute; top: 0; bottom: 0; z-index: 0; border-radius: 10px;
  background-color: var(--band-fill);
  background-image: repeating-linear-gradient(135deg, var(--band-stripe) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 2px 0 0 var(--band-edge), inset 0 -2px 0 0 var(--band-edge);
  opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
[data-bands="on"] .band{ opacity: 1; }

.stop{
  position: absolute; height: 30px; min-width: 34px; border-radius: 9px;
  background: var(--surface); box-shadow: var(--lift-flat);
  display:flex; align-items:center; gap: 6px; padding: 0 10px;
  overflow: hidden; text-align: left; z-index: 2;
  transition: box-shadow .16s ease, transform .12s ease, opacity .18s ease, background .16s ease;
}
[data-bands="on"] .stop.inband{ background: var(--glass); }
.stop:hover, .stop:focus-visible{ box-shadow: var(--lift-3); transform: translateY(-1px); z-index: 4; background: var(--surface); }
.stop .nm{ font-size: 11.5px; font-weight: 600; letter-spacing: -.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width: 0; }
.stop.tight{ padding: 0 6px; gap: 4px; }
/* off-layout rulers, so a name is only ever set at a length that fits */
.probe{ position:absolute; left:-9999px; top:0; white-space:nowrap; visibility:hidden; pointer-events:none; }
.probe.nmp{ font-size: 11.5px; font-weight: 600; letter-spacing: -.015em; }
.probe.inip{ font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: -.02em; }
.probe.tmp{ font-family: var(--mono); font-size: 10px; letter-spacing: -.01em; }
.stop[data-lab="ini"] .nm{ font-family: var(--mono); font-size: 10.5px; letter-spacing: -.02em; }
.stop .tm{ font-family: var(--mono); font-size: 10px; color: var(--ink-2); white-space:nowrap; margin-left:auto; flex:none; }
.stop .ts{ width:5px; height:5px; border-radius:50%; background: var(--accent); flex:none; }
.stop.brk{ background: var(--brk-surface); box-shadow: var(--lift-brk); }
[data-bands="on"] .stop.brk.inband{ background: var(--brk-glass); }
.stop.brk .nm{ color: var(--broken); }
.stop.brk .ts{ background: var(--broken); }
.stop.brk .tm{ color: var(--broken); opacity: .85; }
.stop.sel{ box-shadow: 0 0 0 2px var(--accent), var(--lift-3); z-index: 5; background: var(--surface); }
.stop.dim{ opacity: .22; }
.stop.dim:hover{ opacity: .5; }

/* hover card, the answer to a capsule too narrow for its name */
.hovercard{
  position: fixed; z-index: 60; width: 268px; pointer-events: none;
  background: var(--surface); border-radius: 13px; box-shadow: var(--lift-3);
  padding: 11px 12px; display: none; flex-direction: column; gap: 6px;
}
.hovercard[data-open="true"]{ display: flex; }
.hovercard b{ font-size: 13px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.hovercard .hr{ display:flex; align-items:baseline; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.hovercard .hr .k{ width: 58px; flex:none; color: var(--ink-3); }
.hovercard .hr .v{ min-width:0; color: var(--ink); }

/* one restrained staggered load */
.lane{ animation: rise .5s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes rise{ from{ opacity:0; transform: translateY(9px); } to{ opacity:1; transform:none; } }

/* ---------- inspector ---------- */
.side{
  grid-column: 3; grid-row: 1;
  min-height: 0; display: grid; grid-template-rows: minmax(0,1fr);
  padding: 15px 16px 10px 6px;
}
.side-inner{
  background: var(--surface); border-radius: var(--r-l); box-shadow: var(--lift-2);
  display: grid; grid-template-rows: minmax(0,1fr);
  min-height: 0; overflow: hidden;
}
.side-scroll{ overflow-y: auto; min-height: 0; padding: 15px 15px 18px; display:flex; flex-direction:column; gap: 14px; scrollbar-width: thin; }
.side-scroll::-webkit-scrollbar{ width: 10px; }
.side-scroll::-webkit-scrollbar-thumb{ background: var(--sunk-2); border-radius: 99px; border: 3px solid var(--surface); }

.s-head{ display:flex; align-items:center; gap: 8px; }
.s-head h2{ margin:0; font-size: 13px; font-weight: 700; letter-spacing: -.018em; }
.s-head .n{ font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--wash); color: var(--accent); }
.s-head .n.bad{ background: var(--broken-wash); color: var(--broken); }
.s-head .sub{ margin-left:auto; font-size: 11px; color: var(--ink-2); }

/* selected stop detail */
.detail{ background: var(--sunk); border-radius: 13px; padding: 12px 13px; display:flex; flex-direction:column; gap: 10px; }
.detail .dh{ display:flex; align-items:flex-start; gap: 8px; }
.detail .dh b{ font-size: 14px; font-weight: 700; letter-spacing: -.022em; line-height:1.25; }
.detail .dh .x{ margin-left:auto; color: var(--ink-2); width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; }
.detail .dh .x:hover{ background: var(--hover-2); color: var(--ink); }
.kv{ display:grid; grid-template-columns: 74px minmax(0,1fr); gap: 5px 10px; font-size: 12px; }
.kv dt{ color: var(--ink-2); font-weight: 500; }
.kv dd{ margin: 0; color: var(--ink); }
.flag{ display:inline-flex; align-items:center; gap:6px; padding: 5px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; }
.flag.bad{ background: var(--broken-wash); color: var(--broken); }
.flag.warn{ background: var(--risk-wash); color: var(--risk); }
.flag.ok{ background: var(--wash); color: var(--accent); }
.detail .acts{ display:flex; gap: 6px; flex-wrap: wrap; position: relative; }

/* cluster + queue */
.cluster{ border-radius: 13px; background: var(--wash); padding: 11px 12px; display:flex; flex-direction:column; gap: 10px; }
.cl-head{ display:flex; align-items:center; gap: 9px; width:100%; text-align:left; }
.cl-head .glyph{ width: 26px; height: 26px; border-radius: 8px; background: var(--wash-2); color: var(--accent); display:grid; place-items:center; flex:none; }
.cl-head .ct{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.cl-head .ct b{ font-size: 12.5px; font-weight: 700; color: var(--accent); letter-spacing:-.015em; }
.cl-head .ct span{ font-size: 11px; color: var(--ink-2); }
.cl-head .caret{ margin-left:auto; color: var(--accent); transition: transform .2s ease; flex:none; }
.cluster[data-open="true"] .caret{ transform: rotate(90deg); }
.cl-body{ display:none; flex-direction:column; gap: 1px; }
.cluster[data-open="true"] .cl-body{ display:flex; }
.cl-body .cl-row{ display:flex; align-items:center; gap: 7px; padding: 5px 6px; border-radius: 8px; width:100%; text-align:left; }
.cl-body .cl-row:hover{ background: var(--glass-2); }
.cl-body .cl-row .mono{ font-size: 10.5px; color: var(--accent); flex:none; }
.cl-body .cl-row .a{ font-size: 11px; color: var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-body .cl-row .a b{ color: var(--ink); font-weight: 600; }
.cluster .acts{ display:flex; gap: 6px; }
.cluster .mini{ background: var(--glass-2); color: var(--accent); }
.cluster .mini:hover{ background: var(--glass-3); }
.cluster .mini.solid{ background: var(--accent); color: var(--on-accent); box-shadow: var(--lift-accent); }
.cluster .mini.solid:hover{ background: var(--accent-hi); }

.queue{ display:flex; flex-direction:column; gap: 2px; }
.q{
  display:grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items:center; gap: 10px;
  padding: 9px 9px; border-radius: 11px; width: 100%; text-align: left;
  transition: background .14s ease, box-shadow .16s ease;
}
.q:hover{ background: var(--sunk); }
.q.sel{ background: var(--raised); box-shadow: 0 0 0 1.5px var(--accent), var(--lift); }
.q .t{ font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.q .qt{ min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.q .qt b{ font-size: 12.5px; font-weight: 600; letter-spacing: -.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q .qt span{ font-size: 11px; color: var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q .go{ opacity: 0; color: var(--accent); font-size: 11.5px; font-weight: 700; transition: opacity .14s ease; }
.q:hover .go, .q.sel .go{ opacity: 1; }

/* ---------- status bar ---------- */
.statusbar{
  grid-column: 1 / -1; grid-row: 2;
  display:flex; align-items:center; gap: 14px;
  padding: 0 18px 0 20px;
  font-size: 11.5px; color: var(--ink-2);
}
.statusbar .shadow{ display:inline-flex; align-items:center; gap: 7px; color: var(--ink-2); font-weight: 600; }
.statusbar .shadow .dot{ background: var(--risk); }
.statusbar .sep{ width:3px; height:3px; border-radius:50%; background: var(--ink-4); }
.statusbar .right{ margin-left:auto; display:flex; align-items:center; gap: 14px; }

/* ---------- popover ---------- */
.pop{
  position: absolute; top: 42px; right: 0; width: 344px; z-index: 40;
  background: var(--surface); border-radius: var(--r-l); box-shadow: var(--lift-3);
  padding: 15px; display:none; flex-direction:column; gap: 12px;
  animation: popin .18s cubic-bezier(.2,.7,.3,1);
}
.pop[data-open="true"]{ display:flex; }
@keyframes popin{ from{ opacity:0; transform: translateY(-6px) scale(.985); } to{ opacity:1; transform:none; } }
.pop h3{ margin:0; font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; }
.pop .rules{ display:flex; flex-direction:column; gap: 6px; }
.pop .rule{ display:flex; gap: 8px; align-items:flex-start; font-size: 12px; color: var(--ink-2); }
.pop .rule svg{ color: var(--accent); flex:none; margin-top: 2px; }
.pop .foot{ display:flex; gap: 8px; align-items:center; }
.pop .note{ font-size: 11px; color: var(--ink-2); line-height:1.45; }
.result{ display:flex; flex-direction:column; gap: 7px; background: var(--sunk); border-radius: 11px; padding: 11px 12px; }
.result .rr{ display:flex; align-items:baseline; gap: 8px; font-size: 12px; }
.result .rr .k{ color: var(--ink-2); width: 106px; flex:none; }
.result .rr .from{ font-family: var(--mono); color: var(--ink-3); text-decoration: line-through; }
.result .rr .to{ font-family: var(--mono); color: var(--accent); font-weight: 500; }
.result .rr .to.good{ color: var(--good); }
.bar{ height: 4px; border-radius: 99px; background: var(--sunk-2); overflow:hidden; }
.bar i{ display:block; height:100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .9s cubic-bezier(.3,.8,.3,1); }


/* ================= screens ================= */
/* both screens hang off the same shell: the rail, the status bar and the two
   column widths never move, only the two inner regions swap. */
.screen{
  display: grid; grid-template-rows: auto auto minmax(0,1fr);
  gap: 10px; min-height: 0; min-width: 0;
}

/* theme control, in the rail foot beside the person it belongs to */
.theme{ padding: 3px; }
.theme button{
  flex: 1 1 0; padding: 5px 0; border-radius: 7px; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: -.004em;
  color: var(--ink-3); transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.theme button:hover{ color: var(--ink); }
.theme button[aria-pressed="true"]{ background: var(--raised); color: var(--accent); box-shadow: var(--seg-lift); }

.tag.bad{ background: var(--broken-wash); color: var(--broken); }
.f-icon.ok{ background: var(--wash); color: var(--accent); }
.f-count.ok{ background: var(--wash); color: var(--accent); }

/* ---------- record: provenance ---------- */
.src{
  display:inline-flex; align-items:center; gap: 5px; height: 20px; padding: 0 8px 0 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.src .dot{ width:5px; height:5px; }
.src.acct{ background: var(--sunk); color: var(--ink-2); }
.src.der{  background: var(--risk-wash); color: var(--risk); }
.src.set{  background: var(--wash); color: var(--accent); }
.src.rev{  background: var(--broken-wash); color: var(--broken); }
.lg i.pv{ width: 8px; height: 8px; border-radius: 3px; }
.lg i.pv.acct{ background: var(--ink-3); }
.lg i.pv.der{ background: var(--risk); }
.lg i.pv.set{ background: var(--accent); }
.lg i.pv.rev{ background: var(--broken); }

/* ---------- record: the field list ---------- */
.fields{ display:flex; flex-direction:column; gap: 1px; padding: 2px 16px 0; }
.fld{
  display: grid; grid-template-columns: 176px minmax(0,1fr) 124px;
  gap: 1px 18px; align-items: baseline;
  padding: 6px 10px; margin: 0 -10px; border-radius: 11px;
  transition: background .14s ease;
}
.fld:hover{ background: var(--sunk); }
.fk{ grid-column:1; grid-row:1 / span 2; font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: -.01em; }
.fvw{ grid-column:2; grid-row:1; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fn{ grid-column:2; grid-row:2; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.fn .mono{ color: var(--ink-2); }
.fs{ grid-column:3; grid-row:1 / span 2; justify-self: start; }
[data-notes="off"] .fn{ display: none; }
[data-notes="off"] .fld{ padding: 5px 10px; }
.fv{ font-size: 13px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.fv.mono{ font-weight: 500; letter-spacing: -.03em; }
.fv.der{ text-decoration: underline dotted var(--risk-2); text-underline-offset: 4px; }
/* Derived carries an amber dotted rule because the value has a story. A value a person
   chose has one too, and it is also the place you change it, so it carries the indigo one. */
.setv{
  font-size: 13px; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
  padding: 2px 8px; margin: -2px -8px; border-radius: 8px;
  text-decoration: underline dotted var(--accent-u); text-underline-offset: 4px;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.setv:hover{ background: var(--wash); color: var(--accent); box-shadow: inset 0 0 0 1px var(--wash-2);
  text-decoration-color: var(--accent); }
.setv.mono{ font-weight: 500; }
.fld[data-src="review"]{ background: var(--broken-wash); }
.fld[data-src="review"]:hover{ background: var(--broken-wash); }
.misv{
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--broken); letter-spacing: -.012em;
}
.misv .mini{ background: var(--broken-wash); color: var(--broken); }
.misv:hover .mini{ background: var(--broken-2); }
.ti{
  font-family: var(--mono); font-size: 12.5px; letter-spacing: -.02em;
  height: 28px; width: 92px; padding: 0 9px; border: 0; border-radius: 8px;
  background: var(--sunk-2); color: var(--ink);
}
.ti::placeholder{ color: var(--ink-3); }
.ti.bad{ box-shadow: inset 0 0 0 1.5px var(--broken); }
@keyframes flash{ from{ background-color: var(--wash-2); } to{ background-color: transparent; } }
.fld.flash{ animation: flash 1.3s ease-out; }

/* ---------- record: visit history ---------- */
.hist{ display:flex; flex-direction:column; padding: 3px 16px 0; }
.dots{ display:flex; gap: 4px; padding: 2px 0 12px; }
.dots i{ height: 6px; flex: 1 1 0; border-radius: 99px; background: var(--sunk-2); }
.dots i.good{ background: var(--accent); }
.dots i.bad{ background: var(--broken); }
.dots i.idle{ background: var(--sunk-2); }
.dots i.unrec{ background: var(--broken-2); }
.dotlab .mid{ color: var(--ink-2); font-weight: 500; }
.hvs{ display:flex; flex-direction:column; gap: 3px; }
.hv{
  display:grid; grid-template-columns: 64px 132px minmax(0,1fr) auto auto;
  gap: 2px 16px; align-items: center;
  padding: 14px 10px; margin: 0 -10px; border-radius: 11px;
  transition: background .14s ease;
}
/* the seventeen the strip counts and the list does not detail */
.hv.rest{ color: var(--ink-3); font-size: 12px; padding: 13px 10px; display: block; }
.hv.rest b{ color: var(--ink-2); font-weight: 600; }
.hv:hover{ background: var(--sunk); }
.hv .hd{ font-size: 12px; font-weight: 500; color: var(--ink-2); }
.hv .ht{ font-size: 12px; color: var(--ink-2); letter-spacing: -.02em; }
.hv .hx{ min-width:0; display:flex; flex-direction:column; line-height: 1.35; }
.hv .hx b{ font-size: 12.5px; font-weight: 600; letter-spacing: -.015em; }
.hv .hx span{ font-size: 11.5px; color: var(--ink-3); }
.hv.bad{ background: var(--brk-surface); }
.hv.bad:hover{ background: var(--brk-surface); }
.hv.bad .hx b, .hv.bad .hd, .hv.bad .ht{ color: var(--broken); }
.hv.idle .hd, .hv.idle .ht, .hv.idle .hx b{ color: var(--ink-3); }
.hv .keep{ font-size: 11px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }

/* ---------- record: reliability ---------- */
.rel{ display:flex; flex-direction:column; gap: 10px; }
.relbar{ display:flex; gap: 3px; height: 9px; }
.relbar i{ display:block; border-radius: 99px; }
.relbar i.k, .rlg i.k{ background: var(--accent); }
.relbar i.m, .rlg i.m{ background: var(--broken); }
.relbar i.u, .rlg i.u{
  background-color: var(--risk-wash);
  background-image: repeating-linear-gradient(135deg, var(--band-stripe) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px var(--risk-2);
}
.rlg{ display:flex; flex-wrap: wrap; gap: 4px 14px; }
.rlg .lg i{ width: 9px; height: 9px; border-radius: 3px; }
/* cool grey body text on a warm wash is the one muddy patch there is room for, so warm it */
.relnote{
  margin: 0; padding: 10px 12px; border-radius: 11px;
  background: var(--risk-wash); color: var(--risk-ink);
  font-size: 11.5px; line-height: 1.5;
}
.relnote b{ color: var(--risk); font-weight: 700; }

/* ---------- record: the imported description ---------- */
.rawdoc{
  display:flex; flex-direction:column;
  background: var(--sunk); border-radius: 12px; padding: 11px 13px;
  font-size: 11px; line-height: 1.6; color: var(--ink-2);
}
.rawdoc .rl{ white-space: pre-wrap; }
.rawdoc .rl.sp{ height: 7px; }
.rawdoc u{ text-decoration: underline dotted; text-underline-offset: 3px; }
.rawdoc .rl.miss{ color: var(--broken); font-weight: 500; border-radius: 5px; }
.rawdoc .rl.miss em, .rawdoc .rl.setl em{ font-style: normal; margin-left: 8px; font-size: 10px; opacity: .85; }
.rawdoc .rl.setl{ color: var(--accent); font-weight: 500; border-radius: 5px; }
@keyframes flashb{ from{ background-color: var(--broken-2); } to{ background-color: transparent; } }
.rawdoc .rl.flashb{ animation: flashb 1.4s ease-out; }
.rawnote{ margin: 8px 2px 0; font-size: 11px; color: var(--ink-3); line-height: 1.5; }

/* ---------- record: the crew-blocking popover, anchored in the sidebar ---------- */
.pop.anchor{ top: 36px; left: 0; right: auto; width: 262px; }
.pop .crewlist{ display:flex; flex-direction:column; gap: 1px; max-height: 214px; overflow-y: auto; }
.pop .crewlist button{
  display:flex; align-items:center; gap: 9px; width: 100%; text-align: left;
  padding: 6px 8px; margin: 0 -8px; border-radius: 9px; font-size: 12px; color: var(--ink-2);
  transition: background .14s ease, color .14s ease;
}
.pop .crewlist button:hover{ background: var(--sunk); color: var(--ink); }
.pop .crewlist button.on{ background: var(--broken-wash); color: var(--broken); font-weight: 600; }
.wf{ display:flex; gap: 10px; }
.wl{ display:flex; flex-direction:column; gap: 5px; font-size: 11px; color: var(--ink-2); font-weight: 500; }

@media (max-width: 1400px){
  .fld{ grid-template-columns: 152px minmax(0,1fr) 118px; gap: 1px 14px; }
  .hv{ grid-template-columns: 58px 118px minmax(0,1fr) auto auto; gap: 2px 12px; }
}
@media (max-width: 1200px){
  .fld{ grid-template-columns: 132px minmax(0,1fr) 112px; }
  .fields, .hist{ padding-left: 12px; padding-right: 12px; }
}

.av.sm{ width: 18px; height: 18px; border-radius: 6px; font-size: 8.5px; }
.dotlab{ display:flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); padding: 2px 0 5px; }
.fvw .fn2{ font-size: 11px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (max-width: 1400px){
  .legend{ display: none; }
  .app{ grid-template-columns: 206px minmax(0,1fr) 322px; }
  :root{ --lab: 182px; }
  .seg button{ padding: 5px 9px; font-size: 11.5px; }
  .btn-primary{ padding: 0 12px; font-size: 12.5px; }
  .tb-actions{ gap: 8px; }
  .sb.first{ flex: 1.12 1 0; }
  .sb{ padding: 0 10px; gap: 8px; }
  .ro{ padding-right: 8px; }
  .ro + .ro{ padding-left: 8px; }
  .ro b{ font-size: 13.5px; }
  .ro span{ font-size: 11px; }
}
@media (max-width: 1200px){
  .app{ grid-template-columns: 190px minmax(0,1fr) 300px; }
  :root{ --lab: 182px; }
  .lane-label .lt b{ font-size: 12px; }
  .board-top .hint{ display: none; }
  .sb.first{ flex: 1 1 0; }
  .lane-label .lt span{ display: none; }
  .cl-body .cl-row .a{ font-size: 10.5px; }
  .cluster{ padding: 10px 9px; }
  .cl-body .cl-row{ padding: 5px 4px; }
  .seg.lens button[data-lens="ts"]{ font-size: 0; }
  .seg.lens button[data-lens="ts"]::after{ content: "Windows"; font-size: 11.5px; }
}