/*  Canary — editorial-tech stylesheet.
    Palette + fonts from the "editorial" mockup (cream paper, burgundy
    accent, Source Serif 4 headings + Inter UI). Layout primitives from
    the "tech-modern" mockup (filter rail, hairline-separated rows,
    feature card with metadata aside). Loaded AFTER Bootstrap so it
    overrides Bootstrap's blues and rounded chunkiness — Bootstrap's
    grid utilities still work below this layer.

    See mockups/05_editorial_techlayout.html for the reference render.
*/

:root{
  --ink:#1a1814;
  --paper:#faf7f2;
  --paper-soft:#f3eee4;
  --paper-card:#ffffff;
  --rule:#e5e0d6;
  --rule-strong:#d2cabc;
  --muted:#7a716a;
  --accent:#7a2218;
  --accent-soft:#f6e9e6;
  --accent-tint:#fbf2ef;
  --success:#3a5a2b;
  --warn:#8c5e1d;
  --danger:#7a2218;
}

/* ── reset on Bootstrap defaults ────────────────────────────────── */
html, body{
  background: var(--paper) !important;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
  letter-spacing: -0.005em;
}
*, *::before, *::after{ box-sizing: border-box; }

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding-top:0 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.serif-it { font-family: "Source Serif 4", Georgia, serif; font-style: italic; }
.mono     { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings:"tnum"; }

a{ color: var(--accent); text-decoration:none; }
a:hover{ color: var(--ink); text-decoration:none; }

hr{ border:0; border-top:1px solid var(--rule); margin: 28px 0; }

code, kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--accent-tint);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 2px;
}

/* ── top bar / masthead ─────────────────────────────────────────── */
.navbar{
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule);
  box-shadow: none !important;
  min-height: 68px;
  padding: 12px 0;
}
.navbar > .container-fluid{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}
.navbar-brand{
  display:flex; align-items:center; gap:12px;
  font-family: "Source Serif 4", serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
.navbar-brand:hover{ color: var(--accent) !important; }
.navbar-brand .canary-mark{
  width: 32px; height: 32px;
  color: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}
.navbar-brand .canary-mark svg{ width:100%; height:100%; }
.navbar-brand .dot{
  display:inline-block; width:5px; height:5px;
  background: var(--accent); border-radius:50%;
  align-self:flex-end; margin-bottom:8px;
  animation: canary-pulse 2.4s ease-in-out infinite;
}
@keyframes canary-pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

.navbar-nav .nav-link{
  color: var(--muted) !important;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 14px !important;
  border-radius: 0;
  position: relative;
  border: none !important;
}
.navbar-nav .nav-link:hover{ color: var(--ink) !important; background: transparent !important; }
.navbar-nav .nav-link.active{
  color: var(--ink) !important; background: transparent !important;
}
.navbar-nav .nav-link.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-8px;
  height:1px; background: var(--accent);
}
.navbar-nav .dropdown-toggle::after{
  border: 0; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); margin-left: 6px; vertical-align: middle;
}

/* the dark "toolbar" strip the old template used — soften to a hairline */
.top-toolbar{
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  font-size: 13px;
}
.top-toolbar > .container-fluid{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}
.top-toolbar a{ color: var(--accent) !important; }
.top-toolbar .badge{
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-family: "Inter", sans-serif;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  border: 1px solid #ecd6d2;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0;
}

/* ── sidebar (the existing Bootstrap left rail) ─────────────────── */
.sidebar{
  background: var(--paper) !important;
  border-right: 1px solid var(--rule) !important;
  box-shadow: none !important;
  padding: 20px 16px !important;
  font-size: 14px;
}
.sidebar h4, .sidebar h5, .sidebar .nav-section{
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted) !important;
  font-weight: 600 !important;
  margin: 22px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.sidebar h4:first-child{ margin-top: 0; }
.sidebar .nav-link{
  color: var(--ink) !important;
  font-weight: 500;
  font-size: 14px;
  padding: 7px 8px !important;
  border-left: 0 !important;
  border-radius: 0;
  position: relative;
}
.sidebar .nav-link:hover{
  background: transparent !important;
  color: var(--accent) !important;
  border-left: 0 !important;
}
.sidebar .nav-link.active{
  background: transparent !important;
  color: var(--accent) !important;
  border-left: 0 !important;
  font-weight: 600;
}
.sidebar .nav-link.active::before{
  content:"›"; color: var(--accent); margin-right: 6px; font-weight: 700;
}

