/* Reading-first layout; color reinforces text labels, never replaces them. */
#app:has(.opening) { width: min(100%, 64rem); }
.opening { width: 100%; }
.opening-header { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: 1rem clamp(1rem,4vw,2.5rem); border-bottom: 1px solid var(--line); }
.opening-brand { display: flex; align-items: center; gap: .55rem; margin-right: auto; font-size: 1.1rem; }
.opening-brand svg { width: 1.3rem; height: 1.3rem; }
.opening-account { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-2); }
.opening select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: .5rem; min-height: 44px; padding: .5rem; }
.opening-main { padding: clamp(1rem,4vw,2.5rem); display: grid; gap: 1.4rem; }
.opening h1, .opening h2, .opening h3, .opening h4 { text-transform: none; letter-spacing: -.02em; margin: 0; text-wrap: pretty; }
.opening h1 { font-size: clamp(1.7rem,4vw,2.4rem); font-weight: 650; line-height: 1.18; }
.opening h2 { font-size: 1.4rem; line-height: 1.4; }
.opening h3 { font-size: 1.12rem; }
.opening h4 { font-size: 1rem; line-height: 1.5; color: var(--accent); margin-bottom: .4rem; }
.opening h2 small, .opening h3 small { display: block; color: var(--ink-2); font-size: .8rem; font-weight: 400; letter-spacing: 0; margin-top: .3rem; }
.opening p { margin: .35rem 0; }
.opening-button, .opening .primary, .opening-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem .85rem; border-radius: .55rem; border: 1px solid var(--line-2); font: inherit; font-size: .875rem; font-weight: 550; text-decoration: none; cursor: pointer; }
.opening-button, .opening-link { color: var(--ink); background: var(--surface); }
.opening .primary { color: var(--accent-ink); background: var(--accent); border-color: transparent; width: auto; }
.opening button:hover:not(:disabled), .opening-link:hover { filter: brightness(1.12); }
.opening button:disabled { opacity: .45; cursor: default; }
.opening :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.opening h1:focus { outline: none; }
.opening-actions, .opening-back { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* The row that sits under a heading and lets him decide about that section without reading it
   first (note 0mu7f4ht1-9ytt7n). It is pulled up against its heading so the two read as one
   unit, and pushed away from the reading below it. */
.opening-dispatch { margin: -.35rem 0 .15rem; }
.opening-group { display: grid; gap: 1.25rem; padding: clamp(1rem,3vw,1.6rem); background: var(--surface); border: 1px solid var(--line); border-radius: .85rem; scroll-margin-top: 1.5rem; }
.opening-topic { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.opening-brief { display: grid; gap: 1.25rem; }
.opening-brief article { border-left: 3px solid var(--line-2); padding-left: 1rem; max-width: 72ch; }
.opening-brief p { line-height: 1.8; margin-bottom: .75rem; }
.opening-brief strong { font-weight: 650; }
.opening-highlight { background: oklch(.84 .07 215 / .12); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.opening-muted { color: var(--ink-2); font-size: .85rem; line-height: 1.6; }
.opening-mode, .opening-hold, .opening-next, .opening-receipt, .opening-error, .opening-project-key { padding: .85rem 1rem; border: 1px solid var(--line-2); border-radius: .55rem; line-height: 1.6; }
.opening-project-key { display: grid; gap: .45rem; background: var(--surface-2); }
.opening-project-key p { margin: 0; }
.opening-ours { display: inline-flex; align-items: center; gap: .2rem; margin: .15rem .4rem .15rem 0; font-size: .85rem; }
.opening-ours .opening-emoji { margin-right: 0; }
.opening-mode { background: var(--surface-2); font-size: .85rem; color: var(--ink-2); }
.opening-mode strong { color: var(--ink); }
.opening-hold { font-size: .85rem; border-left: 3px solid var(--attention); }
.opening-next, .opening-receipt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; background: var(--surface-2); border-left: 3px solid var(--accent); }
.opening-error { border-left: 3px solid var(--critical); }
#opening-search { display: flex; gap: .6rem; align-items: end; }
#opening-search label { display: grid; gap: .4rem; flex: 1; }
#opening-search input { min-width: 0; width: 100%; min-height: 44px; padding: .6rem; border: 1px solid var(--line-2); border-radius: .5rem; background: var(--surface); }
.opening-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.opening-list li { display: flex; gap: .5rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: .65rem; padding: .75rem; }
.opening-list input[type=checkbox] { flex-shrink: 0; width: 24px; height: 24px; margin: .4rem; accent-color: var(--accent); }
.opening-email { text-align: left; background: none; border: 0; min-width: 0; width: 100%; display: grid; gap: .5rem; padding: .3rem; cursor: pointer; }
.opening-email span { color: var(--ink-2); font-size: .8rem; }
.opening-email strong { font-size: 1rem; }
.opening-email, .opening-email-body, .opening-brief { overflow-wrap: anywhere; }
.opening-email-body { white-space: pre-wrap; font-size: 1rem; line-height: 1.8; max-width: 76ch; }
@media (max-width: 520px) {
  /* ── THE TOP OF THE PHONE SCREEN (note 0mu7f4ht1-9ytt7n) ──────────────────────────────────
     Four controls wrapped as a flex row landed 2 + 1: the name on its own line, the mailbox
     and the reading list beside each other, and Menu stranded on a third line by itself.
     That measured 163px of chrome on an 812px phone — a fifth of the screen before a single
     email — and the orphaned button is what reads as broken.
     Two fixed rows instead, which is what the controls actually are: who and where on top,
     what to look at underneath. Two columns, so nothing can wrap into a third row however
     long a mailbox is named. */
  .opening-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem .6rem; }
  .opening-brand { grid-area: 1 / 1; margin-right: 0; }
  .opening-header > [data-attend="menu"] { grid-area: 1 / 2; }
  .opening-account { grid-area: 2 / 1; min-width: 0; }
  .opening-account select { flex: 1; min-width: 0; }
  .opening-header > [data-attend="saved"] { grid-area: 2 / 2; }
  /* One rhythm, two distances: the opening lines belong together, a group is a new thought. */
  .opening-main { gap: .9rem; }
  .opening-main > .opening-group { margin-top: .5rem; }
  .opening-group { padding: 1rem; }
  .opening-actions .primary { width: 100%; }
  /* The reply card stacked its button beside nothing and left a gap where the rest of the row
     would have been. Stack it on purpose instead, full width like every other primary. */
  .opening-next, .opening-receipt { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: .7rem; }
  .opening-next .primary, .opening-receipt .opening-button { width: 100%; }
  .opening-brief article { padding-left: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .opening *, .opening *::before, .opening *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.opening-email-body .opening-link { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent); font-size: inherit; text-decoration: underline; }

/* Four visible reading sections: meaning, explanation, limits, next step. */
.opening-brief .opening-explained { border-left: 0; padding-left: 0; max-width: 70ch; display: grid; gap: 1rem; }
.opening-explained h4 { color: var(--ink); font-size: 1.3rem; line-height: 1.35; }
.opening-explained h5 { margin: 0 0 .3rem; font-size: .85rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.opening-explained h5 span { margin-right: .3rem; }
.opening-explained p { margin: 0 0 .65rem; line-height: 1.7; }
.opening-explained p:last-child { margin-bottom: 0; }
.opening-takeaway { border-left: 3px solid var(--accent); padding: .7rem .9rem; background: var(--surface-2); border-radius: 0 .5rem .5rem 0; }
.opening-caution { border-left: 3px solid var(--attention); padding-left: .9rem; }
.opening-suggestion { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: .55rem; padding: .85rem 1rem; }
.opening-explained > button { justify-self: start; }