/* base.css — document-level defaults shared across pages: reset, body, the
   shared container, links, hidden helper and global focus behaviour. Depends on
   tokens.css. Holds no components and no page layout. */
*{box-sizing:border-box;margin:0;padding:0}
/* Chrome contract shared by BOTH chrome layers - site.css (marketing) and
   admin.css (console). They render different bars but must not drift apart in
   height, gutters, tap size or motion, and neither stylesheet is loaded by the
   other, so the numbers live here where both can see them. */
:root{
  --chrome-pad-y:20px;--chrome-pad-x:28px;--chrome-tap:48px;
  /* The chrome's own surface: the bar at rest and once the page is scrolled.
     The console's header is one element carrying both its rows, so it takes
     this surface once and darkens as a whole. */
  --chrome-bg:rgba(15,14,12,.8);--chrome-bg-scrolled:rgba(15,14,12,.88);
  /* The one gilded rule every piece of chrome is closed with - the bottom of both fixed
     bars and the top of the footer. A gradient, not a colour, so it can only be worn
     through border-image; it fades out at both ends so the line reads as a highlight
     rather than a frame. Declared here with the other chrome numbers because both chrome
     layers wear it and neither loads the other's stylesheet. */
  --chrome-rule:linear-gradient(90deg,transparent,rgba(201,165,88,.55) 22%,rgba(201,165,88,.55) 78%,transparent);
  /* The width the FOOTER spans on every page. Deliberately its own value and not
     --container: the marketing home widens .container to 1180px for its hero, and
     the footer is shared chrome - it must be the same strip on the home page, on
     every other public page and in the console, so it takes this width and no page
     can move it. Note it is WIDER than the shared content container (1120px), so on
     pages other than the home one the footer spans 30px further each side than the
     content above it. That is the deliberate consequence of making the home page
     the reference. */
  /* Contact-line glyphs, one definition each. They are worn as a MASK tinted with
     currentColor, never as a background image: a data: URI cannot read a custom
     property, so a background would have to bake the colour in and could not follow the
     line's own ink or its hover state. Drawn here rather than pulled from an icon set -
     three paths in the same thin-line language as the social marks beside them. */
  --icon-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 11.3v1.9a1.3 1.3 0 0 1-1.4 1.3A12.5 12.5 0 0 1 1.5 4a1.3 1.3 0 0 1 1.3-1.4h1.9a1.3 1.3 0 0 1 1.3 1.1c.1.6.2 1.2.4 1.7a1.3 1.3 0 0 1-.3 1.4l-.8.8a10.3 10.3 0 0 0 3.9 3.9l.8-.8a1.3 1.3 0 0 1 1.4-.3c.5.2 1.1.3 1.7.4a1.3 1.3 0 0 1 1.1 1.3z'/%3E%3C/svg%3E");
  --icon-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.6' y='3.4' width='12.8' height='9.2' rx='1'/%3E%3Cpath d='m1.9 4.2 6.1 4.6 6.1-4.6'/%3E%3C/svg%3E");
  --icon-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.6V8l2.4 1.4'/%3E%3C/svg%3E");
  /* Generic access glyph for the Elysium accessibility trust mark. A person with
     arms out in a ring - deliberately NOT the International Symbol of Access and
     not any government emblem: our mark is our own claim, so it may not borrow a
     symbol that reads as somebody else's authorisation. */
  --icon-access:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Ccircle cx='8' cy='4.6' r='.85' fill='%23000' stroke='none'/%3E%3Cpath d='M4.9 6.6h6.2M8 6.6v3.1l-1.5 3M8 9.7l1.5 3'/%3E%3C/svg%3E");  --chrome-footer-max:1180px;
  --menu-in:540ms;--menu-out:460ms;--nav-in:420ms;--nav-out:300ms;
  --ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);
  --ease-settle:cubic-bezier(.22,1,.36,1);--ease-standard:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100vh}
body{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
/* The page gutter is the chrome's, so the bar, the content and the footer stand on
   the same left edge on every page. It used to be --sp-5 (20px) here while six page
   layers each restated 28px, so any page without its own copy - the console, team,
   set-password, the error pages - silently sat 8px narrower than the rest. */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--chrome-pad-x)}
