/* ============================================================
   TOKENS
   Palette is fixed by the brief: orange bars, dark yellow page,
   white buttons with black text, white text on the bars.
   ============================================================ */
:root{
  --orange:        #C24A12;   /* nav + footer bars */
  --orange-deep:   #93380C;   /* pressed / edge */
  --orange-bright: #DC6626;   /* hover accent */
  --gold:          #F8C93E;   /* page background */
  --gold-deep:     #DCAA1C;
  --gold-light:    #FFE07A;
  --white:         #FFFFFF;   /* button + card surface */
  --ink:           #1E1704;   /* text on white */
  --ink-soft:      #5A4A16;
  --line:          rgba(30,23,4,.14);

  --r:      12px;
  --r-sm:   8px;
  --shadow: 0 10px 26px rgba(24,17,2,.26);
  --shadow-sm: 0 3px 10px rgba(24,17,2,.20);

  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body:    "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bar-h: 64px;

  /* Signature device: job-site hazard striping. Now used in exactly one
     place, the gate placard, where controlled access is the whole point. */
  --hazard: repeating-linear-gradient(135deg,
              var(--orange) 0 14px,
              var(--gold-light) 14px 28px);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family: var(--body);
  color: var(--ink);
  background-color: var(--gold);
  background-image:
    radial-gradient(1100px 480px at 50% -180px, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
}

h1,h2,h3{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.06;
  margin: 0;
}
p{ margin:0; }

.mono{ font-family: var(--mono); }
.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
[hidden]{ display:none !important; }

:focus-visible{
  outline: 3px solid #FFF3C4;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   GATE  (nothing behind it renders until credentials clear)
   ============================================================ */
#gate{
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  padding: 20px;
  overflow-y: auto;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
    linear-gradient(180deg, #9A6E05 0%, #5E4204 100%);
}
#gate.gate-out{ animation: gateLift .5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes gateLift{
  to{ opacity:0; transform: translateY(-14px); visibility:hidden; }
}

.placard{
  width: min(430px, 100%);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  overflow: hidden;
}
.placard-stripe{ height: 10px; background: var(--hazard); }
.placard-body{ padding: 26px 24px 24px; }

.placard-mark{
  display:flex; align-items:center; gap:11px; margin-bottom:18px;
}
.placard-mark .lockbox{
  width:38px; height:38px; flex:none; border-radius:9px;
  background: var(--orange); color:#fff;
  display:grid; place-items:center;
}
.placard-mark .eyebrow{ color: var(--ink-soft); }

.placard h1{
  font-size: 34px; text-transform: uppercase; letter-spacing:.02em;
  margin-bottom: 8px;
}
.placard .lede{ font-size:14.5px; color:var(--ink-soft); margin-bottom:20px; }

.seg{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:#F0EBDD; padding:4px; border-radius:var(--r-sm); margin-bottom:18px;
}
.seg button{
  font-family: var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:9px 6px; border:0; border-radius:6px; cursor:pointer;
  background:transparent; color:var(--ink-soft);
}
.seg button[aria-selected="true"]{ background: var(--orange); color:#fff; }

.field{ margin-bottom:14px; }
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:6px;
}
.input{
  width:100%; font-family:var(--body); font-size:15px; color:var(--ink);
  padding:11px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#FCFAF4;
}
.input:focus{ border-color: var(--orange); background:#fff; outline:none; }
textarea.input{ resize:vertical; min-height:76px; line-height:1.45; }

.code-input{
  font-family: var(--mono); font-size:clamp(19px,5.6vw,24px); font-weight:600;
  letter-spacing:.2em; text-align:center; padding:14px 10px 14px 20px;
}

.btn-primary{
  width:100%; font-family:var(--display); font-size:18px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:13px 16px; border:0; border-radius:var(--r-sm); cursor:pointer;
  background: var(--orange); color:#fff;
  transition: background .15s ease;
}
.btn-primary:hover{ background: var(--orange-bright); }
.btn-primary:disabled{ background:#B9AE94; cursor:not-allowed; }

.gate-msg{
  font-family:var(--mono); font-size:12px; line-height:1.45;
  margin-top:14px; padding:10px 12px; border-radius:var(--r-sm);
}
.gate-msg.err{ background:#FDEBE6; color:#8F1D06; border-left:3px solid #C1440E; }
.gate-msg.ok { background:#EAF6EC; color:#1E5C2A; border-left:3px solid #2E7D3A; }
.gate-msg.info{ background:#FBF3DA; color:#6A5209; border-left:3px solid var(--gold-light); }

.gate-foot{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:#8B7A4E; text-align:center;
}
.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange); text-decoration:underline; text-underline-offset:3px;
}

/* ============================================================
   REVEAL SEQUENCE
   ============================================================ */
.reveal{ opacity:0; transform: translateY(10px); }
#app.lit .reveal{ animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; }
#app.lit .reveal.d1{ animation-delay:.02s; }
#app.lit .reveal.d2{ animation-delay:.10s; }
#app.lit .reveal.d3{ animation-delay:.18s; }
#app.lit .reveal.d4{ animation-delay:.26s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position: sticky; top:0; z-index:400;
  background: var(--orange);
  color: var(--white);
  border-bottom: 3px solid var(--orange-deep);
  box-shadow: 0 2px 14px rgba(24,17,2,.30);
}
.topbar-in{
  max-width:1180px; margin:0 auto; padding:0 18px;
  min-height: var(--bar-h);
  display:flex; align-items:center; gap:14px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  color:#fff; text-decoration:none; margin-right:auto; min-width:0;
}
.brand-logo{
  width:40px; height:40px; flex:none; border-radius:8px; object-fit:cover;
  background: rgba(255,255,255,.16);
}
.brand-txt{ min-width:0; }
.brand-title{
  display:block; font-family:var(--display); font-weight:700;
  font-size:22px; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-sub{
  display:block; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.84);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.navtoggle{
  display:none; width:42px; height:42px; flex:none;
  background:rgba(255,255,255,.14); border:0; border-radius:8px;
  color:#fff; cursor:pointer; align-items:center; justify-content:center;
}
.navlinks{ display:flex; align-items:center; gap:2px; }
.navlink{
  font-family:var(--display); font-size:16px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:#fff; text-decoration:none; background:none; border:0; cursor:pointer;
  padding:9px 12px; border-radius:7px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  transition: background .14s ease;
}
.navlink:hover{ background: rgba(255,255,255,.16); }
.navlink[aria-current="page"]{ background: var(--orange-deep); }
.navlink .tag{
  font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.1em;
  padding:2px 4px; border-radius:3px; background:rgba(255,255,255,.24);
}
.navlink.is-cta{ background:#fff; color:var(--ink); }
.navlink.is-cta:hover{ background:#FFEFD9; }

@media (max-width: 900px){
  .navtoggle{ display:inline-flex; }
  .navlinks{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--orange-deep); padding:8px 12px 14px;
    box-shadow: var(--shadow); display:none;
  }
  .navlinks.open{ display:flex; }
  .navlink{ padding:12px 10px; border-radius:6px; font-size:18px; }
  .navlink .tag{ margin-left:auto; }
  .navlink.is-cta{ margin-top:6px; justify-content:center; }
}

/* ============================================================
   EDIT AFFORDANCES
   ============================================================ */
.nav-edit{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  padding:7px 10px; border-radius:6px; cursor:pointer; flex:none;
  background:#2A2107; color:#FFD27A; border:1px solid #6B5714;
}
.nav-edit:hover{ background:#3D2F09; }

/* Floating pencil that appears on editable regions */
.edit-tab{
  position:absolute; z-index:60; top:10px; right:10px;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border-radius:6px; cursor:pointer;
  background:#2A2107; color:#FFD27A; border:1px solid #6B5714;
  box-shadow: var(--shadow-sm);
}
.edit-tab:hover{ background:#3D2F09; }
/* Applied only while edit mode is on. Solid, so no dashed line ever appears
   on the navigation or footer bars. */
.editable{ position:relative; outline:2px solid rgba(42,33,7,.55); outline-offset:4px; }

/* ============================================================
   GALLERY  (~50% of viewport height, all breakpoints)
   ============================================================ */
.gallery{
  position:relative;
  height: 50vh; height: 50svh;
  min-height: 230px; max-height: 640px;
  overflow:hidden;
  background:#3A2A05;
  border-bottom:3px solid var(--orange-deep);
}
.gal-track{
  display:flex; height:100%; width:100%;
  transition: transform .62s cubic-bezier(.5,.05,.2,1);
  will-change: transform;
}
.gal-slide{ flex:0 0 100%; height:100%; position:relative; }
.gal-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-shade{
  position:absolute; inset:auto 0 0 0; height:52%;
  background: linear-gradient(180deg, transparent, rgba(20,14,1,.78));
  pointer-events:none;
}
.gal-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 0 clamp(16px,4vw,40px) clamp(18px,4vw,32px);
  color:#fff;
}
.gal-cap .num{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.18em;
  color:#FFCE7A; display:block; margin-bottom:5px;
}
.gal-cap .txt{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size: clamp(19px, 3.4vw, 32px); letter-spacing:.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.gal-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.4); background:rgba(20,14,1,.42);
  color:#fff; display:grid; place-items:center; font-size:19px; line-height:1;
}
.gal-arrow:hover{ background:var(--orange); border-color:var(--orange); }
.gal-arrow.prev{ left:12px; } .gal-arrow.next{ right:12px; }
.gal-dots{
  position:absolute; z-index:20; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:7px;
}
.gal-dots button{
  width:26px; height:4px; border:0; padding:0; cursor:pointer; border-radius:2px;
  background:rgba(255,255,255,.42);
}
.gal-dots button[aria-current="true"]{ background:var(--orange-bright); }
@media (max-width:640px){
  .gal-arrow{ width:34px; height:34px; font-size:16px; }
  .gal-arrow.prev{ left:7px; } .gal-arrow.next{ right:7px; }
}

/* ============================================================
   PAGE BODY
   ============================================================ */
.wrap{ max-width:1180px; margin:0 auto; padding: clamp(26px,4vw,46px) 18px clamp(40px,6vw,66px); }

.notice{
  position:relative;
  background: rgba(255,255,255,.13);
  border-left:4px solid var(--orange);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 16px 18px; margin-bottom: clamp(24px,3.4vw,36px);
}
.notice h2{ font-size: clamp(21px,2.8vw,27px); text-transform:uppercase; color:#241A02; }
.notice p{ font-size:15px; color:#3B2E07; margin-top:5px; max-width:66ch; }

.sec-head{
  display:flex; align-items:baseline; gap:12px; margin-bottom:16px;
  border-bottom:1px solid rgba(36,26,2,.24); padding-bottom:9px;
}
.sec-head h2{ font-size: clamp(22px,3vw,29px); text-transform:uppercase; color:#241A02; }
.sec-head .eyebrow{ color:#54420C; margin-left:auto; }

/* Link buttons: two per row on laptop, one per row on mobile */
.btn-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:760px){ .btn-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }

.linkcard{
  position:relative; display:block; text-decoration:none;
  background: var(--white); color: var(--ink);
  border-radius: var(--r); padding:18px 18px 16px;
  box-shadow: var(--shadow-sm);
  border-top:3px solid var(--orange);
  transition: transform .16s ease, box-shadow .16s ease;
}
.linkcard:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.linkcard .lc-top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.linkcard .lc-title{
  font-family:var(--display); font-weight:700; font-size:22px;
  letter-spacing:.02em; text-transform:uppercase; color:#000;
}
.linkcard .lc-kind{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#7A6524; margin-left:auto;
  border:1px solid rgba(30,23,4,.2); border-radius:4px; padding:2px 5px; white-space:nowrap;
}
.linkcard .lc-desc{ font-size:14.5px; color:#000; opacity:.78; }
.linkslot{ position:relative; }
.linkslot .lc-tools{
  position:absolute; z-index:5; top:8px; right:8px; display:none; gap:4px; flex-wrap:wrap;
  justify-content:flex-end; max-width:calc(100% - 16px);
}
body.editing .linkcard{ padding-top:46px; }
.mini[disabled]{ opacity:.35; cursor:not-allowed; }
body.editing .linkslot .lc-tools{ display:flex; }
.mini{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 7px; border-radius:5px; cursor:pointer;
  border:1px solid rgba(30,23,4,.22); background:#F6F1E3; color:#3E3109;
}
.mini:hover{ background:#EDE4CC; }
.mini.danger{ color:#8F1D06; border-color:#E3B3A6; background:#FDEEE9; }

.addcard{
  display:grid; place-items:center; min-height:104px; cursor:pointer;
  background: rgba(255,255,255,.16); color:#2E2405;
  border:2px dashed rgba(36,26,2,.4); border-radius:var(--r);
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.addcard:hover{ background: rgba(255,255,255,.3); }

/* ============================================================
   BOARD PAGES  (Changes / Modifications)
   ============================================================ */
.board-head{
  display:flex; gap:16px 20px; align-items:flex-end; flex-wrap:wrap;
  border-bottom:1px solid rgba(36,26,2,.24); padding-bottom:14px; margin-bottom:8px;
}
.board-title{ position:relative; }
/* Sits on its own line above the heading rather than floating over it. */
.board-edit-tab{
  display:inline-block; margin:0 0 12px; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border-radius:6px;
  background:#2A2107; color:#FFD27A; border:1px solid #6B5714;
}
.board-edit-tab:hover{ background:#3D2F09; }
.board-title h1{
  font-size: clamp(30px,5.2vw,48px); text-transform:uppercase; color:#241A02; line-height:1;
}
.board-intro{ font-size:15px; color:#3B2E07; margin:16px 0 22px; max-width:70ch; }

.searchwrap{ margin-left:auto; flex:1 1 260px; max-width:400px; }
.searchwrap label{
  display:block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#4A3A0F; margin-bottom:6px;
}
.searchrow{ display:flex; gap:8px; }
.searchrow .input{ background:#fff; }
.searchrow button{
  flex:none; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:0 12px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid rgba(30,23,4,.2); background:#fff; color:#3E3109;
}
.searchrow button:hover{ background:#F2ECDC; }
.searchnote{
  font-family:var(--mono); font-size:11px; color:#4A3A0F;
  margin:0 0 14px; letter-spacing:.04em;
}

.alert{
  position:relative; background:#fff; border-radius:var(--r);
  padding:18px 20px 17px; margin-bottom:14px;
  box-shadow:var(--shadow-sm); border-left:4px solid var(--orange);
}
.alert-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.tag-chip{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  background:#FFD633; color:#000; border:1px solid #8A6F08;
  padding:3px 8px; border-radius:4px; cursor:pointer; line-height:1.4;
}
.tag-chip:hover{ background:#FFE066; }
.tag-chip.on{ background:#000; color:#FFD633; border-color:#000; }
.alert-h{
  font-family:var(--display); font-weight:700; font-size:clamp(20px,2.6vw,25px);
  text-transform:uppercase; color:#000; letter-spacing:.02em;
}
.alert-sub{ font-family:var(--body); font-weight:700; font-size:15px; color:#000; margin-top:3px; }
.alert-body{ font-size:15px; color:#2A2205; margin-top:9px; white-space:pre-wrap; }
.alert-tools{ position:absolute; top:10px; right:10px; display:flex; gap:5px; flex-wrap:wrap; }
.alert.editing{ padding-top:44px; }

/* tag editor inside the dialog */
.tagbox{
  display:flex; flex-wrap:wrap; gap:6px; min-height:38px; align-items:center;
  padding:7px 8px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#FCFAF4; margin-bottom:8px;
}
.tagbox:empty::before{
  content:"No indicators yet"; font-family:var(--mono); font-size:11px; color:#8B7A4E;
}
.tagbox .tag-chip{ cursor:default; display:inline-flex; align-items:center; gap:6px; }
.tagbox .tag-chip button{
  background:none; border:0; padding:0; cursor:pointer; color:#000;
  font-size:14px; line-height:1; opacity:.6;
}
.tagbox .tag-chip button:hover{ opacity:1; }

/* ============================================================
   SECURITY PAGE
   ============================================================ */
.panel{
  background: var(--white); border-radius: var(--r);
  box-shadow: var(--shadow); margin-bottom:18px; overflow:hidden;
}
.panel-head{
  padding:15px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.panel-head h2{ font-size:23px; text-transform:uppercase; }
.panel-head .eyebrow{ color:#96792C; }
.panel-body{ padding:20px; }
.panel-body > p.help{ font-size:14px; color:var(--ink-soft); margin-bottom:16px; max-width:70ch; }

.grid2{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:700px){ .grid2{ grid-template-columns:1fr 1fr; } }

.codelist{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.coderow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#FCFAF4;
}
.coderow.dead{ opacity:.5; }
.coderow .cid{ font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.1em; }
.coderow .clabel{ font-size:14px; }
.coderow .cmeta{ font-family:var(--mono); font-size:10.5px; color:#8B7A4E; margin-left:auto; }
.badge{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 6px; border-radius:4px;
}
.badge.live{ background:#E4F3E7; color:#1E5C2A; }
.badge.dead{ background:#F1EDE2; color:#7A6524; }

.reveal-box{
  margin-top:14px; padding:16px; border-radius:var(--r-sm);
  background:#2A2107; color:#fff; text-align:center;
}
.reveal-box .eyebrow{ color:#FFD27A; }
.reveal-box .code{
  font-family:var(--mono); font-size:clamp(22px,6.4vw,32px); font-weight:600;
  letter-spacing:.16em; padding:10px 0 4px 10px; word-break:break-all;
}
.reveal-box .warn{ font-family:var(--mono); font-size:11px; color:#D8C89A; }

.empty{
  padding:22px; text-align:center; border:2px dashed var(--line);
  border-radius:var(--r-sm); color:#8B7A4E;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.bottombar{
  position:relative; background: var(--orange); color:#fff; margin-top:auto;
  border-top: 3px solid var(--orange-deep);
}
.foot-in{
  max-width:1180px; margin:0 auto;
  padding: clamp(28px,4vw,40px) 18px clamp(24px,3vw,32px);
  display:grid; grid-template-columns:1fr; gap:26px;
}
@media (min-width:820px){ .foot-in{ grid-template-columns: 1.15fr 1fr; gap:44px; } }
.foot-logo{
  width:56px; height:56px; border-radius:10px; object-fit:cover;
  background:rgba(255,255,255,.16); display:block; margin-bottom:12px;
}
.foot-desc{ font-size:14.5px; color:rgba(255,255,255,.94); max-width:52ch; }
.foot-attr-box{
  border-left:2px solid rgba(255,255,255,.34); padding-left:16px;
}
.foot-attr-box .eyebrow{ color:rgba(255,255,255,.72); margin-bottom:6px; display:block; }
.foot-attr{ font-size:13.5px; color:rgba(255,255,255,.9); }
.foot-rule{
  max-width:1180px; margin:0 auto; padding:12px 18px 20px;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.78); text-transform:uppercase;
}
.foot-rule .spacer{ margin-left:auto; }
.foot-rule .ver{
  border:1px solid rgba(255,255,255,.34); border-radius:4px;
  padding:4px 8px; color:#fff; letter-spacing:.1em;
}
.foot-rule button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:1px solid rgba(255,255,255,.4); color:#fff;
  padding:5px 9px; border-radius:5px; cursor:pointer;
}
.foot-rule button:hover{ background:rgba(255,255,255,.16); }

#app{ display:flex; flex-direction:column; min-height:100vh; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-bg{
  position:fixed; inset:0; z-index:800; padding:18px;
  background:rgba(24,17,2,.62); display:grid; place-items:start center;
  overflow-y:auto;
}
.modal{
  width:min(560px,100%); margin: 5vh 0;
  background:var(--white); border-radius:var(--r); box-shadow:0 24px 60px rgba(0,0,0,.4);
  overflow:hidden;
}
.modal-head{
  padding:16px 20px; background:#2A2107; color:#fff;
  display:flex; align-items:center; gap:12px;
}
.modal-head h2{ font-size:21px; text-transform:uppercase; }
.modal-head .x{
  margin-left:auto; background:none; border:0; color:#fff; font-size:22px;
  cursor:pointer; line-height:1; padding:2px 6px; border-radius:5px;
}
.modal-head .x:hover{ background:rgba(255,255,255,.18); }
.modal-body{ padding:20px; }
.modal-foot{
  padding:14px 20px; border-top:1px solid var(--line);
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; background:#FCFAF4;
}
.btn{
  font-family:var(--display); font-size:16px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:10px 18px; border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent;
}
.btn.ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ background:#F2ECDC; }
.btn.go{ background:var(--orange); color:#fff; }
.btn.go:hover{ background:var(--orange-bright); }
.btn.kill{ background:#8F1D06; color:#fff; }

.thumbrow{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.thumb{
  width:78px; height:56px; flex:none; border-radius:6px; object-fit:cover;
  background:#EFE9D8; border:1px solid var(--line);
}
.filebtn{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:8px 12px; border-radius:6px; cursor:pointer;
  border:1px dashed rgba(30,23,4,.34); background:#F6F1E3; color:#3E3109;
}
.filebtn:hover{ background:#EDE4CC; }
.hint{ font-family:var(--mono); font-size:10.5px; color:#8B7A4E; margin-top:4px; line-height:1.5; }

.rowitem{
  display:flex; align-items:center; gap:10px; padding:9px 11px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#FCFAF4; margin-bottom:8px;
}
.rowitem .grab{ font-family:var(--mono); font-size:11px; color:#8B7A4E; }
.rowitem .nm{ font-size:14.5px; font-weight:500; }
.rowitem .locked{ font-family:var(--mono); font-size:9.5px; color:#8B7A4E; margin-left:auto; }
.rowitem input.input{ flex:1; padding:7px 9px; font-size:14px; }

/* ============================================================
   TOAST
   ============================================================ */
#publishChip{
  position:fixed; z-index:940; right:18px; bottom:22px;
  display:flex; align-items:center; gap:11px;
  background:#2A2107; color:#fff; padding:11px 13px;
  border-radius:10px; border:1px solid #6B5714; box-shadow:var(--shadow);
  max-width:min(330px,calc(100vw - 36px));
}
#publishChip .pc-txt{ font-family:var(--mono); font-size:11px; line-height:1.45; color:#FFD27A; flex:1; }
#publishChip .pc-dot{
  width:9px; height:9px; flex:none; border-radius:50%; background:#FFD27A;
}
#publishChip.pc-work .pc-dot{ animation: pulse 1.1s ease-in-out infinite; }
#publishChip.pc-good .pc-dot{ background:#7BD18C; }
#publishChip.pc-good .pc-txt{ color:#BFE9C8; }
#publishChip.pc-bad{ border-color:#A5482F; }
#publishChip.pc-bad .pc-dot{ background:#FF8A65; }
#publishChip.pc-bad .pc-txt{ color:#FFC2AE; }
#publishChip .pc-acts{ display:flex; gap:6px; flex:none; }
@keyframes pulse{ 50%{ opacity:.28; } }
#publishChip button{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; cursor:pointer;
  background:var(--orange); color:#fff; border:0; border-radius:6px; padding:8px 11px;
}
#publishChip button:hover{ background:var(--orange-bright); }
@media (max-width:520px){ #publishChip{ left:18px; right:18px; bottom:14px; } }

#toast{
  position:fixed; z-index:950; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.toast{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  background:#2A2107; color:#fff; padding:11px 16px; border-radius:8px;
  box-shadow:var(--shadow); animation: pop .25s ease;
}
.toast.bad{ background:#8F1D06; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px);} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   TOKEN PROMPT  (bottom right, when autosave has no token)
   ============================================================ */
.opt{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  background:#EFE7D2; color:#6A5209; padding:2px 5px; border-radius:3px; margin-left:6px;
}
.checkline{
  display:flex; gap:8px; align-items:flex-start; margin-top:9px; cursor:pointer;
  font-family:var(--body); font-size:12.5px; line-height:1.4;
  text-transform:none; letter-spacing:normal; color:var(--ink-soft); font-weight:400;
}
.checkline input{ margin:2px 0 0; flex:none; }
.fieldnote{
  font-family:var(--mono); font-size:10.5px; color:#8B7A4E; margin-top:6px; line-height:1.5;
}

#tokenPrompt{
  position:fixed; z-index:945; right:18px; bottom:22px;
  width:min(330px, calc(100vw - 36px));
  background:#2A2107; color:#fff; border:1px solid #6B5714;
  border-radius:10px; padding:14px; box-shadow:var(--shadow);
}
#tokenPrompt .tp-head{
  display:flex; align-items:center; gap:9px; margin-bottom:8px;
  font-family:var(--display); font-size:17px; letter-spacing:.03em; text-transform:uppercase;
}
#tokenPrompt .tp-dot{
  width:9px; height:9px; flex:none; border-radius:50%; background:#FF8A65;
}
#tokenPrompt .tp-x{
  margin-left:auto; background:none; border:0; color:#D8C89A; font-size:20px;
  line-height:1; cursor:pointer; padding:0 4px;
}
#tokenPrompt .tp-x:hover{ color:#fff; }
#tokenPrompt .tp-msg{
  font-family:var(--mono); font-size:11px; line-height:1.5; color:#D8C89A; margin-bottom:10px;
}
#tokenPrompt .input{ background:#1B1504; color:#fff; border-color:#6B5714; margin-bottom:0; }
#tokenPrompt .input::placeholder{ color:#8B7A4E; }
#tokenPrompt .checkline{ color:#D8C89A; }
#tokenPrompt .tp-acts{ display:flex; gap:8px; margin-top:11px; }
#tokenPrompt .tp-acts .btn{ flex:1; font-size:15px; padding:9px 12px; }
#tokenPrompt .tp-err{
  font-family:var(--mono); font-size:11px; color:#FFC2AE; margin-top:9px; line-height:1.45;
}
@media (max-width:520px){ #tokenPrompt{ left:18px; right:18px; bottom:14px; } }

/* ============================================================
   BOOT SPLASH
   Covers the moment between first paint and boot working out
   whether the gate is needed, so the login placard never
   flashes up on a page change.
   ============================================================ */
#splash{
  position:fixed; inset:0; z-index:960;
  display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
    linear-gradient(180deg, #9A6E05 0%, #5E4204 100%);
  transition:opacity .24s ease;
}
#splash.out{ opacity:0; pointer-events:none; }
.sp-in{ display:flex; flex-direction:column; align-items:center; gap:16px; max-width:320px; text-align:center; }
.sp-lock{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:var(--orange); color:#fff;
}
.sp-bar{
  position:relative; width:150px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.22); overflow:hidden;
}
.sp-bar i{
  position:absolute; inset:0 auto 0 0; width:42%; border-radius:2px;
  background:var(--gold-light); animation:spSlide 1.15s ease-in-out infinite;
}
@keyframes spSlide{
  0%{ transform:translateX(-105%); } 100%{ transform:translateX(255%); }
}
/* Revealed by CSS alone, so a script that never loads still says something. */
.sp-note{
  font-family:var(--mono); font-size:11px; line-height:1.6; color:#E4D3A2;
  opacity:0; animation:spLate 0s linear 6s forwards;
}
@keyframes spLate{ to{ opacity:1; } }

/* While booting the gate stays unpainted underneath the splash. */
html.booting #gate{ visibility:hidden; }

.noscript-note{
  position:fixed; inset:0; z-index:970; display:grid; place-items:center;
  padding:28px; text-align:center;
  background:linear-gradient(180deg,#9A6E05 0%,#5E4204 100%);
  color:#fff; font-family:var(--mono); font-size:13px; line-height:1.7;
}