/* superstack admin: one column on a phone, wider on a desk, dark when
   the device is. Controls are at least 44px tall for thumbs (R15.3). */
:root {
  --bg: #f5f4f0;
  --panel: #ffffff;
  --ink: #1c1c1f;
  --muted: #5b5b64;
  --line: #d8d6ce;
  --accent: #1f5fbf;
  --accent-ink: #ffffff;
  --ok: #1d7a3a;
  --warn: #9a4d00;
  --danger: #b3261e;
  --radius: 10px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141417;
    --panel: #1e1e23;
    --ink: #ececf1;
    --muted: #a6a6b0;
    --line: #36363f;
    --accent: #86b4ff;
    --accent-ink: #0b1220;
    --ok: #74d493;
    --warn: #ffb866;
    --danger: #ff8f86;
  }
}

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
 *, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
h1, h2 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .5rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; }
.bar nav a, .bar nav .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .6rem;
}
.bar nav form { margin: 0; }

main { max-width: 60rem; margin: 0 auto; padding: 1rem; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0 0 1rem;
}
.narrow { max-width: 28rem; margin-inline: auto; }
.cards, .entries, .rows { list-style: none; margin: 0; padding: 0; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.cards .card { margin: 0; }
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.muted { color: var(--muted); }
.entries li + li { margin-top: .5rem; }
.entries time { color: var(--muted); font-size: .9rem; }
.rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .25rem 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.rows form { margin: 0; }

.stack { display: grid; gap: .9rem; }
.inline { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin-top: .75rem; }
.inline label { flex: 1 1 14rem; }
label { display: grid; gap: .3rem; font-weight: 600; }
label small { font-weight: 400; }

input, textarea, select {
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}
button.secondary, .button.secondary { color: var(--accent); background: transparent; border: 1px solid var(--line); }
button.warn { background: var(--warn); color: var(--panel); }
button.link { background: none; color: var(--accent); padding: 0 .6rem; font-weight: 400; }

.badge { font-size: .8rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid currentColor; }
.badge.ok { color: var(--ok); }
.badge.warn { color: var(--warn); }
.notice, .error { padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid currentColor; }
.notice { color: var(--ok); }
.error { color: var(--danger); }

/* The writing desk (slice 3) */
.editor { display: grid; gap: .75rem; margin-bottom: 1rem; }
.editor-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.editor-bar input[name=title] { flex: 1 1 18rem; font-weight: 600; }
.editor-bar select { width: auto; }
.editor-panes { display: grid; gap: .75rem; }
@media (min-width: 60rem) {
  .editor-panes { grid-template-columns: 1fr 1fr; align-items: start; }
}
.editor textarea {
  min-height: 26rem;
  font: .95rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}
#preview {
  min-height: 26rem;
  max-height: 60vh;
  overflow: auto;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.two-up { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .two-up { grid-template-columns: 1fr 1fr; align-items: start; } }
.diff { overflow: auto; max-height: 60vh; font: .85rem/1.45 ui-monospace, monospace; white-space: pre; }
.bumps { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; }
.bumps legend { padding: 0 .25rem; font-weight: 600; }
label.row { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
label.row input { width: auto; min-height: 1.5rem; }
.reading del { color: var(--danger); }
.reading ins { text-decoration: none; color: var(--ok); }

/* Second factors (slice 2) */
details.confirm { margin: .25rem 0; }
details.confirm > summary { list-style: none; width: fit-content; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm[open] > summary { margin-bottom: .75rem; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.notice.warn { color: var(--warn); }
.steps { padding-left: 1.25rem; display: grid; gap: .75rem; }
.qr { display: block; margin: .5rem 0; background: #fff; padding: 8px; border-radius: 8px; image-rendering: pixelated; }
.secret { display: block; font-size: 1.05rem; letter-spacing: .05em; overflow-wrap: anywhere; }
.codes { columns: 2; padding-left: 1.5rem; font-size: 1.1rem; }
.codes li { margin-bottom: .35rem; }
.divider { text-align: center; color: var(--muted); margin: .5rem 0; }

/* Staff (slice 2) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rows .inline { margin: 0; flex-wrap: nowrap; }
.rows select { min-width: 9rem; }
.badge:not(.ok):not(.warn) { color: var(--muted); display: inline-block; margin: 0 .25rem .25rem 0; }

/* Appearance (slice 4) */
.settings { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.settings input[type=color] { height: 44px; padding: 2px; }
.cards label.row { align-items: start; }
.card.chosen { outline: 2px solid var(--accent); }
.sample { font-size: 1.05rem; margin: .5rem 0; }
.settings .badge { font-size: .7rem; }

/* The picture library (slice 6). */
.gallery { list-style: none; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.gallery img { width: 100%; height: 10rem; object-fit: contain; background: var(--bg); border-radius: 6px; }
.gallery .snippet { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.pictures { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.pictures figure { margin: 0; flex: 0 0 auto; width: 8rem; }
.pictures img { width: 8rem; height: 6rem; object-fit: cover; border-radius: 6px; display: block; }
.pictures figcaption { font-size: .8rem; }
.pictures button { width: 100%; margin-top: .35rem; }

/* The safekeeping page: what is on the disk, and what was offered by the
   machine copies are pushed to. */
.backups, .keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.backups li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}
.backups li p { margin: 0.2rem 0 0; font-size: 0.85rem; }
.backups .doings { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.keys li { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.keys textarea { width: 100%; font-size: 0.8rem; }

/* The feedback widget, and the page where what people said is read. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
details.feedback {
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
  padding-top: .75rem;
}
details.feedback summary { cursor: pointer; font-weight: 600; }
.feedback-form { display: grid; gap: .7rem; margin-top: .8rem; max-width: 40rem; }
.feedback-form label.row { display: flex; align-items: center; gap: .5rem; }
.feedback-form label.row input { width: auto; }
.said, .features { list-style: none; margin: 0; padding: 0; }
.said .body { white-space: pre-wrap; }
.said .doings, .features .doings { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filters { display: flex; gap: .75rem; flex-wrap: wrap; }
.filters .chosen { font-weight: 700; text-decoration: underline; }
form.inline { display: flex; gap: .4rem; align-items: center; }