/* Mirsaat · reference pages (fees, entity forms, documents, FAQ) — extends site.css, uses its tokens only. */

.pg-intro { padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl)) var(--space-lg); }
.pg-intro__k { display: block; margin-bottom: var(--space-sm); color: var(--color-accent); }
.pg-intro h1 { font-weight: 700; font-size: var(--text-display-s); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; }
.pg-intro p { margin-top: var(--space-md); max-width: 64ch; font-size: var(--text-lg); color: var(--color-ink-2); }
.pg-intro__meta { margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }

.pg-sec { padding-block: var(--space-lg) var(--space-xl); }
.pg-sec > h2 { font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.1;
  padding-bottom: var(--space-sm); border-bottom: var(--rule-bold) solid var(--color-rule-strong); }
.pg-sec > p, .pg-prose p { margin-top: var(--space-sm); max-width: 70ch; color: var(--color-ink-2); }
.pg-sec > p strong, .pg-prose strong { color: var(--color-ink); font-weight: 600; }
.pg-sec .tablewrap { margin-top: var(--space-md); }
.pg-sec td { font-size: var(--text-sm); color: var(--color-ink-2); }
.pg-sec td:first-child { color: var(--color-ink); font-size: var(--text-base); }
.pg-sec td.num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); white-space: nowrap; }
.pg-sec td .soft { display: block; color: var(--color-ink-3); font-size: var(--text-xs); margin-top: 0.15rem; }

.pg-list { margin: var(--space-sm) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); max-width: 72ch; }
.pg-list li { position: relative; padding-inline-start: 1.1rem; color: var(--color-ink-2); }
.pg-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.8em; width: 0.45rem; height: var(--rule-hair); background: var(--color-accent-2); }
.pg-steps { margin: var(--space-sm) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--space-2xs); max-width: 72ch; }
.pg-steps li { counter-increment: s; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); color: var(--color-ink-2); }
.pg-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); padding-top: 0.3rem; }

.pg-note { margin-top: var(--space-md); max-width: 72ch; padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2); border-inline-start: 3px solid var(--color-accent-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.pg-note--warn { border-inline-start-color: var(--color-warn); }

/* FAQ: native disclosure, one open at a time is not forced */
.faq { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-strong); max-width: 60rem; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline;
  padding: var(--space-sm) 0; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-accent); flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent); }
.faq .faq__a { padding: 0 0 var(--space-md); max-width: 70ch; color: var(--color-ink-2); }
.faq .faq__a p + p { margin-top: var(--space-2xs); }

.pg-src { margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.8; max-width: 80ch; }
.pg-src a { color: var(--color-ink-2); }


/* country guides: the entry map, the home page's locator with an approach line from the parent's direction */
.pg-intro--map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: var(--space-xl); align-items: start; }
.pg-intro--map > :not(.locator) { grid-column: 1; }
.pg-intro--map > .locator { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
.pg-intro .locator__cap { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--color-ink-3); text-align: end; }
.pg-intro .locator__cap b { color: var(--color-accent-2); font-weight: 400; display: block; margin-top: 0.25rem; }
@media (max-width: 68rem) {
  .pg-intro--map { display: block; }
  .pg-intro--map > .locator { max-width: min(18rem, 100%); margin-top: var(--space-lg); justify-items: start; }
  .pg-intro .locator__cap { text-align: start; }
}
.pg-intro .locator .approach { stroke: var(--color-accent); stroke-width: 3; stroke-dasharray: 12 10; opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  .pg-intro .locator .approach { animation: approach 1.6s var(--ease-out) 1.2s both; }
  @keyframes approach { from { stroke-dashoffset: 400; opacity: 0; } to { stroke-dashoffset: 0; opacity: 0.9; } }
}

/* fees: the official figures at a glance */
.pg-figs { display: grid; gap: var(--rule-hair); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); }
.fig { background: var(--color-paper-2); padding: var(--space-sm) var(--space-md) var(--space-md); display: grid; gap: var(--space-3xs); align-content: start; }
.fig__n { font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--color-accent); letter-spacing: -0.01em; line-height: 1.2; }
.fig__n small { font-size: var(--text-xs); color: var(--color-ink-3); margin-inline-start: 0.4rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fig__l { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.45; }
.fig--warn { box-shadow: inset 0 3px 0 var(--color-warn); }
.fig--warn .fig__n { color: var(--color-warn); }
.pg-sec td .unpub { color: var(--color-warn); }

/* entity forms: the comparison at a glance */
.pg-cmp { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.cmp { background: var(--color-paper-2); border-top: var(--rule-bold) solid var(--color-accent-2); padding: var(--space-sm); }
.cmp b { display: block; font-family: var(--font-display); font-weight: 600; line-height: 1.25; min-height: 2.5em; }
.cmp dl { margin: var(--space-2xs) 0 0; display: grid; gap: var(--space-3xs); }
.cmp dl > div { display: flex; justify-content: space-between; gap: var(--space-2xs); font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-3xs); }
.cmp dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); padding-top: 0.15rem; }
.cmp dd { margin: 0; text-align: end; color: var(--color-ink-2); }
.cmp dd.ok { color: var(--color-accent); } .cmp dd.no { color: var(--color-warn); }
@media (min-width: 60rem) { .pg-cmp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }