/* ==========================================================================
   assets/glass-surfaces.css — glass for the public site, the public
   assistant and administration.        (Glass System v1.1)

   WHY ONE FILE FOR THREE SURFACES
   -------------------------------
   The previous release adopted glass on the member workspace only, and said
   so. That was a defensible staging decision and the wrong outcome: three of
   four surfaces still looked like a different product, which is exactly the
   problem a design system exists to prevent.

   This is the adoption layer for the other three. It maps their EXISTING
   selectors onto the glass primitives in glass.css. No page markup changes, no
   component stylesheet is edited, and removing this one file returns all three
   surfaces to their previous appearance.

   THE SAME TWO CONSTRAINTS APPLY
   ------------------------------
     · blur only on elements that float — measured per surface below
     · the ambient backdrop capped at --g-backdrop-max so text through glass
       still clears AA (the arithmetic is in glass.css)

   THE TOKEN COLLISION THIS RESOLVES
   ---------------------------------
   These three surfaces each declare their own --accent, --ink and --line, and
   they disagree — administration is TEAL (#0E7A6C) where the rest of the
   platform is blue. That was documented in tokens.css as a known divergence.

   It is resolved here rather than by editing three stylesheets: each surface's
   own tokens are repointed at the shared foundation. One line per token. Their
   component rules keep working untouched, and the platform stops having two
   brand colours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · TOKEN RECONCILIATION

   Repointing, not renaming. Every existing rule that says var(--accent) keeps
   working and now resolves to the platform accent.
   -------------------------------------------------------------------------- */
