/* OC-245 · Web Action Surface — OC-247: :root SINH từ DESIGN_TOKENS (cùng sha với ops-web/Theme.kt/Theme.swift), ngữ pháp bố cục theo nghĩa */
/* tokensSha256 3ab09c4404eb7054a23ffeccc435795d82b032fe73bcecd912c27bc6ee7531d8 — sinh từ DESIGN_TOKENS.json, không sửa tay */
:root{--bg:#080b0f;--panel:#10161d;--panel2:#161e27;--line:#24303c;--text:#e6f2ff;--muted:#8e9aa7;--cyan:#65e7f2;--gold:#e5c36b;--blue:#3488ff;--violet:#9b5cff;--good:#5cd68d;--warn:#e5a36b;--bad:#f06f79;--unknown:#8e9aa7;--tien:#e5c36b;--trung:#65e7f2;--hau:#e5a36b;--unmeasured:#8e9aa7;--residual:#9b5cff;--bgDeep:#030914;--fieldA:#06101c;--fieldB:#0b1a2e;--fieldC:#12233a;--panelDeep:#0a1422;--lineSoft:#17314a;--lineStrong:#2b3a4d;--textDim:#7890a8;--textSoft:#9db0c3;--glowCyan:#22d3ee;--violetDeep:#7a3cff;--orbit:#2b3a4d;--edge:#3a4c66;--font-xs:10px;--font-sm:11px;--font-base:12px;--font-md:13px;--font-lg:15px;--font-xl:18px;--font-title:26px;--space-xs:4px;--space-sm:6px;--space-md:12px;--space-lg:16px;--space-xl:24px;--radius-card:12px;--radius-pill:999px;--breath:9s;--font-display:"Be Vietnam Pro","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;--elev-card:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);--elev-glow:0 0 18px;--compact-max:599px;--medium-max:1023px;--tap:44px;--tokens-sha:3ab09c4404eb7054;--lg-compact-max:599;--lg-medium-max:1023;--lg-short-h:480;--lg-dense-font:150;--lg-phone-max:600;--lg-tablet-max:1023;--art-identity-motion:900ms;--art-identity-glow:18px;--art-identity-blur:12px;--art-operational-motion:180ms;--art-operational-glow:6px;--art-operational-blur:4px;--art-evidence-motion:0ms;--art-evidence-glow:0px;--art-evidence-blur:0px;--prim-pad:12px;--prim-min-card:240px;--prim-lh:1.5;--morph-matrix-expanded:grid-8x5;--morph-matrix-medium:domain-seat-bands;--morph-matrix-compact:domain-cards-drilldown;--morph-hitl-expanded:pending-list+evidence+machine-did;--morph-hitl-medium:pending-list+evidence;--morph-hitl-compact:pending-cards;--morph-memory-expanded:lineage-graph+inspector;--morph-memory-medium:lineage-lanes;--morph-memory-compact:lineage-stream;--morph-field-expanded:radial+inspector;--morph-field-medium:radial+drawer;--morph-field-compact:vertical-topology-stack;--morph-shell-expanded:rail+main;--morph-shell-medium:rail-collapsed+main;--morph-shell-compact:header3+drawer+main-full;--morph-home-expanded:metrics-grid+field;--morph-home-medium:metrics-2col+field;--morph-home-compact:hero-state+vertical-cards;--morph-release-expanded:horizontal-pipeline;--morph-release-medium:horizontal-pipeline;--morph-release-compact:vertical-timeline;--morph-focus-expanded:current+peek+collapsed;--morph-focus-medium:current+peek+collapsed;--morph-focus-compact:current-only+peek+collapsed;--salience-order:blocked,residual-open,evidence-gap,reduced,info}
body{margin:0;background:var(--bg);color:var(--text);font:var(--font-lg)/1.5 var(--font-body)}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
main{display:grid;gap:14px;padding:14px;grid-template-columns:minmax(0,1fr);container-type:inline-size}
body[data-size="expanded"] main{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px}
.s{font-size:var(--font-base);color:var(--muted)}button{min-height:var(--tap);min-width:var(--tap);background:var(--panel2);color:var(--cyan);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}
pre{white-space:pre-wrap;font-size:var(--font-base);font-family:var(--font-mono);color:var(--muted)}
.grid{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:4px;font-size:var(--font-base)}
.grid .h{color:var(--muted)}.grid .c{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 6px;min-height:var(--tap)}
.grid .c.on{border-color:var(--good);color:var(--good)}
.q{padding:10px;border-left:3px solid var(--cyan);margin:6px 0;background:var(--panel2);border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.locked{opacity:.55;border-style:dashed}
.lock-note{color:var(--warn)}


/* OC-252 · Living Constitutional Art Layer — visual hierarchy follows state, not decoration. */
*{box-sizing:border-box}
html{background:var(--bgDeep)}
body{min-height:100vh;background:
 radial-gradient(900px 520px at 52% -8%,color-mix(in srgb,var(--blue) 24%,transparent),transparent 62%),
 radial-gradient(720px 480px at 96% 18%,color-mix(in srgb,var(--violet) 16%,transparent),transparent 68%),
 linear-gradient(180deg,var(--bgDeep),var(--fieldA) 45%,var(--bgDeep));letter-spacing:.005em}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(color-mix(in srgb,var(--cyan) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--cyan) 6%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
header{position:sticky;top:0;z-index:30;padding:16px clamp(18px,3vw,38px);backdrop-filter:blur(18px) saturate(130%);background:color-mix(in srgb,var(--bgDeep) 76%,transparent);border-bottom:1px solid color-mix(in srgb,var(--cyan) 22%,var(--line));box-shadow:0 18px 50px rgba(0,0,0,.22)}
header h1{margin:0;font:700 clamp(22px,2.8vw,34px)/1 var(--font-display);letter-spacing:-.035em;background:linear-gradient(110deg,#fff 10%,var(--cyan) 52%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
header h1:after{content:" · Living Constitutional Surface";font-size:.42em;font-weight:500;letter-spacing:.04em;color:var(--textSoft);-webkit-text-fill-color:var(--textSoft)}
main{max-width:1500px;margin:0 auto;padding:clamp(16px,2.4vw,34px);gap:18px}
.card{position:relative;overflow:visible;padding:clamp(16px,2vw,24px);background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 92%,transparent),color-mix(in srgb,var(--panelDeep) 94%,transparent));border:1px solid color-mix(in srgb,var(--lineStrong) 88%,var(--cyan));box-shadow:var(--elev-card),0 0 0 1px rgba(255,255,255,.012);backdrop-filter:blur(12px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--gold),transparent);opacity:.5}
.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cyan) 42%,var(--lineStrong));box-shadow:var(--elev-card),0 14px 40px rgba(0,0,0,.28),0 0 28px color-mix(in srgb,var(--blue) 12%,transparent)}
h2{margin:0 0 8px;font:650 clamp(18px,2vw,23px)/1.18 var(--font-display);letter-spacing:-.02em}
.s{color:var(--textSoft);max-width:86ch}
button,input,textarea,select{font:inherit}
button{border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 94%,#fff 2%),var(--panelDeep));border-color:color-mix(in srgb,var(--lineStrong) 82%,var(--cyan));box-shadow:0 1px 0 rgba(255,255,255,.04) inset;transition:all .16s ease}
button:hover{color:#fff;border-color:var(--cyan);box-shadow:0 0 24px color-mix(in srgb,var(--cyan) 17%,transparent)}
input,textarea,select{background:color-mix(in srgb,var(--bgDeep) 72%,var(--panel));color:var(--text);border:1px solid var(--lineStrong);border-radius:10px;padding:10px 12px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 12%,transparent)}
pre{padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.18);border:1px solid color-mix(in srgb,var(--lineSoft) 70%,transparent)}
.grid .c{border-radius:10px;background:linear-gradient(145deg,var(--panel2),var(--panelDeep))}.grid .c.on{box-shadow:0 0 18px color-mix(in srgb,var(--good) 12%,transparent)}
.locked{opacity:.68;filter:saturate(.72)}
#dialogue{grid-column:1/-1;background:radial-gradient(700px 220px at 12% 0%,color-mix(in srgb,var(--cyan) 10%,transparent),transparent 70%),linear-gradient(145deg,var(--panel),var(--panelDeep))}
@container (max-width:720px){.grid{grid-template-columns:1fr}.grid .h{display:none}header h1:after{display:none}}
/* OC-254 · hình học primitive từ token: ContainerMustGrowWithContent · NoFixedHeightForDynamicText · LockedReasonIsNeverTruncated */
.card,.q,pre,.lock-note{height:auto;min-height:0;overflow-wrap:anywhere;line-height:var(--prim-lh)}
pre{white-space:pre-wrap}
.lock-note{white-space:normal;text-overflow:clip}
button,input,select{min-height:var(--tap)}
[data-art="evidence"] *{animation:none!important;transition:none!important;filter:none!important}
/* OC-255 · hình thái matrix theo size-class — cùng ô, khác hình; salience chỉ từ data-state theo --salience-order */
.bands .band{margin:var(--space-sm) 0}.bands .band-cells{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.bands .bc{min-width:var(--prim-min-card);flex:1}
.cards .domain-card summary{cursor:pointer;min-height:var(--tap)}.cards .drill{display:flex;gap:var(--space-sm);align-items:baseline;padding:var(--space-xs) 0}
[data-state="blocked"]{outline:2px solid var(--bad)}[data-state="residual-open"]{outline:1px solid var(--residual)}[data-state="evidence-gap"]{outline:1px dashed var(--warn)}[data-state="reduced"],[data-state="info"]{outline:none}
/* OC-258 · P1/P2 từ Reality bridge: ô JSON và input không được rộng hơn card cha; file input xuống dòng */
textarea,input,select,pre{max-width:100%;width:100%;min-width:0;box-sizing:border-box}
.card>input,.card>textarea,.card>select{display:block;margin:var(--space-xs) 0}
.card{min-width:0;max-width:100%}
/* OC-259 · rail Reality Test: ba trạng thái, độ nổi từ data-rail (không phải trang trí) */
.rail{display:flex;flex-direction:column;gap:var(--space-xs)}.rail-step{padding:var(--space-xs) var(--space-sm);border-left:3px solid var(--line)}
.rail-step[data-rail="EVIDENCE_VERIFIED"]{border-left-color:var(--good)}.rail-step[data-rail="ACTION_REQUIRED"]{border-left-color:var(--gold)}.rail-step[data-rail="NOT_READY"]{border-left-color:var(--line);color:var(--muted)}
.rail-state{font-family:var(--font-mono);font-size:var(--font-sm);margin-left:var(--space-xs)}
/* OC-264 · <pre> là nội dung: wrap, không bay khỏi ô */
pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%;min-width:0}
/* OC-266 · một bước trong tiêu điểm: bước khác GẬP có tên (HiddenIsNotAbsent), không xoá khỏi DOM; mở bằng một chạm */
.focusbar{position:sticky;top:0;z-index:20}
section.card.folded>*:not(.fold-head){display:none}section.card.folded.open>*{display:revert}section.card.folded.open>.fold-head{display:block}
.fold-head{width:100%;text-align:left;background:transparent;border:0;color:var(--muted);min-height:var(--tap);padding:var(--space-xs) 0}
/* OC-266 · một lúc một bước: bề mặt ngoài bước hiện tại GẬP (chỉ tiêu đề + ghi chú gập), không xoá — HiddenIsNotAbsent */
section.card.collapsed>*:not(h2){display:none}section.card.collapsed h2{cursor:pointer;opacity:.7;margin:0}section.card.collapsed{padding:var(--space-sm) var(--space-md)}
.facts-stamp{padding:var(--space-sm) var(--space-md)}
/* OC-272 · rail là bộ điều hướng: bước là nút; section gập mang trạng thái bước */
.rail-step{display:flex;gap:var(--space-xs);align-items:baseline;width:100%;text-align:left;background:none;border:0;border-left:3px solid var(--line);color:inherit;padding:var(--space-xs) var(--space-sm);min-height:var(--tap);cursor:pointer}
.rail-step[data-rail="EVIDENCE_VERIFIED"]{border-left-color:var(--good)}.rail-step[data-rail="ACTION_REQUIRED"]{border-left-color:var(--gold)}.rail-step[data-rail="NOT_READY"]{border-left-color:var(--line);color:var(--muted)}
section.card[data-rail="EVIDENCE_VERIFIED"].collapsed h2{opacity:.8}section.card[data-rail="ACTION_REQUIRED"].collapsed h2{opacity:1;color:var(--gold)}

