/*
 * Fieldbook — Herd design system (loads after pico.min.css; overrides its tokens).
 *
 * World: modern and precise. Ink on paper, hairline rules, disciplined type,
 * tabular numerals; green is a single surgical instrument, never decoration.
 * ALL playfulness lives in the language (the herding voice in copy) — never
 * in visual whimsy.
 *
 * IA: Plans · People · Places (+ You). Mobile web + native: bottom tab bar
 * (.float-nav). Desktop web: top command bar (.topbar, .web-shell scoped —
 * the native layout body carries no .web-shell, so desktop rules never fire
 * in the iPad-landscape webview).
 *
 * Class vocabulary carried over from the Open Pasture pass — this file
 * re-skins the same markup (p-card, p-row, p-pill, flock, btn-join, ...).
 * Legacy --pasture-* names alias to Fieldbook tokens so swept views hold.
 */

/* ---------- Tokens ---------- */

/* Pico defines its palette on :root:not([data-theme=dark]) (specificity
   0,2,0); these overrides must match it to win the cascade. */
:root,
:root:not([data-theme="dark"]) {
  /* Fieldbook light: ink on paper */
  --fb-ground: #FBFBF8;
  --fb-paper: #FFFFFF;
  --fb-ink: #16180F;
  --fb-ink-60: rgba(22, 24, 15, 0.62);
  --fb-ink-40: rgba(22, 24, 15, 0.42);
  --fb-line: rgba(22, 24, 15, 0.12);
  --fb-line-strong: #16180F;
  --fb-green: #3E7A2E;
  --fb-green-bright: #9FE870;
  --fb-green-wash: #EFF6E9;
  --fb-signal: #C2482F;
  --fb-signal-soft: #F7E7E2;
  --fb-cta: #16180F;
  --fb-cta-ink: #FBFBF8;

  /* Fixed, theme-INDEPENDENT ink-on-paper pair for the float-nav "+" FAB
     (see .float-nav__create). Deliberately not redeclared in the
     `[data-theme="dark"]` or `@media (prefers-color-scheme: dark)` blocks
     below, so the cascade leaves these at their light-mode values in dark
     mode too -- the FAB must not invert with the theme. */
  --fb-fab-bg: #16180F;
  --fb-fab-fg: #FBFBF8;

  /* Legacy pasture aliases — swept views/components reference these */
  --pasture-cream: var(--fb-ground);
  --pasture-paper: var(--fb-paper);
  --pasture-field: var(--fb-green-wash);
  --pasture-field-soft: var(--fb-green-wash);
  --pasture-field-deep: var(--fb-green);
  --pasture-pine: var(--fb-green);
  --pasture-ink: var(--fb-ink);
  --pasture-ink-60: var(--fb-ink-60);
  --pasture-ink-40: var(--fb-ink-40);
  --pasture-line: var(--fb-line);
  --pasture-gold: var(--fb-green-bright);
  --pasture-gold-deep: var(--fb-green);
  --pasture-red: var(--fb-signal);
  --pasture-red-soft: var(--fb-signal-soft);
  --pasture-mint: var(--fb-green-wash);

  --p-radius: 12px;
  --p-radius-lg: 16px;
  --p-shadow: 0 1px 2px rgba(22, 24, 15, 0.06), 0 6px 20px rgba(22, 24, 15, 0.05);
  --p-shadow-lift: 0 2px 6px rgba(22, 24, 15, 0.08), 0 12px 32px rgba(22, 24, 15, 0.1);
  --p-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Pico overrides */
  --pico-font-family: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-border-radius: 10px;
  --pico-background-color: var(--fb-ground);
  --pico-color: var(--fb-ink);
  --pico-h1-color: var(--fb-ink);
  --pico-h2-color: var(--fb-ink);
  --pico-h3-color: var(--fb-ink);
  --pico-h4-color: var(--fb-ink);
  --pico-h5-color: var(--fb-ink);
  --pico-h6-color: var(--fb-ink);
  --pico-muted-color: var(--fb-ink-60);
  --pico-muted-border-color: var(--fb-line);
  --pico-primary: var(--fb-green);
  --pico-primary-background: var(--fb-cta);
  --pico-primary-border: var(--fb-cta);
  --pico-primary-underline: rgba(62, 122, 46, 0.4);
  --pico-primary-hover: #2E5C22;
  --pico-primary-hover-background: #2A2D20;
  --pico-primary-hover-border: #2A2D20;
  --pico-primary-inverse: var(--fb-cta-ink);
  --pico-primary-focus: rgba(62, 122, 46, 0.35);
  --pico-secondary: var(--fb-ink-60);
  --pico-secondary-background: var(--fb-green-wash);
  --pico-secondary-border: var(--fb-green-wash);
  --pico-secondary-hover-background: #E3EFD8;
  --pico-secondary-inverse: var(--fb-green);
  --pico-contrast: var(--fb-ink);
  --pico-contrast-background: var(--fb-ink);
  --pico-contrast-inverse: var(--fb-ground);
  --pico-card-background-color: var(--fb-paper);
  --pico-card-border-color: var(--fb-line);
  --pico-card-box-shadow: none;
  --pico-card-sectioning-background-color: var(--fb-paper);
  --pico-form-element-background-color: var(--fb-paper);
  --pico-form-element-border-color: rgba(22, 24, 15, 0.22);
  --pico-form-element-color: var(--fb-ink);
  --pico-form-element-placeholder-color: rgba(22, 24, 15, 0.4);
  --pico-form-element-active-border-color: var(--fb-green);
  --pico-form-element-focus-color: rgba(62, 122, 46, 0.3);
  --pico-mark-background-color: rgba(159, 232, 112, 0.4);
  --pico-mark-color: var(--fb-ink);
  --pico-table-border-color: var(--fb-line);
  --pico-table-row-stripped-background-color: rgba(62, 122, 46, 0.04);
  --pico-accordion-border-color: var(--fb-line);
  --pico-blockquote-border-color: var(--fb-green);
  --pico-box-shadow: var(--p-shadow);

  accent-color: var(--fb-green);
  caret-color: var(--fb-green);
}

