/* ---------------------------------------------------------------------------
   Typography. Two self-hosted families, no requests to Google Fonts: Playfair
   Display for display type (page titles, the wordmark, text-only cover art),
   Inter for everything else. Loaded last on every page so the scale below is
   what wins wherever an older rule set a size.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/playfair-display-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
}

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  /* the size scale below, as tokens; new rules should use these instead of raw px */
  --fs-title: 48px;      /* page titles (36px under 768px) */
  --fs-section: 20px;    /* section titles */
  --fs-heading: 18px;    /* card, venue and sheet headings */
  --fs-body: 14px;       /* body, tables, buttons, inputs */
  --fs-nav: 13px;        /* nav items, card names */
  --fs-small: 12px;      /* secondary lines, chips, small buttons */
  --fs-label: 11px;      /* form labels, table headers, eyebrows */
  --fs-badge: 10px;
  --fs-input-touch: 16px; /* inputs on phones: under 16px iOS zooms the page on focus */

  /* Inter is self-hosted at 400/500/600 only, so anything heavier renders as 600 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 700;     /* Playfair Display */

  --radius-sm: 8px;      /* inputs, small buttons, tiles */
  --radius-md: 12px;     /* cards, sheets, primary buttons */
  --radius-lg: 16px;     /* large panels */
  --radius-pill: 999px;

  --control-h: 40px;     /* inputs and buttons in dense forms */
  --control-h-lg: 48px;  /* primary actions on auth pages */
}

html, body, button, input, select, textarea {
  font-family: var(--font-sans);
}

/* ---- display type ---------------------------------------------------------
   Page titles, the wordmark and the cover art that is only a name. */
h1, #main h1, .main h1, .stn-meta h1, .auth h1, .auth-card h1, .prof-page h1, .dash-page h1 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  h1, #main h1, .main h1, .stn-meta h1, .auth h1, .auth-card h1, .prof-page h1, .dash-page h1 {
    font-size: 48px !important;
  }
}
.logo, .side .logo, a.logo {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
}
.side .logo, .side a.logo { font-size: 20.7px !important; }   /* the rail's wordmark, 15% up */
.cover .cover-name, .stn-art .cover-name, .station .cover .cover-name {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ---- section titles: 20px ------------------------------------------------- */
.row-title h2, #main h2, .main h2, .admin h2, .stn-expect, .stn .stn-expect {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-section) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---- card / venue headings and modal titles: 18px ------------------------- */
.dash-name, .dash-card .dash-name, .sycf-sheet-box h2, .msheet-box h2, .place-menu h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* ---- body, tables, buttons, inputs: 14px ---------------------------------- */
body, table td,
.stn-tracks b, .stn .stn-tracks b, .stn-tracks small, .stn .stn-tracks small,
.stn-tdur, .stn .stn-tdur, .stn-desc, .stn .stn-desc {
  font-size: 14px;
}
button, input, select, textarea { font-size: var(--fs-body) !important; }
@media (max-width: 980px) {
  input, select, textarea { font-size: var(--fs-input-touch) !important; }
}
.stn-tracks b, .stn .stn-tracks b { font-weight: 500 !important; }
.stn-tracks small, .stn .stn-tracks small { font-weight: 400 !important; }

/* ---- nav items, card names, the signed-in name: 13px ---------------------- */
.side .nav-item, .side a.nav-item, .mtabs button,
.station h3, #accountName, .mbar-place {
  font-size: 13px !important;
}
.side .nav-item, .side a.nav-item, #accountName { font-weight: 500 !important; }
.mbar-place { font-weight: 600 !important; }
.station h3 { font-weight: 600 !important; line-height: 19px; }

/* ---- secondary lines, chips, small buttons: 12px -------------------------- */
.station p, .stn-sub, .stn .stn-sub, .tag-btn, .stn-tags .tag-btn, .stn-tags span,
.dash-card .pill, .dash-card .hrs, .muted, .player .now small {
  font-size: 12px !important;
}
/* the two-line clamp follows the smaller line height */
.station p { line-height: 16px !important; height: 36px; }
/* on mobile the text under every card is 20% larger (13 / 12 -> 15.6 / 14.4), line heights
   with it, so the two-line clamp still fits: 2 x 19 + 4 top padding */