/* ── main content area ──────────────────────────────────────────── */
/* No sidebar → centre the column at a comfortable reading width.
   The admin layout (with sidebar) gets its own override below. */
.content{
  padding: 32px 48px !important;
  flex: 1;
  background: var(--paper);
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}
/* Admin pages use a Bootstrap two-column row inside .container-fluid;
   the right column .content there must NOT be max-width-constrained — it
   sits next to the sidebar and should take the rest of the row. */
.container-fluid > .row > main.content{
  max-width: none !important;
  margin: 0 !important;
}
.container, .container-fluid{ padding-left: 0; padding-right: 0; }
.container-fluid{ width: 100%; }
.container-fluid > .row{ margin-left: 0; margin-right: 0; }
.container-fluid > .row > .sidebar,
.container-fluid > .row > .content{ padding-left: 24px; padding-right: 24px; }

/* ── headings ───────────────────────────────────────────────────── */
.page-title, .display-1, .display-2, .display-3, .display-4{
  font-family: "Source Serif 4", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}
.page-title em, h1 em{ font-style: italic; color: var(--accent); font-weight: 400; }
.lead{
  color: var(--muted);
  font-size: 16.5px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  max-width: 720px;
}

/* ── buttons ────────────────────────────────────────────────────── */
.btn{
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em;
  border-radius: 2px !important;
  padding: 9px 18px !important;
  border-width: 1px !important;
  box-shadow: none !important;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-primary, .btn-info{
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
.btn-primary:hover, .btn-info:hover{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-secondary, .btn-default, .btn-light{
  background: transparent !important;
  border-color: var(--rule-strong) !important;
  color: var(--ink) !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover{
  background: var(--paper-soft) !important;
  border-color: var(--ink) !important;
  color: var(--accent) !important;
}
.btn-success{
  background: var(--success) !important; border-color: var(--success) !important; color: #fff !important;
}
.btn-danger, .btn-warning{
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
.btn-outline-primary{
  background: transparent !important; border-color: var(--ink) !important; color: var(--ink) !important;
}
.btn-link{ color: var(--accent) !important; text-decoration: none !important; }
.btn-link:hover{ color: var(--ink) !important; }
.btn-sm{ padding: 5px 12px !important; font-size: 12.5px !important; }
.btn-lg{ padding: 12px 22px !important; font-size: 15px !important; }

/* ── cards ──────────────────────────────────────────────────────── */
.card{
  background: var(--paper-card);
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.card-header{
  background: var(--paper-soft) !important;
  border-bottom: 1px solid var(--rule) !important;
  font-family: "Source Serif 4", serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  padding: 14px 18px !important;
  color: var(--ink) !important;
}
.card-header.bg-primary, .card-header.bg-info,
.card-header.bg-dark, .card-header.bg-success,
.card-header.bg-warning, .card-header.bg-danger{
  background: var(--paper-soft) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.card-header i{ color: var(--accent); }
.card-body{ padding: 20px 22px; color: var(--ink); }
.card-footer{
  background: var(--paper) !important;
  border-top: 1px solid var(--rule) !important;
  padding: 12px 22px;
}

/* ── tables ─────────────────────────────────────────────────────── */
.table{ color: var(--ink); font-size: 14px; }
.table thead th{
  font-family: "Inter", sans-serif;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted) !important;
  background: var(--paper) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 10px 12px !important;
}
.table td{
  border-top: 1px solid var(--rule) !important;
  padding: 12px !important;
  vertical-align: top;
}
.table tbody tr:hover{ background: var(--paper-soft) !important; }
.table.metadata-table th{
  background: transparent !important;
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted) !important;
  font-weight: 600 !important;
  width: 35%;
  padding: 8px 12px !important;
  text-align: left;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
}
.table.metadata-table td{
  font-family: "Source Serif 4", serif;
  font-size: 15px;
  color: var(--ink);
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 8px 12px !important;
}
.table-bordered, .table-bordered td, .table-bordered th{ border: 0 !important; }
.table-striped tbody tr:nth-of-type(odd){ background-color: transparent !important; }

/* ── badges & pills ─────────────────────────────────────────────── */
.badge{
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  padding: 3px 8px !important;
  border-radius: 2px !important;
  background: var(--paper-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule);
}
.badge-primary, .badge-info{ background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink); }
.badge-success{ background: var(--success) !important; color: #fff !important; border-color: var(--success); }
.badge-warning{ background: var(--warn) !important; color: #fff !important; border-color: var(--warn); }
.badge-danger, .badge-dark{ background: var(--accent) !important; color: #fff !important; border-color: var(--accent); }
.badge-light, .badge-secondary{ background: var(--paper-soft) !important; color: var(--muted) !important; border-color: var(--rule); }

/* ── forms ──────────────────────────────────────────────────────── */
.form-control{
  background: var(--paper-card);
  border: 1px solid var(--rule-strong) !important;
  border-radius: 2px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  color: var(--ink);
  padding: 9px 12px !important;
  box-shadow: none !important;
  transition: border-color .12s;
}
.form-control:focus{
  border-color: var(--accent) !important;
  background: var(--paper-card);
  box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.form-control::placeholder{ color: var(--muted); font-style: italic; }
label, .form-label{
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.form-group{ margin-bottom: 18px; }
.input-group-text{
  background: var(--paper-soft) !important;
  border: 1px solid var(--rule-strong) !important;
  color: var(--muted) !important;
  border-radius: 2px !important;
}

/* ── alerts ─────────────────────────────────────────────────────── */
.alert{
  border: 1px solid var(--rule) !important;
  border-left: 3px solid var(--ink) !important;
  border-radius: 2px !important;
  background: var(--paper-card);
  padding: 14px 18px !important;
  color: var(--ink);
  font-size: 14px;
  box-shadow: none !important;
}
.alert-primary, .alert-info{ border-left-color: var(--ink) !important; background: var(--paper-soft) !important; }
.alert-success{ border-left-color: var(--success) !important; background: #f0f3eb !important; color: var(--success) !important; }
.alert-warning{ border-left-color: var(--warn) !important; background: #f8f1e3 !important; color: var(--warn) !important; }
.alert-danger{ border-left-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent) !important; }

/* ── breadcrumbs ────────────────────────────────────────────────── */
.breadcrumb{
  background: transparent !important;
  padding: 0 0 16px !important;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.breadcrumb-item, .breadcrumb-item a{
  color: var(--muted);
  letter-spacing: 0.04em;
}
.breadcrumb-item.active{ color: var(--ink); font-weight: 500; }
.breadcrumb-item+.breadcrumb-item::before{ color: var(--muted); content: "›"; }

/* ── pagination ─────────────────────────────────────────────────── */
.pagination{ font-family: "Inter", sans-serif; }
.page-link{
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  font-size: 13.5px;
  margin: 0 2px;
}
.page-link:hover{ background: var(--paper-soft) !important; border-color: var(--ink) !important; }
.page-item.active .page-link{ background: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important; }
.page-item.disabled .page-link{ color: var(--muted) !important; background: transparent !important; }

/* ── dropdowns ──────────────────────────────────────────────────── */
.dropdown-menu{
  background: var(--paper-card) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: 0 4px 12px rgba(26,24,20,.08) !important;
  padding: 6px;
}
.dropdown-item{
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink) !important;
  padding: 7px 12px !important;
  border-radius: 2px;
}
.dropdown-item:hover, .dropdown-item:focus{ background: var(--paper-soft) !important; color: var(--accent) !important; }
.dropdown-divider{ border-top: 1px solid var(--rule); margin: 6px 0; }

/* ── list groups ────────────────────────────────────────────────── */
.list-group-item{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  color: var(--ink);
  font-size: 14px;
  transition: color .12s;
}
.list-group-item:hover{ background: var(--paper-soft) !important; color: var(--accent) !important; }
.list-group-item:last-child{ border-bottom: 0 !important; }
.list-group-item.active{ background: var(--accent-soft) !important; color: var(--accent) !important; }
.list-group-item.active .list-group-item-action{ color: var(--accent) !important; }

/* ── neutral citation chip / cite text style ────────────────────── */
.cite-chip, .neutralcite{
  font-family: "Source Serif 4", serif;
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
}
.cite-chip b, .neutralcite b{ color: var(--accent); font-style: normal; font-weight: 500; }

/* ── PDF download chip (for record detail pages) ────────────────── */
.pdf-chip{
  display:flex; align-items:center; gap:12px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 14px;
  margin: 8px 0;
  font-size: 13px; color: var(--muted);
  text-decoration: none;
  transition: border-color .12s;
}
.pdf-chip:hover{ border-color: var(--ink); color: var(--ink); text-decoration: none; }
.pdf-chip .icon{
  width: 34px; height: 42px;
  background: var(--accent); color: #fff;
  border-radius: 2px; display: flex; align-items: center; justify-content: center;
  font: 600 10px/1 "Inter", sans-serif; letter-spacing: 0.04em; flex-shrink: 0;
}
.pdf-chip .fn{
  font-family: "Source Serif 4", serif; font-style: italic;
  color: var(--ink); font-size: 13.5px; line-height: 1.4; word-break: break-all;
}
.pdf-chip .meta{ display: block; font-style: normal; color: var(--muted); font-size: 11.5px; margin-top: 3px; }

/* ── PDF versions list (multi-version block) ────────────────────── */
.pdf-versions{
  margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 20px;
}
.pdf-versions h3{
  font-family: "Source Serif 4", serif;
  font-size: 17px; font-weight: 500; margin-bottom: 4px;
}
.pdf-versions .lede{
  color: var(--muted); font-size: 13px; margin-bottom: 14px;
}
.version{
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.version.is-current{ border-color: var(--accent); }
.version-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:"Inter",sans-serif; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.version-head .src{
  background: var(--ink); color: var(--paper);
  padding: 2px 8px; border-radius: 2px; font-weight: 600; letter-spacing: 0.06em;
}
.version-head .src.pdb{ background: var(--accent); }
.version-head .src.csv{ background: var(--muted); }
.version.is-current .version-head .now{ color: var(--accent); font-weight: 700; }
.version a.fn{
  font-family: "Source Serif 4", serif; font-size: 14.5px;
  color: var(--ink); display: block; margin-bottom: 4px;
  word-break: break-all;
}
.version a.fn:hover{ color: var(--accent); text-decoration: underline; }
.version .stats{
  font-family: ui-monospace, monospace; font-size: 11.5px;
  color: var(--muted); margin-bottom: 8px;
}
.version .notes{
  font-size: 13px; color: var(--ink); line-height: 1.55;
  font-style: italic; font-family: "Source Serif 4", serif;
}

/* ── footer ────────────────────────────────────────────────────── */
footer{
  margin-top: auto;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
  font-size: 13px;
}
footer > .container-fluid{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}
footer a{ color: var(--accent); }

/* ── tweak the dashboard / index callouts (Bootstrap chunks) ────── */
.jumbotron, .well{
  background: var(--paper-card) !important;
  border: 1px solid var(--rule);
  border-radius: 2px !important;
  padding: 36px 40px !important;
  margin-bottom: 32px;
}

/* ── progress bars ──────────────────────────────────────────────── */
.progress{
  background: var(--paper-soft) !important;
  border-radius: 2px !important;
  height: 6px !important;
  box-shadow: none !important;
}
.progress-bar{
  background: var(--ink) !important;
  box-shadow: none !important;
}
.progress-bar.bg-success{ background: var(--success) !important; }
.progress-bar.bg-warning{ background: var(--warn) !important; }
.progress-bar.bg-danger{ background: var(--accent) !important; }

/* ── tabs ──────────────────────────────────────────────────────── */
.nav-tabs{
  border-bottom: 1px solid var(--rule);
  margin-bottom: 20px;
}
.nav-tabs .nav-link{
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--muted) !important;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  padding: 8px 14px !important;
  border-radius: 0 !important;
}
.nav-tabs .nav-link:hover{ color: var(--ink) !important; background: transparent !important; border-bottom-color: var(--rule) !important; }
.nav-tabs .nav-link.active{
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom-color: var(--accent) !important;
  font-weight: 600;
}

/* ── modal ─────────────────────────────────────────────────────── */
.modal-content{
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 36px rgba(26,24,20,.18) !important;
}
.modal-header, .modal-footer{ border-color: var(--rule) !important; }

/* ── utility helpers used by templates ─────────────────────────── */
.text-muted{ color: var(--muted) !important; }
.text-primary, .text-info{ color: var(--accent) !important; }
.text-success{ color: var(--success) !important; }
.text-danger, .text-warning, .text-dark{ color: var(--accent) !important; }
.bg-primary, .bg-info, .bg-dark{ background: var(--paper-card) !important; color: var(--ink) !important; }
.bg-light{ background: var(--paper-soft) !important; }
.bg-warning{ background: var(--accent-soft) !important; color: var(--accent) !important; }
.bg-success{ background: #ecf1e3 !important; color: var(--success) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right{ border-color: var(--rule) !important; }
.shadow, .shadow-sm, .shadow-lg{ box-shadow: none !important; }
.rounded, .rounded-sm, .rounded-lg{ border-radius: 2px !important; }

/* small icon adjustments — Font Awesome icons inherit muted by default */
.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular{ color: inherit; }
.navbar-brand .fa, .navbar-brand .fas{ color: var(--accent) !important; }

/* hide ugly default focus rings, keep accessible focus on form fields */
button:focus, .btn:focus{ outline: 0; box-shadow: 0 0 0 3px var(--accent-tint) !important; }

/* the canary-yellow accent pip (rarely used) */
.pip-yellow{ display:inline-block; width:8px; height:8px; background:#FFD60A; border-radius:50%; margin-right:6px; vertical-align:1px; }

/* ── content-area headings that index.php / dashboards build ────── */
.content > h1:first-child, main > h1:first-child{ margin-bottom: 10px; }
.section-title{
  font-family: "Source Serif 4", serif;
  font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  margin: 32px 0 16px;
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--ink);
  padding-top: 14px;
}
.section-title .more{
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500;
  color: var(--accent); letter-spacing: 0;
}

/* ── result row (used by listing pages) ────────────────────────── */
.entry-row{
  display:grid; grid-template-columns: 96px 1fr 200px; gap: 28px;
  padding: 22px 4px; border-bottom: 1px solid var(--rule);
  align-items: start; transition: background .12s;
}
.entry-row:hover{ background: var(--paper-soft); }
.entry-row .date-block{
  font-family:"Source Serif 4",serif; font-size:13px; color:var(--muted);
  padding-top:8px; font-style:italic;
}
.entry-row .date-block .day{
  display:block; font-style:normal; font-size:28px; color: var(--ink);
  font-weight:500; line-height:1; letter-spacing:-0.02em;
  font-feature-settings:"tnum";
}
.entry-row h3{
  font-family:"Source Serif 4",serif; font-size:20px; font-weight:500;
  line-height:1.25; letter-spacing:-0.012em; margin-bottom:6px;
}
.entry-row h3 a{ color: var(--ink); }
.entry-row h3 a:hover{ color: var(--accent); }
.entry-row .subj{ color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.entry-row .side-meta{
  font-size:13.5px; color: var(--muted); line-height:1.55;
  border-left: 1px solid var(--rule); padding-left: 22px;
}
.entry-row .side-meta .lbl{
  display:block; font-family:"Inter",sans-serif;
  font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 4px; font-weight: 500;
}
.entry-row .side-meta b{
  display:block; color: var(--ink); font-weight: 400;
  font-family: "Source Serif 4", serif; font-size: 14.5px;
}

/* ── homepage shell (filter rail + main column) ────────────────── */
.home-shell{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
}
.home-shell > .filter-rail{
  position: sticky;
  top: 20px;
  align-self: start;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.home-shell > main{ min-width: 0; }   /* let the grid item shrink */

@media (max-width: 991px){
  .home-shell{ grid-template-columns: 1fr; }
  .home-shell > .filter-rail{ position: static; max-height: none; }
}

/* ── filter rail (when used outside Bootstrap sidebar) ─────────── */
.filter-rail h4{
  font-family:"Inter",sans-serif; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--muted); font-weight:600;
  margin: 22px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.filter-rail h4:first-child{ margin-top: 0; }
.facet{
  display:flex; justify-content: space-between; padding:6px 0;
  font-size:14px; cursor:pointer; color: var(--ink);
}
.facet:hover{ color: var(--accent); }
.facet.active{ color: var(--accent); font-weight: 500; }
.facet.active::before{ content:"›"; color: var(--accent); margin-right: 6px; font-weight: 700; }
.facet .n{
  font-family:"Source Serif 4",serif; font-style:italic;
  font-size:13px; color: var(--muted); font-weight: 400;
}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width: 991px){
  .content{ padding: 24px !important; max-width: 100%; }
  .navbar > .container-fluid,
  .top-toolbar > .container-fluid,
  footer > .container-fluid{ padding: 0 24px; }
  .navbar{ padding: 8px 0; }
  .navbar-brand{ font-size: 20px !important; }
  .recent-grid{ grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (max-width: 767px){
  .sidebar{ width:100% !important; height:auto !important; position:relative !important; border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .content{ margin-left: 0 !important; }
  .entry-row{ grid-template-columns: 80px 1fr; gap: 18px; }
  .entry-row .side-meta{ grid-column: 1 / -1; border-left: 0; padding-left: 0; padding-top: 10px; border-top: 1px solid var(--rule); }
}

/* ── calendar (month grid) ─────────────────────────────────────── */
/* These rules must live here, not in an inline <style> block: the CSP
   (includes/security.php) has no 'unsafe-inline' in style-src, so
   browsers drop inline styles entirely. */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day-header{ font-weight:600; text-align:center; padding:4px; background:#f1f3f5; border-radius:4px; }
.cal-cell{ min-height:90px; border:1px solid #dee2e6; border-radius:6px; padding:6px; background:#fff; }
.cal-cell.filler{ background:#f8f9fa; border-color:transparent; }
.cal-cell .cal-date{ font-size:0.85rem; color:#6c757d; font-weight:500; }
.cal-cell.has-events{ background:#f0f8ff; border-color:#7ec1ff; }
.cal-cell.has-fallback{ background:#fff8e6; border-color:#ffc107; }
.cal-pills{ margin-top:6px; }
.cal-pill{ display:inline-block; padding:1px 6px; margin:1px; font-size:0.7rem; border-radius:9999px; }
.cal-pill.gc{ background:#cfe2ff; color:#084298; }
.cal-pill.coa{ background:#d1e7dd; color:#0f5132; }
.cal-pill.sc{ background:#f8d7da; color:#842029; }
.cal-pill.dim{ opacity:0.5; }
.cal-cell.weekend{ background:#f8f9fa; }
.cal-link{ display:block; color:inherit; text-decoration:none; }
.cal-link:hover{ text-decoration:underline; }
.cal-legend-swatch{ border-radius:4px; padding:1px 6px; }
.cal-legend-swatch.events{ background:#f0f8ff; border:1px solid #7ec1ff; }
.cal-legend-swatch.fallback{ background:#fff8e6; border:1px solid #ffc107; }

/* ── admin log viewer (/admin/logs) ────────────────────────────── */
/* These rules must live here, not in an inline <style> block: the CSP
   (includes/security.php) has no 'unsafe-inline' in style-src, so
   browsers drop inline styles entirely. */
.log-viewer{
  max-height: 70vh;
  overflow-y: auto;
  background-color: #f8f9fa;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
}
.log-viewer pre{
  background-color: transparent;
  padding: 1rem;
}
.log-line{
  padding: 2px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.log-line:hover{ background-color: #e9ecef; }
.log-error{ color: #dc3545; font-weight: bold; }
.log-warning{ color: #ffc107; }
.log-info{ color: #17a2b8; }
.log-debug{ color: #6c757d; }
.log-line.highlight{ background-color: #fff3cd; }

/* Dark theme for better log readability */
@media (prefers-color-scheme: dark){
  .log-viewer{
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  .log-line:hover{ background-color: #2a2a2a; }
  .log-error{ color: #ff6b6b; }
  .log-warning{ color: #ffd93d; }
  .log-info{ color: #6bcf7f; }
  .log-debug{ color: #95a5a6; }
}

/* ─────────────────────────────────────────────────────────────────────
   Turbo Drive — navigation polish (Tier 1d)
   The progress bar shows for slow navigations; fast (prefetched) ones
   finish before it appears. Coloured to the editorial burgundy accent.
   ───────────────────────────────────────────────────────────────────── */
.turbo-progress-bar {
  height: 3px;
  background: var(--accent);
}

/* Gentle fade-in on each load / Turbo navigation so swapped pages don't
   pop. Respects reduced-motion preferences. */
@media (prefers-reduced-motion: no-preference) {
  main.content,
  .content > * {
    animation: canary-fade-in 220ms ease-out both;
  }
}
@keyframes canary-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}