/* ============================================================
   Clxrity — Liquid Glass layer
   Loaded after styles.css / landing.css. Material only.

   The palette in styles.css is authored and stays untouched: warm beige
   paper, off-black ink, dusty editorial category colours. Nothing here
   introduces a hue. Every effect below is neutral or warm-grey, and the
   whole point is to make surfaces read as *paper under glass* — blur,
   specular edges, real depth — rather than to recolour anything.
   ============================================================ */

:root {
  /* Glass. Tint stays high because this UI carries dense text. */
  --g-tint:        rgba(253, 251, 249, 0.62);
  --g-tint-strong: rgba(253, 251, 249, 0.82);
  --g-blur:        blur(26px) saturate(150%);
  --g-blur-lite:   blur(14px) saturate(130%);

  /* Specular rim: bright top-left, thinning through the middle, catching
     again bottom-right. This edge is what actually reads as glass. */
  --g-rim: linear-gradient(
    148deg,
    rgba(255,255,255,1)    0%,
    rgba(255,255,255,0.52) 20%,
    rgba(28,26,23,0.05)    52%,
    rgba(255,255,255,0.26) 76%,
    rgba(255,255,255,0.80) 100%
  );

  /* Layered warm shadows — depth in the ink family, never cool grey. */
  --g-sh-1: 0 1px 2px rgba(28,26,23,.04), 0 1px 3px rgba(28,26,23,.05);
  --g-sh-2: 0 1px 2px rgba(28,26,23,.04), 0 6px 14px rgba(28,26,23,.06), 0 14px 32px rgba(28,26,23,.07);
  --g-sh-3: 0 2px 4px rgba(28,26,23,.05), 0 12px 26px rgba(28,26,23,.09), 0 28px 60px rgba(28,26,23,.10);
  --g-inner: inset 0 1px 0 rgba(255,255,255,.92);

  --ease-g:   cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------
   1. THE SHEET
   A calm sheet of paper carrying the faintest warm tonal drift, so glass
   laid on top has something to bend. Strictly greige — no colour.
   ------------------------------------------------------------ */
body { background: var(--paper); position: relative; }

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(34% 32% at 14% 6%,  rgba(255,253,248,.95), transparent 70%),
    radial-gradient(32% 30% at 88% 10%, rgba(231,225,215,.85), transparent 70%),
    radial-gradient(36% 32% at 78% 88%, rgba(255,252,246,.80), transparent 72%),
    radial-gradient(30% 28% at 10% 82%, rgba(234,228,218,.75), transparent 72%);
  animation: g-drift 60s ease-in-out infinite alternate;
}

/* Corner falloff — a subtle dome so the sheet isn't flat colour. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(28,26,23,.045) 100%);
}

@keyframes g-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(1.5%,-1.5%,0) scale(1.05); }
  100% { transform: translate3d(-1.5%,1.5%,0) scale(1.02); }
}

/* ------------------------------------------------------------
   2. GLASS PRIMITIVE
   ::before paints the rim with the padding-box mask trick, so the
   highlight lives *on* the edge rather than inside it.
   ------------------------------------------------------------ */
.card,
.glow,
.empty,
.stat,
.tile,
.modal,
.sheet,
.field,
.chip,
.segmented,
.ibadge,
.interest-card,
.logo-badge,
.mobile-topbar,
.tabbar,
.sidebar,
.fab,
.lp-nav,
.feature {
  position: relative;
  isolation: isolate;
}

.card,
.empty,
.stat,
.tile,
.interest-card,
.feature {
  border: 0;
  border-radius: 18px;
  background: var(--g-tint);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-inner), var(--g-sh-2);
  transition:
    transform .45s var(--ease-g),
    box-shadow .45s var(--ease-g),
    background .3s var(--ease-out);
}

.card::before,
.empty::before,
.stat::before,
.tile::before,
.interest-card::before,
.feature::before,
.modal::before,
.sheet::before,
.lp-nav::before,
.tabbar::before,
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: var(--g-rim);
  -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;
  pointer-events: none;
}

/* Nested glass reads as a doubled pane — a card inside a card. Inner
   surfaces drop back to a plain inset so only the outer edge is glass. */
.card .card,
.card .empty,
.card .stat,
.card .tile,
.modal .card,
.sheet .card,
.feature .card {
  background: rgba(255,255,255,.34);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(28,26,23,.05);
}
.card .card::before,
.card .empty::before,
.card .stat::before,
.card .tile::before,
.modal .card::before,
.sheet .card::before { display: none; }
.card .card:hover,
.card .empty:hover,
.card .stat:hover,
.card .tile:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(28,26,23,.08); }

/* Content clears the rim + sheen layers */
.card > *, .empty > *, .stat > *, .tile > *,
.interest-card > *, .feature > *, .modal > *, .sheet > * {
  position: relative;
  z-index: 3;
}

