/* ═══════════════════════════════════════════════════════════════════════════
   xray.css — the look-through dashboard.                       added 2026-10-02

   Same palette as the rest of /portfolio/: cream page, white cards, navy for
   structure, gold for the one thing that matters on a card. Nothing here uses
   colour alone to carry meaning — every segment of every bar is also written
   out in the legend beside it, with its percentage and its rupees.
   ═══════════════════════════════════════════════════════════════════════════ */

#pf-xray{margin-top:26px}

.xr-sec{
  background:var(--pf-card); border:1px solid var(--pf-line); border-radius:18px;
  padding:26px 26px 24px; margin-bottom:18px; box-shadow:var(--pf-sh-sm);
}
.xr-head{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:20px}
.xr-head h3{margin:7px 0 6px; font-size:22px; letter-spacing:-.4px; color:var(--pf-navy); font-weight:650}
.xr-head p{margin:0; max-width:62ch; font-size:12.5px; line-height:1.75; color:var(--pf-mut)}
.xr-eyebrow{font-size:9px; font-weight:700; letter-spacing:1.8px; color:var(--pf-gold-d)}

.xr-window{
  flex:0 0 auto; text-align:right; padding:12px 16px; border-radius:12px;
  background:#faf6ec; border:1px solid var(--pf-line);
}
.xr-window b{display:block; font-size:14px; color:var(--pf-navy); font-variant-numeric:tabular-nums}
.xr-window span{display:block; font-size:10.5px; color:var(--pf-mut); margin-top:3px}