:root {
  --accent:     var(--g-accent, var(--k-accent, #3160FB));
  --accent-2:   var(--k-accent-600, #2049D6);
  --accent-ink: var(--g-on-accent, #080C12);
  --line:       var(--g-edge, rgba(255,255,255,.10));
  --panel:      var(--g-tint, rgba(255,255,255,.06));
  --shadow:     var(--g-shadow);
}

/* --------------------------------------------------------------------------
   2 · THE AMBIENT BACKGROUND — identical to the member surface
   -------------------------------------------------------------------------- */
body {
  background: var(--g-base);
  position: relative;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(var(--g-grid) 1px, transparent 1px) 0 0 / var(--g-grid-size) var(--g-grid-size),
    linear-gradient(90deg, var(--g-grid) 1px, transparent 1px) 0 0 / var(--g-grid-size) var(--g-grid-size),
    radial-gradient(60% 50% at 18% 0%,   var(--g-backdrop-max) 0%, transparent 62%),
    radial-gradient(50% 45% at 88% 12%,  var(--g-backdrop-max) 0%, transparent 58%),
    radial-gradient(70% 60% at 50% 108%, var(--g-backdrop-max) 0%, transparent 66%),
    var(--g-base);
}
body::after {
  content: "";
  position: fixed; inset: -40% -10%; z-index: -1; pointer-events: none;
  background: linear-gradient(104deg, transparent 42%,
              rgba(255,255,255,.020) 50%, transparent 58%);
  animation: g-drift 42s linear infinite;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   3 · PUBLIC SITE  ·  index · category · archive · view · search · sitemap
       studio · intelligence · billing

   Floating elements here: the sticky header and the mobile drawer. Everything
   else is in the flow and gets the look without the blur.
   -------------------------------------------------------------------------- */
.site-head, .nav-drawer, .topbar {
  background: var(--g-tint);
  border-bottom: 1px solid var(--g-edge);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%);
  backdrop-filter: blur(var(--g-blur)) saturate(140%);
}

.card, .post-card, .cat-card, .doc-card, .feature, .panel, .tile, .hero-card {
  background: var(--g-tint);
  border: 1px solid var(--g-edge);
  border-radius: var(--k-radius-lg, 13px);
  box-shadow: var(--g-shadow);
  transition: transform var(--m-fast, 150ms) var(--m-out, ease),
              box-shadow var(--m-fast, 150ms) var(--m-out, ease),
              border-color var(--m-fast, 150ms) var(--m-out, ease);
}
.card:hover, .post-card:hover, .cat-card:hover, .doc-card:hover, .tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--g-shadow-lg);
  border-color: var(--g-edge-strong);
}

/* Workspace identity on the public surface, by page. */
.page-studio       { --g-accent: var(--g-studio); }
.page-intelligence { --g-accent: var(--g-assistant); }
.page-knowledge,
.page-category,
.page-archive      { --g-accent: var(--g-knowledge); }

/* --------------------------------------------------------------------------
   4 · PUBLIC ASSISTANT  ·  assistant.php
   -------------------------------------------------------------------------- */
.kj-shell { --g-accent: var(--g-assistant); }

.kj-panel, .kj-msg, .kj-sources, .kj-composer {
  background: var(--g-tint);
  border: 1px solid var(--g-edge);
  border-radius: var(--k-radius-lg, 13px);
  box-shadow: var(--g-shadow);
}
.kj-head, .kj-bar {
  background: var(--g-tint);
  border-bottom: 1px solid var(--g-edge);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%);
  backdrop-filter: blur(var(--g-blur)) saturate(140%);
}
.kj-input, .kj-textarea {
  background: var(--g-tint-sunken);
  border: 1px solid var(--g-edge);
  border-radius: var(--k-radius-md, 9px);
}
.kj-input:focus, .kj-textarea:focus {
  background: var(--g-tint);
  border-color: color-mix(in srgb, var(--g-accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 16%, transparent);
}

/* --------------------------------------------------------------------------
   5 · ADMINISTRATION  ·  19 views

   Deliberately the SETTINGS accent — slate. Administration is where an
   operator changes things that affect everyone, and a calm surface is the
   right signal. It also removes the teal/blue brand split.
   -------------------------------------------------------------------------- */
.admin-shell, body.admin { --g-accent: var(--g-settings); }

.admin-nav, .admin-top, .cmdk {
  background: var(--g-tint);
  border-color: var(--g-edge);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%);
  backdrop-filter: blur(var(--g-blur)) saturate(140%);
}

.admin-card, .stat, .table-wrap, .form-card, .section, .kpi {
  background: var(--g-tint);
  border: 1px solid var(--g-edge);
  border-radius: var(--k-radius-lg, 13px);
  box-shadow: var(--g-shadow);
}
.admin-card thead th, .table-wrap thead th, table thead th {
  background: var(--g-tint-raised);
}
table tbody tr:hover { background: var(--g-tint); }

/* --------------------------------------------------------------------------
   6 · SHARED CONTROLS — every surface, one behaviour

   Each fill sets its text colour in the SAME block. That pairing is the fix
   for the reported bug: a rule that changes one without the other is the bug.
   -------------------------------------------------------------------------- */
.btn, .button, .btn-sm, .cta {
  background: var(--g-tint);
  border: 1px solid var(--g-edge);
  border-radius: var(--k-radius-full, 999px);
  color: var(--k-text, #F6F8FB);
  transition: background var(--m-instant, 90ms) var(--m-out, ease),
              border-color var(--m-instant, 90ms) var(--m-out, ease),
              transform var(--m-instant, 90ms) var(--m-out, ease);
}
.btn:hover, .button:hover, .cta:hover {
  background: var(--g-tint-raised);
  border-color: var(--g-edge-strong);
  color: var(--k-text, #F6F8FB);
}
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn:focus-visible, .button:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--g-accent); outline-offset: 2px;
}

.btn-primary, .cta-primary, .btn.primary {
  background: var(--g-accent);
  border-color: transparent;
  color: var(--g-on-accent);
}
.btn-primary:hover, .cta-primary:hover, .btn.primary:hover {
  filter: brightness(1.07);
  color: var(--g-on-accent);       /* explicit: brightness must not be read as licence to inherit */
}
.btn-primary .ic, .cta-primary .ic { color: inherit; }

.btn-danger, .btn.danger { color: var(--k-danger, #D6455B); border-color: var(--k-danger, #D6455B); }
.btn-danger:hover, .btn.danger:hover {
  background: var(--k-danger, #D6455B);
  color: var(--g-on-danger);
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], textarea, select, .input, .field input {
  background: var(--g-tint-sunken);
  border: 1px solid var(--g-edge);
  border-radius: var(--k-radius-md, 9px);
  color: var(--k-text, #F6F8FB);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  background: var(--g-tint);
  border-color: color-mix(in srgb, var(--g-accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 16%, transparent);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--g-accent); outline-offset: 1px;
}

/* Empty states — the brief names them, and they are where a product most often
   stops feeling designed. */
.empty, .empty-state, .no-results {
  background: var(--g-tint-sunken);
  border: 1px dashed var(--g-edge);
  border-radius: var(--k-radius-lg, 13px);
}

/* --------------------------------------------------------------------------
   7 · FALLBACKS — identical to the member surface
   -------------------------------------------------------------------------- */
@supports not (backdrop-filter: blur(1px)) {
  .site-head, .nav-drawer, .topbar, .kj-head, .kj-bar,
  .admin-nav, .admin-top, .cmdk { background: var(--g-tint-raised); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  input:focus, textarea:focus, select:focus { border-color: var(--g-accent); box-shadow: none; }
}

@media (max-width: 760px) {
  .site-head, .nav-drawer, .topbar, .kj-head, .kj-bar,
  .admin-nav, .admin-top, .cmdk {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--g-tint-raised);
  }
  body::after { display: none; }
}

@media (pointer: coarse) {
  .btn, .button, .cta { min-height: var(--k-tap-min, 44px); }
  .card:hover, .post-card:hover, .tile:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: .5; }
  .card:hover, .post-card:hover, .cat-card:hover, .doc-card:hover, .tile:hover { transform: none; }
}
html[data-motion="off"] body::after { animation: none; }
html[data-motion="off"] .card:hover, html[data-motion="off"] .tile:hover { transform: none; }

@media (forced-colors: active) {
  body::before, body::after { display: none; }
  .site-head, .nav-drawer, .topbar, .kj-head, .kj-bar, .admin-nav, .admin-top,
  .cmdk, .card, .post-card, .cat-card, .doc-card, .tile, .admin-card, .stat,
  .btn, .button, .cta, input, textarea, select {
    background: Canvas; border: 1px solid CanvasText; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .btn:focus-visible, input:focus-visible { outline: 2px solid Highlight; }
}

@media print {
  body::before, body::after { display: none !important; }
  .card, .post-card, .admin-card, .stat, .kj-panel, .site-head, .admin-nav {
    background: none !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}