/* ==========================================================================
   UN Insights - scoped stylesheet for the eleven pages of service 02.

   This section is a sibling of Speech Assistant, so the tokens and the shared
   components (tile grid, panel, stat, table, section label, footer) are the same
   ones, copied verbatim from the golden template. It is a SEPARATE file on
   purpose: speech-assistant/assets/sa.css belongs to service 06 and no page
   outside this folder loads this file, so the two sections cannot break each
   other. Do not fork the tokens; if a token changes, change it in both.

   Only three things here are new, and they exist because this section has a
   different job: .tagline (the line under the h1), .hero (the modest subpage
   photograph) and .status (the one-line development notice).
   ========================================================================== */
:root{
  --navy:#0E1F33; --navy-deep:#091625; --navy-panel:#132A44; --navy-card:#10233B;
  --sky:#4FB8E7; --sky-soft:#9AD4F0;
  --hr-ink:#7FA3DD; --se-ink:#29ADE4;
  --sim-c1:#2F5D9E; --sim-c2:#00A0E2;
  --text:#E7F0F7; --text-soft:#A9BDCF;
  --line:rgba(79,184,231,.16); --stripe:rgba(255,255,255,.045);
  --radius:14px; --shadow:0 12px 32px rgba(4,12,22,.5);
  --ok:#48C79A; --warn:#E8B84B; --bad:#E2705F;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}}
html,body{overflow-x:hidden;max-width:100vw}
body{font-family:'Albert Sans',system-ui,sans-serif;background:var(--navy);color:var(--text);
  min-height:100vh}
a{color:var(--sky);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}

/* ---------------------------------------------------------------- chrome --- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:11px 20px;background:rgba(9,22,37,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.brand b{font-weight:800}.brand span{color:var(--sky);font-weight:600}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-soft);min-width:0}
.crumbs a{color:var(--text-soft)}
.crumbs a:hover{color:var(--sky)}
.crumbs .sep{opacity:.5}
.crumbs b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signchip{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sky);
  background:rgba(79,184,231,.13);border:1px solid rgba(79,184,231,.35);padding:3px 10px;
  border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.bandchip{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sky-soft);
  background:rgba(79,184,231,.1);border:1px solid var(--line);padding:3px 10px;
  border-radius:6px;white-space:nowrap}
.wrap{max-width:1260px;margin:0 auto;padding:24px 20px 90px}
.cflag{display:inline-flex;width:18px;height:18px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:#28466B;box-shadow:0 0 0 1px rgba(255,255,255,.22);vertical-align:middle}
.cflag img{width:100%;height:100%;object-fit:cover}
.cflag.big{width:34px;height:34px}

h1{font-size:clamp(24px,3.2vw,38px);font-weight:800;margin:6px 0 8px;letter-spacing:-.012em}
h2{font-size:20px;font-weight:800;margin:0 0 4px}
h3{font-size:15px;font-weight:700;margin:0 0 8px}
.outcome{font-family:'Source Serif 4',serif;font-style:italic;font-size:16px;color:var(--text-soft);
  max-width:730px;line-height:1.6}
.outcome mark{background:none;color:var(--sky);font-style:normal;font-weight:600}
/* The line directly under the title. Serif and quiet: it names the idea of the service
   in one breath, and the description below it does the explaining. */
.tagline{font-family:'Source Serif 4',serif;font-style:italic;font-size:17px;color:var(--sky-soft);
  margin:2px 0 10px}
.section-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);
  font-weight:700;margin:32px 0 12px}
p.lede{color:var(--text-soft);font-size:14.5px;line-height:1.6;max-width:770px}
.head{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.sub-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding-bottom:18px;
  border-bottom:1px solid var(--line)}
.flagpair{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.flagpair .cflag{width:48px;height:48px}
.flagpair .cflag:first-child{box-shadow:0 0 0 2px var(--sim-c1)}
.flagpair .cflag:last-child{box-shadow:0 0 0 2px var(--sim-c2)}
.signrow{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sky);letter-spacing:.12em}
.signrow .sign{background:rgba(79,184,231,.13);border:1px solid rgba(79,184,231,.35);
  padding:2px 8px;border-radius:6px;margin-left:8px}

