/* The console theme, taken verbatim from the HTML mockup the Figma file was
   generated from (web/mockup-reference.html). One stylesheet, so the design
   stays a single source of truth rather than two that drift apart.

   Only deliberate change: the external Unsplash background on the clearance
   dropzone is dropped. A demo should not depend on a CDN for a visual, and it
   was decorative. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink: #0A0D10;
  --panel: #12161B;
  --panel-raised: #181D24;
  --line: #262C34;
  --line-soft: #1D222A;
  --gold: #E8A23D;
  --gold-soft: rgba(232,162,61,0.14);
  --teal: #2FD1BE;
  --teal-soft: rgba(47,209,190,0.14);
  --orange: #F0603D;
  --orange-soft: rgba(240,96,61,0.14);
  --slate: #8B93A0;
  --slate-soft: rgba(139,147,160,0.14);
  --text: #F3F1EA;
  --text-dim: #9AA1AC;
  --radius-sm: 4px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter', sans-serif;
  background:var(--ink);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:'Space Grotesk', sans-serif; }
.mono{ font-family:'IBM Plex Mono', monospace; }

a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- layout ---------- */
.app{
  display:grid;
  grid-template-columns: 236px 1fr;
  min-height:100vh;
}

.rail{
  background:var(--panel);
  border-right:1px solid var(--line);
  color:var(--text);
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:38px;
}
.brand svg{ flex:none; }
.brand-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:0.01em;
}

.nav{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nav button{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  background:none;
  border:none;
  color:var(--text-dim);
  font-size:0.92rem;
  font-family:'Inter', sans-serif;
  padding:10px 10px;
  border-radius:var(--radius-sm);
  text-align:left;
  transition:background .15s ease, color .15s ease;
}
.nav button:hover{ background:rgba(243,241,234,0.05); color:var(--text); }
.nav button.active{ background:var(--gold-soft); color:var(--gold); }
.nav svg{ opacity:0.85; flex:none; }

.rail-foot{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:0.78rem;
  color:#5B6270;
  line-height:1.5;
}
.rail-foot strong{ display:block; color:#C4C9D1; font-weight:500; font-size:0.85rem; }

.main{
  padding:0 0 80px;
  max-width:1180px;
}
.main-inner{ padding:0 48px; }

.view{ display:none; }
.view.active{ display:block; animation:fadein .25s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* ---------- hero banner ---------- */
.hero{
  position:relative;
  height:340px;
  margin-bottom:0;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background:#000;
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0.55;
  filter:saturate(1.05) contrast(1.05);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,13,16,0.15) 0%, rgba(10,13,16,0.55) 55%, var(--ink) 100%);
}
.hero::after{
  content:"";
  position:absolute;
  top:-40%; left:-10%;
  width:70%; height:180%;
  background:conic-gradient(from 200deg at 50% 50%, transparent 0deg, rgba(232,162,61,0.16) 18deg, transparent 40deg);
  animation:sweep 3.2s ease-out 0.2s 1;
  opacity:0;
}
@keyframes sweep{
  0%{ opacity:0; transform:rotate(-20deg); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:rotate(40deg); }
}
.hero-content{
  position:relative;
  z-index:2;
  padding:0 48px 30px;
  width:100%;
}
.eyebrow{
  font-size:0.78rem;
  color:var(--gold);
  margin:0 0 10px;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.02em;
}
.hero h1{
  font-size:2.3rem;
  font-weight:600;
  margin:0 0 10px;
  line-height:1.1;
  max-width:16ch;
}
.hero p{
  margin:0 0 20px;
  color:#D7D9DD;
  max-width:52ch;
  font-size:0.98rem;
  line-height:1.55;
}

.view-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:8px;
  padding:36px 0 22px;
  border-bottom:1px solid var(--line);
}
.view-head h1{ font-size:1.9rem; font-weight:600; margin:0 0 8px; line-height:1.15; }
.view-head p{ margin:0; color:var(--text-dim); max-width:52ch; font-size:0.95rem; line-height:1.5; }

/* buttons */
.btn{
  border:1px solid var(--gold);
  background:var(--gold);
  color:#171208;
  padding:11px 20px;
  border-radius:var(--radius-sm);
  font-size:0.88rem;
  font-weight:600;
  white-space:nowrap;
}
.btn:hover{ background:#F0B458; border-color:#F0B458; }
.btn.ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
}
.btn.ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn.small{ padding:7px 14px; font-size:0.8rem; }

