/* Besendorf ID: the router dashboard's look (design/lyra-dashboard/rev-a.html), dark and amber.
   Concentric corners: every control inside a card sits `--pad` from its edge, so the card's radius is derived from the
   controls' radius: --card-r = --r + --pad. Change --r or --pad, never --card-r. */
:root {
  --bg: #F4F5F7; --surface: #FFFFFF; --raised: #F1F2F5; --ink: #14171D; --ink-2: #4B5260; --ink-3: #6A7280; --line: #DCE0E6;
  --accent: #F29A2E; --accent-ink: #8F4B05; --on-accent: #1E1405; --accent-wash: color-mix(in oklab, #F29A2E 16%, transparent);
  --bad: #C0362F; --bad-wash: color-mix(in oklab, #C0362F 10%, transparent); --good: #1B7A4A;
  --sans: -apple-system, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, Menlo, Consolas, monospace;
  --r: 12px; --pad: 20px; --card-r: calc(var(--r) + var(--pad));
  --row-h: 60px; --item-pad: 6px; --item-btn-r: calc(var(--r) - var(--item-pad)); --spin: .7s;
  --key-r: 18px; --key-pad: 6px; --pad-r: calc(var(--key-r) + var(--key-pad));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E1116; --surface: #171C23; --raised: #1E242D; --ink: #E9EDF2; --ink-2: #A6AFBC; --ink-3: #848D9A; --line: #252C36;
  --accent: #FFA23C; --accent-ink: #FFB766; --accent-wash: color-mix(in oklab, #FFA23C 15%, transparent);
  --bad: #FF6E64; --bad-wash: color-mix(in oklab, #FF6E64 13%, transparent); --good: #4CD48D; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0E1116; --surface: #171C23; --raised: #1E242D; --ink: #E9EDF2; --ink-2: #A6AFBC; --ink-3: #848D9A; --line: #252C36;
  --accent: #FFA23C; --accent-ink: #FFB766; --accent-wash: color-mix(in oklab, #FFA23C 15%, transparent);
  --bad: #FF6E64; --bad-wash: color-mix(in oklab, #FF6E64 13%, transparent); --good: #4CD48D; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--sans); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom)); }
/* plain block layout for the page: WebKit sizes flex items by the intrinsic width of inputs and buttons, which pushed
   the cards past the right edge in the phone apps */
main { width: 100%; max-width: 420px; margin: 0 auto; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 16px; }
header { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
header img { width: 32px; height: 32px; }
header .brand { font-weight: 700; letter-spacing: -.01em; }
header .brand span { color: var(--accent-ink); }
h1 { font-size: 24px; margin: 0; letter-spacing: -.015em; }
h2 { font-size: 17px; margin: 0; }
p { margin: 0; color: var(--ink-2); }
#view { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card, label, form, .list, .item, .row > * { min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-r); padding: var(--pad);
  display: flex; flex-direction: column; gap: 12px; }
label { font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
input, select { min-width: 0; max-width: 100%; display: block; font: inherit; color: var(--ink); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; width: 100%; }
/* the file picker's own button sits --file-pad inside the field and shares its corner centre */
input[type=file] { --file-pad: 6px; padding: var(--file-pad); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: calc(var(--r) - var(--file-pad)); padding: 8px 12px; margin-right: 10px; cursor: pointer; }
/* at least 16 px, or iOS zooms the page in when the field gets focus (inputs inherit the label's 13 px) */
input, select, textarea { font-size: max(16px, 1em); }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { min-width: 0; max-width: 100%; font: inherit; font-weight: 600; border: 0; border-radius: var(--r); padding: 12px 16px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); width: 100%; }
button.secondary { background: var(--raised); color: var(--ink); border: 1px solid var(--line); }
button.link { background: none; color: var(--accent-ink); padding: 4px 0; width: auto; font-weight: 500; align-self: center; }
button.danger { background: var(--bad-wash); color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; } .row > * { flex: 1; }
.error { background: var(--bad-wash); color: var(--bad); border-radius: var(--r); padding: 10px 12px; font-size: 14px; }
.note { font-size: 13px; color: var(--ink-3); }
.code { font: 600 28px/1.2 var(--mono); letter-spacing: .12em; text-align: center; color: var(--accent-ink);
  background: var(--accent-wash); border-radius: var(--r); padding: 14px; }
.who { display: flex; align-items: center; gap: 12px; }
/* profile pictures: a fixed square box, always a circle, never stretched; the initial sits under the picture */
.avatar { position: relative; width: 44px; height: 44px; aspect-ratio: 1; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); display: grid;
  place-items: center; font-weight: 700; overflow: hidden; flex: none; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.avatar.busy img { opacity: .4; }
.avatar.busy::after { content: ""; position: absolute; inset: 0; margin: auto; }
.who .name { font-weight: 600; } .who .mail { font-size: 13px; color: var(--ink-3); }
.list { display: flex; flex-direction: column; gap: 8px; }
/* list rows: one height for every row (name and a second line, each cut with an ellipsis, never wrapped) */
.item { display: flex; align-items: center; gap: 10px; background: var(--raised); border-radius: var(--r);
  padding: var(--item-pad) var(--item-pad) var(--item-pad) 12px; min-height: var(--row-h); }
.item .grow { flex: 1; min-width: 0; }
.item .grow > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.item .grow > .sub:empty::before { content: "\00a0"; } .item .sub { font-size: 12px; color: var(--ink-3); }
/* a row's button fills the row's height minus --item-pad and shares the row's corner centre */
.item button { width: auto; flex: none; align-self: stretch; padding: 0 14px; font-size: 14px; border-radius: var(--item-btn-r); }
.dots { display: flex; justify-content: center; gap: 12px; padding: 6px 0; }
.dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-3); }
.dots i.on { background: var(--accent); border-color: var(--accent); }
/* the passcode keypad: the pad is a rounded tile holding round-cornered keys --key-pad from its edge */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--raised); border-radius: var(--pad-r);
  padding: var(--key-pad); }
