/* ==========================================================================
   /sektorler/saglik/  +  /en/sectors/health/
   ONE stylesheet, two pages (--css-from copies it to health.css). Loads AFTER
   ng-shared.css, so anything restated here wins at equal specificity.

   VARIANCE PASS ASSIGNMENT (variance-plan.json, assigned not chosen):
       opening   D-NUMBER    one very large figure, h1 subordinate beneath it
       dark      NONE-MIST   no indigo band anywhere; mist carries the tone
       sections  3           masthead · three scales · method + close

   THE SILHOUETTE, so the next person can see it without opening the markup:

       GROUND   giant 3 + label LEFT, one framed client artefact RIGHT, one
                hairline under both · subordinate h1 (the hub's question) ·
                lede · CTAs · 3/2/1 proof strip
       GROUND   three-across question map, then THREE RULED DOSSIER ROWS —
                one per scale, each pairing the client's own analysis title
                with the artefact that scale returns (a ranked TABLE, a
                key/value report, four partition tiles)
       MIST     the three-rung ladder, a chip row, and a raised white closing
                panel

   Three shapes, none of them a card grid: a numeral, a dossier, a ladder.
   The page this replaces was a masthead with a plate, a 1+2 of white cards,
   three sample panels in a separate band, a step ladder and an indigo slab —
   which was also an exact description of its 27 siblings.

   WHY THE MIST IS AT THE BOTTOM. /sektorler/gayrimenkul/ carries the identical
   assignment (D-NUMBER, NONE-MIST, 3) and runs GROUND -> MIST -> GROUND. Two
   pages with one assignment must not end up with one silhouette, and the tonal
   order is the lever the assignment leaves free: this page runs
   GROUND -> GROUND -> MIST, so the working end of the page is one continuous
   mist band and the artefacts sit as raised panels on the ground above it.

   AND WHY THE FIRST SCREEN NOW CARRIES A PICTURE. The tonal order was never
   enough: both pages used the promoted .ng-masthead--num, so above the fold
   they were the same screen with a different digit and the variance report
   said so. §0 below pairs the numeral with one of the client's supplied
   780x540 artefacts. gayrimenkul stays purely typographic and is untouched;
   .ng-masthead--num in ng-shared.css is untouched, because it is live on both.

   NOTHING ON THIS PAGE IS DARK. `.is-dark` appears nowhere.

   PRIMITIVES REUSED RATHER THAN RE-AUTHORED: .ng-masthead--num and .ng-fig
   (ng-shared §16a, promoted from pages/gayrimenkul.css in this same pass),
   .ng-figband__fig / __frame / __img / __flag / __cap and, on the English
   page, __frame--text / __sub (§17), .ng-dtable (§15b), .ng-facts (§15c),
   .ng-out, .ng-env, .ng-steps, .ng-pills, .ng-section--sunken, .ng-note,
   .ng-actions--chips. What is below is only what those do not do.
   ========================================================================== */