/* stat strip */
.stats{
  display:flex;
  gap:0;
  margin:26px 0 34px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--panel);
}
.stat{
  flex:1;
  padding:18px 22px;
  border-right:1px solid var(--line);
}
.stat:last-child{ border-right:none; }
.stat .num{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.7rem;
  font-weight:700;
  display:block;
  line-height:1;
  margin-bottom:6px;
  color:var(--text);
}
.stat .lbl{ font-size:0.82rem; color:var(--text-dim); }
.stat.orange .num{ color:var(--orange); }
.stat.teal .num{ color:var(--teal); }

/* directions callout */
.directions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:40px;
}
.dir-card{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel);
  padding:22px 24px;
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.dir-card:hover{ transform:translateY(-1px); background:var(--panel-raised); }
.dir-card.out:hover{ border-color:var(--orange); }
.dir-card.in:hover{ border-color:var(--teal); }
.dir-card h3{
  margin:0 0 8px;
  font-size:1.15rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:9px;
}
.dir-card .tag{
  font-size:0.68rem;
  font-family:'IBM Plex Mono', monospace;
  padding:2px 8px;
  border-radius:10px;
  font-weight:500;
}
.dir-card.out .tag{ background:var(--orange-soft); color:var(--orange); }
.dir-card.in .tag{ background:var(--teal-soft); color:var(--teal); }
.dir-card p{ margin:0; color:var(--text-dim); font-size:0.9rem; line-height:1.55; }

/* register table */
.register{ border-top:1px solid var(--line); margin-top:8px; }
.reg-row{
  display:grid;
  grid-template-columns: 1.4fr 1.3fr 1.1fr 1fr 0.9fr;
  gap:14px;
  align-items:center;
  padding:15px 4px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:background .12s ease;
}
.reg-row.head{
  cursor:default;
  font-size:0.75rem;
  color:var(--text-dim);
  padding-bottom:10px;
}
.reg-row:not(.head):hover{ background:var(--panel); }
.reg-row .primary{ font-weight:500; color:var(--text); }
.reg-row .sub{ display:block; font-size:0.8rem; color:var(--text-dim); margin-top:2px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.78rem;
  font-family:'IBM Plex Mono', monospace;
  padding:4px 9px;
  border-radius:3px;
  width:fit-content;
}
.badge.active{ background:var(--teal-soft); color:var(--teal); }
.badge.expiring{ background:var(--gold-soft); color:var(--gold); }
.badge.expired{ background:var(--slate-soft); color:var(--slate); }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.toolbar{
  display:flex;
  gap:12px;
  margin:26px 0 4px;
  align-items:center;
}
.search{
  flex:1;
  max-width:320px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-size:0.88rem;
  font-family:inherit;
  color:var(--text);
}
.search:focus{ outline:none; border-color:var(--gold); }
.search::placeholder{ color:#5B6270; }

/* stamp */
.stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 13px;
  border:2px solid currentColor;
  border-radius:3px;
  transform:rotate(-2deg);
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.03em;
  font-size:0.74rem;
  font-weight:500;
  outline:1px solid currentColor;
  outline-offset:2px;
}
.stamp.orange{ color:var(--orange); }
.stamp.teal{ color:var(--teal); }
.stamp.slate{ color:var(--slate); }

/* strip banner (secondary views) */
.strip{
  position:relative;
  height:120px;
  margin:0 -48px 0;
  overflow:hidden;
}
.strip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.4; }
.strip::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 10%, rgba(10,13,16,0.35) 60%, var(--ink) 100%);
}

