/* Human OS staging UI — Editorial research space: bone-white field, ink-black structure,
   mineral red is reserved for decisions, caution and blocked actions. */
:root {
  --paper: #f5f1e8;
  --paper-deep: #e9e3d7;
  --ink: #171715;
  --ink-soft: #5d5a53;
  --ink-faint: #969084;
  --line: rgba(23, 23, 21, 0.17);
  --line-light: rgba(23, 23, 21, 0.09);
  --mineral: #a33735;
  --mineral-faint: rgba(163, 55, 53, 0.09);
  --moss: #586454;
  --moss-faint: rgba(88, 100, 84, 0.1);
  --serif: "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; min-width: 320px; background: var(--paper); font-family: var(--sans); color: var(--ink); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.prototype-shell { min-height: 100vh; background: radial-gradient(circle at 78% 8%, rgba(163,55,53,.045), transparent 21rem), var(--paper); }
.topline { height: 4px; background: var(--ink); }
.site-header { min-height: 76px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--mono); letter-spacing: .08em; font-size: 12px; font-weight: 500; }
.brand-mark { width: 31px; height: 31px; border: 1.5px solid var(--ink); position: relative; display: inline-grid; place-items: center; font-family: var(--serif); font-size: 16px; letter-spacing: -0.14em; padding-right: 2px; }
.brand-mark::after { content: ""; position: absolute; width: 6px; height: 6px; right: -4px; bottom: -4px; background: var(--mineral); }
.header-context { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-soft); text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.text-button, .outline-button, .ghost-button { min-height: 34px; padding: 0 12px; background: transparent; border: 1px solid transparent; color: var(--ink); font-size: 12px; letter-spacing: .01em; transition: background .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out); }
.text-button:hover, .ghost-button:hover { background: rgba(23,23,21,.055); }
.outline-button { border-color: var(--line); }
.outline-button:hover { border-color: var(--ink); background: rgba(23,23,21,.04); }
.text-button:active, .outline-button:active, .ghost-button:active, .research-send:active { transform: scale(.97); }

.eyebrow { margin: 0 0 10px; color: var(--mineral); font: 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.section-label { color: var(--ink-faint); font: 10px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.quiet { color: var(--ink-soft); }
.micro { color: var(--ink-faint); font-size: 11px; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.prototype-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 34px; background: var(--mineral-faint); border-bottom: 1px solid rgba(163,55,53,.2); color: #742a29; font-size: 12px; }
.prototype-banner strong { font-weight: 700; }
.locked-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--mineral); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.locked-chip::before { content: ""; width: 7px; height: 7px; background: var(--mineral); }

/* Research conversation */
.research-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr) 286px; max-width: 1540px; margin: 0 auto; }
.research-rail { min-height: calc(100vh - 119px); padding: 32px 24px; border-right: 1px solid var(--line); }
.rail-title { margin: 0 0 23px; font: 600 15px var(--serif); }
.trail { margin: 0; padding: 0; list-style: none; position: relative; }
.trail::before { content: ""; position: absolute; left: 5px; top: 7px; bottom: 36px; width: 1px; background: var(--line); }
.trail-item { position: relative; padding: 0 0 24px 23px; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.trail-item::before { content: ""; position: absolute; top: 5px; left: 1px; width: 9px; height: 9px; border: 1px solid var(--ink-faint); border-radius: 50%; background: var(--paper); }
.trail-item.is-current { color: var(--ink); font-weight: 700; }
.trail-item.is-current::before { border-color: var(--mineral); background: var(--mineral); box-shadow: 0 0 0 4px var(--mineral-faint); }
.trail-index { display: block; margin-bottom: 4px; color: var(--ink-faint); font: 10px var(--mono); letter-spacing: .09em; }
.rail-note { margin-top: 30px; padding-top: 17px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.7; color: var(--ink-soft); }

.research-main { padding: 48px clamp(28px, 5vw, 82px) 34px; min-width: 0; }
.crumb { display: flex; gap: 8px; color: var(--ink-faint); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.crumb span:last-child { color: var(--ink); }
.research-title { max-width: 900px; margin: 22px 0 16px; font: 600 clamp(29px, 4vw, 50px)/1.23 var(--serif); letter-spacing: -.035em; }
.research-deck { max-width: 690px; margin: 0 0 28px; color: var(--ink-soft); font-size: 15px; line-height: 1.9; }
.research-meta { display: flex; flex-wrap: wrap; gap: 10px 17px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); font: 10px var(--mono); letter-spacing: .05em; }
.research-meta strong { color: var(--ink); font-weight: 500; }
.argument { margin-top: 42px; }
.argument h2 { margin: 0 0 14px; font: 600 22px/1.35 var(--serif); letter-spacing: -.02em; }
.argument p { max-width: 730px; margin: 0 0 14px; font-size: 15px; line-height: 2; }
.argument p strong { box-shadow: inset 0 -0.4em 0 rgba(163,55,53,.13); font-weight: 700; }
.thesis-block { max-width: 755px; margin: 32px 0; padding: 24px 24px 25px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.28); }
.thesis-block p { margin: 0; font: 500 20px/1.68 var(--serif); }
.thesis-block .section-label { display: block; margin-bottom: 11px; }
.condition-list { max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 24px 0 34px; background: var(--line); border: 1px solid var(--line); }
.condition-card { min-height: 138px; padding: 19px; background: var(--paper); }
.condition-card h3 { margin: 0 0 10px; font-size: 13px; }
.condition-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.unresolved { max-width: 760px; margin: 34px 0; padding: 18px 20px; border-left: 3px solid var(--mineral); background: var(--mineral-faint); }
.unresolved h3 { margin: 0 0 6px; color: var(--mineral); font: 600 13px var(--sans); }
.unresolved p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.composer { position: sticky; bottom: 16px; max-width: 800px; margin-top: 48px; padding: 10px; background: rgba(245,241,232,.92); border: 1px solid var(--ink); backdrop-filter: blur(14px); box-shadow: 8px 8px 0 rgba(23,23,21,.09); }
.composer textarea { width: 100%; min-height: 48px; padding: 9px 10px; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; line-height: 1.6; }
.composer textarea::placeholder { color: var(--ink-faint); }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 3px 0 10px; }
.composer-footer .micro { font: 10px var(--mono); }
.research-send { padding: 8px 12px; border: 0; background: var(--ink); color: var(--paper); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: background .16s var(--ease-out), transform .16s var(--ease-out); }
.research-send:hover { background: var(--mineral); }

