/* ============================================================
   gf-bridge.css - the B1 Glasshouse (plain) translation layer for the LEGACY
   vocabulary. Loaded LAST on every page (after the page's own stylesheet),
   it does two things:

   1. Rebases the legacy design tokens (--paper/--ink/--accent/--hair...)
      that hundreds of inline styles and old rules read, so every element
      that referenced the paper-era palette recolors to B1 at once.
   2. Restyles the legacy component classes (buttons, cards, chips, inputs,
      tiles, toolbars, footers) to the system recipes, so every card on
      every page carries the glass/grain material without per-page surgery.

   As pages are rebuilt onto gf.css components this file shrinks; the P5
   sweep deletes any rule whose class no longer appears in the tree.
   ============================================================ */

/* ---- 1. Token rebase ------------------------------------------------------ */
:root {
  --paper: #FBFDFC;
  --paper-2: #F3F8F5;
  --paper-3: #E6F0EA;
  --panel: #FDFDFB;
  --ink: #0A2A21;
  --ink-2: #3E564D;
  --ink-3: #718880;
  --ink-4: #8FA39B;
  --hair: #DCE9E2;
  --hair-2: #E8F1EB;
  --accent: #10A374;
  --accent-2: #34C393;
  --ok: #10A374;
  --warn: #A34F38;
  --idle: #718880;
  --forecast: #B8891E;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bd: rgba(255, 255, 255, 0.9);
  --glass-hi: rgba(255, 255, 255, 0.92);
}

/* ---- 2. Legacy components in system dress --------------------------------- */

/* Buttons (editorial + explore + matcher + account all share .btn). */
.btn {
  border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.85) !important;
  font-weight: 570;
  background: rgba(255, 255, 255, 0.6);
  color: #0A5C42;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 18px rgba(10, 92, 66, 0.10);
}
.btn.solid {
  color: #fff !important; border: 0 !important;
  background: linear-gradient(180deg, #12916A, #0D6B4D) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px rgba(13, 107, 77, 0.35) !important;
}
.btn.line, .btn.ghost { background: rgba(255, 255, 255, 0.6); }
/* Clear buttons NEVER turn black on hover (explore.css and editorial-page.css
   both hovered .btn / .btn.line to var(--ink), which read as "clickable = black"
   -- wrong vocabulary, hard to read mid-transition, and it exposed the inset top
   highlight). One sage-glass hover for every clear button, app-wide. The green
   solid button just brightens. Loaded last, so these win. */
.btn:hover, .btn.line:hover, .btn.ghost:hover, .btn.glass:hover, .btn.quiet:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0A5C42 !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(10, 92, 66, 0.14) !important;
}
.btn.solid:hover {
  color: #fff !important;
  background: linear-gradient(180deg, #14A078, #0F7A58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 30px rgba(13, 107, 77, 0.4) !important;
  transform: translateY(-1px);
}
.tlink { color: #0A5C42; font-weight: 550; }

/* The white data/content cards: account panels, matcher report cards,
   docs/pricing def tables. Plain near-white, hairline-free (shadows do
   the work). */
.ac-card, .mt-card, .xp-fact {
  position: relative;
  background: #FDFDFB !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(10, 92, 66, 0.08), 0 14px 36px rgba(10, 42, 33, 0.08);
}
.ac-card { padding: 18px 20px; }

/* Home slide cards (triad, how-steps, report phases, use cases, final
   actions): the gf-tile frosted-glass material, exactly - translucent
   white, 1px light border, blur. One material for every marketing card. */
.tc, .uc, .how, .phase, .fa-row {
  position: relative;
  background: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 28px rgba(10, 92, 66, 0.10);
}

/* Glass metric strips and tiles (matcher report metrics, admin metrics). */
.mt-metricrow, .xp-toolbar {
  background: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 28px rgba(10, 92, 66, 0.10) !important;
}
.mt-metric { border-right: 1px solid rgba(10, 92, 66, 0.10) !important; }

/* Form controls: matcher inputs/selects/textarea + chips + tier cards. */
.mt-input, .mt-textarea, .mt-selw select {
  border: 1px solid rgba(255, 255, 255, 0.9) !important; border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(10, 92, 66, 0.06) !important;
}
.mt-input:focus, .mt-textarea:focus, .mt-selw select:focus {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(16, 163, 116, 0.16) !important;
}
.mt-chipt {
  border: 1px solid rgba(255, 255, 255, 0.9) !important; background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Selected chips recolor only - same font weight and padding as unselected,
   so toggling never changes the chip's size. */
.mt-chipt.on {
  background: linear-gradient(180deg, #E8F7F0, #D5EFE3) !important; color: #0A5C42 !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(10, 92, 66, 0.15) !important;
}
.mt-tier {
  border: 1px solid rgba(255, 255, 255, 0.9) !important; border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(10, 92, 66, 0.08) !important;
}
.mt-tier.on {
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 0 0 2px #10A374, 0 12px 30px rgba(16, 163, 116, 0.18) !important;
}

/* Account rows/lists + fine print inherit token recolor; keep row hover sage. */
.ac-repitem:hover { background: #F6FAF7; }
.ac-tab { border-radius: 10px !important; }
.ac-tab.active { background: rgba(255, 255, 255, 0.85) !important; color: #0A5C42 !important;
  box-shadow: inset 0 1px 1px #fff, 0 3px 10px rgba(10, 92, 66, 0.10); }

/* Home editorial sections: section numbers and reveal blocks read system ink;
   the final CTA band and stage chrome go glass. The 3D grant-field canvas and
   its stage survive untouched apart from the frame material. */
.sec-num { color: #0A5C42 !important; }
.stage { border-radius: 18px; }
.stage-chrome { background: rgba(255, 255, 255, 0.6) !important; }
.band.light { background: transparent !important; }
.hero-live b { color: #0A5C42; }

/* Footers: one quiet system footer everywhere. */
.footer, .xp-foot { background: transparent !important; border-top: 1px solid rgba(10, 92, 66, 0.14) !important; }
.footer .fcol a:hover { color: #0A5C42; }

/* Brand marks outside the masthead (footers, sign-in modal): the gem, not
   the legacy ink square. 26px < 30px, so no specular facet at this size. */
.brand .mk {
  width: 26px !important; height: 26px !important; border-radius: 8px !important;
  background: radial-gradient(120% 130% at 45% -10%, #B9F5D9 0%, #34C393 35%, #0F7B57 70%, #073821 100%) !important;
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.85), inset 0 -4px 8px rgba(4, 38, 27, 0.5), 0 5px 14px rgba(15, 123, 87, 0.4) !important;
  animation: none !important;
}
.brand .mk::before, .brand .mk::after { content: none !important; }

/* Modals (sign-in, matcher detail): glass panel instead of flat paper. */
.modal, .xp-modal {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.9) !important; border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(10, 42, 33, 0.22) !important;
}