/* ============================================================
   TerminalOS product page. Everything is scoped under #tmos, so the short
   class names are safe. Loaded after product-page.css, which holds what the
   product pages share (base, chips, stamp, node, rail, hero frame, question
   stack and meter, turning point, FAQ, final CTA). The 02 steps, 06
   capabilities, 07 before/after, 08 tabs and 09 timeline follow fleetos.css.

   Colour meaning is fixed: grey with "?" = unknown or stale (yesterday's
   data), blue/cyan = TerminalOS working, red = a problem, amber = a warning,
   green = known and correct; gold = what your team does. Gold is never used
   for anything TerminalOS does. Time: yesterday grey, today white, tomorrow a
   dashed cyan outline.

   Motion: markup renders in its finished state. The page script "arms" a
   section before animating it, and arming only ever changes opacity,
   visibility or transform, so nothing shifts. Logical properties throughout
   (RTL); the yard drawing is always left to right (dir="ltr" in markup).
   ============================================================ */

@keyframes tm-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.15;
  }
}

@keyframes tm-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@keyframes tm-drift {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(calc(10px * var(--dir)));
  }
}

@keyframes tm-queue {
  0% {
    transform: translateX(calc(-30px * var(--dir)));
    opacity: 0;
  }

  25%,
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes tm-roll3 {
  0%,
  25% {
    margin-block-start: 0;
  }

  40%,
  60% {
    margin-block-start: -1.3em;
  }

  75%,
  100% {
    margin-block-start: -2.6em;
  }
}

@keyframes tm-roll4 {
  0%,
  18% {
    margin-block-start: 0;
  }

  25%,
  43% {
    margin-block-start: -1.4em;
  }

  50%,
  68% {
    margin-block-start: -2.8em;
  }

  75%,
  100% {
    margin-block-start: -4.2em;
  }
}

@keyframes tm-scan {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* ---------- base ---------- */

/* The -ink colours are the ones dark enough to read as small text on their
   own tint (AA); the plain ones are for fills, stripes and dots. */
/* Customer tints for the yard: a known yard reads as many owners, not one
   block. */
#tmos {
  --tm-crit-ink: #b42318;
  --tm-c0: #3d6bff;
  --tm-c1: #6f8fff;
  --tm-c2: #22a6b8;
  --tm-c3: #5468d6;
  --tm-c4: #2bc0a6;
  --tm-cyan: #22d3ee;
  --tm-cyan-ink: #0e7490;
  --tm-grey: #5a6382;
  --tm-warn: #f59e0b;
  --tm-warn-ink: #92400e;
}

/* Severity chips */
#tmos .sv-crit {
  --st-c: var(--tm-crit-ink);
  --st-bg: var(--nlm-danger-soft);
}

#tmos :is(.sv-high, .sv-med) {
  --st-c: var(--tm-warn-ink);
  --st-bg: rgb(245 158 11 / 16%);
}

#tmos .sv-low {
  --st-c: var(--nlm-fg-2);
  --st-bg: var(--nlm-gray-100);
}

#tmos .sv-done {
  --st-c: var(--nlm-success);
  --st-bg: var(--nlm-success-soft);
}

#tmos .dark .sv-crit {
  --st-c: #ff8a8a;
  --st-bg: rgb(239 68 68 / 16%);
}

#tmos .dark :is(.sv-high, .sv-med) {
  --st-c: #fbbf24;
  --st-bg: rgb(245 158 11 / 14%);
}

/* Facts TerminalOS pulled out */
#tmos .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#tmos .pill {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--nlm-signal-ink);
  background: var(--nlm-signal-soft);
  border-radius: 999px;
  padding: 5px 11px;
}

#tmos .dark .pill {
  color: #fff;
  background: rgb(61 107 255 / 22%);
}

#tmos .btn-s {
  font-size: 13px;
  padding: 8px 14px;
}

#tmos .dr-a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

/* A decision taken stays gold: it is the human's action. */
#tmos .is-taken:disabled {
  opacity: 1;
  cursor: default;
  transform: none;
  box-shadow: none;
}

#tmos .auth {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

#tmos .auth-l {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--nlm-navy-400);
  margin-inline-end: 4px;
}

#tmos .auth-b {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 6px;
  padding: 4px 10px;
}

/* ---------- 01 the questions ---------- */

#tmos .qa {
  height: 104px;
}

#tmos .qn {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--nlm-danger);
  margin-bottom: 8px;
}

#tmos .qchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tmos .qchip {
  font: inherit;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#tmos .qchip[aria-pressed="true"] {
  color: #fff;
  background: var(--nlm-navy-900);
  border-color: var(--nlm-navy-900);
}

/* the meter */
#tmos .meter-h {
  margin: 0 0 14px;
}

#tmos .meter-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

#tmos .meter-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#tmos .meter-rows dd {
  margin: 0;
  font-family: var(--nlm-font-mono);
  font-weight: 600;
  white-space: nowrap;
  color: #ff8a8a;
}

#tmos .meter-x {
  display: block;
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--nlm-navy-400);
}

#tmos .qrate {
  margin-top: 0;
}

#tmos .qrate input {
  width: 112px;
}

/* ---------- what if ---------- */

#tmos .turn-flow {
  gap: 6px;
}

#tmos .turn-flow li {
  font-size: 13.5px;
  padding: 7px 12px;
}

#tmos .turn-q + .turn-q {
  margin-top: 10px;
}

#tmos .seg-d {
  border-color: rgb(255 255 255 / 24%);
}

#tmos .seg-d button {
  color: var(--nlm-navy-300);
}

#tmos .seg-d button[aria-pressed="true"] {
  color: var(--nlm-navy-950);
  background: #fff;
}

#tmos .flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

#tmos .flow-ai {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  color: #fff;
}

#tmos .flow-ai .node {
  width: 52px;
  height: 52px;
}

#tmos .flow-ai .node-core {
  width: 40px;
  height: 40px;
}

#tmos .flow-ai .node-core :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
}

#tmos .flow-replay {
  padding-inline: 12px 16px;
}

#tmos .flow-replay :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#tmos .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#tmos .step {
  background: var(--nlm-navy-800);
  border: 1px solid var(--nlm-line-dark);
  border-radius: 14px;
  padding: 20px 18px;
  transition: border-color 0.35s, opacity 0.35s;
}

