/* Immigration-options pages (server-rendered, standalone).
 *
 * These pages are complete HTML documents served by express, not SPA routes,
 * so they load the site's built stylesheet and then this one. The built sheet
 * is almost entirely class-scoped to React components: what a bare semantic
 * document actually inherits from it is the @font-face set, the :root
 * typography and palette tokens, and *{box-sizing:border-box}. Layout,
 * heading scale and reading measure are not in there, so they are here -- and
 * only they are. Everything below reuses the app's own custom properties
 * rather than restating its colours. The page surface it does supply is the
 * app shell's, which is wrong for a document with no shell; see below.
 *
 * The pages these style are an index and the guide's own outcome nodes, and
 * nothing else: the hero, kicker, lead, jump nav, card excerpts, call to
 * action and disclaimer this sheet used to dress were all agent-written and
 * have been removed. Their rules went with them. If you find yourself adding a
 * rule for a new decorative element, check first that its words are Shahid's.
 *
 * This file lives in public/ rather than src/ so the build copies it into
 * dist/ verbatim. It is not bundled or content-hashed, because a hashed sheet
 * has to be imported from src/, and src/ is not this feature's to touch.
 */

/* The app's safe-area chrome, switched off for these documents.
 *
 * index.css paints the notch area behind the React shell. Three rules do it:
 *
 *   :root,html,body,#root { background: var(--safari-safe-area-color) }
 *   body::before { position:fixed; top:0; height:max(env(safe-area-inset-top),1px);
 *                  background: var(--safari-safe-area-color) }
 *   html,body,#root { min-height:100% }
 *
 * --safari-safe-area-color is #746f86. Inside the app none of it is ever seen:
 * #root covers body and the header covers the strip. These documents have no
 * #root and no app header, so body's own background showed through as a flat
 * purple-grey page behind the content, and the strip showed as a hairline
 * along the top edge on any viewport with no notch (the max() floor makes it
 * 1px).
 *
 * Neutralised here rather than in the app. This sheet is loaded only by the
 * immigration-options documents, and the .gt-page scope means it could not
 * reach the app even if the file were linked somewhere else.
 *
 * The page surface is the firm's own paper recipe -- the same tile, tint and
 * base colour .qa-dashboard-shell uses.
 */
html:has(> body.gt-page),
body.gt-page {
  background:
    linear-gradient(rgb(255 253 248 / 82%), rgb(255 253 248 / 82%)),
    url("/brand/patterns/security-paper-tile.svg"),
    #f6f1e8;
}

/* html paints the canvas, so it carries the same surface: without it a short
 * page showed a band of a different tone below the end of body. min-height
 * keeps body covering the viewport as well, which is what holds the page
 * together if :has() is ever unavailable. */
body.gt-page {
  min-height: 100dvh;
}

body.gt-page::before {
  content: none;
}

/* Two widths. The index is a list of links and can use the room; a topic page
 * is one column of prose, and at 62rem the text sat at its measure against the
 * left edge of a much wider card with an empty gutter beside it. */
.gt-shell {
  max-width: 56rem;
  margin: 0 auto;
  padding: 22px 18px 64px;
}

.gt-page--topic .gt-shell {
  max-width: 48rem;
}

.gt-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.86rem;
}

.gt-topbar a {
  color: var(--route-accent, #315d4d);
  font-weight: 500;
  text-decoration: none;
}

.gt-topbar a:hover,
.gt-topbar a:focus-visible {
  text-decoration: underline;
}

.gt-page main > h1 {
  margin: 0 0 22px;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 700;
  max-width: 34ch;
}

/* "An excerpt from Open Borders, the free immigration guide." A source credit:
 * it says where the text came from, so it sits quietly above the heading and
 * must not compete with it. On the index it follows the heading instead. */
.gt-source {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--muted, #6e675d);
}

.gt-page--hub main > h1 {
  margin-bottom: 6px;
}

.gt-page--hub .gt-source {
  margin: 0 0 28px;
}

/* The topic page's h1 is the node's own heading, which is often a full
 * sentence rather than a title, so it is allowed a reading measure. */
.gt-page--topic main > h1 {
  max-width: 30ch;
}

/* The outcome node, on paper. */
.gt-body {
  border: 1px solid var(--line, #d6ccbd);
  border-radius: 14px;
  background: var(--paper, #fffdf8);
  padding: clamp(20px, 3.4vw, 34px) clamp(18px, 3vw, 32px);
  line-height: 1.66;
}

.gt-body > *:first-child {
  margin-top: 0;
}

.gt-body p {
  margin: 0 0 14px;
  max-width: 68ch;
}

.gt-body h2 {
  font-size: clamp(1.14rem, 2.2vw, 1.3rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 28px 0 10px;
}

.gt-body h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 20px 0 8px;
}

.gt-body ul,
.gt-body ol {
  margin: 0 0 14px;
  padding-left: 22px;
  max-width: 68ch;
}

.gt-body li {
  margin-bottom: 6px;
}

.gt-body a {
  color: var(--route-accent, #315d4d);
  text-underline-offset: 3px;
}

/* The index. A group heading and its links -- no cards, no excerpts, no
 * ornament. Several of the headings are whole sentences, because that is how
 * the guide writes them, so items are given room to wrap and are kept whole
 * across the column break. */
.gt-group {
  margin: 0 0 26px;
}

.gt-group > h2 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line, #d6ccbd);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #6e675d);
}

.gt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gt-list li {
  margin: 0 0 7px;
  break-inside: avoid;
}

.gt-list a {
  color: var(--route-accent, #315d4d);
  text-underline-offset: 3px;
  line-height: 1.45;
}

/* "Start Open Borders from the beginning." Beyond the text itself this link is
 * the whole point of the page, and on a short excerpt like nacara it lands
 * only a line or two below the last paragraph -- so it is given air above it
 * and drawn as something obviously pressable rather than a trailing link.
 * 46px tall at the smallest, which clears the 44px touch target. */
.gt-start {
  margin-top: 30px;
}

.gt-start a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--route-accent, #315d4d);
  color: var(--paper, #fffdf8);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
}

.gt-start a:hover {
  background: #274b3e;
}

.gt-start a:focus-visible {
  outline: 2px solid var(--route-accent, #315d4d);
  outline-offset: 3px;
}

@media (min-width: 60rem) {
  .gt-page--hub .gt-list {
    columns: 2;
    column-gap: 34px;
  }
}

@media (max-width: 480px) {
  /* Full width at phone size: at 390px the label wraps to two lines inside an
   * inline button and reads as a broken sentence. */
  .gt-start a {
    display: flex;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .gt-shell {
    padding-inline: 12px;
  }
}