/* Keeper — self-contained, readable without JavaScript or external assets. */
:root {
  --topbar: 0rem;
  --paper: #f7f8f4;
  --ink: #192421;
  --ink-soft: #65716b;
  --line: #e4e9e2;
  --card: #ffffff;
  --accent: #245d50;
  --accent-soft: #eaf3ed;
  --external: #995630;
  --external-soft: #fff1e8;
  --highlight: #f27c50;
  --sidebar-width: 15.5rem;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* `anywhere`, not `break-word`: it is the only value that also shrinks an element's
   min-content size, which is what lets a long Teams join URL, file name or base64 blob wrap
   inside a flex or grid item instead of stretching the page past a phone screen. Real
   transcripts are full of them. */
body {
  margin: 0; background: radial-gradient(ellipse 54rem 34rem at 92% -14%, #e9f1e9 0%, transparent 72%), var(--paper);
  color: var(--ink); overflow-wrap: anywhere;
  font: 15px/1.55 "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1 { font: 500 clamp(2.5rem, 4vw, 4rem)/1.06 "Iowan Old Style", "Baskerville", Georgia, serif; letter-spacing: -.055em; margin: 0 0 .6rem; }
h2 { font: 500 1.55rem/1.2 "Iowan Old Style", "Baskerville", Georgia, serif; letter-spacing: -.025em; margin: 2rem 0 .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
p { margin: .5rem 0; }
code { font-family: var(--mono); font-size: .85em; }
main { max-width: 88rem; margin: 0 auto 0 var(--sidebar-width); padding: clamp(2rem, 4vw, 4.5rem) clamp(1.25rem, 5vw, 5rem) 6rem; }
.muted { color: var(--ink-soft); }
.fine { font-size: .82rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Off-screen until the keyboard reaches it, so a Tab from the top of any page can jump the
   search box and nav instead of stepping through them on every meeting. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--accent); color: #fff; padding: .5rem .9rem; border-radius: 0 0 8px 0;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 0; }
button, input, select { font: inherit; color: inherit; }
input[type="search"], input[type="date"], input[type="text"], input[type="password"], select {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .75rem; min-width: 0;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .85rem; cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
button:hover { border-color: #9cbaa8; transform: translateY(-1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.danger { background: var(--external-soft); border-color: var(--external); color: var(--external); font-weight: 600; }
form.confirm { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; color: var(--ink-soft); }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }
.inline { display: inline; }

/* Quiet app rail: search is always one keyboard stop after the brand. */
.topbar {
  display: flex; flex-direction: column; gap: 0; align-items: stretch;
  padding: 2rem 1rem 1.2rem; border-right: 1px solid var(--line); background: #f1f4ed;
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 5;
  /* Every group is listed now, so a short window scrolls the rail rather than hiding Sign out. */
  overflow-y: auto;
}
.brand { display: flex; gap: .7rem; align-items: center; padding: 0 .5rem; font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.25rem; letter-spacing: -.045em; }
.brand .brand-name { display: grid; line-height: 1.2; color: var(--ink); }
.brand small { font-size: .67rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; margin-top: .2rem; }
.brand-mark { position: relative; display: grid; place-items: center; width: 2.45rem; height: 2.45rem; flex: none; border-radius: 13px; background: var(--ink); color: #fff !important; font: 500 1.65rem/1 Georgia, serif !important; letter-spacing: -.1em; padding-right: .16rem; box-shadow: 0 7px 18px #253c2925; }
.brand-spark { position: absolute; width: .35rem; height: .35rem; border-radius: 50%; background: var(--highlight); top: .3rem; right: .31rem; margin: 0 !important; }
.brand.big { font-size: 1.8rem; }
.brand-logo { display: block; width: 2.45rem; height: 2.45rem; flex: none; border-radius: 22.5%; box-shadow: 0 7px 18px #253c2925; }
.login-card .brand-logo { width: 4rem; height: 4rem; margin-bottom: .6rem; }
/* min-width: 0 on both: a flex item's automatic minimum size is its content size, and a
   search input's is about 20 characters wide, which overflowed a 320px phone. */
.topsearch { display: flex; gap: .35rem; margin: 2.3rem .35rem 1.4rem; min-width: 0; border: 1px solid #dce5d9; border-radius: 11px; background: #fff; padding: .25rem; transition: box-shadow .2s ease; }
.topsearch:focus-within { box-shadow: 0 0 0 3px #bcd9c7; }
.topsearch input { flex: 1; width: 0; min-width: 0; border: 0; box-shadow: none; background: transparent; font-size: .86rem; padding: .45rem; }
.topsearch input:focus { outline: 0; }
.topsearch button { flex: 0 0 auto; padding: .35rem .55rem; background: var(--accent-soft); color: var(--accent); border: 0; font-size: .72rem; font-weight: 700; }
.topnav { display: flex; flex-direction: column; align-items: stretch; gap: .18rem; margin: 0; }
.nav-label { color: #8b978e; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: .75rem .85rem .35rem; }
.nav-label-secondary { padding-top: 1.8rem; }
.topnav a { display: flex; align-items: center; gap: .82rem; min-height: 2.75rem; padding: .55rem .85rem; border-radius: 10px; color: #5d6962; text-decoration: none; font-weight: 600; font-size: .88rem; transition: background .18s ease, color .18s ease, transform .18s ease; }
.topnav a:hover { background: #e7eee3; color: var(--ink); transform: translateX(2px); }
.topnav a.on { font-weight: 700; color: var(--accent); background: #e3ede2; box-shadow: inset 3px 0 var(--accent); }
.nav-icon { display: inline-grid; place-items: center; width: 1.2rem; flex: none; font-size: 1.1rem; font-weight: 400; line-height: 1; white-space: nowrap; }
.topnav .inline { margin: .9rem .85rem 0; }
.nav-more { margin-top: .5rem; }
.nav-more > summary { padding: .65rem .85rem; color: var(--ink-soft); font-size: .85rem; cursor: pointer; }
.nav-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.topnav button.link { color: var(--ink-soft); font-size: .8rem; text-decoration: none; }
.sidebar-foot { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin: auto .6rem .3rem; padding: 1rem .4rem 0; border-top: 1px solid #dce5d9; color: var(--ink-soft); font-size: .8rem; }
.sidebar-foot b { color: var(--ink); overflow-wrap: anywhere; }
.sidebar-foot button.link { color: var(--accent); font-size: .85rem; font-weight: 600; min-height: 2rem; }

.flash { max-width: 78rem; margin: .8rem auto 0; padding: .75rem 1rem; border-radius: 10px; background: var(--accent-soft); }
.flash.bad { background: var(--external-soft); color: var(--external); }
.flash.ok { background: var(--accent-soft); }
main > .flash { margin-left: auto; margin-right: auto; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; margin: 1rem 0 1.4rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.filters fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .2rem; }
.filters label { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.filters .spacer { flex: 1; }
.count { color: var(--ink-soft); font-size: .9rem; margin: 0 0 .8rem; }

/* meeting list */
ul.meetings { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
ul.meetings > li {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.15rem 1.35rem; box-shadow: 0 6px 20px #24372c06; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.meetings > li:hover { border-color: #b6cbbb; transform: translateY(-2px); box-shadow: 0 12px 25px #24372c10; }
.meeting-line { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.meeting-line a { font: 500 1.32rem/1.3 "Iowan Old Style", "Baskerville", Georgia, serif; letter-spacing: -.02em; color: var(--ink); text-decoration: none; margin-right: auto; }
.meeting-line a:hover { text-decoration: underline; }
.meeting-delete-action { display: inline-block; margin: .3rem 0; }
.meeting-delete-action button { color: var(--external); font-size: .8rem; padding: .45rem .7rem; }
.delete-confirmation { margin: 1.2rem 0; padding: 1.2rem; border: 1px solid var(--external); border-radius: 14px; background: var(--external-soft); max-width: 48rem; }
.delete-confirmation h2 { margin: 0 0 .6rem; border: 0; padding: 0; }
.delete-confirmation .confirm { margin-top: 1rem; gap: 1rem; }
.when { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.len { color: var(--ink-soft); }
ul.people { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 0; padding: 0; }
ul.people li { font-size: .75rem; padding: .1rem .5rem; border-radius: 99px; background: #f0f4ef; color: var(--ink-soft); border: 0; box-shadow: none; transform: none; }
ul.people li.external { background: var(--external-soft); color: var(--external); }
.snippet { margin: .4rem 0 0; color: var(--ink-soft); border-left: 3px solid var(--line); padding-left: .7rem; }
/* H2: two sentences of the summary under a list row; H5: the title it was recorded as. */
.excerpt { margin: .7rem 0 0; color: var(--ink-soft); max-width: 76ch; line-height: 1.55; }
.subtitle { margin: .15rem 0 .2rem; font-size: .92rem; }
.snippet a { color: inherit; }
.more { margin-top: 1.4rem; }

/* meeting page */
.meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: var(--ink-soft); margin-bottom: .3rem; }
.meta b { color: var(--ink); font-weight: 600; }
.player { margin: .6rem 0 0; }
.player audio { width: 100%; max-width: 34rem; }
.badge { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .5rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.badge.external { background: var(--external-soft); color: var(--external); }
.sections { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; }
.sections h3:first-child { margin-top: 0; }
.sections p.notes { white-space: pre-wrap; }
.sections p { white-space: pre-wrap; }
.keywords { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: .3rem 0 0; }
.keywords li { font-size: .8rem; background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: .12rem .55rem; }
ul.items { list-style: none; margin: .3rem 0 1rem; padding: 0; display: grid; gap: .4rem; }
ul.items li { display: flex; gap: .6rem; align-items: baseline; }
a.stamp {
  font-family: var(--mono); font-size: .8rem; color: var(--accent); background: var(--accent-soft);
  border-radius: 6px; padding: .1rem .35rem; text-decoration: none; white-space: nowrap;
}
ul.items li span.text { flex: 1; }
details.versions { margin-top: .8rem; color: var(--ink-soft); }
ol.version-list { list-style: none; margin: .6rem 0 0; padding: 0; }
ol.version-list > li.version { border-left: 3px solid var(--line); padding-left: .7rem; margin-bottom: .7rem; }
ol.version-list > li.version-current { border-left-color: var(--accent); }
ol.version-list summary { cursor: pointer; }
.sections h4 { font-size: .85rem; margin: 1rem 0 .3rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em; }
.sections .sections { border: 0; padding: 0; background: none; }
.transcript-tools { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; color: var(--ink-soft); font-size: .9rem; }
.transcript-tools a { font-size: .9rem; }
article.transcript { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .4rem 1.1rem 1rem; }
p.t {
  margin: 0; padding: .35rem 0 .35rem 4.6rem; position: relative; text-indent: -4.6rem;
  max-width: 46rem;
}
p.t + p.t { border-top: 1px solid transparent; }
p.t.new-speaker { margin-top: .45rem; border-top: 1px solid var(--line); padding-top: .5rem; }
p.t:not(.new-speaker) { padding-bottom: .1rem; }
p.t:not(.new-speaker) time { opacity: .55; }
p.t time {
  display: inline-block; min-width: 4.6rem; font-family: var(--mono); font-size: .78rem;
  color: var(--ink-soft); text-indent: 0; margin-right: .5rem;
}
p.t strong { text-indent: 0; margin-right: .35rem; }
p.t strong.internal { color: var(--accent); }
p.t strong.external { color: var(--external); }
p.t mark { background: #ffe9a8; color: #1b1d21; border-radius: 3px; padding: 0 .1rem; }
/* A mark, not a turn: kept apart from the conversation so it cannot be read as something
   somebody said. Feedback #13, observed 4. */
p.t.marker { color: var(--ink-soft); font-style: italic; }
p.t.marker time { opacity: .55; }
@media (prefers-color-scheme: dark) { p.t mark { background: #6b5310; color: #fff; } }
p.t:target { background: var(--accent-soft); border-radius: 8px; }
p.t:target time { color: var(--accent); }
/* the recording position: the line the player is currently inside */
p.t.playing { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); border-radius: 8px; }
p.t.playing time { color: var(--accent); font-weight: 600; }
/* inline, not absolutely positioned: at 320px a floated control overruns the time block,
   and the whole reason this page exists is that it reads on a phone. */
.listen {
  margin-left: .35rem; font-size: .72rem; color: var(--ink-soft); text-decoration: none;
  text-indent: 0; opacity: 0;
}
@media (hover: hover) {
  .listen { pointer-events: none; }
  p.t:hover .listen { opacity: .85; pointer-events: auto; }
}
@media (hover: none) { .listen { opacity: .7; } }
.listen:focus-visible { opacity: 1; pointer-events: auto; }
.player .fine { display: block; font-size: .8rem; margin-top: .2rem; }
.actions-row { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.6rem 0 0; align-items: center; }

/* login */
/* long transcripts: reading aids */
.find-line { display: flex; gap: .4rem; align-items: center; flex: 1 1 20rem; margin: 0; }
.find-line input { flex: 1; min-width: 8rem; }
.find-line button { padding: .3rem .55rem; line-height: 1; }
.find-line span { white-space: nowrap; }
.transcript-tools.with-find {
  position: sticky; top: var(--topbar); z-index: 4; background: var(--paper);
  padding: .45rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
p.t { scroll-margin-top: 8rem; }
p.t.match-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); border-radius: 8px; }

.login-wrap { min-height: 80vh; display: grid; place-items: center; }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 2rem; width: min(26rem, 92vw); }
.login-card label { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: .25rem; }
.login-card input[type="password"] { width: 100%; }
.login-card button { width: 100%; margin-top: .6rem; }

@media (max-width: 40rem) {
  p.t { padding-left: 0; text-indent: 0; }
  p.t time { display: block; width: auto; margin-bottom: .1rem; }
}
@media print { .topbar, .transcript-tools, .actions-row { display: none; } }

/* archive status: shown only when something needs the operator */
.status { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px;
  background: var(--card); padding: .6rem .9rem; margin: 1rem 0; }
.status h2 { margin: 0 0 .3rem; border: 0; padding: 0; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); }
.status ul { list-style: none; margin: 0; padding: 0; }
.status li { margin: .35rem 0; }
.status-bad { color: var(--external); }
.status-run, .status-warn { color: var(--ink); }
/* An inline explanation on a page, used where a feature is present but unavailable. Reads as a
   note, not an error: the meeting page is fine, only its recording is not. */
.notice { border-left: 3px solid var(--line); padding-left: .7rem; font-size: .9rem; }

/* the admin's storage panel on the health page (#27) */
table.storage-table { border-collapse: collapse; font-size: .9rem; margin: 0 0 .6rem; }
table.storage-table th, table.storage-table td { text-align: left; padding: .3rem .8rem .3rem 0;
  border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.storage-table td[data-storage] { font-family: var(--mono); white-space: nowrap; }

/* import jobs: fixed layout so a long message cannot set the page's width */
table.jobs { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9rem; }
table.jobs th, table.jobs td { text-align: left; padding: .35rem .5rem .35rem 0;
  border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.jobs thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); }
table.jobs td.num { text-align: right; font-family: var(--mono); }
table.jobs .msg { color: var(--ink-soft); }
.job-state { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .1rem .45rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.job-state-failed { background: var(--external-soft); color: var(--external); }
.job-state-queued { background: var(--line); color: var(--ink-soft); }
/* A `queued`/`running` badge nothing owns: the message cell says it in words, this only catches
   the eye — colour is never the only signal here. */
.job-state-stale { background: var(--external-soft); color: var(--external); }
ol.guidance { padding-left: 1.2rem; }
ol.guidance li { margin: .4rem 0; }
@media (max-width: 48rem) {
  table.jobs { font-size: .82rem; }
  table.jobs .col-audio, table.jobs .msg, table.jobs thead th.col-audio { display: none; }
}

/* Internal vs external is a colour difference on a chip, which a screen reader never hears and
   a colour-blind reader may not see. The word carries the same fact. No opacity change: dimming
   it to look quieter would push the chip's text below a readable contrast ratio. */
ul.people li .kind { font-size: .72rem; }

/* archive health page */
.findings { list-style: none; margin: .4rem 0 0; padding: 0; }
.findings li { margin: .7rem 0; padding-left: .9rem; border-left: 3px solid var(--external); }
.findings li strong { display: block; }
.finding-code { font-size: .78rem; }
.finding-items { margin: .3rem 0; padding-left: 1.2rem; font-size: .85rem; }
.finding-guidance { display: block; margin-top: .2rem; color: var(--ink-soft); }
.status-report { border-left-color: var(--external); }
.checks-list { margin: 1.2rem 0; color: var(--ink-soft); }
.checks-list summary { cursor: pointer; }
.checks-list ul { columns: 2; font-size: .85rem; }
@media (max-width: 34rem) { .checks-list ul { columns: 1; } }

/* speaker naming (S1): a row per diarized label, so the person who spoke for 22 minutes is
   distinguishable from the one who said "yep" twice. Table cells rather than a grid because the
   page must read the same with CSS unavailable — a label with no name is a blank box, not a
   missing row. */
form.speakers { margin-top: .8rem; }
/* Issue #25: sharing a meeting. The badge is the listing's "shared by …"; the form is one
   checkbox per colleague, so it works with JavaScript off. */
.badge.shared { background: var(--line); color: var(--ink); text-transform: none; letter-spacing: 0; }
ul.shares { list-style: none; padding: 0; margin: .4rem 0 .8rem; display: grid; gap: .4rem; }
form.unshare { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
form.share-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; margin: 0 0 .6rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
form.share-form label { display: inline-flex; gap: .35rem; align-items: center; }
table.speaker-rows { border-collapse: collapse; margin: 0 0 .6rem; }
table.speaker-rows th, table.speaker-rows td { text-align: left; padding: .3rem .5rem .3rem 0; vertical-align: middle; }
table.speaker-rows thead th { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
table.speaker-rows tbody th { font-weight: 400; white-space: nowrap; }
table.speaker-rows input[type="text"] { min-width: 12rem; }
@media (max-width: 48rem) { table.speaker-rows input[type="text"] { min-width: 8rem; } }

/* Insights (H13). A statistic is read at a glance, so the number is large, the sentence
   under it is small, and neither depends on a script: the page is server-rendered like the
   rest of Keeper, and the activity grid is a span per day with its words in the title. */
.stats-cards { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.5rem; }
.stat { flex: 1 1 14rem; border: 1px solid var(--line); border-radius: .35rem; padding: .7rem .8rem; }
.stat-label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.stat-value { display: block; font-size: 1.9rem; font-weight: 600; line-height: 1.2; }
.stat-note { display: block; font-size: .78rem; opacity: .7; }
.categories { list-style: none; padding: 0; }
.categories li { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; font-size: .9rem; }
.cat-label { flex: 0 0 9rem; }
.cat-bar { flex: 1 1 auto; height: .5rem; background: var(--line); border-radius: .25rem; overflow: hidden; }
.cat-fill { display: block; height: 100%; background: currentColor; opacity: .55; }
.cat-words { flex: 0 0 auto; font-size: .8rem; opacity: .7; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, 13px); gap: 3px; margin: .6rem 0; }
.cell { display: inline-block; width: 13px; height: 13px; border-radius: 2px; border: 1px solid var(--line); }
.legend { display: flex; align-items: center; gap: .35rem; font-size: .78rem; opacity: .8; flex-wrap: wrap; }
.legend .cell { margin-right: .2rem; }
/* Five absolute bands, so a light week never looks busy because it is somebody else's
   quantile. Colours are steps of one hue rather than a rainbow: the reading is "more". */
.band-0 { background: transparent; }
.band-1 { background: #cfe3d6; }
.band-2 { background: #9cc9ac; }
.band-3 { background: #63a97f; }
.band-4 { background: #2f7d52; }
@media (prefers-color-scheme: dark) {
  .band-1 { background: #23402f; }
  .band-2 { background: #2f5c41; }
  .band-3 { background: #42815b; }
  .band-4 { background: #62ab7d; }
}

/* H8: Ask Keeper. The answer is the prominent thing; its sources stay readable and small,
   because a sentence nobody can check is not worth more space than the lines behind it. */
.ask-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .8rem 0 .4rem; }
.ask-form label { flex: 1 1 100%; font-size: .82rem; color: var(--ink-soft); }
.ask-form input[type=search] { flex: 2 1 22rem; }
.ask-result { border-left: 3px solid var(--line); padding-left: .8rem; margin: 1rem 0 1.4rem; }
.ask-answer { font-size: 1.02rem; max-width: 74ch; }
ol.ask-sources { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .6rem; }
ol.ask-sources > li { border-top: 1px solid var(--line); padding-top: .4rem; }
ul.ask-evidence { list-style: none; padding: 0; margin: .25rem 0 0; color: var(--ink-soft); font-size: .88rem; }
ul.ask-evidence li { margin: .15rem 0; max-width: 78ch; }

/* H6: the statistics bar and outstanding items on the meeting list. */
.home-bar { margin: 0 0 1.2rem; }
.home-bar .bar-line { margin: 0; line-height: 1.7; }
.home-bar .streak { white-space: nowrap; }
.outstanding { margin-top: .7rem; border-left: 3px solid var(--line); padding-left: .8rem; }
.outstanding h2 { font-size: .95rem; margin: 0 0 .3rem; }
.outstanding .items { list-style: none; margin: 0; padding: 0; }
.outstanding .items li { margin: .15rem 0; }

/* The overview is a calm entry point, not another dense report. */
.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin: 0 0 2.1rem; }
.eyebrow { margin: 0 0 .7rem; color: var(--accent); text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; font-weight: 800; }
.eyebrow span { padding: 0 .45rem; color: #a9b8ac; }
.page-subtitle { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.intro-action { display: inline-flex; align-items: center; gap: .55rem; flex: none; padding: .72rem 1.05rem; background: var(--ink); color: #fff; border-radius: 11px; text-decoration: none; font-size: .86rem; font-weight: 700; box-shadow: 0 8px 20px #19242120; transition: transform .2s ease, box-shadow .2s ease; }
.intro-action:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 25px #19242130; }
.intro-action span:first-child { color: #f7a87e; font-size: 1.15rem; line-height: 1; }
.intro-action span:last-child { font-weight: 400; opacity: .75; }
.home-bar { margin: 0 0 2.8rem; }
.home-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.home-metric { min-height: 10rem; display: flex; flex-direction: column; align-items: flex-start; padding: 1.2rem 1.35rem; background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 25px #24372c06; }
.home-metric:first-child { background: #e9f1e8; border-color: #dce9da; }
.metric-label { color: var(--ink-soft); font-size: .75rem; font-weight: 700; letter-spacing: .025em; }
.home-metric strong { display: block; margin: .5rem 0 .25rem; font: 500 clamp(2.2rem, 3vw, 3.1rem)/1.1 "Iowan Old Style", "Baskerville", Georgia, serif; letter-spacing: -.05em; color: var(--ink); }
.metric-caption { margin-top: auto; color: var(--ink-soft); font-size: .8rem; }
.metric-caption a { text-decoration: none; font-weight: 700; }
.metric-detail { color: var(--ink-soft); font-size: .78rem; padding: .15rem .2rem; margin: .5rem 0 0; }
.outstanding { margin-top: 1.1rem; padding: 1.05rem 1.25rem; border: 1px solid #e9e3d4; border-left: 3px solid var(--highlight); border-radius: 10px; background: #fffaf1; }
.outstanding h2 { font: 600 .87rem/1.35 "Avenir Next", Avenir, "Trebuchet MS", sans-serif; color: var(--ink); border: 0; padding: 0; }
.outstanding .items { display: grid; gap: .3rem; font-size: .85rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 0 0 .8rem; }
.section-heading .eyebrow { margin-bottom: .3rem; }
.section-heading h2 { margin: 0; border: 0; padding: 0; font-size: 1.9rem; }
.section-aside { color: var(--ink-soft); font-size: .8rem; }

/* Other pages inherit the same surfaces and editorial rhythm. */
.sections, article.transcript, .stat, .login-card { border-radius: 15px; box-shadow: 0 8px 25px #24372c06; }
.sections { padding: 1.5rem; }
article.transcript { padding: .7rem 1.5rem 1.5rem; }
.stat { background: var(--card); padding: 1.1rem 1.25rem; flex-basis: 15rem; }
.stat-value { font: 500 2.5rem/1.15 "Iowan Old Style", "Baskerville", Georgia, serif; letter-spacing: -.04em; margin: .35rem 0; }
.stat-label { opacity: 1; color: var(--ink-soft); font-weight: 700; }
.stat-note { opacity: 1; color: var(--ink-soft); line-height: 1.45; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.table-scroll table { min-width: 38rem; }
.status { border-radius: 12px; }
.badge { font-weight: 700; }
.login-wrap { margin: 0 auto; max-width: none; }
.login-card { width: min(27rem, 92vw); padding: 2.3rem; }
.login-card .brand.big { padding: 0; }
.login-card h1.brand.big { font: 500 3.2rem/1.1 "Iowan Old Style", "Baskerville", Georgia, serif; }

@media (min-width: 701px) {
  main > :not(.flash) { animation: settle-in .55s both; }
  main > :nth-child(2) { animation-delay: .07s; }
  main > :nth-child(3) { animation-delay: .12s; }
  main > :nth-child(4) { animation-delay: .17s; }
  ul.meetings > li { animation: settle-in .45s both; }
  ul.meetings > li:nth-child(2) { animation-delay: .05s; }
  ul.meetings > li:nth-child(3) { animation-delay: .1s; }
  ul.meetings > li:nth-child(4) { animation-delay: .15s; }
}
@keyframes settle-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  :root { --sidebar-width: 12.5rem; }
  .topbar { padding: 1.3rem .7rem; }
  .brand { font-size: 1.12rem; }
  .topnav a { gap: .5rem; padding: .5rem .6rem; }
  main { padding: 2.5rem 1.6rem 5rem; }
}
@media (max-width: 700px) {
  :root { --topbar: 0rem; }
  .topbar { position: relative; inset: auto; width: auto; padding: 1rem 1rem .5rem; border-right: 0; border-bottom: 1px solid var(--line); background: #f1f4ed; }
  .brand { padding: 0 .2rem; }
  .brand small { display: none; }
  .brand-mark { width: 2rem; height: 2rem; border-radius: 10px; font-size: 1.3rem !important; }
  .topsearch { margin: 1rem 0 .6rem; }
  .topnav { flex-direction: row; flex-wrap: wrap; gap: .25rem; margin: 0 -.3rem; padding: 0 .3rem .45rem; }
  .nav-more { margin: 0; }
  .nav-more[open] { flex-basis: 100%; }
  .nav-more > summary { padding: .6rem .75rem; font-size: .8rem; }
  .nav-more[open] > a { display: inline-flex; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav .nav-label { display: none; }
  .sidebar-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: .2rem 0 0; padding: .5rem .2rem 0; }
  .topnav a { flex: none; min-height: 2.4rem; padding: .45rem .75rem; font-size: .8rem; white-space: nowrap; }
  .topnav a.on { box-shadow: inset 0 -2px var(--accent); }
  .nav-icon { width: auto; }
  .topnav .inline { flex: none; margin: .45rem .4rem; }
  main { margin: 0; padding: 2rem 1rem 5rem; }
  .page-intro { align-items: start; flex-direction: column; gap: 1.2rem; margin-bottom: 1.8rem; }
  .home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-metric { min-height: 8.5rem; padding: 1rem; }
  .home-metric:first-child { grid-column: span 2; }
  .section-aside { display: none; }
  .filters { gap: .7rem; }
  .filters fieldset { flex: 1 1 8rem; }
  .filters select, .filters input { width: 100%; }
  .categories li { flex-wrap: wrap; }
  .categories .cat-label { flex-basis: 100%; }
  .categories .cat-words { min-width: 0; flex: 1 1 auto; }
  .meeting-line a { flex: 1 1 100%; }
  .meetings > li:hover, button:hover { transform: none; }
}
@media (max-width: 380px) {
  .home-metrics { grid-template-columns: 1fr; }
  .home-metric:first-child { grid-column: auto; }
  .meeting-line { gap: .25rem .65rem; }
  ul.meetings li { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  main { margin: 0; max-width: none; padding: 0; }
  .topbar, .intro-action { display: none; }
  ul.meetings > li, main > :not(.flash) { animation: none; }
}
/* #20: the vocabulary page edits in place, one small form per row. */
table.vocabulary input[type="text"] { width: 100%; min-width: 8rem; box-sizing: border-box; }
table.vocabulary td form.inline button { margin: 0 .25rem .25rem 0; }
.vocabulary-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 1.4rem; }
.vocabulary-add input[type="text"] { flex: 1 1 12rem; }

/* Connecting an assistant (/connect, /oauth/authorize) */
.connect-page { max-width: 46rem; }
.connect-page section { margin-top: 1.4rem; }
input.connect-url { width: 100%; font-family: var(--mono); font-size: .9rem; }
.oauth-card h2 { font-size: 1.15rem; margin: .6rem 0 .4rem; }
.oauth-decision { margin-top: .8rem; }

/* The settings area: a sub-navigation beside each section, a plain list above it on a phone. */
.settings-layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2.5rem; align-items: start; max-width: 64rem; }
.settings-nav .settings-title { margin: .2rem 0 .6rem; color: var(--ink-soft); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.settings-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.settings-nav a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .9rem; }
.settings-nav a:hover { background: #e7eee3; color: var(--ink); }
.settings-nav a.on { color: var(--accent); background: #e3ede2; box-shadow: inset 3px 0 var(--accent); }
.settings-body { max-width: 46rem; min-width: 0; }
.settings-body h2 { margin-top: 1.8rem; }
.settings-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.2rem; margin: 1rem 0; }
.settings-facts dt { font-weight: 600; }
.settings-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .settings-nav ul { display: flex; flex-wrap: wrap; gap: .3rem; }
  .settings-nav a { padding: .45rem .7rem; }
  .settings-nav a.on { box-shadow: inset 0 -2px var(--accent); }
  .settings-facts { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .settings-facts dd { margin-bottom: .6rem; }
}