/* TapToSay documentation — self-contained styles.
   One blue, used everywhere: #0b6fb8. No external deps.
   (Dark/amber recolor is on hold; this is the light, blue docs theme.) */
:root{
  /* the single brand blue — every accent, link, button and hover derives from it */
  --blue:#0b6fb8;
  --blue-soft:rgba(11,111,184,0.10);   /* tint of the same blue (hover/active bg) */
  --blue-line:rgba(11,111,184,0.30);   /* tint of the same blue (borders) */
  --ink:#1f2a37;
  --muted:#5b6776;
  --bg:#f5f8fb;
  --card:#ffffff;
  --line:#dbe4ee;
  --topbar-h:64px;
  --sidebar-w:312px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;color:var(--blue)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;border-radius:6px;z-index:100}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  height:var(--topbar-h);
  display:flex;align-items:center;gap:14px;
  padding:0 18px;
  background:var(--blue);
  color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 2px 10px rgba(11,111,184,.20);
}
.topbar .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.topbar .brand:hover{text-decoration:none}
.topbar .brand .mark{width:32px;height:32px;border-radius:9px;display:block}
.topbar .brand .sub{font-weight:500;font-size:13px;color:rgba(255,255,255,.85);border-left:1px solid rgba(255,255,255,.4);padding-left:10px;letter-spacing:0}
.topbar .search{margin-left:auto}
.topbar .search input{
  width:260px;max-width:42vw;
  padding:8px 13px;border-radius:20px;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.14);color:#fff;font-size:14px;outline:none;
}
.topbar .search input::placeholder{color:rgba(255,255,255,.8)}
.topbar .search input:focus{background:#fff;color:var(--ink)}
.topbar .search input:focus::placeholder{color:var(--muted)}
.burger{
  display:none;background:rgba(255,255,255,.16);border:0;color:#fff;
  font-size:19px;line-height:1;width:40px;height:40px;border-radius:9px;cursor:pointer;
}

/* ---------- Layout ---------- */
.layout{display:flex;align-items:flex-start;max-width:1220px;margin:0 auto}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  position:sticky;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  overflow:auto;
  padding:22px 14px 40px 18px;
  border-right:1px solid var(--line);
}
.sidebar .nav-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px 10px;font-weight:700}
.nav-empty{color:var(--muted);font-size:14px;padding:12px}
.sidebar-foot{margin-top:22px;padding:12px 10px 0;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}

