/* The redesign stylesheet (07 E21-F15): the tokens and the 14 components of
   the approved design system, loaded only by web/templates/redesign/. */

:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;  --lh-xs: 16px;
  --fs-sm: 14px;  --lh-sm: 20px;
  --fs-md: 16px;  --lh-md: 24px;
  --fs-lg: 20px;  --lh-lg: 28px;
  --fs-xl: 24px;  --lh-xl: 32px;
  --fs-2xl: 32px; --lh-2xl: 40px;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ink: #0e1726;
  --ink-2: #3a4656;
  --muted: #5a6573;
  --bg: #ffffff;
  --bg-page: #f3f5f7;
  --bg-subtle: #f6f7f9;
  --line: #e3e7ec;
  --line-block: #d5dbe2;
  --line-strong: #7d8995;
  --action: #1f6f5c;
  --action-hover: #17584a;
  --action-wash: #e9f3ef;
  --on-action: #ffffff;
  --focus: #1f5fbf;
  --footer-bg: #0f3a30;
  --on-dark: #e3ece8;
  --on-dark-muted: #a9c4b9;
  --on-dark-line: #2b5a4d;
  --focus-on-dark: #ffffff;
  --urgent: #9a3412;       --urgent-wash: #fdf0e8;
  --attention: #6f5310;    --attention-wash: #fbf3dc;
  --neutral: #3a4656;      --neutral-wash: #eef0f3;
  --data: #1f8a63;
  --data-track: #e9ecef;
  --data-current: #eb6834;
  --map-1: #c7e9d6; --map-2: #8fd0ae; --map-3: #4fae84; --map-4: #1f8a63; --map-5: #0d5a40;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --shadow-block: 0 1px 3px rgba(14, 23, 38, 0.08);
  --shadow-overlay: 0 12px 32px rgba(14, 23, 38, 0.18);
  --backdrop: rgba(14, 23, 38, 0.35);
  --h-control: 44px;
  --h-compact: 32px;
  --h-header: 64px;
  --page: 1200px;
  --aside: 320px;
  --read: 68ch;
  --gutter: 24px;
}
@media (max-width: 900px) {
  :root {
    --fs-2xl: 24px; --lh-2xl: 32px;
    --fs-xl: 20px;  --lh-xl: 28px;
    --h-compact: 44px;
  }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; --h-header: 56px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: var(--fw-regular) var(--fs-md)/var(--lh-md) var(--font); color: var(--ink); background: var(--bg-page); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; color: var(--action-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sp-2); top: var(--sp-2); z-index: 10; background: var(--bg); padding: var(--sp-2) var(--sp-3); }
