/* ============================================================
   Bogota — converter + area guide
   Token names fixed; values swap with [data-theme].
   ============================================================ */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  /* Zenit teal #449A9B taken down to a deep clinical ground */
  --brand: #16302F;
  --brand-soft: #21403F;
  --brand-deep: #0A1415;
  --accent: #6FC5C6;
  --accent-soft: #A2DCDC;
  --accent-deep: #3A7A7B;
  --surface: #0E1B1C;
  --surface-card: #162728;
  --line: #26403F;
  --text: #EBF2F2;
  --muted: #8BA7A7;
  --ok: #5FC7A6;
  --ok-soft: #10322B;
  --warn: #DFAE63;
  --warn-soft: #362C13;
  --error: #E08878;
  --error-soft: #38201B;
  --info: #7FB5E0;
  --info-soft: #16283A;
  --pin-eat: #E8927A;
  --pin-see: #7FB5E0;
  --pin-shop: #D9BE72;
  --pin-grocery: #6FC5C6;
  --pin-pharmacy: #C3A0DA;
  --pin-beauty: #E58FB4;
  --pin-ring: #FFFFFF;
  --link: #8AB4F8;
}

html[data-theme="light"] {
  color-scheme: light;
  /* Zenit white disc + brand teal, darkened only where it carries text */
  --brand: #16302F;
  --brand-soft: #DBE9E9;
  --brand-deep: #E7F0F0;
  --accent: #2A6F70;
  --accent-soft: #1E5455;
  --accent-deep: #8FBDBE;
  --surface: #F2F6F6;
  --surface-card: #FFFFFF;
  --line: #D0E0E0;
  --text: #16302F;
  --muted: #4C6A6A;
  --ok: #1E7A64;
  --ok-soft: #D3EAE6;
  --warn: #8A6212;
  --warn-soft: #F2E4C4;
  --error: #A83A32;
  --error-soft: #F4DAD7;
  --info: #2B6CA8;
  --info-soft: #DCE5F4;
  --pin-eat: #B4482F;
  --pin-see: #2B6CA8;
  --pin-shop: #8A6A1E;
  --pin-grocery: #2A6F70;
  --pin-pharmacy: #7A4F94;
  --pin-beauty: #A33A6B;
  --pin-ring: #FFFFFF;
  --link: #1565C0;
}

:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 20px;
  --radius-sm: 12px;
  --gap: clamp(5px, 1.15svh, 13px);
  --pad-x: clamp(0.9rem, 4vw, 1.4rem);
  --pad-y: clamp(0.6rem, 1.7svh, 1.1rem);
  --key-min: clamp(30px, 5.4svh, 56px);
  --value-size: max(1.3rem, min(2.4rem, 5svh, 8.4vw));
  --control: max(34px, min(44px, 6svh, 12vw));
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--surface);
  touch-action: manipulation;              /* no double-tap zoom */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--surface);
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
  transition: background 220ms ease, color 220ms ease;
}

.shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

button, .act, .tab { font-family: var(--font-ui); cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Top bar ---------- */

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: calc(var(--gap) + env(safe-area-inset-top)) var(--pad-x) var(--gap);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.wordmark {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: max(1.1rem, min(1.75rem, 3.3svh, 6vw));
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wordmark span { color: var(--accent); font-style: italic; }

.topbar-actions { display: flex; align-items: center; gap: clamp(0.25rem, 1.4vw, 0.4rem); flex: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: var(--control);
  height: var(--control);
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--muted);
  transition: color 160ms ease, border-color 160ms ease, background 220ms ease;
}
.icon-btn svg { width: 55%; height: 55%; }
.icon-btn:active { background: var(--brand-soft); }
.icon-btn--text { font-size: clamp(0.64rem, 3vw, 0.76rem); font-weight: 700; letter-spacing: 0.04em; }

.icon-sun { display: none; }
.icon-moon { display: block; }
html[data-theme="light"] .icon-sun { display: block; }
html[data-theme="light"] .icon-moon { display: none; }

/* ---------- Views ---------- */

.view { flex: 1 1 auto; min-height: 0; }
.view[hidden] { display: none; }

.view--convert {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap) var(--pad-x);
  /* Never hidden. On a short screen the last keypad row used to overflow its
     box and draw straight over the footer. A scroll is honest; an overlap is a
     bug the user has to look at. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.view--guide {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Rate strip ---------- */

.rate-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: clamp(0.4rem, 1.1svh, 0.7rem) 0.6rem clamp(0.4rem, 1.1svh, 0.7rem) 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand-deep);
  transition: background 220ms ease, border-color 220ms ease;
}
.rate-strip p { margin: 0; flex: 1; font-size: clamp(0.66rem, 2.9vw, 0.8rem); font-weight: 500; color: var(--muted); line-height: 1.35; }
.rate-strip b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

