/* Younionize — Catppuccin theme (Latte light / Frappe dark).

   Tokens live in three layers:

   1. RAW palettes — the official Catppuccin Latte + Frappe stops,
      verbatim from catppuccin.com. Theme-agnostic; both palettes are
      always defined so semantic tokens can reference either one.
   2. SEMANTIC tokens — what components actually read (--surface-1,
      --accent, --status-ok-text, etc.). Light + dark variants swap
      these to point at the right raw stops.
   3. COMPONENTS — every rule below uses only Layer-2 tokens.

   To re-theme, only Layer 2 changes.
*/

:root {
  /* === LAYER 1 — Catppuccin Latte (light) === */
  --latte-rosewater: #dc8a78;
  --latte-flamingo:  #dd7878;
  --latte-pink:      #ea76cb;
  --latte-mauve:     #8839ef;
  --latte-red:       #d20f39;
  --latte-maroon:    #e64553;
  --latte-peach:     #fe640b;
  --latte-yellow:    #df8e1d;
  --latte-green:     #40a02b;
  --latte-teal:      #179299;
  --latte-sky:       #04a5e5;
  --latte-sapphire:  #209fb5;
  --latte-blue:      #1e66f5;
  --latte-lavender:  #7287fd;
  --latte-text:      #4c4f69;
  --latte-subtext1:  #5c5f77;
  --latte-subtext0:  #6c6f85;
  --latte-overlay2:  #7c7f93;
  --latte-overlay1:  #8c8fa1;
  --latte-overlay0:  #9ca0b0;
  --latte-surface2:  #acb0be;
  --latte-surface1:  #bcc0cc;
  --latte-surface0:  #ccd0da;
  --latte-base:      #eff1f5;
  --latte-mantle:    #e6e9ef;
  --latte-crust:     #dce0e8;

  /* === LAYER 1 — Catppuccin Frappe (dark) === */
  --frappe-rosewater: #f2d5cf;
  --frappe-flamingo:  #eebebe;
  --frappe-pink:      #f4b8e4;
  --frappe-mauve:     #ca9ee6;
  --frappe-red:       #e78284;
  --frappe-maroon:    #ea999c;
  --frappe-peach:     #ef9f76;
  --frappe-yellow:    #e5c890;
  --frappe-green:     #a6d189;
  --frappe-teal:      #81c8be;
  --frappe-sky:       #99d1db;
  --frappe-sapphire:  #85c1dc;
  --frappe-blue:      #8caaee;
  --frappe-lavender:  #babbf1;
  --frappe-text:      #c6d0f5;
  --frappe-subtext1:  #b5bfe2;
  --frappe-subtext0:  #a5adce;
  --frappe-overlay2:  #949cbb;
  --frappe-overlay1:  #838ba7;
  --frappe-overlay0:  #737994;
  --frappe-surface2:  #626880;
  --frappe-surface1:  #51576d;
  --frappe-surface0:  #414559;
  --frappe-base:      #303446;
  --frappe-mantle:    #292c3c;
  --frappe-crust:     #232634;

  /* === LAYER 2 — Light theme (Latte) === */

  /* Surface ladder. In Latte we lift cards above the base by going
     whiter; surface-2 (mantle) sits below as the recessed/hover tint. */
  --surface-0:    var(--latte-base);
  --surface-1:    #ffffff;
  --surface-2:    var(--latte-mantle);
  --surface-3:    #ffffff;
  --surface-4:    #ffffff;
  --surface-tint: rgba(76, 79, 105, 0.02);

  --text-strong: var(--latte-text);
  --text-base:   var(--latte-text);
  --text-muted:  var(--latte-subtext0);
  --text-faint:  var(--latte-overlay1);
  --text-on-accent: #ffffff;

  --border-soft:   rgba(76, 79, 105, 0.10);
  --border-strong: rgba(76, 79, 105, 0.20);
  --hover-soft:    rgba(76, 79, 105, 0.05);
  --hover-strong:  rgba(76, 79, 105, 0.10);

  /* Accent: Peach (warm orange — keeps the terracotta-ish vibe of the
     original theme while staying inside the Catppuccin palette). */
  --accent:        var(--latte-peach);
  --accent-hover:  #d24f00;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(254, 100, 11, 0.09);
  --accent-soft-2: rgba(254, 100, 11, 0.20);
  --accent-glow:   rgba(254, 100, 11, 0.30);

  /* Cool: Sapphire (for in_run + paired). */
  --cool:        var(--latte-sapphire);
  --cool-hover:  #198095;
  --cool-fg:     #ffffff;
  --cool-soft:   rgba(32, 159, 181, 0.10);

  /* Status quad — keeps the semantic colors of Catppuccin. */
  --status-ok-bg:     rgba(64, 160, 43, 0.12);
  --status-ok-border: var(--latte-green);
  --status-ok-text:   #2d7320;
  --status-warn-bg:     rgba(223, 142, 29, 0.14);
  --status-warn-border: var(--latte-yellow);
  --status-warn-text:   #a06811;
  --status-err-bg:     rgba(210, 15, 57, 0.10);
  --status-err-border: var(--latte-red);
  --status-err-text:   #98092a;
  --status-info-bg:     rgba(30, 102, 245, 0.10);
  --status-info-border: var(--latte-blue);
  --status-info-text:   #154abf;

  /* Component-specific. */
  --header-bg:   var(--latte-peach);
  --header-fg:   #ffffff;
  --header-nav-hover:  rgba(255, 255, 255, 0.16);
  --header-nav-active: rgba(255, 255, 255, 0.24);

  /* Toasts always sit opposite the page tone — light page → dark toast. */
  --toast-bg:    var(--frappe-base);
  --toast-fg:    var(--frappe-text);

  --paired-bg:   var(--latte-sapphire);
  --paired-fg:   #ffffff;
  --in-run-bg:   rgba(32, 159, 181, 0.14);
  --in-run-flag: var(--latte-sapphire);

  --illustration-shadow: 0 4px 12px rgba(254, 100, 11, 0.20);

  /* Deterministic per-user avatar palette — spans the Catppuccin
     rainbow so adjacent users in a list stay visually distinct.
     Avatar-1 is mauve so it doesn't collide with the peach accent. */
  --avatar-1: linear-gradient(135deg, var(--latte-mauve),    #6e1cd1);
  --avatar-2: linear-gradient(135deg, var(--latte-yellow),   #b07012);
  --avatar-3: linear-gradient(135deg, var(--latte-green),    #2d7320);
  --avatar-4: linear-gradient(135deg, var(--latte-blue),     #154abf);
  --avatar-5: linear-gradient(135deg, var(--latte-pink),     #c44ba2);
  --avatar-6: linear-gradient(135deg, var(--latte-teal),     #0e6f73);

  /* === LEGACY ALIASES — keep until every consumer is migrated. === */
  --bg:           var(--surface-0);
  --surface:      var(--surface-1);
  --surface-alt:  var(--surface-2);
  --text:         var(--text-base);
  --border:       var(--border-soft);
  --success:        var(--status-ok-bg);
  --success-border: var(--status-ok-border);
  --success-text:   var(--status-ok-text);
  --info-bg:        var(--status-info-bg);
  --info-border:    var(--status-info-border);
  --info-text:      var(--status-info-text);
  --warning-bg:     var(--status-warn-bg);
  --warning-border: var(--status-warn-border);
  --warning-text:   var(--status-warn-text);
  --error-bg:       var(--status-err-bg);
  --error-border:   var(--status-err-border);
  --error-text:     var(--status-err-text);
  --paired-text:    var(--paired-fg);

  /* === Typography === */

  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Modular type scale, 1.250 (minor third).
     Named --fs-* (not --text-*) so they don't collide with the
     --text-base color token used everywhere for foreground. */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   19px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;

  /* === Geometry === */
  --radius:    8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48). */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Three-tier shadow hierarchy. */
  --shadow:        0 1px 2px rgba(40, 30, 22, 0.05), 0 1px 3px rgba(40, 30, 22, 0.04);
  --shadow-strong: 0 4px 10px rgba(40, 30, 22, 0.06), 0 1px 3px rgba(40, 30, 22, 0.05);
  --shadow-pop:    0 12px 32px rgba(40, 30, 22, 0.16), 0 4px 12px rgba(40, 30, 22, 0.08);

  /* Motion. */
  --motion-fast:   120ms;
  --motion-base:   180ms;
  --motion-pop:    220ms;
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1.3);
}

/* === LAYER 2 — Dark theme (Frappe) === */

/* Both blocks below are identical; one fires for explicit
   data-theme="dark", the other for the OS preference when the user
   hasn't picked a theme. */

[data-theme="dark"] {
  --surface-0: var(--frappe-base);
  --surface-1: var(--frappe-surface0);
  --surface-2: var(--frappe-surface1);
  --surface-3: var(--frappe-surface0);
  --surface-4: var(--frappe-surface1);
  --surface-tint: rgba(255, 255, 255, 0.02);

  --text-strong: var(--frappe-text);
  --text-base:   var(--frappe-subtext1);
  --text-muted:  var(--frappe-subtext0);
  --text-faint:  var(--frappe-overlay0);
  --text-on-accent: var(--frappe-base);

  --border-soft:   rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --hover-soft:    rgba(255, 255, 255, 0.05);
  --hover-strong:  rgba(255, 255, 255, 0.10);

  --accent:        var(--frappe-peach);
  --accent-hover:  #f5b793;
  --accent-fg:     var(--frappe-base);
  --accent-soft:   rgba(239, 159, 118, 0.14);
  --accent-soft-2: rgba(239, 159, 118, 0.24);
  --accent-glow:   rgba(239, 159, 118, 0.32);

  --cool:        var(--frappe-sapphire);
  --cool-hover:  var(--frappe-sky);
  --cool-fg:     var(--frappe-base);
  --cool-soft:   rgba(133, 193, 220, 0.14);

  --status-ok-bg:     rgba(166, 209, 137, 0.16);
  --status-ok-border: var(--frappe-green);
  --status-ok-text:   var(--frappe-green);
  --status-warn-bg:     rgba(229, 200, 144, 0.16);
  --status-warn-border: var(--frappe-yellow);
  --status-warn-text:   var(--frappe-yellow);
  --status-err-bg:     rgba(231, 130, 132, 0.16);
  --status-err-border: var(--frappe-red);
  --status-err-text:   var(--frappe-red);
  --status-info-bg:     rgba(140, 170, 238, 0.14);
  --status-info-border: var(--frappe-blue);
  --status-info-text:   var(--frappe-blue);

  --header-bg:   var(--frappe-mantle);
  --header-fg:   var(--frappe-text);
  --header-nav-hover:  rgba(255, 255, 255, 0.06);
  --header-nav-active: rgba(239, 159, 118, 0.22);

  --toast-bg:    var(--latte-base);
  --toast-fg:    var(--latte-text);

  --paired-bg:   var(--frappe-sapphire);
  --paired-fg:   var(--frappe-base);
  --in-run-bg:   rgba(133, 193, 220, 0.18);
  --in-run-flag: var(--frappe-sapphire);

  --illustration-shadow: 0 6px 20px rgba(0, 0, 0, 0.50);

  /* Avatar — Frappe pastels for night. Avatar-1 is mauve so it doesn't
     compete with the peach accent. */
  --avatar-1: linear-gradient(135deg, var(--frappe-mauve),     #a37bbe);
  --avatar-2: linear-gradient(135deg, var(--frappe-yellow),    #b8a065);
  --avatar-3: linear-gradient(135deg, var(--frappe-green),     #7eaa61);
  --avatar-4: linear-gradient(135deg, var(--frappe-blue),      #6685c4);
  --avatar-5: linear-gradient(135deg, var(--frappe-pink),      #cb86b7);
  --avatar-6: linear-gradient(135deg, var(--frappe-teal),      #5ba59b);

  /* Shadows lean on top-edge highlights for elevation on dark. */
  --shadow:        0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.40);
  --shadow-pop:    0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: var(--frappe-base);
    --surface-1: var(--frappe-surface0);
    --surface-2: var(--frappe-surface1);
    --surface-3: var(--frappe-surface0);
    --surface-4: var(--frappe-surface1);
    --surface-tint: rgba(255, 255, 255, 0.02);

    --text-strong: var(--frappe-text);
    --text-base:   var(--frappe-subtext1);
    --text-muted:  var(--frappe-subtext0);
    --text-faint:  var(--frappe-overlay0);
    --text-on-accent: var(--frappe-base);

    --border-soft:   rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --hover-soft:    rgba(255, 255, 255, 0.05);
    --hover-strong:  rgba(255, 255, 255, 0.10);

    --accent:        var(--frappe-peach);
    --accent-hover:  #f5b793;
    --accent-fg:     var(--frappe-base);
    --accent-soft:   rgba(239, 159, 118, 0.14);
    --accent-soft-2: rgba(239, 159, 118, 0.24);
    --accent-glow:   rgba(239, 159, 118, 0.32);

    --cool:        var(--frappe-sapphire);
    --cool-hover:  var(--frappe-sky);
    --cool-fg:     var(--frappe-base);
    --cool-soft:   rgba(133, 193, 220, 0.14);

    --status-ok-bg:     rgba(166, 209, 137, 0.16);
    --status-ok-border: var(--frappe-green);
    --status-ok-text:   var(--frappe-green);
    --status-warn-bg:     rgba(229, 200, 144, 0.16);
    --status-warn-border: var(--frappe-yellow);
    --status-warn-text:   var(--frappe-yellow);
    --status-err-bg:     rgba(231, 130, 132, 0.16);
    --status-err-border: var(--frappe-red);
    --status-err-text:   var(--frappe-red);
    --status-info-bg:     rgba(140, 170, 238, 0.14);
    --status-info-border: var(--frappe-blue);
    --status-info-text:   var(--frappe-blue);

    --header-bg:   var(--frappe-mantle);
    --header-fg:   var(--frappe-text);
    --header-nav-hover:  rgba(255, 255, 255, 0.06);
    --header-nav-active: rgba(239, 159, 118, 0.22);

    --toast-bg:    var(--latte-base);
    --toast-fg:    var(--latte-text);

    --paired-bg:   var(--frappe-sapphire);
    --paired-fg:   var(--frappe-base);
    --in-run-bg:   rgba(133, 193, 220, 0.18);
    --in-run-flag: var(--frappe-sapphire);

    --illustration-shadow: 0 6px 20px rgba(0, 0, 0, 0.50);

    --avatar-1: linear-gradient(135deg, var(--frappe-mauve),     #a37bbe);
    --avatar-2: linear-gradient(135deg, var(--frappe-yellow),    #b8a065);
    --avatar-3: linear-gradient(135deg, var(--frappe-green),     #7eaa61);
    --avatar-4: linear-gradient(135deg, var(--frappe-blue),      #6685c4);
    --avatar-5: linear-gradient(135deg, var(--frappe-pink),      #cb86b7);
    --avatar-6: linear-gradient(135deg, var(--frappe-teal),      #5ba59b);

    --shadow:        0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-strong: 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.40);
    --shadow-pop:    0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-0);
  color: var(--text-base);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  font-feature-settings: 'ss01' on, 'cv11' on;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Smooth the theme crossfade for surfaces, text, and borders without
   animating every transient hover. Scoped here so component transitions
   stay snappy. */
body, .site-header, .dash-card, .dash-hero, .pair-card, .data-table,
.month-grid, .mini-month, .calendar-scroll, .user-card-pop,
.confirm-modal, .toast, .inbox-item, .first-run-card, .empty-state,
.run-console, .run-sidebar, .member-card, .member-profile,
.user-menu-panel {
  transition: background-color var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
}

/* ----- Header ----- */

.site-header {
  background: var(--header-bg);
  color: var(--header-fg);
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
  border-bottom: 1px solid var(--border-soft);
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  margin-right: 0.6rem;
  color: var(--header-fg);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 0.2rem 0.4rem;
}
.site-header .brand:hover { background: transparent; }
.brand-mark { display: block; }
.brand-text { line-height: 1; }

.site-header a {
  color: var(--header-fg);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  transition: background var(--motion-fast) var(--ease-out);
}

.site-header a:hover { background: var(--header-nav-hover); }
.site-header a.active,
.site-header .primary-nav a[aria-current="page"] {
  background: var(--header-nav-active);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 currentColor;
}

.primary-nav {
  display: contents;
}

.site-header .spacer { flex: 1; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0.5rem 1rem;
  z-index: 1001;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus {
  left: 0;
}

.site-header .user-info {
  font-size: 0.9rem;
  opacity: 0.92;
}

.site-header form { display: inline; margin: 0; }

.site-header button {
  background: var(--header-nav-hover);
  color: var(--header-fg);
  border: 1px solid var(--header-nav-active);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}

.site-header button:hover { background: var(--header-nav-active); }

/* ----- User dropdown menu ----- */

.user-menu { position: relative; }

.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.user-menu-toggle .chevron {
  font-size: 0.65em;
  transition: transform 0.15s;
}

.user-menu[aria-expanded="true"] .user-menu-toggle .chevron {
  transform: rotate(180deg);
}

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface-3);
  color: var(--text-base);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  min-width: 200px;
  padding: 0.3rem 0;
  display: none;
  z-index: 100;
}

.user-menu[aria-expanded="true"] .user-menu-panel { display: block; }

/* The dropdown sits inside .site-header so it loses the cascade to
   ".site-header a" / button rules at equal specificity. Use !important
   here to force the panel's own foreground color regardless of which
   header rules the browser sees first. Inner spans inherit. */
.site-header .user-menu-panel a,
.site-header .user-menu-panel button,
.site-header .user-menu-panel a *,
.site-header .user-menu-panel button * {
  color: var(--text-base) !important;
}
.site-header .user-menu-panel a,
.site-header .user-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  text-decoration: none;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}

.site-header .user-menu-panel a:hover,
.site-header .user-menu-panel button:hover {
  background: var(--hover-soft) !important;
}
.site-header .user-menu-panel a:hover,
.site-header .user-menu-panel button:hover,
.site-header .user-menu-panel a:hover *,
.site-header .user-menu-panel button:hover * {
  color: var(--accent) !important;
}

.theme-toggle {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  font-weight: 400 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  color: var(--text-base) !important;
}
.theme-toggle .theme-toggle-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.theme-toggle:hover { background: var(--hover-soft) !important; color: var(--accent) !important; }
.theme-toggle:hover .theme-toggle-icon { color: var(--accent); }
.theme-toggle-system { font-size: 0.8rem !important; color: var(--text-muted) !important; }
.theme-toggle-system .theme-toggle-icon { color: var(--text-muted); }

.user-menu-panel .divider {
  height: 1px;
  background: var(--border-soft);
  margin: 0.3rem 0;
}

.user-menu-panel form { margin: 0; }

/* ----- Main + typography ----- */

main {
  max-width: 960px;
  padding: 1.8rem 1.5rem 3rem;
  margin: 0 auto;
}

h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  margin: 0 0 var(--s4);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-strong);
  font-feature-settings: 'ss01' on, 'opsz' 30;
}
h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  margin: var(--s5) 0 var(--s3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--text-strong);
}
h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  margin: var(--s4) 0 var(--s2);
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--text-strong);
}

p { margin: 0.6rem 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); }

.muted, .help-text, .helptext, small {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ----- Buttons + forms ----- */

button, input[type="submit"], .button {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--fs-base);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

button:hover, input[type="submit"]:hover, .button:hover {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}

button:active, input[type="submit"]:active, .button:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

button:disabled {
  background: var(--border-strong);
  cursor: not-allowed;
  transform: none;
}

button.is-saving {
  position: relative;
  background: var(--accent-hover);
  cursor: progress;
}
button.is-saving::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 0.5rem;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

button.secondary, .button.secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
button.secondary:hover, .button.secondary:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: var(--accent);
}

form { margin: 1rem 0; }
form p { margin: 0.75rem 0; }

label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--text);
}

.form-field {
  margin: 0.85rem 0;
  max-width: 420px;
}
.form-field-check label { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; }
.form-field-check input[type="checkbox"] { width: auto; max-width: none; }

.form-field .required {
  color: var(--accent);
  margin-left: 0.15rem;
  font-weight: 700;
}

.form-field .field-help {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.3rem 0 0;
  line-height: 1.4;
}

.form-field.has-error label { color: var(--error-text); }
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-color: var(--error-border);
}

.field-errors {
  list-style: none;
  padding: 0.35rem 0.6rem;
  margin: 0.3rem 0 0.4rem;
  background: var(--error-bg);
  border-left: 3px solid var(--error-border);
  border-radius: var(--radius);
  color: var(--error-text);
  font-size: 0.85rem;
}

.form-errors {
  padding: 0.6rem 0.9rem;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  border-radius: var(--radius);
  margin: 0.5rem 0 1rem;
  max-width: 420px;
}
.form-errors p { margin: 0; }

.form-actions {
  margin-top: 1.1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 420px;
}

/* Empty state */

.empty-state {
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  margin: 1.25rem 0;
  color: var(--text-base);
}
.empty-icon {
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.empty-title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.empty-body {
  color: var(--text-muted);
  margin: 0.3rem auto 1rem;
  max-width: 48ch;
}
.empty-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}

/* ===== Page head (h1 + primary action) ===== */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.page-head h1 { margin: 0; }

/* ===== Data tables ===== */

.card-list { margin: 0.5rem 0 1rem; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.data-table th,
.data-table td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.data-table th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--hover-soft); }
.data-table .actions-col { width: 1%; white-space: nowrap; }
.data-table .row-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Card-list mode below 720px: each row becomes a card with stacked
   label/value pairs. Headers hide; the data-label attribute provides
   the field name inline. */
@media (max-width: 720px) {
  .card-list .data-table,
  .card-list .data-table thead,
  .card-list .data-table tbody,
  .card-list .data-table tr,
  .card-list .data-table td {
    display: block;
    width: 100%;
  }
  .card-list .data-table thead { display: none; }
  .card-list .data-table {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .card-list .data-table tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.2rem;
  }
  .card-list .data-table td {
    border: none;
    padding: 0.35rem 0.85rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
  }
  .card-list .data-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    flex-shrink: 0;
  }
  .card-list .data-table td.row-actions {
    justify-content: flex-end;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
    margin-top: 0.2rem;
  }
  .card-list .data-table td.row-actions::before { content: none; }
  .card-list .data-table tr:hover td { background: transparent; }
}

/* ===== Pills (compact action buttons) ===== */

.pill {
  display: inline-block;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pill:hover {
  background: var(--accent);
  color: #fff;
}
.pill-muted {
  background: var(--bg);
  color: var(--text-muted);
}
.pill-muted:hover {
  background: var(--border);
  color: var(--text);
}
.pill-danger {
  background: var(--error-bg);
  color: var(--error-text);
}
.pill-danger:hover {
  background: var(--error-border);
  color: #fff;
}

/* ===== Status badges ===== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.16rem 0.65rem 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}
.status-badge.status-draft     { background: var(--warning-bg); color: #8a5300; border-color: rgba(214, 138, 0, 0.45); }
.status-badge.status-published { background: #e8f5e4; color: #2d6b1c; border-color: rgba(106, 164, 90, 0.5); }
.status-badge.status-proposed  { background: var(--info-bg);    color: #3047a2; border-color: rgba(102, 128, 201, 0.5); }
.status-badge.status-confirmed { background: #e8f5e4; color: #2d6b1c; border-color: rgba(106, 164, 90, 0.5); }
.status-badge.status-cancelled { background: var(--error-bg); color: var(--error-text); border-color: rgba(194, 85, 61, 0.5); }

/* ===== Auth (login / signup) card ===== */

.auth-card {
  max-width: 440px;
  margin: 1rem auto 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow);
}
.auth-card h1 { margin-top: 0; }
.auth-card-foot {
  border-top: 1px solid var(--border);
  padding-top: 0.8rem;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.auth-card-foot a { color: var(--accent); }

/* ===== Profile photo wrap ===== */

.profile-photo-wrap {
  display: inline-block;
  margin: 0.4rem 0 1rem;
}

/* ===== Misc small helpers ===== */

.form-foot-note { margin-top: 1rem; font-size: 0.82rem; }
.back-link { margin-top: 1.5rem; font-size: 0.92rem; }
.back-link a { color: var(--text-muted); }
.back-link a:hover { color: var(--accent); }

/* ===== Run console ===== */

.run-console {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 0.5rem 0 1.2rem;
  box-shadow: var(--shadow);
}

.run-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem 1.5rem;
  margin-bottom: 0.9rem;
}

.run-meta-item .run-meta-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.run-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}
.run-actions form { display: inline; margin: 0; }
.run-actions .danger-button { color: var(--error-text); border-color: var(--error-border); background: transparent; }
.run-actions .danger-button:hover { background: var(--error-bg); color: var(--error-text); }

