/* =====================================================================
   EA SHELL · 20260923-shell2
   One masthead, one type system, one control shape across all sections.
   Loaded LAST on every page. Palettes are unchanged: dark sections keep
   their night palette with gold, graph and questionnaire keep cream with ochre.
   Presentation only — no data, routing, model or scientific logic here.
   ===================================================================== */

body[data-ea-shell]{
  --ea-serif:'Spectral',Georgia,'Times New Roman',serif;
  --ea-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ea-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ea-mast-h:62px;
  --ea-radius:6px;
  --ea-card-radius:8px;
  --ea-ctl-h:32px;
  --ea-act-h:40px;
  --ea-gutter:20px;
}
body[data-ea-shell][data-ea-theme="dark"]{
  --ea-bg:#0a0f16; --ea-surface:#0d141e; --ea-surface2:#141e2b;
  --ea-line:#243142; --ea-line2:#34455a;
  --ea-text:#edf1f6; --ea-muted:#93a0b1; --ea-faint:#6c7888;
  --ea-accent:#d6b66f; --ea-accent-ink:#0a0f16; --ea-focus:#d6b66f;
}
body[data-ea-shell][data-ea-theme="light"]{
  --ea-bg:#faf4e8; --ea-surface:#fffaf0; --ea-surface2:#f3ead8;
  --ea-line:#e0d3b4; --ea-line2:#cdbb92;
  --ea-text:#231a0d; --ea-muted:#7a5c2e; --ea-faint:#a1875a;
  --ea-accent:#a16207; --ea-accent-ink:#ffffff; --ea-focus:#a16207;
}

/* ---------------------------------------------------------------------
   1. MASTHEAD — the same element on every page
   --------------------------------------------------------------------- */
