/* ===========================================================================
   Communio Admin — UX polish layer
   ---------------------------------------------------------------------------
   Loaded AFTER style.css and only ever overrides it, so every one of the
   existing views inherits the new look without being edited. Same two rules
   as style.css: colours come from variables (never a raw hex), and brand green
   is a fill, not a text colour.
   =========================================================================== */

:root {
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(16, 24, 40, 0.16);
  --shadow-lg: 0 24px 56px -12px rgba(16, 24, 40, 0.28);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --topbar-h: 60px;
}
[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, 0.6);
}

/* ---------- Canvas ---------- */
.main {
  background:
    radial-gradient(900px 420px at 88% -8%, color-mix(in srgb, var(--primary-lift) 9%, transparent), transparent 70%),
    radial-gradient(700px 360px at -5% 110%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--bg);
}
#app { min-height: 100dvh; }
.sidebar { height: 100dvh; }

/* The page fills the screen but stops growing on very wide monitors, so lines
   of content never stretch into something unreadable. */
.content {
  width: 100%;
  max-width: 1840px;
  margin-inline: auto;
  padding: 28px clamp(16px, 2.4vw, 40px) 44px;
}

/* ---------- Top bar ---------- */
.topbar {
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  padding: 0 clamp(16px, 2.4vw, 40px);
}
/* The parish name already sits in the chip on the right; repeating it as the
   first crumb made the bar say the same thing twice. */
.crumbs > .crumb:first-child:not(.current),
.crumbs > .crumb:first-child:not(.current) + .crumb-sep { display: none; }
.parish-chip { transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); text-decoration: none; }
.parish-chip:hover { border-color: var(--primary-lift); box-shadow: 0 0 0 3px var(--primary-wash); }
.parish-chip-name { text-decoration: none; }
.icon-btn:hover { transform: rotate(14deg); }

/* Route progress, driven by js/motion.js */
#route-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 400;
  background: linear-gradient(90deg, var(--primary-lift), var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 0 3px 3px 0; opacity: 0; pointer-events: none;
  transition: width 0.4s var(--ease), opacity 0.25s var(--ease);
}

/* ---------- Sidebar ---------- */
.sidebar-link { position: relative; padding: 7px 10px; transition: color 0.14s var(--ease), background 0.14s var(--ease), transform 0.18s var(--ease); }
.sidebar-link:hover { transform: translateX(2px); }
.sidebar-link.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-lift) 22%, transparent);
}
.sidebar-link.active::before {
  content: ''; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--accent);
  animation: grow-y 0.3s var(--spring) both;
}
/* Every glyph, emoji or not, sits in the same tinted tile so the rail reads as
   one icon set instead of forty unrelated pictures. */
.nav-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; opacity: 1; filter: none;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.2s var(--spring);
}
.sidebar-link:hover .nav-icon { transform: scale(1.1) rotate(-4deg); }
.sidebar-link.active .nav-icon { background: var(--card); border-color: color-mix(in srgb, var(--primary-lift) 35%, transparent); }
#app.sidebar-collapsed .nav-icon { width: 30px; height: 30px; font-size: 14px; }
#app.sidebar-collapsed .sidebar-link.active::before { left: -8px; }
.nav-group { font-size: 10.5px; letter-spacing: 0.09em; padding: 18px 19px 6px; }

.sidebar-footer .signout-icon { display: inline; }
#app:not(.sidebar-collapsed) .sidebar-footer .signout-btn { justify-content: flex-start; }
.sidebar-footer button:hover { background: var(--danger-bg); }

/* ---------- Page heading ---------- */
.page-header { margin-bottom: 24px; }
.page-title { font-size: clamp(24px, 2.1vw, 31px); }

/* ---------- Cards ---------- */
.card, .dash-card { box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
.card { padding: clamp(16px, 1.6vw, 24px); transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.card + .card { margin-top: 18px; }
.tile { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tile:hover { box-shadow: var(--shadow-md); }
.section-heading { letter-spacing: -0.015em; }

/* ---------- Tables: one hairline system instead of three ----------
   Before: the wrapper, the card AND every row each drew a line, and the sticky
   header sat on a grey slab. Now rows are separated by a faint divider, the
   header is a quiet label row, and the frame belongs to the container alone. */
.table-wrap { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--shadow-sm); overflow-x: auto; }
.card > .table-wrap { box-shadow: none; }
th {
  background: color-mix(in srgb, var(--surface) 70%, var(--card));
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--subtext); padding: 12px 18px; border-bottom: 1px solid var(--border);
}
td { padding: 13px 18px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
tbody tr { position: relative; transition: background 0.14s var(--ease); }
tbody tr:hover td { background: color-mix(in srgb, var(--primary-wash) 55%, transparent); }
tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary-lift); }
th.sortable:hover { color: var(--ink-strong); }

/* ---------- Forms & buttons ---------- */
.field label { text-transform: none; letter-spacing: 0.01em; }
.field input, .field select, .field textarea, input[type="text"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea { border-radius: 10px; }
.search input { border-radius: 10px; padding-left: 38px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-lift) 16%, transparent); }

a.btn { text-decoration: none; }
.btn { position: relative; overflow: hidden; border-radius: 10px; transition: background 0.16s var(--ease), transform 0.14s var(--ease), box-shadow 0.2s var(--ease), border-color 0.16s var(--ease), filter 0.16s var(--ease); }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary));
  box-shadow: 0 1px 2px rgba(8, 64, 47, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); box-shadow: 0 8px 18px -6px rgba(13, 92, 70, 0.55); }
.btn-secondary { box-shadow: var(--shadow-sm); }
.btn-secondary:hover:not(:disabled) { border-color: var(--primary-lift); box-shadow: var(--shadow-md); }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.22; transform: scale(0); pointer-events: none; animation: ripple 0.55s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

.badge { letter-spacing: 0.01em; }
.tab-btn { position: relative; }
.tab-btn.active { box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--radius) var(--radius) 0 0; }
.tabs-pill .tab-btn.active { box-shadow: none; border-radius: 999px; }
.tabs-pill .tab-btn:hover:not(.active) { border-color: var(--primary-lift); }

.modal { border-radius: 18px; animation: pop-in 0.28s var(--spring); }
.dd-menu { border-radius: 12px; }

