/* ===========================================================================
   BB2G HOUSE STYLE — "Certificate"
   Born Between 2 Generals LLC

   Taken straight off the business card: ivory stock, near-black high-contrast
   serif, antique gold engraving, a black bar with gold letterspaced caps.
   Navy is NOT a brand colour here — it only ever appears inside the flag.

   Drop-in: load this LAST, after whatever stylesheet an app already has.
       <link rel="stylesheet" href="house.css">
   It overrides the component classes the BB2G apps share, so most surfaces
   need nothing else. The bbg-* classes are new furniture you can opt into.
   =========================================================================== */

:root {
  /* stock */
  --paper:#f1ece3;          /* the card's ivory */
  --paper-2:#f7f3ec;
  --panel:#fbf9f4;

  /* ink */
  --ink:#0a0a0a;            /* the card's near-black */
  --ink-2:#3d382f;
  --ink-3:#6f6759;

  /* engraved gold */
  --gold:#a07020;
  --gold-mid:#c9a24a;
  --gold-hi:#f0d0a0;
  --gold-dk:#6f4d14;
  --metal:linear-gradient(180deg,#f0d0a0 0%,#d9b45e 30%,#a07020 64%,#7d5616 100%);
  --rule:rgba(160,112,32,.42);
  --rule-soft:rgba(160,112,32,.18);

  /* flag, used sparingly */
  --red:#a82818;
  --navy:#1b2f5e;

  /* ---- semantic status scale ------------------------------------------
     Meaning, never decoration. RED DISCIPLINE: if it is red, it matters —
     red is reserved for urgent/threat so that red always means "look here".
     Hues are tuned to sit on ivory beside antique gold, not on cream beside
     navy, so they are warmer and lower-chroma than a generic status ramp.
       good = calm/resolved · notice = worth knowing · warn = pile-on forming
       hot  = escalating    · red    = urgent/threat                       */
  --good:#2e6b4f;      --good-soft:#e6f0e8;   --good-line:#bcd6c6;
  --notice:#a07020;    --notice-soft:#f7efdd; --notice-line:#e2cfa4;
  --warn:#b07818;      --warn-soft:#f8eed6;   --warn-line:#e5d2a2;
  --hot:#b8541c;       --hot-soft:#f9e6d6;    --hot-line:#eec8a8;
  --urgent:var(--red); --urgent-soft:#f7e2de; --urgent-line:#e8bcb4;

  --line:var(--rule-soft);
  --shadow:0 1px 1px rgba(35,26,10,.05), 0 10px 26px -16px rgba(35,26,10,.35);
  --shadow-lg:0 2px 8px rgba(35,26,10,.14), 0 34px 70px -28px rgba(35,26,10,.5);

  --serif:"Didot","Bodoni 72","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",system-ui,Arial,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ⚠ NO AUTOMATIC DARK MODE. Kristen's direction is explicit: every app is
   light-themed, never a dark background by default. The house style IS the
   ivory business card — flipping it to near-black because a visitor's OS is
   in dark mode ships a different brand to half the audience, and the gold
   engraving is the first thing to die on a dark ground.

   The `prefers-color-scheme` block that used to live here is deliberately
   gone. Dark stays available only as a DELIBERATE CHOICE the reader makes:
   set html[data-theme="dark"] from a visible control. If an app has no such
   control, it has no dark mode, which is correct.                          */
html[data-theme="dark"] {
  --paper:#0b0a08; --paper-2:#121110; --panel:#17150f;
  --ink:#f3ede2; --ink-2:#cabfab; --ink-3:#8e8574;
  --rule:rgba(201,162,74,.45); --rule-soft:rgba(201,162,74,.2);
  --shadow:0 1px 1px rgba(0,0,0,.5), 0 12px 30px -16px rgba(0,0,0,.8);
}
html[data-theme="light"] {
  --paper:#f1ece3; --paper-2:#f7f3ec; --panel:#fbf9f4;
  --ink:#0a0a0a; --ink-2:#3d382f; --ink-3:#6f6759;
  --rule:rgba(160,112,32,.42); --rule-soft:rgba(160,112,32,.18);
}

/* ------------------------------------------------------------------ stock */
body {
  background:var(--paper) !important;
  color:var(--ink);
  font-family:var(--sans);
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  position:relative;
}
body::before { display:none !important; }          /* retire the old RWB stripe */
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:160px 160px;
  opacity:.05; mix-blend-mode:multiply;
}
html[data-theme="dark"] body::after { opacity:.07; mix-blend-mode:screen; }
body > * { position:relative; z-index:1; }

::selection { background:var(--gold-hi); color:var(--ink); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:0; }
a { color:var(--gold-dk); }
html[data-theme="dark"] a { color:var(--gold-mid); }

/* ------------------------------------------------------------------- type */
h1, h2, h3, .card h2, .sec-head h2, .app-card .name, .ct-modal-head h2,
.onboard-slide h2, .ob-slide h2, .hero h1, header h1, .s3 h3 {
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-.005em;
  text-wrap:balance;
}
.hero h1, header h1 { font-weight:400; letter-spacing:.005em; line-height:1.05; }
p, li, .desc, .card p, .stx { font-variant-numeric:oldstyle-nums proportional-nums; color:var(--ink-2); }
input, select, textarea, .timer, .stat b, time { font-variant-numeric:tabular-nums; }

/* every small label on the card is letterspaced caps */
.eyebrow, .kicker, .app-card .kicker, .sec-num, .ct-menu-h, .ct-foot .gold,
.badge, .sub-h, .group-h, .plabel {
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  color:var(--gold-dk);
}
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .kicker, html[data-theme="dark"] .sec-num, html[data-theme="dark"] .group-h, html[data-theme="dark"] .sub-h { color:var(--gold-mid); }
.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.eyebrow::before { content:"\2605"; font-size:.62rem; color:var(--gold); margin:0; }
.eyebrow::after {
  content:""; flex:1 1 auto; height:1px; min-width:16px;
  background:linear-gradient(90deg,var(--rule),transparent);
}

/* metallic gold text — for wordmarks and figures, never body copy */
.metal, .bbg-metal {
  background:var(--metal); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ------------------------------------------------------- house furniture */
.bbg-frame { position:relative; }
.bbg-frame::before, .bbg-frame::after {
  content:""; position:absolute; pointer-events:none;
}
.bbg-frame::before { inset:10px; border:1px solid var(--rule); }
.bbg-frame::after  { inset:16px; border:1px solid var(--rule-soft); }
.bbg-corner { position:absolute; width:26px; height:26px; border:1.5px solid var(--gold); z-index:2; }
.bbg-corner.tl { top:10px; left:10px;  border-right:0; border-bottom:0; }
.bbg-corner.tr { top:10px; right:10px; border-left:0;  border-bottom:0; }
.bbg-corner.bl { bottom:10px; left:10px;  border-right:0; border-top:0; }
.bbg-corner.br { bottom:10px; right:10px; border-left:0;  border-top:0; }

.bbg-stars { display:flex; gap:11px; justify-content:center; align-items:center; color:var(--gold); }
.bbg-stars::before, .bbg-stars::after {
  content:""; width:64px; height:1px; background:linear-gradient(90deg,transparent,var(--rule));
}
.bbg-stars::after { transform:scaleX(-1); }
.bbg-stars span { font-size:.72rem; letter-spacing:.5em; }

.bbg-starrule { display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--gold); }
.bbg-starrule::before, .bbg-starrule::after {
  content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg,transparent,var(--rule),transparent);
}
.bbg-starrule span { font-size:.72rem; }

.bbg-bar {
  background:#0a0a0a; color:var(--gold-hi);
  padding:13px 18px; text-align:center;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; font-weight:700;
  border-top:1px solid var(--gold); border-bottom:1px solid var(--gold);
}
.bbg-bar b { font-weight:700; color:var(--gold-hi); }
.bbg-bar .sep { color:var(--gold); opacity:.7; margin:0 12px; }

.bbg-mark { display:block; margin:0 auto; }
.bbg-tagline { font-family:var(--serif); font-style:italic; color:var(--gold-dk); }

/* ------------------------------------------------------------- headers */
header, .hero, header.site {
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,var(--paper-2),var(--paper)) !important;
  color:var(--ink) !important;
  border-bottom:none !important;
  box-shadow:inset 0 -1px 0 var(--rule), 0 1px 0 var(--rule-soft);
  position:relative; overflow:hidden;
}
header::after, .hero::after {
  content:""; position:absolute; inset:auto 0 0 0; height:4px;
  background:linear-gradient(90deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent);
  border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
  background-clip:content-box;
}
header h1, .hero h1, header.site h1 { color:var(--ink) !important; }
header p, .hero .lead, header.site .tag { color:var(--ink-2) !important; }
.hero .kick { color:var(--gold-dk) !important; }
.corner { border-color:var(--gold) !important; }

.badge {
  display:inline-block; background:transparent !important;
  border:1px solid var(--rule) !important; color:var(--gold-dk) !important;
  border-radius:0 !important; padding:6px 18px !important; box-shadow:none !important;
}
.badge::before { content:"\2605"; color:var(--gold); margin-right:10px; }
html[data-theme="dark"] .badge { color:var(--gold-mid) !important; }

/* app hero emblem sits in a ruled roundel */
.hero-art, .medallion { position:relative; }
.hero-art::before, .medallion::before { border-color:var(--rule) !important; }
.hero-art::after, .medallion::after { border-color:var(--rule-soft) !important; }
.hero-art svg [stroke="#fff"], .hero-art svg [stroke="#ffffff"] { stroke:var(--ink); }
.hero-art svg [stroke="#9db8d6"] { stroke:var(--gold-mid); }
.hero-art svg [fill="#c5a046"] { fill:var(--gold); }

/* --------------------------------------------------------------- plates */
.card, .app-card, .s3, .why div, .vid, .proc, details.proc,
.onboard-card, .ob-card, .ct-menu, .ct-modal-card, .sheet-card {
  background:var(--panel) !important;
  border:1px solid var(--rule-soft) !important;
  border-radius:0 !important;
  box-shadow:var(--shadow) !important;
}
.card::before, .s3::before, .why div::before, .app-card::before { display:none; }
.app-card:hover, .vid:hover { border-color:var(--gold) !important; box-shadow:var(--shadow-lg) !important; }
.app-card .strip { height:2px !important; background:var(--metal) !important; }
.app-card .glyph {
  background:transparent !important; border:1px solid var(--rule) !important;
  border-radius:0 !important; color:var(--gold-dk) !important; box-shadow:none !important;
}
html[data-theme="dark"] .app-card .glyph { color:var(--gold-mid) !important; }
.card h3 { color:var(--gold-dk) !important; font-family:var(--serif); }
html[data-theme="dark"] .card h3 { color:var(--gold-mid) !important; }

.sec-head { border-bottom:none !important; position:relative; padding-bottom:13px; }
.sec-head::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule); opacity:.5;
}