#tmos .step.is-done {
  border-color: rgb(34 197 94 / 45%);
}

#tmos .step.is-gold.is-done {
  border-color: var(--pq-gold);
}

#tmos .flow.is-armed .step:not(.is-done) {
  opacity: 0.45;
}

#tmos .step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

#tmos .step .ico {
  width: 36px;
  height: 36px;
  background: rgb(61 107 255 / 18%);
  color: var(--pq-ai);
}

#tmos .step.is-gold .ico {
  background: rgb(227 178 60 / 18%);
  color: var(--pq-gold);
}

#tmos .step-n {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--nlm-navy-400);
}

#tmos .step h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 0 0 8px;
}

#tmos .step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--nlm-navy-300);
  margin: 0;
}

#tmos .ck {
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgb(255 255 255 / 25%);
  color: transparent;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

#tmos .ck :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
}

#tmos .step.is-done .ck {
  background: var(--pq-ok);
  border-color: var(--pq-ok);
  color: #fff;
}

#tmos .step.is-gold.is-done .ck {
  background: var(--pq-gold);
  border-color: var(--pq-gold);
  color: var(--pq-gold-ink);
}

#tmos .flow.is-armed .step.is-done .ck {
  animation: pq-pop 0.4s var(--nlm-ease-soft);
}

/* ---------- 03 see it work: bar and counters ---------- */

#tmos .day-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

#tmos .day-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tmos .day-n {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#tmos .day-n li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--nlm-fg-2);
}

#tmos .day-n b {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: var(--nlm-fg-1);
}

[dir="rtl"] #tmos .day-n b.ltr {
  text-align: end;
}

#tmos .day-n .is-bad b {
  color: var(--nlm-danger);
}

#tmos .day-n .is-ai b {
  color: var(--nlm-signal-ink);
}

#tmos .drawer {
  position: relative;
  min-height: 210px;
}

/* ---------- 04 tabs ---------- */

#tmos .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

#tmos .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#tmos .tab :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
}

#tmos .tab[aria-selected="true"] {
  color: #fff;
  background: var(--nlm-navy-900);
  border-color: var(--nlm-navy-900);
}

#tmos .vp {
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 32px);
  animation: pq-rise 0.45s var(--nlm-ease-soft);
}

#tmos .vq {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--nlm-fg-1);
  margin: 0 0 18px;
}

#tmos .vnote {
  font-size: 13px;
  font-style: italic;
  color: var(--nlm-fg-3);
  margin: 14px 0 0;
}

#tmos .vp .qctl output {
  color: var(--nlm-fg-1);
}

/* Tables */
#tmos .sc-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
}

#tmos .sc {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

#tmos .sc :is(th, td) {
  text-align: start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nlm-line);
  white-space: nowrap;
}

#tmos .sc thead th {
  font-family: var(--nlm-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
}

#tmos .sc tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

#tmos .sc tr.is-sel {
  background: rgb(61 107 255 / 5%);
}

/* ---------- 06 capabilities ---------- */

#tmos .cloud {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tmos .cloud li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid rgb(61 107 255 / 35%);
  border-radius: 999px;
  padding: 8px 15px;
}

#tmos .cloud :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
  color: var(--nlm-signal);
}

#tmos .cloud.is-armed li {
  opacity: 0;
  transform: translateY(8px) scale(0.94);
}

#tmos .cloud.is-armed.is-in li {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--nlm-ease), transform 0.45s var(--nlm-ease-soft);
  transition-delay: calc(var(--i) * 60ms);
}

#tmos .feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#tmos .feat {
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
  padding: 16px;
  transition: transform 0.25s var(--nlm-ease), box-shadow 0.25s var(--nlm-ease);
}

#tmos .feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--nlm-shadow-md);
}

#tmos .feat h3 {
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--nlm-fg-1);
  margin: 12px 0 6px;
}

#tmos .feat p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--nlm-fg-2);
  margin: 0;
}

#tmos .roles {
  margin-top: clamp(24px, 3vw, 36px);
}

#tmos .roles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

#tmos .roles li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 12px;
}

#tmos .roles b {
  font-family: var(--nlm-font-display);
  font-size: 13.5px;
  color: var(--nlm-fg-1);
}

/* ---------- 07 before / after ---------- */

#tmos .out-sw {
  margin-bottom: 20px;
}

#tmos .out-g {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

#tmos .core {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 13.5px;
  line-height: 1.35;
}

#tmos .core :is(th, td) {
  text-align: start;
  font-weight: 500;
  padding: 9px 12px;
  background: var(--nlm-navy-900);
  border-block: 1px solid var(--nlm-line-dark);
  transition: color 0.4s var(--nlm-ease), opacity 0.4s var(--nlm-ease);
}

#tmos .core :is(th, td):first-child {
  border-inline-start: 1px solid var(--nlm-line-dark);
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
}

#tmos .core :is(th, td):last-child {
  border-inline-end: 1px solid var(--nlm-line-dark);
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
}

#tmos .core thead th {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-navy-400);
  background: transparent;
  border-color: transparent;
  padding-block: 0 2px;
}

#tmos .core thead th:is(:first-child, :last-child) {
  border-color: transparent;
}

#tmos .core td {
  position: relative;
  padding-inline-start: 32px;
}

#tmos .core td :is(svg, i[data-lucide]) {
  position: absolute;
  top: calc(50% - 7px);
  inset-inline-start: 10px;
  width: 14px;
  height: 14px;
  color: var(--nlm-navy-600);
}

/* Reactive, there is no AI action and no outcome to show: the cells
   stay, empty. */
#tmos .core :is(.c-ai, .c-out) > * {
  transition: opacity 0.4s var(--nlm-ease), visibility 0s;
}

#tmos .c-pain {
  color: var(--nlm-navy-400);
  text-decoration: line-through;
  text-decoration-color: rgb(255 255 255 / 30%);
}

#tmos .c-ai {
  color: var(--pq-ai);
}

#tmos .c-out {
  color: #5ee08a;
  font-weight: 600;
}

/* The last row is the human one: readable in both states, its outcome gold. */
#tmos .is-human .c-pain {
  color: #fff;
  text-decoration: none;
}

#tmos .is-human .c-ai {
  color: var(--nlm-navy-400);
}

#tmos .is-human .c-out {
  color: var(--pq-gold);
}