body[data-ea-shell] .ea-masthead{
  position:relative; z-index:60; flex:0 0 auto; box-sizing:border-box;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  column-gap:32px; height:var(--ea-mast-h); padding:0 var(--ea-gutter);
  background:var(--ea-surface); border-bottom:1px solid var(--ea-line);
  color:var(--ea-text); font-family:var(--ea-sans); text-align:left;
}
body[data-ea-shell] .ea-brand{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  min-width:0; color:inherit; text-decoration:none;
}
body[data-ea-shell] .ea-brand-title{
  font:600 22px/1.1 var(--ea-sans); letter-spacing:-.012em; white-space:nowrap; color:var(--ea-text);
}
body[data-ea-shell] .ea-brand-meta{
  font:400 11px/1.2 var(--ea-mono); letter-spacing:.02em; color:var(--ea-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body[data-ea-shell] .ea-brand-meta .ea-build::before{content:"·"; margin:0 .55em; color:var(--ea-faint)}
body[data-ea-shell] .ea-brand-meta .ea-build{color:var(--ea-faint)}
body[data-ea-shell] .ea-brand:hover .ea-brand-title{color:var(--ea-accent)}

body[data-ea-shell] .ea-masthead .ea-sections{
  display:flex; align-items:stretch; gap:0; height:100%; min-width:0;
  margin:0; padding:0; background:none; border:0; justify-self:start;
}
body[data-ea-shell] .ea-masthead .ea-sections > :is(a,button){
  appearance:none; -webkit-appearance:none; position:relative; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:100%; min-height:0; min-width:0; margin:0; padding:0 13px;
  border:0; border-radius:0; background:none; box-shadow:none; opacity:1;
  font:500 14.5px/1 var(--ea-sans); letter-spacing:.005em; text-transform:none;
  color:var(--ea-muted); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:color .12s;
}
body[data-ea-shell] .ea-masthead .ea-sections > :is(a,button):hover{color:var(--ea-text); background:none}
body[data-ea-shell] .ea-masthead .ea-sections > :is(.on,[aria-current="page"]){
  color:var(--ea-text); background:none; border:0;
}
body[data-ea-shell] .ea-masthead .ea-sections > :is(.on,[aria-current="page"])::after{
  content:""; position:absolute; left:13px; right:13px; bottom:-1px; height:2px; background:var(--ea-accent);
}
body[data-ea-shell] .ea-masthead :is(a,button):focus-visible{outline:2px solid var(--ea-focus); outline-offset:-4px}

/* Language: one segmented control, always at the far right, same width on every page. */
body[data-ea-shell] .ea-lang{
  display:inline-flex; align-items:stretch; justify-self:end; flex:none;
  height:28px; border:1px solid var(--ea-line); border-radius:var(--ea-radius);
  overflow:hidden; background:transparent; margin:0; padding:0; gap:0;
}
body[data-ea-shell] .ea-lang > button{
  appearance:none; -webkit-appearance:none; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; min-width:40px; height:100%; min-height:0; margin:0; padding:0;
  border:0; border-right:1px solid var(--ea-line); border-radius:0; box-shadow:none;
  background:transparent; color:var(--ea-muted); opacity:1;
  font:500 11px/1 var(--ea-mono)!important; letter-spacing:.07em; text-transform:uppercase;
  cursor:pointer; transition:background .12s,color .12s;
}
body[data-ea-shell] .ea-lang > button:last-child{border-right:0}
body[data-ea-shell] .ea-lang > button img{display:none}
body[data-ea-shell] .ea-lang > button:hover:not(:disabled){color:var(--ea-text); background:var(--ea-surface2)}
body[data-ea-shell] .ea-lang > button[aria-pressed="true"]{
  color:var(--ea-accent-ink); background:var(--ea-accent); cursor:default;
}
body[data-ea-shell] .ea-lang > button:disabled:not([aria-pressed="true"]){color:var(--ea-faint); opacity:.42; cursor:not-allowed}
body[data-ea-shell] .ea-lang > button:focus-visible{outline:2px solid var(--ea-focus); outline-offset:-2px}

/* ---------------------------------------------------------------------
   2. PAGE IDENTITY — numeral · sans title · mono meta
   --------------------------------------------------------------------- */
body[data-ea-shell] .ea-num{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-width:26px; height:20px; padding:0 5px; box-sizing:border-box;
  border:1px solid var(--ea-line2); border-radius:3px;
  font:500 10.5px/1 var(--ea-mono); letter-spacing:.06em; color:var(--ea-accent);
}
body[data-ea-shell] .ea-kicker{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font:500 11px/1.2 var(--ea-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ea-muted);
}
body[data-ea-shell] .ea-title{
  margin:0; font:600 22px/1.15 var(--ea-sans); letter-spacing:-.012em; text-transform:none; color:var(--ea-text);
}
body[data-ea-shell] .ea-meta{
  font:400 11.5px/1.3 var(--ea-mono); font-style:normal; letter-spacing:.02em; color:var(--ea-muted); white-space:nowrap;
}
body[data-ea-shell] .ea-lede{margin:10px 0 0; font:400 15px/1.55 var(--ea-sans); color:var(--ea-muted); max-width:72ch}

/* App pages (theory, graph): one compact bar under the masthead. */
body[data-ea-shell] .ea-pagebar{
  flex:0 0 auto; box-sizing:border-box; position:relative; z-index:50;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px;
  min-height:52px; padding:8px var(--ea-gutter);
  background:var(--ea-bg); border-bottom:1px solid var(--ea-line); color:var(--ea-text);
}
body[data-ea-shell] .ea-pagebar-id{display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 auto}
body[data-ea-shell] .ea-pagebar-id .ea-title{font-size:22px; white-space:nowrap}
body[data-ea-shell] .ea-pagebar-id .ea-meta{overflow:hidden; text-overflow:ellipsis}

/* Document pages (questionnaire, dyad): larger head, no card. */
body[data-ea-shell] .ea-pagehead{padding:34px 0 22px; margin:0; border:0; background:none; box-shadow:none}
body[data-ea-shell] .ea-pagehead .ea-title{font-size:38px; line-height:1.08; letter-spacing:-.02em}

/* ---------------------------------------------------------------------
   3. CONTROLS — one shape: 6px radius, 32px compact / 40px action
   --------------------------------------------------------------------- */
body[data-ea-shell] :where(
  #tools .tool-btn, #backQuestionnaire, .quiet-button, .digest-languages a.ea-action,
  .ea-chapter-download, #fitBtn, #resetBtn, #corpusSearchButton
){
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--ea-ctl-h)!important; min-height:var(--ea-ctl-h)!important; padding:0 12px!important;
  border:1px solid var(--ea-line); border-radius:var(--ea-radius)!important;
  background:var(--ea-surface); color:var(--ea-muted); box-shadow:none;
  font:500 12.5px/1 var(--ea-sans)!important; letter-spacing:.01em!important; text-transform:none!important;
  text-decoration:none; white-space:nowrap; cursor:pointer; flex:none;
}
body[data-ea-shell] :where(#tools .tool-btn, #backQuestionnaire, .quiet-button, .digest-languages a.ea-action,
  .ea-chapter-download, #fitBtn, #resetBtn, #corpusSearchButton):hover:not(:disabled){
  color:var(--ea-text); border-color:var(--ea-line2); background:var(--ea-surface2);
}
body[data-ea-shell] #tools .tool-btn.on,
body[data-ea-shell] .digest-languages a.ea-action[aria-current="page"]{
  color:var(--ea-text); border-color:var(--ea-accent); background:var(--ea-surface2);
  box-shadow:inset 0 -2px 0 var(--ea-accent);
}
body[data-ea-shell] #tools .tool-btn.danger:hover{color:#9d2d22; border-color:#b5584c}
/* Legacy layers style these by ID; restate the shell values at ID strength. */
body[data-ea-shell] #backQuestionnaire{background:var(--ea-surface); color:var(--ea-muted); border:1px solid var(--ea-line)}
body[data-ea-shell] #backQuestionnaire:hover{color:var(--ea-text); border-color:var(--ea-line2)}

/* Text inputs share geometry. */
body[data-ea-shell] :is(#search, #corpusSearchInput, #tocSearch){
  box-sizing:border-box; height:var(--ea-ctl-h); padding:0 12px!important;
  border:1px solid var(--ea-line)!important; border-radius:var(--ea-radius)!important;
  background:var(--ea-surface)!important; color:var(--ea-text)!important;
  font:400 13px/1 var(--ea-sans)!important;
}
body[data-ea-shell] :is(#search, #corpusSearchInput, #tocSearch):focus{
  outline:none; border-color:var(--ea-accent)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--ea-accent) 22%,transparent);
}

/* ---------------------------------------------------------------------
   4. THEORY / CORPUS (index.html) — flex column instead of fixed heights
   --------------------------------------------------------------------- */
body[data-ea-shell][data-ea-page="theory"] #app{display:flex; flex-direction:column; height:100%}
body[data-ea-shell][data-ea-page="theory"] .view{flex:1 1 auto; min-height:0; height:auto!important}
body[data-ea-shell][data-ea-page="theory"] #view-graph:not(.hidden){display:flex; flex-direction:column}
body[data-ea-shell][data-ea-page="theory"] #view-library:not(.hidden){display:flex; flex-direction:column}
body[data-ea-shell][data-ea-page="theory"] #view-graph > .shell,
body[data-ea-shell][data-ea-page="theory"] #view-library > .shell{flex:1 1 auto; min-height:0; height:auto!important}
body[data-ea-shell][data-ea-page="theory"] #view-search:not(.hidden){overflow:auto}
/* Timeline + concept search become the right side of the page bar (moved by ea-shell.js). */
body[data-ea-shell][data-ea-page="theory"] .ea-pagebar .ea-pagebar-tools{
  display:flex; align-items:center; gap:18px; flex:1 1 520px; min-width:0; justify-content:flex-end;
}
body[data-ea-shell][data-ea-page="theory"] .ea-pagebar #bookTimeline{
  flex:1 1 360px; max-width:640px; margin:0; padding:0; border:0; background:none; position:static;
}
body[data-ea-shell][data-ea-page="theory"] .ea-pagebar #bookTimeline .timeline-row{padding:0; gap:10px; flex-wrap:nowrap; font:400 10.5px/1 var(--ea-mono); color:var(--ea-muted)}
body[data-ea-shell][data-ea-page="theory"] .ea-pagebar #bookTimeline .filter-label{display:none}
body[data-ea-shell][data-ea-page="theory"] .ea-pagebar #bookTimeline #timeline{flex:1 1 auto; width:auto; min-width:120px; accent-color:var(--ea-accent)}
body[data-ea-shell][data-ea-page="theory"] .ea-pagebar .concept-search{
  flex:0 1 300px; min-width:200px; margin:0; padding:0; border:0; background:none; position:relative;
}
body[data-ea-shell][data-ea-page="theory"] .ea-pagebar .concept-search #searchList{left:0; right:0; top:38px}
body[data-ea-shell][data-ea-page="theory"] .ea-pagebar .concept-search input{width:100%}
body[data-ea-shell][data-ea-page="theory"] #graphHint{font-family:var(--ea-mono); font-size:10.5px; color:var(--ea-faint)}
/* Reader typography: serif headings, calm links, no browser-blue. */
body[data-ea-shell] #reader a:not(.ea-action), body[data-ea-shell] #chapterSide a:not(.ea-action),
body[data-ea-shell] #mReaderBody a:not(.ea-action){color:var(--ea-accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
body[data-ea-shell] .digest-languages{display:inline-flex; gap:0; border:1px solid var(--ea-line); border-radius:var(--ea-radius); overflow:hidden; margin:6px 0 14px}
body[data-ea-shell] .digest-languages a.ea-action{border:0!important; border-right:1px solid var(--ea-line)!important; border-radius:0!important; width:44px; padding:0!important; font:500 11px/1 var(--ea-mono)!important; letter-spacing:.07em!important; background:transparent}
body[data-ea-shell] .digest-languages a.ea-action:last-child{border-right:0!important}
body[data-ea-shell] .digest-languages a.ea-action[aria-current="page"]{background:var(--ea-accent); color:var(--ea-accent-ink); box-shadow:none}

