/* Techimpossible — clients readiness portal, portal-specific components.
 * Loaded AFTER tokens.css + fonts.css + site.css (the marketing design system,
 * copied verbatim) so the portal reads as a seamless continuation of the site.
 * Uses the same tokens + font stack; styles the semantic portal views. */

/* Content column: narrower than the marketing .wrap (1240) for readable forms. */
.wrap.portal { max-width: 840px; padding-top: 48px; padding-bottom: 88px; }

/* ---- Flash ---- */
.portal-flash {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 24px;
  border: 1px solid transparent;
}
.portal-flash--alert  { color: var(--ti-red); background: rgba(253, 45, 12, 0.07); border-color: rgba(253, 45, 12, 0.22); }
.portal-flash--notice { color: var(--ok-600); background: var(--ok-100); border-color: rgba(10, 124, 74, 0.22); }

/* ---- Nav: keep the portal's few links visible without the mobile toggle.
   The brand bar must GROW when the links wrap (the gem pins it to 68px, which
   painted the wrapped row over page content): brand on row 1, links + sign-out
   on row 2. ---- */
@media (max-width: 1060px) {
  .site-nav { height: auto !important; min-height: 56px; padding: 8px 0 10px; }
  .site-nav__inner { height: auto !important; flex-wrap: wrap; row-gap: 2px; }
  .site-nav__links {
    position: static !important;
    display: flex !important;
    flex: 1 0 100% !important;
    order: 2;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 16px !important;
    inset: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .site-nav__link { padding: 4px 0 !important; margin: 0 !important; font-size: 14px !important; }
  .site-nav__links .site-nav__actions { flex-direction: row !important; margin-left: auto !important; }
  .site-nav__actions .site-nav__cta { margin: 0 !important; padding: 8px 14px !important; font-size: 12.5px !important; }
}

/* Sign-out: button_to wraps a <form>; keep it inline and styled like the CTA. */
.site-nav__signout { display: inline; margin: 0; }
.site-nav__actions .site-nav__cta { font-family: var(--font-mono); cursor: pointer; }
button.site-nav__cta { font-size: 13px; }

/* ---- Page header ---- */
.portal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-1, rgba(26, 30, 59, 0.12));
}
.portal-head h1 {
  font-family: var(--font-editorial);
  font-size: 38px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 6px 0 0;
}
.portal-head .eyebrow { margin-bottom: 0; }
.portal-head__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Cards (sections) ---- */
.portal section, .portal fieldset {
  background: var(--bg-1, #fff);
  border: 1px solid var(--border-1, rgba(26, 30, 59, 0.12));
  border-radius: 14px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(13,16,36,0.05));
  padding: 24px 28px;
  margin: 0 0 18px;
}
.portal section h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ti-red);
  margin: 0 0 16px;
}
.portal section h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  margin: 22px 0 10px;
}

/* Posture headline */
#posture > p:first-of-type { font-size: 17px; color: var(--ink-700); }
#posture strong { font-family: var(--font-grotesk); font-size: 34px; color: var(--ti-blue); font-weight: 700; }
#posture em { font-style: normal; font-weight: 600; color: var(--ink-700); }
#trend-delta { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ok-600); }

/* Lists */
.portal section ol, .portal section ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
.portal section ol > li, .portal section ul > li { padding: 10px 0; border-bottom: 1px dashed var(--border-1, rgba(26,30,59,0.12)); }
.portal section ol > li:last-child, .portal section ul > li:last-child { border-bottom: 0; }
#open-gaps > li { padding: 15px 0; }
#open-gaps strong { display: block; margin-bottom: 6px; color: var(--ink-900); font-size: 15px; }
#open-gaps ul { margin-top: 6px; }
#open-gaps ul li { border: 0 !important; padding: 2px 0; font-size: 13px; color: var(--ink-500); }
#closed-gaps li { color: var(--ok-600); }
#commitment-list em { color: var(--ti-red); font-style: normal; font-size: 13px; }

/* Empty state */
#empty { text-align: center; padding: 8px 0; }
#empty p { color: var(--ink-500); font-size: 16px; }

/* ---- Forms (login, assessment) ---- */
.portal legend {
  font-family: var(--font-grotesk);
  font-weight: 600;
  color: var(--ink-900);
  padding: 0;
  margin-bottom: 12px;
  font-size: 16px;
}
.portal label { display: inline-flex; align-items: center; gap: 8px; margin: 5px 16px 5px 0; font-size: 14px; color: var(--ink-700); cursor: pointer; }
.portal input[type="radio"], .portal input[type="checkbox"] { accent-color: var(--ti-blue); width: 16px; height: 16px; }
.portal input[type="email"], .portal input[type="password"], .portal input[type="text"], .portal select {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 8px 0 16px;
  padding: 11px 13px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink-900);
  background: var(--bg-1, #fff);
  border: 1px solid var(--border-strong, rgba(26,30,59,0.2));
  border-radius: 9px;
}
.portal input:focus, .portal select:focus { outline: none; border-color: var(--ti-blue); box-shadow: 0 0 0 3px rgba(1,39,206,0.13); }

/* The assessment + login submit buttons inherit .btn shape; style raw submits too. */
.portal input[type="submit"], .portal button[type="submit"] {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 600;
  padding: 12px 22px;
  color: #fff;
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 8px;
}
.portal input[type="submit"]:hover, .portal button[type="submit"]:hover { background: var(--ti-blue); border-color: var(--ti-blue); }

/* A login card: center the small sign-in form. */
.portal-auth { max-width: 420px; margin: 24px auto 0; }
.portal-auth h1 { font-family: var(--font-editorial); font-weight: 400; font-size: 32px; color: var(--ink-900); margin: 0 0 6px; }

/* ============================================================
   THE LIVING LOOP — recursion-engine dashboard components
   ============================================================ */
:root {
  --state-present: #0a7c4a;
  --state-partial: #b7791f;
  --state-absent:  #d33214;
  --state-unknown: #8a8fb0;
  --commit-met:    #0a7c4a;
  --commit-failing: #d33214;
  --commit-stale:  #b7791f;
  --commit-waived: #6d3bd1;
  --grad-fresh: linear-gradient(90deg, #0a7c4a, #2bb673);
}

.mono { font-family: var(--font-mono); }

/* ---- Toast ---- */
.loop-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
  background: var(--ink-900); color: #fff; font-size: 13.5px; font-weight: 500;
  padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(13,16,36,0.22));
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 50; max-width: 90vw;
}
.loop-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Time machine ---- */
.timemachine {
  background: linear-gradient(180deg, rgba(1,39,206,0.05), var(--bg-1, #fff));
  border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 14px;
  padding: 18px 22px 20px; margin: 8px 0 24px;
}
.timemachine__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.timemachine__label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ti-blue); }
.timemachine__readout { font-size: 13px; font-weight: 700; color: var(--ink-900); background: rgba(1,39,206,0.08); padding: 4px 12px; border-radius: 999px; }
.timemachine__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ti-blue), #b9c0ec); outline: none; }
.timemachine__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ti-blue); box-shadow: 0 2px 6px rgba(13,16,36,0.25); cursor: pointer; }
.timemachine__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--ti-blue); cursor: pointer; }
.timemachine__hint { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }

/* ---- Posture ring ---- */
.posture { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 16px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(13,16,36,0.05)); padding: 26px 30px; margin-bottom: 18px; }
.posture__ring { --size: 138px; --ring-color: var(--state-unknown); width: var(--size); height: var(--size); border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--border-1, rgba(26,30,59,0.12)) 0);
  display: grid; place-items: center; transition: background .6s cubic-bezier(.4,0,.2,1); }
.posture__ring--complete        { --ring-color: var(--state-present); }
.posture__ring--mostly_complete { --ring-color: var(--ti-blue); }
.posture__ring--incomplete      { --ring-color: var(--state-absent); }
.posture__ring--unknown         { --ring-color: var(--state-unknown); }
.posture__ring-inner { width: calc(var(--size) - 24px); height: calc(var(--size) - 24px); background: var(--bg-1, #fff); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.posture__pct { font-family: var(--font-grotesk); font-size: 40px; font-weight: 700; line-height: 1; color: var(--ink-900); }
.posture__sym { font-size: 18px; color: var(--ink-500); }
.posture__verdict { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); }
.posture__meta { flex: 1; min-width: 220px; }
.posture__line { font-size: 14.5px; color: var(--ink-700); margin: 8px 0 14px; }
.posture__lenses { display: flex; gap: 10px; flex-wrap: wrap; }
.lens { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }
.lens__name { font-weight: 600; color: var(--ink-800); }
.lens__count { font-family: var(--font-mono); font-size: 11px; color: var(--ti-red); }
.lens__count.is-clear { color: var(--ok-600); }

/* ---- Forecast callout ---- */
.forecast { display: flex; gap: 14px; align-items: flex-start; background: rgba(183,121,31,0.09); border: 1px solid rgba(183,121,31,0.3);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; font-size: 14px; color: var(--ink-800); line-height: 1.5; }
.forecast__bolt { font-size: 20px; color: #b7791f; line-height: 1.2; }

/* ---- Controls grid ---- */
.controls__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; margin-top: 6px; }
.control { background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 13px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; transition: border-color .2s ease, box-shadow .2s ease; }
.control:hover { box-shadow: var(--shadow-md, 0 8px 24px rgba(13,16,36,0.08)); }
.control.is-stale { border-style: dashed; opacity: 0.92; }
.control__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.control__fresh { font-size: 10.5px; color: var(--ink-500); }
.control__q { font-size: 13.5px; line-height: 1.4; color: var(--ink-800); margin: 0; min-height: 38px; }
.control__hl { font-size: 10.5px; color: var(--ink-500); }

.freshbar { height: 6px; border-radius: 999px; background: rgba(26,30,59,0.08); overflow: hidden; }
.freshbar__fill { height: 100%; border-radius: 999px; background: var(--grad-fresh); transition: width .5s ease; }
.control.is-stale .freshbar__fill { background: var(--state-unknown); }

/* Record buttons */
.control__record { display: flex; gap: 6px; margin: 2px 0 0; }
.rec { flex: 1; font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.02em; padding: 7px 4px;
  border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 8px; background: var(--bg-1, #fff); color: var(--ink-700);
  cursor: pointer; transition: all .15s ease; }
.rec:hover { border-color: var(--ink-900); color: var(--ink-900); }
.rec--present.is-current { background: var(--state-present); border-color: var(--state-present); color: #fff; }
.rec--partial.is-current { background: var(--state-partial); border-color: var(--state-partial); color: #fff; }
.rec--absent.is-current  { background: var(--state-absent);  border-color: var(--state-absent);  color: #fff; }

/* ---- State badges ---- */
.badge { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px; color: #fff; }
.badge--present { background: var(--state-present); }
.badge--partial { background: var(--state-partial); }
.badge--absent  { background: var(--state-absent); }
.badge--unknown { background: var(--state-unknown); }

/* ---- Commitments ---- */
.commitment { border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-left-width: 4px; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; background: var(--bg-1, #fff); }
.commitment--met { border-left-color: var(--commit-met); }
.commitment--failing { border-left-color: var(--commit-failing); }
.commitment--stale_unknown { border-left-color: var(--commit-stale); }
.commitment--risk_accepted { border-left-color: var(--commit-waived); }
.commitment--not_applicable { border-left-color: var(--state-unknown); }
.commitment__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.commitment__name { font-size: 15px; color: var(--ink-900); }
.badge--commit { color: #fff; }
.badge--commit-met { background: var(--commit-met); }
.badge--commit-failing { background: var(--commit-failing); }
.badge--commit-stale_unknown { background: var(--commit-stale); }
.badge--commit-risk_accepted { background: var(--commit-waived); }
.badge--commit-not_applicable { background: var(--state-unknown); }
.commitment__controls { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.chip { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500); background: rgba(26,30,59,0.05); border-radius: 999px; padding: 3px 9px; }
.commitment__waiver { margin-top: 12px; font-size: 13px; color: var(--commit-waived); }
.commitment__why { color: var(--ink-500); font-style: italic; margin-top: 3px; font-size: 12.5px; }
.waive { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
select.waive__in { background: #fff; max-width: 240px; }
.waive__in { font-family: var(--font-ui); font-size: 13px; padding: 8px 11px; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 8px; max-width: 150px; }
.waive__in--grow { flex: 1; min-width: 160px; max-width: none; }
.waive__in--days { max-width: 72px; }
.waive__btn { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--commit-waived); color: var(--commit-waived);
  background: transparent; border-radius: 8px; cursor: pointer; transition: all .15s ease; }
.waive__btn:hover { background: var(--commit-waived); color: #fff; }

/* ---- Ledger ---- */
.ledger__sub { font-size: 13px; color: var(--ink-500); margin: -6px 0 14px; line-height: 1.5; }
.ledger__list { list-style: none; margin: 0; padding: 0; max-height: 580px; overflow-y: auto; overscroll-behavior: contain; }
.ledger__item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--border-1, rgba(26,30,59,0.1)); font-size: 13px; }
.ledger__item:last-child { border-bottom: 0; }
.ledger__when { font-size: 11px; color: var(--ink-500); white-space: nowrap; }
.ledger__pred { font-weight: 600; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger__pred .ledger__src { font-weight: 400; margin-left: 8px; }
.ledger__src { font-size: 10.5px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger__empty { color: var(--ink-500); padding: 16px 0; }

/* ---- What changed (event feed — rung 1 of the notification layer) ---- */
.whatsnew { border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 12px; padding: 16px 20px; margin: 0 0 18px; background: var(--bg-1, #fff); }
.whatsnew__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.whatsnew__sub { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.whatsnew__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.whatsnew__item { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border-1, rgba(26,30,59,0.1)); font-size: 13.5px; }
.whatsnew__item:last-child { border-bottom: 0; }
.whatsnew__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-500); justify-self: center; }
.whatsnew__item--up .whatsnew__dot { background: var(--ok-600, #0a7c4a); }
.whatsnew__item--down .whatsnew__dot { background: var(--ti-red); }
.whatsnew__item--flat .whatsnew__dot { background: var(--ti-blue); }
.whatsnew__title { color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whatsnew__when { font-size: 11px; color: var(--ink-500); white-space: nowrap; }

@media (max-width: 560px) {
  .posture { gap: 18px; }
  .controls__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   THE CODEX MAP — tiered constellation, gated to Expert
   ============================================================ */
:root {
  --gate-met:       #0a7c4a;
  --gate-available: var(--ti-blue);
  --gate-blocked:   #b7791f;
  --gate-locked:    #b3b7cc;
}

.summary { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 16px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(13,16,36,0.05)); padding: 22px 28px; margin-bottom: 18px; }
.summary__tiers { flex: 1; min-width: 280px; }
.summary__ringwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.summary__ringcap { font-size: 10.5px; color: var(--ink-500); text-align: center; max-width: 160px; line-height: 1.4; }

/* ---- First run: one action leads until anything is recorded ---- */
.firstrun { background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 16px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(13,16,36,0.05)); padding: 30px 32px; margin-bottom: 18px; }
.firstrun__title { font-family: var(--font-editorial); font-size: 26px; color: var(--ink-900); margin: 8px 0 6px; }
.firstrun__line { font-size: 14.5px; color: var(--ink-700); line-height: 1.55; margin: 0 0 18px; max-width: 560px; }
.firstrun__alt { font-size: 12px; color: var(--ink-500); margin: 14px 0 0; }
.summary__line { font-size: 13px; color: var(--ink-500); margin: 12px 0 0; }
.summary__line--note { font-size: 12px; margin-top: 6px; font-style: italic; }
.tierbar { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 13px; }
.tierbar.is-locked { opacity: 0.5; }
.tierbar__name { width: 96px; font-weight: 600; color: var(--ink-800); flex-shrink: 0; }
.tierbar__track { flex: 1; height: 8px; background: rgba(26,30,59,0.08); border-radius: 999px; overflow: hidden; }
.tierbar__fill { height: 100%; background: var(--grad-fresh); border-radius: 999px; transition: width .5s ease; }
.tierbar__count { font-size: 11px; color: var(--ink-500); width: 92px; text-align: right; flex-shrink: 0; }

/* Layout: map + sticky node panel */
.codexlayout { display: grid; grid-template-columns: 1fr 348px; gap: 18px; align-items: start; margin-bottom: 18px; }
.codexlayout turbo-frame { display: block; }

/* The map: four tier columns */
.codexmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tiercol { background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 14px; padding: 14px 12px; min-width: 0; }
.tiercol.is-locked { background: linear-gradient(180deg, rgba(26,30,59,0.025), var(--bg-1, #fff)); }
.tiercol__head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 10px; border-bottom: 1px solid var(--border-1, rgba(26,30,59,0.1)); margin-bottom: 12px; }
.tiercol__rank { font-size: 10px; color: var(--ink-500); }
.tiercol__name { font-family: var(--font-grotesk); font-size: 14px; font-weight: 700; color: var(--ink-900); margin: 0; flex: 1; }
.tiercol__meta { font-size: 10.5px; color: var(--ink-500); }
.cluster { margin-bottom: 14px; }
.cluster__name { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: 6px; padding: 0 2px; }
.cluster__nodes { display: flex; flex-direction: column; gap: 4px; }

/* Node pills */
.node { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 8px; border: 1px solid transparent;
  font-size: 12px; line-height: 1.25; color: var(--ink-800); text-decoration: none; transition: background .12s ease, border-color .12s ease; }
.node:hover { background: rgba(1,39,206,0.05); border-color: rgba(1,39,206,0.18); text-decoration: none; }
.node__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--gate-locked); }
.node__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node__decay { margin-left: auto; font-size: 11px; }
.node--met       { background: rgba(10,124,74,0.06); }
.node--met .node__dot       { background: var(--gate-met); box-shadow: 0 0 0 3px rgba(10,124,74,0.15); }
.node--available .node__dot { background: var(--gate-available); box-shadow: 0 0 0 3px rgba(1,39,206,0.14); }
.node--blocked   { opacity: 0.74; }
.node--blocked .node__dot   { background: var(--gate-blocked); }
.node--locked    { opacity: 0.4; }
.node--locked:hover { opacity: 0.62; }

/* Node detail panel (sticky) */
#node-panel { position: sticky; top: 16px; }
.nodepanel { background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-left-width: 4px; border-radius: 14px; box-shadow: var(--shadow-md, 0 8px 24px rgba(13,16,36,0.08)); padding: 20px 22px; }
.nodepanel--met { border-left-color: var(--gate-met); }
.nodepanel--available { border-left-color: var(--gate-available); }
.nodepanel--blocked { border-left-color: var(--gate-blocked); }
.nodepanel--locked { border-left-color: var(--gate-locked); }
.nodepanel--empty { border-left-color: var(--border-1, rgba(26,30,59,0.12)); }
.nodepanel__hint { display: flex; gap: 10px; color: var(--ink-500); font-size: 13.5px; line-height: 1.5; }
.nodepanel__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nodepanel__tier { font-size: 10.5px; color: var(--ink-500); }
.nodepanel__name { font-family: var(--font-grotesk); font-size: 18px; color: var(--ink-900); margin: 0 0 8px; }
.nodepanel__desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-700); margin: 0 0 16px; }
.nodepanel__sec { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border-1, rgba(26,30,59,0.1)); }
.nodepanel__sec .eyebrow { margin-bottom: 10px; }
.nodepanel__obs { font-size: 11px; color: var(--ink-500); margin: 10px 0 0; }
.nodepanel__artifact p { font-size: 13px; color: var(--ink-700); line-height: 1.5; margin: 0 0 12px; }
.nodepanel__soon { font-size: 10.5px; color: var(--ink-500); margin: 10px 0 0; }
.nodepanel__artifact .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.dep { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-800); padding: 4px 0; }
.dep__kind { font-size: 9.5px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.dep__kind--hard { background: rgba(211,50,20,0.1); color: var(--gate-blocked); }
.dep__kind--soft { background: rgba(26,30,59,0.06); color: var(--ink-500); }
.ctrl { font-size: 12.5px; color: var(--ink-700); padding: 4px 0; }
.ctrl__fw { font-size: 9.5px; color: var(--ti-blue); background: rgba(1,39,206,0.07); padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Gate badges */
.badge--gate-met { background: var(--gate-met); color: #fff; }
.badge--gate-available { background: var(--gate-available); color: #fff; }
.badge--gate-blocked { background: var(--gate-blocked); color: #fff; }
.badge--gate-locked { background: var(--gate-locked); color: #fff; }

@media (max-width: 920px) {
  .codexmap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .codexmap { grid-template-columns: 1fr; }
}

/* ============================================================
   RUNG 2 — wide layout, slide-over drawer, documents
   ============================================================ */
.wrap.portal--wide { max-width: 1320px; }

/* Map is now full-width; node detail is a slide-over drawer. */
#node-panel { position: static; }
.looprow { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; margin-top: 20px; }
@media (max-width: 920px) { .looprow { grid-template-columns: 1fr; } }

/* Slide-over drawer */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(13,16,36,0.30); opacity: 0; transition: opacity .2s ease; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: 440px; max-width: 92vw;
  background: var(--bg-1, #fff); box-shadow: -14px 0 44px rgba(13,16,36,0.20); transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1); overflow-y: auto; padding: 54px 28px 48px; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 17px; color: var(--ink-500); cursor: pointer; padding: 6px; line-height: 1; }
.drawer__close:hover { color: var(--ti-red); background: none; }
/* The panel content sits flush inside the drawer (drop the card chrome). */
.drawer .nodepanel { border: 0; border-left: 0; box-shadow: none; padding: 0; border-radius: 0; }

/* Generate form + node-panel artifact bits */
.nodepanel__needs { font-size: 12.5px; color: var(--ink-500); margin: 0 0 12px; line-height: 1.5; }
.genform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.genform__kind { font-family: var(--font-ui); font-size: 13px; padding: 9px 11px; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 8px; background: var(--bg-1, #fff); color: var(--ink-900); }
.genform__go { white-space: nowrap; }
.nodedocs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-1, rgba(26,30,59,0.1)); }
.nodedocs__item { display: block; font-size: 13px; color: var(--ti-blue); padding: 4px 0; }

/* Documents library + viewer */
.doclist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.doccard { display: block; background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 12px; padding: 18px 20px; text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease; }
.doccard:hover { box-shadow: var(--shadow-md, 0 8px 24px rgba(13,16,36,0.08)); border-color: rgba(1,39,206,0.2); text-decoration: none; }
.doccard__title { font-family: var(--font-grotesk); font-weight: 600; color: var(--ink-900); font-size: 15px; margin-bottom: 8px; }
.doccard__meta { font-size: 11px; color: var(--ink-500); }
.doc-title { font-family: var(--font-editorial); font-weight: 400; }

.docview { background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 14px; padding: 38px 52px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(13,16,36,0.05)); max-width: 1020px; }
.docview pre { overflow-x: auto; max-width: 100%; }
.docview table { display: block; overflow-x: auto; max-width: 100%; }
.docview code { word-break: normal; }
.docview > :first-child { margin-top: 0; }
.docview h1 { font-family: var(--font-editorial); font-weight: 400; font-size: 30px; color: var(--ink-900); margin: 0 0 12px; }
.docview h2 { font-family: var(--font-grotesk); font-size: 19px; margin: 28px 0 10px; color: var(--ink-900); }
.docview h3 { font-size: 15px; margin: 20px 0 8px; color: var(--ink-800); }
.docview p, .docview li { font-size: 15px; line-height: 1.62; color: var(--ink-700); }
.docview ul, .docview ol { padding-left: 22px; margin: 10px 0; }
.docview table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 13.5px; }
.docview th, .docview td { border: 1px solid var(--border-1, rgba(26,30,59,0.12)); padding: 8px 11px; text-align: left; vertical-align: top; }
.docview th { background: var(--paper); font-weight: 600; }
.docview pre { background: var(--ink-900); color: #e8eaf6; padding: 16px; border-radius: 10px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; }
.docview code { font-family: var(--font-mono); font-size: 0.92em; }
.docview__meta { margin-top: 16px; font-size: 11px; color: var(--ink-500); }

/* ============================================================
   RUNG 3 — folded tiers, level-up, cadence, 37signals flatten
   ============================================================ */

/* Folded tier accordion (progressive disclosure) */
.codexmap { display: block; }
.tier { border: 1px solid var(--border-1, rgba(26,30,59,0.10)); border-radius: 12px; margin-bottom: 10px; background: var(--bg-1, #fff); overflow: hidden; }
.tier--locked { background: transparent; }
.tier__summary { display: flex; align-items: center; gap: 14px; padding: 15px 20px; cursor: pointer; list-style: none; }
.tier__summary::-webkit-details-marker { display: none; }
.tier__summary::before { content: "›"; font-family: var(--font-mono); font-size: 16px; color: var(--ink-500); transition: transform .15s ease; }
.tier[open] .tier__summary::before { transform: rotate(90deg); }
.tier__rank { font-size: 11px; color: var(--ink-500); }
.tier__name { font-family: var(--font-grotesk); font-weight: 600; font-size: 16px; color: var(--ink-900); min-width: 116px; }
.tier__bar { flex: 1; height: 6px; background: rgba(26,30,59,0.07); border-radius: 999px; overflow: hidden; max-width: 380px; }
.tier__bar-fill { display: block; height: 100%; background: var(--ti-blue); border-radius: 999px; }
.tier__count { font-size: 12px; color: var(--ink-700); }
.tier__lock { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); background: rgba(26,30,59,0.05); padding: 3px 9px; border-radius: 999px; }
.tier--locked .tier__name, .tier--locked .tier__rank { opacity: 0.62; }
.tier__body { padding: 2px 20px 22px; }
.tier__hint { font-size: 13px; color: var(--ink-700); background: rgba(1,39,206,0.045); border-radius: 8px; padding: 11px 14px; margin: 0 0 18px; }
.codexdomains { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 20px 26px; }
.tier--locked .codexdomains { opacity: 0.5; }

/* Level-up */
.levelup { border: 1px solid var(--border-1, rgba(26,30,59,0.10)); border-radius: 12px; padding: 18px 22px; margin-bottom: 16px; background: var(--bg-1, #fff); }
.levelup__goal { font-size: 15px; color: var(--ink-800); margin: 8px 0 0; line-height: 1.5; }
.levelup__sub { font-size: 11px; color: var(--ink-500); margin: 14px 0 10px; }
.levelup__todo { display: flex; flex-wrap: wrap; gap: 8px; }
.levelup__item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-800); border: 1px solid var(--border-1, rgba(26,30,59,0.14)); border-radius: 999px; padding: 6px 13px; text-decoration: none; transition: border-color .12s ease, background .12s ease; }
.levelup__item:hover { border-color: var(--ti-blue); background: rgba(1,39,206,0.04); text-decoration: none; }
.levelup__check { color: var(--ti-blue); }

/* Cadence — the in/off signal */
.node__cad { margin-left: auto; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 4px; flex-shrink: 0; }
.node__cad--off { background: rgba(211,50,20,0.12); color: #d33214; }
.node__cad--soon { background: rgba(183,121,31,0.16); color: #9a6411; }
.nodecad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.nodecad__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); }
.nodecad__val { font-weight: 600; color: var(--ink-900); font-size: 13px; }
.nodecad__status { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; }
.nodecad__status--on_track { color: #0a7c4a; background: rgba(10,124,74,0.08); }
.nodecad__status--due_soon { color: #9a6411; background: rgba(183,121,31,0.13); }
.nodecad__status--overdue  { color: #d33214; background: rgba(211,50,20,0.10); }

/* 37signals flatten: drop heavy shadows, thin borders, more air */
.summary, .timemachine, .commitment, .ledger, .doccard, .control, .nodepanel { box-shadow: none !important; }
.summary { border: 1px solid var(--border-1, rgba(26,30,59,0.10)); padding: 24px 28px; }
.posture__ring { --size: 112px; }
.posture__pct { font-size: 34px; }
.timemachine { background: var(--bg-1, #fff); }
.section, .controls, .commitments { box-shadow: none; }

/* ============================================================
   RUNG 4 — the guide agent, profile, editable docs
   ============================================================ */
.chat { border: 1px solid var(--border-1, rgba(26,30,59,0.1)); border-radius: 12px; background: var(--bg-1, #fff); overflow: hidden; }
.chat__log { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; }
.chat__empty { color: var(--ink-500); font-size: 14px; line-height: 1.55; }
.msg { font-size: 14px; line-height: 1.55; border-radius: 12px; padding: 10px 14px; max-width: 88%; }
.msg--user { align-self: flex-end; background: var(--ti-blue); color: #fff; }
.msg--user p { margin: 0; color: #fff; }
.msg--assistant { align-self: flex-start; background: var(--paper); color: var(--ink-800); border: 1px solid var(--border-1, rgba(26,30,59,0.08)); }
.msg--assistant > :first-child { margin-top: 0; }
.msg--assistant > :last-child { margin-bottom: 0; }
.msg--assistant h1, .msg--assistant h2, .msg--assistant h3 { font-size: 15px; margin: 10px 0 6px; }
.msg--assistant ul, .msg--assistant ol { padding-left: 20px; margin: 6px 0; }
.chat__form { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border-1, rgba(26,30,59,0.1)); align-items: flex-end; }
.chat__input { flex: 1; font-family: var(--font-ui); font-size: 14px; padding: 10px 12px; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 9px; resize: vertical; }
.chat__send { white-space: nowrap; }
.chat__off { padding: 0 18px 12px; color: var(--ink-500); font-size: 12px; }
.guidewrap { margin-top: 6px; }

.profile__intro { color: var(--ink-700); font-size: 14.5px; line-height: 1.6; max-width: 70ch; margin: 0 0 22px; }
.profileform { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px 22px; }
.profilefield { display: flex; flex-direction: column; gap: 5px; }
.profilefield__label { font-size: 12.5px; font-weight: 600; color: var(--ink-800); }
.profilefield input, .profilefield select { font-family: var(--font-ui); font-size: 14px; padding: 9px 11px; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 8px; background: #fff; }
.profileform__save { grid-column: 1 / -1; justify-self: start; }

.docedit__area { width: 100%; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; padding: 18px; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 12px; box-sizing: border-box; }
.docchat { margin-top: 26px; max-width: 840px; }
.docchat__hint { font-size: 13px; color: var(--ink-500); line-height: 1.5; margin: 8px 0 14px; }
.nodepanel .chat { margin-top: 10px; }
.nodepanel .chat__log { max-height: 220px; padding: 14px; }

/* ============================================================
   RUNG 5 — guide launcher, timeline, plans, meetings
   ============================================================ */
.guidewidget { position: fixed; right: 22px; bottom: 22px; z-index: 70; }
.guide-launcher { font-family: var(--font-mono); font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 999px; background: var(--ti-blue); color: #fff; border: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(1,39,206,0.32); }
.guide-launcher:hover { background: var(--ti-blue-dark, #011f9e); }
.guidepop { position: absolute; right: 0; bottom: 58px; width: 380px; max-width: 92vw; max-height: 72vh; background: var(--bg-1, #fff); border: 1px solid var(--border-1, rgba(26,30,59,0.14)); border-radius: 14px; box-shadow: 0 16px 48px rgba(13,16,36,0.22); overflow: hidden; display: none; flex-direction: column; }
.guidewidget.is-open .guidepop { display: flex; }
.guidewidget.is-open .guide-launcher { display: none; }
.guidepop__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-1, rgba(26,30,59,0.1)); font-size: 12px; color: var(--ink-700); }
.guidepop__close { background: none; border: 0; cursor: pointer; color: var(--ink-500); font-size: 15px; }
.guidepop turbo-frame { display: block; overflow-y: auto; }
.guidepop .chat { border: 0; border-radius: 0; }
.guidepop .chat__log { max-height: 46vh; }
.guidepop__loading { padding: 24px; color: var(--ink-500); font-size: 12px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan { border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 14px; padding: 24px 22px; background: var(--bg-1, #fff); display: flex; flex-direction: column; }
.plan--feature { border-color: var(--ti-blue); box-shadow: 0 8px 24px rgba(1,39,206,0.08); }
.plan__name { font-family: var(--font-grotesk); font-weight: 700; font-size: 17px; color: var(--ink-900); }
.plan__price { font-family: var(--font-editorial); font-size: 30px; color: var(--ink-900); margin: 6px 0; }
.plan__price span { font-size: 14px; color: var(--ink-500); font-family: var(--font-mono); }
.plan__tag { font-size: 12px; color: var(--ink-500); margin-bottom: 10px; }
.plan__list { list-style: none; padding: 0; margin: 10px 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--ink-700); }
.plan__list li::before { content: "→ "; color: var(--ti-blue); }
.plan__cta { margin-top: auto; }
.plans__note { font-size: 12px; color: var(--ink-500); margin-top: 16px; }

.timeline { border: 1px solid var(--border-1, rgba(26,30,59,0.1)); border-radius: 12px; padding: 18px 22px; margin-bottom: 16px; background: var(--bg-1, #fff); }
.timeline__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.timeline__dates { font-size: 11.5px; color: var(--ink-500); }
.tlm { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--border-1, rgba(26,30,59,0.1)); }
.tlm:last-child { border-bottom: 0; }
.tlm__eta { font-size: 12px; color: var(--ti-blue); min-width: 96px; font-weight: 700; }
.tlm__label { flex: 1; font-size: 14px; color: var(--ink-800); }
.tlm__rem { font-size: 11px; color: var(--ink-500); }
.timeline__status { font-size: 13px; margin: 12px 0 0; }
.timeline__status--ok { color: #0a7c4a; }
.timeline__status--behind { color: #b7791f; }
.timeline__edit { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--ti-blue); }
.upsell-nudge { font-size: 13px; color: var(--ink-500); margin: 2px 0 18px; }

.meetingform { display: flex; flex-direction: column; gap: 12px; max-width: 840px; }
.meetingform__title { font-family: var(--font-ui); font-size: 16px; padding: 11px 13px; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 9px; }
.meetingform__date { font-family: var(--font-ui); font-size: 14px; padding: 9px 12px; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 8px; width: max-content; }

/* Continuous checks (reframed from "commitments") */
.checks__sub { font-size: 13px; color: var(--ink-500); line-height: 1.55; max-width: 72ch; margin: -4px 0 16px; }
.check { border: 1px solid var(--border-1, rgba(26,30,59,0.1)); border-left-width: 4px; border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; background: var(--bg-1, #fff); }
.check--failing { border-left-color: #d33214; }
.check--stale_unknown { border-left-color: #b7791f; }
.check--met { border-left-color: #0a7c4a; }
.check--risk_accepted { border-left-color: #6d3bd1; }
.check__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.check__name { font-size: 15px; color: var(--ink-900); }
.check__controls { font-size: 12px; color: var(--ink-500); margin-top: 6px; }
.check__waiver { font-size: 12.5px; color: #6d3bd1; margin-top: 8px; }
.acceptrisk { margin-top: 10px; }
.acceptrisk > summary { font-size: 12.5px; color: var(--ti-blue); cursor: pointer; list-style: none; }
.acceptrisk > summary::-webkit-details-marker { display: none; }
.acceptrisk__hint { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; margin: 8px 0 12px; }
.waive__field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-500); }
.waive__field--grow { flex: 1; min-width: 180px; }
.waive__field .waive__in { max-width: none; }
.waive__days { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-700); }
.waive__days .waive__in { width: 64px; }
.checks__ok { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.checks__okcount { font-size: 11px; color: var(--ink-500); }
.check-pill { font-size: 11.5px; color: #0a7c4a; background: rgba(10,124,74,0.08); border-radius: 999px; padding: 4px 10px; }
.check-pill--risk_accepted { background: rgba(109,59,209,0.1); color: #6d3bd1; }
.checks__none { color: var(--ink-500); font-size: 13px; }

/* Fact-confirm card (agent proposes, user confirms before saving) */
.factconfirm { background: rgba(1,39,206,0.04); border: 1px solid rgba(1,39,206,0.18); border-radius: 12px; padding: 14px 16px; align-self: flex-start; max-width: 92%; }
.factconfirm--saved { color: #0a7c4a; background: rgba(10,124,74,0.08); border-color: rgba(10,124,74,0.22); font-size: 13px; }
.factconfirm__lead { font-size: 13px; color: var(--ink-800); margin: 0 0 10px; }
.factconfirm__form { display: flex; flex-direction: column; gap: 8px; }
.factconfirm__field { display: flex; flex-direction: column; gap: 3px; }
.factconfirm__label { font-size: 11px; color: var(--ink-500); }
.factconfirm__field input { font-family: var(--font-ui); font-size: 13px; padding: 7px 10px; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 7px; }
.factconfirm__actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.factconfirm__no { background: none; border: 0; color: var(--ink-500); font-size: 12.5px; cursor: pointer; }
.factconfirm__no:hover { color: var(--ink-900); }

/* --- Milestone collateral (CAIQ Lite) ----------------------------------- */
.collateral { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin: 18px 0; padding: 14px 18px; border-radius: 12px; text-decoration: none; color: var(--ink-900); border: 1px solid rgba(26,30,59,0.12); }
.collateral--unlocked { background: rgba(10,124,74,0.06); border-color: rgba(10,124,74,0.25); }
.collateral--locked { background: rgba(26,30,59,0.03); }
.collateral__badge { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.collateral--unlocked .collateral__badge { color: #0a7c4a; }
.collateral__line { font-size: 13.5px; color: var(--ink-500); }
.collateral:hover { border-color: rgba(26,30,59,0.3); }

.milestone { margin: 18px 0; padding: 18px 20px; border-radius: 12px; border: 1px solid rgba(26,30,59,0.12); }
.milestone--unlocked { background: rgba(10,124,74,0.06); border-color: rgba(10,124,74,0.25); }
.milestone--locked { background: rgba(26,30,59,0.03); }
.milestone__badge { font-family: var(--font-mono); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.milestone--unlocked .milestone__badge { color: #0a7c4a; }
.milestone__line { font-size: 14px; margin: 0 0 8px; }
.milestone__next { display: flex; gap: 8px; flex-wrap: wrap; }
.chip--met { color: #0a7c4a; background: rgba(10,124,74,0.1); }

.qupload { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 22px; }
.qupload input[type="file"] { font-size: 13px; }

.qcat { border: 1px solid rgba(26,30,59,0.12); border-radius: 12px; margin-bottom: 12px; background: #fff; }
.qcat > summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; }
.qcat > summary::-webkit-details-marker { display: none; }
.qcat__score { color: var(--ink-500); font-size: 12px; }
.qctl { padding: 10px 16px 14px; border-top: 1px solid rgba(26,30,59,0.08); }
.qctl__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.qctl__id { font-size: 11px; color: var(--ink-500); }
.qctl__name { font-weight: 600; font-size: 13.5px; }
.qctl__backing { display: flex; gap: 6px; flex-wrap: wrap; }
.qrow { display: grid; grid-template-columns: 86px 1fr 84px 200px; gap: 10px; align-items: start; padding: 7px 0; border-top: 1px dashed rgba(26,30,59,0.07); }
.qrow__id { font-size: 11px; color: var(--ink-500); padding-top: 6px; }
.qrow__text { font-size: 13px; color: var(--ink-700, #3a3f63); white-space: pre-line; }
.qrow select { font-family: var(--font-ui); font-size: 12.5px; padding: 5px 8px; border: 1px solid rgba(26,30,59,0.2); border-radius: 7px; background: #fff; max-width: 100%; }
.qrow__answer--yes { border-color: rgba(10,124,74,0.5); color: #0a7c4a; }
.qrow__answer--no { border-color: rgba(206,32,1,0.4); color: #b42c0c; }
.qreview__actions { display: flex; gap: 12px; margin: 18px 0 30px; }
@media (max-width: 900px) { .qrow { grid-template-columns: 1fr; gap: 4px; } }

/* --- Node panel: drawer peek vs full view ------------------------------- */
.nodepanel__expand { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--ti-blue, #0127ce); white-space: nowrap; }
.nodepanel__expand:hover { text-decoration: underline; }
.nodepanel__chatlink { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--ti-blue, #0127ce); }
.nodepanel__chatlink:hover { text-decoration: underline; }
.chip--more { color: var(--ti-blue, #0127ce); background: rgba(1,39,206,0.07); }
.nodepanel__back { margin-top: 18px; }
/* Full page: room to breathe — two readable columns on wide screens. */
.nodepanel--full .nodepanel__desc { max-width: 70ch; }
.nodepanel--full .chat { max-width: 760px; }
/* The floating guide yields while the node drawer is open (the drawer has its
   own "Operationalize with the guide" path). */
body.drawer-open .guidewidget { opacity: 0; pointer-events: none; transition: opacity 0.18s; }

/* --- Lexxy (meeting notes editor): theme to the brand tokens -------------- */
.portal textarea { display: block; width: 100%; padding: 12px; background: #fff; border: 1px solid var(--border-strong, rgba(26,30,59,0.2)); border-radius: 10px; font-family: var(--font-ui); font-size: 14.5px; min-height: 280px; }
.portal textarea:focus { border-color: var(--ti-blue, #0127ce); box-shadow: 0 0 0 3px rgba(1,39,206,0.12); }
/* Document editor: same generous column as the rendered view. */
.docedit textarea { min-height: 480px; max-width: 1020px; font-size: 15px; }

/* --- Documents index: category sections --------------------------------- */
.docsec { margin-bottom: 28px; }
.docsec__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.docsec__title { font-family: var(--font-grotesk); font-size: 17px; margin: 0; color: var(--ink-900); }
.docsec__count { font-size: 11.5px; color: var(--ink-500); }

/* --- Node write-up backlink + example artifacts -------------------------- */
.nodepanel__writeup { margin: -4px 0 14px; font-size: 13px; }
.nodepanel__writeup a { color: var(--ti-blue, #0127ce); font-weight: 600; }
.nodepanel__writeup a:hover { text-decoration: underline; }
.examples { border: 1px dashed var(--border-strong, rgba(26,30,59,0.2)); border-radius: 10px; padding: 10px 14px; margin: 12px 0; background: rgba(26,30,59,0.02); }
.examples > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-800); }
.example { margin: 12px 0 4px; }
.example__title { font-size: 12.5px; font-weight: 600; color: var(--ink-800); margin-bottom: 6px; }
.example__src { font-size: 10.5px; white-space: pre-wrap; color: var(--ink-500); background: #fff; border-radius: 8px; padding: 10px; overflow-x: auto; }
.example__caption { font-size: 12px; color: var(--ink-500); margin-top: 6px; }
.diagram { background: #fff; border-radius: 8px; padding: 10px; overflow-x: auto; }
.diagram svg { max-width: 100%; height: auto; }
.example__doc { background: #fff; border-radius: 8px; padding: 4px 10px; overflow-x: auto; }
.example__doc table { font-size: 11.5px; border-collapse: collapse; white-space: nowrap; }
.example__doc th, .example__doc td { padding: 5px 9px; border-bottom: 1px solid rgba(26,30,59,0.1); text-align: left; }
.example__doc th { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); }
.nodepanel__writeup { display: flex; flex-direction: column; gap: 4px; }
.nodepanel__blog { font-weight: 600; }
.nodepanel__map { font-size: 11px; color: var(--ink-500) !important; font-weight: 500; }
.nodepanel__map:hover { color: var(--ti-blue, #0127ce) !important; }
/* Prereq/unlock navigation: the DAG is walkable from inside the panel. */
.dep__link { color: var(--ink-800); font-weight: 600; }
.dep__link:hover { color: var(--ti-blue, #0127ce); text-decoration: underline; }
.chip--nav:hover { color: var(--ti-blue, #0127ce); background: rgba(1,39,206,0.08); }

/* --- Next moves: explicit, ranked, sized -------------------------------- */
.nextmoves { list-style: none; counter-reset: nm; margin: 12px 0 14px; padding: 0; display: grid; gap: 8px; }
.nextmove { counter-increment: nm; }
.nextmove__link { display: grid; grid-template-columns: 28px 1fr; grid-template-areas: "num name" "num why" "num step"; column-gap: 10px; padding: 12px 14px; border: 1px solid rgba(26,30,59,0.14); border-radius: 10px; background: #fff; color: var(--ink-900); text-decoration: none; }
.nextmove__link::before { content: counter(nm); grid-area: num; font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--ti-blue, #0127ce); }
.nextmove__link:hover { border-color: var(--ti-blue, #0127ce); }
.nextmove__name { grid-area: name; font-weight: 650; font-size: 14.5px; }
.nextmove__why { grid-area: why; font-size: 11px; color: var(--ink-500); margin-top: 2px; }
.nextmove__step { grid-area: step; font-size: 13px; color: var(--ink-700, #3a3f63); margin-top: 6px; line-height: 1.5; }
.levelup__effort { font-size: 10.5px; color: var(--ink-500); }
.quickwins { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(26,30,59,0.14); }
.quickwins__label { font-size: 11.5px; font-weight: 700; color: var(--ok-600, #0a7c4a); }
.nodeeffort { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.nodeeffort__size { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(26,30,59,0.06); color: var(--ink-700, #3a3f63); }
.nodeeffort__size--quick { background: rgba(10,124,74,0.1); color: #0a7c4a; }
.nodeeffort__size--substantial { background: rgba(206,32,1,0.08); color: #b42c0c; }
.nodeeffort__step { font-size: 13px; line-height: 1.55; color: var(--ink-700, #3a3f63); background: rgba(1,39,206,0.04); border-radius: 8px; padding: 8px 12px; }

/* ============================================================
   THE BIG PICTURE — per-framework coverage strip + lens page
   ============================================================ */
.badge--preview { background: var(--gate-blocked, #b7791f); }

.bigpicture { margin: 0 0 18px; }
.bigpicture__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bigpicture__all { font-family: var(--font-mono); font-size: 11.5px; color: var(--ti-blue, #0127ce); text-decoration: none; }
.bigpicture__all:hover { text-decoration: underline; }
.bigpicture__sub { font-size: 13px; color: var(--ink-500); margin: 6px 0 14px; max-width: 64ch; }
.bigpicture__sub--lede { font-size: 14.5px; color: var(--ink-700, #3a3f63); margin-bottom: 22px; }
.bigpicture__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bigpicture__grid--full { grid-template-columns: repeat(3, 1fr); }

.fwcard { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--border-1, rgba(26,30,59,0.12)); border-radius: 12px; background: var(--bg-1, #fff); text-decoration: none; color: var(--ink-900); transition: border-color .12s ease, box-shadow .12s ease; }
.fwcard:hover { border-color: var(--ti-blue, #0127ce); box-shadow: var(--shadow-sm, 0 1px 2px rgba(13,16,36,0.05)); text-decoration: none; }
.fwcard__top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.fwcard__name { font-weight: 650; font-size: 15px; }
.fwcard__pct { font-family: var(--font-grotesk); font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink-900); }
.fwcard__sym { font-size: 14px; color: var(--ink-500); margin-left: 1px; }
.fwcard__bar { margin: 2px 0; }
.fwcard__bar .tierbar__track { width: 100%; }
.fwcard__count { font-size: 11px; color: var(--ink-500); }

/* The go-to-market journey card leads the strip — a goal, not a standard. */
.fwcard--gtm { border-color: var(--ti-blue, #0127ce); background: rgba(1,39,206,0.03); }
.fwcard--gtm:hover { box-shadow: var(--shadow-sm, 0 1px 2px rgba(13,16,36,0.05)); }
.chip--goal { color: var(--ti-blue, #0127ce); background: rgba(1,39,206,0.08); }

.fwmap { margin-top: 20px; }
.fwmap > .eyebrow { margin-bottom: 12px; }

/* Scale forest: the SIG placeholder is a real card slot with no number — honest
   about a crosswalk we haven't built rather than faking coverage. */
.fwcard--soon { background: var(--bg-2, #f7f8fb); border-style: dashed; cursor: default; }
.fwcard--soon:hover { border-color: var(--border-1, rgba(26,30,59,0.12)); box-shadow: none; }
.fwcard__pct--soon { color: var(--ink-400, #9aa0bd); }
.chip--soon { color: var(--ink-500); background: rgba(26,30,59,0.06); }

/* Leverage moves: the open subdomain + the framework chips it unlocks at once.
   The chips ride the "step" grid row so they sit under the name, clear of the
   counter column. */
.leverage__chips { grid-area: step; margin-top: 6px; }
.chip--fw { color: var(--ti-blue, #0127ce); background: rgba(1,39,206,0.07); }

@media (max-width: 920px) {
  .bigpicture__grid, .bigpicture__grid--full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bigpicture__grid, .bigpicture__grid--full { grid-template-columns: 1fr; }
}

/* Continuous checks (Beat A+): the foundational signals TI verifies for you. The
   rail collapses to a one-line summary once every live check is current; each met
   check is a quiet "monitored" chip that decays back to "needs attention" on cadence. */
.checks { margin: 18px 0; }
.checks__panel { border-radius: 12px; border: 1px solid var(--border-1, rgba(26,30,59,0.12)); background: rgba(26,30,59,0.02); }
.checks__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.checks__summary::-webkit-details-marker { display: none; }
.checks__heading { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink-900); }
.checks__tick { color: var(--ok-600); }
.checks__sub { font-weight: 400; font-size: 13px; color: var(--ink-500); }
.checks__chevron { color: var(--ink-400, #9aa0bd); transition: transform .15s ease; }
.checks__panel[open] .checks__chevron { transform: rotate(180deg); }
.checks__list { list-style: none; margin: 0; padding: 0 18px 6px; }
.check { padding: 14px 0; border-top: 1px solid rgba(26,30,59,0.08); }
.checks__list .check:first-child { border-top: 0; }
.check__main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.check__mark { font-family: var(--font-mono); font-weight: 700; }
.check--monitored .check__mark { color: var(--ok-600); }
.check--attention .check__mark { color: #b54708; }
.check--unconnected .check__mark, .check--coming_soon .check__mark { color: var(--ink-400, #9aa0bd); }
.check__title { font-weight: 600; font-size: 15px; color: var(--ink-900); }
.check__source { font-size: 12.5px; color: var(--ink-400, #9aa0bd); }
.check__headline { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.check__headline--monitored { color: var(--ok-600); }
.check__headline--attention { color: #b54708; }
.check__headline--unconnected { color: var(--ti-blue); }
.check__headline--coming_soon { color: var(--ink-400, #9aa0bd); }
.check__detail { font-size: 13.5px; color: var(--ink-500); margin: 8px 0 0; max-width: 64ch; }
.check__meta { font-size: 12.5px; color: var(--ink-500); margin: 6px 0 0; }
.check__form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.check__form input[type="text"] { flex: 1 1 220px; }
.check__recheck { margin-top: 10px; }
.check__recheck > summary { list-style: none; cursor: pointer; display: inline-block; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ti-blue); }
.check__recheck > summary::-webkit-details-marker { display: none; }
.check--coming_soon { opacity: .72; }