/* ---------- Loading ---------- */
.loading::before {
  content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 12px;
  border-radius: 50%; border: 2.5px solid var(--border-strong); border-top-color: var(--primary-lift);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state .es-icon { font-size: 34px; animation: float-y 3.2s ease-in-out infinite; }
@keyframes float-y { 50% { transform: translateY(-5px); } }

/* ---------- Motion: everything arrives, nothing pops ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* `backwards`, not `both`: the end state must hand control back to :hover. */
.content > * { animation: rise 0.5s var(--ease) backwards; }
.content > .dash-page { animation: none; }
.content > :nth-child(2) { animation-delay: 0.05s; }
.content > :nth-child(3) { animation-delay: 0.1s; }
.content > :nth-child(4) { animation-delay: 0.15s; }
.content > :nth-child(n+5) { animation-delay: 0.2s; }
.card-row > .card, .grid-2 > *, .grid-3 > *, .week-day { animation: rise 0.5s var(--ease) backwards; }
.card-row > :nth-child(2), .grid-2 > :nth-child(2), .grid-3 > :nth-child(2) { animation-delay: 0.06s; }
.card-row > :nth-child(3), .grid-2 > :nth-child(3), .grid-3 > :nth-child(3) { animation-delay: 0.12s; }
.card-row > :nth-child(n+4), .grid-2 > :nth-child(n+4), .grid-3 > :nth-child(n+4) { animation-delay: 0.18s; }
tbody tr { animation: row-in 0.35s var(--ease) backwards; }
tbody tr:nth-child(1){animation-delay:16ms}
tbody tr:nth-child(2){animation-delay:32ms}
tbody tr:nth-child(3){animation-delay:48ms}
tbody tr:nth-child(4){animation-delay:64ms}
tbody tr:nth-child(5){animation-delay:80ms}
tbody tr:nth-child(6){animation-delay:96ms}
tbody tr:nth-child(7){animation-delay:112ms}
tbody tr:nth-child(8){animation-delay:128ms}
tbody tr:nth-child(9){animation-delay:144ms}
tbody tr:nth-child(10){animation-delay:160ms}
tbody tr:nth-child(11){animation-delay:176ms}
tbody tr:nth-child(12){animation-delay:192ms}
tbody tr:nth-child(13){animation-delay:208ms}
tbody tr:nth-child(14){animation-delay:224ms}
tbody tr:nth-child(15){animation-delay:240ms}
tbody tr:nth-child(16){animation-delay:256ms}
tbody tr:nth-child(17){animation-delay:272ms}
tbody tr:nth-child(18){animation-delay:288ms}
tbody tr:nth-child(19){animation-delay:304ms}
tbody tr:nth-child(20){animation-delay:320ms}
tbody tr:nth-child(21){animation-delay:320ms}
tbody tr:nth-child(22){animation-delay:320ms}
tbody tr:nth-child(23){animation-delay:320ms}
tbody tr:nth-child(24){animation-delay:320ms}
.cal-day:hover { transform: translateY(-1px); }

/* ---------- Dashboard ---------- */
/* Flex-wrap rather than a fixed grid: every card has a minimum width and may
   grow, so a short last row stretches to fill the line instead of leaving a
   hole — whatever mix of cards this account is allowed to see. */
.dash-page { display: flex; flex-direction: column; gap: 18px; min-height: calc(100dvh - var(--topbar-h) - 72px); }
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-lift); margin-bottom: 6px; }
.dash-status-bar {
  margin: 0; padding: 7px 13px; gap: 10px; font-size: 11.5px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm);
}
.dash-pulse { background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); }
.dash-stats, .dash-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.dash-grid { flex: 1; align-content: stretch; }
.dash-card {
  position: relative; flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column;
  padding: 20px 22px; overflow: hidden;
  animation: rise 0.55s var(--ease) backwards;
}
.dash-stats > .dash-card { flex: 1 1 240px; }
.dash-card.dash-span-wide { flex: 2.3 1 560px; }
.dash-card.dash-span-full { flex: 1 1 100%; }
.dash-stats > :nth-child(2), .dash-grid > :nth-child(2) { animation-delay: 0.06s; }
.dash-stats > :nth-child(3), .dash-grid > :nth-child(3) { animation-delay: 0.12s; }
.dash-stats > :nth-child(4), .dash-grid > :nth-child(4) { animation-delay: 0.18s; }
.dash-grid > :nth-child(n+5) { animation-delay: 0.24s; }
.dash-grid > :nth-child(n+7) { animation-delay: 0.3s; }

.dash-stat { --tile: var(--primary-lift);
  background:
    radial-gradient(170px 110px at 100% 0, color-mix(in srgb, var(--tile) 15%, transparent), transparent 75%),
    var(--card); }
.dash-stat-value { font-size: clamp(30px, 2.6vw, 40px); font-variant-numeric: tabular-nums; }
.dash-stat-label { color: var(--subtext); }
.dash-clickable:hover { box-shadow: var(--shadow-md); }
.dash-chart-title { font-size: 15px; letter-spacing: -0.01em; color: var(--ink-strong); }

.dash-action {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(100deg, var(--accent-soft), var(--card) 70%);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.dash-action .flex-between { width: 100%; }

.dash-chart { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dash-chart-body { position: relative; flex: 1; min-height: 240px; }
.dash-chart-body > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ch-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.ch-base { stroke: var(--border-strong); stroke-width: 1; }
.ch-axis { fill: var(--subtext); font-size: 11px; font-family: var(--sans); }
.ch-val { fill: var(--ink-strong); font-size: 11px; font-weight: 700; font-family: var(--sans); }
.ch-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: bar-grow 0.75s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 38ms); transition: opacity 0.15s; }
.no-anim .ch-bar { animation: none; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ch-band { fill: var(--primary-lift); opacity: 0; transition: opacity 0.15s; }
.ch-hit { fill: transparent; }
.ch-hit:hover + .ch-band, .ch-band.on { opacity: 0.07; }
.dash-tip {
  position: absolute; top: 4px; z-index: 5; pointer-events: none; min-width: 120px;
  background: var(--ink-strong); color: var(--card); border-radius: 10px; padding: 8px 11px;
  font-size: 12px; box-shadow: var(--shadow-md); opacity: 0; transform: translate(-50%, 4px);
  transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
}
.dash-tip.on { opacity: 1; transform: translate(-50%, 0); }
.dash-tip b { display: block; margin-bottom: 4px; font-size: 12.5px; }
.dash-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 6px; }
.dash-tip span { display: flex; justify-content: space-between; gap: 14px; }

.dash-donut-wrap { flex: 1; display: grid; place-items: center; padding: 8px 0 4px; min-height: 150px; }
.dash-donut { width: min(100%, 190px); aspect-ratio: 1; position: relative; }
.dash-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-donut .seg { fill: none; stroke-width: 15; transition: stroke-dashoffset 1s var(--ease), stroke-dasharray 1s var(--ease); }
.dash-donut .track { fill: none; stroke-width: 15; stroke: var(--surface); }
.dash-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dash-donut-center b { font-size: 26px; letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-donut-center small { font-size: 11px; color: var(--subtext); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.dash-legend { justify-content: center; }

.dash-meter { height: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.dash-meter-fill { border-radius: 999px; transition: width 1.1s var(--ease); background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); background-size: 60% 100%; background-repeat: no-repeat; animation: sheen 2.8s ease-in-out infinite; }
@keyframes sheen { from { background-position: -80% 0; } to { background-position: 180% 0; } }

.spark-line { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.1s var(--ease) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } }
.no-anim .spark-line { animation: none; }

.dash-ministats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 22px; margin-top: 10px; }

.skeleton-card { min-height: 110px; background: linear-gradient(90deg, var(--card) 25%, var(--surface) 50%, var(--card) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }

/* ---------- Login ---------- */
.login-screen { position: relative; overflow: hidden; }
.login-screen::before, .login-screen::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
  animation: drift 16s ease-in-out infinite alternate;
}
.login-screen::before { width: 560px; height: 560px; left: -140px; top: -160px; background: color-mix(in srgb, var(--primary-lift) 22%, transparent); }
.login-screen::after { width: 480px; height: 480px; right: -120px; bottom: -140px; background: color-mix(in srgb, var(--accent) 22%, transparent); animation-delay: -6s; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.12); } }
.login-shell { position: relative; z-index: 1; animation: rise 0.7s var(--ease) backwards; }
.login-card { border-radius: 20px; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--card) 92%, transparent); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .sidebar { height: auto; }
  .sidebar-link.active::before { display: none; }
  .sidebar-link { border-bottom: none !important; }
  .sidebar-link.active { background: var(--rail-active-bg); }
  .dash-card.dash-span-wide { flex-basis: 100%; }
  .dash-page { min-height: 0; }
}
@media (max-width: 560px) { .dash-stats > .dash-card { flex-basis: calc(50% - 8px); } .dash-stat-value { font-size: 28px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* ---------- Tables inside cards run edge to edge ----------
   A table padded in from its card's frame read as a box inside a box. */
.card:has(> .table-wrap) { padding: 0; overflow: hidden; }
.card:has(> .table-wrap) > .table-wrap { border-radius: 0; }
.toolbar .search { max-width: 480px; }

/* ===========================================================================
   Settings & Parish Profile  (st-*)
   =========================================================================== */
.st-page { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h) - 76px); }
.st-page > .st-shell { flex: 1 0 auto; align-content: start; }
.st-page > .st-footer { margin-top: 28px; }
.st-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-body { min-width: 0; }
.st-panel { animation: rise 0.4s var(--ease) backwards; }
.st-panel-head { margin-bottom: 16px; }
.st-panel-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.015em; color: var(--ink-strong); }
.st-panel-head p { margin: 4px 0 0; font-size: 14px; color: var(--subtext); max-width: 70ch; }