/* ==========================================================================
   0. THE NUMBER, PAIRED WITH A PICTURE — section 10
   ==========================================================================
   WHY THIS BLOCK EXISTS. /sektorler/gayrimenkul/ carries the identical
   assignment (D-NUMBER / NONE-MIST / 3) and both pages open on the promoted
   ng-shared §16a masthead, so the two first screens were identical by
   construction and only the numeral differed — 12 against 3. The variance
   report says exactly that. gayrimenkul keeps the pure typographic treatment
   and is not touched. THIS page is the one that moves: the numeral no longer
   stands alone on white, it is paired with one of the client's three supplied
   780x540 artefacts. Numeral and label left, artefact right, one hairline
   under both.

   .ng-masthead--num ITSELF IS NOT TOUCHED. It is live on gayrimenkul as well,
   and §16a says so. Everything below is either a new page-local block
   (.ng-lead__pair, .ng-lead__fig) or a (0,3,0) override that can only apply
   inside .ng-lead__pair, which exists on no other page. The numeral, its
   label, its sentence and the subordinate h1 are still §16a's, unedited —
   what changed is what sits beside them.

   THE HAIRLINE MOVED UP ONE LEVEL. §16a puts padding-bottom + border-bottom on
   .ng-fig, which divides the lockup from the h1. With an artefact beside it
   that rule would underline the left column only and stop dead in the middle
   of the container — the same half-width-rule failure §15c records for a
   three-cell .ng-facts at 390. So .ng-fig gives up its border here and
   .ng-lead__pair takes it, at (0,3,0) so it beats §16a's (0,2,0) at every
   width including its own max-width:767 block.

   900px, not 960. Below the split the artefact stacks under the lockup, and
   960 would have left the 900-959 band stacked while the masthead's own
   two-column rule was already live elsewhere on the site. At 900 the container
   is 852: the copy column is 432px, which still holds the 184px-class numeral
   beside its label, and the artefact is 368px wide — big enough to read as a
   picture rather than a thumbnail.

   NO .ng-anim ANYWHERE ON OR ABOVE .ng-lead__fig, and there is no rule here
   that transforms it. PATTERNS §17: .ng-anim's hidden state is a transform and
   that is the one combination HANDOFF records as never loading. The markup
   splits the copy column's single .ng-anim into two blocks either side of the
   pair for the same reason. */
.ng-v2 .ng-lead__pair{
  margin:12px 0 0;
  padding-bottom:26px;
  border-bottom:1px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
  align-items:center;
}
@media (min-width:900px){
  .ng-v2 .ng-lead__pair{
    grid-template-columns:minmax(0,54fr) minmax(0,46fr);
    column-gap:52px;
  }
}
/* (0,3,0), so it beats §16a's own .ng-v2 .ng-fig (0,2,0) both in the base
   block and in its max-width:767 block — specificity, not source order, which
   is what makes this safe against a future edit to either. */
.ng-v2 .ng-lead__pair .ng-fig{
  margin:0;
  padding-bottom:0;
  border-bottom:0;
}

/* STACKED, THE ARTEFACT IS CAPPED. Below 900 it would otherwise run the full
   852px container and stand 590px tall, which pushes the h1 — the thing that
   says what the page is — off a 768x1024 first screen entirely. 520px is the
   width at which the baked-in 28px title still sets at about 19px, i.e. still
   reads as a title rather than as texture. Above 900 the column governs and
   the cap is lifted. */
.ng-v2 .ng-lead__fig{ max-width:520px; }
@media (min-width:900px){
  .ng-v2 .ng-lead__fig{ max-width:none; }
}

/* THE ENGLISH STAND-IN'S FACT STRIP — two columns, not §15c's three.
   The Turkish page has no .ng-facts inside .ng-lead__pair at all; this rule
   exists for /en/sectors/health/, where §17b fills the same box with the
   artefact's subject line and its figures. §15c goes 3-up at >=640, and two
   cells in a three-column grid leave an empty third column with a divider
   hanging off it. One sheet serves both pages, so the rule is scoped to the
   pair rather than to a language. */
.ng-v2 .ng-lead__pair .ng-facts{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:767px){
  /* 22px, matching the margin §16a gives .ng-fig at this width — the pair now
     owns the spacing the numeral used to own. */
  .ng-v2 .ng-lead__pair{ margin-top:22px; padding-bottom:22px; gap:22px; }
}

/* ==========================================================================
   1. THE THREE-SCALE DOSSIER — section 20
   ==========================================================================
   THE DOMINANT CONTENT SHAPE, and the reason this leaf reads as its own place.
   ARCHETYPES.md asks for a shape the subject wants "rather than defaulting to
   another stack of card grids". The subject here is ONE question asked at
   three zoom levels — district, address, portfolio — and the client already
   names one analysis title per level. Three equal cards would have said the
   titles are three parallel options. Three ruled rows say what they are: the
   same investigation at three scales, in the order the work is done.

   THE ROW IS A GRID OF TWO, NOT A CARD. Left: the ordinal, the question at
   that scale, the title that answers it and its destination. Right: the
   artefact that comes back. Above 1000px they sit side by side, so the eye
   reads question -> answer horizontally and 01 -> 02 -> 03 vertically. Below
   that the panel drops under its copy, which is the only honest order on a
   phone.

   1000px, not the 960 used elsewhere on the site: at 960 the artefact column
   is 520px and the shortlist table's four columns plus the panel's own 32px of
   padding leave the 65+ column 58px, which wraps its header mid-word. The
   akaryakit lesson applies — if a header is too wide, shorten the string or
   give it room; never drop the tracking, because the tracked-label exception
   is MEASURED (letter-spacing / font-size >= 0.08) and an 11px label at .06em
   is simply body copy three pixels under the floor. */
