/* ── TOUCH DEVICES ────────────────────────────── */
@media(pointer:coarse){
  .dot{width:20px;height:20px}
  .sec-swatch{width:16px;height:16px}
  .sec-ib{min-height:var(--touch-min);padding:10px 12px}
  .link-ico{padding:10px 8px}
  .opt-a{padding:10px 14px;min-height:var(--touch-min)}
  .opt-s{padding:10px 12px}
  .opt-field-clear{min-height:var(--touch-min);padding:10px 12px}
  .dp-day{padding:6px 2px 8px;min-height:44px}
  .dp-nav{width:var(--touch-min);height:var(--touch-min)}
  .dp-act-btn{min-height:var(--touch-min);padding:10px 14px}
  .cp-sw{width:32px;height:32px}
  .av-btn{padding:8px 14px;min-height:var(--touch-min)}
  .arch-tog{padding:10px 12px;min-height:var(--touch-min)}
  .sec-collapse{padding:8px 10px}
  .add-trig{min-height:48px}
  .drag-ghost{filter:none;box-shadow:0 6px 20px rgba(0,0,0,.5)}
  .due-chip{padding-right:24px}
  .due-chip-x{opacity:.65;pointer-events:auto}
}

/* ── TABLET ≤768px ────────────────────────────── */
@media(max-width:768px){
  :root{--side-w:60px}
  body.side-collapsed{--side-w:60px}
  .side-brand{left:50%;transform:translateX(-50%);font-size:14px;padding:0;margin:0;text-align:center;letter-spacing:-.02em}
  .side-collapse-toggle{display:none}
  .sn span{display:none}
  .sn{justify-content:center;padding:0;width:40px;height:40px;min-height:40px;margin:0 4px}
  .sn-sep{margin:6px 8px}
  .sn-bottom{margin:0 4px}
  .sn.sn-static{margin:6px 4px 0;width:calc(100% - 8px)}
  .top-bar{left:var(--side-w)}
  .page{padding-top:calc(var(--top-h) + var(--safe-t) + 20px)}
  #page-tasks{padding-top:calc(var(--top-h) + var(--safe-t) + 26px)}
  .file-ov,.srch-ov{backdrop-filter:none;-webkit-backdrop-filter:none}
  input,textarea,[contenteditable=true]{font-size:max(16px,inherit)}
  .widgets-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .widget.widget-weather,.widget.widget-time{grid-column:1/-1}
  .widget{grid-column:span 3}
  .logbook-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tasks-top-tools{width:100%;max-width:none;padding:6px 12px 0;justify-content:stretch}
  .tasks-rail{
    display:flex;
    justify-content:space-between;
    gap:12px;
  }
  .tasks-rail-side-left,
  .tasks-rail-side{
    flex:0 0 auto;
    justify-self:auto;
    gap:8px;
  }
  .tasks-rail-filters{
    opacity:1;
    max-width:none;
    pointer-events:auto;
    transform:none;
    margin-left:6px;
  }
  .tasks-rail-main{
    flex:1 1 auto;
    min-width:0;
    justify-self:auto;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:2px;
  }
  .tasks-rail-main::-webkit-scrollbar{display:none}
  .tasks-rail-chip{min-height:40px;padding:0 16px}
  .tasks-rail-chip-filter{padding:0 12px}
}

