/* ============================================================
   EXAMPLE WINDOW  (per sub-vertical)
   Large rounded dark window: a live experience pane on top, a
   scrolling content pane (overview + project + evidence) below.
   ============================================================ */
.example-window{
  display:flex; flex-direction:column;
  background:#0c111c;
}
/* Experience pane — the borrowed Treedis iframe fills it. Column layout:
   an optional tab strip (2+ experiences only), then the experience slot. */
.example-stage{
  position:relative; flex:0 0 auto;
  display:flex; flex-direction:column;
  height:clamp(220px, 42%, 460px);
  background:radial-gradient(120% 120% at 50% 0%, #16203400, #0a1018);
  border-bottom:1px solid var(--line);
}
/* #exStageSlot holds whichever experience is active — an iframe today,
   the GIS map mount in a later phase. Loading veil and seam stay direct
   children of the stage, not the slot, so the switcher never has to work
   around them. */
.example-stage-slot{ position:relative; flex:1 1 auto; min-height:0; }
.example-stage-slot iframe{ width:100%; height:100%; border:0; display:block; }
/* A suspended (not active) experience is kept in the DOM — so a Treedis
   session isn't lost — but hidden. Author CSS overrides the UA [hidden]
   rule by cascade origin, so the plain-display rule above has to be
   re-beaten explicitly here or a "hidden" iframe still renders. */
.example-stage-slot iframe[hidden]{ display:none; }

/* Tab strip — one button per experience, hidden entirely (no chrome, no
   layout shift) when a project has fewer than two. */
.example-stage-tabs{
  flex:0 0 auto; display:flex; gap:2px; align-items:stretch;
  padding:0 clamp(10px,1.2vw,18px);
  background:linear-gradient(180deg, rgba(7,14,24,.92), rgba(7,14,24,.55));
  border-bottom:1px solid var(--line-soft);
  overflow-x:auto; scrollbar-width:none;
}
.example-stage-tabs[hidden]{ display:none; }
.example-stage-tab{
  appearance:none; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:9px clamp(10px,1vw,15px);
  font:600 12.5px/1 var(--sans); letter-spacing:.02em;
  color:var(--faint); border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.example-stage-tab:hover{ color:var(--muted); }
.example-stage-tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--gold); }
.example-stage-tab:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:-2px; }
.example-stage-tab svg{ width:13px; height:13px; opacity:.8; flex:none; }

/* GIS pane — the real div js/app.js's mountGis() hands to DTSGis.mount(),
   which builds its Leaflet map directly into it. A parallel rule to the
   ".example-stage-slot iframe" one above, not a change to it — that
   selector is locked to iframe elements specifically (see CLAUDE.md). */
.example-gis-pane{ position:absolute; inset:0; }
.example-gis-pane[hidden]{ display:none; }

/* GIS error state (map missing from cfg.gisMaps, or DTSGis.mount() itself
   failed) — a "gis" experience must never render as a blank pane. */
.example-gis-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:13px; text-align:center; padding:20px;
}
.example-gis-placeholder[hidden]{ display:none; }

/* Gated experience/map, not yet resolved — shown instead of auto-prompting
   for sign-in the moment the project window opens. Only clicking this (or
   "Enter Twin") triggers the actual resolve + sign-in prompt. */
.example-locked-placeholder{
  appearance:none; position:absolute; inset:0; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; cursor:pointer;
  background:radial-gradient(120% 120% at 50% 0%, #16203400, #0a1018);
  border:0; color:var(--muted); font-family:var(--sans);
  transition:color .18s ease;
}
.example-locked-placeholder:hover{ color:var(--ink); }
.example-locked-placeholder[hidden]{ display:none; }
.example-locked-icon{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line-soft);
}
.example-locked-icon svg{ width:16px; height:16px; }
.example-locked-text{ font-size:13px; font-weight:600; }

.example-loading{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; color:var(--muted);
}
.example-loading.is-hidden{ display:none; }
.example-loading-text{ font-size:13px; }

/* Content pane — scrolls within the window. */
.example-content{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:clamp(20px,2.4vw,34px) clamp(20px,2.8vw,40px) clamp(24px,3vw,40px);
}
.example-kicker{ color:var(--gold); font-size:clamp(11px,.95vw,13px); font-weight:700; letter-spacing:.18em; }
.example-title{ font-size:clamp(24px,2.8vw,38px); font-weight:800; margin:6px 0 8px; line-height:1.05; }
.example-tagline{ color:var(--muted); font-size:clamp(13px,1.05vw,16px); margin:0 0 16px; line-height:1.5; max-width:70ch; }

.example-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.meta-chip{
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}
.meta-chip.meta-kind{ color:var(--gold); border-color:rgba(214,168,73,.45); background:rgba(214,168,73,.08); }

.example-overview{ color:var(--muted); font-size:clamp(13px,1.02vw,15.5px); line-height:1.65; max-width:74ch; margin:0 0 22px; }

.example-project{
  background:linear-gradient(160deg, rgba(18,26,43,.7), rgba(10,15,24,.7));
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:12px; padding:clamp(16px,1.6vw,24px); margin:0 0 22px;
}
.example-project-label{ color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.16em; }
.example-project-name{ font-size:clamp(16px,1.4vw,21px); font-weight:700; margin:8px 0 8px; }
.example-project-blurb{ color:var(--muted); font-size:clamp(13px,1vw,15px); line-height:1.6; margin:0; max-width:76ch; }
.example-illustrative{
  display:inline-block; margin-top:12px;
  font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--faint);
  border:1px dashed var(--line); border-radius:6px; padding:4px 10px;
}

.example-evidence{ margin:0 0 24px; }
.example-evidence-label{ color:var(--ink); font-size:clamp(11px,.95vw,13px); font-weight:700; letter-spacing:.12em; }
.example-evidence-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 14px; }
.example-evidence-tabs button{
  appearance:none; cursor:pointer; white-space:nowrap;
  background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:6px;
  padding:7px 14px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.03em;
  transition:border-color .15s,color .15s,background .15s;
}
.example-evidence-tabs button:hover{ color:var(--ink); border-color:var(--gold); }
.example-evidence-tabs button.is-active{ color:#1a1206; background:var(--gold); border-color:var(--gold); }
.example-evidence-body{ color:var(--muted); font-size:clamp(13px,1vw,15px); line-height:1.6; margin:0; max-width:76ch; min-height:2.6em; }

.example-cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.example-cta{
  appearance:none; cursor:pointer;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:9px;
  padding:13px 22px; font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.02em;
  transition:border-color .15s, background .15s, color .15s;
}
.example-cta:hover{ border-color:var(--gold); }
.example-cta-primary{ background:var(--gold); color:#1a1206; border-color:var(--gold); }
.example-cta-primary:hover{ background:var(--gold-bright); }

/* Icon-only variant — the Share button sitting alongside Enter Twin /
   Contact Us about this in the CTA row. */
.example-cta-icon{
  flex:0 0 auto; width:46px; height:46px;
  padding:0; display:flex; align-items:center; justify-content:center;
}

/* Sector colour accents for the example window kicker / project rule. */
.example-window[data-sector="education"]  .example-kicker,
.example-window[data-sector="education"]  .example-project-label{ color:#e9b44c; }
.example-window[data-sector="industry"]   .example-kicker,
.example-window[data-sector="industry"]   .example-project-label{ color:#2e8bff; }
.example-window[data-sector="government"] .example-kicker,
.example-window[data-sector="government"] .example-project-label{ color:#34598f; }
.example-window[data-sector="community"]  .example-kicker,
.example-window[data-sector="community"]  .example-project-label{ color:#d27049; }