/* ============================================================
   Wide screens
   The bottom bar is a phone pattern. On a laptop it becomes a
   sidebar, and the room is spent on air, not on more stuff.
   ============================================================ */
@media (min-width:900px){

  body{padding-bottom:0;padding-left:240px}

  /* ---- tab bar becomes a sidebar ---- */
  .tabs{
    top:0;bottom:0;right:auto;width:240px;height:100vh;
    display:flex;flex-direction:column;align-items:stretch;
    gap:var(--sp-1);padding:96px var(--sp-3) var(--sp-4);
    border-top:0;border-right:1px solid var(--line);
    background:var(--surface);backdrop-filter:none;
  }
  .tab{
    flex-direction:row;justify-content:flex-start;gap:var(--sp-3);
    height:48px;padding:0 var(--sp-3);border-radius:var(--r-sm);
    font-size:var(--t-body);font-weight:600;
  }
  .tab:hover{background:var(--bg)}
  .tab.on{background:var(--navy);color:#fff}
  [data-theme="dark"] .tab.on{background:var(--surface-2);color:#fff}
  .tab svg{width:19px;height:19px}
  .tab .badge{position:static;transform:none;margin-left:auto}

  /* the + moves to the top of the sidebar and reads as a button */
  .tab-add{order:-1;margin-bottom:var(--sp-3)}
  .addbtn{
    width:100%;height:48px;border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
    font-size:var(--t-body);font-weight:650;box-shadow:none;
  }
  .addbtn::after{content:"Add a client";}
  .addbtn svg{width:17px;height:17px}

  /* ---- header sits above the content, not the sidebar ---- */
  .topbar{
    left:240px;background:color-mix(in srgb,var(--bg) 92%,transparent);
  }
  .topbar .row{height:72px;max-width:1080px;margin:0 auto;padding:0 var(--sp-6)}
  .topbar .brand{display:none}
  .tabs::before{
    content:"";position:absolute;left:var(--sp-3);right:var(--sp-3);top:0;height:96px;
    background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%2316294F'%3E%3Cpath d='M 47.87 20.31 Q 50 19.39 52.13 20.31 L 83.02 33.59 Q 86.43 35.05 83.02 36.52 L 52.13 49.8 Q 50 50.72 47.87 49.8 L 16.98 36.52 Q 13.57 35.05 16.98 33.59 Z'/%3E%3Cpath d='M 11.41 50.27 Q 8 48.8 11.41 47.34 L 21.76 42.88 Q 22.72 42.47 23.68 42.88 L 49.04 53.79 Q 50 54.2 50.96 53.79 L 76.32 42.88 Q 77.28 42.47 78.24 42.88 L 88.59 47.34 Q 92 48.8 88.59 50.27 L 52.13 65.95 Q 50 66.86 47.87 65.95 Z'/%3E%3Cpath d='M 11.41 64.02 Q 8 62.55 11.41 61.08 L 18.98 57.83 Q 19.94 57.42 20.9 57.83 L 50 70.34 L 50 80.61 Z'/%3E%3C/g%3E%3Cpath fill='%23F36F24' d='M 50 70.34 L 79.1 57.83 Q 80.06 57.42 81.02 57.83 L 88.59 61.08 Q 92 62.55 88.59 64.02 L 50 80.61 Z'/%3E%3C/svg%3E") no-repeat left 6px top 34px / 30px 30px;
  }
  [data-theme="dark"] .tabs::before{filter:brightness(0) invert(1)}
  .tabs::after{
    content:"WebAid";position:absolute;left:calc(var(--sp-3) + 40px);top:42px;
    font-size:var(--t-body);font-weight:700;letter-spacing:-.02em;color:var(--navy);
  }
  [data-theme="dark"] .tabs::after{color:#fff}

  .wrap{max-width:1080px;padding:0 var(--sp-6)}
  .screen{padding-top:var(--sp-5)}
  .screen-title{font-size:2rem;margin-bottom:var(--sp-5)}

  /* ---- Home: hero beside the chase list ---- */
  [data-screen="home"] #homeBody{
    display:grid;grid-template-columns:1.1fr 1fr;
    gap:var(--sp-4) var(--sp-5);align-items:start;
  }
  [data-screen="home"] .alerts{grid-column:1/-1}
  [data-screen="home"] .hero{grid-row:span 2;margin-bottom:0;padding:var(--sp-6)}
  [data-screen="home"] .hero-fig .amt{font-size:3rem}
  [data-screen="home"] #chaseCard,
  [data-screen="home"] #moneyCard{margin-bottom:0}
  [data-screen="home"] .card:last-child{grid-column:1/-1;margin-bottom:0}

  /* ---- Clients: filters in one row, list in two columns ---- */
  .filter-row{grid-template-columns:repeat(3,1fr)}
  .filter-row .pk-btn:last-of-type{grid-column:auto}
  .clients{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
  .crow{margin:0}

  /* ---- Follow-ups in two columns ---- */
  #fuList{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);align-items:start}
  .fu-head{grid-column:1/-1;margin-top:var(--sp-4)}
  .fu-card{margin-bottom:0}

  /* ---- Money: buckets in two columns, panels beside each other ---- */
  #mBuckets{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
  .bkt{margin-bottom:0}
  .m-actions{max-width:460px}
  [data-screen="money"] .card{display:inline-block;width:calc(50% - var(--sp-3)/2);vertical-align:top}
  [data-screen="money"] .card + .card{margin-left:var(--sp-3)}

  /* ---- sheets become centred dialogs ---- */
  .sheet{align-items:center;justify-content:center;padding:var(--sp-5)}
  .sheet-box{
    max-width:520px;border-radius:var(--r-lg);max-height:86vh;
    padding:var(--sp-5);transform:translateY(16px) scale(.98);
  }
  .sheet.open .sheet-box{transform:none}
  .sheet-grip{display:none}

  /* the action menu drops from the sidebar button */
  /* The menu used to open inside the sidebar and underneath it (layer 58
     under the sidebar's 60), so only the blur was visible. It now opens
     beside the sidebar, above everything. */
  .menu{left:252px;right:auto;width:280px;bottom:auto;top:92px;z-index:65}
  .scrim{z-index:62;left:240px}
  .toast{left:auto;right:var(--sp-6);bottom:var(--sp-6);max-width:360px}

  /* the tap-guard is a phone problem; it does not apply here */
  body.sheet-open .tabs{pointer-events:auto}
}

@media (min-width:1280px){
  .wrap{max-width:1180px}
  .clients{grid-template-columns:repeat(3,1fr)}
  #mBuckets{grid-template-columns:repeat(3,1fr)}
}