/* Penang LRT article charts. Scoped to .art-chart.plrt; sits on top of the article's own .art-chart container.
   Selectors carry three-class weight so the article's .art-body rules cannot restyle the charts.
   Colours come from the article page variables, with article.php's own fallbacks.
   No JavaScript, no motion, no fixed text widths. */
.plrt{
  --plrt-gold:var(--gold,#7a5c14);
  --plrt-ink:var(--ink,#0d0d0d);
  --plrt-mid:var(--mid,#6b6b6b);
  --plrt-rule:var(--rule,#e8e3da);
  --plrt-paper:var(--paper,#faf8f5);
  --plrt-valw:5.6em;   /* width of the value column on wide layouts; widened per locale below */
  margin:14px 0 24px;
  line-height:1.5;
  color:var(--plrt-ink);
  overflow-wrap:break-word;
}
.art-chart.plrt *{box-sizing:border-box}
.art-chart.plrt p,.art-chart.plrt ul,.art-chart.plrt ol,.art-chart.plrt li,.art-chart.plrt dl,.art-chart.plrt dt,.art-chart.plrt dd,.art-chart.plrt h3,.art-chart.plrt h4,.art-chart.plrt table{margin:0;padding:0}
.art-chart.plrt h4{font-family:inherit}
.art-chart.plrt th,.art-chart.plrt td{border:0;background:none;padding:0;font-weight:inherit}
.art-chart.plrt ul,.art-chart.plrt ol{list-style:none}

.art-chart.plrt .plrt-badge{display:inline-block;border:1px solid var(--plrt-gold);border-radius:999px;padding:3px 12px;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--plrt-gold);line-height:1.5}
/* The title is an h3 inside .art-body, so it takes the article's own heading font. */
.art-chart.plrt .plrt-title{font-size:1.4rem;line-height:1.2;margin:10px 0 4px;font-weight:700}
.art-chart.plrt .plrt-sub{font-size:.92rem;color:var(--plrt-mid);margin-bottom:14px}

.art-chart.plrt .plrt-card{background:#fff;border:1px solid var(--plrt-rule);border-radius:8px;padding:14px 16px;margin-top:12px}
.art-chart.plrt .plrt-card-h{font-size:1.02rem;line-height:1.3;font-weight:700}
.art-chart.plrt .plrt-meta{font-size:.84rem;color:var(--plrt-mid);margin-top:3px}
.art-chart.plrt .plrt-note{font-size:.84rem;color:var(--plrt-mid);margin-top:8px}
.art-chart.plrt .plrt-method{font-size:.82rem;color:var(--plrt-mid);margin-top:14px}
.art-chart.plrt .plrt-src{font-size:.8rem;color:var(--plrt-mid);margin-top:4px}
.art-chart.plrt .plrt-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Longer value wording in Malay ("kira-kira 9.5%") needs wider label and value columns.
   Wide layouts only: on narrow screens every language uses the stacked row further down. */
@media (min-width:561px){
  .art-chart.plrt.plrt-ms{--plrt-valw:7.6em}
  .art-chart.plrt.plrt-ms .plrt-row{grid-template-columns:minmax(0,13.5em) minmax(0,1fr) var(--plrt-valw)}
  .art-chart.plrt.plrt-ms .plrt-rows-stack .plrt-row{grid-template-columns:minmax(0,1fr) auto}
}

/* Legend and marks. Phase is carried by fill AND by the row label in words. */
.art-chart.plrt .plrt-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.84rem;color:var(--plrt-mid)}
.art-chart.plrt .plrt-legend li{display:flex;align-items:center;gap:7px}
.art-chart.plrt .plrt-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--plrt-gold);box-shadow:0 0 0 2px #fff}
.art-chart.plrt .plrt-dot-open{background:#fff;border:2.5px solid var(--plrt-gold);box-shadow:none}
.art-chart.plrt .plrt-range{display:inline-block;height:8px;border-radius:4px;background:var(--plrt-gold)}
.art-chart.plrt .plrt-key{flex:none;position:static}

/* Result rows. Wide: label | track | value. Narrow: label and value on one line, track beneath. */
.art-chart.plrt .plrt-rows{margin-top:10px}
.art-chart.plrt .plrt-row{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr) var(--plrt-valw);grid-template-areas:"label plot value";align-items:center;column-gap:12px;padding:5px 0}
.art-chart.plrt .plrt-row-label{grid-area:label;font-size:.9rem}
.art-chart.plrt .plrt-row-plot{grid-area:plot}
.art-chart.plrt .plrt-row-value{grid-area:value;font-size:.95rem;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.art-chart.plrt .plrt-track{position:relative;display:block;height:4px;border-radius:2px;background:var(--plrt-rule);margin:0 8px}
.art-chart.plrt .plrt-track .plrt-stem{position:absolute;left:0;top:1px;height:2px;background:var(--plrt-gold)}
.art-chart.plrt .plrt-track .plrt-dot{position:absolute;top:50%;transform:translate(-50%,-50%)}
.art-chart.plrt .plrt-track .plrt-range{position:absolute;top:-2px}

/* Chart 2: steps */
.art-chart.plrt .plrt-step{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:0;background:#fff;border:1px solid var(--plrt-gold);border-radius:8px;padding:14px 16px;margin-top:0;position:relative}
.art-chart.plrt .plrt-step + .plrt-step{margin-top:0}
.art-chart.plrt .plrt-num{width:32px;height:32px;border-radius:50%;background:var(--plrt-gold);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1rem;border:2px solid var(--plrt-gold)}
.art-chart.plrt .plrt-step-t{font-size:.92rem;color:var(--plrt-mid);margin-top:2px}
.art-chart.plrt .plrt-step-note{font-size:.9rem;font-style:italic;margin-top:8px}
.art-chart.plrt .plrt-step-final{border-style:dashed;border-width:1.5px}
.art-chart.plrt .plrt-step-final .plrt-num{background:#fff;color:var(--plrt-gold)}
.art-chart.plrt .plrt-cond-label{font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--plrt-mid);margin-top:12px}
.art-chart.plrt .plrt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.art-chart.plrt .plrt-chips li{border:1px solid var(--plrt-gold);border-radius:999px;padding:3px 12px;font-size:.86rem;background:var(--plrt-paper)}
.art-chart.plrt .plrt-chips-quiet li{border-color:#b9b2a3}
/* The condition between two steps hangs below its card, beside a drawn arrow. */
.art-chart.plrt .plrt-steps .plrt-step:not(.plrt-step-final){margin-bottom:46px}
.art-chart.plrt .plrt-if{position:absolute;left:0;right:0;top:100%;height:46px;display:flex;align-items:center;padding-left:62px;font-size:.88rem;font-style:italic;color:var(--plrt-gold);line-height:1.25}
.art-chart.plrt .plrt-if::before{content:"";position:absolute;left:32px;top:5px;bottom:12px;width:2px;background:var(--plrt-gold)}
.art-chart.plrt .plrt-if::after{content:"";position:absolute;left:27px;bottom:3px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--plrt-gold)}
.art-chart.plrt .plrt-measured{font-size:.9rem;font-weight:700;margin-top:14px}

/* Chart 3: comparison */
.art-chart.plrt .plrt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.art-chart.plrt .plrt-cmp{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.92rem}
.art-chart.plrt .plrt-cmp,.art-chart.plrt .plrt-cmp tbody,.art-chart.plrt .plrt-cmp thead,.art-chart.plrt .plrt-cmp tr{display:block}
.art-chart.plrt .plrt-cmp tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
.art-chart.plrt .plrt-cmp thead td{display:none}
.art-chart.plrt .plrt-cmp thead th{border:1px solid var(--plrt-ink);border-radius:8px;background:#fff;padding:8px 6px;text-align:center;font-size:1.05rem;font-weight:700;line-height:1.25}
.art-chart.plrt .plrt-tag{display:block;font-size:.78rem;font-weight:400;color:var(--plrt-mid)}
.art-chart.plrt .plrt-cmp-label{grid-column:1 / -1;text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--plrt-mid);text-transform:uppercase;padding:12px 0 4px}
.art-chart.plrt .plrt-cmp-cell{background:#fff;border:1px solid var(--plrt-rule);border-radius:6px;padding:8px 10px;line-height:1.35}
.art-chart.plrt .plrt-big{font-size:1.2rem;font-weight:700}
.art-chart.plrt .plrt-gap td{grid-column:1 / -1;font-weight:700;padding-top:8px;font-size:.95rem}
.art-chart.plrt .plrt-rows-stack .plrt-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "plot plot";row-gap:4px}
.art-chart.plrt .plrt-bar{display:block;height:10px;border-radius:5px;background:var(--plrt-rule);overflow:hidden}
.art-chart.plrt .plrt-fill{display:block;height:100%;border-radius:5px;background:var(--plrt-gold)}
/* Non-rail bar is outlined, not recoloured: identity is carried by form and by its label. */
.art-chart.plrt .plrt-fill-alt{background:#fff;border:1.5px solid var(--plrt-ink)}
.art-chart.plrt .plrt-card-assume{border:1.5px dashed var(--plrt-gold)}
.art-chart.plrt .plrt-hero{font-size:1.5rem;font-weight:700;line-height:1.2;margin-top:8px}
.art-chart.plrt .plrt-alt-case{font-size:.9rem;margin-top:10px;padding-top:10px;border-top:1px solid var(--plrt-rule)}
.art-chart.plrt .plrt-excl{font-style:italic}

/* Narrow columns: put the label above its plot line. */
@media (max-width:560px){
  .art-chart.plrt .plrt-title{font-size:1.28rem}
  .art-chart.plrt .plrt-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "plot plot";row-gap:6px;padding:6px 0}
  .art-chart.plrt .plrt-track{margin:0 8px 4px}
  .art-chart.plrt .plrt-card{padding:12px 14px}
}
/* Page-scoped emphasis. This stylesheet is linked only when render_profile is penang_lrt.
   The site sets article body text at weight 300, so default bold computes to 400 and the
   in-paragraph labels this article relies on (and its hypothetical disclaimer) barely show. */
.art-body :is(p,li)>strong{font-weight:700}

@media print{.plrt-card,.plrt-step{break-inside:avoid}}
@media (forced-colors:active){
  .art-chart.plrt .plrt-dot,.art-chart.plrt .plrt-fill,.art-chart.plrt .plrt-range,.art-chart.plrt .plrt-stem{forced-color-adjust:none;background:CanvasText}
  .art-chart.plrt .plrt-dot-open{background:Canvas;border-color:CanvasText}
  .art-chart.plrt .plrt-fill-alt{background:Canvas;border-color:CanvasText}
}