.rate-refresh {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: transparent; color: var(--muted);
}
.rate-refresh svg { width: 17px; height: 17px; }
.rate-refresh[data-busy="true"] { color: var(--accent); }

.rate-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.rate-dot[data-state="loading"] { background: var(--info); }
.rate-dot[data-state="live"] { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.rate-dot[data-state="cached"] { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.rate-dot[data-state="offline"] { background: var(--error); box-shadow: 0 0 0 4px var(--error-soft); }

/* ---------- Converter board ---------- */

.board { position: relative; display: flex; flex-direction: column; gap: var(--gap); flex: none; }

.field {
  padding: var(--pad-y) clamp(0.9rem, 3.6vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
  transition: background 220ms ease, border-color 220ms ease;
}
.field--to { background: var(--brand-deep); border-color: var(--accent-deep); }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.field-label { font-size: clamp(0.6rem, 2.6vw, 0.72rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field-code { font-size: clamp(0.7rem, 3vw, 0.82rem); font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.field-value {
  display: block; margin-top: 0.2rem;
  font-size: var(--value-size); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere;
}
.field-value--accent { color: var(--accent-soft); }
.field-name { display: block; margin-top: 0.1rem; font-size: clamp(0.66rem, 2.8vw, 0.78rem); font-weight: 500; color: var(--muted); }

.cash-note {
  margin: 0.45rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
  font-size: clamp(0.68rem, 2.9vw, 0.78rem);
  line-height: 1.35;
  color: var(--muted);
}
.cash-note b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-why {
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 0.35rem;
  color: var(--accent);
  font-size: inherit;
  font-weight: 700;
  border-bottom: 1px solid var(--accent-deep);
}
.cash-note[hidden] { display: none; }

.swap {
  position: absolute; top: 50%; right: clamp(0.9rem, 3.6vw, 1.25rem); transform: translateY(-50%);
  display: grid; place-items: center;
  width: var(--control); height: var(--control);
  border: 1px solid var(--accent-deep); border-radius: 50%;
  background: var(--brand); color: var(--accent);
  transition: transform 160ms ease, background 220ms ease;
}
html[data-theme="light"] .swap { background: var(--surface); }
.swap svg { width: 50%; height: 50%; }
.swap:active { transform: translateY(-50%) scale(0.92); }

.quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; flex: none; }
.chip {
  padding: clamp(0.32rem, 1svh, 0.55rem) 0.15rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted);
  font-size: clamp(0.66rem, 3vw, 0.8rem); font-weight: 600; font-variant-numeric: tabular-nums;
}
.chip:active { color: var(--accent); border-color: var(--accent-deep); }

.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(var(--key-min), 1fr);
  gap: clamp(0.28rem, 0.95svh, 0.5rem);
  /* Grows into spare height but never shrinks below its own rows. With
     flex-shrink:1 the box collapsed while the keys kept their size, and the
     overflow painted straight over the footer. The parent scrolls instead. */
  flex: 1 0 auto;
}
.key {
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text);
  font-size: clamp(1.05rem, 5.3vw, 1.45rem); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background 120ms ease, transform 120ms ease;
}
.key svg { width: clamp(19px, 5.8vw, 25px); height: clamp(19px, 5.8vw, 25px); }
.key:active { background: var(--brand-soft); transform: scale(0.96); }
.key--soft { background: transparent; color: var(--muted); font-size: clamp(0.85rem, 4vw, 1.05rem); }

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.2rem, 0.7svh, 0.4rem);
  flex: none;
  margin-top: clamp(0.15rem, 0.6svh, 0.4rem);
}
.ghost-btn {
  padding: clamp(0.26rem, 0.85svh, 0.42rem) 1.5rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted);
  font-size: clamp(0.68rem, 3vw, 0.8rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.disclaimer {
  margin: 0;
  max-width: 42ch;
  text-align: center;
  font-size: clamp(0.56rem, 2.3vw, 0.64rem);
  line-height: 1.35;
  color: var(--muted);
  opacity: 0.72;
}

/* ---------- Guide: masthead ---------- */

.masthead { padding: 0 0 clamp(0.9rem, 2.4svh, 1.3rem); border-bottom: 2px solid var(--text); }
.masthead p { padding: 0 var(--pad-x); }

/* The logo carries its own night sky, so it is given a black field to sit in
   rather than being floated on the page: on a light background its white
   tagline disappears. Full-bleed, so it reads as a masthead and not a sticker. */
.brandhero {
  background: #0B1617;
  padding: clamp(0.9rem, 3.5vw, 1.4rem) var(--pad-x) clamp(1rem, 4vw, 1.6rem);
  margin-bottom: clamp(0.9rem, 2.6svh, 1.2rem);
  display: flex;
  justify-content: center;
}
.brandhero img {
  display: block;
  width: 100%;
  max-width: 330px;
  /* Both files share one canvas, so a fixed ratio holds the band steady
     whichever language is showing. */
  aspect-ratio: 972 / 992;
  height: auto;
  border-radius: 10px;
}

/* Visible to screen readers, not on screen: the logo is an image, so the page
   still needs a real heading. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.masthead p { margin: 0; font-size: clamp(0.76rem, 3.2vw, 0.86rem); line-height: 1.55; color: var(--muted); }

/* ---------- Guide: Zenit anchor ---------- */

.anchor {
  margin: var(--pad-x); padding: clamp(1.05rem, 3.4vw, 1.35rem);
  border: 1px solid var(--accent-deep); border-left-width: 3px;
  border-radius: var(--radius); background: var(--brand-deep);
}
.anchor-head {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 3vw, 0.9rem);
  margin-bottom: 0.5rem;
}
.anchor-eyebrow {
  font-size: clamp(0.86rem, 4.2vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--accent);
}
.anchor-logo {
  display: block;
  flex: none;
  height: clamp(52px, 15vw, 72px);
  width: clamp(52px, 15vw, 72px);
  margin: 0;
  border-radius: 50%;
  object-fit: contain;
  object-position: left center;
}
.anchor-logo[hidden] { display: none; }

