/* Daybreak Oneness brand styles — Sangha App (FR-038).
   Palette: #a7a7a7 grey, #444b54 slate, #fcca3d gold. Font: Arimo.
   Mobile-first; the attendance module (US2) is the primary phone surface. */

@font-face {
  font-family: "Arimo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/arimo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Arimo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/arimo-700.woff2") format("woff2");
}

:root {
  --grey: #a7a7a7;
  --slate: #444b54;
  --slate-dark: #333940;
  --gold: #fcca3d;
  --gold-dark: #e0ad1f;
  --bg: #f5f6f7;
  --card: #ffffff;
  --ink: #2a2e33;
  --muted: #6b727a;
  --line: #e2e4e7;
  --present: #2f8f4e;
  --absent: #b23b3b;
  --danger: #b23b3b;
  --radius: 10px;
  --tap: 48px; /* minimum touch target */
  --font: "Arimo", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  font-size: 16px;
}

a { color: var(--slate); }
a:hover { color: var(--gold-dark); }

/* --- Top bar --------------------------------------------------------------*/
/* The bar and the section menu stick as one block, so nothing has to guess the
   bar's height. They previously stuck separately at a hard-coded 46px offset,
   which is shorter than the bar actually is — so on any scrolled page the
   section menu slid under the bar and was partly hidden. */
.chrome { position: sticky; top: 0; z-index: 20; }
.topbar {
  background: var(--slate);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
}
.topbar .brand img { height: 52px; width: auto; display: block; border-radius: 8px; flex: none; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--grey); font-size: 0.85rem; }

/* The bar never wraps, so on a narrow phone the long strings have to give way
   rather than push Sign out off the edge. Both truncate; nothing disappears. */
.topbar .brand { min-width: 0; }
.topbar .brand span,
.topbar .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .who { max-width: 9rem; }

/* --- Nav (scrolls horizontally on phones) --------------------------------*/
nav.mainnav {
  background: var(--slate-dark);
  display: flex;
  gap: 0.25rem;
  padding: 0 0.5rem;
  overflow-x: auto;
}
nav.mainnav a {
  color: #d7dade;
  text-decoration: none;
  padding: 0.7rem 0.9rem;
  white-space: nowrap;
  font-size: 0.95rem;
  border-bottom: 3px solid transparent;
}
nav.mainnav a.active,
nav.mainnav a:hover {
  color: #fff;
  border-bottom-color: var(--gold);
}

/* The current section's pages. A second bar rather than a dropdown: hover has
   no meaning on a touch screen, and the live meeting screens are used on one. */
nav.subnav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0.25rem;
  padding: 0 0.5rem;
  overflow-x: auto;
}
nav.subnav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.55rem 0.8rem;
  white-space: nowrap;
  font-size: 0.9rem;
  border-bottom: 3px solid transparent;
}
nav.subnav a.active,
nav.subnav a:hover {
  color: var(--slate);
  border-bottom-color: var(--slate);
}
nav.subnav a.active { font-weight: 700; }