/* -------------------------------------------------------------- controls */
.btn, .cta, .ct-open-app, .app-card .open, .ct-btn, .watch, .call-btn, .fab {
  border-radius:0 !important; letter-spacing:.12em; text-transform:uppercase;
  font-size:.72rem; font-weight:700; font-family:var(--sans);
}
.btn, .app-card .open, .ct-open-app, .cta:not(.gold) {
  background:#0a0a0a !important; background-image:none !important;
  border:1px solid #0a0a0a !important; color:var(--gold-hi) !important;
  box-shadow:none !important;
}
.btn:hover, .app-card .open:hover, .ct-open-app:hover, .cta:not(.gold):hover {
  background:#1c1a15 !important; border-color:var(--gold) !important;
}
.btn.amber, .btn.gold, .cta.gold, .ct-btn.ct-gold {
  background:var(--metal) !important; border:1px solid var(--gold-dk) !important;
  color:#231a08 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.btn.amber:hover, .btn.gold:hover, .cta.gold:hover, .ct-btn.ct-gold:hover { filter:brightness(1.06); }
.btn.ghost, .btn.secondary, .watch {
  background:transparent !important; background-image:none !important;
  border:1px solid var(--rule) !important; color:var(--ink-2) !important; box-shadow:none !important;
}
.btn.ghost:hover, .watch:hover { border-color:var(--gold) !important; color:var(--ink) !important; }
.btn.red, .btn.danger, .call-btn, .fab {
  background:var(--red) !important; background-image:none !important;
  border:1px solid #7d1a10 !important; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.call-btn { font-size:1rem; letter-spacing:.14em; padding:17px !important; }

nav.tabs { background:linear-gradient(var(--paper) 74%, transparent) !important; }
nav.tabs button {
  background:transparent !important; border:1px solid var(--rule-soft) !important;
  border-radius:0 !important; color:var(--ink-2) !important;
  letter-spacing:.1em; text-transform:uppercase; font-size:.7rem; font-weight:700;
  box-shadow:none !important;
}
nav.tabs button:hover { border-color:var(--gold) !important; }
nav.tabs button.active {
  background:#0a0a0a !important; border-color:#0a0a0a !important; color:var(--gold-hi) !important;
}

input:not([type]), input[type=text], input[type=tel], input[type=date], input[type=number],
input[type=search], input[type=email], input[type=url], input[type=time], input[type=password],
select, textarea {
  background:var(--paper-2) !important; color:var(--ink) !important;
  border:1px solid var(--rule-soft) !important; border-radius:0 !important;
  box-shadow:inset 0 1px 2px rgba(35,26,10,.06) !important;
  font-family:var(--sans);
}
input:focus, textarea:focus, select:focus { border-color:var(--gold) !important; }
input::placeholder, textarea::placeholder { color:var(--ink-3); opacity:.8; }
label, label.fl { color:var(--ink-2); }

.step .n, .proto-num, .step-n, .s3 .n, .ct-steps .s b, .box {
  background:#0a0a0a !important; background-image:none !important;
  color:var(--gold-hi) !important; border-radius:0 !important;
  box-shadow:none !important; font-family:var(--serif); font-variant-numeric:lining-nums;
}
.step, .rowitem, .inc-step, .roll, .contact-line { border-bottom-color:var(--rule-soft) !important; }
/* NB: kept off generic names like .tag — apps use that for taglines */
.pill, .chip { border-radius:0 !important; letter-spacing:.1em; text-transform:uppercase; font-size:.62rem; }
.note-box { border-left:2px solid var(--gold) !important; background:var(--paper-2) !important; border-radius:0 !important; }
.disclaimer { background:var(--paper-2) !important; border:1px solid var(--rule-soft) !important; border-radius:0 !important; }
.alert-band { border-radius:0 !important; }
hr, .rule { border:0; height:1px; background:linear-gradient(90deg,transparent,var(--rule),transparent); }

/* ------------------------------------------------------------ suite bar */
.ct-bar {
  background:#0a0a0a !important; color:var(--gold-hi) !important;
  border-bottom:1px solid var(--gold) !important; box-shadow:none !important;
}
.ct-bar .ct-home { color:var(--gold-hi) !important; letter-spacing:.22em; font-size:.66rem; }
.ct-bar .ct-home .ct-sub { color:var(--gold) !important; }
.ct-btn {
  background:transparent !important; border:1px solid rgba(201,162,74,.45) !important;
  color:var(--gold-hi) !important;
}
.ct-btn:hover { background:rgba(201,162,74,.14) !important; border-color:var(--gold) !important; }
.ct-menu a { color:var(--ink); border-radius:0; }
.ct-menu a.on { background:#0a0a0a; color:var(--gold-hi); }
.ct-menu a .g { background:transparent; border:1px solid var(--rule-soft); border-radius:0; color:var(--gold-dk); }
.ct-modal-head { background:#0a0a0a !important; border-bottom:1px solid var(--gold) !important; }
.ct-modal-head h2 { color:var(--gold-hi) !important; }
.ct-modal-card { border-top:2px solid var(--gold) !important; }
.sheet-head { background:#0a0a0a !important; border-bottom:1px solid var(--gold) !important; }
.sheet-head h2 { color:var(--gold-hi) !important; }

/* ---------------------------------------------------------------- footer */
.ct-foot, footer.site {
  background:var(--paper-2) !important; border-top:1px solid var(--rule) !important;
  color:var(--ink-2);
}
.ct-foot .gold, footer.site .gold { color:var(--gold-dk) !important; }
.ct-foot a, footer.site a { color:var(--ink-2); }

/* first-run tiles */
.ob-icon {
  background:transparent !important; border:1px solid var(--rule) !important;
  border-radius:0 !important;
}
.ob-icon svg [stroke="#e3c97e"] { stroke:var(--gold-dk); }
html[data-theme="dark"] .ob-icon svg [stroke="#e3c97e"] { stroke:var(--gold-mid); }
.onboard-dots span.on, .ob-dots span.on { background:var(--gold) !important; }
.onboard-card, .ob-card { border-top:2px solid var(--gold) !important; }

/* guarded was authored dark — give it the black-and-gold cousin */
html[data-app="guarded"] { --paper:#0b0a08; --panel:#17150f; --ink:#f3ede2; --ink-2:#cabfab; --ink-3:#8e8574; }
html[data-app="guarded"] body { background:#0b0a08 !important; color:#f3ede2; }
html[data-app="guarded"] .card, html[data-app="guarded"] .panel { background:#17150f !important; }
html[data-app="guarded"] header { background:linear-gradient(180deg,#151310,#0b0a08) !important; }
html[data-app="guarded"] header h1 { color:#f3ede2 !important; }
html[data-app="guarded"] nav.tabs { background:linear-gradient(#0b0a08 74%, transparent) !important; }
html[data-app="guarded"] nav.tabs button.active { background:var(--metal) !important; color:#231a08 !important; }

/* ------------------------------------------------- status (semantic scale)
   Opt-in furniture, bbg-prefixed. Do NOT restyle bare .status/.badge/.state
   here — a shared kit that claims a generic class name silently rewrites
   every app that already uses it (house.css once claimed .tag and turned
   every tagline into uppercase micro-caps).

   Square, hairline-ruled, letterspaced caps — a certificate stamp, not a
   rounded web pill. The dot carries the hue so the label stays readable.   */
.bbg-status {
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.4em .7em; border:1px solid var(--rule-soft); border-radius:0;
  background:var(--panel); color:var(--ink-2); white-space:nowrap;
}
.bbg-status::before {
  content:""; width:.5em; height:.5em; flex:none;
  background:var(--ink-3); border-radius:50%;
}
.bbg-status.good   { background:var(--good-soft);   border-color:var(--good-line);   color:#1d4433; }
.bbg-status.notice { background:var(--notice-soft); border-color:var(--notice-line); color:var(--gold-dk); }
.bbg-status.warn   { background:var(--warn-soft);   border-color:var(--warn-line);   color:#6d4a0d; }
.bbg-status.hot    { background:var(--hot-soft);    border-color:var(--hot-line);    color:#7a3510; }
.bbg-status.urgent { background:var(--urgent-soft); border-color:var(--urgent-line); color:#7a1a10; }
.bbg-status.good::before   { background:var(--good); }
.bbg-status.notice::before { background:var(--notice); }
.bbg-status.warn::before   { background:var(--warn); }
.bbg-status.hot::before    { background:var(--hot); }
.bbg-status.urgent::before { background:var(--urgent); }

/* Urgent is the only one that may draw the eye with weight as well as hue —
   everything else stays quiet so that it can.                              */
.bbg-status.urgent { border-width:1.5px; }

@media print {
  body::after { display:none !important; }
  .card, .app-card, .s3 { box-shadow:none !important; border:1px solid #999 !important; }
  .bbg-bar { background:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }