/* packages/site-template/styles.css
 *
 * Carried over from ../src/styles.css (the prototype's canonical dark
 * palette). Plan 04 layers:
 *   - per-tenant accent CSS custom-property substitution (REQ SITE-06)
 *   - @media (max-width: 767px) responsive block (UI-SPEC §7.3)
 *   - @media (prefers-color-scheme: light) palette swap (UI-SPEC §4.2)
 *
 * Walking Skeleton keeps the dark palette intact + adds the responsive +
 * light variant inline so the rendered site is mobile-readable from day one
 * (SITE-09 advance work; full Plan 04 polish lands later).
 */

:root {
  color-scheme: dark;
  --bg: oklch(0.2 0.008 60);
  --surface: oklch(0.235 0.008 60);
  --raised: oklch(0.275 0.01 60);
  --ink: oklch(0.95 0.008 70);
  --ink-2: oklch(0.8 0.012 65);
  --mute: oklch(0.62 0.012 60);
  --line: oklch(0.34 0.01 60);
  --line-2: oklch(0.42 0.012 60);
  --acc: oklch(0.78 0.1 75);
  --acc-bg: oklch(0.28 0.03 75);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  font-feature-settings: 'ss01' 1;
}

.shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
}

aside {
  border-right: 1px solid var(--line);
  padding: 32px 24px;
  background: var(--surface);
}

.brand-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.brand-meta {
  color: var(--mute);
  font-size: 13px;
  margin-bottom: 24px;
}
.toc a {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--ink-2);
  text-decoration: none;
}
/* Phase 10 §4.6 a11y fix: the CURRENT TOC link previously used --acc text on
   --acc-bg (both similar lightness → only 3.99:1 in light mode, < 4.5 WCAG
   1.4.3). The accent-tinted background is the "current" signal; the LABEL text
   uses --ink (≈13.6:1 on --acc-bg) so it stays readable. A bold weight adds a
   non-color cue (WCAG 1.4.1).
   Phase 27 UX-9: the active marker is now semantic aria-current="page" (WCAG
   4.1.2), so the active-link style is driven off [aria-current] instead of the
   non-semantic class="current". */
.toc a[aria-current='page'] {
  background: var(--acc-bg);
  color: var(--ink);
  font-weight: 600;
}

/* ─── Phase 27 UX-9: skip link + visible focus ring (WCAG 2.4.1 / 2.4.7) ─────
   The tenant site has ZERO runtime JS (must-survive-outage); these are the
   pure HTML/CSS a11y affordances added with the index.njk markup. */

/* Skip link - visually hidden until focused, then revealed on-screen as the
   first focusable affordance (bypass blocks, WCAG 2.4.1). The focus ring is
   never suppressed (see the :focus-visible rule below, WCAG 2.4.7). */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--acc-bg);
  color: var(--ink);
  border-radius: 4px;
  text-decoration: none;
  transition: top 0.12s ease-in-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
}

/* Visible focus ring on every interactive surface - never suppressed.
   Uses the site --acc token (WCAG 2.4.7). Applies to the TOC nav links, the
   filing download links, the skip link, and the IKE/accountant mailto links. */
.toc a:focus-visible,
.filing-row .dl:focus-visible,
.skip-link:focus-visible,
.colophon .contact a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

main {
  padding: 48px 56px;
  max-width: 920px;
}

.meta-strip {
  display: flex;
  gap: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.meta-strip .k {
  display: block;
  color: var(--mute);
  font-size: 12px;
}
.meta-strip .v {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  margin-top: 32px;
}
section h2:first-child {
  margin-top: 0;
}

dl.id {
  display: grid;
  gap: 12px;
}
dl.id > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
}
dl.id dt {
  color: var(--mute);
  font-size: 13px;
}
dl.id dd {
  font-variant-numeric: tabular-nums;
}

