/* Compact reading surfaces. Keep the map chrome glassy, not the text behind it.
   Tutorial focus intentionally retains its larger, isolated learning targets. */
:root,html[data-map-quality=low] { --screen-face:rgb(var(--sk-102a32, 16, 42, 50)); }
/* overflow:hidden is still a scroll container: scrollIntoView on a card could
   move the entire HUD/dock by the inactive screen's 26px transition offset. */
#app { overflow:clip; }
/* A small flag may look compact, but still needs a full finger-sized target. */
#hud .badge { width:44px; height:44px; font-size:24px; }
.sheet .handle { position:relative; touch-action:none; cursor:grab; }
.sheet .handle::before { content:''; position:absolute; inset:-10px -16px; }
.sheet:focus-visible { outline:none; }
.sheet-body>h3:first-child { padding-inline-end:42px; overflow-wrap:anywhere; line-height:1.55; }
.notice-live { color:var(--text-3); }
.notice-row { background:linear-gradient(145deg,rgba(var(--sk-51737b, 81, 115, 123), 0.122),rgba(var(--sk-102930, 16, 41, 48), 0.451)); border-color:var(--edge-2); box-shadow:inset 0 1px #ffffff08; border-radius:18px; }
.notice-row.unread { border-color:rgba(var(--sk-91e2cb, 145, 226, 203), 0.333); }
#app:not([data-guide-focus]) .screen { padding-inline:12px; }
#app:not([data-guide-focus]) .scr-head { gap:8px; margin:0 2px 12px; }
#app:not([data-guide-focus]) .scr-head>.ic { width:30px; height:30px; }
#app:not([data-guide-focus]) .scr-head h2 { font-size:19px; line-height:1.5; }
#app:not([data-guide-focus]) .scr-head p { line-height:1.7; }
#app:not([data-guide-focus]) .card { padding:11px; border-radius:18px; }
#app:not([data-guide-focus]) .sec-title { margin:14px 2px 8px; }
#app:not([data-guide-focus]) .section-nav { margin-block:0 12px; }
#app:not([data-guide-focus]) .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#app:not([data-guide-focus]) .tile { min-width:0; min-height:84px; padding:10px; border-radius:18px; }
#app:not([data-guide-focus]) .tile .ic { width:20px; height:20px; }
#app:not([data-guide-focus]) .tile .val { font-size:20px; line-height:1.4; margin-top:3px; overflow-wrap:anywhere; }
#app:not([data-guide-focus]) .tile .val-summary { font-size:14px; line-height:1.8; font-weight:700; }
#app:not([data-guide-focus]) .hero { gap:10px; }
#app:not([data-guide-focus]) .hero .medal { width:40px; height:40px; font-size:26px; }
#app:not([data-guide-focus]) .hero h3 { font-size:17px; overflow-wrap:anywhere; }
#app:not([data-guide-focus]) .hero .pills { gap:4px; margin-top:3px; }
.pill[data-go=points] { min-height:44px; height:auto; padding:4px 9px; font:inherit; font-size:11px; color:var(--text-2); cursor:pointer; }
#app:not([data-guide-focus]) .country-details { margin-top:8px; }
#app:not([data-guide-focus]) .country-details>summary { min-height:44px; }
#app:not([data-guide-focus]) .country-city-list .ic-wrap { width:36px; height:36px; }
#app:not([data-guide-focus]) .context-links { gap:6px; margin:12px 0; }

/* Every filter owns an equal part of its track; no unused trailing segment. */
.dp-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; }
.dp-filters .chip { min-width:0; padding-inline:3px; min-height:44px; justify-content:center; font-size:12px; }
#app:not([data-guide-focus]) .dp-seg:not(.mini) .dp-seg-btn { min-height:50px; padding:5px 2px; gap:2px; }
#app:not([data-guide-focus]) .dp-me { padding:10px; gap:8px; }
#app:not([data-guide-focus]) .dp-me-name { font-size:16px; }
#app:not([data-guide-focus]) .dp-me-sub { font-size:12px; gap:4px 8px; }
#app:not([data-guide-focus]) .dp-nation { padding:10px; gap:8px; }
#app:not([data-guide-focus]) .dp-nation-main { gap:3px; }
#app:not([data-guide-focus]) .dp-nation-meta { gap:4px 8px; }
#app:not([data-guide-focus]) .dp-tags { gap:4px; }
#app:not([data-guide-focus]) .dp-list>.card+.card { margin-top:8px; }
.dp-me-pin { bottom:calc(var(--tab-h) + var(--guide-height,56px) + 12px); }