/* Fieldbook dark: the evening register of the same book. */
:root[data-theme="dark"] {
  --fb-ground: #101210;
  --fb-paper: #181B17;
  --fb-ink: #F4F4F0;
  --fb-ink-60: rgba(244, 244, 240, 0.62);
  --fb-ink-40: rgba(244, 244, 240, 0.42);
  --fb-line: rgba(244, 244, 240, 0.1);
  --fb-line-strong: rgba(244, 244, 240, 0.85);
  --fb-green: #8BB07E;
  --fb-green-bright: #9FE870;
  --fb-green-wash: #1C231A;
  --fb-signal: #E06A4F;
  --fb-signal-soft: #33201B;
  --fb-cta: #E8FFDA;
  --fb-cta-ink: #101210;
  --p-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
  --p-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  --pico-background-color: var(--fb-ground);
  --pico-color: var(--fb-ink);
  --pico-muted-color: var(--fb-ink-60);
  --pico-card-background-color: var(--fb-paper);
  --pico-card-border-color: var(--fb-line);
  --pico-form-element-background-color: var(--fb-paper);
  --pico-form-element-border-color: rgba(244, 244, 240, 0.25);
  --pico-form-element-color: var(--fb-ink);
  --pico-table-border-color: var(--fb-line);
  --pico-primary: var(--fb-green);
  --pico-primary-background: var(--fb-cta);
  --pico-primary-border: var(--fb-cta);
  --pico-primary-inverse: var(--fb-cta-ink);
  --pico-primary-hover: #A8C89B;
  --pico-primary-hover-background: #D6F5C2;
  --pico-primary-hover-border: #D6F5C2;
  --pico-primary-underline: rgba(139, 176, 126, 0.4);
  --pico-primary-focus: rgba(139, 176, 126, 0.35);
  --pico-secondary-hover-background: #242B21;
  --pico-contrast-inverse: var(--fb-cta-ink);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fb-ground: #101210;
    --fb-paper: #181B17;
    --fb-ink: #F4F4F0;
    --fb-ink-60: rgba(244, 244, 240, 0.62);
    --fb-ink-40: rgba(244, 244, 240, 0.42);
    --fb-line: rgba(244, 244, 240, 0.1);
    --fb-line-strong: rgba(244, 244, 240, 0.85);
    --fb-green: #8BB07E;
    --fb-green-bright: #9FE870;
    --fb-green-wash: #1C231A;
    --fb-signal: #E06A4F;
    --fb-signal-soft: #33201B;
    --fb-cta: #E8FFDA;
    --fb-cta-ink: #101210;
    --p-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
    --p-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
    --pico-background-color: var(--fb-ground);
    --pico-color: var(--fb-ink);
    --pico-muted-color: var(--fb-ink-60);
    --pico-card-background-color: var(--fb-paper);
    --pico-card-border-color: var(--fb-line);
    --pico-form-element-background-color: var(--fb-paper);
    --pico-form-element-border-color: rgba(244, 244, 240, 0.25);
    --pico-form-element-color: var(--fb-ink);
    --pico-table-border-color: var(--fb-line);
    --pico-primary: var(--fb-green);
    --pico-primary-background: var(--fb-cta);
    --pico-primary-border: var(--fb-cta);
    --pico-primary-inverse: var(--fb-cta-ink);
    --pico-primary-hover: #A8C89B;
    --pico-primary-hover-background: #D6F5C2;
    --pico-primary-hover-border: #D6F5C2;
    --pico-primary-underline: rgba(139, 176, 126, 0.4);
    --pico-primary-focus: rgba(139, 176, 126, 0.35);
    --pico-secondary-hover-background: #242B21;
    --pico-contrast-inverse: var(--fb-cta-ink);
    color-scheme: dark;
  }
}

/* ---------- Base voice ---------- */

html { background: var(--fb-ground); }

body {
  background: var(--fb-ground);
  color: var(--fb-ink);
  font-family: var(--pico-font-family);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 { font-size: 2.1rem; line-height: 1.02; margin-bottom: 0.5rem; }
h2 { font-size: 1.3rem; line-height: 1.15; margin-bottom: 0.5rem; }
h3 { font-size: 1.05rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; }

::selection { background: var(--fb-green-bright); color: #16180F; }

:focus-visible {
  outline: 2px solid var(--fb-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Form elements already carry Pico's border + focus-ring treatment
   (--pico-form-element-active-border-color / -focus-color); adding the
   generic outline on top doubles the green signal. Single hairline ring. */
:where(input, textarea, select):focus-visible {
  outline: none;
}

a { text-underline-offset: 0.2em; }

button, [type="submit"], [type="button"], [role="button"] {
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: -0.01em;
  transition: transform 0.16s var(--p-ease), box-shadow 0.16s var(--p-ease), background-color 0.16s var(--p-ease);
}

button:active, [type="submit"]:active, [role="button"]:active { transform: scale(0.98); }

input, select, textarea { border-radius: 10px; }

table, time, .p-row__when, .p-card__meta { font-variant-numeric: tabular-nums; }

* { scrollbar-color: var(--fb-ink-40) transparent; scrollbar-width: thin; }

/* ---------- App shell ---------- */

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1.25rem calc(6.2rem + env(safe-area-inset-bottom, 0px));
}

/* Native iOS shell (turbo_native layout, `body.native-shell`): the WKWebView
   renders edge-to-edge behind a real Swift-drawn UINavigationBar
   (AppDelegate#configureAppearance, ~44pt compact height) and there's no
   native tab bar (SceneDelegate.swift) -- `.float-nav` below is the only
   bottom chrome, drawn in-page. Unlike web/mobile-web, the native shell has
   no in-flow `<header>` pushing content down, so `main` needs its own top
   clearance for the nav bar band, and extra bottom clearance beyond the
   web value as a safety margin over `.float-nav`. env(safe-area-inset-*)
   alone only covers the notch/home-indicator, not the native bars drawn
   above/below it. Scoped to `.native-shell` so mobile web -- which already
   reserves header space via its in-flow header and was tuned for the base
   `main` rule above -- isn't double-padded (herding QA iOS sim pass). */
body.native-shell main {
  padding-top: calc(2.75rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
}

/* Fieldbook wordmark: lowercase Sora-bold ink text, no raster logo. */
.wordmark {
  font-family: "Sora", var(--pico-font-family);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--fb-ink);
  text-decoration: none;
  line-height: 1;
}

/* Mobile shared header (non-home pages) */
body > header,
.web-shell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.25rem;
  max-width: 46rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--fb-line);
}

body > header .wordmark { font-size: 1.1rem; }

body > header .app-header__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body > header .app-header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: var(--fb-ink);
  border: 1px solid transparent;
}

body > header .app-header__icon-btn:hover { border-color: var(--fb-line); }

/* ---------- Desktop shell: top command bar (.web-shell only) ---------- */

.topbar { display: none; }

@media (min-width: 1024px) {
  .web-shell .topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 0.7rem 1.6rem;
    background: color-mix(in srgb, var(--fb-ground) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--fb-line-strong);
  }

  .web-shell main {
    max-width: 62rem;
    padding: 1.6rem 3rem 3rem;
  }

  .web-shell .float-nav { display: none; }
  body.web-shell > header { display: none; }
}

.topbar__brand { display: inline-flex; align-items: center; text-decoration: none; }
.topbar__brand:hover { text-decoration: none; }
.topbar__brand .wordmark { font-size: 1.25rem; }

.topbar__center { display: flex; align-items: center; gap: 1.4rem; justify-self: start; }

.topbar__tab {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fb-ink-60);
  text-decoration: none;
  padding: 0.35rem 0;
  position: relative;
}

.topbar__tab:hover { color: var(--fb-ink); text-decoration: none; }

.topbar__tab--on { color: var(--fb-ink); font-weight: 700; }

.topbar__tab--on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.85rem;
  height: 3px;
  background: var(--fb-green);
}

.topbar__search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 240px;
  border: 1px solid var(--fb-line);
  border-radius: 9px;
  padding: 0.45rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--fb-ink-60);
  text-decoration: none;
  margin-left: 0.6rem;
}

.topbar__search:hover { border-color: var(--fb-ink-40); text-decoration: none; color: var(--fb-ink-60); }

.topbar__right { display: inline-flex; align-items: center; gap: 0.7rem; }

.topbar__start {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--fb-cta);
  color: var(--fb-cta-ink);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.55rem 1rem;
  border-radius: 9px;
  text-decoration: none;
}

.topbar__start:hover { background: var(--pico-primary-hover-background); color: var(--fb-cta-ink); text-decoration: none; }
.topbar__start .plus { color: var(--fb-green-bright); font-weight: 800; }

.topbar__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: var(--fb-ink);
  border: 1px solid transparent;
  background: none;
  font: inherit;
  cursor: pointer;
}

.topbar__icon-btn:hover { border-color: var(--fb-line); }

/* Anchored popover positioning, combined with a surface class (.p-card,
   .avatar-menu) on the same element -- e.g. sessions/_calendar_button. */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  z-index: 50;
}

/* ---------- Avatar menu (desktop command-bar account popover) ---------- */

.avatar-menu {
  min-width: 11rem;
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius);
  padding: 0.4rem;
  box-shadow: var(--p-shadow-lift);
}

.avatar-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  color: var(--fb-ink);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.avatar-menu__item:hover { background: var(--fb-green-wash); text-decoration: none; }
.avatar-menu__form { margin: 0; }

/* ---------- Command palette (Cmd/Ctrl-K search dialog) ---------- */

/* Pico's `dialog` element rule makes the dialog itself a full-viewport
   flex-centered scrim (min-width/min-height:100%, display:flex) meant to
   wrap a nested `<article>` panel -- this markup has no such wrapper, so
   min-width/min-height and display must be reset here or the 36rem sizing
   below is silently overpowered by Pico's 100% mins.
   Scoped to `[open]`: an unconditional `#command-palette{display:block}`
   would out-specificity the UA `dialog:not([open]){display:none}` default
   and leave the palette permanently visible on every page. */
#command-palette[open] {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 36rem;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  margin: 12vh auto auto;
  padding: 0;
  background: var(--fb-paper);
  color: var(--fb-ink);
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow-lift);
  overflow: hidden;
}

#command-palette::backdrop {
  background: color-mix(in srgb, var(--fb-ink) 40%, transparent);
}

#command-palette form {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--fb-line);
}

#command-palette input[type="search"] {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font-size: 1rem;
  color: var(--fb-ink);
}

#command-palette input[type="search"]:focus { outline: none; box-shadow: none; }

#command-palette-results {
  display: block;
  padding: 0.6rem 1.1rem 1.1rem;
  max-height: calc(70vh - 3.6rem);
  overflow-y: auto;
}

/* ---------- Bottom tab bar (mobile web + native): Plans·People·Places·You ---------- */

.float-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  display: flex;
  align-items: stretch;
  padding: 0.25rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--fb-ground) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--fb-line);
  border-radius: 0;
  box-shadow: none;
  z-index: 50;
  transition: transform 0.25s var(--p-ease), opacity 0.25s var(--p-ease);
}

.float-nav--hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }

.float-nav__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0.55rem 0.3rem 0.35rem;
  border-radius: 10px;
  color: var(--fb-ink-60);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  position: relative;
  min-width: 0;
}

.float-nav__tab:hover { text-decoration: none; color: var(--fb-ink); }

.float-nav__tab--on { color: var(--fb-ink); background: none; }

.float-nav__tab--on::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  background: var(--fb-green);
}

.float-nav__label { line-height: 1; }

.float-nav__create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 44px;
  height: 44px;
  margin: 0 0.3rem;
  border-radius: 12px;
  /* Deliberately NOT --fb-cta/--fb-cta-ink, and NOT --fb-ink/--fb-ground:
     all of those invert with the theme (correct for primary CTA buttons
     and body text, wrong here). Fieldbook's green is a single surgical
     instrument reserved for the "you are here" marker -- the FAB stays a
     fixed ink-on-paper pill in both schemes, matching the desktop
     treatment, via the un-themed --fb-fab-* tokens below. */
  background: var(--fb-fab-bg);
  color: var(--fb-fab-fg);
  box-shadow: none;
  flex-shrink: 0;
}

.float-nav__create:active { transform: scale(0.95); }

/* ---------- Hero (typographic — the rule does the work) ---------- */

.hero-field {
  position: relative;
  overflow: visible;
  background: transparent;
  color: var(--fb-ink);
  border-radius: 0;
  border-bottom: 2px solid var(--fb-line-strong);
  padding: 0.8rem 0 1.5rem;
  margin-bottom: 0.4rem;
}

.hero-field::after { content: none; }
.hero-field > * { position: relative; z-index: 1; }
.hero-field h1, .hero-field h2 { color: var(--fb-ink); }

.hero-field .kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fb-green);
  opacity: 1;
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.hero-field__title { font-size: clamp(2rem, 6vw, 2.9rem); letter-spacing: -0.045em; margin-bottom: 0.4rem; }
.hero-field__title-link { color: inherit; text-decoration: none; }
.hero-field__title-link:hover { text-decoration: none; }
.hero-field__meta { font-weight: 500; font-size: 0.95rem; color: var(--fb-ink-60); margin: 0 0 1rem; opacity: 1; }
.hero-field__meta b, .hero-field__meta strong { color: var(--fb-ink); }
.hero-field__flock { margin-bottom: 1.1rem; }

/* ---------- Week spine (Plans home) ---------- */

.move-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.7rem 0;
  margin-bottom: 0.4rem;
  scrollbar-width: none;
}

.move-strip::-webkit-scrollbar { display: none; }

.move-strip__item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  border-radius: 9px;
  padding: 0.5rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fb-ink);
  text-decoration: none;
  white-space: nowrap;
}

