/* ==========================================================================
   Sayfarer — phrase pages (/travel-phrases/ and /<language>-travel-phrases/)

   Loaded after styles.css, which supplies the design tokens, the nav and the
   footer. Everything here is scoped to classes that appear only on the
   generated pages, so it can never collide with the lander.

   The type roles follow the app itself: Bricolage for the phrase, DM Mono for
   the pronunciation guide — the same pairing used on the phrase detail screen.
   ========================================================================== */

.phrasepage {
  padding-top: 44px;
  padding-bottom: 96px;
}

.phrasepage__intro { margin-bottom: 8px; }

/* ------------------------------------------------------- category groups */

.catgroup {
  margin-top: 52px;
  /* --cat is set inline per category, from the app's own palette. */
}

.catgroup__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--cat, var(--amber));
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: var(--ink);
}

.catgroup__emoji { font-size: 0.9em; }

/* --------------------------------------------------------------- phrases */

.phrases-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.phrase {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 20px 22px;
}

.phrase__en {
  margin: 0;
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.phrase__main {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.phrase__text {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--ink);
}

.phrase__roman {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--ink-3);
}

.phrase__romanlabel {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-inset);
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--violet);
}

.phrase__pron {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--amber-dark);
}

.phrase__when,
.phrase__note {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-4);
}

.phrase__note {
  padding-left: 14px;
  border-left: 2px solid var(--bg-inset);
  color: var(--muted-3);
}

/* -------------------------------------------------------------- variants */

.variants {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--border-card);
  display: grid;
  gap: 10px;
}

.variant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.variant__label {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-card);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-3);
}

.variant__text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.variant__roman { font-size: 15px; color: var(--ink-3); }

.variant__say {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--amber-dark);
}

/* ----------------------------------------------------------- play button */

/* The button itself is defined in styles.css — the home page grid uses it too
   and does not load this file. Only the smaller size for the alternate
   readings inside a phrase card belongs here. */

.variant .say { width: 32px; height: 32px; font-size: 11px; }

/* --------------------------------------------------------------- regions */

/*
 * Languages with regional variants (Spain / Latin America, Portugal / Brazil).
 * The switch mirrors the app's segmented control: links between the region
 * pages on language pages, buttons on share pages (see assets/js/region.js).
 * The badge marks a phrase worded differently in the other region, as the
 * app's phrase list does.
 */
.regionswitch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 22px;
  padding: 4px;
  border-radius: 12px;
  background: #e9ebf1;
}

.regionswitch a,
.regionswitch button {
  padding: 9px 16px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: #8087a0;
  cursor: pointer;
}

.regionswitch a:hover,
.regionswitch button:hover { color: var(--ink); }

.regionswitch [aria-current="page"],
.regionswitch [aria-pressed="true"] {
  background: var(--bg-white);
  box-shadow: 0 1px 2px rgba(20, 24, 50, 0.08);
  color: var(--ink);
}

.catgroup > .regionswitch { margin: 0 0 4px; }

.phrases-list[hidden] { display: none; }

.regionbadge {
  flex: none;
  padding: 2px 7px;
  border-radius: 6px;
  background: #faeede;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--amber-dark);
}

.regionnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  font-size: 14.5px;
  color: var(--muted-3);
}

/* ---------------------------------------------------------- locked tiers */

.locked {
  margin-top: 64px;
  padding: 28px 30px;
  background: var(--bg-inset);
  border-radius: 22px;
}

.locked__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.locked__lede { margin: 6px 0 18px; font-size: 15.5px; color: var(--ink-4); }

.locked__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.locked__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--bg-white);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
}

.locked__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* --------------------------------------------------------------- get app */

.getapp {
  margin-top: 32px;
  padding: 32px 34px;
  background: var(--bg-contact);
  border-radius: 22px;
}

.getapp__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: var(--ink);
}

.getapp__body {
  margin: 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-4);
}

.getapp__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

/* The waiting platform's line, sitting beside the live badge. Quieter than
   .getapp__soon, which is the whole-panel "nothing is out yet" voice — this
   one is a footnote to a badge that IS there. */
.getapp__pending {
  font-size: 14px;
  color: var(--ink-4);
  line-height: 44px;
  white-space: nowrap;
}

/* Pre-launch stand-in for the badges above — see SHOW_APP_ACTIVE_CTA. */
.getapp__soon {
  margin: 22px 0 0;
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted-3);
}

/* ------------------------------------------------------------- showcase */

/* The drifting screen rail is reused from the home page, but there it is a
   full-bleed band directly under <body>. Here it lives inside the padded
   <main>, so it reads as a contained panel instead — rounded to match the
   .locked and .getapp blocks it sits between. Everything else (the drift,
   the stagger, the edge mask, the reduced-motion fallback) comes from
   styles.css unchanged. */
.phrasepage .showcase {
  margin-top: 32px;
  border-radius: 22px;
}

/* -------------------------------------------------------- other languages */

.others { margin-top: 64px; }

.others__title {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.others__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.others__list a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg-white);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
}
.others__list a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ------------------------------------------------------------- share page */

/*
 * The /p/<language>/<phrase>/ share pages only. A universal link normally opens
 * the app on its own; this button is the way through when an in-app browser
 * (Instagram, TikTok) swallows the link instead.
 */
.openapp {
  margin-top: 26px;
  text-align: center;
}

.openapp__note {
  margin: 12px auto 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 620px) {
  .phrasepage { padding-top: 30px; }
  .phrase { padding: 17px 18px; }
  .locked, .getapp { padding: 24px 20px; }
}