:root
{
  /* Type */
  --font-body: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Arabic", "Noto Sans", sans-serif;
  --font-table: Verdana, Arial, sans-serif;
  --fs-body: 12pt;
  /* was 9 -- too small */
  --fs-small: 12pt;
  --fs-table: 11pt;

  /* Color */
  --c-text: #000;
  /* black */
  --c-muted: #333;
  --c-accent: #06c;
  --c-surface: ivory; 
  /* handles header, footer */
  --c-border: #999;
  --c-link: #06c;

  /* Spacing */
  --space-1: 6px;
  --space-2: 9px;
  --space-3: 12px;
  --space-4: 16px;
  --gutter: 0.25in;

  /* Layout */
  --page-max: 1100px;
  --sidebar-basis: 18rem;
  --sidebar-max: 22%;
  --content-min: 18rem;

  /* Components */
  --donations-border: 1px solid var(--c-border);
  --donations-pad: 8px;
  --donations-w-sm: 400px;
  --donations-w-md: 450px;
  --donations-w-lg: 720px;
}

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

body{
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-body);
}

/* External stylesheet likely defines these; we provide sane defaults */
#header{
  width: 100%;
  background: var(--c-surface);
  padding: var(--space-3);
}

#footer{
  width: 100%;
  background: var(--c-surface);
  padding: var(--space-3);
}

td{
  font-family: var(--font-table);
  font-size: var(--fs-table);
}

/* Make images responsive */
#main .image,
#main .infographic{
  width: 100%;
  height: auto;
}

#main .figure_label{
  color: var(--c-accent);
  font-style: italic;
}

/* Your old table offset, converted to logical */
#main .table{
  margin-inline-start: 100px;
}

/* Donations block */
#main .donations{
  border: var(--donations-border);
  padding: var(--donations-pad);
  text-align: start;  /* start = right in RTL */
}

/* Prompts: logical indents so RTL/LTR work */
#main .h1_prompt { margin-inline-start: 0.75in; }
#main .li_prompt { margin-inline-start: 2px; margin-inline-end: 12px; }
#main .p_prompt  { margin-inline-start: 12px; margin-inline-end: 12px; }

/* ---------- layout (flexbox) ---------- */
/* IMPORTANT: only the top-level .row containers become flex.
   There is also a .row inside #main — we leave that alone. */
body > .row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;

  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* The inner .row inside #main should behave like a normal block container */
#main .row{ display: block; }

/* In RTL, you generally want sidebar on the right.
   row-reverse places the first item (#sidebar) on the right visually. */
  #header + .row{
  flex-direction: row;
}

#sidebar{
  flex: 0 1 min(var(--sidebar-max), var(--sidebar-basis));
  min-width: 14rem;
}

#main{
  flex: 1 1 var(--content-min);
  min-width: 0; /* prevents overflow with long links/words */
}

/* Sidebar typography (mirrors your original intent) */
#sidebar h2{ color: var(--c-accent); font-size: 16pt; margin-block: var(--space-2); }
#sidebar a{ color: var(--c-text); }
#sidebar p a{ color: var(--c-link); }
#sidebar p{ color: var(--c-accent); font-size: var(--fs-small); }
#sidebar .toc_sublevel{ font-size: var(--fs-small); margin-inline-start: var(--space-2); }
#sidebar .toc_sublevel a{ color: var(--c-text); }

/* Main text defaults */
#main p,
#main li{
  font-size: var(--fs-body);
  margin-inline: 0;
  text-align: start;
}

#main h2{
  margin-inline: 0;
  text-align: start;
  color: var(--c-accent);
}

/* ---------- responsive ---------- */
/* Small screens */
@media (max-width: 599px){
  body > .row{
    gap: var(--space-3);
    padding-inline: var(--space-2);
  }

  /* Stack: sidebar above main (still RTL-friendly) */
  #header + .row{
    flex-direction: column;
  }

  #sidebar,
  #main{
    flex: 1 1 auto;
    width: 100%;
  }

  /* Preserve your “gutter on the left” idea using logical properties */
  #main p{
    margin-inline-start: 1in;
    margin-inline-end: 0;
  }

  #main li{
    margin-inline-start: 0.1in;
    margin-inline-end: 0;
  }

  #main .table{
    margin-inline-start: 0;
  }

  #main .donations{
    width: min(100%, var(--donations-w-sm));
  }
}

/* Medium (tablet-ish) */
@media (min-width: 768px) and (max-width: 991px){
  #main .table{ margin-inline-start: 0; }
  #main .donations{ width: min(100%, var(--donations-w-md)); }
}

/* Large */
@media (min-width: 992px) and (max-width: 1199px){
  #main .table{ margin-inline-start: 0; }
  #main .donations{ width: min(100%, var(--donations-w-lg)); }
}

/* XL */
@media (min-width: 1200px){
  #main .table{ margin-inline-start: 0; }
  #main .donations{ width: 100%; }
}