/* ==========================================================================
   Design Tokens & CSS Variables
   ========================================================================== */
:root {
  --text: #000;
  --bg: #fff;
  --muted: #555;
  --table-border: #000;
  --header-bg: #f7f7f7;
  --font-serif: "Georgia", Times, serif;
  --font-mono: "Courier New", Courier, monospace;
}

/* ==========================================================================
   Base Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
}

body {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.3;
  padding: 0.25in;
}

/* ==========================================================================
   Typography & Inline Elements
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1.00em;
  margin-bottom: 0.5em;
  font-weight: bold;
}

h1 { font-size: 1.75em; } 
h2 { font-size: 1.60em; } 
h3 { font-size: 1.45em; } 
h4 { font-size: 1.30em; } 
h5 { font-size: 1.15em; }
h6 { font-size: 1.00em; }

p {
  margin: 0.75em 0;
}

small,
.muted {
  color: var(--muted);
}

hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 1em 0;
}

a {
  color: blue;
  text-decoration: underline;
}

a:visited {
  color: inherit;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

tt {
  color: navy;
}

/* ==========================================================================
   Layout & Block Structures
   ========================================================================== */
#toc { 
  border: 1px solid #000;
  margin: 0 auto;
  padding: 10px;
  width: 95%;
}

#toc .level2 { margin-left: 1em; } 
#toc .level3 { margin-left: 2em; } 
#toc .level4 { margin-left: 3em; } 
#toc .level5 { margin-left: 4em; } 
#toc .level6 { margin-left: 5em; }

.history {
  width: 96%;
  margin: 0 2%;
}

/* ==========================================================================
   Tables
   ========================================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--table-border);
  margin: 1em 0;
}

table p {
  padding: 0;
  margin: 0;
}

caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: 0.5em;
}

th,
td {
  border: 1px solid #999;
  text-align: left;
  vertical-align: top;
}

thead th {
  background: var(--header-bg);
  border-bottom: 2px solid var(--table-border);
  padding: 8px 12px;
}

tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid #ddd;
}

tbody tr:hover {
  background: #f9f9f9; /* subtle highlight on hover */
}

tfoot td {
  padding: 8px 12px;
  border-top: 2px solid var(--table-border);
}

/* ==========================================================================
   Code & Preformatted Text
   ========================================================================== */
pre { 
  font-family: var(--font-mono);
  font-size: 0.85em;
  margin: 0 auto;
  border: 1px dashed #000;
  padding: 7px;
  width: 98%;
  background-color: #fff;
}

.term {
  font-family: var(--font-mono);
  background-color: #ccc;
}

.code {
  font-family: var(--font-mono);
  background-color: #ccffcc;
}

/* ==========================================================================
   Interactive & Utility Classes
   ========================================================================== */
.id {
  color: blue;
  text-decoration: none;
  padding: 0;
}

.rf { 
  color: black;
  text-decoration: underline;
  text-decoration-color: blue;
  padding: 0;
}

.brf { 
  color: black;
  text-decoration: underline;
  text-decoration-color: red;
  padding: 0;
}

.malign {
  vertical-align: middle;
}

.edit {
  color: #ec7000;
  background-color: #fff0e1;
  font-size: calc(6px + 0.5vw);
  border: 1px solid #dfd0c1;
  padding: 1px;
  border-radius: 4px;
  text-decoration: none;
}

.edit:visited,
.edit:active {
  color: #ec7000;
  background-color: #fff0e1;
}

.edit:hover {
  color: #fff0e1;
  background-color: #ec7000;
}

/* ==========================================================================
   Summary Headings Styling
   ========================================================================== */
summary h1,
summary h2,
summary h3,
summary h4,
summary h5,
summary h6 {
  display: inline;
  margin: 0;
  padding: 0;
  border-bottom: none;
}