/* Forms used as compact inline action buttons inside row-actions cells.
   Strip the default form margin so they sit flush next to other pills. */
.inline-form { margin: 0; display: inline; }
.inline-form button { font: inherit; }

/* Bulk action bar above a selectable table. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.4rem 0 0.55rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.bulk-bar button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sortable column headers */
.sortable-th { cursor: pointer; user-select: none; position: relative; }
.sortable-th::after {
  content: '↕';
  margin-left: 0.35em;
  color: var(--border-strong);
  font-size: 0.8em;
}
.sortable-th.sorted-asc::after { content: '↑'; color: var(--accent); }
.sortable-th.sorted-desc::after { content: '↓'; color: var(--accent); }

.run-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 800px) {
  .run-body { grid-template-columns: 1fr; }
}

.pair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

.pair-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.95rem 1.1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: box-shadow var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
}
.pair-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-strong);
  transform: translateY(-1px);
}

.pair-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.pair-card-when {
  font-weight: 700;
  line-height: 1.25;
}

.pair-card-clock {
  display: block;
  font-weight: 500;
  color: var(--accent);
  font-size: 0.88rem;
  margin-top: 0.1rem;
}

.pair-card-members { font-size: 0.95rem; }
.pair-card-loc { font-size: 0.88rem; }

