/* ============================================================
   Karan OS — Highfell (theme #3, Wave 37m, Connected Worlds Phase 4)
   The high fells: slate greys, storm blues, bone and horn. A cold,
   wind-carved country — the opposite mood of the Arcanum's candlelit
   gold and the Wilds' sunlit green. Every rule below is scoped under
   body.dragons or is itself a .drg- class, mirroring css/wilds.css
   and css/arcana.css's structure exactly — the theme contract's law 1
   (the base OS is whole without us, docs/THEME-CONTRACT.md) is a CSS
   rule as much as a JS one.

   Ember (--drg-ember / --accent) is a SPARING ACCENT ONLY, never a
   wash — W37g's lesson, learned on this exact project, was that a
   body-wide glow reads as one plastic material. Highfell's desktop,
   menubar, dock and window chrome stay cold; ember only ever touches
   small, deliberate things (the trust gauge's fill, the token that
   base UI already borrows var(--accent) for — a dot, a hover, never
   a surface).

   Colour discipline: everything below derives from ONE declared set
   of custom properties (--drg-slate / --drg-storm / --drg-bone /
   --drg-horn / --drg-ember, plus two "-hi"/"-dark" steps of them),
   so retinting the world is one block, not five greps. Three of them
   are not invented for this file — they are the exact hex values
   js/dragons/highfell.js's own palette already uses for the 3-D fells
   (C.bone, the stormcairn sky, C.peat), so the OS chrome and the
   world you fly in agree about what "Highfell" looks like.

   Owned classes (JS builds the nodes; this file gives them their
   *resting* look only, same convention as css/arcana.css's header):
     .drg-wind-row / .drg-gust     — the wind line above the dock,
                                      Highfell's answer to the Wilds'
                                      grass row. Layout is inline; JS
                                      owns the dock offset, exactly as
                                      .wld-grass-row's own comment says.
     .drg-scrim .drg-panel .drg-grid .drg-card .drg-chip .drg-gauge
     .drg-x                        — the shared overlay-panel look for
                                      a future hub/ledger surface, same
                                      skeleton as the Wilds' Field
                                      Ledger and the Arcanum's collection
                                      panels. Highfell only has TWO card
                                      states (met / unmet) — bond.js
                                      tracks a bond's presence and a
                                      trust tier, nothing a third state
                                      could hang off.

   NOT themed here, on purpose (see the build report for the full list):
   js/apps/roost.js injects its own complete <style> block already —
   this file must never duplicate a .roost- rule, only let roost.js's
   OWN reads of var(--glass)/var(--border)/var(--text)/var(--radius)
   pick up Highfell's cold palette for free. And no 3-D flight-app HUD
   classes are declared here (no .drg-app/.drg-hud/.drg-joy): unlike
   the Wilds' js/apps/wilds.js, no js/apps/dragons.js exists yet to
   consume them, and PHASE4-DRAGON-WORLD.md §6b already specs real
   control requirements (stick, fire/brake/land, reset) that a real
   future author should design classes against — not this file guessing.

   Every animation is wrapped in
   @media (prefers-reduced-motion: no-preference).
   ============================================================ */

/* ---- token overrides ---- */
body.dragons {
  --accent: #c2603a;
  --bg: #14171c;
  --text: #eef0ea;
  --text-dim: #94a1ab;
  --glass: rgba(20,24,29,.62);
  --glass-strong: rgba(23,27,33,.86);
  --border: rgba(150,168,190,.24);
  --shadow: 0 18px 50px rgba(0,0,0,.5);
  --radius: 10px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Highfell-only extended tokens, reused across the sections below.
     --drg-storm and --drg-bone are not chosen freely: they are the
     literal hex js/dragons/highfell.js already uses for Stormcairn's
     sky (0x7d95ae) and for the hoard's C.bone (0xd6d0c0); --drg-horn
     is that same file's C.peat (0x473d33). The chrome and the fells
     read as the same place. */
  --drg-slate: #6c7480;
  --drg-slate-dark: #14171c;
  --drg-storm: #7d95ae;
  --drg-bone: #d6d0c0;
  --drg-bone-hi: #eef0ea;
  --drg-horn: #473d33;
  --drg-ember: #c2603a;
  --drg-glow: 0 0 14px rgba(194,96,58,.4);
}

/* ---- desktop / wallpaper: the high cold sky ----
   #wallpaper is always a procedurally-drawn <canvas> (js/wallpaper.js)
   never an arbitrary user photo, so a bold cold-grade filter is safe
   here the same way arcana.css's sepia grade is. */
body.dragons #wallpaper {
  filter: saturate(.65) brightness(.58) hue-rotate(178deg) contrast(1.12);
}
body.dragons #desktop {
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(125,149,174,.28), transparent 60%),
    radial-gradient(100% 60% at 50% 115%, rgba(20,23,28,.55), transparent 70%);
}

/* ---- menubar ---- */
body.dragons #menubar {
  background: linear-gradient(180deg, rgba(30,35,42,.88), rgba(18,21,26,.82));
  border-bottom: 1px solid var(--border);
}

/* ---- dock: a wind-scoured stone ledge ---- */
body.dragons #dock {
  background: rgba(26,31,38,.56);
  border: 1px solid var(--border);
}

/* ---- windows ---- */
body.dragons .window {
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
body.dragons .titlebar {
  background: linear-gradient(180deg, rgba(48,56,66,.92), rgba(26,30,36,.92));
  border-bottom: 1px solid var(--border);
}

/* ---- the wind line above the dock ----
   Highfell's equivalent of the Wilds' grass row: not blades bending in
   sun, but thin bands of wind-driven haze scoured sideways across a
   ledge. Layout is inline (JS owns the dock offset) — .wld-grass-row's
   own convention, unchanged here. */
body.dragons .drg-wind-row { }

body.dragons .drg-gust {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--drg-storm) 35%, var(--drg-bone) 55%, transparent);
  opacity: .38;
}

@media (prefers-reduced-motion: no-preference) {
  body.dragons .drg-gust { animation: drg-blow 5.5s ease-in-out infinite; }
  body.dragons .drg-gust:nth-child(2n) { animation-duration: 4.6s; animation-delay: -1.2s; }
  body.dragons .drg-gust:nth-child(3n) { animation-duration: 6.4s; animation-delay: -2.4s; }
  @keyframes drg-blow {
    0%, 100% { transform: translateX(-6%); opacity: .28; }
    50%      { transform: translateX(6%); opacity: .5; }
  }
}

/* ---- the shared panel look (a future hub/ledger surface) ----
   Same skeleton as the Wilds' Field Ledger and the Arcanum's collection
   panels: one scrim, one sheet, a grid of cards. Transitions only — no
   rAF, nothing to tear down but the overlay itself. */
.drg-scrim {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(10,13,17,.64);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.drg-panel {
  width: min(880px, 94vw);
  max-height: 84vh;
  overflow-y: auto;
  padding: 22px 24px 28px;
  border-radius: 16px;
  color: #262b30;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 40%),
    var(--drg-bone);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  font-family: var(--font);
}
.drg-panel h2 { margin: 0 0 2px; font-size: 25px; letter-spacing: .01em; }
.drg-panel .drg-sub { margin: 0 0 18px; color: #5c646c; font-size: 14px; }

.drg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.drg-card {
  border-radius: 12px;
  padding: 12px 12px 14px;
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(90,100,110,.28);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.drg-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.drg-card .drg-name { font-weight: 600; margin-top: 8px; font-size: 15px; }
.drg-card .drg-line { font-size: 12px; color: #5c646c; margin-top: 4px; line-height: 1.35; }

/* the only other state: bond.js has "met" (a bond record exists) and a
   trust tier — no third "kept" state to hang a card variant off, unlike
   the Wilds' three-state roster. */
.drg-card.unmet { background: rgba(70,76,84,.1); border-style: dashed; }
.drg-card.unmet .drg-name { color: #7b828a; }

.drg-gauge { height: 5px; border-radius: 3px; background: rgba(70,80,90,.18); margin-top: 8px; overflow: hidden; }
.drg-gauge > i { display: block; height: 100%; background: var(--drg-ember); border-radius: 3px; box-shadow: var(--drg-glow); }

.drg-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(125,149,174,.2); color: #3d4c5c; margin: 0 2px;
}

.drg-x {
  position: absolute; top: 14px; right: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(90,100,110,.3); background: rgba(255,255,255,.45);
  font-size: 17px; line-height: 1; cursor: pointer; color: #333a41;
}

/* ---- 375px ---- */
@media (max-width: 420px) {
  .drg-panel { padding: 16px 14px 22px; max-height: 88vh; }
  .drg-panel h2 { font-size: 20px; }
  .drg-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .drg-card { padding: 10px 8px 12px; }
  .drg-x { width: 44px; height: 44px; top: 10px; right: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   THE WIND LINE — Highfell's always-on desktop signature
   ════════════════════════════════════════════════════════════════════════════
   The Arcanum has its candle row, the Wilds their grass line; this is the one
   piece of Highfell that is on whenever the theme is, so the desktop itself
   says which world you are standing in.

   Written by the main model rather than the stylesheet's author, because
   js/dragons/mode.js's markup was written AFTER that file was dispatched — a
   real seam in parallel work: an agent cannot style DOM that did not exist when
   it started. The markup is `div.drg-windline > i * 14`, each carrying `--i`
   (its index) and `--drift` (its own duration, 5.5s–9.4s, deterministic).

   High fell country is defined by WIND, so this is a scoured band that DRIFTS
   rather than anything that stands up — the opposite of the Wilds' blades, and
   the difference should be readable at a glance.

   It sits ABOVE the dock and is inert: pointer-events none, aria-hidden in the
   markup, and no JS loop anywhere. A permanent desktop element may not cost a
   frame callback, so the motion is entirely CSS and disappears under
   prefers-reduced-motion for free. */
body.dragons .drg-windline {
  position: fixed;
  left: 0; right: 0;
  bottom: 74px;
  height: 12px;
  z-index: 1;
  pointer-events: none;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  opacity: .5;
}

body.dragons .drg-windline > i {
  display: block;
  /* `--w` is set per mark by js/dragons/mode.js. It is NOT calc()'d here
     because calc() has no modulo operator — `%` inside calc() is PERCENT, so
     the expression is invalid rather than wrong and the whole declaration is
     dropped. Measured: every mark rendered 0px wide. */
  width: var(--w, 36px);
  height: 1px;
  border-radius: 1px;
  /* a scour mark: bright in the middle, nothing at the ends */
  background: linear-gradient(90deg,
    transparent 0%,
    var(--drg-bone-hi, #e8eef3) 45%,
    var(--drg-bone, #d6d0c0) 60%,
    transparent 100%);
  transform: translateX(0);
}

/* Motion only where it is welcome. Everything above still reads as a
   wind-scoured band when this block never applies. */
@media (prefers-reduced-motion: no-preference) {
  body.dragons .drg-windline > i {
    animation: drg-drift var(--drift, 7s) linear infinite;
    animation-delay: calc(var(--i) * -0.42s);
  }
}

@keyframes drg-drift {
  0%   { transform: translateX(-14px); opacity: 0; }
  18%  { opacity: .85; }
  82%  { opacity: .85; }
  100% { transform: translateX(14px); opacity: 0; }
}

/* the mobile dock is taller, so the band moves up with it */
@media (max-width: 420px) {
  body.dragons .drg-windline { bottom: calc(var(--chrome-b) + 36px); height: 10px; }
}