#app:not([data-guide-focus]) .ar-hero { padding:12px; border-radius:18px; }
#app:not([data-guide-focus]) .ar-emblem { width:42px; height:46px; }
#app:not([data-guide-focus]) .ar-emblem .ic { width:42px; height:42px; }
#app:not([data-guide-focus]) .ar-power { font-size:26px; }
#app:not([data-guide-focus]) .ar-man { font-size:16px; }
#app:not([data-guide-focus]) .ar-stats { margin-top:8px; padding:8px 0; }
#app:not([data-guide-focus]) .ar-stats b { font-size:18px; }
#app:not([data-guide-focus]) .ar-domains { padding-top:8px; gap:6px 10px; }
#app:not([data-guide-focus]) .ar-war { padding:10px; gap:8px; }
#app:not([data-guide-focus]) .ar-quick { margin-top:12px; }
.ar-quick>.btn { border-radius:0; border:0; box-shadow:none; }
.ar-quick>.btn+.btn { border-inline-start:1px solid var(--edge-2); }
#app:not([data-guide-focus]) .ar-list { gap:8px; }
#app:not([data-guide-focus]) .ar-roster { margin-top:10px; }
#app:not([data-guide-focus]) .ar-meters { margin-block:8px; }

#app:not([data-guide-focus]) .ring-prog,#app:not([data-guide-focus]) .ring-prog svg.rp { width:64px; height:64px; }
#app:not([data-guide-focus]) .ring-prog .ic { inset:14px; width:36px; height:36px; }
#app:not([data-guide-focus]) .bld .cost { margin-top:6px; }
#app:not([data-guide-focus]) .bld .foot { gap:8px; }
.mkt>.top { min-height:44px; }
#app:not([data-guide-focus]) .journey-header { min-height:60px; padding:8px 14px; }
#app:not([data-guide-focus]) .journey-content { gap:10px; padding-top:6px; }
#app:not([data-guide-focus]) .journey-level { padding:12px; }
#app:not([data-guide-focus]) .journey-progress { margin-block:10px 8px; }
#app:not([data-guide-focus]) .journey-next { padding:14px; }
#app:not([data-guide-focus]) .journey-next h1 { font-size:20px; }
#app:not([data-guide-focus]) .journey-next p { margin-bottom:12px; }
#app:not([data-guide-focus]) .journey-next .btn { min-height:48px; }
#app:not([data-guide-focus]) .journey-status { gap:8px; }
#app:not([data-guide-focus]) .journey-status>button,#app:not([data-guide-focus]) .journey-status>div { padding:10px; gap:8px; }

/* A continuous quiet footer prevents moving card text competing with help.
   Existing scroll padding keeps the last control reachable above this chrome. */
html:not(.guide-expanded) #app.app-screen-open:not([data-guide-focus])::after {
  content:''; position:absolute; z-index:19; bottom:0; inset-inline:0;
  height:calc(var(--tab-h) + var(--guide-height,56px) + 8px);
  max-width:640px; margin:auto; pointer-events:auto;
  background:linear-gradient(transparent,rgb(var(--sk-102a32, 16, 42, 50)) 10px,rgb(var(--sk-102a32, 16, 42, 50)));
}
html:not(.guide-expanded) #app.guided-home::after { height:var(--tab-h); }
.points-level summary,.points-rules summary,.points-entry summary,.points-budget summary { min-height:44px; display:flex; align-items:center; }
.points-level { padding-top:6px; margin-top:6px; }
.points-summary .points-total { font-size:30px; }
.points-split { margin-block:8px; }
.points-tabs { margin-block:12px; }
.points-task { margin-top:8px; }
.points-task>.sub { margin:6px 0; }
.points-actions { gap:8px; margin-top:8px; }
.points-budget { margin-block:12px; }
@media(max-width:360px) {
  .dp-filters .chip { font-size:11px; }
  #app:not([data-guide-focus]) .screen { padding-inline:10px; }
  #app:not([data-guide-focus]) .tile .val-summary { font-size:13px; }
}
/* A short landscape viewport cannot afford a second footer. Context help moves
   beside the heading; the full tutorial retains its dedicated split layout. */
@media(max-height:500px) and (min-width:600px) {
  html:not(.guide-expanded) #app.app-screen-open:not(.guided-home):not([data-guide-focus]) .guide-root {
    top:calc(var(--hud-h) + 12px); bottom:auto; inset-inline:auto;
    left:max(12px,calc((100% - 640px)/2 + 12px)); width:160px;
    height:auto; padding:0; margin:0;
  }
  html:not(.guide-expanded) #app.app-screen-open:not(.guided-home):not([data-guide-focus]) .scr-head { padding-inline-end:170px; min-height:44px; }
  html:not(.guide-expanded) #app.app-screen-open:not(.guided-home):not([data-guide-focus])::after { height:var(--tab-h); }
  html:not(.guide-expanded) #app.app-screen-open:not(.guided-home):not([data-guide-focus]) .screen {
    padding-bottom:calc(var(--tab-h) + 18px); scroll-padding-bottom:calc(var(--tab-h) + 18px);
  }
}