/* ── tiles ───────────────────────────────────────────────────────────────── */
.xr-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.xr-tile{
  padding:16px 17px; border-radius:13px; background:#fbf8f0;
  border:1px solid var(--pf-line); min-height:104px;
  transition:transform .16s var(--pf-ease), box-shadow .16s ease;
}
.xr-tile:hover{transform:translateY(-1px); box-shadow:var(--pf-sh-sm)}
.xr-tile>span{display:block; font-size:10px; letter-spacing:.04em; color:var(--pf-mut); text-transform:uppercase}
.xr-tile>strong{
  display:block; margin:9px 0 6px; font-size:25px; font-weight:600;
  letter-spacing:-1px; color:var(--pf-navy); font-variant-numeric:tabular-nums;
}
.xr-tile>small{display:block; font-size:10.5px; line-height:1.6; color:var(--pf-mut)}
.xr-tile.big{background:linear-gradient(135deg,var(--pf-navy) 0%,var(--pf-navy2) 100%); border-color:var(--pf-navy)}
.xr-tile.big>span,.xr-tile.big>small{color:#c4cde0}
.xr-tile.big>strong{color:var(--pf-gold-l)}
.xr-tile.warn{background:#fdf4e3; border-color:#e3cd9a}

/* ── stacked bars ────────────────────────────────────────────────────────── */
.xr-bar{display:flex; height:16px; border-radius:8px; overflow:hidden; background:#efe9db; margin:4px 0 14px}
.xr-seg{display:block; height:100%}
.xr-seg + .xr-seg{box-shadow:inset 2px 0 0 var(--pf-card)}
.xr-key{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.xr-key li{display:grid; grid-template-columns:9px 1fr auto auto; align-items:center; gap:9px; font-size:11.5px}
.xr-key i{width:9px; height:9px; border-radius:3px; display:block}
.xr-key span{color:var(--pf-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.xr-key b{color:var(--pf-navy); font-variant-numeric:tabular-nums; font-weight:600}
.xr-key em{color:var(--pf-mut); font-style:normal; font-variant-numeric:tabular-nums; min-width:68px; text-align:right}

/* ── cards inside a section ──────────────────────────────────────────────── */
.xr-split3{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.xr-card{padding:18px 19px; border:1px solid var(--pf-line); border-radius:14px; background:#fff; margin-top:14px}
.xr-split3 .xr-card{margin-top:0}
.xr-card.xr-wide{grid-column:1/-1}
.xr-card h4{margin:0 0 12px; font-size:13px; font-weight:650; color:var(--pf-navy)}
.xr-card h4 em{font-style:normal; font-weight:400; font-size:11px; color:var(--pf-mut)}
.xr-sub{margin:-4px 0 12px; font-size:11px; line-height:1.65; color:var(--pf-mut)}
.xr-na{font-size:11.5px; color:var(--pf-mut); margin:0}
.xr-note{
  margin-top:16px; padding:13px 16px; border-radius:11px; font-size:11.5px; line-height:1.75;
  background:#faf6ec; border:1px solid var(--pf-line); color:var(--pf-mut);
}
.xr-note b{color:var(--pf-navy)}
.xr-empty{padding:26px; text-align:center; font-size:12.5px; color:var(--pf-mut)}

/* ── tables ──────────────────────────────────────────────────────────────── */
.xr-scroll{overflow:auto; border:1px solid var(--pf-line); border-radius:12px}
.xr-table{width:100%; border-collapse:collapse; font-size:12px; min-width:620px}
.xr-table th{
  position:sticky; top:0; z-index:1;
  background:#f3ece0; color:var(--pf-navy); text-align:left; font-weight:600;
  font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:11px 13px; white-space:nowrap;
}
.xr-table td{padding:12px 13px; border-top:1px solid #f0ebe0; vertical-align:top; color:var(--pf-ink)}
.xr-table tbody tr:hover td{background:#fbf8f0}
.xr-table .n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.xr-table strong{display:block; font-weight:600; color:var(--pf-navy)}
.xr-table small{display:block; margin-top:3px; font-size:10px; color:var(--pf-mut)}
.xr-up{color:var(--pf-up)}
.xr-dn{color:var(--pf-dn)}
.xr-bm{color:var(--pf-mut)}
.xr-why{font-size:10.5px; color:var(--pf-mut); line-height:1.6; min-width:200px}
.xr-defs{min-width:720px}
.xr-via span{display:block; max-width:420px; font-size:10.5px; color:var(--pf-mut); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.xr-pill{display:inline-block; padding:3px 9px; border-radius:20px; background:#eef2f8; color:#28415f; font-weight:600}
.xr-pill.warm{background:#fdf0d7; color:#7a5712}
.xr-pill.hot{background:#fbe6e2; color:#8e2a21}

/* ── the growth chart ────────────────────────────────────────────────────── */
.xr-figure{margin:20px 0 0}
.xr-figure figcaption{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:10px; font-size:11.5px; color:var(--pf-ink)}
.xr-lg{display:inline-flex; align-items:center; gap:7px}
.xr-lg i{width:14px; height:3px; border-radius:2px; display:block}
.xr-lg i.p{background:var(--pf-gold)}
.xr-lg i.b{background:#9aa6bb}
.xr-lg b{font-variant-numeric:tabular-nums; color:var(--pf-navy)}
.xr-lg-note{color:var(--pf-mut); font-size:10.5px}
.xr-figure svg{width:100%; height:290px; display:block; overflow:visible}
.xr-grid{stroke:#ece5d7; stroke-width:1}
.xr-ax{fill:var(--pf-mut); font-size:10px; font-family:inherit}
.xr-line{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.xr-line.p{stroke:var(--pf-gold)}
.xr-line.b{stroke:#9aa6bb; stroke-dasharray:5 4}

/* ── observations ────────────────────────────────────────────────────────── */
.xr-flags{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.xr-flags li{
  display:grid; gap:4px; padding:14px 16px; border-radius:12px;
  background:#faf6ec; border:1px solid var(--pf-line); border-left:3px solid var(--pf-gold);
}
.xr-flags strong{font-size:12px; color:var(--pf-navy)}
.xr-flags span{font-size:11.5px; line-height:1.7; color:var(--pf-mut)}

/* ── narrow screens ──────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .xr-tiles{grid-template-columns:repeat(2,1fr)}
  .xr-split3{grid-template-columns:1fr}
  .xr-head{flex-direction:column; gap:14px}
  .xr-window{text-align:left; align-self:stretch}
}
@media (max-width:620px){
  .xr-sec{padding:18px 16px 16px; border-radius:14px}
  .xr-tiles{grid-template-columns:1fr; gap:9px}
  .xr-tile{min-height:0}
  .xr-tile>strong{font-size:22px}
  .xr-head h3{font-size:18px}
  .xr-figure svg{height:220px}
  .xr-key li{grid-template-columns:9px 1fr auto}
  .xr-key em{display:none}
}
@media (prefers-reduced-motion:reduce){
  .xr-tile{transition:none}
  .xr-tile:hover{transform:none}
}

/* ── workspace (₹99) ─────────────────────────────────────────────────────── */
.xr-w{
  width:72px; padding:6px 8px; text-align:right; border:1px solid var(--pf-line2);
  border-radius:8px; background:#fff; color:var(--pf-navy); font:inherit;
  font-size:12px; font-variant-numeric:tabular-nums;
}
.xr-wsactions{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:14px}
.xr-wsactions .xr-sub{margin:0}
.xr-btn{
  padding:9px 14px; border:1px solid var(--pf-line2); border-radius:10px; cursor:pointer;
  background:#fbf8f0; color:var(--pf-navy); font:inherit; font-size:12px; font-weight:600;
  transition:transform .16s var(--pf-ease), background .16s ease;
}
.xr-btn:hover{background:#f3ece0}
.xr-btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){ .xr-btn{transition:none} }

/* ── a firm seat's remaining reports ─────────────────────────────────────── */
.xr-seatbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:11px 18px; margin-bottom:14px; border-radius:12px;
  background:#eef2f8; border:1px solid #cfdaea; 
  color:#2c4365; font-size:11.5px;
}
.xr-seatbar b{color:var(--pf-navy)}
.xr-seatbar.low{background:#fdf4e3; border-color:#e3cd9a; color:#7a5712}
.xr-seatbar.low b{color:#7a5712}

/* ── seat panel ──────────────────────────────────────────────────────────── */
.st-form{display:grid; grid-template-columns:1.4fr 1.2fr .9fr .8fr auto; gap:12px; align-items:end}
.st-form label{display:block; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--pf-mut)}
.st-form input, .st-form select{
  display:block; width:100%; margin-top:5px; padding:9px 11px; font:inherit; font-size:12.5px;
  border:1px solid var(--pf-line2); border-radius:9px; background:#fff; color:var(--pf-navy);
}
.st-form .pp-buy{width:auto; white-space:nowrap}
.st-lvl, .st-q{padding:7px 9px; border:1px solid var(--pf-line2); border-radius:8px; background:#fff;
  color:var(--pf-navy); font:inherit; font-size:12px}
.st-q{width:78px; text-align:right; font-variant-numeric:tabular-nums}
.xr-table td small{color:var(--pf-mut)}
.st-bar{display:block; height:5px; border-radius:3px; background:#e6ddc9; margin:6px 0 4px; overflow:hidden}
.st-bar i{display:block; height:100%; background:var(--pf-gold); border-radius:3px}
@media (max-width:900px){ .st-form{grid-template-columns:1fr 1fr} .st-form .pp-buy{grid-column:1/-1; width:100%} }

/* ── grid items must be allowed to shrink ────────────────────────────────────
   A grid track of 1fr is minmax(auto, 1fr), and `auto` will not go below its
   content — so the Workspace card, holding a 620px-wide table, held the whole
   page open at 662px on a 634px screen and the reader got a horizontal scroll
   bar on a page they had paid for. The table already scrolls on its own; it
   just needed permission to be narrower than what is inside it.

   This is the same trap that once made the holdings page 8,643px wide. */
.xr-split3 > *, .xr-tiles > *, .xr-key > li { min-width: 0 }
.xr-scroll, .xr-figure { min-width: 0; max-width: 100% }
.xr-card { overflow: hidden }          /* nothing escapes the card's rounding */