/* ==========================================================================
   SCALUS HQ — ULTRA CLEAR LIQUID GLASS (11 Oct 2026).
   Tim: "make all the apps in hq same as super clear liquid glass ios27",
   "you have this mac on ios 27 i want you to use same design principles".

   One file, linked LAST in the head of every HQ page, so it wins over the
   three older generations (hq2.css, hq-house.css, the v1 inline copies)
   without touching their markup. It only redefines the MATERIAL and the
   TYPE; every page keeps its own layout, its own ink and its own colours.

   The principles, taken from the iOS 27 / macOS 27 Liquid Glass this Mac
   runs with the system slider on Clear (NSGlassTintAmount 0):
   1. ULTRA CLEAR. The fill is thin: what is behind the surface shows
      through, diffused by a big blur, and the surface is read by its EDGE.
   2. A DARKENED EDGE, then a BRIGHTER SPECULAR HIGHLIGHT just inside it
      (iOS 27's change over iOS 26). The outer line is dark in both themes,
      the inner rim and the top highlight are light.
   3. THE SYSTEM FONT. SF on the Mac and the iPhone, the system face
      elsewhere, so HQ's pages set in the same type as its native sidebar.
   4. Navigation floats over content: the header pill is sticky on every
      page and content scrolls under it.
   The Scalus greens, oranges and the ink tokens are untouched: the light
   theme's 4.5:1 green text and the --green-soft / --green-lite split
   (project_hq_scalus_dashboard) still apply, the material just got clearer.

   The Mac app (~/hq-mac/chrome.css) still owns the window tint and the
   header strip inside Scalus HQ.app; it is injected after this file and
   keeps winning where it speaks. Its Glass menu (Clear / Balanced / Tinted)
   is the app side of the same iOS 27 transparency slider.
   ========================================================================== */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,"Inter",sans-serif;
  /* the material, dark */
  --blur:blur(34px) saturate(1.8) brightness(1.08);
  --glass:linear-gradient(160deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 45%, rgba(255,255,255,.02) 100%);
  --glass-2:linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  --glass-base:rgba(8,12,10,.22);
  --glass-line:rgba(0,0,0,.42);
  --glass-hi:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1.5px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.04);
  --glass-shadow:0 16px 44px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.28);
}
:root[data-theme="light"]{
  --blur:blur(34px) saturate(1.6);
  --glass:linear-gradient(160deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.34) 100%);
  --glass-2:linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.30) 100%);
  --glass-base:rgba(255,255,255,.26);
  --glass-line:rgba(16,22,20,.17);
  --glass-hi:inset 0 0 0 1px rgba(255,255,255,.65), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(16,22,20,.04);
  --glass-shadow:0 16px 40px rgba(16,24,20,.12), 0 1px 3px rgba(16,24,20,.07);
}

/* ---------- type: the system face everywhere ---------- */
body,button,input,select,textarea,.btn,.pill,.topbar{font-family:var(--font)}

/* ---------- the glass surfaces ----------
   The header pill (every markup HQ has), cards, figures and tiles. Only the
   material: background, edge, highlight, shadow, blur. Borders on .card are
   left to the page so a card's own state colour (the green "today's move",
   the red error card) still shows. */
body>header,.wrap>header:first-child,.topbar,.card,.fig,.tile{
  background-image:var(--glass);background-color:var(--glass-base);
  box-shadow:var(--glass-hi), var(--glass-shadow);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
}
body>header,.wrap>header:first-child,.topbar,.fig,.tile{border-color:var(--glass-line)}
.card{border-color:var(--glass-line)}
/* The house header floats like the v2 one: sticky, content scrolls under it. */
.topwrap{position:sticky;top:0;z-index:60}
/* Controls: the same darkened edge and a thin top highlight. */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn:not(.primary){border-color:var(--glass-line)}
:root[data-theme="light"] .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.theme-sw,.tabs{border-color:var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
:root[data-theme="light"] :is(.theme-sw,.tabs){box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}