:root { --navy:#102137; --navy-deep:#091725; --paper:#f3eee5; --raised:#fbf8f2; --ink:#18202a; --muted:#626b72; --line:#cfc5b7; --copper:#bd7539; --green:#1f6a50; --red:#9b3f37; --sidebar:250px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.55 "DM Sans",sans-serif; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }
button { min-height:44px; border:1px solid var(--navy); background:var(--navy); color:white; padding:10px 16px; font-weight:700; cursor:pointer; }
button:hover { background:#1a2e48; }
button.secondary { background:transparent; color:var(--navy); border-color:var(--line); }
button:disabled { opacity:.5; cursor:not-allowed; }
input,textarea,select { width:100%; border:1px solid #b9ae9f; background:var(--raised); color:var(--ink); padding:12px; }
textarea { min-height:108px; resize:vertical; }
label { display:block; margin-top:15px; font-size:12px; font-weight:700; color:#765135; }
.field-help { display:block; margin:4px 0 7px; color:var(--muted); font-size:12px; font-weight:500; line-height:1.45; }
:focus-visible { outline:3px solid #d89659; outline-offset:2px; }
.hidden { display:none !important; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; transform:translateY(-180%); background:white; padding:10px; }
.skip-link:focus { transform:none; }
.shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); display:flex; flex-direction:column; background:var(--navy); color:#edf0f3; padding:26px 18px; }
.brand { font:400 23px/1.15 "Libre Caslon Text",serif; text-decoration:none; }
.brand span { color:#d9a46d; }
.sidebar > p { color:#aab5c0; font-size:12px; }
.sidebar nav { display:grid; gap:3px; margin-top:25px; }
.nav-item { display:flex; justify-content:space-between; width:100%; border:0; border-left:3px solid transparent; background:transparent; color:#c9d2db; text-align:left; }
.nav-item.active { border-left-color:#d99a58; background:rgba(255,255,255,.08); color:white; }
.nav-item span { color:#d9a46d; }
.sidebar-foot { display:grid; gap:10px; margin-top:auto; border-top:1px solid #34455a; padding-top:16px; }
.sidebar-foot a { font-weight:700; text-decoration:none; }
.sidebar-foot small { color:#9eabba; }
main { grid-column:2; min-width:0; padding:45px clamp(24px,5vw,76px) 100px; }
.page-head { display:flex; justify-content:space-between; gap:30px; align-items:end; border-bottom:1px solid var(--line); padding-bottom:24px; }
h1,h2,h3 { font-family:"Libre Caslon Text",serif; font-weight:400; letter-spacing:-.03em; }
h1 { margin:5px 0 0; font-size:clamp(38px,5vw,62px); }
h2 { margin:5px 0 10px; font-size:clamp(29px,3vw,42px); }
h3 { margin:5px 0; font-size:22px; }
.eyebrow { color:#8a5b35; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.status { color:var(--muted); font-size:12px; }
.view { max-width:1180px; margin:42px auto 0; }
.orientation { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.orientation p { max-width:760px; color:var(--muted); }
.orientation > strong { font:400 66px/1 "Libre Caslon Text",serif; color:#cdbba8; }
.source-form { margin:32px 0; }
.source-form > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.inspection,.episode-detail { border-top:3px solid var(--copper); background:rgba(255,255,255,.35); padding:26px; }
.source-summary { white-space:pre-wrap; max-height:320px; overflow:auto; background:var(--raised); border:1px solid var(--line); padding:14px; }
.inspection-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.inspection-actions button { align-self:end; }
.episode-layout { display:grid; grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr); gap:24px; margin-top:28px; }
.episode-list { min-width:0; border-top:1px solid var(--line); }
.episode-button { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; padding:16px 5px; }
.episode-button.active { border-left:3px solid var(--copper); background:rgba(255,255,255,.4); padding-left:14px; }
.episode-button small { display:block; color:var(--muted); overflow-wrap:anywhere; }
.episode-detail { min-width:0; overflow-wrap:anywhere; }
.episode-detail section { border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
.state-line { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; margin:18px 0; padding:0; background:var(--line); list-style:none; }
.state-line li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:7px; align-items:center; min-height:54px; background:var(--raised); color:var(--muted); padding:8px; font-size:10px; font-weight:700; }
.state-line li > span { display:grid; width:22px; height:22px; place-items:center; border:1px solid var(--line); border-radius:50%; }
.state-line li.complete { color:var(--green); }
.state-line li.complete > span { border-color:var(--green); }
.state-line li.current { box-shadow:inset 0 -3px 0 var(--copper); color:#7c4c27; }
.state-line li.current > span { border-color:var(--copper); background:var(--copper); color:white; }
.mapping-row { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; padding:8px 0; }
.mapping-row input { width:18px; height:18px; }
.mapping-row small { display:block; margin-top:3px; color:var(--muted); font-weight:500; }
.mapping-suggestions { border-block:1px solid var(--line); margin:18px 0 12px; }
.mapping-more { margin:0 0 22px; }
.mapping-more summary { color:var(--copper); font-weight:700; cursor:pointer; }
.mapping-more[open] summary { margin-bottom:10px; }
.turns { max-height:360px; overflow:auto; margin:12px 0; }
.turn { border-left:3px solid var(--line); margin:8px 0; padding:10px 14px; white-space:pre-wrap; }
.turn.tutor { border-color:var(--copper); background:var(--raised); }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.actions button { margin:0; }
.notice { border-left:3px solid var(--copper); background:var(--raised); margin:16px 0; padding:13px 16px; }
.reference-panel { border-top-color:var(--copper) !important; }
.reference-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-top:16px; }
.reference-card { min-width:0; border:1px solid var(--line); background:var(--raised); padding:16px; }
.reference-card h4 { margin:10px 0 6px; font:700 16px/1.35 "DM Sans",sans-serif; }
.reference-card p { margin:7px 0; color:var(--muted); }
.reference-card-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; }
.reference-badge { border:1px solid var(--green); color:var(--green); padding:3px 7px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.reference-badge.link-only { border-color:var(--copper); color:#7c4c27; }
.reference-source { color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.reference-match { font-size:13px; line-height:1.5; }
.reference-match span { color:#765135; font-size:11px; }
.reference-link { display:block; margin:12px 0; color:#754719; font-size:12px; font-weight:700; overflow-wrap:anywhere; word-break:break-word; }
.reference-card details summary { color:#754719; cursor:pointer; font-weight:700; }
.reference-card details ul { margin:8px 0 0; padding-left:20px; color:var(--muted); }
.empty { color:var(--muted); }
.transfer-card,.synthesis-card { border-top:1px solid var(--line); padding:22px 0; }
.transfer-card textarea { max-width:820px; }
.signal { display:inline-block; border:1px solid var(--green); color:var(--green); padding:4px 8px; font-size:11px; font-weight:700; }
.error { color:var(--red); }
@media (max-width:850px) { :root{--sidebar:0px}.shell{display:block}.sidebar{position:static;width:auto}.sidebar nav{grid-template-columns:1fr 1fr}.sidebar-foot{margin-top:20px}main{padding:28px 18px 80px}.episode-layout{grid-template-columns:minmax(0,1fr)}.page-head{align-items:start;flex-direction:column}.inspection-actions{grid-template-columns:1fr}.source-form>div{grid-template-columns:1fr}.state-line{display:flex;max-width:100%;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory}.state-line li{flex:0 0 142px;scroll-snap-align:start}.reference-grid{grid-template-columns:minmax(0,1fr)}.reference-card{max-width:100%;overflow:hidden} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} }