.keypad button { background: var(--surface); color: var(--ink); border-radius: var(--key-r); font: 600 22px var(--sans); padding: 14px 0;
  border: 1px solid var(--line); }
.keypad button.blank { visibility: hidden; }
.fake { border-style: dashed; }
.qr { align-self: center; background: #fff; padding: 12px; border-radius: var(--r); }
.hidden { display: none !important; }
#view > h1 + p { margin-top: -10px; }
.log { white-space: pre-wrap; margin: 0; font: 12px/1.4 var(--mono); }
/* "‹ App" back to the app that opened these pages inside itself: a 44 px tap target at the top */
.back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 -12px -4px; padding: 0 4px;
  color: var(--accent-ink); font-weight: 600; text-decoration: none; }
/* busy: the button keeps its size, its label gives way to a spinner in the button's own text colour */
button.busy::after, .avatar.busy::after, .dots.busy::after {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin var(--spin) linear infinite; }
button.busy { position: relative; color: transparent !important; }
button.busy:disabled { opacity: 1; }
button.busy::after { content: ""; position: absolute; inset: 0; margin: auto; color: var(--on-accent); }
button.secondary.busy::after { color: var(--ink); }
button.danger.busy::after { color: var(--bad); }
button.link.busy::after { color: var(--accent-ink); }
.avatar.busy::after { color: var(--accent-ink); width: 22px; height: 22px; }
/* the passcode dots give way to a spinner while the code is checked; the keys wait */
.dots { position: relative; }
.dots.busy i { visibility: hidden; }
.dots.busy::after { content: ""; position: absolute; inset: 0; margin: auto; color: var(--accent-ink); }
.keypad.busy { pointer-events: none; opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { :root { --spin: 1.6s; } }