/* Frank Legacy — Story vs Proof Visual Separation v1
   Purpose: make narrative interpretation and verification visually distinct
   without changing historical content or evidence conclusions. */

:root{
  --story-paper:#fff8e8;
  --story-paper-deep:#f7ead0;
  --story-line:#d8c3a0;
  --story-accent:#8a2635;
  --proof-paper:#f4f7f7;
  --proof-paper-deep:#e7edef;
  --proof-ink:#1e313e;
  --proof-muted:#526671;
  --proof-line:#9fb0ba;
  --proof-accent:#36566a;
  --proof-accent-dark:#213b4b;
}

/* Warm, editorial narrative layer. */
section.panel.story-layer{
  background:
    linear-gradient(100deg,rgba(185,139,59,.045),transparent 28%),
    linear-gradient(180deg,rgba(255,248,232,.98),rgba(247,234,208,.94));
  border-color:var(--story-line);
  box-shadow:0 10px 26px rgba(43,31,20,.07);
}
section.panel.story-layer > .section-kicker,
section.panel.story-layer > .kicker{color:var(--story-accent)}
section.panel.story-layer h2{color:var(--ink,#171927)}
section.panel.story-layer::after{
  content:"";
  position:absolute;
  inset:auto 1.2rem 0 1.2rem;
  height:2px;
  background:linear-gradient(90deg,var(--room-motif-accent,var(--story-accent)),transparent 72%);
  opacity:.28;
  pointer-events:none;
}

/* Cool, structured verification layer. */
section.panel.proof-layer{
  color:var(--proof-ink);
  background:
    repeating-linear-gradient(0deg,rgba(54,86,106,.028) 0 1px,transparent 1px 34px),
    linear-gradient(180deg,rgba(247,249,249,.99),rgba(231,237,239,.97));
  border:1.5px solid var(--proof-line);
  box-shadow:0 11px 30px rgba(16,24,39,.09),inset 5px 0 0 var(--proof-accent);
}
section.panel.proof-layer::after{
  content:"";
  position:absolute;
  top:0;right:0;
  width:74px;height:74px;
  background:
    linear-gradient(135deg,transparent 49%,rgba(54,86,106,.11) 50% 52%,transparent 53%),
    linear-gradient(45deg,transparent 62%,rgba(54,86,106,.08) 63% 65%,transparent 66%);
  pointer-events:none;
}
.proof-layer > .section-kicker,
.proof-layer > .kicker{color:var(--proof-accent)}
.proof-layer h2,.proof-layer h3{color:var(--proof-ink)}
.proof-layer .section-intro,.proof-layer .panel-lede,.proof-layer p{color:var(--proof-muted)}
.proof-layer strong,.proof-layer b{color:var(--proof-ink)}

/* The label is intentionally text, not an icon, so the visitor never has to
   infer whether a cool panel is a source/evidence section. */
.layer-ribbon{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.48rem;
  margin:0 0 .72rem;
  padding:.38rem .62rem .36rem;
  border-radius:999px;
  border:1px solid rgba(54,86,106,.22);
  background:rgba(255,255,255,.72);
  color:var(--proof-accent-dark);
  font:800 .63rem/1.1 Arial,Helvetica,sans-serif;
  text-transform:uppercase;
  letter-spacing:.105em;
}
.layer-ribbon::before{
  content:"";
  width:.46rem;height:.46rem;
  border:2px solid var(--proof-accent);
  border-radius:2px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.8);
  background:var(--proof-paper-deep);
}

/* Nested proof objects read like files/cards rather than narrative cards. */
.proof-layer :is(.source-card,.evidence-card,.representative-card,.fact-card,.boundary-card,.method-card,.proof-row,.boundary-row,.archive-note,.record-grid){
  background:rgba(252,253,253,.9);
  border-color:#b8c5cc;
  box-shadow:0 5px 14px rgba(24,45,58,.045);
}
.proof-layer :is(.source-type,.fact-label,.record-label,.mini-label,.label-topline){color:var(--proof-accent)}
.proof-layer :is(.status,.status-pill,.record-status,.confirmed-status){
  border-color:rgba(54,86,106,.28);
}
.proof-layer :is(.source-line,.source,.quote-meta,.source-meta){
  border-color:#bac6cc;
}
.proof-layer a:not(.button){color:#284f65}
.proof-layer a:not(.button):hover{text-decoration-thickness:2px}

/* A tiny legend appears only on pages that mix both layers. */
.story-proof-key{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .85rem;
  margin:.8rem 0 1rem;
  padding:.6rem .72rem;
  border:1px solid rgba(102,95,82,.18);
  border-radius:14px;
  background:rgba(255,252,244,.62);
  font:700 .68rem/1.35 Arial,Helvetica,sans-serif;
  color:#5e574d;
}
.story-proof-key span{display:inline-flex;align-items:center;gap:.38rem}
.story-proof-key span::before{content:"";width:.7rem;height:.7rem;border-radius:3px;border:1px solid currentColor}
.story-proof-key .key-story::before{background:var(--story-paper-deep);color:var(--story-accent)}
.story-proof-key .key-proof{color:var(--proof-accent-dark)}
.story-proof-key .key-proof::before{background:var(--proof-paper-deep);color:var(--proof-accent)}

@media(max-width:699px){
  section.panel.proof-layer{box-shadow:0 8px 22px rgba(16,24,39,.08),inset 4px 0 0 var(--proof-accent)}
  .layer-ribbon{font-size:.6rem}
  .story-proof-key{font-size:.65rem}
}
@media(prefers-contrast:more){
  section.panel.proof-layer{border-width:2px;box-shadow:inset 6px 0 0 var(--proof-accent-dark)}
  section.panel.story-layer{border-width:2px}
  .layer-ribbon{border-width:2px;background:#fff}
}
@media(forced-colors:active){
  section.panel.proof-layer,section.panel.story-layer{background:Canvas;border:2px solid CanvasText;box-shadow:none}
  .layer-ribbon{background:Canvas;color:CanvasText;border:2px solid CanvasText}
  .story-proof-key{background:Canvas;color:CanvasText;border:1px solid CanvasText}
}