.anchor h3 { margin: 0.35rem 0 0.1rem; font-family: var(--font-display); font-size: clamp(1.3rem, 6vw, 1.6rem); font-weight: 600; }
.anchor-where { margin: 0 0 0.5rem; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); }
.anchor-note { margin: 0 0 0.85rem; font-size: 0.83rem; line-height: 1.5; color: var(--text); opacity: 0.88; }
.anchor-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.anchor-acts .act {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding-left: 0.65rem;
  padding-right: 0.75rem;
}
.anchor-acts .act svg { width: 15px; height: 15px; flex: none; }

.act { padding: 0.5rem 0.8rem; border-radius: 8px; font-size: 0.75rem; font-weight: 700; text-decoration: none; display: inline-block; }
.act--go { background: var(--accent); color: var(--surface); }
.act--alt { background: var(--brand-soft); color: var(--text); }
.act--ghost { border: 1px solid var(--line); color: var(--muted); }

.alerts { margin: 0 var(--pad-x) 0.55rem; }
.alerts[hidden] { display: none; }
.alerts-head {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--error);
}
.alert {
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}
.alert--red    { border-left-color: var(--error); }
.alert--orange { border-left-color: var(--warn); }
.alert--yellow { border-left-color: var(--pin-shop); }
.alert--info   { border-left-color: var(--info); }
.alert-top { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.alert-top b { font-size: 0.88rem; color: var(--text); }
.alert-top i {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--error);
}
.alert-where { margin: 0.2rem 0 0; font-size: 0.74rem; color: var(--muted); }
.alert-note { margin: 0.35rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--text); opacity: 0.9; }
.alerts-src { margin: 0.1rem 0 0; font-size: 0.68rem; font-style: italic; color: var(--muted); }

