/* The page's styles. Colours, type and sizes follow identity/README.md:
   three colours (Magnetite or Mill paper, Ash or Ink, and Ferrite), and
   neutrals that are the text colour at lower opacity, written out as the
   hex values that opacity gives. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #14110d;        /* Magnetite */
  --text: #ece3d4;      /* Ash */
  --fe: #d27a43;        /* Ferrite */
  --panel: #1d1915;     /* 4% */
  --line: #2e2a25;      /* 12% */
  --border: #3b3731;    /* 18% */
  --cap: #8b847a;       /* caption, 55% */
  --sec: #b6aea2;       /* secondary, 75% */
  /* Ferrite's jobs that are lines or text: Ferrite in the dark theme, Ink
     in the light one, where Ferrite is only a fill. */
  --sel: var(--fe);
  --focus: var(--fe);
  --attn: var(--fe);
  --on-fe: #14110d;     /* text on a Ferrite fill */
  --tag-text: var(--fe);
  --tag-fill: transparent;
  --knob: #ece3d4;
  --switch-on: var(--fe);
  --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --glow: 0 0 6px rgba(210, 122, 67, .7);
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
}
/* The page is dark whatever the system prefers. The light theme from
   identity/README.md is kept here, keyed to data-theme="light" on the
   root element, for a theme switch to use. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f1e9;      /* Mill paper */
  --text: #1f1914;    /* Ink */
  --panel: #ede8e0;
  --line: #dcd7cf;
  --border: #cfcac3;
  --cap: #6c6761;
  --sec: #554f49;
  --sel: #1f1914;
  --focus: #1f1914;
  --attn: #1f1914;
  --on-fe: #1f1914;
  --tag-text: #1f1914;
  --tag-fill: var(--fe);
  --knob: #f6f1e9;
  --switch-on: #1f1914;
  --shadow: 0 12px 32px rgba(31, 25, 20, .18);
  --glow: 0 0 5px rgba(210, 122, 67, .55);
}

[hidden] { display: none !important; }
html, body, #app { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14.5px/1.45 var(--sans);
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--text); text-underline-offset: 2px; }
.mono { font-family: var(--mono); }
.sec2 { color: var(--sec); }
.cap { color: var(--cap); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Controls ---- */

.btn {
  font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; height: 38px; border-radius: 7px; border: 1px solid var(--cap);
  background: transparent; color: var(--text); cursor: pointer; white-space: nowrap;
  text-decoration: none; box-sizing: border-box;
}
.btn:hover, .btn.pressed { background: var(--line); }
.btn.primary {
  background: var(--fe); border-color: var(--fe); color: var(--on-fe);
  font-weight: 600; padding: 0 26px;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn:disabled { cursor: default; opacity: .55; }
.btn.icon { width: 38px; padding: 0; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.iconbtn {
  font: inherit; display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 9px; box-sizing: border-box; border-radius: 7px;
  border: 1px solid var(--cap); background: transparent; color: var(--text); cursor: pointer;
}
.iconbtn:hover, .iconbtn.pressed { background: var(--line); }
.iconbtn:disabled { opacity: .45; cursor: default; background: transparent; }

.menuwrap { position: relative; display: inline-flex; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 9px; padding: 6px; display: flex;
  flex-direction: column; z-index: 10; box-shadow: var(--shadow); box-sizing: border-box;
}
.menu button {
  font: inherit; display: flex; justify-content: space-between; gap: 12px; text-align: left;
  background: transparent; border: 0; color: var(--text); padding: 8px 10px; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
}
.menu button:hover, .menu button:focus-visible { background: var(--line); outline: none; }
.menu button:disabled { color: var(--cap); cursor: default; background: transparent; }
.menu button span { color: var(--cap); font-size: 12.5px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.menu .mh {
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text);
  font-weight: 600; padding: 6px 10px 4px;
}

.selw { position: relative; display: inline-flex; align-items: center; }
.sel {
  -webkit-appearance: none; appearance: none; font: inherit; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; height: 32px; padding: 0 34px 0 12px;
  min-width: 10em; max-width: 22em; cursor: pointer;
}
.sel option { background: var(--panel); color: var(--text); }
.selw svg { position: absolute; right: 12px; pointer-events: none; color: var(--sec); }

.field {
  font: inherit; background: transparent; color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; height: 32px; padding: 0 10px; box-sizing: border-box; min-width: 0;
}
.field.mono { font-family: var(--mono); font-size: 13px; }
textarea.field { height: auto; padding: 6px 10px; resize: vertical; line-height: 1.4; width: 100%; }

.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; }
.seg label { padding: 4px 12px; border-radius: 6px; color: var(--sec); cursor: pointer; font-size: 13.5px; position: relative; }
.seg label.on { color: var(--text); box-shadow: inset 0 0 0 1px var(--sel); }
.seg label.off { color: var(--cap); opacity: .6; cursor: default; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }

.range {
  -webkit-appearance: none; appearance: none; width: 150px; height: 4px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(to right, var(--fe) 0, var(--fe) var(--p), var(--border) var(--p), var(--border) 100%);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #ece3d4; border: 0; box-shadow: 0 0 0 1px rgba(31, 25, 20, .25);
}
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #ece3d4; border: 0; }
.range::-moz-range-track { background: transparent; }

.sw { position: relative; display: inline-flex; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw span { width: 38px; height: 22px; border-radius: 11px; background: var(--border); position: relative; display: block; }
.sw span::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--knob);
}
.sw input:checked + span { background: var(--switch-on); }
.sw input:checked + span::after { left: 19px; }
.sw input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.tmp {
  font-size: 12px; line-height: 20px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--fe); color: var(--tag-text); background: var(--tag-fill);
}