/* ---------------------------------------------------------------------
   5. SEMANTIC GRAPH (graph.html)
   --------------------------------------------------------------------- */
body[data-ea-shell][data-ea-page="graph"] #app{display:flex; flex-direction:column; height:100%}
body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #tools{
  display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; order:2;
  padding:0; margin:0; border:0; background:none; overflow-x:auto; scrollbar-width:none;
}
body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #tools::-webkit-scrollbar{display:none}
body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #toolStatus{margin-left:8px; font:400 10.5px/1 var(--ea-mono); color:var(--ea-faint); max-width:24vw; overflow:hidden; text-overflow:ellipsis}
body[data-ea-shell][data-ea-page="graph"] .ea-pagebar .ea-pagebar-id{order:1}
body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #backQuestionnaire{order:3}
body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #searchWrap{order:4; position:relative; flex:0 1 240px; min-width:150px; margin:0}
body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #search{width:100%}
@media (min-width:721px){
  /* One row: identity shrinks (meta ellipsis) before the instrument buttons ever clip. */
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar{flex-wrap:nowrap}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #tools{flex:0 0 auto; overflow:visible}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar .ea-pagebar-id{flex:0 1 auto; min-width:0; overflow:hidden}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #searchWrap{flex:0 1 240px; min-width:160px; margin-left:auto}
}
@media (min-width:721px) and (max-width:1599px){
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #toolStatus{display:none}
}
body[data-ea-shell][data-ea-page="graph"] #graphSessionBar:not([hidden]){
  padding:6px var(--ea-gutter); gap:10px; font:400 12.5px/1.4 var(--ea-sans)!important; color:var(--ea-muted);
  background:var(--ea-surface); border-bottom:1px solid var(--ea-line);
}
body[data-ea-shell][data-ea-page="graph"] #graphSessionBar fieldset{border:1px solid var(--ea-line); border-radius:var(--ea-radius); padding:3px 8px; margin:0}
body[data-ea-shell][data-ea-page="graph"] #graphSessionBar button{font:500 12.5px/1 var(--ea-sans)!important}
body[data-ea-shell][data-ea-page="graph"] #stage{flex:1 1 auto; min-height:0}
body[data-ea-shell][data-ea-page="graph"] #panel{font-family:var(--ea-sans)}

