[v-cloak] {
  display: none;
}

body {
  display: flex;
  height: 100vh;
}

body:has([v-cloak]):after {
  content: '';
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #f0f0f0;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

#app {
  flex-grow: 1;
}

#app h5.logo-top img {
  height: 16px;
  margin-top: -4px;
}

#app h5.logo-top span {
  font-style: italic; font-weight: bold; line-height: 0.9
}

#app select {
  cursor: pointer
}
#app .tooltip:has(>.device) {
  background: #f0f0f055;
  width: auto;
}
#app img.device {
  width: 400px;
  max-width: 400px;
  max-height: 400px;
}
#app div.autoscroller {
  overflow: auto;
  max-height: 300px;
  display: flex;
  flex-direction: column-reverse;
}
#app pre.term {
  font-family: monospace;
}
#app .overlay {
  display: flex !important;
  flex-direction: column;
}
#app .console {
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0;
}
#app .console .holder {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
#app .console-input {
  flex-grow: 1;
  display: block;
  appearance: none;
  background: transparent;
  border: 0;
  font-family: monospace;
  font-size: .875rem;
}
#app .console-input:focus, #app console-input:focus{
  outline: none;
}
#app .pre {
  white-space-collapse: preserve;
  min-width: 300px;
}
#app a {
  text-decoration: underline;
}

#app .version {
  flex-wrap: wrap;
}
#app .version div.field {
  min-width: 140px;
  align-self: flex-start;
}
#app .version .pre {
  padding-bottom: 10px;
}
#app img.icon {
  height: 20px;
}

.flash-container {
  padding-bottom: 150px;
}

.strong {
  font-weight: 700;
}

.text-wrap {
  text-wrap: auto;
}

#app .page-main-title {
  margin: 8px 0 12px;
  font-weight: 700;
  line-height: 1.25;
}

#app .brand-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
  max-width: 100%;
}
#app .brand-logo {
  display: block;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
}
#app img.brand-logo--meshcore {
  height: 40px !important;
  max-width: 220px;
}
#app img.brand-logo--rrp {
  height: 100px !important;
  max-width: 240px;
  background: #f5f5f5;
  padding: 6px 10px;
  border-radius: 6px;
}
@media (max-width: 640px) {
  #app .brand-row { gap: 12px; }
  #app img.brand-logo--meshcore { height: 30px !important; max-width: 180px; }
  #app img.brand-logo--rrp      { height: 88px !important; max-width: 220px; }
}

#app .explainer {
  margin: 12px 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--surface-container, #1e1e1e);
  line-height: 1.4;
}
#app .explainer h5 {
  margin: 0 0 8px;
}
#app .explainer p {
  margin: 6px 0;
}
#app .explainer ul {
  margin: 6px 0 6px 20px;
  padding: 0;
}
#app .explainer li {
  margin: 4px 0;
  display: list-item;
  list-style: disc outside;
}
#app .explainer-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px auto 12px;
  border-radius: 6px;
}
#app .explainer-image.inline-svg {
  overflow: hidden;
}
#app .explainer-image.inline-svg svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
#app .svg-desktop { display: block; }
#app .svg-mobile  { display: none;  }
@media (max-width: 640px) {
  #app .svg-desktop { display: none;  }
  #app .svg-mobile  { display: block; max-width: 320px; }
}
#app .explainer code {
  font-family: monospace;
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}

#app .page-section {
  margin: 20px 0 28px;
  scroll-margin-top: 12px;
}

#app .toc {
  background: var(--surface-container, #1e1e1e);
  border-radius: 8px;
  padding: 10px 16px 12px;
  margin: 12px 0 20px;
}
#app .toc-heading {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b0b0b0;
  margin-bottom: 6px;
}
#app ol.toc-list {
  margin: 0 0 0 22px;
  padding: 0;
  counter-reset: toc;
}
#app ol.toc-list li {
  margin: 4px 0;
  list-style: decimal outside;
}
#app ol.toc-list a {
  text-decoration: none;
  color: #d8d8d8;
  border-bottom: 1px dotted rgba(255,255,255,0.25);
}
#app ol.toc-list a:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.6);
}
#app .section-title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-weight: 700;
  font-size: 1.9rem;
}
#app .page-main-title { font-size: 1.9rem; }

/* Sub-headings inside sections — sit clearly below the big section titles */
#app .explainer h5,
#app #configuration h5 {
  font-size: 1rem;
  font-weight: 700;
  margin: 18px 0 6px;
  color: #ffffff;
}

/* Body content under each subheading gets indented so the h5 → body hierarchy reads clearly */
#app #configuration > p,
#app #configuration > ol,
#app #configuration > .help-grid,
#app #configuration > div > p,
#app #configuration > div > ol,
#app #configuration > div > ul:not(.settings-list),
#app #configuration > div > pre {
  padding-left: 18px;
}
#app .section-lede {
  margin: 6px 0 12px;
  color: #b0b0b0;
  font-size: 0.9rem;
}
#app .section-lede code {
  font-family: monospace;
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}
#app #configuration ol,
#app #configuration ul {
  margin: 6px 0 10px 22px;
  padding: 0;
}
#app #configuration li {
  margin: 4px 0;
  display: list-item;
  list-style: decimal outside;
}
#app #configuration ul li {
  list-style: disc outside;
}
#app #configuration ul.settings-list {
  margin: 8px 0 12px 22px;
  padding: 0;
}
#app #configuration ul.settings-list li {
  margin: 10px 0;
  list-style: disc outside;
}
#app #configuration ul.settings-list li pre {
  margin: 6px 0 4px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre;
  font-family: monospace;
  font-size: 0.82rem;
}
#app #configuration code {
  font-family: monospace;
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}
#app .help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
#app .help-card {
  background: var(--surface-container, #1e1e1e);
  border-radius: 8px;
  padding: 10px 14px;
}
#app .help-card h6 {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#app .help-card h6 code {
  font-family: monospace;
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 400;
}
#app .method-heading {
  margin: 16px 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #d8d8d8;
}

#app .help-output {
  font-family: monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre;
}

/* Mobile refinements */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  body, #app, .flash-container { max-width: 100vw; box-sizing: border-box; }
  .flash-container { padding: 8px 12px 120px; }
  #app * { min-width: 0; }  /* let flex/grid children shrink instead of forcing overflow */
  #app img, #app svg, #app pre, #app code { max-width: 100%; }
  #app h3, #app h4, #app h5, #app h6, #app p, #app li {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  #app .page-section { margin: 14px 0 22px; }
  #app .section-title,
  #app .page-main-title { font-size: 1.5rem; }
  #app .section-title { padding-bottom: 4px; }
  #app .explainer h5,
  #app #configuration h5 { font-size: 0.95rem; }
  #app .section-lede { font-size: 0.85rem; }
  #app .explainer { padding: 10px 12px; }
  #app .help-grid { grid-template-columns: 1fr; }
  #app .help-output { font-size: 0.72rem; padding: 6px 8px; }
  #app #configuration pre {
    overflow-x: auto;
    white-space: pre;
    font-family: monospace;
    font-size: 0.8rem;
    padding: 6px 8px;
    background: rgba(0,0,0,0.35);
    border-radius: 4px;
  }
  #app #configuration ol,
  #app #configuration ul {
    margin-left: 18px;
  }
  #app ul.settings-list pre { font-size: 0.75rem; }
  #app .device-select {
    /* Give the device buttons in the picker a comfortable tap target */
    min-height: 48px;
  }
  #app .explainer-image.inline-svg.svg-mobile {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #app .explainer-image.inline-svg.svg-mobile svg {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}
@media (max-width: 380px) {
  #app .help-output { font-size: 0.66rem; }
  #app img.brand-logo--meshcore { height: 24px !important; max-width: 150px; }
  #app img.brand-logo--rrp      { height: 72px !important; max-width: 180px; }
}
/* Quick Guides — responsive video embeds */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 720px; margin: 1rem auto; border-radius: 8px; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.guide-title { margin-top: 1rem; }

/* Overview illustration credit */
#app .explainer .explainer-credit {
  width: fit-content;
  max-width: 92%;
  margin: 2.25rem 0 0.5rem;
  padding: 0.25rem 1.1rem;
  text-align: center;
  color: #eafffb;
  background: rgba(108, 204, 204, 0.14);
  border: 1px solid rgba(108, 204, 204, 0.55);
  border-radius: 999px;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.3;
}
#app .explainer .explainer-credit a {
  color: #6cc;
  text-decoration: underline;
}
/* mobile diagram has ~no top whitespace, so balance the bubble symmetrically there */
@media (max-width: 640px) {
  #app .explainer .explainer-credit { margin: 1.25rem 0; }
}