.pair-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.run-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  box-shadow: var(--shadow);
}

.unpaired-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}
.unpaired-list li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.unpaired-list li:last-child { border-bottom: none; }

/* ===== Confirm modal ===== */

.confirm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
  backdrop-filter: blur(2px);
}
.confirm-modal-backdrop.open { display: flex; animation: fade-in 0.14s ease-out; }

.confirm-modal {
  background: var(--surface-4);
  color: var(--text-base);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 1.4rem 1.5rem;
  max-width: 420px;
  width: 100%;
  animation: pop-in 0.16s ease-out;
}

.confirm-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  color: var(--text-strong);
}

.confirm-body {
  margin: 0 0 1.1rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.confirm-yes.danger {
  background: var(--status-err-border);
  color: #fff;
}
.confirm-yes.danger:hover { background: var(--status-err-text); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-modal-backdrop.open,
  .confirm-modal { animation: none; }
}

/* ===== Toasts ===== */

.toast-stack {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--toast-bg);
  color: var(--toast-fg);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
  animation: toast-in 0.18s ease-out;
  max-width: 320px;
  font-weight: 500;
}

.toast-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
}

.toast-undo {
  background: transparent;
  color: var(--toast-fg);
  border: 1px solid currentColor;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.8;
  box-shadow: none;
}
.toast-undo:hover {
  background: var(--toast-fg);
  color: var(--toast-bg);
  opacity: 1;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast-leaving { transition: none; }
}

