/* Claim Lane · Investigative Legal Redline Room
   Presentation layer only. Keep source, safety and action logic in their
   existing components. */
:root {
  --redline-paper: #F4F1EA;
  --redline-ink: #111111;
  --redline-marker: #FDE047;
  --redline-crimson: #DC2626;
  --redline-rule: #C8C1B6;
  --redline-muted: #514D47;
  --redline-crimson-text: #A61B1B;
}

html {
  background: var(--redline-paper);
  color-scheme: light;
}

body {
  background: var(--redline-paper) !important;
  color: var(--redline-ink) !important;
  font-family: "Newsreader", Georgia, serif !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  background-image: url("/static/redline-noise.svg");
}

body, #main-content, .app-nav, .mobile-menu, .app-footer {
  background-color: var(--redline-paper) !important;
}

#main-content .home {
  --paper: var(--redline-paper);
  --ink: var(--redline-ink);
  --red: #B91C1C;
  --faded: var(--redline-muted);
  --line: var(--redline-rule);
}

#main-content {
  max-width: 1180px;
}

.app-nav {
  border-bottom: 2px solid var(--redline-ink) !important;
}

.nav-brand, .nav-link, .mobile-menu-link, .footer-links a, .footer-text {
  font-family: "IBM Plex Mono", monospace !important;
}

.nav-brand, .nav-link.active, .nav-link:hover,
.mobile-menu-link:hover, .footer-links a:hover {
  color: var(--redline-ink) !important;
}

.nav-brand-icon, .nav-link, .mobile-menu-btn {
  border-radius: 0 !important;
}

.nav-link.active, .nav-link:hover {
  background: var(--redline-marker) !important;
}

.footer-links a, .footer-text, .app-footer > div:last-child,
.app-footer > div:last-child a {
  color: var(--redline-muted) !important;
}

.app-footer {
  border-top: 1px solid var(--redline-rule) !important;
}

h1, h2, h3, h4, .page-title, .blog-page-title, .blog-card-title,
.blog-article-title, .hero h1 {
  color: var(--redline-ink) !important;
  font-family: "Newsreader", Georgia, serif !important;
}

p, li, label, blockquote, .page-subtitle, .section-label,
.section-header, .empty-state-text, .blog-page-subtitle,
.blog-article-body, .footer-text {
  color: var(--redline-muted);
}

a, .blog-read-more, .blog-back-link {
  color: var(--redline-crimson-text);
}

.home .hero-accent {
  color: var(--redline-crimson) !important;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--redline-crimson) !important;
  outline-offset: 3px;
}

/* Replace generic soft SaaS tiles with squared paper and clear rules. */
.card, .card-accent, .card-blue, .card-amber, .card-purple, .card-red,
.layer-card, .phase-card, .forced-choice-row, .chat-bubble,
.template-card, .scenario-chip, .triage-chip, .stat-card, .case-card,
.blog-card, .flag-badge, .case-meta-tag, .nav-beta-badge,
.empty-state-icon, .copy-btn, .download-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.card, .card-accent, .card-blue, .card-amber, .card-purple, .card-red,
.phase-card, .forced-choice-row, .template-card, .stat-card, .case-card,
.blog-card {
  background: #FAF8F3 !important;
  border-color: var(--redline-rule) !important;
}

.nav-beta-badge, .flag-badge {
  color: #34312C !important;
  background: #E8E2D6 !important;
  border-color: #716B61 !important;
}

.btn-primary, .cta-primary, .button,
button.btn-primary, button[type="submit"] {
  border-radius: 0 !important;
  background: var(--redline-ink) !important;
  border-color: var(--redline-ink) !important;
  color: #FFFFFF !important;
  font-family: "IBM Plex Mono", monospace !important;
  box-shadow: none !important;
}

.btn-primary:hover, .cta-primary:hover, .button:hover,
button.btn-primary:hover, button[type="submit"]:hover {
  background: var(--redline-marker) !important;
  border-color: var(--redline-ink) !important;
  color: var(--redline-ink) !important;
  transform: none;
}

.btn-secondary, .copy-btn, .download-btn {
  background: #FAF8F3 !important;
  border-color: #716B61 !important;
  color: var(--redline-ink) !important;
}

.btn-secondary:hover, .copy-btn:hover, .download-btn:hover {
  background: var(--redline-marker) !important;
  color: var(--redline-ink) !important;
}

textarea, input[type="text"], input[type="password"], select {
  border-radius: 0 !important;
  background: #FBF9F4 !important;
  border-color: #8B857A !important;
  color: var(--redline-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
}

textarea::placeholder, input::placeholder {
  color: #57534E !important;
  opacity: 1;
}

.section-label, .section-header, .mono, .eyebrow {
  font-family: "IBM Plex Mono", monospace !important;
}

/* Demo evidence is visibly fictional; stamps never apply to user records. */
#main-content .synthetic-notice {
  position: relative;
  margin: 38px 0 34px;
  padding: clamp(20px, 4vw, 34px);
  border: 2px solid var(--redline-ink);
  background: #FAF8F3;
  color: var(--redline-ink);
}

.notice-watermark, .contradiction-stamp {
  display: inline-block;
  width: max-content;
  padding: 5px 8px;
  border: 2px solid var(--redline-crimson);
  color: #B91C1C;
  font: 700 10px/1.45 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  transform: rotate(-2deg);
}

.notice-watermark {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--redline-marker);
  border-color: var(--redline-ink);
  color: var(--redline-ink);
}

.notice-heading {
  max-width: 720px;
  padding-right: 130px;
  margin-bottom: 20px;
}

.notice-heading .eyebrow, .notice-ref, .annotation-mark {
  color: #4B4842 !important;
  font: 600 10px/1.6 "IBM Plex Mono", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.notice-heading h2 {
  margin: 6px 0 8px;
  font: 500 clamp(26px, 4vw, 36px)/1.12 "Newsreader", Georgia, serif !important;
}

.notice-heading p:last-child, .notice-annotation p, .notice-side-note p {
  color: #34312C;
  line-height: 1.55;
}

.notice-sheet {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(175px, .42fr);
  min-width: 0;
  border: 1px solid var(--redline-rule);
  background: #F4F1EA;
}

.notice-margin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 26px 4px;
  border-right: 1px solid var(--redline-rule);
  color: #B91C1C;
  font: 10px "IBM Plex Mono", monospace;
}

.notice-copy {
  min-width: 0;
  padding: 22px clamp(14px, 3vw, 28px);
}

.notice-ref {
  overflow-wrap: anywhere;
}

.notice-line {
  margin: 18px 0;
  padding: 10px 12px;
  background: #FAF8F3;
  color: var(--redline-ink);
  font: 500 clamp(16px, 2vw, 20px)/1.5 "Newsreader", Georgia, serif;
}

.redline-strike {
  text-decoration: line-through;
  text-decoration-color: var(--redline-crimson);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}

.notice-highlight {
  width: fit-content;
  max-width: 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: linear-gradient(transparent 54%, var(--redline-marker) 54%);
}

.notice-annotation {
  margin-top: 20px;
  padding-top: 13px;
  border-top: 1px dashed #827A6D;
}

.notice-annotation p {
  margin: 10px 0 0;
  font-size: 13px;
}

.notice-side-note {
  padding: 24px 18px;
  border-left: 1px solid var(--redline-rule);
  background: #ECE7DC;
}

.notice-side-note p {
  margin: 8px 0 24px;
  font-size: 13px;
}

.notice-side-note .annotation-mark:last-child {
  display: block;
  margin-top: 25px;
  padding-top: 10px;
  border-top: 1px solid #827A6D;
}

/* Artifact lock: the export is tactile; the free assessment remains open. */
body:has(.artifact-paywall) {
  background: var(--redline-paper) !important;
}

.artifact-paywall {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 32px 0 18px;
  padding: 28px clamp(18px, 4vw, 34px) 26px;
  border: 1px solid var(--redline-ink);
  background: #FBF9F4;
  box-shadow: 7px 7px 0 #C8C1B6;
}

.artifact-paywall > :not(.artifact-paper-stack):not(.artifact-lock-mark) {
  position: relative;
  z-index: 2;
}