/* Sub-navigation */
.st-nav { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.st-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 11px; text-align: left; color: var(--subtext); transition: background 0.14s var(--ease), color 0.14s var(--ease); }
.st-tab:hover { background: var(--surface); color: var(--ink); }
.st-tab.on { background: var(--primary-wash); color: var(--primary-lift); }
.st-tab-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); transition: background 0.14s, transform 0.2s var(--spring); }
.st-tab.on .st-tab-ic { background: var(--card); border-color: color-mix(in srgb, var(--primary-lift) 35%, transparent); }
.st-tab:hover .st-tab-ic { transform: scale(1.06); }
.st-tab-text { min-width: 0; flex: 1; line-height: 1.25; }
.st-tab-text b { display: block; font-size: 14px; font-weight: 650; }
.st-tab-text small { display: block; font-size: 12px; color: var(--faint); font-weight: 500; }
.st-tab.on small { color: color-mix(in srgb, var(--primary-lift) 70%, var(--faint)); }
.st-tab-lock { color: var(--pending); display: grid; place-items: center; }

/* Cards */
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.st-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.st-panel > .st-card + .st-card { margin-top: 16px; }
.st-grid > .st-wide { grid-column: 1 / -1; }
.st-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.st-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.st-card-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--ink-strong); letter-spacing: -0.01em; margin-bottom: 8px; }
.st-card-title .ic { color: var(--primary-lift); }
.st-card-note { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--faint); letter-spacing: 0; }

/* Hero: photo + identity */
.st-hero { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 26px 28px; border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background: radial-gradient(420px 200px at 100% 0, color-mix(in srgb, var(--primary-lift) 12%, transparent), transparent 70%), var(--card); }
.st-lockup { display: flex; align-items: center; flex-shrink: 0; }
.st-plate { width: 104px; height: 104px; border-radius: 24px; display: grid; place-items: center; background: #0d5c46; border: 2px solid rgba(13, 92, 70, 0.4); box-shadow: 0 8px 20px -8px rgba(13, 92, 70, 0.6); }
.st-plate img { width: 86px; height: 86px; border-radius: 16px; object-fit: contain; }
.st-photo { position: relative; width: 112px; height: 112px; margin-left: -18px; border-radius: 50%; background: var(--card); border: 4px solid var(--card); box-shadow: var(--shadow-md); }
.st-photo img, .st-photo-empty { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.st-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--surface); border: 2px dashed var(--border-strong); color: var(--faint); font-size: 11px; font-weight: 600; }
.st-photo-edit { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; border: 3px solid var(--card); box-shadow: var(--shadow-md); transition: transform 0.2s var(--spring), background 0.14s; }
.st-photo-edit:hover { transform: scale(1.14) rotate(-8deg); background: var(--primary-dark); }
.st-photo.busy::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--card) 70%, transparent); }
/* The mark as a rounded square (logoShape on Parish Profile): corners 22% of the side, as everywhere it shows. */
.st-photo.st-photo-rounded, .st-photo.st-photo-rounded img, .st-photo.st-photo-rounded .st-photo-empty, .st-photo.st-photo-rounded.busy::after { border-radius: 22%; }
.st-photo.busy::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--primary-lift); animation: spin 0.7s linear infinite; }
.st-hero-text { min-width: 0; flex: 1 1 280px; }
.st-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--primary-lift); }
.st-hero-name { margin: 4px 0 6px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1.15; }
.st-hero-sub { display: flex; align-items: center; gap: 8px; color: var(--subtext); font-size: 14px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--ink); }
.st-mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.st-tip { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--faint); }

/* Inline-edit fields */
.st-field { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.st-field:last-child { border-bottom: none; padding-bottom: 2px; }
.st-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtext); margin-bottom: 4px; }
.st-lock-tag { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); font-size: 11.5px; }
.st-lock-tag:empty { display: none; }
.st-value-row { display: flex; align-items: center; gap: 8px; margin: 0 -10px; padding: 6px 10px; border-radius: 10px; transition: background 0.14s var(--ease); }
.st-field:not(.st-locked):hover .st-value-row, .st-field:not(.st-locked):focus-within .st-value-row { background: var(--surface); }
.st-value { flex: 1; min-width: 0; font-size: 15px; color: var(--ink-strong); font-weight: 500; word-break: break-word; cursor: text; outline: none; }
.st-value.multiline { white-space: pre-wrap; font-weight: 400; line-height: 1.6; }
.st-locked .st-value { color: var(--ink); cursor: default; }
.st-empty { color: var(--faint); font-weight: 400; font-style: italic; }
.st-pencil { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--faint); opacity: 0; transform: scale(0.85); transition: opacity 0.14s var(--ease), transform 0.18s var(--spring), background 0.14s, color 0.14s; }
.st-field:hover .st-pencil, .st-pencil:focus-visible { opacity: 1; transform: none; background: var(--card); border-color: var(--border); color: var(--primary-lift); }
.st-pencil:hover { background: var(--primary-wash); border-color: color-mix(in srgb, var(--primary-lift) 40%, transparent); }
/* No hover on touch screens, so the pencil is simply always there. */
@media (hover: none) { .st-pencil { opacity: 1; transform: none; color: var(--primary-lift); } }
.st-hint { font-size: 12px; color: var(--faint); margin-top: 4px; }
.st-edit { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; animation: pop-in 0.18s var(--ease); }
.st-edit.saving { opacity: 0.7; }
.st-input { flex: 1; min-width: 0; width: 100%; padding: 10px 12px; border: 1px solid var(--primary-lift); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--ink); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-lift) 16%, transparent); outline: none; resize: vertical; }
.st-acts { display: flex; gap: 6px; flex-shrink: 0; }
.st-edit.multiline .st-acts { flex-direction: column; }
.st-act { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card); color: var(--subtext); transition: all 0.14s var(--ease); }
.st-act:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.st-act-ok { background: var(--primary); border-color: var(--primary); color: #fff; }
.st-act-ok:hover:not(:disabled) { background: var(--primary-dark); color: #fff; }
.st-act:disabled { opacity: 0.55; cursor: wait; }
.st-error { color: var(--danger); font-size: 13px; margin-top: 6px; min-height: 0; }
.st-error:empty { display: none; }
.st-ok { color: var(--success); font-size: 13px; margin-top: 6px; }
.st-saved .st-value-row { animation: st-flash 1.2s var(--ease); }
@keyframes st-flash { 0% { background: var(--success-bg); } 100% { background: transparent; } }
.st-ro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 28px; }
.st-ro-grid .st-field { border-bottom: none; }

/* Forms */
.st-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.st-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.st-form-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--subtext); margin-bottom: 6px; }
.st-form-field .st-input { box-shadow: none; border-color: var(--border-strong); resize: none; }
.st-form-field .st-input:focus { border-color: var(--primary-lift); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-lift) 16%, transparent); }
.st-pw { position: relative; }
.st-pw-input { width: 100%; padding: 11px 44px 11px 13px; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--ink); background: var(--card); transition: border-color 0.14s, box-shadow 0.14s; }
.st-pw-input:focus { outline: none; border-color: var(--primary-lift); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-lift) 16%, transparent); }
.st-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: none; background: none; border-radius: 8px; color: var(--primary-lift); cursor: pointer; }
.st-eye:hover { background: var(--surface); }
/* Every other password field: helpers.js revealPassword — same toggle. */
.pw-reveal { position: relative; }
.pw-reveal input { width: 100%; padding-right: 46px !important; }
.pw-reveal-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: none; background: none; border-radius: 8px; color: var(--primary-lift); cursor: pointer; }
.pw-reveal-btn:hover { background: var(--surface); }
.st-account { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.st-account-text { flex: 1; min-width: 160px; }
.st-account-name { font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.st-account-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Connection lock */
.st-lock { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 34px; }
.st-lock-ic { width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; background: var(--pending-bg); color: var(--pending); margin-bottom: 14px; animation: float-y 3.2s ease-in-out infinite; }
.st-lock h3 { margin: 0 0 6px; font-size: 18px; color: var(--ink-strong); letter-spacing: -0.015em; }
.st-lock p { margin: 0 0 20px; max-width: 46ch; font-size: 14px; color: var(--subtext); line-height: 1.55; }
.st-lock-form { display: flex; gap: 10px; width: min(100%, 420px); }
.st-lock-form .st-pw { flex: 1; }
.st-lock .st-error { margin-top: 12px; }
.st-unlocked { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; background: var(--success-bg); color: var(--success); font-size: 14px; animation: pop-in 0.25s var(--spring); }
.st-unlocked-ic { display: grid; place-items: center; }
.st-unlocked-text { flex: 1; min-width: 200px; }
.st-unlocked .btn { background: var(--card); }

/* Footer */
.st-footer { margin-top: 28px; flex-shrink: 0; padding: 24px 26px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.st-footer-top { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.st-footer-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.st-footer-about { flex: 1 1 320px; margin: 0; font-size: 13.5px; color: var(--subtext); line-height: 1.65; }
.st-footer-about b { color: var(--ink-strong); }
.st-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--faint); }
.st-footer-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }

@media (max-width: 900px) {
  .st-shell { grid-template-columns: 1fr; gap: 16px; }
  .st-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .st-tab { width: auto; flex-shrink: 0; padding: 8px 12px 8px 8px; }
  .st-tab-text small { display: none; }
  .st-hero { padding: 20px; gap: 18px; }
  .st-lock-form { flex-direction: column; }
}

/* ===========================================================================
   Accounts workspace & Bank Accounts  (ps-*)
   =========================================================================== */
.ps-mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.01em; }
.ps-ref b { color: var(--ink-strong); font-weight: 700; }
.ps-ref-dim { color: var(--faint); }
.ps-copy { display: inline-grid; place-items: center; width: 24px; height: 24px; border: none; border-radius: 7px; background: transparent; color: var(--faint); vertical-align: middle; transition: background .14s, color .14s; }
.ps-copy:hover { background: var(--surface); color: var(--primary-lift); }
.ps-danger:hover { color: var(--danger); background: var(--danger-bg); }