.wx {
  margin: 0 var(--pad-x) 0.55rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--brand-deep);
}
.wx[hidden] { display: none; }
.wx-open {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
.wx-more {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.wx-more::after {
  content: '';
  display: inline-block;
  width: 0.38em; height: 0.38em;
  margin-left: 0.4em;
  border-right: 2px solid var(--accent);
  border-top: 2px solid var(--accent);
  transform: translateY(-0.1em) rotate(45deg);
}
.wx-now { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.wx-big { width: 40px; height: 40px; flex: none; color: var(--accent); }
.wx-read { display: flex; align-items: baseline; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
.wx-temp {
  font-size: clamp(1.6rem, 7vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.wx-desc { font-size: clamp(0.78rem, 3.2vw, 0.86rem); font-weight: 600; color: var(--muted); }
.wx-detail {
  flex: 1 0 100%;
  margin: 0.15rem 0 0;
  font-size: clamp(0.7rem, 2.9vw, 0.76rem);
  color: var(--muted);
}
.wx-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.wx-day svg { width: 22px; height: 22px; color: var(--accent); }
.wx-dow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.wx-hl { font-size: 0.82rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.wx-hl i { font-style: normal; font-weight: 500; color: var(--muted); }
.wx-pop { font-size: 0.68rem; font-weight: 600; color: var(--info); }
.wx-stale { display: block; margin: 0.55rem 0 0; font-size: 0.68rem; font-style: italic; color: var(--warn); }

.basics { padding: 0 var(--pad-x) 0.2rem; display: flex; flex-direction: column; gap: 0.45rem; }

.basic-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-deep);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  padding: 0.7rem 0.85rem;
}
.basic-card summary {
  cursor: pointer;
  list-style: none;
  font-size: clamp(0.85rem, 3.6vw, 0.95rem);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.basic-card summary::-webkit-details-marker { display: none; }
.basic-card summary::after {
  content: '';
  flex: none;
  width: 0.45em; height: 0.45em;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-0.15em) rotate(45deg);
}
.basic-card[open] summary::after { transform: translateY(0.12em) rotate(-135deg); }

.basic-card ul { margin: 0.6rem 0 0.1rem; padding-left: 1.05rem; }
.basic-card li {
  margin-bottom: 0.45rem;
  font-size: clamp(0.78rem, 3.2vw, 0.85rem);
  line-height: 1.5;
  color: var(--text);
  opacity: 0.88;
}
.basic-card li::marker { color: var(--accent-deep); }

.basic-card.is-quake { border-left-color: var(--warn); }
.basic-card.is-quake summary { color: var(--warn); }
.basic-card.is-quake summary::after { border-color: var(--warn); }
.quake-clinic {
  margin: 0.75rem 0 0.4rem;
  padding: 0.6rem 0.7rem;
  border-left: 2px solid var(--accent-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-deep);
  font-size: clamp(0.76rem, 3.1vw, 0.83rem);
  line-height: 1.5;
  color: var(--text);
}
.basic-card .steps ul { margin: 0; padding-left: 1.15rem; }
.basic-card .steps ul li::marker { color: var(--accent-deep); }

/* Emergencies: same shape, unmistakable colour */
.basic-card.is-sos { border-left-color: var(--error); }
.basic-card.is-sos summary { color: var(--error); }
.basic-card.is-sos summary::after { border-color: var(--error); }
.sos-intro, .sos-note {
  margin: 0.55rem 0;
  font-size: clamp(0.75rem, 3.1vw, 0.82rem);
  line-height: 1.45;
  color: var(--muted);
}
.sos-note { margin-bottom: 0; font-style: italic; opacity: 0.8; }
.sos-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.sos-label {
  display: flex;
  flex-direction: column;
  font-size: clamp(0.8rem, 3.3vw, 0.87rem);
  font-weight: 700;
  color: var(--text);
}
.sos-label i {
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.7rem, 2.9vw, 0.76rem);
  color: var(--muted);
}
.sos-num {
  flex: none;
  font-size: clamp(0.8rem, 3.3vw, 0.88rem);
  font-weight: 700;
  color: var(--error);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tips-link {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: clamp(0.68rem, 2.8vw, 0.74rem);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-deep);
  padding: 0 0 1px;
  margin-top: 0.1rem;
}

.basic-why {
  margin: 0.6rem 0 0.2rem;
  font-size: clamp(0.78rem, 3.2vw, 0.85rem);
  line-height: 1.5;
  color: var(--muted);
}
.steps { margin-top: 0.7rem; }
.steps h4 {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.steps ol { margin: 0; padding-left: 1.15rem; }
.steps li {
  margin-bottom: 0.4rem;
  font-size: clamp(0.78rem, 3.2vw, 0.85rem);
  line-height: 1.5;
  opacity: 0.9;
}
.steps li::marker { color: var(--accent-deep); font-weight: 700; }
/* Both platforms are always listed; the one we think you are on is marked,
   so the right steps are obvious without hiding the other set. */
.steps--lead h4 { color: var(--accent); }
.steps--lead h4::after { content: " ✓"; }
.steps-done {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ok);
}

/* ---------- Weather detail ---------- */

.unit-switch {
  display: inline-flex;
  margin: 0 0 0.7rem;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--brand-deep);
}
.unit-switch button {
  border: none;
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.unit-switch button.is-on { background: var(--accent); color: var(--surface); }

.wx-ref {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.42rem 0;
  border-top: 1px solid var(--line);
}
.wx-ref span {
  flex: none;
  font-size: 0.83rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.wx-ref i { font-style: normal; font-size: 0.78rem; color: var(--muted); text-align: right; }
.wx-refnote {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
  border-left: 2px solid var(--accent-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-deep);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
}

.wx-cond {
  margin: 0 0 0.7rem;
  font-size: clamp(0.95rem, 4vw, 1.05rem);
  font-weight: 700;
  color: var(--accent);
}
.wx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.5rem 0.8rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--brand-deep);
}
.wx-grid div { display: flex; flex-direction: column; gap: 0.1rem; }
.wx-grid i {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wx-grid b { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-uv {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
  border-left: 2px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--warn-soft);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text);
}
.wx-sub {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.wx-hours {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-width: none;
}
.wx-hours::-webkit-scrollbar { display: none; }
.wx-hour {
  flex: none;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.wx-hour span { font-size: 0.66rem; font-weight: 600; color: var(--muted); }
.wx-hour svg { width: 20px; height: 20px; color: var(--accent); }
.wx-hour b { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.wx-hour em { font-style: normal; font-size: 0.63rem; font-weight: 600; color: var(--info); min-height: 0.9em; }

.wx-row {
  display: grid;
  grid-template-columns: 1fr 24px 44px auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}
.wx-row svg { width: 20px; height: 20px; color: var(--accent); }
.wx-rowday { font-size: 0.83rem; font-weight: 700; }
.wx-rowpop { font-size: 0.72rem; font-weight: 600; color: var(--info); text-align: right; }
.wx-rowhl { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.wx-rowhl i { font-style: normal; font-weight: 500; color: var(--muted); }

.update-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 850;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: calc(100% - 2rem);
  max-width: 420px;
  padding: 0.6rem 0.7rem 0.6rem 0.9rem;
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius);
  background: var(--surface-card);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.update-bar[hidden] { display: none; }
.update-bar p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text);
}
#updateNow {
  flex: none;
  padding: 0.45rem 0.8rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
}
.update-x {
  flex: none;
  width: 28px; height: 28px;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
}

@media (min-width: 980px) {
  .update-bar { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ---------- Install prompt ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8, 18, 18, 0.55); }
.modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 82svh;
  overflow-y: auto;
  padding: 1.2rem 1.2rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.modal-x {
  position: absolute;
  top: 0.5rem; right: 0.6rem;
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
}
.modal-title {
  margin: 0 2rem 0.3rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5.6vw, 1.5rem);
  font-weight: 600;
}
.modal-why {
  margin: 0 0 0.2rem;
  font-size: clamp(0.78rem, 3.2vw, 0.85rem);
  line-height: 1.5;
  color: var(--muted);
}
.modal-acts { display: flex; gap: 0.4rem; margin-top: 1rem; }
.modal-acts .act { flex: 1; text-align: center; padding: 0.65rem 0.8rem; }
.modal-acts .act[hidden] { display: none; }

@media (min-width: 620px) { .modal { align-items: center; } }

/* ---------- Guide: category chips ---------- */

/* Seven categories no longer fit a small phone, so the row scrolls. A fade at
   the right edge says so, which a chip cut to five visible pixels does not. */
.chipbar-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.chipbar-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface));
}