.move-strip__item:hover { border-color: var(--fb-ink-40); text-decoration: none; }
.move-strip__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fb-green); flex-shrink: 0; }
.move-strip__item--hot::before { background: var(--fb-signal); }

.week { margin-top: 0.3rem; }

.week-day {
  display: grid;
  grid-template-columns: 4rem 1fr;
  border-bottom: 1px solid var(--fb-line);
}

.week-day:last-child { border-bottom: none; }

.week-day__date { padding: 0.9rem 0 0; }
.week-day__date b { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.week-day__date span { font-size: 0.6rem; letter-spacing: 0.16em; font-weight: 600; color: var(--fb-ink-60); text-transform: uppercase; }
.week-day--today .week-day__date b { color: var(--fb-green); }

.week-day__entries { padding: 0.7rem 0 0.8rem; min-width: 0; }

.week-entry { padding: 0.35rem 0; position: relative; }

.week-entry__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.week-entry__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.week-entry__title a { color: inherit; text-decoration: none; }
.week-entry__title a:hover { color: var(--fb-green); text-decoration: none; }
.week-entry__time { font-size: 0.74rem; font-weight: 600; color: var(--fb-ink-60); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.week-entry__sub { font-size: 0.78rem; font-weight: 500; color: var(--fb-ink-60); margin-top: 1px; }
.week-entry__sub b { color: var(--fb-green); font-weight: 700; }

.week-entry--mine .week-entry__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--fb-green-bright);
  border: 1px solid var(--fb-ink);
  margin-right: 0.5rem;
  border-radius: 2px;
  vertical-align: 0.05em;
}

.week-entry__chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--fb-green);
  border: 1px dashed var(--fb-green);
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  margin-top: 0.25rem;
  text-decoration: none;
}

.week-empty { color: var(--fb-ink-60); font-size: 0.8rem; font-weight: 500; font-style: italic; padding: 0.4rem 0; }
.week-empty a { color: var(--fb-green); font-weight: 700; font-style: normal; text-decoration: none; }

/* ---------- Cards, rows, pills ---------- */

.p-card {
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius);
  padding: 1.05rem 1.15rem;
  margin-bottom: 0.75rem;
  box-shadow: none;
  transition: border-color 0.15s var(--p-ease), box-shadow 0.2s var(--p-ease);
}

a.p-card { display: block; color: inherit; text-decoration: none; }
a.p-card:hover { border-color: var(--fb-ink-40); box-shadow: var(--p-shadow); transform: none; }

.p-card--ink { background: var(--fb-ink); color: var(--fb-ground); border-color: var(--fb-ink); }
.p-card--ink h3, .p-card--ink .p-card__title, .p-card--ink .p-card__title a { color: var(--fb-ground); }
.p-card--ink .p-card__meta { color: color-mix(in srgb, var(--fb-ground) 65%, transparent); }
.p-card--ink .btn-quiet { color: var(--fb-ground); border-color: color-mix(in srgb, var(--fb-ground) 35%, transparent); }
.p-card--ink .llama-avatar { border-color: var(--fb-ground); }

[data-theme="dark"] .p-card--ink { background: var(--fb-paper); color: var(--fb-ink); border-color: var(--fb-line); }
[data-theme="dark"] .p-card--ink h3, [data-theme="dark"] .p-card--ink .p-card__title a { color: var(--fb-ink); }

.p-card--field { background: var(--fb-paper); border-color: var(--fb-line); color: var(--fb-ink); }

.p-eyelabel {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fb-green);
}

.p-card--ink .p-eyelabel { color: var(--fb-green-bright); }

.p-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  color: var(--fb-ink);
  border-radius: 7px;
  padding: 0.26rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Legacy gold class names survive; the "you" marker is bright green now */
.p-pill--gold { background: var(--fb-green-bright); color: #16180F; }
.p-pill--red { background: var(--fb-signal-soft); color: var(--fb-signal); }
.p-pill--quiet { background: transparent; border: 1px solid var(--fb-line); color: var(--fb-ink-60); }
.p-pill--on { background: var(--fb-cta); color: var(--fb-cta-ink); }
.p-pill--sm { font-size: 0.68rem; padding: 0.16rem 0.5rem; }
.p-pill--lg { font-size: 0.9rem; padding: 0.4rem 0.9rem; }

/* ---------- Theme control (Appearance row, tri-state) ---------- */

.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  border-radius: 9px;
  padding: 2px;
}

.theme-control__option {
  border: none;
  background: transparent;
  color: var(--fb-ink-60);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 7px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

.theme-control__option:hover { color: var(--fb-ink); }

.theme-control__option[aria-pressed="true"] {
  background: var(--fb-cta);
  color: var(--fb-cta-ink);
}

.p-sectionlabel {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fb-ink-60);
  margin: 1.5rem 0 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.p-sectionlabel a { font-size: 0.78rem; letter-spacing: 0; text-transform: none; font-weight: 600; }

.p-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.1rem;
  border-bottom: 1px solid var(--fb-line);
}

.p-row:last-child { border-bottom: none; }

.p-row__when {
  min-width: 4.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fb-ink-60);
  text-transform: uppercase;
}

.p-row__main { flex: 1; min-width: 0; }
.p-row__main b { letter-spacing: -0.015em; }
.p-row__sub { font-size: 0.84rem; color: var(--fb-ink-60); }

a.p-row { text-decoration: none; color: inherit; }
a.p-row:hover { text-decoration: none; }
a.p-row:hover .p-row__main b { color: var(--fb-green); }
a.p-row b { color: var(--fb-ink); }

/* Row-level secondary actions, revealed on hover/focus (herding-6wj.6).
   `hover:hover` guards touch devices -- without a real pointer the actions
   stay visible so tap targets aren't hidden behind a gesture that doesn't
   exist there. Keyboard users still get them via :focus-within regardless
   of pointer type. */
.row-actions { transition: opacity 0.12s ease; }

@media (hover: hover) {
  .p-row .row-actions { opacity: 0; }
  .p-row:hover .row-actions,
  .p-row:focus-within .row-actions,
  .row-actions:focus-within { opacity: 1; }
}

/* ---------- Flock (quiet outlines, no cartoon rings) ---------- */

.flock { display: flex; padding-left: 8px; }

.flock .ewe,
.ewe {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fb-green-wash);
  border: 1.5px solid var(--fb-ground);
  outline: 1px solid var(--fb-ink-40);
  margin-left: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fb-ink);
  overflow: hidden;
}

.ewe img { width: 100%; height: 100%; object-fit: cover; }
.ewe--you { background: var(--fb-green-bright); color: #16180F; outline-color: var(--fb-green); }
.ewe--more { background: transparent; outline-style: dashed; color: var(--fb-ink-60); }

/* ---------- Primary actions ---------- */

.btn-join {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--fb-cta);
  color: var(--fb-cta-ink);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.75rem 1.35rem;
  border-radius: 10px;
  border: none;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.16s var(--p-ease), background-color 0.16s var(--p-ease);
}

