/* ============================================================
   AWS Talks #2 — Aceh Cloud Community
   Design system: Apple-style restraint on the ACC orange palette
   ============================================================ */

@import './fonts/fonts.css';

:root {
  /* Palette lifted from AWS Talks #1 */
  --o:        #E8731C;
  --o-lt:     #ED8835;
  --o-dk:     #D96917;
  --cream:    #FDF3EA;
  --peach:    #FAECE2;
  --ink:      #2B2118;
  --ink-70:   #5F5147;
  --ink-45:   #94867B;
  --white:    #FFFFFF;

  /* Apple's sheet curve — used for everything that moves */
  --ease:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  /* Layered, low-contrast shadows — depth without a hard edge */
  --lift-1: 0 1px 2px rgba(43,33,24,.05), 0 4px 12px -6px rgba(43,33,24,.10);
  --lift-2: 0 1px 2px rgba(43,33,24,.05), 0 12px 32px -14px rgba(43,33,24,.18);
  --lift-3: 0 2px 4px rgba(43,33,24,.06), 0 28px 60px -24px rgba(43,33,24,.26);
}

/* ---------- Stage: colour layer, then the WebGL layer, then slides ---------- */

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#stage-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 110% at 12% 0%, #FFFFFF 0%, var(--cream) 46%, var(--peach) 100%);
  transition: background 700ms var(--ease);
}

body[data-theme='orange'] #stage-bg {
  background: radial-gradient(120% 110% at 8% -10%, var(--o-lt) 0%, var(--o) 44%, var(--o-dk) 100%);
}

#scene {
  position: fixed;
  inset: 0;
  /* A canvas is a replaced element: with width:auto it falls back to its intrinsic
     (drawing-buffer) size and ignores the right/bottom insets. Size it explicitly. */
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  pointer-events: none;
}

/* ---------- Reveal base ---------- */

.reveal {
  position: relative;
  z-index: 2;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
}

.reveal .slides { text-align: left; }
.reveal .slides > section { height: 100%; padding: 0; }

.reveal ::selection { background: rgba(232,115,28,.22); }

/* Typography primitives ---------------------------------------------------- */

.reveal h1, .reveal h2, .reveal h3 {
  font-family: 'Fraunces', 'Bookman Old Style', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'SOFT' 48, 'WONK' 0, 'opsz' 120;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-transform: none;
  /* large type reads too loose — pull it in */
  letter-spacing: -0.022em;
  line-height: 1.04;
}

.reveal p { margin: 0; }
.reveal strong { font-weight: 600; color: var(--ink); }
.reveal em { font-style: italic; }

.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  /* small type needs the opposite treatment: open it up */
  letter-spacing: 0.19em;
  color: var(--o);
  margin: 0 0 10px;
}

.lede   { font-size: 19px;   line-height: 1.55; color: var(--ink-70); max-width: 62ch; }
.note   { font-size: 14.5px; line-height: 1.55; color: var(--ink-70); }
.micro  { font-size: 12.5px; line-height: 1.5;  color: var(--ink-45); }

/* ---------- Slide chrome ---------- */

.sheet {
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 52px 68px 30px;
  gap: 26px;
}

.slide-head { display: block; }
.slide-head h2 { font-size: 42px; }

.slide-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-45);
}

.slide-body { min-height: 0; align-self: center; }

/* Brand mark ---------------------------------------------------------------- */

.mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.mark .glyph {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  box-shadow: var(--lift-1);
}
.mark .glyph svg { width: 19px; height: 19px; color: var(--o); }
.mark .brand-logo {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--lift-1);
}

/* ---------- Surfaces: translucent material over the WebGL layer ---------- */

.card {
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-2);
  padding: 22px 24px;
  box-sizing: border-box;
}

.card--tint {
  background: rgba(250,236,226,.80);
  border-color: rgba(255,255,255,.6);
}

.card--solid {
  background: var(--o);
  border-color: rgba(255,255,255,.22);
  color: var(--white);
  box-shadow: var(--lift-3);
}
.card--solid h3, .card--solid .kv-n { color: var(--white); }
.card--solid .note, .card--solid .micro { color: rgba(255,255,255,.86); }
.card--solid .eyebrow { color: rgba(255,255,255,.74); }
.card--solid strong, .card--solid em { color: var(--white); }
.card--solid .ticks li { color: rgba(255,255,255,.90); }
.card--solid .ticks li::before { background: var(--white); }

