/* Theme System — Full Variable Set */

/* Inter, self-hosted. Weights 400 and 600 only. Latin covers English;
   latin-ext covers accented family names. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/inter-latin-ext-400-9acf0743b1b847b95ddaab3198457bf1230c58e8b18cdea8ba8e7c2471dbe89c.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/inter-latin-400-4257feae4ab4d639ab5c04aa4e3be1e51a632cc3189abf481212a464607cba55.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/inter-latin-ext-600-4cdb774190a4842be201bab1351c76b0a428ad0f760ac16897ae0f55c0666fde.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/inter-latin-600-eff1df42f259b7bea6b036e8d66414f539f58459a1cf1977083aae4731df0127.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --primary-color: #111111;
  --secondary-color: #111111;
  --accent-color: #1F4D2B;
  --text-color: #111111;
  --heading-color: #111111;
  --muted-color: #4A4A4A;          /* 8.20:1 on paper, 8.86:1 on white */
  --background-color: #F7F6F2;
  --surface-color: #FFFFFF;
  --border-color: #C4C1B8;         /* 1.66:1 on paper, 1.80:1 on white */
  --border-light-color: #D9D6CF;   /* inner rules; 1.34:1 */
  --danger-color: #A33D3A;
  --warning-color: #7A6114;
  --success-color: #3E6B3A;
  --focus-color: #1F4D2B;

  --cta-color: #1F4D2B;            /* white label 9.75:1 */
  --cta-hover: color-mix(in srgb, var(--cta-color) 78%, black);
  --primary-hover: color-mix(in srgb, var(--primary-color) 82%, black);
  --primary-light: #E8E6DF;        /* neutral warm tint, not sage */
  --danger-light: #F8EBE9;
  --warning-light: #F8F1DC;
  --success-light: #E5F0E2;
  --focus-ring: var(--cta-color);
  --focus-ring-alpha: rgba(31, 77, 43, 0.28);

  /* Ink band. The page is paper, so the header is the two-tone. */
  --header-color: #111111;
  --hover-wash: var(--primary-light);
}

/* ---------- Theme Utility Classes ---------- */

/* Backgrounds */
.theme-bg              { background-color: var(--background-color); }
.theme-bg-surface      { background-color: var(--surface-color); }
.theme-bg-primary      { background-color: var(--primary-color); }
.theme-bg-cta          { background-color: var(--cta-color); }
.theme-bg-secondary    { background-color: var(--secondary-color); }
.theme-bg-accent       { background-color: var(--accent-color); }
.theme-bg-danger       { background-color: var(--danger-color); }
.theme-bg-warning      { background-color: var(--warning-color); }
.theme-bg-success      { background-color: var(--success-color); }
.theme-bg-success-light { background-color: var(--success-light); }
.theme-bg-danger-light  { background-color: var(--danger-light); }
.theme-bg-warning-light { background-color: var(--warning-light); }
.theme-bg-primary-light { background-color: var(--primary-light); }

/* Text */
.theme-text            { color: var(--text-color); }
.theme-text-heading    { color: var(--heading-color); }
.theme-text-primary    { color: var(--primary-color); }
.theme-text-secondary  { color: var(--secondary-color); }
.theme-text-muted      { color: var(--muted-color); }
.theme-text-danger     { color: var(--danger-color); }
.theme-text-success    { color: var(--success-color); }
.theme-text-warning    { color: var(--warning-color); }
.theme-text-on-primary { color: white; }

/* Borders */
.theme-border          { border-color: var(--border-color); }
.theme-border-light    { border-color: var(--border-light-color); }
.theme-border-primary  { border-color: var(--primary-color); }
.theme-border-danger   { border-color: var(--danger-color); }
.theme-border-success  { border-color: var(--success-color); }
.theme-border-warning  { border-color: var(--warning-color); }

/* Focus rings only for the keyboard. A click or a restored focus must not draw a bar. */
.theme-focus:focus,
.theme-focus-within:focus-within {
  outline: none;
}
.theme-focus:focus-visible,
.theme-focus-within:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* Rings (for Tailwind ring utilities compatibility) */
.theme-ring:focus {
  --tw-ring-color: var(--focus-ring);
}

