/* Approved S03 theory surface: values ported from design/platform/styles/study.css, scoped to the theory screen. */
#app[data-screen=theory] .app-context{font-size:var(--text-label);color:var(--muted);border-left:1px solid var(--line);padding-left:28px}
#app[data-screen=theory] .header-actions .home-link{background:none;border:0;font-size:var(--text-control);color:var(--ink);padding:8px 0;text-decoration:none;display:flex;align-items:center;min-height:44px;gap:10px}
#app[data-screen=theory] .theory-content{width:min(72ch,var(--content-width),calc(100% - 80px));margin:0 auto;padding:30px 0 64px}
#app[data-screen=theory] .theory-type{font-size:var(--text-label);color:var(--blue);font-weight:500;margin-bottom:8px}
#app[data-screen=theory] .theory-article{font-size:var(--text-body);line-height:1.6;overflow-wrap:break-word}
#app[data-screen=theory] .theory-article h1{font-size:var(--text-title);font-weight:550;letter-spacing:-0.02333em;line-height:1.3;margin:0 0 20px}
#app[data-screen=theory] .theory-article h2{font-size:var(--text-section);font-weight:550;letter-spacing:-0.01957em;line-height:1.35;margin:36px 0 17px}
#app[data-screen=theory] .theory-article h3{font-size:var(--text-subtitle);font-weight:550;margin:26px 0 12px;line-height:1.5}
#app[data-screen=theory] .theory-article :is(h4,h5,h6){font-size:var(--text-body);font-weight:550;margin:25px 0 12px}
#app[data-screen=theory] .theory-article p{margin:0 0 17px}
#app[data-screen=theory] .theory-article strong{font-weight:550}
#app[data-screen=theory] .theory-article ul,#app[data-screen=theory] .theory-article ol{padding-left:23px;margin:0 0 20px}
#app[data-screen=theory] .theory-article li{padding-left:4px;margin:6px 0}
#app[data-screen=theory] .theory-article li p{margin:0}
#app[data-screen=theory] .theory-article p:focus-visible{outline:2px solid var(--blue);outline-offset:5px;border-radius:3px}
#app[data-screen=theory] .theory-article code{font-family:inherit;background:var(--sand);border-radius:3px;padding:1px 4px;font-size:.95em}
#app[data-screen=theory] .theory-article table{border-collapse:collapse;width:100%;font-size:var(--text-body);line-height:1.55;margin:20px 0 27px;table-layout:auto}
#app[data-screen=theory] .theory-article th{font-weight:550;background:var(--sand);text-align:left}
#app[data-screen=theory] .theory-article td,#app[data-screen=theory] .theory-article th{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
#app[data-screen=theory] .theory-article img{display:block;max-width:100%;height:auto;margin:20px auto}
#app[data-screen=theory] .theory-article .image-status{display:block;font-size:var(--text-label);color:var(--muted);margin:20px 0;text-align:center}
#app[data-screen=theory] .theory-article .table-scroll{max-width:100%;overflow-x:auto}
#app[data-screen=theory] .theory-article .table-scroll:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#app[data-screen=theory] .theory-companion{position:fixed;right:35px;bottom:28px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:32px;background:var(--paper);padding:5px 15px 5px 7px;z-index:6;font-size:var(--text-control);color:var(--blue)}
#app[data-screen=theory] .theory-companion .monomer{width:43px;background-position:-15px -91px}
#app[data-screen=theory] .state-notice{margin:35px 0;padding:25px;border:1px solid var(--line);border-radius:12px}
#app[data-screen=theory] .state-notice h2{font-size:1.25rem;margin-bottom:10px}
#app[data-screen=theory] .state-notice p{font-size:var(--text-control);color:var(--muted);margin-bottom:17px}
#app[data-screen=theory] .state-notice button{border:1px solid var(--line);border-radius:7px;background:var(--paper);padding:10px 16px;font-size:var(--text-control);margin:0 8px 0 0}
#app[data-screen=theory] .local-notice{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;max-width:calc(100% - 28px);background:var(--ink);color:white;font-size:var(--text-label);padding:10px 15px;border-radius:7px;z-index:80;text-align:center}

/* Contextual selection action: absent until an actual text selection exists. */
#app[data-screen=theory] .selection-actions{position:fixed;z-index:60;padding:3px;background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:0 3px 12px #2d343c0d}
#app[data-screen=theory] .selection-actions .quote-button{border:0;background:transparent;color:var(--ink);border-radius:10px;min-height:44px;padding:10px 16px;font-size:var(--text-control)}
#app[data-screen=theory] .selection-actions[hidden]{display:none!important}

@media(min-width:601px) and (max-width:1000px){
  #app[data-screen=theory] .theory-content{width:calc(100% - 40px)}
}

@media(max-width:600px){
  #app[data-screen=theory] .app-context{display:none}
  #app[data-screen=theory] .header-actions .home-link{font-size:var(--text-control)}
  #app[data-screen=theory] .theory-content{width:calc(100% - 36px);padding:8px 0 98px}
  #app[data-screen=theory] .theory-type{font-size:var(--text-label)}
  #app[data-screen=theory] .theory-article{font-size:var(--text-body);line-height:1.65}
  #app[data-screen=theory] .theory-article h1{font-size:1.75rem;line-height:1.28;letter-spacing:-0.024em;margin-bottom:19px}
  #app[data-screen=theory] .theory-article h2{font-size:1.375rem;margin-top:29px;margin-bottom:15px}
  #app[data-screen=theory] .theory-article h3{font-size:var(--text-subtitle);margin-top:23px}
  #app[data-screen=theory] .theory-article h4{font-size:var(--text-body)}
  #app[data-screen=theory] .theory-article table{font-size:var(--text-control)}
  #app[data-screen=theory] .theory-article td,#app[data-screen=theory] .theory-article th{padding:9px 8px}
  #app[data-screen=theory] .theory-article p{margin-bottom:16px}
  #app[data-screen=theory] .theory-companion{right:15px;bottom:16px;font-size:var(--text-control);padding-right:14px}
  #app[data-screen=theory] .theory-companion .monomer{width:40px}
  #app[data-screen=theory] .state-notice{padding:20px}
  #app[data-screen=theory] .state-notice h2{font-size:var(--text-subtitle)}
  #app[data-screen=theory] .local-notice{bottom:14px}
}