/* Signed-in dashboard, part 1: design tokens, base type and the shared controls
   (buttons, inputs, dialogs, toast, segmented controls, toggles). Flat surfaces only:
   no gradients, glows, blurs or decorative shadows. Everything is scoped to
   body.is-dash (main.js sets it while a member is signed in), so the sign-in page and
   the public site keep site.css's look. Loaded after the older app stylesheets. */

body.is-dash {
  /* Apple's dark grouped palette: a black canvas, grouped panels one step up, inset
     cards and inputs one step further; containers differ by fill, not outlines. */
  --d-bg: #000000;            /* page */
  --d-panel: #1c1c1e;         /* panels (grouped background) */
  --d-raised: #2c2c2e;        /* cards, inputs, table header inside a panel */
  --d-hover: #3a3a3c;         /* hover */
  --d-selected: #48484a;      /* pressed / selected */
  --d-border: #38383a;        /* separators and control outlines */
  --d-border-strong: #545458;
  --d-text: #ffffff;
  --d-text-2: #e5e5ea;
  --d-muted: #98989d;         /* secondary labels (7:1 on --d-bg, 6:1 on --d-panel) */
  --d-faint: #8e8e93;         /* icons, separators, placeholders only — not body text */
  --d-emerald: #30d158; --d-emerald-bg: rgba(48, 209, 88, 0.14); --d-emerald-border: rgba(48, 209, 88, 0.32);
  --d-amber: #ff9f0a; --d-amber-bg: rgba(255, 159, 10, 0.14); --d-amber-border: rgba(255, 159, 10, 0.32);
  --d-rose: #ff453a; --d-rose-bg: rgba(255, 69, 58, 0.14); --d-rose-border: rgba(255, 69, 58, 0.32);
  --d-focus: #ffffff;
  --d-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --d-radius: 8px;            /* controls */
  --d-radius-lg: 12px;        /* panels */
  --d-radius-md: 10px;        /* cards inside panels */
  --d-gap: 16px;              /* the one gap between containers */
  --d-rail-w: 232px;
  --d-bar-h: 52px;
  --d-pad: 24px;
  /* The marsh tokens re-pointed, so rules written for the old look read flat zinc and
     sans-serif here too (and only here). */
  --ink: var(--d-bg); --cream: var(--d-text); --cream-2: var(--d-text-2); --cream-3: var(--d-muted);
  --hairline: var(--d-border); --amber: var(--d-text-2); --tree: var(--d-bg);
  --serif: var(--d-sans); --sans: var(--d-sans);
  --radius: var(--d-radius-lg); --gutter: 16px; --measure: 100%;
  color-scheme: dark;
  min-height: 100vh;
  background: var(--d-bg);
  color: var(--d-text);
  font: 400 14px/1.5 var(--d-sans);
  -webkit-font-smoothing: antialiased;
}
html:has(> body.is-dash) { background: #000000; }
.is-dash .app-backdrop { display: none; }
.is-dash a { color: var(--d-text-2); }
.is-dash a:hover { color: var(--d-text); }
.is-dash :focus-visible { outline: 2px solid var(--d-focus); outline-offset: 2px; }
.is-dash [tabindex="-1"]:focus { outline: none; } /* headings focused after each page change */
.is-dash ::selection { background: var(--d-border-strong); color: var(--d-text); }
.is-dash .icon { width: 16px; height: 16px; }
.is-dash .loading, .is-dash .boot { padding: 8px 0; color: var(--d-muted); font-size: 13px; text-align: left; }
.is-dash .stack { gap: var(--d-gap); }

/* The old frosted glass, flattened to a plain panel wherever a page still asks for it. */
.is-dash .glass {
  background: var(--d-panel); border: 1px solid var(--d-border); box-shadow: none; isolation: auto;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.is-dash .glass::before, .is-dash .glass::after { content: none; }

/* Buttons. .pill keeps working: amber → primary, glass → secondary, quiet → ghost,
   danger → rose. New code may use .d-btn with the same variants. */
.is-dash .pill, .is-dash .d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--d-border); border-radius: var(--d-radius); background: var(--d-raised); color: var(--d-text);
  box-shadow: none; font: 500 13px/1 var(--d-sans); letter-spacing: normal; text-decoration: none; white-space: nowrap;
  cursor: pointer; transform: none; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.is-dash .pill::before, .is-dash .pill::after { content: none; }
.is-dash .pill .icon, .is-dash .d-btn .icon { width: 15px; height: 15px; }
.is-dash .pill:hover, .is-dash .d-btn:hover { background: var(--d-hover); border-color: var(--d-border-strong); color: var(--d-text); transform: none; }
.is-dash .pill:active, .is-dash .d-btn:active { background: var(--d-selected); transform: none; }
.is-dash .pill--amber, .is-dash .d-btn--primary { background: #fafafa; border-color: #fafafa; color: #09090b; }
.is-dash .pill--amber:hover, .is-dash .d-btn--primary:hover { background: #e4e4e7; border-color: #e4e4e7; color: #09090b; }
.is-dash .pill--amber:active, .is-dash .d-btn--primary:active { background: #d4d4d8; border-color: #d4d4d8; color: #09090b; }
.is-dash .pill--quiet, .is-dash .d-btn--ghost { background: transparent; border-color: transparent; color: var(--d-text-2); }
.is-dash .pill--quiet:hover, .is-dash .d-btn--ghost:hover { background: var(--d-hover); border-color: transparent; color: var(--d-text); }
.is-dash .pill--quiet:active, .is-dash .d-btn--ghost:active { background: var(--d-selected); }
.is-dash .pill--danger, .is-dash .d-btn--danger { background: var(--d-rose-bg); border-color: var(--d-rose-border); color: var(--d-rose); }
.is-dash .pill--danger:hover, .is-dash .d-btn--danger:hover { background: rgba(244, 63, 94, 0.2); border-color: rgba(244, 63, 94, 0.45); color: #fda4af; }
.is-dash .pill--danger:active, .is-dash .d-btn--danger:active { background: rgba(244, 63, 94, 0.28); }
.is-dash .pill:disabled, .is-dash .d-btn:disabled { opacity: 0.5; cursor: default; }
.is-dash .pill:disabled:hover, .is-dash .d-btn:disabled:hover { background: var(--d-raised); border-color: var(--d-border); }
.is-dash .pill--amber:disabled:hover { background: #fafafa; border-color: #fafafa; }
.is-dash .actions-row { gap: 8px; }
.is-dash .actions-row .pill { flex: 0 0 auto; }

/* Small text-like controls: Back, Refresh, text buttons, Show all. */
.is-dash .back-link, .is-dash .refresh {
  gap: 4px; min-height: 28px; padding: 0 8px 0 4px; border-radius: var(--d-radius);
  color: var(--d-muted); font: 500 13px/1 var(--d-sans);
}
.is-dash .back-link:hover, .is-dash .refresh:hover { background: var(--d-hover); color: var(--d-text); }
.is-dash .back-link:active, .is-dash .refresh:active { background: var(--d-selected); }
.is-dash .refresh { padding-right: 10px; }
.is-dash .text-button { padding: 4px 0; color: var(--d-text-2); font: 500 13px var(--d-sans); text-underline-offset: 3px; }
.is-dash .text-button:hover { color: var(--d-text); text-decoration: underline; }
.is-dash .text-button:disabled { color: var(--d-faint); text-decoration: none; }
.is-dash .text-button--danger { color: var(--d-rose); }
.is-dash .show-more {
  min-height: 32px; border: 1px solid var(--d-border); border-radius: var(--d-radius); background: transparent;
  color: var(--d-text-2); font: 500 13px var(--d-sans); box-shadow: none;
}
.is-dash .show-more:hover { background: var(--d-hover); color: var(--d-text); }
.is-dash .show-more:active { background: var(--d-selected); }

/* Inputs. Background colour only, so .field-select keeps its drawn arrow. */
.is-dash .field { gap: 6px; }
.is-dash .field-label { color: var(--d-muted); font-size: 12px; font-weight: 500; }
.is-dash .field-input {
  min-height: 36px; padding: 0 10px; border: 1px solid var(--d-border); border-radius: var(--d-radius);
  background-color: var(--d-raised); color: var(--d-text); font: 400 14px/1.4 var(--d-sans); box-shadow: none;
  transition: border-color 0.12s ease;
}
.is-dash .field-input::placeholder { color: var(--d-muted); }
.is-dash .field-input:hover { border-color: var(--d-border-strong); }
.is-dash .field-input:focus { border-color: var(--d-border-strong); box-shadow: none; }
.is-dash .field-input:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 2px; }
.is-dash .field-input:disabled, .is-dash .field-input[readonly] { color: var(--d-muted); }
.is-dash .field-area { min-height: 96px; padding: 8px 10px; }
.is-dash .field-select { padding-right: 30px; background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; }
.is-dash .field-select option, .is-dash .filter-select option { background: var(--d-raised); color: var(--d-text); }
.is-dash .field-hint, .is-dash .field-help, .is-dash .field-note, .is-dash .field-status { color: var(--d-muted); font-size: 12px; }
.is-dash .field-error { color: var(--d-rose); font-size: 12px; font-weight: 500; }
.is-dash .form-error {
  padding: 8px 12px; border: 1px solid var(--d-rose-border); border-radius: var(--d-radius);
  background: var(--d-rose-bg); color: var(--d-rose); font-size: 13px;
}

/* Segmented controls (Active / Deleted, Mine / Club) and toggle chips. */
.is-dash .segmented {
  gap: 2px; margin-top: 0; padding: 2px; border: 1px solid var(--d-border); border-radius: var(--d-radius);
  background: var(--d-panel); box-shadow: none;
}
.is-dash .segmented a, .is-dash .segmented button {
  padding: 5px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--d-muted);
  font: 500 13px/1.4 var(--d-sans); text-decoration: none; cursor: pointer;
}
.is-dash .segmented a:hover, .is-dash .segmented button:hover { background: var(--d-hover); color: var(--d-text); }
.is-dash .segmented a[aria-current="page"], .is-dash .segmented button[aria-pressed="true"] { background: var(--d-selected); color: var(--d-text); }
.is-dash .chip-toggle {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--d-border);
  border-radius: var(--d-radius); background: var(--d-raised); color: var(--d-text-2); box-shadow: none;
  font: 500 12px/1 var(--d-sans); text-decoration: none;
}
.is-dash .chip-toggle:hover { background: var(--d-hover); border-color: var(--d-border-strong); color: var(--d-text); }
.is-dash .chip-toggle:active { background: var(--d-selected); }
.is-dash .chip-toggle[aria-pressed="true"], .is-dash .chip-toggle[aria-current="page"] { background: #fafafa; border-color: #fafafa; color: #09090b; }
.is-dash .view-chips { gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.is-dash .view-chips .chip-toggle[aria-current="page"] { background: #fafafa; color: #09090b; }

/* Dialogs and the status toast. */
.is-dash .app-dialog {
  padding: 20px; border: 1px solid var(--d-border-strong); border-radius: var(--d-radius-lg);
  background: var(--d-panel); color: var(--d-text); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.is-dash .app-dialog::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-dash .dialog-title { margin: 0 0 6px; font: 600 16px/1.35 var(--d-sans); letter-spacing: normal; }
.is-dash .dialog-body { margin: 0 0 12px; color: var(--d-muted); font-size: 13px; }
.is-dash .dialog-actions { gap: 8px; justify-content: flex-end; margin-top: 16px; }
.is-dash .dialog-actions .pill { flex: 0 0 auto; }
.is-dash .dialog-actions--stacked .pill { width: 100%; justify-content: flex-start; }
.is-dash .toast {
  bottom: 20px; padding: 8px 14px; border: 1px solid var(--d-border-strong); border-radius: var(--d-radius);
  background: var(--d-raised); color: var(--d-text); box-shadow: none; font-size: 13px; animation: none;
}
@media (min-width: 1024px) {
  .is-dash .toast { left: calc(var(--d-rail-w) + (100% - var(--d-rail-w)) / 2); }
}

/* The club rules gate: one flat sheet in the middle of the page (no frame yet). */
.is-dash .signin { padding: 24px 16px; }
.is-dash .sheet {
  gap: 12px; width: min(480px, 100%); padding: 24px; border: 1px solid var(--d-border); border-radius: var(--d-radius-lg);
  background: var(--d-panel); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.is-dash .sheet-mark { width: 34px; height: 32px; background: var(--d-text); }
.is-dash .sheet-title { margin: 4px 0 0; font: 600 20px/1.3 var(--d-sans); letter-spacing: normal; }
.is-dash .sheet-lede { margin: 0; color: var(--d-muted); font-size: 13px; }
.is-dash .rules-list { gap: 8px; color: var(--d-text-2); font-size: 14px; }
.is-dash .sheet-submit { width: 100%; min-height: 36px; }

@media (prefers-reduced-motion: reduce) {
  .is-dash .pill, .is-dash .d-btn, .is-dash .field-input { transition: none; }
}