/* V03-K2 Guides and Open data (visual review R3, 10 Nov 2026). Linked by tools/publishing/visibility/guides_v03.mjs on /guides/ and
   /data/ routes only (every locale); behaviour for wide tables: /r049/guides.js. Logical properties throughout, so Arabic mirrors.
   Sections: 1 wide layout (Open data, Guides index)  2 article head on one measure  3 tables (all modes)  4 phone: scroll mode
   5 phone: stack mode  6 related cards  7 small typography  8 spacing before the footer */
:root { --g-measure: 33rem; --g-card: #0e0906; }

/* ---- 1. wide layout: the body spans the text column and the empty side column; text keeps its measure ---------------------------- */
@media (min-width: 1101px) {
  main[data-psg-g~="wide"] .psg-j-layout > .psg-j-body { grid-column: 2 / -1; max-width: none; }
}
@media (max-width: 1100px) {
  main[data-psg-g~="wide"] .psg-j-layout > .psg-j-body { grid-column: 1 / -1; max-width: none; }
}
main[data-psg-g~="wide"] .psg-j-body > :not(.psg-g-tbl, .psg-data-dict, .psg-data-cards, .psg-data-chart, ul.psg-j-stones[data-psg-v03-guides]) { max-inline-size: var(--g-measure); }
main[data-psg-g~="wide"] .psg-j-body > .psg-j-end { max-inline-size: var(--g-measure); }
/* three-column tables (country, value, share) read better at the text measure than stretched across the page */
main[data-psg-g~="wide"] .psg-j-body > .psg-g-tbl[data-psg-g="fit"] { max-inline-size: var(--g-measure); }

/* ---- 2. article head: title, standfirst and byline rule end on the body's measure (were three different right edges) ---------- */
@media (min-width: 1101px) {
  main[data-psg-g] .psg-j-head .psg-j-dek, main[data-psg-g] .psg-j-head .psg-j-byline { max-inline-size: var(--g-measure); justify-self: start; }
  main[data-psg-g] .psg-j-head h1 { max-inline-size: min(18ch, var(--g-measure) + 64px + 260px); }
}

/* ---- 3. tables ------------------------------------------------------------------------------------------------------------------- */
.psg-g-tbl { position: relative; margin: 1.6em 0; }
.psg-g-tbl > .psg-j-tblwrap { margin: 0; background: var(--g-card); scrollbar-width: thin; scrollbar-color: rgba(196, 165, 122, .45) transparent; }
.psg-g-tbl .psg-j-tbl { font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; } /* separate: sticky cells keep their own row lines */
.psg-g-tbl .psg-j-tbl :is(th, td).psg-g-num { text-align: end; }
.psg-g-tbl .psg-j-tbl td.psg-g-num { white-space: nowrap; }
.psg-g-n { unicode-bidi: isolate; }
.psg-g-tbl .psg-j-tbl th { vertical-align: bottom; }
.psg-g-tbl .psg-j-tbl td { overflow-wrap: normal; }
.psg-g-tbl .psg-j-tbl a { overflow-wrap: normal; }
html[lang="ar"] .psg-g-tbl .psg-j-tbl th { letter-spacing: 0; font-size: 14px; }
/* tighter cell padding so a six-column series fits the 528 px reading column of a guide; generous outer edges */
.psg-g-tbl .psg-j-tbl :is(th, td) { padding-inline: 12px; }
.psg-g-tbl .psg-j-tbl :is(th, td):first-child { padding-inline-start: 18px; }
.psg-g-tbl .psg-j-tbl :is(th, td):last-child { padding-inline-end: 18px; }

/* overflow cue (guides.js sets data-g-more="start|end" on the outer box while there is more to scroll): an edge fade over the
   content and one small white arrow, like the site's other scrollers */
.psg-g-tbl::before, .psg-g-tbl::after {
  content: ""; position: absolute; z-index: 3; inset-block: 1px; inline-size: 44px; pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.psg-g-tbl::after { inset-inline-end: 1px; border-start-end-radius: 17px; border-end-end-radius: 17px; background: linear-gradient(to left, var(--g-card) 12%, rgba(14, 9, 6, 0)); }
.psg-g-tbl::before { inset-inline-start: 1px; border-start-start-radius: 17px; border-end-start-radius: 17px; background: linear-gradient(to right, var(--g-card) 12%, rgba(14, 9, 6, 0)); }
html[dir="rtl"] .psg-g-tbl::after { background: linear-gradient(to right, var(--g-card) 12%, rgba(14, 9, 6, 0)); }
html[dir="rtl"] .psg-g-tbl::before { background: linear-gradient(to left, var(--g-card) 12%, rgba(14, 9, 6, 0)); }
.psg-g-tbl[data-g-more~="end"]::after { opacity: 1; }
.psg-g-tbl[data-psg-g="fit"][data-g-more~="start"]::before, .psg-g-tbl[data-psg-g="stack"][data-g-more~="start"]::before { opacity: 1; }
.psg-g-next {
  position: absolute !important; z-index: 4; inset-inline-end: 2px; top: var(--g-arrow-top, 12px);
  box-sizing: border-box !important; inline-size: 44px !important; block-size: 44px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; box-shadow: none !important;
  color: #fff !important; display: grid !important; place-items: center; cursor: pointer; font: inherit !important; line-height: 0 !important;
  letter-spacing: 0 !important; text-transform: none !important; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; transition: opacity .18s ease;
}
.psg-g-next[hidden] { display: none !important; }
.psg-g-next span { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: rgba(12, 12, 14, .62);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 10px rgba(0, 0, 0, .35);
  transition: transform .12s ease-out, background-color .18s ease; }
.psg-g-next svg { display: block; inline-size: 16px; block-size: 16px; }
html[dir="rtl"] .psg-g-next svg { transform: scaleX(-1); }
@media (hover: hover) { .psg-g-next:hover span { background: rgba(12, 12, 14, .82); } }
.psg-g-next:active span { transform: scale(.92); }
.psg-g-next:focus { outline: none !important; }
.psg-g-next:focus-visible span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px #0b0b0c, 0 0 0 4px #c4a57a; }
.psg-g-tbl > .psg-j-tblwrap:focus-visible { outline: 2px solid #c4a57a; outline-offset: 3px; }

/* ---- 4. scroll mode (a label or year column followed by numbers): sticky first column, no one-word-per-line headers ----------- */
.psg-g-tbl[data-psg-g="scroll"] .psg-j-tbl :is(th, td):first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--g-card); }
.psg-g-tbl[data-psg-g="scroll"][data-g-more~="start"] .psg-j-tbl :is(th, td):first-child { box-shadow: inset -1px 0 rgba(196, 165, 122, .35), 10px 0 14px -10px rgba(0, 0, 0, .9); }
html[dir="rtl"] .psg-g-tbl[data-psg-g="scroll"][data-g-more~="start"] .psg-j-tbl :is(th, td):first-child { box-shadow: inset 1px 0 rgba(196, 165, 122, .35), -10px 0 14px -10px rgba(0, 0, 0, .9); }
@media (max-width: 767px) {
  .psg-g-tbl .psg-j-tbl :is(th, td) { padding: 12px 12px; }
  /* long column names wrap in two or three lines, never one word per line; numbers keep a readable width */
  .psg-g-tbl[data-psg-g="scroll"] .psg-j-tbl :is(th, td).psg-g-num { min-width: 64px; }
  .psg-g-tbl[data-psg-g="scroll"] .psg-j-tbl th.psg-g-long { min-width: 11.5em; } /* after the rule above: same specificity */
  .psg-g-tbl[data-psg-g="scroll"] .psg-j-tbl :is(th, td):first-child { min-width: 72px; max-width: 42vw; padding-inline-start: 14px; }
  .psg-g-tbl[data-psg-g="scroll"][data-g-first="label"] .psg-j-tbl :is(th, td):first-child { min-width: 9.5em; }
  .psg-g-tbl[data-psg-g="scroll"] .psg-j-tbl th { font-size: 12px; letter-spacing: .04em; }
  .psg-g-tbl[data-psg-g="scroll"] .psg-j-tbl td:first-child { color: var(--j-ink, #fcfcfc); }
}

/* ---- 5. stack mode on phones (text columns, long row labels): one card per row, each value under its column name ------------------- */
@media (max-width: 640px) {
  .psg-g-tbl[data-psg-g="stack"] > .psg-j-tblwrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl, .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl :is(tbody, tr, td) { display: block; inline-size: auto; }
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl tr { margin: 0 0 12px; padding: 14px 16px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: var(--g-card); }
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl td { padding: 6px 0; border: 0; text-align: start; white-space: normal; }
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--j-mute, #7d776d); font: 600 11.5px/17px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
  html[lang="ar"] .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl td::before { letter-spacing: 0; font-size: 12.5px; }
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl td:first-child { margin-bottom: 4px; padding: 0 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--j-ink, #fcfcfc); font: 500 17px/24px Syne, Inter, sans-serif; }
  html[lang="ar"] .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl td:first-child { font-family: inherit; font-weight: 600; }
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl td:first-child::before { content: none; }
  /* numbers sit on the label's line, at the end */
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl td.psg-g-num { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .psg-g-tbl[data-psg-g="stack"] .psg-j-tbl td.psg-g-num::before { margin: 0; }
}

/* ---- 6. related cards: aligned to the text column (the list had the body's 24 px list indent), equal heights -------------------- */
.psg-j-body .psg-j-end > ul.psg-j-stones { margin: 0; padding: 0; grid-auto-rows: 1fr; }
.psg-j-body .psg-j-end > ul.psg-j-stones > li { display: flex; margin: 0; padding: 0; }
.psg-j-body .psg-j-end > ul.psg-j-stones > li > a { flex: 1 1 auto; }

/* share rail: its label cleared the sticky header by a few pixels only (R5 #32) */
@media (min-width: 1025px) { main[data-psg-g] .psg-j-aside { top: 156px; } }
/* reading progress grows from the reading start: the right in Arabic (R5 #41) */
html[dir="rtl"] body:has(main[data-psg-g]) .psg-j-progress { transform-origin: 100% 50%; }

/* ---- 7. small typography ---------------------------------------------------------------------------------------------------------- */
.psg-g-nw { white-space: nowrap; }

/* ---- 8. less empty space between the last block and the footer -------------------------------------------------------------------- */
main[data-psg-g] { padding-bottom: 56px; }
main[data-psg-g] .psg-j-layout > .psg-j-body > :last-child { margin-bottom: 0; }
@media (max-width: 767px) { main[data-psg-g] { padding-bottom: 40px; } }

@media (prefers-reduced-motion: reduce) { .psg-g-tbl::before, .psg-g-tbl::after, .psg-g-next, .psg-g-next span { transition: none !important; } }
@media print { .psg-g-next, .psg-g-tbl::before, .psg-g-tbl::after { display: none !important; } }