/* Computer layout (Club and Pro): full-height side bar with names, wide panels, tables instead of phone cards.
   The phone never sees any of this. Colours only come from the theme tokens. */
html body .side-brand, html body .side-mode, html body .side-menu, html body .nav-l { display: none; }

@media (min-width: 960px) {
  :root { --side: 228px; }

  /* ---------- side bar ---------- */
  html body #nav.nav, html body #tabs.tabs {
    position: fixed; inset: 0 auto 0 0; transform: none; width: var(--side); height: auto; max-width: none;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
    padding: 22px 12px 84px; overflow-y: auto; border: 0; border-right: 1px solid var(--line); border-radius: 0;
    background: var(--ground-2); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #nav[hidden], #tabs[hidden] { display: none !important; }
  html body .side-brand { display: flex; align-items: center; gap: 8px; margin: 0 10px 18px; color: var(--ink); text-decoration: none; }
  .side-brand .wm { font-size: 24px; }
  .side-brand svg { width: 26px; height: 26px; fill: currentColor; color: var(--accent-text, var(--accent)); }
  .side-brand b { font-family: var(--font-brand, 'Fredoka', var(--font)); font-size: 22px; font-weight: 600; }
  html body .side-mode:not(:empty) { display: block; margin: 0 8px 16px; }
  .side-mode .mode-sw { display: grid; grid-template-columns: 1fr 1fr; margin: 0; width: auto; }
  .side-mode .mode-sw > * { display: grid; place-items: center; height: 34px; padding: 0; line-height: 1; }
  html body .nav-l { display: inline; }

  #nav > a:not(.side-brand), #nav .side-menu, #tabs > button {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
    width: 100%; max-width: none; flex: 0 0 auto; height: 42px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px;
    background: none; color: var(--ink-2); font-size: 14.5px; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer;
    transition: background-color var(--dur-fast, .15s), color var(--dur-fast, .15s);
  }
  #nav > a:not(.side-brand) .ic, #nav .side-menu .ic, #tabs > button svg { width: 19px; height: 19px; flex: none; }
  #tabs > button span { font-size: 14.5px; font-weight: 600; }
  #nav > a:not(.side-brand):hover, #nav .side-menu:hover, #tabs > button:hover { background: var(--ground-3); color: var(--ink); }
  html body #nav > a[aria-current="page"]:not(.side-brand), html body #tabs > button[aria-current] { background: var(--accent); color: var(--accent-ink); }
  html body #tabs > button[aria-current] span { color: var(--accent-ink); }
  #nav a.pop { animation: none; }
  html body #nav .side-menu { display: flex; margin-top: 8px; }
  #tabs .pill-bg { display: none; }

  /* the + button becomes a labeled button at the foot of the side bar */
  html body .fab {
    z-index: 30; position: fixed; left: 12px; right: auto; bottom: 18px; width: calc(var(--side) - 24px); height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 10px; font-size: 15px; font-weight: 700; box-shadow: none; transform: none;
  }
  html body .fab .ic, html body .fab svg { width: 18px; height: 18px; }
  .fab i { position: static; margin-left: 4px; }
  .fab:active { transform: scale(.98); }

  /* ---------- page ---------- */
  body:has(#nav:not([hidden])) #app { max-width: none; margin: 0 0 0 var(--side); padding: 18px clamp(24px, 3vw, 44px) 56px; }
  body:has(#nav[hidden]) #app { max-width: 720px; margin: 0 auto; padding: 32px 24px 56px; }
  body:has(#tabs:not([hidden])) #view { max-width: none; margin: 0 0 0 var(--side); padding: 18px clamp(24px, 3vw, 44px) 56px; }
  #app > main, #view > * { max-width: 1520px; margin-left: auto; margin-right: auto; }
  #app > main.narrow { max-width: 1040px; }
  #app > main.cg, #app > main.pf { max-width: 620px; }

  .top .menu-btn, .top .brand, #app .top .mode-sw, #view > .mode-sw { display: none; }
  .top { min-height: 40px; }
  .hello { margin-top: 2px; }
  .hello h1, #view .top h1 { font-size: 26px; letter-spacing: -.02em; }

  /* phone sizes come down: mouse, not thumb */
  #app .btn.big, #view .btn.big { height: 44px; min-height: 44px; font-size: 15px; border-radius: 10px; }
  #app .btn, #view .btn { border-radius: 10px; }
  #app .seg { max-width: 420px; }
  #app .icon-btn, #view .icon-btn { border-radius: 10px; }

  /* every surface: flat panel with a hairline, smaller corners */
  #app .card, #app .summary, #app .feed, #app .quotes, #app .agenda, #app .wlist, #app .ex, #app .kv, #app .pending-list, #app .table, #app .compare, #app .talk, #app .banner, #app .row-card, #app .rank-list li,
  #view .card, #view .hero, #view .tree-card, #view .q {
    border-radius: 12px; box-shadow: 0 0 0 1px var(--line);
  }
  #app .banner { min-height: 0; padding: 10px 14px; margin-top: 8px; }
  #app .banner .small { display: inline; margin-left: 8px; }
  #app .banner .grow > * { display: inline; }
  .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }

  /* ---------- Club home: dashboard ---------- */
  .dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 14px; align-items: start; }
  .panel { min-width: 0; padding: 16px 18px; border-radius: 12px; background: var(--ground-2); box-shadow: 0 0 0 1px var(--line); }
  .panel h2, .panel .sec-h h2 { font-size: 15px; font-weight: 700; letter-spacing: -.005em; margin: 0; }
  .panel .sec-h { margin-bottom: 10px; align-items: center; }
  .panel .sec-h a { font-size: 13px; padding: 0; }
  /* the feed's sections are direct grid items, so nothing leaves a hole */
  .p-feed { display: contents; }
  .p-month, .p-feed > :nth-child(n+3) { grid-column: 1 / -1; }
  .p-rank, .p-feed > :nth-child(1) { grid-column: 1 / 7; }
  .p-cal, .p-feed > :nth-child(2) { grid-column: 7 / -1; }
  .p-month-in { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 10px; }
  .p-month .big-rings { margin: 0; }
  #app .p-month .summary { box-shadow: none; background: none; padding: 0; margin: 0; display: block; }
  #app .p-month .sum-list { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; }
  #app .p-month .sum-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-align: left; flex-direction: row; }
  #app .p-month .sum-list li + li { border-top: 1px solid var(--line); }
  #app .p-month .sum-list li > span:last-child { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 12px; }
  #app .p-month .sum-list small { font-size: 14px; color: var(--ink-2); }
  #app .p-month .sum-list b { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .p-month .hint { text-align: left !important; margin-top: 10px !important; font-size: 13px; }
  .p-month .rest-row { justify-content: flex-start; margin-top: 8px; }

  .panel .rank-list { gap: 0; }
  #app .panel .rank-list li { min-height: 48px; padding: 7px 4px; border-radius: 0; background: none; box-shadow: none; }
  #app .panel .rank-list li + li { border-top: 1px solid var(--line); }
  .panel .rank-list li.me b { color: var(--accent-text); }
  .panel .rank-list .r b { font-size: 16px; }
  .panel .rank-list small { font-size: 12px; }
  #app .panel .rank-list .grow small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app .panel .talk { margin-top: 10px; padding: 0; background: none; box-shadow: none; text-align: left; font-size: 13px; font-weight: 500; color: var(--ink-2); }
  .panel .cal, .panel .month { background: none; box-shadow: none; padding: 0; }
  .p-feed > * { margin-top: 0 !important; min-width: 0; }
  #app .p-feed > .sec { padding: 16px 18px; border-radius: 12px; background: var(--ground-2); box-shadow: 0 0 0 1px var(--line); }
  #app .p-feed > .sec .sec-h h2 { font-size: 15px; }
  #app .p-feed > .sec .sec-h { margin-bottom: 8px; align-items: center; }
  #app .p-feed > .sec .sec-h a { font-size: 13px; padding: 0; }
  #app .p-feed .feed, #app .p-feed .quotes { box-shadow: none; background: none; padding: 0; }
  .p-cal h2, .p-cal b { white-space: nowrap; }

  /* ---------- Ranking ---------- */
  #app .rank-list li { min-height: 56px; }
  #app .podium { margin-top: 8px; }

  /* ---------- Treinos: one line per workout ---------- */
  #app .wlist li { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 10px 0; align-items: center; }
  #app .wlist .thumb { width: 52px; height: 52px; border-radius: 8px; }
  #app .feed, #app .wlist, #app .ex { padding: 2px 14px; }
  #app .wlist li > div { position: relative; padding-right: 200px; }
  #app .wlist .w-acts { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; display: flex; gap: 6px; }

  /* ---------- Pro ---------- */
  #view .cols.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 20px; }
  #view .day-nav { max-width: 360px; margin-left: 0; }
  #view .sec { margin-top: 20px; }
  #view .col > .sec:first-child { margin-top: 0; }
}

