/* SuitabilitySplit — SINGLE SOURCE (one row shape since 2026-09-09: marker · category · lede on aligned columns). tools/_suitability_split.py renders the section and writes this stylesheet into each
   consumer's region: every emirate page ("Where [Emirate] wins", via tools/build-emirate-fit-comparison.py) and the bank pages
   that declare a profile / fit split (via tools/build-bank-detail.py). The rules are the Dubai implementation, moved here
   verbatim (2026-09-07, owner brief; extracted 2026-09-08); the marker colours are the --marker-* tokens in _shared/theme.css. */
.dub-verdict { padding:96px 0; }
.dub-verdict-head { text-align:center; margin-bottom:48px; max-width:640px; margin-left:auto; margin-right:auto; }
.dub-verdict h2 { font-size:clamp(28px,3.2vw,40px); line-height:1.14; letter-spacing:-.02em; font-weight:400; margin:0 0 12px; color:var(--text); }
.dub-verdict-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:820px) { .dub-verdict-grid { grid-template-columns:1fr; } }
.dub-verdict-grid--single { grid-template-columns:minmax(0,1fr); max-width:760px; margin:0 auto; }   /* one panel when no approved alternative data exists (2026-09-09) — never a filler panel */
.dub-panel { padding:32px 30px; border-radius:18px; border:1px solid var(--line); background:rgba(230,224,210,.014); }
.dub-panel-head { display:flex; align-items:center; gap:12px; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.dub-panel-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dub-panel-icon svg { width:15px; height:15px; display:block; }
/* head circles: the tinted disc from the panel-head tokens, the glyph in the same green / red as the rows below */
.dub-panel.win .dub-panel-icon { background:var(--marker-win-bg); color:var(--marker-win-glyph); }
.dub-panel.miss .dub-panel-icon { background:var(--marker-miss-bg); color:var(--marker-miss-glyph); }
.dub-panel.alt .dub-panel-icon { background:var(--marker-miss-bg); color:var(--marker-alt-glyph); }   /* alternative route: the same neutral disc, an orange up-right arrow */
.dub-panel-title { font-size:14px; font-weight:500; color:var(--text); letter-spacing:-.005em; }
.dub-panel-title small { display:block; font-size:11.5px; color:var(--faint); font-weight:400; margin-top:2px; letter-spacing:.01em; }
.dub-verdict-lede { margin:0; color:var(--muted); font-size:15.5px; line-height:1.6; }
/* inline row (owner brief 2026-09-09; separator removed + lede column aligned the same day): [marker] [category] [lede].
   The list becomes a three-track grid — 16px marker · max-content category · lede — and each row is a subgrid of it, so
   every lede in a panel starts on the same x (the widest category sets the column) and every wrapped lede line stays in
   its own column. Green check on the win panel, red minus on the miss panel (the --marker-*-glyph tokens). */
.dub-panel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 16px max-content minmax(0,1fr); column-gap: 12px; row-gap: 14px; }
.dub-panel-row--inline { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 18px; align-items: start; }   /* the only row shape; the row's own 18px gap is the approved spacing (it overrides the list gap inside the subgrid) */
.dub-panel-mark { width: 16px; height: 16px; margin-top: 3px; display: block; }
.dub-panel-mark svg { width: 16px; height: 16px; display: block; }
.dub-panel-row--inline .dub-panel-mark--win { color: var(--marker-win-glyph); }
.dub-panel-row--inline .dub-panel-mark--miss { color: var(--marker-miss-glyph); }
.dub-panel-row--inline .dub-panel-mark--alt { color: var(--marker-alt-glyph); }
.dub-panel-row--inline .dub-panel-cat { font-size: 14px; font-weight: 500; color: var(--text); line-height: 21px; min-width: 0; }
.dub-panel-row--inline .dub-panel-lede { font-size: 13.5px; color: var(--muted); line-height: 21px; min-width: 0; }
.dub-panel-row--plain .dub-panel-cat { grid-column: 2 / -1; }   /* a label-only row spans the category + lede tracks (never widens the category column) */
@media (max-width:42rem) {   /* narrow panels: the category on its own line, the lede under it in the same column */
  .dub-panel-list { grid-template-columns: 16px minmax(0,1fr); }
  .dub-panel-row--inline { row-gap: 4px; }
  .dub-panel-row--inline .dub-panel-lede { grid-column: 2; }
}