/* iPhone layout, based on the navigation and density of BBQ-brødrene Studio. */
.mobile-bottom-nav,.mobile-more-panel{display:none}
@media(max-width:650px){
  :root{--mobile-bar:#151b1d}
  body{min-height:100dvh;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  aside{display:none}
  main,main.web-workspace{display:block;width:100%;height:auto;min-height:100dvh;margin:0}
  main>header,main.web-workspace>header{height:calc(68px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;border-bottom:1px solid var(--line);background:var(--mobile-bar);gap:12px}
  header>span{max-width:none;font-size:11px;letter-spacing:.1em;line-height:1.4}
  .header-actions{gap:8px}
  .header-actions>button{min-height:40px;padding:8px 10px;font-size:12px}
  #quick-note{white-space:nowrap}
  #content,#content.web-workspace{width:100%;max-width:720px;padding:20px 16px 38px;margin:auto;overflow:visible}
  .hero.brand-hero{aspect-ratio:1.9;margin:0;border-radius:16px}
  .brand-hero+.grid{margin-top:20px}
  .grid,.planner-calendar,.planner-lists,.stats{grid-template-columns:1fr;gap:16px}
  .card,.stat{padding:18px;border-radius:14px}
  .heading{display:block;margin:4px 0 20px}
  .heading h1{font-size:30px;line-height:1.15}
  .heading>button{margin-top:14px}
  .section-heading h2{font-size:19px}
  .note-grid{grid-template-columns:1fr;gap:12px}
  .note-card{min-height:126px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin:16px 0;scrollbar-width:none}
  .tabs button{flex:none;white-space:nowrap;min-height:42px}
  .toolbar{gap:8px}
  .toolbar input{min-width:0}
  .row{min-height:72px}
  .row button.open{min-width:0}
  .row h3{font-size:16px}
  .planner-lists{display:block}
  .list-sidebar{overflow-x:auto;white-space:nowrap;margin-bottom:14px}
  .list-choice{display:inline-flex;max-width:260px}
  .planner-item{min-height:54px}
  .calendar-grid{gap:3px}
  .calendar-day,.calendar-spacer{min-height:43px}
  .calendar-side{display:grid;gap:14px}
  .home-calendar{margin-top:24px}
  .home-calendar .planner-calendar>.card{padding:12px}
  .mobile-bottom-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;align-items:stretch;height:calc(68px + env(safe-area-inset-bottom));padding:4px 6px env(safe-area-inset-bottom);border-top:1px solid var(--line);background:var(--mobile-bar)}
  .mobile-bottom-nav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:3px 0;border:0;border-radius:9px;color:var(--muted)}
  .mobile-bottom-nav button.active{color:var(--accent);background:transparent}
  .mobile-bottom-nav button span{height:25px;font-size:23px;line-height:25px}
  .mobile-bottom-nav button small{font-size:10px;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
  .mobile-more-panel:not([hidden]){position:fixed;z-index:29;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 15px 45px #0007}
  .mobile-more-panel button{min-height:48px;text-align:left}
  dialog,#calendar-dialog{width:calc(100vw - 24px);max-width:600px;max-height:calc(100dvh - 34px);overflow:auto;padding:20px}
  .web-panel.card{border-radius:13px}
  #content.web-workspace .web-toolbar{display:flex;gap:7px;padding:10px}
  .web-address-form{min-width:0}
  .web-viewport{min-height:55dvh}
  .mobile-external{display:grid;gap:16px}
  .mobile-external .web-tabs{display:flex;gap:8px;overflow-x:auto}
  .mobile-open-link{display:inline-block;margin-top:12px;padding:12px 16px;border-radius:9px;text-decoration:none}
}
@media(max-width:380px){.mobile-bottom-nav button small{font-size:9px}.mobile-bottom-nav button span{font-size:21px}}
:root[data-theme="light"]{--mobile-bar:#f1f3f2}