/* Status strip + section switcher */
.ps-status { margin-bottom: 14px; }
.ps-status:empty { display: none; }
.ps-conn { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-sm); }
.ps-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.ps-dot-on { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.ps-mode { font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 2px 9px; border-radius: 999px; }
.ps-mode-test { background: var(--pending-bg); color: var(--pending); }
.ps-mode-live { background: var(--success-bg); color: var(--success); }
.ps-sections { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ps-section { padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--subtext); font-size: 13.5px; font-weight: 600; transition: all .16s var(--ease); }
.ps-section:hover { color: var(--ink); border-color: var(--border-strong); }
.ps-section.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px -4px rgba(13, 92, 70, .5); }

/* Notices */
.ps-notice { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; border: 1px solid transparent; }
.ps-notice .ic { margin-top: 1px; }
.ps-notice-warn { background: var(--pending-bg); color: var(--pending); border-color: color-mix(in srgb, var(--pending) 22%, transparent); }
.ps-notice-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 18%, transparent); }
.ps-notice-bad { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.ps-notice-ok { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
.ps-notice strong { font-weight: 700; }
.ps-warnline { display: inline-flex; align-items: center; gap: 5px; color: var(--pending); font-size: 12px; font-weight: 600; }

/* Small bits */
.ps-seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.ps-seg button { padding: 7px 14px; border: none; border-radius: 9px; background: transparent; color: var(--subtext); font-size: 13.5px; font-weight: 500; transition: all .16s var(--ease); }
.ps-seg button.on { background: var(--card); color: var(--primary-lift); font-weight: 600; box-shadow: var(--shadow-sm); }
.ps-kind { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ps-kind-bank { background: var(--info-bg); color: var(--info); }
.ps-kind-mobile_money { background: var(--pending-bg); color: var(--pending); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ps-chip { display: inline-flex; padding: 2px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--ink); font-family: var(--mono); }
.ps-dest > div + div { margin-top: 2px; }
.ps-more { margin: 4px 0 12px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.ps-more summary { padding: 10px 0; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--subtext); }
.ps-more[open] { padding-bottom: 6px; }
.ps-pw-field label { display: flex; align-items: center; gap: 5px; }
.ps-verify-result:empty { display: none; }

/* Bank account cards */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.ps-card { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); animation: rise .5s var(--ease) backwards; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.ps-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary-lift) 35%, var(--border)); }
.ps-card h3 { margin: 2px 0 0; font-size: 17px; letter-spacing: -.01em; color: var(--ink-strong); }
.ps-inactive { opacity: .62; }
.ps-card-top { display: flex; justify-content: space-between; align-items: center; }
.ps-provider { display: flex; align-items: center; gap: 8px; color: var(--subtext); font-size: 13.5px; }
.ps-numrow { display: flex; align-items: center; gap: 4px; }
.ps-number { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink-strong); }
.ps-accname { font-size: 13.5px; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
.ps-verified, .ps-unverified { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; width: fit-content; padding: 3px 10px; border-radius: 999px; }
.ps-verified { background: var(--success-bg); color: var(--success); }
.ps-unverified { background: var(--pending-bg); color: var(--pending); }
.ps-route { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.ps-route-on { background: var(--primary-wash); color: var(--ink); }
.ps-route-on .ic { color: var(--primary-lift); margin-top: 2px; }
.ps-route-off { background: var(--surface); color: var(--subtext); border: 1px dashed var(--border-strong); }
.ps-route-off .ic { color: var(--pending); margin-top: 1px; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }

/* Filters / summary */
.ps-filters { align-items: center; }
.ps-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.ps-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.ps-search input { width: 100%; padding: 10px 14px 10px 36px; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 14px; background: var(--card); color: var(--ink); }
.ps-search input:focus { outline: none; border-color: var(--primary-lift); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-lift) 16%, transparent); }
.ps-date { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--subtext); font-weight: 600; }
.ps-date input { padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 13.5px; }
.ps-sumchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.ps-sumchips:empty { display: none; }
.ps-sumchip { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 12.5px; color: var(--subtext); transition: all .14s; }
.ps-sumchip b { color: var(--ink-strong); font-family: var(--mono); font-size: 12px; margin-right: 4px; }
.ps-sumchip:hover, .ps-sumchip.on { border-color: var(--primary-lift); background: var(--primary-wash); color: var(--ink); }

/* Split rows */
.ps-split-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ps-split-row { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; align-items: center; }
.ps-split-total { font-size: 12.5px; color: var(--subtext); margin-top: 8px; }
.ps-split-total.bad { color: var(--danger); font-weight: 600; }

/* Drawer */
.ps-drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(6, 10, 15, .5); display: flex; justify-content: flex-end; animation: fade-in .18s; }
.ps-drawer { width: min(100%, 520px); height: 100%; overflow-y: auto; background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: ps-slide .3s var(--ease); display: flex; flex-direction: column; }
@keyframes ps-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ps-drawer-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--primary-wash), transparent); }
.ps-drawer-head h2 { margin: 0; font-size: 19px; letter-spacing: -.015em; color: var(--ink-strong); }
.ps-drawer-body { padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 4px; }
.ps-drawer-block { margin-bottom: 8px; }
.ps-kv { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size: 14px; }
.ps-kv > span:first-child { color: var(--subtext); flex-shrink: 0; }
.ps-kv > span:last-child { text-align: right; font-weight: 500; color: var(--ink-strong); min-width: 0; word-break: break-word; }
.ps-h4 { margin: 20px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--subtext); }
.ps-minirow { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size: 13.5px; }
.ps-refbox { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 14px; }
.ps-refbig { font-size: 14px; word-break: break-all; }
.ps-refparts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--subtext); }
.ps-refparts b { color: var(--ink-strong); font-family: var(--mono); }

tbody tr.clickable { cursor: pointer; }
@media (max-width: 700px) { .ps-split-row { grid-template-columns: 1fr 90px auto; } .ps-drawer { width: 100%; } }

/* The console turns every <select> into a block-level .dd-wrap; in a filter bar they must size to their content. */
.ps-filters .dd-wrap, .toolbar .dd-wrap { width: auto; min-width: 180px; max-width: 260px; flex: 0 1 220px; }
.ps-filters { gap: 10px; }
.ps-date input { min-width: 150px; }
.ps-split-row .dd-wrap { width: 100%; max-width: none; }

.ps-mismatch { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; background: var(--danger-bg); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); }
.ps-mismatch .ic { margin-top: 1px; }

/* Tidy the payments filter bar and keep money / codes on one line. */
.ps-search { flex: 1 1 220px; max-width: 320px; }
.ps-filters .dd-wrap { min-width: 150px; max-width: 200px; flex: 0 1 190px; }
.ps-date input { min-width: 0; width: 138px; padding: 8px 8px; }
.ps-filters .btn { margin-left: auto; }
.ps-chip { white-space: nowrap; }
td.num { white-space: nowrap; }
.ps-ref { word-break: break-all; }

