/* mobile.css: loads LAST (after polish.css). Phone-first layer for m.html and login.html.
   Bottom tab bar (the desktop top nav is relocated, not duplicated), safe-area insets, 44px touch targets, sheets. */
:root{--tap:44px;--tabh:60px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-size:16px;line-height:1.5}
body.booting #view,body.booting .tabbar{visibility:hidden}

/* ---------- page frame ---------- */
.wrap{max-width:760px;padding:calc(var(--sat) + 12px) max(16px,var(--sar)) calc(var(--tabh) + var(--sab) + 28px) max(16px,var(--sal))}
header.top{flex-wrap:nowrap;gap:10px;margin-bottom:14px}
.brand{flex:none;font-size:1.05rem}
header.top .meta{margin-left:auto;min-width:0;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}
.vh{margin:4px 0 16px}
.vh h1{font-size:clamp(1.75rem,8vw,2.4rem)}
.vh p{font-size:1rem}
.card{padding:16px}
.grid2,.col{gap:12px}
h2.h{font-size:.78rem}
.meta,.due,.rowi .s{font-size:.82rem}
.toast{bottom:calc(var(--tabh) + var(--sab) + 14px);z-index:60}

/* ---------- bottom tab bar: core.js fills #tabs, CSS turns it into the bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;max-width:760px;margin:0 auto;padding:6px max(8px,var(--sar)) calc(6px + var(--sab)) max(8px,var(--sal));border-top:1px solid rgba(255,255,255,.12);border-radius:20px 20px 0 0;background:rgba(8,13,30,.88);box-shadow:0 -14px 40px -16px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
#tabs{flex:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
#tabs a[href="#projects"],#tabs a[href="#content"]{display:none}
#tabs a,.tabbar .more{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px;border:0;border-radius:14px;background:none;box-shadow:none;color:var(--dim);font:500 .7rem/1.1 var(--sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .2s,background .2s}
#tabs a::before,.tabbar .more::before,.sheet-list a::before,.sheet-list button::before{content:"";flex:none;width:24px;height:24px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
#tabs a.on,.tabbar .more[aria-expanded=true],.tabbar:has(#tabs a.on[href="#projects"]) .more,.tabbar:has(#tabs a.on[href="#content"]) .more{color:#fff;background:linear-gradient(180deg,rgba(108,134,255,.3),rgba(0,80,240,.16))}
#tabs a.on::after{content:"";position:absolute;top:0;left:32%;right:32%;height:2px;border-radius:2px;background:var(--accent2);box-shadow:0 0 10px var(--accent)}
#tabs a:active,.tabbar .more:active{background:rgba(255,255,255,.08)}
#tabs .tab-badge{position:absolute;top:2px;left:calc(50% + 4px);margin:0;min-width:18px;height:18px;font-size:.68rem;box-shadow:0 0 0 2px #090e1e}
/* icons (stroke shapes used as masks, so they take the text colour) */
#tabs a[href="#approvals"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E")}
#tabs a[href="#today"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2.5 12h2M19.5 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
#tabs a[href="#tasks"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h11M10 12h11M10 18h11M3 6l1.5 1.5L7 5M3 12l1.5 1.5L7 11M3 18l1.5 1.5L7 17'/%3E%3C/svg%3E")}
#tabs a[href="#schedule"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M3 10h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E")}
.tabbar .more{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E")}
.s-projects{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 012-2h4l2 2.5h8a2 2 0 012 2V18a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3C/svg%3E")}
.s-content{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M10 8.5l5 3.5-5 3.5z'/%3E%3C/svg%3E")}
.s-logout{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6a2 2 0 00-2 2v12a2 2 0 002 2h3M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E")}

/* ---------- touch targets: 44px minimum, no hover-only affordances ---------- */
button,.btn,select,input:not([type=checkbox]){min-height:var(--tap)}
input,select,textarea{font-size:16px}
input[type=checkbox]{width:22px;height:22px;min-height:0}
label.f.chk{min-height:var(--tap)}
.tick{width:24px;height:24px;min-height:0;position:relative;margin:0 4px}
.tick::after{content:"";position:absolute;inset:-12px}
.star{min-width:var(--tap);min-height:var(--tap);font-size:1.25rem}
.rowi{min-height:52px;padding:6px 0;gap:2px 8px}
.rowi .t{padding:6px 0}
.seg button,.ct-f,.sc-pill{min-height:var(--tap)}
.seg button{min-width:var(--tap)}
.ct-open,.ct-tile{min-height:0}
.ct-arrow{width:var(--tap);height:var(--tap)}
.ct-del{min-width:var(--tap);min-height:var(--tap);opacity:.8;display:grid;place-items:center}
.ct-open{padding-right:52px}
.pcard{padding:16px}
@media(max-width:360px){.ct-profiles{grid-template-columns:minmax(0,1fr)}}
@media(hover:none){.pcard:hover,.ct-item:hover,button:hover,.btn:hover,.star:hover{transform:none}}

/* ---------- Schedule: the grid scrolls inside the page, sized to the phone ---------- */
.sc-scroll{min-height:360px;max-height:calc(100dvh - var(--tabh) - var(--sab) - var(--sat) - 150px)}

/* ---------- every dialog is a bottom sheet (OS.modal, the More sheet, the password sheet) ---------- */
dialog{margin:auto auto 0;width:100%;max-width:100%;max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0;border-bottom:0;padding:20px max(16px,var(--sar)) calc(18px + var(--sab)) max(16px,var(--sal));overscroll-behavior:contain}
dialog::before{content:"";display:block;width:38px;height:4px;margin:-8px auto 14px;border-radius:2px;background:var(--edge2)}
dialog h3{font-size:1.2rem}
.mrow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.mrow .sp{display:none}
.sheet-sub{margin:-6px 0 14px;color:var(--dim);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-err{margin:0;color:var(--bad);font-size:.9rem}
.sheet-act{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.sheet-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sheet-list a,.sheet-list button{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:0 16px;border-radius:14px;border:1px solid var(--edge);background:var(--glass2);color:var(--text);font:500 1.02rem var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.sheet-list a:active,.sheet-list button:active{background:rgba(108,134,255,.2)}
.sheet-list .danger{color:var(--bad)}
@media(prefers-reduced-motion:no-preference){
  dialog[open]{animation:m-sheet .28s var(--ease)}
  @keyframes m-sheet{from{opacity:0;transform:translateY(36px)}}
}

/* ---------- login ---------- */
body.login-page{display:grid;place-items:center;min-height:100dvh;padding:calc(var(--sat) + 24px) max(20px,var(--sar)) calc(var(--sab) + 24px) max(20px,var(--sal))}
.login{width:100%;max-width:380px;display:grid;justify-items:start;gap:6px}
.login .mark{width:52px;height:52px;border-radius:16px;margin-bottom:10px}
.login .mark svg{width:28px;height:28px}
.login h1{margin:0;font-size:2rem;letter-spacing:-.04em;line-height:1.1}
.login-sub{margin:0 0 18px;color:var(--dim)}
.login form{display:grid;gap:10px;width:100%}
.pwrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.pwrow input{min-height:52px;font-size:18px}
.pwrow button{min-width:72px;min-height:52px}
.login-err{margin:0;color:var(--bad);font-size:.92rem}
.login form>.primary{min-height:52px;margin-top:6px;font-size:1.02rem}
.login-err[hidden]{display:none}