/* ----------------------------------------------------------------- tiles --- */
/* Two rows of five on a wide screen, the same component as the root menu and the
   Library. Every tile here is a live link: the ten doors all have a page. */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:20px}
@media(min-width:900px){.tgrid{grid-template-columns:repeat(5,1fr);gap:16px}}
.tile{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);display:block;min-width:0;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:rgba(79,184,231,.55);
  box-shadow:0 14px 30px rgba(4,12,22,.55);outline:none;text-decoration:none}
.tile picture{display:block;width:100%;height:100%}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,22,37,.05),rgba(9,22,37,.44) 50%,rgba(9,22,37,.95))}
.tile .lab{position:absolute;left:12px;right:12px;bottom:10px;z-index:2}
.tile .num{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  color:var(--sky-soft);font-weight:600}
.tile .nm{display:block;font-size:clamp(12.5px,1.4vw,17px);font-weight:800;line-height:1.15;
  margin-top:1px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.tile .badge{position:absolute;top:9px;right:10px;z-index:2;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;background:rgba(9,22,37,.74);border:1px solid var(--line);color:var(--sky-soft);
  padding:2px 6px;border-radius:5px}
.tile.here{border-color:rgba(79,184,231,.5)}

/* --------------------------------------------------------------- surfaces -- */
.panel{background:var(--navy-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 17px 15px;margin-top:13px}
.panel.pad0{padding:0;overflow:hidden}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}
.note{font-size:12.5px;color:var(--text-soft);line-height:1.55;background:var(--navy-panel);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px}
.note.warn{border-color:rgba(232,184,75,.5);color:#F3D89A}
.note b{color:var(--text)}
.stat{background:var(--navy-panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat b{display:block;font-family:'IBM Plex Mono',monospace;font-size:23px;color:var(--sky);
  line-height:1.1}
.stat span{display:block;font-size:12.5px;color:var(--text-soft);margin-top:4px;line-height:1.45}

/* ---------------------------------------------------------------- tables --- */
.tw{overflow-x:auto;max-width:100%}
table.tb{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
table.tb th{text-align:left;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sky);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap}
table.tb td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:top}
table.tb tr:nth-child(even) td{background:var(--stripe)}
table.tb td.num,table.tb th.num{text-align:right;font-family:'IBM Plex Mono',monospace}
table.tb td.nw{white-space:nowrap}
.badge2{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:2px 7px;
  border-radius:5px;background:rgba(79,184,231,.14);border:1px solid var(--line);color:var(--sky-soft)}

/* ------------------------------------------------------------- door pages -- */
.pillrow{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-size:12px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);
  background:var(--navy-deep);color:var(--text-soft);transition:.15s}
.pill:hover{background:rgba(79,184,231,.14);border-color:rgba(79,184,231,.5);color:#fff;
  text-decoration:none}
/* The door photograph on its own page. Modest by instruction: it sits beside the title
   at the top of the page rather than running the full width as a banner. */
.hero{width:132px;height:132px;flex:0 0 auto;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:520px){.hero{width:96px;height:96px}}
/* What this will do: capability lines, not a feature list with checkmarks. */
ul.willdo{list-style:none;margin:0}
ul.willdo li{position:relative;padding:0 0 0 18px;margin-bottom:9px;font-size:14px;
  line-height:1.6;color:var(--text-soft)}
ul.willdo li:last-child{margin-bottom:0}
ul.willdo li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--sky);opacity:.8}
ul.willdo li b{color:var(--text);font-weight:700}
/* The single honest status line. A chip, not a button: there is nothing to click yet. */
.status{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:13px;
  font-family:'IBM Plex Mono',monospace;color:var(--warn);
  background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.45);
  border-radius:10px;padding:9px 14px;line-height:1.5}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:0 0 auto}

footer{margin-top:48px;font-size:12px;color:var(--text-soft);border-top:1px solid var(--line);
  padding-top:15px;line-height:1.65}