:root{
  /* WORKSPACE PALETTE — deliberately not the marketing palette.
     The website sells with warm paper, aqua and gold. This is the tool she works
     in for hours, so it stays neutral: grey ground, white surfaces, near-black
     type, and a single dark accent for actions. Colour is reserved for meaning —
     green paid, amber needs-attention, red destructive — so when something IS
     coloured, it's telling her something. */
  --ink:#16202A;          /* near-black, faintly cool */
  --navy:#1E2A36;         /* the dark accent: buttons, active states, header */
  --navy-deep:#151E27;
  --grey:#616D7E;         /* secondary text */
  --line:rgba(16,24,40,.10);
  --bg:#F4F5F7;           /* neutral ground, not beige */
  --card:#ffffff;
  --paper:#FAFBFC;        /* full-screen surfaces */
  /* kept so the brand still shows in the mark and the odd highlight, used sparingly */
  --gold:#B8873A;--deep-gold:#9C7130;--gold-soft:#D9BC86;
  --aqua:#1E2A36;--deep-aqua:#1E2A36;
  /* One typeface for the whole dashboard. Inter is built for dense UI and has real
     tabular figures, so money columns line up and long lists stay easy on the eye.
     The public site keeps Fraunces — that's the brand; this is a tool. */
  --display:"Inter",system-ui,-apple-system,sans-serif;--sans:"Inter",system-ui,-apple-system,sans-serif;
  --shadow:0 12px 26px -18px rgba(16,24,40,.18);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 4px 12px -8px rgba(16,24,40,.12);
  --ok:#0F8A5F;--warn:#B7791F;--bad:#D24545;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);margin:0;font-weight:700;letter-spacing:-.02em}
input,select,textarea{font-family:var(--sans);font-size:1rem;width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{outline:none;border-color:#8A97A8;box-shadow:0 0 0 3px rgba(30,42,54,.10)}
label{display:block;font-weight:600;font-size:.82rem;color:var(--grey);margin-bottom:14px}
label input,label select,label textarea{margin-top:6px;font-weight:500;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:.92rem;padding:12px 20px;min-height:44px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:background .18s,border-color .18s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:rgba(12,37,49,.28)}
.btn-teal{background:var(--ink);color:#fff}
.btn-danger{background:#fff;border:1.5px solid rgba(229,72,77,.4);color:var(--bad);padding:9px 14px;font-size:.82rem;border-radius:10px}
.btn-danger:hover{background:rgba(229,72,77,.07)}
.btn-link{background:none;border:0;color:var(--grey);cursor:pointer;font-weight:600;font-size:.9rem;padding:11px 6px;min-height:44px}
.btn-link:hover{color:var(--ink)}

/* Login */
.login-view{min-height:100svh;display:grid;place-items:center;padding:20px;background:radial-gradient(1200px 600px at 50% -10%,#123240,var(--navy-deep))}
.login-card{background:var(--paper);border-radius:22px;padding:40px 34px;width:min(100%,380px);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);text-align:center}
.login-mark{width:64px;height:64px;border-radius:18px;margin:0 auto 18px;background:linear-gradient(140deg,#12303D,var(--navy-deep));display:grid;place-items:center;box-shadow:0 14px 28px -12px rgba(8,26,35,.8)}
.login-card h1{font-size:1.45rem}
.login-sub{color:var(--grey);margin:5px 0 24px;font-size:.9rem}
.login-card label{text-align:left}
.login-card .btn{width:100%;margin-top:8px}
.login-err{color:var(--bad);font-size:.86rem;margin:14px 0 0}

/* Header — same navy/gold identity as the public site */
.admin-header{position:sticky;top:0;z-index:20;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:18px;padding:13px 20px;flex-wrap:wrap;box-shadow:0 14px 30px -20px rgba(0,0,0,.7)}
.admin-brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:1.08rem;color:#fff;letter-spacing:.02em}
.admin-mark{width:36px;height:36px;display:grid;place-items:center;flex:none}
.admin-mark img{width:100%;height:100%;display:block}
.tabs{display:flex;gap:4px;flex:1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;font-weight:600;font-size:.88rem;color:rgba(255,255,255,.72);cursor:pointer;transition:.15s;white-space:nowrap;flex:none;font-family:var(--sans)}
.tab:hover{color:#fff}
.tab.active{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
/* run-the-business tabs read as primary; set-up tabs recede */
.tab:not(.tab-sub){font-weight:600;color:#fff}
.tab-div{width:1px;height:22px;align-self:center;background:rgba(255,255,255,.18);margin:0 6px;flex:none}
.tab-group-label{align-self:center;flex:none;font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:0 4px}
.tab.tab-sub{font-size:.875rem;font-weight:500;opacity:.72}
.tab.tab-sub:hover{opacity:.9}
.tab.tab-sub.active{opacity:1}
/* fast add-booking form: short fields stay 2-up even on phones, tappable times */
/* overflow "⋯" menu — tucks secondary toolbar actions away */
.menu-wrap{position:relative;flex:none}
#bkMenuBtn{font-size:1.3rem;line-height:1;padding:8px 14px;min-height:44px}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 36px -12px rgba(8,26,35,.34);z-index:60;overflow:hidden;display:flex;flex-direction:column}
.menu button{background:none;border:0;text-align:left;padding:13px 16px;font-family:var(--sans);font-size:.94rem;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.menu button:hover{background:rgba(224,168,62,.12)}
.menu button+button{border-top:1px solid var(--line)}
/* captain availability: add a date+time, list of open days */
.cap-add{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.cap-add label{margin:0;flex:1;min-width:120px}
.cap-add label input{width:100%}
.cap-add .btn{margin-bottom:2px;flex:none}
.av-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.av-row:last-child{border-bottom:0}
.av-row .btn-danger{flex:none}
.bk-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-quick>label{margin:0;min-width:0}
.bk-quick>label input,.bk-quick>label select{width:100%;min-width:0;box-sizing:border-box}
.bk-times{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}
.bk-time-chip{padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.92rem;cursor:pointer;font-family:var(--sans)}
.bk-time-chip:active{transform:scale(.97)}
.bk-time-chip.active{background:linear-gradient(135deg,var(--gold),var(--deep-gold));border-color:var(--gold);color:var(--navy-deep)}
.admin-user{display:flex;align-items:center;gap:10px;font-size:.86rem;color:rgba(255,255,255,.75)}
.admin-user .btn-link{color:rgba(255,255,255,.72)}
.admin-user .btn-link:hover{color:#fff}

/* Main */
.admin-main{max-width:940px;margin:0 auto;padding:30px 18px 90px}
.panel{display:none}
.panel.active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.panel-head h2{font-size:1.7rem}
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.head-actions input[type=search]{width:230px;border-radius:999px}
#refreshBookings{width:44px;height:44px;padding:0;border-radius:999px;font-size:1.1rem;flex:none}
.list{display:flex;flex-direction:column;gap:18px}
.muted{color:var(--grey);font-size:.92rem;margin:5px 0 0}

/* Stat cards (bookings hero) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:22px;
  background:var(--card);border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,24,40,.055),0 1px 2px rgba(16,24,40,.06),0 10px 22px -12px rgba(16,24,40,.16)}
.stat{background:none;border:0;border-radius:0;padding:15px 14px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.stat b{display:block;font-family:var(--display);font-size:1.32rem;line-height:1.1;color:var(--ink);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat b::after{content:none}
.stat span{display:block;color:var(--grey);font-size:.76rem;font-weight:400;margin-top:5px;line-height:1.25}
.stat.hot b{color:var(--deep-gold)}
.stat.today b{color:var(--navy)}

/* Group headings */
.group-h{font-size:.92rem;color:var(--grey);font-weight:500;margin:28px 2px 12px}
.group-h:first-child{margin-top:0}

/* Cards */
/* Cards sit ON the page rather than in it: a crisp 1px edge, a tight contact
   shadow, then a soft ambient lift. Three cheap layers read as real depth where
   one big blurry shadow just reads as smudge. */
.card{background:var(--card);border:0;border-radius:16px;padding:24px 22px;transition:box-shadow .18s,transform .18s;
  box-shadow:0 0 0 1px rgba(16,24,40,.055),0 1px 2px rgba(16,24,40,.06),0 10px 22px -12px rgba(16,24,40,.16)}
.card:hover{box-shadow:var(--shadow)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.card-top h3{font-size:1.1rem;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.row-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;padding:6px 13px;border-radius:999px;text-transform:capitalize}
.pill.new{background:rgba(255,194,74,.22);color:var(--deep-gold)}
.pill.confirmed{background:rgba(12,37,49,.08);color:var(--navy)}
.pill.paid{background:rgba(26,158,106,.16);color:var(--ok)}
.pill.completed{background:rgba(90,110,112,.16);color:var(--grey)}
.pill.cancelled{background:rgba(229,72,77,.14);color:var(--bad)}
.pill.awaiting{background:rgba(90,110,112,.14);color:var(--grey)}
/* Unfinished checkouts — deliberately quiet: present, but never competing with real bookings */
.unpaid-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:12px 2px;min-height:44px;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--grey);text-align:left}
.unpaid-caret{transition:transform .18s ease;display:inline-block}
.unpaid-toggle.open .unpaid-caret{transform:rotate(90deg)}
.unpaid-card{opacity:.72;border-style:dashed}
.unpaid-card .bk-name{font-weight:600}
.btn.danger{color:var(--bad)}
/* Sales tax — the one number they have to hand the state, impossible to miss */
.tax-card{border-left:3px solid var(--warn)}
.tax-card.tax-late{border-left-color:var(--bad)}
.tax-big{font-family:var(--display);font-size:2.6rem;font-weight:700;line-height:1.05;color:var(--ink);margin:6px 0 2px}
.tax-line{font-size:1rem;margin-bottom:10px;color:var(--ink)}
.tax-warn{color:var(--bad)}
/* Phone-booking quote — the number she reads out loud, with the parts that make it up */
.quote{background:var(--paper,#FCFAF5);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
/* Add-ons she can tap on mid-call, plus a free-text one for anything not on the list */
.addon-box{margin:12px 0}
.addon-h{font-size:.92rem;font-weight:500;color:var(--grey);margin-bottom:9px}
.addon-chips{display:flex;flex-wrap:wrap;gap:7px}
.addon-chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 14px;font:inherit;
  font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer;min-height:40px}
.addon-chip b{color:var(--grey);font-weight:600}
.addon-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.addon-chip.on b{color:var(--gold,#E0A83E)}
.addon-picked{margin-top:8px}
.addon-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.addon-row span{flex:1;min-width:0}
.addon-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.addon-x{background:none;border:0;font-size:1.4rem;line-height:1;color:var(--bad);cursor:pointer;padding:0 6px}
.addon-new{display:flex;gap:7px;margin-top:10px}
.addon-new input{flex:1;min-width:0}
.addon-new input[data-f='axPrice']{flex:0 0 84px}
.addon-new .btn{flex:0 0 auto;align-self:stretch}
.quote-head{display:flex;flex-direction:column;gap:2px;padding-bottom:9px;margin-bottom:7px;border-bottom:1px solid var(--line)}
.quote-head b{color:var(--navy);font-size:.98rem;line-height:1.3}
.quote-head span{color:var(--grey);font-size:.85rem}
.daynote{font-size:.82rem;margin:-4px 0 8px}
.quote-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.92rem;color:var(--grey)}
.quote-line b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* The number she reads to the customer — the loudest thing on the screen */
.quote-total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;
  background:var(--navy);border-radius:12px;padding:14px 16px}
.quote-total span{font-weight:600;color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.quote-total b{font-family:var(--display);font-size:2.2rem;line-height:1;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.quote-note{font-size:.8rem;margin:8px 0 0}
/* The DR-15 crib sheet — the numbers she types onto the state's form */
.tax-form{background:var(--paper,#FCFAF5);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:14px 0}
.tax-form-h{font-size:.92rem;font-weight:500;color:var(--grey);margin-bottom:8px}
.tax-form-tot{border-top:2px solid var(--navy);margin-top:6px;padding-top:9px}
.tax-form-tot span,.tax-form-tot b{color:var(--navy);font-weight:600}
.tax-go{display:block;width:100%;text-align:center;text-decoration:none}
.tax-rows{border-top:1.5px solid var(--line)}
.tax-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.tax-row > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tax-row .muted{font-size:.8rem}
.tax-amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.05rem}
.rates{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
/* One price = one small card with every box labelled. It used to be six bare
   inputs side by side, so "249 / 4 / 50" gave no clue which was which. */
.rate-row{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:14px 14px 10px;margin-bottom:12px;
}
.rate-head{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.rate-head input{font-weight:600;font-size:.98rem}
.rate-head .btn-danger{flex:none;padding:9px 13px}
.rate-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rate-fields>label{margin:0;font-size:.74rem;font-weight:600;color:var(--grey)}
.rate-fields>label input,.rate-fields>label select{margin-top:5px}
/* a $ that sits inside the box, so the number reads as money */
.rate-money{position:relative;display:block;margin-top:5px}
.rate-money i{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-style:normal;font-weight:600;color:var(--grey);pointer-events:none;font-size:.95rem;
}
.rate-money input{padding-left:26px;margin-top:0}
@media(min-width:720px){ .rate-fields{grid-template-columns:repeat(4,1fr)} }
.subhead{font-size:1rem;color:var(--ink);font-weight:600;margin:2px 0 14px}
.subhead::before{content:"";display:inline-block;width:18px;height:2px;background:var(--line);border-radius:2px;vertical-align:middle;margin-right:10px}
.switch{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--grey);cursor:pointer;white-space:nowrap}
.switch input{width:auto;accent-color:var(--navy)}
.empty{text-align:center;color:var(--grey);padding:54px 20px;background:var(--card);border:1.5px dashed var(--line);border-radius:18px}

/* Booking card */
.bk-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.bk-name{font-size:1.12rem;font-weight:600}
.bk-total{font-family:var(--display);font-size:1.35rem;text-align:right}
.bk-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 18px;margin:14px 0;font-size:.9rem}
.bk-meta b{color:var(--grey);font-weight:600;display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.bk-contact{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.bk-contact a{font-weight:600;color:var(--navy);font-size:.9rem;text-decoration:none;border:1px solid var(--line);padding:11px 16px;border-radius:999px;display:inline-flex;align-items:center;min-height:44px}
.bk-contact a:hover{border-color:rgba(12,37,49,.28)}
.bk-quick{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--grey);font-size:.96rem;margin:12px 0 16px}
.bk-quick .chip{font-size:.8rem;font-weight:600;letter-spacing:0;padding:5px 11px;border-radius:999px;background:rgba(90,110,112,.12);color:var(--ink)}
.bk-quick .chip.warn{background:rgba(255,194,74,.22);color:var(--deep-gold)}
.status-sel{max-width:160px}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 24px;border-radius:999px;font-weight:600;font-size:.9rem;z-index:50;box-shadow:0 16px 34px -12px rgba(0,0,0,.55)}

@media(max-width:720px){
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat b{font-size:1.7rem}
}
@media(max-width:760px){
  .grid2,.grid3{grid-template-columns:1fr}
  .head-actions input[type=search]{width:140px;flex:1}
  .admin-header{gap:8px;padding:11px 14px}
  .tabs{order:3;flex:0 0 calc(100% + 28px);margin:2px -14px -3px;padding:4px 14px 10px}
  .admin-user span{display:none} /* email is noise on a phone — keep Log out */
  .panel-head h2{font-size:1.45rem}
}

/* Reports bar charts */
.bar-row{display:grid;grid-template-columns:minmax(90px,1fr) 2fr auto;align-items:center;gap:12px;padding:7px 0;font-size:.88rem}
.bar-label{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:12px;background:var(--bg);border-radius:999px;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:999px;background:var(--navy);min-width:3px}
.bar-val{font-weight:600;color:var(--grey);font-size:.82rem;white-space:nowrap}
@media(max-width:640px){.bar-row{grid-template-columns:1fr;gap:4px}.bar-val{text-align:right}}

/* The hidden attribute must always win, even over display:grid/flex rules */
[hidden]{display:none!important}

/* Calendar view */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.cal-head h3{font-size:1.2rem}
/* List / Calendar — a real visible switch, not a menu item nobody finds */
.viewtabs{display:flex;gap:4px;background:rgba(15,58,64,.07);border-radius:999px;padding:4px;margin:0 0 18px;width:100%;max-width:280px}
.viewtab{flex:1;background:none;border:0;border-radius:999px;padding:11px 14px;font:inherit;font-size:.92rem;
  font-weight:600;color:var(--grey);cursor:pointer;min-height:44px;transition:background .15s,color .15s}
.viewtab.active{background:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(15,58,64,.2)}
/* a day with trips on it should be obvious at a glance */
.cal-cell.has{background:rgba(30,42,54,.035);border-color:rgba(30,42,54,.16)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:20px}
.cal-dow{text-align:center;font-size:.7rem;font-weight:500;letter-spacing:.1em;color:var(--grey);text-transform:uppercase;padding:4px 0}
.cal-cell{position:relative;min-width:0;overflow:hidden;min-height:74px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:6px 8px;text-align:left;cursor:pointer;font-family:var(--sans);display:flex;flex-direction:column;gap:2px;transition:border-color .15s,box-shadow .15s}
.cal-cell:hover{border-color:rgba(12,37,49,.25)}
.cal-cell.empty{background:none;border:0;cursor:default}
.cal-cell.today{border-color:var(--navy);box-shadow:0 0 0 2px rgba(12,37,49,.10)}
.cal-cell.sel{border-color:var(--deep-gold);box-shadow:0 0 0 3px rgba(240,165,42,.2)}
.cal-num{font-weight:600;font-size:.85rem;color:var(--ink)}
.cal-cell.has .cal-num{color:var(--navy)}
/* A day has to answer "can I take this booking?" — so it shows boats out of
   boats owned, not just how many names are on it. */
.cal-cap{align-self:flex-start;font-size:.78rem;font-weight:700;color:var(--navy);
  background:rgba(30,42,54,.09);border-radius:7px;padding:2px 6px;line-height:1.25;margin-top:auto}
.cal-cap.is-full{background:var(--navy);color:#fff}
.cal-when{font-size:.66rem;color:var(--grey);line-height:1.2;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* days she's closed, so she can't book one by accident */
.cal-tag{align-self:flex-start;margin-top:auto;font-size:.66rem;font-weight:700;letter-spacing:.02em;
  padding:2px 6px;border-radius:7px;line-height:1.3}
.cal-cell.shut{background:repeating-linear-gradient(135deg,rgba(16,24,40,.045),rgba(16,24,40,.045) 5px,transparent 5px,transparent 10px)}
.cal-cell.shut .cal-num{color:#98A2B3}
.cal-cell.shut .cal-tag{background:rgba(16,24,40,.28);color:var(--grey)}
.cal-cell.callonly .cal-tag{background:var(--warn);color:var(--warn)}
.cal-cell.full{border-color:rgba(30,42,54,.35)}
.cal-names{font-size:.66rem;color:var(--grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:auto}
@media(max-width:640px){
  .cal-grid{gap:5px}
  .cal-cell{min-height:62px;padding:5px 5px;border-radius:10px}
  .cal-names{display:none}
  .cal-when{display:none}
  .cal-cap{font-size:.72rem;padding:1px 4px}
  /* "closed" won't fit in a 45px cell — the hatching carries it, and tapping the
     day spells it out. The word stays on wider screens. */
  .cal-tag{font-size:0;padding:0;margin-top:auto;width:14px;height:3px;border-radius:2px}
}

/* P&L table */
table.pnl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
table.pnl th{text-align:right;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);padding:6px 8px;border-bottom:1.5px solid var(--line)}
table.pnl th:first-child{text-align:left}
table.pnl td{padding:8px;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
table.pnl td:first-child{text-align:left;font-weight:600;color:var(--grey)}
table.pnl tr.pnl-inc td{color:var(--navy);font-weight:600}
table.pnl tr.pnl-net td{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy);border-bottom:0;border-top:2px solid var(--navy)}
.inv-item{grid-template-columns:3fr 1fr 0 auto}

/* review-ask button on past bookings */
.bk-contact .ask-review{background:linear-gradient(135deg,var(--gold),var(--deep-gold));color:var(--navy-deep);border:0;font-weight:600}

/* "Who's done their orientation" — status reads as a sentence, not Title Case,
   and the text-them button reads as a button rather than a link. */
#orientWho .pill{text-transform:none}
/* A link shaped like a button (the one-tap "text them…" actions) must read as a
   button. Anywhere buttons are laid out together, an underline is a mistake. */
#orientWho a.btn, .row-actions a.btn{text-decoration:none}
#pwUnsigned .pill{text-transform:none}

/* When a price applies. Folded away by default — an ordinary price row looks
   exactly as it did before, with one quiet line underneath saying "all year". */
.rate-when-btn{
  grid-column:1/-1;justify-self:start;background:none;border:0;padding:2px 0 0;
  font-size:.76rem;font-weight:600;color:var(--grey);text-decoration:underline;cursor:pointer;
}
.rate-when-btn.on{color:var(--deep-gold)}
.rate-when-box{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:6px 0 10px}
.rate-when-box label{display:flex;flex-direction:column;gap:3px;font-size:.72rem;font-weight:600;color:var(--grey)}
.rate-when-box input{font-size:.85rem;padding:8px 10px}
.rate-when-box .btn-link{font-size:.76rem;padding-bottom:8px}

/* ---------- On the Water (fleet map + zone editor) ---------- */
#fleetMap{height:55vh;min-height:380px;width:100%;background:#CFE8EE}
.map-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;background:var(--card);border-top:1px solid var(--line)}
.map-tools .btn{padding:8px 14px;font-size:.8rem}
.map-hint{font-size:.78rem;color:var(--grey);font-weight:600}
/* the map + its controls read as one object, like every other card here */
.mapcard{
  background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,32,42,.04),0 8px 20px -12px rgba(16,32,42,.16);margin-bottom:26px;
}
.mapcard .map-hint{margin:0;padding:0 16px 14px;line-height:1.5}
.mapcard #zoneComposer:not([hidden]){padding:0 16px 16px}
.fl-pin{position:relative;width:10px;height:10px}
.fl-pin span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;text-shadow:0 1px 4px rgba(0,0,0,.45);line-height:1}
.fl-pin i{
  position:absolute;left:14px;top:-6px;white-space:nowrap;font-style:normal;
  background:#0C2531;color:#fff;font-size:.66rem;font-weight:700;padding:3px 8px;border-radius:999px;
  box-shadow:0 2px 8px rgba(8,26,35,.35);
}
.fl-pin.stale span{opacity:.55}
.fl-pin.stale i{background:#5E7178}
.leaflet-container{font-family:inherit}

/* ---------- premium map dressing (matches the customer trip page) ---------- */
#fleetMap{background:#0E2A33}
.map-editor-card .leaflet-container{font-family:inherit}
.poi-chip{
  width:36px;height:36px;border-radius:50%;background:rgba(252,250,245,.96);
  border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.slip-chip{
  width:40px;height:40px;border-radius:50%;background:var(--navy);color:#EEC579;
  border:2.5px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;box-shadow:0 0 0 4px rgba(224,168,62,.28), 0 5px 14px rgba(0,0,0,.45);
}
.map-style-toggle{
  display:flex;background:rgba(8,26,35,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(238,197,121,.35);border-radius:999px;padding:3px;box-shadow:0 6px 18px rgba(8,26,35,.4);
}
.map-style-toggle button{
  border:none;background:transparent;color:#cfdadd;font-family:inherit;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:7px 13px;border-radius:999px;cursor:pointer;
}
.map-style-toggle button.on{background:var(--gold);color:#081A23}
.leaflet-bar{border:none!important;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(8,26,35,.4)!important}
.leaflet-bar a{
  background:rgba(8,26,35,.82)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#EEC579!important;border-bottom:1px solid rgba(238,197,121,.18)!important;
  width:36px!important;height:36px!important;line-height:36px!important;font-size:17px!important;
}
.leaflet-bar a:last-child{border-bottom:none!important}
.leaflet-bar a.leaflet-disabled{opacity:.4}
.leaflet-control-attribution{
  background:rgba(8,26,35,.55)!important;color:#9fb3ba!important;font-size:9px!important;
  padding:2px 8px!important;border-radius:8px 0 0 0;
}
.leaflet-control-attribution a{color:#c3d2d6!important}
.leaflet-popup-content-wrapper{
  background:var(--navy)!important;color:#E8EEF0!important;border-radius:14px!important;
  box-shadow:0 12px 34px rgba(8,26,35,.5)!important;border:1px solid rgba(238,197,121,.28);
}
.leaflet-popup-content{font-family:inherit!important;font-size:.85rem!important;margin:13px 17px!important;line-height:1.45!important}
.leaflet-popup-content b{font-family:var(--display);font-size:1rem;color:#EEC579}
.leaflet-popup-content small{color:#B9C7CC}
.leaflet-popup-content a{color:#6FD7E2}
.leaflet-popup-tip{background:var(--navy)!important;border:1px solid rgba(238,197,121,.28)}
.leaflet-popup-close-button{color:#9fb3ba!important;font-size:18px!important;padding:6px 8px 0 0!important}
/* boat pins pop harder on imagery */
.fl-pin i{background:rgba(8,26,35,.88);backdrop-filter:blur(6px);border:1px solid rgba(238,197,121,.35)}
/* film-look grade + glowing zones (matches the customer map) */
.sat-tiles{filter:saturate(1.06) contrast(1.02)}
.lbl-tiles{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.leaflet-overlay-pane path.z-allowed{filter:drop-shadow(0 0 6px rgba(59,224,138,.75))}
.leaflet-overlay-pane path.z-restricted{filter:drop-shadow(0 0 6px rgba(255,83,72,.75))}
.leaflet-overlay-pane path.z-no_wake{filter:drop-shadow(0 0 6px rgba(91,208,255,.8));animation:dashflow 1.8s linear infinite}
.leaflet-overlay-pane path.z-caution{filter:drop-shadow(0 0 6px rgba(255,194,74,.8));animation:dashflow 1.8s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-28}}

/* ---------- MapLibre GL dressing (controls, popups) ---------- */
.maplibregl-ctrl-group{background:rgba(8,26,35,.82)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px!important;box-shadow:0 6px 18px rgba(8,26,35,.4)!important;overflow:hidden}
.maplibregl-ctrl-group button{width:36px!important;height:36px!important;border-bottom:1px solid rgba(238,197,121,.18)!important}
.maplibregl-ctrl-group button:last-child{border-bottom:none!important}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) brightness(1.6)}
.maplibregl-ctrl-attrib{background:rgba(8,26,35,.55)!important;color:#9fb3ba!important;font-size:9px!important;border-radius:8px 0 0 0}
.maplibregl-ctrl-attrib a{color:#c3d2d6!important}
.maplibregl-ctrl-attrib-button{filter:invert(1)}
.map-style-toggle.maplibregl-ctrl{margin:10px 10px 0 0}
.jpp-pop .maplibregl-popup-content{
  background:#0C2531;color:#E8EEF0;border-radius:14px;border:1px solid rgba(238,197,121,.28);
  box-shadow:0 12px 34px rgba(8,26,35,.5);font-family:var(--sans);font-size:.85rem;line-height:1.45;padding:13px 17px;
}
.jpp-pop .maplibregl-popup-content b{font-family:var(--display);font-size:1rem;color:#EEC579}
.jpp-pop .maplibregl-popup-content small{color:#B9C7CC}
.jpp-pop .maplibregl-popup-content a{color:#6FD7E2}
.jpp-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#0C2531!important}
.jpp-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:#0C2531!important}
.jpp-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#0C2531!important}
.jpp-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#0C2531!important}

/* ---------- Crew & Pay ---------- */
.crew-clock{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.clock-live{display:flex;align-items:center;gap:12px}
.clock-dot{width:12px;height:12px;border-radius:50%;background:#1a9e6a;flex:none;animation:clockpulse 1.6s ease-in-out infinite}
@keyframes clockpulse{0%,100%{box-shadow:0 0 0 0 rgba(26,158,106,.45)}50%{box-shadow:0 0 0 8px rgba(26,158,106,0)}}
.btn-clock{font-size:1.05rem;padding:16px 30px}
.crew-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem;flex-wrap:wrap}
.crew-row:last-child{border-bottom:none}
.crew-row-btns{display:flex;gap:6px;flex:none}
.crew-row-btns .btn,.crew-row-btns .btn-danger{padding:6px 12px}
.zelle-strip{background:#F3EFE5;border:1px dashed var(--gold);border-radius:12px;padding:10px 14px;font-size:.84rem;margin-top:12px;line-height:2}
.zchip{
  display:inline-block;border:1px solid var(--gold);background:#fff;border-radius:999px;
  padding:3px 10px;font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--navy);
}
/* ---------- PIN login pad ---------- */
.pin-roster{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 4px}
.pin-name{
  border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px 20px;
  font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--navy);cursor:pointer;min-width:96px;
}
.pin-name:active{transform:scale(.97)}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:16px 0 18px}
.pin-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--gold);background:transparent;transition:background .12s}
.pin-dot.on{background:var(--gold)}
.pin-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;margin:0 auto}
.pin-key{
  aspect-ratio:1;border:none;background:var(--paper);border:1.5px solid var(--line);border-radius:50%;
  font-size:1.5rem;font-weight:600;color:var(--navy);cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
}
.pin-key:active{background:var(--gold);color:var(--navy2)}
.pin-key-empty{border:none;background:transparent;pointer-events:none}
.btn-zelle{width:100%;font-size:1.05rem;padding:16px;margin:6px 0 4px}

/* --- crew invoices + availability (self-service) --- */
.avail-row{display:flex;align-items:center;gap:10px;padding:7px 0;flex-wrap:wrap}
.avail-day{width:46px;font-weight:600;flex:none}
.avail-chips{display:flex;gap:6px;flex-wrap:wrap}
.avail-chip{border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:6px 13px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--ink);transition:background .12s,border-color .12s}
.avail-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.avc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.avc-head b{font-family:var(--display);font-size:1.1rem}
.avc-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;font-size:.68rem;color:var(--grey);margin-bottom:5px;font-weight:600;letter-spacing:.03em}
.avc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.avc-cell{aspect-ratio:1;border:1px solid var(--line);border-radius:9px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:.9rem;cursor:pointer;padding:2px;color:var(--ink)}
.avc-cell.empty{border:none;cursor:default}
.avc-cell.on{background:rgba(14,148,166,.13);border-color:rgba(14,148,166,.4)}
.avc-cell.off{color:var(--grey)}
.avc-cell.override{outline:2px solid var(--gold);outline-offset:-2px}
.avc-dots{display:flex;gap:3px}
.avc-dot{width:5px;height:5px;border-radius:50%;background:var(--line)}
.avc-dot.on{background:var(--navy)}

/* --- captain exact-hours availability editor --- */
.cap-avail{display:grid;gap:6px;margin-bottom:12px}
.cap-av-row{display:flex;align-items:center;gap:8px;font-size:.88rem;flex-wrap:wrap}
.cap-av-day{display:flex;align-items:center;gap:6px;width:74px;flex:none;margin-bottom:0!important}
.cap-av-row input[type=time]{padding:5px 7px;max-width:135px}

/* single PIN input (phone number pad) */
.pin-input{width:100%;text-align:center;font-size:1.7rem;letter-spacing:.4em;padding:16px 14px;border:1.5px solid var(--line);border-radius:14px;font-family:var(--sans);background:#fff;color:var(--ink)}
.pin-input:focus{outline:none;border-color:#8A97A8;box-shadow:0 0 0 3px rgba(30,42,54,.10)}

/* When the money actually reaches the bank — the thing that made her think it was lost */
.payout-card{border-left:3px solid var(--ok);margin-bottom:22px}
.payout-big{font-family:var(--display);font-size:2.2rem;font-weight:700;line-height:1.05;color:var(--navy);margin:4px 0 6px}
.payout-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:.94rem}
.payout-row b{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.lands{font-size:.85rem;font-weight:600;color:var(--ok,#1A9E6A);margin:6px 0 2px}
.lands.paid-out{color:var(--grey)}

/* ---- Booking "Manage" panel: a receipt, then facts, then actions ------------
   It used to repeat the date and guests already shown above (in raw 2026-08-15
   form), stack every field over two lines behind shouty uppercase labels, and
   strand Delete alone on its own row. One column, aligned, quiet. */
.bk-receipt{margin:2px 0 16px}
.bk-receipt > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;font-size:.94rem;color:var(--grey)}
.bk-receipt > div + div{border-top:1px solid var(--line)}
.bk-receipt b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-receipt .tot{border-top:2px solid var(--navy);margin-top:2px;padding-top:10px}
.bk-receipt .tot span{color:var(--navy);font-weight:600}
.bk-receipt .tot b{color:var(--navy);font-weight:700;font-size:1.12rem}
.bk-receipt .neg b{color:var(--bad)}

.bk-facts{margin-bottom:16px}
.bk-facts > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;font-size:.92rem;border-bottom:1px solid var(--line)}
.bk-facts > div:last-child{border-bottom:0}
.bk-facts span{color:var(--grey);flex:none}
.bk-facts b{color:var(--ink);font-weight:600;text-align:right;min-width:0}
.bk-facts .hi b{color:var(--navy)}
.bk-facts .note{flex-direction:column;align-items:flex-start;gap:3px}
.bk-facts .note b{text-align:left;font-weight:500}

.bk-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;
  font-size:.82rem;font-weight:600;color:var(--grey)}
.bk-status select{max-width:190px}

.bk-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-acts .btn{width:100%;padding:12px 10px;min-height:46px}
.bk-acts .bk-del{color:var(--bad);border-color:rgba(229,72,77,.3)}
.bk-acts .bk-del:hover{border-color:var(--bad);background:rgba(229,72,77,.06)}
.past-box{margin-top:24px;border-top:1px solid var(--line);padding-top:4px}
.bk-receipt .ok b{color:var(--ok)}
.bk-receipt .ok span{color:var(--ok)}

/* ============================================================================
   PHONE NAVIGATION — the bar lives at the bottom because that's where her thumb
   is. Four daily destinations, a gold action in the middle for the thing she
   does most (take a booking on the phone), and everything else behind More.
   Hidden on desktop, where the top tab strip is fine.
   ========================================================================== */
.tabbar{display:none}
.screen{display:none}

@media(max-width:760px){
  /* the horizontal tab strip becomes 3.7 screens of swiping on a phone */
  .admin-header .tabs{display:none}
  .admin-header{padding:10px 16px}

  /* A floating pill rather than a full-width slab: it reads as a control that sits
     above her work, not a chrome bar bolted to the bottom of the screen. */
  .tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:2px;
    position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;
    background:rgba(10,31,42,.94);
    -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
    border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:6px;
    box-shadow:0 12px 34px -10px rgba(8,26,35,.55),0 2px 8px -4px rgba(8,26,35,.4);
  }
  .tabbar-item{
    background:none;border:0;cursor:pointer;font-family:var(--sans);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:9px 4px;min-height:52px;border-radius:999px;
    color:rgba(255,255,255,.6);transition:color .16s,background .16s;
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar-item svg{width:21px;height:21px;flex:none;stroke-width:1.6}
  .tabbar-item span{font-size:.68rem;font-weight:500;line-height:1;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  /* the current screen sits in its own lit pill — the one piece of emphasis */
  .tabbar-item.on{background:rgba(255,255,255,.13);color:#fff}
  .tabbar-item.on svg{stroke-width:1.9}
  .tabbar-item:active{color:rgba(255,255,255,.85)}

  /* content must never hide behind the bar */
  .admin-main{padding:24px 18px calc(104px + env(safe-area-inset-bottom))}

  /* ---- Full-screen chooser ----
     Editorial rather than tiled: generous rows, a hairline between each, a small
     gold section marker. Nothing boxed, nothing decorated — it should feel like
     a well-set page, not a control panel. */
  .screen{display:block;position:fixed;inset:0;z-index:90;background:var(--paper);
    overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(10px);
    transition:opacity .2s ease,transform .22s cubic-bezier(.32,.72,0,1);
    padding:0 20px calc(34px + env(safe-area-inset-bottom))}
  .screen.open{opacity:1;transform:none}
  .screen-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:calc(20px + env(safe-area-inset-top)) 0 22px;position:sticky;top:0;background:var(--paper);z-index:2}
  .screen-kicker{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--grey);margin:0 0 6px}
  .screen-kicker:empty{display:none}
  .screen-title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1.15}
  .screen-x{flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(12,37,49,.06);color:var(--navy);display:grid;place-items:center;
    -webkit-tap-highlight-color:transparent}
  .screen-x svg{width:19px;height:19px}
  .screen-x:active{background:rgba(12,37,49,.12)}
  .screen-group{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--grey);margin:26px 0 2px}
  .screen-group:first-child{margin-top:4px}
  .screen-rows{display:flex;flex-direction:column}
  .screen-row{display:flex;align-items:center;width:100%;text-align:left;
    background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;
    font-family:var(--sans);padding:18px 2px;min-height:58px;-webkit-tap-highlight-color:transparent}
  .screen-row:last-child{border-bottom:0}
  .screen-row-t{font-size:1.05rem;font-weight:600;color:var(--navy);line-height:1.25}
  .screen-row-d{font-size:.9rem;color:var(--grey);line-height:1.4}
  .screen-row:active .screen-row-t{color:var(--grey)}
  .screen-row.on{padding-left:13px;margin-left:-13px;border-left:2px solid var(--navy)}
  .screen-row.on .screen-row-t{color:var(--navy)}

  @media(prefers-reduced-motion:reduce){
    .screen{transition:none}
  }
}

/* On a phone the greeting, the date her phone already shows, a duplicate add
   button and four roomy tiles pushed the first real booking 1.2 screens down.
   The bottom bar now carries "add", so the top can get out of the way. */
@media(max-width:760px){
  .panel-head{margin-bottom:16px;gap:10px}
  .panel-head h2{font-size:1.35rem}
  #todayDate{display:none}               /* her phone already shows the date */
  .head-actions{width:100%}
  .head-actions input[type=search]{width:auto;flex:1}
  .stats{gap:10px;margin-bottom:20px}
  .stat{padding:15px 16px;border-radius:14px}
  .stat b{font-size:1.55rem}
  .stat span{font-size:.84rem;margin-top:6px}
  .admin-main{padding-top:20px}
}

/* A workspace names the screen you're on; it doesn't greet you every time. */
@media(max-width:760px){
  .stats{grid-template-columns:1fr 1fr;gap:0}
  .stat{padding:15px 14px}
  .stat b{font-size:1.25rem}
  .stat span{font-size:.78rem}
  /* dividers have to follow the 2x2 shape, not a single row */
  .stat + .stat::before{content:none}
  .stat:nth-child(even){border-left:1px solid var(--line)}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  /* Three controls fighting over 354px squeezed the search field until it cut
     words in half. The title row carries the two buttons; search gets a full
     line of its own, because a text field needs somewhere to put text. */
  /* Stack it. The grid version worked on Bookings (one-word title) but crushed
     Money's description into a one-word column. Title, then search on its own
     line, then the buttons — nothing has to fight for width. */
  .panel-head{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px}
  .panel-head h2{font-size:1.5rem;letter-spacing:-.02em}
  .panel-head .muted{max-width:52ch}
  .head-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .head-actions input[type=search]{order:-1;flex:1 0 100%;width:100%;padding:14px 18px;font-size:1rem}
  .head-actions .btn{flex:1 1 auto;padding:12px 16px;font-size:.9rem;white-space:nowrap}
  .menu-wrap{flex:0 0 auto}
  .menu-wrap .btn{width:52px}
}

/* A booking is the thing she came here for, so it gets a touch more presence than
   the surfaces around it — and answers to the finger when tapped. */
#bookingsList > .card,
#calDayList > .card{
  box-shadow:0 0 0 1px rgba(16,24,40,.07),
             0 1px 2px rgba(16,24,40,.07),
             0 14px 28px -14px rgba(16,24,40,.20);
}
#bookingsList > .card:active,
#calDayList > .card:active{
  transform:translateY(1px);
  box-shadow:0 0 0 1px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.08),0 6px 14px -10px rgba(16,24,40,.18);
}
/* unfinished checkouts stay deliberately flatter — they aren't real bookings */
.unpaid-card{box-shadow:0 0 0 1px rgba(16,24,40,.05)!important;opacity:.8}

@media(max-width:400px){
  /* on the narrowest phones the button sheds a word rather than squeezing search */
  #addBooking{font-size:.86rem;padding:12px 14px}
}

/* ---- Reaching the customer: three equal actions, not three loose pills ---- */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.acts:has(.act:only-child){grid-template-columns:1fr}
.act{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;padding:11px 8px;border-radius:12px;cursor:pointer;
  font-family:var(--sans);font-size:.92rem;font-weight:600;
  background:#fff;color:var(--ink);border:1px solid rgba(16,24,40,.13);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:background .15s,border-color .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.act svg{width:17px;height:17px;flex:none;stroke-width:1.7}
.act:active{transform:translateY(1px);background:#F7F8FA}
.act-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.act-primary:active{background:var(--navy-deep)}
/* the row that follows (Manage) shouldn't sit tight against them */
.acts + .row-actions{margin-top:10px}

/* ---- List / Calendar: a proper segmented control, full width ---- */
.viewtabs{
  display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;max-width:none;
  background:rgba(16,24,40,.055);border-radius:12px;padding:4px;margin:0 0 20px;
}
.viewtab{
  border-radius:9px;padding:11px 12px;min-height:44px;
  font-size:.94rem;font-weight:600;color:var(--grey);background:none;border:0;cursor:pointer;
  transition:background .16s,color .16s,box-shadow .16s;
}
.viewtab.active{
  background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(16,24,40,.09),0 0 0 1px rgba(16,24,40,.04);
}

/* Rows in the More / + screens need to look tappable: a mark on the left so they
   scan, and a chevron on the right so it's obvious they lead somewhere. */
@media(max-width:760px){
  .screen-rows{background:#fff;border-radius:14px;overflow:hidden;
    box-shadow:0 0 0 1px rgba(16,24,40,.055),0 1px 2px rgba(16,24,40,.06),0 8px 18px -12px rgba(16,24,40,.14)}
  .screen-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
    background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;
    font-family:var(--sans);padding:12px 15px;min-height:56px;-webkit-tap-highlight-color:transparent}
  .screen-row:last-child{border-bottom:0}
  .screen-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
    background:var(--navy);color:#fff}
  .screen-ic svg{width:18px;height:18px;stroke-width:1.7}
  .screen-row-t{flex:1;min-width:0;font-size:1.02rem;font-weight:600;color:var(--ink)}
  .screen-go{flex:none;color:#A9B2BE;display:grid;place-items:center}
  .screen-go svg{width:17px;height:17px;stroke-width:2}
  .screen-row:active{background:rgba(30,42,54,.04)}
  .screen-row.on{padding-left:16px;margin-left:0;border-left:0;background:rgba(30,42,54,.05)}
  .screen-row.on .screen-ic{background:var(--gold);color:var(--navy-deep)}
  .screen-row.on .screen-row-t{color:var(--navy)}
  .screen-group{margin:24px 2px 8px}
  .screen-group:first-child{margin-top:2px}
}

/* Calendar has its own place in the bar on a phone, so the in-page List/Calendar
   switch would be a second control doing one job. Desktop keeps it — no bar there. */
@media(max-width:760px){ .viewtabs{display:none} }

/* one-time setup steps — numbers, not prose */
.steps{margin:14px 0 0;padding-left:20px}
.steps li{font-size:.95rem;color:var(--ink);margin-bottom:7px;line-height:1.45}
.steps li:last-child{margin-bottom:0}

/* Deleting is a last resort, not a button that sits next to Save. */
.danger-link{color:var(--bad);text-decoration:underline;font-size:.82rem;padding:8px 2px;display:inline-block}
.danger-link:hover{color:var(--bad);opacity:.8}
.rate-times{flex:1 1 100%;min-width:220px}
.rate-times small{display:block;font-weight:500;color:var(--grey);font-size:.7rem;margin-top:4px}
/* After saving a phone booking: the card step, right where she already is. */
.paydone{background:rgba(26,158,106,.08);border:1px solid rgba(26,158,106,.25);border-radius:12px;padding:12px 14px}
[data-newpay] .row-actions{flex-wrap:wrap;gap:8px;margin-top:10px}
/* Card box for phone orders — Stripe's own field, styled to match her dashboard. */
.cardbox{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px;margin-top:12px}
.cardbox-h{font-weight:700;font-size:1rem;margin-bottom:4px}
.card-el{border:1.5px solid var(--line);border-radius:11px;padding:14px 13px;background:#fff}
.card-el.StripeElement--focus{border-color:#8A97A8;box-shadow:0 0 0 3px rgba(30,42,54,.10)}
.card-err{color:var(--bad);font-size:.85rem;font-weight:600;margin:8px 0 0}
.payalt{margin-top:14px}
.payalt summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--grey);padding:6px 0}
/* Loud, because it means her website has stopped selling. */
.nothing-live{border:1.5px solid rgba(210,69,69,.45);background:rgba(210,69,69,.06)}
/* Heads-up when a rescheduled date is worth a different price. */
.datenote{background:rgba(255,194,74,.14);border:1px solid rgba(184,135,58,.3);border-radius:10px;padding:10px 12px;margin:2px 0 14px;font-size:.85rem;line-height:1.5}

/* A trip she hasn't collected on, visible while scrolling without reading it. */
.card.bk-owing{border-left:5px solid var(--bad);background:rgba(210,69,69,.035)}
.pill.unpaid{background:rgba(210,69,69,.14);color:var(--bad);text-transform:none;letter-spacing:.02em}
/* The one action on an unpaid trip: full width, unmissable, above the contact row. */
.collect-row{display:flex;width:100%;margin-top:14px;font-size:.95rem}
.card.bk-owing .acts{margin-top:8px}

/* Boats-out cards: the position line reads at a glance — green pulse while the
   guest's phone is reporting, calm grey when it's quiet or hasn't started. */
.pos-line{margin:10px 0 6px;font-size:.85rem;line-height:1.5}
.pos-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:#9AA7AA;vertical-align:baseline}
.pos-dot.on{background:#0B7A3B;animation:posPulse 2s ease-out infinite}
@keyframes posPulse{0%{box-shadow:0 0 0 0 rgba(11,122,59,.35)}100%{box-shadow:0 0 0 8px rgba(11,122,59,0)}}

/* Orientation & Map polish: long status pills read as sentences, not Title Case;
   the fleet stat tiles stay quiet next to the map; Refresh is a small utility,
   not a full-width banner above the map. */
#outList .pill{text-transform:none}
/* One seamless strip, four columns, hairline dividers — never separate tiles.
   The ID out-specifies every responsive .stats/.stat variant on purpose. */
#fleetStats{grid-template-columns:repeat(4,1fr);gap:0}
#fleetStats .stat{padding:12px 6px 11px;border-radius:0;border-left:0;border-top:0;text-align:center}
#fleetStats .stat b{font-size:1.3rem}
#fleetStats .stat span{font-size:.7rem;margin-top:3px;white-space:nowrap}
#fleetStats .stat + .stat::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--line)}
@media(max-width:760px){
  /* The stacked panel-head is for screens whose actions need their own rows
     (search + buttons). Here the only action is Refresh — one row carries both,
     so the map starts a full button-height sooner. */
  [data-panel="water"] .panel-head{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}
  [data-panel="water"] .head-actions{width:auto}
  #refreshFleet{flex:0 0 auto;padding:8px 14px;font-size:.85rem}
}

/* Charter checkbox: one honest line, reads like a sentence */
.charter-check{display:flex;align-items:center;gap:9px;margin:2px 0 12px;font-weight:600;font-size:.92rem;color:var(--ink)}
.charter-check input{width:19px;height:19px;accent-color:var(--deep-teal, #0F3A40);flex:none}