/* Hover — real classes, because theme-* lives outside Tailwind and hover:theme-* compiles to nothing */
.theme-hover-primary:hover { color: var(--primary-color); }
.theme-hover-secondary:hover { color: var(--secondary-color); }
.theme-hover-text:hover { color: var(--text-color); }
.theme-hover-bg-light:hover { background-color: var(--primary-light); }
.theme-hover-border-primary:hover { border-color: var(--primary-color); }
.theme-hover-wash:hover { background-color: var(--hover-wash); }
.theme-hover-danger:hover { color: var(--danger-color); }
.theme-bg-border-light { background-color: var(--border-light-color); }
.theme-bg-border { background-color: var(--border-color); }
.theme-marker-muted ::marker { color: var(--muted-color); }

/* divide-y draws the line under every row but the last, including the first.
   Color every child. The old sibling selector left the first line as currentColor, a black bar. */
.theme-divide > :not([hidden]) {
  border-color: var(--border-light-color);
}

/* Type scale: 28 page title, 20 section, 16 body, 14 secondary, 12 caption.
   Weights: 400 body, 600 emphasis. Inter everywhere. */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}
:is(h1, h2, h3, h4).theme-text-primary { color: var(--heading-color); }

.page-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--heading-color);
}
.section-heading {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
}
.page-title.text-white { color: #fff; }
.section-heading.theme-text-danger { color: var(--danger-color); }
.text-title {
  font-size: 1.75rem;
  line-height: 1.25;
}
.wordmark {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* Inline text links are forest and underlined. Buttons and whole-card links opt out. */
a.link,
a.link-muted,
main a.theme-text-primary:not(.no-underline):not(.btn-primary):not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-danger-text):not(:has(.card)),
main a.theme-text-muted:not(.no-underline):not(.btn-primary):not(.btn-secondary):not(.btn-quiet):not(.btn-danger):not(.btn-danger-text):not(:has(.card)) {
  color: var(--cta-color);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a.link:hover,
a.link-muted:hover,
main a.theme-text-primary:not(.no-underline):not(.btn-primary):not(.btn-secondary):not(.btn-quiet):hover,
main a.theme-text-muted:not(.no-underline):not(.btn-primary):not(.btn-secondary):not(.btn-quiet):hover {
  color: var(--cta-hover);
}

/* Hover only on the element that is itself the control. */
a.card:hover,
a.card-interactive:hover,
button.card-interactive:hover,
a:hover > .card {
  border-color: var(--heading-color);
}
a.card-interactive:focus-visible,
button.card-interactive:focus-visible,
a.card:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

a, button, summary, label, .choice-chip, .library-chip, [role="button"] {
  cursor: pointer;
}

/* On the ink header, quiet and secondary stay light so they clear the band. */
.theme-header .btn-quiet,
.theme-header .btn-ghost {
  color: #fff;
  background: transparent;
}
.theme-header .btn-quiet:hover,
.theme-header .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.theme-header .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}
.theme-header .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

/* Templates page filter. aria-pressed is the selected chip; the forest
   fill is the one accent on that row. */
.library-chip {
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color);
  border-radius: 9999px;
  padding: 0.375rem 0.8rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.library-chip[aria-pressed="true"] {
  background: var(--cta-color);
  color: #fff;
  border-color: transparent;
}
.library-chip:hover { border-color: var(--primary-color); }
.library-chip[aria-pressed="true"]:hover { border-color: transparent; }
.library-chip:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* Quick note dimensions. Unselected stays neutral. Selected is a forest outline
   on a light tint, never the solid primary fill. */
.choice-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color);
  border-radius: 9999px;
  padding: 0.375rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  cursor: pointer;
}
.choice-chip:has(input:checked) {
  background: var(--primary-light);
  color: var(--heading-color);
  border-color: var(--cta-color);
}
.choice-chip:has(:focus-visible) {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* The card component ships with padding. The library card bleeds its preview to the edges. */
.card.library-card {
  padding: 0;
  height: 100%;
}
.card.library-card.library-card-added {
  border-color: color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
  background: color-mix(in srgb, var(--primary-light) 42%, var(--surface-color));
}

/* Alpine: hide x-cloak elements until Alpine initializes (used app-wide) */
[x-cloak] { display: none !important; }

/* Flash toasts. Fixed so they overlay; the empty stack does not take clicks.
   The controller measures [data-flash-anchor] and sets top so the stack sits
   under the header (or the onboarding progress bar) instead of covering it.
   6.5rem is the fallback before that measurement, and when there is no anchor. */
.flash-toasts {
  position: fixed;
  z-index: 70;
  top: max(6.5rem, calc(env(safe-area-inset-top) + 1rem));
  right: max(0.75rem, env(safe-area-inset-right));
  left: max(0.75rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  pointer-events: none;
}

@media (min-width: 640px) {
  .flash-toasts {
    left: auto;
    width: min(24rem, calc(100vw - 1.5rem - env(safe-area-inset-right)));
  }
}

.flash-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-radius: 0.875rem;
  background: var(--surface-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.12);
  animation: flash-toast-in 180ms ease-out;
}

.flash-toast--notice,
.flash-toast--success {
  background: var(--success-light);
  border-color: var(--success-color);
}

.flash-toast--alert,
.flash-toast--error {
  background: var(--danger-light);
  border-color: var(--danger-color);
}

.flash-toast--warning {
  background: var(--warning-light);
  border-color: var(--warning-color);
}

.flash-toast--out {
  animation: flash-toast-out 180ms ease-in forwards;
}

.flash-toast__message {
  flex: 1;
  min-width: 0;
  margin: 0.35rem 0;
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  max-height: 40vh;
  overflow: auto;
}

.flash-toast__close {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--heading-color);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.flash-toast__close:hover,
.flash-toast__close:focus-visible {
  background: var(--background-color);
  border-color: var(--heading-color);
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 4px var(--focus-ring);
}

@keyframes flash-toast-in {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flash-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-0.4rem); }
}

