/* =============================================================================
 * AI Governance Studio — LCR prototype stylesheet
 * Foundation lifted from the Stage B Redesign project (app-shell, cards, chips,
 * buttons), reconciled to the CANONICAL Asher Informatics design system:
 *   · fonts  → Montserrat (headings) + Roboto (body)        [was Inter]
 *   · gold   → #e4aa23 / #c99420                            [was #d4a017]
 *   · grey   → #333f49 / #625846 / #7f928c                  [was #2a34xx]
 * Tokens cross-checked against the design-system colors_and_type.css.
 * ============================================================================= */

/* ── Self-hosted brand fonts ──────────────────────────────────────────────── */
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
  /* Brand — canonical Asher tokens */
  --asher-gold: #e4aa23;
  --asher-gold-dark: #c99420;
  --asher-gold-light: #f3ce4e;
  --asher-gold-50: #fef9e7;
  --asher-cream: #eee8d9;
  --asher-cream-warm: #f5efd9;
  --asher-grey-dark: #333f49;
  --asher-grey-medium: #625846;
  --asher-grey-light: #7f928c;
  --asher-grey-bg: #f5f7f4;
  --asher-navy: #2a333c;
  --asher-sage: #b4bdaf;
  --asher-brown: #8d7240;
  --asher-success: #4f8a4f;
  --asher-success-bg: #e7f0e4;
  --asher-success-fg: #3a6b3a;
  /* Operate accent — brighter emerald for high-contrast on the otherwise gold/cream Studio */
  --operate-green: #10b981;
  --operate-green-dark: #0e9466;
  --operate-green-deep: #065f46;
  --operate-green-bg: #ecfdf5;
  --operate-green-border: rgba(16,185,129,0.45);
  --asher-warn: #e4aa23;
  --asher-danger: #c0493c;
  --asher-info: #54686b;
  --asher-purple: #8d7240;
  --asher-teal: #54686b;

  /* capability-area accents (from constants/capabilityAreas.ts) */
  --cap-strategy: #f4d35e;
  --cap-risk: #f4a4a4;
  --cap-data: #a4d4d4;
  --cap-ops: #d4d4a4;
  --cap-vendor: #d4b4f4;

  /* risk-boundary accents */
  --risk-high: #c0493c;
  --risk-high-bg: #f6e7e4;
  --risk-moderate: #c99420;
  --risk-moderate-bg: #faf1d8;
  --risk-sandbox: #54686b;
  --risk-sandbox-bg: #e8eded;

  --shadow-asher-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-asher-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-asher-lg: 0 10px 24px rgba(0,0,0,0.10);
  --shadow-hover: 0 4px 16px rgba(228,170,35,0.14);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }
body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--asher-grey-dark);
  background: #f1efe8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }
a { color: var(--asher-gold-dark); }

/* ── App-shell ──────────────────────────────────────────────────────── */
.app-shell { display: flex; flex-direction: column; background: #fcfcfa; width: 100%; min-height: 100%; font-size: 14px; }
.app-topbar { height: 56px; border-bottom: 1px solid #e7e3d8; background: #fff; display: flex; align-items: center; padding: 0 20px; gap: 18px; flex-shrink: 0; position: sticky; top: 0; z-index: 50; }
.app-topbar .logo { display: flex; align-items: center; gap: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: var(--asher-grey-dark); letter-spacing: 0.04em; }
.app-topbar .logo img { height: 26px; width: auto; display: block; }
.app-topbar .nav { display: flex; gap: 4px; margin-left: 14px; }
.app-topbar .nav button { background: transparent; border: none; padding: 7px 13px; font-size: 13px; color: var(--asher-grey-medium); cursor: pointer; border-radius: 7px; font-family: 'Roboto', sans-serif; font-weight: 500; }
.app-topbar .nav button:hover { background: var(--asher-grey-bg); }
.app-topbar .nav button.active { background: var(--asher-cream); color: var(--asher-grey-dark); font-weight: 600; }
.app-topbar .right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.app-topbar .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--asher-gold); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 11px; font-family: 'Roboto'; }