@media (max-width: 980px) {
  .station h3 { font-size: 15.6px !important; line-height: 23px !important; }
  .station p { font-size: 14.4px !important; line-height: 19px !important; height: 42px; }
}
/* and its headings 10% larger: page titles 36 -> 39.6 (48 -> 52.8 from 768px), section titles 20 -> 22 */
@media (max-width: 980px) {
  h1, #main h1, .main h1, .stn-meta h1, .auth h1, .auth-card h1, .prof-page h1, .dash-page h1 { font-size: 39.6px !important; }
  .row-title h2, #main h2, .main h2, .stn-expect, .stn .stn-expect { font-size: 22px !important; }
}
@media (min-width: 768px) and (max-width: 980px) {
  h1, #main h1, .main h1, .stn-meta h1, .auth h1, .auth-card h1, .prof-page h1, .dash-page h1 { font-size: 52.8px !important; }
}
/* Home's own title is 20% smaller than the other page titles: 48 -> 38.4, 52.8 -> 42.24, 39.6 -> 31.68 */
#main h1.home-title { font-size: 38.4px !important; }
@media (max-width: 980px) { #main h1.home-title { font-size: 31.68px !important; } }
@media (min-width: 768px) and (max-width: 980px) { #main h1.home-title { font-size: 42.24px !important; } }
/* and every other in-app page title matches Home's; a station or playlist keeps its large
   title beside its cover, and Add a location keeps its own */
#main h1:not(.stn-meta h1, .stn-phone-hero h1, .add-loc-card h1), .admin h1 { font-size: 38.4px !important; }
@media (max-width: 980px) { #main h1:not(.stn-meta h1, .stn-phone-hero h1, .add-loc-card h1), .admin h1 { font-size: 31.68px !important; } }
@media (min-width: 768px) and (max-width: 980px) { #main h1:not(.stn-meta h1, .stn-phone-hero h1, .add-loc-card h1), .admin h1 { font-size: 42.24px !important; } }

/* ---- form labels, table headers, eyebrows: 11px --------------------------- */
label, .label, table th, .stn-room, .dash-eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* a checkbox label is a sentence, not an eyebrow */
label.check {
  font-size: 13px !important;
  font-weight: var(--fw-regular) !important;
  text-transform: none;
  letter-spacing: normal;
}

/* ---- badges: 10px --------------------------------------------------------- */
.cover .tag, .stn-badge, .station .tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
}

/* ---- the business strip under a cover, and corner tags: 9px --------------- */
.cover .strip, .badge-strip {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
}

/* ---- times read as columns of digits -------------------------------------- */
.times, #cur, #dur, .stn-tdur, .stn .stn-tdur, .dash-card .hrs, .prev-time {
  font-variant-numeric: tabular-nums;
}

/* Location settings subscription row: logo + name on the left, status under the name, action on the right */
#main .settings-page > .loc-sub {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 24px !important;
  width: 100% !important;
  margin-top: 28px !important;
  padding: 8px 0 22px !important;
}
#main .settings-page .loc-sub-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  min-width: 0 !important;
  margin: 0 !important;
}
#main .settings-page .loc-sub-brand img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  flex: none !important;
  object-fit: cover;
}
#main .settings-page .loc-sub-copy {
  text-align: left !important;
  min-width: 0 !important;
}
#main .settings-page .loc-sub-copy b {
  display: block !important;
  white-space: nowrap !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
#main .settings-page .loc-sub .ok,
#main .settings-page .loc-sub .no-sub {
  display: block !important;
  text-align: left !important;
  margin: 2px 0 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
#main .settings-page .loc-sub .ok { color: #C9A227 !important; }
#main .settings-page .loc-sub .no-sub { color: #e35d5d !important; }
#main .settings-page .loc-sub-act {
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#main .settings-page .set-row .ok,
#main .settings-page .set-row .no-sub {
  display: block !important;
  margin-top: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#main .settings-page .set-row .ok { color: #C9A227 !important; }
#main .settings-page .set-row .no-sub { color: #e35d5d !important; }