/* CEA stylesheet: Arvida design v2 tokens with the Ivy sidebar shell (design/Ivy Redesign.html,
   direction 1b). Hand-written, mobile-first, widened with min-width queries at 600, 1024 and
   1280px: a top bar below 1024px, a sidebar from 1024px. Every colour comes
   from the tokens below; don't add raw colours further down. */

:root {
  --violet-950: #1E0C25;    /* login backdrop, deepest */
  --violet-900: #2E1537;    /* text on putty buttons */
  --violet-800: #4F2461;    /* header and sidebar, primary buttons */
  --violet-700: #672F7C;    /* primary hover */
  --violet-600: #803E98;    /* primary buttons, links, focus ring */
  --violet-400: #A46BBB;    /* login aurora bloom */
  --violet-100: #F3EAF6;    /* open-status badge */
  --violet-50: #F8F3FA;     /* table row hover */
  --lilac-on-dark: #E0CDE8; /* secondary text on violet */
  --divider-on-dark: #7A4E8C;
  --putty-400: #D8C9A6;     /* accent buttons on violet, active tab, avatar */
  --putty-300: #E6DBC2;     /* putty hover */
  --putty-200: #EFE8DA;     /* table header, waitlist group header, phone tab */
  --putty-100: #F4F0E8;     /* page background */
  --putty-50: #FBF8F4;      /* table header */
  --line: #E3DCCD;          /* card borders */
  --line-soft: #EFE8DA;     /* row dividers */
  --bar-line: #D9D6CF;      /* sticky bars */
  --ink: #2E3238;
  --ink-2: #5B6068;
  --field-border: #85898F;
  --error: #B3261E; --error-bg: #FBEAE8; --error-line: #E7B4AE; --error-ink: #7A1F18;
  --ok-bg: #E3F1E6; --ok: #1E5E2E; --ok-line: #B9DCC2;
  --warn-bg: #F7F1DC; --warn: #5C4B0E; --warn-line: #C9B77A;
  --closed-bg: #ECEDEE; --closed: #3F454C;
  --white: #FFFFFF;
  --radius-card: 14px; --radius-button: 10px; --radius-field: 8px; --radius-tag: 6px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(79,36,97,.05), 0 4px 16px rgba(79,36,97,.04);
  --shadow-lift: 0 2px 4px rgba(79,36,97,.08), 0 8px 24px rgba(79,36,97,.1);
  --shadow-bar: 0 -2px 10px rgba(46,50,56,.06);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;
  --sidebar: 232px;
}
@media (min-width: 600px) { :root { --gutter: 28px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--putty-100);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
a { color: var(--violet-600); }
a:hover { color: var(--violet-700); }
:focus-visible { outline: 3px solid var(--violet-600); outline-offset: 2px; }
.site-header :focus-visible { outline-color: var(--putty-400); }
code, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9375rem; overflow-wrap: anywhere; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link { position: absolute; left: -999px; top: 0; z-index: 20; background: var(--white); padding: 8px 16px; }
.skip-link:focus { left: 8px; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px max(var(--gutter), env(safe-area-inset-right)) 32px max(var(--gutter), env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 600px) { .container { padding-top: 28px; padding-bottom: 40px; } }

/* ---- Header ---- */
.site-header { background: var(--violet-800); color: var(--white); }
.site-header__inner {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 12px 0 var(--gutter);
}
.brand { display: flex; align-items: baseline; gap: 8px; min-height: 44px; align-items: center; color: var(--white); text-decoration: none; }
.brand:hover { color: var(--white); }
.brand__logo { display: block; height: 28px; width: auto; }
.brand__app { font-size: 15px; color: var(--lilac-on-dark); white-space: nowrap; }
.header-back {
  display: none; align-items: center; min-height: 44px; min-width: 44px; margin-left: -8px; padding: 0 8px;
  color: var(--white); font-size: 17px; font-weight: 600; text-decoration: none;
}
.has-back .header-back { display: inline-flex; }
.has-back .brand { display: none; }
.nav { display: none; }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.site-header .header-new { display: none; }
.user { display: flex; align-items: center; gap: 10px; }
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--putty-400); color: var(--violet-800); font-size: 14px; font-weight: 800;
}
.user__text { display: none; flex-direction: column; line-height: 1.25; }
.user__name { font-size: 15px; font-weight: 700; white-space: nowrap; }
.header-new__long { display: none; white-space: pre; }
.sign-out { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--lilac-on-dark); }
.sign-out:hover { color: var(--white); }

