/* ==========================================================================
   feature: UI-02

   Glass primitives.

   THE RULE THAT MATTERS: .glass is for a small number of LARGE surfaces
   (nav, sidebar, modal, drawer, toast, hero, summary panel, filter panel,
   stat tile). Repeated items in a long list use .surface instead.

   A 60-card product grid where every card has its own backdrop-filter forces
   the compositor to re-rasterize on every scroll frame. That is the single
   most common way this style produces a janky, battery-draining page, and the
   grid is also the most SEO-critical view. Budget: at most 5 blurred surfaces
   composited per viewport.
   ========================================================================== */

/* ------------------------------------------------------------- backdrop --- */
body {
  background-color: var(--bg-base);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  min-height: 100vh;
}

.app-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 60rem at 12% 8%,  var(--bg-accent-1) 0%, transparent 60%),
    radial-gradient(50rem 50rem at 88% 22%, var(--bg-accent-2) 0%, transparent 58%),
    radial-gradient(55rem 55rem at 45% 95%, var(--bg-accent-3) 0%, transparent 62%),
    var(--bg-base);
  background-attachment: fixed;
  pointer-events: none;
}

/* ---------------------------------------------------------------- glass --- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow);
}

.glass--heavy {
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(160%);
  box-shadow: var(--glass-shadow-lg);
}

.glass--flush { border-radius: 0; }
.glass--lg    { border-radius: var(--r-lg); }
.glass--pad   { padding: var(--s-5); }

/* Browsers without backdrop-filter get an opaque surface, not a transparent
   one, because transparent-without-blur is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-bg-strong); }
}

/* -------------------------------------------------------------- surface --- */
/* The non-blurred sibling of .glass. Use for every repeated list item. */
.surface {
  background: var(--solid-bg);
  border: 1px solid var(--solid-border);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow);
  transition: background var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out);
}

.surface:hover {
  background: var(--solid-bg-hover);
  transform: translateY(-2px);
}

.surface--pad { padding: var(--s-5); }
.surface--flat { box-shadow: none; }

/* ----------------------------------------------------------------- text --- */
/* Text on a glass surface always sits on a scrim, so contrast never depends
   on whatever image happens to be behind the blur. */
.on-glass {
  background: var(--scrim);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
}

.text-muted-token  { color: var(--text-muted); }
.text-subtle-token { color: var(--text-subtle); }

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-tight);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

a { color: var(--c-accent-soft); text-decoration-thickness: 1px; }
a:hover { color: var(--text); }

/* ------------------------------------------------------------------ nav --- */
.glass-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-floating);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--glass-border-soft);
}

.glass-sidebar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-right: 1px solid var(--glass-border-soft);
  min-height: 100%;
}

/* --------------------------------------------------------------- button --- */
.btn-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  color: var(--text);
  padding: var(--s-2) var(--s-5);
  font-weight: 550;
  transition: background var(--dur-fast) var(--ease-out);
}

.btn-glass:hover { background: var(--glass-bg-hover); color: var(--text); }

/* ---------------------------------------------------- quiet button --- */
/* A solid alternative to .btn-glass, for rows of links.
   .btn-glass carries a backdrop-filter, so a dozen of them in one cluster
   is a dozen composited layers the compositor redraws on every scroll
   frame. A navigation row is exactly the repeated element the blur budget
   exists to keep solid. */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--solid-bg);
  border: 1px solid var(--solid-border);
  color: var(--text);
  text-decoration: none;
  font-weight: 550;
  font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease-out);
}

.btn-quiet:hover { background: var(--solid-bg-hover); color: var(--text); }

.btn-accent {
  background: var(--c-accent);
  border: 1px solid var(--c-accent-strong);
  border-radius: var(--r-pill);
  color: var(--text-on-accent);
  padding: var(--s-2) var(--s-5);
  font-weight: 600;
}

.btn-accent:hover { background: var(--c-accent-strong); color: var(--text-on-accent); }