.provider-card {
  display: grid;
  place-items: center;
  height: 170px;
  padding: 18px;
  overflow: hidden;
}
.provider-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: auto;
  object-fit: contain;
}
.provider-logo--aws { width: 130px; height: 78px; }
.provider-logo--azure,
.provider-logo--google {
  width: 68px;
  height: 68px;
  object-fit: cover;
  object-position: left center;
}

/* On orange slides the material flips to a light-on-dark glass */
[data-theme='orange'] .card {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 20px 50px -28px rgba(90,40,6,.6);
  color: var(--white);
}
[data-theme='orange'] .card h3,
[data-theme='orange'] .card strong,
[data-theme='orange'] .card em { color: var(--white); }
[data-theme='orange'] .card .note,
[data-theme='orange'] .card .micro { color: rgba(255,255,255,.86); }
[data-theme='orange'] .card .eyebrow { color: rgba(255,255,255,.74); }

.card h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 6px;
}

/* ---------- Grids ---------- */

.grid      { display: grid; gap: 16px; }
.g-2       { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3       { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4       { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split     { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.split--wide { grid-template-columns: 1.25fr .75fr; }

/* ---------- Components ---------- */

/* numbered agenda / step chips */
.num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--o);
  color: var(--white);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0;
  flex: none;
}
.num--ghost { background: rgba(232,115,28,.12); color: var(--o); }
[data-theme='orange'] .num { background: var(--white); color: var(--o); }

/* icon tile */
.tile {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(232,115,28,.10);
  color: var(--o);
  display: grid; place-items: center;
  flex: none;
}
.tile svg { width: 21px; height: 21px; }
.tile .service-icon { display: block; width: 40px; height: 40px; border-radius: 12px; }
.card--solid .tile { background: rgba(255,255,255,.18); color: var(--white); }
[data-theme='orange'] .tile { background: rgba(255,255,255,.18); color: var(--white); }

.service-heading { display: flex !important; align-items: center; gap: 14px; }
.service-heading h2 { margin: 0; }
.service-heading .service-heading-icon,
.service-heading .service-heading-icon .service-icon {
  width: 48px;
  height: 48px;
  border-radius: 0;
}

/* horizontal row item */
.row { display: flex; align-items: flex-start; gap: 14px; }
.row .txt { min-width: 0; }

/* stat */
.kv { text-align: left; }
.kv-n {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 48, 'WONK' 0, 'opsz' 144;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--o);
}
.kv-l { font-size: 12.5px; color: var(--ink-70); margin-top: 8px; line-height: 1.45; }
[data-theme='orange'] .kv-n { color: var(--white); }
[data-theme='orange'] .kv-l { color: rgba(255,255,255,.8); }

/* pill */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: rgba(232,115,28,.12);
  color: var(--o-dk);
}
.pill--fill { background: var(--o); color: var(--white); }
.pill--glass { background: rgba(255,255,255,.20); color: var(--white); }

/* tick list */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
/* Not flex: inline <strong>/<em> at the start of an item must stay in the text
   flow, not become sibling flex items. */
.ticks li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-70);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--o);
}
[data-theme='orange'] .ticks li { color: rgba(255,255,255,.88); }
[data-theme='orange'] .ticks li::before { background: var(--white); }

/* ---------- Cover ---------- */

.s-cover .sheet { grid-template-rows: auto 1fr auto; align-content: stretch; }
.s-cover .mark { color: var(--white); }
.s-cover .mark .glyph { background: var(--white); }

.cover-title {
  font-size: 86px;
  line-height: .96;
  letter-spacing: -0.035em;
  color: var(--white) !important;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 144;
  text-shadow: 0 2px 30px rgba(120,52,6,.22);
}
.cover-sub { font-size: 18px; color: rgba(255,255,255,.90); max-width: 54ch; line-height: 1.5; }

