@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --bg:      #14171c;
  --surface: #1b1f26;
  --raised:  #222831;
  --line:    #2c333d;
  --text:    #e6e9ee;
  --dim:     #8892a0;
  --faint:   #5c6672;
  --signal:  #3f9b5c;   /* signal present */
  --alert:   #d64545;
  --sans:    'IBM Plex Sans', system-ui, sans-serif;
  --cond:    'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
input[type=checkbox] { accent-color: var(--signal); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

h1 { font-family: var(--cond); font-size: 1.6rem; font-weight: 700; letter-spacing: .01em; margin: 0 0 .35rem; }
h2 { font-family: var(--cond); font-weight: 700; }
.lede { color: var(--dim); margin: 0 0 1.25rem; max-width: 46ch; }
.pad { padding: 1.25rem 1rem; }
.mono { font-family: var(--mono); font-size: .82rem; }
.qty { color: var(--dim); font-family: var(--mono); font-size: .8rem; margin-left: .35rem; }
.err { color: var(--alert); margin-top: .75rem; }

/* ---------------------------------------------------------- header */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1rem;
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: baseline; gap: .55rem; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.brand .sub { white-space: nowrap; }
.mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 10px rgba(63,155,92,.7);
  align-self: center; flex: none;
}
.wordmark { font-family: var(--cond); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sub { font-family: var(--mono); font-size: .74rem; color: var(--faint); text-transform: uppercase; letter-spacing: .14em; }
.whoami { display: flex; align-items: center; gap: .75rem; margin: 0; flex: none; }
.whoami .linky { white-space: nowrap; }
.chip {
  font-family: var(--mono); font-size: .74rem; color: var(--text);
  background: var(--raised); border: 1px solid var(--line);
  padding: .15rem .5rem; border-radius: 3px;
}
.linky { background: none; border: 0; color: var(--dim); font: inherit; font-size: .85rem; cursor: pointer; padding: .25rem; }
.linky:hover { color: var(--text); }

/* ---------------------------------------------------------- tabs */
.tabs {
  display: flex; border-bottom: 1px solid var(--line);
  background: var(--surface); position: sticky; top: 53px; z-index: 25;
}
.tabs a {
  flex: 1; text-align: center; padding: .8rem .4rem;
  font-family: var(--cond); font-weight: 600; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tabs a.on { color: var(--text); border-bottom-color: var(--signal); }

/* ---------------------------------------------------------- gate */
.gate { padding: 3rem 1.25rem; max-width: 30rem; margin: 0 auto; }
.gateform { display: flex; flex-direction: column; gap: .6rem; }
input[type=password], input[type=text], input:not([type]) {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: .8rem .75rem; border-radius: 4px; font: inherit; width: 100%;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px;
}
.btn {
  background: var(--raised); border: 1px solid var(--line); color: var(--text);
  font-family: var(--cond); font-weight: 600; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .07em;
  padding: .85rem 1.1rem; border-radius: 4px; cursor: pointer;
}
.btn.primary { background: var(--signal); border-color: var(--signal); color: #0d1410; }
.btn.wide { width: 100%; }
.whogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; }
.whogrid form { margin: 0; }
.whobtn {
  width: 100%; min-height: 4rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font-family: var(--cond); font-weight: 600; font-size: 1.1rem;
  border-radius: 4px; cursor: pointer;
}
.whobtn:hover { border-color: var(--signal); }

/* ---------------------------------------------------------- session status */
.statusbar { padding: .8rem 1rem .5rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.statusline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kind {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  padding: .18rem .5rem; border-radius: 3px; background: var(--raised); color: var(--dim);
}
.kind.loadout { background: rgba(214,69,69,.14); color: #e88; }
.venue { font-family: var(--cond); font-weight: 600; }
.count { margin-left: auto; font-family: var(--mono); font-size: .9rem; color: var(--dim); }
.count b { color: var(--text); }
.meter { height: 3px; background: var(--line); border-radius: 2px; margin-top: .55rem; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--signal); transition: width .18s ease; }
.statusbar.offline .meter i { background: var(--alert); }
.statusbar.offline::after {
  content: attr(data-msg); display: block; margin-top: .4rem;
  font-size: .8rem; color: var(--alert);
}

.filters { display: flex; gap: .5rem; padding: .7rem 1rem; }
.pill {
  background: none; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .35rem .7rem; border-radius: 100px; cursor: pointer;
}
.pill.on { border-color: var(--signal); color: var(--text); }

.startform { display: flex; flex-direction: column; gap: .6rem; max-width: 26rem; }
.startrow { display: flex; gap: .6rem; }
.startrow .btn { flex: 1; }
.rule { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.misslist { list-style: none; padding: 0; margin: 0; }
.misslist li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.misslist b { font-family: var(--mono); color: var(--alert); }

/* ---------------------------------------------------------- scribble strips */
.caseband {
  margin: 1.5rem 0 0; padding: .5rem 1rem;
  background: var(--c, #5f6b7a);
  color: #fff;
  font-size: .88rem; text-transform: uppercase; letter-spacing: .12em;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 96px; z-index: 10;
}
.bandn { font-family: var(--mono); font-size: .78rem; opacity: .8; letter-spacing: 0; }

/* ---------------------------------------------------------- checklist rows */
.row {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 1rem; min-height: 58px;
  border-bottom: 1px solid var(--line);
}
#checklist.only-open .row.checked { display: none; }
.tick {
  flex: none; width: 30px; height: 30px; border-radius: 4px;
  border: 2px solid var(--faint); background: none; cursor: pointer;
  position: relative;
}
.tick::after {
  content: ''; position: absolute; inset: 0;
  background: no-repeat center/60% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1410' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .12s;
}
.row.checked .tick { background: var(--signal); border-color: var(--signal); }
.row.checked .tick::after { opacity: 1; }
.row.checked .rowname { color: var(--dim); }
.row.failed { background: rgba(214,69,69,.12); }
.rowbody { min-width: 0; flex: 1; }
.rowname { font-weight: 500; }
.rowmeta { display: flex; gap: .55rem; font-size: .8rem; color: var(--faint); }
.own { color: var(--dim); }
.by { font-family: var(--mono); font-size: .72rem; color: var(--faint); flex: none; }

/* ---------------------------------------------------------- rack elevation */
.elevation {
  margin: 1rem; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  display: flex; flex-direction: column; gap: 3px;
}
.u {
  display: flex; align-items: center; gap: .75rem;
  padding: 0 .7rem; border-radius: 2px;
  min-height: calc(var(--span, 1) * 30px);
}
.u.filled { background: var(--raised); border-left: 3px solid var(--signal); }
.u.empty  { background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.03) 5px, rgba(255,255,255,.03) 10px); border-left: 3px solid var(--line); }
.ulabel { font-family: var(--mono); font-size: .7rem; color: var(--faint); min-width: 2.4rem; }
.uname  { font-family: var(--cond); font-weight: 600; font-size: .9rem; }
.u.empty .uname { color: var(--faint); font-weight: 400; font-style: italic; }

.casenote { margin: .9rem 1rem; padding-left: .8rem; border-left: 2px solid var(--line); color: var(--dim); font-size: .88rem; }
.packlist { list-style: none; margin: 0; padding: 0; }
.packlist li { padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.pname { font-weight: 500; }
.pnote { display: block; font-size: .82rem; color: var(--faint); margin-top: .15rem; }

/* ---------------------------------------------------------- value */
.bigfig { margin: 1rem 0 1.25rem; }
.figv { display: block; font-family: var(--cond); font-weight: 700; font-size: 2.6rem; line-height: 1; }
.figl { font-family: var(--mono); font-size: .74rem; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
.warn {
  border: 1px solid rgba(214,69,69,.4); background: rgba(214,69,69,.08);
  border-radius: 4px; padding: .8rem .9rem; font-size: .88rem; color: #eab;
}
.warn b { color: #f0c2c2; }
.ledger { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ledger th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--faint);
  padding: .5rem 1rem; border-bottom: 1px solid var(--line);
}
.ledger td { padding: .55rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.ledger th.num { text-align: right; }
.ledger tr.grp td {
  background: var(--c, #5f6b7a); color: #fff;
  font-family: var(--cond); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .12em; padding: .35rem 1rem;
}
.ledger tr.personal { color: var(--dim); }
.ledger .gap { color: var(--faint); }
.ledger td.mono { max-width: 7rem; overflow-wrap: anywhere; }
.ledger .own { font-family: var(--mono); font-size: .7rem; color: var(--faint); margin-left: .4rem; }

/* ---------------------------------------------------------- upkeep */
.stock { list-style: none; margin: 0; padding: 0; }
.stock li { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.sname { flex: 1; }
.sbar { width: 5rem; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; flex: none; }
.sbar i { display: block; height: 100%; background: var(--signal); }
.stock li.low .sbar i { background: var(--alert); }
.stock li.low .scount { color: var(--alert); }
.scount { color: var(--dim); flex: none; }
.stock li.empty { color: var(--faint); }
.loglist { list-style: none; margin: 0; padding: 0; }
.loglist li { padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.lkind {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .1rem .4rem; border-radius: 3px; background: var(--raised); color: var(--dim); margin-right: .5rem;
}
.lkind.fault { background: rgba(214,69,69,.16); color: #e88; }
.lnote { display: block; color: var(--dim); font-size: .88rem; margin-top: .2rem; }
.lwho { color: var(--faint); }

@media (min-width: 700px) {
  main { max-width: 54rem; margin: 0 auto; }
  .caseband { top: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------- print */
@media print {
  :root { --bg: #fff; --surface: #fff; --raised: #f4f4f4; --line: #ccc; --text: #111; --dim: #555; --faint: #777; }
  body { background: #fff; color: #111; }
  .top, .tabs, .filters, .tick, .btn, .whoami { display: none !important; }
  .caseband { position: static; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .row, .packlist li, .ledger td { break-inside: avoid; }
}

/* ---------------------------------------------------------- admin */
.adminbar { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.adminbar .btn { text-decoration: none; display: inline-flex; align-items: center; }
.tip {
  border-left: 3px solid var(--signal); background: rgba(63,155,92,.08);
  padding: .7rem .9rem; font-size: .9rem; color: var(--dim); border-radius: 0 4px 4px 0;
}
.tip b { color: var(--text); }

/* serial sweep */
/* On a phone the field gets the full width — you are typing a 12-character
   serial one-handed while holding a mic in the other. */
.serrow {
  display: grid; gap: .45rem .8rem; padding: .8rem 1rem;
  grid-template-columns: 1fr auto;
  grid-template-areas: "who state" "input input";
  border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) {
  .serrow { grid-template-columns: 1fr 14rem 4.5rem; grid-template-areas: "who input state"; align-items: center; }
}
.serwho { grid-area: who; min-width: 0; }
.sername { display: block; font-weight: 500; }
.sergear { font-size: .8rem; color: var(--faint); }
.serinput { grid-area: input; display: flex; align-items: center; gap: .5rem; }
.serfield {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 1rem;
  padding: .75rem .65rem; letter-spacing: .05em;
}
.scanbtn {
  flex: none; background: var(--raised); border: 1px solid var(--line); color: var(--dim);
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .75rem .7rem; border-radius: 4px; cursor: pointer;
}
.serstate {
  grid-area: state; font-family: var(--mono); font-size: .72rem;
  color: var(--faint); text-align: right; align-self: center;
}
.serrow.saved  .serfield { border-color: var(--signal); }
.serrow.saved  .serstate { color: var(--signal); }
.serrow.failed .serfield { border-color: var(--alert); }
.serrow.failed .serstate { color: var(--alert); text-align: left; grid-area: state; }
@media (max-width: 39.99rem) {
  .serrow.failed .serstate { grid-area: who / who / state / state; text-align: left; grid-row: 3; grid-column: 1 / -1; }
}

/* scanner overlay */
.scanner {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.scanner video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.scanner .reticle {
  position: relative; width: 72vw; max-width: 20rem; aspect-ratio: 3/2;
  border: 2px solid var(--signal); border-radius: 6px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55);
}
.scanner .scanhint { position: relative; color: #fff; margin-top: 1.2rem; text-align: center; padding: 0 1.5rem; }
.scanner .scancancel { position: relative; margin-top: 1rem; }

/* catalogue list */
.itemrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; min-height: 56px;
}
.itemrow:hover { background: var(--surface); }
.irname { font-weight: 500; display: flex; align-items: center; gap: .55rem; min-width: 0; }
.irmeta { display: flex; gap: .8rem; flex: none; color: var(--dim); }
.irmeta .gap { color: var(--faint); font-style: italic; }
.swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; }

/* edit form */
.editform { padding: 0 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }
.editform label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; color: var(--dim); }
.editform label.check { flex-direction: row; align-items: center; gap: .55rem; color: var(--text); flex-wrap: wrap; }
.editform label.check input { width: 20px; height: 20px; flex: none; }
.editform .hint { font-size: .78rem; color: var(--faint); font-weight: 400; flex-basis: 100%; }
.editform input, .editform select, .editform textarea {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: .7rem .65rem; border-radius: 4px; font: inherit; width: 100%;
}
.editform textarea { font-family: inherit; resize: vertical; }
.editform fieldset { border: 1px solid var(--line); border-radius: 4px; padding: .9rem; margin: 0; }
.editform legend {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--faint); padding: 0 .4rem;
}
.two, .three { display: grid; gap: .8rem; }
@media (min-width: 30rem) {
  .two { grid-template-columns: 1fr 1fr; }
  .three { grid-template-columns: repeat(3, 1fr); }
}
.logform { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.logform select { flex: 0 0 7rem; }
.logform input { flex: 1 1 10rem; }
.logform select, .logform input {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: .7rem .6rem; border-radius: 4px; font: inherit;
}
.loglist.bare li { padding: .55rem 0; }
.danger { margin-top: 2rem; }
.linky.danger { color: var(--alert); }
.btn.destructive { background: var(--alert); border-color: var(--alert); color: #fff; }
.losslist { margin: .5rem 0; padding-left: 1.1rem; }
.losslist li { margin: .15rem 0; }
.losslist b { color: #f0c2c2; }
.danger .hint, .deleteline .hint { display: block; font-size: .8rem; color: var(--faint); margin-top: .2rem; }
.deleteline { margin-top: 1.25rem; }
.deleteline a { display: inline-block; }
.warn a { color: #f0c2c2; }
.tip a { color: var(--signal); }

/* ---------------------------------------------------------- case admin */
.caserow { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.caserow .itemrow { flex: 1; border-bottom: 0; }
.caserm {
  display: flex; align-items: center; padding: 0 1rem; flex: none;
  color: var(--faint); text-decoration: none;
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  border-left: 1px solid var(--line);
}
.caserm:hover { color: var(--alert); background: rgba(214,69,69,.08); }
.notepreview {
  display: block; margin: .5rem 0; padding-left: .7rem;
  border-left: 2px solid rgba(214,69,69,.4); color: var(--dim); font-size: .85rem;
}

/* refile */
.bandall {
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .2rem .5rem; border-radius: 3px; cursor: pointer;
}
.refrow {
  display: flex; align-items: center; gap: .85rem;
  padding: .65rem 1rem; min-height: 52px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.refrow input { width: 22px; height: 22px; flex: none; }
.refname { min-width: 0; }
.refbar {
  position: sticky; bottom: 0; display: flex; gap: .6rem; padding: .8rem 1rem;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
}
.refbar select {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line);
  color: var(--text); padding: .7rem .6rem; border-radius: 4px; font: inherit;
}
.refbar .btn:disabled { opacity: .4; cursor: default; }
.hidden { display: none !important; }
.ubadge { color: var(--signal); }
.casenote.overflow { border-left-color: var(--alert); color: #eab; }
.casenote.overflow b { color: #f0c2c2; display: block; }
.ovitem { display: block; padding-left: .4rem; }

/* ---------------------------------------------------------- photos */
.photofield { display: flex; flex-direction: column; gap: .4rem; font-size: .88rem; color: var(--dim); }
.photorow { display: flex; gap: .9rem; align-items: flex-start; }
.photoprev {
  width: 168px; height: 168px; flex: none; border-radius: 4px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.photoprev.empty { border-style: dashed; }
.photoprev.empty span { font-family: var(--mono); font-size: .72rem; color: var(--faint); }
@media (max-width: 26rem) { .photoprev { width: 132px; height: 132px; } }
.photoprev img { width: 100%; height: 100%; object-fit: contain; background: #0f1216; }
.photoctl { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; min-width: 0; }
.filebtn {
  display: inline-block; background: var(--raised); border: 1px solid var(--line);
  color: var(--text); padding: .7rem 1rem; border-radius: 4px; cursor: pointer;
  font-family: var(--cond); font-weight: 600; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filebtn:focus-within { outline: 2px solid var(--signal); outline-offset: 2px; }
.photostate { font-family: var(--mono); font-size: .74rem; color: var(--faint); }
.check.small { font-size: .82rem; color: var(--dim); }
.check.small input { width: 16px; height: 16px; }

.rowthumb {
  width: 34px; height: 34px; border-radius: 3px; object-fit: contain;
  flex: none; background: #0f1216;
}
.row .rowthumb { width: 40px; height: 40px; }
.packlist .rowthumb { width: 28px; height: 28px; vertical-align: middle; margin-right: .5rem; }
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem; gap: 1rem;
}
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.lbcap { color: var(--dim); font-family: var(--mono); font-size: .8rem; margin: 0; text-align: center; }

.rowthumb.blank { background: transparent; }
@media (max-width: 26rem) {
  .wordmark { font-size: .95rem; }
  .brand .sub { display: none; }
}

/* ---------------------------------------------------------- home location */
.homebadge {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  padding: .08rem .35rem; border-radius: 3px;
  background: var(--raised); color: var(--dim);
}
.homebadge.member  { background: rgba(63,165,168,.16); color: #7fd0d2; }
.homebadge.other   { background: rgba(168,92,176,.16); color: #c795cc; }
.homelist { list-style: none; margin: 0; padding: 0; }
.homelist li { padding: .7rem 1rem; border-bottom: 1px solid var(--line); display: grid;
  grid-template-columns: 1fr auto; gap: .15rem .8rem; }
.hname { font-weight: 500; }
.hcount { color: var(--dim); grid-row: 1; grid-column: 2; }
.hitems { grid-column: 1 / -1; font-size: .82rem; color: var(--faint); }
.photofield .l { display: block; font-size: .88rem; color: var(--dim); }
.photofield .l .hint { display: block; margin-top: .15rem; }

/* ---------------------------------------------------------- backup */
.statlist { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 1.25rem 0; }
.statlist dt { color: var(--faint); font-size: .85rem; }
.statlist dd { margin: 0; color: var(--text); }
.backuplist { list-style: none; margin: 0; padding: 0; }
.backuplist li {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line); align-items: center;
}
.bkwhen { font-weight: 500; }
.bkname { grid-column: 1; font-size: .72rem; color: var(--faint); overflow-wrap: anywhere; }
.bksize { grid-column: 1; font-size: .74rem; color: var(--dim); }
.backuplist .btn.small {
  grid-column: 2; grid-row: 1 / span 3; padding: .55rem .8rem; font-size: .78rem;
  text-decoration: none; display: inline-flex; align-items: center;
}
/* Slot labels can name several things at once; keep them on one line. */
.u .uname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------- drag to reorder */
.sortlist { position: relative; }
.caserow[data-sortable-item] { align-items: stretch; }
.draghandle {
  flex: none; width: 44px; background: none; border: 0; cursor: grab;
  color: var(--faint); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;            /* stop the page scrolling under a drag */
  border-right: 1px solid var(--line);
}
.draghandle:hover { color: var(--text); }
.draghandle:active { cursor: grabbing; }
.draghandle:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; color: var(--text); }
.caserow.dragging {
  background: var(--raised); opacity: .92;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); position: relative; z-index: 5;
}
.sortnote {
  margin: 0; padding: .4rem 1rem; font-family: var(--mono); font-size: .74rem;
  min-height: 1.2rem; color: var(--faint);
}
.sortnote.ok  { color: var(--signal); }
.sortnote.bad { color: var(--alert); }

/* ---------------------------------------------------------- history */
/* Five tabs will not fit at 412px, so the bar scrolls rather than wrapping
   into two ragged lines or squeezing the labels illegibly. */
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: 1 0 auto; padding-left: .8rem; padding-right: .8rem; white-space: nowrap; }

.crumb { margin: 0 0 .5rem; font-size: .85rem; }
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--text); }
.figof { color: var(--faint); font-size: 1.5rem; }
.small { font-size: .82rem; }
.dimtext { color: var(--faint); }

.whostrip { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.whostrip li {
  background: var(--raised); border: 1px solid var(--line); border-radius: 100px;
  padding: .25rem .7rem; font-size: .82rem; color: var(--dim);
}
.whostrip b { color: var(--text); font-family: var(--mono); }

.sesslist { list-style: none; margin: 0; padding: 0; }
.sesslist a {
  display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .7rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; align-items: center;
}
.sesslist a:hover { background: var(--surface); }
.sekind { grid-row: 1; }
.sewhen { grid-row: 1; font-weight: 500; }
.selabel { grid-column: 1 / 3; grid-row: 2; color: var(--dim); font-size: .88rem; }
.secount { grid-column: 3; grid-row: 1 / span 2; font-size: 1rem; color: var(--dim); }
.secount.short { color: var(--alert); }
.seopen {
  grid-column: 3; grid-row: 3; font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--signal);
}

.histlist { list-style: none; margin: 0; padding: 0; }
.histlist li {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem;
  padding: .65rem 1rem; border-bottom: 1px solid var(--line); align-items: center;
}
.hiname { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.hicase { grid-column: 1; font-size: .74rem; color: var(--faint); }
.hiwho { grid-column: 2; grid-row: 1 / span 2; font-size: .74rem; color: var(--dim); white-space: nowrap; }
.histlist li.miss .hiname { color: #e8a0a0; }