/* ── PHONE ≤540px — top app bar + drawer ────────── */
@media(max-width:540px){
  :root{--side-w:0px;--m-topbar-h:52px;--bot-nav-h:0px}
  body.side-collapsed{--side-w:0px}

  /* Show mobile top bar */
  .m-topbar{display:flex}
  .m-drawer-scrim{display:block}

  /* Convert side-nav into an off-canvas drawer */
  .side-nav{
    top:0;left:0;bottom:0;right:auto;width:min(86vw,300px);height:100%;
    display:flex;flex-direction:column;
    border-right:1px solid var(--sep);border-top:none;
    padding:0 0 calc(12px + var(--safe-b));
    transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.25,0,.18,1);
    z-index:715;
    background:var(--sidebar-bg);
  }
  body.drawer-open .side-nav{transform:translateX(0)}
  .side-nav.is-collapsed{padding:0 0 calc(12px + var(--safe-b))!important}
  .side-collapse-toggle{display:none!important}
  .side-resize-handle{display:none}
  .side-brand{display:none}
  .sn-search{
    display:flex;margin:8px 12px 8px;padding:10px 14px;
    min-height:var(--touch-min);width:calc(100% - 24px);
    background:var(--sidebar-control-bg);border:1px solid var(--sidebar-control-border);border-radius:10px;
  }
  .sn-search svg,.sn-search span{display:inline-flex;opacity:1;max-width:none}
  .sn-list{display:flex;flex-direction:column;gap:2px;padding:6px 8px;flex:1 1 auto;overflow-y:auto}
  .sn-sep{display:block;margin:8px 12px;height:1px;background:var(--sep)}
  .sn{
    flex-direction:row;gap:14px;padding:12px 16px;width:100%;height:auto;
    font-size:15px;margin:0;border-radius:10px;justify-content:flex-start;align-items:center;
    min-height:var(--touch-min);
  }
  .sn span{display:inline-block;max-width:none;opacity:1;font-size:15px}
  .sn svg{width:20px;height:20px}
  .sn-rain-player{min-height:54px;padding:10px 16px}
  .sn-rain-player .sn-rain-icon{width:20px;min-width:20px;height:20px}
  .sn-rain-player .sn-rain-icon svg,
  .sn-rain-volume-icon svg{width:18px;height:18px;margin-left:0}
  .sn-rain-main{display:flex;flex-direction:column;gap:2px;min-width:0}
  .sn-rain-title{font-size:12px;line-height:1.05}
  .sn-rain-sub{font-size:9.5px;line-height:1.15}
  .sn-rain-volume{flex:0 0 82px;min-width:82px}
  .sn.sn-bottom,.sn.sn-static{margin:0;width:100%;height:auto}
  .m-drawer-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:calc(var(--safe-t) + 12px) 14px 10px;
    border-bottom:1px solid var(--sep);
    flex:0 0 auto;
  }

  /* Push existing top-bar (rails) below new mobile topbar */
  .top-bar{
    left:0;right:0;
    top:calc(var(--m-topbar-h) + var(--safe-t));
    padding-top:0;
    height:auto;
  }
  .top-sub{top:4px}
  .tasks-sub::before{top:-4px}

  .page{
    margin-left:0;
    padding-top:calc(var(--m-topbar-h) + var(--safe-t) + var(--top-h) + 16px);
    padding-bottom:calc(var(--safe-b) + 24px);
  }
  #page-tasks{padding-top:calc(var(--m-topbar-h) + var(--safe-t) + var(--top-h) + 26px)}
  .ur-btn{padding:5px 6px}
  .ur-sep{display:none}
  .tasks-top-tools{width:100%;max-width:none;padding:6px 12px 0;justify-content:stretch}
  .tasks-rail-wrap{padding:0 4px}
  .tasks-rail{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding-bottom:4px;
  }
  .tasks-rail-side-left,
  .tasks-rail-side{
    flex:0 0 auto;
    justify-self:auto;
    gap:8px;
  }
  .tasks-rail-filters{
    opacity:1;
    max-width:none;
    pointer-events:auto;
    transform:none;
    margin-left:6px;
  }
  .tasks-rail-main{
    flex:1 1 auto;
    min-width:0;
    justify-self:auto;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:1px;
  }
  .tasks-rail-main::-webkit-scrollbar{display:none}
  .tasks-rail-chip{min-height:38px;padding:0 14px}
  .tasks-rail-chip-filter{padding:0 10px}
  .tasks-rail-chip-add{width:38px;min-width:38px;padding:0}
  /* Sticky section headers under top bar */
  .sec-head{
    position:sticky;
    top:calc(var(--m-topbar-h) + var(--safe-t) + var(--top-h));
    z-index:5;
    background:linear-gradient(180deg,var(--bg) 70%,rgba(20,20,20,0));
    padding-top:8px;
    margin-bottom:8px;
  }
  /* Tasks rail fade-edges so users discover horizontal scroll */
  .tasks-rail-main{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .main-col,.sidebar-col{padding:0 8px}
  .home-wrap{padding:0 12px}
  .daily-wrap,.av-wrap{padding:0 8px}
  .sidebar-col{position:static;width:100%;padding:0 8px;justify-self:start}
  .cur-wrap{grid-template-columns:1fr}
  .main-col{grid-column:1;padding:0 12px}
  .srch-ov{padding-top:calc(60px + var(--safe-t))}
  .srch-results{max-height:calc(100vh - 200px)}
  .srch-inp{font-size:16px}
  .srch-bar{padding:12px 14px}
  .home-wrap,.logbook-wrap,.trash-wrap{padding:0 12px}
  .widgets-grid{grid-template-columns:1fr}
  .widget,.widget-weather,.widget-time{grid-column:span 1}
  .widget-actions,.widget-stat-grid,.logbook-summary{grid-template-columns:1fr}
  .av-row{grid-template-columns:12px minmax(0,1fr);align-items:start}
  .av-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap;margin-top:2px}
  .logbook-toolbar{align-items:flex-start}
  .logbook-bars{width:100%}
  .settings-page-wrap,.shortcuts-page-wrap{padding:0 12px}
  /* ── BOTTOM SHEET (modal/popover/context menu on phone) ── */
  .tasks-modal{
    padding:0;align-items:flex-end;justify-content:stretch;
    animation:mSheetScrim .22s ease;
  }
  .tasks-modal-card{
    width:100%!important;max-width:100%!important;max-height:85vh;
    border-radius:18px 18px 0 0;padding:18px 18px calc(20px + var(--safe-b));
    position:relative;
    animation:mSheetUp .26s cubic-bezier(.25,0,.18,1);
  }
  .tasks-modal-card::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.16);
  }
  .tasks-modal-head{padding-top:10px}
  .tasks-modal-item{padding:13px 14px;min-height:var(--touch-min)}

  /* Popover → bottom sheet */
  .tasks-pop.open{
    left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;max-width:100%!important;
    background:var(--panel-bg);border-radius:18px 18px 0 0;
    padding:18px 0 calc(8px + var(--safe-b));
    box-shadow:0 -16px 48px rgba(0,0,0,.55);
    border-top:1px solid var(--panel-border);
    animation:mSheetUp .22s cubic-bezier(.25,0,.18,1);
    z-index:var(--m-sheet-z);
  }
  .tasks-pop.open::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.16);
  }
  .tasks-pop-item{padding:13px 18px;min-height:var(--touch-min);font-size:14px}

  /* Context menu → bottom action sheet */
  .ctx-menu.open{
    left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;max-width:100%!important;
    border-radius:18px 18px 0 0;
    padding:18px 0 calc(8px + var(--safe-b))!important;
    box-shadow:0 -16px 48px rgba(0,0,0,.55);
    animation:mSheetUp .22s cubic-bezier(.25,0,.18,1);
    z-index:var(--m-sheet-z);
  }
  .ctx-menu.open::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.16);
  }
  .ctx-item{padding:12px 18px;min-height:var(--touch-min);font-size:14px}

  @keyframes mSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  @keyframes mSheetScrim{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.64)}}
  .mini-player{right:12px;left:12px;bottom:calc(var(--safe-b) + 12px);max-width:none;width:auto}
  .mini-player.is-minimized{left:auto;width:58px;max-width:58px}
  .file-ov-box{padding:24px 18px}
  .file-ov-title{font-size:20px}
  .hourly-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:none}
  .hourly-item{min-width:58px;flex-shrink:0;scroll-snap-align:none}
  .weather-head{padding:11px 14px}
  .weather-place-actions{justify-content:flex-end}
  .weather-location-picker{padding:14px 14px 14px}
  .weather-location-field-wrap{max-width:none;width:100%}
  .weather-location-dropdown{position:static}
  .weather-empty{padding:18px 14px;align-items:flex-start}
  .weather-empty-copy{max-width:none}
  .weather-place-name{font-size:17px}
  .weather-forecast-switch{padding:0 14px 12px;overflow-x:auto}
  .weather-days-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;padding:12px 14px 14px}
  .weather-day-item{min-width:0;flex:initial}
  .time-widget-card{height:auto;min-height:0;padding:13px;gap:13px}
  .time-head{padding:0 38px}
  .time-tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .time-tab{padding:0 6px}
  .time-panel{min-height:292px}
  .time-panel-timer{padding-bottom:56px}
  .time-face{width:min(100%,236px)}
  .time-display{font-size:34px}
  .time-settings-panel{top:53px;right:13px;width:calc(100% - 26px)}
  .time-display-flat{font-size:36px}
  .time-counter-value{font-size:56px}
  .weather-main{gap:12px;padding:18px 14px}
  .weather-temp{font-size:34px}
  /* ── CALENDAR MOBILE ─────────────────────────── */
  .cal-week{
    grid-template-columns:none;
    display:flex;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding:0 4px;
    scrollbar-width:none;
  }
  .cal-week::-webkit-scrollbar{display:none}
  .cal-week-col{
    flex:0 0 calc(100vw - 24px);
    width:calc(100vw - 24px);
    scroll-snap-align:start;
    min-height:calc(100vh - var(--m-topbar-h) - var(--top-h) - 220px);
  }
  .cal-day{min-height:54px;padding:4px 5px}
  .cal-day-num{font-size:13px}
  .cal-day-mo{display:none}
  .cal-day-pill{padding:2px 6px;font-size:10px}
  .cal-day-entries{gap:2px}
  .cal-entry{padding:3px 5px}
  .cal-entry-lbl{font-size:10px}
  .cal-month-grid{gap:2px}
  .cal-nav-btn{min-width:var(--touch-min);min-height:var(--touch-min)}
  .cal-today-btn{min-height:var(--touch-min);padding:8px 14px}

  .datepick{position:fixed;bottom:0;left:0!important;right:0;top:auto!important;width:100%;max-width:100%;border-radius:16px 16px 0 0;padding:18px 16px calc(18px + var(--safe-b));animation:slideUp .2s ease}
  .cpick{position:fixed;bottom:0;left:0;right:0;width:100%;border-radius:14px 14px 0 0;padding:14px 16px calc(14px + var(--safe-b))}
  .stag,.due-chip{font-size:11px}
  .h-time,.aqi-lbl,.weather-meta,.av-from{font-size:12px}
  .sec-name,.task-note,.weather-desc{font-size:13px}
}

@media(max-width:540px) and (prefers-reduced-motion:reduce){
  .side-nav,.tasks-modal-card,.tasks-pop.open,.ctx-menu.open,.m-drawer-scrim{
    animation:none!important;transition:none!important;
  }
}

/* ── SMALL PHONE ≤360px ───────────────────────── */
@media(max-width:360px){
  .sn span{font-size:9px}
  .main-col,.sidebar-col,.daily-wrap,.av-wrap{padding:0 6px}
  .home-wrap{padding:0 8px}
  .weather-icon{font-size:40px}
  .weather-action-btn{width:100%;justify-content:center}
  .weather-empty{flex-direction:column}
  .weather-place-name{font-size:15px}
  .weather-temp{font-size:30px}
  .weather-meta{font-size:11px}
  .weather-main{padding:14px 10px}
  .task-draft-cue{flex-direction:column;align-items:flex-start}
}