/* The phone layout (mobile.css) rides on this file, which every app page already links: all of its
   screen rules are inside a phone-width query, so tablets and desktops are untouched. @import has to
   be the first rule here. */
@import url("mobile.css");

/* Type and grey tokens, and each person's Text size (N451, Jordan 2026-11-02).
   Sizes on every app page are in rem (or one of these tokens), so the whole app grows with the root font size below.
   Text size is a setting on the person's own account (Settings > General > Text size; backend users.text_size):
   auth-bootstrap.js reads it from the server's session answer and sets data-text-size on <html> before the page draws,
   so it follows the person to every device and changes nobody else's screen. Standard is 100%, Large 115%, Extra
   large 130%. The root size is a percentage of the browser's own, so a reader who already set a larger default in
   their browser keeps it too.
   Why the root font size and not `zoom`: zoom on the page scales 100vh panels past the bottom of the window and puts
   every pop-up that is placed from the mouse or a button's position in the wrong spot. A larger root font size only
   makes the text (and anything sized in rem) bigger; the layout keeps working at the window's real width.
   Minimums (decision 2026-11-02, Option B): labels, tags, headers and badges at least 12px; secondary text 13px; body
   and long reading text 15px (body moves to 15px page by page in release 2). Greys on the dark screens are never
   darker than #85858e (5.4:1 on #0b0b0f, 5.1:1 on #121218). Print, PDF and paper templates keep their own px sizes. */
:root{
  --text-scale:1;
  --fs-label:0.75rem;       /* 12px at Standard: labels, tags, table headers, badges, eyebrows */
  --fs-secondary:0.8125rem; /* 13px: secondary text, grey sub-lines */
  --fs-body:0.9375rem;      /* 15px: body text */
  --fs-body-lg:0.9375rem;   /* 15px: long reading text */
  --grey-dim:#85858e;       /* the lowest grey for text on the dark screens: 5.4:1 on #0b0b0f, 5.1:1 on #121218 */
  --grey-secondary:#9a9aa3; /* secondary text: 7.0:1 on #0b0b0f */
  --grey-strong:#c4c4cc;    /* emphasised secondary text */
}
html[data-text-size="large"]{--text-scale:1.15}
html[data-text-size="xlarge"]{--text-scale:1.3}
html{font-size:calc(100% * var(--text-scale))}

/* a11y.css: shared accessibility basics, linked from the <head> of every app page.
   Nothing here changes how a page looks until someone uses the keyboard: the ring shows on keyboard
   focus only, and the skip link stays off-screen until it is focused. */

/* Keyboard focus ring (StudioBase yellow). Elements that already draw their own focus style inline
   keep it. */
:focus-visible{outline:2px solid #F3FF57;outline-offset:2px}
/* Search boxes sit inside a styled pill and set outline:none inline, which beat the rule above, so a
   keyboard user could not see where they were. Their ring wins over the inline style. */
input[type="search"]:focus-visible,
input[placeholder^="Search"]:focus-visible,
input[aria-label^="Search"]:focus-visible{outline:2px solid #F3FF57 !important;outline-offset:2px}
/* Targets that only take focus from a script or the skip link (tabindex=-1) get no ring. */
[tabindex="-1"]:focus{outline:none}

/* "Skip to content": the first Tab stop on a page, aimed at that page's <main id="sb-main">. */
.sb-skip{position:fixed;left:12px;top:-64px;z-index:2147483647;padding:11px 16px;border-radius:10px;background:#F3FF57;color:#0b0b0f;font:700 0.875rem/1 'Barlow',system-ui,sans-serif;letter-spacing:.02em;text-decoration:none}
.sb-skip:focus{top:12px}

/* Paper never gets the skip link or a toast. The skip link shows while focused and toasts sit fixed
   over the page, so either one printed on top of a document's totals. A toast is any fixed-position
   status or alert message (save-notice.js, contacts-sync.js, demo-jobs.js, the demo bar and the
   pages' own React toasts); the shared ones are also named here. */
@media print{
  .sb-skip, #studiobase-save-notice, #contacts-sync-notice, [data-jobs-sync-toast], [data-demo-banner],
  [role="status"][style*="position: fixed"], [role="status"][style*="position:fixed"],
  [role="alert"][style*="position: fixed"], [role="alert"][style*="position:fixed"]{display:none !important}
}

/* Text size: iPhones enlarge text on their own when turned sideways ("auto"), which fights the reader's
   own text-size setting and breaks layouts. 100% leaves text at the size the page and the reader ask
   for. Pinch zoom is untouched. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Read by screen readers, not shown. */
.sb-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Demo Data bar: demo-banner.js sets --sb-demo-bar to the bar's height while it is showing, so a
   focused element is never scrolled in underneath it. */
html{scroll-padding-bottom:var(--sb-demo-bar,0px)}

/* Reduced motion: UI transitions and animations finish at once. The animated backgrounds (shader-bg,
   the three.js canvases, the Login glow) and the Login logo are left exactly as they are, on
   purpose: shader-bg handles reduced motion itself, and those were kept unchanged by decision. The away
   screensaver (.sb-away-bg, N214) also handles it itself: a slow cross-fade instead of motion. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  :not(canvas, shader-bg, shader-bg *, [style*="sbGlowDrift"], #sb-logo-mount, #sb-logo-mount *, .sb-away-bg),
  :not(canvas, shader-bg, shader-bg *, [style*="sbGlowDrift"], #sb-logo-mount, #sb-logo-mount *, .sb-away-bg)::before,
  :not(canvas, shader-bg, shader-bg *, [style*="sbGlowDrift"], #sb-logo-mount, #sb-logo-mount *, .sb-away-bg)::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important;
  }
}

/* Settings in the side menu (N164): pinned at the bottom as before, now set apart and brighter, the same
   yellow outline as in the top Menu and the phone's More. Only the look changes; who sees it is unchanged. */
#dc-root nav[style*="width: 78px"] a[href="Settings.dc.html"],
#dc-root nav[style*="width:78px"] a[href="Settings.dc.html"]{color:#F3FF57!important;margin-top:10px}
#dc-root nav[style*="width: 78px"] a[href="Settings.dc.html"] > div:first-child,
#dc-root nav[style*="width:78px"] a[href="Settings.dc.html"] > div:first-child{box-shadow:inset 0 0 0 1.5px #F3FF57}

/* The side menu (N451): a fixed 78px icon rail, so its words stop growing at 13px. They are 12px at the standard Text
   size, like every label, and still fit on one line at Large and Extra large. */
#dc-root nav[style*="width: 78px"] :is(span, div, a),
#dc-root nav[style*="width:78px"] :is(span, div, a){font-size:min(var(--fs-label), 13px) !important}