input[type="text"], input[type="email"], input[type="password"],
input[type="datetime-local"], input[type="number"], input[type="url"],
input[type="date"], input[type="time"], input[type="search"],
input[type="file"], textarea, select {
  width: 100%;
  max-width: 360px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--surface-1);
  color: var(--text-base);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* Strong, color-independent focus ring for every interactive element so
   keyboard users can always see where they are. */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible,
a:focus-visible {
  outline-offset: 2px;
}

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

@media print {
  :root { --bg: #fff; --surface: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .messages, .toast-stack, .form-actions, .row-actions,
  .filter-row, .bulk-bar, .cal-toolbar, .cal-modes, .cal-help, .kbd-hint,
  .dash-hero-actions, .run-actions, .page-head a.button, .inbox-bell,
  .user-menu, .skip-link, .first-run-card, button {
    display: none !important;
  }
  a { color: #000; text-decoration: none; }
  h1, h2, h3 { color: #000; page-break-after: avoid; }
  .data-table, .pair-card, .dash-card, .run-console, .member-profile {
    box-shadow: none !important;
    border: 1px solid #888 !important;
    page-break-inside: avoid;
  }
  .pair-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .status-badge { border: 1px solid #444; }
  main { max-width: none; padding: 0; }
}

/* ===== Icon glyphs ===== */

.ui-icon {
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
}
.ui-icon-sm { width: 14px; height: 14px; }
.ui-icon-md { width: 18px; height: 18px; }
.ui-icon-lg { width: 24px; height: 24px; }
.ui-icon-xl { width: 36px; height: 36px; }

.empty-icon .ui-icon {
  color: var(--accent);
  width: 44px;
  height: 44px;
  padding: 8px;
  background: var(--accent-soft);
  border-radius: 50%;
  vertical-align: middle;
}

.empty-illustration { margin-bottom: 0.4rem; }
.empty-illustration .ui-illustration {
  filter: drop-shadow(var(--illustration-shadow));
}

textarea { min-height: 4rem; resize: vertical; }
select[multiple] { min-height: 8rem; }

.errorlist {
  list-style: none;
  padding: 0.4rem 0.7rem;
  margin: 0.3rem 0;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius);
  color: var(--error-text);
  font-size: 0.9rem;
}

/* ----- Tables ----- */

table {
  border-collapse: collapse;
  background: var(--surface-1);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  width: 100%;
  margin: 0.75rem 0;
}

th, td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--hover-soft); }

/* ----- Messages ----- */

.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

.messages li {
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 0.4rem;
  background: var(--status-info-bg);
  color: var(--status-info-text);
  border-left: 4px solid var(--status-info-border);
}

.messages li.success { background: var(--status-ok-bg);   color: var(--status-ok-text);   border-left-color: var(--status-ok-border); }
.messages li.warning { background: var(--status-warn-bg); color: var(--status-warn-text); border-left-color: var(--status-warn-border); }
.messages li.error   { background: var(--status-err-bg);  color: var(--status-err-text);  border-left-color: var(--status-err-border); }

/* ----- Profile photo ----- */

.profile-photo {
  max-width: 160px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
  margin: 0.5rem 0 1rem;
}

/* ----- Calendar ----- */

.cal-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1rem 0;
}

