/* ===== Base & layout ===== */
:root{
  --mx: clamp(14px, 3vw, 22px);
  --w: min(1100px, 96vw);
  --radius: 12px;
  --ink: black;            /* typing text color */
  --muted:#607089;
  --row-blue:#183BFF;      /* blue rows */
  --row-odd: rgba(255,255,255,.05); /* subtle dark row */
  --thead-red:#d32f2f;     /* header red */
  --safe-pad: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
}

*{box-sizing:border-box; min-width:0}
html{scroll-behavior:smooth}
html,body{max-width:100%; overflow-x:clip}
body{
  margin:0; line-height:1.75; color:var(--ink);
  -webkit-text-size-adjust:100%;
  background:#f0f2f2; /* backdrop */
}

img,svg,video{max-width:100%;height:auto;display:block}
.container{
  max-width:var(--w);
  margin-inline:auto;
  padding:20px var(--safe-pad);
}

.page-wrap{
  display:grid;
  grid-template-columns:1.6fr .8fr;
  gap:24px;
  align-items:start;
  margin-top:20px;
}
@media (max-width:900px){ .page-wrap{grid-template-columns:1fr} }

.card{padding:20px;background:transparent}
.meta{font-size:.9rem;opacity:.75;margin-bottom:8px}

/* ----- TOC: clean, responsive ----- */
.toc{
  background: rgba(0,0,0,.04);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 0;
}
.toc strong{ display:block; margin-bottom:.5rem; }
.toc ol{
  display:block; list-style: decimal; list-style-position: outside;
  margin:.25rem 0 0; padding:0; padding-inline-end:1.6rem;
}
.toc li{ display:list-item; margin:.35rem 0; line-height:1.9; break-inside:avoid; }
.toc a{ display:block; padding:.2rem .4rem; border-radius:8px; color:inherit; text-decoration:none; }
.toc a:hover{ background: rgba(255,255,255,.07); text-decoration:none; }
.toc [dir="ltr"]{ unicode-bidi:isolate; direction:ltr; }
@media (min-width:900px){ .toc ol{ columns:2; column-gap:24px; } }

/* ===== Badges & notes ===== */
.badge{background:#e9eef9;color:#0b1220;padding:.25rem .6rem;border-radius:999px;font-size:.8rem}
.note{background:#fff3cd;border:1px solid #ffe08a;color:#3a3a00;padding:12px;border-radius:var(--radius);margin:16px 0}
.ok{background:#e7f6ef;border:1px solid #bfe7d3}
.warn{background:#fff1f1;border:1px solid #ffd1d1;color:#111}

.example{
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:var(--radius);
  padding:12px;margin:12px 0;color:#000;
}
.chip{display:inline-block;background:#eef6ff;color:#0b1220;padding:.2rem .5rem;border-radius:999px;margin:.15rem 0;font-size:.85rem}

/* ===== Lists inside article ===== */
article ul:not(.toc), article ol{ list-style-position:outside; margin:0 0 1rem; line-height:1.95; }
[dir="rtl"] article ul:not(.toc), [dir="rtl"] article ol{ padding-inline-end:1.6rem; padding-inline-start:0; }
[dir="rtl"] article ol{ padding-inline-end:2rem; }
article li{ margin:.5rem 0; padding-inline-end:.5rem }
article li::marker{ color:#9bb0d1; font-size:.9em }
article [dir="ltr"]{ unicode-bidi:isolate; direction:ltr }
article li .example{ display:inline-block; padding:.3rem .6rem; border-radius:8px }
@media (max-width:700px){ article li .example{ display:block; margin-top:.35rem } }

/* ===== Tables (responsive, red header + blue zebra) ===== */
.table-wrap{
  overflow-x:auto;
  border-radius:var(--radius);
  -webkit-overflow-scrolling:touch;
  box-shadow: 0 0 0 1px blue inset; /* instead of border to avoid width overflow */
}
table.table{ width:100%; border-collapse:collapse; min-width:680px; }
.table th, .table td{
  padding:12px 12px; border-bottom:1px solid #2a3344; text-align:center; vertical-align:middle;
  white-space:nowrap; word-break:keep-all;
}
.table thead th{
  background:var(--thead-red); color:#fff; font-weight:700; position:sticky; top:0; z-index:1;
}
.table thead th:first-child{ border-top-left-radius:var(--radius) }
.table thead th:last-child{  border-top-right-radius:var(--radius) }
.table tbody tr:nth-child(odd){ background:var(--row-odd) }
.table tbody tr:nth-child(even){ background:var(--row-blue) }
.table tbody tr:nth-child(even) td, .table tbody tr:nth-child(even) th{ color:#fff }
.table tbody tr:hover{ filter:brightness(1.05) }
@media (max-width:700px){
  .table-wrap{ overflow-x:auto }
  table.table{ width:100%; min-width:0; table-layout:fixed }
  .table th, .table td{
    white-space:normal; word-break:break-word; overflow-wrap:anywhere; padding:12px 10px;
  }
  .table thead th{ position:static }
}

/* ===== Headings & text ===== */
article h1, article h2, article h3{ line-height:1.25; margin:1.2em 0 .6em }
article p{ margin:.7em 0; color:var(--ink) }
article small, .meta{ color:var(--muted) }
.meta{ color: green !important; opacity:1; }

/* ===== Sidebar spacing on mobile ===== */
aside .card{ margin-top:16px }

/* Better LTR inside RTL paragraphs */
:root{ --latin: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif; }
.ltr, [dir="ltr"]{
  direction:ltr; unicode-bidi:isolate; text-align:left; font-family: var(--latin);
}
.example[dir="ltr"]{
  display:inline-block; padding:.25rem .55rem; border-radius:8px;
  background:blue; color:#fff; border:1px solid #e5e7eb; line-height:1.3; margin:0 .2em;
}

/* First header (site header with nav) */
header.container{
  background:#ff6600; color:#fff; padding:10px 16px; border-radius:8px;
}

/* Second header (inside main.card) */
main.card > header{
  background:#51ADDA; color:#fff; padding:12px 16px; border-radius:8px;
}