:root {
  --ink: #2b2a33; --muted: #6b6878; --line: #e4e1ea; --paper: #fbfaf7;
  --bar: #ffffff; --accent: #5b4b8a; --accent-ink: #ffffff; --tint: #efecf6;
  --error: #b00020; --rule: #dddddd; --banner: #fff3cd; --banner-line: #e0c060; --highlight: #ffe9a8;
  --shadow-color: rgb(0 0 0 / .04);
  --control-border: #858190;
  --staging: #c62828; --staging-ink: #ffffff;
  /* The Gaps drawing's coverage ramp: one hue, light to dark. Every cell is also outlined and
     its number is in the table beneath, so no meaning rests on these colors alone. */
  --gap-0: #f3f1f8; --gap-1: #d3cce6; --gap-2: #a99bd0; --gap-3: #7c6bb0; --gap-4: #473874;
}
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper);
       max-width: 64rem; margin: 1rem auto 2rem; padding: 0 1rem; line-height: 1.5; }
a { color: var(--accent); }
label { display: block; margin-top: 1rem; }
input { font: inherit; padding: .4rem; width: 100%; box-sizing: border-box; }
button { font: inherit; margin-top: 1rem; padding: .4rem 1rem; }
.error { color: var(--error); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; background: var(--bar);
          border: 1px solid var(--line); border-radius: 14px; padding: .5rem .75rem; margin-bottom: 1.5rem;
          box-shadow: 0 1px 2px var(--shadow-color), 0 4px 12px var(--shadow-color); }
.topbar .brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .01em; color: var(--ink); text-decoration: none; margin-right: .5rem; }
.topbar .tabs, .topbar .tools, .topbar .account { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.topbar .tools { padding-left: .75rem; border-left: 1px solid var(--line); }
.topbar .tabs a, .topbar .tools a { color: var(--ink); text-decoration: none; padding: .3rem .75rem; border-radius: 999px; }
.topbar .tools a { color: var(--muted); font-size: .92em; }
.topbar .tabs a:hover, .topbar .tools a:hover { background: var(--tint); }
.topbar a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.topbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar .account { margin-left: auto; gap: .5rem; }
.topbar form { margin: 0; }
.topbar select { font: inherit; padding: .2rem; }
.topbar button { margin: 0; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--control-border); background: var(--bar); color: var(--ink); cursor: pointer; }
.topbar button:hover { background: var(--tint); }
.topbar .change { color: var(--accent); font-size: .92em; text-decoration: none; }
.topbar .whoami { color: var(--muted); font-size: .9em; background: var(--tint); padding: .2rem .65rem; border-radius: 999px; }
.family-menu { position: relative; }
.family-menu > summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--control-border);
  border-radius: 999px; background: var(--bar); color: var(--ink); cursor: pointer; list-style: none; box-sizing: border-box; }
.family-menu > summary::-webkit-details-marker { display: none; }
.family-menu > summary:hover { background: var(--tint); }
.family-menu > summary:focus-visible, .family-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.family-menu ul { list-style: none; margin: .25rem 0 0; padding: .25rem; border: 1px solid var(--control-border); border-radius: 12px; background: var(--bar); }
.family-menu li { margin: 0; }
.family-menu li form { margin: 0; }
.family-menu li button, .family-menu li > span { display: block; width: 100%; min-height: 2.75rem; padding: .5rem .9rem; text-align: left; box-sizing: border-box; }
.family-menu li > span { font-weight: 600; }
@media (max-width: 40rem) {
  .topbar .tools { border-left: 0; padding-left: 0; }
  .topbar .account { margin-left: 0; width: 100%; }
}
footer.buildinfo { display: table; margin: 3rem auto 1rem; padding: .35rem .9rem; border: 1px solid var(--line);
                   border-radius: 999px; background: var(--bar); color: var(--muted); font-size: .82em; }