.label { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text); font-weight: 600; margin: 0; }

/* ---- The setup screens: sidebar and main column ---- */

.app { display: flex; height: 100%; overflow: hidden; }
.side {
  flex: 0 0 248px; background: var(--panel); border-right: 1px solid var(--line); display: flex;
  flex-direction: column; padding: 18px 12px 14px; box-sizing: border-box; gap: 4px; overflow-y: auto;
}
.brand {
  display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; color: var(--fe);
  text-decoration: none; padding: 0 6px 18px;
}
.shead { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 6px; }
.vm {
  font: inherit; text-align: left; display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text);
  cursor: pointer; text-decoration: none;
}
.vm:hover { background: var(--line); }
.vm.on { border-color: var(--sel); }
.vm .t { display: flex; flex-direction: column; min-width: 0; }
.vm .n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm .m { color: var(--cap); font-size: 12.5px; }
.sfoot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.sfoot a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--sec);
  text-decoration: none; border: 1px solid transparent;
}
.sfoot a:hover { background: var(--line); }
.sfoot a.on { border-color: var(--sel); color: var(--text); }
.meter { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin: 10px 10px 4px; }
.meter i { display: block; height: 100%; background: var(--fe); }

.main { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 30px 40px 22px; flex-wrap: wrap; }
.head h1 { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.005em; overflow-wrap: anywhere; }
.head .name {
  font: 600 30px/1.15 var(--sans); color: var(--text); background: transparent; border: 0;
  border-bottom: 1px dashed var(--border); padding: 0 0 2px; width: 9em; max-width: 100%;
}
.spec { margin-top: 8px; font-size: 13px; color: var(--sec); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acts { display: flex; gap: 10px; align-items: center; }

.warn {
  margin: 0 40px 4px; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
}
.warn svg { color: var(--attn); flex: none; }
.warn p { margin: 0; flex: 1; min-width: 0; }
.warn + .warn { margin-top: 10px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 22px 40px 30px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.card { background: var(--panel); border-radius: 12px; padding: 16px 20px 10px; display: flex; flex-direction: column; }
.card h2 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text); font-weight: 600; }
.card .sub { height: 10px; }
.cardhead { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 6px; }
.cardhead h2 { margin: 0; }
.rowi { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; min-height: 44px; box-sizing: border-box; }
.rowi > :first-child { color: var(--sec); flex: none; }
.rowi > .dev { display: flex; align-items: center; gap: 10px; }
.val { display: flex; align-items: center; gap: 10px; min-width: 0; justify-content: flex-end; }
.val > .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rowi .field { flex: 1; max-width: 26em; }
.rowi.empty { color: var(--cap); }

/* ---- Disks screen ---- */

.body { padding: 0 40px 30px; display: flex; flex-direction: column; gap: 20px; }
.body > .warn { margin: 0; }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); margin: 14px 0 10px; gap: 2px; }
.bar i { display: block; height: 100%; background: var(--fe); min-width: 2px; }
.table { display: grid; grid-template-columns: 14px minmax(0, 1.4fr) minmax(0, 1.2fr) 90px 90px 34px; column-gap: 18px; align-items: center; }
.th { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--sec); font-weight: 600; padding: 8px 0; }
.td { padding: 12px 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { text-align: right; font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.th.num { font-family: inherit; font-size: 11.5px; }
.swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--fe); }
.table .menuwrap { justify-content: flex-end; }
.table .menu { top: 36px; min-width: 200px; }
.none { color: var(--cap); padding: 12px 0; margin: 0; }

/* ---- Help ---- */

