:root{
  --bg:#0b0b0d; --card:#151518; --card-2:#1c1c21; --ink:#ededf0; --muted:#9a9aa3;
  --line:#2a2a31; --side:#000; --side-ink:#cfd0d6; --side-mut:#74747e;
  --gold:#e4c25c; --gold-2:#f0d27e; --gold-deep:#caa63f; --on-gold:#0b0b0d;
  --amber:#e4c25c; --green:#6ee7a3; --red:#f0867d; --blue:#8ab4f8; --gray:#9a9aa3;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.35);
  --font-display:'Oswald',Impact,'Arial Narrow',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{touch-action:manipulation}   /* kill double-tap-to-zoom; pinch & drag zoom still work */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration:none}
h1{font-family:var(--font-display); font-weight:600; font-size:30px; margin:0 0 2px; letter-spacing:.01em; text-transform:uppercase}
h2{font-size:16px; margin:0 0 14px; letter-spacing:.01em; font-weight:600}
.muted{color:var(--muted)}
code{background:#26262c; padding:1px 6px; border-radius:6px; font-size:.9em; color:var(--gold-2)}

/* shell */
.shell{display:flex; min-height:100vh}
.side{
  width:248px; flex:0 0 248px; background:var(--side); color:var(--side-ink);
  display:flex; flex-direction:column; padding:24px 16px; position:sticky; top:0; height:100vh;
  border-right:1px solid #171717;
}
.brand{font-family:var(--font-display); font-weight:600; font-size:20px; color:#fff; line-height:1.05; letter-spacing:.04em; text-transform:uppercase; display:block}
.brand span{display:block; font-family:-apple-system,sans-serif; font-weight:600; font-size:10.5px; color:var(--gold); text-transform:uppercase; letter-spacing:.22em; margin-top:4px}
.side nav{display:flex; flex-direction:column; gap:3px; margin-top:30px}
.side nav a{
  color:var(--side-ink); padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500; letter-spacing:.01em;
}
.side nav a:hover{background:rgba(255,255,255,.05); color:#fff}
.side nav a.active{background:var(--gold); color:var(--on-gold); font-weight:600}
.main{flex:1; padding:28px 40px; max-width:1060px}
.page-head{margin-bottom:24px}
#navtoggle{display:none}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px}
.page-title{margin:0}
.menu-btn{display:none; font-size:20px; cursor:pointer; color:var(--ink)}
.user-chip{display:inline-flex; align-items:center; gap:14px; font-size:14px}
.user-chip .nm{color:var(--ink); font-weight:600}

/* flash */
.flash{padding:12px 16px; border-radius:12px; margin-bottom:18px; font-size:14px; font-weight:500; border:1px solid transparent}
.flash.ok{background:rgba(110,231,163,.1); color:var(--green); border-color:rgba(110,231,163,.25)}
.flash.err{background:rgba(240,134,125,.1); color:var(--red); border-color:rgba(240,134,125,.25)}
.flash.warn{background:rgba(228,194,92,.1); color:var(--gold); border-color:rgba(228,194,92,.3)}

/* cards + grid */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); margin-bottom:20px}
.cols2{display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:20px; align-items:stretch; margin-bottom:20px}
.cols2 .card{margin-bottom:0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:20px}
.stat{display:flex; flex-direction:column; gap:6px; margin:0}
a.stat{transition:transform .08s ease, border-color .12s ease}
a.stat:hover{transform:translateY(-2px); border-color:var(--gold)}
.stat-num{font-family:var(--font-display); font-size:34px; font-weight:600; letter-spacing:.01em; color:var(--gold)}
.stat-lbl{font-size:13px; color:var(--muted)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--card-2); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; transition:all .1s; white-space:nowrap}
.btn:hover{border-color:#3a3a43; background:#24242a}
.btn.primary{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}
.btn.primary:hover{background:var(--gold-2); border-color:var(--gold-2)}
.btn.full{width:100%; justify-content:center; margin-top:6px}
.btn.sm{padding:6px 11px; font-size:13px}
.btn.icon{padding:6px 9px; font-size:14px; line-height:1}
.btn.danger{color:var(--red); border-color:rgba(240,134,125,.35); background:transparent}
.btn.danger:hover{background:rgba(240,134,125,.1)}
.btnrow{display:flex; flex-wrap:wrap; gap:10px}

/* tables */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:0 12px 10px; border-bottom:1px solid var(--line); font-weight:600}
td{padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
td .inline-form{align-items:center}
.tc th, .tc td{text-align:center}
.tc td .inline-form{justify-content:center}
tr:last-child td{border-bottom:none}
.rowtoday td{background:rgba(228,194,92,.06)}
.rowtoday td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.table-wrap{overflow-x:auto}
.compact td{padding:7px 12px}
.compact .minsedit{padding:6px 10px; margin:0}
.sololist{display:flex; flex-direction:column; max-width:520px}
.solorow{display:flex; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--line)}
.solorow:last-child{border-bottom:none}
.solorow .rlabel{width:72px; color:var(--muted); font-size:13px; flex:none}
.solorow .rname{font-weight:600; overflow-wrap:anywhere; min-width:0}
.solorow .rmin{margin-left:auto; color:var(--muted); font-size:13px}
tr[data-id]{cursor:default}
#runorder tr{background:var(--card); transition:box-shadow .12s ease, background .12s ease, transform .12s ease}
tr.dragging{background:var(--card-2); box-shadow:0 0 0 2px var(--gold), 0 12px 30px rgba(0,0,0,.55); position:relative; z-index:6; transform:scale(1.015)}
tr.dragging .grip{color:var(--gold); background:rgba(228,194,92,.18)}
.grip{display:inline-block; margin-right:9px; color:var(--muted); cursor:grab; user-select:none; font-size:17px; vertical-align:middle; touch-action:none; padding:3px; border-radius:5px; transition:color .12s ease, background .12s ease}
.grip:hover{color:var(--gold); background:rgba(228,194,92,.12)}
.grip:active{cursor:grabbing; color:var(--gold); background:rgba(228,194,92,.18)}
.rownum{vertical-align:middle}
body.ro-dragging-active{user-select:none; -webkit-user-select:none; cursor:grabbing}
.rosaved{color:var(--gold); opacity:0; transition:opacity .2s; margin-left:8px; font-weight:500}
.rosaved.show{opacity:1}