.btn-join:hover { background: var(--pico-primary-hover-background); color: var(--fb-cta-ink); text-decoration: none; transform: translateY(-1px); }
.btn-join:active { transform: scale(0.98); }
.btn-join .arrow { color: var(--fb-green-bright); }
.btn-join--sm { font-size: 0.86rem; padding: 0.55rem 1rem; }

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--fb-ink-40);
  color: var(--fb-ink);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.9rem;
}

.btn-quiet:hover { border-color: var(--fb-ink); text-decoration: none; }

.btn-danger {
  background: transparent;
  border: 1px solid var(--fb-signal);
  color: var(--fb-signal);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
}

/* The one committed motion: your dot joins the flock on RSVP. */
@keyframes flock-join {
  0% { transform: scale(0.2) translateY(14px); opacity: 0; }
  60% { transform: scale(1.1) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}

.ewe--joining { animation: flock-join 0.5s var(--p-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .ewe--joining { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Flash, badges, empty states ---------- */

.flash-notice, .flash-error {
  max-width: 46rem;
  margin: 0 auto 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--p-radius);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid;
}

.flash-notice { background: var(--fb-green-wash); color: var(--fb-green); border-color: color-mix(in srgb, var(--fb-green) 30%, transparent); }
.flash-error { background: var(--fb-signal-soft); color: var(--fb-signal); border-color: color-mix(in srgb, var(--fb-signal) 30%, transparent); }

.badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fb-green-bright);
  border: 2px solid var(--fb-ground);
}

#notification_badge { position: relative; display: inline-block; width: 0; height: 0; }

.notif-count {
  position: absolute;
  top: -8px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--fb-ink);
  color: var(--fb-paper);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body > header nav a #notification_badge { margin-right: 1.2rem; }

.p-empty {
  text-align: center;
  padding: 2.4rem 1.4rem;
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius-lg);
  color: var(--fb-ink-60);
}

.p-empty h3 { color: var(--fb-ink); }

/* ---------- Sheets / drawers / dialogs ---------- */

dialog {
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow-lift);
  background: var(--fb-paper);
  color: var(--fb-ink);
}

dialog::backdrop { background: rgba(10, 12, 9, 0.5); backdrop-filter: blur(2px); }

.p-sheet-bar {
  position: sticky;
  bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius);
  padding: 0.8rem 1rem;
  box-shadow: var(--p-shadow-lift);
}

@media (min-width: 1024px) {
  .web-shell .p-sheet-bar { position: static; box-shadow: none; }
}

.p-sheet-bar__inner { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.p-sheet-bar__inner p { margin: 0; font-size: 0.8rem; color: var(--fb-ink-60); }
.p-sheet-bar__inner form { margin: 0; }

/* ---------- Sheet (slide-up modal, SheetComponent) ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 15, 0.45);
  backdrop-filter: blur(2px);
}

.sheet__panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  background: var(--fb-paper);
  color: var(--fb-ink);
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius-lg) var(--p-radius-lg) 0 0;
  box-shadow: var(--p-shadow-lift);
  overflow: hidden;
  transition: transform 0.2s var(--p-ease);
}

.sheet__handle {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
  cursor: grab;
}

.sheet__handle-bar {
  width: 2.5rem;
  height: 0.375rem;
  background: var(--fb-line);
  border-radius: 999px;
}

.sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem 0.5rem;
}

.sheet__title { margin: 0; }

.sheet__close { padding: 0.4rem; }

.sheet__body {
  padding: 0 1rem 1.5rem;
  overflow-y: auto;
  max-height: calc(90vh - 5rem);
}

/* ---------- Sheet → popover (desktop web only, herding-6wj.2) ----------
   `.sheet--popover` is the same SheetComponent markup used for the create
   menu and notifications drawer; on desktop it drops the full-screen
   bottom-sheet treatment for a small anchored panel under the top command
   bar (right-aligned, matching the "Start something"/bell cluster in
   .topbar__right), no scrim. Mobile/native are untouched — bottom-sheet
   behavior, drag handle, dimmed backdrop all stay exactly as-is below
   1024px and in the native shell (no `.web-shell`). */
@media (min-width: 1024px) {
  .web-shell .sheet--popover {
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4.6rem 1.6rem 0 0;
  }

  .web-shell .sheet--popover .sheet__backdrop {
    background: transparent;
    backdrop-filter: none;
  }

  .web-shell .sheet--popover .sheet__panel {
    width: 23rem;
    max-width: 23rem;
    max-height: calc(100vh - 6.5rem);
    border-radius: var(--p-radius-lg);
    transition: transform 0.16s var(--p-ease), opacity 0.16s var(--p-ease);
  }

  .web-shell .sheet--popover .sheet__handle { display: none; }

  .web-shell .sheet--popover .sheet__body {
    max-height: calc(100vh - 11.5rem);
  }
}

/* ---------- Toast (ToastComponent) ---------- */

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
}

.toast__panel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--fb-paper);
  color: var(--fb-ink);
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius);
  padding: 0.75rem 1rem;
  box-shadow: var(--p-shadow-lift);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Green/red are reserved for genuine success/error signals; info and
   warning toasts stay on neutral paper (no borrowed color meaning). */
.toast__panel--success { background: var(--fb-green-wash); color: var(--fb-green); border-color: color-mix(in srgb, var(--fb-green) 30%, transparent); }
.toast__panel--error { background: var(--fb-signal-soft); color: var(--fb-signal); border-color: color-mix(in srgb, var(--fb-signal) 30%, transparent); }

.toast__icon { flex-shrink: 0; }
.toast__message { flex: 1; margin: 0; }
.toast__dismiss { padding: 0.3rem; }

/* ---------- Landing page (marketing) ---------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: background-color 0.25s var(--p-ease), box-shadow 0.25s var(--p-ease);
}

.lp-nav--scrolled {
  background: color-mix(in srgb, var(--fb-ground) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--fb-line);
}

.lp-nav > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.8rem 1.2rem;
}

.lp-nav img { height: 32px; width: auto; }

.lp-collapse-chat { display: flex; flex-direction: column; gap: 0.4rem; }
.lp-collapse-chat > div {
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  align-self: flex-start;
}

.lp-showcase-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.lp-steps { display: flex; flex-direction: column; gap: 1rem; }
.lp-step { display: flex; gap: 0.8rem; flex: 1; }
.lp-trust-bar { display: grid; gap: 1.2rem; grid-template-columns: 1fr; text-align: center; }

/* Decorative icons stay ink, not green — green is reserved for the single
   primary CTA per Fieldbook's "surgical instrument" rule. */
.lp-trust-bar svg,
.lp-icon svg { width: 24px; height: 24px; color: var(--fb-ink-60); margin: 0 auto 0.4rem; }

@media (min-width: 640px) {
  .lp-showcase-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-steps { flex-direction: row; align-items: flex-start; }
  .lp-trust-bar { grid-template-columns: repeat(3, 1fr); }
}

/* Generic landing section wrapper — width tiers match the original inline
   max-widths (hero/steps/trust/footer 40-48rem centered, showcase 56rem). */
.lp-section { max-width: 48rem; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
.lp-section--collapse { display: grid; gap: 1.5rem; grid-template-columns: 1fr; padding-top: 1.5rem; }
.lp-section--showcase { max-width: 56rem; }
.lp-section--trust { padding-top: 1.5rem; }

.lp-preview-card { max-width: 24rem; }
.lp-preview-card__flock { margin: 0.8rem 0; }
.lp-preview-card__cta { margin-top: 0.8rem; }

.lp-hero { max-width: 40rem; margin: 0 auto; padding: 3rem 1.2rem 2.5rem; text-align: center; }
.lp-hero__llama { max-width: 120px; margin: 0 auto 1rem; }
.lp-hero__mark { margin-bottom: 0.8rem; }
.lp-hero__mark img { height: 56px; width: auto; margin: 0 auto; }
.lp-hero__title { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.lp-hero__eyebrow { margin-bottom: 1rem; }
.lp-hero__lede { color: var(--fb-ink-60); font-size: 1.05rem; margin-bottom: 1.4rem; }
.lp-hero__caption { margin-top: 0.6rem; }
.lp-hero__form { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.lp-nav__links { display: flex; align-items: center; gap: 1.2rem; }
.lp-section__head { text-align: center; margin-bottom: 1.6rem; }
.lp-feature-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lp-feature-grid { grid-template-columns: 1fr 1fr; } }

/* Quiet meta text shared across the landing page (captions, footer line). */
.lp-fine { color: var(--fb-ink-60); font-size: 0.85rem; }
.lp-fine--block { display: block; }

.lp-final-cta { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; border-radius: var(--p-radius-lg); position: relative; }
.lp-final-cta__bg { position: absolute; inset: 0; opacity: 0.15; overflow: hidden; border-radius: inherit; }
.lp-final-cta__bg-img { width: 100%; height: 100%; object-fit: cover; }
.lp-final-cta__form { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 0.8rem; }
.lp-final-cta__note { margin-top: 0.6rem; }

.lp-footer { max-width: 40rem; margin: 0 auto; padding: 0 1.2rem 3rem; text-align: center; }
.lp-footer__logo { height: 30px; width: auto; margin-bottom: 0.5rem; }

/* ---------- Home header ---------- */

.home-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.4rem 0 0.6rem;
}

.home-header h1 { font-size: 1.35rem; margin-bottom: 0.05rem; }
.home-header__date { color: var(--fb-ink-60); font-weight: 500; font-size: 0.85rem; margin: 0; font-variant-numeric: tabular-nums; }

.home-header__actions { display: flex; align-items: center; gap: 0.4rem; }

/* Mobile only: on desktop these duplicate the top command bar's own
   search/bell icons, so the whole cluster is desktop:hidden in markup. */
.home-header__actions a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--fb-ink);
  background: transparent;
  border: 1px solid var(--fb-line);
}

.home-header__actions a:hover { border-color: var(--fb-ink-40); }

/* ---------- Card internals ---------- */

.p-card--tappable { position: relative; }
.p-card__overlay { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.p-card__overlay:focus-visible { outline-offset: -3px; }

.p-card--tappable .p-card__foot a,
.p-card--tappable .p-card__foot form,
.p-card--tappable .p-card__foot span,
.p-card--tappable h3 a { position: relative; z-index: 2; }

.p-card--tappable details,
.p-card--tappable summary,
.p-card--tappable button,
.p-card--tappable input,
.p-card--tappable a:not(.p-card__overlay) { position: relative; z-index: 2; }

.p-card__title { margin: 0.1rem 0; font-size: 1.1rem; }
.p-card__title a { color: inherit; text-decoration: none; }
.p-card__meta { color: var(--fb-ink-60); font-size: 0.86rem; font-weight: 500; margin: 0 0 0.6rem; }

.p-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.p-card__foot--actions { justify-content: flex-end; }
.p-card__foot form { margin: 0; }
.p-card__foot button { margin: 0; width: auto; }

.p-card--invite { border-color: var(--fb-line); }
.p-card--invite .p-eyelabel { color: var(--fb-green); }
.p-card--invite svg:not([width]) { width: 24px; height: 24px; flex-shrink: 0; }

.p-card--prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--fb-ink);
  text-decoration: none;
  border-style: dashed;
}

.p-card--prompt:hover { text-decoration: none; border-color: var(--fb-green); }
.p-card--prompt__label { font-weight: 600; }
.p-card--prompt__arrow { color: var(--fb-green); font-weight: 700; }

/* ---------- Directory grid (People / Flocks / Stables — herding-6wj.3) ----------
   Shared desktop card-grid treatment for the three directory screens: herd hub
   People/Flocks/Stables sections, lists#index, spaces#index. 2-col at desktop,
   3-col once there's room (>=1280px, nested inside the same .web-shell scope
   per the existing .home-ledger/.desktop:max-w-[68rem] wide-desktop pattern).
   `.space-grid` is kept as an alias so existing spaces markup holds. */

.dir-grid, .space-grid { display: grid; gap: 0.85rem; }
.dir-grid > .p-card, .space-grid > .p-card { margin-bottom: 0; }