.cal-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cal-toolbar-row.cal-nav { justify-content: center; }
.cal-toolbar-row.cal-modes { justify-content: flex-start; }

.cal-range {
  font-weight: 700;
  font-size: 1rem;
  min-width: 14rem;
  text-align: center;
}

.cal-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 1.1rem;
  transition: border-color 0.12s, color 0.12s;
}
.cal-nav-arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cal-modes button.mode-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.mode-banner {
  padding: .65rem 1rem;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius);
  margin: 0.4rem 0 0.6rem;
  font-size: 0.92rem;
}

.cal-help {
  margin-top: 0.4rem;
  font-size: 0.88rem;
}
.kbd-hint { display: inline-block; margin-left: 0.7rem; color: var(--text-muted); }
kbd {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 0.35em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  margin: 0 1px;
  color: var(--text);
}

.first-run-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface-1) 100%);
  border: 1px solid var(--accent-soft-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin: 0.7rem 0 1rem;
  color: var(--text-base);
}
.first-run-card-icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.first-run-card-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}
.first-run-card-body { margin: 0; color: var(--text); line-height: 1.5; }

/* View-switcher segmented group */

.view-switcher {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.view-switcher .view-link {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
}
.view-switcher .view-link:last-child { border-right: none; }
.view-switcher .view-link.active {
  background: var(--accent);
  color: #fff;
}

.view-link {
  padding: 0.4rem 0.85rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-block;
}

.view-link.today-link {
  margin-left: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.view-link.today-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Legend chips */

.cal-legend {
  display: inline-flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
}
.legend-swatch.legend-free { background: var(--success); border-color: var(--success-border); }
.legend-swatch.legend-pair { background: var(--paired-bg); border-color: var(--paired-bg); }
.legend-flag {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
}
.legend-flag::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9px 9px 0;
  border-color: transparent var(--info-border) transparent transparent;
}

/* ----- Month view ----- */

.month-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  table-layout: fixed;
}

