/* =====================================================================
   KILL DEVIL EXPLORERS CLUB — core stylesheet
   Kill Devil · Laka Lono · Omaha, Nebraska
   Shared by the member app, the admin sections and the bartender console.
   Tokens are frozen: do not introduce new colors or typefaces.
   ===================================================================== */

:root{
  /* ground */
  --navy:#151826;
  --navy2:#1E2234;
  --navy3:#272C42;
  --ink:#0d0f18;

  /* gold */
  --gold:#C9A65A;
  --gold-deep:#92671E;
  --gold-bright:#E2C170;

  /* text */
  --cream:#F3EBD8;
  --muted:rgba(243,235,216,.58);
  --faint:rgba(243,235,216,.38);

  /* lines */
  --line:rgba(201,166,90,.22);
  --line-soft:rgba(201,166,90,.12);

  /* signals — the only colors outside the passport palette, used for status only */
  --ok:#6FA96B;
  --warn:#C98A3C;
  --stop:#B4544E;

  /* type */
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;

  /* metrics */
  --side-w:236px;
  --doors-h:40px;
  --nav-h:78px;
  --pad:24px;
}

*{box-sizing:border-box}
html{background:var(--navy)}
body{background:transparent}   /* the rose watermark sits below the page but above the html ground; a body background would cover it */
html,body{margin:0;padding:0;color:var(--cream);
  font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-bright)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
svg{flex-shrink:0}
::selection{background:var(--gold-deep);color:var(--cream)}

input,textarea,select{font:inherit;color:var(--cream);background:var(--navy2);
  border:1px solid var(--line);border-radius:4px;padding:10px 12px;width:100%;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--faint)}
select{appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold);padding:0}

