/* One compact mobile shell; desktop components keep their own layout. */
@media(max-width:800px) {
 html {scrollbar-gutter:auto;scroll-padding-bottom:120px}
 .site-header {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;padding:8px 16px 0;position:relative;min-height:0}
 .site-header .header-brand-group {grid-column:1;grid-row:1;min-width:0}
 .site-header .brand {min-height:48px;font-size:var(--type-lead)}
 .site-header .header-end {grid-column:2;grid-row:1;gap:8px}
 .site-header .avatar-button {width:44px;height:44px;min-width:44px;min-height:44px}
 .mobile-tabs-visible .site-header nav {position:fixed;z-index:35;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:0;padding:8px 0 max(8px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
 .mobile-tabs-visible .site-header nav button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:56px;padding:0;border:0;font-size:var(--type-body);line-height:1.25}
 .mobile-tabs-visible .site-header nav button svg {width:24px;height:24px;padding:4px;box-sizing:content-box;border-radius:8px}
 .mobile-tabs-visible .site-header nav button.active svg {background:var(--panel);stroke-width:2.2}
 .mobile-tabs-visible .site-header nav button.active {font-weight:600}
 .mobile-tabs-visible .workspace {padding-bottom:calc(104px + env(safe-area-inset-bottom))}
 .mobile-focus .site-header {display:none}
 .mobile-focus-exit {width:44px;height:44px;flex:none;display:grid;place-items:center;padding:8px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink)}
 .mobile-focus-exit svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
 .mobile-focus .mobile-context-bar>span {flex:1;text-align:center}
 .mobile-focus .mobile-context-bar {padding-top:max(8px,env(safe-area-inset-top))}
 .mobile-tabs-visible:has(input:focus,textarea:focus,[contenteditable]:focus) .site-header nav {display:none}
 .workspace {padding-inline:16px;min-width:0}
 .live-shell {height:100dvh;min-height:0;padding:0}
 .live-shell>header {flex:none;min-height:64px;padding:max(8px,env(safe-area-inset-top)) 16px 8px;gap:16px}
 .live-shell .live-body {min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 16px;justify-content:safe center}
 .live-shell .live-body h1 {font-size:var(--type-title);margin:12px 0;max-width:16ch}
 .live-shell .phase-label {margin:0 0 12px}
 .live-shell .live-measures {margin:24px 0;gap:24px}
 .live-shell .live-measures b {font-size:var(--type-display)}
 .live-shell .timer-hint {margin:16px 0 0}
 .live-shell>footer {flex:none;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:var(--paper);gap:16px}
 .live-shell>footer .button,.live-shell>footer .text-button {min-height:48px}
 .mobile-context-bar {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;color:var(--muted)}
 .mobile-context-bar>span {min-width:0;font-size:var(--type-body);line-height:1.3}
 .mobile-context-bar .mode-switch {flex:none;display:flex;margin:0}
 .mobile-context-bar .mode-switch button {min-width:48px;min-height:44px;padding:8px;font-size:var(--type-body)}
 .brew-view>.split-layout {padding-top:0;gap:24px;min-height:0!important}
 .brew-view .section-intro {margin:0;padding:0}
 #main.brew-view .section-intro h1 {font-size:var(--type-lead);line-height:1.2;margin:0 0 16px;max-width:none;letter-spacing:-.02em}
 .coffee-layout .coffee-select-block>.section-intro {margin-bottom:0}
 .coffee-layout .scan-entry-featured {padding:16px;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 24px;border-radius:var(--radius-card);box-shadow:none}
 .coffee-layout .scan-entry-featured .scan-pack-art {display:none}
 .coffee-layout .scan-entry-featured .scan-button {width:100%;min-height:48px;padding:12px;white-space:normal}
 .coffee-layout .scan-entry-copy p {margin-top:12px;min-width:0}
 .coffee-layout .origin-fields {grid-template-columns:minmax(0,1fr);gap:16px}
 .coffee-layout .country-choices,#grinder-popular .country-choices,.profile-picker .chips,.hub-directory-nav {display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;overscroll-behavior-x:contain;padding-bottom:8px}
 .hub-directory-nav>button {flex:none;min-height:48px;white-space:nowrap}
 .coffee-layout .country-choices .country-choice,#grinder-popular .country-choices .country-choice,.profile-picker .chip {flex:none;min-height:44px;white-space:nowrap}
 .coffee-layout .pro-inline-hint {margin-top:24px}
 .coffee-stage-1 .coffee-select-block>.country-choices {margin:0 0 16px;scroll-padding-inline:16px}
 .coffee-stage-1 .popular-origin-label {display:none}
 .coffee-stage-1 .coffee-choice-group>.scan-entry {margin:24px 0}
 .brew-view .brewer-choices {display:flex;overflow-x:auto;gap:8px;padding-bottom:8px;overscroll-behavior-x:contain}
 .brew-view .brewer-choice {flex:0 0 136px;min-width:0;padding:12px;gap:8px}
 .brew-view .brewer-choice .brewer-drawing {height:80px;width:100%}
 .coffee-layout .popular-processes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .coffee-layout .popular-processes .process-choice {min-width:0;min-height:56px;padding:12px}
 .coffee-layout .other-processes .process-options {display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;gap:8px}
 .coffee-layout .other-processes .process-choice {flex:none;min-height:44px;white-space:nowrap}
 .brew-dock {width:100%;border-radius:0;padding:8px 16px max(8px,env(safe-area-inset-bottom));box-shadow:0 -4px 16px #26373f0a}
 .brew-dock .button {min-height:48px}
 .workspace:has(input:focus,textarea:focus,[contenteditable]:focus) .brew-dock {position:static;transform:none;margin-top:24px;border-bottom:1px solid var(--line)}
 .public-page,.hub-community,.hub-directory {padding-top:24px}
 .public-page h1 {font-size:var(--type-title)}
 .hub-editorial-head {gap:16px;margin-bottom:24px;padding-bottom:24px}
 .public-toolbar {gap:12px}
 .hub-directory .hub-weekly {padding:16px;margin-bottom:24px}
 .hub-weekly .public-section-heading {flex-wrap:wrap;gap:8px;margin-bottom:16px}
 .hub-weekly-grid {display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc(100% - 24px);gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}
 .hub-weekly-grid article,.hub-weekly-grid article+article {grid-template-columns:64px minmax(0,1fr);gap:12px;padding:0;border:0;scroll-snap-align:start;align-items:start}
 .hub-weekly-grid article>div:first-child {min-height:96px;padding:8px}
 .hub-weekly-pack,.hub-weekly .hub-logo {height:80px;width:100%;max-width:100%}
 .hub-weekly .hub-brand {min-height:80px}
 .hub-weekly h3 {font-size:var(--type-lead)}
 .hub-weekly p {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0}
 #main.brew-view .pro-heading h1 {font-size:var(--type-lead);line-height:1.2}
 .pro-heading {padding-top:0;margin-bottom:24px}
 .pro-section>summary {min-height:56px;padding:16px}
 .pro-section>.fields-grid {padding:16px}
 .journey-geography,.journey-summary {padding:16px}
 .journey-legend {gap:8px 16px}
 summary:focus-visible {outline:2px solid var(--ink);outline-offset:2px}
}