:root {
  --bg: #fbfbfa;
  --card: #fff;
  --text: #1b1b1b;
  --muted: #5f5f5f;
  --line: #d8d8d4;
  --accent: #0f6b62;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --card: #1c1e22;
    --text: #e4e4e2;
    --muted: #9a9a97;
    --line: #33363b;
    --accent: #4fd0c0;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}
.wrap { max-width: 680px; margin: 0 auto; padding: 0 14px; }

header.site { border-bottom: 1px solid var(--line); }
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px;
}
.brand { font-weight: 700; text-decoration: none; color: var(--text); padding: 11px 0; }
.cursel { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.cursel label { margin: 0; }
.cursel select { width: auto; }

h1 { font-size: 1.45rem; line-height: 1.3; margin: 22px 0 6px; }
h2 { font-size: 1.1rem; margin: 30px 0 8px; }
h3 { font-size: .98rem; margin: 20px 0 6px; }
p { margin: 0 0 12px; }
a { color: var(--accent); }
.local { font-size: .88rem; color: var(--muted); }

nav.tabs { display: flex; flex-wrap: wrap; margin-top: 18px; border-bottom: 1px solid var(--line); }
nav.tabs button {
  font: inherit; cursor: pointer; min-height: 44px; padding: 0 12px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); margin-bottom: -1px;
}
nav.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

section[role="tabpanel"] { padding: 18px 0 4px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
input, select {
  width: 100%; font: inherit; min-height: 44px; padding: 8px 10px;
  color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 3px;
}

.out { margin-top: 18px; border: 1px solid var(--line); border-radius: 3px; }
.out div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); }
.out div:first-child { border-top: 0; }
.out span { color: var(--muted); font-size: .9rem; }
.out b { font: 600 1.05rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: right; }
.out div:first-child b { font-size: 1.2rem; }

details { margin-top: 14px; }
summary { cursor: pointer; color: var(--accent); padding: 11px 0; font-size: .92rem; }
.scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 3px; }
table { border-collapse: collapse; width: 100%; font: .85rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
th, td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: .78rem; position: sticky; top: 0; background: var(--bg); }
pre.bars { overflow-x: auto; margin: 6px 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
pre.bars b { color: var(--accent); font-weight: 400; }

code { font-size: .9em; background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }
.faq p { color: var(--muted); }
ul { padding-left: 20px; }
li { margin-bottom: 8px; }

.note { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 28px; }
footer.site { border-top: 1px solid var(--line); margin-top: 32px; padding: 6px 0 26px; color: var(--muted); font-size: .88rem; }
footer.site nav { display: flex; flex-wrap: wrap; }
footer.site a { display: inline-block; padding: 12px 16px 12px 0; color: var(--muted); }

/* --- Ad slots -------------------------------------------------------------
   Height is reserved up front so an ad loading in never pushes content
   around (CLS 0). The 32px margin keeps ads clear of inputs and links,
   which is what the accidental-click policy is about.
   The .placeholder class draws the empty box and the label; delete it
   from the HTML when the real tag goes in. */
.ad-slot {
  min-height: 280px;              /* mobile rectangle, e.g. 336x280 */
  margin: 32px 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
@media (min-width: 700px) { .ad-slot { min-height: 250px; } }  /* 970x250 / 728x90 */

.ad-rail { display: none; }
@media (min-width: 1320px) and (min-height: 720px) {
  /* 680px column + 300px rail + gutters only fit from 1320px up.
     position:fixed keeps the rail out of the flow, so it cannot shift text. */
  .ad-rail {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 96px; left: calc(50% + 360px);
    width: 300px; height: 600px;
  }
}

/* outline, not border: an outline takes up no space, so the placeholder box
   measures exactly the reserved height and swapping in a real ad shifts nothing. */
.placeholder { outline: 1px dashed var(--line); outline-offset: -1px; border-radius: 3px; }
.placeholder::before {
  content: "Advertisement";
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
@media print { .ad-slot, .ad-rail { display: none; } }