.chipbar {
  position: relative; z-index: 1;
  display: flex; gap: 0.32rem; overflow-x: auto;
  padding: 0.6rem var(--pad-x);
  scrollbar-width: none;
  scroll-padding-inline: var(--pad-x);
}
.chipbar::-webkit-scrollbar { display: none; }
.fchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 36px;
  width: 36px;                       /* idle: just the icon */
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-card);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  transition: width 180ms ease, background 180ms ease, border-color 180ms ease;
}
.fchip svg { width: 19px; height: 19px; flex: none; }
/* Only paint shapes that declare no fill of their own. The old rule filled every
   circle, which turned the scissor handles into blobs, and missed paths with no
   fill attribute, which then fell back to SVG's default black — invisible in
   dark mode. Anything saying fill="none" is left hollow on purpose. */
.fchip svg circle:not([fill]),
.fchip svg path:not([fill]) { fill: currentColor; }
.fchip-label { display: none; }

/* Each idle chip wears the colour of its own pin on the map. */
.fchip[data-filter="all"]      { color: var(--accent); }
.fchip[data-filter="eat"]      { color: var(--pin-eat); }
.fchip[data-filter="see"]      { color: var(--pin-see); }
.fchip[data-filter="shop"]     { color: var(--pin-shop); }
.fchip[data-filter="grocery"]  { color: var(--pin-grocery); }
.fchip[data-filter="pharmacy"] { color: var(--pin-pharmacy); }
.fchip[data-filter="beauty"]   { color: var(--pin-beauty); }

