/* ══════════ HOME: THE LOG SESSION SPLIT BUTTON ══════════
       One control, two halves, no "what are you logging?" step in between — that intermediate
       sheet was tried and walked back; the button itself now communicates the two choices. Sits
       right under the welcome header (index.html) since starting a session is the primary coach
       action on this screen, not something to bury below the schedule/KPIs.

       Built as one bordered pill (same dark/rounded/lime card language every other Home control
       uses) split by a thin divider rather than two separate buttons, so it visually reads as ONE
       decision with two answers rather than two competing actions. */
    .hd-split{display:flex;align-items:stretch;border:1px solid var(--lime);border-radius:14px;background:var(--lime-d);box-shadow:var(--sh);overflow:hidden;margin:.85rem 0}
    .hd-split__half{flex:1;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1.05rem .75rem;background:transparent;border:0;cursor:pointer;text-align:center;transition:background var(--ease)}
    .hd-split__half:hover{background:var(--lime-g)}
    .hd-split__half .hd-action__ic{width:38px;height:38px;background:var(--lime);color:var(--on-accent);flex-shrink:0}
    .hd-split__label{font-family:var(--fd);font-weight:800;font-size:.92rem;color:var(--text);line-height:1.2}
    .hd-split__divider{width:1px;flex-shrink:0;background:rgba(170,255,0,.3);margin:.7rem 0}
    @media(max-width:420px){
      .hd-split__half{flex-direction:column;gap:.4rem;padding:.85rem .5rem}
      .hd-split__label{font-size:.78rem}
    }
    .hd-actions{display:flex;flex-direction:column;gap:.6rem;margin:.85rem 0}
    .hd-action{display:flex;align-items:center;gap:.85rem;width:100%;padding:.9rem 1.05rem;border:1px solid var(--b1);border-radius:14px;background:var(--s1);box-shadow:var(--sh);cursor:pointer;text-align:left;transition:all var(--ease)}
    .hd-action:hover{border-color:var(--lime);background:var(--lime-d)}
    .hd-action__ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--s2);color:var(--t2);flex-shrink:0;transition:all var(--ease)}
    .hd-action:hover .hd-action__ic{background:var(--lime);color:var(--on-accent)}
    .hd-action__ic .ic{width:16px;height:16px}
    .hd-action__body{flex:1;min-width:0}
    .hd-action__label{display:block;font-family:var(--fd);font-weight:800;font-size:.9rem;color:var(--text);line-height:1.2}
    .hd-action__sub{display:block;font-family:var(--fb);font-size:.72rem;color:var(--t3);margin-top:.12rem}
    .hd-action__go{width:17px;height:17px;color:var(--t3);flex-shrink:0}
    .hd-action:hover .hd-action__go{color:var(--lime)}
    /* The primary action: a lime border/wash at rest (not just on hover, like the plain card above),
       a bigger icon tile, and a slightly larger label — enough to visually outrank Log Trial
       underneath it without introducing a new visual language on top of the dark/rounded/lime
       system every other card on this page already uses. */
    .hd-action--primary{border-color:var(--lime);background:var(--lime-d);padding:1.05rem 1.15rem}
    .hd-action--primary .hd-action__ic{width:42px;height:42px;background:var(--lime);color:var(--on-accent)}
    .hd-action--primary .hd-action__ic .ic{width:19px;height:19px}
    .hd-action--primary .hd-action__label{font-size:1rem}
    .hd-action--primary .hd-action__sub{color:var(--t2)}
    .hd-action--primary .hd-action__go{color:var(--lime)}
    .hd-action--primary:hover{background:var(--lime-g)}
    /* The schedule owns its row now. .hd-grid is still a two-column grid everywhere else on Home;
       this card simply is not in one. */
    .hd-card--schedule{margin-bottom:.85rem}

    /* ══════════ THE CLASS SHEET'S NEXT STEP ══════════
       Full width and solid, directly under the check-in count, because it is the one thing the
       coach does after taking attendance. Only rendered once somebody is actually in the room —
       there is nothing to log for an empty class, and a disabled button would be a worse way to say
       so than the check-in list already sitting above it. */
    .sd-logall{width:100%;margin:.9rem 0 .2rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
    .sd-logall .ic{width:16px;height:16px}
    .sd-logall__hint{margin:.1rem 0 .6rem;text-align:center}
    /* The per-athlete fallback, on a checked-in row. Sits quiet until the row is hovered: it is the
       exception (one athlete, something the class did not do), and competing for attention with the
       tick that says they are here would misrepresent which one the coach usually wants. */
    .sd-ath__log{opacity:.45;transition:opacity var(--ease),color var(--ease)}
    .sd-ath:hover .sd-ath__log{opacity:1}
    .sd-ath__log:focus-visible{opacity:1}
    .sd-ath__log .ic{width:14px;height:14px}

    /* ══════════ LOG ATHLETE SESSIONS ══════════
       The context header. A coach mid-class must be able to confirm at a glance that they are
       typing into the right session, so this repeats what the class modal said in the same order:
       what it is, when and with whom, then how full it is. */
    .cl-head{display:flex;flex-direction:column;align-items:stretch;gap:.8rem;background:var(--s1);border:1px solid var(--b1);border-radius:14px;box-shadow:var(--sh);padding:1rem 1.15rem;margin-bottom:.9rem}
    .cl-head__main{flex:1;min-width:0}
    .cl-head__title{font-family:var(--fd);font-weight:800;font-size:1.15rem;color:var(--text);line-height:1.2}
    .cl-head__meta{font-family:var(--fb);font-size:.8rem;color:var(--t2);margin-top:.2rem}
    .cl-head__date{font-family:var(--fb);font-size:.78rem;color:var(--t3);margin-top:.3rem}
    .cl-head__date b{color:var(--text)}
    .cl-head__status{display:inline-block;margin-top:.5rem}

    /* The Attendance bar — this is how athletes get checked in (it opens the check-in screen), so
       it's a solid green bar the full width of the class header card (under the class info, above the
       metrics), not a small control in a corner. Label + "in / total" count, chevron on the right says "goes deeper". */
    .cl-attbar{display:flex;width:100%;margin:0;padding:.85rem 1.05rem;gap:.7rem;font-size:1rem;font-weight:700;border-radius:10px;justify-content:flex-start}
    .cl-attbar .ic{width:20px;height:20px}
    .cl-attbar__label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;margin-right:auto}
    .cl-attbar__sub{font-size:.72rem;font-weight:600;opacity:.75}
    .cl-attbar__n{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:24px;padding:0 .5rem;border-radius:999px;background:rgba(0,0,0,.22);font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums}
    .cl-attbar__chev{display:inline-flex}
    .cl-attbar__chev .ic{width:16px;height:16px}
    /* Metrics panel header: one tap target that folds the WHOLE section away, so on a phone the
       logging grid can sit right under the Attendance bar while a coach is entering numbers. */
    .panel.cl-metrics{padding:.55rem .85rem}
    .cl-metrics__head{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:0;cursor:pointer;background:none;border:0;color:var(--text)}
    .cl-metrics__text{display:flex;flex-direction:column;gap:0;min-width:0}
    .cl-metrics__title{font-family:var(--fd);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;line-height:1.15}
    .cl-metrics__count{font-family:var(--fb);font-size:.74rem;font-weight:600;color:var(--t3);white-space:nowrap}
    .cl-metrics__toggle{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--fb);font-size:.78rem;font-weight:700;color:var(--t2);background:var(--s2);border:1px solid var(--b2);border-radius:100px;padding:.3rem .65rem;white-space:nowrap}
    .cl-metrics__head:hover .cl-metrics__toggle{color:var(--text);border-color:var(--b3)}
    .cl-metrics__chev{display:inline-flex;transition:transform var(--ease)}
    .cl-metrics__chev .ic{width:14px;height:14px}
    .cl-metrics__chev.is-open{transform:rotate(90deg)}
    .cl-metrics__hint{margin:.5rem 0 0}
    #classLogChips[hidden]{display:none}

    @media(max-width:640px){
      .cl-head{padding:.85rem .9rem}
      .hd-action__sub{display:none}
    }

    /* Attendance, inline right after the athlete's name (class-log.js's afterLabel, gridHTML in
       metric-grid.js) — not off in its own column at the far right, so it reads as part of "who is
       this row" instead of a second, disconnected fact about it. Check-in and logging are merged
       onto one screen, so this control is only for what typing a number doesn't already cover:
       checking someone in with nothing to log, and undoing a check-in taken by mistake. */
    .cl-att{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--fb);font-weight:700;font-size:.68rem;letter-spacing:.02em;white-space:nowrap;padding:.4rem .65rem;border-radius:100px;border:1px solid var(--b2);background:var(--s2);color:var(--t2);flex-shrink:0}
    .cl-att .ic{width:13px;height:13px}
    button.cl-att--out{color:var(--lime);border-color:var(--lime);background:var(--lime-d)}
    button.cl-att--out:hover{background:var(--lime-g)}
    .cl-att--in{color:var(--t2);background:var(--s2);border-color:var(--b2)}
    /* Only an EXPLICIT class stamp is safe to undo from this screen (see unstampFromClass in
       attendance.js) — that's the only variant that's a clickable button; the plain <span> variant
       (an unstamped, matches-every-class record) intentionally offers nothing to tap. */
    button.cl-att--in:hover{color:var(--red);border-color:var(--red);background:var(--red-b)}
    /* Icon-only, once it's living beside the name rather than out in a wide trailing column — "Check
       In" keeps its label (it's the one a coach still has to decide to tap); "checked in" doesn't
       need to say so twice next to a name that's already sitting in the checked-in group. */
    .cl-att--icon{padding:.3rem;gap:0}
    .cl-att--icon .ic{width:14px;height:14px}

    /* ══════════ CHECK-IN SCREEN ══════════
       One level deeper than the grid (class-log.js's renderCheckinScreen). Rows/button come from
       schedule.css's .sd-pick* rules — the same primitives as the session modal. The list gets most
       of the screen since picking people is the whole job here, and the Check In button is pinned
       to the bottom so it is on screen however long the roster is. */
    .cl-ci__top{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
    .cl-ci__back{flex-shrink:0;padding:.6rem .85rem}
    .cl-ci__back .ic{width:15px;height:15px}
    .cl-ci__who{min-width:0}
    .cl-ci__title{font-family:var(--fd);font-weight:800;font-size:1.1rem;color:var(--text);line-height:1.2}
    .cl-ci__sub{font-family:var(--fb);font-size:.76rem;color:var(--t3);margin-top:.15rem}
    .cl-ci__sub b{color:var(--text)}
    .cl-checkin .sd-sec__head{font-size:.78rem;color:var(--text)}
    .cl-checkin .sd-sec__head span{font-size:.68rem;color:var(--t3)}
    .cl-checkin .cl-checkin__list{max-height:min(62vh,560px)}
    .cl-ci__foot{position:sticky;bottom:0;z-index:2;background:var(--bg);padding:.8rem 0 .9rem;margin-top:.4rem}
    .cl-ci__foot .sd-pick__go{padding:.95rem 1.1rem;font-size:.95rem}

    /* ══════════ QUADRANT METRIC PICKER ══════════
       Categories as a 2-column grid of tiles (metric-grid.js tilePickerHTML) so the picker is a
       couple of short rows rather than a stack of open accordions pushing the grid off screen. */
    .mg-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.5rem;align-items:start}
    .mg-tile{border:1px solid var(--b2);border-radius:12px;background:var(--s2);color:var(--text);min-width:0;transition:border-color var(--ease),background var(--ease)}
    .mg-tile:hover{border-color:var(--b3)}
    .mg-tile__head{display:flex;flex-direction:column;justify-content:center;gap:.1rem;width:100%;text-align:left;min-height:54px;padding:.55rem .8rem;background:none;border:0;color:inherit;cursor:pointer}
    .mg-tile__name{font-family:var(--fd);font-weight:700;font-size:.9rem;line-height:1.2;overflow-wrap:anywhere}
    .mg-tile__count{font-family:var(--fb);font-size:.7rem;font-weight:600;color:var(--t3)}
    .mg-tile.has-picked{border-color:var(--lime)}
    .mg-tile.has-picked .mg-tile__count{color:var(--lime)}
    .mg-tile.is-active{background:var(--lime-d);border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
    /* The metrics unfold INSIDE their own tile, stacked one per line so long names wrap and stay
       readable in a half-width quadrant. */
    .mg-tile__body{padding:0 .6rem .6rem;border-top:1px solid var(--b2)}
    .mg-tile__body .metric-chips{flex-direction:column;align-items:stretch;gap:.4rem;margin-top:.55rem}
    .mg-tile__body .mchip{justify-content:flex-start;text-align:left;white-space:normal;line-height:1.2;min-height:40px;border-radius:12px;padding:.5rem .75rem}
    .mg-tile__body .acc--sub{margin-top:.4rem}
    .mg-tile__body .acc--sub .acc__body{padding:0 0 .3rem .4rem}
    .mg-tile__body .acc--sub>summary{padding:.4rem .4rem}