/* ============================================================
   CISCA Seat Book — all visual styling.
   Colors live in the :root block; sizes are commented.
   ============================================================ */
:root{
  --bg:#14100d; --bg2:#1e1813; --card:#282019; --card2:#33291f;
  --ink:#f0e7d8; --ink2:#bda98e; --ink3:#8a7a64;
  --accent:#e2a355; --accent2:#9c6830; --gold:#f4c47c;
  --rare:#d05a40; --ok:#7ba05b; --line:#3d3227; --line2:#4d4033;
  --shadow:0 6px 20px rgba(0,0,0,.45);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Source Sans 3','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* The browser's own rule for [hidden] is display:none at the weakest possible
   strength, so ANY inline display: wins over it and the element stays on screen.
   Several elements here carry inline display:flex, so hidden must be enforced. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);padding-bottom:84px;
  background-image:radial-gradient(ellipse 90% 40% at 50% -5%, #2a2015 0%, transparent 60%);}
h1,h2,h3{font-family:var(--serif);font-weight:600}
header{position:sticky;top:0;z-index:50;background:#171310f2;border-bottom:1px solid var(--line);padding:10px 14px 8px;backdrop-filter:blur(10px)}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
h1{font-size:19px;letter-spacing:.4px;color:var(--gold);font-weight:600}
h1 small{color:var(--ink3);font-size:12px;font-family:var(--sans);font-weight:400;letter-spacing:.5px}
.userbox{margin-left:auto;font-size:12px;color:var(--ink2);display:flex;gap:10px;align-items:center}
.userbox button{background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:8px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.userbox button:hover{color:var(--gold);border-color:var(--accent2)}
.searchrow{display:flex;gap:8px;margin-top:9px}
input[type=search],input[type=email],input[type=password],input[type=text],textarea{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 13px;color:var(--ink);font:inherit;font-size:14px;outline:none;transition:border-color .15s}
input:focus,textarea:focus{border-color:var(--accent2)}
input[type=search]{flex:1;min-width:0}
select{background:var(--bg2);border:1px solid var(--line);border-radius:9px;color:var(--ink2);font:inherit;font-size:13px;padding:6px 6px;max-width:112px}
.chips{display:flex;gap:5px;overflow-x:auto;margin-top:9px;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--bg2);border:1px solid var(--line);color:var(--ink2);border-radius:15px;padding:4px 13px;font-size:13px;cursor:pointer;user-select:none;transition:all .15s}
.chip:hover{border-color:var(--accent2);color:var(--gold)}
.chip.on{background:linear-gradient(160deg,var(--accent2),#7a4d20);color:#fff;border-color:var(--accent2)}
main{max-width:1100px;margin:0 auto;padding:12px}
.count{color:var(--ink3);font-size:13px;margin:2px 2px 10px;font-style:italic}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:11px}
.card{background:linear-gradient(170deg,var(--card),#241c15);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 10px 26px rgba(0,0,0,.55)}
.card:active{transform:scale(.97)}
.card img{width:100%;aspect-ratio:1.15;object-fit:contain;background:#0c0a07;display:block}
.card .cb{padding:8px 10px 10px}
.cid{font-size:11px;color:var(--accent);letter-spacing:.8px;font-weight:600}
.cname{font-size:13px;line-height:1.25;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.cmeta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:11px;color:var(--ink3)}
.rate{border-radius:9px;padding:0 8px;font-size:11px;font-weight:600;color:#fff;background:var(--ok)}
.rate.r7{background:#b07830}.rate.r9{background:var(--rare)}
.pagegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pagegrid img{width:100%;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;background:#fff;transition:transform .15s}
.pagegrid img:hover{transform:scale(1.02)}
.plabel{font-size:12px;color:var(--ink3);text-align:center;margin-top:4px}

/* ---------- bottom navigation (bigger touch targets) ---------- */
nav{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;background:#171310f5;border-top:1px solid var(--line);backdrop-filter:blur(10px);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;background:none;border:none;color:var(--ink3);font:inherit;font-size:13px;font-weight:600;padding:12px 0 10px;cursor:pointer;position:relative;transition:color .15s;min-height:62px}
nav button .ico{display:block;font-size:24px;line-height:1.25;margin-bottom:2px}
nav button.on{color:var(--gold)}
nav button.on::after{content:'';position:absolute;top:0;left:25%;right:25%;height:3px;background:var(--gold);border-radius:0 0 3px 3px}
nav button .lock{position:absolute;top:8px;right:calc(50% - 26px);font-size:10px}

.modal{position:fixed;inset:0;background:rgba(8,6,4,.88);z-index:100;display:none;align-items:flex-end;justify-content:center}
.modal.open{display:flex}
.sheet{background:var(--bg2);border-radius:18px 18px 0 0;max-width:640px;width:100%;max-height:88vh;overflow-y:auto;padding:20px 20px 34px;border:1px solid var(--line2);border-bottom:none}
.sheet .imgs{display:flex;gap:10px;overflow-x:auto}
.sheet .imgs img{height:220px;border-radius:12px;background:#0c0a07;flex:0 0 auto;max-width:90%;object-fit:contain;border:1px solid var(--line)}
.sheet h2{color:var(--gold);font-size:24px;margin:14px 0 2px}
.sheet .sid{color:var(--ink3);font-size:13px}
.kv{margin-top:12px;border-top:1px solid var(--line)}
.kv div{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv b{flex:0 0 90px;color:var(--ink3);font-weight:400;font-style:italic}
.viewer{position:fixed;inset:0;z-index:120;background:#000;display:none;align-items:center;justify-content:center}
.viewer.open{display:flex}
.viewer img{max-width:100%;max-height:100%}
.viewer .x{position:absolute;top:14px;right:16px;font-size:26px;color:#fff;background:#0008;border:none;border-radius:50%;width:42px;height:42px;cursor:pointer}
.btn{background:linear-gradient(160deg,var(--accent2),#7a4d20);color:#fff;border:none;border-radius:10px;padding:12px 22px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);transition:filter .15s}
.btn:hover{filter:brightness(1.15)}
.btn:disabled{opacity:.45}
.btn.ghost{background:var(--card);border:1px solid var(--line2);color:var(--ink)}
.btn.gold{background:linear-gradient(160deg,var(--gold),var(--accent));color:#241a0e}
.cam-wrap{max-width:640px;margin:0 auto;text-align:center}
.cam-box{position:relative;background:#0c0a07;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:12px 0}
video,#snapPrev{width:100%;max-height:56vh;display:block;object-fit:contain}
.cam-controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:12px 0;align-items:center}
.shutter{width:70px;height:70px;border-radius:50%;border:4px solid #fff;background:radial-gradient(var(--gold),var(--accent2));cursor:pointer;box-shadow:var(--shadow)}
.hint{color:var(--ink3);font-size:13px;font-style:italic;margin-top:6px}
.results{margin-top:18px;text-align:left}
.match{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:10px;cursor:pointer;align-items:center;transition:border-color .15s}
.match:hover{border-color:var(--accent2)}
.match img{width:86px;height:76px;object-fit:contain;background:#0c0a07;border-radius:10px;flex:0 0 auto}
.match .score{margin-left:auto;text-align:center;flex:0 0 62px}
.match .score b{font-size:19px;color:var(--gold);font-family:var(--serif)}
.match .score span{display:block;font-size:10px;color:var(--ink3)}
.notice{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:10px;padding:11px 15px;font-size:13px;color:var(--ink2);margin:12px 0;text-align:left}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--ink3);border-top-color:var(--gold);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-3px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
#loadmore{display:block;margin:18px auto}

/* ---------- home / landing ---------- */
.hero{position:relative;border-radius:18px;overflow:hidden;margin:4px 0 22px;border:1px solid var(--line2);box-shadow:var(--shadow);min-height:340px;display:flex;align-items:flex-end}
.hero::before{content:'';position:absolute;inset:0;background:url('../hero.jpg') center 28%/cover no-repeat;opacity:.55;filter:sepia(.3) contrast(1.05)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(175deg,rgba(20,16,13,.15) 0%,rgba(20,16,13,.55) 55%,rgba(20,16,13,.96) 100%)}
.hero>div{position:relative;z-index:2;padding:110px 26px 26px}
.hero .est{color:var(--gold);font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700}
.hero h2{font-size:clamp(28px,6vw,44px);line-height:1.12;color:var(--ink);margin:8px 0 10px;font-weight:800}
.hero p{color:var(--ink2);max-width:560px;font-size:16px}
.hero .cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.stat{flex:1 1 120px;background:linear-gradient(170deg,var(--card),#221a13);border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:26px;color:var(--gold)}
.stat span{font-size:12px;color:var(--ink3);letter-spacing:.5px}
.about{max-width:860px;margin:0 auto;font-size:15px}
.about .sectitle{color:var(--gold);font-size:24px;margin:30px 0 4px;text-align:center}
.about .secsub{color:var(--ink3);text-align:center;font-style:italic;margin-bottom:18px;font-size:13px}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.feat>div,.feat>a{background:linear-gradient(170deg,var(--card),#231b14);border:1px solid var(--line);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s}
.feat>a:hover,.feat>div:hover{transform:translateY(-3px);border-color:var(--accent2)}
.feat .fi{font-size:26px}
.feat h3{color:var(--accent);font-size:18px;margin:8px 0 6px}
.feat p{color:var(--ink2);font-size:14px}
.soon{position:relative;overflow:hidden}
.soon::after{content:'COMING SOON';position:absolute;top:14px;right:-34px;transform:rotate(38deg);background:var(--rare);color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;padding:3px 40px}
.contactcard{background:linear-gradient(170deg,#2b2117,#201810);border:1px solid var(--line2);border-radius:18px;padding:26px;margin:16px 0;text-align:center}
.contactcard h3{color:var(--gold);font-size:22px;margin-bottom:6px}
.contactcard p{color:var(--ink2);margin:4px 0}
.contactcard a{color:var(--accent);text-decoration:none;word-break:break-all}
.contactcard a:hover{text-decoration:underline}
.joinform{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px;text-align:left}
.joinform textarea{min-height:110px;resize:vertical}
.introtext p{margin-bottom:12px;color:var(--ink2);text-align:justify}
.foot{color:var(--ink3);font-size:12px;text-align:center;margin:34px 0 10px}

/* ---------- auth / pending / admin ---------- */
.auth-wrap{max-width:420px;margin:20px auto}
.auth-card{background:linear-gradient(170deg,var(--card),#221a13);border:1px solid var(--line2);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.auth-card h2{color:var(--gold);font-size:26px;text-align:center}
.auth-card .sub{text-align:center;color:var(--ink3);font-size:13px;margin:4px 0 18px}
.auth-card input{width:100%;margin-bottom:10px}
.auth-card .btn{width:100%;margin-top:4px}
.auth-alt{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:12px;margin:14px 0}
.auth-alt::before,.auth-alt::after{content:'';flex:1;height:1px;background:var(--line)}
.gbtn{width:100%;background:#fff;color:#333;border:none;border-radius:10px;padding:12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.autherr{color:#e08a75;font-size:13px;margin:8px 0;text-align:center;min-height:1em}
.auth-links{text-align:center;font-size:13px;margin-top:12px;color:var(--ink3)}
.auth-links a{color:var(--accent);cursor:pointer;text-decoration:underline}
.demobox{margin-top:16px;border:1px dashed var(--line2);border-radius:12px;padding:10px 14px;font-size:12px;color:var(--ink3);text-align:center}
.demobox code{color:var(--gold);background:#0c0a07;border-radius:5px;padding:1px 6px}
.pendingcard{max-width:460px;margin:40px auto;text-align:center;background:linear-gradient(170deg,var(--card),#221a13);border:1px solid var(--line2);border-radius:20px;padding:34px 26px}
.pendingcard .big{font-size:46px}
.pendingcard h2{color:var(--gold);margin:10px 0 8px}
.pendingcard p{color:var(--ink2);font-size:14px}
.admin-row{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;flex-wrap:wrap}
.admin-row .em{font-weight:600}
.admin-row .when{color:var(--ink3);font-size:12px}
.admin-row .sp{margin-left:auto;display:flex;gap:8px}
.admin-row button{padding:8px 14px;font-size:13px}

/* back button */
.backbtn{background:var(--bg2);border:1px solid var(--line2);color:var(--gold);border-radius:10px;width:38px;height:34px;font-size:18px;cursor:pointer;line-height:1}
.backbtn:hover{border-color:var(--accent2)}

/* shutter floats on the viewfinder like a native camera app */
.cam-box .shutter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:6}
.cam-box{min-height:120px}
#cropMark{position:absolute;border:3px solid var(--gold);border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,.35);pointer-events:none;z-index:4}
#zoomSlider{accent-color:var(--accent)}

/* checkboxes must never inherit the full-width input rule */
.auth-card input[type=checkbox]{width:auto;flex:0 0 auto}

/* detail-sheet image captions (book plate vs member photo) */
.sheet .imgs figure img{height:220px;border-radius:12px;background:#0c0a07;max-width:none;object-fit:contain;border:1px solid var(--line)}

/* ---------- My Seats nav icon: real cast iron seat, tinted by nav state ---------- */
/* the CISCA logo carries fine cut-out lettering, so it gets a little more
   room than a plain glyph would need to stay legible in the tab bar */
nav button .ico.seaticon{
  width:30px;height:30px;margin:0 auto 1px;display:block;background:currentColor;
  -webkit-mask:url('../icon-seat-nav.png') no-repeat center/contain;
          mask:url('../icon-seat-nav.png') no-repeat center/contain;
}

/* ---------- Camera: a true full-screen viewfinder, like a native camera app ----------
   The live view is lifted OUT of page flow (position:fixed) so it can never be
   squeezed by the header, the maker box or the page padding. It stops exactly
   where the bottom nav starts, so the shutter is always fully visible and the
   tabs stay reachable.                                                        */
body.cam-live{overflow:hidden}
body.cam-live header .searchrow,
body.cam-live header .chips,
body.cam-live #view-camera h2,
body.cam-live #view-camera .hint,
body.cam-live #view-camera .cam-controls,
body.cam-live #view-camera #makerRow,
body.cam-live #view-camera #makerFilter,
body.cam-live #view-camera #targetRow,
body.cam-live #view-camera .results{display:none !important}

body.cam-live .cam-box{
  position:fixed !important;
  top:0; left:0; right:0;
  bottom:var(--navh, 64px);
  width:auto; height:auto; max-height:none; min-height:0;
  margin:0; padding:0; border:0; border-radius:0;
  background:#000; z-index:55; overflow:hidden;
  display:block;
}
body.cam-live .cam-box video{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  max-width:none; max-height:none;
  object-fit:cover; display:block;
}
body.cam-live .cam-box .shutter{
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
}

/* after the shot: preview stays large but the page scrolls normally again */
.cam-box video,.cam-box #snapPrev{max-height:62vh}
@media (max-height:740px){ .cam-box video,.cam-box #snapPrev{max-height:54vh} }

/* admin: inline member-number box + search */
.admin-row .midIn{background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--ink)}
#adminSearch{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:10px 13px;color:var(--ink);font:inherit;font-size:14px;outline:none}
#adminSearch:focus{border-color:var(--accent2)}
#adminCount{margin-top:6px}

/* shutter sits on a soft scrim so it never disappears into a bright photo */
.cam-box::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;z-index:5;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none;opacity:0;transition:opacity .15s}
body.cam-live .cam-box::after{opacity:1}
.cam-box .shutter{box-shadow:0 0 0 3px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.5)}
.cam-box .shutter:active{transform:translateX(-50%) scale(.93)}
/* My Collection: several photos per seat — front, reverse, maker's mark */
.colthumbs{background:#0c0a07;border:1px solid var(--line);border-radius:12px;padding:8px}
#colThumbs{display:flex;gap:8px;flex-wrap:wrap}
.colthumb{position:relative;width:76px;height:76px;flex:0 0 auto}
.colthumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;background:#000;border:1px solid var(--line2);display:block}
.colthumb button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line2);background:#1a1410;color:var(--ink);font-size:13px;line-height:1;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.colthumb button:hover{color:var(--rare);border-color:var(--rare)}
/* the detail sheet scrolls through all of a seat's photos */
.sheet .imgs img{cursor:zoom-in}