/* ---------------------------------------------------------------------
   6. QUESTIONNAIRE (anketa.html)
   --------------------------------------------------------------------- */
body[data-ea-shell][data-ea-page="questionnaire"]{padding:0}
body[data-ea-shell][data-ea-page="questionnaire"] > main.container{padding:0 24px 24px}
body[data-ea-shell][data-ea-page="questionnaire"] .card{border-radius:var(--ea-card-radius)}
body[data-ea-shell][data-ea-page="questionnaire"] .card h2,
body[data-ea-shell][data-ea-page="questionnaire"] details.card > summary{font-family:var(--ea-sans); font-weight:600; letter-spacing:-.005em}
body[data-ea-shell][data-ea-page="questionnaire"] .card h2{font-size:23px; line-height:1.2}
body[data-ea-shell][data-ea-page="questionnaire"] details.card > summary{font-size:19px}
body[data-ea-shell][data-ea-page="questionnaire"] #questionText{font-family:var(--ea-serif); font-weight:600}
body[data-ea-shell][data-ea-page="questionnaire"] button{border-radius:var(--ea-radius)}
body[data-ea-shell][data-ea-page="questionnaire"] .settings-row{align-items:flex-end}
body[data-ea-shell][data-ea-page="questionnaire"] .settings-row label{justify-content:flex-end}
body[data-ea-shell][data-ea-page="questionnaire"] footer{font-family:var(--ea-mono); font-size:11px; letter-spacing:.02em}

/* ---------------------------------------------------------------------
   7. DYAD LAB (dyad.html)
   --------------------------------------------------------------------- */
body[data-ea-shell][data-ea-page="dyad"] .shell{padding-top:0}
body[data-ea-shell][data-ea-page="dyad"] .hero.ea-pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0}
body[data-ea-shell][data-ea-page="dyad"] .hero .ea-title{font-size:38px; letter-spacing:-.01em}
body[data-ea-shell][data-ea-page="dyad"] .hero .subtitle{margin-top:10px}
body[data-ea-shell][data-ea-page="dyad"] #runBadge{font:500 10.5px/1 var(--ea-mono); letter-spacing:.12em; border-radius:var(--ea-radius); padding:7px 10px}
body[data-ea-shell][data-ea-page="dyad"] .card{border-radius:var(--ea-card-radius)}
body[data-ea-shell][data-ea-page="dyad"] .agent h2{font:600 17px/1.2 var(--ea-sans)}
body[data-ea-shell][data-ea-page="dyad"] :is(textarea,input,select){border-radius:var(--ea-radius)}
body[data-ea-shell][data-ea-page="dyad"] .control-row button{border-radius:var(--ea-radius); height:var(--ea-act-h); font:600 12.5px/1 var(--ea-sans); letter-spacing:.02em}
body[data-ea-shell][data-ea-page="dyad"] .metrics span{font-family:var(--ea-mono); font-size:10px; letter-spacing:.1em}
body[data-ea-shell][data-ea-page="dyad"] .metrics strong{font-family:var(--ea-mono); font-weight:500}
body[data-ea-shell][data-ea-page="dyad"] footer{font-family:var(--ea-sans)}