.month-grid th {
  background: var(--surface-2);
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}

.month-cell {
  vertical-align: top;
  padding: 0;
  height: 96px;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  background: var(--surface-1);
}

.month-cell:last-child { border-right: none; }

.month-cell.dim { background: var(--surface-2); }
.month-cell.dim .day-number { color: var(--text-faint); }

.month-cell.is-today {
  background: var(--status-warn-bg);
  box-shadow: inset 0 0 0 2px var(--status-warn-border);
}

.month-cell.in-run { position: relative; }
.month-cell.in-run::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 14px 0;
  border-color: transparent var(--in-run-flag) transparent transparent;
  pointer-events: none;
}

.month-cell a {
  display: block;
  padding: 0.4rem 0.6rem;
  text-decoration: none;
  color: var(--text-base);
  height: 100%;
  box-sizing: border-box;
}

.month-cell a:hover { background: var(--hover-soft); }

.month-cell .day-number {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.month-cell .day-hours {
  font-size: 0.75rem;
  color: var(--status-ok-border);
}

.month-cell .day-pair {
  font-size: 0.75rem;
  color: var(--paired-bg);
  font-weight: 500;
  margin-top: 0.15rem;
}

/* ----- Year view ----- */

.year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}

@media (max-width: 800px) {
  .year-grid { grid-template-columns: repeat(2, 1fr); }
}

.mini-month {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 0.6rem;
  box-shadow: var(--shadow);
}

.mini-month h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  text-align: center;
}

.mini-month h3 a {
  color: var(--text-base);
  text-decoration: none;
}

.mini-month h3 a:hover { color: var(--accent); }

.mini-month table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  background: transparent;
  box-shadow: none;
  margin: 0;
}

.mini-month th, .mini-month td {
  padding: 0;
  text-align: center;
  border: none;
  font-size: 0.7rem;
}

.mini-month th {
  color: var(--text-muted);
  font-weight: 500;
  padding-bottom: 2px;
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
}

.mini-cell { padding: 0; }

.mini-cell a {
  display: block;
  padding: 3px 0;
  color: var(--text-base);
  text-decoration: none;
  border-radius: 3px;
}

.mini-cell.dim a { color: var(--text-faint); }
.mini-cell.is-today a { background: var(--status-warn-bg); font-weight: 700; color: var(--status-warn-text); }
.mini-cell.in-run a { background: var(--in-run-bg); }
.mini-cell.has-slot a { background: var(--status-ok-bg); color: var(--status-ok-text); }
.mini-cell.has-pair a { background: var(--paired-bg); color: var(--paired-fg); }

.calendar-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-strong);
}

.calendar-grid {
  display: flex;
  align-items: flex-start;
  user-select: none;
  touch-action: none;
  background: var(--surface-1);
  min-width: 100%;
}

.calendar-grid .hour-rail {
  width: 64px;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.calendar-grid .hour-label {
  position: absolute;
  left: 0;
  right: 0;
  padding-right: 8px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  transform: translateY(-50%);
}

.calendar-grid .day-col {
  flex: 1 0 110px;
  min-width: 110px;
  position: relative;
  border-right: 1px solid var(--border-soft);
  background: var(--surface-1);
}

.calendar-grid .day-col:last-child { border-right: none; }
.calendar-grid .day-col.is-today {
  background: linear-gradient(to bottom, var(--status-warn-bg) 0%, var(--surface-1) 30%);
}

.calendar-grid .day-header {
  text-align: center;
  font-size: 12px;
  padding: 0.3rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
  height: 24px;
  box-sizing: border-box;
  font-weight: 600;
  color: var(--text-muted);
}
.calendar-grid .day-header-wd {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.calendar-grid .day-header-md {
  color: var(--text-base);
  margin-left: 0.25rem;
}
.calendar-grid .day-col.is-today .day-header {
  color: var(--accent);
  background: var(--accent-soft);
  border-bottom: 2px solid var(--accent);
}
.calendar-grid .day-col.is-today .day-header-md { color: var(--accent); }

@media (max-width: 720px) {
  .calendar-grid .day-col { min-width: 90px; }
  .calendar-grid .hour-rail { width: 48px; }
  .calendar-grid .hour-label { font-size: 10px; padding-right: 4px; }
}

.calendar-grid .cell {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  background: transparent;
  transition: background var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.calendar-grid .cell:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Order matters: each rule below overrides the previous when both classes
   are present. Final priority: paired > selected > empty. The "in-run"
   marker is a corner triangle drawn on top, so it never conflicts with
   the fill colors below. */
.calendar-grid .cell.selected {
  background: var(--status-ok-bg);
}
.calendar-grid .cell.paired {
  background: var(--paired-bg);
  color: var(--paired-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Pill-style rounding for runs of the same state. Connectivity classes
   (.conn-{state}-{side}) are written by JS in calendar.html — they
   reflect whether the cell's top/bottom/left/right neighbor (across
   day columns too) is in the same state. A cell with no connected
   neighbors stays a fully rounded standalone pill. */
.calendar-grid .cell.selected,
.calendar-grid .cell.paired,
.calendar-grid .cell.schedule-pick {
  border-radius: 6px;
}

/* Flatten corners on connected sides + hide the row separator so the
   pill reads as one shape. The right neighbor lives in another day
   column, so we extend the cell 1px past its column to cover the
   day-col's right border (the visible vertical separator). */
.calendar-grid .cell.conn-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: transparent;
}
.calendar-grid .cell.conn-bottom {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.calendar-grid .cell.conn-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.calendar-grid .cell.conn-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  right: -1px;
}


/* Corner flag in the top-right when this cell sits inside a pairing run.
   Visible to all users so members know when a pairing window is open.
   Uses ::before so it doesn't collide with the ::after used by the
   rounded-concave-corner fill on empty cells. */
.calendar-grid .cell.in-run::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent var(--in-run-flag) transparent transparent;
  pointer-events: none;
  z-index: 2;
}

/* Schedule-mode picks: the cells the supervisor is queuing for a new run.
   Distinct from availability (green) and pairings (blue) so the mode is
   obvious at a glance. */
.calendar-grid .cell.schedule-pick {
  background: var(--status-info-bg);
}

.calendar-grid .cell.pending {
  outline: 2px dashed var(--status-warn-border);
  outline-offset: -2px;
}

.drag-box {
  position: fixed;
  pointer-events: none;
  border: 2px dashed var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  z-index: 9999;
}

.pending-bar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  margin-top: 0.75rem;
}

.pending-bar.visible { display: flex; }
.pending-bar .count { font-weight: 600; }
.pending-bar .status-text {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ----- User chip + hover card ----- */

.user-chip {
  display: inline-block;
  border-bottom: 1px dotted var(--border-strong);
  cursor: pointer;
  padding: 0 1px;
  border-radius: 2px;
  transition: border-color 0.12s, background 0.12s;
}

.user-chip:hover,
.user-chip:focus {
  border-bottom-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.user-chip-empty {
  color: var(--text-muted);
  border-bottom: none;
  cursor: default;
}

.calendar-grid .cell.paired .user-chip,
tr td .user-chip {
  /* Inherit the surrounding text color so chips look right inside
     deep-blue paired cells, table rows, and elsewhere. */
  color: inherit;
}

.user-card-pop {
  position: absolute;
  z-index: 1000;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  width: 280px;
  padding: 0.85rem 0.9rem;
  font-size: 0.9rem;
  color: var(--text-base);
  pointer-events: none;
  user-select: none;
}

.user-card-pop.pinned {
  /* Pinned mode: user clicked to keep it open. Let them select text and
     click links inside, and bump the border so the pin is visible. */
  pointer-events: auto;
  user-select: text;
  border-color: var(--accent);
  box-shadow: var(--shadow-pop), 0 0 0 1px var(--accent-glow);
}

.user-card {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.user-card-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--accent-soft);
}

.user-card-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.4rem;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.08);
}
/* A small deterministic palette so avatars without photos don't all look
   the same. The Django template picks a class via |slice:":1"|lower. */
.user-card-photo-empty.avatar-a,
.member-avatar.avatar-a,
.member-profile-photo-empty.avatar-a { background: var(--avatar-1); }
.user-card-photo-empty.avatar-b,
.member-avatar.avatar-b,
.member-profile-photo-empty.avatar-b { background: var(--avatar-2); }
.user-card-photo-empty.avatar-c,
.member-avatar.avatar-c,
.member-profile-photo-empty.avatar-c { background: var(--avatar-3); }
.user-card-photo-empty.avatar-d,
.member-avatar.avatar-d,
.member-profile-photo-empty.avatar-d { background: var(--avatar-4); }
.user-card-photo-empty.avatar-e,
.member-avatar.avatar-e,
.member-profile-photo-empty.avatar-e { background: var(--avatar-5); }
.user-card-photo-empty.avatar-f,
.member-avatar.avatar-f,
.member-profile-photo-empty.avatar-f { background: var(--avatar-6); }

.user-card-body { min-width: 0; flex: 1; }

.user-card-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.1rem;
  word-wrap: break-word;
}

.user-card-dept {
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.user-card-email {
  font-size: 0.85rem;
  word-wrap: break-word;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.user-card-email a { color: var(--text-muted); flex: 1; min-width: 0; word-break: break-all; }

.user-card-copy {
  flex-shrink: 0;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.user-card-copy:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.user-card-copy.copied {
  background: var(--success);
  color: #2a2a2a;
  border-color: var(--success-border);
}

.user-card-bio {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  margin-top: 0.3rem;
  max-height: 7em;
  overflow: hidden;
}

.user-card-link {
  margin: 0.6rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.user-card-link a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.user-card-link a:hover { text-decoration: underline; }

/* ===== Members directory ===== */

.filter-row { margin: 0.5rem 0 1rem; }
.filter-row .js-filter { max-width: 360px; }

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.7rem;
}

.member-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
  box-shadow: var(--shadow);
}
.member-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-strong);
  transform: translateY(-1px);
  color: var(--text);
}