@media (min-width: 600px) {
  .site-header__inner { height: 72px; align-items: stretch; gap: 12px; padding: 0 var(--gutter); }
  .has-back .brand { display: flex; }
  .header-back, .has-back .header-back { display: none; }
  .brand { align-self: center; gap: 10px; }
  .brand__logo { height: 32px; }
  .brand__app { display: none; padding-left: 12px; border-left: 1px solid var(--divider-on-dark); }
  .nav { display: flex; gap: 2px; }
  .nav a {
    display: flex; align-items: center; padding: 0 8px; white-space: nowrap;
    border-top: 3px solid transparent; border-bottom: 4px solid transparent;
    color: var(--lilac-on-dark); font-size: 16px; font-weight: 500; text-decoration: none;
  }
  .nav a:hover { color: var(--white); }
  .nav a[aria-current="page"] { color: var(--white); font-weight: 800; border-bottom-color: var(--putty-400); }
  .site-header .header-new { display: inline-flex; gap: 0; min-height: 44px; }
  .header-new[aria-current="page"] { box-shadow: 0 0 0 2px var(--white); }
}
@media (min-width: 1024px) {
  .site-header__inner { gap: 20px; }
  .brand__app { display: inline; }
  .nav a { padding: 0 10px; }
  .header-new__long { display: inline; }
}
@media (min-width: 1280px) {
  .nav a { padding: 0 14px; }
  .user__text { display: flex; }
}
/* Below the sidebar there is no room for every tab: Audit log is linked from Reference data. */
.nav__count, .nav__group, .user__role, .nav .nav__audit { display: none; }

/* ---- Tablet avatar menu (600–1023px): a native <details>, no script ---- */
.user-menu { display: none; position: relative; }
.user-menu > summary {
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  border-radius: 50%; list-style: none; cursor: pointer;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu[open] .avatar { box-shadow: 0 0 0 2px var(--white); }
.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 220px; max-width: min(320px, calc(100vw - 32px)); padding: 14px 16px 4px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-lift);
}
.user-menu__panel .user__name { white-space: normal; overflow-wrap: break-word; }
.user-menu__panel .user__role { display: block; font-size: 13px; color: var(--ink-2); }
.user-menu__panel .sign-out { font-size: 15px; font-weight: 600; color: var(--violet-600); }
.user-menu__panel .sign-out:hover { color: var(--violet-700); }
.user-menu__panel :focus-visible { outline-color: var(--violet-600); }
@media (min-width: 600px) and (max-width: 1023px) {
  .user { display: none; }
  .user-menu { display: block; }
}

/* ---- Sidebar: the header becomes a fixed-width column from 1024px ---- */
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; }
  .app > main, .app > footer { grid-column: 2; }
  .app > .site-header { grid-column: 1; grid-row: 1 / 3; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .site-header__inner { flex-direction: column; align-items: stretch; height: 100%; min-height: 0; gap: 0; padding: 20px 14px; }
  .brand { align-self: flex-start; padding: 0 8px 22px; }
  .brand__logo { height: 28px; }
  .brand__app { padding-left: 0; border-left: 0; font-size: 14px; color: var(--putty-400); }
  .header-end { display: contents; }
  .site-header .header-new { order: 1; justify-content: center; margin-bottom: 20px; font-size: 15px; }
  .nav { order: 2; flex-direction: column; gap: 2px; }
  .nav a {
    justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px;
    border: 0; border-radius: var(--radius-field); font-size: 15px;
  }
  .nav a:hover { background: rgba(255,255,255,.06); }
  .nav a[aria-current="page"] { background: rgba(255,255,255,.12); font-weight: 700; }
  .nav__count { display: inline; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .nav__group { display: block; padding: 24px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lilac-on-dark); }
  .nav a.nav__admin { font-size: 14px; }
  .nav a.nav__audit { display: flex; }
  .user { order: 3; margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--divider-on-dark); }
  .user__text { display: flex; flex: 1; min-width: 0; }
  .user__name, .user__role { white-space: normal; overflow-wrap: break-word; }
  .user__name { font-size: 14px; }
  .user__role { display: block; font-size: 12px; color: var(--lilac-on-dark); }
  .container { padding-top: 32px; }
}

