/* ============================================================================
   Platinum — one stylesheet, no build step

   This file is served verbatim. There is no Tailwind, no PostCSS, no Vite, no
   node_modules, and nothing to run before a deploy: edit this file, reload the
   page, done.

   ## Why that is the right call here rather than a compromise

   The templates in this project use exactly zero utility classes. Every class
   in every Blade file is a semantic component name — .card, .btn, .table,
   .store-top — because the markup was written that way from the start. Tailwind
   was therefore doing one job: turning `@theme` into custom properties, which
   CSS does natively in `:root`. Removing it removes a toolchain and changes
   nothing about the output.

   What the build DID provide, and is replaced by hand below, is Preflight —
   Tailwind's reset. Its absence is why the "Base" section is longer than a
   token file would normally warrant. Nothing in it is decorative.

   ## Structure

     1. Tokens        — every colour, radius and shadow, as semantic roles
     2. Base          — the reset, plus focus and motion rules
     3. Layout        — the back-office shell and the storefront frame
     4. Components    — cards, buttons, fields, badges, tables, stats
     5. Utilities     — the handful that earn their place

   Colours are declared as roles, never as raw hex at the point of use, so
   retheming means editing section 1 and nothing else.

   Dark mode is a designed set of steps chosen for a dark surface, not an
   automatic inversion. Both scopes are declared: the media query covers the OS
   setting, the [data-theme] attribute covers the in-app toggle, and the toggle
   wins in both directions.
   ========================================================================= */

/* ============================================================================
   1. Tokens
   ========================================================================= */

:root {
  color-scheme: light;

  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius-card: 0.625rem;
  --radius-control: 0.5rem;
  --radius-pill: 9999px;

  /* Data-end rounding. 4px, anchored so bars stay flat on the baseline. */
  --radius-data: 4px;

  /* Planes ---------------------------------------------------------------- */
  --plane:            #f4f4f2;  /* app background, behind cards */
  --surface:          #fcfcfb;  /* cards, panels, table rows */
  --surface-raised:   #ffffff;  /* modals, dropdowns, popovers */
  --surface-sunken:   #efefec;  /* table headers, inset wells */
  --surface-inverse:  #17171a;  /* the sidebar */

  /* Ink -------------------------------------------------------------------- */
  --ink-primary:      #0b0b0b;
  --ink-secondary:    #52514e;
  --ink-muted:        #898781;
  --ink-on-inverse:   #f4f4f2;
  --ink-on-accent:    #ffffff;

  /* Lines ------------------------------------------------------------------ */
  --line:             rgba(11, 11, 11, 0.10);
  --line-strong:      rgba(11, 11, 11, 0.18);
  --gridline:         #e1e0d9;
  --baseline:         #c3c2b7;

  /* Accent ----------------------------------------------------------------- */
  --accent:           #2a78d6;
  --accent-hover:     #256abf;
  --accent-active:    #1c5cab;
  --accent-wash:      #eaf2fd;
  --accent-ring:      rgba(42, 120, 214, 0.35);

  /* Status. Never themed, never reused as a series colour, always shipped
     with an icon and a label so colour is never the only signal. */
  --status-good:      #0ca30c;
  --status-warning:   #fab219;
  --status-serious:   #ec835a;
  --status-critical:  #d03b3b;
  --status-good-text: #006300;
  --status-good-wash: #e7f6e7;
  --status-warn-wash: #fdf3e0;
  --status-crit-wash: #fbeaea;

  /* Categorical series, fixed order. Never cycled. */
  --series-1: #2a78d6;  --series-2: #eb6834;
  --series-3: #1baf7a;  --series-4: #eda100;
  --series-5: #e87ba4;  --series-6: #008300;
  --series-7: #4a3aa7;  --series-8: #e34948;

  --shadow-card:  0 1px 2px rgba(11,11,11,0.04), 0 1px 3px rgba(11,11,11,0.06);
  --shadow-float: 0 4px 12px rgba(11,11,11,0.08), 0 12px 32px rgba(11,11,11,0.10);

  /* Layout metrics ---------------------------------------------------------- */
  --sidebar-w: 15rem;
  --topbar-h: 3.5rem;
  --content-max: 82rem;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) {
    color-scheme: dark;

    --plane:            #0d0d0d;
    --surface:          #1a1a19;
    --surface-raised:   #232322;
    --surface-sunken:   #141413;
    --surface-inverse:  #000000;

    --ink-primary:      #ffffff;
    --ink-secondary:    #c3c2b7;
    --ink-muted:        #898781;
    --ink-on-inverse:   #f4f4f2;
    --ink-on-accent:    #ffffff;

    --line:             rgba(255, 255, 255, 0.10);
    --line-strong:      rgba(255, 255, 255, 0.18);
    --gridline:         #2c2c2a;
    --baseline:         #383835;

    --accent:           #3987e5;
    --accent-hover:     #5598e7;
    --accent-active:    #6da7ec;
    --accent-wash:      rgba(57, 135, 229, 0.14);
    --accent-ring:      rgba(57, 135, 229, 0.45);

    --status-good-text: #0ca30c;
    --status-good-wash: rgba(12, 163, 12, 0.14);
    --status-warn-wash: rgba(250, 178, 25, 0.14);
    --status-crit-wash: rgba(208, 59, 59, 0.16);

    --series-1: #3987e5;  --series-2: #d95926;
    --series-3: #199e70;  --series-4: #c98500;
    --series-5: #d55181;  --series-6: #008300;
    --series-7: #9085e9;  --series-8: #e66767;

    --shadow-card:  0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.24);
    --shadow-float: 0 4px 12px rgba(0,0,0,0.44), 0 12px 32px rgba(0,0,0,0.40);
  }
}

/* The in-app toggle. Duplicated deliberately so it beats the OS setting. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --plane: #0d0d0d;            --surface: #1a1a19;
  --surface-raised: #232322;   --surface-sunken: #141413;
  --surface-inverse: #000000;
  --ink-primary: #ffffff;      --ink-secondary: #c3c2b7;
  --ink-muted: #898781;        --ink-on-inverse: #f4f4f2;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);
  --gridline: #2c2c2a;         --baseline: #383835;
  --accent: #3987e5;           --accent-hover: #5598e7;
  --accent-active: #6da7ec;    --accent-wash: rgba(57,135,229,0.14);
  --accent-ring: rgba(57,135,229,0.45);
  --status-good-text: #0ca30c;
  --status-good-wash: rgba(12,163,12,0.14);
  --status-warn-wash: rgba(250,178,25,0.14);
  --status-crit-wash: rgba(208,59,59,0.16);
  --series-1: #3987e5;  --series-2: #d95926;
  --series-3: #199e70;  --series-4: #c98500;
  --series-5: #d55181;  --series-6: #008300;
  --series-7: #9085e9;  --series-8: #e66767;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.24);
  --shadow-float: 0 4px 12px rgba(0,0,0,0.44), 0 12px 32px rgba(0,0,0,0.40);
}

/* ============================================================================
   2. Base

   This section replaces Tailwind's Preflight. It is deliberately conservative:
   it normalises the things the components below assume, and leaves ordinary
   prose alone — the policies and contact pages are written as plain HTML and
   should still look like documents.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Form controls do not inherit typography from the page. Browsers still use a
   system font at a browser-chosen size, so without this every input renders in
   a different face from the label beside it. */
button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  margin: 0;
}

