/* Yu tablet layout. EVERY rule is scoped to html[data-device=tablet] (set by js/device.js), so the phone UI is untouched by construction.
   Left glass sidebar (rail on narrow/portrait), wider content with multi-column grids, master-detail on 記帳, side-sheet / centered popovers instead of bottom sheets, 44px+ touch targets. */
html[data-device=tablet]{--sb:96px;--mw:780px;--tpad:28px}
@media(min-width:900px){html[data-device=tablet]{--sb:252px;--mw:1180px}}
@media(min-width:1500px){html[data-device=tablet]{--mw:1320px}}
html[data-device=tablet] body{padding-left:calc(var(--sb) + env(safe-area-inset-left));padding-bottom:56px}

/* ---------- sidebar (replaces the bottom tab bar) ---------- */
html[data-device=tablet] .tabs{left:max(10px,env(safe-area-inset-left));right:auto;top:calc(10px + env(safe-area-inset-top));bottom:calc(10px + env(safe-area-inset-bottom));width:calc(var(--sb) - 20px);max-width:none;margin:0;
  flex-direction:column;align-items:stretch;gap:6px;padding:14px 10px;border-radius:34px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
html[data-device=tablet] .tabs::-webkit-scrollbar{display:none}
html[data-device=tablet] .tabs .sb-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 16px;margin-bottom:6px;border-bottom:.5px solid var(--line);flex:none;pointer-events:none}
html[data-device=tablet] .tabs .sb-brand .logo{width:46px;height:46px;border-radius:15px;flex:none}
html[data-device=tablet] .tabs .sb-brand h1{margin:0;font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
html[data-device=tablet] .tabs .sb-brand .sub-t{display:block;font-size:12px;color:var(--mut);white-space:nowrap}
html[data-device=tablet] .tabs a{flex:none;display:flex;align-items:center;gap:14px;text-align:left;min-height:54px;padding:0 16px;border-radius:20px;font-size:17px;letter-spacing:-.01em}
html[data-device=tablet] .tabs a i{display:inline-flex;align-items:center;justify-content:center;width:30px;font-size:23px;line-height:1}
html[data-device=tablet] .tabs a:not(.on):hover{background:color-mix(in srgb,var(--solid) 9%,transparent)}
html[data-device=tablet] .tabs a.on{box-shadow:0 5px 14px rgba(179,84,15,.28),inset 0 1px 0 rgba(255,255,255,.25)}
@media(max-width:899.98px){ /* rail: icon over label */
  html[data-device=tablet] .tabs{padding:12px 8px;gap:4px}
  html[data-device=tablet] .tabs .sb-brand{justify-content:center;padding:4px 0 14px}
  html[data-device=tablet] .tabs .sb-brand>div{display:none}
  html[data-device=tablet] .tabs a{flex-direction:column;justify-content:center;gap:2px;min-height:64px;padding:6px 0;border-radius:20px;font-size:12px;text-align:center}
  html[data-device=tablet] .tabs a i{font-size:24px;width:auto}
}
/* header: brand lives in the sidebar, only status + theme remain */
html[data-device=tablet] .top{justify-content:flex-end;padding:calc(12px + env(safe-area-inset-top)) var(--tpad) 6px;background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
html[data-device=tablet] .top>.brand{display:none}
html[data-device=tablet] .top-right{pointer-events:auto}
html[data-device=tablet] .icon-btn{min-width:48px;min-height:48px}
html[data-device=tablet] .sync{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;font-size:13px}

/* ---------- content ---------- */
html[data-device=tablet] main{max-width:var(--mw);padding:8px var(--tpad) 24px}
html[data-device=tablet] #app h2{font-size:clamp(34px,4.6vw,48px)}
html[data-device=tablet] .chart-box{height:300px}
html[data-device=tablet] .grid{grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px}
html[data-device=tablet] .card{padding:24px 26px}
html[data-device=tablet] .kpi{padding:20px 22px}
html[data-device=tablet] .fab{right:calc(var(--tpad) + env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));width:64px;height:64px}
html[data-device=tablet] .toast,html[data-device=tablet] .undo{left:calc(50% + var(--sb) / 2);bottom:calc(28px + env(safe-area-inset-bottom));max-width:min(560px,calc(100vw - var(--sb) - 48px))}
html[data-device=tablet] .undo{left:calc(50% + var(--sb) / 2)}

/* ---------- touch targets >= 44px ---------- */
html[data-device=tablet] .btn{min-height:52px}html[data-device=tablet] .btn.sm{min-height:48px}
html[data-device=tablet] .entry button{min-width:48px;min-height:48px}
html[data-device=tablet] .seg.mini button,html[data-device=tablet] .emopick button{min-height:44px;min-width:44px}
html[data-device=tablet] .seg.mini button{padding:0 16px}
html[data-device=tablet] .key{min-height:66px;font-size:26px}
html[data-device=tablet] .cat{min-height:80px}html[data-device=tablet] .cat span{font-size:12.5px}
html[data-device=tablet] input,html[data-device=tablet] select{min-height:52px}
html[data-device=tablet] input[type=checkbox],html[data-device=tablet] input[type=radio]{min-height:0}
html[data-device=tablet] .swedit,html[data-device=tablet] .swdel{min-height:48px}

/* ---------- multi-column pages (landscape / wide) ---------- */
@media(min-width:900px){
  html[data-device=tablet] #app{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;align-items:start}
  html[data-device=tablet] #app>*{grid-column:1/-1;min-width:0}
  html[data-device=tablet] body:not([data-ready=record]) #app>.card:not(:has(.scroll)){grid-column:auto}
  html[data-device=tablet] #app>.card{margin-bottom:22px}
  /* overview: KPI strip is 4 across */
  html[data-device=tablet] body[data-ready=overview] .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* month: income | expense */
  html[data-device=tablet] body[data-ready=month] .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 記帳 master-detail: month list (master) left, quick-entry (detail) right */
  html[data-device=tablet] body[data-ready=record] #app{grid-template-columns:minmax(0,1fr) minmax(380px,430px);column-gap:26px}
  html[data-device=tablet] body[data-ready=record] #app>*{grid-column:1}
  html[data-device=tablet] body[data-ready=record] #app>.qe{grid-column:2;grid-row:1/span 6;position:sticky;top:76px;align-self:start;max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;margin-bottom:0;scrollbar-width:thin}
  html[data-device=tablet] body[data-ready=record] .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 記帳 in portrait/narrow: form wider, category grid + keypad use the width */
@media(max-width:899.98px){
  html[data-device=tablet] .cats{grid-template-columns:repeat(6,1fr)}
  html[data-device=tablet] .keypad{max-width:460px;margin-left:auto;margin-right:auto}
  html[data-device=tablet] .btn.save{max-width:460px;display:flex;margin-left:auto;margin-right:auto}
}
@media(min-width:900px){html[data-device=tablet] body[data-ready=record] .cats{grid-template-columns:repeat(4,1fr)}}

/* ---------- sheets: side sheet in landscape, centered popover in portrait; action sheets become centered alerts ---------- */
html[data-device=tablet] dialog:not(.hig-wheel):not(.hig-as){position:fixed;margin:0;border-radius:32px;border:.5px solid rgba(255,255,255,.6);overflow:auto;overscroll-behavior:contain;padding:26px 28px;
  box-shadow:0 20px 60px rgba(60,30,5,.32),inset 0 1px 0 rgba(255,255,255,.5)}
html[data-device=tablet] dialog .grab{display:none}
@media(min-width:900px){
  html[data-device=tablet] dialog:not(.hig-wheel):not(.hig-as){inset:12px 12px 12px auto;width:min(480px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:none;animation:tabSide .42s cubic-bezier(.2,.8,.2,1)}
}
@media(max-width:899.98px){
  html[data-device=tablet] dialog:not(.hig-wheel):not(.hig-as){inset:0;margin:auto;width:min(540px,calc(100vw - 48px));height:fit-content;max-height:calc(100dvh - 64px);animation:tabPop .36s cubic-bezier(.2,.9,.25,1.05)}
}
@keyframes tabSide{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
@keyframes tabPop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
html[data-device=tablet] dialog::backdrop{background:rgba(40,20,5,.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html[data-device=tablet] dialog.hig-as,html[data-device=tablet] dialog.hig-wheel{inset:0;margin:auto;height:fit-content;width:min(400px,calc(100vw - 48px));max-width:none;border-radius:30px;transform:scale(.94);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.25,1.05),opacity .25s}
html[data-device=tablet] dialog.hig-wheel{width:min(440px,calc(100vw - 48px));padding:20px}
html[data-device=tablet] dialog.hig-as.on,html[data-device=tablet] dialog.hig-wheel.on{transform:none;opacity:1}
html[data-device=tablet] dialog.hig-as.out{transform:scale(.96);opacity:0;transition:transform .2s ease-in,opacity .2s}
html[data-device=tablet] .cmlist{max-height:46vh}

/* ---------- keyboard focus ring (keyboard / pointer users on tablets) ---------- */
html[data-device=tablet] a:focus-visible,html[data-device=tablet] button:focus-visible{outline:3px solid color-mix(in srgb,var(--solid) 60%,transparent);outline-offset:2px}
html[data-device=tablet] .banner{width:100%;max-height:320px}
html[data-device=tablet] .banner>img:first-child{object-position:50% 14%}
@media(min-width:900px){html[data-device=tablet] .banner{max-height:270px}}
@media(max-width:899.98px){
  html[data-device=tablet] body[data-ready=overview] .grid,html[data-device=tablet] body[data-ready=month] .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-device=tablet] body[data-ready=record] .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 記帳 detail pane: save button stays reachable while the pane scrolls */
html[data-device=tablet] .qe .btn.save{position:sticky;bottom:-2px;z-index:2;box-shadow:0 -14px 18px -6px color-mix(in srgb,var(--bg) 85%,transparent),0 6px 16px rgba(179,84,15,.28)}
@media(min-width:900px){
  html[data-device=tablet] body[data-ready=record] .qe{padding:14px 20px 16px}
  html[data-device=tablet] body[data-ready=record] .qe .seg span{min-height:48px}
  html[data-device=tablet] body[data-ready=record] .qe .amtbox{padding:6px 4px 0}html[data-device=tablet] body[data-ready=record] .qe .amtbox b{font-size:44px}
  html[data-device=tablet] body[data-ready=record] .cats{gap:6px;margin:6px 0}
  html[data-device=tablet] body[data-ready=record] .cat{min-height:60px;padding:6px 2px}
  html[data-device=tablet] body[data-ready=record] .qe label{margin:8px 0 4px}
  html[data-device=tablet] body[data-ready=record] .qe input,html[data-device=tablet] body[data-ready=record] .qe select{min-height:48px}
  html[data-device=tablet] body[data-ready=record] .keypad{gap:6px;margin:10px 0 10px}
  html[data-device=tablet] body[data-ready=record] .key{min-height:52px;font-size:24px}
  html[data-device=tablet] body[data-ready=record] .qe .btn.save{min-height:52px}
}

/* collapsed large-title bar (hig.js) on tablet */
html[data-device=tablet] .top.hig-compact{background:var(--hdr);border-bottom:.5px solid var(--line);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%)}
html[data-device=tablet] .hig-nt{left:var(--tpad);font-size:1.1875rem}
/* card-heavy pages: balanced two-column flow (no row gaps) in landscape; tables / KPI strips / notes span both columns */
@media(min-width:900px){
  html[data-device=tablet] body:is([data-ready=analysis],[data-ready=invest],[data-ready=data]) #app{display:block;column-count:2;column-gap:22px}
  html[data-device=tablet] body:is([data-ready=analysis],[data-ready=invest],[data-ready=data]) #app>*{break-inside:avoid;-webkit-column-break-inside:avoid;column-span:none}
  html[data-device=tablet] body:is([data-ready=analysis],[data-ready=invest],[data-ready=data]) #app>:is(h2,.herow,.grid,.note,p,.warn,.cf-row,.card:has(.scroll)){column-span:all}
}
/* short viewport (on-screen keyboard open in landscape / small split): compact sidebar so all 7 destinations stay reachable */
@media(max-height:600px){
  html[data-device=tablet] .tabs{padding:8px;gap:2px}
  html[data-device=tablet] .tabs .sb-brand{display:none}
  html[data-device=tablet] .tabs a{min-height:44px;font-size:15px}
}
@media(max-height:600px) and (max-width:899.98px){html[data-device=tablet] .tabs a{min-height:46px;font-size:11px;padding:3px 0}html[data-device=tablet] .tabs a i{font-size:20px}}