/* ---- Page header: dark ink on the putty page ---- */
main { overflow-x: clip; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.page-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-head h1 { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.page-sub { font-size: 16px; color: var(--ink-2); }
.page-sub--wide { max-width: 70ch; line-height: 1.45; }
.crumbs { display: none; font-size: 15px; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--violet-700); }
@media (min-width: 600px) {
  .page-head h1 { font-size: 32px; }
  .crumbs { display: block; margin-bottom: -8px; }
}
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 4px; }
.detail-number { font-size: 16px; font-weight: 700; color: var(--violet-600); letter-spacing: .02em; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* No page-wide fade: pages arrive at once, and only what changed moves (Motion, below). Never
   animate main or .container with a transform: it would make them the containing block for
   the fixed Record first contact bar, and the bar would move. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ceaToast { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .notice { animation: ceaToast .3s cubic-bezier(.16,1,.3,1); }
}

footer { color: var(--ink-2); font-size: .875rem; }
/* One line: "Signed in as … · Sign out" then "Arvida · Ivy vX"; wraps as whole pieces only on narrow phones. */
.footer-user { white-space: nowrap; }
.footer-user::after { content: "·" / ""; margin-left: 12px; }
.footer-user a { display: inline-flex; align-items: center; min-height: 44px; }
footer .container {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 12px;
  padding-top: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.footer-brand { white-space: nowrap; }
.footer-links { display: flex; align-items: center; gap: 0 12px; white-space: nowrap; }
.footer-links a + a::before { content: "·" / ""; margin-right: 12px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 600px) {
  .footer-links .footer-admin { display: none; }
  .footer-links::after { content: "·" / ""; }
}
@media (min-width: 1024px) { .footer-user { display: none; } }

/* ---- Phone tab bar: replaces the header nav below 600px ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--bar-line);
}
.tabbar a {
  flex: 1 1 0; min-height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none;
}
.tabbar a[aria-current="page"] { background: var(--putty-200); color: var(--violet-800); font-weight: 800; }
.tabbar .tabbar__new { background: var(--violet-800); color: var(--white); font-weight: 800; }
body:not(.has-back) footer .container { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) {
  .tabbar { display: none; }
  body:not(.has-back) footer .container { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---- Buttons ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 44px; padding: 0 18px;
  border: 1px solid var(--field-border); border-radius: var(--radius-button);
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.button:hover { color: var(--ink); background: var(--putty-100); }
.button--primary { border: none; padding: 0 22px; background: var(--violet-800); color: var(--white); font-weight: 700; }
.button--primary:hover { background: var(--violet-700); color: var(--white); }
.button--putty { border: none; padding: 0 20px; background: var(--putty-400); color: var(--violet-900); font-size: 16px; font-weight: 700; }
.button--putty:hover { background: var(--putty-300); color: var(--violet-900); }
.button--wide { width: 100%; }
.button:disabled { opacity: .6; cursor: progress; }   /* sent; site.js stops a second tap */
.link-button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px;
  color: var(--violet-600); font-size: 16px; font-weight: 600; text-decoration: underline;
}
@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
  .button:active:not(:disabled) { transform: scale(.98); }
}

/* ---- Cards ---- */
.card, .empty, fieldset, .disclosure, .filters {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.card { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card h2, legend { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--violet-800); }
.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.card__head h2 { font-size: 22px; }
.card__count { font-size: 15px; color: var(--ink-2); }
.divider { height: 1px; background: var(--line-soft); margin: 4px 0; }
.empty { padding: 32px 20px; text-align: center; font-size: 17px; color: var(--ink-2); }

/* ---- Messages ---- */
.notice {
  display: block; padding: 12px 16px; border-radius: var(--radius-field);
  background: var(--white); border: 1px solid var(--line); font-size: 16px; font-weight: 500;
}
.notice--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.notice--ok a { color: var(--ok); }
.notice--undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.notice--undo form { margin: 0; }
.notice--error { background: var(--error-bg); color: var(--error-ink); border-color: var(--error-line); }
.hint { font-size: 14px; color: var(--ink-2); }
p.hint { max-width: 70ch; }
.optional { font-weight: 500; color: var(--ink-2); }

/* ---- Status badges: tone comes from the status flags (StatusBadge.Tone) ---- */
.badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 28px; padding: 2px 10px; border-radius: var(--radius-tag);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  background: var(--violet-100); color: var(--violet-700);
}
.badge--wait { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }   /* an edge on the putty page */
.badge--closed { background: var(--closed-bg); color: var(--closed); }
.badge--done { background: var(--ok-bg); color: var(--ok); }

/* ---- Enquiry lists: stacked cards below 600px, grid rows above. One markup, a real table
   underneath, and never a table that scrolls sideways. ---- */
