/* ─────────────────────────────────────────────────────────
   Modern base + legal-doc friendly defaults
   ───────────────────────────────────────────────────────── */

/* Light is the default */
:root {
  --text: rgb(25,26,28);
  --bg: #ffffff;
  --muted: #6b7280;
  --border: #e5e7eb;
  --border-soft: #eef0f2;
  --bg-soft: #f7f7f8;
  --bg-zebra: #fafafa;
  --bg-hover: #f0f2f5;

  --radius: 10px;
  --container-max: 800px;
  --container-pad-x: 24px;
  --container-pad-y: 15px;

  --font-size: 16px;
  --line: 1.7;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu,
               Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* Force dark when requested (overrides system) */
:root[data-theme="dark"] {
  --bg: #242B33;
  --text: #e9eaec;
  --muted: #9aa3b2;
  --border: #2a2f36;
  --border-soft: #1f242a;
  --bg-soft: #12161b;
  --bg-zebra: #12161b;
  --bg-hover: #171c22;
}

/* Optional: force light, even if system prefers dark */
:root[data-theme="light"] { /* same as :root above; included for clarity */ }

/* Auto mode (follow system) when no data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0d0f12;
    --text: #e9eaec;
    --muted: #9aa3b2;
    --border: #2a2f36;
    --border-soft: #1f242a;
    --bg-soft: #12161b;
    --bg-zebra: #12161b;
    --bg-hover: #171c22;
  }
}


*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size);
  /* Keep your original page padding */
  padding: var(--container-pad-y) var(--container-pad-x);
}

body {
  margin: 0;
  line-height: var(--line);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  font-family: var(--font-sans);
}

/* Images/media default responsive */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}
img, svg { height: auto; }

/* Keep classic text-level semantics you used in normalize */
abbr[title]{ border-bottom: 1px dotted; }
small{ font-size: 80%; }
mark{ background:#ff0; color:#000; }
sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
sup { top:-0.5em; } sub { bottom:-0.25em; }

/* Monospace */
code, kbd, pre, samp { font-family: var(--font-mono); }
pre {
  overflow:auto;
  padding: .75rem 1rem;
  background: var(--bg-soft);
  border:1px solid var(--border);
  border-radius: var(--radius);
}

/* Headings */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 1.2em 0 .5em; }
h1 { font-size: clamp(1.8rem, 2.2vw + 1rem, 2.4rem); }
h2 { font-size: clamp(1.4rem, 1.5vw + 1rem, 1.8rem); margin-top: 1.6em; }
h3 { font-size: 1.125rem; margin-top: 1.6em; margin-bottom: .1em; }
h4 { font-size: 1rem; }

/* Paragraphs and lists */
p { margin: .2em 0 1em; }

ul, ol { padding-left: 1.5em; margin: .4em 0 1em; }
li { margin: 0 0 .3em; }
li p:first-of-type { margin-top:0; }
li p:last-of-type  { margin-bottom:0; }

/* Links: keep your thin underline via border */
a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: pre-line; /* kept from your original */
}
a:hover,
a:focus-visible{
  border-bottom: 0;
  outline: none;
}


/* ─────────────────────────────────────────────────────────
   Numbered layouts for lists & optional numbered h3
   ───────────────────────────────────────────────────────── */

/* Default ordered list (type=1) uses custom layout with .number + .content */
ol[type='1']{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
ol[type='1'] > li{
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  column-gap: .5rem;
}
ol[type='1'] .number{ width: 40px; }
ol[type='1'] .content{ min-width: 0; }

/* Alphabetic ordered list kept as-is */
ol[type='a']{
  list-style: lower-alpha;
  padding-left: 2.5em;
}

/* h3 is normal by default; opt-in numbered variant */
h3.has-number{
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  column-gap: .5rem;
}
h3.has-number .number{ width: 40px; }
h3.has-number .content{ min-width: 0; }

/* ─────────────────────────────────────────────────────────
   Tables (clean, readable, responsive)
   ───────────────────────────────────────────────────────── */

/* Neutralize legacy HTML attributes */
table[border], table[cellpadding], table[cellspacing]{
  border:0 !important;
  border-spacing:0 !important;
}

.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1rem 0;
}

table, .table-wrap, .keys { font-variant-numeric: tabular-nums; }


table{
  width:100%;
  border-collapse:separate; /* for rounded corners */
  border-spacing:0;
  margin:.5rem 0 1.25rem;
  font-size:15px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);

}

thead th{
  background:var(--bg-soft);
  font-weight:700;
  text-align:left;
}

th, td{
  padding:.6rem .8rem;
  vertical-align:top;
  border-bottom:1px solid var(--border-soft);
}

tbody tr:last-child td{ border-bottom:0; }

/* zebra + hover */
tbody tr:nth-child(even){ background:var(--bg-zebra); }
tbody tr:hover{ background:var(--bg-hover); }

/* rounded corners */
thead th:first-child{ border-top-left-radius:var(--radius); }
thead th:last-child { border-top-right-radius:var(--radius); }
tbody tr:last-child td:first-child{ border-bottom-left-radius:var(--radius); }
tbody tr:last-child td:last-child { border-bottom-right-radius:var(--radius); }

/* caption */
caption{
  caption-side:bottom;
  padding-top:.5rem;
  color:var(--muted);
  font-size:.9em;
}

/* fixed first column width (e.g. shortcuts) */
table th:first-child,
table td:first-child{
  width:150px; min-width:150px; max-width:150px;
}

@media (max-width:600px){
  table{ font-size:14px; }
}

/* ─────────────────────────────────────────────────────────
   Keycap styling
   ───────────────────────────────────────────────────────── */

kbd, .key{
  display:inline-block;
  padding:.15em .45em;
  border:1px solid var(--border);
  border-bottom-width:2px;
  border-radius:6px;
  background:#f9fafb;
  line-height:1.2;
  white-space:nowrap;
}
@media (prefers-color-scheme: dark){
  kbd, .key{ background:#0f1419; }
}
.keys{ display:inline-flex; gap:.3rem; align-items:center; }
.keys .plus{ opacity:.6; }

/* ─────────────────────────────────────────────────────────
   Forms (light normalization you were relying on)
   ───────────────────────────────────────────────────────── */

button, input, select, textarea{ font: inherit; color: inherit; }
button,
input[type="button"],
input[type="reset"],
input[type="submit"]{ cursor: pointer; }

fieldset{
  border:1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding:.6em .8em .9em;
}
legend{ padding:0 .25em; font-weight:700; }

/* Utilities */
.hidden{ display:none !important; }
.muted{ color: var(--muted); }