/* ---------------------------------------------------------------- type */
.disp{font-family:var(--serif);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold);line-height:1.05}
.serif{font-family:var(--serif)}
.big{font-family:var(--serif);font-weight:600;line-height:1}
.lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.rank-tag{font-family:var(--serif);font-style:italic;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);font-size:12px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.gold{color:var(--gold)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.stop{color:var(--stop)}
.num{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nowrap{white-space:nowrap}

/* ------------------------------------------------------------ primitives */
.row{display:flex;align-items:center;gap:12px}
.col{display:flex;flex-direction:column}
.between{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.rule{height:1px;background:var(--line)}

.card{background:var(--navy2);border:1px solid var(--line);border-radius:6px}
.card.pad{padding:16px 18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;
  border-radius:4px;background:var(--gold);color:var(--navy);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;transition:background .12s,transform .08s;white-space:nowrap}
.btn:hover{background:var(--gold-bright)}
.btn:active{transform:scale(.985)}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn.ghost:hover{background:rgba(201,166,90,.1)}
.btn.quiet{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn.quiet:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.btn.sm{height:34px;padding:0 14px;font-size:10px;letter-spacing:.16em}
.btn.lg{height:56px;font-size:14px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.35;pointer-events:none}

.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;
  border:1px solid var(--line);font-size:11px;color:var(--cream);white-space:nowrap}
.chip.dim{color:var(--faint);border-style:dashed}
.chip.on{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:600}
.chip.btn-chip:hover{border-color:var(--gold);cursor:pointer}

.stamp{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--gold);border-radius:3px;
  padding:3px 7px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  font-weight:600;transform:rotate(-4deg)}
.stamp.flat{transform:none}

.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:3px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.pill.on-shelf{color:var(--ok);border:1px solid rgba(111,169,107,.4)}
.pill.retired{color:var(--faint);border:1px solid var(--line-soft)}
.pill.reserve{color:var(--gold);border:1px solid var(--gold-deep)}
.pill.owed{color:var(--warn);border:1px solid rgba(201,138,60,.45)}
.pill.lapsed{color:var(--stop);border:1px solid rgba(180,84,78,.4)}

.avatar{border-radius:50%;background:var(--navy3);border:1.5px solid var(--gold);display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-style:italic;
  color:var(--gold);flex-shrink:0}
.avatar.plain{border-color:transparent}

/* a member's portrait slot, holding their rank rather than their initials */
.rank-avatar{border-radius:50%;background:var(--navy3);border:1.5px solid var(--gold);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

.bar{height:3px;background:rgba(201,166,90,.2);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);border-radius:2px;transition:width .4s}

/* --------------------------------------------------------- admin shell */
/* THE DOORS — one strip on every staff screen: Passport (the member's
   phone) · Bar (the stamp station) · Admin (the office). It answers "where
   am I and how do I get to the other two" in one glance. On the Passport it
   appears only in staff preview; a member never sees it. */
.doors{position:sticky;top:0;z-index:40;height:var(--doors-h);display:flex;align-items:center;gap:14px;
  padding:0 16px;background:var(--navy);border-bottom:1px solid var(--gold-deep);grid-column:1/-1}
.doors .db{display:flex;align-items:center;gap:9px;flex-shrink:0}
.doors .db img{width:22px}
.doors .dn{display:flex;align-items:center;gap:4px;margin:0 auto}
.doors .dn a{display:flex;align-items:center;gap:7px;height:28px;padding:0 13px;border-radius:14px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.doors .dn a:hover{color:var(--cream);background:var(--navy3)}
.doors .dn a.on{color:var(--gold);background:rgba(201,166,90,.14);font-weight:600}
.doors .dr{display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:11.5px;color:var(--muted)}
.doors .dr a{color:var(--gold);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
@media (max-width:640px){.doors{padding:0 10px;gap:8px}.doors .db .col{display:none}
  .doors .dn a{padding:0 9px;letter-spacing:.12em}.doors .dr .dr-id,.doors .dr .dr-crew{display:none}}

.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.shell.solo{grid-template-columns:1fr}
.shell:not(.solo) .doors .db{visibility:hidden}   /* the sidebar already carries the mark */

.side{background:var(--navy2);border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:var(--doors-h);height:calc(100vh - var(--doors-h));overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 18px;border-bottom:1px solid var(--line)}
.side-brand img{width:38px}
.side-nav{padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.side-sec{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  padding:14px 10px 7px;font-weight:600}
.side-link{display:flex;align-items:center;gap:11px;height:40px;padding:0 10px;border-radius:4px;
  color:var(--muted);font-size:13px;transition:background .12s,color .12s}
.side-link:hover{background:var(--navy3);color:var(--cream)}
.side-link.on{background:rgba(201,166,90,.12);color:var(--gold);font-weight:500}
.side-link .cnt{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.side-link.on .cnt{color:var(--gold)}
.side-foot{margin-top:auto;padding:14px 18px 18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px var(--pad) 18px;border-bottom:1px solid var(--line)}
.topbar h1{margin:0;font-family:var(--serif);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--gold);font-size:26px;line-height:1.05}
.topbar .sub{margin-top:5px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.body{padding:var(--pad);display:flex;flex-direction:column;gap:20px;flex:1}

/* ------------------------------------------------------------ stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.stat{background:var(--navy2);border:1px solid var(--line);border-radius:6px;padding:14px 16px;
  display:flex;flex-direction:column;gap:5px;text-align:left}
.stat .v{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;color:var(--cream);
  font-variant-numeric:tabular-nums}
.stat .k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.stat .s{font-size:11px;color:var(--faint)}
.stat.act{border-color:var(--gold-deep);cursor:pointer}
.stat.act:hover{border-color:var(--gold);background:var(--navy3)}
.stat.act .v{color:var(--gold)}

/* ---------------------------------------------------------------- table */
.tblwrap{background:var(--navy2);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tblhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.tblscroll{overflow-x:auto}
/* .tall makes the table its own scroll area so the header can stick */
.tblscroll.tall{max-height:calc(100vh - 360px);min-height:280px;overflow:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:660px}
.tbl th{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--navy2);position:sticky;top:0;z-index:2}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--gold)}
.tbl th .arw{color:var(--gold);margin-left:5px}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:rgba(201,166,90,.055)}
.tbl tbody tr.pick{cursor:pointer}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl .n{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums;font-size:15px}
.tbl .no{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:12px;letter-spacing:.04em}

.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:13px}
.empty .disp{font-size:15px;margin-bottom:6px}

/* --------------------------------------------------------------- search */
.search{display:flex;align-items:center;gap:10px;height:40px;padding:0 13px;border:1px solid var(--line);
  border-radius:4px;background:var(--navy);min-width:220px}
.search:focus-within{border-color:var(--gold)}
.search input{border:0;background:none;padding:0;height:100%}

/* -------------------------------------------------------------- drawer */
.scrim{position:fixed;inset:0;background:rgba(13,15,24,.72);opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:40}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--navy);
  border-left:1px solid var(--gold-deep);transform:translateX(100%);transition:transform .22s ease-out;
  z-index:41;display:flex;flex-direction:column;overflow-y:auto}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 22px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--navy);z-index:2}
