/* Owned by the UI builder: styles for its screens only. Tokens from app.css; no new colours or fonts.
   The stamp above is the picked look's own (design/options/option-1.html); app.css was lifted from it without the comment. */

/* ---- small shared pieces ---- */
.page ol { margin: 0; padding: 0; list-style: none; }
.page { caret-color: var(--color-accent); }
.second { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.long p + p { margin-top: var(--space-xs); }
.long, .prose { max-width: 54ch; overflow-wrap: anywhere; }
.prose { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); line-height: 1.55; max-width: none; }
.prose p { max-width: 54ch; }
.prose p + p { margin-top: var(--space-xs); }
.src { display: block; margin-top: var(--space-2xs); }
.page .panel + .panel, .page .panel + .block, .page form + form { margin-top: var(--space-md); }
.page .block-head h2 a { text-decoration: none; }
.page .block-head h2 a:hover { text-decoration: underline; }
.page .notice + .notice, .page .notice + .panel { margin-top: var(--space-sm); }
.pill { line-height: 1.4; padding: var(--space-2xs) var(--space-xs); }
b { font-weight: 600; }

/* secondary and primary action buttons (the accent stays for the one primary action) */
.act { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding: var(--space-xs) var(--space-md); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro); }
.act:hover { background: var(--color-paper-3); border-color: var(--color-ink); }
.act:active { background: var(--color-rule); }
.act-primary { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.act-primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.act-primary:active { background: var(--color-ink); border-color: var(--color-ink); }

/* check boxes and selects */
.pick { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control); font-size: var(--text-sm); cursor: pointer; }
.pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); flex: none; }
.pick input:disabled + * , .pick:has(input:disabled) { color: var(--color-muted); cursor: default; }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label { font-size: var(--text-xs); color: var(--color-muted); }
.field select { min-height: var(--control); width: 100%; max-width: 100%; padding: var(--space-xs) var(--space-sm); font: inherit; font-size: var(--text-md); color: var(--color-ink); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); }
.filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); align-items: end; padding: var(--space-sm) var(--space-md); }
@media (min-width: 40rem) { .filter { grid-template-columns: minmax(0, 20rem) auto auto; justify-content: start; gap: var(--space-lg); } }

/* ---- countries: weights ---- */
.weights { padding: var(--space-sm) var(--space-md); }
.weights fieldset, .picker fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.weights legend, .picker legend { padding: 0; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-xs); }
.weights fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); }
.w label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); }
.w output { font-weight: 600; min-width: 2ch; text-align: right; }
.w input { display: block; width: 100%; height: var(--control); margin: 0; accent-color: var(--color-accent); touch-action: pan-y; }
.weights-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-xs); }
.reset { display: inline-flex; align-items: center; min-height: var(--control); font-size: var(--text-sm); }
@media (min-width: 40rem) { .weights fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weights legend { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .weights fieldset { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cmpbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.cmpbar.end { justify-content: flex-end; margin-top: var(--space-md); }

/* ---- countries: the ranked ledger ---- */
.clist > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-sm) var(--space-md); }
.clist > li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.crow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); min-width: 0; }
.crow-head h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; }
.crow-head .rank:empty { display: none; }
.reason { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 54ch; }
.cfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); }
.cfacts dt { font-size: var(--text-2xs); color: var(--color-muted); }
.cfacts dd { font-size: var(--text-sm); line-height: 1.4; overflow-wrap: anywhere; }
.crow-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); }
.score { font-size: var(--text-xs); color: var(--color-muted); margin-right: auto; }
.score b { font-size: var(--text-lg); color: var(--color-ink); }
.closed .crow-head h3, .closed .cfacts dd { color: var(--color-ink-2); }
@media (min-width: 48rem) { .cfacts { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); } }
@media (min-width: 72rem) {
  .clist > li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); align-items: start; }
  .crow-head, .crow-foot { grid-column: 1; }
  .cfacts { grid-column: 2; grid-row: 1 / span 2; }
  .closed .reason { grid-column: 2; grid-row: 1; }
  .closed .cfacts { grid-row: 2; }
  .closed .crow-foot { grid-row: 2; }
}

/* ---- compare ---- */
table.cmp th[scope="row"] { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); white-space: normal; min-width: 5.5rem; max-width: 10rem; border-top: var(--rule-hair) solid var(--color-rule); }
table.cmp thead th { font-size: var(--text-md); font-weight: 600; color: var(--color-ink); white-space: normal; }
table.cmp td { min-width: 10.5rem; overflow-wrap: anywhere; }
table.cmp th, table.cmp td { padding-inline: var(--space-sm); }
@media (min-width: 48rem) { table.cmp td { min-width: 12rem; } table.cmp th, table.cmp td { padding-inline: var(--space-md); } }
table.cmp .pill { margin-bottom: var(--space-2xs); }
.picker { padding: var(--space-sm) var(--space-md); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0 var(--space-md); }
.change { padding: 0; }
.change > summary, .pmore > summary { display: flex; align-items: center; min-height: var(--control); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: color var(--dur-micro); }
.change > summary { padding-inline: var(--space-md); }
.change > summary:hover, .pmore > summary:hover { color: var(--color-accent); }
.change .picker { border: 0; border-top: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: none; margin: 0; }