section.card.readonly{opacity:.82}section.card.readonly .ready-note{color:var(--warn)}

/* OC-380 · bảng chập / vòng / tin / nghi thức của một sự kiện */
.ev-table{border-collapse:collapse;margin:var(--space-xs) 0;font-size:.85em;display:block;overflow-x:auto}
.ev-table th,.ev-table td{border:1px solid var(--line);padding:2px var(--space-xs);text-align:left;vertical-align:top}
/* OC-412 · ca làm việc — dải trên cùng; máy/tab đang nghỉ: nền cảnh báo, chỉ nút «Giật ca về đây» bấm được */
.shift-banner{position:sticky;top:0;z-index:30;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);margin:0 0 10px}
.shift-banner[data-shift-state="resting"]{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,var(--panel))}
body[data-shift="resting"] section.card{opacity:.82}
.journey-part{margin-left:1.2em}
.tier-chip{display:inline-block;font-size:var(--font-sm);padding:1px 7px;border-radius:9px;border:1px solid var(--line);margin-left:8px;vertical-align:middle;color:var(--muted)}
.tier-chip[data-tier="governance"]{border-color:var(--gold);color:var(--gold)}
.tier-chip[data-tier="management"]{border-color:var(--cyan);color:var(--cyan)}
.tier-chip[data-tier="operation"]{border-color:var(--good);color:var(--good)}
button[data-locked="process"]{opacity:.45;cursor:not-allowed}
body[data-lens="governance"] section.card:not([data-tier="governance"]):not([data-lens-keep="1"]),
body[data-lens="management"] section.card:not([data-tier="management"]):not([data-lens-keep="1"]),
body[data-lens="operation"] section.card:not([data-tier="operation"]):not([data-lens-keep="1"]){display:none}
#tier-lens button[aria-pressed="true"]{outline:2px solid var(--cyan)}
/* OC-414 · tenant chọn sẵn (LHT · BRS · AimCo trước Niêm) — hàng nút dưới ô tenant, hiện được trên điện thoại (datalist thì không) */
.tenant-chips{display:inline-flex;flex-wrap:wrap;gap:var(--space-xs);margin:var(--space-xs) 0 0 var(--space-sm);vertical-align:middle}
.tenant-chip{min-height:32px;padding:4px 10px;border-radius:var(--radius-pill);font-size:var(--font-sm)}
.tenant-chip[aria-pressed="true"]{outline:2px solid var(--cyan)}
/* OC-414 · hai mặt trên điện thoại: dải mặt (cá nhân · trang hệ) + phạm vi của tôi / của tenant */
.face-bar{position:sticky;top:0;z-index:29;display:flex;gap:var(--space-xs);overflow-x:auto;padding:var(--space-xs) 0;margin:0 0 var(--space-sm);background:var(--panel2);border-radius:10px}
.face-tab{flex:0 0 auto;font-size:var(--font-sm);border-radius:var(--radius-pill)}
.face-tab[aria-pressed="true"],.face-scope button[aria-pressed="true"]{outline:2px solid var(--cyan)}
.face-scope{display:inline-flex;gap:var(--space-xs);margin-left:auto}
.face-note{margin:0 0 var(--space-sm)}
.me-who{display:block;width:100%;text-align:left}
.me-seats{display:grid;gap:2px;font-size:var(--font-xs)}
.me-row{display:grid;grid-template-columns:minmax(84px,1.6fr) repeat(5,1fr);gap:2px}
.me-h{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-cell{text-align:center;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.me-cell.on{border-color:var(--good);color:var(--good)}

/* OC-419 · nút sửa được chỉ tới (revealFix) — viền sáng 6 giây, không đổi bố cục */
.fix-target{outline:3px solid var(--warn);outline-offset:2px}

/* OC-552 · dải ngữ cảnh (tenant · tư cách · khoá · AiH) — màu chỉ nhấn, chữ nói đủ */
#ctx-strip{border-left:3px solid #2a7;padding:.3em .6em;margin:.3em 0}#ctx-strip[data-ctx="mismatch"],#ctx-strip[data-ctx="viewing"]{border-left-color:#c33}#ctx-strip[data-ctx="foreign-key"],#ctx-strip[data-ctx="unpaired"]{border-left-color:#c80}#ctx-pairs button{margin:0 .2em}