/* Additions for the pilot on top of app.css (the v11 design system).
   <html data-theme> is always set at boot, so the v11 dark rules resolve cleanly. */
html{-webkit-text-size-adjust:100%;}
body{font-size:14px;line-height:1.45;}
[hidden]{display:none!important;}
a{color:var(--derived);}
:focus-visible{outline:2px solid var(--derived);outline-offset:2px;}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;}
.side .who{font-size:11.5px;color:#b3c2ab;padding:10px 8px 4px;border-top:1px solid rgba(255,255,255,.07);line-height:1.5;margin-top:auto;}
.side .who b{color:#fff;font-weight:600;display:block;font-size:12.5px;}
.side .who .links{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap;}
.side .who button{background:none;border:none;color:#9db091;font-size:11px;font-weight:600;padding:0;cursor:pointer;text-decoration:underline;}
.side .foot{margin-top:0;border-top:none;padding-top:0;}
.nav a .badge{margin-left:auto;background:var(--crit);color:#fff;border-radius:99px;font-size:10px;font-weight:700;padding:1px 6px;}
.tabbar a{position:relative;}
.tabbar a .badge{position:absolute;top:1px;right:6px;background:var(--crit);color:#fff;border-radius:99px;font-size:9px;font-weight:700;padding:0 5px;}

.btn:disabled{opacity:.5;cursor:default;}
.btn.inline{display:inline-block;width:auto;padding:8px 14px;font-size:12.5px;}
.btn.sm{display:inline-block;width:auto;padding:5px 10px;font-size:11.5px;border-radius:7px;}
.btn.danger{background:var(--crit);color:#fff!important;}
.btn.ghost.danger{background:transparent;color:var(--crit)!important;border:1px solid var(--crit);}
.btn.plain{background:var(--panel-2);color:var(--ink)!important;border:1px solid var(--line);}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.linkbtn{background:none;border:none;color:var(--derived);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;}
.linkbtn.danger{color:var(--crit);}
td .linkbtn+.linkbtn{margin-left:10px;}

.mobhead .who{font-size:11.5px;color:var(--muted);text-align:right;line-height:1.3;}
.mobhead .who b{display:block;color:var(--ink);font-size:12.5px;}
.mobhead .who button{background:none;border:none;color:var(--derived);font-size:11px;font-weight:600;padding:0;cursor:pointer;}
.mobhead .nm{font-family:"Fraunces",serif;font-weight:600;color:var(--ink);line-height:1.1;}
.mobhead .nm small{display:block;font-family:"IBM Plex Sans",sans-serif;font-size:10.5px;color:var(--muted);font-weight:500;}
.pagefoot{font-size:11px;color:var(--faint);margin-top:26px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;}
.suggest{position:fixed;right:18px;bottom:18px;z-index:15;background:var(--panel);color:var(--turf-deep);border:1.5px solid var(--turf);border-radius:99px;
  padding:9px 15px;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:7px;}
:root[data-theme="dark"] .suggest{color:var(--turf);}
@media(max-width:680px){.suggest{bottom:calc(74px + env(safe-area-inset-bottom,0px));right:12px;padding:8px 12px;font-size:12px;}}

.field select,.field input,.field textarea{font-size:16px;}
@media(min-width:681px){.field select,.field input,.field textarea{font-size:14px;}}
.field .hint{font-size:11.5px;color:var(--faint);margin-top:5px;line-height:1.4;}
.field input[type=checkbox]{width:auto;margin-right:8px;accent-color:var(--turf);}
.field label.check{display:flex;align-items:center;font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500;margin:0;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.frow3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:480px){.frow3{grid-template-columns:1fr 1fr;}}
.err{background:var(--crit-soft);color:var(--crit);border-radius:8px;padding:9px 12px;font-size:12.5px;font-weight:500;margin-bottom:12px;}
.empty{color:var(--muted);font-size:13px;padding:6px 0;line-height:1.5;}
.muted{color:var(--muted);} .faint{color:var(--faint);} .small{font-size:11.5px;}
.gap{height:14px;}
.inl{width:74px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--turf-deep);font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;text-align:right;}
:root[data-theme="dark"] .inl{color:var(--turf);}
select.inl{width:auto;text-align:left;font-family:inherit;color:var(--ink)!important;max-width:100%;}
input.inl.wide{width:100%;text-align:left;font-family:inherit;color:var(--ink)!important;}

/* sign-in */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--sidebar);}
.authcard{width:min(400px,100%);background:var(--panel);border-radius:16px;padding:28px 26px;box-shadow:0 10px 40px rgba(0,0,0,.35);}
.authcard .brand{padding:0;margin-bottom:20px;}
.authcard .brand .nm{color:var(--ink);font-size:20px;}
.authcard .brand .nm small{color:var(--faint);}
.authcard h1{font-size:20px;margin-bottom:6px;}
.authcard p{font-size:13px;color:var(--muted);margin:0 0 18px;line-height:1.5;}
.authcard .alt{font-size:12px;color:var(--faint);margin-top:16px;text-align:center;}

/* dialogs + toast */
dialog.dlg{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:0;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);box-shadow:0 12px 50px rgba(0,0,0,.35);}
dialog.dlg.wide{width:min(780px,calc(100vw - 24px));}
dialog.dlg::backdrop{background:rgba(8,14,6,.55);}
dialog.dlg .dh{padding:16px 20px 0;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
dialog.dlg .dh h2{font-size:18px;}
dialog.dlg .dh .x{background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px;}
dialog.dlg .db{padding:14px 20px 4px;overflow-y:auto;max-height:calc(100vh - 190px);}
dialog.dlg .df{padding:12px 20px 18px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
dialog.dlg .df .btn{width:auto;padding:10px 18px;}
dialog.dlg .df.col{flex-direction:column;} dialog.dlg .df.col .btn{width:100%;}
dialog.dlg p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 12px;}
.toast{position:fixed;left:50%;transform:translate(-50%,10px);bottom:calc(22px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);border-radius:10px;padding:11px 16px;font-size:13px;font-weight:500;
  opacity:0;transition:.2s;pointer-events:none;z-index:1000;max-width:calc(100vw - 32px);box-shadow:var(--shadow);}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.bad{background:var(--crit);color:#fff;}
@media(max-width:680px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));}}
.secret{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;background:var(--derived-soft);border:1px solid var(--derived);color:var(--derived);border-radius:10px;padding:12px 14px;text-align:center;letter-spacing:.04em;user-select:all;word-break:break-all;}

/* stations + runs */
.stngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
@media(max-width:480px){.stngrid{grid-template-columns:repeat(2,1fr);}}
.stnbtn{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:10px;text-align:left;cursor:pointer;color:var(--ink);position:relative;min-height:58px;min-width:0;}
.stnbtn b{display:block;font-family:"IBM Plex Mono",monospace;font-size:15px;}
.stnbtn span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stnbtn[aria-pressed="true"]{background:var(--turf);border-color:var(--turf);color:#fff;}
.stnbtn[aria-pressed="true"] span{color:rgba(255,255,255,.82);}
:root[data-theme="dark"] .stnbtn[aria-pressed="true"]{color:#08160a;}
:root[data-theme="dark"] .stnbtn[aria-pressed="true"] span{color:rgba(8,22,10,.75);}
.stnbtn.running::after{content:"";position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--derived);box-shadow:0 0 0 3px var(--derived-soft);}
.stnbtn:disabled{opacity:.45;cursor:default;}
.runrow .nm{flex:0 0 40%;min-width:0;}
.runrow .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.runrow .nm small{font-size:11px;color:var(--faint);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.runrow .bar span{background:var(--derived);width:100%;transform-origin:left;transition:transform 1s linear;}
.runrow .left{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13.5px;min-width:54px;text-align:right;font-variant-numeric:tabular-nums;}
.runrow .wait{font-size:11.5px;color:var(--warn);font-weight:600;text-align:right;flex:1;}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel-2);}
.stepper button{border:0;background:transparent;color:var(--ink);width:46px;height:46px;font-size:22px;font-weight:600;cursor:pointer;}
.stepper input{width:72px;height:46px;border:0;background:transparent;color:var(--ink);text-align:center;font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;}
.btn.big{padding:15px;font-size:16px;border-radius:11px;}
.evrow{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
.evrow:last-child{border-bottom:none;}
.evrow time{font-family:"IBM Plex Mono",monospace;color:var(--muted);font-size:11.5px;white-space:nowrap;}
.evrow .k{font-weight:600;} .evrow .k.on{color:var(--good);} .evrow .k.bad{color:var(--crit);} .evrow .k.cmd{color:var(--derived);}
.evrow .d{color:var(--muted);font-size:12px;}

/* schedule week */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
@media(max-width:1040px){.week{grid-template-columns:1fr;}}
.day{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;min-height:96px;box-shadow:var(--shadow);min-width:0;}
.day.today{border-color:var(--turf);}
.day .dn{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between;}
.occ{background:var(--turf-soft);border-radius:7px;padding:6px 8px;margin-bottom:6px;font-size:12px;line-height:1.35;}
.occ b{display:block;font-weight:600;} .occ .mono{font-size:11.5px;}
.occ.off{background:var(--gold-soft);} .occ.off b{text-decoration:line-through;}
.occ .linkbtn{font-size:11px;}

/* job board */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;}
@media(max-width:900px){.kanban{grid-template-columns:1fr;}}
.kcol{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px;min-height:120px;}
.kcol.over{border-color:var(--turf);background:var(--turf-soft);}
.kcol h3{font-family:"IBM Plex Sans",sans-serif;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:2px 4px 10px;display:flex;justify-content:space-between;}
.job{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer;}
.job .jt{font-weight:600;font-size:13.5px;line-height:1.3;}
.job .jm{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.job .ja{display:flex;gap:6px;margin-top:8px;}
.job.late{border-color:var(--crit);}

/* budget */
.budline{padding:11px 0;border-bottom:1px solid var(--line);}
.budline:last-child{border-bottom:none;}
.budline .top{display:flex;justify-content:space-between;gap:10px;font-size:13px;align-items:baseline;flex-wrap:wrap;}
.budline .meter{height:10px;border-radius:99px;background:var(--panel-2);margin-top:7px;position:relative;}
.budline .meter span{display:block;height:100%;background:var(--turf);border-radius:99px;max-width:100%;}
.budline.over .meter span{background:var(--crit);} .budline.pace .meter span{background:var(--warn);}
.budline .meter i{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55;}

/* journal + spray */
.jentry{padding:14px 0;border-bottom:1px solid var(--line);}
.jentry:last-child{border-bottom:none;}
.jentry .jh{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:6px;}
.jentry .jh b{color:var(--ink);font-size:13.5px;}
.jentry .jx{white-space:pre-wrap;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere;}
.photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.photos img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;background:var(--panel-2);}
.rei{background:var(--crit-soft);border:1px solid var(--crit);color:var(--ink);border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:14px;line-height:1.45;}
.rei b{color:var(--crit);}
.soon{background:var(--gold-soft);border:1px solid var(--gold);border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:14px;color:var(--ink);line-height:1.45;}
.soon b{color:var(--gold);}
.dip{cursor:default;}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media(max-width:520px){.kv{grid-template-columns:repeat(2,1fr);}}
table.tight th,table.tight td{padding:8px 10px;}
tr.click{cursor:pointer;} tr.click:hover td{background:var(--panel-2);}
.kpi .n{overflow-wrap:anywhere;}
@media(max-width:680px){.topbar h1{font-size:20px;} .panel .hd,.panel .bd{padding-left:14px;padding-right:14px;} th,td{padding:9px 10px;}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}
/* let wide tables scroll inside their panel instead of stretching the page */
.cols>*,.grid2>*,.grid3>*,.kanban>*{min-width:0;}
.panel{min-width:0;max-width:100%;}
.tbl-scroll{max-width:100%;-webkit-overflow-scrolling:touch;}
.rt,.amt,.tag,.adjstep{white-space:nowrap;}
/* Supah emblem */
.brand .logo{background:#faf7ec;overflow:hidden;width:34px;height:34px;}
.brand .logo img{width:100%;height:100%;display:block;}
.authcard .emblem{display:block;width:min(230px,70%);height:auto;margin:0 auto 6px;border-radius:14px;}
.authcard .club{text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:18px;}