/* ============================================
   PAYROLL ACCOUNTING GUIDE - SCREEN STYLES
   ============================================ */

/* ===== 1. DESIGN TOKENS / CSS VARIABLES ===== */
:root {
  /* Base colors */
  --text: #161616;
  --bg: #ffffff;
  --muted: #6b7280;
  --accent: #0f62fe;
  --maxw: 81ch; /* Increased by 12.5% from 72ch */

  /* Brand tokens - Dapt colors */
  --color-primary: #371B76;   /* Dapt Primary */
  --color-secondary: #20ABAD; /* Dapt Secondary */
  --color-highlight: #F7E64B; /* Dapt Highlight */

  /* Light neutrals tuned for calm look */
  --ink-900: #1E1B2A;          /* body text */
  --ink-700: #3B3850;          /* muted text */
  --ink-500: #6E6B86;          /* captions/help */
  --line-300: #E9E7F2;         /* subtle borders (tinted by primary) */
  --line-200: #F3F2F8;         /* header/zebra bg */
  --bg-100: #FFFFFF;           /* card/table surface */
  --bg-050: #FBFAFF;           /* very subtle tint */

  /* Spacing & Effects */
  --radius: 14px;
  --shadow: 0 2px 10px rgba(23,16,58,.06);
  --pad-y: .65rem;
  --pad-x: .9rem;

  /* Typography */
  --font-body: "Questrial", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Quattrocento", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-condensed: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: var(--font-body);
  --tabular: tabular-nums lining-nums;
}

/* ===== 2. BASE STYLES ===== */
html, body {
  background: var(--bg);
  color: var(--text);
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ===== 3. LAYOUT ===== */
header, footer, nav, main {
  padding: 1.25rem;
}

main {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ===== 4. HEADER ===== */
header h1 {
  margin: 0.5rem 0 0;
  font-family: var(--font-heading);
  /* Visually hidden for SEO but kept in HTML */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Cover navigation */
nav[aria-label="Cover"] {
  text-align: center;
  margin: 1rem 0;
  padding: 0.5rem;
}

nav[aria-label="Cover"] a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

nav[aria-label="Cover"] a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* ===== 5. TABLE OF CONTENTS ===== */
/* TOC: visual upgrade (no HTML changes required) */
nav#toc {
  max-width: var(--maxw);
  margin: 0 auto 2rem;
  counter-reset: toc-section-counter;
}

/* Card container */
nav#toc.toc {
  background: var(--bg-100);
  border: 1px solid var(--line-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1rem 1.1rem;
}

/* Base list + spacing */
nav#toc ul,
nav#toc ol {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

nav#toc .toc-l1 > li {
  margin: .65rem 0 .65rem;
  padding: .15rem 0 .45rem;
  border-top: 1px solid var(--line-300);
}

nav#toc .toc-l1 > li:first-child {
  border-top: 0;
}

/* TOC Counter - Reset subsection counter at each main section (excluding front-matter) */
nav#toc ul.toc-l1 > li:not(.toc-front-matter) {
  counter-reset: toc-subsection-counter;
}

/* TOC Counter - Reset subsection counter for numbered sections with subsections */
nav#toc ul.toc-l1 > li:not(.toc-front-matter) > ul {
  counter-reset: toc-subsection-counter;
}

/* Links: calmer color, better hit-area */
nav#toc a {
  display: inline-block;
  text-decoration: none;
  color: var(--ink-900);
  line-height: 1.5;
  padding: .35rem .5rem;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

nav#toc a:hover {
  background: #F4FBFB;
  text-decoration: none;
}

/* Front-matter tone */
nav#toc li.toc-front-matter > a {
  font-weight: 600;
  color: var(--ink-700);
}

/* TOC Counter - Number main sections (excluding front-matter) with badge styling */
nav#toc ul.toc-l1 > li:not(.toc-front-matter) > a::before {
  counter-increment: toc-section-counter;
  content: counter(toc-section-counter);
  display: inline-block;
  background: var(--line-200);
  color: var(--color-primary);
  border: 1px solid var(--line-300);
  border-radius: 999px;
  padding: .1rem .5rem;
  margin-right: .55rem;
  min-width: 2.2ch;
  text-align: center;
  font-family: var(--font-condensed);
  font-weight: 600;
}

/* TOC Counter - Number subsections (H3 items under numbered sections only) */
nav#toc ul.toc-l1 > li:not(.toc-front-matter) ul.toc-l2 > li > a::before {
  counter-increment: toc-subsection-counter;
  content: counter(toc-section-counter) "." counter(toc-subsection-counter) " ";
  font-weight: 600;
}

/* TOC Counter - Subsections under front-matter sections (no numbering) */
nav#toc ul.toc-l1 > li.toc-front-matter ul.toc-l2 > li > a::before {
  content: none;
}

/* TOC Counter - Front-matter sections (no numbering) */
nav#toc li.toc-front-matter > a::before {
  content: none;
}

