/* DDC components with the Liquid Glass layer, as used in DDC Email. Needs tokens.css first.

   The one rule that matters most: glass is only for things that FLOAT over content (menus,
   bars, a chat launcher, dialogs, sheets, toasts). Content itself (cards, messages, tables,
   forms) stays solid so it is easy to read. Never put glass on glass: controls sitting on a
   glass surface use plain fills (.btn--plain) instead.

   Every piece of glass has the same anatomy:
   1. a frosted fill that blurs and saturates what is behind it;
   2. a specular rim, brightest top-left with a softer catch bottom-right (::after);
   3. a thin darkened outer edge that separates it from what's behind (new in iOS 27);
   4. an inner glow that reads as thickness, and a shadow that grows with its size;
   5. light that follows the pointer (liquid-glass.js adds .lit and --mx/--my). */

/* --lit fades the pointer light in and out. Inside a Shadow DOM, @property is ignored:
   register it from JS instead (see liquid-glass.js). */
@property --lit { syntax: '<number>'; inherits: false; initial-value: 0; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 var(--font); color: var(--text); background: var(--ambient), var(--bg); background-attachment: fixed; font-synthesis: none; }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- The material ---- */
.glass {
  --lit-light: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), rgb(255 255 255 / calc(var(--lit) * var(--g-sheen))), transparent 70%);
  position: relative;
  isolation: isolate;
  color: var(--heading);
  background: var(--lit-light), linear-gradient(180deg, rgb(var(--g-fill-rgb) / calc(var(--g-a) + 0.1)), rgb(var(--g-fill-rgb) / var(--g-a)));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(185%);
  backdrop-filter: blur(var(--g-blur)) saturate(185%);
  box-shadow: 0 0 0 0.5px var(--g-edge), var(--g-inner), var(--g-shadow-s);
  transition: --lit 0.35s ease;
}
/* Big pieces (dialogs, sheets, a chat panel, a tab bar) cast a bigger, softer shadow. */
.glass--large { box-shadow: 0 0 0 0.5px var(--g-edge), var(--g-inner), var(--g-shadow-l); }
.glass--dialog { --g-a: var(--g-dialog); }
.glass--sheet { --g-a: var(--g-sheet); }
/* Smoked glass: navy-tinted, for a dark side menu or header over a light page. */
.glass--smoked {
  --g-rim-hi: rgb(255 255 255 / 0.24);
  --g-rim-lo: rgb(255 255 255 / 0.04);
  --g-sheen: 0.09;
  color: #d3def3;
  background: var(--lit-light), linear-gradient(180deg, rgb(var(--g-tint-rgb) / calc(var(--g-ta) - 0.06)), rgb(var(--g-tint-rgb) / calc(var(--g-ta) + 0.06)));
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 0 0 0.5px rgb(4 10 24 / 0.5), inset 0 1px 0.5px rgb(255 255 255 / 0.14), inset 0 0 24px rgb(120 160 255 / 0.05), var(--g-shadow-l);
}
.lit { --lit: 1; }

/* Specular rim: a 1px gradient ring cut out with a mask.
   GOTCHA (Chrome): a masked element, or anything with a url() filter, placed INSIDE a
   backdrop-filter surface stops that surface from blurring. So the rim goes on the glass
   surface itself only; controls inside glass draw their edges with inset box-shadows. */
.glass::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, var(--g-rim-hi), var(--g-rim-lo) 24%, transparent 46%, transparent 62%, var(--g-rim-lo) 84%, var(--g-rim-hi));
  -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 exclude, linear-gradient(#000 0 0);
}

/* ---- Buttons: capsules that swell slightly when pressed ---- */
.btn {
  font: inherit; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border: none; border-radius: 999px; cursor: pointer; text-decoration: none;
  color: var(--heading); background: var(--btn-fill); box-shadow: var(--btn-shadow);
  transition: transform 0.55s var(--spring), box-shadow 0.2s, background 0.15s, --lit 0.35s;
}
.btn:hover { background: var(--btn-fill-hover); box-shadow: var(--btn-shadow-hover); }
.btn:active:not(:disabled) { transform: scale(1.04); transition-duration: 0.12s; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Primary: blue-tinted glass with a cyan glow along the bottom (the brand's blue + cyan pair). */
.btn--primary {
  --lit-light: radial-gradient(150px circle at var(--mx, -999px) var(--my, -999px), rgb(255 255 255 / calc(var(--lit) * 0.32)), transparent 70%);
  color: #fff;
  background: var(--lit-light), linear-gradient(180deg, #4471e6, #2a54c9 62%, #2549b8);
  box-shadow: 0 0 0 0.5px rgb(18 38 105 / 0.6), 0 2px 4px rgb(40 81 197 / 0.18), 0 8px 20px -6px rgb(40 81 197 / 0.55), inset 0 1px 0.5px rgb(255 255 255 / 0.5), inset 0 -8px 14px -10px rgb(125 208 220 / 0.75);
}
.btn--primary:hover {
  background: var(--lit-light), linear-gradient(180deg, #4b78ec, #2e59d0 62%, #284fc0);
  box-shadow: 0 0 0 0.5px rgb(18 38 105 / 0.6), 0 3px 6px rgb(40 81 197 / 0.2), 0 12px 26px -8px rgb(40 81 197 / 0.65), inset 0 1px 0.5px rgb(255 255 255 / 0.55), inset 0 -8px 14px -10px rgb(125 208 220 / 0.85);
}
.btn--primary:active:not(:disabled) { box-shadow: 0 0 0 0.5px rgb(18 38 105 / 0.6), 0 14px 30px -8px rgb(40 81 197 / 0.7), 0 0 0 4px rgb(125 208 220 / 0.25), inset 0 1px 0.5px rgb(255 255 255 / 0.6), inset 0 -8px 14px -10px rgb(125 208 220 / 0.95); }
html[data-theme='dark'] .btn--primary { box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.7), 0 8px 22px -6px rgb(40 81 197 / 0.7), inset 0 1px 0.5px rgb(255 255 255 / 0.45), inset 0 -8px 14px -10px rgb(102 228 235 / 0.7); }
.btn--danger { color: #fff; background: linear-gradient(180deg, #d0414c, #b4232f 62%, #a11d29); box-shadow: 0 0 0 0.5px rgb(100 10 20 / 0.6), 0 8px 20px -6px rgb(180 35 47 / 0.5), inset 0 1px 0.5px rgb(255 255 255 / 0.45); }

/* On a glass surface: plain fills, no glass on glass. */
.btn--plain { background: var(--plain-fill); box-shadow: none; }
.btn--plain:hover { background: var(--plain-fill-hover); box-shadow: none; }
.btn--link { background: none; box-shadow: none; color: var(--muted); padding: 6px 10px; }
.btn--link:hover { background: none; box-shadow: none; color: var(--heading); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: transform 0.4s var(--spring), background 0.15s; }
.icon-btn:hover { background: var(--plain-fill-hover); color: var(--heading); }
.icon-btn:active { transform: scale(0.94); }

/* ---- Chips (filters, quick replies) ---- */
.chip { font: inherit; font-size: 13.5px; font-weight: 620; padding: 6px 13px; border: none; border-radius: 999px; cursor: pointer; color: var(--copy); background: var(--btn-fill); box-shadow: var(--btn-shadow); transition: transform 0.55s var(--spring); }
.chip:hover { color: var(--heading); background: var(--btn-fill-hover); }
.chip:active { transform: scale(1.04); }
.chip.active { color: #fff; background: linear-gradient(180deg, #2c3d5d, #13213a); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.5), 0 4px 12px -4px rgb(19 33 58 / 0.45), inset 0 1px 0.5px rgb(255 255 255 / 0.25); }
html[data-theme='dark'] .chip.active { color: #0b1322; background: linear-gradient(180deg, #fff, #dbe5f6); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.6), inset 0 1px 0 #fff; }

/* ---- Segmented control with a sliding lens (liquid-glass.js moves .lens) ---- */
.segmented { position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--g-recess); box-shadow: inset 0 1px 2px rgb(14 26 50 / 0.08); }
.segmented button { position: relative; z-index: 1; font: inherit; font-weight: 620; padding: 6px 14px; border: none; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.2s; }
.segmented button:hover, .segmented button.active { color: var(--heading); }
.lens { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; will-change: transform; }
.segmented > .lens { border-radius: 999px; background: var(--g-thumb); box-shadow: var(--g-thumb-shadow); }
/* Before the script runs (or without it), the active item draws its own thumb. */
.segmented:not(:has(> .lens:not([hidden]))) button.active { background: var(--g-thumb); box-shadow: var(--g-thumb-shadow); }
/* A coloured lens for a dark/smoked menu: */
.lens--blue { border-radius: 14px; background: linear-gradient(180deg, rgb(76 120 240 / 0.78), rgb(40 81 197 / 0.74)); box-shadow: 0 0 0 0.5px rgb(4 12 40 / 0.6), inset 0 1px 0.5px rgb(255 255 255 / 0.42), inset 0 -10px 16px -12px rgb(125 208 220 / 0.9), 0 10px 22px -10px rgb(40 81 197 / 0.9); }

/* ---- On/off switch: the knob turns into a clear lens while pressed ---- */
.toggle { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 50px; height: 28px; margin: 0; border: none; border-radius: 999px; cursor: pointer; background: var(--g-recess); box-shadow: inset 0 1px 2px rgb(14 26 50 / 0.14), inset 0 0 0 0.5px rgb(14 26 50 / 0.08); transition: background 0.25s; }
html[data-theme='dark'] .toggle:not(:checked) { background: rgb(255 255 255 / 0.14); }
.toggle:checked { background: linear-gradient(180deg, #3a66de, #2851c5); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18), inset 0 -6px 10px -8px rgb(125 208 220 / 0.9); }
.toggle::before { content: ''; position: absolute; top: 3px; left: 3px; width: 30px; height: 22px; border-radius: 999px; background: linear-gradient(180deg, #fff, #f3f6fb); box-shadow: 0 0 0 0.5px rgb(14 26 50 / 0.14), 0 2px 5px rgb(14 26 50 / 0.22), inset 0 1px 0 #fff; transition: transform 0.5s var(--spring), width 0.3s var(--spring), background 0.2s; }
.toggle:checked::before { transform: translateX(14px); }
.toggle:active::before { width: 36px; background: rgb(255 255 255 / 0.45); -webkit-backdrop-filter: blur(2px) saturate(200%); backdrop-filter: blur(2px) saturate(200%); box-shadow: 0 0 0 0.5px rgb(14 26 50 / 0.18), 0 4px 12px rgb(14 26 50 / 0.2), inset 0 1px 0.5px #fff, inset 0 0 6px rgb(255 255 255 / 0.8); transform: scale(1.12); }
.toggle:checked:active::before { transform: translateX(8px) scale(1.12); }

/* ---- Fields stay solid, with a soft focus glow ---- */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > .label { font-size: 13.5px; font-weight: 700; color: var(--heading); }
.input { font: inherit; color: inherit; width: 100%; padding: 9px 12px; border: 1px solid var(--control); border-radius: var(--radius-field); background: var(--surface); }
.input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(40 81 197 / 0.16); }
html[data-theme='dark'] .input:focus-visible { box-shadow: 0 0 0 4px rgb(155 182 255 / 0.2); }
.glass .input { background: rgb(255 255 255 / 0.78); }
html[data-theme='dark'] .glass .input { background: rgb(0 0 0 / 0.25); }
/* A recessed capsule field (search, a chat composer on glass). */
.input--recessed { border: none; border-radius: 999px; background: var(--g-recess); box-shadow: inset 0 1px 2px rgb(14 26 50 / 0.12); }

/* ---- Content: solid cards with a gentle lift ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; box-shadow: 0 1px 2px rgb(14 26 50 / 0.03), 0 10px 28px -16px rgb(14 26 50 / 0.14); }
html[data-theme='dark'] .card { box-shadow: 0 10px 28px -16px rgb(0 0 0 / 0.6); }

/* ---- Brand details ---- */
/* Small uppercase group label above a title. */
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
/* The two-tone rule under page titles: a blue bar with a cyan block beside it. */
.brand-rule { display: block; width: 48px; height: 5px; background: var(--primary); box-shadow: 16px 0 0 var(--cyan); }
/* Status label with a square marker (square, not round: a DDC signature). */
.pill { display: inline-flex; align-items: baseline; gap: 7px; padding: 3px 10px 3px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 650; line-height: 1.35; background: var(--soft); color: var(--copy); }
.pill::before { content: ''; flex: none; width: 7px; height: 7px; background: currentColor; transform: translateY(-1px); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warning-bg); color: var(--warning-text); }
.pill.bad { background: var(--danger-bg); color: var(--danger); }
.pill.info { background: var(--tag); color: var(--tag-text); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--tag); color: var(--tag-text); }
/* Initials on a rounded square; colour picked from the email so a person always looks the same. */
.avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; font-size: 13px; font-weight: 780; letter-spacing: 0.4px; color: #fff; background: var(--avatar-0); }
.avatar.c1 { background: var(--avatar-1); color: var(--avatar-1-text); }
.avatar.c2 { background: var(--avatar-2); }
.avatar.c3 { background: var(--avatar-3); }

/* ---- Dialogs and sheets: frosted, more tinted for reading; they spring in ---- */
dialog.glass { padding: 26px; border: none; border-radius: var(--radius-dialog); color: var(--text); }
dialog.glass::backdrop { background: rgb(9 17 32 / 0.24); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html[data-theme='dark'] dialog.glass::backdrop { background: rgb(0 0 0 / 0.45); }
dialog.glass[open] { animation: glass-pop 0.5s var(--spring-calm); }
@keyframes glass-pop { from { opacity: 0; transform: scale(0.9); } 40% { opacity: 1; } }
@keyframes glass-rise { from { opacity: 0; transform: translateY(70px); } 35% { opacity: 1; } }
@keyframes glass-slide { from { opacity: 0; transform: translateX(60px); } 35% { opacity: 1; } }
/* Phone sheets get a grabber. */
.grabber { display: block; width: 38px; height: 5px; margin: 0 auto 10px; border-radius: 999px; background: rgb(118 132 160 / 0.45); }

/* ---- Toast: a glass capsule ---- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; --g-a: 0.82; transition: opacity 0.25s, transform 0.5s var(--spring); }

/* ---- Scroll edge: a soft fade under a floating bar once content scrolls beneath it ---- */
.scroll-edge { position: absolute; inset: -12px -36px -22px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, transparent), transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent); }
html.scrolled .scroll-edge { opacity: 1; }

/* ---- System settings win: less motion, less transparency, more contrast ---- */
@media (prefers-reduced-motion: reduce) {
  dialog.glass[open] { animation: none; }
  .btn, .chip, .toggle::before, .icon-btn { transition-duration: 0.01s; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--smoked, .scroll-edge { -webkit-backdrop-filter: none; backdrop-filter: none; }
}