/* ============================================================================
   glass — 4th Hub surface. "build clear."
   Apple Liquid Glass material applied to the home layout: a colourless,
   translucent, blurred material with a hairline lensed edge (bright top-left ->
   shadowed bottom-right), floated over a wallpaper that refracts through. The
   glass itself is neutral; the content carries the colour.

   Structurally additive: every rule is scoped [data-theme="glass"] and rides on
   home.css's existing shell/column/panel skeleton. It floats the opaque columns
   apart into rounded glass slabs, turns the top/bottom bars translucent, and
   paints the body as the wallpaper the glass sits over. vesper/cobalt are
   untouched. Design target: the approved mockup (shot_real_dash_glass.png).

   NOTE: unlike cobalt (square, hard-shadow brutalism), glass is intrinsically
   rounded and floating — it is a distinct visual direction, not a cobalt restyle.
   ============================================================================ */

/* ---------------- token contract (dark = default dark) ---------------- */
[data-theme="glass"] {
  --font:-apple-system,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --font-display:-apple-system,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --font-body:-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --r:10px; --r-card:16px; --r-pill:999px;              /* rounded — the glass tell */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px;
  --status-h:38px;
  --feat-display:normal; --feat-text:normal; --feat-meta:normal;
  --feat-tnum:"tnum" 1,"lnum" 1;

  /* glass material knobs — one source, reused by every scoped rule below */
  --glass-fill:rgba(255,255,255,.05);
  --glass-blur:blur(20px) saturate(180%);
  --glass-edge:rgba(255,255,255,.14);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -14px 26px -18px rgba(0,0,0,.42),0 14px 36px -14px rgba(0,0,0,.55);
}

/* dark (dark) palette — colourless glass, cool content colour */
[data-theme="glass"][data-surface="dark"] {
  --bg:#0a1030; --bg-elev:rgba(255,255,255,.07); --bg-elev-2:rgba(255,255,255,.10); --bg-hover:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.22);
  --fg:#f3f6ff; --fg-mute:rgba(243,246,255,.86); --fg-dim:rgba(243,246,255,.66);
  --fg-faint:rgba(243,246,255,.42); --fg-ghost:rgba(243,246,255,.22);
  --chrome:#6f9bff; --accent:#5b8cff; --accent-dim:#4d7cff; --accent-faint:rgba(91,140,255,.22);
  --warn:#ffc24d; --warn-dim:#c8902a; --alert:#ff6b6b; --alert-dim:#c84545;
  --good:#4ade80; --good-dim:#2ea862; --violet-label:#8fb2ff;
  --tomato:#ff6b5c; --tomato-dim:#b8463c;
  --on-accent:#0a1030;
  --panel-head-line:rgba(255,255,255,.10);
  --launch-scrim:rgba(4,8,24,.72);
  --modal-shadow:0 24px 60px -18px rgba(0,0,0,.6);
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(143%2C178%2C255%2C0.8)'/%3E%3C/svg%3E");
  --glass-fill:rgba(255,255,255,.05);
  --glass-edge:rgba(255,255,255,.14);
}

/* light (light) palette — near-white translucent glass over an ice wallpaper */
[data-theme="glass"][data-surface="light"] {
  --bg:#eef3ff; --bg-elev:rgba(255,255,255,.55); --bg-elev-2:rgba(255,255,255,.7); --bg-hover:rgba(255,255,255,.6);
  --line:rgba(20,40,90,.16); --line-soft:rgba(20,40,90,.09); --line-strong:rgba(20,40,90,.30);
  --fg:#0c1740; --fg-mute:rgba(12,23,64,.84); --fg-dim:rgba(12,23,64,.62);
  --fg-faint:rgba(12,23,64,.42); --fg-ghost:rgba(12,23,64,.22);
  --chrome:#2f5bff; --accent:#2f5bff; --accent-dim:#2247d8; --accent-faint:rgba(47,91,255,.16);
  --warn:#8c590e; --warn-dim:#c8902a; --alert:#c0291f; --alert-dim:#d85c50;
  --good:#1d7a3f; --good-dim:#3a9a5c; --violet-label:#2f5bff;
  --tomato:#d63a2c; --tomato-dim:#a82c20;
  --on-accent:#ffffff;
  --panel-head-line:rgba(20,40,90,.14);
  --launch-scrim:rgba(20,40,90,.22);
  --modal-shadow:0 24px 60px -18px rgba(30,60,140,.28);
  --glass-fill:rgba(255,255,255,.42);
  --glass-edge:rgba(255,255,255,.7);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -14px 26px -18px rgba(30,60,140,.10),0 14px 36px -14px rgba(30,60,140,.22);
}

/* ---------------- wallpaper (the thing glass refracts) ---------------- */
/* dot grid layered on top of the colour glows on top of the base gradient — all
   on body itself so no extra fixed layer is needed and content stacks normally. */