/* finding rows */
.finding{
  display:grid;
  grid-template-columns: 1.6fr 1fr 0.9fr 1fr;
  gap:14px;
  align-items:center;
  padding:16px 4px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.finding:not(.head):hover{ background:var(--panel); }
.finding.head{ cursor:default; font-size:0.75rem; color:var(--text-dim); }
.finding .source{ font-weight:500; color:var(--text); }
.finding .source span{ display:block; font-size:0.8rem; color:var(--text-dim); font-weight:400; margin-top:2px; }
.conf-bar{
  height:5px;
  background:var(--line);
  border-radius:3px;
  overflow:hidden;
  width:80px;
}
.conf-bar > i{ display:block; height:100%; background:var(--orange); }

/* drawer */
.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.6);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:40;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(460px, 92vw);
  background:var(--panel);
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:41;
  display:flex;
  flex-direction:column;
  box-shadow:-8px 0 30px rgba(0,0,0,0.5);
  border-left:1px solid var(--line);
}
.drawer.show{ transform:translateX(0); }
.drawer-head{
  background:var(--panel-raised);
  border-bottom:1px solid var(--line);
  color:var(--text);
  padding:24px 26px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.drawer-head h3{ margin:0 0 4px; font-size:1.2rem; }
.drawer-head p{ margin:0; font-size:0.82rem; color:var(--gold); font-family:'IBM Plex Mono', monospace; }
.drawer-close{ background:none; border:none; color:var(--text-dim); font-size:1.3rem; line-height:1; padding:0; }
.drawer-close:hover{ color:var(--text); }
.drawer-body{ padding:24px 26px; overflow-y:auto; flex:1; }
.drawer-section{ margin-bottom:24px; }
.drawer-section h4{
  font-size:0.72rem;
  color:var(--text-dim);
  margin:0 0 10px;
  font-weight:600;
  letter-spacing:0.02em;
}
.evidence-shot{
  position:relative;
  border:1px solid var(--line);
  border-radius:3px;
  height:150px;
  overflow:hidden;
  margin-bottom:8px;
}
.evidence-shot img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.7) brightness(0.75); }
.evidence-shot::after{
  content:"CAPTURED 2026-09-06 03:12 UTC";
  position:absolute; left:10px; bottom:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  color:#E8E5DC;
  background:rgba(0,0,0,0.55);
  padding:3px 7px;
  border-radius:2px;
}
.evidence-shot::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
}
.clause-quote{
  border-left:3px solid var(--orange);
  padding:10px 14px;
  background:var(--orange-soft);
  font-size:0.88rem;
  line-height:1.5;
  font-style:italic;
  border-radius:0 3px 3px 0;
  color:var(--text);
}
.notice-box{
  border:1px solid var(--line);
  border-radius:3px;
  padding:16px;
  font-size:0.85rem;
  line-height:1.6;
  background:var(--ink);
  white-space:pre-line;
  color:var(--text);
}
.human-flag{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:var(--slate-soft);
  border-radius:3px;
  padding:12px 14px;
  font-size:0.82rem;
  color:var(--text);
  margin-top:12px;
  line-height:1.5;
}

/* modal */
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.65);
  z-index:50;
  padding:20px;
}
.modal.show{ display:flex; }
.modal-box{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:4px;
  width:min(560px, 100%);
  max-height:88vh;
  overflow-y:auto;
  padding:32px;
}
.modal-box h3{ margin:0 0 6px; font-size:1.3rem; }
.modal-box .desc{ color:var(--text-dim); font-size:0.88rem; margin:0 0 22px; }

.dropzone{
  position:relative;
  border:1.5px dashed var(--line);
  border-radius:4px;
  padding:38px 20px;
  text-align:center;
  color:var(--text-dim);
  font-size:0.9rem;
  margin-bottom:10px;
  transition:border-color .15s ease;
  overflow:hidden;
}
.dropzone:hover{ border-color:var(--gold); color:var(--text); }
.dropzone strong{ position:relative; display:block; color:var(--text); font-size:0.98rem; margin-bottom:5px; font-family:'Space Grotesk', sans-serif; font-weight:600; }
.dropzone span.dz-sub{ position:relative; }
.dropzone.bg-img::before{
  content:"";
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0.16;
}


.processing{
  display:flex; align-items:center; gap:10px;
  padding:20px 4px;
  font-size:0.88rem;
  color:var(--text-dim);
  font-family:'IBM Plex Mono', monospace;
}
.dots span{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--gold); margin-right:3px;
  animation:blink 1.1s infinite ease-in-out;
}
.dots span:nth-child(2){ animation-delay:.15s; }
.dots span:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }

.field-row{
  display:grid; grid-template-columns: 130px 1fr;
  gap:14px; padding:12px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(4px);
  animation:fieldIn .35s ease forwards;
}
@keyframes fieldIn{ to{ opacity:1; transform:translateY(0);} }
.field-row .flabel{ font-size:0.78rem; color:var(--text-dim); padding-top:2px; }
.field-row .fval{ font-size:0.92rem; font-weight:500; color:var(--text); }
.field-row .fquote{ font-size:0.78rem; color:var(--text-dim); font-style:italic; margin-top:4px; line-height:1.4; }

