/*
 * Qäre Health — shared component styles for every app shell.
 * Depends on assets/tokens.css. No em dashes.
 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--page);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Top bar */
.qbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: 58px; padding: 0 20px;
  background: rgba(251,250,247,0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.qbar .wordmark { font-family: var(--font-brand); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.wm-img { height: 19px; width: auto; display: block; }
.qbar .wordmark .dot { color: var(--iris-bright); }
.qbar .app-name { font-family: var(--font-brand); font-weight: 700; font-size: 15px; color: var(--iris); padding-left: 12px; border-left: 1px solid var(--border); }
.qbar .spacer { flex: 1; }
.qbar .live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--mid); }
.qbar .live .d { width: 8px; height: 8px; border-radius: 50%; background: var(--verified); box-shadow: 0 0 0 0 rgba(31,157,107,0.5); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(31,157,107,0.45)} 70%{box-shadow:0 0 0 7px rgba(31,157,107,0)} 100%{box-shadow:0 0 0 0 rgba(31,157,107,0)} }
@media (prefers-reduced-motion: reduce) { .qbar .live .d { animation: none; } }
.qbar .persona { display: flex; align-items: center; gap: 9px; }
.qbar .persona .ava { width: 32px; height: 32px; border-radius: 50%; background: var(--iris-tint); color: var(--iris-deep); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.qbar .persona .pn { font-size: 13px; font-weight: 600; line-height: 1.1; }
.qbar .persona .pr { font-size: 11px; color: var(--mid); }

/* Buttons */
.btn { font-family: var(--font-ui); font-size: 13px; font-weight: 600; border-radius: var(--control-radius); padding: 9px 16px; cursor: pointer; border: 1px solid transparent; transition: all .15s ease; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--iris); color: #fff; }
.btn-primary:hover { background: var(--iris-deep); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--card-radius); padding: 20px; }
.card.shadow { box-shadow: var(--card-shadow); }
.card.stripe { border-left: 3px solid var(--iris); }
.card.stripe-crit { border-left: 3px solid var(--inconsistent); }
.card.stripe-review { border-left: 3px solid var(--claimed); }

/* Status chips (verification language) */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; border-radius: 999px; padding: 4px 11px; border: 1px solid var(--border); color: var(--mid); background: var(--surface); }
.chip.verified { background: var(--verified-tint); color: var(--verified); border-color: var(--verified-tint); }
.chip.claimed { background: var(--claimed-tint); color: var(--claimed); border-color: var(--claimed-tint); }
.chip.unmeasured { background: var(--unmeasured-tint); color: var(--unmeasured); border-color: var(--unmeasured-tint); }
.chip.inconsistent { background: var(--inconsistent-tint); color: var(--inconsistent); border-color: var(--inconsistent-tint); }
.chip.iris { background: var(--iris-tint); color: var(--iris-deep); border-color: var(--iris-line); }

/* Section bits */
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--iris); }
.greet { font-family: var(--font-brand); font-weight: 800; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -0.01em; }
.sub { color: var(--mid); margin-top: 6px; }
.provenance { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 14px; display: flex; gap: 7px; align-items: baseline; }
.provenance::before { content: "◦"; color: var(--iris-bright); }