.fchip.is-on {
  width: auto;
  padding: 0 0.8rem 0 0.65rem;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
.fchip.is-on .fchip-label { display: inline; }
.fchip-label i {
  font-style: normal;
  font-weight: 600;
  margin-left: 0.4rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ---------- Guide: map ---------- */

.map-wrap { position: relative; padding: var(--pad-x) var(--pad-x) 0; }
#map { height: clamp(270px, 42svh, 400px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--brand-deep); }
.map-fallback {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

.map-expand {
  position: absolute;
  z-index: 500;
  top: calc(var(--pad-x) + 8px);
  right: calc(var(--pad-x) + 8px);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.map-expand svg { width: 19px; height: 19px; }
.map-expand:active { background: var(--brand-soft); }

.map-wrap.is-expanded #map { height: min(74svh, 640px); }

.route-bar {
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius-sm);
  background: var(--brand-deep);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.route-bar[hidden] { display: none; }
/* Breathing room when Walk scrolls the bar into view above the tab bar */
.route-bar { scroll-margin-bottom: 0.6rem; }
.route-txt { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 0.8rem; line-height: 1.4; color: var(--text); }
.route-txt b { color: var(--accent); }
.route-acts { display: flex; gap: 0.35rem; flex: none; }
.route-open, .route-clear {
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}
.route-open { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.route-line { }

.maphint { margin: 0.45rem 0 0; font-size: 0.68rem; color: var(--muted); }

.pin span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--pin-ring); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.pin-home span { background: var(--accent); }
.pin-eat span { background: var(--pin-eat); }
.pin-see span { background: var(--pin-see); }
.pin-shop span { background: var(--pin-shop); }
.pin-grocery span { background: var(--pin-grocery); }
.pin-pharmacy span { background: var(--pin-pharmacy); }
.pin-beauty span { background: var(--pin-beauty); }
.leaflet-popup-content { font-family: var(--font-ui); font-size: 0.8rem; }
.leaflet-popup-content a { color: var(--link); font-weight: 700; }

/* ---------- Guide: sections and entries ---------- */

.sect { border-bottom: 1px solid var(--line); }
.sect-head {
  padding: clamp(1rem, 3svh, 1.5rem) var(--pad-x) 0.5rem;
  /* The chip bar is sticky, so anything scrolled to must clear it or the
     heading lands underneath and reads as clipped. */
  scroll-margin-top: 62px;
}
.map-wrap { scroll-margin-top: 62px; }
.sect-head h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 6.2vw, 1.65rem); font-weight: 600; }
.sect-head p { margin: 0.1rem 0 0; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }

.entries { list-style: none; margin: 0; padding: 0.3rem var(--pad-x) 1.1rem; }
.entry { display: flex; gap: 0.75rem; padding: 0.95rem 0; border-top: 1px solid var(--line); }
.entry:first-child { border-top: none; }
.num { flex: none; width: 22px; padding-top: 2px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--accent-deep); }
.entry-body { flex: 1; min-width: 0; }
.entry-body h4 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-size: 0.98rem; font-weight: 700; }
.entry-body h4 em { flex: none; font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.entry-head { display: flex; gap: 0.7rem; align-items: flex-start; }
.entry-head > div { flex: 1; min-width: 0; }

.entry-thumb {
  flex: none;
  width: clamp(62px, 19vw, 84px);
  height: clamp(62px, 19vw, 84px);
  border-radius: 10px;
  object-fit: cover;
  background: var(--brand-deep);
  border: 1px solid var(--line);
}
.entry-thumb[hidden] { display: none; }
/* Tinted placeholder while the file streams in, then a soft fade */
.entry-thumb { opacity: 0.55; transition: opacity 220ms ease; }
.entry-thumb.is-loaded { opacity: 1; }

.credits { padding: 0 var(--pad-x) 1.4rem; }
.credits h5 {
  margin: 0 0 0.4rem;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.credits p { margin: 0 0 0.2rem; font-size: 0.66rem; line-height: 1.45; color: var(--muted); opacity: 0.8; }
.credits[hidden] { display: none; }

.entry-meta { margin: 0.15rem 0 0.4rem; font-size: 0.67rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.entry-note { margin: 0 0 0.6rem; font-size: 0.83rem; line-height: 1.5; opacity: 0.88; }
.entry-hours {
  margin: 0 0 0.4rem;
  font-size: clamp(0.7rem, 2.9vw, 0.77rem);
  color: var(--muted);
}
.entry-hours summary {
  cursor: pointer;
  list-style: none;
  padding: 0.15rem 0;
}
.entry-hours summary::-webkit-details-marker { display: none; }
.entry-hours summary::after {
  content: '';
  display: inline-block;
  width: 0.42em; height: 0.42em;
  margin-left: 0.45em;
  border-right: 1.5px solid var(--accent-deep);
  border-bottom: 1.5px solid var(--accent-deep);
  transform: translateY(-0.15em) rotate(45deg);
}
.entry-hours[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.entry-hours summary b { color: var(--text); font-weight: 700; }
.entry-hours.is-closed summary { color: var(--error); }
.entry-hours.is-closed summary b { color: var(--error); }
.entry-hours .week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.1rem 1rem;
  margin: 0.35rem 0 0.2rem;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--line);
  background: var(--brand-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-hours .week span { display: flex; justify-content: space-between; gap: 0.8rem; }
.entry-hours .week i { font-style: normal; font-weight: 600; color: var(--text); opacity: 0.75; }

.entry-contact {
  margin: 0 0 0.65rem;
  font-size: clamp(0.7rem, 2.9vw, 0.77rem);
  line-height: 1.5;
  color: var(--muted);
}
.entry-contact .addr { display: block; }
.entry-contact .price {
  display: block;
  margin-top: 0.1rem;
  font-weight: 700;
  color: var(--text);
}
.entry-contact .price i {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.85;
}
.entry-contact .price i::before { content: ' \00b7 '; }
.entry-contact .lines {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.1rem;
}
.entry-contact a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: 1px;
  white-space: nowrap;
}
.entry-contact a:hover { color: var(--text); }
.entry-contact .sep { font-style: normal; opacity: 0.45; margin: 0 0.4rem; }

.entry-acts { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* ---------- Guide: ride apps ---------- */

.rides { padding: clamp(1rem, 3svh, 1.5rem) var(--pad-x) 1.6rem; }
.rides h4 { margin: 0 0 0.15rem; font-family: var(--font-display); font-size: clamp(1.35rem, 6.2vw, 1.65rem); font-weight: 600; }
.rides > p { margin: 0 0 0.8rem; font-size: 0.78rem; color: var(--muted); }
.ride { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.ride-logo {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.ride-logo[hidden] { display: none; }
.ride-id { flex: 1 1 auto; min-width: 0; }
.ride-id b { display: block; font-size: 0.88rem; }
.ride-id span { font-size: 0.71rem; color: var(--muted); }
.ride-links { display: flex; gap: 0.3rem; flex: none; }
.ride-links a { padding: 0.35rem 0.6rem; border: 1px solid var(--accent-deep); border-radius: 7px; color: var(--accent); font-size: 0.69rem; font-weight: 700; text-decoration: none; }

/* ---------- Tab bar ---------- */

.tabbar {
  flex: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0.35rem var(--pad-x) calc(0.35rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.4rem 0.2rem;
  border: none; border-radius: var(--radius-sm); background: transparent; color: var(--muted);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
}
.tab svg { width: 21px; height: 21px; }
.tab.is-on { color: var(--accent); background: var(--brand-deep); }

/* ---------- Footer credit ---------- */

.madeby {
  flex: none;
  padding: 0.4rem var(--pad-x);
  border-top: 1px solid var(--line);
  text-align: center;
}
.madeby p { margin: 0; font-size: 0.7rem; color: var(--muted); }
.madeby a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: 1px;
}
.madeby a:hover { color: var(--text); }

/* ============================================================
   TABLET — one column, but room to breathe
   ============================================================ */

@media (min-width: 620px) {
  .shell { max-width: 640px; }
  :root {
    --key-min: clamp(46px, 6.4svh, 66px);
    --value-size: min(2.6rem, 6.4svh);
    --control: 46px;
  }
  .entry-thumb { width: 104px; height: 104px; }
  #map { height: clamp(240px, 32svh, 320px); }
  .masthead h2 { font-size: 2.7rem; }
  .anchor-logo { height: 84px; width: 84px; }
  .entry-note, .anchor-note { font-size: 0.88rem; }
}

/* ============================================================
   DESKTOP — converter and guide side by side, no tabs needed
   ============================================================ */

@media (min-width: 980px) {
  .shell {
    max-width: 1240px;
    display: grid;
    grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top     top"
      "convert guide"
      "made    made";
    column-gap: 34px;
    padding: 0 26px;
  }

  .topbar { grid-area: top; padding-left: 0; padding-right: 0; }
  .view--convert { grid-area: convert; }
  .view--guide { grid-area: guide; }
  .madeby { grid-area: made; }

  /* Both panels are visible at once, so the tab bar has no job */
  .tabbar { display: none; }
  .view[hidden] { display: flex; }
  .view--guide[hidden] { display: block; }

  /* Converter sits at the top of its column rather than stretching */
  .view--convert {
    align-self: stretch;
    min-height: 0;
    justify-content: flex-start;
    padding: 1rem 1.6rem 1rem 0;
    border-right: 1px solid var(--line);
  }
  .keypad { flex: 0 0 auto; grid-auto-rows: clamp(44px, 7svh, 58px); gap: 0.5rem; }
  .foot { margin-top: 0.4rem; }

  .field-name { display: block; }

  /* Guide scrolls inside its own column */
  .view--guide {
    min-height: 0;
    overflow-y: auto;
    padding-left: 0;
    padding-right: 0.4rem;
  }
  /* These are plain sections whose padding is only a page gutter. */
  .masthead p, .chipbar, .chipbar-wrap, .map-wrap, .sect-head, .entries, .rides, .credits, .basics {
    padding-left: 0;
    padding-right: 0;
  }
  .wx { margin-left: 0; margin-right: 0; }
  /* The clinic card keeps its internal padding — only the outer margin goes. */
  .anchor {
    margin-left: 0;
    margin-right: 0;
    padding: clamp(1.1rem, 1.6vw, 1.5rem);
  }
  .chipbar-wrap::after { display: none; }   /* desktop has room for all seven */
  #map { height: 300px; }
  .madeby { border-top: 1px solid var(--line); }
}

/* The disclaimer returns only when there is genuine room for it */
@media (min-width: 980px) and (min-height: 800px) {
  .disclaimer { display: block; font-size: 0.68rem; }
}

/* Wide desktop — entries run two across */

@media (min-width: 1180px) {
  .entries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .entry { border-top: 1px solid var(--line); }
  .masthead h2 { font-size: 3.1rem; }
}

/* ---------- Adaptive trims (converter view only) ---------- */

@media (max-height: 780px) { .disclaimer { display: none; } }
@media (max-height: 640px) { .field-name { display: none; } }
@media (max-height: 580px) {
  .quick { display: none; }
  .foot { display: none; }
  .tab span { display: none; }
}

@media (max-height: 700px) and (max-width: 979px) {
  .madeby { display: none; }
}

/* ---------- The alternate key changing its mind ---------- */

@keyframes altFlip {
  0%, 100% { transform: rotateX(0deg)   scale(1);   }
  45%      { transform: rotateX(85deg)  scale(0.80); }
  55%      { transform: rotateX(-85deg) scale(0.80); }
}

/* These must start and end on the key's real resting values — transparent with
   muted text — or the animation both jumps at the edges and, in light mode,
   flashes between two near-identical near-whites, which reads as nothing
   happening at all. */
@keyframes altPulse {
  0%   { background: transparent;   color: var(--muted);   border-color: var(--line);   }
  22%  { background: var(--accent); color: var(--surface); border-color: var(--accent); }
  62%  { background: var(--accent); color: var(--surface); border-color: var(--accent); }
  100% { background: transparent;   color: var(--muted);   border-color: var(--line);   }
}

.key--soft.is-flipping {
  animation: altFlip 300ms ease-in-out, altPulse 620ms ease-out;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  /* Movement out, signal kept: the teal fill still says something changed. */
  .key--soft.is-flipping { animation: altPulse 620ms ease-out; }
}