/* RTLOC — documentation pages (loaded after style.css) */

:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Page hero ---------- */
.doc-hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff; padding: 150px 0 56px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--blue) 62%, var(--blue-3) 100%);
}
.doc-hero-bg { position: absolute; inset: 0; z-index: -1; }
.doc-hero h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 1rem;
}
.doc-hero-lead { font-size: clamp(1rem, 1.3vw, 1.14rem); color: #d8e8f6; max-width: 52em; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin-top: 1.6rem;
}
.doc-meta li {
  font-family: var(--display); font-size: .82rem; font-weight: 500;
  padding: .4em 1em; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
}

/* ---------- Layout ---------- */
.doc-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ---------- Sidebar ---------- */
.doc-nav { position: sticky; top: 92px; }
.doc-nav h2 {
  font-family: var(--display); font-weight: 600; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 1.6rem 0 .7rem;
}
.doc-nav h2:first-child { margin-top: 0; }
.doc-nav ol, .doc-nav ul { list-style: none; }
.doc-nav a {
  display: block; padding: .32rem 0 .32rem .8rem; font-size: .92rem; color: var(--muted);
  border-left: 2px solid var(--line); transition: color .18s, border-color .18s;
}
.doc-nav a:hover { color: var(--blue); border-left-color: var(--blue-2); }
.doc-nav-cmds code {
  font-family: var(--mono); font-size: .8em; color: var(--blue);
  background: rgba(9,90,158,.08); border-radius: 4px; padding: .1em .38em; margin-right: .3em;
}
.doc-nav-apis a { font-family: var(--display); font-weight: 500; }
.doc-nav-apis a[aria-current="page"] {
  color: var(--blue); border-left-color: var(--blue); background: rgba(9,90,158,.05);
}

/* ---------- Body ---------- */
.doc-body > section { margin-bottom: clamp(2.5rem, 5vw, 3.6rem); scroll-margin-top: 88px; }
.doc-body h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -.01em; margin-bottom: .8rem;
}
.doc-body p { color: var(--muted); max-width: 62em; margin-bottom: 1rem; }
.doc-body a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.doc-body code {
  font-family: var(--mono); font-size: .88em; color: var(--navy-2);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: .1em .4em;
}
.doc-note {
  background: var(--bg-soft); border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; font-size: .95rem;
}
.doc-updated { color: var(--muted); font-size: .88rem; font-style: italic; }

/* ---------- Command block ---------- */
.api-cmd { margin: 2.2rem 0; scroll-margin-top: 88px; }
.api-cmd h3 {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: .01em; margin-bottom: .35rem;
}
.api-badge {
  font-family: var(--display); font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  padding: .3em .7em; border-radius: 999px;
}
.api-badge--rx  { color: var(--blue);  background: rgba(9,90,158,.1); }
.api-badge--tx  { color: #0f766e;      background: rgba(15,118,110,.1); }
.api-badge--set { color: #92400e;      background: rgba(146,64,14,.1); }
.api-char { font-family: var(--body); font-size: .82rem; font-weight: 400; color: var(--muted); }
.api-char code {
  font-family: var(--mono); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 5px; padding: .1em .4em;
}
.api-cmd-lead { font-size: .95rem; margin-bottom: .9rem !important; }
.api-cmd-foot { font-size: .82rem; color: var(--muted); margin-top: .55rem; }

/* ---------- Field tables ---------- */
.api-tablewrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: var(--bg);
}
.api-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.api-table th {
  font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: .8rem 1rem; background: var(--bg-soft); border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
}
.api-table td { padding: .62rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.api-table tbody tr:last-child td { border-bottom: 0; }
.api-table tbody tr:hover td { background: rgba(9,90,158,.03); }
.api-table td:last-child { color: var(--muted); min-width: 15em; }

.api-f { font-family: var(--mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.api-t { font-family: var(--mono); color: var(--blue); white-space: nowrap; }
.api-b { font-family: var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.api-e { font-family: var(--mono); color: var(--navy-2); white-space: nowrap; }

/* Repeated block marker. Needs to out-specify `.api-table td:last-child`,
   which the single colspan cell also matches. */
.api-table .api-repeat td {
  font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue);
  background: rgba(9,90,158,.06); padding: .5rem 1rem; min-width: 0;
}
.api-repeat td::before { content: "\21BB"; margin-right: .55em; font-size: 1.05em; }
.api-table tbody tr.api-repeat:hover td { background: rgba(9,90,158,.06); }

/* A `type` field opens a sub-block inside the DATA payload */
.api-subtype td { border-top: 2px solid rgba(86,178,201,.45); }
.api-subtype .api-f { color: var(--cyan); }

/* ---------- Overview cards ---------- */
.api-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem; margin-top: 1.6rem;
}
.api-card {
  display: block; padding: 1.4rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.api-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-2);
}
.api-card h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem;
  color: var(--navy);
}
.api-card p { color: var(--muted); font-size: .93rem; margin: 0 !important; }
.doc-body a.api-card { text-decoration: none; }

/* ---------- BLE characteristics ---------- */
.ble-uuid { margin-bottom: .8rem !important; }
.ble-uuid code {
  font-family: var(--mono); font-size: .85rem; color: var(--blue);
  background: rgba(9,90,158,.06); border-color: rgba(9,90,158,.16);
}
.ble-value { font-family: var(--mono); font-size: .86rem; line-height: 1.75; color: var(--ink); }
.ble-value b { font-weight: 500; color: var(--navy-2); }

.api-table--sub {
  margin-top: .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 0; background: var(--bg-soft); overflow: hidden;
}
.api-table--sub caption {
  font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-align: left; padding: .7rem 1rem .2rem;
}
.api-table--sub th { background: transparent; }
.api-table--sub td { font-size: .87rem; }
.api-table--sub td:first-child {
  font-family: var(--mono); color: var(--blue); white-space: nowrap; vertical-align: top;
}
.api-table--sub tbody tr:hover td { background: rgba(9,90,158,.03); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-nav { position: static; border-bottom: 1px solid var(--line); padding-bottom: 1.2rem; }
  .doc-nav-cmds { columns: 2; column-gap: 1.5rem; }
}
@media (max-width: 680px) {
  .doc-hero { padding-top: 118px; }
  .doc-nav-cmds { columns: 1; }
}