/* base.css - document-level defaults shared across pages: reset, body, the
   shared container, links, hidden helper and global focus behaviour. Depends on
   tokens.css, which is the ONE token authority: this file declares no custom property
   (the chrome and motion numbers that used to sit here live there now). Holds no
   components and no page layout. */
*{box-sizing:border-box;margin:0;padding:0}
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)}
[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:var(--radius-sm);
  transition:background-color .2s var(--ease)}
/* 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;
  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}}