.ng-v2 .ng-scale{ scroll-margin-top:104px; }
@media (max-width:1364px){
  .ng-v2 .ng-scale{ scroll-margin-top:84px; }
}

/* --- 1a. the question map -------------------------------------------------
   ng-shared §15c's .ng-facts, used for what it is: three key/value pairs
   ACROSS the container. It is the section's own contents line — the three
   scales and the question each one asks — and it is what makes the masthead's
   giant 3 countable within one screen of it. Deliberately NOT anchors: three
   links here would duplicate the three destinations 200px below them, and "no
   link label appears twice on a leaf" is the rule that retired the 14
   identical "Daha Fazla Bilgi" links. */
.ng-v2 .ng-scale__map{ margin-bottom:8px; }
/* ONE COLUMN BELOW 640, not §15c's two. .ng-facts defaults to 2-up at phone
   width, which leaves the third scale alone on a second row under a rule that
   spans half the container — it reads as a wrapped grid rather than as three
   things. Found in a 390 screenshot; ng-page-check reported the page clean
   before and after. Three is not a number that halves. */
@media (max-width:639px){
  .ng-v2 .ng-scale__map{ grid-template-columns:minmax(0,1fr); }
}

/* --- 1b. the rows ---------------------------------------------------------
   A 2px rule over the first row and 1px between the rest: the same treatment
   .ng-steps uses for a sequence, so a reader who has seen the ladder at the
   bottom of any sibling leaf recognises this as ordered rather than as a
   gallery. */
.ng-v2 .ng-scale__list{
  list-style:none;
  margin:32px 0 0;
  padding:0;
  border-top:2px solid var(--ng-hairline);
}
.ng-v2 .ng-scale__row{
  min-width:0;
  padding:28px 0 32px;
  border-bottom:1px solid var(--ng-hairline);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
}
@media (min-width:1000px){
  .ng-v2 .ng-scale__row{
    grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    column-gap:48px;
    align-items:start;
    padding:34px 0 38px;
  }
}

/* THE WHOLE COPY BLOCK IS THE ANCHOR, exactly as .ng-card--link is. That is
   what retires the three identical "Daha Fazla Bilgi" / "More Info" links
   (109x17px on the Turkish page, 63x17px on the English one — a tap-target
   failure ng-page-check reported at 1024, 768 AND 390), gives each destination
   its own accessible name, and makes the target the block rather than a line
   of text. The block is over 200px tall at every width, so no hit-area rule is
   needed and none is written; ng-mobile.css §7 carries the ones that are.

   An <a> has a transparent content model, so inside an <li> it may hold flow
   content — the h3 stays a real heading and the page keeps its h2 > h3
   outline. The alternative was spans, which is how perakende's first attempt
   shipped with `h4: 0`. */
.ng-v2 .ng-scale__link{
  display:block;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
/* 12px at .1em (ratio .10) is a tracked label BY MEASUREMENT, which is what
   ng-page-check tests — not by allowlist. Accent, because it is the only thing
   on the row that carries the sequence. */
.ng-v2 .ng-scale__ix{
  margin:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-accent);             /* 5.45:1 on the ground */
  font-variant-numeric:tabular-nums;
}
/* The h3 is the QUESTION, not the report name: this section's claim is that
   one question is asked three times, and the outline should say so. Doubled
   class (0,3,0) for the theme's `h?:not(:first-child){margin-top:50px}` at
   (0,2,2) — the ordinal above it means this heading is never a first child,
   so the undoubled rule loses every time. PATTERNS.md §11. */