footer.buildinfo a { color: var(--accent); text-decoration: none; font-family: ui-monospace, monospace; }
footer.buildinfo .stagingpill { background: var(--staging); color: var(--staging-ink); font-weight: 700; letter-spacing: .06em;
                                padding: .05rem .5rem; border-radius: 999px; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
input[type="radio"], input[type="checkbox"] { width: auto; margin: 0; padding: 0; accent-color: var(--accent); }
fieldset.choices { border: 1px solid var(--line); border-radius: 12px; background: var(--bar); padding: 0; margin: 1rem 0; overflow: hidden; }
fieldset.choices legend { font-weight: 600; padding: 0 .5rem; margin-left: .5rem; }
fieldset.choices .error { margin: .5rem .75rem; }
label.choice { display: flex; align-items: center; gap: .65rem; margin: 0; padding: .6rem .85rem; cursor: pointer; }
fieldset.choices label.choice + label.choice { border-top: 1px solid var(--line); }
label.choice:hover { background: var(--tint); }
label.choice:has(input:checked) { background: var(--tint); font-weight: 600; }
ul.outline { list-style: none; padding: 0; margin: .25rem 0 1.5rem; }
ul.outline li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--line); }
ul.outline .row-text { flex: 1 1 18rem; }
ul.outline .badge { display: inline-block; font-size: .78em; color: var(--muted); background: var(--tint);
                    padding: 0 .55rem; border-radius: 999px; margin-left: .25rem; white-space: nowrap; }
ul.outline .row-actions { display: inline-flex; gap: .4rem; align-items: center; margin-left: auto; }
ul.outline .row-actions a, ul.outline .row-actions button { font-size: .85em; margin: 0; padding: .1rem .6rem; min-height: 1.5rem; display: inline-flex; align-items: center;
                    border: 1px solid var(--control-border); border-radius: 999px; background: var(--bar); color: var(--ink);
                    text-decoration: none; cursor: pointer; }
ul.outline .row-actions a:hover, ul.outline .row-actions button:hover { background: var(--tint); }
table { border-collapse: collapse; width: 100%; margin: .5rem 0 1.5rem; }
th, td { border-bottom: 1px solid var(--rule); padding: .3rem .5rem; text-align: left; vertical-align: top; }
td input, td select { width: auto; }
form.inline { display: inline; }
/* The operator's family list: every control is a 44px target. */
table.families select, table.families input:not([type="hidden"]), table.families form.inline button { min-height: 44px; margin: .15rem 0; box-sizing: border-box; }
table.families form.inline button { padding: .1rem .9rem; }
/* A deletion request on the operator's list: its own opaque ground and ink (AA, 13:1). */
table.families .deletion { margin: 0 0 .25rem; color: var(--ink); background: var(--bar); }
form.inline button { margin: 0; padding: .1rem .6rem; min-height: 1.5rem; }
.muted { color: var(--muted); }
.default-submit { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.support-banner { background: var(--banner); border: 1px solid var(--banner-line); padding: .5rem 1rem; margin-bottom: 1rem; }
.words span { cursor: pointer; }
.words span:hover { background: var(--highlight); }
/* A word an editor fixed (editors only): underlined, with "Heard as: ..." in its title. */
.words .fixed { text-decoration: underline dotted; text-underline-offset: 0.2em; }
audio { width: 100%; }
fieldset.choices legend .select-all { font-weight: 400; margin-left: .75rem; }
fieldset.choices legend label.choice { display: inline; padding: 0; background: none; }
label.choice input { width: auto; flex: none; padding: 0; }
label.choice:has(input:disabled) { color: var(--muted); cursor: default; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: .5rem 0 1.5rem; }
.photo-grid a.tile, .photo-grid .tile { display: block; color: var(--ink); text-decoration: none; }
.photo-grid .frame { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
                     background: var(--tint); border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
                     font-size: .9em; text-align: center; box-sizing: border-box; }
.photo-grid .frame .note { padding: .5rem; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid .cap { display: block; margin-top: .25rem; font-size: .9em; overflow-wrap: anywhere; }
.photo-grid a.tile:hover .frame, .photo-grid a.tile:focus-visible .frame { border-color: var(--accent); }
/* Date photos: a tile is a label holding its checkbox; a checked tile is framed in the accent. */
.photo-grid label.tile { margin-top: 0; cursor: pointer; }
.photo-grid label.tile .cap input { width: 1.5rem; height: 1.5rem; }
.photo-grid label.tile:has(input:checked) .frame { border: 3px solid var(--accent); }
form.dating .select-all { margin: 0 0 .5rem; }
form.dating fieldset { margin: 1rem 0; }
.photo-view { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.caption-text { white-space: pre-line; font-size: 1.1em; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .25rem 0 1rem; }
.chips li { display: inline-flex; align-items: center; gap: .25rem; background: var(--tint); border-radius: 999px; padding: .1rem .2rem .1rem .75rem; }
.chips form { display: inline; margin: 0; }
.chips li img { height: 4rem; width: auto; display: block; border-radius: .4rem; }
.chips button { margin: 0; padding: 0 .5rem; min-width: 1.5rem; min-height: 1.5rem; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1.1em; }
.person-results { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .25rem 0 1rem; }
.chips button:hover { color: var(--error); }
.suggestion { background: var(--tint); border-radius: 10px; padding: .5rem .9rem; margin: 1rem 0; }
.suggestion form { display: inline; }
.suggestion button { margin: 0 0 0 .5rem; }
/* The Outline timeline: her rows bold with a bar, relatives' muted (both AA on --paper). */
.timeline [hidden] { display: none !important; }
.timeline .filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.timeline .filters button, .timeline .decade-counts button, .timeline .summary button, .timeline .strip > button {
  margin: 0; padding: .15rem .75rem; border: 1px solid var(--control-border); border-radius: 999px; background: var(--bar);
  color: var(--ink); cursor: pointer; font-size: .9em; min-height: 1.5rem; }
.timeline .filters button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.timeline button:focus-visible, .timeline .strip a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.timeline .decade-counts { margin: -.5rem 0 .25rem; color: var(--muted); font-size: .92em; }
ul.outline li.ev.her { font-weight: 600; border-left: 4px solid var(--accent); padding-left: .6rem; }
ul.outline li.ev.family { color: var(--muted); }
ul.outline li.ev.family strong { font-weight: 500; }
ul.outline li.ev .icon { flex: none; width: 1.5rem; text-align: center; }
ul.outline li.ev.fold { display: block; padding: 0; border-left: 0; border-bottom: 0; }
ul.outline li.ev.fold > ul { list-style: none; padding: 0; margin: 0; }
ul.outline li.ev.fold > .summary { margin: 0; padding: .55rem .6rem; border-left: 4px solid var(--accent); border-bottom: 1px solid var(--line); }
ul.outline li.ev.story a { display: inline-block; padding: .6rem 0; }
ul.outline li.summary { color: var(--muted); }
ul.outline li.strip { display: block; }
.strip .strip-label { color: var(--muted); margin-right: .25rem; }
.strip .thumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0; }
.strip .thumbs a { display: block; }
.strip span[data-fold]:not([hidden]) { display: contents; }
.strip img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--tint); }
.strip a.thumb-note { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; box-sizing: border-box;
                      padding: .25rem; text-align: center; font-size: .8em; color: var(--ink); background: var(--tint);
                      border: 1px solid var(--control-border); border-radius: 8px; text-decoration: none; }
