/* Fuel Lockstep page styles. Tokens come from ledger.css. */
body{border-top:6px solid var(--signal)}
.bar-link{display:block;background:var(--ink);color:var(--paper);text-align:center;padding:11px 18px;
  font:600 .9rem/1.45 var(--font-body);text-decoration:none}
.bar-link:hover{background:var(--signal);color:var(--paper)}
.wrap-wide{max-width:min(100%,1040px)}
.masthead h1{margin-top:var(--s1)}
.mono{font-family:var(--font-mono)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Day board */
.board{border:2px solid var(--ink);background:var(--panel);padding:var(--s3);margin:var(--s4) 0}
.board-controls{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2);align-items:center;margin-bottom:var(--s3)}
.board-controls label{margin:0}
.board-controls input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--signal)}
.board-controls output{font-size:1rem;min-width:11ch;text-align:right}
.board-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s4)}
.board-title{font:600 .8rem/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:var(--s1)}
.board-title .unit{text-transform:none;letter-spacing:0;font-weight:400}
.price-board{font-size:1rem;margin:0}
.price-board td{padding:6px 0;border-bottom:1px solid var(--rule)}
.price-board td.num{font-size:1.35rem}
.price-board tr.off td.num{color:var(--signal);font-weight:600}
.board-note{font-size:.85rem;color:var(--ink-2);margin:var(--s1) 0 0}
#perth-strip{width:100%;height:auto;display:block}

@media (max-width:720px){
  .board{padding:var(--s2)}
  .board-grid{grid-template-columns:1fr;gap:var(--s3)}
  .board-controls{grid-template-columns:1fr;gap:var(--s1)}
  .board-controls output{text-align:left}
  h1{font-size:2.2rem}
  h2{font-size:1.5rem}
}