/* Roam HQ - phone and tablet layout.
   Loaded after hq-addons.css. Everything here lives inside media queries, so the
   desktop layout (above 1024px) is untouched. Breakpoints:
     <= 1024px  tablet: tighter gutters, hero Today board moves in-flow
     <=  900px  sidebar is gone (index.html), so the bottom tab bar appears
     <=  700px  phone: app-style layout, stacked grids, full-screen panels */

/* ─── Bottom tab bar + divisions sheet (markup built by hq-mobile.js) ─── */
.hq-tabbar, .hq-sheet, .hq-sheet-scrim, .hq-m-only { display: none; }

@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .homepage, .division-page { overflow-x: clip; }

  /* Hero: the Today board leaves its absolute perch and sits in the flow,
     beside the title when there is room, below it when there is not. */
  .hero { height: auto; min-height: 0; padding: 0; gap: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .hero-content { order: 1; position: relative; flex: none; width: auto; padding: 36px 32px 24px; pointer-events: auto; }
  .hero-console { order: 2; display: block; position: relative; top: auto; right: auto; flex: none; width: auto; margin: 0 32px 28px; }
  .hero-title { white-space: normal; font-size: 34px; }
  .division-page .breadcrumb { margin-top: 0; padding-top: 16px; }

  .topnav { padding: 0 24px; }
  .section-rule { width: calc(100% - 64px); margin: 24px 32px; }
  .home-tabs, .divisions-header, .divisions-grid, .dash-stats, .dash-dept-list, .team-grid,
  .mytasks-toolbar, .mytasks-kanban, .resort-grid, .app-grid, .div-hero, .section-tabs, .tab-content,
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .division-page [style*="padding:32px 48px 64px"] { padding: 28px 32px 56px !important; }
  .division-page [style*="padding:40px 48px 64px"] { padding: 32px 32px 56px !important; }
  .division-page [style*="padding:0 48px 48px"] { padding: 0 32px 40px !important; }
  .division-page [style*="padding:0 48px 28px"] { padding: 0 32px 24px !important; }

  /* Horizontal tab strips */
  .home-tabs, .section-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .home-tabs::-webkit-scrollbar, .section-tabs::-webkit-scrollbar { display: none; }
  .home-tab, .section-tab { white-space: nowrap; flex-shrink: 0; }
  /* The .fade-up transform would clip the scroll strip's shadow; keep it visible once settled */
  .home-tabs.fade-up { animation-fill-mode: forwards; }

  /* Tables scroll inside their card instead of widening the page */
  .content-card, .taskboard-body { overflow-x: auto; }
  .content-card table, .tab-content table { min-width: 520px; }

  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .atlas-stats-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Sidebar is hidden below 900px: give the divisions a bottom tab bar ─── */
@media (max-width: 900px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .hq-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2800;
    height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 6px env(safe-area-inset-bottom, 0px);
    background: rgba(29,27,26,0.96); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border-top: 1px solid rgba(201,160,100,0.22); box-shadow: 0 -12px 40px rgba(0,0,0,0.18);
  }
  .hq-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: none; border: none; cursor: pointer; padding: 6px 0 0; min-width: 0;
    font-family: 'Jost', sans-serif; font-size: 9.5px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(255,255,255,0.55); transition: color 0.2s; -webkit-tap-highlight-color: transparent;
  }
  .hq-tab svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .hq-tab.active { color: #C9A064; }
  .hq-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* Divisions sheet: the same groups as the sidebar, as a slide-up sheet */
  .hq-sheet-scrim { display: block; position: fixed; inset: 0; z-index: 2790; background: rgba(20,18,17,0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .hq-sheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2795;
    max-height: 78vh; padding: 10px 14px calc(78px + env(safe-area-inset-bottom, 0px));
    background: #1D1B1A; border-top: 1px solid rgba(201,160,100,0.32); border-radius: 22px 22px 0 0;
    box-shadow: 0 -24px 60px rgba(0,0,0,0.35);
    transform: translateY(104%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }
  body.hq-sheet-open .hq-sheet { transform: translateY(0); }
  body.hq-sheet-open .hq-sheet-scrim { opacity: 1; pointer-events: auto; }
  .hq-sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); margin: 2px auto 12px; flex-shrink: 0; }
  .hq-sheet-nav { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
  /* The sidebar's own classes are reused; undo the collapsed-rail rules inside the sheet */
  body.sb-collapsed .hq-sheet .hq-sb-item, .hq-sheet .hq-sb-item { justify-content: flex-start; padding: 12px 14px; gap: 13px; font-size: 15px; }
  body.sb-collapsed .hq-sheet .hq-sb-item span, .hq-sheet .hq-sb-item span { display: inline; }
  body.sb-collapsed .hq-sheet .hq-sb-item svg, .hq-sheet .hq-sb-item svg { width: 18px; height: 18px; }
  body.sb-collapsed .hq-sheet .hq-sb-label, .hq-sheet .hq-sb-label { height: auto; padding: 0 14px; margin: 16px 0 8px; background: none; color: rgba(255,255,255,0.35); overflow: visible; }
  .hq-sheet .hq-sb-nav .hq-sb-label:first-child { margin-top: 4px; }

  /* Docked panels cover the tab bar; keep their footers clear of the home indicator */
  .atlas-input-row { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .digest-body { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
}

/* ─── Phone ─── */
@media (max-width: 700px) {
  :root { --hq-nav: 60px; }

  /* Top bar: logo, Today, Atlas, avatar */
  .topnav { height: var(--hq-nav); padding: 0 14px !important; }
  .topnav-logo svg { height: 16px !important; }
  .topnav-right { gap: 8px !important; }
  #manual-save-btn, #liveTime, #save-status-text, #save-status-dot { display: none !important; }
  .topnav-digest, .topnav-atlas { padding: 6px 12px !important; font-size: 11px !important; letter-spacing: 0.8px !important; gap: 6px !important; }
  .topnav-atlas { padding-left: 6px !important; }
  .topnav-atlas-coin { width: 20px !important; height: 20px !important; }
  .topnav-user { width: 34px; height: 34px; font-size: 12.5px; }
  .user-menu { top: 42px; min-width: 210px; }
  .hq-m-only { display: flex; }
  #hq-m-savestat { margin-left: auto; font-size: 11px; color: var(--body-light); letter-spacing: 0.3px; }

  .hero, .breadcrumb { margin-top: var(--hq-nav); }
  .division-page { padding-top: var(--hq-nav); }
  .digest-panel, .atlas-panel { top: var(--hq-nav); left: 0; right: 0; width: 100%; max-width: 100%; border-left: none; box-shadow: none; }
  body.atlas-open .homepage, body.atlas-open .division-page,
  body.digest-open .homepage, body.digest-open .division-page { margin-right: 0 !important; }
  .atlas-msg { max-width: 92%; }

  /* Hero: clock beside the title, Today board stacked below, no subtitle */
  .hero-content { padding: 18px 16px 14px; }
  .hero-left {
    max-width: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: "clock label" "clock title"; column-gap: 14px; align-items: center;
  }
  .hero-clock, #hero-clock { grid-area: clock; width: 84px !important; height: 84px !important; margin: 0 !important; }
  .hero-clock .clk-city { top: 15px; font-size: 6.5px; letter-spacing: 1.4px; padding: 0 16px; }
  .hero-clock .clk-time { font-size: 15px; bottom: calc(50% + 3px); }
  .hero-clock .clk-zone { top: calc(50% + 6px); font-size: 7px; letter-spacing: 1.2px; }
  .hero-clock .clk-temp { top: calc(50% + 16px); font-size: 10.5px; }
  .hero-label { grid-area: label; align-self: end; margin-bottom: 6px; font-size: 9px; letter-spacing: 3px; }
  .hero-label::before { width: 18px; }
  .hero-title { grid-area: title; align-self: start; font-size: 24px; line-height: 1.15; margin: 0; }
  .hero-subtitle { display: none; }
  .hero-console { width: auto; margin: 0 16px 16px; padding: 14px 16px 12px; border-radius: 16px; }
  .hc-num { font-size: 17px; }
  .hc-stat-label { font-size: 7.5px; letter-spacing: 1.2px; }

  /* Gutters */
  .section-rule { width: calc(100% - 32px); margin: 18px 16px; }
  .home-tabs, .divisions-header, .divisions-grid, .dash-stats, .dash-dept-list, .team-grid,
  .mytasks-toolbar, .mytasks-kanban, .resort-grid, .app-grid, .div-hero, .section-tabs, .tab-content,
  .breadcrumb { padding-left: 16px; padding-right: 16px; }
  .division-page [style*="padding:32px 48px 64px"] { padding: 20px 16px 48px !important; }
  .division-page [style*="padding:40px 48px 64px"] { padding: 24px 16px 48px !important; }
  .division-page [style*="padding:0 48px 48px"] { padding: 0 16px 32px !important; }
  .division-page [style*="padding:0 48px 28px"] { padding: 0 16px 20px !important; }
  .division-page [style*="padding:48px;"] { padding: 24px 16px !important; }
  .home-tabs { margin-bottom: 20px; gap: 6px; }
  .home-tab { padding: 9px 16px; letter-spacing: 1.5px; }
  .home-tabs::after { content: ''; flex: 0 0 10px; }

  /* Department cards: one per row, lighter padding */
  .divisions-header { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
  .divisions-filter { flex-wrap: wrap; }
  .divisions-grid { grid-template-columns: 1fr; gap: 12px; padding-bottom: 40px; }
  .division-card { padding: 24px 22px 22px; min-height: 0; }
  .division-card:hover { transform: none; }
  .card-top { margin-bottom: 14px; }
  .card-title { font-size: 19px; }
  .card-desc { font-size: 13.5px; }

  /* Dashboard / team / tasks */
  .dash-stats { gap: 10px; margin-bottom: 24px; }
  .dash-stat { padding: 18px 12px; }
  .dash-stat-value { font-size: 28px; }
  .dash-dept-row { padding: 14px 16px; }
  .dash-dept-row:hover { transform: none; }
  .dash-snapshot { padding: 18px 16px 10px; margin-bottom: 20px; }
  .team-grid { gap: 12px; }
  .team-card { padding: 20px 14px; }
  .mytasks-toolbar { padding-bottom: 16px; }
  .mytasks-kanban { flex-direction: column; overflow-x: visible; scroll-snap-type: none; gap: 12px; padding-bottom: 32px; }
  .task-col { min-width: 0; max-width: none; width: 100%; }
  .taskboard-toolbar { gap: 8px; }
  .tb-search { min-width: 100%; order: -1; }
  .tb-select { max-width: 46%; }
  .tb-add { margin-left: 0; }
  .tb-row { padding: 12px 14px; }

  /* Division pages */
  .div-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 14px; padding-bottom: 16px; }
  .div-hero-title { font-size: 24px; }
  .div-hero-desc { font-size: 13px; -webkit-line-clamp: 3; }
  .div-hero-right { flex-wrap: wrap; padding-bottom: 0; }
  .div-action-btn { padding: 8px 14px; font-size: 10.5px; letter-spacing: 1.2px; }
  .section-tabs { margin-top: 18px; }
  .section-tab { padding: 11px 14px; font-size: 11px; letter-spacing: 1.5px; }
  .tab-content { padding-top: 22px; padding-bottom: 48px; }
  .overview-grid { grid-template-columns: 1fr; gap: 16px; }
  .overview-main, .overview-sidebar { gap: 16px; }
  .content-card { padding: 20px 18px; }
  .content-card-header { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .content-card-title { letter-spacing: 2px; font-size: 12px; }
  .stats-row { gap: 10px; }
  .stat-card { padding: 16px 12px; }
  .subdiv-grid, .atlas-ql-grid, .resort-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .subdiv-card { padding: 20px 20px; }
  .app-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .app-tile { padding: 20px 10px; }
  .app-tile-logo { width: 48px; height: 48px; }
  .division-page [style*="grid-template-columns:1fr 1fr"],
  .division-page [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .division-page [style*="grid-template-columns:repeat(auto-fill,minmax(220px,1fr))"] { grid-template-columns: 1fr !important; }
  .atlas-stats-bar { gap: 10px; }
  .atlas-phase-hdr { padding: 14px 16px; }
  .atlas-phase-tasks { padding: 0 16px 14px; }
  .pw-entry { flex-wrap: wrap; gap: 6px 14px; }
  .pw-entry-label, .pw-entry-user, .pw-entry-pass { min-width: 0; }
  .pw-entry-label { flex: 1 1 100%; }
  .meeting-item { flex-wrap: wrap; gap: 6px 12px; }
  .meeting-date { min-width: 0; }
  .workflow-step-label { font-size: 7px; }
  .timeline-10 .workflow-step-label { font-size: 7.5px; max-width: 64px; }
  .quick-link { padding: 11px 12px; }
  .task-item { flex-wrap: wrap; gap: 10px; }
  .task-text { flex: 1 1 60%; }
  .admin-perm-row { flex-wrap: wrap; }
  .admin-perm-checks { gap: 10px; }
  .admin-member-tabs { gap: 6px; }

  /* Modals: 16px gutters, never taller than the screen */
  .edit-modal, .team-modal, .poc-modal, .pw-modal, .investor-popup, .admin-panel, .tb-editor {
    width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px 20px 22px;
  }
  .edit-modal h3, .poc-modal-title, .pw-modal-title, .admin-title { font-size: 19px; }
  .edit-modal-actions, .poc-modal-actions, .team-modal-actions { flex-wrap: wrap; }
  .edit-modal-actions button, .team-modal-actions button { flex: 1 1 auto; }
  .tbe-grid { grid-template-columns: 1fr; }
  .portal-builder-overlay { padding: 16px; }
  .portal-builder { width: 100%; max-width: 100%; padding: 28px 20px 24px; }
  .pb-row.col2, .pb-row.col3, .pb-row.col4 { grid-template-columns: 1fr; }
  .pb-stage-grid { grid-template-columns: repeat(2, 1fr); }
  #mv-full-overlay { padding: 12px; }
  .mvf-modal { height: calc(100dvh - 24px); border-radius: 16px; }
  .mvf-header { padding: 16px 16px 12px; }
  .mvf-legend { padding: 8px 16px; gap: 10px; }
  .mvf-footer { padding: 12px 16px 14px; }
  #property-bank-iframe { width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; }
  .login-card { width: calc(100vw - 32px); max-width: calc(100vw - 32px); padding: 36px 24px 30px; }
  #clk-pop { max-width: calc(100vw - 24px); }
  .password-gate .gate-box { padding: 0 16px; }

  /* Infrastructure / roadmap frames sit under the tab bar */
  #infra-frame, #growth-frame { min-height: calc(100dvh - 60px); }
}

@media (max-width: 430px) {
  .topnav-digest svg { display: none; }
  .hero-title { font-size: 22px; }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row, .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .hq-tab { letter-spacing: 0.8px; font-size: 9px; }
}

/* Phones: one clean scrollable line of filters; drop the redundant
   DEPARTMENTS eyebrow (the active tab above already says where you are). */
@media (max-width: 700px) {
  .divisions-header { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; margin-bottom: 14px; }
  .divisions-header::-webkit-scrollbar { display: none; }
  .divisions-header .divisions-label { display: none; }
  .divisions-filter { flex-wrap: nowrap; }
  .filter-btn { white-space: nowrap; flex-shrink: 0; }
  .home-tabs { margin-bottom: 12px; }
}

/* Phones: the Departments grid needs no filter pills - only My Tasks keeps
   its priority/status filters. */
@media (max-width: 700px) {
  #home-departments .divisions-header { display: none; }
}