/* ---- country page ---- */
.crumb { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-2xs); }
.cpage > .container > .status { display: inline-block; margin: var(--space-xs) 0 var(--space-md); font-size: var(--text-sm); }
.verdict-text { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); line-height: 1.55; }
.verdict-text h2 { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-2xs); }
.verdict-text p { max-width: 54ch; }
.verdict-text p + p { margin-top: var(--space-xs); }
.verdict-text .src { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-2xs); max-width: none; }
.rows dd.long { min-width: 0; }
.intakes { display: grid; gap: var(--space-xs); }
.intakes li { display: grid; gap: var(--space-3xs); }
.intakes i { font-style: normal; color: var(--color-muted); }
.bul { display: grid; gap: var(--space-xs); }
.bul li { padding-left: var(--space-md); position: relative; }
.bul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: var(--space-xs); border-top: var(--rule-hair) solid var(--color-muted); }
.unv li { max-width: none; }
.conf { margin-top: var(--space-xs); }
.srcs li { display: grid; gap: var(--space-2xs); padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); line-height: 1.45; }
.srcs li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.srcs p { max-width: 54ch; }
.srclink { display: block; max-width: 100%; font-size: var(--text-xs); line-height: var(--space-lg); color: var(--color-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srclink:hover { color: var(--color-accent-strong); }
:target { scroll-margin-top: var(--space-md); }

/* ---- programmes and scholarships ---- */
.plist > li, .slist > li, .chlist > li { padding: var(--space-sm) var(--space-md); }
.plist > li + li, .slist > li + li, .chlist > li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.pitem-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); }
.pitem-head h3, .pitem-head h2 { font-size: var(--text-md); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.uni { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-3xs); }
.pfacts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); }
.pfacts dt { font-size: var(--text-2xs); color: var(--color-muted); }
.pfacts dd { font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
.pfacts dd p + p { margin-top: var(--space-xs); }
.pfacts.wide dd { max-width: 54ch; }
.pmore { margin-top: var(--space-2xs); }
.pmore[open] > summary { color: var(--color-ink); }
@media (min-width: 40rem) { .pfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pfacts.wide { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 64rem) { .pfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sitem .rows > div { padding-inline: 0; }
.sitem .rows { margin-top: var(--space-xs); }

/* ---- money ---- */
.money-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.money-top .panel + .panel { margin-top: 0; }
.money-top .filter { grid-template-columns: minmax(0, 1fr); align-content: start; }
.routeline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); font-weight: 600; }
.measures { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-columns); margin-top: var(--space-sm); }
.measures .panel + .panel { margin-top: 0; }
.measure { padding: var(--space-sm) var(--space-md); }
.measure h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; }
.measure .what { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
.figure { margin-top: var(--space-sm); font-size: var(--text-xl); line-height: 1.2; }
.figure .second { margin-top: var(--space-3xs); }
.figure .chip { font-size: var(--text-2xs); }
.meter { position: relative; height: var(--space-sm); margin-top: var(--space-sm); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--space-2xs); }
.meter .bar { display: block; height: 100%; width: var(--v); background: currentColor; border-radius: var(--space-3xs); }
.meter .tick { position: absolute; top: calc(-1 * var(--space-2xs)); bottom: calc(-1 * var(--space-2xs)); left: var(--t); border-left: var(--rule-hair) solid var(--color-ink); }
.fit-first, .fit-plan { color: var(--color-ok); }
.fit-ceiling { color: var(--color-wait); }
.fit-over { color: var(--color-over); }
.scale { position: relative; height: 1.4em; font-size: var(--text-2xs); color: var(--color-muted); }
.scale span { position: absolute; left: var(--t); transform: translateX(-50%); }
.fitline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); margin-top: var(--space-xs); }
.key { margin-top: var(--space-xs); }
@media (min-width: 60rem) {
  .money-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .measures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- what changed ---- */
.chitem { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); line-height: 1.45; }
.when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.chitem .what { font-weight: 600; }
.diff { display: grid; gap: var(--space-2xs); }
.diff > div { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-xs); }
.diff dt { font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-3xs); }
.diff dd { overflow-wrap: anywhere; }
.note { max-width: 54ch; }

/* ---- more ---- */
.linklist a { gap: var(--space-md); transition: background-color var(--dur-micro); }
.linklist a:active { background: var(--color-rule); }
.linklist b { display: block; }
.hint { display: block; font-size: var(--text-xs); color: var(--color-muted); }

.deeper { font-size: var(--text-sm); margin-top: var(--space-xs); }
.pfacts.wide { margin-top: var(--space-xs); }