/* Shared layout: phone, installed PWA/TWA, tablet and desktop. */
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--shadow:0 10px 35px #35132108}
html{-webkit-text-size-adjust:100%;scroll-padding-top:20px}body{min-width:320px}main,header{min-width:0}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,a{transition:background-color .15s,color .15s,box-shadow .15s}button:active{transform:translateY(1px)}
button,summary{min-height:44px}summary{display:flex;align-items:center;gap:8px}summary::before{content:'›';font-size:22px}details[open]>summary::before{transform:rotate(90deg)}
.grid>*{min-width:0}input,select,textarea{max-width:100%;min-height:46px}input[type=file]{font-size:14px;padding:10px}
.panel{box-shadow:var(--shadow)}.panel h2{line-height:1.35}.actions>button{min-height:44px}.report-card{padding:20px 0}.badge{font-weight:600;line-height:1.4}
#welcome h1{max-width:820px;line-height:1.15;letter-spacing:-.8px}#welcome>p:last-child{max-width:740px}
#main-nav{gap:14px}#main-nav .nav-card{box-shadow:var(--shadow);min-height:116px}.nav-card strong{font-weight:650}.nav-card small{font-size:12px}
#main-nav .nav-card:hover{border-color:var(--focus)}.resource-links a{border:1px solid var(--border);overflow-wrap:anywhere}
.app-dock{padding-bottom:max(10px,env(safe-area-inset-bottom));backdrop-filter:blur(16px)}
#notice:not(:empty){position:sticky;top:8px;z-index:25;border:1px solid var(--border);box-shadow:var(--shadow)}
#network-state{font-size:12px;color:var(--notice-text);background:var(--notice-bg);padding:10px 16px;margin:0;text-align:center}
#view-progress{position:fixed;z-index:60;inset:0 0 auto;height:3px;pointer-events:none;overflow:hidden}
#view-progress::after{content:'';display:block;background:var(--red);width:35%;height:100%;animation:view-progress 1s ease-in-out infinite}
@keyframes view-progress{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
#load-label{position:fixed;z-index:24;right:16px;bottom:calc(90px + env(safe-area-inset-bottom));background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:12px;padding:10px 16px;font-size:12px;box-shadow:var(--shadow)}
#desktop-nav{display:none}#view-title{outline:none}#pair-code{color:var(--accent-text);font-variant-numeric:tabular-nums}#device-login .actions a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:48px;border-radius:12px;padding:12px 18px}
#report-nav{scrollbar-width:thin}#report-nav button{min-height:44px}.request-content{overscroll-behavior:contain}.portfolio-table button{min-height:44px}
body[data-keyboard=true] .app-dock{display:none}body[data-keyboard=true] #load-label{bottom:12px}
@media(max-width:599px){
 main{padding:20px 16px 26px}.panel{padding:20px 16px;border-radius:18px}header{padding:18px 80px 16px 18px;min-height:132px}
 #header-profile{right:18px;top:22px}.brand{font-size:23px}.brand small{font-size:8px;max-width:210px}.theme-control{display:flex;flex-wrap:wrap;font-size:11px}.theme-control select{font-size:12px;padding:8px;max-width:150px;margin:0}
 #identity{line-height:1.5;max-width:250px}#welcome h1{font-size:28px}.grid{grid-template-columns:1fr}.material .grid{grid-template-columns:1fr 1fr}
 #main-nav .nav-card{padding:16px;min-height:138px;grid-template-columns:1fr;gap:8px}.nav-card svg{grid-row:auto;width:36px;height:36px}.nav-card strong{font-size:14px}.nav-card small{font-size:11px}
 .home-metrics{gap:10px}.metric{padding:14px;align-items:flex-start;flex-direction:column;gap:6px}.metric strong{font-size:30px}.metric span{font-size:12px}
 #report-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}#report-nav button{white-space:normal}
 .actions{gap:8px}.actions button{flex:1 1 140px}#device-panel{padding:16px 0;border:0;box-shadow:none}#device-panel>button{display:block;width:100%;margin:10px 0}
 .profile-card{gap:14px}.avatar-large{width:72px;height:72px}#profile-id{overflow-wrap:anywhere}
}
@media(min-width:600px) and (max-width:1039px){main{max-width:920px;padding:28px}.panel{padding:28px}header{padding-left:max(28px,calc((100vw - 864px)/2));padding-right:110px}#header-profile{right:max(28px,calc((100vw - 864px)/2))}#main-nav{grid-template-columns:repeat(3,minmax(0,1fr))}#main-nav .nav-card{grid-template-columns:1fr;padding:20px}.nav-card svg{grid-row:auto}}
@media(min-width:1040px){
 body[data-authenticated=true]{padding-bottom:0}body[data-authenticated=true] main{width:calc(100% - 302px);max-width:1220px;margin:0 auto 0 278px;padding:32px}
 header{padding:24px 108px 22px 32px;min-height:157px}#header-profile{right:36px;top:28px}#identity{margin-top:10px}.theme-control{position:absolute;right:108px;top:28px;margin:0}
 #desktop-nav{position:fixed;display:flex;flex-direction:column;gap:5px;top:181px;bottom:24px;left:24px;width:242px;border:1px solid var(--border);border-radius:20px;padding:14px;background:var(--surface);overflow:auto;scrollbar-width:thin;box-shadow:var(--shadow)}
 #desktop-nav>p{padding:4px 12px;color:var(--muted);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;margin:2px 0 12px}
 #desktop-nav button{display:flex;align-items:center;gap:12px;min-height:46px;border-radius:10px;text-align:left;background:transparent;color:var(--muted);font-size:13px;line-height:1.4;padding:10px 12px;flex-shrink:0;white-space:normal}
 #desktop-nav svg{width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#desktop-nav button:hover{background:var(--soft);color:var(--text)}#desktop-nav button.active{background:var(--tint);color:var(--accent-text);font-weight:700}
 #app-dock{display:none!important}#load-label{bottom:22px}#welcome h1{font-size:36px}#main-nav{grid-template-columns:repeat(3,minmax(0,1fr))}#main-nav .nav-card{grid-template-columns:1fr;padding:22px;min-height:160px}.nav-card svg{grid-row:auto}.nav-card strong{font-size:16px}.nav-card small{font-size:12px}
 .home-metrics{max-width:760px}.metric{padding:22px}.metric span{font-size:13px}.panel{padding:30px}.portfolio-table-scroll{max-height:65vh}.portfolio-table{font-size:14px}.portfolio-table th:first-child{min-width:240px}
 #report-nav{width:max-content;max-width:100%}#report-nav button{padding-left:22px;padding-right:22px}.resource-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.resource-links li{margin:0}.resource-links a{height:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.backpack-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:18px 0}.backpack-card{border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--surface);min-width:0}.backpack-card h3{font-size:16px;line-height:1.45;margin-top:0}.backpack-amount{font-size:25px;color:var(--accent-text);display:block;margin-bottom:16px}.backpack-card .actions button{font-size:12px;padding:10px}.backpack-no-parts{display:flex;align-items:center;gap:12px;margin:16px 0}.backpack-no-parts input{width:22px;min-height:22px;flex-shrink:0}#backpack-operation,#backpack-admin-operation{margin:24px 0}@media(max-width:599px){.backpack-cards{grid-template-columns:1fr}}

/* Separate the inventory workflow into readable cards on phones and desktops. */
#portfolio.backpack-page,#portfolio-journal.backpack-page{padding:0;border:0;background:transparent;box-shadow:none}
.backpack-page>.backpack-section{margin:0 0 24px;padding:24px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);min-width:0;scroll-margin-top:20px}
.backpack-page>.backpack-section:last-child{margin-bottom:0}
.backpack-page>.backpack-section>h2:first-child{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:19px;line-height:1.4}
.backpack-section>h2:first-child::before{content:"";width:4px;height:22px;border-radius:3px;background:var(--red);flex-shrink:0}
.backpack-section>.hint{margin:0 0 18px}
.backpack-section .backpack-cards{margin-bottom:0}
.backpack-section .backpack-card{background:var(--input)}
.backpack-section .backpack-card .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.backpack-section .backpack-card .actions>button:last-child:nth-child(odd){grid-column:1/-1}
.backpack-empty{margin:0;padding:16px;background:var(--soft);color:var(--muted);border-radius:12px;font-size:13px;line-height:1.5}
.backpack-section>.report-card:last-child{padding-bottom:0;border-bottom:0}
.backpack-section form>.grid{padding-bottom:8px}
.backpack-page>.backpack-operation{border-top:3px solid var(--red)}
@media(max-width:599px){
 .backpack-page>.backpack-section{padding:20px 16px;margin-bottom:20px;border-radius:18px}
 .backpack-page>.backpack-section>h2:first-child{font-size:18px}
 .backpack-section .backpack-card{padding:16px}
}