/* Routines (routines-view.mjs): the Loadout's Program tab and the program's marks on the fight board.
   Your program is you (teal); an exception (a part with no available handler, yours to play) is --exception, never
   red (red is a threat); RAM is amber, like every other budget (memory, slots). */

/* ---------- the Program tab ---------- */
.rt-editor { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.rt-main, .rt-side { display: grid; gap: var(--s5); min-width: 0; }

/* Below level 5: one locked card. */
.rt-locked { max-width: 420px; gap: var(--s4); cursor: help; }
.rt-locked h1 { display: flex; align-items: center; gap: var(--s4); color: var(--gray); font-size: 16px; }
.rt-locked h1 .glyph { width: 16px; height: 16px; flex: none; }
.rt-lv { display: flex; align-items: center; gap: 3px; }
.rt-lv i { width: 18px; height: 8px; border: 1px solid var(--line-strong); border-radius: 1px; }
.rt-lv i.on { background: var(--you); border-color: var(--you); }
.rt-lv b { margin-left: var(--s4); font: 600 11px var(--mono); color: var(--muted); }
.ltabs [role='tab'].ltab-locked { color: var(--gray); opacity: 0.6; cursor: help; }

/* The viruses you've met: pick one, its routine opens beside. */
.rt-viruses { gap: var(--s4); padding-left: 10px; padding-right: 10px; }
.rt-vlist, .rt-vlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rt-vlist { gap: var(--s4); }
.rt-vg .rt-label { padding: 0 var(--s3) var(--s2); }
.rt-v { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: 'i n r' 'i s s'; column-gap: var(--s4); row-gap: 1px; align-items: center; width: 100%; padding: var(--s3) var(--s4); border: 1px solid transparent; border-radius: var(--r-btn); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.rt-v:hover { border-color: var(--line-strong); }
.rt-v.on { border-color: var(--amber); background: var(--amber-wash); }
.rt-v-ico { grid-area: i; display: flex; color: var(--amber); }
.rt-v-ico .glyph { width: 14px; height: 14px; }
.rt-v-name { grid-area: n; font: 600 12px var(--sans); color: var(--bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-v-state { grid-area: s; font: 500 10px var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-v.set .rt-v-state { color: var(--you); }
.rt-v-ram { grid-area: r; font: 600 10px var(--mono); color: var(--amber-soft); }
.rt-v.dim .rt-v-ico, .rt-v.dim .rt-v-name, .rt-v.dim .rt-v-ram { color: var(--gray); }

/* The ready-made routines: a row of pills, the current one lit. */
.rt-presets { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.rt-pre { display: inline-flex; align-items: center; gap: 7px; height: var(--h-btn-sm); padding: 0 14px 0 8px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--inset); color: var(--text); font: 500 11px var(--mono); cursor: pointer; max-width: 100%; }
.rt-pre b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rt-pre .glyph { width: 12px; height: 12px; flex: none; color: var(--amber); }
.rt-pre:hover { border-color: var(--amber); }
.rt-pre.on { border-color: var(--you); color: var(--you); background: rgba(127, 209, 199, 0.08); }
.rt-pre.on .glyph { color: var(--you); }
.rt-pre-own { font: 600 10px var(--mono); color: var(--you); letter-spacing: 0.5px; cursor: help; }
.rt-undo, .rt-confirm { height: var(--h-btn-sm); }
/* Four Loadout tabs: on a phone they wrap rather than push the page sideways. */
.ltabs { flex-wrap: wrap; }
.rt-label { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); margin: 0; }
.rt-stack .thead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5); }
.rt-power { grid-template-columns: auto; }
.rt-power .btn { min-width: 112px; }

/* RAM: the number in use over the budget, large, and one continuous meter under no cell count. */
.rt-ram { display: flex; align-items: center; gap: var(--s4); cursor: help; }
.rt-ramnum { font: 700 22px var(--mono); line-height: 1; color: var(--amber); white-space: nowrap; }
.rt-ramnum small { font-size: 14px; font-weight: 600; color: var(--amber-soft); }
.rt-ramnum.over { color: var(--hot); }
.rt-meter { position: relative; flex: 1 1 auto; max-width: 260px; height: 8px; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.rt-meter i { position: absolute; inset: 0 auto 0 0; background: var(--amber); box-shadow: 0 0 6px rgba(241, 185, 47, 0.35); }
.rt-meter.over i { background: var(--hot); }
.rt-rc { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border: 1px solid var(--amber); border-radius: 999px; background: var(--amber); color: var(--bg); font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.rt-rc.over { border-color: var(--hot); background: var(--hot); color: var(--bg); }

/* The stack: one handler a row, WHEN · DO · TARGET, checked top to bottom. */
.rt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.rt-h { display: grid; grid-template-columns: 14px 18px auto minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.8fr) 24px; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel-2); }
.rt-h.over { opacity: 0.5; border-style: dashed; }
.rt-h.shut .rt-slot:first-of-type .rt-chip, .rt-h.shut { border-color: rgba(125, 115, 98, 0.5); }
.rt-h.rt-over, .rt-slot.rt-over { border-color: var(--you); box-shadow: 0 0 0 1px var(--you) inset; }
.rt-grip { color: var(--dim); cursor: grab; font: 600 11px/1 var(--mono); letter-spacing: -2px; user-select: none; }
.rt-grip:active { cursor: grabbing; }
.rt-n { font: 600 11px var(--mono); color: var(--muted); text-align: center; }
.rt-slot { position: relative; display: grid; gap: 1px; min-width: 0; border: 1px dashed transparent; border-radius: var(--r-btn); padding: 1px; }
.rt-kind { font: 600 8px/1 var(--mono); letter-spacing: 1px; color: var(--dim); }
.rt-slot.off { opacity: 0.6; }
.rt-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: 12px var(--mono); }
.rt-sel:focus-visible { opacity: 1; background: var(--panel); color: var(--text); border: 1px solid var(--amber); }
.rt-x { width: 24px; height: 24px; padding: 0; color: var(--dim); font-size: 16px; line-height: 1; }
.rt-x:hover { color: var(--hot); }
.rt-rot { grid-template-columns: 14px 18px auto minmax(0, 1fr); background: transparent; border-style: dashed; cursor: help; }
.rt-rot .rt-n { color: var(--you); }
.rt-add { grid-template-columns: auto 1fr; background: transparent; border-style: dashed; }
.rt-drop-hint { justify-self: end; color: var(--dim); opacity: 0; transition: opacity 0.15s; }
body[class*='rt-drag-'] .rt-add .rt-drop-hint { opacity: 1; }
body[class*='rt-drag-'] .rt-slot { border-color: var(--line-strong); }
body.rt-drag-when .rt-slot:not(.rt-s-when), body.rt-drag-do .rt-slot:not(.rt-s-do), body.rt-drag-target .rt-slot:not(.rt-s-target) { border-color: transparent; }

/* A chip: an icon, a short label, its RAM. */
.rt-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: var(--h-chip); padding: 0 10px 0 6px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--inset); font: 500 11px/1 var(--mono); color: var(--text); white-space: nowrap; }
.rt-chip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rt-chip .glyph { width: 12px; height: 12px; flex: none; }
.rt-chip kbd { font: 600 9px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 2px; padding: 0 3px; }
.rt-chip[draggable='true'] { cursor: grab; }
.rt-chip[draggable='true']:hover { border-color: var(--amber); }
.rt-chip.rt-dragging { opacity: 0.4; }
.rt-chip.rt-when { border-color: rgba(241, 185, 47, 0.45); }
.rt-chip.rt-do { border-color: rgba(127, 209, 199, 0.5); color: var(--you); }
.rt-chip.rt-tgt { border-color: rgba(134, 182, 198, 0.5); color: var(--steel); }
.rt-chip.rt-tgt.none { color: var(--dim); border-style: dashed; }
.rt-chip.locked { color: var(--gray); border-style: dashed; border-color: rgba(125, 115, 98, 0.45); cursor: help; }
.rt-chip.locked .rt-rc { border-color: var(--gray); background: none; color: var(--gray); } /* off: an outline, not a fill */
.rt-chip.rot { border-style: dashed; color: var(--you); cursor: help; }
.rt-long { font: 600 9px var(--mono); color: var(--amber); }
.rt-tier { font: 600 8px var(--mono); letter-spacing: 0.5px; color: var(--dim); text-transform: uppercase; }
.rt-slot .rt-chip { width: 100%; }

/* The palette. */
.rt-palette { gap: var(--s5); }
.rt-group { display: grid; gap: var(--s3); }
.rt-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.rt-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-height: 420px; overflow-y: auto; }
.rt-prow { display: grid; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.rt-pname { display: flex; align-items: center; gap: 5px; font: 600 12px var(--sans); color: var(--bright); cursor: help; }
.rt-pname .glyph { width: 12px; height: 12px; color: var(--amber); }
.rt-pchips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rt-empty { color: var(--gray); font: 12px var(--mono); display: flex; gap: 6px; align-items: center; cursor: help; }

/* The rails. */
.rt-rails { gap: var(--s4); }
.rt-rail { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.rt-rail .rt-label { cursor: help; }
.rt-seg { display: flex; flex-wrap: wrap; gap: 3px; }
.rt-seg .btn { min-width: 44px; justify-content: center; }
.rt-seg .btn[aria-pressed='true'] { background: var(--amber-wash); border-color: var(--amber); color: var(--amber); }
.rt-rail .settings-grid { grid-template-columns: auto; }

@media (max-width: 1200px) {
  .rt-editor { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); }
  .rt-side { grid-column: 2; }
}
@media (max-width: 900px) {
  .rt-editor { grid-template-columns: minmax(0, 1fr); }
  .rt-side { grid-column: auto; }
  .rt-vlist ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 600px) {
  .rt-h { grid-template-columns: 14px 16px auto minmax(0, 1fr) minmax(0, 1fr) 24px; grid-template-areas: 'g n c w w x' 'g n . d t .'; row-gap: var(--s2); }
  .rt-h > .rt-grip { grid-area: g; } .rt-h > .rt-n { grid-area: n; } .rt-h > .rt-s-when { grid-area: w; } .rt-h > .rt-s-do { grid-area: d; } .rt-h > .rt-s-target { grid-area: t; } .rt-h > .rt-cost { grid-area: c; } .rt-h > .rt-x { grid-area: x; }
  .rt-rot, .rt-add { grid-template-areas: none; }
  .rt-rot > *, .rt-add > * { grid-area: auto !important; }
  .rt-add { grid-template-columns: auto 1fr; }
  .rt-rot { grid-template-columns: 14px 16px auto minmax(0, 1fr); }
  .rt-rail { grid-template-columns: 1fr; }
}

/* ---------- the board ---------- */
.intent.mine.prog.ghost { border-style: dashed; opacity: 0.9; background: rgba(127, 209, 199, 0.06); }
.intent.prog.exc, .intent.prog.exc-mark, .rt-exc-tag { border: 1px solid var(--exception); color: var(--exception); background: var(--exception-soft); cursor: help; }
.rt-exc-tag { white-space: normal; max-width: 100%; height: auto; line-height: 1.3; }
.rt-exc-tag strong { font-weight: 700; }
.rt-exc-tag span { font-weight: 500; }
/* In a Now cell only the word, small enough to fit the narrowest board; the tooltip and the part's tag say the rest. */
.intent.prog.exc, .intent.prog.exc-mark { display: flex; align-items: center; justify-content: center; height: var(--h-chip); overflow: hidden; padding: 0 4px; min-width: 0; max-width: 100%; }
.intent.prog.exc strong, .intent.prog.exc-mark strong { display: block; font: 700 9px/1 var(--mono); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.intent.prog.ghost-on { border: 1px dashed rgba(127, 209, 199, 0.6); color: var(--you); opacity: 0.85; background: transparent; font-size: 11px; }
.bpart.m-exc { box-shadow: inset 3px 0 0 var(--exception); }
.bpart.m-exc .part-name { color: var(--exception); }
.aim.you.prog { outline: 1px dashed var(--you); outline-offset: 1px; opacity: 0.85; }
.cx-handler { justify-self: start; margin-top: var(--s2); }
@media (max-width: 600px) { .rt-exc-tag { letter-spacing: 0; padding: 1px 3px; } .intent.prog.exc strong, .intent.prog.exc-mark strong { font-size: 8px; letter-spacing: 0; } .intent.prog.exc, .intent.prog.exc-mark { padding: 0 2px; } }

/* Break ◆ first (routines-view.mjs armorToggle): a small switch beside the RAM meter; the ◆ in steel, what protects a part. */
.rt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s5); }
.rt-top .rt-ram { flex: 1 1 220px; min-width: 0; }
.rt-armor { display: inline-flex; align-items: center; gap: 7px; height: var(--h-btn-sm); padding: 0 14px 0 8px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--inset); color: var(--muted); font: 500 11px var(--mono); cursor: pointer; white-space: nowrap; }
.rt-armor:hover { border-color: var(--steel); }
.rt-armor b { font-weight: 500; }
.rt-dia { color: var(--steel); font-weight: 700; }
.rt-sw { position: relative; flex: none; width: 22px; height: 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); }
.rt-sw i { position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--gray); transition: left 0.15s, background 0.15s; }
.rt-armor.on { border-color: var(--steel); color: var(--text); }
.rt-armor.on .rt-sw { border-color: var(--steel); background: rgba(134, 182, 198, 0.15); }
.rt-armor.on .rt-sw i { left: 11px; background: var(--steel); box-shadow: 0 0 4px var(--steel-glow); }
.rt-armor:not(.on) .rt-dia { color: var(--gray); }
.rt-rc.off { border-color: var(--gray); background: none; color: var(--gray); }

/* R2: where a routine's RAM comes from (level, Codex mastery, gear), as small tags after the meter; none dims. */
.rt-srcs { display: inline-flex; gap: var(--s3); flex: none; }
.rt-src { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font: 600 11px var(--mono); }
.rt-src .glyph { width: 12px; height: 12px; }
.rt-src.none { opacity: 0.4; }
/* The benchmark: its button, then win rate, cycles a win takes and Signal lost; dimmed once the routine changes. */
.rt-bench { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.rt-bs { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 600 12px var(--mono); cursor: help; }
.rt-bs b { color: var(--text); font-weight: 700; }
.rt-bs .glyph { width: 13px; height: 13px; }
.rt-bs.lost b { color: var(--hot); }
.rt-bs.asked, .rt-bs.asked b { color: var(--exception); }
.rt-bench.stale .rt-bs { opacity: 0.45; }