/* Fluid from a 320 px phone to a desktop: a max-width in ch keeps the measure
   readable, clamp() scales padding and type, and below 40rem every table
   becomes one card per row, each cell naming its column from data-label. */
:root {
  --ink: #16181d; --dim: #5a6472; --line: #dfe3ea; --bg: #ffffff;
  --soft: #f6f8fb; --accent: #c2410c; --warn-bg: #fff6f2; --warn-line: #f0c4b2;
  --pad: clamp(0.9rem, 4vw, 2rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7eaf0; --dim: #9aa4b2; --line: #2b313b; --bg: #14171c;
    --soft: #1b1f26; --accent: #ff8a4c; --warn-bg: #2a1a14; --warn-line: #5c3524;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 clamp(15px, 0.9rem + 0.2vw, 17px)/1.6 -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }

header {
  display: flex; align-items: center; gap: .4rem 1.2rem; flex-wrap: wrap;
  padding: .7rem var(--pad); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
nav { display: flex; gap: .4rem 1rem; flex-wrap: wrap; }
nav a { color: var(--dim); text-decoration: none; }
nav a:hover, .brand:hover { color: var(--accent); }
nav.langs { margin-left: auto; font-size: .88em; gap: .3rem .8rem; }
nav.langs span { color: var(--ink); font-weight: 600; }

main { width: 100%; max-width: 80ch; margin-inline: auto; padding: 1.2rem var(--pad) 4rem; }
h1 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.2rem); margin: 1rem 0 .3rem; letter-spacing: -.02em; }
h2 { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem); margin: 2.4rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 1.6rem 0 .5rem; }
.tagline { color: var(--dim); font-size: 1.05em; margin-top: 0; }
.note, .dim { color: var(--dim); }
.note { font-size: .92em; }
.count {
  font-size: .72em; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: .1rem .55rem; vertical-align: middle;
}
.ui { font-weight: 600; white-space: nowrap; }
a { color: var(--accent); }

nav.toc { display: block; margin: 1.2rem 0; }
nav.toc ol {
  margin: 0; padding: .7rem 1rem .7rem 2.2rem; background: var(--soft);
  border: 1px solid var(--line); border-radius: 10px; columns: 2 14rem;
}
nav.toc li { margin: .15rem 0; }

section.warn {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 10px; padding: .2rem clamp(.8rem, 3vw, 1.2rem) .6rem; margin: 2rem 0;
}
section.warn h2 { color: var(--accent); margin-top: 1rem; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .92em; }
th, td { text-align: left; vertical-align: top; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 600; white-space: nowrap; }
td.name { font-weight: 600; }
td.name .dim { font-weight: 400; }
.sw {
  display: inline-block; width: .8em; height: .8em; border-radius: 50%;
  border: 1px solid var(--dim); margin-right: .3em; vertical-align: -.05em;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: var(--soft); border: 1px solid var(--line);
  border-radius: 4px; padding: .05em .3em;
}
code.morse { white-space: normal; word-spacing: .2em; line-height: 1.8; }
/* A pattern is one unbreakable unit: browsers otherwise wrap after a '-'. */
.m, dl.codes code { white-space: nowrap; }

@media (max-width: 40rem) {
  .scroll { overflow-x: visible; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards thead { position: absolute; left: -9999px; }
  table.cards tr {
    border: 1px solid var(--line); border-radius: 10px;
    padding: .5rem .8rem; margin-bottom: .6rem; background: var(--soft);
  }
  table.cards td { border: 0; padding: .15rem 0; display: flex; gap: .8rem; }
  table.cards td::before {
    content: attr(data-label); color: var(--dim); font-size: .82em; flex: 0 0 30%;
  }
  table.cards td > span { flex: 1 1 auto; min-width: 0; }
  table.cards td.name { display: block; padding-bottom: .3rem; }
  table.cards td.name::before { display: none; }
}

dl.codes {
  display: grid; gap: .35rem .8rem; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
dl.codes div { display: flex; align-items: baseline; gap: .6rem; }
dl.codes dt { font-weight: 700; min-width: 1.2em; text-align: center; }
dl.codes dd { margin: 0; }
p.mapped { line-height: 1.9; }

.shots {
  display: grid; gap: clamp(1rem, 3vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}
figure { margin: 0; text-align: center; }
figure img { width: 100%; max-width: 240px; display: block; margin-inline: auto; }
figcaption { color: var(--dim); font-size: .85em; margin-top: .4rem; }

ul.watches { columns: 3 12rem; padding-left: 1.1rem; font-size: .92em; }
ul.watches li { margin: .1rem 0; break-inside: avoid; }
ul { padding-left: 1.1rem; }
li { margin: .3rem 0; }
footer {
  border-top: 1px solid var(--line); color: var(--dim);
  font-size: .85em; padding: 1rem var(--pad); text-align: center;
}