.enquiries { width: 100%; border-collapse: collapse; }
.enquiries thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.enquiries tbody { display: flex; flex-direction: column; gap: 10px; }
.enquiries tr {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 5px; align-items: center;
  grid-template-areas: "num status" "prospect prospect" "comm care" "age age";
  padding: 16px; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.enquiries td { display: block; padding: 0; font-size: 15px; min-width: 0; }
.enquiries__number { grid-area: num; font-weight: 600; color: var(--violet-600); }
.enquiries__status { grid-area: status; justify-self: end; }
.enquiries__prospect { grid-area: prospect; display: flex; flex-direction: column; gap: 2px; }
.enquiries__enquirer { display: block; font-size: 14px; color: var(--ink-2); }
.enquiries__prospect a { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.enquiries__prospect a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* whole row is the link */
.enquiries__prospect a:focus-visible { outline: none; }
.enquiries tr:has(a:focus-visible) { outline: 3px solid var(--violet-600); outline-offset: 2px; }
.enquiries__community { grid-area: comm; color: var(--ink-2); }
.enquiries__care { grid-area: care; color: var(--ink-2); }
.enquiries__care::before { content: "· "; }
.enquiries__age { grid-area: age; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .enquiries tr { transition: box-shadow .15s ease, transform .15s ease, background-color .12s ease; }
}
@media (hover: hover) and (max-width: 599px) {
  .enquiries tr:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
}
@media (min-width: 600px) {
  .enquiries {
    display: block; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
  }
  .enquiries thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; }
  .enquiries tbody { display: block; }
  .enquiries tr {
    display: grid; grid-template-areas: none;
    grid-template-columns: 96px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 150px 80px;
    gap: 14px; padding: 12px 16px;
    border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; box-shadow: none;
  }
  .enquiries thead tr { border-top: 0; background: var(--putty-50); border-bottom: 1px solid var(--line); }
  .enquiries th {
    padding: 0; text-align: left;
    font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em;
  }
  .enquiries td, .enquiries th { grid-area: auto; }
  .enquiries__status { justify-self: start; }
  .enquiries__prospect a { font-size: 15px; font-weight: 700; }
  .enquiries__enquirer { font-size: 13px; }
  .enquiries__community, .enquiries__care { color: var(--ink); }
  .enquiries__care::before { content: none; }
  .enquiries__age { text-align: right; color: var(--ink); }
  .enquiries tbody tr:hover { background: var(--violet-50); }
  .enquiries tr:has(a:focus-visible) { outline-offset: -3px; }
  .enquiries th.enquiries__age { text-align: right; }
}
@media (min-width: 1280px) {
  .enquiries tr { grid-template-columns: 110px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 170px 88px; }
}
/* Waitlist rows (_EnquiryTable in waitlist mode): the headings name the community, care level
   and status, so rows show the enquirer and first contact instead. */
.enquiries--waitlist tr { grid-template-areas: "num num" "prospect prospect" "who contact" "wait wait" "age age"; }
.enquiries__who { grid-area: who; color: var(--ink-2); }
.enquiries__contact { grid-area: contact; justify-self: end; color: var(--ink-2); }
.enquiries__wait { grid-area: wait; color: var(--ink-2); }
@media (min-width: 600px) {
  .enquiries--waitlist tr { grid-template-areas: none; grid-template-columns: 96px minmax(0,1.5fr) minmax(0,1fr) 150px 170px 80px; }
  .enquiries__who, .enquiries__contact, .enquiries__wait { justify-self: start; color: var(--ink); }
  .enquiries__label { display: none; }   /* the column header says it */
}
@media (min-width: 1280px) {
  .enquiries--waitlist tr { grid-template-columns: 110px minmax(0,1.6fr) minmax(0,1fr) 170px 190px 88px; }
}

/* Age leads every card; past 7 and 14 days it gets heavier. The number and its unit say it
   too, so weight and colour never carry it alone. */
.age { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Doubled class so the warning beats .worklist__age's grey on the same element. */
.age.age--7 { font-weight: 700; }
.age.age--14 { font-weight: 800; color: var(--error); }
.age__unit { font-weight: 400; }
.enquiry-number { font-variant-numeric: tabular-nums; white-space: nowrap; }   /* CEA-00000 never splits */

/* ---- Filters: one collapsible card holding a plain GET form ---- */
.filters > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px;
  font-size: 17px; font-weight: 600; cursor: pointer; list-style: none;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { content: "▾"; color: var(--ink-2); }
.filters[open] > summary::after { content: "▴"; }
.filters__body {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 16px;
  padding: 0 16px 16px;
}
.filters__body .field > label { font-size: 15px; }
.filters__search { grid-column: 1 / -1; }
@media (min-width: 1024px) { .filters__search { grid-column: span 2; } }
.filters__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ink-2); }
.pager__buttons { display: flex; gap: 8px; }
.pager .button { min-width: 96px; min-height: 44px; font-size: 16px; font-weight: 400; }

/* ---- Waitlist ---- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.stat-card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-height: 44px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none;
}
.stat-card:hover { color: var(--ink); border-color: var(--violet-600); }
.stat-card__label { font-size: 15px; font-weight: 700; }
.stat-card__value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-card__value span { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.wait-community { display: flex; flex-direction: column; gap: 12px; }
.wait-community h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--violet-800); }
.wait-community__count { font-size: 15px; font-weight: 400; color: var(--ink-2); }
.wait-level {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--putty-200); border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 800; color: var(--violet-800);
}
.card--flush .enquiries { border: 0; border-radius: 0; box-shadow: none; }
.card--flush .enquiries tbody { gap: 0; }
@media (max-width: 599px) {
  .card--flush .enquiries tr { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; }
  .card--flush .enquiries tr:first-child { border-top: 0; }
}

/* ---- Forms ---- */
.form-wrap { width: 100%; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.form { display: flex; flex-direction: column; gap: 20px; }
fieldset { margin: 0; padding: 20px; min-width: 0; }
legend { float: left; width: 100%; padding: 0; margin: 0 0 16px; }
.field-grid { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px 20px; }
.field-grid__full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 16px; font-weight: 600; }
.field > .hint { margin-top: -2px; }
/* Outcome reason (site.js closes it for a status that doesn't need one). Open by default, so
   without the script it always shows. The grid row folds to nothing; visibility takes it out
   of the tab order and the accessibility tree once closed. The field's 5px padding, cancelled
   by its margin, keeps focus rings clear of the clip. */
