/* The office's one stylesheet (SPEC.md 17.1). Colours are variables with a light and a
   dark set; html[data-theme] follows the choice in Settings, and auto follows the phone.
   Plain lists like the To-Do page: no dashboards, charts, images or motion. */

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #5c5c5c;
  --line: #e3e3e3;
  --link: #1f5fbf;
  --red: #b3261e;
  --amber: #8a5a00;
  --green: #1e7d32;
  --button-text: #ffffff;
  --box: #f6f7f9;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #121212;
    --text: #ececec;
    --muted: #a8a8a8;
    --line: #2c2c2c;
    --link: #8ab4ff;
    --red: #ff8a80;
    --amber: #ffcc66;
    --green: #81c995;
    --button-text: #121212;
    --box: #1c1c1c;
  }
}

html[data-theme="dark"] {
  --bg: #121212;
  --text: #ececec;
  --muted: #a8a8a8;
  --line: #2c2c2c;
  --link: #8ab4ff;
  --red: #ff8a80;
  --amber: #ffcc66;
  --green: #81c995;
  --button-text: #121212;
  --box: #1c1c1c;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0 auto;
  max-width: 40rem;
  padding: 0 16px 48px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

a { color: var(--link); }
/* Every link in the main area answers a tap over at least 44px, centred on its words (17.1).
   The final check (30) found "See my list." and the row titles at 22px. Padding alone was
   not enough (third check, 31): padding on a link inside a line of words reaches over the
   next line or paragraph, and whatever comes later on the page sits on top of it, so the
   row titles answered over 38px and "+4 more need you" over 43px, and a link's padding
   took the bottom 3px of the Continue button above it. So a link is its own small block,
   inline-block, with padding that makes its line 46px tall whatever the size of its words
   (1lh is one line); nothing overlaps it and it overlaps nothing. The line it sits on gets
   taller instead. :where keeps this rule the weakest, so links with their own sizes
   (buttons, the More menu, tabs, the pager, Cancel) keep theirs. */
main :where(a:not(.button):not(.menu)) { display: inline-block; padding: 10px 0; padding: calc((46px - 1lh) / 2) 0; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
main:focus { outline: none; }

/* Words only a screen reader hears, and the skip link that appears on focus. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -10000px; top: 0; }
.skip:focus { position: static; display: inline-flex; align-items: center; min-height: 44px; }

/* The header's links are the most used of all, so they are 44px tall too (third check,
   31: they were 37px). The space above "Office" went to make up most of the extra height. */
header { padding: 0 0 4px; border-bottom: 1px solid var(--line); }
.brand { margin: 0; font-weight: 700; font-size: 20px; }
.brand a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 0 14px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
nav a.current { font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

h1 { font-size: 22px; margin: 14px 0 8px; }
h2 { font-size: 19px; margin: 22px 0 6px; }
h3 { font-size: 17px; margin: 18px 0 4px; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.asof { margin: 8px 0 0; font-size: 15px; }
.red { color: var(--red); }
.amber { color: var(--amber); }
.green, .fine { color: var(--green); }
.banner { padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.flash { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--box); }
.flash span { margin-right: 6px; }
.error, .field-error { color: var(--red); font-weight: 600; }
.note { padding-left: 10px; border-left: 4px solid var(--amber); }
.text { white-space: pre-wrap; }

/* Boxes for things that need a decision: came back, Claude says done, a suggestion. */
.box { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--link); border-radius: 6px; background: var(--box); }
.box.warn { border-left-color: var(--amber); }

/* Forms */
.field { margin: 12px 0; }
fieldset.field { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
legend { padding: 0 4px; font-weight: 600; }
label { display: block; margin: 0 0 4px; }
.help { color: var(--muted); font-size: 15px; margin: 2px 0 6px; }
input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="url"],
input[type="search"], input:not([type]), select, textarea {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  font-family: inherit;
  padding: 10px;
  border: 1px solid var(--muted);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
textarea { min-height: 5em; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border: 2px solid var(--red); }
/* A checkbox or radio button and its words are one label, all of it 44px tall, so a tap
   anywhere on the row ticks it: the box, the words, the space around them and the rest
   of the line (third check, 31: the row was a paragraph, and only the 24px box and the
   words answered). */
.check { display: flex; align-items: center; gap: 10px; margin: 12px 0; min-height: 44px; cursor: pointer; }
.check input { width: 24px; height: 24px; flex: none; margin: 0; }
/* A phone moves a touch to the nearest thing it thinks the finger meant (touch adjustment),
   reaching about 10px. So a row sits at least 12px from the next thing that answers a tap,
   and a row straight under a text field 16px: with 8px, a touch just inside the top of
   Remember me landed in the Password field, and one at the top of Light chose Auto
   (foundations round, SPEC.md 32). */
input + .check, select + .check, textarea + .check { margin-top: 16px; }
.days { display: flex; flex-wrap: wrap; gap: 0 14px; }
.rule-choice { border-top: 1px solid var(--line); padding: 4px 0; }
.rule-choice:first-of-type { border-top: 0; }
.rule-sub { padding-left: 34px; }
.pair { display: flex; flex-wrap: wrap; gap: 0 12px; }
.pair > .field { flex: 1 1 12rem; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  margin: 8px 8px 0 0;
  font-size: 17px;
  font-family: inherit;
  line-height: 1.2;
  border: 2px solid var(--link);
  border-radius: 6px;
  background: var(--link);
  color: var(--button-text);
  text-decoration: none;
  cursor: pointer;
}
button.secondary, .button.secondary { background: transparent; color: var(--link); }
button.link { background: none; border: 0; color: var(--link); padding: 0 4px; min-height: 44px; margin: 0; text-decoration: underline; }
button[disabled] { opacity: 0.6; cursor: default; }
form.inline { display: inline; }
.cancel { display: inline-block; padding: 10px 4px; }
.when { display: flex; flex-wrap: wrap; }
.when button { flex: 1 1 auto; }

/* Today's heading with the jump to the capture box beside it (no extra height). */
.heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.heading-row h1 { margin-right: auto; }
.heading-row .jump { margin: 0; }

/* Rows: the Needs-you list, My list, and every other plain list. */
ul.rows { list-style: none; padding: 0; margin: 0; }
ul.rows > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
/* A row that starts with its title link: the link's own padding is the space above it. */
ul.rows > li:has(> .row-title:first-child > a) { padding-top: 2px; }
ul.plain { padding-left: 20px; margin: 6px 0; }
ul.plain li { margin: 4px 0; }
.row-title { font-weight: 600; margin: 0 0 2px; }
.row-title a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.row-words { margin: 2px 0; }
.row-actions { display: flex; flex-wrap: wrap; align-items: flex-start; }
.label { font-size: 15px; color: var(--muted); white-space: nowrap; }
.item-actions { display: flex; flex-wrap: wrap; align-items: flex-start; }
.more-links a { display: inline-block; padding: 10px 8px 10px 0; }

/* The More menu: a summary that looks like a quiet button, opening into a list. */
details.more { display: inline-block; vertical-align: top; margin: 8px 8px 0 0; }
details.more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--link);
  cursor: pointer;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary { border-color: var(--link); }
.more-list { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 0 0; }
.more-list .menu, .more-list form.inline button.menu { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 4px;
  background: none; border: 0; color: var(--link); text-decoration: underline; font-size: 17px; }
.more-list form { margin: 0; }
details.fold { margin: 12px 0; }
details.fold > summary { min-height: 44px; display: flex; align-items: center; color: var(--link); cursor: pointer; }

/* Tabs on My list */
.tabs { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 8px 0; }
.tabs a { padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
.tabs a.current { font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; }
.filters > .field { flex: 1 1 15rem; margin: 6px 0; }
.pager a { margin-right: 16px; display: inline-block; padding: 10px 0; }

/* Steps */
.step-now { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--box); }
.step-text { font-size: 21px; font-weight: 600; }
ol.steps { padding-left: 24px; }
ol.steps li { margin: 6px 0; }
ol.steps li.ticked { color: var(--muted); }
.tick { color: var(--green); font-weight: 600; }

/* Facts on a switch-off row */
dl.facts { margin: 12px 0; }
dl.facts dt { font-weight: 600; margin-top: 10px; }
dl.facts dd { margin: 0; }
.state strong { margin-right: 4px; }

.notes li { margin: 10px 0; }
.notes .muted { margin: 0; font-size: 15px; }
li.pasted { padding-left: 8px; border-left: 3px solid var(--amber); }
.sort-item { margin: 12px 0; }
.park-rest { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); }
.vitals-line { margin-top: 20px; }

.codes { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; }
.key { font-family: ui-monospace, Menlo, Consolas, monospace; }
.qr svg { width: 220px; height: 220px; background: #ffffff; }
.refresh-note { padding: 8px 0; }