/* /meshtastic only: everything the LoRa page has that the other standalone
   pages do not. Loaded AFTER /legal.css (the chrome) and /page.css (the shared
   tokens, type, hero, cards, FAQ and reveal). The page's accent is page.css's
   default — Meshtastic green — and the radio-specific pieces below use that
   green literally, since they are about the radio whatever the accent. */

/* The page's emblem: the app, a link of hopping dots, and a radio that pings.
   It says "bridge" before a word is read — the landing's equivalent is its logo
   inside the vortex.
   2.5rem, not 2: the widest ping ring reaches ~42px below the chip, and at 2rem
   it grazed the eyebrow under it. */
.m-emblem { display: flex; align-items: center; justify-content: center; gap: 0.875rem; margin-bottom: 2.5rem; }
.m-emblem-app {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 1.25rem;
  border: 3px solid #ffffff;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.3);
}
html.dark .m-emblem-app { border-color: #1e293b; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); }
.m-hop { display: flex; gap: 0.375rem; }
.m-hop i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--g);
  opacity: 0.25;
  animation: m-hop 1.8s ease-in-out infinite;
}
.m-hop i:nth-child(2) { animation-delay: 0.15s; }
.m-hop i:nth-child(3) { animation-delay: 0.3s; }
.m-hop i:nth-child(4) { animation-delay: 0.45s; }
@keyframes m-hop {
  0%, 60%, 100% { opacity: 0.2; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1.1); }
}
.m-radio-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.25rem;
  color: var(--g);
  background: var(--g-chip);
  box-shadow: inset 0 0 0 1px var(--g-ring);
}
.m-radio-chip .i { width: 1.75rem; height: 1.75rem; position: relative; }
.m-rings { position: absolute; inset: 0; pointer-events: none; }
.m-rings i {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: m-ping 3.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.m-rings i:nth-child(2) { animation-delay: 1.2s; }
.m-rings i:nth-child(3) { animation-delay: 2.4s; }
@keyframes m-ping {
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(2.3); opacity: 0; }
}

.m-btn-ghost {
  color: var(--ink);
  background: var(--c-bg);
  box-shadow: inset 0 0 0 1px var(--line), var(--mark-shadow);
}
.m-btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--g), 0 14px 34px -14px rgba(103, 234, 148, 0.6); }
.m-btn-ghost .i { color: var(--g); }

.m-compat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.m-compat li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--soft);
}
.m-compat .i { width: 15px; height: 15px; color: var(--g); }

