/* ===== Phone layout (iPhone friendly) — loaded only on screens <= 820px ===== */
:root{--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);--rail:54px}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body{flex-direction:row;padding:0;min-height:100dvh;overflow-x:hidden;overscroll-behavior-y:none}
a,button,label,summary{touch-action:manipulation}

/* --- side rail --- */
.side{position:fixed;top:0;bottom:0;left:0;right:auto;width:calc(var(--rail) + var(--sal));height:100dvh;flex-direction:column;
  padding:calc(10px + var(--sat)) 6px calc(10px + var(--sab)) calc(6px + var(--sal));border-right:1px solid var(--line);border-top:0;overflow:hidden;z-index:20;
  background:linear-gradient(180deg,#120e26,#0e0a1e)}
.side .brand{display:flex;justify-content:center;padding:0 0 12px;font-size:0}
.side .logo{width:38px;height:38px;border-radius:12px;font-size:20px}
.side nav{flex-direction:column;justify-content:flex-start;gap:6px;overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:none;padding:2px 0}
.side nav::-webkit-scrollbar{display:none}
.side a{justify-content:center;align-items:center;width:42px;height:44px;padding:0;margin:0 auto;border-radius:14px;flex:0 0 auto}
.side a span{display:none}.side a i{font-size:23px}
.side a.on{background:linear-gradient(135deg,#8b6bff,#6d4cf5);box-shadow:0 3px 10px #6d4cf555}
.side a:active{transform:scale(.94)}
.side .out{margin-top:6px;display:flex}

/* --- page --- */
main{margin-left:calc(var(--rail) + var(--sal));padding:calc(10px + var(--sat)) calc(10px + var(--sar)) calc(28px + var(--sab)) 10px;min-width:0;width:auto;flex:1}
.topbar{display:none}
h1{font-size:24px;margin:2px 0 6px;letter-spacing:-.01em}
p.muted{font-size:14px;margin:0 0 12px}
.card{padding:14px;border-radius:18px;margin-bottom:12px}
.sec-head{margin-bottom:8px}.sec-head h2{font-size:17px}
.flash{border-radius:14px;padding:12px 14px;font-size:14px}

/* --- controls: 44px+ touch targets, 16px text so iOS never zooms --- */
input,select,textarea{font-size:16px;min-height:48px;border-radius:14px;padding:12px 14px;-webkit-appearance:none;appearance:none;max-width:100%}
textarea{min-height:110px}
input[type=date],input[type=datetime-local],input[type=time]{min-width:0;width:100%;display:block;text-align:left}
input[type=checkbox],input[type=radio]{-webkit-appearance:auto;appearance:auto;width:24px;height:24px;min-height:0;padding:0;margin:0;accent-color:#7c5cff;flex-shrink:0;border-radius:6px}
.seg input[type=radio]{display:none}
input[type=file]{padding:10px;min-height:0;font-size:14px}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.btn{min-height:48px;padding:11px 16px;border-radius:14px;font-size:15px}
.btn.sm{min-height:42px;min-width:42px;padding:8px 12px;border-radius:12px}
.btn:active{transform:scale(.97);filter:brightness(1.1)}
.btn.primary{background:linear-gradient(135deg,#8b6bff,#6d4cf5);border-color:transparent;box-shadow:0 8px 20px #6d4cf544}
.link{min-height:40px;padding:8px 10px}
label.check{min-height:46px;padding:6px 2px;gap:12px;font-size:15px}
.actions{gap:8px}.actions .btn,.actions form{flex:1 1 calc(50% - 8px)}.actions form .btn{width:100%}
.inline-form{flex-direction:column}
.seg{display:flex;align-self:stretch;width:100%}.seg label{flex:1}.seg span{display:block;text-align:center;padding:11px 8px;font-size:14px}
.filters{overflow-x:auto;scrollbar-width:none;margin:10px -14px;padding:0 14px}.filters::-webkit-scrollbar{display:none}
.filters button{flex:0 0 auto;min-height:40px;padding:8px 16px;border-radius:999px}
.pill{font-size:12px}
.row{flex-wrap:wrap;gap:10px;padding:12px 0}
.row .grow{flex:1 1 55%;min-width:0}
.row.sub{padding-left:8px}
.pathrow{flex-direction:column}
code{font-size:12px}

/* --- Home --- */
.home{grid-template-columns:1fr;gap:14px}
.home-side{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:1fr;gap:12px}
.hero{padding:18px;border-radius:22px;flex-direction:column;gap:12px;margin-bottom:14px}
.hero h1{font-size:25px}.hero p{font-size:14px}
.hero-r{width:100%;justify-content:space-between;gap:10px}
.hero-r .btn{min-height:46px}
.stats{grid-template-columns:repeat(2,1fr);gap:10px}
.stat{padding:12px;gap:10px;border-radius:18px}.stat>i{padding:8px;font-size:22px;border-radius:12px}.stat b{font-size:24px}
.ws-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:10px -14px 14px 0;padding:2px 14px 6px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ws-grid::-webkit-scrollbar{display:none}
.ws-grid>.ws{flex:0 0 82%;scroll-snap-align:start;margin:0;min-height:0}
.ws.new{min-height:200px}
.two,.two-in{grid-template-columns:1fr}
.week{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin-right:-14px;padding-right:14px;scrollbar-width:none}
.week::-webkit-scrollbar{display:none}
.wday{flex:0 0 38%;scroll-snap-align:start;min-height:120px}
.media-grid.compact{display:flex;overflow-x:auto;gap:8px;margin-right:-14px;padding-right:14px;scrollbar-width:none;scroll-snap-type:x proximity}
.media-grid.compact::-webkit-scrollbar{display:none}
.media-grid.compact .mtile{flex:0 0 112px}
.thumb{width:48px;height:64px}
.acc{padding:6px 0}.hrow{padding:5px 0}

/* --- Media / compose --- */
.media-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.mtile{border-radius:14px}
#pick.media-grid.compact{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0}
#pick .mtile{flex:none}
#composeForm>.btn.primary{position:sticky;bottom:calc(10px + var(--sab));z-index:4;width:100%;min-height:52px;font-size:16px}
#ruleForm>.btn.primary{position:sticky;bottom:calc(10px + var(--sab));z-index:4;min-height:52px;font-size:16px}

/* --- Calendar --- */
.cal-head{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center}
.cal-head h2{text-align:center}.cal-head #today{grid-column:1/-1}
.cal{gap:4px}
.cal .day{min-height:58px;padding:5px 3px;border-radius:12px;align-items:center}
.cal .day .dn{font-size:13px}
.cpost{font-size:0;padding:0;height:6px;width:6px;border-left-width:0;border-radius:50%;background:var(--accent2)}
.cpost.published{background:var(--good)}.cpost.failed{background:var(--bad)}
.cal .day{flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:3px}.cal .day .dn{flex:0 0 100%;text-align:center}
.cal .dow{font-size:11px}
#dayList .row{align-items:flex-start}

/* --- Rules / workspaces / settings --- */
.nums{flex-wrap:wrap;gap:14px 24px}
.chip-row{gap:10px}
.tchip{padding:7px 8px 7px 14px;font-size:14px}.tchip button{width:24px;height:24px}
.ws-block .row{align-items:center}
.ws-block .actions .btn{flex:1 1 100%}

/* --- bottom sheets for popups --- */
.modal{align-items:flex-end;padding:0;background:rgba(5,3,15,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal .box{max-width:none;border-radius:24px 24px 0 0;max-height:90dvh;padding:18px 16px calc(18px + var(--sab));border-bottom:0;animation:sheet .22s ease-out}
.modal .box::before{content:"";display:block;width:42px;height:5px;border-radius:3px;background:var(--line);margin:-6px auto 8px}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.modal .list div{padding:14px 12px}

/* --- sign-in page --- */
.authpage{padding:calc(20px + var(--sat)) 16px calc(20px + var(--sab));min-height:100dvh}
.authbox{padding:22px;border-radius:24px}

/* touch devices: no sticky hover states */
@media (hover:none){.btn:hover,.qa:hover,.side a:hover{border-color:var(--line);background:inherit}.btn.primary:hover{background:linear-gradient(135deg,#8b6bff,#6d4cf5)}.side a.on:hover{background:linear-gradient(135deg,#8b6bff,#6d4cf5)}}
@media (max-width:360px){.ws-grid>.ws{flex-basis:90%}.stat b{font-size:21px}}
.hero-r .btn,.btn{white-space:nowrap}

.media-grid .empty,.media-grid>p{grid-column:1/-1}

/* ===== v2: compact one-page Home, cover under status bar ===== */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:var(--sat);background:var(--bg);z-index:30}
.card{padding:12px;border-radius:16px;margin-bottom:10px}
.hero,.home-side .accts,.home-side .actcard,.autof,.mediasec,.week{display:none}
.m-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px}
.m-top .muted{font-size:13px;line-height:1.25;max-width:45%}
.m-top-r{display:flex;align-items:center;gap:12px}
.m-top .btn{min-height:42px;padding:8px 14px;font-size:14px}
.home{gap:0}.home-main{min-width:0}
.stats{grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 10px}
.stat{flex-direction:column;align-items:flex-start;gap:0;padding:10px 10px 8px;border-radius:14px;margin:0}
.stat>i{display:none}.stat>div{display:flex;flex-direction:column-reverse}
.stat span{font-size:11px}.stat b{font-size:22px;line-height:1.1}
.sec-head h2{font-size:16px}
.ws-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;margin:6px -10px 10px 0;padding:0 10px 4px 0;scrollbar-width:none}
.ws-grid>.ws{flex:0 0 78%;min-height:0;padding:12px;gap:8px;border-radius:16px;scroll-snap-align:start}
.ws-grid>.ws.new{flex:0 0 58%;min-height:0;gap:6px;justify-content:center}
.ws .ws-ico{width:34px;height:34px;font-size:18px}.ws-name{font-size:16px}
.ws .nums{gap:18px}.ws .nums b{font-size:18px}
.ws-open{min-height:42px !important;padding:8px 12px}
.ws.new .plus{width:32px;height:32px;font-size:18px}
.ws.new input{min-height:42px}
.two{display:block}
.upcoming{margin-bottom:10px}
.upcoming .row{padding:8px 0;flex-wrap:nowrap;gap:8px}
.upcoming .row:nth-child(n+5){display:none}
.upcoming .thumb{width:38px;height:50px}
.upcoming .row .grow{flex:1 1 auto;min-width:0}
.upcoming .row .grow>div:first-child{font-size:14px}
.upcoming .row .small{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upcoming .btn.sm{min-height:38px;min-width:38px;padding:6px 10px}
.wstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;color:var(--text)}
.wstrip .sd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.wstrip .sd.today{border-color:var(--accent);background:#7c5cff22}
.wstrip span{font-size:10px;color:var(--muted)}.wstrip b{font-size:15px}
.wstrip i{font-style:normal;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:transparent}
.wstrip i.has{background:var(--accent);color:#fff;font-weight:700}
.home-side{display:block}
.home-side #health{padding:10px 12px}
.home-side #health h2{font-size:15px;margin-bottom:2px}
#healthList{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.hrow{padding:3px 0;align-items:center}.hrow .dot{margin-top:0}.hrow b{font-size:12.5px;font-weight:600}
.hrow.ok .muted,.hrow.ok .small{display:none}
.hrow.bad .grow{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline}
.hrow.bad .muted{font-size:12px}

/* v3: tighter so Home is close to one screen */
.wstrip,.wstrip:hover{text-decoration:none}
.ws .chips{display:none}
.ws-grid>.ws{padding:11px;gap:6px}
.ws .nums{gap:16px}.ws .nums span{font-size:11px}
.ws-open{min-height:38px !important;font-size:14px}
.stat{padding:8px 10px 6px}
.upcoming{padding:10px 12px}.upcoming .sec-head{margin-bottom:2px}
.upcoming .row{padding:6px 0}.upcoming .thumb{width:34px;height:44px;border-radius:7px}
.upcoming .btn.sm{min-height:36px;min-width:36px}
.hrow.warn .muted,.hrow.warn .small{display:none}
.hrow.bad{grid-column:1/-1}
.home-side #health{margin-bottom:0}
.card.upcoming+.card{margin-top:0}
.ws-grid{align-items:flex-start}.ws-open{margin-top:2px}
.ws-grid>.ws.new{display:none}