.reveal { display: grid; grid-template-rows: 1fr; min-width: 0; }
.reveal > .field { min-height: 0; overflow: hidden; padding: 5px; margin: -5px; }
.reveal.is-closed { grid-template-rows: 0fr; visibility: hidden; }
.quick-status > .reveal.is-closed { margin-top: -14px; }   /* and the flex gap above it */
input:not([type="checkbox"]), select, textarea {
  display: block; width: 100%; min-height: 48px;
  padding: 10px 12px;
  font: inherit; font-size: 17px;   /* 16px or more: iOS Safari zooms into anything smaller */
  color: var(--ink); background: var(--white);
  border: 1px solid var(--field-border); border-radius: var(--radius-field);
}
select { padding: 8px 10px; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--violet-600); }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.input-validation-error, input.input-validation-error:not([type="checkbox"]), select.input-validation-error, textarea.input-validation-error {
  border: 2px solid var(--error); box-shadow: 0 0 0 3px var(--error-bg);
}
.field-validation-error { display: block; font-size: 15px; font-weight: 500; color: var(--error); }
.field-validation-valid, .validation-summary-valid { display: none; }
.validation-summary-errors {
  padding: 12px 16px; background: var(--error-bg); border: 1px solid var(--error-line);
  border-radius: var(--radius-field); color: var(--error-ink);
}
.validation-summary-errors ul { margin: 8px 0 0; padding-left: 24px; }
.validation-summary-errors a { color: inherit; font-weight: 600; }