button, [type='button'], [type='submit'], [type='reset'] {
  -webkit-appearance: button;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

/* Replaced elements are inline by default, which leaves a stray descender-sized
   gap under every image sitting in a block. */
img, svg, video, canvas, iframe, object {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

table { border-collapse: collapse; border-spacing: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; }

/* Visible focus everywhere. The legacy site had none — every interactive
   element was an <input type="image"> or a bare anchor, and the site was
   unusable from a keyboard. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   3. Layout

   Two frames. `.shell` is the back office: fixed sidebar, sticky topbar,
   scrolling content. `.store-*` is the customer site: full-width header over a
   centred column.
   ========================================================================= */

/* Back office ------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--surface-inverse);
  color: var(--ink-on-inverse);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 1rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.sb-mark {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(135deg, #e8e8e6, #a8a8a4);
  color: #17171a;
  display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 800;
}

/* Pinned to the bottom of the sidebar — `margin-top:auto` in a flex column is
   what keeps the signed-in user at the foot regardless of nav length. */
.sb-user {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(244, 244, 242, 0.72);
}

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
  width: 100%;
  max-width: var(--content-max);
}

.who { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.avatar {
  width: 28px; height: 28px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-secondary);
  display: grid; place-items: center;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase;
}

.search { flex: 1; max-width: 22rem; }

/* Storefront -------------------------------------------------------------- */

.store-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.5rem;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.store-brand {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--ink-primary);
  font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.02em;
  text-decoration: none;
  flex: none;
}

.store-mark {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(135deg, #e8e8e6, #a8a8a4);
  color: #17171a;
  display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 800;
}

.store-nav { display: flex; align-items: center; gap: 0.25rem; }

.store-nav a {
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-control);
  color: var(--ink-secondary);
  font-size: 0.8125rem; font-weight: 500;
  text-decoration: none;
}
.store-nav a:hover { background: var(--surface-sunken); color: var(--ink-primary); }
.store-nav a[aria-current='page'] { color: var(--ink-primary); font-weight: 600; }

.store-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.store-body {
  padding: 1.5rem;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

/* Held-stones chip. Not a cart: these are exclusive claims with a clock on
   them, which is why the count is always visible rather than tucked away. */
.cart-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.375rem 0.6875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-primary);
  font-size: 0.8125rem; font-weight: 600;
  text-decoration: none;
}
.cart-chip:hover { background: var(--surface-sunken); }

.cart-count {
  min-width: 1.125rem;
  padding: 0 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink-on-accent);
  font-size: 0.6875rem; font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Staff-to-customer message bar. Replaces legacy ping.php, which polled every
   five seconds from every open page and dropped anything nobody was there for.
   These are durable rows, so the message is still here when they come back. */
.msgbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1.25rem;
  background: var(--accent-wash);
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}

/* Page furniture ---------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.page-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.page-sub { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--ink-secondary); }

.crumbs {
  display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
  margin-bottom: 0.5rem;
  font-size: 0.75rem; color: var(--ink-muted);
}
.crumbs a { color: var(--ink-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--ink-primary); text-decoration: underline; }
.crumbs li + li::before { content: '/'; margin-right: 0.375rem; color: var(--ink-muted); }
.crumbs ol, .crumbs ul { display: contents; list-style: none; margin: 0; padding: 0; }

/* Two-column split for detail screens: the record on the left, the sidebar of
   related facts on the right. Collapses to one column early, because a stone's
   certificate details are unreadable in a 20rem column. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 60rem) {
  .cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
  }
  .sb-brand { padding: 0 0.5rem 0 0; }
  .sb-user { margin-top: 0; border-top: 0; padding: 0.25rem 0.5rem; }
  .nav-section { display: none; }

  .content, .store-body { padding: 1rem; }
  .store-top { gap: 0.75rem; padding: 0 1rem; }
  .store-nav { display: none; }
}

/* ============================================================================
   4. Components
   ========================================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card-title { font-size: 0.9375rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-primary   { background: var(--accent); color: var(--ink-on-accent); }
.btn-primary:hover  { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary { background: var(--surface); color: var(--ink-primary); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-sunken); }
.btn-ghost     { background: transparent; color: var(--ink-secondary); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--ink-primary); }
.btn-danger    { background: var(--status-critical); color: #fff; }
.btn-sm        { padding: 0.3125rem 0.625rem; font-size: 0.75rem; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

/* Fields ------------------------------------------------------------------- */
.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 0.3125rem;
  letter-spacing: 0.01em;
}
.input {
  width: 100%;
  padding: 0.5rem 0.6875rem;
  background: var(--surface);
  color: var(--ink-primary);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 0.8125rem;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.input[aria-invalid='true'] { border-color: var(--status-critical); }
.field-error {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; color: var(--status-critical); margin-top: 0.3rem;
}

/* Badges. Icon + label always — colour never carries the meaning alone. */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem; font-weight: 600;
  border: 1px solid transparent;
}
.badge-good     { background: var(--status-good-wash); color: var(--status-good-text); }
.badge-warning  { background: var(--status-warn-wash); color: var(--ink-primary); }
.badge-critical { background: var(--status-crit-wash); color: var(--status-critical); }
.badge-neutral  { background: var(--surface-sunken); color: var(--ink-secondary); border-color: var(--line); }