#tmos [data-state="before"] tr:not(.is-human) .c-pain {
  color: #ff8a8a;
  text-decoration-color: transparent;
}

/* Before FleetOS there is no AI action and no outcome to show: the cells
   stay, empty. */


#tmos [data-state="before"] tr:not(.is-human) :is(.c-ai, .c-out) > * {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--nlm-ease), visibility 0s 0.4s;
}

/* The morning yard brief */
#tmos .report {
  position: relative;
  background: var(--nlm-navy-900);
  border: 1px solid var(--nlm-line-dark);
  border-radius: 16px;
  overflow: hidden;
  color: var(--nlm-navy-300);
}

#tmos .report-b {
  padding: clamp(18px, 2vw, 24px);
}

#tmos .report-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#tmos .report-h strong {
  font-family: var(--nlm-font-display);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

/* The brief's values are phrases, not single numbers: one per row. */
#tmos .kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

#tmos .kpis li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  background: rgb(255 255 255 / 5%);
  border-radius: 10px;
  padding: 10px 12px;
}

#tmos .kpis li:first-child {
  grid-column: 1 / -1;
}

#tmos .kpis b {
  flex: 0 1 auto;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  text-align: end;
  color: #fff;
}

#tmos .kpis li:first-child b {
  font-size: 28px;
}

#tmos .kpis .is-bad b {
  color: #ff8a8a;
}

#tmos .kpis .is-warn b {
  color: #fbbf24;
}

#tmos .kpis .is-ok b {
  color: #5ee08a;
}

#tmos .report-n {
  margin: 14px 0 0;
  font-size: 11.5px;
  font-style: italic;
  color: var(--nlm-navy-400);
}

#tmos .blind {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgb(8 9 31 / 72%);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nlm-ease), visibility 0.5s;
}

#tmos .blind b {
  display: block;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin-bottom: 8px;
}

#tmos .blind p {
  max-width: 34ch;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nlm-navy-300);
}

#tmos [data-state="before"] .blind {
  opacity: 1;
  visibility: visible;
}

/* ---------- 08 who it's for ---------- */

#tmos .tabp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 36px);
  animation: pq-rise 0.45s var(--nlm-ease-soft);
}

#tmos .tabp h3 {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--nlm-fg-1);
  margin: 16px 0 10px;
}

#tmos .tabp p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nlm-fg-2);
  margin: 0;
}

#tmos .ex {
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
  padding: 18px;
}

#tmos .tabp .ex-l {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
  margin-bottom: 12px;
}

#tmos .tabp .ex-q .alert {
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 17px);
  padding: 12px 14px;
}

/* ---------- 09 getting started ---------- */

#tmos .tl-wrap {
  position: relative;
}

#tmos .tl {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
}

#tmos .tl-line {
  position: absolute;
  top: 21px;
  inset-inline: 21px;
  height: 2px;
  background: var(--nlm-signal);
  transform-origin: 0 50%;
}

[dir="rtl"] #tmos .tl-line {
  transform-origin: 100% 50%;
}

#tmos .tl li {
  position: relative;
}

#tmos .tl-dot {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #fff;
  background: var(--nlm-navy-900);
  box-shadow: 0 0 0 6px #fff;
}

#tmos .tl-dot :is(svg, i[data-lucide]) {
  width: 20px;
  height: 20px;
}

#tmos .tl h3 {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--nlm-fg-1);
  margin: 0 0 8px;
}

#tmos .tl p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nlm-fg-2);
  margin: 0;
}

/* ---------- closing ---------- */

#tmos .final .h2 {
  max-width: 24ch;
  margin-bottom: 16px;
}

#tmos .cta-note {
  max-width: 46ch;
  margin: 0 auto 32px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--nlm-navy-300);
}

/* Twelve yard slots, pulled into the line and the wordmark. */
#tmos .cv-t {
  top: calc(50% - 7px);
  inset-inline-start: calc(50% - 7px);
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: var(--tm-c1);
  border: 0;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 12%);
}

#tmos .also {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 30px 0 0;
  font-family: var(--nlm-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--nlm-navy-400);
}

#tmos .also a {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  padding: 5px 12px;
  transition: border-color 0.2s, background 0.2s;
}

#tmos .also a:hover {
  border-color: var(--nlm-signal);
  background: var(--nlm-signal);
}

@media (width <= 1180px) {
  #tmos .feats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #tmos .roles ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (width <= 980px) {
  #tmos .steps,
  #tmos .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The meter rides the bottom of the screen here (see product-page.css), so it
     is kept short: the four figures sit two by two. */
  #tmos .meter-l {
    margin-bottom: 4px;
  }

  #tmos .meter-h {
    font-size: 22px;
    margin: 0 0 8px;
  }

  #tmos .meter-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    font-size: 11.5px;
    line-height: 1.3;
  }

  #tmos .meter-rows > div {
    flex-direction: column;
    gap: 1px;
  }

  #tmos .meter-x {
    display: none;
  }
}

@media (width <= 640px) {
  #tmos .tl-line {
    display: none;
  }

  #tmos .day-ctl {
    width: 100%;
  }

  #tmos .day-ctl :is(.btn-n, .btn-g) {
    flex: 1;
    justify-content: center;
  }

  #tmos .seg {
    flex-wrap: wrap;
    border-radius: 16px;
  }

  #tmos .kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The table reads as stacked cards: pain, then what the AI does, then the outcome. */
  #tmos .core,
  #tmos .core tbody,
  #tmos .core tr,
  #tmos .core :is(th, td) {
    display: block;
  }

  #tmos .core thead {
    display: none;
  }

  #tmos .core tr {
    margin-bottom: 8px;
    background: var(--nlm-navy-900);
    border: 1px solid var(--nlm-line-dark);
    border-radius: 10px;
    padding: 8px 4px;
  }

  #tmos .core tbody :is(th, td),
  #tmos .core tbody :is(th, td):is(:first-child, :last-child) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding-block: 4px;
  }
}

/* ---------- the yard (hero, 03, 04) ---------- */


#tmos .yd {
  display: block;
  width: 100%;
  height: auto;
}

#tmos .yd-z {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  font-weight: 600;
  fill: var(--nlm-navy-400);
}

#tmos .yd .s {
  stroke-width: 0;
  transition: fill 0.45s var(--nlm-ease), opacity 0.45s var(--nlm-ease), stroke 0.3s;
}

