/* ============================================================================
   Ripple Core design layer
   ----------------------------------------------------------------------------
   Built 2026-09-20 to pull manager-/owner-/dispatch-dashboard onto the same
   generation as the Ripple Core pages. Dan signed in through the Manager ring,
   landed on the 2026-09-04 dashboard generation and said: "it's a completely
   different site than we just made for dilon and the core... we have parallel
   shit or something." He was right -- four design generations were live at once.

   HOW THIS IS APPLIED, AND WHY IT IS A SEPARATE FILE
   Linked AFTER each page's own inline <style>, so it wins on equal specificity
   without any of their CSS being deleted or rewritten. Those three pages carry
   real logic -- Firebase auth, live data, interactive tiles -- and the safest
   reskin is one that only ever ADDS a later, overriding layer. No markup moves,
   no JS is touched, and removing the one <link> reverts the whole thing.

   It is also the first real shared stylesheet on this site. Every page until now
   hand-copied its own tokens, which is why the plaid once silently vanished from
   the scanner and why four generations could drift apart unnoticed -- flagged in
   ideas.md 2026-09-08 and never fixed. Anything reskinned after this should link
   here rather than copy from here.

   Tier: Touch of Grey. Ripple Core spans both stations, so it cannot wear a
   station color -- Purple Haze means DIN6, Scarlet Begonias means DII5.
   ============================================================================ */

/* ---------- tokens ----------
   The dashboards already use var(--accent) / var(--accent-ink) / var(--border)
   throughout, so redefining the palette here reskins most of their chrome for
   free. Neutral Graphite (#4a5568) out, Touch of Grey in. --accent2 is the
   branding doc's locked #8a8d91, kept in exactly its documented role. */
:root{
  --accent:#6f747a;
  --accent-rgb:111,116,122;
  --accent2:#8a8d91;
  --accent-ink:#3f4347;
  --card:rgba(255,255,255,.82);
  --line:rgba(35,31,32,.12);
  --border:rgba(35,31,32,.12);
  --surface:rgba(255,255,255,.55);
}

/* ---------- woven plaid ground ----------
   Same recipe and token values as the Core pages, which took it from the live
   Problem Solver's light translation. multiply (not screen) is what reads
   against a light --bg. */
body{
  background-color:var(--bg,#eef1f4);
  background-repeat:repeat;
  background-size:148px 148px;
  background-blend-mode: screen, screen, multiply, multiply, normal;
  background-image:
    linear-gradient(90deg, transparent 0 58px, rgba(255,252,244,.4) 58px 61px, transparent 61px 148px),
    linear-gradient(0deg,  transparent 0 58px, rgba(255,252,244,.4) 58px 61px, transparent 61px 148px),
    linear-gradient(90deg, rgba(var(--accent-rgb),.09) 0 34px, transparent 34px 50px, rgba(13,27,42,.06) 50px 72px, transparent 72px 96px, rgba(var(--accent-rgb),.05) 96px 104px, transparent 104px 148px),
    linear-gradient(0deg,  rgba(var(--accent-rgb),.09) 0 34px, transparent 34px 50px, rgba(13,27,42,.06) 50px 72px, transparent 72px 96px, rgba(var(--accent-rgb),.05) 96px 104px, transparent 104px 148px),
    none;
}

/* ---------- tiles ----------
   The Core glass card: translucent white over the plaid, hairline accent border,
   blur, and the inset top highlight. Only the container is restyled -- every
   page's own tile-internal rules still apply on top. */
.tile{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(var(--accent-rgb),.16) !important;
  border-radius:20px !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 22px -14px rgba(13,27,42,.3), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
/* DIRECT children only. `.tile h3` also caught the person names inside the Core picker's
   cards and rendered "Jaimee" as tiny uppercase letterspaced label text, killing the
   hierarchy between a card's name and its role. */
.tile > h3, .tile > h2{
  font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink);
}

/* ---------- top bar ----------
   Stays a bar (these pages are built around it) but drops the solid slab for the
   same glass treatment, so it sits on the plaid instead of covering it. */
.topbar{
  background:rgba(255,255,255,.55) !important;
  border-bottom:1px solid rgba(var(--accent-rgb),.16) !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.topbar h1{
  font-size:13px !important; font-weight:800 !important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
}

/* ---------- home button ----------
   The ripple mark at stage 3 of the logo regression ("Ink and wash"), cropped to
   the mark alone -- the full lockup's wordmark is illegible below ~120px.
   Sized by WIDTH because the mark is a ~4.5:1 ellipse; at 44px wide it is 10px
   tall and reads as a smudge. Padding carries the tap target to a real 44px. */
.rc-home{
  display:inline-flex; align-items:center; flex:none;
  min-height:44px; padding:10px 8px; margin:-10px 4px -10px -8px;
  line-height:0; border-radius:12px; text-decoration:none;
  transition:transform .12s ease, opacity .12s ease;
}
.rc-home img{ width:104px; height:auto; display:block; }
.rc-home:hover{ opacity:.72; }
.rc-home:active{ transform:scale(.93); }
.rc-home:focus-visible{ outline:2px solid rgba(var(--accent-rgb),.55); outline-offset:2px; }
@media (max-width:520px){ .rc-home img{ width:82px; } }