/* Niskus VALOR — the client app before verification (/onboard/: tabs, dashboard, first-phase analysis, charts) and its
   welcome. Came with VALOR Lite (merged into onboarding on 16 Oct 2026). Builds on /onboard/onboard.css (tokens, header,
   question cards); everything here is prefixed lt- . Self-contained: does not load /styles.css, so no class collisions. */

/* welcome extras */
.lt-flow4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* the welcome: the side-stream diagram full width under the photo hero (look.css), rising into it, so its labels stay
   legible. Not .lt-hero: that is the dashboard's dark banner */
.lt-welcome { margin-bottom: 26px; }
.lt-diagram { margin: 0; }
.lt-diagram a { display: block; border-radius: 18px; }
.lt-diagram img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-top: 5px solid var(--teal); border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(16, 33, 43, .10); }
.lt-diagram figcaption { display: none; margin-top: 6px; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-width: 760px) { .lt-diagram figcaption { display: block; } } /* on a phone the labels are small: open the image to zoom */
.lt-gets { list-style: none; margin: 0; padding: 0; }
.lt-gets li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); position: relative; font-size: 13px; }
.lt-gets li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 12px; height: 12px; border-radius: 4px; background: var(--teal); box-shadow: inset 0 0 0 3px var(--teal-t); }
.lt-gets b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.lt-gets span { color: var(--muted); }
.lt-scope { font-size: 12.5px; background: var(--gold-t); border: 1px solid #F0DCA9; border-radius: 10px; padding: 10px 12px; margin: 14px 0 0; }
.lt-alt { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }

/* tabs */
.lt-tabs { position: sticky; top: 55px; z-index: 15; display: flex; gap: 2px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
.lt-tabs button { display: inline-flex; gap: 8px; align-items: center; border: none; background: none; padding: 13px 16px 11px; font-weight: 700; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.lt-tabs button:hover { color: var(--teal-d); }
.lt-tabs button[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold-b); }
.lt-tabs .n { display: inline-flex; width: 22px; height: 22px; border-radius: 7px; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink); font-size: 11.5px; font-weight: 800; }
.lt-tabs [aria-current="page"] .n { background: var(--ink); color: var(--gold-b); }
.lt-tabs .tag { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: 2px 8px; }
.lt-tabs .tag.ok { background: var(--ok-t); color: var(--ok); }

.lt-main { max-width: 1180px; margin: 0 auto; padding: 24px 24px 80px; outline: none; }
.lt-main h1 { font-family: var(--serif); font-size: 27px; margin: 0 0 6px; line-height: 1.2; }
.lt-main h2.lt-h { font-family: var(--serif); font-size: 20px; margin: 26px 0 4px; }
.lt-main .lt-sub { color: var(--muted); margin: 0 0 12px; font-size: 13.5px; max-width: 80ch; }

/* dashboard hero */
.lt-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; background: linear-gradient(150deg, var(--ink), var(--ink-2)); color: #EEF3F1; border-radius: 18px; padding: 24px 28px; border-bottom: 4px solid var(--gold); }
.lt-hero h1 { color: #fff; margin: 4px 0 8px; }
.lt-hero .kick { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-b); margin: 0; }
.lt-hero p.lede { margin: 0 0 14px; color: #CFE3E0; max-width: 64ch; }
.lt-hero .ring { text-align: center; }
.lt-hero .ring small { display: block; font-size: 11.5px; color: #CFE3E0; margin-top: 4px; }
.lt-hero .ob-ring .trk { stroke: rgba(255, 255, 255, .14); }
.lt-hero .ob-ring .num { fill: #fff; }
.lt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .12); color: #fff; margin-right: 6px; }
.lt-chip.gold { background: var(--gold-b); color: var(--ink); } .lt-chip.ok { background: var(--ok); } .lt-chip.bad { background: var(--alert); }

/* journey steps */
.lt-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 18px 0 0; padding: 0; }
.lt-steps li { position: relative; padding: 0 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
.lt-steps li::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--line-2); z-index: 0; }
.lt-steps li:first-child::before { display: none; }
.lt-steps li.done::before, .lt-steps li.now::before { background: var(--teal); }
.lt-steps .dot { position: relative; z-index: 1; display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--line-2); color: var(--muted); font-weight: 800; }
.lt-steps li.done .dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.lt-steps li.now .dot { border-color: var(--gold-b); background: var(--gold-t); color: var(--ink); box-shadow: 0 0 0 4px rgba(230, 173, 43, .2); }
.lt-steps b { display: block; color: var(--ink); margin: 6px 0 2px; font-size: 13px; }
/* C6 — what happens next: three dated rows (protected/onboard/next.js) */
.nx-card { margin-top: 16px; }
.nx-card h2 { margin: 0 0 10px; }
.nx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nx-list li { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); min-width: 0; }
.nx-list li::before { content: ''; position: absolute; left: 13px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); }
.nx-list li.ok::before { background: var(--ok); }
.nx-list li.wait::before { background: var(--gold-b); }
.nx-list li.todo::before { background: #fff; border: 2px solid var(--line-2); width: 8px; height: 8px; }
.nx-list b { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.nx-list small { font-size: 13px; color: var(--muted); }

/* KPI tiles */
.lt-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.lt-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; border-top: 3px solid var(--teal); }
.lt-kpi .v { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lt-kpi .u { font-size: 12px; color: var(--muted); font-weight: 700; }
.lt-kpi .l { font-size: 12px; color: var(--muted); margin-top: 4px; }
.lt-kpi.empty .v { color: var(--text-muted); }
.lt-kpi.money { border-top-color: var(--gold-b); }

/* cards grid */
.lt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.lt-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; min-width: 0; }
.lt-card.lt-ba { margin: 18px 0 14px; } /* today, by category (compare.js) */
.lt-card.span2 { grid-column: span 2; } .lt-card.span3 { grid-column: 1 / -1; }
.lt-card h2 { font-family: var(--serif); font-size: 18px; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.lt-card .lt-sub { font-size: 12.5px; margin-bottom: 10px; }
.lt-card .lt-more { margin-top: 12px; }
.lt-empty { color: var(--muted); font-size: 13px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: 12px; padding: 14px; }

/* charts */
.lt-chart text { font-family: var(--sans); font-size: 11.5px; fill: var(--ink); }
.lt-chart .axis { stroke: var(--line-2); stroke-width: 1; }
.lt-chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.lt-chart .muted { fill: var(--muted); }
.lt-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.lt-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.lt-donut { display: flex; gap: 16px; align-items: center; }
.lt-donut .score { font-family: var(--serif); font-size: 26px; font-weight: 700; fill: var(--ink); }
.lt-dims { display: grid; gap: 5px; flex: 1; min-width: 0; }
.lt-dims .r { display: grid; grid-template-columns: 96px minmax(0, 1fr) 30px; gap: 8px; align-items: center; font-size: 12px; }
.lt-dims .b { height: 7px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.lt-dims .b span { display: block; height: 100%; border-radius: 7px; }
.lt-dims .s { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 6px 0 10px; }
.lt-ladder span { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 8px 4px; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.lt-ladder span.on.not-ready { background: var(--alert-t); color: var(--alert); box-shadow: inset 0 0 0 2px var(--alert); }
.lt-ladder span.on.provisional { background: #FDF0D8; color: #7A4B00; box-shadow: inset 0 0 0 2px var(--gold-b); }
.lt-ladder span.on.indicative { background: var(--teal-t); color: var(--teal-d); box-shadow: inset 0 0 0 2px var(--teal); }
.lt-ladder span.on.firm { background: var(--ok-t); color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok); }
.lt-reasons { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.lt-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; }
.lt-counts div { border-radius: 12px; padding: 12px 10px; text-align: center; background: var(--surface); border: 1px solid var(--line); }
.lt-counts b { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.lt-counts small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.lt-counts .gate b { color: var(--alert); } .lt-counts .warning b { color: #A86A00; } .lt-counts .opportunity b { color: var(--ok); }
.lt-list { list-style: none; margin: 0; padding: 0; }
.lt-list li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 7px 0; font-size: 13px; }
.lt-list li:last-child { border-bottom: none; }
.lt-list .k { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* analysis */
.lt-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px; }
.lt-toolbar .sp { flex: 1; }
.lt-note { font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.lt-streams { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.lt-stream h3 { font-size: 15px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.lt-kgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lt-kgrid div { background: var(--surface); border-radius: 10px; padding: 9px 10px; }
.lt-kgrid .v { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.lt-kgrid .v small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.lt-kgrid .l { font-size: 11.5px; color: var(--muted); }
.lt-kgrid .n { font-size: 10.5px; color: var(--text-muted); }
.lt-checks { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: #7A4B00; }
/* benchmark range bars */
.lt-bench { width: 100%; border-collapse: collapse; font-size: 13px; }
.lt-bench th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line-2); padding: 7px 8px; }
.lt-bench td { border-bottom: 1px solid var(--line); padding: 9px 8px; vertical-align: middle; }
.lt-bench td.lbl { width: 30%; } .lt-bench td.bar { width: 42%; min-width: 220px; } .lt-bench td.val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lt-range { position: relative; height: 26px; }
.lt-range .ax { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: var(--surface-2); }
.lt-range .bd { position: absolute; top: 8px; height: 10px; border-radius: 5px; background: rgba(31, 122, 117, .28); border: 1px solid rgba(31, 122, 117, .55); }
.lt-range .ty { position: absolute; top: 5px; width: 2px; height: 16px; background: var(--teal-d); }
.lt-range .mk { position: absolute; top: 5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(16, 33, 43, .4); background: var(--ink); }
.lt-range .mk.typical { background: var(--ok); } .lt-range .mk.near { background: var(--gold-b); } .lt-range .mk.outside { background: var(--alert); }
.lt-range .sc { position: absolute; top: 20px; font-size: 10px; color: var(--text-muted); }
.lt-st { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.lt-st.typical { background: var(--ok-t); color: var(--ok); } .lt-st.near { background: #FDF0D8; color: #7A4B00; } .lt-st.outside { background: var(--alert-t); color: var(--alert); } .lt-st.not-given { background: var(--surface-2); color: var(--muted); }
/* rule screen */
.lt-screen { display: grid; gap: 10px; }
.lt-group h3 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 14px 0 6px; display: flex; gap: 8px; align-items: center; }
.lt-group.gate h3 { color: var(--alert); } .lt-group.warning h3 { color: #A86A00; } .lt-group.opportunity h3 { color: var(--ok); } .lt-group.data h3, .lt-group.info h3 { color: var(--muted); }
.lt-obs { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line-2); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 8px; }
.lt-obs.gate { border-left-color: var(--alert); } .lt-obs.warning { border-left-color: var(--gold-b); } .lt-obs.opportunity { border-left-color: var(--ok); }
.lt-obs .rid { font-size: 10.5px; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 6px; padding: 2px 6px; margin-right: 6px; }
.lt-obs .prov { font-size: 10.5px; font-weight: 800; color: #7A4B00; background: #FDF0D8; border-radius: 6px; padding: 2px 6px; margin-left: 6px; }
.lt-obs details { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.lt-obs summary { cursor: pointer; font-weight: 700; color: var(--teal-d); }
.lt-obs .inputs { margin: 6px 0 0; padding-left: 18px; }
.lt-grade { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--muted); margin-left: 4px; }
.lt-grade.gA { background: var(--ok-t); color: var(--ok); } .lt-grade.gB { background: var(--teal-t); color: var(--teal-d); } .lt-grade.gC { background: #FDF0D8; color: #7A4B00; }
/* next phase */
.lt-phase { background: linear-gradient(150deg, #FFF9EA, #FBF3DC); border: 1px solid #F0DCA9; border-radius: 16px; padding: 20px 22px; margin-top: 18px; }
.lt-phase h2 { margin-top: 0 !important; }
.lt-phase ul { margin: 8px 0 12px; padding-left: 20px; font-size: 13.5px; }
.lt-phase li { margin: 4px 0; }

/* print: the analysis as a clean document */
@media print {
  .ob-top, .lt-tabs, .lt-toolbar, .ob-actions, .lt-noprint { display: none !important; }
  body { background: #fff; }
  .lt-main { padding: 0; max-width: none; }
  .lt-card, .lt-obs, .lt-phase { break-inside: avoid; box-shadow: none; }
  details { display: block; } details > * { display: block; }
}
@media (max-width: 1080px) { .lt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lt-card.span2 { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .lt-flow4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-hero { grid-template-columns: 1fr; padding: 20px; } .lt-hero .ring { text-align: left; }
  .lt-grid { grid-template-columns: 1fr; } .lt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-steps { grid-template-columns: 1fr; gap: 8px; } .lt-steps li { text-align: left; display: flex; gap: 10px; align-items: center; } .lt-steps li::before { display: none; } .lt-steps b { margin: 0; }
  .lt-main { padding: 18px 16px 70px; } .lt-tabs { padding: 0 8px; position: static; }
  .lt-bench td.lbl { width: auto; } .lt-bench td.bar { min-width: 160px; }
  .lt-streams { grid-template-columns: 1fr; }
}