#tmos .yd .c0 {
  fill: var(--tm-c0);
}

#tmos .yd .c1 {
  fill: var(--tm-c1);
}

#tmos .yd .c2 {
  fill: var(--tm-c2);
}

#tmos .yd .c3 {
  fill: var(--tm-c3);
}

#tmos .yd .c4 {
  fill: var(--tm-c4);
}

/* Planned out tomorrow: still here, pulsing for release. */
#tmos .yd .s-po {
  animation: tm-pulse 1.6s ease-in-out infinite;
}

/* Planned in tomorrow: a dashed cyan outline in a free slot. */
#tmos .yd :is(.s-pi, .s-free) {
  fill: rgb(255 255 255 / 5%);
}

#tmos .yd .s-pi {
  stroke: var(--tm-cyan);
  stroke-width: 1.2;
  stroke-dasharray: 2.5 1.5;
}

#tmos .yd .s-gone {
  opacity: 0.18;
}

#tmos .yd .s-q {
  fill: var(--tm-grey);
}

#tmos .yd .is-hit {
  fill: var(--tm-cyan);
  stroke: #fff;
  stroke-width: 1;
}

#tmos .light .yd .yd-z {
  fill: var(--nlm-fg-3);
}

#tmos .light .yd :is(.s-pi, .s-free) {
  fill: var(--nlm-gray-100);
}

#tmos .light .yd .s-pi {
  stroke: var(--tm-cyan-ink);
}

#tmos .light .yd .s-q {
  fill: var(--nlm-gray-300);
}

#tmos .light .yd .is-hit {
  stroke: var(--nlm-navy-900);
}

/* ---------- hero ---------- */
#tmos .display {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}

/* The H1 names the product for search; the display line is the headline. */
#tmos .hero-h.tm-h1 {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--nlm-navy-300);
  margin-bottom: 12px;
}

#tmos .btns {
  flex-wrap: wrap;
}

/* The hero stage: the yard and what TerminalOS does with it. The static
   frame (no script, reduced motion) is frame 5: a known, planned yard. */
#tmos .stage.tmh {
  padding: 14px;
  overflow: hidden;
}

#tmos .tmh-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#tmos .tmh-g {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

#tmos .tmh-yard {
  position: relative;
}

#tmos .tmh-card {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 8px;
  padding: 5px 7px;
  box-shadow: var(--nlm-shadow-md);
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition-delay: calc(var(--i) * 0.15s);
}

/* The side holds three layers in the same place: the questions, the emails,
   TerminalOS at work. One shows at a time. */
#tmos .tmh-side {
  display: grid;
  align-items: center;
}

#tmos .tmh-side > * {
  grid-area: 1 / 1;
  transition: opacity 0.45s var(--nlm-ease), transform 0.45s var(--nlm-ease-soft);
}

#tmos .tmh-qs,
#tmos .tmh-mails {
  opacity: 0;
  visibility: hidden;
}

#tmos .tmh-qs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tmos .tmh-qs li {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
}

#tmos .tmh-mails ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tmos .tmh-mails li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #fff;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 8px;
  padding: 5px 8px;
}

#tmos .tmh-mails li :is(svg, i[data-lucide]) {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--nlm-navy-300);
}

/* Disconnected: a dashed line towards the yard that never reaches it. */
#tmos .tmh-mails li::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 100%;
  width: 12px;
  border-block-start: 1.5px dashed rgb(255 255 255 / 30%);
}

#tmos .tmh-already {
  margin: 0;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-cyan);
}

#tmos .tmh-ai {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tmos .tmh-node {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nlm-font-display);
  font-size: 15px;
  color: #fff;
}

#tmos .tmh-node .node {
  width: 44px;
  height: 44px;
}

#tmos .tmh-node .node-core {
  width: 34px;
  height: 34px;
}

#tmos .tmh-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#tmos .tmh-checks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nlm-navy-400);
  border-block-end: 1px solid rgb(255 255 255 / 8%);
  padding-block-end: 4px;
  transition: color 0.3s;
}

#tmos .tmh-checks li :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
  color: var(--pq-ok);
  opacity: 0;
  transition: opacity 0.3s;
}

#tmos .tmh-checks li.is-done {
  color: #fff;
}

#tmos .tmh-checks li.is-done :is(svg, i[data-lucide]) {
  opacity: 1;
}

#tmos .tmh-rib {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  transition: opacity 0.45s var(--nlm-ease);
}

#tmos .tmh-rib > span:not(.an) {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--nlm-navy-300);
  border-radius: 10px;
  padding: 7px 10px;
}

#tmos .tmh-rib b {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#tmos .tmh-today {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 20%);
}

#tmos .tmh-today b {
  color: #fff;
}

#tmos .tmh-tmr {
  border: 1.5px dashed var(--tm-cyan);
}

#tmos .tmh-tmr b {
  color: var(--tm-cyan);
}

/* Frame 1: the punch line over a navy screen. */
#tmos .tmh-punch {
  position: absolute;
  inset: -14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  background: rgb(10 12 40 / 92%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nlm-ease), visibility 0.5s;
}

#tmos .fh-end {
  position: absolute;
  inset: -14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--nlm-navy-950);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nlm-ease), visibility 0.5s;
}

#tmos .fh-word {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  color: #fff;
}

#tmos .fh-by {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nlm-navy-300);
}

/* The frames. Frames 1 to 3 show yesterday's yard: every slot grey. */
#tmos .tmh:is([data-f="1"], [data-f="2"], [data-f="3"]) .yd .s {
  fill: var(--tm-grey);
  stroke-width: 0;
  animation: none;
}

#tmos .tmh:is([data-f="1"], [data-f="2"], [data-f="3"], [data-f="4"]) .yd :is(.s-pi, .s-free) {
  fill: rgb(255 255 255 / 5%);
  stroke-width: 0;
}

#tmos .tmh:is([data-f="1"], [data-f="2"], [data-f="3"], [data-f="4"]) .yd .s-po {
  animation: none;
}

#tmos .tmh[data-f] :is(.tmh-ai, .tmh-rib) {
  opacity: 0;
}

#tmos .tmh[data-f="1"] .tmh-punch,
#tmos .tmh[data-f="6"] .fh-end {
  opacity: 1;
  visibility: visible;
}

#tmos .tmh[data-f="2"] .tmh-card {
  opacity: 1;
  transform: none;
}

#tmos .tmh[data-f="2"] .tmh-qs,
#tmos .tmh[data-f="3"] .tmh-mails {
  opacity: 1;
  visibility: visible;
}

#tmos .tmh:is([data-f="4"], [data-f="5"]) .tmh-ai,
#tmos .tmh[data-f="5"] .tmh-rib {
  opacity: 1;
}

/* ---------- 01 the questions: the pain loops ---------- */

#tmos .qa :is(svg, i[data-lucide]) {
  flex: none;
}

/* Q1: two counts that disagree, and a "?" between them */
#tmos .qa-clip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  color: var(--nlm-fg-3);
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line-strong);
  border-radius: 8px;
  padding: 6px 10px;
}

#tmos .qa-clip :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
}

#tmos .qa-clip b,
#tmos .qa-billed b {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--nlm-fg-1);
}

#tmos .qa-q {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--nlm-danger);
  animation: tm-blink 1.2s steps(1) infinite;
}

/* Q2: the owner tag cycles through names and lands on "?" */
#tmos .qa-box {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--tm-grey);
  border-radius: 8px;
}

#tmos .qa-box :is(svg, i[data-lucide]) {
  width: 26px;
  height: 26px;
}

#tmos .qa-tag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  color: var(--nlm-fg-3);
}

#tmos :is(.qa-spin, .qa-flip, .qa-count) {
  position: relative;
  display: block;
  height: 1.4em;
  overflow: hidden;
}

#tmos :is(.qa-spin, .qa-flip, .qa-count) > span {
  display: block;
  height: 1.4em;
  line-height: 1.4em;
  white-space: nowrap;
}

#tmos .qa-spin {
  min-width: 132px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nlm-fg-1);
  border: 1px solid var(--nlm-line-strong);
  border-radius: 6px;
  padding-inline: 6px;
}

/* At rest (reduced motion) the tag already shows "?": the first name is
   pulled up so the last one is in view. */
#tmos .qa-spin > span:first-child {
  margin-block-start: -4.2em;
  animation: tm-roll4 4.8s var(--nlm-ease) infinite;
}

#tmos .qa-spin .is-q {
  color: var(--nlm-danger);
  font-weight: 800;
}

/* Q3: the calendar keeps flipping, "Billed" stays put */
#tmos .qa-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  color: #fff;
  background: var(--nlm-danger);
  border-radius: 8px;
  padding: 6px 10px;
}

#tmos .qa-flip {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 22px;
  height: 1.3em;
}

#tmos .qa-flip > span {
  height: 1.3em;
  line-height: 1.3em;
}

#tmos .qa-flip > span:first-child {
  margin-block-start: -2.6em;
  animation: tm-roll3 3.6s var(--nlm-ease) infinite;
}

#tmos .qa-billed {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  color: var(--nlm-fg-3);
  border: 1px dashed var(--nlm-line-strong);
  border-radius: 8px;
  padding: 6px 10px;
}

/* Q4: trucks queue at the gate while a reach stacker shuffles */
#tmos .qa-gate {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  color: var(--nlm-fg-3);
  border-inline-start: 4px solid var(--nlm-danger);
  padding-inline-start: 4px;
}

#tmos .qa-queue {
  display: flex;
  gap: 4px;
  color: var(--nlm-fg-2);
}

#tmos .qa-queue > span {
  animation: tm-queue 4s var(--nlm-ease) infinite;
  animation-delay: calc(var(--i) * 0.35s);
}

#tmos .qa-queue :is(svg, i[data-lucide]) {
  width: 24px;
  height: 24px;
}

#tmos .qa-stacker {
  color: var(--tm-warn);
  animation: tm-drift 1.8s ease-in-out infinite;
}

#tmos .qa-stacker :is(svg, i[data-lucide]) {
  width: 28px;
  height: 28px;
}

/* Q5: the inbox count climbs while the cursor blinks in an empty sheet */
#tmos .qa-inbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  color: var(--nlm-fg-3);
}

#tmos .qa-inbox :is(svg, i[data-lucide]) {
  width: 24px;
  height: 24px;
  color: var(--nlm-fg-2);
}

#tmos .qa-count {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 20px;
  height: 1.3em;
  color: var(--nlm-danger);
}

#tmos .qa-count > span {
  height: 1.3em;
  line-height: 1.3em;
}

#tmos .qa-count > span:first-child {
  margin-block-start: -2.6em;
  animation: tm-roll3 3.6s var(--nlm-ease) infinite;
}

#tmos .qa-sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  color: var(--nlm-fg-3);
}

#tmos .qa-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--nlm-line-strong);
}

#tmos .qa-row i {
  height: 18px;
  border-inline-end: 1px solid var(--nlm-line);
}

#tmos .qa-cur {
  position: relative;
}

#tmos .qa-cur::after {
  content: "";
  position: absolute;
  inset-block: 3px;
  inset-inline-start: 4px;
  width: 1.5px;
  background: var(--nlm-fg-1);
  animation: tm-blink 1s steps(1) infinite;
}

#tmos .qs.is-idle :is(.qa-q, .qa-spin > span, .qa-flip > span, .qa-count > span, .qa-queue > span, .qa-stacker, .qa-cur::after) {
  animation-play-state: paused;
}

/* ---------- what if ---------- */
#tmos .turn-already {
  margin: 0 0 18px;
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-cyan);
}

#tmos .turn.is-armed:not(.is-on) .turn-already {
  color: var(--nlm-fg-3);
}

/* ---------- 02 the solution: email -> yard ---------- */
#tmos .con {
  margin-bottom: clamp(40px, 5vw, 64px);
}

#tmos .con-top {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

#tmos .con-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.15fr);
  gap: 14px;
  align-items: center;
}

#tmos .con-mails {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tmos .con-m {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 14px;
  text-align: start;
  color: #fff;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

#tmos .con-m :is(svg, i[data-lucide]) {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--nlm-navy-300);
}

#tmos .con-m:hover {
  background: rgb(255 255 255 / 9%);
}

#tmos .con-m[aria-pressed="true"] {
  border-color: var(--tm-cyan);
  background: rgb(34 211 238 / 12%);
}

#tmos .con-m[aria-pressed="true"] :is(svg, i[data-lucide]) {
  color: var(--tm-cyan);
}

#tmos .con-mid {
  display: flex;
  align-items: center;
  justify-content: center;
}

#tmos .con-beam {
  flex: 1;
  height: 2px;
  background: var(--tm-cyan);
  transition: background 0.3s, opacity 0.3s;
}

#tmos .con-mid .node {
  flex: none;
  width: 48px;
  height: 48px;
  transition: opacity 0.3s, filter 0.3s;
}

#tmos .con-mid .node-core {
  width: 36px;
  height: 36px;
}

#tmos .con-rec {
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 16px;
  padding: clamp(16px, 2vw, 22px);
}

#tmos .con-rec .panel-t {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nlm-navy-300);
}

#tmos .con-rec .panel-t :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#tmos .con-rec .panel-t .ltr {
  color: #fff;
}

#tmos .con-f {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#tmos .con-f li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  color: var(--nlm-navy-300);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 8px;
  padding: 7px 10px;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}

#tmos .con-f li :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
  color: var(--pq-ok);
  opacity: 0;
}

#tmos .con-f li.is-lit {
  color: #fff;
  background: rgb(34 211 238 / 14%);
  border-color: var(--tm-cyan);
}

#tmos .con-f li.is-lit :is(svg, i[data-lucide]) {
  opacity: 1;
}

#tmos .con-k {
  margin: 0 0 6px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-navy-400);
}

#tmos .con-u {
  margin: 0;
  font-size: 14px;
  color: #fff;
}

#tmos .con-out .pills {
  margin-bottom: 12px;
}

#tmos .con-note {
  display: none;
  margin: 12px 0 0;
  font-size: 14px;
  color: #fbbf24;
}

/* Disconnected: the inbox and the yard never meet. */
#tmos .con[data-mode="off"] .con-beam {
  background: none;
  border-block-start: 2px dashed rgb(255 255 255 / 25%);
  height: 0;
}

#tmos .con[data-mode="off"] .con-mid .node {
  opacity: 0.25;
  filter: grayscale(1);
}

#tmos .con[data-mode="off"] .con-m[aria-pressed="true"] {
  border-color: rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 5%);
}

#tmos .con[data-mode="off"] .con-m[aria-pressed="true"] :is(svg, i[data-lucide]) {
  color: var(--nlm-navy-300);
}

#tmos .con[data-mode="off"] .con-f li.is-lit {
  color: var(--nlm-navy-300);
  background: none;
  border-color: rgb(255 255 255 / 10%);
}

#tmos .con[data-mode="off"] .con-f li.is-lit :is(svg, i[data-lucide]) {
  opacity: 0;
}

#tmos .con[data-mode="off"] .con-out {
  display: none;
}

#tmos .con[data-mode="off"] .con-note {
  display: block;
}

/* ---------- 03 see it work: the morning inbox ---------- */
#tmos .day-n li.is-ok b {
  color: var(--nlm-success);
}

#tmos .ib-g {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: start;
}

#tmos .inbox {
  position: relative;
  align-self: stretch;
  min-height: 520px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 16px;
  overflow: hidden;
}

#tmos .inbox-h {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
  border-bottom: 1px solid var(--nlm-line);
}

#tmos .mails {
  position: absolute;
  inset: 41px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#tmos .mail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  text-align: start;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--nlm-line);
  border-inline-start: 3px solid transparent;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s;
}

#tmos .mail:hover {
  background: var(--nlm-gray-50);
}

#tmos .mail:focus-visible {
  outline-offset: -3px;
}

#tmos .mail.is-sel {
  background: var(--nlm-signal-soft);
}

#tmos .mail-f {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--nlm-fg-3);
}

#tmos .mail-s {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--nlm-fg-1);
}

#tmos .mail-p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--nlm-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tmos .mail-st {
  display: none;
  align-items: center;
  gap: 5px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  color: var(--nlm-success);
}

#tmos .mail-st :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
}

#tmos .mail.is-unread {
  border-inline-start-color: var(--nlm-signal);
}

#tmos .mail.is-unread .mail-s {
  font-weight: 600;
}

#tmos .mail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nlm-signal-soft);
  opacity: 0;
  pointer-events: none;
}

#tmos .mail.is-scan::after {
  animation: tm-scan 0.5s ease-in-out;
}

#tmos .mail.is-done .mail-st {
  display: inline-flex;
}

#tmos .mail.is-skip .mail-st {
  color: var(--nlm-fg-3);
}

#tmos .ib-yard {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tmos .ib-map {
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 16px;
  padding: 12px;
}

#tmos .ib-in {
  position: relative;
}

/* One button per email over the first of its containers. */
#tmos .hit {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  width: 26px;
  height: 26px;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tmos .hit i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--nlm-navy-900);
  background: #fff;
  opacity: 0.85;
  transition: transform 0.2s, background 0.2s;
}

#tmos .hit:hover i,
#tmos .hit.is-sel i {
  transform: scale(1.25);
  background: var(--tm-cyan);
}

#tmos .hit[hidden] {
  display: none;
}

#tmos .rib {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#tmos .rib > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 8px 12px;
}

#tmos .rib b {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
}

#tmos .rib > span:last-child {
  border: 1.5px dashed var(--tm-cyan-ink);
}

#tmos .rib.is-warn > span:last-child {
  color: var(--tm-warn-ink);
  background: rgb(245 158 11 / 12%);
  border-color: var(--tm-warn);
}

#tmos .ib-alert {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-inline-start: 4px solid var(--tm-warn);
  border-radius: 12px;
  padding: 10px 12px;
}

#tmos .ib-alert p {
  margin: 0 0 8px;
}

#tmos .ib-alert-t {
  display: flex;
  gap: 8px;
  color: var(--nlm-fg-1);
}

#tmos .ib-alert-t :is(svg, i[data-lucide]) {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--tm-warn);
}

#tmos .ib-alert[hidden] {
  display: none;
}


#tmos .dr-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--nlm-fg-3);
}

#tmos .dr-body.is-blank {
  visibility: hidden;
}

#tmos .dr-ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

#tmos .dr-before {
  background: var(--nlm-gray-50);
  border: 1px dashed var(--nlm-line-strong);
  border-radius: 12px;
  padding: 10px 12px;
}

#tmos .dr-after {
  border: 1px solid var(--nlm-signal);
  border-radius: 12px;
  padding: 10px 12px;
}

#tmos .dr-after .panel-t {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--nlm-signal-ink);
}

#tmos .dr-after .panel-t :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
}

#tmos .kv {
  margin: 0;
  font-size: 12.5px;
}

#tmos .kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--nlm-line);
}

#tmos .kv > div:last-child {
  border-bottom: 0;
}

#tmos .kv dt {
  color: var(--nlm-fg-3);
}

#tmos .kv dd {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  text-align: end;
  color: var(--nlm-fg-1);
}

#tmos .is-q {
  font-weight: 800;
  color: var(--nlm-fg-3);
}

#tmos .dr-skip {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--nlm-fg-3);
}

#tmos .drawer.is-skip .dr-ba {
  display: none;
}

#tmos .dr-mail-t {
  margin-bottom: 8px;
}

#tmos .quote {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nlm-fg-2);
  background: var(--nlm-gray-50);
  border-inline-start: 3px solid var(--nlm-line-strong);
  border-radius: 10px;
  padding: 10px 12px;
}

#tmos .quote-h {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#tmos .mk {
  color: var(--nlm-signal-ink);
  background: var(--nlm-signal-soft);
  border-radius: 4px;
  padding: 0 3px;
}

#tmos .dr-reply {
  margin-bottom: 12px;
}

#tmos .dr-draft {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nlm-fg-1);
  border: 1px solid var(--nlm-line-strong);
  border-radius: 10px;
  padding: 10px 12px;
}

#tmos [data-d-actions][hidden],
#tmos [data-d-reply][hidden] {
  display: none;
}

/* ---------- 04 know what's coming ---------- */
#tmos .fc-g {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: start;
}

#tmos .fc-r {
  width: 100%;
}

#tmos .fc-stops {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  color: var(--nlm-fg-3);
}

#tmos .fc-stops .is-on {
  font-weight: 700;
  color: var(--nlm-fg-1);
}

#tmos .fc-map {
  position: relative;
  margin-bottom: 12px;
}

/* Rendered on day +3: every slot taken. */
#tmos .fc-map.is-full .yd .s-po {
  animation: none;
}

#tmos .fc-map.is-full .yd :is(.s-free, .s-pi) {
  fill: var(--nlm-gray-100);
  stroke: var(--tm-cyan-ink);
  stroke-width: 1.2;
  stroke-dasharray: 2.5 1.5;
}

#tmos .fc-yest {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nlm-fg-1);
  background: rgb(255 255 255 / 55%);
}

#tmos .fc-yest span {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--nlm-fg-3);
}

#tmos .fc-map.is-yest .fc-yest {
  display: flex;
}

#tmos .fc-occ {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#tmos .fc-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--nlm-gray-100);
  overflow: hidden;
}

#tmos .fc-bar i {
  display: block;
  height: 100%;
  width: calc(var(--f) * 100%);
  border-radius: 5px;
  background: var(--tm-warn);
  transition: width 0.4s var(--nlm-ease), background 0.3s;
}

#tmos .fc-occ.is-over .fc-bar i {
  background: var(--pq-bad);
}

#tmos .fc-occ.is-ok .fc-bar i {
  background: var(--pq-ok);
}

#tmos .fc-ns {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  color: var(--nlm-danger);
}

#tmos .fc-ns[hidden] {
  display: none;
}

#tmos .fc-tw {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
}

#tmos .fc {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#tmos .fc :is(th, td) {
  padding: 7px 10px;
  text-align: start;
  border-bottom: 1px solid var(--nlm-line);
  white-space: nowrap;
}

#tmos .fc thead th {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
}

#tmos .fc tbody th {
  font-weight: 600;
}

#tmos .fc tr.is-on {
  background: var(--nlm-signal-soft);
}

#tmos .fc tr.is-over [data-fc-end],
#tmos .fc tr.is-over [data-fc-pct] {
  font-weight: 700;
  color: var(--nlm-danger);
}

#tmos .fc tr.is-moved [data-fc-out] {
  font-weight: 700;
  color: var(--nlm-signal-ink);
}

#tmos .fc-flag {
  font-size: 11px;
  font-weight: 700;
  color: var(--nlm-danger);
  background: var(--nlm-danger-soft);
  border-radius: 999px;
  padding: 1px 7px;
}

#tmos .fc-plan {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-inline-start: 4px solid var(--pq-bad);
  border-radius: 12px;
  padding: 12px 14px;
}

#tmos .fc-plan.is-done {
  border-inline-start-color: var(--pq-ok);
}

#tmos .fc-plan-t {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#tmos .fc-plan-t :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
  color: var(--nlm-signal);
}

#tmos .fc-plan ol {
  margin: 0 0 6px;
  padding-inline-start: 20px;
}

#tmos .fc-pick {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--nlm-fg-3);
}

/* Tab B: dwell buckets */
#tmos .dw-bar {
  display: flex;
  gap: 3px;
  height: 46px;
  margin-bottom: 12px;
}

#tmos .dw-b {
  --c: var(--pq-ok);

  flex: 0 0 var(--w);
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-family: var(--nlm-font-display);
  font-size: 14px;
  color: #fff;
  background: var(--c);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

#tmos .dw-b[aria-pressed="true"] {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--nlm-navy-900);
}

#tmos :is(.dw-b, .dw-leg li).dw-accruing {
  --c: #d97706;
}

#tmos :is(.dw-b, .dw-leg li).dw-reminder {
  --c: #c2410c;
}

#tmos :is(.dw-b, .dw-leg li).dw-old {
  --c: var(--pq-bad);
}

#tmos .dw-leg {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--nlm-fg-2);
}

#tmos .dw-leg li {
  --c: var(--pq-ok);

  display: flex;
  align-items: center;
  gap: 6px;
}

#tmos .dw-leg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}

#tmos .dw-leg b {
  color: var(--nlm-fg-1);
}

#tmos .dw-tot {
  margin-inline-start: auto;
}

#tmos .dw-p {
  margin-bottom: 12px;
}

#tmos .dw-p .dr-a {
  margin-top: 12px;
}

#tmos .sc tr.is-bad th {
  color: var(--nlm-danger);
}

/* Tab C: ask your yard */
#tmos .ask {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

#tmos .ask-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#tmos .ask-chips .qchip {
  text-align: start;
}

#tmos .ask-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line);
  border-radius: 16px;
  padding: 16px;
}

