.topbar .tabs a:focus-visible, .topbar .menu:focus-visible { outline-offset: -4px; }
.topbar .menu { flex: none; min-height: var(--target); margin: 2px 0; color: var(--ink-text); border-color: var(--ink-line); }
.menu-list { position: fixed; top: 48px; }
.paper .topbar .menu:hover, .topbar .menu[aria-expanded="true"] { background: var(--ink-raised); }
.menu-list button:focus-visible { outline: 2px solid var(--ink-text); outline-offset: -4px; }

#view > .part:first-of-type { margin-top: var(--s6); }
.parthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.parthead h2 { margin: 0; }
.parthead a { display: inline-flex; align-items: center; min-height: var(--target); }
.gap { margin-top: var(--s4); }
.gap-top { margin-top: var(--s6); }
.foot { margin-top: var(--s6); }
.foot a { display: inline-flex; align-items: center; min-height: var(--target); }
.strong { font-weight: 600; }
.lede + .lines, .vhead + .lines { margin-top: 0; }
.vhead + [role="status"]:empty, .lines + [role="status"]:empty { display: none; }
.lines + [role="status"] { margin-top: var(--s4); }

.steps { margin: 0; padding: 0; list-style: none; max-width: 760px; border-top: 1px solid var(--paper-line); }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s5) 0; border-bottom: 1px solid var(--paper-line); }
.steps .n { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--paper-text); }
.steps li.done .n, .steps li.done h2 { color: var(--paper-text2); }
.steps h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.steps .state { font-size: var(--fs-small); font-weight: 500; color: var(--paper-text2); }
.steps .state.next { color: var(--paper-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.steps .body > p { margin-top: var(--s1); max-width: var(--measure); }
.steps .cmdline { margin-top: var(--s2); border: 0; padding: 0; }
.part > p + .cmdline { margin-top: var(--s3); }
.cmdline + .lines li:first-child { border-top: 0; }

.meterbox { max-width: 560px; }
.meterline { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; }
.meterbox .warn { margin-top: var(--s2); }
.part .meterbox + p { margin-top: var(--s2); }
.planline { margin-top: var(--s4); }
.part .acts { margin-top: var(--s4); }
.livetxt { display: inline-flex; align-items: center; gap: var(--s1); }

table.stacks { margin-top: var(--s2); }
.stacks td { font-variant-numeric: tabular-nums; }
.plans-t tr.current td { background: var(--paper-row); }
.plans-t td .what { display: flex; flex-direction: column; gap: 2px; }
.plans-t td .what span { color: var(--paper-text2); font-size: var(--fs-small); }
.plans-t td.change { text-align: right; }
.plans-t td.change .btn { white-space: nowrap; }

.filters { margin-bottom: var(--s4); }
.filters .field select { min-width: 160px; }
.count { margin: var(--s2) 0 0; color: var(--paper-text2); }
.delrow { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); margin-top: var(--s3); }
.delrow .field { flex: 1 1 260px; max-width: 360px; }
.delrow .field input { width: 100%; }
.btn.danger[aria-pressed="true"] { background: var(--live-paper); color: var(--paper); border-color: var(--live-paper); }
.figline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; }

@media (max-width: 600px) {
  .stacks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stacks, .stacks tbody, .stacks tr, .stacks td { display: block; width: 100%; }
  .stacks tr { padding: var(--s2) 0; border-bottom: 1px solid var(--paper-line); }
  .stacks tr:first-child { border-top: 1px solid var(--paper-line); }
  .grid.stacks td { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); height: auto; min-height: 32px; padding: var(--s1) 0; border-bottom: 0; text-align: right; }
  .grid.stacks td::before { content: attr(data-label); color: var(--paper-text2); font-size: var(--fs-small); text-align: left; }
  .grid.stacks td:first-child { font-weight: 600; }
  .grid.stacks td:first-child::before { content: none; }
  .plans-t td.change { justify-content: flex-end; }
  .plans-t td.change::before { content: none; }
  .plans-t td.change:empty { display: none; }
  .plans-t td .what { align-items: flex-end; }
  .plans-t tr.current td { background: none; }
  .steps li { grid-template-columns: 28px 1fr; }
  .meterline { font-size: var(--fs-body); }
}
.endroom, .liverow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.endroom [role="status"]:empty { display: none; }