/* Subsection list: accent rail + tighter spacing */
nav#toc .toc-l2 {
  margin-top: .4rem;
  padding-left: .85rem;
  border-left: 3px solid color-mix(in oklab, var(--color-secondary), white 20%);
}

nav#toc .toc-l2 > li {
  margin: .28rem 0;
}

nav#toc .toc-l2 a {
  color: var(--ink-700);
  font-size: .96rem;
  padding: .25rem .35rem;
}

/* Active state (add .is-active via your scroll spy if you use one) */
nav#toc a.is-active {
  background: #F4FBFB;
  border-left: 4px solid var(--color-secondary);
  padding-left: .6rem;
}

/* Optional: subtle caret for parents with children */
nav#toc .toc-l1 > li > ul.toc-l2 {
  position: relative;
}

nav#toc .toc-l1 > li > a + ul.toc-l2::before {
  content: "›";
  position: absolute;
  left: -1.05rem;
  top: .15rem;
  color: var(--ink-500);
  font-family: var(--font-condensed);
}


/* Slightly larger hit-area on touch devices */
@media (hover: none) {
  nav#toc a {
    padding: .5rem .6rem;
  }
  nav#toc .toc-l2 a {
    padding: .4rem .45rem;
  }
}

/* ===== 6. TYPOGRAPHY ===== */
/* Headings use Quattrocento, except H4 uses Roboto Condensed for section headers */
article#book h1,
article#book h2,
article#book h3,
article#book h5,
article#book h6 {
  font-family: var(--font-heading);
}

/* H3 styling - more prominent than H4 */
article#book h3 {
  font-size: 1.5rem;
  color: var(--ink-900);
  margin: 1.75rem 0 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

/* H4 headings use Roboto Condensed for compact section headers - less prominent than H3 */
article#book h4 {
  font-family: var(--font-condensed);
  font-size: 1.1rem;
  color: var(--color-primary);
  margin: 1.25rem 0 0.25rem;
  letter-spacing: 0.2px;
  font-weight: 600;
  line-height: 1.4;
}

/* Liability group descriptions (paragraph after H4) */
article#book h4 + p {
  color: var(--ink-700);
  margin: 0.25rem 0 0.6rem;
}

/* Heading links (automatic anchors) */
.heading-link {
  text-decoration: none;
  color: inherit;
}

/* Bold text styling */
strong,
b {
  font-weight: 600;
}

/* ===== 7. CSS COUNTERS FOR AUTOMATIC SECTION NUMBERING ===== */
article#book {
  counter-reset: section-counter subsection-counter;
}

/* Reset subsection counter at each main section (except front-matter) */
article#book h2:not(.front-matter) {
  counter-reset: subsection-counter;
}

/* Number main sections (H2) - exclude front-matter, start from Introduction */
article#book h2:not(.front-matter) {
  counter-increment: section-counter;
}

article#book h2:not(.front-matter)::before {
  content: counter(section-counter) ". ";
  font-weight: 600;
}

/* Number subsections (H3) - only those following numbered H2 sections */
article#book h2:not(.front-matter) ~ h3 {
  counter-increment: subsection-counter;
}

article#book h2:not(.front-matter) ~ h3::before {
  content: counter(section-counter) "." counter(subsection-counter) " ";
  font-weight: 600;
}

/* Front-matter sections (About This Guide, Executive Summary) - no numbering */
article#book h2.front-matter::before {
  content: none;
}

/* Subsections under front-matter sections - no numbering or increment */
article#book h2.front-matter ~ h3::before {
  content: none;
}

/* ===== 8. TABLES (Dapt Table Styles) ===== */
/* Table wrapper */
.table-wrap {
  margin: 1.25rem 0 1.75rem;
  background: var(--bg-100);
  border: 1px solid var(--line-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden; /* clips sticky header glow */
}

.table-wrap[data-scroll="auto"] {
  overflow-x: auto;
}

/* Fallback: plain tables get styled automatically (no wrapper needed) */
table {
  margin: 1.25rem 0 1.75rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto; /* Let content determine column widths */
}

/* Table core */
.table,
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: var(--font-condensed);
  color: var(--ink-900);
  background: var(--bg-100);
  table-layout: auto; /* Let content determine column widths for better balance */
}

/* Table captions */
.table caption,
table caption {
  text-align: left;
  padding: 0.85rem var(--pad-x);
  font-weight: 600;
  color: var(--ink-700);
}

/* Table headers */
.table thead th,
table thead th {
  position: sticky;
  top: 0;
  background: var(--line-200);
  color: var(--ink-900);
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  border-bottom: 1px solid var(--line-300);
  padding: .7rem var(--pad-x);
  white-space: normal; /* Allow wrapping for long headers */
}

/* Brand accent rail on header-left */
.table thead th:first-child,
table thead th:first-child {
  border-left: 4px solid var(--color-primary);
}

/* Table body cells */
.table tbody td,
table tbody td {
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid var(--line-300);
  vertical-align: top;
  font-variant-numeric: var(--tabular);
}

