/* Bigger screens: tablets (768px and up) and laptops / PCs (1024px and up). Phones are untouched.
   Works for both designs: iOS (glass) and Android (css/android.css flattens it and adds its own touches).

   768px and up   Home in two columns. Screens open full-width with their content centred.
                  The Add screen, setup and sign-in become centred cards. Bottom sheets get wider.
   1024px and up  A sidebar on the left replaces the bottom bar. Screens open as pages beside it,
                  You becomes a page, and the small sheets (Menu, budgets, pickers) become centred dialogs. */

:root { --side: 0px; }

@media (min-width: 768px) {
  /* ---------- Home in two columns: calendar on the left, the rest on the right ---------- */
  .app {
    max-width: 1180px; padding: calc(env(safe-area-inset-top) + 32px) 32px calc(env(safe-area-inset-bottom) + 130px);
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 24px; align-items: start;
  }
  .app > * { margin: 0 !important; }
  .app > .topbar, .app > .reminders { grid-column: 1 / -1; }
  .app > #homeCal { grid-column: 1; grid-row: span 8; }
  .app > #homeBud, .app > #homeGoal, .app > #homeLoan, .app > .card.list { grid-column: 2; }
  .greet { font-size: 30px; }
  .card { padding: 24px; }

  /* ---------- Screens (See all, Loans, Goals, Insights...): full width, content centred ---------- */
  .more-sheet { left: var(--side); }
  .more-panel { width: 100%; padding-left: max(24px, calc((100% - 760px) / 2)); padding-right: max(24px, calc((100% - 760px) / 2)); }

  /* ---------- Bottom sheets: wider, floating just above the edge ---------- */
  .sheet { width: min(560px, calc(100% - 32px)); bottom: 16px; border-radius: 30px; border-bottom: 1px solid var(--surfaceBorder); transform: translate(-50%, calc(100% + 40px)); }
  .picker { align-items: center; }
  .picker-sheet { width: min(520px, calc(100% - 32px)); border-radius: 28px; border-bottom: 1px solid var(--surfaceBorder); padding-bottom: 20px; transform: translateY(30px) scale(0.98); opacity: 0; transition: transform 0.35s var(--ease-out), opacity 0.25s ease; }
  .picker.open .picker-sheet { transform: none; opacity: 1; }

  /* ---------- Add an entry, setup: a centred card ---------- */
  .add-screen { align-items: center; padding: 24px; }
  .add-panel {
    height: min(880px, 100%); border-radius: 32px; border: 1px solid var(--surfaceBorder);
    padding-top: 18px; padding-bottom: 18px; box-shadow: 0 40px 80px -30px rgba(10, 8, 30, 0.55);
    transform: translateY(40px) scale(0.98); opacity: 0; transition: transform 0.45s var(--ease-out), opacity 0.3s ease;
  }
  .add-screen.open .add-panel { transform: none; opacity: 1; }

  /* ---------- Sign in / sign up: a centred card ---------- */
  .auth-screen { align-items: center; padding: 24px; }
  .auth-panel {
    height: min(860px, 100%); border-radius: 32px; padding: 22px 28px 24px;
    background: color-mix(in srgb, var(--sheet) 72%, transparent); border: 1px solid var(--surfaceBorder);
    box-shadow: 0 40px 80px -30px rgba(10, 8, 30, 0.45);
    -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  }
  .au-pad { max-width: 360px; margin-left: auto; margin-right: auto; width: 100%; }

  /* The lock screen keypad doesn't need to stretch */
  .lock-box { width: min(360px, 100%); }
}

