/* The shell's layout: the one frame every screen sits in. Phone first; the menu becomes a column on a wide screen. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--colour-page); color: var(--colour-text); font: var(--type-body); }
.page { display: flex; flex-direction: column; min-height: 100vh; }
.menu { background: var(--colour-card); border-bottom: 1px solid var(--colour-line); padding: var(--space-2); display: flex; gap: var(--space-3); overflow-x: auto; }
.menu-group { display: flex; flex-direction: column; gap: var(--space-1); min-width: 10rem; }
.menu-label { font: var(--type-label); color: var(--colour-quiet); margin: var(--space-2) 0 0; text-transform: uppercase; }
.menu-item { font: var(--type-body); text-align: left; background: none; border: 0; border-left: 0.2rem solid transparent; padding: var(--space-2); cursor: pointer; color: inherit; }
.menu-item.picked { background: var(--colour-picked); border-left-color: var(--colour-accent); }
.tag { font: var(--type-small); color: var(--colour-quiet); margin-left: var(--space-2); }
.content { flex: 1; padding: var(--space-3); display: flex; flex-direction: column; }
.notice { background: var(--colour-notice); border: 1px solid var(--colour-notice-line); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-3); }
.card { background: var(--colour-card); border: 1px solid var(--colour-line); border-radius: var(--radius); padding: var(--space-4); }
.sign-in { max-width: 26rem; margin: var(--space-4) auto; display: flex; flex-direction: column; gap: var(--space-3); }
.sign-in input { font: var(--type-body); padding: var(--space-2); border: 1px solid var(--colour-line); border-radius: var(--radius); }
.title { font: var(--type-title); margin: 0; }
.small { font: var(--type-small); color: var(--colour-quiet); margin: 0; }
.note { font: var(--type-small); margin: 0; }
.link { font: var(--type-small); background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; align-self: flex-start; }
.primary { font: var(--type-heading); background: var(--colour-accent); color: var(--colour-card); border: 0; border-radius: var(--radius); padding: var(--space-2) var(--space-3); cursor: pointer; }
.banner { background: var(--colour-picked); padding: var(--space-2) var(--space-3); display: flex; gap: var(--space-3); align-items: center; }
iframe.screen { flex: 1; width: 100%; min-height: 30rem; border: 1px solid var(--colour-line); border-radius: var(--radius); background: var(--colour-card); }
.screen-frame { background: var(--colour-card); }
.screen-frame main { padding: var(--space-3); }
@media (min-width: 56rem) {
  .page { flex-direction: row; }
  .menu { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--colour-line); width: 16rem; overflow-x: visible; }
}
.record { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--colour-line); }
.tab { font: var(--type-body); background: none; border: 0; border-bottom: 0.2rem solid transparent; padding: var(--space-2) var(--space-3); cursor: pointer; color: inherit; white-space: nowrap; }
.tab.picked { border-bottom-color: var(--colour-accent); }
.screen-host { flex: 1; display: flex; flex-direction: column; }
/* The own pages' fields: each field inside its own label, the words above it. */
label.field { display: flex; flex-direction: column; gap: var(--space-1); }
.own-form { display: flex; flex-direction: column; gap: var(--space-2); }
/* System health (admin PR 2): red is what needs a person now. */
.reds, .all-well, .units, .alerts, .choices { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.reds .red { color: var(--colour-red); background: var(--colour-red-soft); border-left: 0.25rem solid var(--colour-red); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font: var(--type-body); }
.unit, .alert { border: 1px solid var(--colour-line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.unit.red, .alert.red { border-left: 0.25rem solid var(--colour-red); }
p.red { color: var(--colour-red); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
/* A row's changes (System health): the confirmation of Close sits under the buttons. */
.row-form { display: flex; flex-direction: column; gap: var(--space-2); }
.confirm { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }