/* LexFright VHS/CRT design system. The homepage is the visual source of truth. */
html.lf-vhs-ui {
  --bg:#07090d;
  --surface:#0b0e13;
  --surface-2:#10151d;
  --surface-3:#151b24;
  --ink:#e7e2d7;
  --muted:#858a83;
  --accent:#d63a42;
  --accent-bright:#ed535b;
  --cyan:#57d3d9;
  --magenta:#d43d82;
  --rule:rgba(220,225,218,.22);
  --rule-strong:rgba(220,225,218,.42);
  --easing:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
  background:#07090d;
}

/* Square geometry is a brand invariant, including third-party/dynamic UI. */
html.lf-vhs-ui *,
html.lf-vhs-ui *::before,
html.lf-vhs-ui *::after { box-sizing:border-box;border-radius:0!important; }

html.lf-vhs-ui body {
  margin:0;
  color:var(--ink);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px),
    radial-gradient(ellipse at 50% 0,rgba(52,61,68,.14),transparent 58%),
    var(--bg);
  font-family:'Lora',Georgia,serif;
  -webkit-font-smoothing:antialiased;
}

html.lf-vhs-ui body { max-width:100%; }

html.lf-vhs-ui h1,
html.lf-vhs-ui h2,
html.lf-vhs-ui h3,
html.lf-vhs-ui .brand,
html.lf-vhs-ui .ttl,
html.lf-vhs-ui .card-ttl { font-family:'Fraunces',Georgia,serif; }

html.lf-vhs-ui a { text-underline-offset:4px; }
html.lf-vhs-ui a:focus-visible,
html.lf-vhs-ui button:focus-visible,
html.lf-vhs-ui input:focus-visible,
html.lf-vhs-ui textarea:focus-visible,
html.lf-vhs-ui select:focus-visible,
html.lf-vhs-ui summary:focus-visible {
  outline:1px solid var(--cyan)!important;
  outline-offset:3px;
}

html.lf-vhs-ui header {
  border-bottom:1px solid var(--rule)!important;
  background:rgba(7,9,13,.96)!important;
  box-shadow:0 1px 0 rgba(87,211,217,.08);
}

html.lf-vhs-ui nav a,
html.lf-vhs-ui .eyebrow,
html.lf-vhs-ui .meta,
html.lf-vhs-ui .card-meta,
html.lf-vhs-ui .genre,
html.lf-vhs-ui label,
html.lf-vhs-ui .lf-osd {
  letter-spacing:.12em;
}

html.lf-vhs-ui hr {
  height:0!important;
  border:0!important;
  border-top:1px solid var(--rule)!important;
  background:none!important;
}

html.lf-vhs-ui .lf-sep {
  display:block!important;
  width:min(900px,90%)!important;
  height:1px!important;
  margin:38px auto!important;
  background:linear-gradient(90deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent)!important;
}
html.lf-vhs-ui .lf-sep::before,
html.lf-vhs-ui .lf-sep::after,
html.lf-vhs-ui .lf-sep span,
html.lf-vhs-ui .lf-sep svg { display:none!important; }

/* Panels and cards share the camcorder-monitor construction. */
html.lf-vhs-ui .panel,
html.lf-vhs-ui .box,
html.lf-vhs-ui .card,
html.lf-vhs-ui .modal-box,
html.lf-vhs-ui .note-card,
html.lf-vhs-ui .book-card,
html.lf-vhs-ui .collection-card,
html.lf-vhs-ui [class*="-panel"] {
  border:1px solid var(--rule)!important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px),
    var(--surface)!important;
  box-shadow:inset 0 0 56px rgba(0,0,0,.34)!important;
}

html.lf-vhs-ui .card-corner { display:none!important; }
html.lf-vhs-ui .card-num { display:none!important; }

