/* ─────────────────────────────────────────────────────────────
   Empowered Booking — v2 shell.

   Lifted from the design bundle (empowered-booking-design/preview),
   token for token and rule for rule. Do not re-derive these values by
   eye: they are the design, and the prototype is the reference.

   HOW THIS SITS NEXT TO styles.css
   styles.css loads first and still dresses every page that has not been
   ported yet. This file loads second and owns three things only:
     1. the :root tokens and the body
     2. the app shell — sidebar, page header, floating booking button
     3. the v2 component vocabulary, scoped under .v2

   Page level components live under `.v2` on purpose. A page that has
   been ported opts in by putting class="v2" on its content wrapper and
   then gets v2 cards, pills and buttons. A page that has not been
   ported keeps the old styles.css look and is untouched. That is what
   makes the port safe one page at a time.
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#04060C;
  --panel:#0B1120;
  --panel-alt-a:#101A30;
  --panel-alt-b:#0B1120;
  --card:#080C17;
  --border:rgba(47,124,255,0.16);
  --border-strong:rgba(47,124,255,0.32);
  --text:#F5F8FD;
  --text-dim:#A9B6D4;
  --text-mute:#64749c;
  --accent-a:#ffc23d;
  --accent-a-glow:rgba(255,194,61,.45);
  --accent-b:#22D3EE;
  --accent-b-glow:rgba(34,211,238,.45);
  --good:#2FD480;
  --live:#F2495C;
  --demo:#A9B6D4;
  --demo-glow:rgba(169,182,212,.16);
  --stat:#2F7CFF;

  /* Deep navy base lifted by a blue light source in the upper left.
     Every panel, card and tile that is not the storm photo uses one of
     these, so the whole UI shares a single lighting direction. */
  --surface-grad:
    radial-gradient(125% 105% at 12% 0%, rgba(34,92,170,.38) 0%, rgba(34,92,170,0) 58%),
    linear-gradient(158deg, #10294a 0%, #0b1c33 46%, #081422 100%);
  /* Softer version for small tiles and controls, so they read as recessed. */
  --surface-grad-soft:
    radial-gradient(135% 115% at 15% 0%, rgba(34,92,170,.24) 0%, rgba(34,92,170,0) 62%),
    linear-gradient(158deg, #0d2340 0%, #09182b 52%, #06101c 100%);
}

html{color-scheme:dark}
body{
  margin:0;
  background:var(--bg);
  background-image:none;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.tabnum{font-variant-numeric:tabular-nums}
.av{display:flex; align-items:center; justify-content:center; font-weight:800; border-radius:50%;
  flex-shrink:0; background:#12203a; color:var(--accent-b);
  box-shadow:0 0 0 2px rgba(34,211,238,.3), 0 0 14px rgba(34,211,238,.35);}

/* ── App shell / sidebar ─────────────────────────────────────── */
.app-shell{display:flex; align-items:stretch; position:relative; min-height:100vh;}
.sidebar{width:230px; flex-shrink:0;
  background:radial-gradient(120% 55% at 0% 0%, rgba(34,92,170,.30) 0%, rgba(34,92,170,0) 60%),
             linear-gradient(180deg, #0b1c33 0%, #071120 55%, #04060C 100%);
  border-right:1px solid var(--border); padding:22px 16px;
  display:flex; flex-direction:column; gap:2px; box-sizing:border-box;}
.sidebar-brand{display:flex; align-items:center; gap:12px; margin-bottom:4px; padding:0 4px;
  text-decoration:none;}
/* No container box: the bolt sits straight on the rail, lifted by a blue halo. */
.sidebar-logo{position:relative; width:64px; height:64px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;}
.sidebar-logo::before{
  content:''; position:absolute; left:50%; top:50%; width:78px; height:78px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(47,124,255,.55) 0%, rgba(34,211,238,.30) 40%, rgba(47,124,255,0) 72%);
  filter:blur(7px);
}
.sidebar-logo img{position:relative; width:54px; height:54px; object-fit:contain; display:block;
  filter:drop-shadow(0 0 9px rgba(47,124,255,.8)) drop-shadow(0 0 20px rgba(34,211,238,.45));}
.sidebar-brand-name{font-size:15px; font-weight:800; letter-spacing:.06em; color:var(--text); line-height:1.2;}
.sidebar-brand-sub{font-size:9.5px; font-weight:800; letter-spacing:.2em; color:#61A6FF; margin-top:4px;}
.sidebar-brand-sub i{font-style:normal; color:#2F7CFF; margin-right:5px;}
.sidebar-section-label{font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mute); margin:14px 8px 7px;}
/* A section that follows a nav block is a real break, so give it more room than the first. */
.sidebar-nav + .sidebar-section-label{margin-top:22px}
.sidebar-nav{display:flex; flex-direction:column; gap:2px}
/* Transparent border on every item so the active one does not shift by 2px. */
.sidebar-nav-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px;
  font-size:12.5px; font-weight:600; color:var(--text-dim); border:1px solid transparent;
  text-decoration:none;}
.sidebar-nav-item:hover{color:var(--text); background:rgba(47,124,255,.08)}
.sidebar-nav-item svg{width:15px; height:15px; flex-shrink:0}
/* Current page: dark blue pill, lit rim, halo bleeding into the rail. */
.sidebar-nav-item.active{
  background:linear-gradient(90deg, rgba(24,64,112,.95) 0%, rgba(12,36,62,.85) 100%);
  border:1px solid rgba(94,156,214,.55);
  color:var(--text); font-weight:800;
  box-shadow:0 0 18px rgba(47,124,255,.45), 0 0 36px rgba(47,124,255,.20),
             inset 0 1px 0 rgba(150,196,244,.18);
}
.sidebar-footer{margin-top:auto; display:flex; align-items:center; gap:9px; padding:14px 6px 0;
  border-top:1px solid var(--border);}
.sidebar-avatar{width:30px; height:30px; border-radius:50%; background:var(--accent-b); color:#04263f;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; flex-shrink:0;}
.sidebar-user-name{font-size:12px; font-weight:700; color:var(--text)}
.sidebar-user-role{font-size:10px; color:var(--text-mute)}
.sidebar-logout{margin-left:auto; color:var(--text-mute); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:4px 6px; border-radius:6px;}
.sidebar-logout:hover{color:var(--live); background:rgba(242,73,92,.1)}
.sidebar-main{flex:1; min-width:0}

/* Page header band, the "Good evening / Title / date" row. */
.page-pad{padding:28px 28px 0; max-width:1180px; margin:0 auto}
.page-body{padding:0 28px 40px; max-width:1180px; margin:0 auto}
.page-head{position:relative; display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:16px 28px;}
.page-head-l{flex:1 1 420px; min-width:0}
.page-greeting{font-size:13px; color:var(--text-dim); font-weight:600; margin-bottom:3px}
.page-title{margin:0; font-size:26px; line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--text)}
.page-head-r{display:flex; align-items:center; gap:16px; padding-top:2px}
.date-line{font-size:11px; color:var(--text-mute); font-weight:600; text-align:right}
.time-line{font-size:15px; color:var(--text); font-weight:800; margin-top:1px; text-align:right}

/* Floating booking action. Fixed so it rides the viewport on every page
   rather than living in the sidebar. */
.fab-book{position:fixed; right:26px; bottom:26px; z-index:60; display:flex; align-items:center; gap:9px;
  padding:14px 22px; border-radius:999px; font-size:13px; font-weight:800; text-decoration:none;
  background:var(--surface-grad); border:1px solid rgba(94,156,214,.55); color:var(--text);
  box-shadow:0 0 16px rgba(47,124,255,.45), inset 0 1px 0 rgba(150,196,244,.18);}
.fab-book:hover{box-shadow:0 0 26px rgba(47,124,255,.7), inset 0 1px 0 rgba(150,196,244,.25)}
.fab-book svg{width:16px; height:16px}

/* Mobile: the rail folds to a strip across the top. */
@media (max-width:860px){
  .app-shell{flex-direction:column}
  .sidebar{width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;
    padding:14px 16px; border-right:0; border-bottom:1px solid var(--border)}
  .sidebar-brand{margin-bottom:0}
  .sidebar-logo{width:40px; height:40px}
  .sidebar-logo img{width:34px; height:34px}
  .sidebar-logo::before{width:50px; height:50px}
  .sidebar-section-label{display:none}
  .sidebar-nav{flex-direction:row; flex-wrap:wrap; gap:6px}
  .sidebar-nav + .sidebar-section-label{margin-top:0}
  .sidebar-footer{margin-top:0; margin-left:auto; border-top:0; padding-top:0}
  .page-pad{padding:20px 16px 0}
  .page-body{padding:0 16px 32px}
  .fab-book{right:16px; bottom:16px; padding:12px 18px}
}

/* ─────────────────────────────────────────────────────────────
   v2 component vocabulary. Scoped under .v2 so a page opts in when it
   is ported. Everything below is from the design bundle.
   ───────────────────────────────────────────────────────────── */
.v2 .card{border-radius:16px; border:1px solid var(--border); background:var(--surface-grad);
  overflow:hidden; box-shadow:none; padding:0; margin:0}
.v2 .card-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.18);}
.v2 .card-title{font-size:8.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mute);}
.v2 .card-body{padding:16px 18px}