[data-theme="glass"] body {
  background:
    radial-gradient(rgba(150,180,255,.10) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(38% 50% at 12% 14%, #2f5bff 0%, transparent 56%),
    radial-gradient(34% 44% at 88% 10%, #6a4cff 0%, transparent 54%),
    radial-gradient(46% 50% at 82% 92%, #14a0d6 0%, transparent 52%),
    radial-gradient(40% 44% at 20% 96%, #3d6fff 0%, transparent 50%),
    linear-gradient(150deg, #0a1230 0%, #070c22 56%, #04060f 100%);
  background-attachment: fixed;
}
[data-theme="glass"][data-surface="light"] body {
  background:
    radial-gradient(rgba(40,70,150,.08) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(40% 52% at 12% 12%, #a9c2ff 0%, transparent 56%),
    radial-gradient(36% 46% at 88% 10%, #c9b7ff 0%, transparent 54%),
    radial-gradient(46% 50% at 82% 92%, #9fe0f5 0%, transparent 52%),
    radial-gradient(40% 44% at 20% 96%, #b6ccff 0%, transparent 50%),
    linear-gradient(150deg, #eef3ff 0%, #e4ebfb 56%, #dbe6f8 100%);
  background-attachment: fixed;
}

/* ---------------- the glass material (shared) ---------------- */
/* applied to the floated containers: columns, today-band caps, the two bars.
   A hairline lensed edge via a masked directional gradient ring — bright
   top-left, shadowed bottom-right, faint far-corner counter-glint. */
[data-theme="glass"] .col,
[data-theme="glass"] .today-cap,
[data-theme="glass"] .topbar,
[data-theme="glass"] .status {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
[data-theme="glass"] .col::after,
[data-theme="glass"] .today-cap::after,
[data-theme="glass"] .topbar::after,
[data-theme="glass"] .status::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 5;
  background: linear-gradient(135deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.20) 20%, rgba(255,255,255,.06) 48%,
    rgba(0,0,0,.10) 74%, rgba(170,195,255,.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* ---------------- float the columns apart into slabs ---------------- */
[data-theme="glass"] .body { gap: 14px; padding: 0 14px 14px; }
[data-theme="glass"] .col {
  border-right: 0; border-radius: var(--r-card); overflow: hidden;
}
[data-theme="glass"] .panel { border-bottom-color: var(--line-soft); }
[data-theme="glass"] .panel:last-child { border-bottom: 0; }
[data-theme="glass"] .panel-head { background: transparent; }

/* ---------------- today band ---------------- */
[data-theme="glass"] .today-zone { border-bottom: 0; }
[data-theme="glass"] .today-zone-grid { gap: 14px; padding: 14px; }
[data-theme="glass"] .today-cap {
  border-right: 0; border-radius: var(--r-card); overflow: hidden;
  padding-left: var(--s-3); padding-right: var(--s-3);
}

/* ---------------- top / bottom bars ---------------- */
[data-theme="glass"] .topbar {
  border-bottom: 1px solid var(--line);
  margin: 12px 14px 0; border-radius: var(--r-card);
}
[data-theme="glass"] .status {
  border-top: 1px solid var(--line);
  margin: 0 14px 12px; border-radius: var(--r-card);
}
/* the shell reserves exactly --status-h for the status row; a floated bar with
   margins needs the row to breathe, so give the strip its own auto track feel by
   nudging content off the hard edges. */
[data-theme="glass"] .status { height: auto; align-self: center; }

/* the always-see handle + panel: transparent so the wallpaper carries, hairline divider */
[data-theme="glass"] .ast-handle { background: transparent; border-bottom: 1px solid var(--line); }
[data-theme="glass"] .ast-handle:hover { background: var(--bg-elev); }
[data-theme="glass"] .ast-panel {
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line-strong);
}

/* rounded pills/controls inherit via tokens; make hover fills read on glass */
[data-theme="glass"] .task-tab.active { border-bottom-color: var(--accent); }

/* ---------------- jobs module ---------------- */
[data-theme="glass"] .funnel-search {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
[data-theme="glass"] .funnel-tot {
  border-radius: var(--r-card);
  padding: var(--s-1) var(--s-2);
}
[data-theme="glass"] .funnel-tot:hover {
  background: var(--glass-fill);
}

/* ---------------- trips module ---------------- */
[data-theme="glass"] .funnel {
  border-left: 0;
  border-radius: var(--r-card);
  overflow: hidden;
}
[data-theme="glass"] .ftot {
  border-radius: var(--r-card);
}
[data-theme="glass"] .ftot:hover {
  background: var(--glass-fill);
}

/* ---------------- purchases module ---------------- */
[data-theme="glass"] .pe-rail,
[data-theme="glass"] .pe-context,
[data-theme="glass"] .sidebar {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-card);
  overflow: hidden;
}
[data-theme="glass"] .pe-arena {
  background: transparent;
}
[data-theme="glass"] .pe-cand-card {
  border-radius: var(--r-card);
  background: var(--glass-fill);
}

/* ---------------- work module ---------------- */
[data-theme="glass"] .work-grid .launch-tile {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-card);
  border: 0;
}

/* ---------------- checklists module ---------------- */
[data-theme="glass"] .cl-sidebar {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* ---------------- finances module ---------------- */
[data-theme="glass"] .total-card,
[data-theme="glass"] .by-source,
[data-theme="glass"] .periods {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-card);
}

/* ---------------- barback module ---------------- */
[data-theme="glass"] .cad-item {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--r-card);
}
[data-theme="glass"] .run-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-card);
}

/* ---------------- vault map module ---------------- */
[data-theme="glass"] .col-head {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
}