.drawer-body{padding:20px 22px 28px;display:flex;flex-direction:column;gap:20px}
.drawer-foot{margin-top:auto;padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;
  position:sticky;bottom:0;background:var(--navy)}

/* --------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;background:rgba(13,15,24,.82);display:none;align-items:center;
  justify-content:center;z-index:50;padding:20px}
.modal.open{display:flex}
.sheet{width:100%;max-width:440px;background:var(--navy2);border:1px solid var(--gold);border-radius:8px;
  padding:24px;display:flex;flex-direction:column;gap:16px;animation:rise .2s ease-out}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

.pinrow{display:flex;gap:10px;justify-content:center}
.pinrow input{width:58px;height:66px;text-align:center;font-family:var(--serif);font-size:32px;
  font-weight:600;padding:0}

/* --------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,18px);background:var(--gold);
  color:var(--navy);padding:11px 18px;border-radius:4px;font-size:12px;font-weight:600;
  letter-spacing:.08em;opacity:0;pointer-events:none;transition:.22s;z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------- sparkline */
.spark{display:flex;align-items:flex-end;gap:3px;height:44px}
.spark i{flex:1;background:var(--gold-deep);border-radius:1px;min-height:2px;transition:height .3s}
.spark i.hi{background:var(--gold)}

/* ---------------------------------------------------------- distribution */
.dist{display:flex;height:26px;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.dist i{display:block;height:100%}
.dist-key{display:flex;flex-wrap:wrap;gap:14px}
.dist-key span{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
.dist-key b{width:9px;height:9px;border-radius:2px;display:block}

.fade{animation:fade .16s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------- breakpoints */
@media (max-width:1040px){
  :root{--pad:18px}
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line);padding:0 10px}
  .side-brand{border-bottom:0;padding:12px 8px;flex-shrink:0}
  .side-brand .col{display:none}
  .side-nav{flex-direction:row;padding:8px 0;gap:4px}
  .side-sec{display:none}
  .side-link{height:34px;white-space:nowrap;font-size:12px}
  .side-link .cnt{display:none}
  .side-foot{margin-top:0;margin-left:auto;border-top:0;padding:8px;flex-shrink:0}
  .side-foot .col{display:none}
}
@media (max-width:640px){
  .topbar h1{font-size:21px}
  .stat .v{font-size:25px}
}
@media print{
  .side,.topbar .btn,.tblhead .btn{display:none}
  body{background:#fff;color:#000}
}

/* ---------------------------------------------------------------- the stamp
   The seal is a rubber stamp coming down, not a fade-in: it drops from
   above, hits, squashes, settles a few degrees off true, and leaves a ring
   of ink spreading out from the impact. The screen jolts on the hit. Both
   the member's phone and the console show the same motion so the two sides
   of the bar see the same thing land. Ethan, Sep 3 2026: "add animation to
   the stamp". */
.seal{position:relative;transform:rotate(-8deg);animation:seal-slam .95s cubic-bezier(.16,1,.3,1) both;will-change:transform}
.seal>*{position:relative;z-index:1;animation:seal-text .45s ease-out .34s both}
.seal::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--gold);opacity:0;
  animation:seal-ring 1.1s ease-out .3s both;pointer-events:none}
.seal::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(201,166,90,.34),rgba(201,166,90,.10) 55%,rgba(201,166,90,0) 72%);
  opacity:0;animation:seal-ink 1.6s ease-out .3s both}