@media (min-width: 1024px) {
  .web-shell .dir-grid, .web-shell .space-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

@media (min-width: 1280px) {
  .web-shell .dir-grid, .web-shell .space-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Directory header band: title-row (h1 + New) + search-within + filter chips,
   in that stacked order on mobile (matches the existing single-column
   composition); at desktop the four pieces line up on one row: title,
   search, filters, New. */

.dir-header { display: flex; flex-direction: column; gap: 0.7rem; }

.dir-header__title { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.dir-header__title h1 { margin: 0; }

.dir-header__search .topbar__search { width: 100%; margin-left: 0; }

@media (min-width: 1024px) {
  .web-shell .dir-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .web-shell .dir-header__title { flex: 0 0 auto; order: 1; }
  .web-shell .dir-header__title .dir-header__new { display: none; }
  .web-shell .dir-header__search { flex: 1 1 220px; order: 2; }
  .web-shell .dir-header__filters { order: 3; flex: 0 0 auto; }
  .web-shell .dir-header__new--desktop { display: inline-flex; order: 4; flex: 0 0 auto; }
}

.dir-header__new--desktop { display: none; }

/* ---------- Avatars ---------- */

.llama-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fb-green-wash);
  border: 1.5px solid var(--fb-ground);
  outline: 1px solid var(--fb-ink-40);
  color: var(--fb-ink);
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}

.llama-avatar img { width: 100%; height: 100%; object-fit: cover; }

.llama-avatar-xs { width: 24px; height: 24px; font-size: 0.58rem; }
.llama-avatar-sm { width: 34px; height: 34px; font-size: 0.7rem; }
.llama-avatar-default { width: 42px; height: 42px; font-size: 0.82rem; }
.llama-avatar-lg { width: 56px; height: 56px; font-size: 1rem; }
.llama-avatar-xl { width: 82px; height: 82px; font-size: 1.4rem; }

.flock .llama-avatar { margin-left: -8px; }
.flock > *:first-child { margin-left: 0; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fb-green-wash);
  border: 1.5px solid var(--fb-ground);
  outline: 1px solid var(--fb-ink-40);
  color: var(--fb-ink);
  font-weight: 600;
  flex-shrink: 0;
}

.avatar-xs { width: 24px; height: 24px; font-size: 0.58rem; }
.avatar-sm { width: 30px; height: 30px; font-size: 0.68rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.8rem; }
.avatar-lg { width: 54px; height: 54px; font-size: 1rem; }
.flock .avatar { margin-left: -8px; }
.flock .avatar-xs, .flock .llama-avatar-xs { margin-left: -5px; }

/* ---------- Home desktop two-column (web shell only) ---------- */

@media (min-width: 1024px) {
  .web-shell .home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 2.5rem;
    align-items: start;
  }
  .web-shell .home-rail { position: sticky; top: 4.5rem; display: block; }
}

.home-rail { display: none; }

.home-rail > div {
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}

.home-rail h3 {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fb-ink-60);
}

.home-rail a { color: var(--fb-ink); text-decoration: none; font-weight: 600; display: block; padding: 0.35rem 0; }
.home-rail a:hover { color: var(--fb-green); }

.home-rail .home-rail__promo { background: var(--fb-paper); border-color: var(--fb-line); }
.home-rail__promo-title { font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; margin: 0 0 0.15rem; }
.home-rail__promo-sub { font-size: 0.83rem; margin: 0 0 0.8rem; color: var(--fb-ink-60); }

.home-rail a.btn-join { color: var(--fb-cta-ink); display: inline-flex; padding: 0.55rem 1.1rem; }

/* ---------- Desktop home ledger (master-detail, web shell only, herding-6wj.1) ---------- */

.home-ledger { display: none; }

@media (min-width: 1024px) {
  /* `main` is normally centered and capped (46rem mobile / 62rem desktop,
     see the base `main` and `.web-shell main` rules above) -- the ledger
     wants full-bleed instead (mock: nav flush against the viewport edge,
     hairline border, full height under the command bar), so drop those
     constraints specifically when `main`'s direct child is the ledger. */
  .web-shell main:has(> .home-ledger) {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .web-shell .home-ledger {
    display: grid;
    grid-template-columns: 24rem minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - 4.6rem);
  }

  .web-shell .ledger-nav {
    border-right: 1px solid var(--fb-line);
    padding: 1.6rem 1.5rem 2rem 3rem;
    align-self: stretch;
  }

  /* Caps the pane so the session detail's own desktop two-column grid
     (main content + 20rem action rail, see
     sessions/_session_detail.html.erb) gets a fluid ~40-46rem main column
     with the rail beside it, instead of the squeeze the old 44rem cap
     (fighting the nav column) forced on this same nested grid. */
  .web-shell .ledger-detail-pane {
    padding: 1.6rem 3rem 3rem 2.5rem;
    max-width: 64rem;
  }
}

/* Desktop-only rail panels (form summary/submit rail, gathering-details
   moved into the session rail -- herding-6wj.5). `.hidden`'s `!important`
   would block a `desktop:block` override, so these panels get their own
   unscoped default-hide, same pattern as `.home-rail` above. */
.rail-desktop-only { display: none; }

.ledger-move { padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--fb-line); }

.ledger-move__item {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fb-ink);
  padding: 0.25rem 0;
  text-decoration: none;
}

.ledger-move__item:hover { color: var(--fb-green); }
.ledger-move__item:first-of-type { color: var(--fb-signal); }

.ledger-section { padding: 0.6rem 0; border-bottom: 1px solid var(--fb-line); }
.ledger-section:last-child { border-bottom: none; }

.ledger-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.ledger-row:hover { background: var(--fb-paper); text-decoration: none; }

.ledger-row__when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 3rem;
  flex-shrink: 0;
}