/* ---------- Collapsible tree ---------- */
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree .tree-row{display:flex;align-items:center;gap:2px}
.tree a{display:block;flex:1 1 auto;min-width:0;padding:7px 9px;border-radius:8px;color:var(--ink);font-weight:600;font-size:14px;line-height:1.35;overflow-wrap:break-word}
.tree a:hover{background:var(--blue-soft);text-decoration:none;color:var(--blue)}
.tree a.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(11,111,184,.28)}
.caret{flex:0 0 auto;width:22px;height:22px;border:0;background:transparent;cursor:pointer;position:relative;border-radius:6px}
.caret:hover{background:var(--blue-soft)}
.caret::before{content:"";position:absolute;left:7px;top:6px;width:0;height:0;border-left:6px solid var(--blue);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .18s ease}
li.open>.tree-row>.caret::before{transform:rotate(90deg)}
.tree .children{display:none;margin:2px 0 4px 10px;padding-left:8px;border-left:1px dashed var(--line)}
li.open>.children{display:block}
.tree .lvl2>a{padding-left:12px;font-weight:500}
.tree .lvl3>a{padding-left:16px;font-weight:400;font-size:13.5px;color:var(--muted)}
.tree .lvl3>a.active{color:#fff}
.tree .lvl1>.tree-row>a{font-weight:700;font-size:14.5px}
.tree .lvl1+.lvl1{margin-top:3px}
.tree li.lvl2.has-kids>.tree-row>.caret::before{transform:rotate(0)}
.tree li.lvl2.has-kids.open>.tree-row>.caret::before{transform:rotate(90deg)}

/* ---------- Content ---------- */
.content{flex:1 1 auto;min-width:0;padding:34px 44px 100px;max-width:820px}
.page{display:none;animation:fade .18s ease-in}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.page h1{font-size:31px;line-height:1.22;margin:0 0 8px;font-weight:800;letter-spacing:-.02em}
.page h2{font-size:22px;margin:34px 0 10px;padding-top:6px;border-top:1px solid var(--line);font-weight:800;letter-spacing:-.01em}
.page h2:first-of-type{border-top:0;padding-top:0}
.page h3{font-size:17px;margin:22px 0 6px;font-weight:700}
.page .lede{color:var(--muted);font-size:17px;margin:0 0 18px}
.page p{margin:11px 0;max-width:72ch}
.page ul,.page ol{margin:10px 0;padding-left:22px;max-width:72ch}
.page li{margin:6px 0}

/* UI chips: exact button / field labels from the app — all in the one blue */
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.88em;background:var(--blue-soft);border:1px solid var(--blue-line);
  border-radius:5px;padding:1px 6px;color:var(--blue);
}
kbd{
  font:inherit;font-size:.86em;font-weight:700;
  background:#fff;border:1px solid var(--blue-line);border-bottom-width:2px;
  border-radius:6px;padding:1px 7px;color:var(--blue);white-space:nowrap;
}
.callout{
  background:var(--blue-soft);border:1px solid var(--blue-line);border-left:4px solid var(--blue);
  border-radius:10px;padding:12px 16px;margin:16px 0;font-size:15px;color:var(--ink);
}
.callout.note{background:var(--blue-soft);border-color:var(--blue-line);border-left-color:var(--blue)}
.callout strong{color:var(--blue)}
.steps{counter-reset:step;list-style:none;padding-left:0;margin:14px 0}
.steps>li{
  position:relative;padding:2px 0 18px 46px;margin:0;
  border-left:2px solid var(--line);
}
.steps>li:last-child{border-left-color:transparent}
.steps>li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:-17px;top:0;
  width:32px;height:32px;border-radius:50%;
  background:var(--blue);color:#fff;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px var(--bg);
}
.steps>li b{color:var(--blue)}
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
th,td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
th{background:var(--blue-soft);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--blue)}
tr:nth-child(even) td{background:#fafcfe}

/* ---------- Table of contents page ---------- */
.toc{margin-top:6px}
.toc-l1{font-size:17px;font-weight:800;margin:22px 0 6px}
.toc-l1:first-child{margin-top:0}
.toc-list{list-style:none;margin:0 0 4px;padding:0 0 0 14px}
.toc-list li{margin:3px 0}
.toc-list ul{list-style:none;margin:3px 0 3px 14px;padding:0}
.toc-list a{font-size:15px}
.toc-list ul a{font-size:14px;color:var(--muted)}

/* ---------- Deep-link anchors ---------- */
.sec,.subsec{scroll-margin-top:calc(var(--topbar-h) + 14px);position:relative}
.sec>h2{padding:4px 6px;border-radius:6px;transition:background .3s}
.subsec>h3{padding:2px 6px;border-radius:6px;margin-left:-6px;transition:background .3s}
.flash>h2,.flash>h3{background:var(--blue-soft)}

/* ---------- Mobile ---------- */
.overlay{display:none;position:fixed;inset:0;background:rgba(15,35,55,.45);z-index:35}
@media(max-width:900px){
  .burger{display:block}
  .content{padding:24px 18px 80px}
  .topbar .search input{width:150px}
  .sidebar{
    position:fixed;left:0;top:var(--topbar-h);
    height:calc(100vh - var(--topbar-h));
    background:#fff;z-index:36;
    transform:translateX(-104%);transition:transform .22s ease;
    box-shadow:2px 0 20px rgba(15,35,55,.18);
  }
  .sidebar.open{transform:translateX(0)}
  .layout{display:block}
  .sidebar.open~.overlay{display:block}
  .overlay.show{display:block}
}