/*
 * One type scale, one button, one card and one page width for the whole site.
 * Loaded after every other stylesheet (see layouts/app.blade.php), so a page can no longer drift from the others.
 *
 *   page title   30px   (hero of a deck / profile / home: 36px, an article: 40px)
 *   section      20px
 *   card title   18px
 *   label        12px, uppercase
 *   body         16px on a screen, 14px on a phone (the root size is 14px there)
 *   button       44px high (small: 36px), 12px corners, 14.7px text
 *   card         16px corners (the big header cards of a page: 24px)
 *   page width   1200px
 */

:root {
    --ts-h1: 30px;
    --ts-h1-hero: 36px;
    --ts-h1-article: 40px;
    --ts-h2: 20px;
    --ts-card-title: 18px;
    --ts-article-h2: 26px;
    --ts-article-h3: 20px;
    --ts-label: 12px;
    --ts-btn-h: 44px;
    --ts-btn-h-sm: 36px;
    --ts-btn-r: 12px;
    --ts-card-r: 16px;
    --ts-hero-r: 24px;
    --ts-page-w: 1200px;
}

/* ---------------------------------------------------------------- base and phone */
@media (max-width: 767.98px) {
    :root {
        --ts-h1: 24px;
        --ts-h1-hero: 26px;
        --ts-h1-article: 28px;
        --ts-h2: 18px;
        --ts-card-title: 16px;
        --ts-article-h2: 22px;
        --ts-article-h3: 18px;
    }
    html, html:root { font-size: 14px; }
    body { font-size: 1rem; line-height: 1.5; }
}
@media (max-width: 420px) {
    html, html:root { font-size: 14px; }
}

/* ---------------------------------------------------------------- page width */
@media (min-width: 1200px) {
    .container, .container-lg, .container-xl, .container-xxl { max-width: var(--ts-page-w); }
}
.container, .container-fluid { --bs-gutter-x: 2rem; }
.ix-page, .pf-page--wide { max-width: var(--ts-page-w); padding-left: 1rem; padding-right: 1rem; }

/* ---------------------------------------------------------------- page titles (h1) */
body :is(.ix-title, .me-title, .pf-title, .entry-page-title, .ts-h1, main h1.h3, .sheet-topbar__title) {
    font-size: var(--ts-h1) !important;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
body :is(.dashboard-title, .deck-display-title) {
    font-size: var(--ts-h1-hero) !important;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
body :is(.article-title, .article-index-title, .ts-h1--article) {
    font-size: var(--ts-h1-article) !important;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
body .ts-h1:is(.deck-display-title) { font-size: var(--ts-h1) !important; }
body .sheet-topbar__title { font-size: 22px !important; }
@media (max-width: 767.98px) { body .sheet-topbar__title { font-size: 18px !important; } }

/* ---------------------------------------------------------------- section titles (h2) */
body :is(.dt-sec-h h2, .ix-month-head h2, .hd-h2, .ix-head h2.ix-title, .matchups-head, .tl-path__title, .tl-verdict__title,
         .dc-sec > header > h2, .sheet-detail-title h2, .hd-top h2, .article-index-aside-copy h2, .article-result-title) {
    font-size: var(--ts-h2) !important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
/* the title of a card */
body :is(.ix-card > h2, .ix-card > div > h2, .ix-card > header > h2, .ix-deck-head h3, .article-card-title, .hd-card > h2) {
    font-size: var(--ts-card-title) !important;
    font-weight: 700;
    line-height: 1.25;
}
body .ix-card .dt-sec-h h2 { font-size: var(--ts-h2) !important; }

/* the small uppercase label over a block */
body :is(.hd-panel > h3, .hd-panel-head h3, .dt-panel > h3, .ix-section > h3, .ix-card > h3:not([class])) {
    font-size: var(--ts-label) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* long articles: guides, news, docs */
body .article-content h2 { font-size: var(--ts-article-h2) !important; line-height: 1.2; }
body .article-content h3 { font-size: var(--ts-article-h3) !important; line-height: 1.25; }

/* ---------------------------------------------------------------- buttons */
body :is(main, .modal-content, .mobile-sheet__panel) :is(.btn, .hd-btn, .ix-btn, .pf-btn, .deck-action-button):not(.btn-close):not(.remove-sideboard-row):not(.deck-actions-primary__more):not(.ix-btn--icon-only) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--ts-btn-h) !important;
    border-radius: var(--ts-btn-r) !important;
    font-size: 0.92rem !important;
    line-height: 1.2;
}
body :is(main, .modal-content) :is(.btn-sm, .hd-btn--sm, .ix-btn--sm, .pf-btn--sm):not(.remove-sideboard-row) {
    min-height: var(--ts-btn-h-sm) !important;
}
@media (max-width: 767.98px) {
    body :is(main, .modal-content) :is(.btn, .hd-btn, .ix-btn, .pf-btn, .deck-action-button) { font-size: 1rem !important; }
}

/* ---------------------------------------------------------------- cards */
body main :is(.card, .hd-card, .ix-card, .analytics-panel, .pf-card, .article-body-card, .dt-panel, .glass-effect) {
    border-radius: var(--ts-card-r);
}
body :is(.deck-hero-shell, .dashboard-hero, .article-hero-card, .pub-hero, .app-hero) { border-radius: var(--ts-hero-r); }

/* ---------------------------------------------------------------- chips, labels and small print never go under 12px / 11px */
body :is(.app-chip, .ix-pill, .dt-chip, .hd-pill, .badge, .ix-tag, .analytics-chip) { font-size: 12px !important; }
body main :is(small, .small, .text-muted.small) { font-size: max(12px, 0.8125rem); }
body main :is(.form-control, .form-select, .form-control-modern, .form-select-modern, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], textarea, select):not(.sheet-card-input) {
    font-size: 16px;
}
body :is(.hd-lab, .hd-dkv span, .hd-edge span, .hd-feed-kind, .hd-bcol span, .deck-hero-stat-label, .pub-stat span, .ix-kv span, .dt-tile span,
         .analytics-metric-label, .matchup-summary-title, .strategy-label, .ms-tile__label, .deck-section-rail-title, .cx-column__label, .cx-column__n) {
    font-size: max(11px, 0.6875rem) !important;
}

/* ---------------------------------------------------------------- descriptive text: 13px everywhere
   the line under a title, the explanation in a card, a hint under a field. Articles, guides and docs keep their own reading size. */
body main :is(.hd-card, .ix-card, .dt-panel, .analytics-panel, .pf-card, .card, .me-card, .pub-lock, .app-hero, .dashboard-hero, .pub-hero,
              .strategy-overview-card, .deck-insight-card, .dc-mini, .hd-next, .tl-path, .tl-verdict) p:not(.dt-label):not(.pf-eyebrow):not(.tl-eyebrow):not(.hd-eyebrow),
body :is(.ix-sub, .hd-sub, .pf-sub, .pf-small, .me-sub, .me-hint, .dashboard-subtitle, .ix-muted, .hd-muted, .tl-muted, .tl-path__text,
         .tl-verdict__text, .analytics-panel-subtitle, .deck-insight-copy, .strategy-overview-copy, .sheet-smart-copy, .pub-lock__copy p,
         .article-card-excerpt, .article-index-subtitle, .article-index-aside-copy p, .pm-tool__head .dt-label, p.text-sm, main .col-md-8 > p.text-muted) {
    font-size: 13px !important;
    line-height: 1.45;
}
/* ---------------------------------------------------------------- small print: never under 11px, on any screen */
body :is(.sheet-pill, .ix-rd, .ix-curve-lab span, .ix-mstat span, .quick-type-head span, .quick-type-head b, .ix-date span, .ix-record em,
         .ix-rc span, .ix-stat span, .dt-kv span, .dt-rnum, .dt-rres span, th.sortable, th.text-center, .sheet-chip-group__title, .context-back-meta,
         .deck-insight-list-marker, .sheet-type-head span, .sheet-type-head b, .text-muted.small, .dt-sec-h span, .tl-path__steps span,
         .article-card-tag, .hd-rank, .hd-delta, .ix-cap, .me-label, .me-hint, .tl-eyebrow, .pf-eyebrow, .pm-table th, .ps-field span,
         .sideboard-filter, .stats-filter-bar__label, .dt-pip, .guide-sideboard-plan-context-label, .hd-ins span, figcaption) {
    font-size: max(11px, 0.6875rem) !important;
}
body main :is(.hd-kpi, .hd-lrow, .hd-deck-top, .hd-feed-main, .is-best, .is-worst, .dt-kv, .dt-vs, .dt-bar-head, .dt-tile, .ix-stat, .ix-place,
              .ix-deck, .ix-bd-name, .ix-lmain, .matchups-head, .deck-section-picker__text) small {
    font-size: 11px !important;
}
/* ---------------------------------------------------------------- phone: nothing readable is under 12px, nothing small is under 11px */
@media (max-width: 767.98px) {
    /* running text */
    body :is(.article-content, .guide-content) :is(p, li, strong, a, .card-hover-trigger),
    body :is(.dc-sec, .dc-mini) :is(p, li, strong),
    body .card-spotlight-analysis p,
    body .guide-sideboard-plan-line strong,
    body :is(.matchup-mobile-name, .matchup-mobile-metric-value) { font-size: 1rem !important; }
    body :is(.matchup-mobile-name, .matchup-mobile-metric-value) { font-size: 13px !important; }

    /* what goes with a line of text: dates, records, deck names under a title, notes */
    body :is(.ix-deck-sub, .ix-meta, .ix-start, .ix-note, .ix-lmain small, .ix-deck small, .ix-record em, .ix-rank,
             .ix-rd, .ix-seg a, .ix-vs em, .ix-month-head span, .ix-wr span, .ix-stat span, .ix-rc span, .ix-ellipsis, .font-medium,
             .sheet-pill, .matchup-mobile-empty, .matchup-summary-label, .dt-fact,
             .guide-toc-sub, .guide-deck-tile-name, .guide-deck-tile-qty, .guide-sideboard-plan-col-head, .guide-matchup-wr,
             .card-spotlight-frame-type, .ix-kv span) { font-size: 12px !important; }

    /* the small uppercase labels */
    body :is(.matchup-mobile-metric-label, .matchup-mobile-matchcount, .strategy-label, .matchup-summary-title, .ix-eyebrow,
             .dt-kv span, .hd-dkv span, .context-back-meta, .article-card-stat-label, .ix-mstat span, .ix-curve-lab span,
             .ix-date span, .ix-rd) { font-size: 11px !important; }
    body .ix-rd { font-size: 12px !important; }
}