.check-list{ list-style:none; padding:0; margin:0 0 20px; }
.check-list li{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; font-size:0.88rem;
  opacity:0; animation:fieldIn .3s ease forwards;
  color:var(--text);
}
.check-list li .mark{ width:18px; height:18px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:0.7rem; }
.check-list li .mark.ok{ background:var(--teal-soft); color:var(--teal); }
.check-list li .mark.bad{ background:var(--orange-soft); color:var(--orange); }

.verdict-stamp{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:26px 10px 10px;
  opacity:0;
}
.verdict-stamp.show{ animation:stampIn .5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes stampIn{ 0%{opacity:0; transform:scale(1.5) rotate(6deg);} 100%{opacity:1; transform:scale(1) rotate(-3deg);} }
.verdict-stamp .big-stamp{
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:1.3rem;
  letter-spacing:0.04em;
  border:3px solid currentColor;
  outline:2px solid currentColor;
  outline-offset:4px;
  padding:12px 28px;
  border-radius:4px;
}
.verdict-note{ font-size:0.85rem; color:var(--text-dim); max-width:38ch; text-align:center; line-height:1.5; }

.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

/* responsive */
@media (max-width: 860px){
  .app{ grid-template-columns:1fr; }
  .rail{ position:static; height:auto; flex-direction:row; align-items:center; padding:16px 18px; overflow-x:auto; }
  .brand{ margin-bottom:0; margin-right:18px; }
  .nav{ flex-direction:row; }
  .rail-foot{ display:none; }
  .main-inner{ padding:0 18px; }
  .hero-content{ padding:0 18px 24px; }
  .hero{ height:260px; }
  .hero h1{ font-size:1.7rem; }
  .strip{ margin:0 -18px 0; }
  .view-head{ flex-direction:column; align-items:flex-start; }
  .directions{ grid-template-columns:1fr; }
  .stats{ flex-direction:column; }
  .stat{ border-right:none; border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:none; }
  .reg-row, .finding{ grid-template-columns:1fr; gap:6px; }
  .reg-row.head, .finding.head{ display:none; }
  .reg-row > div, .finding > div{ font-size:0.88rem; }
}

/* ---------- additions beyond the mockup ----------
   The mockup used <button> for nav and cards with JS view-switching. Real pages
   are server-rendered, so those become <a>. These rules keep an anchor looking
   exactly like the element it replaced. Also: the hero has no photo, because a
   demo should not depend on a CDN for its main visual. */

.nav-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--text-dim);
  font-size:0.92rem;
  padding:10px 10px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.nav-btn:hover{ background:rgba(243,241,234,0.05); color:var(--text); }
.nav-btn.active{ background:var(--gold-soft); color:var(--gold); }

a.dir-card{ display:block; text-decoration:none; color:inherit; }
a.reg-row, a.finding{ text-decoration:none; color:inherit; }
a.btn{ display:inline-block; text-decoration:none; }

/* The hero, without the photograph. The mockup layered a gradient over an
   Unsplash image; this keeps the gradient and the gold sweep so the shape and
   motion survive, and nothing loads from another origin. */
/* The hero carries a real photograph again — a stage under coloured light,
   which is the room this product is about. The gradient underneath is a
   fallback, so a slow or blocked image leaves a dark panel rather than a white
   flash, and `::before` stays because the headline sits on top of the picture
   and has to stay readable over whatever is in it. */