.speaker {
  display: inline-flex; align-items: center; gap: 13px;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 12px 20px 12px 13px;
  box-shadow: var(--lift-3);
}
.speaker .glyph { width: 34px; height: 34px; border-radius: 50%; background: var(--o); display: grid; place-items: center; }
.speaker .glyph svg { width: 17px; height: 17px; color: var(--white); }
.speaker .n { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.speaker .r { font-size: 11.5px; color: var(--ink-45); margin-top: 2px; }

/* ---------- Section divider ---------- */

.s-section .sheet { grid-template-rows: auto 1fr auto; }
.s-section .sec-num {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 144;
  font-weight: 700;
  font-size: 108px;
  line-height: .82;
  letter-spacing: -0.045em;
  color: rgba(255,255,255,.30);
}
.s-section h2 { font-size: 60px; color: var(--white) !important; letter-spacing: -0.03em; margin-top: 8px; }
.s-section .sec-sub { font-size: 18px; color: rgba(255,255,255,.86); max-width: 46ch; margin-top: 16px; line-height: 1.5; }
[data-theme='orange'] .slide-foot { color: rgba(255,255,255,.62); }

/* ---------- Closing ---------- */

.s-closing h2 { font-size: 64px; color: var(--white) !important; letter-spacing: -0.032em; }
/* Vertically centred, but the left margin stays aligned with every other slide. */
.s-closing .sheet { align-content: center; }

/* ---------- Entrance choreography ---------- */

/* Content lifts in along the same curve as everything else; staggered by --i */
.reveal .slides > section.present .lift {
  animation: lift 720ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 65ms + 90ms);
}

@keyframes lift {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Reveal's own transition, retimed to the Apple curve */
.reveal .slides section[data-transition-speed], .reveal .slides > section {
  transition-timing-function: var(--ease);
}

.reveal .progress { color: var(--o); height: 3px; }
[data-theme='orange'] .reveal .progress { color: rgba(255,255,255,.85); }
.reveal .slide-number { display: none; }
.slide-foot .pg { font-variant-numeric: tabular-nums; }

.reveal .controls { color: var(--o); }
[data-theme='orange'] .reveal .controls { color: rgba(255,255,255,.8); }

/* ---------- Responsive ---------- */

/* Responsiveness here is Reveal's job: the whole 1280x720 stage is scaled to
   fit the viewport, so the layout stays proportional at any window size and on
   any projector. Reflowing the grids with viewport media queries would fight
   that scaling (the layout box stays 1280 wide however small the window gets),
   so the only media queries below are for user preferences and print. */

/* ---------- Accessibility preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .reveal .slides > section.present .lift { animation: fade 200ms ease both; animation-delay: 0ms; }
  @keyframes fade { from { opacity: 0 } to { opacity: 1 } }
  #stage-bg { transition-duration: 200ms; }
}

@media (prefers-reduced-transparency: reduce) {
  .card { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; }
  [data-theme='orange'] .card { background: rgba(217,105,23,.96); }
}

@media (prefers-contrast: more) {
  .card { background: var(--white); border-color: var(--ink); }
  .lede, .note, .ticks li { color: var(--ink); }
}

/* Print / PDF export: drop the live layer, keep the palette */
@media print {
  #scene { display: none; }
  .card { background: var(--white) !important; backdrop-filter: none !important; }
}

/* ============================================================
   Interactive: the Region map
   ============================================================ */

.slide-body--fill { align-self: stretch; min-height: 0; }

.map-layout { display: grid; grid-template-rows: 1fr auto; gap: 18px; min-height: 0; }

.map-split {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 30px;
  min-height: 0;
}

/* overflow is clipped so the outage projectile stays inside the map. */
.globe { position: relative; min-height: 0; overflow: hidden; }

.globe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;          /* we own the gesture */
  cursor: grab;
}
.globe canvas:active { cursor: grabbing; }

.globe-legend { display: none; }
.globe-legend span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--ink-70);
  /* Sits over the globe, so it needs its own surface to stay legible. */
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  padding: 3px 8px;
  border-radius: 999px;
}
.globe-legend i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.globe-legend code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
}
.globe-hint {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-45);
}

.pins { position: absolute; inset: 0; pointer-events: none; }

/* ---- Region pins ---- */

/* A pin is a zero-size anchor sitting exactly on its projected point, with the
   dot and label hung off it. Anything with size here would push the dot away
   from its coordinate, and the hit area away from the dot. */
