/* The page: reset, the one column, the title, the chrome text, buttons, inputs and banners.
   Every colour, size and space is a token; the only bare numbers are the 1px and 2px lines. */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* One column, left-aligned, centred in the window, with the guide's space above the title.
   The drill page is wider than the guide's 720: code lines are the content here, and a 79
   character line of Python does not fit 720 px of monospace. The guide allows tables and code
   to be wider; this is that, applied to the whole page that is mostly code. */
.page {
  max-width: calc(var(--page-w) + var(--sp-8) * 2);
  margin: 0 auto;
  padding: var(--page-pad-top) var(--sp-5) calc(var(--sp-8) * 2);
}

.title-line { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
h1.title { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-ui); }

.chrome { font-family: var(--font-chrome); font-size: var(--fs-chrome); color: var(--fg-2); }
.meta { margin-bottom: var(--sp-6); font-variant-numeric: tabular-nums; }
.clock { font-variant-numeric: tabular-nums; }
.clock.stopped { color: var(--ok); }

.label {
  font-family: var(--font-chrome); font-size: var(--fs-chrome); color: var(--fg-2);
  text-transform: uppercase; letter-spacing: .06em;
  margin: var(--sp-6) 0 var(--sp-2);
  display: flex; gap: var(--sp-3);
}
.label .aside { text-transform: none; letter-spacing: 0; margin-left: auto; }

.tone-ok { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-err { color: var(--err); }
.muted, .tone-muted { color: var(--fg-2); }

/* Buttons: a bordered box with a verb in it. One primary per surface; ghost drops the border. */
button {
  font: inherit; font-size: var(--fs-ui); line-height: 1;
  height: var(--ctl-h); padding: 0 var(--sp-3);
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  cursor: pointer; transition: background var(--t-fast);
}
button:hover { background: var(--bg-3); }
button:disabled { color: var(--fg-2); cursor: default; background: var(--bg); }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.primary:hover { filter: brightness(0.95); }
[data-theme="dark"] button.primary:hover { filter: brightness(1.08); }
button.primary:disabled { filter: none; opacity: .5; }
button.ghost { border-color: transparent; background: transparent; color: var(--fg-2); }
button.ghost:hover { background: var(--bg-3); color: var(--fg); }
:focus-visible { outline: none; box-shadow: var(--focus); }

input[type="text"], input[type="password"] {
  font: inherit; font-size: var(--fs-ui); color: var(--fg); background: var(--bg);
  height: var(--ctl-h); padding: 0 var(--sp-2); width: 100%;
  border: 1px solid var(--line-2); border-radius: var(--radius);
}
input[type="text"]:focus, input[type="password"]:focus { outline: none; border-color: var(--accent); }

/* The band: primary first, left-aligned, the chord beside the button it belongs to. */
.band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); min-height: var(--ctl-h); }
.band .item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.band .spacer { flex: 1; }

/* A banner: 2px semantic edge, soft ground, one line, no icon. */
.banner {
  border-left: 2px solid var(--line-2); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-ui);
  background: var(--bg-2);
}
.banner.ok { border-color: var(--ok); background: var(--ok-soft); }
.banner.warn { border-color: var(--warn); background: var(--warn-soft); }
.banner.err { border-color: var(--err); background: var(--err-soft); }
.banner .chrome { margin-left: var(--sp-2); }

.empty { color: var(--fg-2); font-size: var(--fs-ui); }

/* The status line: plain chrome text at the bottom edge, only when there is something in it. */
.status {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--row-h);
  padding: 0 var(--sp-4); display: flex; align-items: center;
  font-family: var(--font-chrome); font-size: var(--fs-chrome); color: var(--fg-2);
  background: var(--bg); pointer-events: none;
}
.status:empty { display: none; }