/* The existing style.css owns all visual tokens. This layer adds device behavior. */
html { min-height:100%; background:var(--bg-color); -webkit-text-size-adjust:100%; }
html { color-scheme:light; }
html.dark-mode { color-scheme:dark; }
button, .btn { font-family:inherit; }
body { min-height:100vh; min-height:100dvh; }
body > header {
    padding-top:calc(2rem + env(safe-area-inset-top, 0px));
    padding-left:max(1rem, env(safe-area-inset-left, 0px));
    padding-right:max(1rem, env(safe-area-inset-right, 0px));
}
body > main.container {
    padding-left:max(1rem, env(safe-area-inset-left, 0px));
    padding-right:max(1rem, env(safe-area-inset-right, 0px));
}
body > footer { padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px)); }
body:has(> .login-container) {
    padding-left:env(safe-area-inset-left, 0px);
    padding-right:env(safe-area-inset-right, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
}
body > header .theme-toggle { top:calc(1rem + env(safe-area-inset-top, 0px)); right:max(1rem, env(safe-area-inset-right, 0px)); }
#sticky-filter-section { top:env(safe-area-inset-top, 0px); }
.web-app-connection { border:1px solid var(--border-color); border-left:4px solid var(--primary-color); padding:0.75rem 1rem; background:var(--card-bg-color); border-radius:var(--border-radius); }
.web-app-connection[hidden] { display:none; }
.web-app-screen { max-width:800px; }
.web-app-heading { display:flex; gap:1rem; align-items:center; margin-bottom:1.5rem; }
.web-app-heading img { flex:none; border-radius:20%; }
.web-app-heading h2 { margin:0; }
.web-app-heading p { margin:0.25rem 0 0; color:var(--text-color-muted); }
.web-app-steps { padding-left:1.5rem; }
.web-app-steps li { padding-left:0.25rem; margin-bottom:1rem; }
.web-app-note { color:var(--text-color-muted); }
.web-app-screen :is(a,button):focus-visible { outline:3px solid var(--primary-color); outline-offset:3px; }
[data-web-app-installed] { display:none; }
.web-app-standalone [data-web-app-installed] { display:block; }
.web-app-standalone [data-web-app-instructions] { display:none; }
@media (max-width:760px), (pointer:coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea,
    .import-form .import-editor { font-size:16px; }
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { min-height:44px; }
    button, .btn, summary { min-height:44px; box-sizing:border-box; touch-action:manipulation; }
    .category-checkbox { min-height:44px; box-sizing:border-box; display:flex; align-items:center; gap:0.5rem; }
    input[type=checkbox], input[type=radio] { width:20px; height:20px; flex:none; }
    header:has(.theme-toggle) { padding-bottom:1rem; }
    header .theme-toggle { position:static; margin-top:0.75rem; }
    .input-group { flex-wrap:wrap; }
    .input-group input { min-width:0; }
    .admin-nav { justify-content:flex-start; }
    .web-app-screen .admin-card { padding:1rem; }
}
@media (prefers-reduced-motion:reduce) {
    body, header, .btn, .admin-card, .theme-toggle { transition:none; }
    .item-card { animation:none; opacity:1; }
}

/* Compact header controls retain full touch targets. */
.public-header-tools { position:absolute; top:1rem; right:1rem; display:flex; align-items:center; gap:0.375rem; }
.public-header .header-icon-button, .public-header .header-icon-button:visited { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:44px; height:44px; min-width:44px; padding:0; border:1px solid var(--border-color); border-radius:var(--border-radius); background:var(--card-bg-color); color:var(--text-color); text-decoration:none; font:600 1.15rem/1 Consolas,monospace; }
.public-header-tools .theme-toggle { position:static; margin:0; }
.public-header .header-icon-button:focus-visible { outline:3px solid var(--primary-color); outline-offset:3px; }
.public-wishlist .btn-secondary:visited { color:#fff; }
html.dark-mode .public-wishlist .item-price { color:#64b5f6; }

@media (max-width:600px) {
    body > header { padding:calc(0.75rem + env(safe-area-inset-top,0px)) max(0.75rem,env(safe-area-inset-right,0px)) 0.75rem max(0.75rem,env(safe-area-inset-left,0px)); }
    body > header h1 { font-size:1.35rem; line-height:1.25; }
    body > header:has(.theme-toggle) { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding-bottom:0.75rem; }
    body > header .theme-toggle { margin:0; flex:none; }
    body > header.public-header { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
    .public-header h1 { font-size:clamp(1.1rem,5vw,1.4rem); }
    .public-header-tools { position:static; flex:none; gap:0.25rem; }
    body .container { margin-top:1rem; margin-bottom:1rem; min-width:0; }
    body > main.container { padding-left:max(0.625rem,env(safe-area-inset-left,0px)); padding-right:max(0.625rem,env(safe-area-inset-right,0px)); }
    body .admin-nav { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:0.375rem; margin-bottom:0.875rem; padding:3px; scrollbar-width:thin; scrollbar-color:var(--secondary-color) var(--bg-color); }
    body .admin-nav > a { flex:0 0 auto; white-space:nowrap; padding:0.45rem 0.65rem; font-size:0.8rem; }
    body .admin-card { padding:1rem; margin-bottom:1rem; }
    body .admin-card h2 { font-size:1.15rem; line-height:1.3; }
    body .admin-card .form-group { gap:0.375rem; margin-bottom:0.75rem; }
    body .admin-card .form-group label { font-size:0.9rem; }
    body .admin-card .form-group input:not([type=checkbox]):not([type=radio]), body .admin-card select { padding:0.55rem 0.65rem; }
    body .admin-card > p { font-size:0.9rem; line-height:1.5; }
    body .btn { padding:0.5rem 0.75rem; }
    body .import-editor, #ai-context { height:18rem; font-size:16px; }
    body.review-screen .review-list { gap:0.75rem; }
    body.review-screen .review-card { grid-template-columns:72px minmax(0,1fr); gap:0.65rem; padding:0.75rem; margin:0; }
    body.review-screen .review-image { width:72px; height:80px; }
    body.review-screen .review-card h2 { font-size:1rem; line-height:1.3; margin:0.35rem 0; }
    body.review-screen .review-toolbar { gap:0.5rem; padding:0.65rem; margin:0.75rem 0; }
    body.review-screen .review-actions { gap:0.5rem; }
    body .managed-item { grid-template-columns:48px minmax(0,1fr); padding:0.625rem; gap:0.6rem; }
    body .managed-image { width:48px; height:56px; }
    body .managed-description h3 { font-size:1rem; line-height:1.3; }
    body .managed-description p { margin:0.2rem 0; }
    body .managed-status, body .managed-requires, body .managed-context { font-size:0.8rem; line-height:1.4; }
    body .managed-actions { gap:0.375rem; }
    body #item-prerequisites > summary h2 { font-size:1.15rem; }
    .public-wishlist #sticky-filter-section { margin-bottom:0; padding-top:0.5rem; padding-bottom:0.5rem; }
    .public-wishlist .toggle-filters-btn { width:calc(100% - 1.25rem); min-height:44px; margin-bottom:0; padding:0.5rem; }
    .public-wishlist .filter-form { margin:0.75rem 0.625rem 0; padding:0.75rem; gap:0.875rem; }
    .public-wishlist .filter-form select { min-height:44px; font-size:16px; }
    .public-wishlist .category-checkbox { min-height:44px; }
    .public-wishlist .item-list { grid-template-columns:minmax(0,1fr); gap:0.75rem; }
    .public-wishlist .item-card { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:start; gap:0.4rem 0.75rem; padding:0.75rem; animation:none; opacity:1; }
    .public-wishlist .item-image { grid-column:1; grid-row:1 / span 3; width:88px; height:88px; border-radius:5px; }
    .public-wishlist .item-image img { object-fit:contain; }
    .public-wishlist .item-details { display:contents; }
    .public-wishlist .card-section-categories { grid-column:2; grid-row:1; gap:0.3rem; min-height:0; }
    .public-wishlist .item-category { font-size:0.75rem; padding:0.1rem 0.3rem; }
    .public-wishlist .card-section-title { grid-column:2; grid-row:2; min-height:0; }
    .public-wishlist .item-card h2 { font-size:1rem; line-height:1.3; overflow-wrap:anywhere; }
    .public-wishlist .card-section-price { grid-column:2; grid-row:3; text-align:left; min-height:0; }
    .public-wishlist .item-price { font-size:1rem; }
    .public-wishlist .card-section-actions { grid-column:1/-1; grid-row:4; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.4rem; margin-top:0.25rem; padding-top:0.5rem; }
    .public-wishlist .card-section-actions .btn { display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:0; min-height:44px; padding:0.35rem; font-size:0.8rem; line-height:1.2; text-align:center; }
    .public-wishlist .card-section-actions:has(> .btn:nth-child(4)) { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .public-wishlist .item-card:not(:has(.item-image)) :is(.card-section-categories,.card-section-title,.card-section-price) { grid-column:1/-1; }
    .public-wishlist footer { margin-top:1.5rem; }
}