.ledger-row__day { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fb-ink-60); }
.ledger-row__time { font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.ledger-row__body { flex: 1; min-width: 0; }
.ledger-row__title { display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.ledger-row__sub { display: block; font-size: 0.72rem; color: var(--fb-ink-60); margin-top: 1px; text-transform: capitalize; }

.ledger-row__count { font-size: 0.74rem; font-weight: 700; color: var(--fb-green); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.ledger-row--selected,
.ledger-row[aria-current="page"] {
  background: var(--fb-ink);
  color: var(--fb-ground);
}

.ledger-row--selected:hover,
.ledger-row[aria-current="page"]:hover { background: var(--fb-ink); }

.ledger-row--selected .ledger-row__day,
.ledger-row[aria-current="page"] .ledger-row__day { color: color-mix(in srgb, var(--fb-ground) 60%, transparent); }

.ledger-row--selected .ledger-row__sub,
.ledger-row[aria-current="page"] .ledger-row__sub { color: color-mix(in srgb, var(--fb-ground) 70%, transparent); }

.ledger-row--selected .ledger-row__count,
.ledger-row[aria-current="page"] .ledger-row__count { color: var(--fb-green-bright); }

.ledger-detail-pane .kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fb-green);
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.ledger-detail__title { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.04em; margin-bottom: 1rem; }
.ledger-detail__empty { color: var(--fb-ink-60); font-size: 0.9rem; font-style: italic; padding: 2rem 0; }

/* ---------- Auth ---------- */

.auth-shell {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.2rem;
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--fb-paper);
  border: 1px solid var(--fb-line);
  border-radius: var(--p-radius-lg);
  padding: 2rem 1.8rem;
  box-shadow: var(--p-shadow);
}

.auth-card .btn-join { width: 100%; justify-content: center; }

.otp-input {
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  text-align: center;
  font-weight: 700;
}

/* ---------- Pill tab rows ---------- */

.chip-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.chip-row a { text-decoration: none; }
.chip-row > * { flex: 0 0 auto; }

/* ---------- Hairline tab row (aria-current, not pill fill) ---------- */

.p-tabs {
  display: flex;
  gap: 1.4rem;
  border-bottom: 1px solid var(--fb-line);
  margin-bottom: 1rem;
}

.p-tabs a {
  padding: 0.6rem 0.05rem;
  margin-bottom: -1px;
  color: var(--fb-ink-60);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.p-tabs a:hover { color: var(--fb-ink); }

.p-tabs a[aria-current="page"] {
  color: var(--fb-ink);
  border-bottom-color: var(--fb-green);
}

/* ---------- Minimal layout utilities (closed set — do not grow) ---------- */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; min-width: 0; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.hidden { display: none !important; }

/* Visually-hidden but still hit-testable/clickable — used for elements a
   native bridge replays a click on (nav-bar buttons standing in for an
   in-page action), so display:none is not an option (herding-tnr). */
.sr-only,
.native-hide-inline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.min-w-0 { min-width: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.relative { position: relative; }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.1rem; }
.text-2xl { font-size: 1.45rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.rounded-full { border-radius: 999px; }
.overflow-hidden { overflow: hidden; }
.w-full.h-full, .object-cover { object-fit: cover; width: 100%; height: 100%; }

/* Unsized inline SVG icons default to icon scale */
a > svg:not([width]), button > svg:not([width]), h1 + a svg:not([width]) { width: 22px; height: 22px; }

/* Page-header content_for(:header) bars: title + trailing action */
main > div:has(> h1):first-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
main > div:has(> h1):first-child h1 { flex: 1; text-align: left; font-size: 1.4rem; }
main .flex > h1, body > header h1 { margin: 0; }

/* Compact back affordance -- sits inline before the title (never its own
   colliding row) so it reads as a quiet prefix, not a second header band. */
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fb-green);
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}
.back-link:hover { color: var(--fb-ink); }

/* ---------- desktop: variant (post-Tailwind, .web-shell scoped) ---------- */

@media (min-width: 1024px) {
  .web-shell .desktop\:grid { display: grid; }
  .web-shell .desktop\:block { display: block; }
  .web-shell .desktop\:hidden { display: none; }
  .web-shell .desktop\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-shell .desktop\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .web-shell .desktop\:grid-cols-\[minmax\(0\,1fr\)_20rem\] { grid-template-columns: minmax(0, 1fr) 20rem; }
  .web-shell .desktop\:grid-cols-\[1fr_20rem\] { grid-template-columns: 1fr 20rem; }
  /* Settings-family rail-left/detail-right shell -- same 20rem/minmax(0,1fr)
     vocabulary as the rail-right variant above, just reversed for the
     settings rail (herding-6wj.4). */
  .web-shell .desktop\:grid-cols-\[20rem_minmax\(0\,1fr\)\] { grid-template-columns: 20rem minmax(0, 1fr); }
  .web-shell .desktop\:col-start-1 { grid-column-start: 1; }
  .web-shell .desktop\:col-span-2 { grid-column: span 2 / span 2; }
  .web-shell .desktop\:items-start { align-items: flex-start; }
  .web-shell .desktop\:sticky { position: sticky; }
  .web-shell .desktop\:top-6 { top: 1.5rem; }
  .web-shell .desktop\:top-8 { top: 2rem; }
  .web-shell .desktop\:top-20 { top: 5rem; }
  .web-shell .desktop\:gap-2 { gap: 0.5rem; }
  .web-shell .desktop\:gap-3 { gap: 0.75rem; }
  .web-shell .desktop\:gap-4 { gap: 1rem; }
  .web-shell .desktop\:gap-6 { gap: 1.5rem; }
  .web-shell .desktop\:gap-8 { gap: 2rem; }
  .web-shell .desktop\:gap-10 { gap: 2.5rem; }
  .web-shell .desktop\:gap-x-8 { column-gap: 2rem; }
  .web-shell .desktop\:space-y-0 > * + * { margin-top: 0; }
  .web-shell .desktop\:mt-0 { margin-top: 0; }
  .web-shell .desktop\:mb-14 { margin-bottom: 3.5rem; }
  .web-shell .desktop\:mx-auto { margin-left: auto; margin-right: auto; }
  .web-shell .desktop\:mx-0 { margin-left: 0; margin-right: 0; }
  .web-shell .desktop\:ml-60 { margin-left: 15rem; }
  .web-shell .desktop\:min-w-0 { min-width: 0; }
  .web-shell .desktop\:max-w-none { max-width: none; }
  .web-shell .desktop\:max-w-\[68rem\] { max-width: 68rem; }
  .web-shell .desktop\:px-0 { padding-left: 0; padding-right: 0; }
  .web-shell .desktop\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .web-shell .desktop\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .web-shell .desktop\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
}

/* ---------- Functional state classes (Stimulus contract) ---------- */

.translate-y-full { transform: translateY(100%); }
.translate-x-0 { transform: translateX(0); }
.translate-x-5 { transform: translateX(1.25rem); }
.rotate-180 { transform: rotate(180deg); }

button[role="switch"] {
  position: relative;
  width: 46px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--fb-line);
  transition: background-color 0.2s var(--p-ease);
  flex-shrink: 0;
}

button[role="switch"] > span:first-child {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}

button[role="switch"] [data-push-toggle-target="toggle"],
button[role="switch"] [data-preference-toggle-target="toggle"],
button[role="switch"] > span:last-child {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fb-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--p-ease);
}

button[role="switch"].bg-purple-600, .bg-purple-600 { background: var(--fb-green); }
button[role="switch"].bg-gray-200, .bg-gray-200 { background: var(--fb-line); }

button[role="switch"][aria-checked="true"] { background: var(--fb-green); }
button[role="switch"][aria-checked="true"] [data-push-toggle-target="toggle"],
button[role="switch"][aria-checked="true"] [data-preference-toggle-target="toggle"],
button[role="switch"][aria-checked="true"] > span:last-child { transform: translateX(1.25rem); }

/* Row-trailing form controls */
.p-row turbo-frame { margin-left: auto; display: flex; align-items: center; }
.p-row turbo-frame form { margin: 0; display: flex; align-items: center; }
/* Notification-preference checkboxes: same visual idiom as button[role="switch"] */
.p-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 46px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--fb-line);
  flex-shrink: 0;
  transition: background-color 0.2s var(--p-ease);
}

.p-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fb-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--p-ease);
}

.p-row input[type="checkbox"]:checked { background: var(--fb-green); }
.p-row input[type="checkbox"]:checked::before { transform: translateX(1.25rem); }
.p-row input[type="checkbox"]:disabled { opacity: 0.5; }