.evidence-panel { min-height: calc(100vh - 119px); padding: 32px 23px; border-left: 1px solid var(--line); background: rgba(234,227,215,.32); }
.evidence-panel h2 { margin: 8px 0 19px; font: 600 17px var(--serif); }
.evidence-card { padding: 15px 0 16px; border-top: 1px solid var(--line); }
.evidence-card:last-of-type { border-bottom: 1px solid var(--line); }
.evidence-kind { color: var(--moss); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.evidence-card h3 { margin: 8px 0 7px; font-size: 13px; line-height: 1.45; }
.evidence-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.evidence-ref { display: block; margin-top: 9px; color: var(--mineral); font: 10px var(--mono); letter-spacing: .04em; }
.research-states { margin-top: 27px; padding-top: 18px; border-top: 1px solid var(--line); }
.state-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.state-switcher button { min-height: 30px; padding: 5px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 10px; }
.state-switcher button.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.state-copy { min-height: 86px; margin-top: 10px; padding: 12px; border: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; line-height: 1.7; background: rgba(255,255,255,.26); }

/* Operations workstation */
.ops-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: calc(100vh - 119px); }
.ops-sidebar { padding: 28px 16px; border-right: 1px solid var(--line); background: rgba(234,227,215,.35); }
.ops-nav { display: grid; gap: 3px; margin-top: 18px; }
.ops-nav button { display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 0 11px; border: 0; text-align: left; background: transparent; color: var(--ink-soft); font-size: 13px; transition: background .16s var(--ease-out), color .16s var(--ease-out); }
.ops-nav button::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.ops-nav button:hover { background: rgba(23,23,21,.055); color: var(--ink); }
.ops-nav button.is-active { background: var(--ink); color: var(--paper); }
.ops-nav button.is-active::before { background: var(--mineral); border-color: var(--mineral); }
.ops-sidebar-footer { margin-top: 32px; padding: 15px 11px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.ops-main { padding: 39px clamp(25px, 4vw, 62px) 52px; min-width: 0; }
.ops-kicker { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ops-title { margin: 13px 0 7px; font: 600 clamp(30px, 3.3vw, 44px)/1.18 var(--serif); letter-spacing: -.03em; }
.ops-subtitle { max-width: 720px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.ops-header-rule { height: 1px; margin: 30px 0 26px; background: var(--line); }
.ops-panel { display: none; }
.ops-panel.is-visible { display: block; animation: panel-in .25s var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.signal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.signal { min-height: 118px; padding: 17px 16px 15px 0; border-right: 1px solid var(--line); }
.signal + .signal { padding-left: 17px; }
.signal:last-child { border-right: 0; }
.signal .section-label { display: block; margin-bottom: 13px; }
.signal strong { display: block; font: 600 31px/1 var(--serif); }
.signal small { display: block; margin-top: 9px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.signal.is-alert strong { color: var(--mineral); }
.workspace-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; margin-top: 34px; }
.workspace-section { border-top: 1px solid var(--ink); }
.workspace-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.workspace-heading h2 { margin: 0; font: 600 18px var(--serif); }
.workspace-heading p { margin: 0; color: var(--ink-faint); font-size: 11px; }
.document-row, .quality-row { display: grid; grid-template-columns: minmax(0, 1fr) 85px 98px; align-items: center; gap: 13px; min-height: 72px; border-bottom: 1px solid var(--line-light); }
.document-row h3, .quality-row h3 { margin: 0 0 3px; font-size: 13px; line-height: 1.45; }
.document-row p, .quality-row p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.status-tag { justify-self: start; padding: 4px 6px; border: 1px solid var(--line); font: 9px var(--mono); color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; }
.status-tag.review { border-color: rgba(163,55,53,.4); color: var(--mineral); background: var(--mineral-faint); }
.status-tag.good { border-color: rgba(88,100,84,.4); color: var(--moss); background: var(--moss-faint); }
.row-action { justify-self: end; min-height: 28px; padding: 0 7px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 10px; }
.row-action:hover { color: var(--ink); border-color: var(--ink); }
.mini-ledger { padding: 0; margin: 0; list-style: none; }
.mini-ledger li { display: grid; grid-template-columns: 61px 1fr; gap: 9px; padding: 13px 0; border-bottom: 1px solid var(--line-light); font-size: 12px; line-height: 1.55; }
.mini-ledger time { color: var(--ink-faint); font: 10px var(--mono); }
.change-room { margin-top: 34px; padding: 23px; border: 1px solid rgba(163,55,53,.34); background: linear-gradient(120deg, rgba(163,55,53,.075), rgba(255,255,255,.18)); }
.change-room-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.change-room h2 { margin: 0 0 5px; color: var(--mineral); font: 600 20px var(--serif); }
.change-room p { max-width: 600px; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.change-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.danger-control { min-height: 38px; padding: 0 13px; border: 1px solid rgba(163,55,53,.4); background: transparent; color: var(--mineral); font-size: 11px; }
.danger-control:disabled { opacity: .7; cursor: not-allowed; }
.privacy-block { margin-top: 26px; padding: 19px; border-left: 2px solid var(--ink); background: rgba(255,255,255,.32); }
.privacy-block h3 { margin: 0 0 7px; font-size: 13px; }
.privacy-block p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }

.local-toast { position: fixed; right: 18px; bottom: 18px; z-index: 9; max-width: 340px; padding: 12px 14px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.55; box-shadow: 6px 6px 0 rgba(163,55,53,.35); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.local-toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .research-grid { grid-template-columns: 198px minmax(0, 1fr); }
  .evidence-panel { grid-column: 1 / -1; min-height: auto; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 160px 1fr 1fr; gap: 18px; }
  .evidence-panel h2 { grid-row: 1 / span 2; }
  .research-states { margin-top: 0; padding-top: 0; border-top: 0; }
  .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal:nth-child(2) { border-right: 0; }
  .signal:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .site-header { min-height: 62px; padding: 0 17px; }
  .header-context, .header-actions .text-button { display: none; }
  .prototype-banner { padding: 8px 17px; align-items: flex-start; font-size: 11px; }
  .research-grid, .ops-layout { display: block; }
  .research-rail, .ops-sidebar { min-height: auto; padding: 19px 17px; border-right: 0; border-bottom: 1px solid var(--line); }
  .trail { display: flex; gap: 15px; overflow-x: auto; }
  .trail::before { display: none; }
  .trail-item { flex: 0 0 132px; padding: 0 0 0 14px; }
  .trail-item::before { left: 0; }
  .rail-note { display: none; }
  .research-main, .ops-main { padding: 30px 17px 40px; }
  .research-title { font-size: 31px; }
  .condition-list, .workspace-grid { grid-template-columns: 1fr; }
  .evidence-panel { display: block; padding: 26px 17px; }
  .evidence-card { padding-right: 0; }
  .ops-sidebar { padding: 17px; }
  .ops-nav { grid-template-columns: 1fr 1fr; }
  .ops-sidebar-footer { display: none; }
  .signal-grid { grid-template-columns: 1fr 1fr; }
  .document-row, .quality-row { grid-template-columns: minmax(0, 1fr) 72px; }
  .document-row .row-action, .quality-row .row-action { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }