/*
  Steam-client-inspired dark theme: near-black navy chrome over a lighter navy content ground,
  pale blue accents, and the green action colour for the one button that starts work.
  Only a palette and the usual gradient/hairline treatment — no Valve artwork or branding.
*/
:root {
  --bg: #1b2838;            /* content ground */
  --bg-1: #16202d;          /* panels, side column */
  --bg-2: #2a3f5a;          /* inputs, raised controls */
  --bg-3: #33475b;          /* hover */
  --chrome: #171a21;        /* header and footer bars */
  --line: #000000;          /* Steam separates blocks with true black hairlines */
  --line-soft: #2a3f5a;
  --line-2: #3d5875;
  --text: #c7d5e0;
  --dim: #8f98a0;
  --dimmer: #6a7480;
  --accent: #66c0f4;
  --accent-deep: #1a3f5c;
  --accent-dim: #2a475e;
  --good: #a4d007;
  --good-deep: #5c7e10;
  --warn: #e0a233;
  --bad: #d94126;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --radius: 3px;
  --panel: linear-gradient(to bottom, #22354a 0%, #1a2838 100%);
  --raised: linear-gradient(to bottom, #37506e 0%, #2a3f5a 100%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 "Motiva Sans", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

/* A flex column instead of subtracting heights by hand. The old layout computed its height from
   a --act variable set on .activity, which is a sibling — so it never saw it and always used the
   230px fallback, leaving a gap once the panel could collapse. */
body { display: flex; flex-direction: column; }
.topbar, #loadBar, .activity { flex: none; }

button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
em { color: #fff; font-style: normal; font-weight: 600; }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 16px;
  background: var(--chrome);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 #ffffff0d inset;
}

/* The name reads as a wordmark while nothing is happening. When there is a status worth showing
   the status line expands under it, which shrinks the name and lifts it back to the position it
   used to sit in — the movement itself is the signal that work started. */
.brand { display: flex; align-items: center; gap: 11px; min-width: 220px; }
.brand h1 {
  font-size: 19px; font-weight: 700; letter-spacing: .2px; color: #fff;
  transition: font-size .22s ease;
}
.brand.busy h1 { font-size: 15px; }
.brand p {
  margin: 0; font-size: 11px; color: var(--dim);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .22s ease, opacity .22s ease, margin .22s ease;
}
.brand.busy p { max-height: 16px; opacity: 1; margin-top: 2px; }

/* Sits where the badges used to. A link, so it looks like one, but quiet enough not to compete
   with the depot name beside it. */
.sdb {
  font-size: 11px; color: var(--accent); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 3px 8px; white-space: nowrap;
}
.sdb:hover { color: #fff; border-color: var(--accent); background: var(--bg-3); }

.stats { display: flex; gap: 13px; flex: 1; overflow: hidden; }
.stats div { display: flex; flex-direction: column; line-height: 1.25; }
.stats b { font-size: 12px; font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.stats span { font-size: 9px; color: var(--dimmer); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }

/* A counter that is still filling in pulses, so a growing number reads as work in progress. */
@keyframes statBusy {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
.stats div.busy b { color: var(--good); animation: statBusy 1.2s ease-in-out infinite; }
.stats div.busy span { color: var(--good); }

@media (prefers-reduced-motion: reduce) {
  .stats div.busy b { animation: none; }
}

.filesearch { display: flex; flex-direction: column; gap: 2px; min-width: 300px; }
.filesearch input { width: 100%; }
.filesearch .hint { font-size: 10px; }

/* Global file-search results, shown in place of a depot page. */
.fhits { margin-top: 10px; }
.fhit {
  padding: 5px 10px 5px 24px; border-bottom: 1px solid #0d1620; cursor: pointer;
  border-left: 3px solid transparent;
}
.fhit:hover { background: #22354a; border-left-color: var(--accent); }
.fhit .fdepot { color: #fff; font-variant-numeric: tabular-nums; }
.fhit .fname { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fhit .fpath { font-family: var(--mono); font-size: 11px; color: var(--accent); word-break: break-all; }

.mirror { display: flex; align-items: center; gap: 7px; }
.mirror label { font-size: 10px; color: var(--dimmer); text-transform: uppercase; letter-spacing: .8px; }

input, select {
  background: #101822;
  border: 1px solid #000;
  border-radius: var(--radius);
  padding: 5px 8px;
  outline: none;
  box-shadow: 0 1px 0 #ffffff0a;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px #66c0f440; }

button {
  border-radius: var(--radius);
  border: none;
  background: var(--raised);
  color: var(--text);
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { background: linear-gradient(to bottom, #4a6a90 0%, #35506f 100%); color: #fff; }

button.primary {
  background: linear-gradient(to bottom, #a4d007 0%, #5c7e10 100%);
  color: #d2e885; font-weight: 400;
}
button.primary:hover { background: linear-gradient(to bottom, #b6e40b 0%, #6b9214 100%); color: #fff; }

button.ghost { background: #2a3f5a80; color: var(--dim); }
button.ghost:hover { background: var(--bg-3); color: #fff; }
button.icon { padding: 6px 9px; }
button:disabled { opacity: .4; cursor: default; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius);
  background: var(--raised);
  color: var(--dim); font-size: 11px; text-decoration: none; white-space: nowrap;
}
.chip:hover { color: #fff; }
.chip.available { background: linear-gradient(to bottom, #a4d007 0%, #5c7e10 100%); color: #1b2838; }
.chip.error { background: linear-gradient(to bottom, #d94126 0%, #8c2716 100%); color: #fff; }

.updbox {
  display: flex; align-items: center; gap: 12px;
  background: #101822; border: 1px solid #000; border-radius: var(--radius);
  padding: 9px 12px; margin-bottom: 16px;
}
.updbox > div { flex: 1; min-width: 0; }
.updbox b { display: block; font-size: 12px; margin-bottom: 2px; color: #fff; font-weight: 400; }

#loadBar { height: 2px; background: #000; }
#loadBar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(to right, var(--accent), #a4d007);
  transition: width .3s;
}

/* A phase with no percentage to report: a stripe that keeps moving says "working" where a bar
   frozen at zero says nothing. */
#loadBar.indeterminate i {
  width: 28%;
  transition: none;
  animation: loadSlide 1.15s ease-in-out infinite;
}
@keyframes loadSlide {
  0%   { margin-left: -28%; }
  100% { margin-left: 100%; }
}

/* Locked while the index loads: still readable, plainly not clickable. */
button:disabled, input:disabled, select:disabled {
  opacity: .45;
  cursor: default;
}
.chips.locked { opacity: .45; pointer-events: none; }

/* ---------- layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  flex: 1;
  min-height: 0;
}

.depots {
  display: flex; flex-direction: column;
  background: var(--bg-1);
  border-right: 1px solid #000;
  min-height: 0;
}

.toolbar { display: flex; gap: 6px; padding: 9px 10px 6px; }
.toolbar input { flex: 1; min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 8px; }

/* Sort belongs with the list, not with the search box it used to be mistaken for. */
.sortrow { display: flex; align-items: center; gap: 6px; padding: 0 10px 9px; }
.sortrow label {
  font-size: 10px; color: var(--dimmer);
  text-transform: uppercase; letter-spacing: .8px;
}
.sortrow select { flex: 1; min-width: 0; }
.chips button {
  font-size: 11px; padding: 3px 9px;
  background: #2a3f5a66; color: var(--dim);
}
.chips button.on {
  background: linear-gradient(to bottom, #66c0f4 0%, #2a75a8 100%);
  color: #0d1a26;
}

.listhead {
  padding: 6px 12px;
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--dimmer);
  background: var(--chrome);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.depot-list { flex: 1; overflow-y: auto; min-height: 0; }

.depot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #0d1620;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.depot:hover { background: #22354a; }
.depot.on {
  background: linear-gradient(to right, #2a475e 0%, #1f3548 100%);
  border-left-color: var(--accent);
}
.depot .id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.depot .id b { font-weight: 400; color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.depot .dname {
  color: #fff; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.depot .sz { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 12px; }
.depot .meta { grid-column: 1 / -1; display: flex; gap: 7px; font-size: 11px; color: var(--dimmer); }

.tag {
  font-size: 10px; padding: 0 5px; border-radius: 2px;
  background: #0d16204d; border: 1px solid currentColor; line-height: 15px;
}
.tag.reset { color: var(--warn); }
.tag.gap { color: var(--bad); }
.tag.ok { color: var(--good); }
.tag.mode { color: var(--accent); }
.tag.nokey { color: var(--dimmer); }
.tag.steam { color: var(--good); }
.depot .dname.fromsteam { color: var(--good); }

/* ---------- detail ---------- */

.detail { overflow-y: auto; min-height: 0; padding: 18px 22px 30px; }

.empty { max-width: 520px; margin: 60px auto; text-align: center; color: var(--dim); }
.empty h2 { font-size: 17px; margin-bottom: 8px; color: #fff; text-transform: uppercase; letter-spacing: .5px; }

.dhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.dhead h2 { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.dsub { color: var(--dim); font-size: 12px; margin-bottom: 16px; display: flex; gap: 14px; flex-wrap: wrap; }

.note {
  border: 1px solid #000; border-left: 3px solid var(--warn);
  background: #2b2413; border-radius: var(--radius);
  padding: 9px 12px; margin: 0 0 14px; font-size: 12px;
}
.note.bad { border-left-color: var(--bad); background: #2b1a15; }
.note.info { border-left-color: var(--accent); background: #16293a; }
.note b { display: block; margin-bottom: 3px; color: #fff; font-weight: 400; }
.note ul { margin: 4px 0 0; padding-left: 18px; }

.panel {
  border: 1px solid #000; border-radius: var(--radius);
  background: var(--panel); margin-bottom: 16px;
  box-shadow: 0 1px 0 #ffffff0d inset;
}
.panel > h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent);
  padding: 9px 12px; border-bottom: 1px solid #000;
  background: #ffffff08;
}
.panel .body { padding: 12px; }

.planrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.planrow label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.planrow input[type=number] { width: 90px; }
.planrow select { min-width: 190px; }
.planrow .plansize {
  flex: 1; min-width: 0; color: var(--accent);
  font-size: 12px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.summary { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.summary div { display: flex; flex-direction: column; }
.summary b { font-size: 16px; font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.summary span { font-size: 10px; color: var(--dimmer); text-transform: uppercase; letter-spacing: .8px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--dimmer); font-weight: 400;
  padding: 7px 10px; border-bottom: 1px solid #000;
  position: sticky; top: 0; background: #1a2838;
}
td { padding: 6px 10px; border-bottom: 1px solid #0d1620; font-size: 12px; }
tr:hover td { background: #ffffff08; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: 11px; color: var(--dim); }

.vtable { max-height: 420px; overflow-y: auto; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dimmer); margin-right: 6px; }
.dot.have { background: var(--good); box-shadow: 0 0 6px #a4d00780; }

/* ---------- version history ---------- */

.vhist { margin-top: 12px; border-top: 1px solid #000; }

.vbranch {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 9px 10px; background: var(--chrome);
  border-top: 1px solid #000; border-bottom: 1px solid #000;
  font-size: 11px; color: var(--dimmer);
}
.vbranch b {
  color: var(--accent); font-weight: 400;
  text-transform: uppercase; letter-spacing: .8px;
}

.vitem { border-bottom: 1px solid #0d1620; }
.vitem > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; cursor: pointer; list-style: none;
  font-size: 12px;
}
.vitem > summary::-webkit-details-marker { display: none; }
.vitem > summary::before {
  /* Drawn with borders rather than a glyph: no font dependency and nothing to mis-escape. */
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 5px solid var(--dimmer);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s;
}
.vitem[open] > summary::before { transform: rotate(90deg); transform-origin: 30% 50%; }
.vitem > summary:hover { background: #22354a; }
.vitem[open] > summary { background: #22354a; color: #fff; }

.vitem .vver { color: #fff; font-weight: 400; min-width: 46px; font-variant-numeric: tabular-nums; }
/* Wider than the old numeric-only format needed: a spelled month is longer in every locale. */
.vitem .vdate { color: var(--dim); font-variant-numeric: tabular-nums; min-width: 118px;
                white-space: nowrap; }
.vitem .vwhat { color: var(--accent); flex: 1; }
.vitem .vwhat.dim { color: var(--dimmer); }
.vitem .vwhat.bad { color: var(--bad); }
.vitem .vsize { color: var(--dim); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.vitem .vdelta { font-variant-numeric: tabular-nums; min-width: 78px; text-align: right; color: var(--dimmer); }
.vitem .vdelta.up { color: var(--good); }
.vitem .vdelta.down { color: var(--warn); }

/* Change badges, so new / changed / removed read at a glance in a long list. */
.chg {
  display: inline-block; min-width: 58px; text-align: center;
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  padding: 1px 6px; border-radius: 2px;
}
.chg.new { background: #2c4a12; color: #a4d007; }
.chg.changed { background: #1a3f5c; color: var(--accent); }
.chg.removed { background: #4a1f16; color: #ef7d63; }

td.delta.up { color: var(--good); }
td.delta.down { color: var(--warn); }
.vitem .vcrc { color: var(--dimmer); font-family: var(--mono); font-size: 11px; }

/* Quiet by design: a save link should not compete with the diff counts next to it. */
.vitem .vget {
  color: var(--dimmer); text-decoration: none;
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  padding: 1px 6px; border: 1px solid #2a3f5a; border-radius: 2px;
}
.vitem .vget:hover { color: var(--accent); border-color: var(--accent); }

.vbody { padding: 4px 10px 12px; background: #16202d; }
.vfilter { width: 100%; margin: 6px 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .vitem > summary::before { transition: none; }
  .activity { transition: none; }
}

/* ---------- activity ---------- */

.activity {
  height: 230px;
  transition: height .18s ease;
  display: flex; flex-direction: column;
  border-top: 1px solid #000;
  background: var(--bg-1);
  min-height: 0;
}
.activity.min { height: 34px; }

.acttabs {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; background: var(--chrome);
  border-bottom: 1px solid #000;
}
.acttabs button { background: transparent; color: var(--dim); font-size: 12px; }
.acttitle {
  color: var(--dim); font-size: 12px;
  text-transform: uppercase; letter-spacing: .8px; padding: 0 4px;
}
.acttabs .right { margin-left: auto; }
.acttabs b { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 400; }

.actbody { flex: 1; overflow-y: auto; min-height: 0; }
.activity.min .actbody { display: none; }
#actList { padding: 10px 12px; }

.job {
  border: 1px solid #000; border-radius: var(--radius);
  background: var(--panel); padding: 10px 12px; margin-bottom: 9px;
  box-shadow: 0 1px 0 #ffffff0d inset;
}
.jobhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.jobhead .title { color: #fff; }
.jobhead .spacer { flex: 1; }
.jobhead .st { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.st.running { color: var(--accent); }
.st.done { color: var(--good); }
.st.failed { color: var(--bad); }
.st.cancelled { color: var(--dim); }

.bar { height: 6px; border-radius: 2px; background: #0d1620; overflow: hidden; box-shadow: 0 1px 2px #00000080 inset; }
.bar i {
  display: block; height: 100%;
  background: linear-gradient(to bottom, #66c0f4 0%, #2a75a8 100%);
  transition: width .4s;
}
.bar.done i { background: linear-gradient(to bottom, #a4d007 0%, #5c7e10 100%); }
.bar.failed i { background: linear-gradient(to bottom, #d94126 0%, #8c2716 100%); }

.jobmeta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--dim); margin-top: 6px; font-variant-numeric: tabular-nums; }

.files { margin-top: 8px; display: grid; gap: 3px; }
.fline { display: grid; grid-template-columns: 1fr 120px 60px; gap: 8px; align-items: center; font-size: 11px; color: var(--dim); }
.fline .nm { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fline .bar { height: 4px; }

pre.log {
  margin: 8px 0 0; max-height: 190px; overflow: auto;
  background: #0d1620; border: 1px solid #000; border-radius: var(--radius);
  padding: 8px 10px; font-family: var(--mono); font-size: 11px; color: var(--dim);
  white-space: pre-wrap; word-break: break-word;
}

.muted { color: var(--dimmer); padding: 14px; text-align: center; font-size: 12px; }

/* ---------- dialog ---------- */

dialog {
  border: 1px solid #000; border-radius: var(--radius);
  background: var(--panel); color: var(--text);
  padding: 20px 22px; width: 520px; max-width: 92vw;
  box-shadow: 0 0 0 1px #ffffff0d inset, 0 10px 40px #000000a6;
}
dialog::backdrop { background: #0d1620cc; }
dialog h2 {
  font-size: 14px; margin-bottom: 16px; color: #fff;
  text-transform: uppercase; letter-spacing: .8px;
  border-bottom: 1px solid #000; padding-bottom: 10px;
}
dialog label { display: block; margin-bottom: 13px; font-size: 12px; color: var(--dim); }
dialog label input[type=text], dialog label input[type=number] { width: 100%; margin-top: 5px; color: var(--text); }
dialog label.row { display: flex; gap: 9px; align-items: flex-start; }
dialog label.row input { margin-top: 2px; }
.hint { display: block; font-size: 11px; color: var(--dimmer); }
.dlgrow { display: flex; gap: 8px; margin: 4px 0 16px; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0d1620; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #4a6a90, #2a3f5a); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #5c7fa8, #35506f); }

/* Sits at the end of the stat strip: archive-wide work, so it belongs with the archive-wide
   numbers rather than in a depot panel. */
.statbtn { font-size: 11px; padding: 5px 9px; white-space: nowrap; align-self: center; }

/* Free space on the drive downloads land on. Fill is what is used, so a nearly full bar reads the
   way a nearly full disk should. */
.diskbox { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 4px; }
.diskbox .diskhead {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--dim);
}
.diskbox .diskhead b { color: #fff; font-variant-numeric: tabular-nums; }
.diskbox .bar { height: 6px; }
.diskbox .bar i { width: 0; transition: width .3s ease; }
/* Below a couple of downloads' worth of room, the bar stops being decoration. */
.diskbox.low .bar i { background: linear-gradient(to bottom, #e8a33d 0%, #a86c1a 100%); }
.diskbox.low .diskhead b { color: var(--warn); }
.diskbox.full .bar i { background: linear-gradient(to bottom, #d94126 0%, #8c2716 100%); }
.diskbox.full .diskhead b { color: var(--bad, #d94126); }

.rangeprog { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.rangeprog .bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rangeprog .bar i { display: block; height: 100%; width: 0; background: var(--accent);
                    transition: width .25s ease; }

/* One heading per depot, with that depot's matching paths listed beneath it. */
.fgroup { margin-bottom: 6px; }
.fghead {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 10px; cursor: pointer;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
.fghead:hover { background: #22354a; }
.fghead .fdepot { font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.fghead .fname { flex: 1; min-width: 0; color: var(--dim); font-size: 12px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fghead .fcount { color: var(--dimmer); font-size: 11px; white-space: nowrap; }

/* The reindex button belongs inside its warning, not floating beside it. */
.note button { margin-top: 8px; }

/* ---------- depot packs ---------- */

.modes { display: flex; gap: 1px; padding: 8px 10px 0; }
.modes button {
  flex: 1; padding: 7px 10px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  background: var(--bg-2); color: var(--dim); border: 1px solid var(--line);
  border-bottom: none; cursor: pointer;
}
.modes button:hover { color: #fff; }
.modes button.on { background: var(--bg-3); color: #fff; }

.appcard {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 9px 12px; border-bottom: 1px solid #0d1620;
  cursor: pointer; border-left: 3px solid transparent;
}
.appcard:hover { background: #22354a; border-left-color: var(--accent); }
.appcard.on { background: var(--bg-3); border-left-color: var(--accent); }
.appcard b { font-weight: 400; color: #fff; }
.appcard .aid { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.appcard .abuilds { grid-column: 1 / -1; color: var(--dimmer); font-size: 11px; }

/* A build is a list of depot pins with a single button that queues them all. */
.build { border: 1px solid var(--line); background: var(--bg-2); margin-top: 12px; }
.buildhead {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg-3);
}
.buildhead b { font-weight: 400; color: #fff; }
.buildhead .bdate { color: var(--dim); font-size: 12px; }
.buildhead .bsum { color: var(--dimmer); font-size: 11px; margin-left: auto; }
.buildnotes { padding: 9px 12px; color: var(--dim); font-size: 12px; border-bottom: 1px solid var(--line); }

.pin { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 12px; }
.pin + .pin { border-top: 1px solid #0d1620; }
.pin input { margin: 0; }
.pin .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin .pver { color: var(--dim); font-variant-numeric: tabular-nums; }
.pin .prole { color: var(--dimmer); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.pin.gone .pname { color: var(--bad); }
.buildfoot { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }

/* One depot inside an install card. */
.istep {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px; font-size: 11px; border-top: 1px solid #0d1620;
}
.istep .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sharing state, in the header where it cannot be missed. */
.seed {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; font-size: 11px; white-space: nowrap;
  background: var(--bg-2); color: var(--dim);
  border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer;
}
/* The label carries engine startup stages now. The longest of them — "checking 116,339 file(s)
   before sharing them" — fits, and anything beyond it is clipped rather than allowed to push the
   rest of the header around. The full text is in the tooltip either way. */
.seed span { overflow: hidden; text-overflow: ellipsis; max-width: 44ch; }
.seed:hover { color: #fff; border-color: var(--accent); }
.seed i { width: 7px; height: 7px; border-radius: 50%; background: var(--dimmer); flex: none; }
.seed.on { color: #fff; }
.seed.on i { background: var(--good); box-shadow: 0 0 6px var(--good); }
.seed.warn i { background: var(--warn); }

/* Sits with the version it applies to, quiet enough not to read as a primary control. */
.fullchain {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--dim); white-space: nowrap; cursor: pointer;
}
.fullchain:hover { color: #fff; }
.fullchain input { margin: 0; }