/* Focus is a solid outline, never a glow. A glow disappears against a bright
   backdrop, which is exactly where keyboard users need it most. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent-soft);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ----------------------------------------------------------------- pill --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.15rem var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid var(--glass-border-soft);
  background: var(--scrim);
  color: var(--text-muted);
}

.pill--success { color: var(--c-success); border-color: var(--c-success); }
.pill--warning { color: var(--c-warning); border-color: var(--c-warning); }
.pill--danger  { color: var(--c-danger);  border-color: var(--c-danger); }
/* A count badge is filled rather than outlined, because a number in accent
   text on a translucent nav bar is the one thing glass reliably makes
   unreadable. The fill is the strong accent, not the base one, so white text
   clears 4.5:1 in both themes. Guarded by TestContrast. */
.pill--accent {
  background: var(--c-accent-strong);
  border-color: var(--c-accent-strong);
  color: var(--text-on-accent);
  min-width: 1.35rem;
  justify-content: center;
}

/* Sponsored placement must be visibly labelled. See plan/04-seo.md. */
.pill--sponsored { color: var(--text-subtle); border-style: dashed; }

/* ----------------------------------------------------------- stat tile --- */
.stat-tile {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.stat-tile__value { font-size: var(--fs-2xl); font-weight: 700; }
.stat-tile__label { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------------------------------------------------------------- forms --- */
.form-control,
.form-select {
  background: var(--scrim);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--r-sm);
  color: var(--text);
}

.form-control:focus,
.form-select:focus {
  background: var(--scrim);
  border-color: var(--c-accent);
  color: var(--text);
  box-shadow: none;
}

.form-control::placeholder { color: var(--text-subtle); }
.form-label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 550; }

/* --------------------------------------------------------------- modals --- */
.modal-content {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  color: var(--text);
}

/* --------------------------------------------------------------- images --- */
/* Width and height attributes are required in templates; this keeps the box
   correct while preserving the aspect ratio. */
img { max-width: 100%; height: auto; }

.media-frame {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--solid-bg);
  aspect-ratio: 1 / 1;
}

.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ accessibility preferences ================== */

/* Some viewers find translucency hard to read. Honour that rather than
   assuming everyone wants the effect. */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass-nav,
  .glass-sidebar,
  .btn-glass,
  .modal-content {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .on-glass, .pill, .form-control, .form-select { background: var(--glass-bg-strong); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .app-backdrop { background-attachment: scroll; }
  .surface:hover { transform: none; }
}

@media (forced-colors: active) {
  .glass, .surface, .btn-glass, .pill {
    background: Canvas;
    border: 1px solid CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Small screens: blur is most expensive exactly where devices are weakest. */
@media (max-width: 575.98px) {
  :root { --glass-blur: 10px; --glass-blur-heavy: 14px; }
}

/* ------------------------------------------------------------- utility --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--glass-bg-strong);
  color: var(--text);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  z-index: var(--z-toast);
}

.skip-link:focus { left: var(--s-4); top: var(--s-4); }

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ============================== account pages ============================
   allauth renders its own markup, so these rules style it as a glass card
   without needing a wrapper element the account templates do not provide.
   ========================================================================= */
main.auth-shell {
  max-width: 34rem;
  margin: var(--s-7) auto;
  padding: var(--s-6);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  main.auth-shell { background: var(--glass-bg-strong); }
}

main.auth-shell h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }
main.auth-shell p  { color: var(--text-muted); }

/* allauth's own field element bypasses crispy in a few places, so raw
   controls get the same treatment rather than falling back to browser
   defaults. */
main.auth-shell input:not([type="checkbox"]):not([type="radio"]),
main.auth-shell select,
main.auth-shell textarea {
  width: 100%;
  background: var(--scrim);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: var(--s-2) var(--s-3);
}

main.auth-shell label { color: var(--text-muted); font-size: var(--fs-sm); }
main.auth-shell ul { list-style: none; padding-left: 0; }
main.auth-shell .errorlist { color: var(--c-danger); font-size: var(--fs-sm); }

main.auth-shell button,
main.auth-shell [type="submit"] {
  margin-top: var(--s-3);
  cursor: pointer;
}

@media (prefers-reduced-transparency: reduce) {
  main.auth-shell {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}