.pin {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  display: block;
  font: inherit;
  cursor: pointer;
  transition: opacity 140ms linear;
}

/* Invisible target, a little larger than the dot so small pins stay easy to hit. */
.pin::before {
  content: '';
  position: absolute;
  left: -13px; top: -13px;
  width: 26px; height: 26px;
  border-radius: 50%;
}

.pin:hover, .pin:focus-visible, .pin.is-on { z-index: 2; }

.pin-dot {
  position: absolute;
  left: -5.5px; top: -5.5px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--pin);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 2px 7px rgba(43,33,24,.28);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.pin:hover .pin-dot,
.pin:focus-visible .pin-dot { transform: scale(1.35); }
.pin.is-on .pin-dot {
  transform: scale(1.55);
  box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 8px rgba(43,33,24,.10), 0 3px 10px rgba(43,33,24,.3);
}
.pin:focus { outline: none; }

.pin-label {
  position: absolute;
  top: 11px; left: 0;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: var(--lift-1);
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.pin:hover .pin-label,
.pin:focus-visible .pin-label,
.pin.is-on .pin-label { opacity: 1; }

/* Pins step back on the layers that are not about Regions. */
.globe[data-layer='az'] .pin:not(.is-on) { opacity: 0 !important; pointer-events: none; }
.globe[data-layer='az'] .pin .pin-label { opacity: 0 !important; }
.globe[data-layer='edge'] .pin .pin-label { opacity: 0 !important; }
.globe[data-layer='edge'] .pin:not(.is-on) .pin-dot { transform: scale(.65); }

/* ---- the viewer, only on the Edge layer ---- */

.viewer-pin {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 3;
}
.viewer-dot {
  position: absolute;
  left: -6px; top: -6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 2px 8px rgba(43,33,24,.35);
}
.viewer-label {
  position: absolute;
  top: 12px; left: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--white);
  background: var(--ink);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---- Availability Zones, drawn around the selected Region ---- */

.az-orbit {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
}
.az-orbit::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: var(--ring, 172px); height: var(--ring, 172px);
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(43,33,24,.20);
  border-radius: 50%;
}

/* Boundary between zones. Solid and dark enough to read as a border, thin
   enough not to compete with the map underneath. */
.az-fence {
  position: absolute;
  left: 0; top: 0;
  overflow: visible;
  pointer-events: none;
}
.az-fence line {
  stroke: rgba(43, 33, 24, 0.42);
  stroke-width: 1.3;
  stroke-linecap: round;
}

.az-node {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  transition: opacity 380ms var(--ease), filter 380ms var(--ease);
}
.az-box {
  display: flex;
  gap: 3px;
  padding: 5px 6px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(43,33,24,.10), 0 4px 12px -6px rgba(43,33,24,.28);
}
.az-box s {
  display: block;
  width: 6px; height: 11px;
  border-radius: 2px;
  background: var(--o);
  text-decoration: none;
  transition: background 380ms var(--ease);
}
.az-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: 1px 7px;
}
.az-app {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--white);
  background: var(--o);
  border-radius: 999px;
  padding: 1px 7px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.az-node.has-app .az-app { opacity: 1; transform: none; }
.az-node.is-down { filter: grayscale(1); opacity: .45; }
.az-node.is-down .az-box s { background: var(--ink-45); }

/* The outage: something falls on AZ a, then the zone goes dark. */
.az-strike { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.az-strike::before,
.az-strike::after { content: ''; position: absolute; left: 0; top: 0; opacity: 0; }
.az-strike::before {
  width: 8px; height: 26px;
  margin: -13px 0 0 -4px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(178,58,72,0), #B23A48);
}
.az-strike::after {
  width: 0; height: 0;
  border: 2px solid #B23A48;
  border-radius: 50%;
}
.az-strike.is-firing::before { animation: az-fall 560ms cubic-bezier(.5, 0, .9, .4) forwards; }
.az-strike.is-firing::after { animation: az-boom 620ms 520ms var(--ease) forwards; }

@keyframes az-fall {
  from { opacity: 1; transform: translate(var(--tx), calc(var(--ty) - 170px)) scaleY(1.6); }
  to   { opacity: 1; transform: translate(var(--tx), var(--ty)) scaleY(.6); }
}
@keyframes az-boom {
  from { opacity: .85; width: 0; height: 0; transform: translate(var(--tx), var(--ty)); }
  to   { opacity: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; transform: translate(var(--tx), var(--ty)); }
}

/* ---- panel ---- */

.map-panel { display: grid; align-content: start; gap: 12px; min-height: 0; }

.seg--layers { display: flex; flex-wrap: wrap; }
.seg--layers button { padding: 8px 13px; font-size: 12px; }

.layer-stat { display: flex; align-items: baseline; gap: 12px; }
.layer-stat .kv-n { font-size: 34px; }
.layer-unit { font-size: 12.5px; color: var(--ink-70); }
#layer-note { margin-top: 10px; }

.rg-city { font-size: 18px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 2px; }
.rg-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; color: var(--o-dk); }