.artifact-paywall h2 {
  max-width: 720px;
  margin: 8px 0 10px;
}

.artifact-paywall p {
  max-width: 740px;
}

.artifact-paywall .artifact-kicker {
  display: inline-block;
  background: var(--redline-marker);
  padding: 4px 7px;
}

.free-conflict {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--redline-crimson);
  background: #E8E2D6;
  color: var(--redline-ink);
  font: 600 12px/1.6 "IBM Plex Mono", monospace;
}

.free-conflict a {
  color: #A61B1B;
}

.artifact-paper-stack {
  position: absolute;
  right: 26px;
  top: 22px;
  z-index: 0;
  width: 90px;
  height: 112px;
  border: 1px solid #948C7D;
  background: #F4F1EA;
  transform: rotate(6deg);
}

.artifact-paper-stack span {
  position: absolute;
  inset: 6px 5px -7px -6px;
  border: 1px solid #948C7D;
  background: #F4F1EA;
}

.artifact-paper-stack span:last-child {
  inset: 12px 10px -13px -11px;
  z-index: -1;
}

.artifact-lock-mark {
  position: absolute;
  top: 62px;
  right: 54px;
  z-index: 1;
  width: 34px;
  height: 29px;
  border: 2px solid var(--redline-ink);
  background: var(--redline-marker);
}

.artifact-lock-mark::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -20px;
  width: 16px;
  height: 18px;
  border: 2px solid var(--redline-ink);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.artifact-lock-mark span {
  position: absolute;
  left: 13px;
  top: 8px;
  width: 4px;
  height: 8px;
  background: var(--redline-ink);
}

.artifact-paywall button[type="submit"] {
  min-height: 48px;
  padding: 12px 18px;
  background: var(--redline-marker) !important;
  color: var(--redline-ink) !important;
}

#main-content .order-page {
  color: var(--redline-ink);
  font-family: "Newsreader", Georgia, serif;
}

#main-content .order-page .panel,
#main-content .appeal-page .price-panel {
  background: #E8E2D6;
  border-top-color: var(--redline-crimson);
  border-radius: 0;
  box-shadow: none;
}

#main-content .order-page .artifact-lock {
  box-shadow: 7px 7px 0 #C8C1B6;
}

.order-page .button, .appeal-page .button {
  border-radius: 0;
  font-family: "IBM Plex Mono", monospace;
}

.safety-open {
  color: #25231F;
}

/* Purely decorative pipeline visualization. Its markup is feature-gated. */
.call-waveform {
  display: flex;
  align-items: center;
  gap: 5px;
  width: min(100%, 400px);
  height: 66px;
  margin-top: 24px;
  padding: 10px;
  border: 1px solid var(--redline-ink);
  background: #111;
}

.call-waveform span {
  display: block;
  flex: 1 1 0;
  height: 25%;
  min-width: 3px;
  background: var(--redline-marker);
  animation: redline-wave 850ms ease-in-out infinite alternate;
}

.call-waveform span:nth-child(4n + 1) { animation-delay: -250ms; }
.call-waveform span:nth-child(3n + 2) { animation-delay: -520ms; }

@keyframes redline-wave {
  to { height: 92%; }
}

@media (max-width: 640px) {
  #main-content { padding-inline: 16px; }
  .notice-heading { padding-right: 0; padding-top: 33px; }
  .notice-watermark { top: 11px; right: 11px; }
  .notice-sheet { grid-template-columns: 24px minmax(0, 1fr); }
  .notice-margin { gap: 28px; padding-top: 25px; }
  .notice-side-note { grid-column: 2; border: 0; border-top: 1px solid var(--redline-rule); }
  .artifact-paper-stack { right: 14px; top: 18px; transform: scale(.74) rotate(6deg); transform-origin: top right; }
  .artifact-lock-mark { top: 47px; right: 34px; transform: scale(.8); }
  .artifact-paywall { padding-right: 100px; }
  .artifact-paywall p { max-width: 100%; }
  .artifact-paywall .artifact-kicker { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .call-waveform span { animation: none !important; height: 40%; }
}