.member-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.7rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.member-name { font-weight: 700; font-size: 0.98rem; }
.member-dept { font-size: 0.82rem; color: var(--accent); }

/* ===== Member profile page ===== */

.member-profile {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
@media (max-width: 640px) {
  .member-profile { grid-template-columns: 1fr; text-align: center; }
}
.member-profile-photo img,
.member-profile-photo-empty {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 4rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}
.member-profile-body h1 { margin-top: 0; }
.member-profile-dept { color: var(--accent); font-weight: 600; margin: 0.2rem 0; }
.member-profile-email { font-size: 0.95rem; color: var(--text-muted); }
.member-profile-email a { color: var(--text-muted); }
.member-profile-bio { line-height: 1.55; }

/* ----- Calendar cell hover cards (pair + run slot) ----- */

.cell-card {
  font-size: 0.85rem;
  color: var(--text);
}

.cell-card-title {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.cell-card-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
  line-height: 1.35;
}

.cell-card-label {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Cells with a card available are clickable. Cursor: pointer hints
   that clicking does something even though the cell isn't a link. */
.calendar-grid .cell.hover-card { cursor: pointer; }

/* When the supervisor has lifted a paired cell, all cells become drop
   targets and the cursor reflects that. */
body.moving-pair .calendar-grid .cell { cursor: crosshair; }
body.moving-pair .calendar-grid .cell:hover { box-shadow: inset 0 0 0 2px var(--accent); }

/* ===== Dashboard ===== */

.dash-greeting { margin-bottom: 1.5rem; }
.dash-greeting h1 { margin: 0 0 0.15rem; font-size: 1.9rem; }
.dash-greeting .muted { margin: 0; font-size: 0.95rem; }

.dash-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.55rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-strong);
}
.dash-hero::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at center, var(--accent-soft-2) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 50%;
}
.dash-hero > * { position: relative; }

.dash-hero-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.dash-hero-time {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.dash-hero-clock {
  margin-left: 0.5rem;
  font-weight: 500;
  color: var(--accent);
}

.dash-hero-with, .dash-hero-where {
  font-size: 0.95rem;
  margin: 0.25rem 0;
  color: var(--text);
}

.dash-hero-where-label {
  color: var(--text-muted);
  margin-right: 0.4rem;
}

.dash-hero-actions {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dash-empty {
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--text-base);
}

.dash-empty-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.dash-empty p { margin: 0.4rem auto 1rem; max-width: 44ch; }

.dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
  .dash-row { grid-template-columns: 1fr; }
}

.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow);
  transition: box-shadow var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
}
.dash-card:hover {
  box-shadow: var(--shadow-strong);
  border-color: var(--border-strong);
}

.dash-card-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.dash-card-stat {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.dash-card-stat-sub {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

.dash-card-range {
  margin: 0.4rem 0 0.8rem;
  font-size: 0.85rem;
}

.dash-actions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dash-actions li {
  border-top: 1px solid var(--border);
  padding: 0.45rem 0;
}
.dash-actions li:first-child { border-top: none; padding-top: 0; }
.dash-actions a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  display: block;
}
.dash-actions a::after {
  content: ' →';
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.12s;
}
.dash-actions a:hover { color: var(--accent); }
.dash-actions a:hover::after { opacity: 1; }

.dash-section { margin-top: 1.5rem; }

.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.dash-section-head h2 { margin: 0; font-size: 1.15rem; }

.dash-run-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}

.dash-run-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.95rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  display: block;
  transition: border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out);
}
.dash-run-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-strong);
  transform: translateY(-1px);
  color: var(--text);
}
.dash-run-card-head {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.dash-run-card-when {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.dash-run-card-stats {
  font-size: 0.85rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  color: var(--text-muted);
}
.dash-run-card-stats strong { color: var(--text); }

.dash-empty-soft {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.dash-empty-soft p { margin: 0 0 0.6rem; }

.dash-support {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: center;
  justify-content: space-between;
}
.dash-support-copy { flex: 1 1 18rem; min-width: 0; }
.dash-support-title { font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; color: var(--text); }
.dash-support-copy p { margin: 0; line-height: 1.45; font-size: 0.92rem; }
.dash-support-button {
  display: inline-block;
  border-radius: var(--radius);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dash-support-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.dash-support-button img { display: block; height: 44px; width: auto; border-radius: var(--radius); }

/* Onboarding tour pop */
.tour-pop {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-pop);
  width: 320px;
  z-index: 1300;
  animation: pop-in 0.18s ease-out;
}
.tour-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 0.35rem; color: var(--accent); }
.tour-body { margin: 0 0 0.85rem; line-height: 1.45; }
.tour-actions { display: flex; gap: 0.5rem; align-items: center; }
.tour-step { flex: 1; font-size: 0.8rem; }

/* Activity log */
.activity-list { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.activity-item { display: flex; gap: 0.85rem; padding: 0.55rem 1rem; border-top: 1px solid var(--border); align-items: baseline; font-size: 0.92rem; }
.activity-item:first-child { border-top: none; }
.activity-when { color: var(--text-muted); font-size: 0.78rem; min-width: 9.5rem; }
.activity-summary { color: var(--text); }
.activity-summary[href]:hover { color: var(--accent); }

/* Inbox bell */
.inbox-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--radius);
  color: var(--header-fg);
  text-decoration: none;
  margin-right: 0.3rem;
  transition: background var(--motion-fast) var(--ease-out);
}
.inbox-bell:hover { background: var(--header-nav-hover); }
.inbox-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--status-warn-border);
  color: var(--neutral-900);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
  border: 1.5px solid var(--header-bg);
}

/* Inbox page */
.inbox-list { list-style: none; padding: 0; margin: 0; }
.inbox-item {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 0.95rem 1.2rem;
  margin-bottom: 0.55rem;
  box-shadow: var(--shadow);
  transition: border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.inbox-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-strong); }
.inbox-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 0.3rem; }
.inbox-subject { font-weight: 700; color: var(--text-strong); }
.inbox-body { margin: 0; color: var(--text-base); line-height: 1.45; }