.hero{
  background:
    radial-gradient(120% 140% at 12% 0%, #17202B 0%, transparent 55%),
    linear-gradient(180deg, #0E141B 0%, #0B1015 55%, var(--ink) 100%);
}
.hero img{ opacity:0.5; }
.hero::before{
  background:linear-gradient(180deg,
    rgba(10,13,16,0.25) 0%,
    rgba(10,13,16,0.62) 50%,
    var(--ink) 100%);
}

.section-label{
  font-size:0.72rem;
  color:var(--text-dim);
  margin:0 0 12px;
  font-weight:600;
  letter-spacing:0.02em;
}

.disclaimer{
  margin:46px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:0.78rem;
  color:#5B6270;
  line-height:1.6;
  max-width:70ch;
}

/* A findings row carries five columns in the real app, not four: the mockup had
   no territory column, and territory is the whole point of a scoped verdict. */
.finding{ grid-template-columns:1.5fr 0.9fr 0.8fr 0.8fr 0.9fr; }
.finding .loc{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--text-dim); }

.quote-line{
  grid-column:1 / -1;
  border-left:3px solid var(--gold);
  background:var(--gold-soft);
  padding:9px 13px;
  font-size:0.84rem;
  font-style:italic;
  line-height:1.5;
  margin:2px 0 4px;
  border-radius:0 3px 3px 0;
}
.why{ grid-column:1 / -1; font-size:0.82rem; color:var(--text-dim); line-height:1.5; padding-bottom:2px; }

.empty-row{ padding:22px 4px; color:var(--text-dim); font-size:0.9rem; }

/* ---------- forms: adding a permission slip ----------

   The mockup put this in a modal with a click-through fake. Ours is a real
   two-step form on its own page, because a real upload takes a real Gemini call
   and a person has to read the answer before it is saved. Same vocabulary as
   the rest of the console — panels, gold accents, mono for anything machine-
   generated — so it does not read as a different application. */

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:22px 24px;
  margin:0 0 18px;
  max-width:720px;
}
.panel h3{
  margin:0 0 6px;
  font-size:1rem;
  font-family:'Space Grotesk', sans-serif;
}
.panel .desc{ font-size:0.88rem; color:var(--text-dim); line-height:1.6; margin:0 0 16px; }

.field{ display:block; margin:0 0 16px; }
.field > .label{
  display:block;
  font-size:0.78rem;
  color:var(--text-dim);
  margin-bottom:6px;
}
.field input[type=text],
.field input[type=date],
.field input[type=file],
.field select{
  width:100%;
  border:1px solid var(--line);
  background:var(--ink);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:0.9rem;
  font-family:inherit;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--gold); }
.field select{ appearance:none; cursor:pointer; }
.hint{ display:block; font-size:0.78rem; color:#5B6270; line-height:1.55; }
.field .hint{ margin-top:6px; }

fieldset.field{ border:none; padding:0; margin:0 0 16px; }
.check{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 14px 8px 0;
  font-size:0.88rem;
}
.check input{ accent-color:var(--gold); }

.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* The quote behind a field. Same look as a clause quote, one size down, so the
   eye reads value-then-evidence rather than two competing blocks. */
.cited{
  border-left:3px solid var(--gold);
  background:var(--gold-soft);
  padding:8px 12px;
  font-size:0.8rem;
  font-style:italic;
  line-height:1.5;
  margin:-8px 0 18px;
  border-radius:0 3px 3px 0;
}
.cited .pg{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-style:normal;
  font-size:0.7rem;
  opacity:0.8;
  margin-top:5px;
}
.uncited{ font-size:0.78rem; color:#5B6270; margin:-8px 0 18px; }

.actions{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.actions a{ font-size:0.85rem; color:var(--text-dim); }
.actions a:hover{ color:var(--text); }

/* Run counters: pages read, quotes checked, whether it came from cache. Mono,
   because every one of them is a machine fact rather than a sentence. */
.tally{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  padding:4px 9px;
  border-radius:3px;
  background:var(--slate-soft);
  color:var(--slate);
}
.pill.warn{ background:var(--gold-soft); color:var(--gold); }

.banner{
  border-radius:var(--radius-sm);
  padding:12px 15px;
  font-size:0.86rem;
  line-height:1.55;
  margin:0 0 18px;
  max-width:720px;
  background:var(--slate-soft);
  color:var(--text-dim);
}
.banner.bad{ background:var(--orange-soft); color:var(--text); }
.banner strong{ color:var(--text); }

.steps{ margin:0; padding-left:20px; font-size:0.88rem; color:var(--text-dim); line-height:1.7; }

/* A panel describing an action that is switched off on this link. Dashed, so
   it reads as "this exists and is not available to you" rather than as a
   control that failed to work. */
.panel.locked{
  border-style:dashed;
  background:transparent;
}
.panel.locked h3{ color:var(--text-dim); }
.panel h3 .tag{
  margin-left:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  font-weight:500;
  padding:3px 8px;
  border-radius:3px;
  background:var(--gold-soft);
  color:var(--gold);
  vertical-align:middle;
}