/* ─────────────────────────────────────────────────────────────────────────────
   CoPlanes Layout — visual layer. Loaded after index.html's own styles and only
   refines them (no layout changes to the board): brand gradient accents, glassy
   floating controls, tile-style status bar, cards with an accent mark, and the
   infographic's selection cards (index.html igSel*). Uses the page tokens, so it
   follows light / dark and RTL like everything else.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --ui-grad: linear-gradient(135deg, var(--accent), var(--brand-teal));
  --ui-glow: color-mix(in srgb, var(--accent) 24%, transparent);
  --ui-glass: color-mix(in srgb, var(--surface) 88%, transparent);
  --ui-track: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* Header: brand hairline + gradient primary */
.top { position: relative; box-shadow: 0 1px 0 var(--line-2), 0 10px 30px -24px rgba(18,32,42,.35); }
.top::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--ui-grad); opacity: .55; pointer-events: none; }
.brand-mark { filter: drop-shadow(0 6px 14px var(--ui-glow)); }
.btn { transition: border-color .15s, color .15s, background-color .15s, box-shadow .15s, transform .15s; }
.btn.primary { background: var(--ui-grad); border-color: transparent; box-shadow: 0 8px 18px -10px var(--accent); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn.toggle[aria-pressed="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.hpop { border-radius: 14px; box-shadow: 0 24px 48px -18px rgba(0,0,0,.4); }

/* Status bar: each column is a small tile with a brand rule */
.kpis { gap: 12px; }
.kpi { position: relative; padding: 8px 12px 9px; border-radius: 12px; border: 1px solid var(--line-2); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, transparent), var(--surface)); overflow: hidden; }
.kpi::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--ui-grad); opacity: .7; }
.kpi:first-child::before { background: linear-gradient(90deg, var(--brand-navy), var(--accent)); opacity: .9; }
.kpi .k-v { font-size: 17px; font-weight: 700; }
.kpi .k-v .bar { height: 6px; border-radius: 6px; }
@media (max-width: 900px) { .kpi { padding: 6px 10px; } }

/* Zones list */
.side-head { box-shadow: 0 8px 16px -14px rgba(18,32,42,.3); }
.search { transition: border-color .15s, box-shadow .15s; }
.search:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.chip { transition: background-color .15s, border-color .15s, color .15s; }
.chip[aria-pressed="true"] { background: var(--ui-grad); border-color: transparent; box-shadow: 0 6px 14px -8px var(--accent); }
.row { position: relative; transition: background-color .12s; }
.row.sel { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.row.sel::before { content: ''; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--ui-grad); }
.row.area { letter-spacing: -.005em; }

/* Side panel: section marks, summary, discipline cards */
.sec-h { display: flex; align-items: center; gap: 8px; }
.sec-h::before { content: ''; width: 4px; height: 13px; border-radius: 4px; background: var(--ui-grad); flex: none; }
.summary { background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface-2); border-color: var(--line-2); }
[dir="rtl"] .summary { background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface-2); }
.big { background: var(--ui-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.dcard { position: relative; overflow: hidden; transition: border-color .15s, box-shadow .2s, transform .2s; }
.dcard::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--ui-grad); opacity: .6; }
.dcard:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 16px 30px -24px var(--accent); }
.dicon { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.p1-tile { transition: border-color .15s; }
.p1-tile.tot { background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--surface-2); }
.own-av { background: var(--ui-grad); box-shadow: 0 6px 14px -8px var(--accent); }
.zrow { transition: background-color .12s; }
.pill { background: color-mix(in srgb, currentColor 9%, transparent); }

/* Map: glassy floating controls, label shadows, map card */
.map-ctrl button { background: var(--ui-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .15s, border-color .15s; }
.map-ctrl button:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }
.lbl rect { filter: drop-shadow(0 3px 5px rgba(18,32,42,.22)); }
.map-card { background: var(--ui-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); }
.map-card::before { content: ''; position: sticky; display: block; top: 0; height: 3px; margin: -12px -12px 6px; background: var(--ui-grad); }

/* Dialogs: brand hairline under the heading */
dialog .m-head { position: relative; }
dialog .m-head::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--ui-grad); opacity: .45; }
dialog { box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }

/* ── Infographic cards (shared) ───────────────────────────────────────────── */
.ig-col > .ig-card { flex: none; }
.ig-card { border-radius: 16px; background: var(--ui-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -26px rgba(0,0,0,.6); }
.ig-card h3::before { content: ''; width: 4px; height: 14px; border-radius: 4px; background: var(--ui-grad); flex: none; }
.ig-ring svg { filter: drop-shadow(0 4px 10px var(--ui-glow)); }

/* Selection hero */
.ig-hero { position: relative; overflow: hidden; gap: 8px; }
.ig-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--igc) 18%, transparent), transparent 70%); }
[dir="rtl"] .ig-hero::before { background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--igc) 18%, transparent), transparent 70%); }
.ig-hero > * { position: relative; }
.ig-hero h3::before { display: none; }
.ig-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ig-back:hover { border-color: var(--accent); }
.ig-hk { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-teal); }
[dir="rtl"] .ig-hk { letter-spacing: 0; text-transform: none; font-size: 12px; }
.ig-ht { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ig-ht h3 { font-size: 19px; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.ig-hm { font-size: 12px; }
.ig-own { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.ig-own > div { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; font-size: 13px; }
.ig-own .own-av { width: 34px; height: 34px; font-size: 12px; }
.ig-own .btn { text-decoration: none; }
.ig-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-acts .btn { min-height: 32px; }

/* Disciplines (zone): 2×2 tiles */
.ig-dts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.ig-dt { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "h r" "s r" "n r" "i i"; gap: 2px 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .2s; overflow: hidden; }
.ig-dt::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 0; width: 3px; background: var(--dc); }
.ig-dt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--dc) 55%, var(--line)); transform: translateY(-1px); box-shadow: 0 12px 24px -18px var(--dc); }
.ig-dt:focus-visible { outline: 2px solid var(--accent); }
.ig-dt:disabled { cursor: default; }
.ig-dh { grid-area: h; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.ig-dh b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-dh .dicon, .ig-pts .dicon, .ig-vd .dicon { width: 22px; height: 22px; border-radius: 6px; }
.ig-dh .dicon svg, .ig-pts .dicon svg, .ig-vd .dicon svg { width: 13px; height: 13px; }
.ig-dr { grid-area: r; position: relative; width: 44px; height: 44px; align-self: center; }
.ig-dr svg { width: 44px; height: 44px; display: block; }
.ig-dr .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; direction: ltr; }
.ig-ds { grid-area: s; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding-inline-start: 29px; }
.ig-ds i { width: 8px; height: 8px; border-radius: 8px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.ig-dn { grid-area: n; font-size: 11px; color: var(--muted); padding-inline-start: 29px; }
.ig-di { grid-area: i; font-size: 11px; color: var(--st-dl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Disciplines (area): stacked status bars */
.ig-mix { display: flex; flex-direction: column; gap: 5px; }
.ig-mix .ig-dh .num { margin-inline-start: auto; font-size: 12px; font-weight: 700; }
.ig-stk { display: flex; gap: 2px; height: 9px; border-radius: 9px; overflow: hidden; background: var(--ui-track); }
.ig-stk i { min-width: 4px; }

/* Schedule of the selection */
.ig-sd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ig-sd > div { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); border: 1px solid var(--line-2); }
.ig-sd b { font-size: 13px; }
.ig-sb { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.ig-sb .tr { height: 9px; border-radius: 9px; background: var(--ui-track); overflow: hidden; }
.ig-sb .tr i { display: block; height: 100%; border-radius: 9px; }
.ig-sb b { font-size: 12.5px; direction: ltr; }
.ig-sv { font-size: 12.5px; }
.ig-vd { display: flex; flex-direction: column; gap: 6px; }
.ig-vd > div { display: flex; flex-wrap: wrap; gap: 5px; }
.ig-vd .p1-chip { display: inline-flex; align-items: center; gap: 5px; }

/* Zones of an area */
.ig-zrs { display: flex; flex-direction: column; gap: 6px; max-height: 330px; overflow: auto; scrollbar-width: thin; }
.ig-zr { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "d a" "t t"; gap: 3px 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); border-inline-start: 3px solid var(--zc); background: var(--surface); cursor: pointer; font-size: 12.5px; transition: border-color .15s, background-color .15s; }
.ig-zr:hover, .ig-zr.on { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); border-inline-start-color: var(--zc); }
.ig-zr:focus-visible { outline: 2px solid var(--accent); }
.ig-zr .nm { grid-area: n; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-zr .pc { grid-area: p; font-size: 12px; font-weight: 600; }
.ig-zr .dd { grid-area: d; display: inline-flex; gap: 4px; align-items: center; }
.ig-zr .dd i { width: 9px; height: 9px; border-radius: 3px; }
.ig-zr .age { grid-area: a; font-size: 11px; }
.ig-zr .tr { grid-area: t; position: relative; height: 5px; border-radius: 5px; background: var(--ui-track); }
.ig-zr .tr i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 5px; }
.ig-zr .tr b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .5; }

/* Photos & key points */
.ig-phs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ig-ph { all: unset; box-sizing: border-box; position: relative; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; cursor: zoom-in; background: var(--surface-2); box-shadow: 0 6px 14px -10px rgba(0,0,0,.5); }
.ig-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.ig-ph:hover img { transform: scale(1.06); }
.ig-ph:focus-visible { outline: 2px solid var(--accent); }
.ig-ph span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,20,28,.55); color: #fff; font-weight: 700; font-size: 15px; }
.ig-pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.ig-pts li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-inline-start: 3px solid var(--pc); }
.ig-pts li .dicon { flex: none; }
.ig-iss { font-size: 12px; padding: 7px 10px; border-radius: 8px; color: var(--ink); background: color-mix(in srgb, var(--st-dl) 10%, transparent); border-inline-start: 3px solid var(--st-dl); }
.ig-iss b { color: var(--st-dl); }

@media (prefers-reduced-motion: reduce) {
  .btn, .dcard, .ig-dt, .ig-ph img, .map-ctrl button { transition: none; }
}
@media print {
  .top::after, .kpi::before, .dcard::before, .sec-h::before { display: none; }
  .big { -webkit-text-fill-color: var(--ink); color: var(--ink); background: none; }
}