/* ============================================================
   Responsive: compact (<= 900px) and mobile (<= 700px / coarse pointer)
   ============================================================ */

/* ---------------- Compact desktop ---------------- */
@media (max-width: 900px) {
  :root { --dock-icon: 42px; }
  .panel-focus { display: none; }
  .overview-spread, .overview-grid, .overview-results { padding-left: 74px; }
  .settings-sidebar, .sw-sidebar, .help-sidebar { flex-basis: 186px; }
  .page { padding: 18px 18px 50px; }
}

/* ---------------- Mobile / touch ---------------- */
@media (max-width: 760px) {
  :root {
    --panel-h: 42px;
    --dock-icon: 42px;
    --fs-md: 14px;
    --fs-sm: 13px;
    --fs-xs: 12px;
    --radius-window: 0px;
  }

  /* --- Panel: bigger targets, essentials only --- */
  .panel { font-size: 14px; }
  .panel-clock { padding: 0 8px; }
  .panel-clock-date { display: none; }
  .panel-indicators .panel-ind { padding: 0 5px; }
  .panel-indicators .panel-ind svg { width: 17px; height: 17px; }
  .panel-activities { font-size: 14px; }

  /* --- Dock becomes a bottom bar --- */
  .dock-layer {
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto;
    height: auto;
    align-items: flex-end;
    justify-content: center;
    padding: 0 6px 6px;
    pointer-events: none;
    transform: none !important;
    opacity: 1 !important;
  }
  .dock-layer.autohide { transform: none !important; opacity: 1 !important; }
  .dock {
    pointer-events: auto;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
    max-height: none;
    padding: 5px 6px;
    border-radius: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    gap: 2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08);
  }
  .dock::-webkit-scrollbar { display: none; }
  .dock-sep { width: 1px; height: calc(var(--dock-icon) - 12px); margin: 0 5px; flex: 0 0 auto; }
  .dock-dots { bottom: 0; }
  .dock-edge { display: none; }
  .ud-window.maximized { bottom: 0; }

  /* --- Windows fill the screen by default; chrome gets touch-sized --- */
  .ud-window { border-radius: 0; }
  .ud-window-header { height: 48px; padding: 0 6px; }
  .hb-title { font-size: 14px; max-width: 40vw; }
  .wbtn { width: 32px; height: 32px; }
  .wbtn svg { width: 14px; height: 14px; }
  .win-controls { gap: 6px; }

  /* --- Overview --- */
  .overview-search-wrap { padding: 14px 0 6px; }
  .overview-search { width: min(560px, calc(100vw - 24px)); height: 46px; }
  .overview-search-input { font-size: 17px; }
  .overview-spread, .overview-grid, .overview-results {
    padding: 4px 12px 96px;
  }
  .overview-workspaces {
    right: auto; left: 0;
    top: auto; bottom: 66px;
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    overflow-x: auto;
  }
  .ws-thumb { width: 46px; height: 34px; }
  .ws-add { width: 46px; height: 34px; }
  .app-grid-viewport { width: 100%; }
  .app-icon-cell { width: 84px; }
  .app-grid-page { grid-template-columns: repeat(4, 1fr) !important; gap: 10px 4px; }
  .overview-hint { bottom: 70px; font-size: 12px; }
  .spread-win .spread-close { opacity: 1; top: -8px; right: -8px; width: 30px; height: 30px; }
  .spread-win .spread-close svg { width: 11px; height: 11px; }
  .folder-popup { width: calc(100vw - 24px); }

  /* --- Popovers become near-full-width sheets --- */
  .popover {
    left: 6px !important;
    right: 6px;
    width: auto !important;
    max-width: none;
    max-height: calc(100vh - var(--panel-h) - 16px);
  }
  .calendar, .quick-settings { width: auto; }
  .qs-grid { grid-template-columns: 1fr 1fr; }
  .qs-tile { height: 52px; }

  /* --- Notifications & toasts --- */
  .notification-layer { width: calc(100vw - 16px); top: calc(var(--panel-h) + 6px); }
  .notification { padding: 12px; }
  .toast-layer { bottom: 82px; }
  .osd { bottom: 100px; }

  /* --- Dialogs --- */
  .dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 40px);
    border-radius: 16px;
  }
  .dialog-actions { padding: 14px 16px 18px; }
  .dialog-actions > * { flex: 1 1 120px; min-width: 0; }
  .dialog-head { padding: 18px 18px 4px; }
  .dialog-body { padding: 10px 18px 6px; }

  /* --- Menus: bigger rows, sheet-like --- */
  .menu { min-width: 220px; max-width: calc(100vw - 16px); }
  .menu-item { min-height: 44px; font-size: 15px; }
  .menu-item .mi-accel { display: none; }

  /* --- Window spread / app switcher --- */
  .switcher-inner { max-width: calc(100vw - 16px); padding: 14px; gap: 8px; }
  .switcher-item { width: 92px; }

  /* --- Hide hover-only affordances on touch --- */
  .tooltip-layer { display: none; }
}