/* ---------------------------------------------------------------------
   8. MOBILE THEORY APP (mobile.html) — masthead on top, no bottom bar
   --------------------------------------------------------------------- */
body[data-ea-shell][data-ea-page="mobile"]{--m-nav:0px; --m-top:0px}
body[data-ea-shell][data-ea-page="mobile"] .m-bottom-nav{display:none!important}
body[data-ea-shell][data-ea-page="mobile"] .m-workspace{padding-bottom:0!important}
body[data-ea-shell][data-ea-page="mobile"] .ea-pagebar{min-height:44px; padding:6px 12px; gap:8px; flex-wrap:nowrap}
body[data-ea-shell][data-ea-page="mobile"] .ea-pagebar .ea-pagebar-id{flex:1 1 auto; overflow:hidden}
body[data-ea-shell][data-ea-page="mobile"] .ea-pagebar .ea-pagebar-id .ea-title{font-size:16px; overflow:hidden; text-overflow:ellipsis}
body[data-ea-shell][data-ea-page="mobile"] .ea-pagebar .ea-page-tabs{display:flex; gap:6px; flex:none}
body[data-ea-shell][data-ea-page="mobile"] .ea-page-tabs > button{
  appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px;
  height:var(--ea-ctl-h); min-height:0; padding:0 10px; margin:0;
  border:1px solid var(--ea-line); border-radius:var(--ea-radius); background:var(--ea-surface);
  color:var(--ea-muted); font:500 12.5px/1 var(--ea-sans); letter-spacing:0; flex-direction:row; box-shadow:none;
}
body[data-ea-shell][data-ea-page="mobile"] .ea-page-tabs > button svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
body[data-ea-shell][data-ea-page="mobile"] .ea-page-tabs > button.on{color:var(--ea-text); border-color:var(--ea-accent); box-shadow:inset 0 -2px 0 var(--ea-accent)}
/* Graph view: controls ABOVE the graph, never over it. */
body[data-ea-shell][data-ea-page="mobile"] #mViewGraph.m-view-on{display:flex; flex-direction:column}
body[data-ea-shell][data-ea-page="mobile"] #mViewGraph > .m-book-rail{
  position:relative!important; inset:auto!important; left:auto!important; right:auto!important; top:auto!important;
  flex:0 0 auto; width:auto!important; margin:0!important; padding:9px 14px!important;
  background:var(--ea-bg); border-bottom:1px solid var(--ea-line); z-index:5; transform:none!important;
}
body[data-ea-shell][data-ea-page="mobile"] #mViewGraph > .m-book-rail{display:flex!important; flex-direction:row!important; align-items:center; gap:12px; padding:9px 14px!important}
body[data-ea-shell][data-ea-page="mobile"] #mViewGraph > .m-book-rail::before{content:"Книги"; flex:none; font:500 10px/1 var(--ea-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ea-muted)}
body[data-ea-shell][data-ea-page="mobile"] #mViewGraph > .m-book-rail .m-book-rail-track{flex:1 1 auto; min-width:0}
body[data-ea-shell][data-ea-page="mobile"] #mViewGraph > .m-book-rail .m-book-rail-foot{display:flex; flex:none}
body[data-ea-shell][data-ea-page="mobile"] #mViewGraph > .m-book-rail #mGraphHint{display:none}
body[data-ea-shell][data-ea-page="mobile"] #mViewGraph > .m-book-rail .m-book-rail-value{position:static!important; min-width:2.6em; text-align:right; font:500 10.5px/1 var(--ea-mono)!important; color:var(--ea-accent)}
body[data-ea-shell][data-ea-page="mobile"] #mGraphStage{position:relative!important; inset:auto!important; flex:1 1 auto; min-height:0}
/* Round discipline rail (short code on the circle) and full names on the backdrop under
   the graph — the original v3.x design. The book scale now sits above the stage, so the
   rail and its label layer start at the top of the graph instead of 52 px down. */