.strip .thumbs .badge { align-self: flex-end; }
.strip .nojs { margin-left: .5rem; }
.timeline .end-line { color: var(--muted); }
@media (max-width: 40rem) {
  .timeline .wide-only, .strip .thumbs > .wide-only { display: none; }
  /* An opened strip shows every thumbnail, the wide screen's four extra ones too. */
  .strip:has(span[data-fold]:not([hidden])) .thumbs > a.wide-only { display: block; }
  .strip:has(span[data-fold]:not([hidden])) .thumbs > a.thumb-note.wide-only { display: flex; }
  .strip:has(span[data-fold]:not([hidden])) .thumbs > .badge.wide-only { display: inline-block; }
}
@media (min-width: 40.01rem) {
  .timeline .phone-only { display: none; }
}
textarea { font: inherit; width: 100%; box-sizing: border-box; }
/* One look for every progress bar: the batch page, and each upload form (JS adds the bars). */
.progress-block { margin: 1rem 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
progress.tma-progress { display: block; width: 100%; height: 1rem; appearance: none; border: 1px solid var(--accent);
                        border-radius: 999px; background: var(--tint); overflow: hidden; accent-color: var(--accent); }
progress.tma-progress::-webkit-progress-bar { background: var(--tint); }
progress.tma-progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .3s ease; }
progress.tma-progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
progress.tma-progress:indeterminate, progress.tma-progress:indeterminate::-webkit-progress-bar { background: repeating-linear-gradient(90deg, var(--tint) 0 1rem, var(--line) 1rem 2rem); }
.progress-text { margin: .35rem 0 0; font-size: .95em; color: var(--ink); overflow-wrap: anywhere; }
.upload-progress { margin: 1rem 0; }
.upload-progress button { margin-top: .5rem; }
ul.upload-rows { list-style: none; padding: 0; }
ul.upload-rows li { margin: .5rem 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  progress.tma-progress::-webkit-progress-value { transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.card { background: var(--bar); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.25rem;
        box-shadow: 0 1px 2px var(--shadow-color), 0 4px 12px var(--shadow-color); display: flex; flex-direction: column; }
.card h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.card .archive { color: var(--muted); font-size: .9rem; margin: .15rem 0 0; }
.card .count { margin: .75rem 0 0; }
.card form { margin-top: auto; padding-top: 1rem; }
.card button { margin: 0; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
               padding: .5rem 1.6rem; font-weight: 600; cursor: pointer; }
.card button:hover, .card a.button:hover { filter: brightness(1.1); }
.card p.open { margin: auto 0 0; padding-top: 1rem; }
.card a.button { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none;
                 border-radius: 999px; padding: .5rem 1.6rem; font-weight: 600; }
.landing { max-width: 38rem; margin: 2.5rem auto 0; text-align: center; }
.landing .mark { display: flex; justify-content: center; margin-bottom: .5rem; }
.landing h1 { margin: .25rem 0 .5rem; font-size: 2rem; line-height: 1.2; }
.landing .lede { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.75rem; }
.landing .how { text-align: left; background: var(--bar); border: 1px solid var(--line); border-radius: 14px;
                padding: 1rem 1.25rem; margin: 0 0 2rem; }
.landing .how h2 { margin: 0 0 .6rem; font-size: 1.25rem; line-height: 1.2; }
.landing .how ol { margin: 0; padding-left: 1.6rem; }
.landing .how li { padding-left: .3rem; margin-bottom: .6rem; }
.landing .how li::marker { color: var(--accent); font-weight: 700; }
.landing .how .private { margin: .9rem 0 0; color: var(--muted); font-size: .95rem; }
.landing .signin { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none;
                   font-size: 1.15rem; font-weight: 600; padding: .75rem 2.5rem; border-radius: 999px; }
.landing .signin:hover { filter: brightness(1.1); }
.landing .signin:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.landing .phone { color: var(--muted); font-size: .92rem; margin-top: 1.5rem; }
/* The invitation-request form (v0.9): 16px text, 44px targets, nothing wider than the phone. */
.landing .testing { font-size: 1.1rem; margin: 0 0 1rem; }
.landing > .error { margin: 0 0 .75rem; }
.landing form.invite { text-align: left; background: var(--bar); border: 1px solid var(--line); border-radius: 14px;
                       padding: .25rem 1rem 1.25rem; margin: 0 0 2rem; }
.landing form.invite input, .landing form.invite textarea { font: inherit; font-size: 1rem; min-height: 44px; width: 100%; box-sizing: border-box;
                       padding: .5rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bar); color: var(--ink); }
.landing form.invite textarea { resize: vertical; display: block; }
.landing form.invite .error { margin: .25rem 0 0; }
.landing form.invite button { min-height: 44px; margin-top: 1.25rem; padding: .6rem 1.75rem; border: 0; border-radius: 999px;
                              background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; }
.landing form.invite button:hover { filter: brightness(1.1); }
.landing form.invite button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.landing .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.landing .member { margin: 0 0 .5rem; }
.landing .home { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .5rem; }
.parts { margin: 0 0 1rem; color: var(--muted); }
.parts a { color: var(--accent); }
/* Skip to content: 1 px and clipped (for TalkBack) until the keyboard reaches it. */
.skip-link { position: absolute; left: 0; top: 0; z-index: 10; width: 1px; height: 1px; padding: 0; overflow: hidden;
             clip-path: inset(50%); white-space: nowrap; background: var(--accent); color: var(--accent-ink);
             font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; }
.skip-link:focus { width: auto; height: auto; min-height: 48px; box-sizing: border-box; display: inline-flex;
                   align-items: center; padding: .5rem 1rem; overflow: visible; clip-path: none;
                   outline: 3px solid var(--ink); outline-offset: 2px; }
/* The Stories pages. Every suggestion says "suggested" in words (accent text, AA on paper, bar
   and tint) beside a dashed accent outline; the outline alone would not be enough. */
.topbar .count { display: inline-block; min-width: 1.2em; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px;
                 background: var(--accent); color: var(--accent-ink); font-size: .85em; text-align: center; }
.topbar a[aria-current="page"] .count { background: var(--accent-ink); color: var(--accent); }
.tag { display: inline-block; margin-left: .25rem; padding: 0 .45rem; border: 1px dashed var(--accent); border-radius: 999px;
       color: var(--accent); font-size: .8em; font-weight: 400; white-space: nowrap; }
.chips li.suggested { border: 1px dashed var(--accent); padding-right: .6rem; }
.chips li.suggested .tag { border: 0; padding: 0; }
.chips li.chip { padding-right: .75rem; }
.flag { display: inline-block; padding: 0 .5rem; border: 1px solid var(--banner-line); border-radius: 999px;
        background: var(--banner); color: var(--ink); font-size: .85em; }
.views { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.views a { padding: .2rem .8rem; border: 1px solid var(--control-border); border-radius: 999px; background: var(--bar);
           color: var(--ink); text-decoration: none; }
.views a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.views a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
ul.story-cards { list-style: none; padding: 0; margin: .5rem 0 1.5rem; }
ul.story-cards > li { background: var(--bar); border: 1px solid var(--line); border-radius: 14px; padding: .75rem 1rem; margin-bottom: .75rem; }
ul.story-cards p { margin: .2rem 0; }
ul.story-cards .story-title { font-weight: 600; font-size: 1.1em; }
ul.story-cards .meta { color: var(--muted); }
ul.story-cards .chips { margin: .35rem 0; }
.summary-label { margin-bottom: 0; color: var(--muted); font-size: .9em; }
.summary { margin-top: .15rem; }
#story-player { margin: 1rem 0; }
#story-player ol.passages { color: var(--muted); font-size: .9em; padding-left: 1.5rem; }
#story-player button[data-play] { margin: 0 0 .5rem; }
/* The story page's decisions (v0.5.3): Confirm, Change… and Not right beside each suggestion,
   44 px targets with a visible focus ring; "Change…" opens its form in the page. */
.decide { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .25rem 0 .25rem .5rem; }
.decide form { display: inline; margin: 0; }
.decide button, .chips .decide button, .decide > a, .change > summary, .title-tools button, .title-tools summary,
.story-tools button, form.timeless button, form.confirm-all button {
  display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; margin: 0; padding: 0 .9rem;
  border: 1px solid var(--control-border); border-radius: 999px; background: var(--bar); color: var(--ink);
  font: inherit; font-size: 1em; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.decide button:hover, .decide > a:hover, .change > summary:hover, .title-tools button:hover, .title-tools summary:hover,
.story-tools button:hover, form.timeless button:hover, form.confirm-all button:hover { background: var(--tint); }
.chips .decide button:hover { color: var(--ink); }
.decide button:focus-visible, .decide > a:focus-visible, .change > summary:focus-visible, .title-tools button:focus-visible,
.title-tools summary:focus-visible, .story-tools button:focus-visible, form.timeless button:focus-visible,
form.confirm-all button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.change > summary { list-style: none; width: fit-content; }
.change > summary::-webkit-details-marker { display: none; }
.change[open] { flex-basis: 100%; }
.change form, .title-tools form, .title-form { margin: .5rem 0; }
.change input, .title-tools input, .title-form input { max-width: 24rem; }
.decide .change form button, .change form button, .title-tools form button, .title-form button { margin-top: .5rem; }
.chips li:has(.decide) { flex-wrap: wrap; border-radius: 14px; padding: .25rem .5rem .25rem .75rem; }
.title-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin: 0 0 1rem; }
.title-tools form { display: inline; margin: 0; }
.title-tools details[open] { flex-basis: 100%; }
.title-tools details[open] form { display: block; margin-top: .5rem; }
ul.dates li, ul.marks li { margin: .35rem 0; }
.check { display: inline-block; margin-left: .25rem; padding: 0 .45rem; border: 1px solid var(--banner-line); border-radius: 999px;
         background: var(--banner); color: var(--ink); font-size: .85em; }
form.timeless fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .75rem .75rem; margin: 1rem 0; }
form.timeless fieldset button + button { margin-left: .5rem; }
form.confirm-all { margin: 1.5rem 0; }
.story-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.story-tools form { margin: 0; }
.story-tools p { flex-basis: 100%; margin: 0; }

/* The recording page's segment tools (v0.5.3): one row of links and buttons under each
   story, wrapping on a narrow phone; the Split and "Move the end" options as a plain list,
   each choice and its "Hear it" on one line where it fits. */
ol.segments > li { margin-bottom: .75rem; }
.segment-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .35rem; }
.segment-tools a, .segment-tools button { min-height: 44px; display: inline-flex; align-items: center; }
.segment-tools p { flex-basis: 100%; margin: 0; }
ul.compare, ul.recut-options { list-style: none; padding: 0; margin: .5rem 0 1rem; }
ul.compare > li, ul.recut-options > li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .35rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
ul.compare button, ul.recut-options button { min-height: 44px; }
ul.recut-options label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }

/* People and places (v0.5.3 Task 9): a person's chip is solid (a suggestion's is dashed and
   says "suggested"); "Who is …?" and the tag page offer each choice as its own 44 px button,
   its reasons beside it. */
.chips li.chip:not(.suggested) { border: 1px solid var(--accent); }
ul.candidates, ul.unresolved { list-style: none; padding: 0; margin: .25rem 0 1rem; }
ul.candidates li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0; }
.who-choices button, .person-results button, .find-words button, #tag-selection button {
  min-height: 2.75rem; margin-top: 0; }
.who-choices button:focus-visible, .person-results button:focus-visible, #tag-selection button:focus-visible,
.find-words button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.who-choices h2 { font-size: 1.1em; margin: 1.5rem 0 .5rem; }
.find-someone, .new-name { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.find-someone label, .new-name label { flex-basis: 100%; }
.find-someone input, .new-name input, .new-name select { max-width: 24rem; min-height: 2.75rem; }
label.spelling { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin: 1rem 0; }
.said strong { background: var(--highlight); }
#tag-selection { margin: .5rem 0 1rem; }
#tag-selection p { margin: .25rem 0; }
.chips li.chip > a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .6rem; }
.chips li.chip > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Book order: the move buttons are forms side by side, each a 44 px target. */
.book-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.book-controls form { margin: 0; display: flex; align-items: center; gap: .4rem; }
.book-controls button { margin: 0; min-height: 44px; min-width: 44px; }
/* The drag handle (v0.5.4): pointer only, shown by the page's script; the buttons stay the keyboard path. */
.book-controls .drag-handle { cursor: grab; touch-action: none; user-select: none; letter-spacing: -.1em; }
.book-controls .drag-handle[hidden] { display: none; }
.book-order .dragging { opacity: .5; }
.book-order .drag-placeholder { min-height: 3rem; border: 2px dashed var(--accent); border-radius: 14px; background: none; padding: 0; }
.book-controls select { min-height: 44px; }
/* The sign-up confirm page: whose account pressing the button makes, in large type. */
.signing-up-as { font-size: 1.25rem; }

/* Gaps (v0.7): the drawings are inline SVG styled only by these classes (the CSP forbids style
   attributes). A shade is always paired with its number in the table under the picture. */
svg.gap-drawing { display: block; width: 100%; height: auto; max-width: 45rem; }
.gap-cell { stroke: var(--control-border); stroke-width: 1; }
.gap-shade-0 { fill: var(--gap-0); }
.gap-shade-1 { fill: var(--gap-1); }
.gap-shade-2 { fill: var(--gap-2); }
.gap-shade-3 { fill: var(--gap-3); }
.gap-shade-4 { fill: var(--gap-4); }
/* Suggested-only cover: the same shade with a dashed outline, so it differs by shape, not color. */
.gap-suggested { stroke-dasharray: 3 2; stroke-width: 2; }
.gap-tick { stroke: var(--ink); stroke-width: 2; }
.gap-band { fill: var(--tint); stroke: var(--accent); stroke-width: 2; }
.gap-bar { fill: var(--accent); }
/* 33 units in the 720-unit viewBox is 16 px in the 352 px a 384 px phone leaves (1rem gutters). Only years go in the picture. */
.gap-label { fill: var(--ink); font: inherit; font-size: 33px; }
table.gap-table { border-collapse: collapse; width: 100%; max-width: 45rem; margin: .5rem 0 1.5rem; }
table.gap-table th, table.gap-table td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--line); }
/* The Gaps pages' links and buttons are 44px targets; the current toggle reads bold too. */
.gap-tellers { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; margin: .25rem 0 .5rem; }
.gap-toggle { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.gap-tellers a, .gap-toggle a, table.gap-table a, .gap-photo-form button { display: inline-flex; align-items: center; min-height: 44px; }
.gap-tellers a[aria-current], .gap-toggle a[aria-current] { font-weight: 700; }
.gap-photo-form { margin: .35rem 0 0; }
.gap-first { margin-top: 2rem; }
/* The next-call page: a list to read aloud and the same words in a box to copy. */
.next-call-text { width: 100%; max-width: 45rem; min-height: 14rem; font: inherit; padding: .75rem; box-sizing: border-box; }
/* The Book (v0.8): readable paragraphs, 44px play buttons and links, the word being heard. */
.book-contents li, .also-told li { margin: .25rem 0; }
.book-contents a, .book-nav a, .also-told a { display: inline-flex; align-items: center; min-height: 44px; }
.book-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .5rem 0 1rem; }
.book-story { max-width: 42rem; margin: 2rem 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.book-story h2 { margin-bottom: .25rem; }
.book-story .tag-line, .book-story .teller, .book-story .when { margin: .25rem 0; color: var(--muted); }
.book-photos a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.book-para { font-size: 1.15em; line-height: 1.6; margin: 0 0 1rem; }
.book-para .para-play, .book-story [data-keep-listening] { min-height: 44px; min-width: 44px; margin: 0 .5rem 0 0; padding: .25rem .9rem;
  border: 1px solid var(--control-border); border-radius: 999px; background: var(--bar); color: var(--ink); cursor: pointer; font-size: 1rem; vertical-align: middle; }
.book-para .para-play[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.book-para .para-play:focus-visible, .book-story [data-keep-listening]:focus-visible, .book-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.book-para .is-playing { background: var(--highlight); }
@media print {
  .para-play, [data-keep-listening], .book-nav, .player-note { display: none; }
  .book-story { break-inside: avoid-page; border-top: 0; }
  .book-para .is-playing { background: none; }
  .topbar, .no-print, .next-call-text { display: none; }
  .gap-cell, .gap-band, .gap-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body { background: var(--bar); max-width: none; margin: 0; }
}

/* People she knows (v0.9): each person's words on one line, then the row's tools; each quote
   of her words with its story link; every button, link, summary and field a 44 px target. */
ul.connections, ul.suggestions { list-style: none; padding: 0; margin: .5rem 0 1.5rem; }
ul.connections > li, ul.suggestions > li { padding: .5rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.connection-words { margin: 0 0 .35rem; }
.connection-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.connection-tools > form { margin: 0; }
.connection-tools button, .connection-form button, .connections-add button { min-height: 44px; margin: .5rem 0 0; }
.connection-tools > form button { margin: 0; }
.connection-form, .connections-add { max-width: 32rem; }
.connection-form select, .connection-form input:not([type="radio"]), .connections-add select,
.connections-add input:not([type="radio"]):not([type="hidden"]) { min-height: 44px; max-width: 24rem; box-sizing: border-box; }
.connection-form fieldset, .connections-add fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .75rem .75rem; margin: .75rem 0; }
label.choice { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.connection-form .years, .connections-add .years { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.connection-form .years input, .connections-add .years input { max-width: 8rem; }
ul.quotes { margin: .25rem 0 .5rem; padding-left: 1.25rem; }
ul.quotes a, ul.suggestions p > a { display: inline-block; box-sizing: border-box; min-height: 44px; padding-block: .6rem; }
ul.connections button:focus-visible, ul.suggestions button:focus-visible, .connections-add button:focus-visible,
ul.quotes a:focus-visible, ul.suggestions p > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Story reminders (v0.10): the Reminders panel, the one-line summaries that link to it, and
   the Gaps page's "Don't ask her about this" buttons; every button, link and field a 44 px
   target with a visible focus ring. */
.reminder-summary a { display: inline-flex; align-items: center; min-height: 44px; }
.reminder-words { font-weight: 600; }
.reminder-form { max-width: 32rem; }
.reminder-form button, form.reminder-again button, form.gap-remind button { min-height: 44px; padding: .1rem .9rem; }
.reminder-form input:not([type="hidden"]) { min-height: 44px; box-sizing: border-box; }
.reminder-form input[type="date"] { max-width: 12rem; }
ul.reminder-lines, ul.reminder-history { margin: .25rem 0 1rem; padding-left: 1.25rem; overflow-wrap: anywhere; }
ul.reminder-history > li { margin-bottom: .75rem; }
form.reminder-again { margin-left: .5rem; }
form.gap-remind { display: block; margin: .25rem 0 0; }
.reminder-summary a:focus-visible, .reminder-form button:focus-visible, form.reminder-again button:focus-visible,
form.gap-remind button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The story reminder's snooze and stop pages (v0.10): one big button for her. */
button.reminder-big { min-height: 56px; padding: .75rem 1.5rem; font-size: 1.25rem; }
button.reminder-big:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The story reminder's topic link page, /tell/<token> (v0.10): big, plain words for her. */
#tell { max-width: 38rem; margin: 2rem auto 0; }
#tell .tell-heading { font-size: 1.5rem; line-height: 1.2; margin: 0 0 1rem; }
#tell .tell-topic { font-size: 1.5rem; line-height: 1.35; margin: 0 0 1.5rem; overflow-wrap: anywhere; }
#tell .tell-big { font-size: 1.35rem; line-height: 1.4; margin: 0 0 1rem; }
#tell .tell-small { color: var(--ink); margin: 0; }
body:has(#tell) footer.buildinfo, body:has(.her-page) footer.buildinfo {
  /* Her email's pages read at her app's 7:1, not the editor's 4.5:1: the footer in ink. */
  color: var(--ink);
}

/* The Printed book page (v0.11): 44 px targets for the make form and the owner's tools. */
.book-editions-link a, a.edition-download { display: inline-flex; align-items: center; min-height: 44px; }
.edition-form input[name="title"] { min-height: 44px; width: 100%; max-width: 32rem; box-sizing: border-box; }
.edition-form fieldset { border: 0; padding: 0; margin: .75rem 0; }
.edition-form button, .edition-tools button { min-height: 44px; padding: .1rem .9rem; margin: .5rem 0 0; }
ul.editions { list-style: none; padding: 0; }
ul.editions > li { border-top: 1px solid var(--line); padding: .75rem 0; }
ul.editions h3 { margin: 0 0 .25rem; }
.edition-meta, .edition-status { margin: .25rem 0; }

/* Restoring a family (v0.12): 44 px targets for the file field, the buttons and the links
   to the page, and room for the status line that reads out the upload's progress. */
a.restore-link, .family-menu-more a, .restore-choice a { display: inline-flex; align-items: center; min-height: 44px; }
.restore-form input[type="file"] { min-height: 44px; display: block; margin: .25rem 0 .75rem; }
.restore-form button, .restore-cancel button, ul.restore-lines button { min-height: 44px; padding: .1rem .9rem; }
.restore-status { min-height: 1.5em; font-weight: 600; }
ul.restore-lines { list-style: none; padding: 0; }
ul.restore-lines > li { border-top: 1px solid var(--line); padding: .75rem 0; }
ul.restore-lines p { margin: 0 0 .25rem; overflow-wrap: anywhere; }
.family-menu-more { margin: .25rem 0 0; }
.restore-form input:focus-visible, .restore-form button:focus-visible, .restore-cancel button:focus-visible,
ul.restore-lines button:focus-visible, a.restore-link:focus-visible, .family-menu-more a:focus-visible,
.restore-choice a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The Export page (v0.12): 44 px targets for the book's link, the download and the button. */
.book-export-link a, a.export-download { display: inline-flex; align-items: center; min-height: 44px; }
.export-form button { min-height: 44px; padding: .1rem .9rem; margin: .5rem 0 0; }
.export-state .note { margin: .25rem 0; }