#tmos .ask-log p {
  margin: 0;
  max-width: 92%;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 14px;
  padding: 10px 14px;
}

#tmos .ask-log p > span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#tmos .ask-you {
  align-self: flex-end;
  color: #fff;
  background: var(--nlm-navy-900);
}

#tmos .ask-you > span {
  color: var(--nlm-navy-300);
}

#tmos .ask-ai {
  align-self: flex-start;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-signal);
}

#tmos .ask-ai > span {
  color: var(--nlm-signal-ink);
}

#tmos .ask-ai .node {
  width: 22px;
  height: 22px;
}

#tmos .ask-ai .node-core {
  width: 18px;
  height: 18px;
}

#tmos .ask-ai .node-core :is(svg, i[data-lucide]) {
  width: 11px;
  height: 11px;
}

#tmos .ask-ai .node-ring {
  display: none;
}

/* ---------- 05 gate to gate ---------- */
#tmos .jr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

#tmos .jr-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--nlm-navy-300);
}

#tmos .jr-box :is(svg, i[data-lucide]) {
  width: 20px;
  height: 20px;
  color: var(--tm-cyan);
}

#tmos .jr-box b {
  font-family: var(--nlm-font-mono);
  font-size: 15px;
  color: #fff;
}

#tmos .jr-told {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--nlm-navy-300);
  border: 1px dashed var(--tm-cyan);
  border-radius: 999px;
  padding: 5px 12px;
}

#tmos .jr-told :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
  color: var(--tm-cyan);
}

#tmos .jr-told b {
  color: #fff;
}

#tmos .jr-st {
  --p: 1;

  position: relative;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

/* The track, and the token's progress along it. */
#tmos .jr-st::before,
#tmos .jr-st::after {
  content: "";
  position: absolute;
  inset-block-start: 23px;
  inset-inline: 10%;
  height: 2px;
  background: rgb(255 255 255 / 14%);
}

#tmos .jr-st::after {
  background: var(--pq-ok);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
  transition: transform 0.6s var(--nlm-ease);
}

[dir="rtl"] #tmos .jr-st::after {
  transform-origin: 100% 50%;
}

#tmos .jr-s {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nlm-navy-300);
}

#tmos .jr-n {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--nlm-navy-300);
  background: var(--nlm-navy-900);
  border: 2px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

#tmos button.jr-n {
  font: inherit;
  cursor: pointer;
}

#tmos .jr-n :is(svg, i[data-lucide]) {
  width: 20px;
  height: 20px;
}

#tmos .jr-s b {
  font-family: var(--nlm-font-display);
  font-size: 15px;
  color: #fff;
}

#tmos .jr-s small {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  color: var(--nlm-navy-400);
  opacity: 0;
  transition: opacity 0.3s;
}

#tmos .jr-s.is-done .jr-n {
  color: #fff;
  background: var(--pq-ok);
  border-color: var(--pq-ok);
}

#tmos .jr-s.is-done small {
  opacity: 1;
}

#tmos .jr-s.is-on .jr-n {
  color: var(--nlm-navy-950);
  background: var(--tm-cyan);
  border-color: var(--tm-cyan);
}

#tmos button.jr-n[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--nlm-navy-950), 0 0 0 5px var(--tm-cyan);
}

/* Both step lists without JS; the script shows one at a time, full width. */
#tmos .jr-p {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}

#tmos .jr-panel {
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 16px;
  padding: clamp(16px, 2vw, 22px);
}

#tmos .jr-panel[hidden] {
  display: none;
}

#tmos .jr-panel .panel-t {
  color: var(--nlm-navy-300);
}

#tmos .jr-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tmos .jr-panel li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--nlm-navy-300);
}

#tmos .jr-panel li b {
  color: #fff;
}

#tmos .jr-panel li > span:last-child {
  grid-column: 2;
}

#tmos .jr-panel .step-n {
  grid-row: span 2;
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--tm-cyan);
}

#tmos .jr-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

#tmos .jr-turn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

#tmos .jr-turn :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
  color: var(--pq-ok);
}

/* ---------- 08 who it's for: the sample email ---------- */
#tmos .ex-mail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-inline-start: 3px solid var(--nlm-signal);
  border-radius: 10px;
  padding: 10px 12px;
}

#tmos .ex-mail :is(svg, i[data-lucide]) {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--nlm-signal);
}


/* ---------- responsive (TerminalOS objects) ---------- */
@media (width <= 1180px) {
  #tmos .ib-g {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }

  #tmos .drawer {
    grid-column: 1 / -1;
  }
}

@media (width <= 980px) {
  #tmos .fc-g,
  #tmos .ask,
  #tmos .jr-p,
  #tmos .out-g,
  #tmos .tabp {
    grid-template-columns: minmax(0, 1fr);
  }

  #tmos .con-g {
    grid-template-columns: minmax(0, 1fr);
  }

  #tmos .con-mid {
    height: 56px;
    flex-direction: column;
  }

  #tmos .con-beam {
    width: 2px;
    height: auto;
  }

  #tmos .con[data-mode="off"] .con-beam {
    width: 0;
    border-block-start: 0;
    border-inline-start: 2px dashed rgb(255 255 255 / 25%);
  }
}

@media (width <= 760px) {
  #tmos .ib-g {
    grid-template-columns: minmax(0, 1fr);
  }

  #tmos .inbox {
    min-height: 360px;
  }

  #tmos .tmh-g {
    grid-template-columns: minmax(0, 1fr);
  }

  #tmos .jr-st {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #tmos .jr-st::before,
  #tmos .jr-st::after {
    display: none;
  }

  #tmos .jr-s {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 12px;
    text-align: start;
    align-items: center;
  }

  #tmos .jr-n {
    grid-row: span 3;
    margin: 0;
  }
}

@media (width <= 640px) {
  #tmos .day-n {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tmos .steps,
  #tmos .feats,
  #tmos .tl {
    grid-template-columns: minmax(0, 1fr);
  }

  #tmos .day-n li:last-child b {
    font-size: 20px;
  }

  #tmos .dr-ba,
  #tmos .con-f {
    grid-template-columns: minmax(0, 1fr);
  }

  #tmos .dw-tot {
    margin-inline-start: 0;
  }

  #tmos .tmh-card {
    font-size: 8.5px;
  }
}