/* ---- Operating-system shell: module rail + workspace ---- */
.os { display: grid; grid-template-columns: 236px 1fr; align-items: start; }
@media (max-width: 860px) { .os { grid-template-columns: 1fr; } }
.os-nav { position: sticky; top: 58px; align-self: start; height: calc(100vh - 58px); overflow-y: auto; border-right: 1px solid var(--hairline); background: var(--surface); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) { .os-nav { position: static; height: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--hairline); } }
.os-nav .grp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 12px 10px 6px; }
@media (max-width: 860px) { .os-nav .grp { display: none; } }
.navitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 9px; padding: 9px 10px; font-size: 13px; color: var(--mid); white-space: nowrap; }
.navitem:hover { background: var(--surface-alt); color: var(--ink); }
.navitem.on { background: var(--iris-tint); color: var(--iris-deep); font-weight: 600; }
.navitem .ic { width: 20px; height: 20px; border-radius: 6px; background: var(--surface-alt); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--mid); flex: 0 0 auto; }
.navitem.on .ic { background: var(--iris); color: #fff; }
.navitem .bdg { margin-left: auto; font-family: var(--font-mono); font-size: 10px; background: var(--inconsistent); color: #fff; border-radius: 999px; padding: 1px 7px; }
.navitem .bdg.calm { background: var(--iris); }
.os-main { padding: 24px; min-width: 0; }
@media (max-width: 520px) { .os-main { padding: 16px; } }

/* Section header + toolbar */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sec-head .t { font-family: var(--font-brand); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.sec-head .d { color: var(--mid); font-size: 14px; margin-top: 2px; }
.sec-head .actions { display: flex; gap: 8px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .search { flex: 1 1 200px; min-width: 140px; font-family: var(--font-ui); font-size: 13px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }

/* Sub-tabs within a module */
.subtabs { display: flex; gap: 4px; background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: 12px; padding: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.subtab { border: 0; background: transparent; border-radius: 9px; padding: 8px 14px; font-size: 13px; color: var(--mid); font-weight: 500; }
.subtab.on { background: var(--surface); color: var(--ink); box-shadow: var(--card-shadow); font-weight: 600; }

/* Dense data table */
.qt { width: 100%; border-collapse: collapse; font-size: 13px; }
.qt th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.qt td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.qt tr:hover td { background: var(--row-hover); }
.qt td .nm { font-weight: 600; }
.qt td .sub2 { font-size: 11px; color: var(--mid); }
.qt .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.qt-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--card-radius); background: var(--surface); }

/* Split and grid */
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .cards3 { grid-template-columns: 1fr; } }

/* Severity dot + meter */
.sev { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.sev.ok { background: var(--verified); } .sev.warn { background: var(--claimed); } .sev.crit { background: var(--inconsistent); } .sev.idle { background: var(--faint); }
.meter { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 999px; background: var(--iris); }
.meter .fill.warn { background: var(--claimed); } .meter .fill.crit { background: var(--inconsistent); } .meter .fill.ok { background: var(--verified); }
.wardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 5px; }
.bed { aspect-ratio: 1; border-radius: 5px; background: var(--verified-tint); border: 1px solid var(--verified); }
.bed.occ { background: var(--iris-tint); border-color: var(--iris-line); }
.bed.block { background: var(--inconsistent-tint); border-color: var(--inconsistent); }
.bed.free { background: var(--surface-alt); border-color: var(--border); }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.spark i { flex: 1; background: var(--iris); border-radius: 2px 2px 0 0; min-height: 2px; display: block; }
.spark i.hot { background: var(--inconsistent); }

/* Tenant size switcher */
.tenants { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tenant { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; color: var(--mid); transition: all .15s ease; }
.tenant:hover { border-color: var(--iris-line); }
.tenant.on { background: var(--iris-tint); border-color: var(--iris-line); color: var(--iris-deep); font-weight: 600; }
.tenant .tz { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--iris); background: var(--surface); border-radius: 999px; padding: 1px 7px; }
.tenant.on .tz { background: #fff; }

/* Live toast when a cross-tab event lands (docked left so IRIS owns the right) */
.toast-wrap { position: fixed; left: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast { background: var(--chrome); color: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: var(--card-shadow); font-size: 13px; opacity: 0; transform: translateY(8px); transition: all .25s ease; }
.toast.in { opacity: 1; transform: none; }
.toast .t-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--iris-bright); }

/* Impact and GIC panel */
.impact { background: var(--surface-alt); border: 1px solid var(--iris-line); border-radius: var(--card-radius); padding: 18px; }
.impact h3 { font-family: var(--font-brand); font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.impact .rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.impact .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; }
.impact .row .m { font-size: 13px; }
.impact .row .v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

.figs { display: flex; gap: 10px; flex-wrap: wrap; }
.fig { flex: 1 1 130px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; }
.fig .fv { font-family: var(--font-mono); font-size: 22px; font-weight: 600; }
.fig .fk { font-size: 11px; color: var(--mid); margin-top: 2px; }

.feed { display: flex; flex-direction: column; gap: 8px; }
.feed .ev { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.feed .ev .tm { font-family: var(--font-mono); font-size: 10px; color: var(--faint); flex: 0 0 56px; }
.feed .ev.fresh { animation: flash 1.2s ease; }
@keyframes flash { 0%{background:var(--iris-tint)} 100%{background:transparent} }

/* ---- IRIS: Qare's docked copilot (shared, every app) ---- */
.iriswidget { position: fixed; right: 20px; bottom: 20px; z-index: 95; }
.iris-mk { width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto; background:
  radial-gradient(circle at 30% 30%, var(--iris-bright), var(--iris-deep)); box-shadow: 0 0 0 3px var(--iris-tint); }
.iris-fab { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-brand); font-weight: 700;
  font-size: 13px; color: #fff; background: var(--iris); border: 0; border-radius: 999px; padding: 11px 18px;
  cursor: pointer; box-shadow: 0 10px 24px -8px rgba(74,59,166,0.6); transition: transform .15s ease, background .15s ease; }
.iris-fab:hover { background: var(--iris-deep); transform: translateY(-1px); }
.iriswidget.open .iris-fab { display: none; }
.iris-panel { width: 370px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 100px);
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--iris-line);
  border-radius: 18px; box-shadow: 0 30px 70px -28px rgba(27,23,48,0.5); overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity .2s ease, transform .2s ease; }
.iriswidget.open .iris-panel { opacity: 1; transform: none; }
.iris-h { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--hairline);
  background: var(--surface-alt); }
.iris-h b { font-family: var(--font-brand); font-size: 14px; }
.iris-ctx { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--iris); background: var(--surface); border: 1px solid var(--iris-line); border-radius: 999px; padding: 2px 9px; }
.iris-x { margin-left: auto; background: transparent; border: 0; font-size: 20px; line-height: 1; color: var(--mid); cursor: pointer; padding: 0 4px; }
.iris-log { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.iris-b { max-width: 86%; font-size: 13px; line-height: 1.5; padding: 10px 13px; border-radius: 13px; white-space: pre-wrap; }
.iris-b.ai { align-self: flex-start; background: var(--iris-tint); color: var(--ink); border-bottom-left-radius: 4px; }
.iris-b.me { align-self: flex-end; background: var(--chrome); color: #fff; border-bottom-right-radius: 4px; }
.iris-dots { display: inline-block; width: 18px; }
.iris-dots::after { content: "..."; animation: irisdots 1.2s steps(4, end) infinite; }
@keyframes irisdots { 0%{content:"."} 33%{content:".."} 66%{content:"..."} }
.iris-b.think { display: flex; align-items: center; gap: 7px; background: transparent; color: var(--mid); font-size: 12px; padding: 4px 2px; }
.iris-team { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--iris); }
.iris-acts { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; margin-top: -2px; }
.iris-act { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 7px 13px; cursor: pointer; border: 1px solid transparent; }
.iris-act.act { background: var(--iris); color: #fff; }
.iris-act.act:hover { background: var(--iris-deep); }
.iris-act.evidence { background: var(--surface); color: var(--iris-deep); border-color: var(--iris-line); }
.iris-act.evidence:hover { background: var(--iris-tint); }
.iris-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 10px; }
.iris-chip { font-size: 12px; color: var(--iris-deep); background: var(--surface-alt); border: 1px solid var(--iris-line);
  border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.iris-chip:hover { background: var(--iris-tint); }
.iris-in { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--hairline); }
.iris-in input { flex: 1; font-family: var(--font-ui); font-size: 13px; padding: 9px 13px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); }
.iris-in input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.iris-in button { flex: 0 0 auto; width: 36px; border: 0; border-radius: 50%; background: var(--iris); color: #fff; font-size: 15px; cursor: pointer; }
.iris-foot { font-size: 10.5px; color: var(--faint); padding: 0 15px 12px; }
@media (prefers-reduced-motion: reduce) { .iris-fab, .iris-panel { transition: none; } .iris-dots::after { animation: none; content: "..."; } }

/* ---- Live operating surface: flow strip, clock, streaming feed ---- */
.flow { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--card-radius); padding: 18px 16px; }
.flow .node { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; text-align: center; }
.flow .node .dot { width: 38px; height: 38px; border-radius: 11px; background: var(--iris-tint); color: var(--iris-deep);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; border: 1px solid var(--iris-line); }
.flow .node.hot .dot { background: var(--inconsistent-tint); color: var(--inconsistent); border-color: var(--inconsistent-tint); }
.flow .node .nl { font-size: 11px; font-weight: 600; }
.flow .node .nv { font-family: var(--font-mono); font-size: 11px; color: var(--mid); }
.flow .link { flex: 1 1 24px; position: relative; height: 2px; min-width: 24px; background: var(--border); align-self: center; margin-top: -18px; }
.flow .link::after { content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--iris-bright); animation: flowdot 1.8s linear infinite; }
.flow .link.hot::after { background: var(--inconsistent); }
@keyframes flowdot { from { left: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flow .link::after { animation: none; opacity: .6; } }
.clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verified); margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(31,157,107,0.5); animation: pulse 2s infinite; vertical-align: middle; }
.band { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }

/* ---- Element library, rail chips, EESG rollup (the three-rail contract, visible) ---- */
.rails { display: inline-flex; gap: 4px; }
.rail { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; border-radius: 999px; padding: 2px 6px; border: 1px solid var(--border); color: var(--faint); background: var(--surface); }
.rail.on.exch { color: var(--iris-deep); background: var(--iris-tint); border-color: var(--iris-line); }
.rail.on.eesg { color: var(--verified); background: var(--verified-tint); border-color: var(--verified-tint); }
.rail.on.gic { color: var(--capital); background: var(--claimed-tint); border-color: var(--claimed-tint); }

.lib { width: 100%; border-collapse: collapse; font-size: 13px; }
.lib th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.lib td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.lib td .nm { font-weight: 600; }
.lib td .ds { font-size: 11px; color: var(--mid); }
.lib .grp-row td { background: var(--surface-alt); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--iris); }
.toggle { position: relative; width: 38px; height: 22px; border-radius: 999px; border: 0; background: var(--border); cursor: pointer; transition: background .15s ease; flex: 0 0 auto; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle.on { background: var(--iris); } .toggle.on::after { transform: translateX(16px); }
.toggle.locked { opacity: .5; cursor: not-allowed; }

/* EESG rollup grid, generated from enabled modules */
.eesg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .eesg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .eesg { grid-template-columns: 1fr; } }
.eesg .pillar { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--card-radius); padding: 14px; }
.eesg .pillar h4 { font-family: var(--font-brand); font-size: 13px; letter-spacing: .02em; margin-bottom: 10px; color: var(--iris-deep); }
.eesg .met { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.eesg .met:last-child { border-bottom: 0; }
.eesg .met .mv { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eesg .met .mn { font-size: 12px; }
.eesg .met .mnum { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.eesg .met .src { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-top: 2px; }
.eesg .empty { color: var(--faint); font-size: 12px; }

.progress { height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; margin-top: 6px; }
.progress .fill { height: 100%; background: var(--iris); border-radius: 999px; transition: width .4s ease; }
.progress .fill.ok { background: var(--verified); } .progress .fill.warn { background: var(--claimed); } .progress .fill.crit { background: var(--inconsistent); }
.scanfeed i { font-family: var(--font-mono); font-size: 11px; }
.pitch { background: linear-gradient(135deg, var(--iris-tint), var(--surface)); border: 1px solid var(--iris-line); border-radius: var(--card-radius); padding: 16px 18px; margin-bottom: 16px; }
.pitch .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--iris); }
.pitch .l { font-family: var(--font-brand); font-weight: 700; font-size: 15px; margin-top: 3px; }

/* ---- Topbar trust badge + role chip ---- */
.trustbadge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--verified); background: var(--verified-tint); border: 1px solid var(--verified-tint); border-radius: 999px; padding: 6px 12px; cursor: pointer; margin-right: 12px; }
.trustbadge:hover { filter: brightness(0.98); }
.shield { width: 11px; height: 13px; flex: 0 0 auto; background: currentColor; -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 8.5-8 11-4.6-2.5-8-6-8-11V5l8-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 8.5-8 11-4.6-2.5-8-6-8-11V5l8-3z'/%3E%3C/svg%3E"); }
.rolechip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--iris-deep); background: var(--iris-tint); border: 1px solid var(--iris-line); border-radius: 999px; padding: 2px 8px; margin-left: 10px; align-self: center; }

/* Security engine list in the compliance module */
.seclist { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
@media (max-width: 760px) { .seclist { grid-template-columns: 1fr; } }
.secrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }

/* ---- Auth: login + secure-loading splash ---- */
#qare-auth { position: fixed; inset: 0; z-index: 1000; }
.auth-wrap { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; isolation: isolate;
  background: radial-gradient(1200px 600px at 70% -10%, var(--iris-tint), var(--page)); overflow: auto; }
.auth-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero); background-repeat: no-repeat; background-position: center 42%;
  background-size: min(880px, 92%) auto; opacity: 0.16; pointer-events: none; }
