/* ============================================================
   NightAgent v11 — Liquid Glass (iOS 26 / macOS Tahoe direction)
   Layered on top of theme.css — pure additive refinement.
   ============================================================ */

:root, html[data-theme="pearl"] {
  /* Brighter ambient palette — Tahoe-style pastel sky */
  --amb-1: #d8e6ff;   /* sky blue */
  --amb-2: #e8d8ff;   /* lavender */
  --amb-3: #ffd6e0;   /* peach */
  --amb-4: #c8eedd;   /* mint */
  --glass-tint: 255, 255, 255;
  --glass-border: rgba(255, 255, 255, .55);
  --glass-stroke: rgba(0, 0, 0, .06);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -12px rgba(20,30,55,.18), 0 2px 6px -2px rgba(20,30,55,.10);

  /* Vibrant flat-color category accents (iOS-style) */
  --cat-red:    #ff453a;
  --cat-orange: #ff9f0a;
  --cat-yellow: #ffd60a;
  --cat-green:  #30d158;
  --cat-blue:   #0a84ff;
  --cat-purple: #bf5af2;
  --cat-pink:   #ff375f;
  --cat-teal:   #5ac8fa;
  --cat-mint:   #66d4cf;
}

html[data-theme="onyx"] {
  --amb-1: #1e2a4a;
  --amb-2: #321e4a;
  --amb-3: #4a1e35;
  --amb-4: #1e4a3d;
  --glass-tint: 30, 30, 36;
  --glass-border: rgba(255, 255, 255, .08);
  --glass-stroke: rgba(255, 255, 255, .06);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -12px rgba(0,0,0,.55), 0 2px 8px -2px rgba(0,0,0,.4);

  --cat-red:    #ff6961;
  --cat-orange: #ffb340;
  --cat-yellow: #ffe066;
  --cat-green:  #4cd964;
  --cat-blue:   #409cff;
  --cat-purple: #d18cf7;
  --cat-pink:   #ff5e7a;
  --cat-teal:   #6ed4ff;
  --cat-mint:   #79e0d8;
}

/* ---------- Ambient gradient page background ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 14%, var(--amb-1) 0%, transparent 65%),
    radial-gradient(55% 45% at 88% 8%,  var(--amb-2) 0%, transparent 60%),
    radial-gradient(70% 50% at 90% 92%, var(--amb-3) 0%, transparent 60%),
    radial-gradient(65% 55% at 4% 96%,  var(--amb-4) 0%, transparent 60%),
    var(--bg);
  opacity: .65;
  filter: saturate(1.05);
  /* override theme.css base */
}

html[data-theme="onyx"] body::before { opacity: .85; }

body { background: transparent; }

