/* ─────────────────────────────────────────────────────────────
   TEAL IP · Atelier Skin v1.0
   (design direction C from gate-directions.html)

   Keeps the dark chrome moments — nav bar, gate card, shell hero —
   and flips all content surfaces below them to a cream + navy-ink
   workspace. Use after tokens.css (and after any per-page <style>
   block) so it wins the cascade.

   How it works:
     1. Top-level content cards (.form-card, .intel-card, etc.)
        are explicitly flipped to cream with navy ink.
     2. Inside those card scopes, --navy / --white / --w70 etc.
        are redefined so any descendant rule that reads those
        variables (e.g. `background:var(--navy)`, `color:var(--white)`)
        automatically flips too — without us having to rewrite
        every nested selector with !important.
     3. Nav bar, #gate, and .hero are left untouched so the dark
        brand moments stay intact.
   ───────────────────────────────────────────────────────────── */

:root{
  /* Atelier content tokens — v2 warmer, higher-contrast palette
     (cream darkened FAF8F4 → F2EEE4, muted ink darkened 4A5568 → 2A3442) */
  --al-cream:        #F2EEE4;        /* body — warmer, more "parchment" */
  --al-surface:      #FFFFFF;        /* elevated card */
  --al-surface-mute: #EDE8DC;        /* nested strip / tab bar */
  --al-ink:          #0d1f2d;        /* navy ink */
  --al-ink-m:        #2A3442;        /* muted body — darker for legibility */
  --al-ink-l:        #6B7280;        /* faint labels — still legible */
  --al-bdr:          rgba(13,31,45,.10);
  --al-bdr-2:        rgba(13,31,45,.16);
  --al-shadow:       0 2px 12px rgba(13,31,45,.05), 0 8px 32px rgba(13,31,45,.04);
  --al-teal-tint:    rgba(0,128,128,.08);
  --al-teal-dark:    #006464;        /* darker teal for high-contrast text */
  --al-gold-tint:    rgba(200,169,110,.10);
}

/* Body weight bump 400 → 500 for better legibility on warm cream */
body{ font-weight: 500 !important; }

/* ─── Global font rendering ───────────────────────────────────
   Kills the subpixel-antialiasing "bloom" on bold Montserrat /
   Syne over dark navy. Applied everywhere (including dark chrome)
   because the hero band + nav are where this is most visible. */
html, body, button, input, select, textarea,
.shell-hero, .shell-toggle, .hero, nav,
.sr, .sr *, .form-card *, .intel-card *, .tab-content *,
.matter-card *, .bulk-mapper *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body stays cream */
body{ background: var(--al-cream) !important; color: var(--al-ink); }

/* ─── Content card surfaces ───────────────────────────────── */
.form-card,
.intel-card,
.intel-card-panel,
.tab-content,
.history-panel,
.bulk-mapper,
.bulk-dash-card,
.bulk-matter-row,
.bulk-expandable,
.matter-card,
.profile-modal,
[data-al-surface]{
  background: var(--al-surface) !important;
  color: var(--al-ink) !important;
  border: 1px solid var(--al-bdr) !important;
  box-shadow: var(--al-shadow) !important;
  border-radius: 14px;

  /* Scope-local token flip — every descendant that reads
     var(--navy) / var(--white) / var(--w##) inherits the cream values.
     This is what lets us re-skin hundreds of inline / nested rules
     without rewriting them. */
  --navy:       var(--al-surface);
  --navy-light: var(--al-surface-mute);
  --navy-mid:   var(--al-surface-mute);
  --navy-dk:    var(--al-surface-mute);
  --white:      var(--al-ink);
  --w90: rgba(13,31,45,.90);
  --w80: rgba(13,31,45,.80);
  --w70: rgba(13,31,45,.70);
  --w60: rgba(13,31,45,.60);
  --w50: rgba(13,31,45,.50);
  --w40: rgba(13,31,45,.40);
  --w30: rgba(13,31,45,.30);
  --w15: rgba(13,31,45,.15);
  --w10: rgba(13,31,45,.10);
  --w08: rgba(13,31,45,.08);
  --w05: rgba(13,31,45,.05);
}

/* Headings inside cards: firm navy ink instead of white */
.form-card h2, .form-card h3, .form-card h4,
.intel-card h2, .intel-card h3, .intel-card h4,
.tab-content h2, .tab-content h3, .tab-content h4,
.history-panel h2, .history-panel h3, .history-panel h4,
.matter-card h2, .matter-card h3, .matter-card h4{
  color: var(--al-ink) !important;
}

.form-card .form-sub, .intel-card .intel-sub,
.history-panel .panel-sub{
  color: var(--al-ink-l) !important;
}

/* ─── Tab bar base colors ─────────────────────────────────
   (Full tab pill styling lives near bottom of file — H7 v2.) */
.tab-bar{
  background: var(--al-surface-mute) !important;
  border: 1px solid var(--al-bdr) !important;
  border-bottom: none !important;
}

/* ─── Inputs / selects / textareas ────────────────────────── */
.form-card input,  .form-card select,  .form-card textarea,
.intel-card input, .intel-card select, .intel-card textarea,
.history-panel input, .history-panel select, .history-panel textarea,
.tab-content input,   .tab-content select,   .tab-content textarea{
  background: var(--al-cream) !important;
  border: 1px solid var(--al-bdr-2) !important;
  color: var(--al-ink) !important;
}
.form-card input::placeholder,
.intel-card input::placeholder,
.history-panel input::placeholder,
.tab-content input::placeholder{ color: var(--al-ink-l) !important; }

.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.intel-card input:focus, .intel-card select:focus, .intel-card textarea:focus{
  border-color: var(--teal, #008080) !important;
  box-shadow: 0 0 0 3px rgba(0,128,128,.14) !important;
  outline: none !important;
}

/* ─── Tables ──────────────────────────────────────────────── */
.bulk-preview-table th{
  background: var(--al-surface-mute) !important;
  color: var(--al-ink) !important;
  border-color: var(--al-bdr) !important;
}
.bulk-preview-table td{
  color: var(--al-ink) !important;
  border-color: var(--al-bdr) !important;
  background: var(--al-surface) !important;
}
.bulk-preview-table tr:nth-child(even) td{
  background: var(--al-cream) !important;
}

/* ─── Matter cards (Enforce side) ─────────────────────────── */
.matter-card{ border-radius: 14px; }
.matter-card-sum,
.matter-card-meta{ color: var(--al-ink-m) !important; }
.matter-card-head h4{ color: var(--al-ink) !important; }
.matter-timeline .stage{ color: var(--al-ink-l) !important; }
.matter-timeline .stage.done{ color: var(--teal, #008080) !important; }
.matter-timeline .stage.active{ color: var(--al-ink) !important; font-weight: 600; }

/* ─── Enterprise shell (enterprise.html) content area ─────── */
.shell-content,
.shell-iframe-wrap{
  background: var(--al-cream) !important;
}

/* ─── Chip / pill tokens — keep semantic color, brighten bg on cream ── */
.chip, .matter-chip{
  background: rgba(13,31,45,.06);
  color: var(--al-ink);
}
.matter-chip.pri-p1{ background: rgba(239,68,68,.10); color:#b91c1c; }
.matter-chip.pri-p2{ background: rgba(200,169,110,.15); color:#8a6d2f; }
.matter-chip.pri-p3{ background: rgba(107,114,128,.12); color:#52606d; }
.matter-chip.status{ background: rgba(0,128,128,.10);  color:#006666; }
.matter-chip.type  { background: rgba(32,87,110,.10); color:#20576e; }

/* ─── Demo-mode helpers (M11) ────────────────────────────────────
   Body gets .teal-demo when the page loads with ?demo, ?demo=1, or
   ?demo=true in the URL. Any element tagged with data-hide-in-demo
   is then hidden. Apply this to the Preview tab or anything else we
   don't want prospects to click into during a live walkthrough. */
body.teal-demo [data-hide-in-demo],
body.teal-demo .tab-btn[data-hide-in-demo],
body.teal-demo .hide-in-demo{ display: none !important; }

/* ─── Opt-in dark strip (for future use inside cream cards) ─── */
.al-dark-strip{
  background: #0d1f2d;
  color: #fff;
  border-radius: 10px;
  padding: .75rem 1rem;
}

/* ─── Fee schedule sublabels (H5) ────────────────────────────────
   Bump weight 400 → 500 and shift color to muted-ink so sublabels
   read against the warmer cream without feeling shouty. */
.fee-schedule .fee-sub,
.fee-schedule .fee-unit,
.fee-schedule small,
.fee-row .label-sub,
.price-grid .unit,
[data-fee-sub]{
  font-weight: 500 !important;
  color: var(--al-ink-m) !important;
}

/* ─── Generate My Kit — glassmorphic (H6) ────────────────────────
   Teal-tinted translucent pill with blur. Applies to any .generate-kit
   button and the v7 convenience aliases. */
.generate-kit,
.btn-generate-kit,
.kit-generate,
button[data-generate-kit],
.intel-card .generate-kit,
.form-card .generate-kit{
  background: rgba(0,128,128,0.12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,128,128,0.35) !important;
  color: var(--al-teal-dark, #006464) !important;
  border-radius: 999px !important;
  padding: .65rem 1.4rem !important;
  font-weight: 700;
  letter-spacing: .3px;
  transition: background 200ms cubic-bezier(.4,0,.2,1), border-color 200ms, transform 200ms;
  cursor: pointer;
}
.generate-kit:hover,
.btn-generate-kit:hover,
.kit-generate:hover,
button[data-generate-kit]:hover{
  background: rgba(0,128,128,0.20) !important;
  border-color: rgba(0,128,128,0.55) !important;
  transform: translateY(-1px);
}
.generate-kit:active,
.btn-generate-kit:active{ transform: translateY(0); }

/* ─── Tab bar — file-folder tab shape (H7 · v3) ────────────────
   Matches the Tabs product folder aesthetic: rounded top corners,
   subtle slanted top-right (via clip-path), flat bottom so the
   active tab visually "sits on" the content card beneath. Each
   tab carries its own outline so wrapped rows stay distinct. */
.tab-bar{
  background: var(--al-surface-mute) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: .35rem .3rem !important;
  padding: .6rem .65rem 0 .65rem !important;
  border-radius: 12px 12px 0 0 !important;
}
.tab-bar .tab,
.tab-bar button{
  position: relative;
  font-weight: 500 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase;
  font-size: .74rem;
  padding: .7rem 1.1rem .65rem 1.1rem !important;
  border: 1px solid var(--al-bdr) !important;
  border-bottom: none !important;
  border-radius: 10px 14px 0 0 !important;       /* rounded top, flat bottom */
  clip-path: polygon(0 100%, 0 10%, 6px 0, calc(100% - 12px) 0, 100% 10px, 100% 100%);
  background: var(--al-surface-mute) !important;  /* slightly darker than body — reads as "back" folder */
  color: var(--al-ink-m) !important;
  box-shadow: inset 0 -1px 0 rgba(13,31,45,.05);
  transition: color 180ms cubic-bezier(.4,0,.2,1),
              background 180ms,
              transform 180ms;
  flex: 0 0 auto;
  margin-bottom: -1px;                            /* overlap content card top edge */
}
.tab-bar .tab:hover,
.tab-bar button:hover{
  color: var(--al-teal-dark, #006464) !important;
  background: var(--al-cream) !important;
  transform: translateY(-1px);
}
.tab-bar .tab.active,
.tab-bar button.active{
  font-weight: 700 !important;
  color: var(--al-teal-dark, #006464) !important;
  background: var(--al-surface) !important;       /* lifts to white — "front" folder */
  z-index: 2;
  box-shadow: 0 -3px 0 0 var(--teal, #008080) inset,   /* teal top strip like a folder label */
              0 -2px 10px rgba(0,128,128,.10);
}

/* ─── THEA output panel (H10 · v2) ─────────────────────────────
   #aiResult is the plain-text dump target for THEA responses
   (including the outage message). Without a card wrapper it
   floated on cream with zero structure. Give it the same
   cream-on-surface card treatment as other content panels. */
#aiResult,
.thea-response,
.ai-result,
[data-thea-output]{
  display: block;
  background: var(--al-surface) !important;
  color: var(--al-ink) !important;
  border: 1px solid var(--al-bdr) !important;
  border-left: 3px solid var(--teal, #008080) !important;
  border-radius: 12px !important;
  padding: 1.1rem 1.35rem !important;
  margin: 1rem 0 !important;
  box-shadow: var(--al-shadow) !important;
  white-space: pre-wrap;
  font-family: var(--font-b, Inter, sans-serif);
  font-size: .92rem;
  line-height: 1.55;
  letter-spacing: .1px;
}

/* ─── Leave alone (explicitly) ────────────────────────────────
   • nav               — dark chrome
   • #gate             — dark entry moment
   • .hero / .hero h1  — already on cream body on tier pages
   • .shell-hero       — dark hero band on enterprise.html
   ─────────────────────────────────────────────────────────── */