/* Pointer-tracked sheen — glass.js writes --mx / --my */
.card::after,
.stat::after,
.tile::after,
.interest-card::after,
.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.75),
    rgba(255,255,255,.24) 42%,
    transparent 66%
  );
}
.card:hover::after,
.stat:hover::after,
.tile:hover::after,
.interest-card:hover::after,
.feature:hover::after { opacity: 1; }

.card:hover,
.stat:hover,
.tile:hover,
.interest-card:hover,
.feature:hover {
  transform: translateY(-3px);
  background: var(--g-tint-strong);
  box-shadow: var(--g-inner), var(--g-sh-3);
}

/* ------------------------------------------------------------
   3. INK SURFACES
   .glow is the editorial ink block — it stays solid on purpose and only
   gains a single soft sheen across the top face.
   ------------------------------------------------------------ */
.glow {
  border: 0;
  border-radius: 20px;
  background: var(--accent-grad);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 6px rgba(28,26,23,.16),
    0 16px 36px rgba(28,26,23,.22);
  overflow: hidden;
}
.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.11), transparent 55%);
}
.glow > * { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   4. CHROME — nav, sidebar, tab bar, top bar
   ------------------------------------------------------------ */
.lp-nav {
  background: rgba(244,241,236,.70);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid rgba(28,26,23,.07);
  box-shadow: 0 1px 2px rgba(28,26,23,.03);
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.lp-nav.g-scrolled {
  background: rgba(244,241,236,.86);
  box-shadow: 0 1px 3px rgba(28,26,23,.05), 0 10px 30px rgba(28,26,23,.07);
}

.sidebar,
.mobile-topbar {
  background: rgba(253,251,249,.68);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border-color: rgba(28,26,23,.07);
}

/* The tab bar floats above scrolling content, so it keeps an opaque paper
   layer beneath the glass — fully translucent let text collide with labels. */
.tabbar {
  background: rgba(253,251,249,.92);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border-top: 0;
  box-shadow: var(--g-inner), 0 -2px 6px rgba(28,26,23,.04), 0 -12px 30px rgba(28,26,23,.06);
}

/* ------------------------------------------------------------
   5. CONTROLS
   ------------------------------------------------------------ */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  transition:
    transform .35s var(--ease-g),
    box-shadow .35s var(--ease-g),
    background .25s var(--ease-out),
    opacity .25s var(--ease-out);
}
.btn:active { transform: translateY(0) scale(.982); transition-duration: .1s; }

/* Solid ink buttons get a top-face gloss and a travelling glint */
.btn.primary, .nav-cta, .appstore {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 6px rgba(28,26,23,.16),
    0 10px 24px rgba(28,26,23,.18);
}
.btn.primary::after, .nav-cta::after, .appstore::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.20), transparent 52%);
}
.btn.primary::before, .nav-cta::before, .appstore::before {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 42%; height: 100%;
  z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn.primary:hover::before, .nav-cta:hover::before, .appstore:hover::before {
  left: 130%;
  transition: left .8s var(--ease-out);
}
.btn.primary > *, .nav-cta > *, .appstore > * { position: relative; z-index: 3; }

.btn.primary:hover, .nav-cta:hover, .appstore:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 10px rgba(28,26,23,.18),
    0 18px 40px rgba(28,26,23,.24);
}

/* Ghost / secondary — clear glass */
.btn.ghost, .btn.secondary, .segmented, .chip {
  border: 0;
  background: rgba(253,251,249,.62);
  -webkit-backdrop-filter: var(--g-blur-lite);
  backdrop-filter: var(--g-blur-lite);
  box-shadow: var(--g-inner), 0 0 0 1px rgba(28,26,23,.07), var(--g-sh-1);
}
.btn.ghost:hover, .btn.secondary:hover, .chip:hover {
  background: rgba(253,251,249,.92);
  transform: translateY(-2px);
  box-shadow: var(--g-inner), 0 0 0 1px rgba(28,26,23,.10), var(--g-sh-2);
}

.fab {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 10px rgba(28,26,23,.20),
    0 16px 34px rgba(28,26,23,.26);
  transition: transform .4s var(--ease-g), box-shadow .4s var(--ease-g);
}
.fab:hover { transform: translateY(-3px) scale(1.03); }
.fab:active { transform: translateY(-1px) scale(.97); transition-duration: .1s; }

/* ------------------------------------------------------------
   6. FIELDS
   Near-opaque: forms must stay legible before they look like glass.
   ------------------------------------------------------------ */
.field, input, select, textarea {
  border: 0 !important;
  border-radius: 11px;
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: var(--g-blur-lite);
  backdrop-filter: var(--g-blur-lite);
  box-shadow:
    var(--g-inner),
    0 0 0 1px rgba(28,26,23,.10),
    0 1px 2px rgba(28,26,23,.03);
  transition: box-shadow .25s var(--ease-out), background .25s var(--ease-out);
}
.field:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  background: #fff;
  box-shadow:
    var(--g-inner),
    0 0 0 1px rgba(28,26,23,.32),
    0 0 0 4px rgba(28,26,23,.08),
    0 2px 8px rgba(28,26,23,.06);
}

/* Keyboard focus stays obvious */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ------------------------------------------------------------
   7. MODALS / SHEETS
   ------------------------------------------------------------ */
.modal, .sheet {
  border: 0;
  border-radius: 22px;
  background: rgba(253,251,249,.90);
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  backdrop-filter: blur(34px) saturate(170%);
  box-shadow:
    var(--g-inner),
    0 8px 20px rgba(28,26,23,.14),
    0 30px 70px rgba(28,26,23,.20);
}
.scrim, .backdrop, .overlay {
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  background: rgba(28,26,23,.24);
}

/* ------------------------------------------------------------
   8. LANDING
   ------------------------------------------------------------ */
.hero { position: relative; }
.feature { padding: 26px 24px; }

.g-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, rgba(28,26,23,.25), var(--ink));
  z-index: 999;
  pointer-events: none;
}

/* Reveal on scroll — steady, no bounce */
.g-rise { opacity: 0; transform: translateY(18px); filter: blur(4px); }
.g-rise.g-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity .8s var(--ease-g), transform .8s var(--ease-g), filter .8s var(--ease-g);
}

/* ------------------------------------------------------------
   9. LAYOUT CORRECTIONS
   ------------------------------------------------------------ */

/* A <button> shrinks to its content even at display:block, so card-style
   buttons in a masonry column or grid cell render at content width and leave
   a dead gap beside them. Every card-shaped control needs to fill its track. */
.masonry > button,
.masonry > .pressable,
.dash > button,
.dash > .pressable,
.two-col > button,
.grid2 > button,
.grid3 > button,
.block > button.pressable {
  width: 100%;
  text-align: left;
}

/* ------------------------------------------------------------
   10. TYPE
   The palette is fixed, so typography is where the quality has to come
   from: a tighter optical scale, real numerals, and balanced headings.
   ------------------------------------------------------------ */
.screen-title,
h1, h2 {
  letter-spacing: -0.021em;
  text-wrap: balance;
}
h3, h4, .card-title { letter-spacing: -0.012em; }
p, .lead, .screen-sub, .card-text { text-wrap: pretty; }

/* Figures should never wobble as they animate or update */
.stat-num, .stat .num, .gpa, .ring-num, .metric, .kicker,
.tabbtn span, time, [class*="-num"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Small caps labels get proper optical tracking */
.kicker, .label, .field-label, .tabbtn span {
  letter-spacing: 0.09em;
}

/* ------------------------------------------------------------
   11. RESPONSIVE POLISH
   ------------------------------------------------------------ */

/* Six tab items is tight at 375px — drop the label size and let the icons
   carry it, rather than letting the words collide. */
@media (max-width: 420px) {
  .tabbtn span { font-size: 8px; letter-spacing: 0.4px; }
  .tabbtn { padding: 10px 0 8px; gap: 4px; }
  .tabbtn svg { width: 19px; height: 19px; }
  .tabbar { margin: 0 10px 6px; }
}

@media (max-width: 360px) {
  .screen { padding-left: 14px; padding-right: 14px; }
  .tabbtn span { font-size: 0; }        /* icons only on the narrowest phones */
  .tabbtn svg { width: 21px; height: 21px; }
  .tabbtn { padding: 13px 0; }
}

/* Wide screens: let the dashboard breathe instead of stranding a column */
@media (min-width: 1600px) {
  .screen { max-width: 1320px; }
  .masonry { column-width: 400px; }
}

/* Coarse pointers get no hover lift — it only ever flashes on tap */
@media (hover: none) {
  .card:hover, .stat:hover, .tile:hover,
  .interest-card:hover, .feature:hover { transform: none; }
  .card::after, .stat::after, .tile::after,
  .interest-card::after, .feature::after { display: none; }
}

/* ------------------------------------------------------------
   12. FALLBACKS & PREFERENCES
   ------------------------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .empty, .stat, .tile, .interest-card, .feature,
  .modal, .sheet, .sidebar, .mobile-topbar, .tabbar, .lp-nav,
  .field, input, select, textarea { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .g-rise, .g-rise.g-in { opacity: 1; transform: none; filter: none; transition: none; }
  .card::after, .stat::after, .tile::after,
  .interest-card::after, .feature::after { display: none; }
  .g-progress { display: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}