.topbar a.who { text-decoration: none; }
.topbar a.who:hover { color: #fff; text-decoration: underline; }

/* --- Layout ---------------------------------------------------------------*/
main { padding: 1rem; max-width: 1100px; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0.2rem 0 1rem; color: var(--slate); }
h2 { font-size: 1.2rem; color: var(--slate); margin: 1.5rem 0 0.6rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* --- KPI tiles ------------------------------------------------------------*/
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.kpi .num { font-size: 2rem; font-weight: 700; color: var(--slate); line-height: 1.1; }
.kpi .lbl { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.kpi .sub { color: var(--gold-dark); font-size: 0.8rem; }

/* --- Buttons --------------------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0.5rem 1rem;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: #fff; color: var(--slate); font-family: var(--font);
  font-size: 1rem; cursor: pointer; text-decoration: none; gap: 0.4rem;
  /* 'Sign out' wrapped to two lines on a narrow phone, making the whole bar
     taller for the sake of one space. */
  white-space: nowrap;
}
.btn:hover { border-color: var(--grey); }
.btn.primary { background: var(--gold); border-color: var(--gold-dark); color: #3a3300; font-weight: 700; }
.btn.primary:hover { background: var(--gold-dark); }
.btn.danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn.small { min-height: 36px; padding: 0.3rem 0.6rem; font-size: 0.9rem; }

/* --- Forms ----------------------------------------------------------------*/
label { display: block; font-size: 0.9rem; color: var(--muted); margin: 0.6rem 0 0.2rem; }
/* :not() on the checkable types matters. Without it a checkbox inherits
   width:100% and a 48px minimum height and renders as a huge blue square with
   its own label pushed onto the next line. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-height: var(--tap); padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size: 1rem; background: #fff; color: var(--ink);
}
input[type="checkbox"], input[type="radio"] {
  width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--gold-dark);
  flex: none;
}
/* The whole row is the target, so the 48px rule is met by the label. */
label.check {
  display: flex; align-items: center; gap: 0.55rem;
  min-height: var(--tap); margin: 0; cursor: pointer;
  color: var(--ink); font-size: 1rem;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.filter-row > div { flex: 1 1 150px; }

/* --- Tables ---------------------------------------------------------------*/
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); }
table.data th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
table.data tr:hover td { background: #fbfbfc; }

/* --- Badges ---------------------------------------------------------------*/
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.badge.online { background: #e6eef7; color: #2c5b8f; }
.badge.in_person { background: #fdf1cf; color: #7a5c00; }
/* Amber warns, red is wrong. They were both red, so "roles unfilled" and
   "needs cover" were indistinguishable at a glance — which defeats the point of
   separating them. */
.badge.warn { background: #fdf1cf; color: #6b5300; }
.badge.danger { background: #fce4e4; color: var(--danger); }

/* --- Attendance (US2, phone-first) ---------------------------------------*/
.attend-head {
  position: sticky; top: 0; background: var(--slate); color: #fff;
  padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.6rem; z-index: 10;
}
.attend-head .count { font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.attend-list { list-style: none; margin: 0; padding: 0; }
.attend-row {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 56px; padding: 0.5rem 1rem; border-bottom: 1px solid var(--line);
  background: #fff;
}
.attend-row .who { flex: 1; font-size: 1.05rem; }
.attend-row .who small { color: var(--muted); display: block; font-size: 0.8rem; }
.attend-row.present { background: #eef7f0; }
.attend-row.absent { background: #fbeeee; }
.mark {
  min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius);
  border: 2px solid var(--line); background: #fff; font-size: 1.3rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.attend-row.present .mark.present-btn { background: var(--present); border-color: var(--present); color: #fff; }
.attend-row.absent .mark.absent-btn { background: var(--absent); border-color: var(--absent); color: #fff; }

/* --- Global "not saving" banner (FR-019) ---------------------------------*/
#offline-banner {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--danger); color: #fff; text-align: center;
  padding: 0.8rem 1rem; font-weight: 700; box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}
#offline-banner.show { display: block; }

/* --- Messages -------------------------------------------------------------*/
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: 0.6rem 0.9rem; border-radius: var(--radius); margin-bottom: 0.4rem; }
.messages li.success { background: #eef7f0; color: var(--present); }
.messages li.error { background: #fbeeee; color: var(--danger); }
.messages li.warning { background: #fdf6e3; color: #7a5c00; }

.muted { color: var(--muted); }
.empty { color: var(--muted); text-align: center; padding: 2rem; }
.chart-box { position: relative; height: 340px; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }

@media (min-width: 700px) {
  .topbar { padding: 0.5rem 1.5rem; }
  h1 { font-size: 1.8rem; }
}

/* --- Dashboard panels ------------------------------------------------------
   One per part of the platform: meetings, study group, intro classes. */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.panel-head {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.6rem; margin-bottom: 0.8rem;
}
.panel-head h2 { margin: 0; flex: 1; font-size: 1.15rem; }
.panel .lead { font-size: 1.05rem; margin: 0 0 0.6rem; }
.panel .actions { margin: 0.8rem 0 0; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.panel .muted.small { margin: 0.8rem 0 0; }

ul.roles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
@media (min-width: 700px) { ul.roles { grid-template-columns: 1fr 1fr; } }
ul.roles li { display: flex; gap: 0.5rem; font-size: 0.95rem; }
ul.roles .lbl {
  color: var(--muted); min-width: 11rem; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* ===========================================================================
   V2 components
   ===========================================================================*/

/* --- Callouts and banners --------------------------------------------------
   One quiet box for "you should know this", one louder for "you should act". */
.callout {
  background: #fbfbfc;
  border: 1px solid var(--line);
  border-left: 4px solid var(--grey);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin: 0.8rem 0;
  font-size: 0.95rem;
}
.callout.warn { background: #fdf6e6; border-left-color: var(--gold-dark); }
.callout.error { background: #fce9e9; border-left-color: var(--danger); }

.banner {
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.banner.warn { background: #fdf6e6; border: 1px solid var(--gold-dark); color: #6b5300; }
.banner a { color: inherit; font-weight: 700; }

.appfoot a { color: var(--muted); }

/* --- Small labels ----------------------------------------------------------*/
.pill {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--line); color: var(--muted);
  font-size: 0.72rem; font-weight: 700; vertical-align: middle;
}
.chip {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--radius);
  background: #eef1f4; color: var(--slate); font-size: 0.85rem;
}
.chip.custom { background: #fdf6e6; color: #6b5300; }

/* --- Forms: rows of options ------------------------------------------------*/
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-bottom: 1rem; }
.filters > * { flex: 1 1 150px; }
.filters label { margin-top: 0; }

.checkbox-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.3rem 0 0.8rem; }
label.inline {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: 0; min-height: var(--tap); color: var(--ink); font-size: 0.95rem;
}
label.inline input { width: auto; min-height: 0; }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; }

/* --- Audit -----------------------------------------------------------------*/
table.data tr.denied td { background: #fdf1f1; }
table.data tr.denied td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* --- Schedule --------------------------------------------------------------*/
table.data tr.needs-cover td { background: #fffaf0; }
table.data tr.cancelled td { color: var(--muted); text-decoration: line-through; }
table.data tr.cancelled td .badge { text-decoration: none; }

/* --- The meeting flow ------------------------------------------------------
   A numbered list because the order genuinely is the meeting: step 4 follows
   step 3 in the room, and the number is what the leader calls out. */
ol.flow { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0; }
ol.flow > li {
  counter-increment: step;
  position: relative;
  padding: 0.7rem 0 0.7rem 2.6rem;
  border-bottom: 1px solid var(--line);
}
ol.flow > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.75rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--slate); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.step-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.5rem; }
.step-actions form { display: flex; gap: 0.3rem; margin: 0; }

/* Service book text, shown as written: line breaks and stanzas are the poem. */
pre.material {
  white-space: pre-wrap;
  font-family: var(--font);
  font-size: 0.95rem;
  background: #fbfbfc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem;
  margin: 0.5rem 0 0;
  max-height: 22rem;
  overflow-y: auto;
}
.book-item { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.book-item h3 { margin: 0 0 0.2rem; font-size: 1rem; }

.resources dl, .resources { margin: 0; }
.resources .group { margin-bottom: 1.5rem; }

/* --- Sign in ---------------------------------------------------------------*/
.signin {
  max-width: 26rem; margin: 3rem auto; text-align: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem 1.5rem;
}
.signin h1 { font-size: 1.4rem; margin: 0 0 0.2rem; }
.signin details { margin-top: 1.5rem; text-align: left; }
.signin summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; min-height: var(--tap); display: flex; align-items: center; }

/* --- Running a meeting -----------------------------------------------------
   The one screen in this app that is not read at a desk. The leader holds a
   phone at arm's length in a dimly lit room, on camera, while a dozen people
   wait — so this surface breaks the app's light theme on purpose. A white page
   at full brightness is glare on the leader's face over video, and it is the
   only screen where that matters.

   Three bands, in the order the leader needs them: what just happened (small),
   what is happening (as large as it will go), what comes next (small). The eye
   lives in the middle; the other two are for peripheral vision.        */
.live {
  background: var(--slate-dark);
  color: #f2f1ee;
  border-radius: var(--radius);
  padding: 1.25rem 1rem 1rem;
  margin: -0.25rem 0 1rem;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
}
.live .muted { color: #a8aeb5; }
.live h3 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: #868d95; margin: 0 0 0.2rem; font-weight: 700;
}
.live #live-content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; }

.live .just-did, .live .up-next { opacity: 0.75; font-size: 0.95rem; }
.live .now {
  border-top: 1px solid #4b535c;
  border-bottom: 1px solid #4b535c;
  padding: 1.25rem 0;
}
/* The step's name is an <h2> built by the script, and a bare `h2` rule sets it
   to dark slate — which on this dark panel made the one line the leader is
   actually reading the least readable thing on the screen. Colour and size have
   to be set on the heading itself, not inherited from its container. */
.live .now #live-current h2 {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
@media (min-width: 700px) { .live .now #live-current h2 { font-size: 2.6rem; } }
.live .just-did h3, .live .up-next h3 { color: #868d95; }
.live #live-previous, .live #live-next { color: #c9ced4; font-size: 1.05rem; }

.live pre.material {
  background: #3a4048; border-color: #4b535c; color: #f2f1ee;
  font-size: 1.15rem; line-height: 1.6; margin-top: 0.8rem;
  /* No cap here. Everywhere else a long reading can scroll in its own box; on
     this screen it is being read aloud, and a hidden last verse is a fumble in
     front of the room. */
  max-height: none;
}

/* The silent minutes. Tabular figures so the digits do not jitter as they
   count down — the leader is watching this and nothing else. */
.countdown {
  font-size: 3.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--gold);
  padding: 0.5rem 0;
  letter-spacing: 0.02em;
}
@media (min-width: 700px) { .countdown { font-size: 5rem; } }

/* Thumb-reachable, and Next is unmistakably the one you keep pressing. */
/* Pinned to the bottom of the screen. The reading above can be any length —
   and now runs its full length rather than scrolling inside a box — so without
   this, Next ends up somewhere below the fold on exactly the screen where you
   need to reach it one-handed, mid-meeting, without looking. */
.live-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 1.25rem;
  position: sticky;
  bottom: 0;
  background: var(--slate-dark);
  padding: 0.6rem 0 0.4rem;
  box-shadow: 0 -12px 16px -8px var(--slate-dark);
}
.live-controls .btn { min-height: 56px; font-size: 1rem; }
.live-controls .btn.primary { grid-column: 2; grid-row: 1; }
.live-controls .btn:not(.primary) { background: #4b535c; border-color: #5a636d; color: #f2f1ee; }
.live-controls .btn:not(.primary):hover { background: #5a636d; }
@media (min-width: 700px) {
  .live-controls { grid-template-columns: repeat(3, 1fr); }
  .live-controls .btn.primary { grid-column: auto; grid-row: auto; }
}

.live .callout { background: #4b535c; border-color: #5a636d; color: #f2f1ee; }
.live .callout.warn { background: #6b5300; border-left-color: var(--gold); color: #fdf6e6; }
.end-meeting { margin-top: 1.25rem; text-align: center; }
.end-meeting .btn { background: transparent; border-color: #5a636d; color: #a8aeb5; }
.end-meeting .btn:hover { border-color: var(--danger); color: #ff9b9b; }

/* Everyone who is not leading: the same step, none of the controls. */
.live.follower #live-content { justify-content: flex-start; }
.live.follower .now #live-current h2 { font-size: 1.6rem; }
@media (min-width: 700px) { .live.follower .now #live-current h2 { font-size: 2rem; } }

/* The two standing banners are not equally urgent, and they can appear at the
   same time. Backups failing risks losing everything; the website sign-up sync
   falling behind is a delay. Say so with the colour rather than leaving both
   amber and hoping the wording carries it. */
.banner.sync-alert { background: #fdf6e6; border-color: var(--gold-dark); color: #6b5300; }
.banner.backup-alert { background: #fce9e9; border-color: var(--danger); color: #7d2424; }

/* Marks the leader's own view: you are the one driving this meeting. */
.live.presenter { border-top: 3px solid var(--gold); }

/* Two different problems, two different weights. A director who has withdrawn
   from a meeting they were holding is urgent at any distance; roles not yet
   assigned eight months out are simply not yet assigned. */
table.data tr.attn-cover td { background: #fdf1f1; }
table.data tr.attn-unfilled td { background: #fffaf0; }
table.data td { white-space: nowrap; }
table.data td:nth-last-child(2) { white-space: normal; }  /* the topic wraps */

/* Inline role assignment on the schedule. The dropdowns sit in table cells, so
   they must not stretch to the full column width the way form inputs do. */
table.data select {
  width: auto; min-width: 6.5rem; min-height: 36px;
  padding: 0.2rem 0.4rem; font-size: 0.9rem;
}
table.data td form { margin: 0; }

/* --- Who is doing what -----------------------------------------------------
   A stable tint per director, so you can find your own name down a column of
   forty meetings without reading every cell. The name is always written out as
   well — colour is the shortcut, never the only signal.

   Light tints with dark text, in the same register as the badges, so a grid of
   them reads as one surface rather than a bag of sweets. */
.who-tag {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; white-space: nowrap;
}
select.who-select {
  border-radius: 999px; font-weight: 700; border-width: 1px;
}
.who-0, .who-0.who-select { background: #e6eef7; color: #2c5b8f; border-color: #b9cee4; }
.who-1, .who-1.who-select { background: #e4f2e8; color: #2f6b45; border-color: #b9dcc6; }
.who-2, .who-2.who-select { background: #fdf1cf; color: #7a5c00; border-color: #ecd694; }
.who-3, .who-3.who-select { background: #ece7f5; color: #5a4a86; border-color: #cdc2e5; }
.who-4, .who-4.who-select { background: #fae7ec; color: #8f3355; border-color: #eec3d1; }
.who-5, .who-5.who-select { background: #e0f0f0; color: #26666b; border-color: #b2d9db; }
.who-6, .who-6.who-select { background: #f6e9df; color: #8a5326; border-color: #e4cbb4; }
.who-7, .who-7.who-select { background: #e8eaed; color: #444b54; border-color: #c9ced4; }

/* Your own name. A ring rather than a seventh colour, so "this is me" reads the
   same whichever tint you happen to have been given. */
.who-tag.me, select.who-select.me { box-shadow: 0 0 0 2px var(--slate); }

/* Unassigned should look empty, not like a colour of its own. */
select.who-select.unassigned {
  background: #fff; color: var(--muted); font-weight: 400;
  border-color: var(--line);
}

/* Page controls. Space-between so Previous and Next sit at the edges and the
   count stays centred even when one of them is absent. */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin: 1rem 0;
}

/* An inline field that carries a director's colour, matching the dropdowns on
   the meeting schedule. */
table.data input, table.data textarea {
  min-height: 36px; padding: 0.25rem 0.5rem; font-size: 0.9rem;
}
input.who-input { border-radius: 999px; font-weight: 700; }
table.data details summary { cursor: pointer; }

/* --- What changed, in the audit record -------------------------------------
   This used to be the stored structure printed as-is, running off the side of
   the screen. A record of who did what is only accountability if it can be
   read. */
ul.changeset { list-style: none; margin: 0; padding: 0; }
ul.changeset li {
  display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline;
  font-size: 0.85rem; padding: 0.1rem 0;
}
ul.changeset .field {
  color: var(--muted); text-transform: uppercase;
  font-size: 0.7rem; letter-spacing: 0.03em; min-width: 7rem;
}
ul.changeset .before { color: var(--muted); text-decoration: line-through; }
ul.changeset .arrow { color: var(--grey); }
ul.changeset .after { font-weight: 700; }

/* Text inputs need the element in the selector to out-rank the generic input
   rule, which sets a white background and would otherwise win. Selects do not,
   which is why the schedule dropdowns were already tinted and these were not. */
input.who-input.who-0 { background: #e6eef7; color: #2c5b8f; border-color: #b9cee4; }
input.who-input.who-1 { background: #e4f2e8; color: #2f6b45; border-color: #b9dcc6; }
input.who-input.who-2 { background: #fdf1cf; color: #7a5c00; border-color: #ecd694; }
input.who-input.who-3 { background: #ece7f5; color: #5a4a86; border-color: #cdc2e5; }
input.who-input.who-4 { background: #fae7ec; color: #8f3355; border-color: #eec3d1; }
input.who-input.who-5 { background: #e0f0f0; color: #26666b; border-color: #b2d9db; }
input.who-input.who-6 { background: #f6e9df; color: #8a5326; border-color: #e4cbb4; }
input.who-input.who-7 { background: #e8eaed; color: #444b54; border-color: #c9ced4; }

/* Book titles are long — "The Dude and the Zen Master" was showing as
   "The Dude" — and a name needs less room than a title. */
table.data input[name="book"] { min-width: 15rem; }
table.data input[name="leader"] { min-width: 8rem; }
table.data input[name="notes"] { min-width: 18rem; }

/* Only the fields stretch. The button was being blown across the whole row. */
.filters button, .filters .btn { flex: 0 0 auto; }

/* With the menus gone, this row is the only way off the live screen. */
.live-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.live-head h1 { color: #fff; margin: 0; font-size: 1.3rem; }
.live-head .btn { background: transparent; border-color: #5a636d; color: #c9ced4; }
.live-head .btn:hover { border-color: var(--gold); color: var(--gold); }
/* Nothing above it any more, so it stands off the top of the window itself. */
.live { margin-top: 0.75rem; }

/* The live panel when no meeting is running: same surface, no stage. */
.live.not-running { min-height: 0; display: block; }
.live.not-running .callout { background: #4b535c; border-color: #5a636d; color: #f2f1ee; }
.live.not-running .actions { margin-top: 0.8rem; }

/* Who takes the step before and the step after. Dimmer than the step itself. */
.live .performer { color: var(--gold); }

/* --- The flow table ---------------------------------------------------------
   One step per <tbody>: the visible row and its expandable detail travel as
   one, whether dragged or swapped in by an inline edit. */
.flow-table { counter-reset: step; }
.flow-table tbody.step { counter-increment: step; }
.flow-table .step-num { white-space: nowrap; color: var(--muted); font-weight: 700; }
.flow-table .step-num::before { content: counter(step); margin-right: 0.35rem; }
.flow-table .step-detail td { white-space: normal; }
.flow-table .step-detail pre.material { max-height: 22rem; overflow-y: auto; }
.flow-table tbody.attn-unfilled .step-main td { background: #fffaf0; }
.flow-table input[name="note"] { min-width: 9rem; }
.flow-table input[name="meditation_minutes"] { width: 4.5rem; min-width: 0; }
.flow-table a.badge.warn { text-decoration: none; }

.step-tools { display: grid; gap: 0.8rem; max-width: 34rem; margin: 0.6rem 0; }
.step-tools form { margin: 0; }

/* Dragging. The handle is a real button so it can be found, described and
   focused; the arrows in the detail row are the keyboard's way to reorder.
   touch-action:none is what lets the pointer events fire at all on a phone. */
.drag-handle {
  cursor: grab; touch-action: none;
  padding: 0.2rem 0.35rem; min-height: 28px; line-height: 1;
  color: var(--grey); border-color: transparent; background: transparent;
}
.drag-handle:hover { color: var(--slate); border-color: var(--line); }

/* The floating copy that tracks the pointer… */
.flow-ghost {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--card); opacity: 0.95;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  border-radius: var(--radius);
}
/* …while the step's real slot shows as the gap it will land in. */
.drag-placeholder .step-main td { opacity: 0.35; background: #fdf6e0; }
.flow-table.reordering { user-select: none; }
.just-dropped .step-main td { animation: dropped 400ms ease; }
@keyframes dropped { from { background: #fdf6e0; } }

/* The topic input sits in a table cell beside its save button. */
.topic-form { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.topic-form input { min-height: 36px; font-size: 0.95rem; }

/* A meeting is being run right now. The one banner that is good news, so it is
   gold rather than amber, and it carries the way in. */
.banner.live-now {
  background: #fdf6e0; border: 1px solid var(--gold-dark); color: #3a3300;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}

/* Column behaviour. The title is the one cell allowed to wrap — the standard
   "Reminder" step is a full sentence, and keeping it on one line pushed the
   right-hand columns clean off the screen. */
.flow-table .step-title { white-space: normal; min-width: 11rem; }
.flow-table .step-material { max-width: 16rem; white-space: normal; }
.flow-table .step-who select { min-width: 6rem; }
.flow-table .step-note input { min-width: 7rem; width: 100%; }
.flow-table .step-min { width: 4.5rem; }
.flow-table .step-expand { width: 2.5rem; text-align: right; }

/* --- Call-and-response, as the book prints it -------------------------------
   Speaker down the left, their words beside them. One interleaved column was
   genuinely confusing to read mid-recitation. */
.dialogue {
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 1.2rem; row-gap: 0.8rem;
  margin: 0.5rem 0 0; max-width: 46rem;
}
.dialogue .speaker { color: var(--muted); white-space: nowrap; font-size: 0.95rem; }
.dialogue .words { margin: 0; white-space: pre-wrap; }
.attribution { color: var(--muted); font-style: italic; font-size: 0.9rem; margin: 0.6rem 0 0; }

/* The same, on the dark live screen. */
.live .dialogue .speaker { color: #a8aeb5; }
.live .dialogue .words { color: #f2f1ee; font-size: 1.1rem; }
.live .attribution { color: var(--gold); font-style: italic; }
.live .live-announcements { font-size: 1.15rem; line-height: 1.7; padding-left: 1.2rem; }

/* --- Timer bar on the live screen -------------------------------------------
   Open to any director in the rotation; the leader-only row above it keeps
   Back and Next. */
.live .timer-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 0.75rem;
}
.live .timer-bar label { margin: 0; color: #a8aeb5; font-size: 0.9rem; }
.live .timer-bar label.check { color: #c9ced4; min-height: 44px; }
.live .timer-bar input[type="number"] {
  width: 4.5rem; min-height: 44px;
  background: #3a4048; border-color: #4b535c; color: #f2f1ee;
}
.live .timer-bar select {
  width: auto; min-height: 44px;
  background: #3a4048; border-color: #4b535c; color: #f2f1ee;
}
.live .timer-bar .btn { background: #4b535c; border-color: #5a636d; color: #f2f1ee; }
.live .timer-bar .btn:hover { background: #5a636d; }

/* Paused: frozen on the same number for everyone, visibly not counting. */
.countdown.paused { opacity: 0.6; }
.countdown.paused::after { content: " ⏸"; font-size: 2rem; vertical-align: middle; }

/* The hidden attribute must always win. The browser's own [hidden] rule loses
   to any class that sets display — which is how Pause and Clear showed with no
   timer running. */
[hidden] { display: none !important; }

/* On a phone the table scrolls sideways; the number and handle stay pinned so
   a row never loses its identity mid-scroll (R13). Sticky cells need their own
   opaque background or the scrolling columns show through them. */
.flow-table .step-num,
.flow-table thead th:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--card);
}
.flow-table tbody.attn-unfilled .step-num { background: #fffaf0; }
.flow-table .drag-placeholder .step-num { background: #fdf6e0; }

/* Study group notes: the form fits its cell instead of overflowing the table,
   which left the button reachable only by tabbing to it. */
.study-notes { white-space: normal; min-width: 16rem; }
.note-form { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.3rem; }
.note-form input { flex: 1; min-width: 0; }
.note-form .btn { flex: none; }

/* The section name invites the click it now accepts. */
.flow-table tbody:has([data-expand]) .step-title { cursor: pointer; }