.stamp-hit{animation:stamp-jolt .55s ease-out .3s both}
@keyframes seal-slam{
  0%{transform:rotate(-26deg) scale(2.8) translateY(-60px);opacity:0;filter:blur(3px)}
  26%{opacity:1;filter:blur(0)}
  36%{transform:rotate(-8deg) scale(.88) translateY(0)}
  52%{transform:rotate(-8deg) scale(1.06)}
  70%{transform:rotate(-8deg) scale(.985)}
  100%{transform:rotate(-8deg) scale(1)}}
@keyframes seal-ring{0%{transform:scale(.92);opacity:.95}100%{transform:scale(2.1);opacity:0}}
@keyframes seal-ink{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}100%{opacity:.45;transform:scale(1.02)}}
@keyframes seal-text{0%{opacity:0;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes stamp-jolt{0%,100%{transform:translate(0,0)}18%{transform:translate(-4px,3px)}36%{transform:translate(4px,-2px)}
  54%{transform:translate(-2px,2px)}72%{transform:translate(2px,-1px)}}
@media (prefers-reduced-motion:reduce){
  .seal,.seal>*,.seal::before,.seal::after,.stamp-hit{animation:none}
  .seal::before{opacity:0}.seal::after{opacity:.45}.seal>*{opacity:1}}

/* ----------------------------------------------------------- small motions
   The passport ring draws its arc when the page opens; the bottle mark on
   an idle screen rides a slow swell; a list of rungs climbs in one after the
   other. Each is one keyframe and stops for reduced-motion. */
.ring-arc{stroke-dashoffset:0;animation:ring-draw 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes ring-draw{from{stroke-dashoffset:var(--dash)}to{stroke-dashoffset:0}}
.bob{animation:bob 4.5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.climb>*{animation:climb .5s ease-out both}
.climb>*:nth-child(1){animation-delay:.05s}.climb>*:nth-child(2){animation-delay:.15s}.climb>*:nth-child(3){animation-delay:.25s}
.climb>*:nth-child(4){animation-delay:.35s}.climb>*:nth-child(5){animation-delay:.45s}.climb>*:nth-child(6){animation-delay:.55s}
@keyframes climb{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the passport card is at sea: its chart drifts, very slowly */
.at-sea{animation:at-sea 26s ease-in-out infinite alternate}
@keyframes at-sea{from{background-position:22% 30%}to{background-position:78% 70%}}

/* ---------------------------------------------------------- the backdrop
   A faint compass rose sits in the corner of every page and turns once
   every four minutes — a watermark, not a feature. Pages lay it in with
   UI.watermark(); the member app puts it behind the phone, the office
   behind the main column. */
.rose-wm{position:fixed;right:-90px;bottom:-90px;width:380px;height:380px;pointer-events:none;z-index:-1;opacity:.09;
  animation:rose-wm 240s linear infinite}
.rose-wm svg{width:100%;height:100%}
@keyframes rose-wm{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width:760px){.rose-wm{width:260px;height:260px;right:-70px;bottom:40px;opacity:.06}}
/* a short wave under a page title, in place of a plain rule */
.wave{display:block;width:64px;height:8px;margin:6px auto 0;opacity:.7}
@media (prefers-reduced-motion:reduce){.rose-wm{animation:none}}
@media (prefers-reduced-motion:reduce){.ring-arc,.bob,.climb>*,.at-sea{animation:none}.climb>*{opacity:1}}

/* the passport seal: inked a touch unevenly, never solid, so it reads as a stamp not a badge */
.pseal{opacity:.92;mix-blend-mode:screen;filter:drop-shadow(0 0 0 rgba(0,0,0,0));flex-shrink:0}
.pseal-in{animation:seal-slam .95s cubic-bezier(.16,1,.3,1) both}
.pp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-word{font-family:var(--serif);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.34em;font-size:12px;color:var(--gold)}
.pp-word small{display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:600;font-size:8px;letter-spacing:.26em;color:var(--muted);margin-top:3px}
.pp-edge{border-left:3px dotted var(--gold-deep)}
/* the seal, three times the size it was: full width of a phone card, a big
   stamp on the desktop card (Ethan, Sep 3 2026: "triple size") */
.pp-sealwrap{width:min(312px,100%);margin:2px 0 4px}
.pp-sealwrap svg.pseal{width:100%;height:auto}