/* Zebra striping for readability */
.table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) {
  background: var(--bg-050);
}

/* Totals / emphasis rows */
.table tfoot td,
.table .is-total td,
table tfoot td,
table .is-total td {
  font-weight: 600;
  color: var(--ink-900);
  background: #FFFCE6; /* softened highlight */
  border-top: 2px solid #F0EAA5;
}

/* Alignment helpers */
.table .num,
table .num {
  text-align: right;
}

.table .center,
table .center {
  text-align: center;
}

/* Cell notes - small annotations inside cells */
.cell-note {
  display: block;
  margin-top: .25rem;
  font-size: .85em;
  color: var(--ink-500);
}

/* Table modifiers */
.table--compact {
  font-family: var(--font-condensed);
}

/* Target tables that follow H4 headings (liability sections) */
h4 + p + table,
h4 + p + div.table-wrap > table {
  font-family: var(--font-condensed);
}

h4 + p + table th,
h4 + p + table td,
h4 + p + div.table-wrap > table th,
h4 + p + div.table-wrap > table td {
  font-family: var(--font-condensed);
}

h4 + p + table thead th {
  font-weight: 600;
}

.table--compact td,
.table--compact th {
  padding: .5rem .65rem;
  font-family: var(--font-condensed);
}

.table--compact thead th {
  font-weight: 600;
  font-family: var(--font-condensed);
}

.table--compact tbody td {
  font-family: var(--font-condensed);
}

/* Compact table styling - smaller font, condensed sans-serif */
.table-compact {
  font-size: 0.875rem;
  font-family: var(--font-condensed);
  font-stretch: condensed;
}

.table-compact th,
.table-compact td {
  padding: 0.5rem 0.65rem;
  line-height: 1.4;
}

.table-compact thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 0.65rem;
}

/* Column width control - only apply to tables with fixed layout */
/* Most tables use auto layout to balance based on content */

/* For tables that need specific column widths, use table-layout: fixed and set widths */
table th,
table td {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Column width control for 3-column liability tables - use fixed layout for these specific tables */
h4 + p + table,
h4 + p + div.table-wrap > table {
  table-layout: fixed;
}

h4 + p + table thead th:nth-child(1),
h4 + p + table tbody td:nth-child(1),
h4 + p + div.table-wrap > table thead th:nth-child(1),
h4 + p + div.table-wrap > table tbody td:nth-child(1) {
  width: 35%; /* Accrual Event - more room */
}

h4 + p + table thead th:nth-child(2),
h4 + p + table tbody td:nth-child(2),
h4 + p + div.table-wrap > table thead th:nth-child(2),
h4 + p + div.table-wrap > table tbody td:nth-child(2) {
  width: 35%; /* Clearing Event - more room */
  white-space: normal;
  word-wrap: break-word;
}

h4 + p + table thead th:nth-child(3),
h4 + p + table tbody td:nth-child(3),
h4 + p + div.table-wrap > table thead th:nth-child(3),
h4 + p + div.table-wrap > table tbody td:nth-child(3) {
  width: 30%; /* Typical Timing - less room */
}

/* Table keyboard focus */
.table-wrap:focus-within {
  outline: 3px solid color-mix(in oklab, var(--color-secondary), white 70%);
  outline-offset: 2px;
}

/* ===== 9. FIGURES AND ASIDES ===== */
figure {
  margin: 1.25rem 0;
}

figcaption {
  color: #667085;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

aside {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  background: #f7fbff;
  border: 1px solid #dde9ff;
  border-radius: 8px;
}

/* Blockquote styling for notes */
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #F8F9FA;
  border-left: 4px solid var(--color-secondary);
  border-radius: 4px;
  color: var(--ink-700);
  font-style: normal;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

blockquote p {
  margin: 0.5rem 0;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote ul,
blockquote ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

/* Notes / callouts below tables */
.note {
  margin: .75rem 0 0;
  padding: .65rem .8rem;
  border-left: 3px solid var(--color-secondary);
  background: #F4FBFB;
  color: var(--ink-700);
  border-radius: 8px;
}

/* ===== 10. CODE ===== */
pre, code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ===== 11. DOCUMENT FOOTER ===== */
article#book .document-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-300);
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-700);
  line-height: 1.6;
}

article#book .document-footer p {
  margin: 0.5rem 0;
}

article#book .document-footer em {
  font-style: normal;
  color: var(--ink-900);
}

article#book .document-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

article#book .document-footer a:hover {
  text-decoration: underline;
}

/* ===== 12. PRINT STYLES (for tables) ===== */
@media print {
  .table-wrap {
    box-shadow: none;
    border-color: #BBB;
  }

  table {
    box-shadow: none;
    border-color: #BBB;
  }

  .table thead th,
  table thead th {
    background: #EFEFF6 !important;
    -webkit-print-color-adjust: exact;
  }

  .table tfoot td,
  .table .is-total td,
  table tfoot td,
  table .is-total td {
    background: #FFF8B8 !important;
    -webkit-print-color-adjust: exact;
  }
}