/* Chaotic Good house style, applied site-wide over Bootstrap/Webpixels.
   Mirrors the PM Dash (core/pm_dash.html): grey stock, black ink, serif type, square ruled boxes.
   Mostly re-points Webpixels' --x-* variables; component rules below cover what variables can't.
   Stays unlayered so it beats Tailwind's layered utilities, which is why it avoids bare element colors. */

@import url("https://fonts.googleapis.com/css2?family=Linden+Hill:ital@0;1&display=swap");

@font-face {
  font-family: "Chaotic Good";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ChaoticGood-Bold.81ba8f4d6992.woff2") format("woff2");
}

:root,
[data-bs-theme=light] {
  --cg-bg: #e1e1e1;
  --cg-paper: #ebebeb;
  --cg-ink: #111111;
  --cg-muted: #5b5b5b;
  --cg-hair: #bcbcbc;
  --cg-red: #d9412b;
  --cg-yellow: #f2c230;
  --cg-green: #2e9e4f;
  --cg-blue: #2f6bd8;
  --cg-display: "Chaotic Good", "Linden Hill", Garamond, serif;
  --cg-serif: "Linden Hill", "Goudy Old Style", Garamond, "Times New Roman", serif;
  --cg-rule: 2.5px;

  --x-body-bg: var(--cg-bg);
  --x-body-bg-rgb: 225, 225, 225;
  --x-body-color: var(--cg-ink);
  --x-body-color-rgb: 17, 17, 17;
  --x-emphasis-color: var(--cg-ink);
  --x-heading-color: var(--cg-ink);
  --x-secondary-color: var(--cg-muted);
  --x-tertiary-color: var(--cg-muted);
  --x-secondary-bg: var(--cg-paper);
  --x-secondary-bg-rgb: 235, 235, 235;
  --x-tertiary-bg: var(--cg-paper);
  --x-tertiary-bg-rgb: 235, 235, 235;
  --x-light: var(--cg-paper);
  --x-light-rgb: 235, 235, 235;
  --x-white-rgb: 235, 235, 235;
  --x-body-font-family: var(--cg-serif);
  --x-body-font-size: 1.0625rem;
  --x-body-line-height: 1.45;
  --x-link-color: var(--cg-ink);
  --x-link-hover-color: var(--cg-ink);
  --x-link-hover-decoration: underline;
  --x-border-color: var(--cg-ink);
  --x-border-color-translucent: var(--cg-hair);
  --x-border-radius: 0;
  --x-border-radius-sm: 0;
  --x-border-radius-lg: 0;
  --x-border-radius-xl: 0;
  --x-border-radius-xxl: 0;
  --x-box-shadow: none;
  --x-box-shadow-sm: none;
  --x-box-shadow-lg: none;
  --x-focus-ring-color: rgba(17, 17, 17, .35);

  --x-primary: var(--cg-ink);
  --x-primary-rgb: 17, 17, 17;
  --x-success: var(--cg-green);
  --x-success-rgb: 46, 158, 79;
  --x-danger: var(--cg-red);
  --x-danger-rgb: 217, 65, 43;
  --x-warning: var(--cg-yellow);
  --x-warning-rgb: 242, 194, 48;
  --x-info: var(--cg-blue);
  --x-info-rgb: 47, 107, 216;
  --x-red: var(--cg-red);
  --x-green: var(--cg-green);
  --x-yellow: var(--cg-yellow);
  --x-blue: var(--cg-blue);
  --x-form-valid-color: var(--cg-green);
  --x-form-valid-border-color: var(--cg-green);
  --x-form-invalid-color: var(--cg-red);
  --x-form-invalid-border-color: var(--cg-red);
}

body {
  background: var(--cg-bg);
  font-family: var(--cg-serif);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Type: Chaotic Good Bold for headings and titles only; everything else in Linden Hill. */
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--cg-serif); font-weight: 400; }
/* h1-h3 keep the display face even when a size class like .h5 shrinks them. */
h1, h2, h3, h1[class], h2[class], h3[class], .h1, .h2, .h3, .card-title, .modal-title, .display-1, .display-2, .display-3, .display-4 {
  font-family: var(--cg-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
/* List pages title themselves in the card header; give that the PM Dash masthead weight. */
.card-header > h2.card-title { font-size: 1.75rem; line-height: 1; }
b, strong, .fw-bold, .fw-semibold, .fw-bolder { font-weight: 400; }
small, .small, .text-xs, .text-sm { letter-spacing: .02em; }

/* Small caps-style labels: table heads, form labels, sidebar section labels. */
.table > thead th,
.form-label,
.sidebar .text-xs {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cg-ink);
  font-weight: 400;
}

/* White surfaces become paper. */
.bg-body, .bg-body-tertiary, .bg-body-secondary { background-color: var(--cg-bg) !important; }
.bg-white, .bg-light { background-color: var(--cg-paper) !important; }
.bg-white-hover:hover { background-color: var(--cg-bg) !important; }
.shadow, .shadow-sm, .shadow-lg, .shadow-1, .shadow-el-1 { box-shadow: none !important; }
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-top, .rounded-bottom { border-radius: 0 !important; }

/* Ruled boxes. */
.card {
  --x-card-bg: var(--cg-bg);
  --x-card-border-width: var(--cg-rule);
  --x-card-border-color: var(--cg-ink);
  --x-card-box-shadow: none;
  --x-card-cap-bg: transparent;
  box-shadow: none;
}
.card-header { border-bottom: 1.5px solid var(--cg-ink); }
.card-footer { border-top: 1.5px solid var(--cg-ink); }

/* Buttons are folder tabs: square, ink-ruled, uppercase, inverted when primary or active. */
.btn {
  --x-btn-font-family: var(--cg-serif);
  --x-btn-font-weight: 400;
  --x-btn-font-size: .8125rem;
  --x-btn-border-width: 2px;
  --x-btn-box-shadow: none;
  --x-btn-focus-box-shadow: 0 0 0 2px var(--cg-bg), 0 0 0 4px var(--cg-ink);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.btn-sm, .btn-xs { --x-btn-font-size: .75rem; letter-spacing: .12em; }
.btn-neutral, .btn-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-white {
  --x-btn-color: var(--cg-ink);
  --x-btn-bg: var(--cg-bg);
  --x-btn-border-color: var(--cg-ink);
  --x-btn-hover-color: var(--cg-ink);
  --x-btn-hover-bg: var(--cg-paper);
  --x-btn-hover-border-color: var(--cg-ink);
  --x-btn-active-color: var(--cg-bg);
  --x-btn-active-bg: var(--cg-ink);
  --x-btn-active-border-color: var(--cg-ink);
  --x-btn-disabled-color: var(--cg-muted);
  --x-btn-disabled-bg: var(--cg-bg);
  --x-btn-disabled-border-color: var(--cg-hair);
}
.btn-primary, .btn-dark {
  --x-btn-color: var(--cg-bg);
  --x-btn-bg: var(--cg-ink);
  --x-btn-border-color: var(--cg-ink);
  --x-btn-hover-color: var(--cg-ink);
  --x-btn-hover-bg: var(--cg-paper);
  --x-btn-hover-border-color: var(--cg-ink);
  --x-btn-active-color: var(--cg-bg);
  --x-btn-active-bg: var(--cg-ink);
  --x-btn-active-border-color: var(--cg-ink);
  --x-btn-disabled-color: var(--cg-bg);
  --x-btn-disabled-bg: var(--cg-muted);
  --x-btn-disabled-border-color: var(--cg-muted);
}
.btn-danger, .btn-outline-danger {
  --x-btn-color: var(--cg-red);
  --x-btn-bg: var(--cg-bg);
  --x-btn-border-color: var(--cg-red);
  --x-btn-hover-color: var(--cg-bg);
  --x-btn-hover-bg: var(--cg-red);
  --x-btn-hover-border-color: var(--cg-red);
  --x-btn-active-color: var(--cg-bg);
  --x-btn-active-bg: var(--cg-red);
  --x-btn-active-border-color: var(--cg-red);
}
.btn-success, .btn-outline-success {
  --x-btn-color: var(--cg-bg);
  --x-btn-bg: var(--cg-green);
  --x-btn-border-color: var(--cg-ink);
  --x-btn-hover-color: var(--cg-bg);
  --x-btn-hover-bg: var(--cg-ink);
  --x-btn-hover-border-color: var(--cg-ink);
}
.btn-check:checked + .btn, .btn.active { --x-btn-active-color: var(--cg-bg); --x-btn-active-bg: var(--cg-ink); --x-btn-active-border-color: var(--cg-ink); }

/* Inputs: ink-ruled, square, serif; italic placeholders. */
.form-control, .form-select, .input-group-text {
  background-color: var(--cg-bg);
  color: var(--cg-ink);
  border: 2px solid var(--cg-ink);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--cg-serif);
}
.form-control:focus, .form-select:focus {
  background-color: var(--cg-paper);
  border-color: var(--cg-ink);
  box-shadow: none;
  outline: 2px dashed var(--cg-ink);
  outline-offset: 3px;
}
.form-control::placeholder { color: var(--cg-muted); font-style: italic; }
.form-check-input { border: 2px solid var(--cg-ink); border-radius: 0; background-color: var(--cg-bg); }
.form-check-input:checked { background-color: var(--cg-ink); border-color: var(--cg-ink); }
.form-switch .form-check-input { border-radius: 2em; }

/* Tables: one ruled list, ink lines, paper on hover. */
.table {
  --x-table-color: var(--cg-ink);
  --x-table-bg: transparent;
  --x-table-border-color: var(--cg-ink);
  --x-table-striped-color: var(--cg-ink);
  --x-table-striped-bg: rgba(17, 17, 17, .03);
  --x-table-hover-color: var(--cg-ink);
  --x-table-hover-bg: var(--cg-paper);
  --x-table-active-bg: var(--cg-paper);
}
.table > thead { border-bottom: 2px solid var(--cg-ink); }
.table > :not(caption) > * > * { border-bottom-width: 1px; }
.table-light { --x-table-bg: var(--cg-paper); --x-table-color: var(--cg-ink); --x-table-border-color: var(--cg-ink); }

/* Badges become square uppercase tags; status colors stay as fills. */
.badge {
  --x-badge-font-weight: 400;
  --x-badge-border-radius: 0;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rounded-pill.badge { border-radius: 0 !important; }
.text-bg-primary, .bg-primary { background-color: var(--cg-ink) !important; color: var(--cg-bg) !important; }
.text-bg-secondary, .bg-secondary { background-color: var(--cg-muted) !important; color: var(--cg-bg) !important; }
.text-bg-light, .badge.bg-light { color: var(--cg-ink) !important; border: 1.5px solid var(--cg-ink); }

/* Overlays: modals, dropdowns, popovers, alerts, toasts. */
.modal {
  --x-modal-bg: var(--cg-bg);
  --x-modal-border-color: var(--cg-ink);
  --x-modal-border-width: var(--cg-rule);
  --x-modal-box-shadow: none;
  --x-modal-header-border-color: var(--cg-ink);
  --x-modal-footer-border-color: var(--cg-ink);
}
.dropdown-menu {
  --x-dropdown-bg: var(--cg-paper);
  --x-dropdown-border-color: var(--cg-ink);
  --x-dropdown-border-width: 2px;
  --x-dropdown-box-shadow: none;
  --x-dropdown-link-hover-bg: var(--cg-bg);
  --x-dropdown-link-active-bg: var(--cg-ink);
  --x-dropdown-link-active-color: var(--cg-bg);
}
.popover {
  --x-popover-bg: var(--cg-paper);
  --x-popover-border-color: var(--cg-ink);
  --x-popover-border-width: 2px;
  --x-popover-border-radius: 0;
  --x-popover-box-shadow: none;
  font-family: var(--cg-serif);
}
.tooltip { font-family: var(--cg-serif); }
.alert { --x-alert-border-radius: 0; border-width: 2px; background-color: var(--cg-paper); color: var(--cg-ink); }
.toast { border: 2px solid var(--cg-ink); border-radius: 0; background-color: var(--cg-paper); box-shadow: none; }

/* Tabs, pills, pagination: folder tabs. */
.nav-tabs { --x-nav-tabs-border-width: 2px; --x-nav-tabs-border-color: var(--cg-ink); --x-nav-tabs-link-active-bg: var(--cg-ink); --x-nav-tabs-link-active-color: var(--cg-bg); --x-nav-tabs-link-active-border-color: var(--cg-ink); }
.nav-tabs .nav-link, .nav-pills .nav-link { letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; color: var(--cg-ink); }
.nav-pills { --x-nav-pills-link-active-bg: var(--cg-ink); --x-nav-pills-link-active-color: var(--cg-bg); }
.pagination {
  --x-pagination-color: var(--cg-ink);
  --x-pagination-bg: var(--cg-bg);
  --x-pagination-border-width: 2px;
  --x-pagination-border-color: var(--cg-ink);
  --x-pagination-hover-color: var(--cg-ink);
  --x-pagination-hover-bg: var(--cg-paper);
  --x-pagination-hover-border-color: var(--cg-ink);
  --x-pagination-active-color: var(--cg-bg);
  --x-pagination-active-bg: var(--cg-ink);
  --x-pagination-active-border-color: var(--cg-ink);
  --x-pagination-disabled-color: var(--cg-muted);
  --x-pagination-disabled-bg: var(--cg-bg);
  --x-pagination-disabled-border-color: var(--cg-hair);
}
.progress { border: 1.5px solid var(--cg-ink); border-radius: 0; background-color: var(--cg-paper); }
.progress-bar { background-color: var(--cg-ink); }

/* Sidebar: same grey stock, a rule on its edge, folder-style links. */
.sidebar {
  background-color: var(--cg-bg);
  border-right: var(--cg-rule) solid var(--cg-ink);
}
.sidebar .navbar-vertical-nav .nav-link {
  color: var(--cg-ink);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 0;
  padding: .45rem .75rem;
  gap: .6rem;
}
.sidebar .navbar-vertical-nav .nav-link:hover { background-color: var(--cg-paper); border-color: var(--cg-ink); }
.sidebar .navbar-vertical-nav .nav-link[aria-current="page"] { background-color: var(--cg-ink); border-color: var(--cg-ink); color: var(--cg-bg); }
.sidebar .navbar-vertical-nav .nav-link.text-red-400 { color: var(--cg-red); }

/* ApexCharts: hairline grid and serif labels on the grey stock. */
.apexcharts-gridline, .apexcharts-xaxis-tick { stroke: var(--cg-hair); }
.apexcharts-xaxis line, .apexcharts-yaxis line { stroke: var(--cg-ink); }
.apexcharts-text, .apexcharts-legend-text, .apexcharts-tooltip, .apexcharts-xaxistooltip { font-family: var(--cg-serif) !important; }
.apexcharts-text { fill: var(--cg-muted); }
.apexcharts-tooltip.apexcharts-theme-light { background: var(--cg-paper) !important; border: 2px solid var(--cg-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--cg-bg) !important; border-bottom: 1.5px solid var(--cg-ink) !important; }

/* Focus: dashed ink outline, as on the PM Dash. */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px dashed var(--cg-ink);
  outline-offset: 3px;
  box-shadow: none;
}