/* ---- Trivia builder (views/trivia.js) ------------------------------------- */
.tv-head { margin-bottom: 14px; }
.tv-list { display: flex; flex-direction: column; gap: 14px; }
.tv-card { padding: 18px 18px 14px; }
.tv-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tv-number { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--subtext); }
.tv-question { width: 100%; box-sizing: border-box; font-size: 15px; font-weight: 600; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); color: var(--ink); resize: vertical; font-family: inherit; margin-bottom: 12px; }
.tv-options { display: flex; flex-direction: column; gap: 8px; }
.tv-row { display: flex; align-items: center; gap: 10px; }
.tv-letter { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--subtext); font-weight: 800; font-size: 14px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.tv-letter:hover:not(:disabled) { border-color: var(--primary-lift); color: var(--primary-lift); }
.tv-letter.on { background: var(--success); border-color: var(--success); color: #fff; }
.tv-option { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px; font-family: inherit; }
.tv-remove { width: 30px; height: 30px; border: none; background: none; color: var(--faint); font-size: 18px; border-radius: 8px; cursor: pointer; }
.tv-remove:hover { background: var(--surface); color: var(--danger); }
.tv-add-option { align-self: flex-start; margin-left: 48px; border: none; background: none; color: var(--primary-lift); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 0; }
.tv-add-question { border: 1.5px dashed var(--border-strong); background: none; color: var(--primary-lift); font-weight: 700; font-size: 14px; padding: 16px; border-radius: 14px; cursor: pointer; }
.tv-add-question:hover { border-color: var(--primary-lift); background: var(--primary-wash); }
.tv-actions { display: flex; gap: 10px; justify-content: flex-end; margin: 6px 0 40px; }

/* ---- Photos & Media (views/media.js) -------------------------------------- */
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.md-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.md-thumb { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; }
.md-thumb img { width: 100%; height: 100%; object-fit: cover; }
.md-icon { font-size: 42px; }
.md-body { padding: 12px 14px 10px; display: flex; flex-direction: column; flex: 1; }
.md-title { font-weight: 700; color: var(--ink); }
.md-actions { display: flex; gap: 2px; margin-top: auto; padding-top: 8px; }

/* A locked reference shown by name in a record form (views/records.js). */
.pp-locked { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; }

/* ---- Leadership: tenure and the 24-hour wait (views/leadership.js) -------- */
.ld-seat { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ld-seat-label { font-size: 13.5px; font-weight: 600; }
.ld-seat-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ld-holder { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.ld-tenure { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; font-size: 11.5px; }
.ld-tenure .badge { font-size: 10.5px; }
/* The photo after the name, and the buttons in a slot of fixed width, so the
   photos form one straight column whatever each row holds. */
.ld-photo { width: 30px; display: flex; justify-content: center; flex-shrink: 0; }
.ld-actions { width: 104px; display: flex; justify-content: flex-end; align-items: center; gap: 4px; flex-shrink: 0; }
/* The term's end: a date you click and change, saved at once. Scoped tightly
   enough to beat the form-field look every input[type="date"] gets. */
.ld-tenure input.ld-term-input { width: 118px; padding: 0 2px; border: none; border-bottom: 1px dashed var(--border-strong); border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 18px; cursor: pointer; color-scheme: light dark; }
.ld-tenure input.ld-term-input:hover, .ld-tenure input.ld-term-input:focus { border-bottom-color: var(--primary-lift); color: var(--primary-lift); box-shadow: none; outline: none; }
.ld-tenure input.ld-term-input.empty { color: var(--faint); font-weight: 400; font-style: italic; }
.ld-tenure input.ld-term-input::-webkit-calendar-picker-indicator { padding: 0; margin-left: 2px; cursor: pointer; opacity: 0.7; }
.ld-type { border: 1px solid var(--border); background: transparent; color: var(--subtext); font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: 999px; cursor: pointer; line-height: 17px; }
.ld-type:hover { border-color: var(--primary-lift); color: var(--primary-lift); }
.ld-terms-note { font-size: 12px; margin: -4px 0 10px; }
.ld-waiting { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 10px 12px 4px; margin-bottom: 14px; background: var(--surface); }
.ld-waiting-title { font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.ld-hist-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ld-waiting .ld-hist-row:last-child { border-bottom: none; }
.ld-hist-when { font-size: 11.5px; text-align: right; white-space: nowrap; }

/* ---- Back to where you came from (navTrail.js) ---------------------------- */
.crumb-back-slot { display: flex; flex-shrink: 0; }
.crumb-back-slot:empty { display: none; }
.crumb-back-slot + .crumbs { margin-right: auto; }
.crumb-back { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.crumb-back:hover { border-color: var(--primary-lift); color: var(--primary-lift); }

/* ---- Registrations: duplicates and detail changes (views/registrations.js) - */
.rg-count { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.rg-dup-flag { margin-top: 8px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.rg-case { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
/* Transfers: who the member is on our register — the chosen one highlighted, never ticked. */
.rg-picks { display: grid; gap: 6px; }
.rg-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.rg-pick span { font-size: 12.5px; }
.rg-pick:hover { border-color: var(--primary-lift); }
.rg-pick.chosen { border-color: var(--primary-lift); background: color-mix(in srgb, var(--primary-lift) 12%, var(--card)); }
.rg-case:hover { border-color: var(--primary-lift); }
.rg-pair { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rg-pair-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rg-pair-link { color: var(--danger); font-size: 18px; font-weight: 700; }
.rg-reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.rg-reason { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.rg-against { background: var(--surface); color: var(--subtext); border: 1px dashed var(--border-strong); font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.modal.modal-xwide { max-width: min(1100px, 96vw); width: 96vw; }
.rg-compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; }
.rg-compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.rg-compare th, .rg-compare td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.rg-compare thead th { background: var(--surface); }
.rg-compare tbody th { width: 150px; color: var(--subtext); font-weight: 600; white-space: nowrap; }
.rg-compare td { width: calc(50% - 75px); color: var(--ink); word-break: break-word; }
.rg-compare td.rg-hit { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-weight: 700; box-shadow: inset 3px 0 0 var(--danger); }
.rg-compare td.rg-differs { color: var(--subtext); font-style: italic; }
.rg-hit-mark { color: var(--danger); font-weight: 800; }
.rg-side-head { display: flex; align-items: center; gap: 10px; }
.rg-list { display: flex; flex-direction: column; gap: 3px; }
.rg-decide { border-top: 1px solid var(--border); padding-top: 12px; }
.rg-changes { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.rg-changes th, .rg-changes td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.rg-changes thead th { color: var(--subtext); font-weight: 600; font-size: 12px; }
.rg-changes tbody th { width: 160px; color: var(--subtext); font-weight: 600; }
.rg-asked { font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--primary-lift) 10%, transparent); }
.rg-moved { color: var(--danger); font-size: 11.5px; margin-top: 2px; }
.rg-why { margin-top: 10px; font-size: 13px; color: var(--ink); }
.mb-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
/* ---- Documents (views/documents.js) ---------------------------------------- */
.dc-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; }
.dc-icon { font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.dc-main { flex: 1; min-width: 0; }
.dc-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-title { font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.dc-title:hover { color: var(--primary-lift); text-decoration: underline; }
.dc-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; max-width: 300px; }
/* ---- Polls (views/polls.js) ------------------------------------------------ */
.pl-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.pl-row-main { flex: 1; min-width: 260px; }
.pl-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-row-title a { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.pl-row-title a:hover { color: var(--primary-lift); text-decoration: underline; }
.pl-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pl-chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--subtext); }
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pl-tile { text-align: left; border: 1.5px solid var(--border-strong); background: var(--card); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--ink); transition: border-color .12s, background .12s; }
.pl-tile:hover:not(:disabled) { border-color: var(--primary-lift); }
.pl-tile.on { border-color: var(--primary-lift); background: var(--primary-wash); box-shadow: inset 0 0 0 1px var(--primary-lift); }
.pl-tile:disabled { opacity: .45; cursor: not-allowed; }
.pl-tile-head { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; }
.pl-tile-hint { font-size: 12px; color: var(--subtext); margin-top: 4px; line-height: 1.4; }
.pl-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
/* A span, not a button like Trivia's, so it centres its letter itself. */
.pl-letter { cursor: default; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.pl-letter.square { border-radius: 6px; }
.pl-preview { display: flex; gap: 8px; margin: 4px 0; }
.pl-preview-text { padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--subtext); font-size: 13px; }
.pl-rate { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; font-weight: 800; color: var(--subtext); }
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pl-stat { padding: 16px; }
.pl-stat-n { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.pl-bar-row { display: grid; grid-template-columns: minmax(120px, 40%) 1fr 90px; gap: 10px; align-items: center; margin: 6px 0; font-size: 13px; }
.pl-bar-label { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bar { height: 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.pl-bar-fill { height: 100%; background: var(--primary-lift); border-radius: 999px; }
.pl-bar-n { text-align: right; color: var(--subtext); font-variant-numeric: tabular-nums; }
.pl-written { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.pl-written-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13.5px; color: var(--ink); }

/* ---------- Appointments (views/appointments.js) ---------- */
.ap-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ap-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ap-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ap-kind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: opacity .12s, border-color .12s; }
.ap-kind:hover { border-color: var(--border-strong); }
.ap-kind.on { border-color: var(--ink); }
.ap-kind.off { opacity: .45; }
.ap-day { margin-bottom: 18px; }
.ap-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 2px 8px; font-size: 14px; }
.ap-day-head .muted { font-size: 12.5px; }
.ap-rows { display: flex; flex-direction: column; gap: 8px; }
.ap-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--kind); border-radius: 10px; background: var(--card); }
.ap-row.passed { opacity: .6; }
.ap-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.ap-main { min-width: 0; }
.ap-what { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; }
.ap-who { margin-top: 3px; font-size: 13px; }
.ap-notes { margin-top: 2px; font-size: 12px; font-style: italic; }
.ap-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ap-mode { flex-wrap: wrap; }
@media (max-width: 640px) {
  .ap-row { grid-template-columns: 1fr; gap: 6px; }
  .ap-actions { justify-content: flex-start; }
}

/* A slot's kind, in its own colour, on the shared month calendar. */
.cal-entry-typed {
  background: color-mix(in srgb, var(--entry) 14%, transparent);
  color: color-mix(in srgb, var(--entry) 72%, var(--ink));
  border-left-color: var(--entry);
}
.cal-entry-typed.solid { background: var(--entry); color: #fff; }

/* A colour dot before an option in a custom dropdown (data-color on the option). */
.dd-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: 1px; flex-shrink: 0; }

/* ---------- Day and time picker (js/dateTimePicker.js) ---------- */
.dtp { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--card); }
.dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dtp-title { font-weight: 800; font-size: 14px; }
.dtp-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 16px; cursor: pointer; }
.dtp-nav:hover { border-color: var(--primary-lift); }
.dtp-letters, .dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dtp-letters > div { text-align: center; font-size: 10.5px; font-weight: 800; color: var(--subtext); padding-bottom: 3px; }
.dtp-day { height: 34px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.dtp-day:hover:not(:disabled) { background: var(--surface); border-color: var(--border); }
.dtp-day.today { border-color: var(--accent); }
.dtp-day.chosen { background: var(--primary); border-color: var(--primary); color: #fff; }
.dtp-day:disabled { color: var(--faint); cursor: not-allowed; opacity: .5; }
.dtp-day.empty { pointer-events: none; }
.dtp-side { min-width: 0; display: flex; flex-direction: column; }
.dtp-times-head { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.dtp-times { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.dtp-empty { padding: 18px 0; font-size: 13px; }
.dtp-part { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--subtext); margin: 8px 0 5px; }
.dtp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
.dtp-time { padding: 6px 4px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.dtp-time:hover:not(:disabled) { border-color: var(--primary-lift); }
.dtp-time.chosen { background: var(--primary); border-color: var(--primary); color: #fff; }
.dtp-time.taken { text-decoration: line-through; }
.dtp-time:disabled { opacity: .45; cursor: not-allowed; }
.dtp-custom-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; }
.dtp-custom-row input.dtp-custom { width: 120px; padding: 6px 8px; }
.dtp-summary { grid-column: 1 / -1; padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--subtext); font-size: 13px; }
.dtp-summary.ready { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .dtp { grid-template-columns: 1fr; } }

/* A long text cell on a record page: two lines, then an ellipsis (full text on hover). */
.cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; min-width: 180px; white-space: normal; line-height: 1.35; }
.cell-sub { font-size: 12px; color: var(--subtext); margin-top: 3px; }
.cell-sub .cell-clip, .cell-sub .cell-clamp { color: inherit; }

/* A record page's Edit / Delete stay in view when the register is wider than the screen. */
.rec-table th:last-child, .rec-table td:last-child { position: sticky; right: 0; background: var(--card); box-shadow: -8px 0 10px -8px rgba(0, 0, 0, .35); }
.rec-table th:last-child { background: var(--surface); z-index: 2; }
.rec-table tbody tr:hover td:last-child { background: var(--surface); }

/* ---------- Calendars: month + chosen day (calendar.js monthCalendar) ----------
   A cell carries marks, not text: a dot per entry and a short label when the
   day itself is notable. The chosen day is white in dark mode (like the app's
   chosen options), mint in light. Its detail sits in the panel beside. */
:root { --chosen-bg: var(--primary-wash); --chosen-ink: var(--primary); --chosen-line: var(--primary-lift); }
[data-theme="dark"] { --chosen-bg: #ffffff; --chosen-ink: var(--primary); --chosen-line: #ffffff; }
.cal.planner .planner-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.planner-day { border-left: 1px solid var(--border); padding-left: 20px; min-width: 0; min-height: 300px; }
.planner-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.planner-day-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.planner-today { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--primary-wash); color: var(--primary-lift); }
.planner-empty { color: var(--subtext); font-size: 13.5px; padding: 6px 0 14px; line-height: 1.5; }
.planner-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 980px) {
  .cal.planner .planner-body { grid-template-columns: 1fr; }
  .planner-day { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; min-height: 0; }
}

.cal .cal-grid { gap: 5px; }
.cal .cal-day { min-height: 66px; padding: 7px 8px; display: flex; flex-direction: column; gap: 5px; position: relative; }
.cal .cal-day-num { margin-bottom: 0; font-size: 12.5px; color: var(--ink); }
.cal .cal-day.past .cal-day-num { color: var(--faint); }
.cal .cal-day.dim { opacity: .45; }
.cal .cal-day.dim.chosen { opacity: 1; }
.cal .cal-day.sunday:not(.marked):not(.chosen) { background: color-mix(in srgb, var(--primary-wash) 60%, var(--card)); }
.cal .cal-day.marked { background: color-mix(in srgb, var(--mark, var(--primary-lift)) 12%, var(--card)); border-color: color-mix(in srgb, var(--mark, var(--primary-lift)) 45%, var(--border)); }
.cal .cal-day.mark-danger { --mark: var(--danger); }
.cal .cal-day.mark-info { --mark: var(--info); }
.cal .cal-day.mark-pending { --mark: var(--pending); }
.cal .cal-day.mark-success { --mark: var(--success); }
.cal .cal-day.mark-override { --mark: var(--primary-lift); }
.cal .cal-day.mark-quiet { --mark: var(--faint); }
.cal .cal-day.chosen { background: var(--chosen-bg); border-color: var(--chosen-line); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.cal .cal-day.chosen .cal-day-num { color: var(--chosen-ink); font-weight: 800; }
.cal .cal-day.chosen .cal-mark { color: var(--chosen-ink); }
.cal .cal-day.today .cal-day-num { color: var(--accent); }
.cal .cal-day.today.chosen .cal-day-num { color: var(--chosen-ink); }
.cal-dots { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--primary-lift)); display: inline-block; flex-shrink: 0; border: 1.5px solid var(--dot, var(--primary-lift)); box-sizing: border-box; }
.cal-dot.ring { background: transparent; }
.cal-dot.tone-danger { --dot: var(--danger); }
.cal-dot.tone-info { --dot: var(--info); }
.cal-dot.tone-pending { --dot: var(--pending); }
.cal-dot.tone-success { --dot: var(--success); }
.cal-dot.tone-override { --dot: var(--primary-lift); }
.cal-dot.tone-quiet { --dot: var(--faint); }
/* An ordinary Mass on the Mass Times calendar: green in every season, so it never reads as a feast or a funeral. */
.cal-dot.tone-mass { --dot: #12805a; }
[data-theme="dark"] .cal-dot.tone-mass { --dot: #45c79a; }
.cal-dots-more { font-size: 10px; font-weight: 700; color: var(--subtext); }
.cal-mark { margin-top: auto; font-size: 10.5px; font-weight: 800; line-height: 1.2; color: var(--mark, var(--primary-lift)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; hyphens: auto; -webkit-hyphens: auto; }
.cal .cal-legend .cal-dot { margin-right: 2px; }
.cal-selecting .cal-day.cal-selected { background: var(--chosen-bg) !important; border-color: var(--chosen-line) !important; }
.cal-selecting .cal-day.cal-selected .cal-day-num { color: var(--chosen-ink); font-weight: 800; }
@media (max-width: 700px) { .cal .cal-day { min-height: 52px; padding: 5px; } .cal-mark { display: none; } }

/* A row in a calendar's day panel: time tile, what, actions. */
.dp-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dp-row:last-child { border-bottom: 0; }
.dp-row.no-time { grid-template-columns: 1fr auto; }
.dp-time { text-align: center; padding: 7px 0; border-radius: 10px; background: color-mix(in srgb, var(--dp, var(--primary-lift)) 14%, var(--card)); color: color-mix(in srgb, var(--dp, var(--primary-lift)) 75%, var(--ink)); font-weight: 800; font-size: 13.5px; line-height: 1.15; }
.dp-time small { display: block; font-size: 10px; font-weight: 800; opacity: .75; letter-spacing: .04em; }
.dp-main { min-width: 0; }
.dp-title { font-weight: 700; color: var(--ink); font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dp-sub { color: var(--subtext); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.dp-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* Mass Times: each weekly Mass with its language; the dates coming up that keep their own. */
.week-mass { margin-top: 6px; }
.week-mass .week-time { font-size: 13px; }
.week-lang { font-size: 11px; color: var(--subtext); line-height: 1.3; }
.cu-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 11px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.cu-row:last-child { border-bottom: 0; }
.cu-row:hover { background: var(--surface); }
.cu-date { font-weight: 700; }
.cu-what { font-size: 13px; }
.cu-go { color: var(--faint); font-size: 18px; }

.cal .cal-day.past .cal-dots { opacity: .55; }
/* The legend's swatch for a highlighted (special-schedule) date. */
.cal-legend-cell { width: 16px; height: 12px; border-radius: 4px; display: inline-block; background: color-mix(in srgb, var(--primary-lift) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--primary-lift) 50%, var(--border)); margin-right: 2px; }

/* A calendar's legend, as filters (monthCalendar `filters`). */
.cal-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cal-filter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .12s, opacity .12s, background .12s; }
.cal-filter:hover { border-color: var(--border-strong); background: var(--surface); }
.cal-filter.on { border-color: var(--chosen-line); background: var(--chosen-bg); color: var(--chosen-ink); }
.cal-filter.off { opacity: .5; }
.cal-filter.clear { color: var(--subtext); border-style: dashed; }
.cal-filter-count { font-size: 11px; font-weight: 800; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--chosen-ink) 14%, transparent); }
.cal-legend-cell[style] { background: color-mix(in srgb, var(--mark) 14%, var(--card)); border-color: color-mix(in srgb, var(--mark) 50%, var(--border)); }
.cal.cal-filtering .cal-day.filter-out { opacity: .28; }
.cal.cal-filtering .cal-day.filter-in:not(.chosen) { border-color: var(--filter, var(--primary-lift)); box-shadow: inset 0 0 0 1px var(--filter, var(--primary-lift)); }
.cal.cal-filtering .cal-day.filter-out.chosen { background: var(--card); border-color: var(--border); box-shadow: none; }
.cal.cal-filtering .cal-day.filter-out.chosen .cal-day-num { color: var(--ink); }
.fl-back { border: 0; background: none; color: var(--primary-lift); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 10px; }
.fl-month { margin-bottom: 10px; }
.fl-month-name { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--subtext); margin: 6px 0 4px; }
.fl-row { display: grid; grid-template-columns: 112px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.fl-row:hover { background: var(--surface); }
.fl-row.on { background: var(--chosen-bg); color: var(--chosen-ink); }
.fl-row.past { opacity: .6; }
.fl-date { font-weight: 700; font-size: 13.5px; }
.fl-what { font-size: 12.5px; color: var(--subtext); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-row.on .fl-what { color: inherit; }
.fl-go { color: var(--faint); font-size: 16px; }
/* A long list of a filter's dates scrolls inside the panel, beside the month. */
.planner-day.listing { max-height: 560px; overflow-y: auto; padding-right: 6px; }
/* A past day in a calendar's panel: shown, not changeable. */
.planner-past { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--subtext); }
.planner-past-note { font-size: 12.5px; color: var(--subtext); margin: -6px 0 12px; }

/* ---------- The liturgical season's colours (js/season.js puts data-season on <html>) ----------
   The console wears the season as the app does: green in Ordinary Time (the
   tokens in style.css), violet in Advent and Lent, gold for the white of
   Christmas and Easter, red on Palm Sunday, Good Friday and Pentecost. Only
   the brand tokens change; success, danger and the slot kinds keep their
   meaning. Gold is a shade darker than the app's so white text on a button
   stays readable. */
html[data-season="advent_lent"] { --primary: #5b2d8e; --primary-dark: #3b1d5e; --primary-lift: #5b2d8e; --primary-wash: #f1ebf9; }
html[data-season="advent_lent"][data-theme="dark"] { --primary-lift: #a98be6; --primary-wash: #211832; --rail-active-bg: #211832; --rail-active-ink: #a98be6; }
html[data-season="christmas_easter"] { --primary: #b45309; --primary-dark: #8a3f06; --primary-lift: #b45309; --primary-wash: #fdf2e2; }
html[data-season="christmas_easter"][data-theme="dark"] { --primary-lift: #f0b45a; --primary-wash: #2a1d0c; --rail-active-bg: #2a1d0c; --rail-active-ink: #f0b45a; }
/* The great feasts (solemnities, feasts of the Lord): white and gold — ivory
   surfaces, a deep gold for what wears the brand colour. */
html[data-season="solemnity"] { --primary: #8a6810; --primary-dark: #634a0b; --primary-lift: #8a6810; --primary-wash: #fbf5e3; }
html[data-season="solemnity"]:not([data-theme="dark"]) { --bg: #fdfaf1; --card: #fffefb; --surface: #f7f1e2; --border: #ece3cc; }
html[data-season="solemnity"][data-theme="dark"] { --primary-lift: #e8c766; --primary-wash: #2a2412; --rail-active-bg: #2a2412; --rail-active-ink: #e8c766; }
html[data-season="pentecost_martyrs"] { --primary: #9f1239; --primary-dark: #6b0d27; --primary-lift: #9f1239; --primary-wash: #fbe8ed; }
html[data-season="pentecost_martyrs"][data-theme="dark"] { --primary-lift: #f27a95; --primary-wash: #2c1119; --rail-active-bg: #2c1119; --rail-active-ink: #f27a95; }
/* The season, named beside the parish in the top bar. */
.season-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--primary-lift); background: var(--primary-wash); border: 1px solid color-mix(in srgb, var(--primary-lift) 30%, transparent); white-space: nowrap; }
.season-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-lift); }
@media (max-width: 760px) { .season-chip { display: none; } }

/* A section heading inside a budget-lines table (budgets.js). */
tr.row-group td { background: var(--primary-wash); }

/* ---- New executive handovers (Leadership page) ---------------------------- */
.ho-table tbody tr.ho-changed th, .ho-table tbody tr.ho-changed td { background: var(--primary-wash); }
.ho-table tbody tr.ho-changed td:last-child { font-weight: 700; color: var(--ink); box-shadow: inset 3px 0 0 var(--primary-lift); }
.ho-vacant { color: var(--faint); font-style: italic; }
.ho-card .ld-hist-row:last-child { border-bottom: none; }
.fc-bar .fc-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---- Waiting for the register (views/sacrament-intake.js) ----------------- */
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent, var(--primary)); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; flex-shrink: 0; }
.nav-count[hidden] { display: none; }
.sidebar-link { position: relative; }
#app.sidebar-collapsed .nav-count { position: absolute; top: 4px; right: 6px; margin: 0; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
.si-bulk { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 4px; margin-bottom: 12px; }
.si-bulk-title { font-size: 12px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.si-bulk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 4px 18px; }
.si-bulk-grid > * { min-width: 0; }
.si-bulk-grid .row { flex-wrap: wrap; }
.si-bulk-grid .row > input[type="text"], .si-bulk-grid .row > select { flex: 1 1 120px; min-width: 0; width: auto; }
.si-bulk-grid .cp-wrap { flex: 1 1 160px; min-width: 0; }
.si-table td { vertical-align: top; }
.si-table td input[type="text"] { min-width: 0; }
.si-table .si-minister { min-width: 190px; }
.si-table .si-details { font-size: 12.5px; line-height: 1.45; min-width: 200px; }
.si-table tr.si-chosen td { background: var(--primary-wash); }
.si-table tr.si-problem td { background: color-mix(in srgb, var(--danger) 12%, transparent); box-shadow: inset 0 1px 0 var(--danger), inset 0 -1px 0 var(--danger); }
@media (max-width: 720px) { .si-bulk-grid { grid-template-columns: 1fr; } }

/* ---- Sidebar: sections fold away; the top bar collapses the menu ---------- */
.sidebar-top { cursor: pointer; transition: background 0.14s var(--ease); }
.sidebar-top:hover { background: var(--rail-hover); }
button.nav-group {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: 0; margin: 0; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--faint);
}
button.nav-group:hover { color: var(--rail-ink); }
button.nav-group:focus-visible { outline: 2px solid var(--primary-lift); outline-offset: -2px; border-radius: 6px; }
.nav-group-caret { font-size: 13px; line-height: 1; transition: transform 0.16s var(--ease); opacity: 0.75; }
button.nav-group.shut .nav-group-caret { transform: rotate(-90deg); }
#app:not(.sidebar-collapsed) .sidebar-link.nav-hidden { display: none; }

/* ---- Tables: aligned headings, room to breathe on a laptop --------------- */
th.num, th.right { text-align: right; }
th.center, td.center { text-align: center; }
@media (max-width: 1500px) {
  th, td { padding-left: 12px; padding-right: 12px; }
}
/* A table wider than its box says so: a soft shadow on the side that scrolls. */
.table-wrap {
  background:
    linear-gradient(to right, var(--card) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.22), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.22), transparent) right center / 10px 100% no-repeat scroll,
    var(--card);
}

/* ---- smartTable (js/smartTable.js) ---------------------------------------- */
.tt-card { padding: 18px 20px 20px; }
.tt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tt-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.tt-title { font-weight: 800; font-size: 15.5px; color: var(--ink); margin-right: 4px; }
.tt-sub { font-size: 12.5px; margin: -6px 0 10px; }
.tt-count { font-size: 12px; color: var(--subtext); margin-left: 4px; white-space: nowrap; }
.tt-icon {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--subtext); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: background 0.14s var(--ease), color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.tt-icon:hover, .tt-has > .tt-icon { color: var(--primary-lift); background: var(--primary-wash); border-color: color-mix(in srgb, var(--primary-lift) 30%, transparent); }
.tt-search { display: inline-flex; align-items: center; gap: 2px; }
.tt-search input[type="search"] {
  width: 0; padding: 6px 0; border-color: transparent; background: transparent; opacity: 0;
  transition: width 0.18s var(--ease), opacity 0.18s var(--ease), padding 0.18s var(--ease);
  height: 30px; font-size: 13px;
}
.tt-search:hover input[type="search"], .tt-search:focus-within input[type="search"], .tt-search.tt-has input[type="search"] {
  width: 200px; padding: 6px 10px; opacity: 1; border-color: var(--border); background: var(--surface);
}
.tt-filter { position: relative; display: inline-flex; }
.tt-pop {
  position: absolute; top: 36px; left: 0; z-index: 30; width: 300px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px;
}
.tt-pop-title { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtext); margin-bottom: 6px; }
.tt-pop .tt-col { width: 100%; margin-bottom: 8px; }
.tt-pop input[type="text"], .tt-pop input[type="number"], .tt-pop input[type="date"] { width: 100%; }
.tt-range { display: flex; align-items: center; gap: 6px; }
.tt-range input { flex: 1; min-width: 0; }
.tt-sugg { max-height: 220px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.tt-sugg-item {
  display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 0; background: transparent;
  padding: 7px 8px; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 13px; font-family: inherit;
}
.tt-sugg-item:hover { background: var(--primary-wash); }
.tt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-chips:not(:empty) { margin: -2px 0 10px; }
.tt-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--primary-lift) 35%, transparent);
  background: var(--primary-wash); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.tt-chip-x { font-weight: 800; color: var(--subtext); }
.tt-chip-clear { background: transparent; border-color: var(--border); color: var(--subtext); }
.tt-empty { text-align: center; color: var(--subtext); padding: 26px 12px !important; }

/* ---- The search bar folds to a magnifier (helpers.js searchBar) ---------- */
.toolbar .search.compact { flex: 0 0 auto; max-width: none; cursor: text; }
.search.compact input {
  width: 42px; padding-right: 0; cursor: pointer;
  transition: width 0.2s var(--ease), border-color 0.14s var(--ease);
}
.search.compact:hover input, .search.compact input:focus, .search.compact.has-query input { width: min(320px, 70vw); padding-right: 12px; cursor: text; }
tr.row-faded td { opacity: 0.62; }

/* ---- A fund's harvest sections (views/fund-harvest.js) -------------------- */
details.hv-how > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.hv-how > summary::-webkit-details-marker { display: none; }
details.hv-how > summary::before { content: '›'; font-weight: 800; color: var(--primary-lift); transition: transform 0.16s var(--ease); display: inline-block; }
details.hv-how[open] > summary::before { transform: rotate(90deg); }
.hv-sugg { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.hv-sugg table td input[type="number"] { text-align: right; }
.tt-table tr.si-chosen td { background: var(--primary-wash); }
.fs-groups { display: flex; flex-direction: column; gap: 8px; }
.fs-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-row input[type="text"] { flex: 1 1 160px; min-width: 120px; }

/* ---- A request to close a society's collection: everything said on it ---- */
.cer-thread { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.cer-note { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: var(--surface); }
.cer-note.cer-dispute { background: var(--danger-bg); border-color: transparent; }
.cer-note.cer-answer { background: var(--info-bg); border-color: transparent; }
.cer-note.cer-withdrawn, .cer-note.cer-disputewithdrawn, .cer-note.cer-applied { background: var(--pending-bg); border-color: transparent; }
.cer-who { font-size: 11.5px; font-weight: 700; color: var(--subtext, var(--muted)); margin-bottom: 3px; }
.cer-text { font-size: 13px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }

/* ---- Settings → Finance: one network's USSD details, in two compact rows ---- */
.ussd-opt { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ussd-row { display: grid; grid-template-columns: minmax(130px, 1fr) auto 96px minmax(130px, 1fr) minmax(130px, 1fr) auto; gap: 8px; align-items: center; }
.ussd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ussd-row > *, .ussd-row2 > * { min-width: 0; width: 100%; }
.ussd-row > .muted { width: auto; }
.ussd-row > button { width: auto; }
@media (max-width: 900px) {
  .ussd-row { grid-template-columns: 1fr auto 1fr; }
  .ussd-row2 { grid-template-columns: 1fr; }
}

/* Who does what: one task per row, the bodies under the Pastoral Council below. */
.task-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.task-row:first-of-type { border-top: 0; }
.task-bodies { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.task-body { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.fc-bar .task-row { border-top: 0; padding: 0; }

/* Reports from members: the words reported, and anything about a child's safety marked out. */
.report-words { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--border); background: rgba(127,127,127,.06); border-radius: 6px; white-space: pre-wrap; font-size: 14px; }
.report-urgent { border-left: 4px solid var(--danger); }

/* Notices from Communio's control center: a subscription reminder, a message to the office. */
.platform-notices { display: flex; flex-direction: column; gap: 8px; padding: 0 24px; }
.platform-notices:not(:empty) { margin-top: 14px; }
.platform-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); }
.platform-notice-subscription { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 10%, var(--card)); }
.platform-notice-body { font-size: 13px; color: var(--subtext); margin-top: 2px; line-height: 1.5; }