/* Progressive touch layout. Desktop styling and the shared scoring renderer stay intact. */
.mobile-only { display: none; }
html[data-mobile] { font-size: 125%; line-height: 1.65; }
html[data-mobile] * { box-sizing: border-box; }
html[data-mobile] body { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
html[data-mobile] .mobile-only:not([hidden]) { display: block; }
html[data-mobile] [hidden] { display: none !important; }
html[data-mobile] :is(button, input, select, textarea) { font: inherit; min-height: 3rem; max-width: 100%; }
html[data-mobile] :is(button, a, summary) { touch-action: manipulation; }
html[data-mobile] button { white-space: normal; overflow-wrap: anywhere; padding: .65rem .85rem; }
html[data-mobile] :is(button, a, input, select, summary):focus-visible { outline: 3px solid #306cb3; outline-offset: 3px; }
html[data-mobile] h1 { font-size: 1.35rem; line-height: 1.4; }
html[data-mobile] h2 { font-size: 1.3rem; line-height: 1.5; }
html[data-mobile] h3 { font-size: 1.15rem; line-height: 1.5; }
html[data-mobile] :is(small, .muted, .hint) { font-size: 1rem; color: #52647c; }
html[data-mobile] header { padding: 1rem; padding-top: max(1rem, env(safe-area-inset-top)); }
html[data-mobile] header p { font-size: 1rem; margin-top: .5rem; }
html[data-mobile] .toolbar { padding: .85rem; gap: .6rem; align-items: stretch; }
html[data-mobile] .toolbar > * { min-width: 0; }
html[data-mobile] .toolbar > select { flex: 1 1 100%; width: 100%; }
html[data-mobile][data-mobile-controls] #projects { display: none; }
html[data-mobile] .mobile-project { flex: 1 1 100%; width: 100%; text-align: left; background: #f5f8fd; }
html[data-mobile] .mobile-project > :is(span, strong) { display: block; }
html[data-mobile] .mobile-project .mobile-label { color: #52647c; margin-bottom: .25rem; }
html[data-mobile] #officialLink { margin: 0; padding: .65rem .5rem; display: flex; align-items: center; min-height: 3rem; }
html[data-mobile] #overview { flex: 1 1 100%; font-size: 1rem; }
html[data-mobile] #scoreOverview { padding: .85rem .85rem 0; }
html[data-mobile] .metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .65rem; }
html[data-mobile] .metric { min-width: 0; padding: .85rem; }
html[data-mobile] .metric strong { font-size: 1.8rem; line-height: 1.45; }
html[data-mobile] .metric small { font-size: 1rem; }
html[data-mobile] .flow { font-size: 1rem; line-height: 1.7; margin: .8rem 0; }
html[data-mobile] #workspace { display: grid; grid-template-columns: minmax(0, 1fr); padding: .85rem; gap: .75rem; }
html[data-mobile] #workspace > * { min-width: 0; }
html[data-mobile][data-mobile-controls] #tree { display: none; }
html[data-mobile] .mobile-navigation { width: 100%; text-align: left; font-weight: 600; background: #e7f0fc; }
html[data-mobile] article { min-height: 0; padding: .85rem; }
html[data-mobile] #content { scroll-margin-top: .75rem; }
html[data-mobile] .scoreHero { padding: 1rem; margin: 1rem 0; }
html[data-mobile] .scoreHero strong { font-size: 2rem; line-height: 1.4; }
html[data-mobile] .scoreHero small { font-size: 1rem; }
html[data-mobile] .subCards, html[data-mobile] .split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .65rem; }
html[data-mobile] .subCard { gap: .3rem; }
html[data-mobile] .subCard span { font-size: 1.35rem; }
html[data-mobile] details { min-width: 0; margin: .75rem 0; padding: .7rem; }
html[data-mobile] summary { font-size: 1rem; min-height: 2.6rem; padding: .25rem 0; }
html[data-mobile] :is(pre, .raw) { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; max-height: none; }
html[data-mobile] :is(.deduction, .reviewNote, .status, .rule, blockquote) { padding: .7rem; margin: .75rem 0; }
html[data-mobile] :is(p, blockquote) { line-height: 1.75; }
html[data-mobile] .tag { font-size: 1rem; }
html[data-mobile] .material { flex-wrap: wrap; gap: .6rem; padding: .85rem 0; }
html[data-mobile] .material span { flex: 1 1 100%; }
html[data-mobile] .material button { width: 100%; }
html[data-mobile] #drawer { padding: .5rem; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
html[data-mobile] #drawer .inner { width: 100%; max-width: 52rem; padding: .85rem; max-height: 94vh; max-height: 94dvh; overscroll-behavior: contain; }
html[data-mobile] #drawer .close { float: none; display: block; margin-left: auto; top: 0; z-index: 1; min-width: 5rem; }
html[data-mobile] #drawer img { max-width: 100%; height: auto; }
html[data-mobile] .mobile-dialog { font: inherit; color: #26334b; width: calc(100% - 1.25rem); max-width: 40rem; max-height: calc(100vh - 1.25rem); max-height: calc(100dvh - 1.25rem); margin: auto; padding: 0; border: 1px solid #b8c9df; border-radius: .75rem; overflow-y: auto; overscroll-behavior: contain; }
html[data-mobile] .mobile-dialog::backdrop { background: #15294599; }
html[data-mobile] .mobile-dialog-body { display: block; }
html[data-mobile] .mobile-dialog-heading { display: flex; gap: .5rem; align-items: center; padding: .75rem; border-bottom: 1px solid #dce3ee; position: sticky; top: 0; z-index: 1; background: white; }
html[data-mobile] .mobile-dialog-heading h2 { flex: 1; margin: 0; min-width: 0; }
html[data-mobile] .mobile-dialog-heading button { flex-shrink: 0; }
html[data-mobile] .mobile-search-label { display: block; margin: .5rem .75rem 0; }
html[data-mobile] .mobile-search { margin: .35rem .75rem .5rem; width: calc(100% - 1.5rem); flex-shrink: 0; }
html[data-mobile] .mobile-options { padding: .75rem; }
html[data-mobile] .mobile-options button { display: block; width: 100%; text-align: left; margin-bottom: .6rem; }
html[data-mobile] .mobile-options button > :is(span, strong) { display: block; }
html[data-mobile] .mobile-options button[aria-current="true"] { background: #dbe9fc; border: 2px solid #315e98; }
html[data-mobile] .mobile-options .mobile-subitem { border-left: .25rem solid #91aed1; }
html[data-mobile][data-mobile-wide] #workspace { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); }
html[data-mobile][data-mobile-wide] #tree { display: block; padding: .75rem; position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); }
html[data-mobile][data-mobile-wide] #tree button { font-size: 1rem; margin: .45rem 0; padding: .6rem; }
html[data-mobile][data-mobile-wide] #tree .sub { margin-left: .4rem; width: calc(100% - .4rem); }
html[data-mobile][data-mobile-wide] .mobile-navigation { display: none; }
html[data-mobile] body.login-page { padding: .85rem; min-height: 100vh; min-height: 100dvh; }
html[data-mobile] .login-page main { max-width: 26rem; padding: 1.1rem; }
html[data-mobile] .login-page :is(input, button) { font-size: 1rem; }
html[data-mobile] .connection-page main { margin: 1rem auto; max-width: 40rem; padding: .85rem; width: calc(100% - 1.7rem); }
html[data-mobile] .connection-page :is(.hint, small) { font-size: 1rem; }
html[data-mobile] .connection-page #captchaBox { padding: .75rem; }
html[data-mobile] .connection-page .actions button { flex: 1 1 12rem; }
html[data-mobile] .connection-page #captchaAnswer { max-width: 100%; width: 100%; }

/* Mobile screens have a stable reading hierarchy and browser-native Back history. */
html[data-mobile][data-mobile-controls] body { padding-bottom: calc(var(--mobile-reader-height, 4rem) + env(safe-area-inset-bottom)); }
html[data-mobile][data-mobile-controls] body > header,
html[data-mobile][data-mobile-controls] .toolbar > :is(#refreshScores, #logout, #officialLink),
html[data-mobile][data-mobile-controls] .flow,
html[data-mobile][data-mobile-controls] .mobile-navigation { display: none; }
html[data-mobile] .mobile-appbar { display: flex !important; position: sticky; top: 0; z-index: 4; align-items: center; gap: .5rem; padding: .45rem .7rem; padding-top: max(.45rem, env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid #dce3ee; }
html[data-mobile] .mobile-appbar > strong { flex: 1; min-width: 0; font-size: 1.1rem; }
html[data-mobile] .mobile-appbar button { flex: 0 0 auto; border: 0; background: #edf3fc; padding-inline: .65rem; }
html[data-mobile][data-mobile-view="overview"] #workspace { display: none; }
html[data-mobile][data-mobile-view="overview"] .mobile-reader-bar { display: none; }
html[data-mobile][data-mobile-view="detail"] :is(.toolbar, #scoreOverview, .mobile-home) { display: none; }
html[data-mobile] .mobile-home { padding: 1rem .85rem; }
html[data-mobile] .mobile-home h2 { margin-bottom: .65rem; }
html[data-mobile] .mobile-tab-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .65rem; align-items: center; width: 100%; text-align: left; margin-bottom: .6rem; padding: .9rem; border-radius: .75rem; color: #26334b; border-color: #d8e1ed; box-shadow: 0 2px 5px #23365305; }
html[data-mobile] .mobile-tab-row > span > :is(strong,span) { display: block; }
html[data-mobile] .mobile-tab-score { color: #2d568f; }
html[data-mobile] .mobile-chevron { font-size: 1.5rem; color: #476994; }
html[data-mobile] .mobile-label { color: #52647c; font-size: .95rem; }
html[data-mobile] .mobile-project { position: relative; padding-right: 2.2rem; border-radius: .75rem; background: #fff; }
html[data-mobile] .mobile-project::after { content: '›'; position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
html[data-mobile] #content > small { padding-bottom: .5rem; border-bottom: 1px solid #e1e7f0; }
html[data-mobile] #content .subCard { position: relative; padding-right: 2rem; border-radius: .7rem; background: #f7faff; }
html[data-mobile] #content .subCard::after { content: '›'; position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; }
html[data-mobile] #content summary { display: flex; align-items: center; gap: .5rem; list-style: none; }
html[data-mobile] #content summary::-webkit-details-marker { display: none; }
html[data-mobile] #content summary::after { content: '⌄'; margin-left: auto; flex-shrink: 0; color: #476994; }
html[data-mobile] #content details[open] > summary::after { transform: rotate(180deg); }
html[data-mobile] #content details[open] > summary { border-bottom: 1px solid #e1e7f0; padding-bottom: .65rem; margin-bottom: .7rem; }
html[data-mobile] .mobile-reader-bar { display: flex !important; position: fixed; bottom: 0; inset-inline: 0; z-index: 4; gap: .45rem; padding: .5rem .7rem; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #dce3ee; box-shadow: 0 -3px 12px #23365308; }
html[data-mobile][data-mobile-view="overview"] .mobile-reader-bar { display: none !important; }
html[data-mobile] .mobile-reader-bar button { flex: 1; min-width: 0; padding: .5rem .25rem; background: #f0f5fc; border-color: #d8e1ed; }
html[data-mobile] button:disabled { color: #7c8795; background: #f1f3f6; cursor: default; }
html[data-mobile] button:not(:disabled):active { background: #dbe8fb; }
html[data-mobile] :is(#content h2, #content summary) { scroll-margin-top: calc(var(--mobile-bar-height, 4rem) + .6rem); }
html[data-mobile][data-mobile-wide] #tree { top: calc(var(--mobile-bar-height, 4rem) + .75rem); max-height: calc(100dvh - var(--mobile-bar-height, 4rem) - var(--mobile-reader-height, 4rem) - 2rem); }
html[data-mobile] .mobile-dialog { width: 100%; max-width: 40rem; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0; border: 0; z-index: 6; }
html[data-mobile] .mobile-dialog-heading { padding-top: max(.75rem, env(safe-area-inset-top)); }
html[data-mobile] .mobile-dialog .mobile-options a { display: flex; align-items: center; width: 100%; min-height: 3rem; padding: .65rem .85rem; border: 1px solid #bac9dc; border-radius: 6px; text-decoration: none; margin-bottom: .6rem; }
html[data-mobile] body:has(.mobile-dialog[open]),html[data-mobile] body:has(#drawer[style*="block"]) { overflow: hidden; }
html[data-mobile] #drawer { padding: 0; z-index: 6; }
html[data-mobile] #drawer .inner { min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
html[data-mobile] #drawer .close { background: #edf3fc; margin-bottom: .7rem; }
html[data-mobile][data-mobile-controls] { scroll-padding-top: calc(var(--mobile-bar-height, 4rem) + .6rem); scroll-padding-bottom: calc(var(--mobile-reader-height, 4rem) + 1rem); }
html[data-mobile] #content :is(button, a, summary) { scroll-margin-bottom: calc(var(--mobile-reader-height, 4rem) + 1rem); }
html[data-mobile] .mobile-appbar button { flex: 0 1 auto; max-width: 30%; padding-inline: .4rem; }
html[data-mobile] .mobile-appbar { padding-inline: .5rem; gap: .35rem; }
/* Large text or a short landscape viewport must not be covered by fixed controls. */
html[data-mobile][data-mobile-flow-controls] .mobile-appbar { position: static; }
html[data-mobile][data-mobile-flow-controls] .mobile-reader-bar { position: static; }
html[data-mobile][data-mobile-flow-controls] body { padding-bottom: env(safe-area-inset-bottom); }
html[data-mobile][data-mobile-flow-controls] { scroll-padding: 0; }
html[data-mobile][data-mobile-flow-controls] #content :is(button, a, summary) { scroll-margin: .5rem; }
html[data-mobile][data-mobile-flow-controls] #workspace,html[data-mobile][data-mobile-flow-controls] article { padding: .45rem; }
html[data-mobile][data-mobile-flow-controls] .mobile-tab-row { grid-template-columns: minmax(0, 1fr) auto; }
html[data-mobile][data-mobile-flow-controls] .mobile-tab-score { grid-column: 1; }
html[data-mobile][data-mobile-flow-controls] .mobile-chevron { grid-column: 2; grid-row: 1 / 3; }

html[data-mobile] .material-actions{width:100%;display:flex;gap:.5rem}html[data-mobile] .material-actions :is(button,a){flex:1;min-width:0;width:auto;text-align:center;min-height:3rem;font:inherit;display:flex;align-items:center;justify-content:center}html[data-mobile] #drawer.document-drawer .inner{height:100vh;height:100dvh;padding:.4rem}html[data-mobile] #drawer.document-drawer #close{margin:.2rem .2rem .4rem;min-height:2.5rem;padding:.3rem .6rem}