.auth-card, .splash { position: relative; z-index: 1; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; box-shadow: 0 30px 80px -40px rgba(27,23,48,.4); padding: 34px 30px; }
.auth-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-brand); font-weight: 800; font-size: 20px; }
.auth-brand .auth-logo { height: 21px; }
.auth-brand.big { justify-content: center; font-size: 24px; }
.auth-app { font-family: var(--font-brand); font-weight: 700; font-size: 15px; color: var(--iris); margin-top: 14px; }
.auth-sub { color: var(--mid); font-size: 14px; margin-top: 2px; }
.auth-err { background: var(--inconsistent-tint); color: var(--inconsistent); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-top: 14px; }
.auth-l { display: block; font-size: 11px; font-weight: 600; color: var(--mid); letter-spacing: .02em; margin: 16px 0 5px; }
.auth-in { width: 100%; font-family: var(--font-ui); font-size: 14px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.auth-in:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.auth-roles { display: flex; gap: 6px; flex-wrap: wrap; }
.auth-role { font-size: 12.5px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 13px; cursor: pointer; color: var(--mid); }
.auth-role.on { background: var(--iris-tint); border-color: var(--iris-line); color: var(--iris-deep); font-weight: 600; }
.auth-primary { width: 100%; margin-top: 20px; background: var(--iris); color: #fff; border: 0; border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 600; cursor: pointer; }
.auth-primary:hover { background: var(--iris-deep); }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; color: var(--faint); font-size: 11px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.auth-sso { display: grid; gap: 8px; }
.auth-ssobtn { font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 11px; cursor: pointer; color: var(--ink); }
.auth-ssobtn:hover { background: var(--surface-alt); }
.auth-demo { margin-top: 18px; font-size: 12px; color: var(--mid); text-align: center; background: var(--surface-alt); border-radius: 10px; padding: 9px; }
.auth-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 11px; color: var(--verified); }

.splash { width: 100%; max-width: 420px; text-align: center; }
.splash-app { font-family: var(--font-brand); font-weight: 700; font-size: 15px; color: var(--iris); margin-top: 10px; }
.splash-steps { display: inline-flex; flex-direction: column; gap: 10px; text-align: left; margin: 26px auto; }
.splash-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--faint); transition: color .2s ease; }
.splash-step .sdot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; transition: all .2s ease; }
.splash-step.on { color: var(--ink); }
.splash-step.on .sdot { background: var(--verified); border-color: var(--verified); box-shadow: inset 0 0 0 2px var(--surface); }
.splash-bar { height: 5px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; max-width: 280px; margin: 0 auto; }
.splash-fill { height: 100%; width: 0; background: var(--iris); border-radius: 999px; transition: width .35s ease; }
.splash-sign { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--mid); }

/* ===== In-depth clinical chart (3-column workspace) ===== */
.chart3 { display: grid; grid-template-columns: 252px minmax(0,1fr) 304px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .chart3 { grid-template-columns: 1fr; } }
.cblock { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--card-radius); padding: 15px; margin-bottom: 14px; }
.cblock h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.pii.blur { filter: blur(4.5px); user-select: none; }
.crec-top { display: flex; gap: 11px; align-items: center; }
.crec-av { width: 46px; height: 46px; border-radius: 50%; background: var(--iris); color: #fff; display: grid; place-items: center; font-family: var(--font-brand); font-weight: 800; font-size: 16px; flex: 0 0 auto; }
.crec-nm { font-family: var(--font-brand); font-weight: 800; font-size: 16px; line-height: 1.1; }
.crec-meta { font-size: 11px; color: var(--mid); margin-top: 2px; }
.piitoggle { font-family: var(--font-mono); font-size: 10px; color: var(--iris); background: var(--iris-tint); border: 1px solid var(--iris-line); border-radius: 999px; padding: 3px 8px; cursor: pointer; }
.cmember { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.cmember:last-child { border-bottom: 0; }
.cmini { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-alt); color: var(--iris-deep); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; flex: 0 0 auto; }
.cmember .cnm { font-size: 12.5px; font-weight: 600; line-height: 1.15; }
.cmember .crole { font-size: 11px; color: var(--mid); }
.cdot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: 0 0 auto; }
.cdot.on { background: var(--verified); } .cdot.off { background: var(--border); } .cdot.crit { background: var(--inconsistent); }
.qa-btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 9px; padding: 9px 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.qa-btn:hover { background: var(--surface-alt); }
.qa-btn.accent { color: var(--iris-deep); font-weight: 600; }