/* pull-to-refresh indicator */
#ptr-ind{position:fixed; top:-48px; left:50%; transform:translateX(-50%); z-index:300; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--card-2); border:1px solid var(--line); border-radius:50%; box-shadow:0 6px 18px rgba(0,0,0,.45); opacity:0; pointer-events:none; will-change:transform,opacity}
#ptr-ind.show{opacity:1}
.ptr-spin{width:18px; height:18px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--muted); transition:transform .15s}
#ptr-ind.ready .ptr-spin{border-top-color:var(--gold); transform:rotate(180deg)}
#ptr-ind.spinning .ptr-spin{border-top-color:var(--gold); animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* pills */
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid transparent; white-space:nowrap}
.pill.amber{background:rgba(228,194,92,.12); color:var(--gold); border-color:rgba(228,194,92,.3)}
.pill.green{background:rgba(110,231,163,.1); color:var(--green); border-color:rgba(110,231,163,.28)}
.pill.red{background:rgba(240,134,125,.1); color:var(--red); border-color:rgba(240,134,125,.28)}
.pill.blue{background:rgba(138,180,248,.1); color:var(--blue); border-color:rgba(138,180,248,.28)}
.pill.gray{background:rgba(154,154,163,.1); color:var(--gray); border-color:rgba(154,154,163,.25)}
.pill.purple{background:rgba(176,156,255,.12); color:#b69cff; border-color:rgba(176,156,255,.3)}

/* act ratings (scouts/curators) */
.rate{display:inline-flex; gap:7px; align-items:center}
.rate form{margin:0; display:inline-flex}
.rate .dot{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); background:transparent; padding:0; cursor:pointer; opacity:.3; transition:opacity .1s, transform .1s; flex:none}
.rate .dot.red{background:var(--red)} .rate .dot.yellow{background:var(--gold)} .rate .dot.green{background:var(--green)}
.rate .dot:hover{opacity:.7}
.rate .dot.on{opacity:1; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px currentColor}
.rate .dot.red.on{color:var(--red)} .rate .dot.yellow.on{color:var(--gold)} .rate .dot.green.on{color:var(--green)}
.rate.ro .dot{cursor:default; opacity:.25} .rate.ro .dot.on{opacity:1; box-shadow:none}