.v2 .pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; border:1px solid;
  background:none; color:inherit;}
.v2 .pill i{width:5px; height:5px; border-radius:50%; background:currentColor; display:block; flex-shrink:0}
.v2 .p-sold{color:#4ade9a; background:rgba(47,212,128,.10); border-color:rgba(47,212,128,.32)}
.v2 .p-scheduled{color:#7fb2ff; background:rgba(47,124,255,.10); border-color:rgba(47,124,255,.34)}
.v2 .p-no_show,.v2 .p-cancelled{color:#f2718a; background:rgba(242,73,92,.10); border-color:rgba(242,73,92,.30)}
.v2 .p-not_sold,.v2 .p-showed{color:var(--text-dim); background:rgba(169,182,212,.08); border-color:rgba(169,182,212,.24)}
.v2 .p-presented{color:#b49af2; background:rgba(150,116,235,.12); border-color:rgba(150,116,235,.40)}
.v2 .p-rescheduled{color:#ffc23d; background:rgba(255,194,61,.10); border-color:rgba(255,194,61,.32)}

.v2 .btn-csv{padding:8px 14px; border-radius:8px; font-family:inherit; font-size:12px; font-weight:800;
  cursor:pointer; background:transparent; color:var(--text-dim); border:1px solid var(--border-strong);}
.v2 .btn-csv:hover{color:var(--text); border-color:#61A6FF}
.v2 .seg{display:flex; gap:3px; padding:3px; border-radius:11px; background:var(--surface-grad-soft);
  border:1px solid var(--border);}
.v2 .seg-btn{font-size:11px; font-weight:700; padding:6px 14px; border-radius:8px;
  border:1px solid transparent; cursor:pointer; font-family:inherit; background:transparent;
  color:var(--text-dim); text-decoration:none;}
.v2 .seg-btn.on{background:linear-gradient(90deg, rgba(24,64,112,.95), rgba(12,36,62,.85));
  border-color:rgba(94,156,214,.55); color:var(--text); font-weight:800;}

.v2 .kv{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid rgba(47,124,255,.08); font-size:11.5px;}
.v2 .kv:last-child{border-bottom:0}
.v2 .kv-k{color:var(--text-mute); font-weight:700}
.v2 .kv-v{color:var(--text); font-weight:700; text-align:right}

.v2 .cf-lab{font-size:8.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mute); margin:14px 0 6px; display:block;}
.v2 .cf-in{width:100%; background:var(--surface-grad-soft); color:var(--text);
  border:1px solid var(--border-strong); border-radius:9px; padding:10px 12px; font-size:12px;
  font-family:inherit; font-weight:600;}
.v2 .cf-in:focus{outline:none; border-color:rgba(34,211,238,.6)}
.v2 .mini-btn{padding:5px 11px; border-radius:7px; border:1px solid var(--border-strong);
  background:var(--surface-grad-soft); color:var(--text-dim); font-family:inherit; font-size:10px;
  font-weight:800; cursor:pointer; text-decoration:none; display:inline-block;}
.v2 .mini-btn:hover{color:var(--text); border-color:#61A6FF}

/* Stat tiles, the row of four under the page header. */
.v2 .stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;
  margin-bottom:18px;}
.v2 .stat-card{border-radius:16px; border:1px solid var(--border); background:var(--surface-grad);
  padding:16px 18px;}
.v2 .stat-lab{font-size:8.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mute);}
.v2 .stat-num{font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-top:8px;
  font-variant-numeric:tabular-nums; color:var(--text);}
.v2 .stat-sub{font-size:11px; color:var(--text-mute); margin-top:4px}

.v2 table.dgrid{width:100%; border-collapse:collapse; font-size:12px;
  font-variant-numeric:tabular-nums;}
.v2 table.dgrid th{text-align:left; font-size:8.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mute); font-weight:800; padding:10px 14px; border-bottom:1px solid var(--border);}
.v2 table.dgrid td{padding:11px 14px; border-bottom:1px solid rgba(47,124,255,.08); font-weight:600;
  color:var(--text-dim);}
.v2 table.dgrid tbody tr:hover td{background:rgba(47,124,255,.05)}
.v2 table.dgrid tbody tr:last-child td{border-bottom:0}
.v2 table.dgrid td b,.v2 table.dgrid td strong{color:var(--text)}
/* A wide table scrolls inside its own box rather than widening the page.
   max-width and min-width:0 are both needed: without them a flex or grid
   ancestor sizes to the table's content and the whole page scrolls sideways. */
.v2 .tscroll{overflow-x:auto; max-width:100%; min-width:0}

.v2 .note{padding:11px 14px; border-radius:10px; background:rgba(47,124,255,.08);
  border:1px solid var(--border-strong); font-size:11.5px; color:var(--text-dim);}
.v2 .note b{color:var(--text)}
.v2 .warn{padding:11px 14px; border-radius:10px; background:rgba(255,194,61,.09);
  border:1px solid rgba(255,194,61,.32); font-size:11.5px; color:#f0d9a4;}
.v2 .warn b{color:#ffdf9a}
.v2 .good-note{padding:11px 14px; border-radius:10px; background:rgba(47,212,128,.08);
  border:1px solid rgba(47,212,128,.3); font-size:11.5px; color:#9fe9c1;}

/* Date range: one row. Back, the range as a button, forward. The presets
   and the custom from/to live in a panel that drops out of the button, so
   the page carries one control instead of three rows of them. */
.v2 .rangebar{display:inline-flex; align-items:center; gap:4px; max-width:100%; min-width:0}
.v2 .rangearrow{display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-grad-soft); color:var(--text-dim); font-size:13px;
  text-decoration:none; flex:0 0 auto}
.v2 .rangearrow:hover{color:var(--text); border-color:#61A6FF}

.v2 .rangepick{position:relative; min-width:0}
.v2 .rangepick > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:9px; font-size:12px; font-weight:800;
  border:1px solid rgba(94,156,214,.55); color:var(--text); white-space:nowrap;
  background:linear-gradient(90deg, rgba(24,64,112,.95), rgba(12,36,62,.85));
}
.v2 .rangepick > summary::-webkit-details-marker{display:none}
.v2 .rangepick > summary::after{content:'\25BE'; font-size:10px; color:var(--text-dim)}
.v2 .rangepick[open] > summary::after{transform:rotate(180deg)}
.v2 .rangepick > summary:hover{border-color:#61A6FF}

.v2 .rangepop{position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:max-content; max-width:min(92vw,420px);
  border:1px solid var(--border-strong); border-radius:12px; padding:12px;
  background:var(--surface-grad); box-shadow:0 12px 34px rgba(0,0,0,.6);}
.v2 .rangechips{display:flex; flex-wrap:wrap; gap:5px}
.v2 .rangechip{padding:5px 11px; border-radius:999px; font-size:11px; font-weight:700;
  border:1px solid var(--border); color:var(--text-dim); text-decoration:none; white-space:nowrap}
.v2 .rangechip:hover{color:var(--text); border-color:#61A6FF}
.v2 .rangechip.on{background:linear-gradient(90deg, rgba(24,64,112,.95), rgba(12,36,62,.85));
  border-color:rgba(94,156,214,.55); color:var(--text)}
.v2 .rangecustom{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--border)}
.v2 .rangecustom .cf-in{width:auto; flex:1 1 120px; padding:5px 8px; font-size:11px; margin:0}
.v2 .rangeto{font-size:10px; color:var(--text-mute); font-weight:800; text-transform:uppercase; letter-spacing:.1em}
.v2 .rangenote{margin-top:9px; font-size:10.5px; color:var(--text-mute); line-height:1.5}
/* On a phone the panel stops floating and simply drops below the bar. An
   absolutely positioned panel anchored to a button that sits part way across
   the screen will always hang off one edge or the other. */
@media (max-width:560px){
  .v2 .rangebar{display:flex; flex-wrap:wrap; width:100%}
  .v2 .rangepick{flex:1 1 auto}
  .v2 .rangepick > summary{width:100%; justify-content:space-between}
  .v2 .rangepop{position:static; width:auto; max-width:100%; margin-top:8px; box-shadow:none}
}


@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
:focus-visible{outline:2px solid var(--accent-b); outline-offset:2px}

/* Scope picker: the same dropdown as the range, sitting beside it. Quieter
   fill so the range stays the primary control on the row. */
.v2 .scopepick > summary{
  background:var(--surface-grad-soft);
  border-color:var(--border-strong);
  color:var(--text-dim);
  font-weight:700;
}
.v2 .scopepick > summary:hover{color:var(--text); border-color:#61A6FF}
.v2 .scopelab{font-size:8.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mute); margin:12px 0 6px; padding-top:10px; border-top:1px solid var(--border)}
.v2 .scopepick .rangepop > .rangechip:first-child{display:inline-block}

/* Pending money. Amber everywhere, never green: a deal waiting on its
   effective date is not owed, and the colour is the fastest way to say so. */
.v2 .pendingtag{display:inline-block; margin-top:3px; padding:1px 7px; border-radius:999px;
  font-size:9.5px; font-weight:800; letter-spacing:.04em; white-space:nowrap;
  color:var(--accent-a); background:rgba(255,194,61,.10); border:1px solid rgba(255,194,61,.32);}
.v2 .pendingcard{border-color:rgba(255,194,61,.32)}

/* Collapsible cards. The head is the toggle, so the card keeps its shape
   whether open or shut and the summary line still carries the figure. */
.v2 .foldcard{padding:0}
.v2 .foldcard > summary{list-style:none; cursor:pointer}
.v2 .foldcard > summary::-webkit-details-marker{display:none}
.v2 .foldcard > summary::after{content:'\25BE'; font-size:10px; color:var(--text-mute); margin-left:8px;
  transition:transform .15s; flex:0 0 auto}
.v2 .foldcard[open] > summary::after{transform:rotate(180deg); display:inline-block}
.v2 .foldcard > summary:hover{background:rgba(47,124,255,.06)}
.v2 .foldcard:not([open]) > summary{border-bottom:0}

/* Team bonus pool. Amber like the other money that is not individual pay,
   so it never reads as something one person is owed. */
.v2 .bonuscard{border-color:rgba(255,194,61,.28)}
.v2 .bonusfig{font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.15;
  color:var(--accent-a); font-variant-numeric:tabular-nums}
.v2 .bonuscond{font-size:11px; color:var(--text-dim); margin-top:5px; font-weight:600}
.v2 .bonusdesc{font-size:11px; color:var(--text-mute); margin:10px 0 0; line-height:1.55}

/* Settings rows: one line per team saying what is set, with the editor
   folded away behind a button. A form that is always open turns a settings
   page into a wall of inputs nobody reads. */
.v2 .setrow{border:1px solid var(--border); border-radius:12px; background:var(--surface-grad-soft); padding:12px 14px}
.v2 .setrow-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.v2 .setrow-name{font-size:12px; font-weight:800; color:var(--text); letter-spacing:.02em}
.v2 .setrow-sub{font-size:11.5px; color:var(--text-dim); margin-top:3px; font-weight:600}
.v2 .setrow-sub b{color:var(--text)}
.v2 .setrow-sub .pendingtag{margin-left:6px}

.v2 .editfold{flex:0 0 auto}
.v2 .editfold > summary{list-style:none; cursor:pointer}
.v2 .editfold > summary::-webkit-details-marker{display:none}
.v2 .editfold[open] > summary{color:var(--text); border-color:#61A6FF}
.v2 .editpanel{margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
  width:100%; flex:1 1 100%}
.v2 .editfold[open]{flex:1 1 100%}

.v2 .fieldgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.v2 .fld{display:block; margin:0}
.v2 .fld .cf-lab{margin:0 0 4px}
.v2 .fld .cf-in{padding:7px 10px}
.v2 .mini-btn.primary{padding:8px 15px; font-size:11.5px; margin-top:12px; color:var(--text);
  background:linear-gradient(90deg, rgba(24,64,112,.95), rgba(12,36,62,.85));
  border-color:rgba(94,156,214,.55)}

.v2 .histfold{margin-top:14px}
.v2 .histfold > summary{cursor:pointer; font-size:9px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-mute); list-style:none}
.v2 .histfold > summary::-webkit-details-marker{display:none}
.v2 .histfold > summary:hover{color:var(--text-dim)}
.v2 .histfold > .tscroll{margin-top:8px}
.v2 .muted{color:var(--text-mute)}

/* ─────────────────────────────────────────────────────────────
   Ported pages: undo the unscoped form rules in styles.css.

   styles.css still dresses every page that has not been ported yet, and
   it loads first. Some of its rules are unscoped, and this one bites:

     input, select, textarea { width:100% }

   A design page that never declares a width on a control inherits that.
   On the Leaderboard, the two dropdowns beside the period toggle are a
   flex row with `flex-wrap:wrap` -- at 100% each, they each take a whole
   row and wrap, and what should be one row becomes two stacked boxes.
   Nothing looks broken, so it reads as a design decision rather than a
   bug, which is why it is worth a rule with its name on it.

   A ported page IS the design, so it gets the design's own defaults back.
   Scoped to .ported, which the shell puts on a page rendered in raw mode --
   that is, exactly the pages that came from the design. A page still on the
   old styling DEPENDS on those rules, so it must not be caught by this.
   Remove this whole block once styles.css is gone.
   ───────────────────────────────────────────────────────────── */
/* Same narrowing as the label rule below, and for the same reason: two
   classes and a type outranks the design's own single class rules, so
   .bk-in{width:100%} lost to this and every field on a ported page was
   sized by the browser instead. The visible tell was the Client state
   dropdown shrinking to the width of "AZ" beside a full width Timezone. */
.sidebar-main.ported input:not([class]),
.sidebar-main.ported select:not([class]),
.sidebar-main.ported textarea:not([class]){
  width:auto; margin-top:0;
}
/* ONLY a label with no class of its own. The reset exists to undo the old
   stylesheet's bare `label` rules, and a bare label is what it should hit.
   Without :not([class]) this selector is two classes and a type, which
   outranks the design's own single class rules -- so every label a ported
   page styled itself was quietly overridden. That is why the two booking
   checkboxes sat side by side in 16px text: .bk-check says flex and 11.5px
   and lost to this. */
.sidebar-main.ported label:not([class]){
  display:inline; margin:0; font-size:inherit; font-weight:inherit;
  color:inherit; letter-spacing:normal; text-transform:none;
}

/* ─────────────────────────────────────────────────────────────
   Page backgrounds — ONE finished, full-page image per page, applied as the
   background of the main-page column only (the sidebar keeps its own). Shown at
   native pixel size, anchored top-left, no repeat, no resize/stretch/crop/tile
   and no masks, gradients, opacity or filters. All fades and footer effects are
   baked into the files themselves.
     Leaderboard                                   -> leaderboard-complete-background.png
     Settings / Closed Deals / Training / Appts    -> four-pages-complete-background.png
   ───────────────────────────────────────────────────────────── */
/* The page background is assembled as a SINGLE bitmap sized to the main-page
   column and applied by the script in partials/foot.ejs (guarded by pageBg).
   The artwork stays at proportional scale; only the dark centre grows to fill
   the height, so the footer lands at the bottom and the lightning never stretches.
   No CSS background-image / size / mask / gradient here on purpose. */

/* Keep the page title, greeting and clock crisp over the bright storm header:
   a dark text-halo so they pop against the clouds. Text only — no layout change,
   no background change. Scoped to the two background pages. */
body.bg-lb h1,            body.bg-storm h1,
body.bg-lb .page-title,   body.bg-storm .page-title,
body.bg-lb .page-greeting,body.bg-storm .page-greeting,
body.bg-lb .date-line,    body.bg-storm .date-line,
body.bg-lb .time-line,    body.bg-storm .time-line{
  text-shadow: 0 2px 9px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.9);
}