/* "Add detail — you can do this later": native, keyboard operable, no JavaScript. */
.disclosure > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 48px; padding: 16px 20px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--violet-800); cursor: pointer;
}
.disclosure > summary span { font-size: 15px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.disclosure__body { padding: 0 20px 20px; }

/* Sticky action bar: full-bleed white, the primary action in thumb reach. */
.form-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: var(--white);
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(-12px -100vmax 0 -100vmax);
}
.form-bar::before {   /* the top rule and shadow, full-bleed like the background */
  content: ""; position: absolute; top: 0; left: -100vmax; right: -100vmax;
  border-top: 1px solid var(--bar-line); box-shadow: var(--shadow-bar);
}
.form-bar__alert {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  background: var(--error-bg); border: 1px solid var(--error-line); border-radius: var(--radius-field);
  color: var(--error-ink); font-size: 15px; line-height: 1.4;
}
.form-bar__alert[hidden] { display: none; }
.form-bar__alert strong { font-size: 16px; }
.form-bar__buttons { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.button--save { flex: 1 1 auto; max-width: 280px; }

/* ---- Enquiry detail ---- */
.detail-grid { display: flex; flex-direction: column; gap: 16px; }
.detail-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 20px; }
.facts dt { font-size: 14px; color: var(--ink-2); }
.facts dd { margin: 2px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.notes { font-size: 17px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-actions { gap: 14px; }
.detail-actions form { margin: 0; }
.detail-actions p { font-size: 16px; }
.quick-status { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.quick-status .button { align-self: flex-start; }
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.history > li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.history > li:first-child { border-top: 0; padding-top: 0; }
.history__when { font-size: 14px; color: var(--ink-2); }
.history ul { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 8px; }
/* Field name as a small label above its value, so a long change list scans. */
.history__field { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* The capture entry: one line, its fields behind a native disclosure (44px summary). */
.history__created { font-size: 16px; }
.history__details > summary { padding: 11px 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--violet-600); }
.history__details > ul { margin-top: 4px; }
/* Below 1024px the rail stacks first: the action and the phone number lead, history follows. */
.detail-rail { order: -1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-actions--due { background: var(--warn-bg); border-color: var(--warn-bg); }
.detail-actions--due .eyebrow { color: var(--warn); }
.detail-actions--due h2 { margin-top: -10px; }
.contact { display: flex; flex-direction: column; gap: 4px; font-size: 16px; overflow-wrap: anywhere; }
.contact__name { font-weight: 700; }
.contact a { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; }
.facts--rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.facts--rail dd { font-size: 16px; font-weight: 600; }
@media (max-width: 599px) {
  /* Record first contact is fixed to the bottom of a phone screen, in thumb reach. */
  .detail-actions__primary {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--bar-line); box-shadow: var(--shadow-bar);
  }
  .detail-actions__primary .button { min-height: 52px; }
  body:has(.detail-actions__primary) footer .container { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
  .detail-grid { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0,1.6fr) minmax(300px,1fr); }
  .detail-rail { order: 0; }
}

/* ---- My enquiries: a worklist, oldest first, with the waitlist below it (beside it from 1280px) ---- */
.home-grid { display: flex; flex-direction: column; gap: 20px; }
.home-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.home-rail { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1280px) {
  .home-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; gap: 24px; }
}
.worklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.worklist__item {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "age badge" "body body"; gap: 6px 12px; align-items: center;
  padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card);
}
.worklist__age { grid-area: age; font-size: 14px; color: var(--ink-2); }
.worklist__body { grid-area: body; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.worklist__item .badge { grid-area: badge; justify-self: end; }
.worklist__link { font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.worklist__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* whole card is the link */
.worklist__link:hover { color: var(--ink); }
.worklist__link:focus-visible { outline: none; }
.worklist__item:has(a:focus-visible) { outline: 3px solid var(--violet-600); outline-offset: 2px; }
.worklist__meta { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .worklist__item { grid-template-columns: 90px minmax(0,1fr) auto; grid-template-areas: "age body badge"; gap: 16px; padding: 14px 18px; }
  .worklist__item .badge { justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .worklist__item { transition: box-shadow .15s ease, transform .15s ease; }
}
@media (hover: hover) {
  .worklist__item:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
}
.tally { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tally li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.tally li:first-child { border-top: 0; padding-top: 0; }
.caught-up { align-items: flex-start; padding: 32px 28px; }
.caught-up p { font-size: 16px; color: var(--ink-2); }
.caught-up__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.recent { display: flex; flex-direction: column; gap: 10px; }
.recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recent__list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 12px 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-button); font-size: 15px;
}
.recent__list a { font-weight: 600; color: var(--ink); }
.recent__list span { color: var(--ink-2); }

/* ---- Reference data admin ---- */
.admin-grid { display: flex; flex-direction: column; gap: 16px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-field); background: var(--white); border: 1px solid var(--line);
  color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none;
}
.admin-nav a:hover { background: var(--violet-100); color: var(--violet-700); }
.admin-sections { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.admin-sections > .card { scroll-margin-top: 16px; }
.admin-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px;
  padding: 10px 0; border-top: 1px solid var(--line-soft);
}
.admin-row label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-2); }
/* "Code" sits above the number like the other fields' labels. */
.admin-row__value { display: flex; flex-direction: column; gap: 4px; min-width: 44px; font-size: 14px; color: var(--ink-2); }
.admin-row__code { display: flex; align-items: center; min-height: 48px; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-row__label { flex: 1 1 200px; }
.admin-row__order { flex: 0 0 96px; }
.admin-row__state { align-self: center; min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }
.admin-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.admin-add label { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 600; }
@media (min-width: 600px) {
  .admin-grid { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; align-items: start; }
  .admin-nav {
    position: sticky; top: 16px; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 8px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  }
  .admin-nav a { background: transparent; border: 0; }
}
/* Beside the sidebar (1024–1279px) a second column leaves the forms too narrow, so the table
   list wraps above them as on phones. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .admin-grid { display: flex; align-items: stretch; }
  .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; }
  .admin-nav a { background: var(--white); border: 1px solid var(--line); }
}

/* Plain tables (the admin communities list): stacked label/value pairs on phones. */
.plain-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.plain-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.plain-table tr { display: block; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.plain-table td { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.plain-table td::before { content: attr(data-label); color: var(--ink-2); }
@media (min-width: 600px) {
  .plain-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .plain-table tr { display: table-row; padding: 0; }
  .plain-table th {
    padding: 10px 12px; text-align: left; background: var(--putty-50);
    font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em;
  }
  .plain-table td { display: table-cell; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
  .plain-table td::before { content: none; }
}

/* ---- Motion: the moments that matter (docs/superpowers/specs/2026-10-01-motion-design.md) ----
   Movement (translate, scale, clip-path, stagger, reveals) lives in no-preference blocks only.
   The colour highlights run for everyone, shortened under reduced motion, so "saved" and
   "changed" still register. Nothing here delays or blocks input. */

/* Saved: the enquiry number stamps in left to right, a putty band riding the reveal edge.
   The band is the same width as the number and travels twice as far as the clip, so it sits
   behind the characters just revealed and slides off as the last one lands. */
.notice .enquiry-number { position: relative; display: inline-block; isolation: isolate; padding: 0 4px; margin: 0 -4px; border-radius: var(--radius-tag); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ceaStamp { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes ceaBand { from { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
  .notice .enquiry-number { animation: ceaStamp .45s .1s cubic-bezier(.16,1,.3,1) backwards; }
  .notice .enquiry-number::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: var(--putty-400); opacity: 0;
    animation: ceaBand .45s .1s cubic-bezier(.16,1,.3,1) backwards;
  }
}

/* The row just saved glows putty on My enquiries, then settles. Background and border only. */
@keyframes ceaGlow { from { background-color: var(--putty-300); border-color: var(--putty-400); } }
.worklist__item.is-just-saved { animation: ceaGlow 1.2s .3s ease-out backwards; }

/* Detail page, after a quick status change, first contact or Undo: the badge fades from putty
   to its new tone, and the newest History entry and the first-contact lines are marked. */
@keyframes ceaTone { from { background-color: var(--putty-400); color: var(--violet-900); border-color: var(--putty-400); } }
@keyframes ceaMark {
  from { background-color: var(--putty-300); box-shadow: 0 0 0 8px var(--putty-300); }
  to { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
}
.badge.is-changed { animation: ceaTone .25s .35s ease-out backwards; }
.history > li.is-changed, .facts > .is-changed, .detail-actions.is-changed > h2 {
  position: relative; z-index: 1;   /* the band covers the next entry's divider */
  border-radius: var(--radius-tag); animation: ceaMark 1s .25s ease-out backwards;
}

/* Lists appear as lists: rows rise 4px in turn, 30ms apart, the eighth and later together.
   backwards, not both: once done the row is back to its own styles, so hover still lifts it. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ceaRow { from { opacity: 0; transform: translateY(4px); } }
  .worklist__item, .enquiries tbody tr {
    animation: ceaRow .18s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay: calc(min(var(--i, 0), 7) * 30ms);
  }
  .worklist__item.is-just-saved {
    animation: ceaRow .18s cubic-bezier(.16,1,.3,1) backwards, ceaGlow 1.2s ease-out backwards;
    animation-delay: calc(min(var(--i, 0), 7) * 30ms), .3s;
  }
}

/* Feedback: links and the tablet avatar menu acknowledge input. */
@media (prefers-reduced-motion: no-preference) {
  .nav a, .tabbar a, .admin-nav a, .stat-card { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
  @keyframes ceaDrop { from { opacity: 0; transform: translateY(-4px); } }
  .user-menu[open] .user-menu__panel { animation: ceaDrop .15s cubic-bezier(.16,1,.3,1); }

  /* Reveals: Outcome reason folds open (200ms) and shut (150ms, faster out than in). */
  .reveal.is-live { transition: grid-template-rows .2s cubic-bezier(.16,1,.3,1), margin-top .2s cubic-bezier(.16,1,.3,1), visibility 0s; }
  .reveal.is-live.is-closed { transition: grid-template-rows .15s ease-in, margin-top .15s ease-in, visibility 0s .15s; }

  /* "Add detail" opens the same way where the browser can animate to auto height; elsewhere
     it opens at once, as before. */
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .disclosure { interpolate-size: allow-keywords; }
    .disclosure::details-content { height: 0; overflow: clip; overflow-clip-margin: 6px; transition: height .15s ease-in, content-visibility .15s ease-in allow-discrete; }
    .disclosure[open]::details-content { height: auto; transition-duration: .2s; transition-timing-function: cubic-bezier(.16,1,.3,1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No movement: the number shows at once and rows don't stagger. Highlights stay, short. */
  .worklist__item.is-just-saved, .badge.is-changed, .history > li.is-changed,
  .facts > .is-changed, .detail-actions.is-changed > h2 { animation-duration: .6s; animation-delay: 0s; }
}

/* ---- Login ---- */
/* The first thing a signed-out person sees (Pages/Login.cshtml, _LoginLayout.cshtml). Deep violet
   with a slowly drifting aurora (the only loop) and an ivy vine that grows once on load. */
.login-body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, var(--violet-800) 0%, var(--violet-900) 55%, var(--violet-950) 100%);
  color: var(--white);
  overflow-x: clip;
  position: relative;
}
/* Grain: static SVG noise, for depth. */
.login-body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.login__aurora { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.login__bloom {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
  will-change: transform;
  animation: login-drift 48s ease-in-out infinite alternate;
}
.login__bloom--1 { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax; background: var(--violet-400); animation-duration: 52s; }
.login__bloom--2 { width: 46vmax; height: 46vmax; right: -14vmax; top: 18vh; background: var(--putty-400); opacity: .28; animation-duration: 41s; animation-delay: -12s; }
.login__bloom--3 { width: 54vmax; height: 54vmax; left: 20vw; bottom: -30vmax; background: var(--violet-600); opacity: .5; animation-duration: 60s; animation-delay: -25s; }
@keyframes login-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
  100% { transform: translate3d(-4vmax, 7vmax, 0) scale(.94); }
}

.login {
  flex: 1; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 48px max(var(--gutter), env(safe-area-inset-right)) 24px max(var(--gutter), env(safe-area-inset-left));
  overflow: clip;   /* the vine is bigger than the page on small screens */
}
.login__stack { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 440px; }

/* The vine: one hand-drawn stem that rises from below, arches over the stack and settles in a
   growing tip, passing 22 unnamed nodes (one per community). It sits behind the stack and never
   takes a click. The resting state is the finished picture; the animations only lead up to it. */
.login__defs { position: absolute; width: 0; height: 0; }
.login__vine { position: absolute; z-index: -1; left: 50%; overflow: visible; pointer-events: none; }
.login__vine--wide { display: none; top: 50%; width: 1280px; height: 1000px; margin: -400px 0 0 -640px; }
.login__vine--narrow { bottom: 100%; width: 400px; height: 150px; margin: 0 0 -8px -200px; }
.login__vine--below { bottom: auto; top: 100%; margin: -4px 0 0 -200px; }
.login__stem {
  fill: none; stroke: var(--putty-400); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; opacity: .85;
  animation: login-grow 1.2s .1s cubic-bezier(.16,1,.3,1) both;
}
.login__stem--rooted { stroke: url(#ivy-root); }   /* rises out of the dark at the bottom */
.login__root { stop-color: var(--putty-400); }
.login__root-fade { stop-color: var(--putty-400); stop-opacity: 0; }
.login__stem--shoot { stroke-width: 1.5; animation: login-grow .7s var(--d) cubic-bezier(.16,1,.3,1) both; }
.login__leaf {
  fill: var(--violet-400); stroke: var(--putty-400); stroke-width: 1.1; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: login-unfurl .7s var(--d) cubic-bezier(.16,1,.3,1) both;
}
.login__leaf--putty { fill: var(--putty-400); stroke: var(--violet-800); }
.login__node {
  fill: var(--putty-400); stroke: var(--violet-900); stroke-width: 2.5;
  transform-box: fill-box; transform-origin: center;
  animation: login-node .6s var(--d) cubic-bezier(.16,1,.3,1) both;
}
@media (min-width: 720px) {
  .login__vine--wide { display: block; }
  .login__vine--narrow { display: none; }
}
/* Short laptop screens: a smaller vine, so the arch isn't cut off at the top. */
@media (min-width: 720px) and (max-height: 720px) {
  .login__vine--wide { transform: scale(.8); }
}

.login__logo { width: 180px; height: auto; animation: login-logo .5s cubic-bezier(.16,1,.3,1) both; }
.login__rule {
  display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--putty-400);
  transform-origin: center; animation: login-rule .5s .35s cubic-bezier(.16,1,.3,1) both;
}
.login__title {
  font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--lilac-on-dark);
  animation: login-rise .6s .5s cubic-bezier(.16,1,.3,1) both;
}
.login__tagline {
  text-wrap: balance;
  font-size: 17px; color: var(--white); opacity: .92;
  animation: login-rise .6s .6s cubic-bezier(.16,1,.3,1) both;
}
/* Capture · Follow up · Close: what Ivy does, as three leaves on a short stem. */
.login__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 6px;
  font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--lilac-on-dark);
}
.login__steps li { display: inline-flex; align-items: center; gap: 7px; animation: login-rise .5s .75s cubic-bezier(.16,1,.3,1) both; }
.login__steps li:nth-child(2) { animation-delay: .85s; }
.login__steps li:nth-child(3) { animation-delay: .95s; }
.login__steps li + li::before {
  content: ""; width: 20px; height: 1.5px; margin: 0 3px 0 9px; border-radius: 1px;
  background: var(--putty-400); opacity: .6;
}
@media (max-width: 359px) {
  .login__steps { font-size: 14px; }
  .login__steps li + li::before { width: 10px; margin: 0 2px 0 6px; }
}
.login__bud { flex: none; width: 16px; height: 18px; transform: rotate(-35deg); fill: var(--putty-400); stroke: var(--violet-800); stroke-width: 1.5; }
.login__notice {
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.1); color: var(--white); font-size: 15px; font-weight: 600;
  animation: login-rise .5s .65s cubic-bezier(.16,1,.3,1) both;
}
/* Visible and clickable from the first frame: no entrance. One sheen once the vine settles. */
.login__button {
  position: relative; overflow: hidden; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 32px; border-radius: var(--radius-pill);
  background: var(--putty-400); color: var(--violet-900);
  font-size: 18px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.login__button:hover { color: var(--violet-900); background: var(--putty-300); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(216,201,166,.35), 0 8px 28px rgba(0,0,0,.28); }
.login__button:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 8px rgba(216,201,166,.35); }
.login__button::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: login-sheen 1.1s 1.3s ease-in-out;
}
.login__ms { flex: none; }
.login__footer {
  position: relative; z-index: 1; text-align: center;
  padding: 16px var(--gutter) max(20px, env(safe-area-inset-bottom));
  font-size: 13px; color: var(--lilac-on-dark);
}

@keyframes login-grow { from { stroke-dashoffset: 1; } }
@keyframes login-unfurl { from { opacity: 0; transform: scale(.15) rotate(-35deg); } }
@keyframes login-node {
  from { fill: var(--divider-on-dark); stroke-width: 0; transform: scale(.6); }
  45% { fill: var(--white); transform: scale(1.6); }
}
@keyframes login-logo { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes login-rule { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes login-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes login-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

@media (min-width: 600px) {
  .login__logo { width: 240px; }
  .login__title { font-size: 34px; }
  .login__stack { gap: 18px; }
}

/* Reduced motion: the finished picture at once (vine drawn, leaves open, nodes lit, text in
   place) and the aurora stands still. */
@media (prefers-reduced-motion: reduce) {
  .login__bloom, .login__stem, .login__stem--shoot, .login__leaf, .login__node,
  .login__logo, .login__rule, .login__title, .login__tagline, .login__steps li,
  .login__notice, .login__button::after { animation: none; }
  .login__button { transition: none; }
  .login__button:hover { transform: none; }
}

/* ---- Admin audit log ---- */
/* A row of filters that wraps. .card sets a column, so the direction is set again here. */
.audit-filters { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 16px; }
.audit-filters label { flex: 1 1 160px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }

/* ---- User guide: USER-GUIDE.md rendered by UserGuide ---- */
.guide { max-width: 75ch; }
.guide h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.guide h3 { font-size: 18px; font-weight: 800; color: var(--violet-800); }
.guide :is(h2, h3) { scroll-margin-top: 16px; }
.guide p, .guide li { font-size: 16px; line-height: 1.55; }
.guide ul, .guide ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.guide blockquote { margin: 0; padding: 12px 16px; background: var(--putty-100); border-left: 3px solid var(--violet-600); border-radius: var(--radius-field); }
.guide hr { align-self: stretch; margin: 0; border: 0; border-top: 1px solid var(--line-soft); }
.guide table { width: 100%; border-collapse: collapse; font-size: 15px; }
.guide th, .guide td { padding: 8px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.guide th { background: var(--putty-50); font-weight: 700; }