.help { flex: 1; min-width: 0; display: flex; gap: 40px; padding: 30px 40px 40px; box-sizing: border-box; align-items: flex-start; line-height: 1.5; }
.content { flex: 1; min-width: 0; max-width: 880px; display: flex; flex-direction: column; gap: 20px; }
.content h1 { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.15; }
.intro { margin: -8px 0 4px; color: var(--sec); font-size: 15px; }
.toc { flex: 0 0 200px; position: sticky; top: 30px; display: flex; flex-direction: column; gap: 2px; padding-top: 58px; }
.toc a { color: var(--sec); text-decoration: none; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); }
.toc a.on { color: var(--text); border-left-color: var(--sel); }
.help .card { padding: 16px 20px 18px; gap: 10px; scroll-margin-top: 30px; }
.help .card h2 { margin: 0; }
.help .card h3 { margin: 8px 0 0; font-size: 14.5px; font-weight: 600; }
.help .card p { margin: 0; color: var(--sec); }
.rows { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 10px 22px; align-items: baseline; }
.rows.narrow { grid-template-columns: 120px minmax(0, 1fr); }
.rows > span:nth-child(2n) { color: var(--sec); }
.k { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
kbd {
  font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--cap); border-radius: 5px;
  padding: 0 6px; color: var(--text); white-space: nowrap;
}
code { font-family: var(--mono); font-size: 13px; color: var(--text); }
.fw { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 200px); gap: 10px 22px; align-items: baseline; margin: 4px 0; }
.fw .th { padding: 0; }
.fw small { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--cap); }
.example {
  font-family: var(--mono); font-size: 12.5px; color: var(--text); background: var(--bg);
  border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere;
}

/* ---- Dialogs ---- */

dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 0; box-shadow: var(--shadow); width: min(440px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(10, 8, 6, .55); }
.dlg { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.dlg h2 { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.dlg p { margin: 0; color: var(--sec); }
.dlg label { display: flex; flex-direction: column; gap: 6px; color: var(--sec); }
.dlg .inline { display: flex; align-items: center; gap: 8px; }
.dlg .inline .field { flex: 1; }
.dlg-error { color: var(--text); }
.dlg-error:empty { display: none; }
.dlg-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ---- Running ---- */

.run { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--panel); }
.runbar { display: flex; align-items: center; gap: 18px; padding: 14px 22px 4px; flex-wrap: wrap; }
.runbar .who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.runbar .who b { font-size: 17px; font-weight: 600; }
.runbar .acts { gap: 8px; }
.runbar .menu { min-width: 230px; }
.elapsed { font-size: 12.5px; }
.leds { display: flex; align-items: center; gap: 18px; font-size: 12.5px; line-height: 16px; margin-top: 5px; flex-wrap: wrap; }
.leds .it { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--border); display: block; flex: none; position: relative; top: 1px; }
.led.on { background: var(--fe); box-shadow: var(--glow); }
@keyframes flick { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.led.blink { animation: flick .35s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .led.blink { animation: none; } }

/* The console area. The terminal measures the element around it (.fit)
   and sizes its font so the guest's whole grid fits, leaving 28 px for its
   own border and padding and a little room; .console's 9 px padding makes
   that a 12 px clearance around the box. */
.console { flex: 1; min-height: 0; padding: 9px; box-sizing: border-box; overflow: hidden; background: var(--panel); }
.fit { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#term {
  background: var(--bg); color: var(--text); padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 4px; white-space: pre; overflow: hidden; max-width: 100%; box-sizing: border-box;
  font: 13px/1.25 var(--mono); cursor: text; outline: none;
}
#term .cur { background: var(--fe); color: var(--bg); }

/* Fullscreen: the control row floats over the top of the console, with no
   background, centred. When the console box needs the whole height the row
   hides, slides back while the pointer is at the top edge, and three dim
   lights in the corner stand in for it. */
.run.fs .runbar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 0; gap: 16px;
  flex-wrap: nowrap; white-space: nowrap; z-index: 2; transition: transform .2s ease, opacity .2s ease;
}
.run.fs .runbar .who { flex-direction: row; align-items: center; gap: 16px; flex: none; }
.run.fs .runbar .leds { margin: 0; gap: 14px; }
.run.fs .runbar .btn { height: 34px; }
.run.fs .runbar .btn.icon { width: 34px; }
.run.fs .runbar .btn.primary { padding: 0 20px; }
.run.fs .runbar .who b { font-size: 14.5px; }
.run.fs.autohide .runbar { transform: translate(-50%, calc(-100% - 20px)); opacity: 0; }
.run.fs.autohide .hot:hover ~ .runbar,
.run.fs.autohide .runbar:hover,
.run.fs.autohide .runbar:focus-within { transform: translateX(-50%); opacity: 1; }
.hot { position: absolute; left: 0; right: 0; top: 0; height: 18px; z-index: 1; display: none; }
.run.fs.autohide .hot { display: block; }
.corner { position: absolute; right: 16px; top: 14px; display: none; gap: 8px; opacity: .55; }
.corner .led { top: 0; }
.run.fs.autohide .corner { display: flex; }

@media (max-width: 760px) {
  .app { flex-direction: column; overflow-y: auto; }
  .side { flex: none; }
  .main { overflow: visible; }
  .head, .grid, .body, .help { padding-left: 16px; padding-right: 16px; }
  .warn { margin-left: 16px; margin-right: 16px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .table { grid-template-columns: 12px minmax(0, 1fr) 70px 34px; }
  .table .hide-narrow { display: none; }
}