.ng-v2 .ng-scale__q.ng-scale__q{
  margin:10px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:22px; line-height:1.25;
  letter-spacing:-0.014em;
  color:var(--ng-ink);
  max-width:24ch;
  transition:color .16s cubic-bezier(.25,.46,.45,.94);
}
.ng-v2 .ng-scale__meta{
  margin:18px 0 0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);
}
/* The client's report name. NOT a heading: the question above it already is
   one, and two headings on a row would have said the row is two things. */
.ng-v2 .ng-scale__name{
  margin:5px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:18px; line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
.ng-v2 .ng-scale__body{
  margin:9px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);              /* 6.01:1 on the ground */
  max-width:56ch;
}
.ng-v2 .ng-scale__to{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:16px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:14px; line-height:1.3;
  color:var(--ng-accent);             /* 5.45:1 on the ground */
}
@media (any-hover:hover){
  /* any-hover only: on a touch screen :hover sticks after the tap and leaves
     a row highlighted until the user taps elsewhere. Same guard ng-shared
     puts on .ng-card--link. */
  .ng-v2 .ng-scale__link:hover .ng-scale__q{ color:var(--ng-accent); }
  .ng-v2 .ng-scale__link:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
.ng-v2 .ng-scale__link:focus-visible .ng-scale__q{ color:var(--ng-accent); }

/* The artefact panel. .ng-out sets height:100% for a panel sharing a grid row
   with a taller sibling; here the row's other child is a copy block that is
   usually SHORTER, and a stretched panel would leave the table floating in
   40px of white. align-items:start on the row plus height:auto keeps each
   panel its own height. */
.ng-v2 .ng-scale__out{ height:auto; }

/* THE SUBJECT LINE TAKES ITS OWN ROW, AT EVERY WIDTH, ON ALL THREE PANELS.
   ng-shared §13b only wraps .ng-out__bar below 767px; above that the subject
   line is white-space:nowrap with an ellipsis, which assumes a short tag like
   the fuel leaf's "AĞ KARNESİ". The tags here are the CLIENT'S OWN REPORT
   NAMES, they are long in both languages, and the panel is now a 60% column
   rather than the full container — so on the English page
   "INVESTMENT ENVIRONMENT REPORT" plus a SAMPLE chip left the subject about
   150px of a 640px bar and it truncated to "Sample candidate address · Kadıköy,
   İst…", i.e. the panel silently stopped saying which address it was a sample
   OF. That is the exact failure ng-shared's mobile rule exists to prevent,
   reappearing at 1440.

   FOUND IN A SCREENSHOT. ng-page-check reported the page clean at all four
   widths with the ellipsis in place — an ellipsis is not overflow, not small
   type and not a broken image, so nothing automated can see it. The same fix
   was on this page before the variance pass and was re-lost when the sheet was
   rewritten; it is recorded here so the next rewrite keeps it.

   Applied to all three panels rather than only the long one: a band whose
   panels have different chrome heights reads as three unrelated widgets, and
   one extra 18px row is cheaper than that. */
.ng-v2 .ng-scale__out .ng-out__bar{ flex-wrap:wrap; gap:6px 10px; }
.ng-v2 .ng-scale__out .ng-out__tag{ flex:1 1 auto; }
.ng-v2 .ng-scale__out .ng-out__meta{
  order:3; flex:1 0 100%;
  white-space:normal; overflow:visible; text-overflow:clip;
}

/* --- 1c. the shortlist table ---------------------------------------------
   ng-shared §15b does the type, the cell reset and the three theme rules a
   table has to beat. Only the column widths are here, because which column is
   wide is a property of THIS content, not of the primitive.

   The rank column is a <td> and the district a <th scope="row">: the row's
   subject is the place, not its position. */
.ng-v2 .ng-scale__t tr > :nth-child(1){ width:42px; }
.ng-v2 .ng-scale__t tr > :nth-child(3){ width:64px; }
.ng-v2 .ng-scale__t tr > :nth-child(4){ width:86px; }
/* The score column reads as the number the ranking is on, so it is set in the
   display face at the reading floor rather than inheriting the 15px body cell.
   The leader's score is the ONE accent mark inside the panel — --ng-accent,
   not --ng-accent-display, because it is text under 24px (5.64:1 on white;
   the display magenta would fail AA there). */
.ng-v2 .ng-scale__score{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px;
  color:var(--ng-ink);
}
.ng-v2 .ng-scale__t tbody tr.is-top .ng-scale__score{ color:var(--ng-accent); }

/* --- 1d. the segment tiles ------------------------------------------------
   Four tiles inside the third panel, NOT a fourth bar list. Two ranked bar
   ladders on one page would have said the shortlist and the segmentation
   answer the same kind of question, and they do not: a shortlist is an
   ORDERING (first is better than fourth), a segmentation is a PARTITION (no
   segment outranks another). Tiles have no axis, so they cannot imply one.

   MIST TILES ON A WHITE PANEL — the panel is the raised surface and its chrome
   is sunken, exactly as .ng-pills is mist-on-white in ng-shared §7. A white
   tile with a hairline inside a white panel is an outline on its own
   background.

   TWO COLUMNS, NEVER FOUR. The previous version of this page ran the panel at
   the full 1120px container and went to four columns above 1024; inside the
   60% artefact column that would be four 128px tiles holding "Aile sağlığı
   merkezi çevresi". The count is 26px, so it could take --ng-accent-display
   under the 24px rule. It does not: four accent numbers of equal weight read
   as four highlights, and nothing here is highlighted over anything else. The
   accent in this panel is its ÖRNEK flag, which is the one thing that must be
   noticed. */
.ng-v2 .ng-seg{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
}
@media (min-width:620px){
  .ng-v2 .ng-seg{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
}
.ng-v2 .ng-seg__item{
  min-width:0;
  padding:16px 16px 18px;
  background:var(--ng-surface-sunken);
  border-radius:var(--ng-radius-sm);
}
.ng-v2 .ng-seg__n{
  display:block;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:26px; line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-seg__name{
  display:block; margin-top:8px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-seg__body{
  display:block; margin-top:8px;
  font-size:14px; line-height:1.5;
  color:var(--ng-muted);              /* 5.42:1 on mist */
}

/* --- 1e. the two closing notes -------------------------------------------
   Left-aligned, not centred like ng-shared §14's .ng-out-band__note. That rule
   centres a caption under a band of panels that are themselves centred; these
   two sit under a left-ruled dossier and a centred line under a left-ruled
   list reads as a stray element. The second is the illustrative caption, and
   it stays a separate paragraph so it is never read as part of the argument
   above it. */
.ng-v2 .ng-scale__note{
  margin-top:30px;
  max-width:88ch;
}
.ng-v2 .ng-scale__cap{
  margin-top:12px;
  max-width:88ch;
}


/* ==========================================================================
   2. HOW WE START, AND THE CLOSE — section 30, the mist band
   ========================================================================== */

/* The ladder itself is ng-shared §13c and the pills are §7's --onmist variant.
   Only the note, the chip row and the closing panel are this page's. */
.ng-v2 .ng-how__note{
  margin-top:34px;
  max-width:80ch;
}
/* The four lateral destinations as chips rather than as links inside the note
   above them. A link buried mid-sentence measured 282x42 as a tap target on
   the sectors hub and had to be lifted out; this page does not repeat that.
   Every one of the four is a page section 20 does NOT link to, so no label and
   no URL appears twice on the page. */
.ng-v2 .ng-how__links{ margin-top:18px; }

/* --- 2a. the closing panel ------------------------------------------------
   THE PAGE CANNOT CLOSE ON THE INDIGO SLAB — `dark: NONE-MIST`. akaryakit and
   gayrimenkul hit the same wall and answered it with a mist rail on the
   ground; this page's last band IS the mist, so the same idea has to run the
   other way round: the SUNKEN band holds a RAISED white panel. Same class
   names as those two sheets on purpose — it is one idiom with two surface
   arrangements, and no two page sheets ever load together. Not promoted:
   three leaves have now written .ng-close__rail, but not the same one, and
   promoting the shared half while the surface differs would just move the
   disagreement into ng-shared.css.

   It sits inside the last section rather than in a section of its own,
   because the assignment is three sections and this is the third. */
.ng-v2 .ng-close__rail{
  margin-top:46px;
  padding:26px 22px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__rail{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:44px;
    align-items:center;
    padding:34px 36px;
  }
}
.ng-v2 .ng-close__eyebrow{ margin:0; }
/* Doubled class for the theme's 50px margin-top: this h2 is NOT the first
   child of its block — the eyebrow is — so `h2:not(:first-child)` matches it,
   unlike the two section heads. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-size:clamp(1.6rem, 3.2vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  max-width:22ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 6.21:1 on white */
  max-width:54ch;
}
.ng-v2 .ng-close__side{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; }
}
.ng-v2 .ng-close__actions{ margin-top:0; }
/* 14px for the same reason .ng-cta__meta is: a phone number and an address are
   read and copied, and .04em tracking does not earn the label exception. */
.ng-v2 .ng-close__meta{
  margin:16px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}


/* ==========================================================================
   3. RESPONSIVE
   ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel)
   at <=767, at 768-1023 and at exactly 1024. The only interactive thing this
   page adds is .ng-scale__link, a block over 200px tall at every width, so
   this block is type and rhythm only.
   ========================================================================== */

@media (max-width:767px){
  /* Mobile reading floor, 16px, for every sentence this page adds. The tracked
     labels (__ix, __meta, and .ng-out's __tag/__flag/__label) are exempt by
     MEASUREMENT — letter-spacing / font-size = 0.10, over the 0.08 the checker
     tests — and stay put. .ng-fig__d is already 16px in ng-shared §16a. */
  .ng-v2 .ng-scale__body,
  .ng-v2 .ng-seg__body,
  .ng-v2 .ng-close__lede{ font-size:16px; }
  .ng-v2 .ng-scale__note,
  .ng-v2 .ng-scale__cap,
  .ng-v2 .ng-how__note{ max-width:none; }

  .ng-v2 .ng-scale__list{ margin-top:26px; }
  .ng-v2 .ng-scale__row{ padding:24px 0 28px; gap:20px; }
  .ng-v2 .ng-scale__q.ng-scale__q{ font-size:20px; max-width:none; }
  .ng-v2 .ng-scale__name{ font-size:17px; }
  /* The tile count comes down two steps: at 342px a 26px number over a
     two-line name is the loudest thing on the screen, and it is a sample
     figure. The name goes UP to the reading floor. */
  .ng-v2 .ng-seg__n{ font-size:24px; }
  .ng-v2 .ng-seg__name{ font-size:16px; }
  .ng-v2 .ng-close__rail{ margin-top:36px; padding:22px 18px; }
  .ng-v2 .ng-close__meta{ margin-top:14px; }
}

@media (max-width:479px){
  /* The shortlist at 390. The panel body is 314px of usable width and the four
     columns fit — 42 + name + 64 + 86 — but only with the cell padding
     ng-shared already drops to 12px/7px at this width. The rank column is the
     one that can give: it repeats the row order, which the reading order
     already carries, so it narrows rather than any column holding a figure. A
     DATA column would never be dropped this way, and .ng-dtable__wrap's scroll
     is deliberately not being relied on — a table that only fits by scrolling
     has hidden a column from every phone. */
  .ng-v2 .ng-scale__t tr > :nth-child(1){ width:30px; }
  .ng-v2 .ng-scale__t tr > :nth-child(3){ width:52px; }
  .ng-v2 .ng-scale__t tr > :nth-child(4){ width:74px; }
}


/* ==========================================================================
   4. REDUCED MOTION
   ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce
   preference — including cancelling ng-components.css's !important marker
   transform, which would otherwise drag every card up and left by half its own
   size — and ng-components.css §8 does the same for .ng-anim. Nothing on this
   page adds motion beyond those two: the dossier rows are static grids and the
   only transitions are .ng-scale__q's colour and the shared .ng-arrow's
   translate, both of which are already inside those guards. Left as a note
   rather than an empty block, so the next person does not go looking for the
   missing rule.
   ========================================================================== */