.az-row { display: flex; flex-wrap: wrap; gap: 7px; }
.az-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 10px;
  background: rgba(232,115,28,.10);
  font-size: 12px; font-weight: 600;
  color: var(--o-dk);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.az-chip::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--o); }

/* ---- the hierarchy, always on screen ---- */

/* The three levels, side by side and always on screen. Whatever layer is
   showing, the audience can see where it sits in the hierarchy. */
.hier {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.12fr;
  gap: 10px;
  align-items: stretch;
}

.hier-step {
  position: relative;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(43,33,24,.08);
  border-left: 3px solid rgba(232,115,28,.28);
  background: rgba(255,255,255,.55);
  transition: background 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}
.hier-step b { display: block; font-size: 12.5px; font-weight: 600; }
.hier-step small { display: block; font-size: 11px; line-height: 1.35; color: var(--ink-70); margin-top: 2px; }
.hier-step.is-on { background: var(--white); border-left-color: var(--o); box-shadow: var(--lift-2); }

/* A chevron between the first two: an AZ lives inside a Region. */
.hier-step[data-step='region']::after {
  content: '';
  position: absolute;
  right: -8px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid rgba(232,115,28,.45);
  border-bottom: 1.5px solid rgba(232,115,28,.45);
  transform: rotate(-45deg);
}

/* Edge sits outside the Region, so it is set apart rather than chained on. */
.hier-step--aside {
  border-style: dashed;
  border-left-color: rgba(43,33,24,.22);
  margin-left: 10px;
}
.hier-step--aside.is-on { border-left-color: var(--o-dk); border-style: solid; }
.hier-step--aside::before {
  content: 'di luar Region';
  position: absolute;
  top: -8px; left: 12px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45);
  background: var(--cream);
  padding: 0 6px;
}

/* ---- controls ---- */

.seg { display: inline-flex; background: rgba(232,115,28,.10); border-radius: 999px; padding: 3px; }
.seg button {
  appearance: none; border: 0; background: none;
  padding: 8px 15px;
  border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-70);
  cursor: pointer;
  transition: background 260ms var(--ease), color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.seg button[aria-pressed='true'] { background: var(--white); color: var(--o-dk); box-shadow: var(--lift-1); }

.btn {
  appearance: none;
  border: 1px solid rgba(43,33,24,.12);
  background: var(--white);
  padding: 9px 15px;
  border-radius: 12px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  /* Feedback on press, not on release. */
  transition: transform 110ms ease-out, background 200ms var(--ease), color 200ms var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--ghost { background: rgba(232,115,28,.10); border-color: transparent; color: var(--o-dk); box-shadow: none; }
.btn--danger[aria-pressed='false'] { background: #B23A48; border-color: transparent; color: var(--white); }
.btn--danger[aria-pressed='true'] { background: var(--white); color: var(--ink); }

.status {
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.5;
  display: flex; gap: 10px; align-items: flex-start;
  transition: background 320ms var(--ease), color 320ms var(--ease);
}
.status-icon { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: currentColor; }
.status.ok   { background: rgba(46,125,111,.13); color: #1F5A50; }
.status.down { background: rgba(178,58,72,.13);  color: #8C2E3A; }

@media (prefers-reduced-motion: reduce) {
  .az-node, .pin-dot, .status, .seg button, .hier-step { transition-duration: 120ms; }
  .az-strike.is-firing::before, .az-strike.is-firing::after { animation: none; }
}