/* One width for the header and every page body, so the logo and the content share an edge. */
.page-shell {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* The header and the body share .page-shell. Quiet buttons pad their label by 1rem
   plus a 1px border, which inset the mark's neighbors and the trailing icon.
   Pull the trailing control back so its ink meets the same edge as the page. */
.header-row { flex-wrap: nowrap; }
.nav-cluster { flex: 1 1 auto; }
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  color: #fff;
  text-decoration: none;
}
.nav-brand:hover { color: #fff; }
.nav-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  overflow: hidden;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
}
.nav-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nav-family-name {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.header-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.header-caret:hover { background: rgba(255, 255, 255, 0.12); }
.header-caret:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.header-align-end { margin-right: calc(-1rem - 1px); }
@media (min-width: 768px) {
  .theme-header nav > :last-child:not(.nav-settings) {
    margin-right: calc(-1rem - 1px);
  }
}

/* Home: who, what to do, what to know. Narrow stacks center, family, then know.
   lg is two columns (family, center) with know under the center. xl is three. */
.home-columns {
  display: grid;
  gap: 1rem;
  align-items: start;
  grid-template-areas:
    "work"
    "family"
    "know";
}
.home-work { grid-area: work; min-width: 0; }
.home-family { grid-area: family; min-width: 0; }
.home-know { grid-area: know; min-width: 0; }
@media (min-width: 1024px) {
  .home-columns {
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-areas:
      "family work"
      "family know";
  }
  .home-family { position: sticky; top: 1rem; }
}
@media (min-width: 1280px) {
  .home-columns {
    grid-template-columns: 16rem minmax(0, 1fr) 18rem;
    grid-template-areas:
      "family work know";
  }
}

/* Module sub-header. Back, title, and actions share one row; tabs scroll underneath.
   Below sm the secondary actions drop onto their own line so the title and the
   primary button stay on the first row. */
.module-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title actions" "tabs tabs";
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}
.module-header__title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.module-header__title .page-title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.module-tabs {
  grid-area: tabs;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.module-tabs:empty { display: none; }
.module-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.125rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration: none;
  color: var(--muted-color);
}
.module-tab.is-active {
  background: var(--primary-light);
  color: var(--heading-color);
}
.module-tab:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
@media (max-width: 639px) {
  .module-header__back-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .module-header {
    grid-template-areas: "title primary" "secondary secondary" "tabs tabs";
  }
  .module-header__actions { display: contents; }
  .module-header__secondary {
    grid-area: secondary;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
  }
  .module-header__primary { grid-area: primary; }
}

/* Card groups pack left to right. A short group can sit beside the next one. */
.card-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 1.5rem;
  row-gap: 1rem;
}
.card-flow__group { max-width: 100%; }
.card-flow__label { margin: 0 0 0.5rem; }
.card-flow__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: max-content;
  max-width: 100%;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.card-flow__cards { align-items: stretch; }
.member-tile {
  width: 11rem;
  flex: 1 1 11rem;
  max-width: 14rem;
  display: flex;
  flex-direction: column;
}
.member-tile > a { flex: 1; }
.member-tile h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.ritual-tile {
  width: 16rem;
  flex: 1 1 16rem;
  max-width: 20rem;
}
.relationship-board {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.relationship-map {
  height: 16rem;
  position: relative;
}
@media (min-width: 1280px) {
  .relationship-board {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
  .relationship-map { height: 24rem; }
}
.more-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--muted-color);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.5rem;
}
.more-quiet:hover { background: var(--primary-light); color: var(--heading-color); }
.more-quiet:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
button.link {
  background: none;
  border: 0;
  padding: 0 0.25rem;
  min-height: 2.5rem;
  color: var(--cta-color);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* Meeting run, phone: one step at a time and a bar that stays on screen.
   At sm and up every step is the checklist and the bar is not shown. */
.meeting-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 0.625rem;
}
.meeting-check:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.meeting-check-words {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.more-quiet.meeting-more {
  min-width: 2.75rem;
  min-height: 2.75rem;
}
@media (min-width: 640px) {
  .completion-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  .meeting-step-toggle { order: -1; }
  .meeting-step-bar { display: none; }
}
@media (max-width: 639px) {
  .meeting-run { padding-bottom: 9rem; }
  .meeting-step-bar .btn-primary,
  .meeting-step-bar .btn-secondary { white-space: nowrap; }
  .meeting-step { display: none; }
  .meeting-step.is-current {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .meeting-step.meeting-agenda.is-current {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    padding: 1rem;
  }
  .meeting-step.is-current .completion-item { display: contents; }
  .meeting-step.is-current .meeting-step-copy { order: 1; padding: 0; }
  .meeting-step.is-current .meeting-step-note { order: 2; padding: 0; }
  .meeting-step.is-current .meeting-step-toggle { order: 3; }
  .meeting-step.is-current .meeting-check-form { width: 100%; }
  .meeting-step.is-current .meeting-check {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    margin: 0;
  }
  .meeting-step.is-current .meeting-check-words {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
  }
  .meeting-extra { display: none; }
  .meeting-step-bar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
  }
  .meeting-step-bar .btn-primary,
  .meeting-step-bar .btn-secondary {
    min-height: 2.75rem;
  }
  .meeting-step-bar .is-off { display: none !important; }
  /* The checklist's own Complete stays in the form for wide screens. */
  .meeting-run #rhythm_actions .meeting-complete,
  .meeting-run #rhythm_actions .meeting-remaining { display: none; }
  .issue-form { padding-bottom: 5.5rem; }
  .issue-form-save .btn-primary,
  .issue-form-save .btn-quiet { min-height: 2.75rem; }
  .issue-form-save {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
  }
}
.issue-tag { min-height: 2.75rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .flash-toast,
  .flash-toast--out {
    animation: none;
  }
}