/* forms */
label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:14px}
input,select,textarea{
  display:block; width:100%; margin-top:6px; padding:10px 12px; font-size:14px; font-weight:400;
  border:1px solid var(--line); border-radius:10px; background:#0f0f12; color:var(--ink); font-family:inherit;
}
/* iOS auto-zooms into any control with font-size < 16px on focus — force 16px on mobile */
@media(max-width:760px){ input,select,textarea{font-size:16px !important} }
input[type=radio],input[type=checkbox]{width:auto; display:inline-block; margin:0; accent-color:var(--gold); flex:none}
input::placeholder,textarea::placeholder{color:#5c5c66}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(228,194,92,.18)}
textarea{min-height:84px; resize:vertical}
select{appearance:none; -webkit-appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' stroke='%239a9aa3' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.78); opacity:.85; cursor:pointer; padding-left:4px}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type=date]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit{color:var(--ink); font-weight:500}
input[type=date]::-webkit-datetime-edit-fields-wrapper,input[type=time]::-webkit-datetime-edit-fields-wrapper{color:var(--ink)}
/* iOS renders the date/time value centered by default — pin it left, keep native vertical centering */
input[type=date],input[type=time]{min-height:42px}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:0 22px}
.pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px}
.row4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 14px}
.personrow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:0 14px; align-items:end}
.personrow label{margin-bottom:0}
.row5{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr auto; gap:0 14px; align-items:end}
.row5 label{margin-bottom:0}
.merge-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:0 14px; align-items:end}
.form-row3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; max-width:1000px}
.form-row4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 18px; align-items:end}
.inline-form{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
dialog.modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; max-height:90vh; overflow:auto; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:26px; width:min(440px,92vw); box-shadow:var(--shadow)}
dialog.modal::backdrop{background:rgba(0,0,0,.6)}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px}
.modal-x{position:absolute; top:14px; right:14px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--muted); font-size:26px; line-height:1; cursor:pointer; padding:0; border-radius:8px}
.modal-x:hover{background:var(--card-2); color:var(--ink)}
/* add-forms that open as a centered popup at all widths (opened by a + button) */
.deskpop{display:none}
.deskpop.open{display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0;
  width:min(760px,94vw); max-height:90vh; overflow:auto; z-index:60; padding:22px; border-radius:14px;
  background:var(--card); border:1px solid var(--line); box-shadow:0 16px 40px rgba(0,0,0,.6); overscroll-behavior:contain}
#neweventbox.open{width:min(520px,94vw)}
.deskpop .personrow{grid-template-columns:repeat(2,minmax(0,1fr))}

/* auth */
.auth-main{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(900px 460px at 50% -8%, rgba(228,194,92,.10) 0%, var(--bg) 60%)}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px; width:100%; max-width:382px; box-shadow:var(--shadow)}
.brand.big{font-size:24px; margin-bottom:6px}
.login-card form{margin-top:14px}

/* public application page */
.pub{max-width:680px; margin:0 auto; padding:0 20px 80px}
.pub-hero{margin:36px 0 26px}
.pub-hero .kicker{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600}
.pub-hero h1{font-size:38px; line-height:1.05; margin:10px 0 0}
.pub-lead{color:var(--muted); font-size:15px; line-height:1.6; margin:16px 0 0}
.pub-meta{font-size:13px; color:var(--muted); margin-top:14px}
.pub-meta a{font-weight:600}
.pubcard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin-bottom:16px; box-shadow:var(--shadow)}
.q{margin-bottom:0}
.q + .q{margin-top:22px}
.qlabel{display:block; font-size:15px; font-weight:600; margin-bottom:6px; color:var(--ink)}
.qhint{font-size:13px; color:var(--muted); font-weight:400; margin-left:4px}
.req{color:var(--red)}
.choices{display:flex; flex-direction:column; gap:2px; margin-top:4px}
.choices label{display:flex; align-items:center; gap:11px; font-weight:400; font-size:14px; margin:0; padding:9px 2px; cursor:pointer}
.choices.cols{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0 16px}
/* multi-select dropdown (e.g. angles) */
.msdrop{position:relative; margin-top:4px}
.msdrop>summary{list-style:none; cursor:pointer; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#0f0f12; color:var(--ink); font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.msdrop>summary::-webkit-details-marker{display:none}
.msdrop>summary::after{content:'▾'; color:var(--muted); font-size:12px}
.msdrop[open]>summary{border-color:var(--gold); box-shadow:0 0 0 3px rgba(228,194,92,.18)}
.msdrop[open]>summary::after{content:'▴'}
.msdrop-panel{position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px); background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 12px 32px rgba(0,0,0,.55); max-height:240px; overflow:auto}
.msdrop-panel label{display:flex; align-items:center; gap:10px; font-weight:400; font-size:14px; margin:0; padding:8px 9px; border-radius:8px; cursor:pointer}
.msdrop-panel label:hover{background:rgba(255,255,255,.06)}
.pub-done{text-align:center; padding:46px 24px}
.pub-done .tick{font-size:40px; color:var(--green)}
.pub-submit{margin-top:8px}

/* misc */
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.empty{text-align:center; color:var(--muted); padding:34px 0}
.subtle{font-size:13px; color:var(--muted)}
.right{text-align:right}
hr{border:none; border-top:1px solid var(--line); margin:20px 0}

.nav-overlay{display:none}
.only-sm{display:none}
.sm-only-flex{display:none}
/* New-event form: one row on desktop, grouped+stacked on mobile */
.newevent-wrap{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap}
.newevent-wrap label{margin-bottom:0}
.newevent-wrap > .ne-title{flex:1 1 100%}
.newevent-wrap > .ne-type, .newevent-wrap > .ne-date, .newevent-wrap > .ne-time, .newevent-wrap > .ne-venue{flex:1 1 calc(50% - 7px)}

@media(max-width:760px){
  .only-sm{display:inline}
  .sm-only-flex{display:flex; align-items:center}
  /* event date-range chips: keep on one line, shrink to fit (scroll if truly needed) */
  #ev-chips{flex-wrap:nowrap; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  #ev-chips .btn.sm{padding:6px 9px; white-space:nowrap; flex:none}
  .newevent-wrap{flex-direction:column; align-items:stretch}
  .newevent-wrap > *{flex:none !important}
  /* forms that become a popup sheet on phones (opened by a trigger button) */
  .mpop{display:none}
  .mpop.open{display:block; position:fixed; top:50%; left:14px; right:14px; transform:translateY(-50%); z-index:60; margin:0;
    max-height:calc(100vh - 28px); overflow:auto; padding:18px; border-radius:14px;
    background:var(--card); border:1px solid var(--line); box-shadow:0 16px 40px rgba(0,0,0,.6); overscroll-behavior:contain}
  /* rows that should stay horizontal & compact on mobile (lineup controls) */
  .card .inline-form.kr{flex-direction:row !important; flex-wrap:wrap; align-items:flex-end; gap:8px}
  .card .inline-form.kr > *{width:auto !important; flex:0 0 auto !important; margin:0 !important}
  .card .inline-form.kr > .grow{flex:1 1 90px !important; min-width:0 !important}
  .card .inline-form.kr input[type=number]{width:60px !important}
  .card .inline-form.kr select{max-width:150px}
  /* in-table move/delete group stays on one line; keep the move dropdown compact */
  .compact td .inline-form{flex-wrap:nowrap}
  .compact td select{max-width:140px}
  .side{position:fixed; left:0; top:0; width:min(264px,82vw); flex-basis:auto; transform:translateX(-100%); transition:transform .2s; z-index:30}
  #navtoggle:checked ~ .shell .side{transform:translateX(0)}
  #navtoggle:checked ~ .shell .nav-overlay{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:25}
  .main{padding:18px 16px; max-width:100%}
  .menu-btn{display:inline-block}
  h1{font-size:22px}
  .topbar{gap:10px; margin-bottom:20px}
  .card{padding:18px}
  .form-row,.form-row3,.form-row4{grid-template-columns:1fr}
  .row4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .personrow{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px}
  .row5{grid-template-columns:1fr; gap:16px 14px}
  .merge-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:0 8px; align-items:end}
  .cols2{grid-template-columns:1fr}
  /* stack form controls and override fixed inline widths */
  .card .inline-form{flex-direction:column; align-items:stretch}
  .card .inline-form > label,
  .card .inline-form > input,
  .card .inline-form > select,
  .card .inline-form > button,
  .card .inline-form > form{width:100% !important; margin-left:0 !important; flex:0 0 auto !important}
  /* keep in-table action groups inline (the table itself scrolls) */
  .card td .inline-form{flex-direction:row; align-items:center}
  .card td .inline-form > *{width:auto !important}
  .table-wrap{-webkit-overflow-scrolling:touch}
  .solorow .rlabel{width:84px !important}   /* override the inline 130px so values get room on mobile */
  .hide-sm{display:none !important}

  /* responsive tables: each row becomes a stacked card (no horizontal scroll) */
  .cardtable thead{display:none}
  .cardtable, .cardtable tbody, .cardtable tr, .cardtable td{display:block; width:100%}
  .cardtable tr{position:relative; border:1px solid var(--line); border-radius:12px; padding:4px 16px; margin-bottom:12px; background:var(--card-2)}
  .cardtable tr:last-child{margin-bottom:0}
  .cardtable td{border:none; border-bottom:1px solid var(--line); padding:7px 0;
    text-align:left !important; white-space:normal !important; box-shadow:none !important; background:transparent !important;
    display:grid; grid-template-columns:78px 1fr; gap:14px; align-items:start; justify-items:start}
  .cardtable td:last-child{border-bottom:none}
  .cardtable td::before{content:attr(data-label); color:var(--muted); font-size:11px; text-transform:uppercase;
    letter-spacing:.09em; font-weight:600; padding-top:2px}
  /* per-card action (delete) pinned to the top-right corner */
  .cardtable td[data-label=""]{position:absolute; top:6px; right:10px; width:auto; display:block; padding:0; border:none}
  .cardtable td[data-label=""]::before{display:none}
  .cardtable td:empty{display:none}
  .cardtable tr.rowtoday{border-color:var(--gold); background:rgba(228,194,92,.07)}
}