/* a machine's status page (/clockwork/m/): layout only. every colour, face and component comes from
   /clockwork/clockwork.css, and the rules behind them are in /clockwork/DESIGN.md. no hex values here. */

.machine { padding-top: 36px; }

/* ---- the head: who the machine is, its one pill, the settings link ---- */
.mhead { align-items: flex-end; gap: 18px 32px; padding: 0 0 22px; }
.mhead .who { flex: 1 1 560px; align-items: flex-start; gap: 18px; }
.mhead .avatar.big { width: 64px; height: 64px; margin-top: 30px; }
#m-avatar.empty { display: none; }
.mhead__id { min-width: 0; }
.mhead h1.mname { margin-top: 10px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; font-weight: 800; overflow-wrap: anywhere; }
.mhead .meta { margin-top: 10px; font-size: 13px; }
.mhead .meta a { white-space: nowrap; }
.mhead .lede { margin-top: 12px; font-size: 14px; max-width: 66ch; }
.mhead__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 100%; }
.mhead__acts .pill { max-width: 100%; }
#m-pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- sections: one band per question the page answers ---- */
.msec { margin-top: 48px; }
.msec > .section__head { margin-bottom: 16px; }
.msec .section__head h2 { margin-top: 8px; }
.msec .section__head .sub { margin-top: 6px; }
.msec .two { margin-top: 0; }
.msec .grid2 { align-items: start; }

/* ---- the split ---- */
.m-split .split { margin-top: 14px; }
.m-split .legend { margin: 12px 0 0; }
#m-splitnote { margin-top: 12px; }
#m-splitnote:empty { display: none; }
#m-service { margin-top: 12px; }

/* ---- the wallets ---- */
.m-wallet { display: grid; justify-items: start; gap: 8px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--surface-2); }
.m-wallet a { font-size: 14px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.m-wallets .kv b { font-weight: 500; }
.m-wallets .kv a { text-decoration: none; }
.m-wallets > p.sub { margin-top: 12px; }

/* ---- the board ---- */
.m-board .kv b { max-width: 64%; }
#m-board-note { margin-top: 12px; }

/* ---- the ledger: a slice's other legs sit under the burn ---- */
.lrow .lt span + span { margin-top: 0; }
#m-ledger:empty::before { content: "reading the ledger"; display: block; padding: 16px 20px; font-size: 13px; color: var(--muted); }
.m-empty { padding: 16px 20px; }

/* ---- the clock ---- */
#m-clock:empty, #m-peg:empty { display: none; }
#m-peg { margin-top: 6px; }

/* ---- check a wallet ---- */
#check .crow { margin-top: 12px; }
#check .field svg { width: 18px; height: 18px; stroke: var(--label); }
#w-err { margin-top: 10px; }
#check > p.sub:last-child { margin-top: 12px; }

/* ---- the week: a lone last tile takes the rest of its row ---- */
@media (min-width: 761px) {
  #w-tiles .stat:last-child:nth-child(3n+2) { grid-column: span 2; }
}

.foot-note { margin-top: 40px; }

@media (max-width: 760px) {
  .machine { padding-top: 24px; }
  .mhead { align-items: flex-start; }
  .mhead .who { flex-basis: 100%; flex-direction: column; gap: 12px; }
  .mhead .avatar.big { width: 48px; height: 48px; margin-top: 0; }
  .mhead h1.mname { margin-top: 8px; }
  .msec { margin-top: 36px; }
}