/* Care plan goals */
.goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 920px) { .goals { grid-template-columns: 1fr; } }
.goalcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 14px; }
.goalcard .gtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.goalcard .gdom { font-size: 11px; color: var(--mid); }
.goalcard .glabel { font-size: 13.5px; font-weight: 600; line-height: 1.3; min-height: 34px; }
.goalcard .gpct { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--mid); }
.gstat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; }
.gstat.ontrack { background: var(--verified-tint); color: var(--verified); }
.gstat.atrisk { background: var(--inconsistent-tint); color: var(--inconsistent); }
.gstat.hold { background: var(--claimed-tint); color: var(--claimed); }

/* Clinical timeline */
.tl { position: relative; }
.tlitem { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding-bottom: 14px; }
.tlic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; font-weight: 600; flex: 0 0 auto; z-index: 1; }
.tlic.alert { background: var(--inconsistent-tint); color: var(--inconsistent); }
.tlic.lab { background: var(--iris-tint); color: var(--iris-deep); }
.tlic.med { background: var(--verified-tint); color: var(--verified); }
.tlic.note { background: var(--claimed-tint); color: var(--claimed); }
.tlic.dc, .tlic.adm { background: var(--surface-alt); color: var(--mid); }
.tlcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; }
.tlcard.alert { border-color: var(--inconsistent-tint); }
.tlmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--mid); margin-bottom: 4px; }
.tlbadge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 7px; background: var(--surface-alt); color: var(--mid); }
.tltitle { font-size: 13.5px; font-weight: 600; }
.tldesc { font-size: 12.5px; color: var(--mid); margin-top: 3px; line-height: 1.5; }
.protected { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-alt); border-radius: 9px; padding: 9px 11px; margin-top: 8px; }
.protected .lock { font-size: 12px; color: var(--mid); display: flex; align-items: center; gap: 6px; }
.glassbtn { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--claimed); background: var(--claimed-tint); border: 1px solid var(--claimed-tint); border-radius: 999px; padding: 5px 11px; cursor: pointer; }

/* Risk radar + agent insights + compliance */
.radar { text-align: center; }
.radar .rscore { font-family: var(--font-brand); font-weight: 800; font-size: 34px; line-height: 1; }
.radar .rout { font-size: 12px; color: var(--mid); }
.radar .rtrend { font-size: 11px; margin-top: 4px; }
.radar .rtrend.up { color: var(--inconsistent); } .radar .rtrend.down { color: var(--verified); } .radar .rtrend.flat { color: var(--mid); }
.rdoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rdom { background: var(--surface-alt); border-radius: 10px; padding: 8px 6px; }
.rdom .rn { font-size: 10px; color: var(--mid); }
.rdom .rv { font-family: var(--font-mono); font-weight: 600; font-size: 15px; }
.ins { border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; border: 1px solid var(--hairline); }
.ins .ik { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; font-weight: 600; }
.ins.critical { background: var(--inconsistent-tint); border-color: var(--inconsistent-tint); } .ins.critical .ik { color: var(--inconsistent); }
.ins.risk { background: var(--claimed-tint); border-color: var(--claimed-tint); } .ins.risk .ik { color: var(--claimed); }
.ins.opportunity { background: var(--iris-tint); border-color: var(--iris-line); } .ins.opportunity .ik { color: var(--iris-deep); }
.ins .it { font-size: 12.5px; line-height: 1.5; }
.chk { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
.chk:last-child { border-bottom: 0; }
.chk .cico { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex: 0 0 auto; color: #fff; }
.chk .cico.ok { background: var(--verified); } .chk .cico.no { background: var(--claimed); }

/* Login demo button + legal */
.auth-demobtn { width: 100%; margin-top: 16px; background: var(--surface-alt); color: var(--iris-deep); border: 1px solid var(--iris-line); border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.auth-demobtn:hover { background: var(--iris-tint); }
.auth-legal { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); text-align: center; font-size: 11px; color: var(--mid); line-height: 1.7; }
.auth-legal a { color: var(--mid); text-decoration: underline; }
.auth-note { color: var(--faint); font-size: 10.5px; }

/* Shared legal footer at the foot of every app */
.legalbar { border-top: 1px solid var(--hairline); background: var(--surface); padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 11px; color: var(--mid); }
.legalbar .lb-co { font-weight: 600; color: var(--ink); }
.legalbar .lb-links a { color: var(--mid); text-decoration: underline; margin-right: 10px; }
.legalbar .lb-note { color: var(--faint); flex: 1 1 320px; }
.legalbar .shield { color: var(--verified); }