@media (min-width: 1280px) {
  .p-month { grid-column: 1 / 6; grid-row: 1; }
  .p-rank { grid-column: 6 / 10; grid-row: 1 / 3; }
  .p-cal { grid-column: 10 / -1; grid-row: 1; }
  .p-feed > :nth-child(1) { grid-column: 1 / 6; grid-row: 2; }
  .p-feed > :nth-child(2) { grid-column: 10 / -1; grid-row: 2; }
  .dash:not(:has(.p-rank)) .p-cal { grid-column: 6 / -1; }
  .dash:not(:has(.p-rank)) .p-feed > :nth-child(1) { grid-column: 1 / 6; }
  .dash:not(:has(.p-rank)) .p-feed > :nth-child(2) { grid-column: 6 / -1; }
  .p-month-in { grid-template-columns: 196px minmax(0, 1fr); gap: 20px; }
  #app .p-cal .cal-h .tag { display: none; }
}

@media (min-width: 960px) {
  #view .cal-g button { aspect-ratio: auto; min-height: 92px; border-radius: 8px; align-items: flex-start; justify-content: flex-start; padding: 8px 10px; box-shadow: inset 0 0 0 1px var(--line); margin: 1px; }
  #view .tracker thead th { min-width: 27px; }
  #view .tracker td.c { width: 27px; }
  #view .tracker td.c button { width: 24px; height: 24px; border-radius: 6px; }
  #view .tracker .name { min-width: 176px; max-width: 176px; }
  #view .seg { max-width: 420px; }
  .goal-ring { grid-template-columns: 170px minmax(0, 1fr); justify-items: start; align-items: center; gap: 20px; margin-top: 8px; }
  .gr-ring { width: 170px; }
  .gr-in b { font-size: 36px; }
  #app .p-cal .cal-h .tag { white-space: nowrap; font-size: 12px; padding: 2px 8px; }
  #app .p-cal .cal-h b { font-size: 14px; }
  #app .p-feed .sec-h .link { padding: 0; font-size: 13px; }
}

/* real data: rows must never push the numbers out of a panel */
@media (min-width: 960px) {
  #app .panel .rank-list, #app .p-month .sum-list { grid-template-columns: minmax(0, 1fr); }
  #app .p-month .sum-list li > span:last-child { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
  #app .p-month .sum-ic { width: 34px; height: 34px; flex: none; }
  #app .p-month .sum-list small { font-size: 13px; }
  #app .p-month .pos small { display: none; }
  #app .p-month .sum-list li { padding: 8px 0; }
  #app .p-feed .react { height: 30px; min-height: 30px; padding: 0 10px; font-size: 14px; }
}

@media (min-width: 960px) {
  .dash { align-items: stretch; }
  #app .panel .rank-list .grow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app .panel .rank-list .r { flex: none; }
}

@media (min-width: 960px) {
  .mo-cap { display: none; }
  .bd-say { max-width: calc(var(--side) - 24px); }
  /* Grupos and other single-list pages: two columns, not one stretched phone column */
  #app > main.narrow:has(> .hello) { max-width: 1240px; columns: 2; column-gap: 24px; }
  #app > main.narrow:has(> .hello) > .top, #app > main.narrow:has(> .hello) > .hello { column-span: all; }
  #app > main.narrow:has(> .hello) > .sec { break-inside: avoid; margin: 0 0 24px; padding-top: 2px; }
  #app > main.narrow:has(> .hello) > .hello { margin-bottom: 16px; }
}

@media (min-width: 960px) { #app .panel .cal-week { padding: 0; background: none; box-shadow: none; margin: 0; } }