.year-head {
  padding: 12px 0 4px;
  font-weight: 600;
}
.year-head .y {
  font-variant-numeric: tabular-nums;
  color: var(--acc);
}
.filing-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  align-items: baseline;
}
.filing-row .meta {
  font-variant-numeric: tabular-nums;
}
.filing-row .dl {
  color: var(--acc);
  text-decoration: none;
}
.filing-row .dl:hover {
  text-decoration: underline;
}

.empty-state {
  padding: 16px 20px;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  color: var(--ink-2);
}

/* ─── Partner cards (Plan 04 - full 10-field render) ───────────────────── */
.partner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
  align-items: baseline;
}
.partner-name {
  font-weight: 500;
}
.partner-address {
  color: var(--ink-2);
  font-size: 13.5px;
  grid-column: 1;
}
.partner .kind {
  justify-self: end;
  font-size: 12px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* Managers list */
ul.managers {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.managers li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
}
ul.managers li:last-child {
  border-bottom: none;
}

/* Liquidation banner (10th statutory field - surfaced) */
.liquidation-banner {
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--acc-bg);
  color: var(--ink);
  border-left: 4px solid var(--acc);
  border-radius: 4px;
}

/* Mute utility (used in seat address sub-line) */
.mute {
  color: var(--mute);
  font-size: 13px;
}

/* Tenant logo above the .brand block */
.brand-logo {
  max-width: 180px;
  max-height: 60px;
  object-fit: contain;
  margin-bottom: 12px;
  display: block;
}

/* Dual footer styling (UI-SPEC §6.6) */
.colophon .contact {
  margin-top: 12px;
}
.colophon .contact a {
  color: var(--acc);
}
.colophon .footer-accountant,
.colophon .footer-platform {
  margin-top: 12px;
  color: var(--mute);
  font-size: 12px;
  line-height: 1.5;
}
.colophon .footer-platform {
  margin-top: 4px;
  font-style: italic;
}
.colophon .footer-accountant a,
.colophon .footer-platform a {
  color: var(--acc);
}

.colophon {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 12.5px;
}
.colophon p {
  margin-bottom: 4px;
}

::selection {
  background: var(--acc-bg);
  color: var(--ink);
}

/* ─── Responsive (UI-SPEC §7.3 - closes the desktop-only prototype gap) ── */
@media (max-width: 767px) {
  .shell {
    grid-template-columns: 1fr;
  }
  aside {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 24px 20px;
  }
  main {
    padding: 32px 20px;
  }
  dl.id > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .filing-row {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .filing-row .meta {
    grid-column: 1;
    color: var(--mute);
    font-size: 12px;
  }
  .filing-row .dl {
    grid-column: 2;
    grid-row: 1;
  }
  /* Plan 04: partner cards + meta-strip restack on mobile */
  .partner {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .partner .kind {
    justify-self: start;
  }
  .meta-strip {
    flex-direction: column;
    gap: 12px;
  }
}

/* ─── Light variant (UI-SPEC §4.2) ──────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: oklch(0.985 0.004 75);
    --surface: oklch(0.965 0.005 75);
    --raised: oklch(0.945 0.006 75);
    --ink: oklch(0.22 0.008 60);
    --ink-2: oklch(0.42 0.012 65);
    --mute: oklch(0.55 0.012 60);
    --line: oklch(0.86 0.008 60);
    --line-2: oklch(0.78 0.01 60);
    --acc: oklch(0.55 0.13 75);
    --acc-bg: oklch(0.92 0.04 75);
    /* Phase 10 §4.6 a11y fix: light-mode --mute was oklch(0.55 0.012 60),
       which gives only 4.39:1 on --surface for the sidebar .brand-meta text
       (< 4.5 WCAG 1.4.3). Darken to L=0.52 → 4.99:1. Dark-mode --mute is
       unaffected (it sits on the much darker --surface and already clears 4.5). */
    --mute: oklch(0.52 0.012 60);
  }
}