/* Tables ------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.table thead th {
  text-align: left;
  padding: 0.625rem 1rem;
  background: var(--surface-sunken);
  color: var(--ink-secondary);
  font-size: 0.6875rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table tbody td { padding: 0.6875rem 1rem; border-bottom: 1px solid var(--line); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--accent-wash); }
/* Only columns that must align vertically get tabular figures. */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* A stock number is an identifier, not prose. Monospace so transposed digits
   are visible, and selectable as one word for pasting into an email. */
.sku {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ink-secondary);
}

/* Stat tile. A hero number is a form in its own right — no chart needed when
   the job is a single headline. */
.stat { padding: 1.125rem 1.25rem; }
.stat-label {
  font-size: 0.75rem; font-weight: 600; color: var(--ink-secondary);
  margin: 0 0 0.375rem;
}
.stat-value {
  font-size: 1.875rem; font-weight: 650; letter-spacing: -0.02em;
  line-height: 1.1; margin: 0; color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.stat-delta {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; font-weight: 600; margin-top: 0.375rem;
}
.stat-delta-up   { color: var(--status-good-text); }
.stat-delta-down { color: var(--status-critical); }
.stat-note { font-size: 0.75rem; color: var(--ink-muted); margin-top: 0.375rem; }

/* Horizontal bar, for the dashboard's status breakdown. A track plus a fill,
   so an empty bar still occupies its row and the column stays aligned. */
.bar-track {
  height: 6px;
  border-radius: var(--radius-data);
  background: var(--surface-sunken);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: var(--radius-data);
  background: var(--series-1);
}

/* Legend. Always paired with the shape it explains, never floated alone. */
.legend {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  font-size: 0.75rem; color: var(--ink-secondary);
  list-style: none; margin: 0.75rem 0 0; padding: 0;
}
.legend li { display: flex; align-items: center; gap: 0.375rem; }
.legend li::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}

/* Sidebar nav -------------------------------------------------------------- */
.nav-item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-control);
  color: rgba(244, 244, 242, 0.72);
  text-decoration: none;
  font-size: 0.8125rem; font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-item[aria-current='page'] { background: rgba(255, 255, 255, 0.11); color: #fff; font-weight: 600; }
.nav-section {
  font-size: 0.6875rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(244, 244, 242, 0.40);
  padding: 0 0.75rem; margin: 1.25rem 0 0.375rem;
}

/* Impersonation banner. Deliberately impossible to miss — the legacy
   walkthrough mode gave no indication at all that you were acting as
   someone else, and anything the rep did wrote to the customer's real cart. */
.impersonation-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.5rem 1.25rem;
  background: var(--status-warning); color: #0b0b0b;
  font-size: 0.8125rem; font-weight: 600;
}

/* ============================================================================
   5. Utilities
   ========================================================================= */

/* Visually hidden, still announced. Used for form labels the design carries
   visually (the topbar search) and for skip links. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}