/* Generated by tools/site_build_book.py from fleet/hub/webui/site/skates-csm.css (sections 1, 2, 2b, 4) and tools/site_book_src.css. Do not edit. */

/* 1 fonts: Hanken Grotesk from the site's /fonts/ (Cinzel is the bundle's own face) */
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2 tokens: the panel token block (styles.css 26-69), declaration for declaration. First block of the file, no nested braces, no braces in comments. A test compares it with the panel's. */
:root{color-scheme:dark;--bg:#0b0507;--panel:#1a0a10;--panel2:#24101a;--panel-3:#2e1622;--sunken:#10060a;--border:rgba(224,166,124,.3);--border-soft:rgba(224,166,124,.2);--text:#f1dbd2;--text-dim:#c2a9b4;--faint:#a08a92;--accent:#e0a67c;--accent-strong:#f4e1c8;--accent-ink:#1c090e;--accent-dim:#3a1d1c;--accent-soft:rgba(224,166,124,.10);--accent-line:rgba(224,166,124,.40);--mag:#e05ac6;--mag2:#9c207b;--vio:#6a1f8a;--mag-soft:rgba(224,90,198,.14);--green:#72bd72;--green-soft:rgba(114,189,114,.12);--yellow:#e3c56b;--yellow-soft:rgba(227,197,107,.13);--red:#e2606b;--red-soft:rgba(226,96,107,.14);--cyan:#93aaea;--cyan-soft:rgba(147,170,234,.12);--purple:#b294ea;--purple-soft:rgba(178,148,234,.13);--sidebar:rgba(11,5,7,.55);--sidebar-active:#24101a;--shadow:0 18px 40px rgba(0,0,0,.55);--radius-s:0px;--radius:0px;--radius-l:0px;--font-ui:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;--font-display:"Cinzel","Palatino Linotype","Book Antiqua",Georgia,serif;--font-mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;--bg2:var(--panel);--bg3:var(--panel2);--panel-2:var(--panel2);--red-bg:#3a141b;--row-h:38px}

/* 2b legacy names still read by p8.js and by the .sk-stats rules. A second block with no hex values, so the token tests read only the first one */
:root{--line:var(--border-soft);--line2:var(--border);--lilac:var(--text-dim);--bone:var(--text);--card:var(--panel)}

/* 4 backdrop (panel 2008-2038; no thorns) */
#sk-fx{position:fixed;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sk-chains{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.5}
.sk-chains g{transform-box:view-box;animation:sk-sway 9s ease-in-out infinite alternate}
.sk-chains g:nth-child(1){transform-origin:330px 0}
.sk-chains g:nth-child(2){transform-origin:850px 0;animation-delay:-4s}
.sk-candle{position:fixed;bottom:-90px;width:330px;height:300px;z-index:1;pointer-events:none;background:radial-gradient(closest-side,rgba(187,95,63,.3),rgba(135,49,36,.14) 55%,transparent);animation:sk-flick 2.6s ease-in-out infinite}
.sk-candle.l{left:-110px}
.sk-candle.r{right:-110px;animation-delay:-1.1s}
.sk-vig{position:fixed;inset:0;box-shadow:inset 0 0 170px 46px #000;pointer-events:none;z-index:2}
.sk-frame{position:fixed;inset:10px;border:1px solid var(--border);z-index:3;pointer-events:none}
.sk-frame::before{content:"";position:absolute;inset:4px;border:1px solid rgba(224,166,124,.1)}
.sk-frame i{position:absolute;width:9px;height:9px;background:radial-gradient(#fad1ee,#cc32ad 45%,#610c65);transform:rotate(45deg);box-shadow:0 0 14px #cc32ad}
.sk-frame i:nth-child(1){left:-5px;top:-5px}
.sk-frame i:nth-child(2){right:-5px;top:-5px}
.sk-frame i:nth-child(3){left:-5px;bottom:-5px}
.sk-frame i:nth-child(4){right:-5px;bottom:-5px}
.sk-cop{background:linear-gradient(180deg,#f4e1c8 0%,#e0a67c 32%,#c56f49 64%,#8a3a24 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 9px rgba(190,50,36,.6))}
.sk-flare{height:9px;width:78%;position:relative;flex:none}
.sk-flare::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,transparent,var(--mag2) 22%,#f3b6f5 50%,var(--vio) 78%,transparent)}
.sk-flare::after{content:"";position:absolute;left:18%;right:18%;top:0;height:9px;background:radial-gradient(closest-side,rgba(224,90,198,.75),transparent);filter:blur(3px);animation:sk-flare 4s ease-in-out infinite}
@keyframes sk-sway{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
@keyframes sk-flick{0%,100%{opacity:.85}22%{opacity:.6}40%{opacity:1}63%{opacity:.7}81%{opacity:.95}}
@keyframes sk-flare{50%{opacity:.35;transform:scaleX(.6)}}
@keyframes sk-smolder{50%{filter:drop-shadow(0 0 20px rgba(224,90,198,.9))}}
@keyframes sk-spin{to{transform:rotate(360deg)}}
@keyframes sk-breath{50%{opacity:.5}}
@keyframes sk-lbr{0%,100%{filter:drop-shadow(0 0 16px rgba(204,50,173,.3))}50%{filter:drop-shadow(0 0 34px rgba(204,50,173,.6))}}

/* Hand-written part of /book/book-csm.css (lane C, look-spec S4 "/book/ (SPA)" and D17). tools/site_build_book.py puts it after
   the kit sections it takes from skates-csm.css (1 fonts, 2 tokens, 2b legacy names, 4 backdrop).
   The compiled SPA was built against the browser's own defaults and styles itself by class and by inline style objects that read
   its tokens. So this file does two things only: it points the SPA's tokens at the panel's tokens, and it restyles the SPA's own
   classes. It carries no global reset and no rule on a bare element except where the SPA uses a bare element (nothing in
   #root is reset). Every selector is a class of the bundle, a class of the backdrop, or #root-scoped. Keep the compact form,
   fleet/hub/site_book_test.py reads it. */

/* A. the SPA's tokens read the panel's (spec S4 remap block). --hairline is a 1px width and --inert is a text colour: --hairline stays,
   --inert is raised to the panel's faint text colour because #6b6b73 is 3.4:1 on the panel and badge--inert is text (DEV-B2). */
:root{--void:var(--bg);--stone:var(--panel);--raised:var(--panel2);--bronze:rgba(224,166,124,.2);--bronze-lit:rgba(224,166,124,.4);--gold:var(--accent);--gold-warm:var(--accent);--gold-lit:var(--accent-strong);--ink:var(--text);--ink-dim:var(--text-dim);--ink-faint:var(--faint);--ok:var(--green);--warn:var(--yellow);--bad:#ee7480;--inert:var(--faint);--font-sans:var(--font-ui);--radius:0;--radius-sm:0;--bevel-in:none;--bevel-in-raised:none;--bevel-in-deep:none;--lift-pop:var(--shadow)}

/* B. ground (kit section 3, without the class sk-page and without the reset) and the scroll model of the panel: the body is locked and the content scrolls */
html{background:#050304}
body{padding:16px;height:100vh;height:100dvh;min-height:0;overflow:hidden;background:radial-gradient(70% 56% at 50% 0%,rgba(97,12,101,.42) 0%,rgba(68,21,73,0) 64%),linear-gradient(#1c090e,#0b0507 60%,#050304);background-color:#050304;color:var(--text);font-size:14px;line-height:1.45;margin:0}
::selection{background:rgba(224,90,198,.35)}
*{scrollbar-width:thin;scrollbar-color:rgba(224,166,124,.3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(224,166,124,.28);border-radius:0;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
#root{position:relative;z-index:4;height:100%;min-height:0}
#root :focus-visible,.book-motion:focus-visible{outline:2px solid var(--mag);outline-offset:2px}
#root input[type=checkbox],#root input[type=radio]{accent-color:var(--mag)}
html.sk-still *,html.sk-still *::before,html.sk-still *::after{animation:none!important;transition:none!important}
html.sk-still #sk-fx{display:none}

/* C. shell: 244px flat sidebar, 56px top bar, content that scrolls inside (panel #app, #nav, #topbar, #content) */
.shell{display:flex;height:100%;min-height:0;overflow:hidden;background:none}
.shell__rail{position:static;flex:none;width:244px;height:auto;padding:0 10px 18px;overflow:auto;background:var(--sidebar);border-right:1px solid var(--border-soft)}
.shell__masthead{flex:none;display:flex;flex-direction:column;align-items:center;gap:11px;padding:20px 8px 28px;margin:0 -10px 8px;border:0;background-image:linear-gradient(90deg,transparent,var(--mag2) 22%,#f3b6f5 50%,var(--vio) 78%,transparent),radial-gradient(closest-side,rgba(224,90,198,.55),transparent);background-size:78% 1px,60% 9px;background-repeat:no-repeat;background-position:center calc(100% - 12px),center calc(100% - 8px);text-decoration:none!important}
.shell__masthead::before{content:"";display:block;width:150px;height:150px;flex:none;border-radius:50%;background:#000 url(/img/skates-logo-300.png) center/cover;box-shadow:0 0 0 1px rgba(224,166,124,.5),0 0 26px rgba(204,50,173,.4)}
.shell__masthead-text{display:flex;align-items:center;font:700 12px/1 var(--font-display);letter-spacing:.42em;padding-left:.42em;white-space:nowrap;text-transform:uppercase;background:linear-gradient(180deg,#f4e1c8 0%,#e0a67c 32%,#c56f49 64%,#8a3a24 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 9px rgba(190,50,36,.6))}
.shell__masthead-text::before{content:"\25C6";order:1;margin:0 .3em;color:var(--mag);-webkit-text-fill-color:var(--mag);text-shadow:0 0 12px var(--mag)}
.shell__masthead-text::after{content:"D2R";order:2}
.shell__masthead:hover{color:inherit}
.shell__nav-group{padding:0;margin-bottom:14px}
.shell__rail .shell__nav-group-label{display:block;font:700 9.5px/1.45 var(--font-display);letter-spacing:.34em;text-transform:uppercase;color:var(--accent);padding:12px 10px 6px}
.shell__nav-item{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border:0;border-bottom:1px solid rgba(241,219,210,.07);border-radius:0;background:transparent;color:var(--faint);font:500 11px/1.45 var(--font-display);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer;transition:color .3s,padding-left .3s,text-shadow .3s}
.shell__nav-item:hover{color:var(--text);background:transparent;padding-left:16px;text-decoration:none}
.shell__nav-item[aria-current=page]{color:var(--accent-strong);background:transparent;text-shadow:0 0 18px rgba(224,90,198,.95)}
.shell__nav-item[aria-current=page]::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2px;background:var(--mag);box-shadow:0 0 12px var(--mag)}
.shell__nav-label{white-space:nowrap}
.bracket::before,.bracket::after{content:none;border:0}
.shell .bracket{padding-inline:0}
.shell__nav-glyph{flex:none;display:block;width:18px;height:18px;font-size:0;line-height:0;color:#77626c}
.shell__nav-glyph::before{content:"";display:block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.shell__nav-item:hover .shell__nav-glyph{color:var(--text-dim)}
.shell__nav-item[aria-current=page] .shell__nav-glyph{color:var(--mag);filter:drop-shadow(0 0 6px rgba(224,90,198,.8))}
.shell__nav-item[href$="/calendar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E")}
.shell__nav-item[href$="/shop"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l-1 13H6z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E")}
.shell__nav-item[href$="/bookings"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E")}
.shell__nav-item[href$="/partner"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c.6-3.4 3-5 6-5s5.4 1.6 6 5M16 6a3 3 0 0 1 0 6M18 15c1.8.6 2.7 2.2 3 5'/%3E%3C/svg%3E")}
.shell__nav-item[href="/csm/"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.shell__main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.shell__topbar{position:static;flex:none;height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:0 20px 0 28px;background:rgba(11,5,7,.55);border-bottom:1px solid var(--border-soft)}
.shell__title{display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:0;overflow:hidden;white-space:nowrap;font:500 11px/1.45 var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-strong)}
.shell__title::before{content:"Book  /";position:static;width:auto;border:0;flex:none;color:var(--faint);white-space:pre}
.shell__identity{flex:none;height:56px;flex-wrap:nowrap;gap:8px;padding-left:12px;border-left:1px solid var(--border-soft);justify-content:flex-end}
.shell__identity select{height:auto!important;padding:4px 6px!important;font-size:12px!important;color:var(--text-dim)!important;background:var(--sunken)!important;border:1px solid var(--border-soft)!important;border-radius:0}
.shell__identity-link{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-size:12.5px}
.shell__identity-link:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--mag)}
.shell__identity-roles{font:500 11px/1.45 var(--font-ui);letter-spacing:.04em;text-transform:none;color:var(--faint)}
.shell__login-error{color:var(--red);font-size:12.5px}
.shell__content{flex:1;min-height:0;min-width:0;overflow:auto;padding:26px 32px 40px;background:rgba(11,5,7,.3);scroll-padding-top:16px}
.shell__viewport{max-width:1180px}
.shell__viewport--wide{max-width:1560px}

/* D. titles, panels, labels, tables, badges */
#root h1{font:700 19px/1.3 var(--font-display);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 14px rgba(190,50,36,.55);margin:0 0 16px}
#root h1.shell__title{font:500 11px/1.45 var(--font-display);letter-spacing:.15em;color:var(--accent-strong);text-shadow:none;margin:0}
#root h2{font:700 14px/1.45 var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
#root h3:not([class]){margin:0 0 12px;font:700 12px/1.45 var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
#root h3:not([class])::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;vertical-align:1px;background:var(--accent);box-shadow:0 0 10px var(--accent),0 -4px 8px rgba(224,166,124,.6);animation:sk-flick 1.8s infinite}
.panel>h3:first-child:not([class]){margin:calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4)!important;padding:14px var(--space-5);border-bottom:1px solid var(--border-soft)}
.panel{background:var(--panel);border:1px solid var(--border-soft);border-radius:0;box-shadow:inset 2px 0 0 var(--mag),-8px 0 16px -9px rgba(224,90,198,.7);overflow:hidden}
.panel--raised{background:var(--panel2);box-shadow:inset 2px 0 0 var(--mag),-8px 0 16px -9px rgba(224,90,198,.7)}
.panel .panel{box-shadow:inset 2px 0 0 var(--accent-line);background:var(--panel2)}
.eyebrow{font:700 10px/1.45 var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.stat .eyebrow{font:500 12.5px/1.45 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-dim)}
.stat__value{font:600 28px/1.05 var(--font-ui);font-variant-numeric:lining-nums tabular-nums;color:var(--text)}
div:not(.panel):has(>.stat){display:flex!important;flex-wrap:wrap;gap:0!important;border:1px solid var(--border-soft);overflow:hidden}
div:not(.panel):has(>.stat)>.stat{flex:1 1 160px;padding:14px 16px;border-right:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);margin:0 -1px -1px 0}
.mono,.table td.mono{font-family:var(--font-ui);font-size:inherit;font-variant-numeric:lining-nums tabular-nums}
.rule{height:1px;background:var(--border-soft);border:0}
.scroll-x:has(>.table){border:1px solid var(--border-soft);background:var(--panel)}
.table{font-size:14px;font-variant-numeric:tabular-nums}
.table th{padding:10px 12px;font:600 12px/1.45 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-dim);background:var(--panel);border-bottom:1px solid var(--border-soft)}
.table td{padding:7px 12px;border-bottom:1px solid var(--border-soft);color:var(--text)}
.table tbody tr{height:var(--row-h)}
.table tbody tr:nth-child(2n){background:transparent}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:rgba(224,90,198,.06)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:0;border-radius:999px;font:600 12px/1.45 var(--font-ui);letter-spacing:0;text-transform:none;white-space:nowrap;background:var(--panel2);color:var(--text-dim);box-shadow:inset 0 0 0 1px var(--border-soft)}
.badge::before{font-size:9px}
.badge--ok{color:var(--green);background:var(--green-soft);box-shadow:none}
.badge--warn{color:var(--yellow);background:var(--yellow-soft);box-shadow:none}
.badge--bad{color:var(--bad);background:var(--red-soft);box-shadow:none}
.badge--inert{color:var(--text-dim)}
.shell__nav-item,.shell__masthead,.shell__identity-link,.btn{text-decoration:none}
.shell__content a:not(.btn):hover{color:#fff;text-decoration:underline;text-decoration-color:var(--mag)}
.shell__content button:not(.btn){font-family:var(--font-ui)}

/* E. controls (kit section 7, on the SPA's classes) */
.btn{gap:7px;padding:7px 14px;font:500 11px/1.3 var(--font-display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--text-dim);background:transparent;border:1px solid var(--border-soft);border-radius:0;box-shadow:none;transition:border-color .25s,color .25s,box-shadow .25s,background .25s,filter .25s,transform .25s}
.btn:hover{background:transparent;border-color:var(--mag);color:#fff;box-shadow:0 0 18px rgba(224,90,198,.3);text-decoration:none}
.btn:active{transform:none}
.btn:disabled,.btn[disabled]{border-color:var(--border-soft);color:var(--text-dim);box-shadow:none;opacity:.45;cursor:not-allowed}
.btn--primary,.shell__identity .btn--ghost{position:relative;isolation:isolate;border:1px solid transparent;color:#fff;font-weight:700;letter-spacing:.24em;padding:8px 22px 8px 25px;background:transparent;filter:drop-shadow(0 0 9px rgba(224,90,198,.5));box-shadow:none}
.btn--primary::before,.shell__identity .btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#cc32ad,#610c65);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
.btn--primary:hover,.shell__identity .btn--ghost:hover{background:transparent;border-color:transparent;color:#fff;box-shadow:none;filter:brightness(1.25) drop-shadow(0 0 16px rgba(224,90,198,.9))}
.btn--primary:active,.shell__identity .btn--ghost:active{transform:scale(.97)}
.btn--primary:disabled,.btn--primary:disabled:hover{border-color:transparent;color:#d9c3cf;filter:grayscale(.7);box-shadow:none;opacity:1}
.btn--danger{border-color:rgba(226,96,107,.45);color:var(--red);background:transparent}
.btn--danger:hover{background:var(--red-soft);border-color:var(--red);color:#ffd9dc;box-shadow:0 0 18px rgba(226,96,107,.3)}
.btn--ghost{border-color:transparent;color:var(--text-dim)}
.btn--ghost:hover{background:var(--panel2);border-color:transparent;color:var(--text);box-shadow:none}
.shell__identity .btn--ghost:hover{background:transparent}
/* the bundle's own pages (partner, calendar) also use bare selects and inputs; :where() keeps these at zero specificity so every class rule above and in the bundle wins */
:where(.shell__content) :is(select,textarea,input:not([type=checkbox],[type=radio],[type=range])){font-family:var(--font-ui);font-size:13.5px;line-height:1.3;color:var(--text);background:var(--sunken);border:1px solid rgba(224,166,124,.55);border-radius:0;padding:6px 11px;caret-color:var(--mag)}
:where(.shell__content) :is(select,textarea,input:not([type=checkbox],[type=radio],[type=range])):focus{border-color:var(--mag);box-shadow:0 0 0 3px var(--mag-soft)}
:where(.shell__content) select option{background:var(--panel);color:var(--text)}
.field+p{margin-top:var(--space-2)}
.field>label{font:400 12px/1.45 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-dim)}
.field input,.field select,.field textarea,.mini-input{font-family:var(--font-ui);font-size:13.5px;line-height:1.3;color:var(--text);background:var(--sunken);border:1px solid rgba(224,166,124,.55);border-radius:0;box-shadow:none;padding:6px 11px;caret-color:var(--mag)}
.field input:hover,.field select:hover,.field textarea:hover,.mini-input:hover{border-color:var(--accent)}
.field input:focus,.field select:focus,.field textarea:focus,.mini-input:focus{border-color:var(--mag);box-shadow:0 0 0 3px var(--mag-soft)}
.field input::placeholder,.field textarea::placeholder,.mini-input::placeholder{color:var(--faint)}
.field select option{background:var(--panel);color:var(--text)}
.range-slider{height:.4rem;background:var(--sunken);border:1px solid var(--border-soft);box-shadow:none;border-radius:0}
.range-slider::-webkit-slider-thumb{width:1rem;height:1rem;background:var(--mag);border:1px solid #f3b6f5;border-radius:0;box-shadow:0 0 12px rgba(224,90,198,.8);transform:rotate(45deg)}
.range-slider::-moz-range-thumb{width:1rem;height:1rem;background:var(--mag);border:1px solid #f3b6f5;border-radius:0;box-shadow:0 0 12px rgba(224,90,198,.8)}
.range-slider::-moz-range-track{background:var(--sunken);border-radius:0}

/* F. cards (hour packs, services): the SPA's hover and focus reveal stays */
.card__face{background:var(--panel);border:1px solid var(--border-soft);border-radius:0;box-shadow:inset 2px 0 0 var(--mag),-8px 0 16px -9px rgba(224,90,198,.7)}
.card__name,.card__detail-name{font:700 12px/1.45 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.card__detail{background:var(--panel2);border:1px solid var(--accent-line);border-radius:0;box-shadow:inset 2px 0 0 var(--mag),var(--shadow),0 0 22px rgba(224,90,198,.18)}
.card__detail-price{font:600 14px/1.45 var(--font-ui);color:var(--accent-strong)}
.card__detail-body{color:var(--text)}
.card__detail-meta{color:var(--text-dim)}
.card:hover .card__face,.card:focus-within .card__face{border-color:var(--accent-line)}
.card:focus-visible{outline:2px solid var(--mag);outline-offset:2px}
@media (hover:none){
.card{background:var(--panel);border:1px solid var(--border-soft);box-shadow:inset 2px 0 0 var(--mag),-8px 0 16px -9px rgba(224,90,198,.7)}
.card__face,.card:hover .card__face,.card:focus-within .card__face{background:none;border:0;box-shadow:none}
.card__detail{background:none;border:0;box-shadow:none;padding:0 var(--space-4) var(--space-4)}
}
.modal-backdrop{background:rgba(5,3,4,.62)}
.modal-backdrop__dialog{background:var(--panel);border:1px solid var(--border);box-shadow:inset 2px 0 0 var(--mag),-8px 0 16px -9px rgba(224,90,198,.7),var(--shadow)}
.modal-backdrop__close{border-color:transparent;font-size:18px;letter-spacing:0;padding:2px 10px}

/* G. MOTION: a fixed switch outside #root, wired by /skates-fx.js (any [data-sk-motion]); it sits where the panel keeps it, at the foot of the sidebar */
.book-motion{position:fixed;left:26px;bottom:26px;z-index:70;padding:4px 0 2px;background:transparent;border:0;box-shadow:none;color:var(--faint);font:500 9.5px/1.3 var(--font-display);letter-spacing:.3em;text-transform:uppercase;cursor:pointer;text-align:left}
.book-motion:hover{color:var(--accent-strong)}

/* H. below 1100px the calendar and the hour packs keep the SPA's own wrapping; phone mode is a width query like the kit's (D4) */
@media (max-width:719px){
body{padding:8px}
.shell{flex-direction:column}
.shell__rail{flex:none;width:auto;flex-direction:row;align-items:center;gap:6px;padding:0 8px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--border-soft)}
.shell__masthead{flex:none;margin:0;padding:7px 0;background:none}
.shell__masthead::before{width:30px;height:30px;box-shadow:0 0 0 1px rgba(224,166,124,.55)}
.shell__masthead-text{display:none}
.shell__nav-group{display:flex;flex:none;margin:0}
.shell__rail .shell__nav-group-label{display:none}
.shell__nav-item{height:44px;padding:0 8px;gap:6px;letter-spacing:.08em;border:0}
.shell__nav-item:hover{padding-left:8px}
.shell__nav-label{display:inline;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shell__nav-item[aria-current=page] .shell__nav-label{display:inline;position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
.shell__nav-item[aria-current=page]::before{left:8px;right:8px;top:auto;bottom:0;width:auto;height:2px}
.shell__topbar{padding:0 10px;gap:8px}
.shell__title::before{display:none}
.shell__identity{padding-left:6px;gap:6px}
.shell__identity-link{max-width:72px}
.shell__identity-roles{display:none}
.shell__identity .btn--ghost{padding:8px 12px 8px 14px;letter-spacing:.1em;font-size:10px}
.shell__content{padding:16px 16px 64px}
.panel>h3:first-child:not([class]){margin:-1.5rem -1.5rem var(--space-4)!important}
.btn,.field input,.field select,.mini-input{min-height:44px}
.shell__identity select{min-height:44px!important;font-size:16px!important}
:where(.shell__content) :is(select,textarea,input:not([type=checkbox],[type=radio],[type=range])){min-height:44px;font-size:16px}
.field input,.field select,.field textarea,.mini-input{font-size:16px;padding:9px 12px}
.book-motion{left:14px;bottom:14px;padding:8px 10px;background:var(--panel);border:1px solid var(--border-soft)}
}
@media (max-width:860px) and (min-width:720px){
.shell__rail{width:244px}
.shell__masthead-text{display:flex}
.shell__nav-group-label{display:block}
.shell__nav-label{display:inline}
.shell__nav-item{justify-content:flex-start}
.shell__content{padding:26px 24px 40px}
}
@media (max-height:690px){
.book-motion{background:linear-gradient(rgba(11,5,7,0),#0b0507 30%);padding:10px 12px 4px 0}
}
@media (forced-colors:active){.shell__nav-item[aria-current=page]{border-left:4px solid Highlight;font-weight:700;text-decoration:underline}}