/* One-time-pad allocation demo. Builds on ../_shared/demo.css (palette, buttons, poster). */
:root {
  /* Party hues, in the site's purple-family order; each party also carries its number. */
  --p0: #a78bfa;
  --p1: #60a5fa;
  --p2: #e879f9;
  --p3: #818cf8;
  --p4: #f0abfc;
  --pad: 16px;
  --ink: #140f24;
}
body { padding: 14px 16px; }
.wrap { max-width: 1400px; margin: 0 auto; }
h2 { font: 600 15px/1.3 var(--sans); margin: 0; }
code, pre { font-family: var(--mono); }
.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.lede { max-width: 62ch; margin: 0; color: var(--text-2); }

/* Tabs */
.tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.tabs button { background: none; border: 0; border-radius: var(--radius-pill); color: var(--muted); padding: 7px 14px; font: 500 12px/1 var(--mono); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--ink); }
.tabs button:not([aria-selected="true"]):hover { color: var(--accent-hi); }

/* Poster */
.poster { gap: 14px; min-height: 300px; align-content: center; }
.poster .lede { text-align: center; }
.poster .strip { justify-content: center; max-width: 760px; }
.poster .progress, .poster .status { margin: 0 auto; }

/* Toolbars and form controls */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bar label, .field { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
select, input[type="number"] {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; font: 13px/1.2 var(--mono); min-height: 32px;
}
input[type="number"] { width: 64px; }
select:hover, input:hover { border-color: var(--accent); }
.seg { flex-wrap: wrap; border-radius: 12px; }
.seg button { padding: 8px 11px; }
.seg button:not([aria-pressed="true"]):hover { color: var(--accent-hi); }
.btn { padding: 8px 14px; min-height: 34px; }
.btn.small { padding: 6px 11px; min-height: 30px; font-size: 12px; }
.note { font: 12px/1.5 var(--mono); color: var(--muted); margin: 8px 0 0; }
.proto-note { margin: 8px 0 10px; font-size: 13.5px; color: var(--text-2); max-width: 110ch; }
.proto-note b { color: var(--accent-hi); font-weight: 600; }

/* The pad strip */
.strip { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: flex-end; }
.g { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g > b { font: 600 10px/1 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; height: 11px; letter-spacing: 0.02em; }
.g[data-owner] > b { color: var(--c); }
.pads { display: flex; gap: 2px; padding: 2px; border-radius: 5px; border: 1.5px solid transparent; }
.g.role-current .pads, .g.role-both .pads, .g.role-slice .pads, .g.role-pool .pads { border-color: var(--c); }
.g.role-reserve .pads, .g.role-transit .pads { border-color: var(--c); border-style: dashed; }
.g.role-both .pads { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.g.role-free .pads { border-color: var(--line); }
.g.role-spent .pads { border-color: transparent; }
.pads i {
  width: var(--pad); height: calc(var(--pad) * 1.25); border-radius: 3px; display: grid; place-items: center;
  background: var(--surface-2); font: 600 calc(var(--pad) * 0.55)/1 var(--mono); font-style: normal; color: var(--ink);
  transition: background-color 0.15s;
}
.pads i.s1 { background: repeating-linear-gradient(135deg, var(--pc) 0 3px, color-mix(in srgb, var(--pc) 35%, var(--surface-2)) 3px 6px); }
.pads i.s2 { background: var(--pc); }
.pads i.s3 { background: var(--danger); color: #fff; }
.pads i.waste { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 75%, transparent); background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font: 11px/1.4 var(--mono); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 12px; height: 14px; border-radius: 3px; background: var(--surface-2); }
.legend .k-cur { border: 1.5px solid var(--accent); }
.legend .k-res { border: 1.5px dashed var(--accent); }
.legend .k-fly { background: repeating-linear-gradient(135deg, var(--accent) 0 3px, #3b2f5e 3px 6px); }
.legend .k-done { background: var(--accent); }
.legend .k-waste { box-shadow: inset 0 0 0 1.5px var(--danger); }

/* Play layout */
/* Narrow: one column, ordered so the numbers sit right under the moves. Wide: two columns. */
.cols { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.col { display: contents; }
.cols .o1 { order: 1; } .cols .o2 { order: 2; } .cols .o3 { order: 3; } .cols .o4 { order: 4; } .cols .o5 { order: 5; } .cols .o6 { order: 6; }
@media (min-width: 900px) {
  .cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .col { display: grid; gap: 12px; min-width: 0; }
}
@media (hover: none), (pointer: coarse) { .keys { display: none; } }
.panel { padding: 12px 14px; }
.panel > .label { margin: 0 0 8px; }
.parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.party {
  display: grid; gap: 3px; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--c);
  font: 12px/1.3 var(--mono);
}
.party:hover { border-color: var(--c); }
.party strong { font: 700 14px/1 var(--sans); display: flex; align-items: center; gap: 6px; }
.party strong small { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--muted); }
.party .info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party:disabled { cursor: not-allowed; opacity: 0.55; }
.party .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.party.full .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.party.out { opacity: 0.6; }
.party.out .dot { background: var(--muted); }
.flight { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1.5px solid var(--c); font: 12px/1 var(--mono);
}
.chip:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface-2)); }
.chip .age { color: var(--muted); font-size: 10.5px; }
.empty { font: 12px/1.4 var(--mono); color: var(--muted); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.row .label { margin-right: 2px; }
.keys { font: 11px/1.4 var(--mono); color: var(--muted); margin: 8px 0 0; }
kbd { font: 11px/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; color: var(--text-2); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.stat b { display: block; font: 700 20px/1.1 var(--sans); letter-spacing: -0.02em; }
.stat span { display: block; margin-top: 3px; font: 11px/1.35 var(--mono); color: var(--muted); }
.stat.bad b { color: var(--danger); }
.stat.ok b { color: var(--accent-hi); }
table { width: 100%; border-collapse: collapse; font: 12px/1.35 var(--mono); }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 6px; border-bottom: 1px solid var(--line); }
td { padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); white-space: nowrap; }
td:first-child { color: var(--c); font-weight: 700; }
.scrollx { overflow-x: auto; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font: 12px/1.4 var(--mono); color: var(--text-2); }
.log li { padding-left: 10px; border-left: 2px solid var(--c, var(--line)); }
.log li.warn { color: #fcd34d; }
.log li.alarm { color: var(--danger); font-weight: 600; }
.log li.done { color: var(--accent-hi); }
.log li.ctl { color: var(--muted); }
.alarm-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); font: 600 13px/1.4 var(--mono); color: #fecdd3; }
.check { font: 12px/1.5 var(--mono); color: var(--text-2); }
.check.same { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.good-text { color: var(--good); }
.bad-text { color: var(--danger); }

/* Compare */
.bars { display: grid; gap: 14px; margin-top: 14px; }
.barrow { display: grid; gap: 6px; }
.barrow header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 12px/1.3 var(--mono); color: var(--muted); }
.barrow header strong { font: 700 14px/1.2 var(--sans); color: var(--text); }
.barrow header .big { font: 700 20px/1 var(--sans); color: var(--c); letter-spacing: -0.02em; }
.track { position: relative; height: 14px; background: var(--surface-2); border-radius: 7px; }
.track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--c); min-width: 3px; }
.track > u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); text-decoration: none; }
.track > u::after { content: attr(data-l); position: absolute; top: 21px; left: 0; white-space: nowrap; font: 11px/1 var(--mono); color: var(--text-2); }
.track > u.flip::after { left: auto; right: 0; }
.barrow .sub { font: 12px/1.4 var(--mono); color: var(--muted); }
.barrow.has-bound .sub { margin-top: 14px; }
.axis { display: flex; justify-content: space-between; font: 11px/1 var(--mono); color: var(--muted); }

/* CI */
.jobs { display: grid; gap: 12px; }
@media (min-width: 1000px) { .jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.job { display: grid; gap: 8px; min-width: 0; }
.job code.cmd { display: block; font-size: 12px; color: var(--accent-hi); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
.job p { margin: 0; font-size: 13px; color: var(--text-2); }
.verdict { font: 600 13px/1.4 var(--mono); }
pre.out { margin: 0; max-height: 260px; overflow: auto; background: #08070c; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.45; color: var(--text-2); white-space: pre; }
pre.out:empty { display: none; }
.rows { display: grid; gap: 2px; max-height: 260px; overflow: auto; font: 11px/1.45 var(--mono); }
.rows div { white-space: nowrap; }
.rows .same { color: var(--text-2); }
.rows .diff { color: var(--danger); }
.job .progress { width: 100%; }

/* Footer */
.demo-foot { margin-top: 16px; }
.demo-foot span { max-width: 100%; }

body.busy [data-act]:not([data-keep]) { opacity: 0.45; pointer-events: none; }
[hidden] { display: none !important; }