@media (min-width: 768px) { .m-grid.c3.need { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Signature: a message crossing the bridge ------------------------------
   Room -> Bluetooth -> radio -> LoRa -> a node's screen, and the node's answer
   back. Pure CSS keyframes on one 11s clock; /meshtastic.js only starts it once
   it is on screen and pauses it when it leaves. The DEFAULT (no .m-live) is the
   finished frame — both messages delivered — so no-JS and reduced-motion
   visitors see the whole story as a still. */
@property --t {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.m-sig .m-wrap { padding-top: 2.5rem; }
@media (min-width: 1024px) { .m-sig .m-wrap { padding-top: 3.5rem; } }
.m-bridge {
  --loop: 11s;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  row-gap: 0;
}
.m-col { display: flex; flex-direction: column; align-items: center; width: 100%; }
@media (min-width: 960px) {
  .m-bridge { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 0.5rem; }
  /* Shrink-wrapped and pushed toward the link, so the three read as one
     machine instead of two panels at the far edges of the page. */
  .m-bridge > .m-col { width: auto; }
  .m-bridge > .m-col:first-child { justify-self: end; }
  .m-bridge > .m-col:last-child { justify-self: start; }
}
.m-cap {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--soft);
  text-align: center;
}

/* The room — the landing's tilted chat mock, flat and small. */
.m-room {
  width: 22rem;
  max-width: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.28), 0 0 90px -20px rgba(37, 99, 235, 0.18);
  text-align: left;
}
html.dark .m-room {
  border-color: rgba(51, 65, 85, 0.4);
  background: rgba(13, 20, 40, 0.95);
  box-shadow: 0 30px 70px -20px rgba(2, 6, 23, 0.95), 0 0 90px -20px rgba(37, 99, 235, 0.35);
}
.m-bar, .m-composer {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.65);
}
.m-bar { border-bottom: 1px solid #e2e8f0; }
.m-composer { border-top: 1px solid #e2e8f0; }
html.dark .m-bar, html.dark .m-composer { background: rgba(15, 23, 42, 0.55); border-color: rgba(148, 163, 184, 0.10); }
.m-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(to bottom right, #2563eb, #6366f1);
}
.m-room-meta { flex: 1; min-width: 0; }
.m-room-name { display: block; font-size: 0.875rem; line-height: 1.25; font-weight: 600; color: #0f172a; }
.m-room-sub { display: flex; align-items: center; gap: 0.25rem; font-size: 11px; line-height: 1rem; color: #64748b; }
.m-room-sub::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #10b981; }
html.dark .m-room-name { color: #f1f5f9; }
html.dark .m-room-sub { color: #94a3b8; }
/* MeshStatusPill's connected look, verbatim. */
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 11px;
  line-height: 1rem;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.10);
}
html.dark .m-pill { color: #34d399; }
.m-pill .i { width: 13px; height: 13px; }
.m-feed {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.625rem;
  min-height: 13.5rem;
  padding: 0.875rem;
  background-color: #f8fafc;
  background-image: radial-gradient(circle, rgba(100, 116, 139, 0.16) 1px, transparent 1.3px);
  background-size: 22px 22px;
}
html.dark .m-feed {
  background-color: #0b1120;
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.08) 1px, transparent 1.3px);
}
.m-msg { display: flex; flex-direction: column; max-width: 86%; }
.m-me { align-self: flex-end; align-items: flex-end; }
.m-them { align-self: flex-start; align-items: flex-start; }
.m-bubble { padding: 0.5rem 0.75rem; border-radius: 1rem; font-size: 13px; line-height: 1.375; }
.m-bubble-me {
  color: #ffffff;
  background: #2563eb;
  border-bottom-right-radius: 0.375rem;
  box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.7);
}
.m-bubble-them {
  color: #334155;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-bottom-left-radius: 0.375rem;
}
html.dark .m-bubble-them { color: #e2e8f0; background: #1e293b; border-color: transparent; }
.m-name {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.125rem;
  padding-left: 0.25rem;
  font-size: 10px;
  line-height: 1rem;
  font-weight: 600;
  color: var(--g);
}
.m-name .i, .m-status .i { width: 11px; height: 11px; }
.m-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
  padding: 0 0.25rem;
  font-size: 10px;
  line-height: 1rem;
  color: #64748b;
}
html.dark .m-meta { color: #94a3b8; }
.m-status { display: inline-grid; }
.m-status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }
.m-st-wait { opacity: 0; }
.m-st-ok { color: var(--g); font-weight: 600; }
.m-plus, .m-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
}
.m-plus { color: #64748b; background: rgba(226, 232, 240, 0.7); }
html.dark .m-plus { color: #94a3b8; background: rgba(148, 163, 184, 0.10); }
.m-send { color: #ffffff; background: #2563eb; box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.8); }
.m-plus .i, .m-send .i { width: 14px; height: 14px; }
.m-input {
  flex: 1;
  min-width: 0;
  height: 2.25rem;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 9999px;
  font-size: 13px;
  color: #64748b;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
html.dark .m-input { color: #94a3b8; background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.10); }

/* The link: Bluetooth to the radio, then LoRa to the air. Vertical when the
   panels stack, horizontal once they sit side by side. */
.m-link { position: relative; display: flex; flex-direction: column; align-items: center; margin: 1.25rem 0; }
@media (min-width: 960px) { .m-link { flex-direction: row; margin: 0 0 1.875rem; } }
.m-seg { position: relative; display: flex; align-items: center; justify-content: center; }
.m-track {
  position: relative;
  display: block;
  width: 2px;
  height: 4.25rem;
  background: repeating-linear-gradient(to bottom, rgba(59, 130, 246, 0.55) 0 5px, transparent 5px 10px);
}
.m-track.air { background: repeating-linear-gradient(to bottom, var(--g) 0 5px, transparent 5px 10px); }
@media (min-width: 960px) {
  .m-track { width: 5.5rem; height: 2px; background: repeating-linear-gradient(to right, rgba(59, 130, 246, 0.55) 0 5px, transparent 5px 10px); }
  .m-track.air { width: 7.5rem; background: repeating-linear-gradient(to right, var(--g) 0 5px, transparent 5px 10px); }
}
.m-seg-label {
  position: absolute;
  top: 50%;
  left: calc(50% + 0.875rem);
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}
.m-seg-label .i { width: 11px; height: 11px; vertical-align: -1px; margin-right: 0.2rem; }
@media (min-width: 960px) {
  .m-seg-label { top: auto; bottom: calc(50% + 0.75rem); left: 50%; transform: translateX(-50%); }
}
.m-link .m-radio-chip { width: 3.5rem; height: 3.5rem; border-radius: 1rem; }
.m-link .m-radio-chip .i { width: 1.5rem; height: 1.5rem; }
.m-radio-cap {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.875rem);
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--soft);
}
@media (min-width: 960px) {
  .m-radio-cap { top: calc(100% + 0.75rem); right: auto; left: 50%; transform: translateX(-50%); }
}
.m-pk {
  position: absolute;
  width: 0.625rem;
  height: 0.625rem;
  margin: -0.3125rem 0 0 -0.3125rem;
  border-radius: 9999px;
  left: 50%;
  top: var(--t);
  opacity: 0;
}
@media (min-width: 960px) { .m-pk { top: 50%; left: var(--t); } }
.m-pk.ble { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 0 12px rgba(59, 130, 246, 0.9); }
.m-pk.air { background: #67ea94; box-shadow: 0 0 0 3px rgba(103, 234, 148, 0.22), 0 0 14px rgba(103, 234, 148, 0.95); }

/* The node: a stock Meshtastic board with its little monochrome OLED. Dark in
   both themes, because hardware is. */
.m-node { padding-top: 2.5rem; }
.m-dev {
  position: relative;
  width: 17rem;
  max-width: 100%;
  padding: 0.875rem 0.875rem 1rem;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, #273244, #0b1220 70%);
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.65);
  text-align: left;
}
html.dark .m-dev { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 80px -24px rgba(103, 234, 148, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(148, 163, 184, 0.12); }
.m-ant {
  position: absolute;
  right: 1.75rem;
  bottom: 100%;
  width: 0.625rem;
  height: 2.5rem;
  border-radius: 0.375rem 0.375rem 0 0;
  background: linear-gradient(to right, #1f2937, #4b5563 45%, #111827);
}
.m-oled {
  position: relative;
  overflow: hidden;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: #020806;
  color: #d1fae5;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 11.5px;
  line-height: 1.45;
  text-shadow: 0 0 6px rgba(103, 234, 148, 0.35);
  box-shadow: inset 0 0 0 1px rgba(103, 234, 148, 0.10), inset 0 0 28px rgba(103, 234, 148, 0.06);
}
.m-oled::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
}
.m-oled-top, .m-oled-foot { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 10px; }
.m-oled-top { padding-bottom: 0.375rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(209, 250, 229, 0.25); }
.m-oled-foot { padding-top: 0.375rem; margin-top: 0.5rem; border-top: 1px solid rgba(209, 250, 229, 0.25); opacity: 0.8; }
.m-bat { display: inline-block; width: 1.125rem; height: 0.5rem; border: 1px solid currentColor; border-radius: 2px; position: relative; vertical-align: -1px; }
.m-bat::before { content: ''; position: absolute; inset: 1px 4px 1px 1px; background: currentColor; }
.m-oled-body { position: relative; min-height: 8.25rem; }
.m-oled p.m-o { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.m-oled p.m-o + p.m-o { margin-top: 0.5rem; }
.m-o-idle { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; letter-spacing: 0.08em; }
.m-o-from { font-weight: 700; }
.m-o-out { color: #a7f3d0; }
.m-dev-btns { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.m-dev-btns i { width: 1.25rem; height: 0.3125rem; border-radius: 9999px; background: #374151; }

/* The clock. Percentages of --loop:
   0-7    the room's message sits there, "Transmitting…"
   7-20   a packet rides Bluetooth to the radio
   21-37  ...and LoRa to the node, whose screen shows it
   37     the room marks it delivered
   46     the node answers
   53-81  the answer comes back the same way
   82     it lands in the room as a message from the node
   95-100 everything resets */
.m-live .m-pk.a { animation: m-pk-a var(--loop) linear infinite; }
.m-live .m-pk.b { animation: m-pk-b var(--loop) linear infinite; }
.m-live .m-pk.c { animation: m-pk-c var(--loop) linear infinite; }
.m-live .m-pk.d { animation: m-pk-d var(--loop) linear infinite; }
.m-live .m-st-wait { animation: m-k-wait var(--loop) linear infinite; }
.m-live .m-st-ok { animation: m-k-ok var(--loop) linear infinite; }
.m-live .m-o-idle { animation: m-k-idle var(--loop) linear infinite; }
.m-live .m-o-in { animation: m-k-in var(--loop) ease-out infinite; }
.m-live .m-o-out { animation: m-k-out var(--loop) ease-out infinite; }
.m-live .m-reply { animation: m-k-reply var(--loop) ease-out infinite; }
.m-live .m-link .m-radio-chip { animation: m-k-radio var(--loop) ease-out infinite; }
.m-paused, .m-paused * { animation-play-state: paused !important; }

@keyframes m-pk-a { 0%, 6% { --t: 0%; opacity: 0; } 7% { --t: 0%; opacity: 1; } 19% { --t: 100%; opacity: 1; } 20%, 100% { --t: 100%; opacity: 0; } }
@keyframes m-pk-b { 0%, 20% { --t: 0%; opacity: 0; } 21% { --t: 0%; opacity: 1; } 36% { --t: 100%; opacity: 1; } 37%, 100% { --t: 100%; opacity: 0; } }
@keyframes m-pk-c { 0%, 52% { --t: 100%; opacity: 0; } 53% { --t: 100%; opacity: 1; } 68% { --t: 0%; opacity: 1; } 69%, 100% { --t: 0%; opacity: 0; } }
@keyframes m-pk-d { 0%, 69% { --t: 100%; opacity: 0; } 70% { --t: 100%; opacity: 1; } 80% { --t: 0%; opacity: 1; } 81%, 100% { --t: 0%; opacity: 0; } }
@keyframes m-k-wait { 0%, 36% { opacity: 1; } 37%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes m-k-ok { 0%, 36% { opacity: 0; } 37%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-k-idle { 0%, 36% { opacity: 1; } 37%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes m-k-in { 0%, 36% { opacity: 0; transform: translateY(4px); } 39%, 94% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes m-k-out { 0%, 45% { opacity: 0; } 48%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-k-reply { 0%, 81% { opacity: 0; transform: translateY(8px); } 84%, 94% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes m-k-radio {
  0%, 19%, 25%, 66%, 72%, 100% { box-shadow: inset 0 0 0 1px var(--g-ring); }
  21%, 69% { box-shadow: inset 0 0 0 1px var(--g), 0 0 28px -4px rgba(103, 234, 148, 0.75); }
}

/* ---- How it works: a real sequence, so the numbered rail is earned -------- */
.m-steps { position: relative; display: grid; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .m-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.m-steps > li { margin: 0; }
.m-rail {
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  opacity: 0.6;
  pointer-events: none;
  background: var(--g-rail);
}
@media (min-width: 768px) {
  .m-rail { --rail-dir: to right; top: 1.5rem; bottom: auto; left: 14%; right: 14%; width: auto; height: 2px; transform: none; }
}
.m-step { position: relative; text-align: center; }
.m-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  border: 1px solid #bbf7d0;
  background: #ffffff;
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--g);
  box-shadow: 0 0 0 6px #f8fafc, 0 1px 2px rgba(15, 23, 42, 0.06);
}
html.dark .m-num { background: #0f172a; border-color: #334155; box-shadow: 0 0 0 6px #020617, 0 0 28px -6px rgba(103, 234, 148, 0.55); }
.m-step .m-p { max-width: 20rem; margin: 0 auto; }

/* ---- Honest limits: the live byte counter --------------------------------- */
.m-limits { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .m-limits { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.m-stack { display: grid; gap: 1rem; }
.m-meter-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.m-meter-head .m-chip { margin-bottom: 0; }
.m-h3 .m-big { color: var(--g); }
.m-try-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.625rem; }
.m-label { font-size: 0.8125rem; font-weight: 600; color: var(--strong); }
.m-presets { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.m-preset {
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--field);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--soft);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.m-preset:hover { color: var(--ink); }
.m-preset[aria-pressed='true'] { color: var(--g); border-color: var(--g-ring); background: var(--g-chip); }
.m-preset:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.m-ta {
  display: block;
  width: 100%;
  min-height: 6.5rem;
  padding: 0.875rem 1rem;
  resize: vertical;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--field);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.m-ta:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px var(--g-chip); }
.m-meter { position: relative; height: 0.5rem; margin-top: 1rem; overflow: hidden; border-radius: 9999px; background: var(--track); }
.m-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: var(--g);
  transition: width 0.2s ease, background-color 0.2s;
}
.m-meter i.warn { background: #f59e0b; }
.m-meter i.over { background: #ef4444; }
/* The app's own thresholds: amber past 85%, red past the packet. */
.m-read {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.m-count { font-weight: 700; }
.m-count.warn { color: #d97706; }
html.dark .m-count.warn { color: #fbbf24; }
.m-count.over { color: #ef4444; }
.m-wire {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background: #020806;
  color: #d1fae5;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-shadow: 0 0 6px rgba(103, 234, 148, 0.3);
  box-shadow: inset 0 0 0 1px rgba(103, 234, 148, 0.12);
}
.m-wire-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6ee7b7;
  opacity: 0.8;
  text-shadow: none;
}
.m-cut {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--amber-t);
}
/* legal.css carries no [hidden] reset, and display:flex above would otherwise
   beat the attribute — the notice showed on a message that fit. */
.m-cut[hidden] { display: none; }
.m-cut .i { width: 15px; height: 15px; margin-top: 0.1rem; }
.m-fine { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--soft); }

/* ---- Security: where the guarantee ends ----------------------------------- */
.m-split {
  display: grid;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.06), transparent 42%, transparent 58%, rgba(245, 158, 11, 0.08)), var(--c-bg);
}
@media (min-width: 768px) {
  .m-split {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    background: linear-gradient(to right, rgba(37, 99, 235, 0.06), transparent 42%, transparent 58%, rgba(245, 158, 11, 0.08)), var(--c-bg);
  }
}
.m-side { padding: 1.75rem; }
@media (min-width: 1024px) { .m-side { padding: 2.25rem; } }
.m-side-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.m-side-head .m-chip { margin-bottom: 0; }
.m-side-head .m-h3 { margin: 0; }
.m-state {
  display: inline-block;
  margin-top: 0.125rem;
  font-size: 10px;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.m-state.blue { color: var(--blue-t); }
.m-state.amber { color: var(--amber-t); }
.m-boundary { position: relative; display: flex; align-items: center; justify-content: center; height: 3.5rem; }
.m-boundary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.75rem;
  right: 1.75rem;
  border-top: 2px dashed var(--line);
}
@media (min-width: 768px) {
  .m-boundary { width: 4.5rem; height: auto; }
  .m-boundary::before { top: 1.75rem; bottom: 1.75rem; left: 50%; right: auto; border-top: 0; border-left: 2px dashed var(--line); }
}
.m-boundary .m-radio-chip {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--c-solid);
  box-shadow: inset 0 0 0 1px var(--g-ring), 0 0 0 6px var(--c-solid);
}
.m-boundary .m-radio-chip .i { width: 1.125rem; height: 1.125rem; }

/* ---- Responsibility ------------------------------------------------------- */
.m-duty { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 640px) { .m-duty { flex-direction: row; gap: 1.5rem; } }
@media (min-width: 1024px) { .m-duty { padding: 2.5rem; } }
.m-duty .m-chip { margin-bottom: 0; }
.m-duty .m-h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .m-duty .m-h2 { font-size: 1.875rem; line-height: 2.25rem; } }
.m-duty .m-p { font-size: 0.9375rem; }
.m-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 1rem 1.125rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--soft);
  background: rgba(239, 68, 68, 0.06);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.2);
}
.m-callout .i { width: 18px; height: 18px; margin-top: 0.125rem; color: #dc2626; }
html.dark .m-callout .i { color: #f87171; }

/* inco's mark, animated as components/IncoMark.tsx animates it on the landing:
   Tailwind's animate-pulse on the core, a 7s orbit and a 5.5s counter-orbit.
   transform-box view-box + origin center = the middle of the 24-unit viewBox,
   the same pivot Tailwind's origin-center gives an SVG group. */
.inco-mark .inco-core { animation: inco-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.inco-mark .inco-orbit {
  transform-box: view-box;
  transform-origin: center;
  animation: inco-spin 7s linear infinite;
}
.inco-mark .inco-orbit-in { animation: inco-spin 5.5s linear infinite reverse; }
@keyframes inco-pulse { 50% { opacity: 0.5; } }
@keyframes inco-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .m-hop i, .m-rings i { animation: none; }
  .m-hop i { opacity: 0.6; }
  .inco-mark .inco-core, .inco-mark .inco-orbit { animation: none; }
}