.sr, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ico { width: 20px; height: 20px; flex: none; }
.muted { color: var(--muted); }
.site-header { height: var(--h-header); border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .wrap { display: flex; align-items: center; gap: var(--sp-5); height: 100%; }
.logo { display: flex; align-items: center; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-bold); color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo b { color: var(--action); font-weight: inherit; }
.logo .mark { display: none; width: 32px; height: 32px; place-items: center; border-radius: var(--radius-sm); background: var(--action); color: var(--on-action); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.nav { display: flex; gap: var(--sp-5); height: 100%; }
.nav a { display: flex; align-items: center; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--ink-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--action); }
.header-search { flex: 1; max-width: 440px; margin-left: auto; display: flex; }
.header-search input { flex: 1; min-width: 0; height: var(--h-control); border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--bg); }
.header-search button { width: var(--h-control); border: 1px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-subtle); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.account-link { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-control); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.account-link svg { display: none; }
.icon-link { display: none; width: var(--h-control); height: var(--h-control); place-items: center; border-radius: var(--radius-sm); color: var(--ink); }
.no-search .account-link { margin-left: auto; }
@media (max-width: 900px) { .header-search { max-width: 260px; } }
@media (max-width: 560px) {
  .site-header .wrap { gap: var(--sp-3); }
  .logo .full { display: none; }
  .logo .mark { display: inline-grid; }
  .nav { gap: var(--sp-3); }
  .header-search { display: none; }
  .icon-link { display: grid; margin-left: auto; }
  .account-link { width: var(--h-control); justify-content: center; color: var(--ink); }
  .no-search .account-link { margin-left: 0; }
  .no-search .icon-link { margin-left: auto; }
  .account-link span { display: none; }
  .account-link svg { display: block; }
}
.page-head { background: var(--bg-subtle); border-bottom: 1px solid var(--line); padding: var(--sp-5) 0; }
.page-head.has-tabs { padding-bottom: 0; border-bottom: 0; }
.crumb { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); margin-bottom: var(--sp-2); }
.crumb a { color: var(--muted); }
h1, .h1 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.lede { margin-top: var(--sp-2); color: var(--ink-2); max-width: var(--read); }
.id-line { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.head-row { display: flex; gap: var(--sp-5); align-items: flex-start; justify-content: space-between; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: none; align-items: center; }
.head-note { margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
@media (max-width: 900px) { .head-row { flex-direction: column; gap: var(--sp-4); } }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line-block); border-radius: var(--radius-md); box-shadow: var(--shadow-block); overflow: hidden; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.one { grid-template-columns: minmax(0, 1fr); }
.tile { position: relative; background: var(--bg); padding: var(--sp-4) var(--sp-5); display: grid; grid-template-areas: "q" "fig" "leg" "go"; grid-template-rows: auto auto 1fr auto; row-gap: var(--sp-1); }
.tile .q { grid-area: q; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); color: var(--muted); padding-right: var(--sp-6); }
.tile .fig { grid-area: fig; font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.tile .fig small { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.tile .leg { grid-area: leg; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.tile .go { grid-area: go; font-size: var(--fs-sm); line-height: var(--lh-sm); margin-top: var(--sp-2); }
.tile .info { position: absolute; top: var(--sp-3); right: var(--sp-3); }
@media (max-width: 900px) {
  .tiles, .tiles.two, .tiles.one { grid-template-columns: 1fr; }
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles:not(.four) .tile { grid-template-areas: "q fig" "leg fig" "info info" "go go"; grid-template-columns: minmax(min-content, 1fr) auto; grid-template-rows: auto; column-gap: var(--sp-4); align-items: start; padding: var(--sp-3) var(--sp-4); }
  .tiles:not(.four) .tile .fig { text-align: right; max-width: 12rem; }
  .tiles:not(.four) .tile .q { padding-right: 0; }
  .tiles:not(.four) .tile .info { position: static; grid-area: info; margin-top: var(--sp-1); }
}
form.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-top: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field > span { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.field input, .field select { height: var(--h-control); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 var(--sp-3); font: inherit; color: var(--ink); background: var(--bg); width: 100%; }
.field.trade { flex: 2 1 260px; }
.field.zone { flex: 1 1 200px; }
.field.period { flex: 0 1 160px; }
.field.grow { flex: 1 1 320px; }
.check { display: flex; align-items: center; gap: var(--sp-2); height: var(--h-control); font-size: var(--fs-sm); line-height: var(--lh-sm); white-space: nowrap; }
.check input { width: 20px; height: 20px; accent-color: var(--action); }
.filters-summary { display: none; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.field.has-error input { border: 2px solid var(--urgent); }
.field .error { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--urgent); font-weight: var(--fw-semibold); }
.field.extra { flex: 0 1 160px; }
.pro-open { order: 1; flex: 1 1 100%; align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--ink-2); text-align: left; text-decoration: underline; cursor: pointer; }
[popover].pro-filters { width: min(760px, 94vw); margin: auto; padding: 0 var(--sp-5) var(--sp-5); border: 0; border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--shadow-overlay); }
[popover].pro-filters::backdrop { background: var(--backdrop); }
[popover].pro-filters .panel-head { padding: 0; margin-bottom: var(--sp-3); }
.writing ~ .filters-summary { margin-top: var(--sp-2); }
@media (max-width: 560px) {
  .search-list .choices { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (min-width: 901px) {
  form.search-bar dialog.panel, form.search-bar dialog.panel > .panel-body { display: contents; }
  form.search-bar dialog.panel > .panel-head, form.search-bar dialog.panel > .panel-foot { display: none; }
}
form.search-bar .field > span { white-space: nowrap; }
details.fold.more-filters > .fold-toggle { width: fit-content; min-height: var(--h-compact); justify-content: flex-start; gap: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-sm); }
details.fold.more-filters > div { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); padding-bottom: 0; }
details.fold.in-list.more-filters { margin-top: 0; }
@media (min-width: 901px) {
  form.search-bar .field.grow { flex: 1 1 240px; }
  form.search-bar .field.zone { flex: 0 1 300px; }
  form.search-bar .field.trade { flex: 0 1 280px; }
  form.search-bar details.more-filters { order: 1; flex: 1 1 0; min-width: 60%; }
  form.search-bar .pro-open { flex: 0 0 auto; align-self: flex-start; padding: var(--sp-1) 0; }
  details.fold.more-filters > div { grid-template-columns: minmax(0, 13fr) minmax(0, 4fr) minmax(0, 4fr) minmax(0, 7fr) minmax(0, 9fr); gap: var(--sp-3); }
}
.pro-fields { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pro-fields .field { flex: 1 1 160px; }
.writing { margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink-2); }
.row .who a.agenda { display: inline; font-weight: var(--fw-semibold); }
details.fold.in-list { margin-top: var(--sp-3); padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
details.fold.in-list > .fold-toggle { margin: 0; padding: 0; }
@media (max-width: 900px) {
  form.filters.collapsible { display: none; }
  .filters-summary { display: flex; }
  form.filters .field, form.filters .btn { flex: 1 1 100%; }
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--h-control); padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); color: var(--on-action); }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-compact { height: var(--h-compact); padding: 0 var(--sp-3); }
.btn[aria-pressed="true"] { background: var(--action-wash); border-color: var(--action); color: var(--action-hover); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.link-button:hover { text-decoration-color: currentColor; color: var(--action-hover); }
.actions .head-note { margin-top: 0; align-self: center; }
.badge { display: inline-flex; align-items: center; padding: 0 var(--sp-2); border-radius: var(--radius-pill); font-size: var(--fs-xs); line-height: var(--lh-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.badge-urgent { background: var(--urgent-wash); color: var(--urgent); }
.badge-attention { background: var(--attention-wash); color: var(--attention); }
.badge-ok { background: var(--action-wash); color: var(--action-hover); }
.badge-neutral { background: var(--neutral-wash); color: var(--neutral); }
.list-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3); }
.list-head h2, .list-head h3 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.list-head .count { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.list-head .more { margin-left: auto; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.list-bar strong { color: var(--ink); }
.reading { margin-bottom: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choices a { display: inline-flex; align-items: center; height: var(--h-compact); padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.choices a[aria-current] { background: var(--action-wash); border-color: var(--action); color: var(--action-hover); font-weight: var(--fw-semibold); }
ol.rows { list-style: none; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 9rem; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); align-items: start; }
.row .when { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.row .when small, .row .amt small { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-regular); color: var(--muted); }
.row .what a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .who { margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.row .who a { display: inline; }
.row .tags { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.row .amt { text-align: right; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); display: flex; flex-direction: column; }
.row.entity { grid-template-columns: minmax(0, 1fr) auto; }
.row.entity .what a { font-weight: var(--fw-semibold); }
.list-foot { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
@media (max-width: 560px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); }
  .row .when { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .row .what { grid-column: 1 / -1; grid-row: 2; }
  .row.entity .what { grid-column: auto; grid-row: auto; }
  .list-head .more { margin-left: 0; flex-basis: 100%; }
}
.table-wrap { overflow-x: auto; background: linear-gradient(to right, var(--bg) 30%, transparent) left / var(--sp-6) 100% no-repeat local, linear-gradient(to left, var(--bg) 30%, transparent) right / var(--sp-6) 100% no-repeat local, linear-gradient(to right, var(--line-strong), transparent) left / var(--sp-2) 100% no-repeat scroll, linear-gradient(to left, var(--line-strong), transparent) right / var(--sp-2) 100% no-repeat scroll, var(--bg); border: 1px solid var(--line-block); border-radius: var(--radius-md); box-shadow: var(--shadow-block); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
th { text-align: left; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); color: var(--ink-2); background: var(--bg-subtle); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
th a { color: inherit; text-decoration: none; }
td { padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; white-space: nowrap; }
td .sub { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); }
@media (max-width: 560px) {
  .table-wrap th:first-child, .table-wrap td:first-child { position: sticky; left: 0; background: var(--bg); }
  .table-wrap th:first-child { background: var(--bg-subtle); }
  .opt { display: none; }
}
dl.facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-sm); }
dl.facts dt { color: var(--muted); }
dl.facts dd { overflow-wrap: anywhere; }
dl.facts.wide { grid-template-columns: 14rem minmax(0, 1fr); }
@media (max-width: 560px) { dl.facts.wide { grid-template-columns: 1fr; gap: 0 var(--sp-4); } dl.facts.wide dd { margin-bottom: var(--sp-2); } }
.rank { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(48px, 1fr) 4.5rem; gap: var(--sp-3); align-items: center; padding: var(--sp-1) 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.rank .track { height: 8px; background: var(--data-track); }
.rank .fill { height: 8px; background: var(--data); }
.rank .v { text-align: right; font-weight: var(--fw-semibold); }
.cols { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: var(--sp-1); align-items: end; height: 140px; }
.cols > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink-2); }
.cols > div i { display: block; width: 100%; background: var(--data); margin-top: var(--sp-1); }
.cols > div.current i { background: var(--data-current); }
.cols-x { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: var(--sp-1); margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); text-align: center; }
.spikes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-1); align-items: end; }
.spikes > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink-2); }
.spikes svg { display: block; width: 100%; margin-top: var(--sp-1); }
.spikes rect { fill: var(--data); }
.spikes .current rect { fill: var(--data-current); }
.spikes b { margin-top: var(--sp-1); font-weight: var(--fw-regular); color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--bg); border: 1px solid var(--line-block); border-radius: var(--radius-md); box-shadow: var(--shadow-block); color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--action); color: var(--ink); }
.card strong { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-semibold); }
.card span { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.card em { margin-top: auto; padding-top: var(--sp-2); font-style: normal; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--action); }
@media (max-width: 900px) { .cards, .cards.four { grid-template-columns: 1fr; } .card { padding: var(--sp-4); } }
.invite { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--action-wash); border-radius: var(--radius-md); }
.invite p { max-width: var(--read); }
.invite small { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
@media (max-width: 560px) { .invite { flex-direction: column; align-items: stretch; padding: var(--sp-4); } }
button.info { position: relative; width: 24px; height: 24px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink-2); font: var(--fw-bold) var(--fs-xs)/1 var(--font); cursor: pointer; vertical-align: middle; }
button.info::after { content: ""; position: absolute; inset: calc(var(--sp-3) * -1); }
button.info:hover { border-color: var(--ink); color: var(--ink); }
.note { width: min(360px, calc(100vw - 2 * var(--sp-3))); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--shadow-overlay); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.note h3 { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--ink); padding-right: var(--sp-7); }
.note ul { margin-top: var(--sp-2); padding-left: var(--sp-4); display: grid; gap: var(--sp-1); }
.note p { margin-top: var(--sp-3); }
.note .close { display: none; position: absolute; top: var(--sp-1); right: var(--sp-1); }
[popover].note { inset: auto; margin: var(--sp-2) 0 0; position-area: block-end span-inline-start; position-try-fallbacks: flip-block, flip-inline; }
[popover].note::backdrop { background: transparent; }
@media (max-width: 560px) {
  [popover].note { position: fixed; inset: auto 0 0 0; position-area: none; width: 100%; margin: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; padding: var(--sp-5) var(--sp-4); }
  [popover].note .close { display: grid; }
}
dialog.panel { margin: 0 0 0 auto; width: min(440px, 100vw); height: 100dvh; max-width: none; max-height: none; border: 0; background: var(--bg); box-shadow: var(--shadow-overlay); }
dialog.panel:popover-open { display: flex; flex-direction: column; }
dialog.panel::backdrop { background: var(--backdrop); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; padding: 0 var(--sp-2) 0 var(--sp-5); border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }
.panel-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
.panel-foot .btn { width: 100%; }
.close { display: grid; place-items: center; width: var(--h-control); height: var(--h-control); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-2); cursor: pointer; }
.close:hover { background: var(--bg-subtle); color: var(--ink); }
.source { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); }
.source a { color: var(--muted); }
.tabs-bar { position: sticky; top: 0; z-index: 2; background: var(--bg-subtle); border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.tabs a { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-control); white-space: nowrap; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--action); }
.tabs .n { font-weight: var(--fw-regular); color: var(--muted); }
@media (max-width: 560px) { .tabs { gap: var(--sp-4); } .tabs .n { display: none; } }
.empty { padding: var(--sp-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.empty a { margin-left: var(--sp-2); }
.error-block { max-width: var(--read); }
.error-block h3 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-bold); }
.error-block p { margin-top: var(--sp-2); color: var(--ink-2); }
.error-block form { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.error-block form .field { flex: 1; }
.error-block .back { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.section, .aside, details.fold { background: var(--bg); border: 1px solid var(--line-block); border-radius: var(--radius-md); box-shadow: var(--shadow-block); padding: var(--sp-5); }
.section .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0 calc(var(--sp-5) * -1); }
.section .table-wrap th:first-child, .section .table-wrap td:first-child { padding-left: var(--sp-5); }
.section .table-wrap th:last-child, .section .table-wrap td:last-child { padding-right: var(--sp-5); }
.section .table-wrap:last-child { margin-bottom: calc(var(--sp-5) * -1); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.section ol.rows:last-child > li:last-child { border-bottom: 0; padding-bottom: 0; }
.section > .empty { border: 0; padding: 0; }
.section > * + * { margin-top: var(--sp-3); }
.section > .list-head + *, .section > h2 + * { margin-top: 0; }
.group > h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.content { padding-top: var(--sp-6); }
.content > * + * { margin-top: var(--sp-5); }
.zone-gap { margin-top: var(--sp-7); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); gap: var(--sp-5); align-items: start; }
.page-grid > div > * + * { margin-top: var(--sp-5); }
.aside > section + section { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.aside h2 { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.aside dl.facts { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }
.aside ul { list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.section > h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.section > h2 + .sub-h { margin-top: calc(var(--sp-3) * -1); margin-bottom: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: stretch; }
.scope { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.scope select { max-width: 100%; height: var(--h-compact); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 var(--sp-2); font: inherit; background: var(--bg); color: var(--ink); }
.prose { max-width: var(--read); }
.prose p + p { margin-top: var(--sp-3); }
details.fold { padding-top: 0; padding-bottom: 0; }
details.fold > summary { min-height: var(--h-control); display: flex; align-items: center; cursor: pointer; font-weight: var(--fw-semibold); }
.fold-toggle { justify-content: space-between; gap: var(--sp-3); margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); border-radius: var(--radius-md); list-style: none; color: var(--action); }
.fold-toggle::-webkit-details-marker { display: none; }
.fold-toggle:hover { background: var(--bg-subtle); color: var(--action-hover); }
.fold-toggle:focus-visible { outline-offset: -3px; }
details[open] > .fold-toggle { border-radius: var(--radius-md) var(--radius-md) 0 0; }
details[open] > .fold-toggle .ico { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .fold-toggle .ico { transition: transform 150ms ease; } }
details.fold > div { padding-bottom: var(--sp-4); }
@media (max-width: 900px) { .page-grid, .pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .section, .aside, details.fold { padding: var(--sp-4); }
  details.fold { padding-top: 0; padding-bottom: 0; }
  .fold-toggle { margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4); }
  .section .table-wrap { margin: 0 calc(var(--sp-4) * -1); }
  .section .table-wrap:last-child { margin-bottom: calc(var(--sp-4) * -1); }
  .section .table-wrap th:first-child, .section .table-wrap td:first-child { padding-left: var(--sp-4); }
}
.site-footer { margin-top: var(--sp-7); background: var(--footer-bg); color: var(--on-dark); padding: var(--sp-6) 0 var(--sp-5); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.footer-cols h2 { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); color: var(--on-dark-muted); margin-bottom: var(--sp-3); }
.footer-cols ul { list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.site-footer a { color: var(--on-dark); text-decoration-color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--bg); text-decoration-color: currentColor; }
.site-footer :focus-visible { outline-color: var(--focus-on-dark); }
.site-footer .source { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--on-dark-line); color: var(--on-dark-muted); }
.site-footer .source a { color: var(--on-dark-muted); }
@media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.page-head .tiles { margin-top: var(--sp-5); }
.page-head .scope { margin-top: var(--sp-4); }
.page-head .invite { margin-top: var(--sp-4); }
.page-head.has-tabs > .wrap { padding-bottom: var(--sp-5); }
.page-head.fiche > .wrap { padding-bottom: var(--sp-4); }
.example-title { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--muted); }
.example-title + .section { margin-top: var(--sp-3); }
.explore-line { color: var(--ink-2); }
.list-head button.info { align-self: center; }
.rank svg.track { display: block; width: 100%; }
.rank .fill { fill: var(--data); }