body[data-ea-shell][data-ea-page="mobile"] #mGraphStage .m-inline-disc-wrap{top:12px!important; bottom:calc(12px + env(safe-area-inset-bottom))!important}
body[data-ea-shell][data-ea-page="mobile"] #mGraphStage .m-disc-legend{top:12px!important}
body[data-ea-shell][data-ea-page="mobile"] .m-graph-actions{bottom:calc(12px + env(safe-area-inset-bottom))!important}
/* Sheets: no dimming curtain over the work surface; the sheet itself stays. */
body[data-ea-shell][data-ea-page="mobile"] .m-sheet-backdrop{background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important}
body[data-ea-shell][data-ea-page="mobile"] .m-sheet-card{border-radius:14px 14px 0 0}
body[data-ea-shell][data-ea-page="mobile"] .m-extra-links{display:none}
body[data-ea-shell][data-ea-page="mobile"] .m-screen-head h2,
body[data-ea-shell][data-ea-page="mobile"] .m-recent-screen h2{font-family:var(--ea-sans); font-weight:600}

/* ---------------------------------------------------------------------
   9. PHONES — shared compact masthead (≤ 820 px, the site's mobile break)
   --------------------------------------------------------------------- */
@media (max-width:820px){
  body[data-ea-shell]{--ea-gutter:12px}
  body[data-ea-shell] .ea-masthead{
    grid-template-columns:minmax(0,1fr) auto; grid-template-rows:46px 40px; row-gap:0; column-gap:12px;
    height:auto; padding:env(safe-area-inset-top) 12px 0;
  }
  body[data-ea-shell] .ea-brand{grid-column:1; grid-row:1; gap:2px}
  body[data-ea-shell] .ea-brand-title{font-size:17px; overflow:hidden; text-overflow:ellipsis}
  body[data-ea-shell] .ea-brand-meta{font-size:9.5px}
  body[data-ea-shell] .ea-lang{grid-column:2; grid-row:1; height:26px}
  body[data-ea-shell] .ea-lang > button{width:34px; min-width:34px; font-size:10.5px!important}
  body[data-ea-shell] .ea-masthead .ea-sections{
    grid-column:1 / -1; grid-row:2; height:40px; margin:0 -12px; padding:0 2px;
    border-top:1px solid var(--ea-line); overflow-x:auto; scrollbar-width:none; justify-content:space-between;
    justify-self:stretch; width:auto;
  }
  body[data-ea-shell] .ea-brand-meta .ea-build{display:none}
  body[data-ea-shell] .ea-masthead .ea-sections::-webkit-scrollbar{display:none}
  body[data-ea-shell] .ea-masthead .ea-sections > :is(a,button){padding:0 10px; font-size:13.5px; flex:1 0 auto}
  body[data-ea-shell] .ea-masthead .ea-sections > :is(.on,[aria-current="page"])::after{left:10px; right:10px}
  body[data-ea-shell] .ea-pagehead{padding:22px 0 14px}
  body[data-ea-shell] .ea-pagehead .ea-title{font-size:28px}
  body[data-ea-shell] .ea-lede{font-size:14px}
  body[data-ea-shell][data-ea-page="questionnaire"] > main.container{padding:0 10px 16px}
}

/* Graph page on phones (graph.html uses 720 px for its own mobile UI). */
@media (max-width:720px){
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar{padding:6px 12px; gap:6px; min-height:0}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar .ea-pagebar-id{display:none}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #searchWrap{order:1; flex:1 1 100%; min-width:0}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #tools{order:2; flex:1 1 100%}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #backQuestionnaire{display:none}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #toolStatus{display:none}
  body[data-ea-shell][data-ea-page="graph"] #tools .tool-btn{height:30px!important; min-height:30px!important; padding:0 10px!important; font-size:12px!important}
  /* Session bar is service information; show it only when a questionnaire profile is linked. */
  body[data-ea-shell][data-ea-page="graph"] #graphSessionBar:has(input[value="personal"]:disabled){display:none!important}
  /* Node card: a short "peek" by default; expand on demand. The graph stays visible. */
  body[data-ea-shell][data-ea-page="graph"] #panel.open{
    height:auto!important; max-height:34%!important; padding:10px 14px 12px!important;
    border-radius:12px 12px 0 0; box-shadow:0 -8px 28px rgba(96,69,0,.16); overflow:hidden!important;
  }
  body[data-ea-shell][data-ea-page="graph"] #panel.open.ea-expanded{max-height:78%!important; overflow-y:auto!important}
  body[data-ea-shell][data-ea-page="graph"] #panel .ea-sheet-handle{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:26px; margin:-4px 0 6px;
    border:0; background:none; padding:0; cursor:pointer; color:var(--ea-faint); font:500 11px/1 var(--ea-sans);
  }
  body[data-ea-shell][data-ea-page="graph"] #panel .ea-sheet-handle::before{content:""; width:36px; height:4px; border-radius:2px; background:var(--ea-line2)}
  body[data-ea-shell][data-ea-page="graph"] #panel:not(.ea-expanded) #panelBody{max-height:calc(34vh - 60px); overflow:hidden; -webkit-mask-image:linear-gradient(#000 70%,transparent); mask-image:linear-gradient(#000 70%,transparent)}
  body[data-ea-shell][data-ea-page="graph"] #mobileDock{--mobile-dock-h:132px}
  body[data-ea-shell][data-ea-page="graph"] #mobileDock.open{flex-basis:132px; height:132px; min-height:132px}
  body[data-ea-shell][data-ea-page="graph"] #sgMobileFilterSheet .sg-filter-backdrop{background:transparent}
}
@media (min-width:721px){
  body[data-ea-shell][data-ea-page="graph"] #panel .ea-sheet-handle{display:none}
}

/* Dyad and questionnaire on phones. */
@media (max-width:820px){
  body[data-ea-shell][data-ea-page="dyad"] .shell{width:calc(100% - 20px)}
  body[data-ea-shell][data-ea-page="dyad"] .hero.ea-pagehead{align-items:flex-start}
  body[data-ea-shell][data-ea-page="dyad"] .hero .ea-title{font-size:28px}
  body[data-ea-shell][data-ea-page="questionnaire"] .card{padding:16px}
  body[data-ea-shell][data-ea-page="questionnaire"] #settings{gap:12px!important; margin:16px 0!important}
  body[data-ea-shell][data-ea-page="questionnaire"] #settings > label{flex:0 0 auto!important; height:auto!important}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  body[data-ea-shell] .ea-masthead *{transition:none!important}
}

/* View-dependent shell parts */
body[data-ea-shell][data-ea-page="theory"]:is([data-ea-view="library"],[data-ea-view="search"]) .ea-pagebar-tools{display:none}
body[data-ea-shell][data-ea-page="mobile"].ea-reading .ea-pagebar{display:none}
/* The build number lives in the masthead. A stray badge appended to <body>
   (its intended host is absent on the theory page) made the document taller
   than the window, so scroll-into-view pushed the masthead off-screen. */
body[data-ea-shell] > .ea-build-badge{display:none}
body[data-ea-shell][data-ea-page="theory"] #app{overflow:hidden}
/* Graph page bar: below 1540 px drop the counts rather than truncate them. */
@media (min-width:721px) and (max-width:1539px){
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar-id .ea-meta{display:none}
}
/* Graph page bar on tablets / small laptops: title · back · search, then the instruments. */
@media (min-width:721px) and (max-width:1180px){
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar{flex-wrap:wrap; row-gap:8px}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar .ea-pagebar-id{order:1; flex:1 1 auto; overflow:visible}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #backQuestionnaire{order:2}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #searchWrap{order:3; flex:0 1 260px; margin-left:0}
  body[data-ea-shell][data-ea-page="graph"] .ea-pagebar #tools{order:4; flex:1 1 100%; overflow-x:auto}
}