/* country — page styles for the country and region pages (layout only). Tokens and shared
   components only (see docs/DESIGN.md). */
@layer pages {
  /* A name with a caption under it (a citizen and their level, a region and its resources).
     Also used by the job market (jobs.rs). */
  /* Left here by the stylesheet split; they belong to the job market (jobs.rs) and the profile
     (profile.rs) and should move to their stylesheets. */

  /* ── Shared by the country and region pages ── */
  :is(.country-page, .region-page) .place-title { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
  :is(.country-page, .region-page) .place-title .flag.big { flex: none; }
  :is(.country-page, .region-page) .place-title p { margin-top: var(--sp-1); }
  :is(.country-page, .region-page) .place-flag { width: 72px; height: 48px; flex: none; border-radius: var(--r-sm); }
  :is(.country-page, .region-page) .here-pill { margin-left: var(--sp-2); vertical-align: 1px; }
  :is(.country-page, .region-page) .table-wrap { overflow-x: auto; }
  :is(.country-page, .region-page) .place-cell { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  :is(.country-page, .region-page) .only-phone { display: none; }
  :is(.country-page, .region-page) .fact-sub { display: block; margin-top: 2px; }
  :is(.country-page, .region-page) .cols-2 { align-items: start; }

  /* The four industries with their building art, on tinted tiles (DESIGN.md §10). */
  :is(.country-page, .region-page) .industry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
  :is(.country-page, .region-page) .industry { padding: var(--sp-4) var(--sp-2); }
  :is(.country-page, .region-page) .industry img { width: 64px; height: 48px; filter: var(--art-shadow); }
  :is(.country-page, .region-page) .industry b:not(.t-ok) { color: var(--text-2); }

  /* ── Country ── */
  .country-page .regions-table .col-res { width: 38%; }
  .country-page .regions-table tr.here { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
  .country-page .regions-table tr.here td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
  .country-page .region-name { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .country-page .cap-star { display: inline-flex; color: var(--gold-text); }
  .country-page .cap-star .icon { fill: currentColor; }
  .country-page .battles-table .sides { display: inline-flex; flex-wrap: wrap; gap: 0 var(--sp-2); }
  .country-page .battles-table .damage { display: inline-flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); min-width: 128px; }
  .country-page .row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }

  @media (max-width: 900px) {
    :is(.country-page, .region-page) .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    /* Phones: the four tabs fit without their icons; facts sit two by two, an odd last one spans. */
    .country-page .page-head .tab { padding: 0 var(--sp-3); }
    .country-page .page-head .tab .icon { display: none; }
    :is(.country-page, .region-page) .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.country-page, .region-page) .facts-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    :is(.country-page, .region-page) .card-head { flex-wrap: wrap; }
    :is(.country-page, .region-page) .place-title { gap: var(--sp-3); }
    :is(.country-page, .region-page) .place-title .flag.big { width: 54px; height: 36px; }
    :is(.country-page, .region-page) .only-phone { display: block; }
    :is(.country-page, .region-page) .table th, :is(.country-page, .region-page) .table td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    :is(.country-page, .region-page) .table th:first-child, :is(.country-page, .region-page) .table td:first-child { padding-left: 0; }
    :is(.country-page, .region-page) .table th:last-child, :is(.country-page, .region-page) .table td:last-child { padding-right: 0; }
    .country-page .col-res, .country-page .col-sides { display: none; }
    .country-page .battles-table .damage { min-width: 92px; }
    :is(.country-page, .region-page) .here-pill { margin: var(--sp-2) 0 0; display: flex; width: max-content; }
  }
}