.app-body { flex: 1; display: flex; flex-direction: column; background: #fcfcfa; }

.section-title-bar { padding: 22px 36px 18px; background: #fff; border-bottom: 1px solid #eef0eb; }
.section-title-bar .breadcrumb { font-size: 12px; color: var(--asher-grey-light); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.section-title-bar h1 { margin: 0; font-size: 26px; font-weight: 700; color: var(--asher-grey-dark); letter-spacing: -0.01em; }
.section-title-bar .subtitle { margin: 5px 0 0; color: var(--asher-grey-medium); font-size: 14px; }
.subtitle { color: var(--asher-grey-medium); font-size: 14px; }

/* ── Forge app shell: fixed sidebar + breadcrumb top bar (production frame) ──
   Distinct from .app-shell (a vertical stack) on purpose: this is a fixed
   sidebar + margin-left main, the chrome the funnel sits inside from Triage on.
   Mirrors ../../aigov-wizard-legacy. */
:root { --forge-sidebar-w: 248px; --forge-topbar-h: 49px; }
.forge-layout { display: flex; min-height: 100vh; background: #fcfcfa; }
.forge-sidebar { width: var(--forge-sidebar-w); background: var(--asher-grey-dark); color: rgba(255,255,255,0.72); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto; }
.forge-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.forge-sidebar__brand img { height: 30px; width: auto; display: block; }
.forge-sidebar__product { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.6); padding-left: 11px; border-left: 1px solid rgba(255,255,255,0.18); letter-spacing: 0.02em; }
.forge-sidebar__nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.forge-sidebar__section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.34); padding: 8px 10px 10px; }
.forge-sidebar__divider { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 10px 10px; }
.forge-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin-bottom: 3px; border: none; background: transparent; color: rgba(255,255,255,0.72); font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500; text-align: left; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.forge-nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.forge-nav-item.is-active { background: var(--asher-gold); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(228,170,35,0.3); }
.forge-nav-item.is-disabled { opacity: 0.4; cursor: default; }
.forge-nav-item.is-disabled:hover { background: transparent; color: rgba(255,255,255,0.72); }
/* "Early Preview" pill on a nav item (AI-Select Studio). Sits to the right of the
   label; legible on both the resting dark sidebar and the gold is-active state. */
.forge-nav-badge { margin-left: auto; flex-shrink: 0; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; padding: 3px 6px; border-radius: 5px; background: rgba(228,170,35,0.22); color: var(--asher-gold-light); white-space: nowrap; }
.forge-nav-item.is-active .forge-nav-badge { background: rgba(255,255,255,0.24); color: #fff; }
.forge-sidebar__footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: auto; }
.forge-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; }
.forge-user__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--asher-gold); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; font-family: 'Roboto', sans-serif; }
.forge-user__info { min-width: 0; flex: 1; }
.forge-user__name { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forge-user__email { font-size: 10px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forge-logout { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 8px 12px; border: none; background: transparent; color: rgba(255,255,255,0.45); font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 7px; transition: background .15s, color .15s; }
.forge-logout:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); }
.forge-main { flex: 1; margin-left: var(--forge-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.forge-topbar { height: var(--forge-topbar-h); background: #fff; border-bottom: 1px solid #eef0eb; padding: 0 28px; display: flex; align-items: center; position: sticky; top: 0; z-index: 50; flex-shrink: 0; }
.forge-topbar .breadcrumb { font-size: 12px; color: var(--asher-grey-light); display: flex; align-items: center; gap: 6px; margin: 0; }
.breadcrumb-link { font-family: inherit; font-size: inherit; font-weight: 400; color: var(--asher-grey-light); background: none; border: none; padding: 0; cursor: pointer; transition: color .15s; }
.breadcrumb-link:hover { color: var(--asher-gold-dark); text-decoration: underline; }
.forge-main-scroll { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.forge-main-scroll--fill { height: calc(100vh - var(--forge-topbar-h)); overflow: hidden; }
@media (max-width: 760px) {
  .forge-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .forge-main { margin-left: 0; }
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.asher-card { background: #fff; border: 1px solid #e9e5da; border-radius: 12px; box-shadow: var(--shadow-asher-sm); }
.asher-card--hover { transition: transform .2s ease, box-shadow .2s ease; }
.asher-card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; font-weight: 600; font-family: 'Roboto', sans-serif; cursor: pointer; transition: all .14s; white-space: nowrap; }
.btn-primary { background: var(--asher-gold); color: #fff; border-color: var(--asher-gold); }
.btn-primary:hover { background: var(--asher-gold-dark); }
.btn-primary:active { background: #a67b1a; }
.btn-secondary { background: #fff; color: var(--asher-grey-dark); border-color: #d9d4c6; }
.btn-secondary:hover { background: var(--asher-grey-bg); }
.btn-ghost { background: transparent; color: var(--asher-grey-medium); }
.btn-ghost:hover { background: var(--asher-grey-bg); color: var(--asher-grey-dark); }
.btn-dark { background: var(--asher-grey-dark); color: #fff; }
.btn-dark:hover { background: var(--asher-navy); }
.btn-success { background: var(--asher-success); color: #fff; border-color: var(--asher-success); }
.btn-operate { background: var(--operate-green); color: #fff; border-color: var(--operate-green); }
.btn-operate:hover { background: var(--operate-green-dark); border-color: var(--operate-green-dark); }
.btn-operate:active { background: var(--operate-green-deep); border-color: var(--operate-green-deep); }
.btn-lg { padding: 13px 24px; font-size: 14px; }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Pills / chips ──────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #f1f0ea; color: var(--asher-grey-medium); }
.chip-gold { background: rgba(228,170,35,0.14); color: var(--asher-gold-dark); }
.chip-now { background: var(--asher-gold); color: #fff; }
.chip-next { background: #e7e3d8; color: var(--asher-grey-medium); }
.chip-later { background: #f4f2ec; color: var(--asher-grey-light); }
.chip-success { background: var(--asher-success-bg); color: var(--asher-success-fg); }
.chip-warn { background: #faf1d8; color: #8a6a16; }
.chip-info { background: #e8eded; color: #495b5e; }
.chip-draft { background: #f2f0ea; color: var(--asher-grey-medium); }
.chip-locked { background: #ecebe6; color: var(--asher-grey-light); }

/* PrimeVue Tag (secondary) — domain-id / count pills in the kanban */
.tag-secondary { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600; font-family: ui-monospace, Menlo, monospace; background: #ece9e1; color: var(--asher-grey-medium); letter-spacing: 0.01em; }
.tag-count { font-family: 'Roboto', sans-serif; min-width: 18px; justify-content: center; }

/* ── Status dots ────────────────────────────────────────────────────── */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-gold { background: var(--asher-gold); }
.dot-success { background: var(--asher-success); }
.dot-warn { background: var(--asher-warn); }
.dot-grey { background: var(--asher-grey-light); }

/* ── Capability swatches ───────────────────────────────────────────── */
.cap-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }
.cap-strategy { background: var(--cap-strategy); }
.cap-risk { background: var(--cap-risk); }
.cap-data { background: var(--cap-data); }
.cap-ops { background: var(--cap-ops); }
.cap-vendor { background: var(--cap-vendor); }

/* ── Misc ──────────────────────────────────────────────────────────── */
.divider { height: 1px; background: #eef0eb; margin: 16px 0; }
.muted { color: var(--asher-grey-medium); }
.tiny { font-size: 11px; }
.small { font-size: 12px; }
.eyebrow { font-family:'Montserrat',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--asher-grey-light); }

.progress-track { height: 6px; background: #eceae3; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--asher-gold); border-radius: 3px; transition: width .5s ease; }
.progress-fill.success { background: var(--asher-success); }

.kbd { display: inline-block; padding: 1px 6px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; background: #f1f0ea; border: 1px solid #d9d4c6; border-bottom-width: 2px; border-radius: 3px; color: var(--asher-grey-medium); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ico { display: inline-block; vertical-align: middle; }

input, textarea, select { font-family: 'Roboto', sans-serif; }
::placeholder { color: #a9b0a6; }

/* ── Focus visibility (WCAG AA) ─────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--asher-gold); outline-offset: 2px; }

/* ── Ask Asher — in-rail launcher + right slide-out reasoning drawer ──── */
.ask-asher-launch { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ask-asher-launch__head { display: flex; align-items: center; gap: 10px; }
.ask-asher-launch__subject {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--asher-grey-medium);
  padding: 10px 12px; background: rgba(238,232,217,0.4); border: 1px solid rgba(180,189,175,0.4);
  border-radius: 8px;
}

.ask-asher-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 440px; max-width: 92vw;
  background: #fff; box-shadow: -10px 0 34px rgba(51,63,73,0.16);
  border-left: 1px solid rgba(180,189,175,0.5);
  display: flex; flex-direction: column; z-index: 120;
  transition: transform .3s ease;
}
.ask-asher-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #eef0eb; flex-shrink: 0;
}
.ask-asher-drawer__body { flex: 1; overflow-y: auto; padding: 18px; }

.ask-asher-context {
  margin-bottom: 18px; border: 1px solid rgba(180,189,175,0.4);
  background: rgba(238,232,217,0.3); border-radius: 8px; padding: 11px 13px;
}
.ask-asher-context__label {
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--asher-grey-medium); margin-bottom: 2px;
}
.ask-asher-context__subject { font-size: 14px; font-weight: 600; color: var(--asher-grey-dark); line-height: 1.25; }
.ask-asher-context__meta { margin-top: 4px; font-size: 11.5px; color: var(--asher-grey-medium); line-height: 1.4; }

.ask-asher-section { margin-bottom: 20px; }
.ask-asher-section__head {
  margin: 0 0 7px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--asher-grey-medium);
  display: flex; align-items: center; gap: 6px;
}
.ask-asher-section__body { margin: 0; font-size: 13px; color: var(--asher-grey-dark); line-height: 1.6; }
.ask-asher-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.ask-asher-list li { font-size: 12.5px; color: var(--asher-grey-dark); line-height: 1.45; padding-left: 14px; position: relative; }
.ask-asher-list li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--asher-gold); }
.ask-asher-steps { margin: 0; padding-left: 17px; list-style: decimal; display: flex; flex-direction: column; gap: 7px; }
.ask-asher-steps li { font-size: 12.5px; color: var(--asher-grey-dark); line-height: 1.5; }

.ask-asher-preset {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--asher-grey-dark);
  padding: 6px 11px; border-radius: 6px; font-size: 12.5px; font-family: 'Roboto', sans-serif;
  text-align: left; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.ask-asher-preset:hover:not(:disabled) { background: rgba(228,170,35,0.06); border-color: var(--asher-gold); }
.ask-asher-preset:disabled { cursor: default; opacity: 0.85; }
.ask-asher-preset .ico { color: var(--asher-gold); }

.ask-asher-disclosure {
  margin-top: 8px; border: 1px dashed rgba(180,189,175,0.6); background: rgba(238,232,217,0.2);
  border-radius: 8px; padding: 11px 13px; font-size: 11.5px; color: var(--asher-grey-medium);
  line-height: 1.55; display: flex; gap: 7px; align-items: flex-start;
}
.ask-asher-disclosure .ico { flex-shrink: 0; margin-top: 2px; }

/* ── Centered funnel canvas (register / triage) ─────────────────────── */
.canvas-cream { min-height: 100%; background:
    radial-gradient(1200px 600px at 80% -10%, rgba(228,170,35,0.06), transparent 60%),
    linear-gradient(180deg, #fbf9f3 0%, #f1efe8 100%);
  display: flex; flex-direction: column; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cdd2c8; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .35s ease both; }
@keyframes blink { 0%,100% { opacity: .25; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .fade-up { animation: none; } }