/*
 * Conquest of Volta — Design tokens and accessibility styles
 *
 * Loaded after Bootstrap and Evennia's website.css. Uses CSS custom
 * properties (design tokens) so Phase 10 Gild themes can swap colours
 * by redefining them under a .cov-theme-{slug} selector.
 *
 * Typography: system UI fallback; no missing font files are requested.
 * Download from https://brailleinstitute.org/freefont and place the
 * WOFF2 files in web/static/website/fonts/ — see that directory's
 * README for exact filenames. The system-UI stack provides an instant
 * readable fallback until then.
 */

/* =========================================================
   1. Self-hosted Atkinson Hyperlegible
   ========================================================= */

/* =========================================================
   2. Design tokens — light mode defaults
   ========================================================= */

:root {
  /* Colour palette */
  --cov-color-surface:      #f5f4f0;
  --cov-color-surface-alt:  #e8e6e0;
  --cov-color-accent:       #3d5c7a;   /* matches Evennia navbar */
  --cov-color-accent-hover: #2e4560;
  --cov-color-danger:       #c0392b;
  --cov-color-success:      #27664b;
  --cov-color-muted:        #6c757d;
  --cov-color-text:         #212529;
  --cov-color-link:         #1a4f7a;
  --cov-color-link-visited: #5a376b;
  --cov-color-focus-ring:   #ffb700;   /* high-contrast amber, never colour-only */

  /* Typography */
  --cov-font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cov-font-reading: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cov-font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Spacing scale */
  --cov-space-xs:  0.25rem;
  --cov-space-sm:  0.5rem;
  --cov-space-md:  1rem;
  --cov-space-lg:  1.5rem;
  --cov-space-xl:  2.5rem;

  /* Border radius */
  --cov-radius-sm: 0.2rem;
  --cov-radius-md: 0.375rem;
  --cov-radius-lg: 0.5rem;

  /* Transitions (respected by prefers-reduced-motion below) */
  --cov-transition: 0.15s ease;
}


/* =========================================================
   3. Dark mode tokens — applied when OS prefers dark
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --cov-color-surface:      #1a1c1e;
    --cov-color-surface-alt:  #242628;
    --cov-color-accent:       #5a82a6;
    --cov-color-accent-hover: #7aa0c0;
    --cov-color-danger:       #e57373;
    --cov-color-success:      #66bb6a;
    --cov-color-muted:        #9e9e9e;
    --cov-color-text:         #e8e6e0;
    --cov-color-link:         #82b4d8;
    --cov-color-link-visited: #c49fd8;
    --cov-color-focus-ring:   #ffb700;
  }

  body {
    background-color: var(--cov-color-surface);
    color: var(--cov-color-text);
  }

  .card, .table {
    background-color: var(--cov-color-surface-alt);
    color: var(--cov-color-text);
  }

  .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.04);
  }
}


/* =========================================================
   4. Reduced-motion — disable transitions and smooth-scroll
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   5. Typography — apply reading font to content areas
   ========================================================= */

body {
  font-family: var(--cov-font-ui);
}

/* Long-form reading areas get Atkinson Hyperlegible */
.cov-log-entry,
.cov-post-body,
.cov-lore-body,
.cov-plot-update,
article,
.card-body p {
  font-family: var(--cov-font-reading);
  line-height: 1.7;
}

code, pre, kbd, samp {
  font-family: var(--cov-font-mono);
}


/* =========================================================
   6. Link affordance — underlines on body links
   ========================================================= */

/* Body text links carry underlines for clear affordance */
p a, li a, td a, .card-body a {
  text-decoration: underline;
  color: var(--cov-color-link);
}

p a:visited, li a:visited, td a:visited, .card-body a:visited {
  color: var(--cov-color-link-visited);
}

/* Navigation links and buttons don't need underlines */
.nav-link, .btn, .dropdown-item, .breadcrumb-item a {
  text-decoration: none;
}

.nav-link:hover, .nav-link:focus {
  text-decoration: underline;
}


/* =========================================================
   7. Focus rings — visible, high-contrast, never colour-only
   ========================================================= */

/* Remove browser default, apply our own on keyboard focus */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--cov-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--cov-radius-sm);
}

/* Bootstrap buttons and links often suppress focus — restore it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cov-color-focus-ring);
  outline-offset: 2px;
}


/* =========================================================
   8. Screen-reader utilities
   ========================================================= */

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reveals on focus (skip links, sr-only-focusable pattern) */
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* =========================================================
   9. Responsive tables — keyboard-scrollable on small screens
   ========================================================= */

.cov-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Visible focus indicator when the scroll container has tabindex="0" */
.cov-table-scroll:focus-visible {
  outline: 2px solid var(--cov-color-focus-ring);
  outline-offset: 2px;
}


/* =========================================================
   10. Empty state
   ========================================================= */

.cov-empty-state {
  color: var(--cov-color-muted);
  padding: var(--cov-space-xl) var(--cov-space-md);
}


/* =========================================================
   11. Breadcrumbs
   ========================================================= */

.cov-breadcrumb .breadcrumb {
  background-color: transparent;
  padding-left: 0;
  font-size: 0.875rem;
}


/* =========================================================
   12. Gild theme hooks (Phase 10)
   ========================================================= */

/*
 * Phase 10 adds rules like:
 *   .cov-theme-arcane { --cov-color-accent: #6a0dad; }
 *
 * No additional template changes are needed — the body class swap is all.
 */
.cov-theme-default {
  /* default theme — no overrides needed */
}

/*
 * Portrait frame hook for character profiles (Phase 10).
 * The [data-frame] attribute on .cov-profile containers is set by
 * the character template; Phase 10 adds CSS rules per frame slug.
 */
.cov-profile [data-frame] img.cov-portrait {
  /* placeholder — Phase 10 adds border/shadow styles per frame value */
}

/* Channel title cosmetic hook (Phase 10 adds colour/prefix rules) */
.cov-channel-title {
  /* inherits from parent — Phase 10 extends this selector */
}


/* =========================================================
   13. Form styles — Phase 3G authoring surfaces
   ========================================================= */

/* Required field marker — visual asterisk with sr-only text in the label */
.form-required-marker {
  color: var(--cov-color-danger, #c0392b);
  margin-left: 0.2em;
  font-weight: 700;
}

/* Per-field error text */
.form-field-error {
  color: var(--cov-color-danger, #c0392b);
  font-size: 0.875em;
  margin-top: 0.25rem;
}

/* Fieldset / legend spacing for grouped form regions */
fieldset.cov-fieldset {
  border: 1px solid var(--cov-color-surface-alt, #e8e6e0);
  border-radius: var(--cov-radius-md, 6px);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

legend.cov-legend,
.form-legend {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 0.5rem;
  color: var(--cov-color-text, inherit);
  width: auto;
}

/* Focus-within ring on fieldset so keyboard users see the active grouping */
fieldset.cov-fieldset:focus-within {
  outline: 2px solid var(--cov-color-accent, #3d5c7a);
  outline-offset: 2px;
}

/* Parent class applied to form-group when a field has errors */
.has-error .form-control {
  border-color: var(--cov-color-danger, #c0392b);
}

.has-error label {
  color: var(--cov-color-danger, #c0392b);
}

/* Form actions row */
.form-actions {
  border-top: 1px solid var(--cov-color-surface-alt, #e8e6e0);
  padding-top: 1rem;
}


/* =========================================================
   14. Diff viewer — Phase 3G-D log entry edit history
   ========================================================= */

/* Monospace block wrapping the unified diff output */
pre.cov-diff {
  font-family: var(--cov-font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-x: auto;
  background: var(--cov-color-surface-alt, #e8e6e0);
  border-radius: var(--cov-radius-md, 6px);
  padding: 1rem;
  white-space: pre;
}

/* Colour + prefix pairing — readable without colour */
pre.cov-diff .diff-add {
  display: block;
  background: rgba(39, 102, 75, 0.12);
  color: var(--cov-color-success, #27664b);
}

pre.cov-diff .diff-remove {
  display: block;
  background: rgba(192, 57, 43, 0.12);
  color: var(--cov-color-danger, #c0392b);
}

pre.cov-diff .diff-hunk,
pre.cov-diff .diff-meta {
  display: block;
  color: var(--cov-color-muted, #6c757d);
}

pre.cov-diff .diff-context {
  display: block;
}

/* Summary labels rendered inline below the diff block */
.diff-add,
.diff-remove {
  font-family: var(--cov-font-mono);
  font-size: 0.85em;
}


/* =========================================================
   15. Map SVG (Phase 6D)
   ========================================================= */

.cov-map-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 70vh;
  border: 1px solid var(--cov-color-border, #444);
}

.cov-map-scroll:focus-visible {
  outline: 2px solid var(--cov-color-focus-ring);
  outline-offset: 2px;
}

.cov-map-svg {
  display: block;
}

.cov-map-fallback {
  fill: var(--cov-color-muted, #6c757d);
  stroke: var(--cov-color-border, #444);
  stroke-width: 1;
}

.cov-map-tile:hover .cov-map-fallback {
  fill: var(--cov-color-focus-ring, #4a90d9);
}

.cov-map-legend-item {
  display: inline-block;
  margin: 0 var(--cov-space-md) var(--cov-space-xs) 0;
}


/* =========================================================
   16. Print styles — clean scene log output
   ========================================================= */

@media print {
  /* Hide navigation, footer, and interactive chrome */
  nav,
  .navbar,
  .footer,
  .btn,
  .pagination,
  .cov-breadcrumb,
  #cov-nav-content {
    display: none !important;
  }

  /* Expand main to full page width */
  main, .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Black text on white for readability */
  body, .card, .table {
    background: #fff !important;
    color: #000 !important;
  }

  /* Ensure links show their URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  /* Don't show URL for nav/button links */
  .nav-link::after,
  .btn::after,
  .dropdown-item::after {
    content: "" !important;
  }

  /* Keep log entries together when possible */
  .cov-log-entry {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}


/* Keep the game name and navigation usable on narrow screens. */
@media (max-width: 767.98px) {
  .navbar-brand {
    max-width: calc(100% - 4rem);
    white-space: normal;
  }

  .navbar-brand .media-body {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .navbar-brand-logo {
    width: 2rem;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
  }
}