/* ---------- Glass surface utility ---------- */
.glass,
body .card,
body .topbar.glass,
body .nav,
body .theme-switch,
body .run-pill,
body .modal,
body .sheet,
body .menu-sheet,
body .cmd-palette,
body .iz-card,
body .zero-card,
body .draft-modal,
body .toast {
  background: rgba(var(--glass-tint), .58);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Override card to use the glass system */
body .card {
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
body .card-h { border-bottom-color: var(--glass-stroke); padding: 18px 22px; }
body .card-b { padding: 18px 22px 22px; }

/* ---------- Topbar — floating glass pill ---------- */
body .topbar {
  position: sticky; top: 12px; z-index: 50;
  margin: 12px 0 28px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(var(--glass-tint), .62);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
body .topbar.glass {
  background: rgba(var(--glass-tint), .62);
}

/* tighten the inner nav so the pill feels balanced */
body .nav {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  gap: 2px;
}
body .nav a {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
}
body .nav a:hover { background: rgba(var(--glass-tint), .7); }
body .nav a[aria-current="page"] {
  background: rgba(var(--glass-tint), .92);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 0 0 1px var(--glass-border);
}
body .nav a[aria-current="page"]::after { display: none; }

/* Inline glass chips inside the topbar */
body .theme-switch,
body .run-pill {
  background: rgba(var(--glass-tint), .55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
body .theme-switch button { border-radius: 999px; }
body .theme-switch button.active {
  background: rgba(var(--glass-tint), .95);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

body .brand .dot {
  background: linear-gradient(135deg, var(--cat-blue), var(--cat-purple));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.15);
}
body .brand .dot::after { background: rgba(255,255,255,.85); }

/* ---------- Buttons — softer glass affordance ---------- */
body .btn {
  border-radius: 999px;
  font-weight: 500;
  padding: 8px 16px;
  letter-spacing: -.005em;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
  border: 1px solid transparent;
}
body .btn:hover { transform: none; box-shadow: 0 4px 14px -4px rgba(0,0,0,.18); }
body .btn.primary {
  background: var(--cat-blue);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(10,132,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
body .btn.primary:hover { background: #0070e8; }
body .btn.ghost {
  background: rgba(var(--glass-tint), .55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}
body .btn.ghost:hover { background: rgba(var(--glass-tint), .8); }
body .btn.sm { padding: 5px 12px; font-size: 12px; }

/* Tool buttons (Why/Ask/Draft/Contacts/Snooze etc.) — pill chips */
body .tool, body .tool-btn {
  border-radius: 999px !important;
  border: 1px solid var(--glass-border) !important;
  background: rgba(var(--glass-tint), .5) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .15s, transform .12s;
}
body .tool:hover, body .tool-btn:hover {
  background: rgba(var(--glass-tint), .8) !important;
  color: var(--ink);
}

/* ---------- Inputs — pill search bars ---------- */
body input[type="text"], body input[type="email"], body input[type="password"],
body input[type="search"], body input[type="date"], body input[type="number"],
body textarea, body select {
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(var(--glass-tint), .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 9px 14px;
  font-size: 13px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
body textarea {
  border-radius: 16px;
  padding: 10px 14px;
}
body input:focus, body textarea:focus, body select:focus {
  outline: 0;
  border-color: var(--cat-blue);
  background: rgba(var(--glass-tint), .85);
  box-shadow: 0 0 0 3px rgba(10,132,255,.18);
}
/* Inline-edit cells stay edge-to-edge in tables */
body .editable { border-radius: 8px; }

/* ---------- Tables — frosted, lighter rules ---------- */
body table[data-cat] {
  background: rgba(var(--glass-tint), .42);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  border-spacing: 0;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
body table[data-cat] th {
  background: rgba(var(--glass-tint), .35);
  border-bottom: 1px solid var(--glass-stroke);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 600;
  padding: 12px 14px;
}
body table[data-cat] td {
  border-bottom: 1px solid var(--glass-stroke);
  padding: 14px;
  vertical-align: top;
}
body table[data-cat] tr:last-child td { border-bottom: 0; }
body table[data-cat] tr:hover td { background: rgba(var(--glass-tint), .25); }

/* Section heading above each table — Apple style */
body .cat-h, body .cat-head, body h2[data-cat], body .cat-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
  padding: 0 6px 8px;
  display: flex; align-items: center; gap: 8px;
}

/* ---------- Status / category dots → vibrant rounded squares ---------- */
body .cat-dot, body .cat-pill::before, body [class*="cat-"]::before { border-radius: 6px !important; }

body .RED, body .red-dot, body .badge.red,
body td.cat-red, body span[data-cat="RED"] { color: var(--cat-red); }
body .ORANGE, body .badge.orange, body span[data-cat="ORANGE"] { color: var(--cat-orange); }
body .YELLOW, body .badge.yellow, body span[data-cat="YELLOW"] { color: var(--cat-yellow); }
body .GREEN, body .badge.green, body span[data-cat="GREEN"] { color: var(--cat-green); }

/* Replace tiny dot bullets with rounded square pads */
body .cat-pill, body .lg, body .lg-red, body .lg-orange, body .lg-yellow, body .lg-green,
body .lg-done, body .lg-open, body .lg-fyi, body .lg-lost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px;
  background: rgba(var(--glass-tint), .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
}
body .cat-pill::before, body .lg-red::before, body .lg-orange::before,
body .lg-yellow::before, body .lg-green::before, body .lg-done::before,
body .lg-open::before, body .lg-fyi::before, body .lg-lost::before {
  width: 10px; height: 10px; border-radius: 4px;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
body .lg-red::before    { background: var(--cat-red); }
body .lg-orange::before { background: var(--cat-orange); }
body .lg-yellow::before { background: var(--cat-yellow); }
body .lg-green::before, body .lg-done::before { background: var(--cat-green); }
body .lg-open::before   { background: var(--cat-blue); }
body .lg-fyi::before, body .lg-lost::before { background: var(--muted); }

/* RED indicator (the inline "• RED" tag in note cell) */
body .stp-RED, body .stat-RED, body .priority-RED {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,69,58,.12);
  color: var(--cat-red);
  font-size: 11px; font-weight: 600;
  border: 1px solid rgba(255,69,58,.22);
}
body .stp-ORANGE { background: rgba(255,159,10,.14); color: var(--cat-orange); border-color: rgba(255,159,10,.25); }
body .stp-YELLOW { background: rgba(255,214,10,.18); color: #b58a00; border-color: rgba(255,214,10,.3); }
body .stp-GREEN  { background: rgba(48,209,88,.14); color: #1f8c43; border-color: rgba(48,209,88,.25); }

/* ---------- Email strip — refined glass card ---------- */
body .email-strip {
  background: rgba(var(--glass-tint), .55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
body .email-strip:hover { background: rgba(var(--glass-tint), .75); }
body .es-open {
  border-radius: 999px !important;
  background: rgba(var(--glass-tint), .65) !important;
  border: 1px solid var(--glass-border) !important;
  padding: 4px 10px !important;
  color: var(--cat-blue) !important;
}
body .es-open:hover { background: rgba(var(--glass-tint), .9) !important; }

/* ---------- Contact chips → Tahoe pills ---------- */
body .chip, body .chip-m {
  border-radius: 999px;
  background: rgba(var(--glass-tint), .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}
body .chip-x { color: var(--muted); }
body .chip-add {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}

/* ---------- iOS-style toggle (replace checkboxes with toggleable look) ---------- */
body input[type="checkbox"].sub-check { accent-color: var(--cat-green); transform: scale(1.05); }

/* ---------- Mobile tabbar — floating glass dock ---------- */
body.is-mobile .tabbar {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  border-radius: 28px;
  padding: 6px 8px;
  background: rgba(var(--glass-tint), .72);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 28px -10px rgba(20,30,55,.25), 0 2px 6px -2px rgba(20,30,55,.12);
}
body.is-mobile .tabbar > nav, body.is-mobile .tabbar nav {
  display: flex; gap: 2px;
}
body.is-mobile .tabbar a {
  flex: 1;
  padding: 8px 4px;
  border-radius: 22px;
  font-size: 10px;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
body.is-mobile .tabbar a[aria-current="page"] {
  background: rgba(var(--glass-tint), .95);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
body.is-mobile .tabbar a[aria-current="page"] svg { color: var(--cat-blue); }

/* Mobile theme FAB — match the glass language */
body.is-mobile .m-theme-fab {
  background: rgba(var(--glass-tint), .72);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 18px -6px rgba(20,30,55,.25);
  bottom: calc(env(safe-area-inset-bottom) + 88px);
}

/* ---------- Sheet & overlay refinement (mobile menu) ---------- */
body.is-mobile .overlay { background: rgba(20,20,28,.45); }
body.is-mobile .sheet {
  border-radius: 24px 24px 0 0;
  background: rgba(var(--glass-tint), .94);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 -16px 40px -12px rgba(0,0,0,.25);
}
body.is-mobile .menu-item {
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
body.is-mobile .menu-item:hover, body.is-mobile .menu-item:active {
  background: rgba(var(--glass-tint), .8) !important;
}

/* ---------- Reduce visual density — calmer page ---------- */
body .page-head { margin-top: 28px; margin-bottom: 36px; }
body .page-head h1 { font-weight: 590; letter-spacing: -.025em; }
body hr, body .divider { border: 0; border-top: 1px solid var(--glass-stroke); }

/* Soften code/mono blocks */
body code, body pre, body kbd {
  background: rgba(var(--glass-tint), .55);
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

/* ---------- Inbox-Zero card — full glass treatment ---------- */
body .zero-card {
  border-radius: 28px;
  padding: 28px;
  background: rgba(var(--glass-tint), .68);
  backdrop-filter: saturate(180%) blur(32px);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
body .zact {
  border-radius: 16px !important;
  background: rgba(var(--glass-tint), .55) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .12s, background .15s;
}
body .zact:hover { background: rgba(var(--glass-tint), .85) !important; transform: translateY(-1px); }
body .zact .key {
  background: rgba(var(--glass-tint), .9);
  border-radius: 6px;
  padding: 1px 6px;
  border: 1px solid var(--glass-border);
}

/* ---------- v10 home stat cards — glass with vibrant accent dot ---------- */
#v10Cards { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 28px; }
.v10-stat-card {
  flex: 1; min-width: 240px;
  position: relative;
  display: block;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: rgba(var(--glass-tint), .55);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease, background .15s;
}
.v10-stat-card:hover {
  transform: translateY(-2px);
  background: rgba(var(--glass-tint), .75);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 36px -14px rgba(20,30,55,.22);
}
.v10-stat-icon {
  width: 28px; height: 28px;
  border-radius: 9px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px -2px rgba(0,0,0,.2);
}
.v10-stat-label {
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.v10-stat-num {
  font-size: 36px; font-weight: 600; line-height: 1.05; margin-top: 6px;
  color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.v10-stat-sub {
  font-size: 13px; color: var(--muted); margin-top: 8px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body * { transition: none !important; animation: none !important; }
}

/* ---------- Safari fallback when backdrop-filter unsupported ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .topbar, body .card, body .nav, body .tabbar, body .sheet, body .modal {
    background: rgba(var(--glass-tint), .92);
  }
}