[hidden]{display:none!important}
/* Content for assistive technology only - present in the accessibility tree, never
   painted. Not `display:none`, which would hide it from a screen reader too. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- internal scroll surfaces ---------- */
/* ONE owner for every container on the site that scrolls INSIDE itself - the legal
   contents rail, the console's wide tables and tab strips, the Inbox list, the booking
   slot grid, long modal bodies. The page's own scrollbar is deliberately NOT here: it
   is the system one and stays that way.
   Styling keys on [data-scroll], which shared-ui.js stamps onto the containers it
   knows about, so the selector list lives in exactly one place (the script) and the
   look in exactly one other (here), and no markup carries either.
   Both axes are covered: 5px either way, so a horizontal strip gets the same thin bar
   as a vertical list. */
[data-scroll]{scrollbar-width:thin;scrollbar-color:transparent transparent;
  transition:scrollbar-color .2s var(--ease-standard)}
[data-scroll]::-webkit-scrollbar{width:5px;height:5px}
[data-scroll]::-webkit-scrollbar-track{background:transparent}
[data-scroll]::-webkit-scrollbar-thumb{background-color:transparent;border-radius:3px;
  transition:background-color .2s var(--ease-standard)}
/* Shown only while the container is in use. The reveal is a colour transition rather
   than opacity: opacity on a ::-webkit-scrollbar part is unreliable, colour is not.
   Note that current Chromium honours scrollbar-color and then ignores the
   ::-webkit-scrollbar rules - the two are alternative paths, not layers, and the
   WebKit ones are what Safari and older Chromium read. */
[data-scroll].is-scrolling{scrollbar-color:rgba(201,165,88,.25) transparent}
[data-scroll].is-scrolling::-webkit-scrollbar-thumb{background-color:rgba(201,165,88,.25)}
@media(hover:hover) and (pointer:fine){
  [data-scroll]:hover{scrollbar-color:rgba(201,165,88,.25) transparent}
  [data-scroll]:hover::-webkit-scrollbar-thumb{background-color:rgba(201,165,88,.25)}
  [data-scroll]::-webkit-scrollbar-thumb:hover{background-color:rgba(201,165,88,.45)}
}
/* The edges fade instead of cutting, on whichever side still has content behind it -
   which is the real indicator that there is more, and the reason a wide console table
   no longer just stops mid-column with nothing to say so.
   A MASK, not gradient pseudo-elements: ::before/::after inside a scroll container
   scroll away with the content, a mask applies to the element's own box and stays put.
   It also cannot intercept a tap, so touch scrolling is untouched - no pointer-events
   juggling needed. Two gradients composed so a container that scrolls both ways fades
   on all four sides; shared-ui.js switches each length between 0 and 28px.
   Its own attribute, because the fade is NOT always wanted. A textarea gets the thin
   bar but no fade: the caret follows the text, so at the bottom of a scrolled field the
   line being typed would sit inside the fade and go half-transparent under the cursor.
   Reading surfaces fade; editable ones do not. */
[data-scroll-edges]{--sf-top:0px;--sf-bottom:0px;--sf-left:0px;--sf-right:0px;
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0,#000 var(--sf-top),#000 calc(100% - var(--sf-bottom)),transparent 100%),
    linear-gradient(to right,transparent 0,#000 var(--sf-left),#000 calc(100% - var(--sf-right)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,transparent 0,#000 var(--sf-top),#000 calc(100% - var(--sf-bottom)),transparent 100%),
    linear-gradient(to right,transparent 0,#000 var(--sf-left),#000 calc(100% - var(--sf-right)),transparent 100%);
  mask-composite:intersect}
[data-scroll-edges].sf-top{--sf-top:28px}
[data-scroll-edges].sf-bottom{--sf-bottom:28px}
[data-scroll-edges].sf-left{--sf-left:28px}
[data-scroll-edges].sf-right{--sf-right:28px}
@media(prefers-reduced-motion:reduce){
  [data-scroll],[data-scroll]::-webkit-scrollbar-thumb{transition:none}
}

/* Global keyboard-focus affordance. Pointer focus stays quiet; keyboard focus is
   always visible for accessibility. Components may refine the offset/colour. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{scroll-behavior:auto!important}}