@media (pointer: coarse) {
  .tooltip-layer { display: none; }
  .circ-btn { width: 38px; height: 38px; }
  .circ-btn.sm { width: 34px; height: 34px; }
  .pill-btn { height: 38px; padding: 0 18px; }
  .pill-btn.sm { height: 32px; }
  .menu-item { min-height: 42px; }
  .side-row { height: 40px; }
  .switch { width: 52px; height: 30px; }
  .switch::after { width: 24px; height: 24px; }
  .switch[aria-checked="true"]::after { transform: translateX(22px); }
}

/* ---------------- App sidebar drawers (shared) ---------------- */
@media (max-width: 820px) {
  .settings-sidebar, .sw-sidebar, .help-sidebar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 214px;
    z-index: 40;
    transform: translateX(-102%);
    transition: transform 220ms var(--ease-shell);
    box-shadow: 6px 0 24px rgba(0, 0, 0, .26);
  }
  .settings-app.sidebar-open .settings-sidebar,
  .software-app.sidebar-open .sw-sidebar,
  .help-app.sidebar-open .help-sidebar { transform: translateX(0); }
  .settings-app.sidebar-open::after,
  .software-app.sidebar-open::after,
  .help-app.sidebar-open::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 30;
  }
  .settings-back { display: flex; }
  .settings-body { padding: 6px 14px 40px; }
  .settings-group { max-width: none; }
}

/* ---------------- Narrow phones ---------------- */
@media (max-width: 480px) {
  .app-grid-page { grid-template-columns: repeat(4, 1fr) !important; }
  .app-icon-cell { width: 100%; max-width: 92px; }
  .app-icon-art svg { width: 46px; height: 46px; }
  .sw-grid, .sw-grid.big { grid-template-columns: 1fr; }
  .sw-hero-inner { padding: 20px 16px; }
  .sw-hero-title { font-size: 21px; }
  .sw-section { padding: 14px 12px 4px; }
  .sw-detail-hero { padding: 14px 12px 8px; }
  .proc-head, .proc-row { grid-template-columns: 1fr 62px 58px; }
  .proc-head .proc-num:nth-child(4), .proc-row .proc-num:nth-child(4),
  .proc-head .proc-num:nth-child(5), .proc-row .proc-num:nth-child(5) { display: none; }
  .fs-head, .fs-row { grid-template-columns: 1fr 70px 60px; }
  .fs-head span:nth-child(2), .fs-row span:nth-child(2),
  .fs-head span:nth-child(5), .fs-row span:nth-child(5),
  .fs-head span:nth-child(6), .fs-row span:nth-child(6) { display: none; }
  .calc-pad { gap: 5px; padding: 8px; }
  .calc-key { min-height: 44px; font-size: 16px; }
  .files-toolbar { flex-wrap: wrap; }
  .photos-grid { grid-template-columns: repeat(2, 1fr); }
  .browser-tab { max-width: 128px; }
}

/* ---------------- Landscape phones ---------------- */
@media (max-height: 480px) and (max-width: 900px) {
  :root { --panel-h: 36px; }
  .dock { padding: 4px 5px; }
  .overview-search-wrap { padding: 8px 0 2px; }
  .overview-search { height: 38px; }
  .app-grid-page { grid-template-columns: repeat(6, 1fr) !important; }
  .overview-spread, .overview-grid, .overview-results { padding-bottom: 70px; }
  .dialog { max-height: calc(100vh - 16px); }
}