html.lf-vhs-ui button,
html.lf-vhs-ui .button,
html.lf-vhs-ui input,
html.lf-vhs-ui textarea,
html.lf-vhs-ui select {
  border:1px solid var(--rule)!important;
  background:var(--surface-2)!important;
  color:var(--ink)!important;
  font-family:'Lora',Georgia,serif!important;
  box-shadow:none!important;
}
html.lf-vhs-ui button,
html.lf-vhs-ui .button {
  min-height:40px;
  cursor:pointer;
  transition:border-color .18s,color .18s,background .18s;
}
html.lf-vhs-ui button:hover,
html.lf-vhs-ui .button:hover { border-color:var(--accent-bright)!important;color:#fff!important; }
html.lf-vhs-ui button.primary,
html.lf-vhs-ui .button.primary,
html.lf-vhs-ui button[type="submit"] { background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important; }
html.lf-vhs-ui input:focus,
html.lf-vhs-ui textarea:focus,
html.lf-vhs-ui select:focus { border-color:var(--cyan)!important;outline:none; }

/* Every menu must sit above content, overlays and CRT effects. */
html.lf-vhs-ui details,
html.lf-vhs-ui [class*="menu"],
html.lf-vhs-ui [class*="dropdown"] { overflow:visible!important; }
html.lf-vhs-ui .lf-admin-menu { position:relative!important;z-index:2147483000!important; }
html.lf-vhs-ui .lf-admin-menu summary {
  min-height:36px;
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border:1px solid transparent;
  color:var(--ink)!important;
  font:600 12px/1.2 ui-monospace,'Cascadia Mono','Courier New',monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html.lf-vhs-ui .lf-admin-menu summary::before { content:'ADMIN / ';color:var(--accent-bright); }
html.lf-vhs-ui .lf-admin-menu[open] summary { border-color:var(--rule-strong);background:var(--surface)!important; }
html.lf-vhs-ui .lf-admin-pop {
  position:absolute!important;
  z-index:2147483647!important;
  top:calc(100% + 8px)!important;
  right:0!important;
  left:auto!important;
  transform:none!important;
  min-width:248px!important;
  padding:8px!important;
  border:1px solid var(--rule-strong)!important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 4px),
    #080b10!important;
  box-shadow:5px 5px 0 rgba(214,58,66,.18),-1px -1px 0 rgba(87,211,217,.12)!important;
}
html.lf-vhs-ui .lf-admin-pop::before {
  content:'CONTROL CHANNEL';
  display:block;
  padding:5px 9px 8px;
  border-bottom:1px solid var(--rule);
  color:var(--muted);
  font:10px/1.2 ui-monospace,'Cascadia Mono','Courier New',monospace;
  letter-spacing:.16em;
}
html.lf-vhs-ui .lf-admin-pop a {
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  min-height:40px;
  padding:7px 9px!important;
  color:var(--ink)!important;
  font:12px/1.3 ui-monospace,'Cascadia Mono','Courier New',monospace!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  background:transparent!important;
}
html.lf-vhs-ui .lf-admin-pop a::before { content:'CH';color:var(--accent-bright); }
html.lf-vhs-ui .lf-admin-pop a:hover,
html.lf-vhs-ui .lf-admin-pop a:focus { color:#fff!important;background:rgba(214,58,66,.16)!important; }
html.lf-vhs-ui .auth-ui:has(.lf-admin-menu[open]),
html.lf-vhs-ui .contacts:has(.lf-admin-menu[open]),
html.lf-vhs-ui .hero:has(.lf-admin-menu[open]),
html.lf-vhs-ui header:has(.lf-admin-menu[open]) { z-index:2147483000!important;overflow:visible!important; }
html.lf-vhs-ui [role="menu"],
html.lf-vhs-ui [role="listbox"] { z-index:2147483647!important; }

/* Story, policy and author pages use the same monitor rhythm. */
html.lf-vhs-ui article { color:var(--ink); }
html.lf-vhs-ui article p { max-width:74ch; }
html.lf-vhs-ui .back { color:var(--accent-bright)!important; }
html.lf-vhs-ui .back::before { color:var(--muted); }
html.lf-vhs-ui footer { border-top:1px solid var(--rule)!important; }

/* Editor is a fixed bottom control deck and must not be clipped by page shells. */
html.lf-vhs-ui .lf-editor-bar,
html.lf-vhs-ui .lf-edit-toolbar,
html.lf-vhs-ui [data-lf-editor-toolbar] {
  position:fixed!important;
  z-index:2147483600!important;
  right:16px!important;
  bottom:16px!important;
  left:16px!important;
  top:auto!important;
  border:1px solid var(--rule-strong)!important;
  background:#0a0d13!important;
  box-shadow:0 -8px 32px rgba(0,0,0,.48)!important;
}

@media (max-width:780px) {
  html.lf-vhs-ui .lf-sep { margin:28px auto!important; }
  html.lf-vhs-ui .lf-admin-pop { position:fixed!important;left:16px!important;right:16px!important;top:auto!important;bottom:16px!important;min-width:0!important; }
  html.lf-vhs-ui .lf-admin-pop a { min-height:46px; }
  html.lf-vhs-ui article p { max-width:none; }
}

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