@media (min-width: 1024px) {
  :root { --side: 248px; }

  /* ---------- Sidebar ---------- */
  .tabbar {
    left: 16px; top: 16px; bottom: 16px; transform: none; width: calc(var(--side) - 32px); height: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 84px 12px 16px; border-radius: 28px;
  }
  body:not(.ready) .tabbar { transform: translateX(-24px); }
  /* The app's name and logo at the top */
  .tabbar::before {
    content: 'Anchor'; position: absolute; top: 26px; left: 64px; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--text);
  }
  .tabbar::after {
    content: ''; position: absolute; top: 22px; left: 22px; width: 32px; height: 32px; border-radius: 22.2%;
    background: url(../icons/logo-256.png) center / contain no-repeat;
    box-shadow: 0 6px 14px -6px rgba(40, 30, 140, 0.6);
  }
  .tab { flex: none; flex-direction: row; justify-content: flex-start; height: 50px; padding: 0 14px; gap: 14px; border-radius: 16px; font-size: 15px; font-weight: 700; }
  .tab .i { width: 22px; height: 22px; }
  .tab.active { background: color-mix(in srgb, var(--purple) 15%, transparent); color: var(--purpleText); }
  .tab-profile { margin-top: auto; }
  .tab-profile .avatar-wrap { width: 26px; height: 26px; }
  /* Add: a wide button at the top of the sidebar */
  .tab-add { order: -1; height: 54px; margin-bottom: 14px; padding: 0; }
  .tab-add .add-btn { width: 100%; height: 54px; border-radius: 18px; transform: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .tab-add .add-btn::after { content: 'Add entry'; font-size: 15px; font-weight: 800; }
  .tab-add .add-btn .i { width: 22px; height: 22px; }
  .add-btn.jelly { animation: none; }
  /* Its menu (Income, Scan bill, Expense) opens beside it */
  .quick-items {
    left: calc(var(--side) + 4px); top: 84px; bottom: auto; transform: none; width: auto; height: auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  }
  .quick .quick-item { position: static; flex-direction: row; gap: 12px; --dx: -30px; --dy: 0px; } /* beats the phone's per-item positions */
  .quick .quick-item .orb { width: 54px; height: 54px; }

  /* ---------- Home sits beside the sidebar ---------- */
  .app { margin-left: max(var(--side), calc(var(--side) + (100vw - var(--side) - 1180px) / 2)); margin-right: auto; padding-bottom: 48px; }
  .toast { left: calc(var(--side) + (100% - var(--side)) / 2); bottom: 24px; }

  /* ---------- You: a page beside the sidebar, like Home and Insights ---------- */
  #sheet {
    top: 0; bottom: 0; left: var(--side); right: 0; width: auto; max-height: none; border: 0; border-radius: 0;
    padding: 36px max(32px, calc((100% - 720px) / 2)) 56px;
    background: linear-gradient(color-mix(in srgb, var(--sheet) 88%, transparent), color-mix(in srgb, var(--sheet) 88%, transparent)), linear-gradient(180deg, var(--bgTop), var(--bgMid) 50%, var(--bgBottom));
    transform: translateX(40px); opacity: 0; visibility: hidden;
    transition: transform 0.4s var(--ease-out), opacity 0.25s ease, visibility 0s linear 0.4s;
  }
  #sheet.open { transform: none; opacity: 1; visibility: visible; transition: transform 0.4s var(--ease-out), opacity 0.25s ease; }
  #sheetBackdrop { display: none; }
  #sheet .sheet-handle { display: none; }

  /* ---------- Small sheets become centred dialogs ---------- */
  .sheet:not(#sheet) {
    top: 50%; bottom: auto; left: calc(var(--side) + (100% - var(--side)) / 2); width: min(520px, calc(100% - var(--side) - 48px));
    max-height: calc(100vh - 64px); transform: translate(-50%, -46%); opacity: 0; visibility: hidden;
    transition: transform 0.35s var(--ease-out), opacity 0.25s ease, visibility 0s linear 0.35s;
  }
  .sheet:not(#sheet).open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; transition: transform 0.35s var(--ease-out), opacity 0.25s ease; }
  .sheet:not(#sheet) .sheet-handle, .picker-sheet .sheet-handle { visibility: hidden; height: 0; margin: 0 0 10px; }
  .picker { left: var(--side); }

  /* ---------- Screens beside the sidebar ---------- */
  .more-panel { padding-top: 28px; }

  /* ---------- Mouse and trackpad ---------- */
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--textMuted) 45%, transparent) transparent; }
}

/* Hover, only where there's a real mouse or trackpad */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .tab:not(.active):not(.tab-add):hover { background: var(--track); color: var(--text); }
  .set-row:hover { background: color-mix(in srgb, var(--track) 70%, transparent); }
  .pill:hover, .au-alt:hover { filter: brightness(1.08); }
  .save-btn:hover, .tab-add .add-btn:hover { filter: brightness(1.06); }
  .cal-day:not(.blank):not(:disabled):hover { background: var(--track); }
  .icon-btn:hover { filter: brightness(1.12); }
}