/* ═══════════════════════════════════════════════════
   PDGA Ratings — Mobile Styles (≤ 880px)
   All rules scoped inside @media (max-width: 880px)
   unless marked "default hidden" (for elements that
   must be display:none on desktop too).
   ═══════════════════════════════════════════════════ */

/* ── Default-hidden mobile elements ──────────────── */
/* Hidden on ALL viewports; mobile.css un-hides them  */

.topbar__mobile      { display: none; }
.mobile-list         { display: none; }
.mobile-section-head { display: none; }
.m-tab-pill          { display: none; }
.m-search-input      { display: none; }

/* ═══════════════════════════════════════════════════ */
@media (max-width: 880px) {

    /* ── Desktop elements → hide on mobile ─────────── */

    .topbar__inner    { display: none !important; }
    .kpi-strip        { display: none !important; }
    .table-toolbar    { display: none !important; }

    /* Hide desktop search card on mobile (mobile has .m-search-input instead) */
    .card-section     { display: none; }

    /* ── Mobile course search input ─────────────────── */

    .m-search-input {
        display: block;
        width: 100%;
        height: 38px;
        padding: 0 12px;
        background: var(--paper-2);
        border: 1px solid var(--line-2);
        border-radius: 10px;
        font-family: var(--font-sans);
        font-size: 14px;
        color: var(--ink);
        outline: none;
        box-sizing: border-box;
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    .m-search-input::placeholder {
        color: var(--ink-3);
        opacity: 0.7;
    }

    .m-search-input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
    }

    /* Hide the desktop table but keep .table-card as wrapper. Must stay a direct-child
       selector: the mobile cards render inside the same #ratings-table container, so a
       descendant selector also hides the round-breakdown table nested in each card. */
    .table-card > #ratings-table > table,
    #ratings-table > table {
        display: none;
    }

    /* ── Container ──────────────────────────────────── */

    .container {
        --m-container-pad-bottom: 80px;
        padding: 10px 12px var(--m-container-pad-bottom);
        gap: 12px;
    }

    /* ── Topbar mobile ──────────────────────────────── */

    .topbar__mobile {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .topbar__mobile-row1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px 8px;
        gap: 10px;
    }

    .topbar__mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    .topbar__mobile-mark {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, black));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-shrink: 0;
    }

    .topbar__mobile-mark svg {
        width: 16px;
        height: 16px;
    }

    .topbar__mobile-brand-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .topbar__mobile-title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--ink);
    }

    .topbar__mobile-sub {
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-3);
    }

    .topbar__mobile-refresh {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: var(--paper);
        color: var(--ink);
        cursor: pointer;
        font-size: 16px;
        font-family: var(--font-sans);
        transition: background 120ms ease, border-color 120ms ease;
        flex-shrink: 0;
        padding: 0;
    }

    .topbar__mobile-refresh:hover:not(:disabled) {
        background: var(--hover);
        border-color: color-mix(in oklab, var(--line) 60%, var(--ink-3));
    }

    .topbar__mobile-refresh:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .topbar__mobile-refresh .topbar__refresh-spinner {
        display: none;
        width: 14px;
        height: 14px;
        border: 2px solid var(--line);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: topbar-spin 0.7s linear infinite;
    }

    .topbar__mobile-refresh.htmx-request .topbar__refresh-spinner {
        display: inline-block;
    }

    .topbar__mobile-refresh.htmx-request .topbar__refresh-icon {
        display: none;
    }

    .topbar__mobile-row2 {
        padding: 0 16px 10px;
    }

    .topbar__mobile-nav {
        display: flex;
        background: var(--paper-2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 4px;
        gap: 2px;
    }

    .topbar__mobile-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 28px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink-2);
        text-decoration: none;
        transition: color 120ms ease, background 120ms ease;
    }

    .topbar__mobile-nav a:hover {
        color: var(--ink);
    }

    .topbar__mobile-nav a.active {
        background: var(--paper);
        color: var(--ink);
        box-shadow: var(--shadow-card);
    }

    /* ── Mobile section head ────────────────────────── */

    .mobile-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0 2px;
    }

    /* pill-button for "Trend chart" toggle in mobile section head */
    .pill-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid var(--line-2);
        background: var(--paper-2);
        color: var(--ink-2);
        font-size: 11px;
        font-weight: 600;
        font-family: var(--font-sans);
        cursor: pointer;
        transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    }

    .pill-button:hover {
        background: var(--hover);
        border-color: var(--line);
    }

    .pill-button[aria-pressed="true"] {
        background: color-mix(in oklab, var(--accent) 10%, white);
        border-color: color-mix(in oklab, var(--accent) 35%, var(--line-2));
        color: var(--accent-text);
    }

    /* ── Mobile list wrapper ────────────────────────── */

    .mobile-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 90px;
    }

    /* ── Player card ────────────────────────────────── */

    .m-card {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px;
        box-shadow: var(--shadow-card);
        cursor: pointer;
        transition: background 120ms ease;
    }

    .m-card:hover {
        background: var(--hover);
    }

    .m-card__head {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .m-rank-chip {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        background: var(--paper-2);
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--ink-3);
        flex-shrink: 0;
    }

    .m-rank-chip--first {
        background: var(--accent-soft);
        color: var(--accent-text);
        border-color: color-mix(in oklab, var(--accent) 25%, transparent);
    }

    .m-card__name-stack {
        display: flex;
        flex-direction: column;
        gap: 1px;
        flex: 1;
        min-width: 0;
    }

    .m-player-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.005em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-player-name a {
        color: inherit;
        text-decoration: none;
    }

    .m-pdga-num {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--ink-3);
    }

    .m-chevron {
        color: var(--ink-3);
        font-size: 14px;
        flex-shrink: 0;
        transition: transform 180ms ease;
        line-height: 1;
    }

    .m-card.is-open .m-chevron {
        transform: rotate(180deg);
    }

    /* Action buttons: hidden by default, revealed only when the card is open.
       Larger than the desktop icons to give a comfortable touch target (≥44px). */
    .m-card__head .m-refresh-icon,
    .m-card__head .m-target-icon {
        display: none;
    }

    .m-card.is-open .m-card__head .m-refresh-icon,
    .m-card.is-open .m-card__head .m-target-icon {
        display: grid;
        width: 44px;
        height: 44px;
        margin-left: 0;
        font-size: 15px;
        opacity: 0.7;
        flex-shrink: 0;
    }

    .m-card.is-open .m-card__head .m-refresh-icon:active,
    .m-card.is-open .m-card__head .m-target-icon:active {
        opacity: 1;
        color: var(--accent);
    }

    /* Spin only the icon glyph, not the 44px button box — otherwise the button's
       lingering touch-hover frame (background + border) rotates too, which looks odd. */
    .m-card.is-open .m-card__head .m-refresh-icon.spinning {
        animation: none;
    }

    .m-card.is-open .m-card__head .m-refresh-icon.spinning i {
        display: inline-block;
        animation: spin 0.8s linear infinite;
    }

    .m-card__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        margin-top: 8px;
    }

    .m-card__stats {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .m-stat-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .m-stat-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ink-3);
        width: 62px;
        flex-shrink: 0;
    }

    .m-stat-sublabel {
        display: block;
        font-size: 10px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
    }

    .m-num {
        font-family: var(--font-mono);
        font-feature-settings: "tnum", "zero";
        font-size: 18px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .m-num--predicted {
        color: var(--ink-2);
    }

    /* Override delta-pill size inside mobile cards */
    .m-card .delta-pill {
        font-size: 11px;
        padding: 2px 7px 2px 5px;
    }

    .m-card__sparkline {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    .m-chart-spark {
        display: block;
    }

    /* ── Player card expand panel ───────────────────── */

    .m-card__expand {
        display: none;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
    }

    .m-card.is-open .m-card__expand {
        display: block;
    }

    .m-chart {
        width: 100%;
        max-width: 480px;
    }

    .m-detail-grid {
        display: grid;
        grid-template-columns: 1fr;
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
    }

    .m-detail-grid > div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px dashed var(--line);
    }

    .m-detail-grid > div:last-child {
        border-bottom: none;
    }

    .m-detail-grid dt {
        color: var(--ink-2);
        font-size: 12px;
        font-weight: 400;
        flex-shrink: 0;
    }

    .m-detail-grid dd {
        color: var(--ink);
        font-size: 12px;
        font-family: var(--font-mono);
        font-feature-settings: "tnum", "zero";
        margin: 0;
        text-align: right;
    }

    /* ── Courses mobile tab pill ────────────────────── */

    .m-tab-pill {
        display: flex;
        background: var(--paper-2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 4px;
        gap: 2px;
        margin-bottom: 4px;
    }

    .m-tab-pill__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 30px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
        font-family: var(--font-sans);
        color: var(--ink-2);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: color 120ms ease, background 120ms ease;
    }

    .m-tab-pill__btn--active {
        background: var(--paper);
        color: var(--ink);
        box-shadow: var(--shadow-card);
    }

    .m-tab-pill__btn--disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* ── Table-card: remove overflow:hidden on mobile ─ */
    .table-card {
        overflow: visible;
    }

    /* ── Round breakdown table ──────────────────────── */
    /* overflow-x: auto lives in shared.css and does the actual scrolling;
       this just bleeds the scroll region out to the card edges so it has
       room to scroll instead of squeezing columns inside the card padding. */
    .round-breakdown-scroll {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .round-breakdown-table th,
    .round-breakdown-table td {
        padding: 8px;
    }

    /* ── Modals ───────────────────────────────── */

    /* These override .modal rules in players.css, which is why layout.ejs loads
       mobile.css after the page stylesheets. */

    /* Anchored to the top rather than centred: the on-screen keyboard shrinks the
       viewport, and a centred dialog gets pushed off the top of the screen. */
    .modal {
        align-items: flex-start;
        padding: 16px 12px;
        overflow-y: auto;
    }

    /* dvh follows the keyboard, vh does not — vh stays as the fallback for browsers
       without dynamic viewport units. */
    .modal-content {
        width: 100%;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        display: flex;
        flex-direction: column;
    }

    .modal-header {
        padding: 16px 20px;
        flex-shrink: 0;
    }

    /* Only the body scrolls, so the header and the actions stay reachable however
       long the target-rating result grows. */
    .modal-body {
        padding: 16px 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        flex-shrink: 0;
    }

} /* end @media (max-width: 880px) */