/* ==========================================================================
   ASGT UI  ·  v2  ·  self-hosted faces
   Fonts are served from ./fonts/ relative to this file.
   Simplified Chinese lives in asgt-fonts-zh.css — link that on /zh/ pages only.
   Manrope & IBM Plex Mono & Almarai: SIL Open Font License 1.1 (see fonts/LICENSE)
   ========================================================================== */

/* Manrope — variable, 200-800 in one file per subset */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* IBM Plex Mono — data face */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* Almarai — Arabic */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/almarai-arabic-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/almarai-arabic-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('fonts/almarai-arabic-800-normal.woff2') format('woff2');
}

/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
   ASGT UI  ·  v2
   Advance Saudi German Trading Co. — Dammam

   One stylesheet, four surfaces: asgt.sa · os · cableos · one
   No build step. Link it and go.

   PRINCIPLE — controls rise, data sinks.
     Anything you can touch is raised.  Anything that is a fact is inset,
     monospaced, tabular. A 4C 50mm² must never read as a 4C 50mm.

   SURFACE MODES   [data-surface="soft"]  marketing + customer portal
                   [data-surface="crisp"] staff tools (borders, contrast)
                   [data-surface="dark"]  executive / after-hours
   DENSITY         [data-density="compact"]
   RTL             logical properties throughout. dir="rtl" needs no extra file.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */

:root {
  /* -- Brand magenta. 600 is the ASGT colour. --------------------------- */
  --asgt-brand-50:  #FCEDF9;
  --asgt-brand-100: #F7D5F0;
  --asgt-brand-200: #EDABDE;
  --asgt-brand-300: #DB7BC6;
  --asgt-brand-400: #BD40A1;
  --asgt-brand-500: #991F7D;
  --asgt-brand-600: #7F1066;   /* ASGT */
  --asgt-brand-700: #690A53;
  --asgt-brand-800: #520741;
  --asgt-brand-900: #3B042E;

  /* -- Mauve-grey neutrals --------------------------------------------- */
  --asgt-neutral-0:   #FFFFFF;
  --asgt-neutral-25:  #FBF9FC;
  --asgt-neutral-50:  #F7F4F9;
  --asgt-neutral-100: #EFEBF2;   /* the ground */
  --asgt-neutral-200: #E0D9E4;
  --asgt-neutral-300: #C9BFCE;
  --asgt-neutral-400: #AA9CAE;
  --asgt-neutral-500: #88788B;
  --asgt-neutral-600: #68546B;   /* muted text */
  --asgt-neutral-700: #4E3B50;
  --asgt-neutral-800: #352637;
  --asgt-neutral-900: #211722;
  --asgt-ink:         #120E18;   /* ASGT dark */

  /* -- Semantics. Deliberately no magenta here: a status must never
        be mistaken for a primary action. --------------------------------- */
  --asgt-stock:    #0C6B54;  --asgt-stock-bg: #E2F1EC;
  --asgt-low:      #8A5100;  --asgt-low-bg:   #FAEEDA;
  --asgt-out:      #B31C29;  --asgt-out-bg:   #FAE6E8;
  --asgt-info:     #1B5490;  --asgt-info-bg:  #E4EDF7;

  /* -- Semantic surfaces (remapped by mode) ----------------------------- */
  --asgt-canvas:        var(--asgt-neutral-100);
  --asgt-surface:       var(--asgt-neutral-100);
  --asgt-surface-alt:   var(--asgt-neutral-50);
  --asgt-well:          var(--asgt-neutral-100);
  --asgt-border:        transparent;
  --asgt-border-hair:   var(--asgt-neutral-200);
  --asgt-text:          var(--asgt-neutral-900);
  --asgt-text-muted:    var(--asgt-neutral-600);
  --asgt-text-faint:    #736377;   /* 4.7:1 on canvas. Do NOT use neutral-500 — it fails. */
  --asgt-accent:        var(--asgt-brand-600);
  --asgt-accent-hover:  var(--asgt-brand-700);
  --asgt-accent-ink:    #FFFFFF;
  --asgt-accent-tint:   var(--asgt-brand-50);
  --asgt-accent-on-tint: var(--asgt-brand-600);

  /* -- Interaction layer. Components must use THESE, never a raw neutral,
        or they break the moment the surface mode changes. ----------------- */
  --asgt-hover:        var(--asgt-neutral-100);  /* subtle hover fill      */
  --asgt-hover-strong: var(--asgt-neutral-200);  /* pressed / stronger     */
  --asgt-edge:         var(--asgt-neutral-300);  /* dashed + 2px borders   */
  --asgt-icon-faint:   var(--asgt-neutral-400);  /* decorative icon colour */
  --asgt-chip-bg:      var(--asgt-neutral-200);  /* neutral pill fill      */
  --asgt-chip-fg:      var(--asgt-neutral-700);
  --asgt-skeleton-a:   var(--asgt-neutral-200);
  --asgt-skeleton-b:   var(--asgt-neutral-100);
  --asgt-edge-strong:  #8E8092;  /* 3.7:1 — control boundaries, focus edges */

  /* -- Elevation --------------------------------------------------------- */
  --asgt-shadow-raise:
    6px 6px 14px rgba(120, 104, 126, .30),
    -6px -6px 14px rgba(255, 255, 255, .92);
  --asgt-shadow-raise-sm:
    3px 3px 7px rgba(120, 104, 126, .26),
    -3px -3px 7px rgba(255, 255, 255, .9);
  --asgt-shadow-raise-lg:
    12px 12px 30px rgba(120, 104, 126, .32),
    -10px -10px 26px rgba(255, 255, 255, .95);
  --asgt-shadow-well:
    inset 3px 3px 7px rgba(120, 104, 126, .32),
    inset -3px -3px 7px rgba(255, 255, 255, .9);
  --asgt-shadow-accent: 0 8px 18px -6px rgba(127, 16, 102, .5);
  --asgt-shadow-pop:
    0 24px 60px -12px rgba(18, 14, 24, .38),
    0 8px 20px -8px rgba(18, 14, 24, .22);

  /* -- Radius ------------------------------------------------------------ */
  --asgt-r-xs: 6px;  --asgt-r-sm: 8px;  --asgt-r-md: 12px;
  --asgt-r-lg: 18px; --asgt-r-xl: 26px; --asgt-r-pill: 999px;
  /* The radius a pressable control takes. Pill by default — the brand shape.
     Crisp overrides it to --asgt-r-md, because a dense staff workspace reads
     better rectangular and a pill wastes horizontal room next to a table.
     Change this in one place rather than per component. */
  --asgt-r-control: var(--asgt-r-pill);

  /* -- Spacing, 4px base ------------------------------------------------- */
  --asgt-s-1: 4px;   --asgt-s-2: 8px;   --asgt-s-3: 12px;  --asgt-s-4: 16px;
  --asgt-s-5: 20px;  --asgt-s-6: 24px;  --asgt-s-8: 32px;  --asgt-s-10: 40px;
  --asgt-s-12: 48px; --asgt-s-16: 64px; --asgt-s-20: 80px; --asgt-s-24: 96px;

  /* -- Type -------------------------------------------------------------- */
  --asgt-font-ui:   "Manrope", "Almarai", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --asgt-font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --asgt-t-2xs:  0.6875rem; /* 11 — micro labels, table eyebrows */
  --asgt-t-xs:   0.75rem;   /* 12 — captions, badges */
  --asgt-t-sm:   0.8125rem; /* 13 — dense data */
  --asgt-t-base: 0.9375rem; /* 15 — UI default */
  --asgt-t-md:   1.0625rem; /* 17 — lead */
  /* 16 — the iOS Safari focus-zoom threshold, not a step on the type scale.
     Any control a finger types into has to be at least this or the page zooms
     on focus. Named so it reads as the constraint it is. */
  --asgt-t-touch: 1rem;
  --asgt-t-lg:   1.375rem;  /* 22 — card titles */
  --asgt-t-xl:   1.875rem;  /* 30 — section heads */
  /* 36 — the title of a screen you work in. Deliberately named for the job
     rather than slotted into the size scale as an "xl-and-a-half": 42 is a
     marketing measure and reads as a banner inside an application, while 30 is
     what a section inside the page already uses, so a page title set in it has
     nothing left to outrank. Sits between them and is redefined below 640 —
     see the counterpart in the small-screen block at the end of this file. */
  --asgt-t-page: 2.25rem;   /* 36 — application page titles */
  --asgt-t-2xl:  2.625rem;  /* 42 — page heads, marketing */
  --asgt-t-3xl:  3.75rem;   /* 60 — hero */

  --asgt-lh-tight: 1.15; --asgt-lh-snug: 1.35; --asgt-lh-body: 1.6;

  /* -- Control geometry (density-driven) --------------------------------- */
  --asgt-control-h: 44px; --asgt-control-h-sm: 34px; --asgt-control-h-lg: 54px;
  --asgt-row-py: var(--asgt-s-3);
  --asgt-card-p: var(--asgt-s-6);
  --asgt-sidebar-w: 248px;

  --asgt-content-max: 1280px;
  /* Data screens, opt-in per page via .asgt-container--wide. 1280 is a reading
     measure and stays the default: at 1920 with a sidebar it leaves ~400px of
     symmetric dead margin, which is right for prose and wrong for a table with
     seven columns and a thousand rows. Never make this the default — it would
     widen every reading page on every surface at once. */
  --asgt-content-wide: 1600px;
  --asgt-ease: cubic-bezier(.32, .72, 0, 1);
  --asgt-dur: 180ms;
}

/* -- Crisp: staff tools. Borders replace shadow. ------------------------- */
[data-surface="crisp"] {
  /* Rectangular controls. Staff run crisp all day beside dense tables, where a
     999px pill reads as decoration and eats inline room. 12px keeps the family
     resemblance without the capsule. .asgt-input, .asgt-select and
     .asgt-navitem were already --asgt-r-md, so this brings buttons into line
     with them rather than introducing a new shape. */
  --asgt-r-control:   var(--asgt-r-md);
  --asgt-canvas:      var(--asgt-neutral-50);
  --asgt-surface:     var(--asgt-neutral-0);
  --asgt-surface-alt: var(--asgt-neutral-25);
  --asgt-well:        var(--asgt-neutral-50);
  --asgt-border:      var(--asgt-neutral-200);
  --asgt-shadow-raise:    0 1px 2px rgba(18,14,24,.06), 0 4px 12px -4px rgba(18,14,24,.08);
  --asgt-shadow-raise-sm: 0 1px 2px rgba(18,14,24,.07);
  --asgt-shadow-raise-lg: 0 2px 4px rgba(18,14,24,.06), 0 12px 28px -8px rgba(18,14,24,.14);
  --asgt-shadow-well:     inset 0 1px 2px rgba(18,14,24,.07);
}

/* -- Dark: executive dashboards, control rooms -------------------------- */
[data-surface="dark"] {
  --asgt-canvas:      var(--asgt-ink);
  --asgt-surface:     #1B1622;
  --asgt-surface-alt: #241E2C;
  --asgt-well:        #17121E;
  --asgt-border:      #2E2637;
  --asgt-border-hair: #2E2637;
  --asgt-text:        #F2EDF4;
  --asgt-text-muted:  #A99CAE;
  --asgt-text-faint:  #8A7D91;
  --asgt-accent:      var(--asgt-brand-400);
  --asgt-accent-hover:var(--asgt-brand-300);
  --asgt-accent-tint: rgba(189, 64, 161, .22);
  --asgt-accent-on-tint: #E08FD0;  /* readable label on an accent tint */
  --asgt-shadow-raise:    0 1px 2px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.6);
  --asgt-shadow-raise-sm: 0 1px 2px rgba(0,0,0,.5);
  --asgt-shadow-raise-lg: 0 2px 6px rgba(0,0,0,.5), 0 18px 40px -10px rgba(0,0,0,.7);
  --asgt-shadow-well:     inset 0 1px 3px rgba(0,0,0,.55);

  --asgt-stock:#4FBF9B; --asgt-stock-bg:rgba(79,191,155,.14);
  --asgt-low:  #D9A03C; --asgt-low-bg:  rgba(217,160,60,.15);
  --asgt-out:  #E4626F; --asgt-out-bg:  rgba(228,98,111,.15);
  --asgt-info: #6BA4DE; --asgt-info-bg: rgba(107,164,222,.15);

  --asgt-hover:        #2C2536;
  --asgt-hover-strong: #3A3145;
  --asgt-edge:         #453A52;
  --asgt-icon-faint:   #8A7D91;
  --asgt-chip-bg:      #332B3D;
  --asgt-chip-fg:      #CFC5D4;
  --asgt-skeleton-a:   #2C2536;
  --asgt-skeleton-b:   #3A3145;
  --asgt-edge-strong:  #806F87;
}

/* -- Density ------------------------------------------------------------- */
[data-density="compact"] {
  --asgt-control-h: 36px; --asgt-control-h-sm: 28px; --asgt-control-h-lg: 44px;
  --asgt-row-py: var(--asgt-s-2);
  --asgt-card-p: var(--asgt-s-4);
  --asgt-t-base: 0.875rem;
  --asgt-sidebar-w: 224px;
}

/*
 * COMPACT DENSITY IS FOR A MOUSE. On a touch screen the same tokens produce a
 * 36px control — every button, every field, every nav item below the 44px
 * target a thumb needs — and a 28px one for the --sm variants. Density had no
 * touch awareness at all, so a staff tool set to compact was unusable on the
 * phone it would actually be opened on.
 *
 * Measured on Cable OS before this: 3 targets under 44px on the sign-in screen,
 * 9 to 16 on every signed-in screen, at 390px and 360px alike.
 *
 * Restored to the comfortable scale rather than to arbitrary numbers — these
 * are the same values [data-density] defaults to, so touch simply stops
 * opting into a density it cannot use. Comfortable stays comfortable.
 *
 * GATED ON EITHER CONDITION, deliberately. `pointer: coarse` is the honest
 * test — it is the device, not the window. `max-width: 900px` is added because
 * that is where this stylesheet already turns the sidebar into a nav bar: the
 * layout has by then decided it is a small screen, and a 380px-wide window is
 * not a place for 28px controls whatever is pointing at it. It also makes the
 * whole thing measurable at a set viewport, which pointer alone is not.
 */
@media (pointer: coarse), (max-width: 900px) {
  /*
   * --sm goes to 44 as well, not to something merely larger. On a touch screen
   * there is no such thing as a small button: the finger is the same size
   * whatever the control means, so a "small" variant that lands at 36px is
   * still a miss. --sm keeps its meaning through padding and type, not height.
   */
  [data-density="compact"] {
    --asgt-control-h: 44px; --asgt-control-h-sm: 44px; --asgt-control-h-lg: 52px;
  }

}
/* The component half of the touch layer lives at the END of this file — see
   "TOUCH TARGETS AND FIELD SIZE" below. Only the TOKENS can be set here: a
   rule written this far up the file is beaten by the component definitions
   that follow it, which is exactly what happened the first time. */

/* ==========================================================================
   2 · BASE
   ========================================================================== */

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

body.asgt {
  margin: 0;
  background: var(--asgt-canvas);
  color: var(--asgt-text);
  font-family: var(--asgt-font-ui);
  font-size: var(--asgt-t-base);
  line-height: var(--asgt-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* :where() keeps these at (0,1,0) instead of (0,1,1).
   Without it, `.asgt h2` outranked every single-class component, so ANY
   component class placed on a heading lost — .asgt-card__title rendered at
   30px instead of its own size, including in this system's own component
   library. It was never one selector; it was every component whose natural
   element is a heading.

   The workarounds it forced are the evidence: Cable OS carries
   `.asgt-panel__head .cable-panel-h` at (0,2,0) to win its panel labels back,
   and ASGT ONE carries `.one-cardtitle`. Both exist only to beat this.

   Defaults should lose to components. A bare <h2> still gets everything here;
   a class on it now decides, which is what a class is for. Matches the
   `.asgt :where(a)` treatment two rules down. */
.asgt :where(h1, h2, h3, h4) {
  margin: 0; line-height: var(--asgt-lh-tight);
  letter-spacing: -0.022em; font-weight: 800;
}
.asgt :where(h1) { font-size: var(--asgt-t-2xl); }
.asgt :where(h2) { font-size: var(--asgt-t-xl); }
.asgt :where(h3) { font-size: var(--asgt-t-lg); letter-spacing: -0.015em; }
.asgt :where(h4) { font-size: var(--asgt-t-md); letter-spacing: -0.01em; }
.asgt p  { margin: 0 0 var(--asgt-s-4); }
.asgt :where(a) { color: var(--asgt-accent); text-underline-offset: 3px; }

:where(.asgt) :focus-visible {
  outline: 2px solid var(--asgt-accent);
  outline-offset: 3px;
  border-radius: var(--asgt-r-sm);
}

:lang(ar) { font-family: "Almarai", var(--asgt-font-ui); letter-spacing: 0; }
:lang(zh) { font-family: "Noto Sans SC", var(--asgt-font-ui); letter-spacing: 0; }

.asgt-container {
  max-width: var(--asgt-content-max);
  margin-inline: auto;
  padding-inline: var(--asgt-s-6);
}

/* .asgt-main is display:flex; flex-direction:column, and an auto inline margin
   on a flex item suppresses the default cross-axis stretch — so a container
   placed directly in the main column shrank to its content instead of filling
   it. Measured at 684px in a 1920 viewport before this existed.

   inline-size:100% gives max-width something to cap, restoring the intended
   "fill, then cap, then centre". Scoped to the direct-child case because that
   is the only shape that breaks: a container nested deeper is not a flex item
   and already behaves. Anything already filling its parent is unaffected —
   100% is what a block-level element does anyway.

   Every surface with a sidebar shell hits this. The library never did, because
   its shell demo put a plain .d-fake-body in the main column rather than a
   container, so the combination was never exercised. It is now. */
.asgt-main > .asgt-container { inline-size: 100%; }

/* Opt-in, per page, for screens whose content is a table or a dashboard rather
   than something to be read. Put it on the same element as .asgt-container:
   `<div class="asgt-container asgt-container--wide">`. Below 1600px it does
   nothing at all — the container is already narrower than either cap, so this
   only ever changes the widest viewports.

   Not for forms or reading pages. A line of prose at 1600px is too long to
   track back to the start of the next one; that is what --asgt-content-max is
   for and why it stays the default. */
.asgt-container--wide { max-width: var(--asgt-content-wide); }

/* ==========================================================================
   3 · DATA WELLS — the signature
   ========================================================================== */

.asgt-data {
  font-family: var(--asgt-font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;
  letter-spacing: -0.01em;
}

.asgt-spec {
  display: inline-flex; align-items: center; gap: var(--asgt-s-2);
  font-family: var(--asgt-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--asgt-t-sm); font-weight: 500;
  color: var(--asgt-text);
  background: var(--asgt-well);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-sm);
  box-shadow: var(--asgt-shadow-well);
  padding: 5px 10px; white-space: nowrap;
}
.asgt-spec__key {
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-2xs);
  font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--asgt-text-faint);
}

.asgt-well {
  background: var(--asgt-well);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-md);
  box-shadow: var(--asgt-shadow-well);
  padding: var(--asgt-s-4);
}

/* A joined strip of figures — N cells, shared hairlines, one border and one
   radius around the whole thing. Four dashboards hand-composed this before it
   was a primitive; ASGT ONE's .one-figrow was the working reference.

   The 1px grid gap over a hairline background IS the dividers: one declaration
   instead of a border on every cell but the last, and it stays correct when
   the cells wrap onto a second row, where per-cell borders leave a stray edge
   hanging. overflow:hidden lets the outer radius clip the corner cells.

   auto-fit means the strip decides its own column count from the space it is
   given, so the same markup is four across on a dashboard and two across in a
   rail. Cells sink no further: inside a joined strip the hairline separates
   them, so a per-cell well would be a box inside a box. */
.asgt-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--asgt-border-hair);
  border: 1px solid var(--asgt-border-hair);
  border-radius: var(--asgt-r-md);
  box-shadow: var(--asgt-shadow-raise-sm);
  overflow: hidden;
}
.asgt-metrics__cell {
  background: var(--asgt-surface);
  padding: var(--asgt-s-4);
  display: flex; flex-direction: column; gap: var(--asgt-s-2);
}
/* A whole cell can be a link without looking like one. */
.asgt-metrics__cell:is(a) { color: inherit; text-decoration: none; }
.asgt-metrics__cell:is(a):hover { background: var(--asgt-hover); }
.asgt-metrics__sub {
  margin: 0; font-size: var(--asgt-t-xs);
  color: var(--asgt-text-muted); line-height: 1.4;
}

.asgt-figure { display: flex; flex-direction: column; gap: 2px; }
.asgt-figure__label {
  font-size: var(--asgt-t-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--asgt-text-faint);
}
.asgt-figure__value {
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  font-size: var(--asgt-t-xl); font-weight: 600; line-height: 1.1;
  color: var(--asgt-text);
}
.asgt-figure__unit {
  font-size: var(--asgt-t-sm); font-weight: 500;
  color: var(--asgt-text-muted); margin-inline-start: 4px;
}
/* Structurally this always holds a figure — deltas, dates, counts. Mono. */
.asgt-figure__sub {
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  font-size: var(--asgt-t-xs); color: var(--asgt-text-muted); margin-top: 4px;
}
.asgt-figure--accent .asgt-figure__value { color: var(--asgt-accent); }
/* loading / not-yet state — a dash, never a blank */
.asgt-figure--pending .asgt-figure__value { color: var(--asgt-text-faint); }

.asgt-price-request {
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-sm);
  font-weight: 700; color: var(--asgt-info); letter-spacing: -0.01em;
}

/* Delta — price movement, % change. Direction is an arrow, not just colour. */
.asgt-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  font-size: var(--asgt-t-sm); font-weight: 600;
  color: var(--asgt-text-muted);
}
.asgt-delta::before { font-family: var(--asgt-font-ui); font-size: .85em; }
.asgt-delta--up   { color: var(--asgt-out); }
.asgt-delta--up::before { content: "▲"; }
.asgt-delta--down { color: var(--asgt-stock); }
.asgt-delta--down::before { content: "▼"; }
.asgt-delta--flat { color: var(--asgt-text-faint); }
.asgt-delta--flat::before { content: "–"; }
/* In a catalogue a rising cost is bad and a falling cost is good, so up = red.
   Flip with .asgt-delta--gain / --loss when the metric is revenue. */
.asgt-delta--gain { color: var(--asgt-stock); }
.asgt-delta--loss { color: var(--asgt-out); }

/* ==========================================================================
   4 · BUTTONS
   ========================================================================== */

.asgt-btn {
  --_bg: var(--asgt-surface);
  --_fg: var(--asgt-text);
  --_shadow: var(--asgt-shadow-raise-sm);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--asgt-s-2);
  height: var(--asgt-control-h);
  padding-inline: var(--asgt-s-5);
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-base);
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-control);
  box-shadow: var(--_shadow);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--asgt-dur) var(--asgt-ease),
              box-shadow var(--asgt-dur) var(--asgt-ease),
              background var(--asgt-dur) var(--asgt-ease);
}
.asgt-btn:hover { transform: translateY(-1px); }
.asgt-btn:active { transform: translateY(0); box-shadow: var(--asgt-shadow-well); }
.asgt-btn[disabled], .asgt-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

.asgt-btn--primary {
  --_fg: var(--asgt-accent-ink);
  --_bg: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  --_shadow: var(--asgt-shadow-accent);
  border-color: transparent;
}
.asgt-btn--primary:hover { --_bg: linear-gradient(135deg, var(--asgt-brand-600), var(--asgt-brand-800)); }

.asgt-btn--outline { --_bg: transparent; --_shadow: none; --_fg: var(--asgt-accent); border-color: currentColor; }
.asgt-btn--outline:hover { --_bg: var(--asgt-accent-tint); }

.asgt-btn--ghost { --_bg: transparent; --_shadow: none; --_fg: var(--asgt-accent); border-color: transparent; }
.asgt-btn--ghost:hover { --_bg: var(--asgt-accent-tint); }

.asgt-btn--quiet { --_bg: transparent; --_shadow: none; --_fg: var(--asgt-text-muted); border-color: transparent; }
.asgt-btn--quiet:hover { --_bg: var(--asgt-hover-strong); --_fg: var(--asgt-text); }

.asgt-btn--danger {
  --_fg: #fff; --_bg: var(--asgt-out); border-color: transparent;
  --_shadow: 0 8px 18px -6px rgba(179, 28, 41, .45);
}

/* On/active state for a toggle rendered as a button */
.asgt-btn.is-active, .asgt-btn[aria-pressed="true"] {
  --_bg: var(--asgt-accent-tint);
  --_fg: var(--asgt-accent-on-tint);
  --_shadow: none;
  border-color: currentColor;
}

.asgt-btn--sm { height: var(--asgt-control-h-sm); padding-inline: var(--asgt-s-3); font-size: var(--asgt-t-sm); }
.asgt-btn--lg { height: var(--asgt-control-h-lg); padding-inline: var(--asgt-s-8); font-size: var(--asgt-t-md); }
.asgt-btn--block { width: 100%; }
.asgt-btn--square { border-radius: var(--asgt-r-md); }

.asgt-icon-btn {
  display: inline-grid; place-items: center;
  inline-size: var(--asgt-control-h); block-size: var(--asgt-control-h);
  padding: 0; border-radius: 50%;
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border);
  box-shadow: var(--asgt-shadow-raise-sm);
  color: var(--asgt-accent); cursor: pointer;
  transition: transform var(--asgt-dur) var(--asgt-ease), box-shadow var(--asgt-dur) var(--asgt-ease);
}
.asgt-icon-btn:hover { transform: translateY(-1px); }
.asgt-icon-btn:active { box-shadow: var(--asgt-shadow-well); }
.asgt-icon-btn--sm { inline-size: var(--asgt-control-h-sm); block-size: var(--asgt-control-h-sm); }
.asgt-icon-btn--filled {
  background: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  color: #fff; border-color: transparent; box-shadow: var(--asgt-shadow-accent);
}
.asgt-icon-btn--plain { background: transparent; box-shadow: none; border-color: transparent; color: var(--asgt-text-muted); }
.asgt-icon-btn--plain:hover { background: var(--asgt-hover-strong); color: var(--asgt-text); }

/* Toggle button — "Today's Queue", "Compact" */
.asgt-toggle {
  display: inline-flex; align-items: center; gap: var(--asgt-s-2);
  height: var(--asgt-control-h-sm); padding-inline: var(--asgt-s-3);
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-sm); font-weight: 700;
  color: var(--asgt-text-muted);
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border-hair);
  border-radius: var(--asgt-r-pill);
  cursor: pointer;
  transition: all var(--asgt-dur) var(--asgt-ease);
}
.asgt-toggle:hover { color: var(--asgt-text); }
.asgt-toggle[aria-pressed="true"] {
  background: var(--asgt-accent-tint);
  border-color: var(--asgt-accent);
  color: var(--asgt-accent-on-tint);
}

/* ==========================================================================
   5 · FORM CONTROLS
   ========================================================================== */

.asgt-field { display: flex; flex-direction: column; gap: var(--asgt-s-2); }

.asgt-label {
  font-size: var(--asgt-t-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--asgt-text-muted);
}
.asgt-label--req::after { content: " *"; color: var(--asgt-out); }

.asgt-input, .asgt-select, .asgt-textarea {
  inline-size: 100%; min-block-size: var(--asgt-control-h);
  padding: var(--asgt-s-2) var(--asgt-s-4);
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-base);
  color: var(--asgt-text);
  background: var(--asgt-well);
  border: 1px solid var(--asgt-edge-strong);
  border-radius: var(--asgt-r-md);
  box-shadow: var(--asgt-shadow-well);
  transition: box-shadow var(--asgt-dur) var(--asgt-ease), border-color var(--asgt-dur) var(--asgt-ease);
}
.asgt-textarea { min-block-size: 110px; padding-block: var(--asgt-s-3); resize: vertical; }
.asgt-input::placeholder, .asgt-textarea::placeholder { color: var(--asgt-text-faint); }

.asgt-input--data { font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums; text-align: end; }
.asgt-input--sm, .asgt-select--sm { min-block-size: var(--asgt-control-h-sm); padding-block: 2px; font-size: var(--asgt-t-sm); }

.asgt-select {
  appearance: none; padding-inline-end: var(--asgt-s-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
[dir="rtl"] .asgt-select { background-position: 16px 52%, 22px 52%; }

.asgt-help { font-size: var(--asgt-t-xs); color: var(--asgt-text-muted); }
.asgt-field--error .asgt-input,
.asgt-field--error .asgt-select,
.asgt-field--error .asgt-textarea { box-shadow: var(--asgt-shadow-well), 0 0 0 2px var(--asgt-out); }
.asgt-field--error .asgt-help { color: var(--asgt-out); font-weight: 600; }

/* Input with a leading unit or trailing addon: SAR, m, mm² */
.asgt-input-group { display: flex; align-items: stretch; gap: var(--asgt-s-2); }
.asgt-input-group__addon {
  display: grid; place-items: center;
  padding-inline: var(--asgt-s-3);
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-sm); font-weight: 600;
  color: var(--asgt-text-muted);
  background: var(--asgt-surface-alt);
  border: 1px solid var(--asgt-border-hair);
  border-radius: var(--asgt-r-md);
  white-space: nowrap;
}

.asgt-search { position: relative; display: flex; align-items: center; }
.asgt-search .asgt-input { padding-inline-start: var(--asgt-s-12); border-radius: var(--asgt-r-pill); }
.asgt-search__icon {
  position: absolute; inset-inline-start: var(--asgt-s-4);
  color: var(--asgt-text-faint); pointer-events: none;
  display: grid; place-items: center;
}

/* Paste block — Lookup enquiries, Add Prices supplier lists */
.asgt-paste { display: flex; flex-direction: column; gap: var(--asgt-s-3); }
.asgt-paste .asgt-textarea {
  min-block-size: 190px;
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-sm); line-height: 1.7;
}
.asgt-paste__foot { display: flex; align-items: center; gap: var(--asgt-s-3); flex-wrap: wrap; }
.asgt-paste__count {
  margin-inline-start: auto;
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-xs);
  color: var(--asgt-text-faint);
}

.asgt-switch { display: inline-flex; align-items: center; gap: var(--asgt-s-3); cursor: pointer; }
.asgt-switch input { position: absolute; opacity: 0; inline-size: 0; }
.asgt-switch__track {
  inline-size: 54px; block-size: 30px; border-radius: var(--asgt-r-pill);
  background: var(--asgt-well); box-shadow: var(--asgt-shadow-well);
  border: 1px solid var(--asgt-border); position: relative;
  transition: background var(--asgt-dur) var(--asgt-ease);
}
.asgt-switch__thumb {
  position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--asgt-icon-faint);
  transition: transform var(--asgt-dur) var(--asgt-ease), background var(--asgt-dur) var(--asgt-ease);
}
.asgt-switch input:checked + .asgt-switch__track {
  background: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  box-shadow: var(--asgt-shadow-accent); border-color: transparent;
}
.asgt-switch input:checked + .asgt-switch__track .asgt-switch__thumb { background: #fff; transform: translateX(24px); }
[dir="rtl"] .asgt-switch input:checked + .asgt-switch__track .asgt-switch__thumb { transform: translateX(-24px); }
.asgt-switch input:focus-visible + .asgt-switch__track { outline: 2px solid var(--asgt-accent); outline-offset: 3px; }

.asgt-check { display: inline-flex; align-items: center; gap: var(--asgt-s-3); cursor: pointer; }
.asgt-check input { position: absolute; opacity: 0; }
.asgt-check__box {
  inline-size: 22px; block-size: 22px; border-radius: 7px;
  background: var(--asgt-well); box-shadow: var(--asgt-shadow-well);
  border: 1px solid var(--asgt-border);
  display: grid; place-items: center; color: transparent;
  transition: background var(--asgt-dur) var(--asgt-ease);
}
.asgt-check--radio .asgt-check__box { border-radius: 50%; }
.asgt-check input:checked + .asgt-check__box {
  background: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  color: #fff; border-color: transparent; box-shadow: var(--asgt-shadow-accent);
}
.asgt-check input:focus-visible + .asgt-check__box { outline: 2px solid var(--asgt-accent); outline-offset: 3px; }

.asgt-stepper {
  display: inline-flex; align-items: stretch;
  border-radius: var(--asgt-r-md); overflow: hidden;
  box-shadow: var(--asgt-shadow-raise-sm);
  border: 1px solid var(--asgt-border);
}
.asgt-stepper__btn {
  inline-size: var(--asgt-control-h); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  color: #fff; border: 0; cursor: pointer;
  font-size: 18px; font-weight: 700; line-height: 1;
}
.asgt-stepper__btn:hover { filter: brightness(1.15); }
.asgt-stepper__value {
  min-inline-size: 76px; padding-inline: var(--asgt-s-3);
  display: grid; place-items: center;
  background: var(--asgt-surface);
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  font-weight: 600; border: 0; text-align: center; color: var(--asgt-text);
}

/* CSV dropzone — Admin products, price lists, supplier workbooks */
.asgt-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: var(--asgt-s-3);
  padding: var(--asgt-s-10) var(--asgt-s-6);
  text-align: center;
  background: var(--asgt-surface-alt);
  border: 2px dashed var(--asgt-edge);
  border-radius: var(--asgt-r-lg);
  transition: border-color var(--asgt-dur) var(--asgt-ease), background var(--asgt-dur) var(--asgt-ease);
}
.asgt-dropzone:hover, .asgt-dropzone.is-over {
  border-color: var(--asgt-accent); background: var(--asgt-accent-tint);
}
.asgt-dropzone__icon { color: var(--asgt-icon-faint); }
.asgt-dropzone__title { font-weight: 800; font-size: var(--asgt-t-base); }
.asgt-dropzone__hint { font-size: var(--asgt-t-xs); color: var(--asgt-text-muted); margin: 0; }
.asgt-dropzone__legend {
  display: flex; flex-wrap: wrap; gap: var(--asgt-s-2);
  justify-content: center; margin-top: var(--asgt-s-2);
}

/* ==========================================================================
   6 · APP SHELL — sidebar, top bar, status strip
   ========================================================================== */

/* Multi-colour segment strip across the top of the app.
   Each segment is a system; colour encodes health, width encodes share. */
.asgt-statusbar { display: flex; block-size: 4px; inline-size: 100%; overflow: hidden; }
.asgt-statusbar__seg { block-size: 100%; }
.asgt-statusbar__seg--brand { background: var(--asgt-brand-600); }
.asgt-statusbar__seg--stock { background: var(--asgt-stock); }
.asgt-statusbar__seg--low   { background: var(--asgt-low); }
.asgt-statusbar__seg--out   { background: var(--asgt-out); }
.asgt-statusbar__seg--info  { background: var(--asgt-info); }
.asgt-statusbar__seg--idle  { background: var(--asgt-edge); }

.asgt-app { display: flex; min-block-size: 100vh; }

.asgt-sidebar {
  inline-size: var(--asgt-sidebar-w); flex: none;
  display: flex; flex-direction: column;
  background: var(--asgt-surface);
  border-inline-end: 1px solid var(--asgt-border-hair);
  padding: var(--asgt-s-4);
  gap: var(--asgt-s-2);
}

/*
 * THE SIDEBAR IS AS TALL AS THE VIEWPORT, NOT AS TALL AS THE DOCUMENT.
 *
 * As a flex item of .asgt-app it stretches to the height of its container,
 * which is the whole document. Measured on the Cable OS dashboard: sidebar
 * 1739px against a 936px viewport, with the account block at y=1585 and Sign
 * out at 1636 — both about 750px below the fold. Scroll to the top of a long
 * page and the brand, the theme toggle and Sign out are all off screen, and
 * what is beside the content is an empty column.
 *
 * Three deliberate choices here:
 *
 *   sticky, not fixed   keeps the sidebar in flow, so .asgt-main needs no
 *                       compensating margin and nothing changes on a page
 *                       shorter than the viewport.
 *   100dvh, not 100vh   on mobile Safari and Chrome 100vh is the height with
 *                       the address bar RETRACTED, so a 100vh sidebar is
 *                       taller than the visible area whenever the bar is
 *                       showing and its last item sits underneath it. The vh
 *                       line above it is the fallback for anything that does
 *                       not know dvh, where too-tall beats document-tall.
 *   above 900px only    below that the sidebar is already the horizontal
 *                       scrolling nav bar, and a sticky full-height rule
 *                       there would put a viewport-tall bar on top of every
 *                       phone screen.
 *
 * overflow-y: auto so a surface with more nav items than fit scrolls the
 * sidebar rather than clipping them.
 */
@media (min-width: 901px) {
  .asgt-sidebar {
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    block-size: 100dvh;
    overflow-y: auto;
  }
}
.asgt-sidebar__brand {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  padding: var(--asgt-s-2) var(--asgt-s-3) var(--asgt-s-5);
  font-weight: 800; letter-spacing: -.03em; font-size: var(--asgt-t-md);
}
.asgt-sidebar__mark {
  inline-size: 30px; block-size: 30px; flex: none;
  border-radius: var(--asgt-r-sm);
  background: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  color: #fff; display: grid; place-items: center;
  font-size: var(--asgt-t-xs); font-weight: 800; letter-spacing: 0;
}
.asgt-sidebar__group { margin-block-start: var(--asgt-s-4); }
.asgt-sidebar__group-label {
  padding: 0 var(--asgt-s-3) var(--asgt-s-2);
  font-size: var(--asgt-t-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--asgt-text-faint);
}
.asgt-navitem {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  inline-size: 100%;
  padding: var(--asgt-s-2) var(--asgt-s-3);
  border: 0; background: transparent;
  border-radius: var(--asgt-r-md);
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-base); font-weight: 600;
  color: var(--asgt-text-muted); text-align: start; text-decoration: none;
  cursor: pointer;
  transition: background var(--asgt-dur) var(--asgt-ease), color var(--asgt-dur) var(--asgt-ease);
}
.asgt-navitem svg { flex: none; }
.asgt-navitem:hover { background: var(--asgt-hover); color: var(--asgt-text); }
.asgt-navitem.is-active {
  background: var(--asgt-accent-tint);
  color: var(--asgt-accent-on-tint);
  font-weight: 700;
}
.asgt-navitem__count {
  margin-inline-start: auto;
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-xs);
  color: var(--asgt-text-faint);
}

.asgt-sidebar__foot {
  margin-block-start: auto; padding-block-start: var(--asgt-s-4);
  border-block-start: 1px solid var(--asgt-border-hair);
  display: flex; align-items: center; gap: var(--asgt-s-3);
}
.asgt-sidebar__foot-meta { min-inline-size: 0; flex: 1; }
.asgt-sidebar__foot-name { font-size: var(--asgt-t-sm); font-weight: 700; }
.asgt-sidebar__foot-mail {
  font-size: var(--asgt-t-2xs); color: var(--asgt-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Icon-only division rail, sits left of the sidebar */
.asgt-rail {
  inline-size: 68px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--asgt-s-2);
  padding: var(--asgt-s-4) 0;
  background: var(--asgt-surface-alt);
  border-inline-end: 1px solid var(--asgt-border-hair);
}
.asgt-rail__item {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border: 0; background: transparent; border-radius: var(--asgt-r-md);
  color: var(--asgt-neutral-500); cursor: pointer;
  transition: background var(--asgt-dur) var(--asgt-ease), color var(--asgt-dur) var(--asgt-ease);
}
.asgt-rail__item:hover { background: var(--asgt-hover-strong); color: var(--asgt-text); }
.asgt-rail__item.is-active {
  background: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  color: #fff; box-shadow: var(--asgt-shadow-accent);
}

.asgt-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }

/* Top utility bar — logo, account badge, sign out */
.asgt-topbar {
  display: flex; align-items: center; gap: var(--asgt-s-4);
  padding: var(--asgt-s-3) var(--asgt-s-6);
  background: var(--asgt-surface);
  border-block-end: 1px solid var(--asgt-border-hair);
}
.asgt-topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--asgt-s-3); }
.asgt-account {
  display: inline-flex; align-items: center; gap: var(--asgt-s-2);
  padding: 5px 12px 5px 6px;
  background: var(--asgt-surface-alt);
  border: 1px solid var(--asgt-border-hair);
  border-radius: var(--asgt-r-pill);
  font-size: var(--asgt-t-sm); font-weight: 700;
}

/* Page header — title + one-line description */
.asgt-pagehead {
  display: flex; align-items: flex-start; gap: var(--asgt-s-4);
  flex-wrap: wrap;
  padding: var(--asgt-s-6) 0 var(--asgt-s-5);
}
.asgt-pagehead__text { flex: 1; min-inline-size: 260px; }
.asgt-pagehead__desc { color: var(--asgt-text-muted); font-size: var(--asgt-t-base); margin: 6px 0 0; }
.asgt-pagehead__actions { display: flex; gap: var(--asgt-s-2); flex-wrap: wrap; }

/* Ticker / marquee — locations and categories under the nav */
.asgt-ticker {
  overflow: hidden; white-space: nowrap;
  background: var(--asgt-brand-900); color: var(--asgt-brand-100);
  font-size: var(--asgt-t-xs); font-weight: 600; letter-spacing: .06em;
  padding-block: 7px;
}
.asgt-ticker__track { display: inline-flex; gap: var(--asgt-s-8); animation: asgt-marquee 34s linear infinite; }
.asgt-ticker__item { display: inline-flex; align-items: center; gap: var(--asgt-s-2); }
.asgt-ticker__item::before { content: "◆"; color: var(--asgt-brand-400); font-size: .7em; }
@keyframes asgt-marquee { to { transform: translateX(-50%); } }
.asgt-ticker:hover .asgt-ticker__track { animation-play-state: paused; }

/* ==========================================================================
   7 · AVATARS & PEOPLE
   ========================================================================== */

.asgt-avatar {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 36px; block-size: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  color: #fff;
  font-size: var(--asgt-t-xs); font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; overflow: hidden;
}
.asgt-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.asgt-avatar--sm { inline-size: 26px; block-size: 26px; font-size: var(--asgt-t-2xs); }
.asgt-avatar--lg { inline-size: 48px; block-size: 48px; font-size: var(--asgt-t-base); }
.asgt-avatar--muted { background: var(--asgt-hover-strong); color: var(--asgt-chip-fg); }
.asgt-avatar-group { display: inline-flex; }
.asgt-avatar-group .asgt-avatar { border: 2px solid var(--asgt-surface); margin-inline-start: -10px; }
.asgt-avatar-group .asgt-avatar:first-child { margin-inline-start: 0; }

/* Person row — team status, People page, user rows inside customer cards */
.asgt-person {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  padding: var(--asgt-row-py) 0;
}
.asgt-person__meta { min-inline-size: 0; flex: 1; }
.asgt-person__name { font-size: var(--asgt-t-base); font-weight: 700; display: flex; align-items: center; gap: var(--asgt-s-2); }
.asgt-person__sub { font-size: var(--asgt-t-xs); color: var(--asgt-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asgt-person__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--asgt-s-2); }

/* Presence dot */
.asgt-presence { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; background: var(--asgt-icon-faint); }
.asgt-presence--on { background: var(--asgt-stock); }
.asgt-presence--away { background: var(--asgt-low); }
.asgt-presence--off { background: var(--asgt-icon-faint); }

/* ==========================================================================
   8 · BADGES, CHIPS, TAGS
   ========================================================================== */

.asgt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--asgt-r-pill);
  font-size: var(--asgt-t-xs); font-weight: 800; letter-spacing: .02em;
  background: var(--asgt-chip-bg); color: var(--asgt-chip-fg);
  white-space: nowrap;
}
.asgt-badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }
.asgt-badge--stock { background: var(--asgt-stock-bg); color: var(--asgt-stock); }
.asgt-badge--low   { background: var(--asgt-low-bg);   color: var(--asgt-low); }
.asgt-badge--out   { background: var(--asgt-out-bg);   color: var(--asgt-out); }
.asgt-badge--info  { background: var(--asgt-info-bg);  color: var(--asgt-info); }
.asgt-badge--brand { background: var(--asgt-brand-50); color: var(--asgt-brand-600); }
.asgt-badge--plain::before { display: none; }
.asgt-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* Role badge — admin / cable / sales. Square, so it never reads as a status. */
.asgt-role {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--asgt-r-xs);
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  background: var(--asgt-chip-bg); color: var(--asgt-chip-fg);
}
.asgt-role--admin { background: var(--asgt-brand-50); color: var(--asgt-brand-600); }
.asgt-role--you   { background: var(--asgt-info-bg); color: var(--asgt-info); }

/* Chip — filters, brand and category lists with counts */
.asgt-chip {
  display: inline-flex; align-items: center; gap: var(--asgt-s-2);
  padding: 5px 12px; border-radius: var(--asgt-r-pill);
  font-size: var(--asgt-t-sm); font-weight: 600;
  color: var(--asgt-text-muted);
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border-hair);
  cursor: pointer; white-space: nowrap;
  transition: all var(--asgt-dur) var(--asgt-ease);
}
.asgt-chip:hover { color: var(--asgt-text); border-color: var(--asgt-edge); }
.asgt-chip.is-active, .asgt-chip[aria-pressed="true"] {
  background: var(--asgt-accent); border-color: transparent; color: #fff;
}
.asgt-chip__count {
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs);
  color: var(--asgt-text-faint);
}
.asgt-chip.is-active .asgt-chip__count { color: rgba(255,255,255,.75); }
.asgt-chip__x { font-size: 1.1em; line-height: 1; opacity: .6; }
.asgt-chip-list { display: flex; flex-wrap: wrap; gap: var(--asgt-s-2); }

/* ==========================================================================
   9 · PANELS & CARDS
   ========================================================================== */

.asgt-card {
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-lg);
  box-shadow: var(--asgt-shadow-raise);
  padding: var(--asgt-card-p);
}
.asgt-card--flat { box-shadow: none; background: var(--asgt-surface-alt); }

/* An edge on every surface, including soft.
   On soft --asgt-border is transparent by design: the card is separated by
   shadow, not by a line. But the border box is already there at 1px, so a
   composition that wants a visible edge was reaching past the intended token
   to --asgt-border-hair itself, which is a surface-level decision leaking into
   a component.

   --asgt-border-hair is the same neutral-200 that crisp already gives
   --asgt-border, and the same #2E2637 on dark, so this renders exactly like a
   crisp card edge on crisp and dark, and turns the existing invisible edge
   visible on soft. Colour only: the 1px is already in the box, so nothing
   moves by a pixel.

   Opt-in rather than a change to --asgt-border, which every bordered component
   reads — flipping that would put a line around everything on two live
   surfaces at once. */
.asgt-card--edged { border-color: var(--asgt-border-hair); }
.asgt-card--accent {
  background: linear-gradient(140deg, var(--asgt-brand-600), var(--asgt-brand-900));
  color: #fff; border-color: transparent; box-shadow: var(--asgt-shadow-accent);
}
.asgt-card--accent .asgt-figure__label,
.asgt-card--accent .asgt-figure__unit,
.asgt-card--accent .asgt-figure__sub { color: rgba(255,255,255,.72); }
.asgt-card--accent .asgt-figure__value { color: #fff; }

.asgt-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--asgt-s-4); margin-block-end: var(--asgt-s-4);
}
/* --asgt-t-lg, not --asgt-t-md. The two disagreed: the scale declares
   `--asgt-t-lg: 22 — card titles` while this rule asked for 17. Three things
   settle it for 22:

     · Every other property here matches `.asgt h3` exactly — weight 800,
       margin 0, letter-spacing -.015em. Only the size differed, by one step.
       This was written as "an h3" and the size was the slip.
     · The scale names this token for this component. If 17 were right, the
       token comment has been wrong since it was written.
     · It is the only choice that changes nothing. A card title on an <h3> —
       the common case, and what this library uses — already renders 22px via
       the heading default. Declaring 22 keeps it at 22 now that the class
       wins; declaring 17 would have shrunk every one of them.

   A card title on an <h4> moves 17 → 22, which is the correction: it is a
   card title either way and should not depend on the element chosen. */
.asgt-card__title { font-size: var(--asgt-t-lg); font-weight: 800; letter-spacing: -.015em; margin: 0; }

/* Panel — a card with an uppercase label header. The Cable OS container. */
.asgt-panel {
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-lg);
  box-shadow: var(--asgt-shadow-raise);
  overflow: hidden;
}
.asgt-panel__head {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  padding: var(--asgt-s-3) var(--asgt-s-5);
  background: var(--asgt-surface-alt);
  border-block-end: 1px solid var(--asgt-border-hair);
}
.asgt-panel__label {
  font-size: var(--asgt-t-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--asgt-text-muted);
}
.asgt-panel__actions { margin-inline-start: auto; display: flex; gap: var(--asgt-s-2); }
.asgt-panel__body { padding: var(--asgt-s-5); }
.asgt-panel__body--flush { padding: 0; }

/* Stat card — normal, pending, locked */
.asgt-stat { position: relative; }
.asgt-stat--locked { cursor: pointer; }
.asgt-stat--locked .asgt-figure__value { filter: blur(9px); user-select: none; }
.asgt-stat__lock {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: var(--asgt-s-2);
  border-radius: inherit;
  background: color-mix(in srgb, var(--asgt-surface) 72%, transparent);
  font-size: var(--asgt-t-xs); font-weight: 700; color: var(--asgt-text-muted);
}

/* Product card */
.asgt-product {
  display: flex; flex-direction: column;
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-lg);
  box-shadow: var(--asgt-shadow-raise);
  overflow: hidden;
  transition: transform var(--asgt-dur) var(--asgt-ease), box-shadow var(--asgt-dur) var(--asgt-ease);
}
.asgt-product:hover { transform: translateY(-3px); box-shadow: var(--asgt-shadow-raise-lg); }
.asgt-product__media {
  aspect-ratio: 4 / 3; background: var(--asgt-surface-alt);
  display: grid; place-items: center; color: var(--asgt-icon-faint);
}
.asgt-product__body { padding: var(--asgt-s-4); display: flex; flex-direction: column; gap: var(--asgt-s-3); flex: 1; }
.asgt-product__brand {
  font-size: var(--asgt-t-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--asgt-accent);
}
.asgt-product__name { font-size: var(--asgt-t-base); font-weight: 700; line-height: var(--asgt-lh-snug); margin: 0; }
.asgt-product__foot {
  margin-block-start: auto; padding-block-start: var(--asgt-s-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--asgt-s-3);
}

/* Entity card — customer, access request, supplier */
.asgt-entity { display: flex; flex-direction: column; gap: var(--asgt-s-4); }
.asgt-entity__head { display: flex; align-items: flex-start; gap: var(--asgt-s-3); flex-wrap: wrap; }
.asgt-entity__title { font-size: var(--asgt-t-md); font-weight: 800; margin: 0; }
.asgt-entity__meta {
  display: flex; flex-wrap: wrap; gap: var(--asgt-s-2) var(--asgt-s-5);
  font-size: var(--asgt-t-xs); color: var(--asgt-text-muted);
}
.asgt-entity__meta b {
  display: block; font-family: var(--asgt-font-data);
  font-size: var(--asgt-t-sm); font-weight: 500; color: var(--asgt-text);
}
.asgt-entity__badges { margin-inline-start: auto; display: flex; gap: var(--asgt-s-2); flex-wrap: wrap; }
.asgt-entity__list {
  border-block-start: 1px solid var(--asgt-border-hair);
  display: flex; flex-direction: column;
}
.asgt-entity__list > * + * { border-block-start: 1px solid var(--asgt-border-hair); }

/* ==========================================================================
   10 · TABLES
   ========================================================================== */

.asgt-table-wrap {
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-lg);
  box-shadow: var(--asgt-shadow-raise);
  overflow: auto;
}
.asgt-panel .asgt-table-wrap { border: 0; border-radius: 0; box-shadow: none; }

.asgt-table { inline-size: 100%; border-collapse: collapse; font-size: var(--asgt-t-sm); }
.asgt-table th {
  position: sticky; inset-block-start: 0; z-index: 1;
  text-align: start; padding: var(--asgt-s-3) var(--asgt-s-4);
  font-size: var(--asgt-t-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--asgt-text-muted);
  background: var(--asgt-surface-alt);
  border-block-end: 1px solid var(--asgt-border-hair);
  white-space: nowrap;
}
.asgt-table td {
  padding: var(--asgt-row-py) var(--asgt-s-4);
  border-block-end: 1px solid var(--asgt-border-hair);
  vertical-align: middle;
}
.asgt-table tbody tr:last-child td { border-block-end: 0; }
.asgt-table tbody tr:hover td { background: var(--asgt-accent-tint); }
.asgt-table .num {
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  text-align: end; white-space: nowrap;
}
.asgt-table .sku {
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs);
  color: var(--asgt-text-muted); white-space: nowrap;
}
.asgt-table .asgt-cell-main { font-weight: 600; }
/* When the primary identifier IS a spec — 4C 35mm² CU/XLPE/PVC — it is data,
   not prose, and must not be set in the UI face. */
.asgt-table .asgt-cell-main--data {
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  font-weight: 500; letter-spacing: -0.01em;
}
.asgt-table .asgt-cell-sub { font-size: var(--asgt-t-2xs); color: var(--asgt-text-muted); }
.asgt-table__actions {
  display: flex; gap: var(--asgt-s-2); justify-content: flex-end;
  opacity: .35; transition: opacity var(--asgt-dur) var(--asgt-ease);
}
.asgt-table tbody tr:hover .asgt-table__actions,
.asgt-table__actions:focus-within { opacity: 1; }
/* No hover on touch — never hide an action behind a pointer that does not exist */
@media (hover: none) { .asgt-table__actions { opacity: 1; } }

/* Sortable header */
.asgt-th-sort {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.asgt-th-sort::after { content: "↕"; opacity: .35; font-size: .95em; }
.asgt-th-sort[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; color: var(--asgt-accent); }
.asgt-th-sort[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--asgt-accent); }

/* Filter bar above a table */
.asgt-filterbar {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  flex-wrap: wrap; padding: var(--asgt-s-3) var(--asgt-s-4);
  border-block-end: 1px solid var(--asgt-border-hair);
}
.asgt-filterbar > .asgt-search { flex: 1; min-inline-size: 200px; }
.asgt-filterbar__end { margin-inline-start: auto; display: flex; gap: var(--asgt-s-2); flex-wrap: wrap; }

/* Pagination */
.asgt-pagination { display: flex; align-items: center; gap: var(--asgt-s-2); padding: var(--asgt-s-3) var(--asgt-s-4); }
.asgt-pagination__info {
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-xs);
  color: var(--asgt-text-muted); margin-inline-end: auto;
}
.asgt-pagination__page {
  min-inline-size: 32px; block-size: 32px; padding-inline: 8px;
  display: grid; place-items: center;
  border: 1px solid var(--asgt-border-hair); background: var(--asgt-surface);
  border-radius: var(--asgt-r-sm);
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-xs); font-weight: 600;
  color: var(--asgt-text-muted); cursor: pointer;
}
.asgt-pagination__page:hover { color: var(--asgt-text); border-color: var(--asgt-edge); }
.asgt-pagination__page[aria-current="page"] {
  background: var(--asgt-accent); border-color: transparent; color: #fff;
}

/* ==========================================================================
   11 · NAVIGATION BITS
   ========================================================================== */

.asgt-segmented {
  display: inline-flex; gap: var(--asgt-s-1); padding: var(--asgt-s-1);
  background: var(--asgt-well); box-shadow: var(--asgt-shadow-well);
  border: 1px solid var(--asgt-border); border-radius: var(--asgt-r-pill);
}
.asgt-segmented__item {
  padding: 7px 16px; border: 0; background: transparent;
  border-radius: var(--asgt-r-pill);
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-sm); font-weight: 700;
  color: var(--asgt-text-muted); cursor: pointer;
  transition: background var(--asgt-dur) var(--asgt-ease), color var(--asgt-dur) var(--asgt-ease);
}
.asgt-segmented__item:hover { color: var(--asgt-text); }
.asgt-segmented__item[aria-pressed="true"], .asgt-segmented__item.is-active {
  background: linear-gradient(135deg, var(--asgt-brand-500), var(--asgt-brand-700));
  color: #fff; box-shadow: var(--asgt-shadow-accent);
}

.asgt-tabs { display: flex; gap: var(--asgt-s-6); border-block-end: 1px solid var(--asgt-border-hair); overflow-x: auto; }
.asgt-tab {
  padding: var(--asgt-s-3) 0; border: 0; background: none; cursor: pointer;
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-base); font-weight: 700;
  color: var(--asgt-text-muted); white-space: nowrap;
  border-block-end: 2px solid transparent; margin-block-end: -1px;
}
.asgt-tab:hover { color: var(--asgt-text); }
.asgt-tab.is-active { color: var(--asgt-accent); border-block-end-color: var(--asgt-accent); }
.asgt-tab__count {
  margin-inline-start: 6px; font-family: var(--asgt-font-data);
  font-size: var(--asgt-t-2xs); color: var(--asgt-text-faint);
}

.asgt-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--asgt-s-2);
  font-size: var(--asgt-t-sm); color: var(--asgt-text-muted);
}
.asgt-breadcrumb a { color: var(--asgt-text-muted); text-decoration: none; font-weight: 600; }
.asgt-breadcrumb a:hover { color: var(--asgt-accent); }
.asgt-breadcrumb__sep { color: var(--asgt-icon-faint); }
.asgt-breadcrumb [aria-current] { color: var(--asgt-text); font-weight: 700; }

/* Category card — the marketing carousel */
.asgt-category {
  display: flex; flex-direction: column; align-items: center; gap: var(--asgt-s-3);
  padding: var(--asgt-s-5) var(--asgt-s-4);
  min-inline-size: 132px;
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-lg);
  box-shadow: var(--asgt-shadow-raise-sm);
  color: var(--asgt-text); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform var(--asgt-dur) var(--asgt-ease), box-shadow var(--asgt-dur) var(--asgt-ease);
}
.asgt-category:hover { transform: translateY(-3px); box-shadow: var(--asgt-shadow-raise); }
.asgt-category__icon { color: var(--asgt-accent); }
.asgt-category__label { font-size: var(--asgt-t-sm); font-weight: 700; line-height: var(--asgt-lh-snug); }
.asgt-category.is-active {
  background: linear-gradient(140deg, var(--asgt-brand-600), var(--asgt-brand-800));
  color: #fff; border-color: transparent; box-shadow: var(--asgt-shadow-accent);
}
.asgt-category.is-active .asgt-category__icon { color: #fff; }
.asgt-scroller {
  display: flex; gap: var(--asgt-s-3); overflow-x: auto;
  padding-block: var(--asgt-s-2); scroll-snap-type: x mandatory;
}
.asgt-scroller > * { scroll-snap-align: start; }

/* ==========================================================================
   12 · ALERTS & FEEDBACK
   ========================================================================== */

/* Alert banner — the Financial Alerts strip. Icon, count, one CTA. */
.asgt-alert {
  display: flex; align-items: center; gap: var(--asgt-s-4);
  padding: var(--asgt-s-4) var(--asgt-s-5);
  border-radius: var(--asgt-r-md);
  border-inline-start: 4px solid var(--asgt-info);
  background: var(--asgt-info-bg);
  color: var(--asgt-text);
}
.asgt-alert__icon { color: var(--asgt-info); flex: none; }
.asgt-alert__text { flex: 1; min-inline-size: 0; }
.asgt-alert__title { font-weight: 800; font-size: var(--asgt-t-base); margin: 0; }
.asgt-alert__body { font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); margin: 2px 0 0; }
.asgt-alert__count {
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-lg);
  font-weight: 600; line-height: 1;
}
.asgt-alert--info  { background: var(--asgt-info-bg);  border-inline-start-color: var(--asgt-info); }
.asgt-alert--info .asgt-alert__icon, .asgt-alert--info .asgt-alert__count { color: var(--asgt-info); }
.asgt-alert--low   { background: var(--asgt-low-bg);   border-inline-start-color: var(--asgt-low); }
.asgt-alert--low .asgt-alert__icon, .asgt-alert--low .asgt-alert__count { color: var(--asgt-low); }
.asgt-alert--out   { background: var(--asgt-out-bg);   border-inline-start-color: var(--asgt-out); }
.asgt-alert--out .asgt-alert__icon, .asgt-alert--out .asgt-alert__count { color: var(--asgt-out); }
.asgt-alert--stock { background: var(--asgt-stock-bg); border-inline-start-color: var(--asgt-stock); }
.asgt-alert--stock .asgt-alert__icon, .asgt-alert--stock .asgt-alert__count { color: var(--asgt-stock); }
.asgt-alert__cta { margin-inline-start: auto; flex: none; }

/* Help panel — instructional, never a status colour */
.asgt-help-panel {
  display: flex; gap: var(--asgt-s-3);
  padding: var(--asgt-s-4);
  background: var(--asgt-surface-alt);
  border: 1px dashed var(--asgt-edge);
  border-radius: var(--asgt-r-md);
  font-size: var(--asgt-t-sm); color: var(--asgt-text-muted);
}
.asgt-help-panel__icon { color: var(--asgt-text-faint); flex: none; }
.asgt-help-panel b { color: var(--asgt-text); }

.asgt-toast {
  display: flex; align-items: flex-start; gap: var(--asgt-s-3);
  padding: var(--asgt-s-4);
  background: var(--asgt-surface);
  border: 1px solid var(--asgt-border);
  border-radius: var(--asgt-r-md);
  box-shadow: var(--asgt-shadow-pop);
  border-inline-start: 4px solid var(--asgt-accent);
  max-inline-size: 420px;
}
.asgt-toast--stock { border-inline-start-color: var(--asgt-stock); }
.asgt-toast--low   { border-inline-start-color: var(--asgt-low); }
.asgt-toast--out   { border-inline-start-color: var(--asgt-out); }
.asgt-toast__title { font-weight: 800; font-size: var(--asgt-t-base); margin: 0 0 2px; }
.asgt-toast__body  { font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); margin: 0; }

.asgt-progress {
  block-size: 10px; border-radius: var(--asgt-r-pill);
  background: var(--asgt-well); box-shadow: var(--asgt-shadow-well); overflow: hidden;
}
.asgt-progress__bar {
  block-size: 100%; border-radius: var(--asgt-r-pill);
  background: linear-gradient(90deg, var(--asgt-brand-400), var(--asgt-brand-600));
}
.asgt-progress--thin { block-size: 6px; }
.asgt-progress__marker {
  position: relative; block-size: 100%;
  border-inline-end: 2px dashed var(--asgt-icon-faint);
}

/* ==========================================================================
   13 · STATES — empty, placeholder, restricted, loading
   ========================================================================== */

.asgt-empty {
  text-align: center; padding: var(--asgt-s-12) var(--asgt-s-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--asgt-s-3);
}
.asgt-empty__icon {
  inline-size: 66px; block-size: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--asgt-well); box-shadow: var(--asgt-shadow-well);
  color: var(--asgt-icon-faint); margin-block-end: var(--asgt-s-2);
}
.asgt-empty__title { font-size: var(--asgt-t-md); font-weight: 800; margin: 0; }
.asgt-empty__body { font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); margin: 0; max-inline-size: 42ch; }
.asgt-empty--sm { padding: var(--asgt-s-6) var(--asgt-s-4); }
.asgt-empty--sm .asgt-empty__icon { inline-size: 44px; block-size: 44px; }

/* "Not wired up yet" — honest placeholder, not a fake dashboard */
.asgt-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: var(--asgt-s-2);
  padding: var(--asgt-s-10) var(--asgt-s-6); text-align: center;
  border: 2px dashed var(--asgt-edge);
  border-radius: var(--asgt-r-lg);
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 9px,
    color-mix(in srgb, var(--asgt-edge) 40%, transparent) 9px,
    color-mix(in srgb, var(--asgt-edge) 40%, transparent) 10px
  );
  color: var(--asgt-text-muted);
}
.asgt-placeholder__title { font-weight: 800; color: var(--asgt-text); font-size: var(--asgt-t-base); }
.asgt-placeholder__body { font-size: var(--asgt-t-sm); margin: 0; max-inline-size: 44ch; }

/* Restricted — staff account on a customer-only screen */
.asgt-restricted {
  display: flex; gap: var(--asgt-s-4); align-items: flex-start;
  padding: var(--asgt-s-5);
  border: 1px solid var(--asgt-border-hair);
  border-radius: var(--asgt-r-lg);
  background: var(--asgt-surface-alt);
}
.asgt-restricted__icon {
  inline-size: 40px; block-size: 40px; border-radius: var(--asgt-r-md);
  display: grid; place-items: center; flex: none;
  background: var(--asgt-chip-bg); color: var(--asgt-text-muted);
}
.asgt-restricted__title { font-weight: 800; margin: 0 0 4px; }
.asgt-restricted__body { font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); margin: 0; }

.asgt-skeleton {
  background: linear-gradient(90deg,
    var(--asgt-skeleton-a) 25%, var(--asgt-skeleton-b) 37%, var(--asgt-skeleton-a) 63%);
  background-size: 400% 100%;
  animation: asgt-shimmer 1.4s ease infinite;
  border-radius: var(--asgt-r-sm); block-size: 14px;
}
.asgt-skeleton--figure { block-size: 30px; inline-size: 60%; }
.asgt-skeleton--circle { border-radius: 50%; inline-size: 36px; block-size: 36px; }
@keyframes asgt-shimmer { to { background-position: -135% 0; } }

.asgt-spinner {
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  border: 2px solid var(--asgt-edge);
  border-block-start-color: var(--asgt-accent);
  animation: asgt-spin .7s linear infinite; display: inline-block;
}
@keyframes asgt-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   14 · ACTIVITY FEED
   ========================================================================== */

/* list-style/margin/padding are zeroed so this can be a <ul> of <li> items and
   keep the semantics of a list — a feed IS a list, and screen-reader users get
   "list, 6 items" instead of a run of divs. Inert when it is divs, which have
   no default margin, padding or marker to begin with. */
.asgt-feed { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.asgt-feed__item {
  display: flex; gap: var(--asgt-s-3);
  padding: var(--asgt-s-3) 0;
  border-block-end: 1px solid var(--asgt-border-hair);
}
.asgt-feed__item:last-child { border-block-end: 0; }
/* Icon slot is a drawn shape, never an <img> — no broken image, ever */
.asgt-feed__icon {
  inline-size: 32px; block-size: 32px; border-radius: var(--asgt-r-sm);
  display: grid; place-items: center; flex: none;
  background: var(--asgt-accent-tint); color: var(--asgt-accent);
}
.asgt-feed__icon--stock { background: var(--asgt-stock-bg); color: var(--asgt-stock); }
.asgt-feed__icon--low   { background: var(--asgt-low-bg);   color: var(--asgt-low); }
.asgt-feed__icon--out   { background: var(--asgt-out-bg);   color: var(--asgt-out); }
.asgt-feed__icon--info  { background: var(--asgt-info-bg);  color: var(--asgt-info); }
/* A dot rather than a tile, for a feed whose rows carry their meaning in the
   text. An audit log is the case: every row is "a thing changed", so a status
   icon per row would be sixteen shapes saying nothing. Same slot, same flow —
   swap the modifier, keep the markup. */
.asgt-feed__icon--dot {
  inline-size: 7px; block-size: 7px;
  margin-block-start: 7px;           /* sits on the first line's cap height */
  border-radius: 50%;
  background: var(--asgt-accent);
  box-shadow: 0 0 0 4px var(--asgt-accent-tint);
}
.asgt-feed__body { flex: 1; min-inline-size: 0; }
.asgt-feed__text { font-size: var(--asgt-t-sm); margin: 0; }
.asgt-feed__text b { font-weight: 700; }
/* The second line: what happened on top, what changed underneath. Without this
   a two-part row had to be composed locally, which is how ASGT ONE ended up
   with a private copy of this whole component. */
.asgt-feed__detail {
  display: block; margin-block-start: 2px;
  font-size: var(--asgt-t-xs); color: var(--asgt-text-muted);
  line-height: 1.45;
}
/* flex:none so the timestamp holds its width when it is a sibling of __body
   rather than inside it — __body takes the slack and the time stays at the
   row's end. Inert in the older shape, where __time sits inside __body and is
   not a flex item at all. */
.asgt-feed__time {
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs);
  color: var(--asgt-text-faint); white-space: nowrap; flex: none;
}

/* Report block — agent output. Never raw JSON on screen. */
.asgt-report { display: flex; flex-direction: column; gap: var(--asgt-s-4); }
.asgt-report__section { display: flex; flex-direction: column; gap: var(--asgt-s-2); }
.asgt-report__heading {
  font-size: var(--asgt-t-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--asgt-text-faint);
}
.asgt-report__list { margin: 0; padding-inline-start: var(--asgt-s-5); font-size: var(--asgt-t-sm); }
.asgt-report__list li { margin-block-end: 6px; }
.asgt-report__raw {
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-xs); line-height: 1.7;
  background: var(--asgt-well); box-shadow: var(--asgt-shadow-well);
  border-radius: var(--asgt-r-md); padding: var(--asgt-s-4);
  overflow-x: auto; margin: 0; color: var(--asgt-text-muted);
}

/* ==========================================================================
   15 · BASKET & QUOTES
   ========================================================================== */

.asgt-line {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: var(--asgt-s-4);
  padding: var(--asgt-s-4) 0;
  border-block-end: 1px solid var(--asgt-border-hair);
}
.asgt-line:last-of-type { border-block-end: 0; }
.asgt-line__main { min-inline-size: 0; }
.asgt-line__name { font-weight: 700; font-size: var(--asgt-t-base); margin: 0 0 6px; }
.asgt-line__spec { display: flex; flex-wrap: wrap; gap: var(--asgt-s-2); }
.asgt-line__unit, .asgt-line__total {
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  text-align: end; white-space: nowrap;
}
.asgt-line__unit { font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); }
.asgt-line__total { font-size: var(--asgt-t-md); font-weight: 600; }

.asgt-totals { display: flex; flex-direction: column; gap: var(--asgt-s-2); }
.asgt-totals__row {
  display: flex; justify-content: space-between; gap: var(--asgt-s-4);
  font-size: var(--asgt-t-sm); color: var(--asgt-text-muted);
}
.asgt-totals__row span:last-child {
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums; color: var(--asgt-text);
}
.asgt-totals__row--grand {
  padding-block-start: var(--asgt-s-3);
  border-block-start: 1px solid var(--asgt-border-hair);
  font-size: var(--asgt-t-md); font-weight: 800; color: var(--asgt-text);
}
.asgt-totals__row--grand span:last-child { font-size: var(--asgt-t-lg); color: var(--asgt-accent); }

/* Sticky basket bar on the marketing preview widget and mobile */
.asgt-basketbar {
  display: flex; align-items: center; gap: var(--asgt-s-4);
  padding: var(--asgt-s-3) var(--asgt-s-5);
  background: var(--asgt-brand-900); color: #fff;
  border-radius: var(--asgt-r-pill);
  box-shadow: var(--asgt-shadow-pop);
}
.asgt-basketbar__count {
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-sm);
  color: var(--asgt-brand-200);
}
.asgt-basketbar__total {
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  font-size: var(--asgt-t-md); font-weight: 600; margin-inline-start: auto;
}

/* ==========================================================================
   16 · MARKETING MODULES (asgt.sa)
   ========================================================================== */

.asgt-section { padding-block: var(--asgt-s-20); }
.asgt-section--tight { padding-block: var(--asgt-s-12); }
.asgt-section__head { max-inline-size: 62ch; margin-block-end: var(--asgt-s-10); }
.asgt-section__head p { color: var(--asgt-text-muted); font-size: var(--asgt-t-md); margin: var(--asgt-s-3) 0 0; }

.asgt-eyebrow {
  font-size: var(--asgt-t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em; color: var(--asgt-accent);
}

/* Hero — media with a guaranteed poster fallback and a loading state */
.asgt-hero { position: relative; overflow: hidden; background: var(--asgt-ink); color: #fff; isolation: isolate; }
.asgt-hero__media { position: absolute; inset: 0; z-index: -2; }
.asgt-hero__media img, .asgt-hero__media video {
  inline-size: 100%; block-size: 100%; object-fit: cover;
}
.asgt-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(18,14,24,.92) 0%, rgba(18,14,24,.74) 42%, rgba(59,4,46,.5) 100%);
}
/* Shown until the video can play; also the permanent fallback if it never does */
.asgt-hero__fallback {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, var(--asgt-brand-900), var(--asgt-ink) 55%, var(--asgt-brand-800));
}
.asgt-hero__inner { padding-block: var(--asgt-s-24); max-inline-size: 62ch; }
.asgt-hero__title { font-size: var(--asgt-t-3xl); font-weight: 800; letter-spacing: -.035em; margin: var(--asgt-s-4) 0; }
.asgt-hero__lead { font-size: var(--asgt-t-md); color: rgba(255,255,255,.8); margin-block-end: var(--asgt-s-8); }
.asgt-hero .asgt-eyebrow { color: var(--asgt-brand-300); }

/* Stat counter tile — 20+ years, 5M+ items */
.asgt-counter { display: flex; flex-direction: column; gap: 4px; }
.asgt-counter__value {
  font-family: var(--asgt-font-data); font-variant-numeric: tabular-nums;
  font-size: var(--asgt-t-2xl); font-weight: 600; line-height: 1;
  color: var(--asgt-accent); letter-spacing: -.03em;
}
.asgt-counter__label {
  font-size: var(--asgt-t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--asgt-text-muted);
}

/* Feature tile — "Why ASGT" */
.asgt-feature { display: flex; flex-direction: column; gap: var(--asgt-s-3); }
.asgt-feature__icon {
  inline-size: 46px; block-size: 46px; border-radius: var(--asgt-r-md);
  display: grid; place-items: center;
  background: var(--asgt-accent-tint); color: var(--asgt-accent);
}
.asgt-feature__title { font-size: var(--asgt-t-md); font-weight: 800; margin: 0; }
.asgt-feature__body { font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); margin: 0; }

/* Logo grid — brands and clients */
.asgt-logogrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px; background: var(--asgt-border-hair);
  border: 1px solid var(--asgt-border-hair); border-radius: var(--asgt-r-lg); overflow: hidden;
}
.asgt-logogrid__cell {
  display: grid; place-items: center; min-block-size: 96px;
  padding: var(--asgt-s-4); background: var(--asgt-surface);
  color: var(--asgt-text-faint);
  font-weight: 800; letter-spacing: .04em; font-size: var(--asgt-t-sm);
  text-transform: uppercase;
  transition: color var(--asgt-dur) var(--asgt-ease), background var(--asgt-dur) var(--asgt-ease);
}
.asgt-logogrid__cell:hover { color: var(--asgt-accent); background: var(--asgt-accent-tint); }
.asgt-logogrid__cell img { max-inline-size: 100%; max-block-size: 44px; object-fit: contain; }

/* Comparison — "how buying works" */
.asgt-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--asgt-s-5); }
.asgt-compare__col {
  padding: var(--asgt-s-6);
  border-radius: var(--asgt-r-lg);
  border: 1px solid var(--asgt-border-hair);
  background: var(--asgt-surface-alt);
}
.asgt-compare__col--good {
  background: var(--asgt-surface);
  border-color: var(--asgt-accent);
  box-shadow: var(--asgt-shadow-raise);
}
.asgt-compare__label {
  font-size: var(--asgt-t-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--asgt-text-faint); margin-block-end: var(--asgt-s-3);
}
.asgt-compare__col--good .asgt-compare__label { color: var(--asgt-accent); }
.asgt-compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--asgt-s-3); }
.asgt-compare__list li {
  display: flex; gap: var(--asgt-s-3); align-items: flex-start;
  font-size: var(--asgt-t-sm); color: var(--asgt-text-muted);
}
.asgt-compare__list li::before {
  content: "—"; flex: none; color: var(--asgt-icon-faint);
  font-family: var(--asgt-font-data);
}
.asgt-compare__col--good .asgt-compare__list li { color: var(--asgt-text); }
.asgt-compare__col--good .asgt-compare__list li::before { content: "✓"; color: var(--asgt-stock); font-weight: 700; }

/* Closing CTA banner */
.asgt-cta {
  display: flex; align-items: center; gap: var(--asgt-s-6); flex-wrap: wrap;
  padding: var(--asgt-s-10) var(--asgt-s-8);
  border-radius: var(--asgt-r-xl);
  background: linear-gradient(120deg, var(--asgt-brand-700), var(--asgt-brand-900) 60%, var(--asgt-ink));
  color: #fff;
}
.asgt-cta__text { flex: 1; min-inline-size: 260px; }
.asgt-cta__title { font-size: var(--asgt-t-xl); font-weight: 800; letter-spacing: -.025em; margin: 0 0 var(--asgt-s-2); }
.asgt-cta__body { color: rgba(255,255,255,.78); font-size: var(--asgt-t-base); margin: 0; }
.asgt-cta .asgt-btn { --_bg: #fff; --_fg: var(--asgt-brand-700); border-color: transparent; }

/* Footer */
.asgt-footer {
  background: var(--asgt-ink); color: var(--asgt-neutral-300);
  padding-block: var(--asgt-s-16) var(--asgt-s-8);
  font-size: var(--asgt-t-sm);
}
.asgt-footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--asgt-s-8); margin-block-end: var(--asgt-s-10);
}
.asgt-footer__heading {
  font-size: var(--asgt-t-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--asgt-neutral-500); margin-block-end: var(--asgt-s-4);
}
.asgt-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--asgt-s-2); }
.asgt-footer__links a { color: var(--asgt-neutral-300); text-decoration: none; }
.asgt-footer__links a:hover { color: #fff; }
.asgt-footer__bar {
  display: flex; align-items: center; gap: var(--asgt-s-4); flex-wrap: wrap;
  padding-block-start: var(--asgt-s-6);
  border-block-start: 1px solid rgba(255,255,255,.1);
  color: var(--asgt-neutral-500); font-size: var(--asgt-t-xs);
}
.asgt-footer__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--asgt-s-3); }

.asgt-langswitch { display: inline-flex; gap: var(--asgt-s-1); padding: 3px; background: rgba(255,255,255,.07); border-radius: var(--asgt-r-pill); }
.asgt-langswitch__item {
  padding: 4px 12px; border: 0; background: transparent; border-radius: var(--asgt-r-pill);
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-xs); font-weight: 700;
  color: var(--asgt-neutral-400); cursor: pointer;
}
.asgt-langswitch__item.is-active { background: var(--asgt-brand-600); color: #fff; }

.asgt-social { display: inline-flex; gap: var(--asgt-s-2); }
.asgt-social a {
  inline-size: 32px; block-size: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: var(--asgt-neutral-300);
}
.asgt-social a:hover { background: var(--asgt-brand-600); color: #fff; }

/* ==========================================================================
   17 · MODAL & DOC VIEWER
   ========================================================================== */

.asgt-modal {
  border: 0; padding: 0;
  background: var(--asgt-surface); color: var(--asgt-text);
  border-radius: var(--asgt-r-xl);
  box-shadow: var(--asgt-shadow-pop);
  max-inline-size: 560px; inline-size: calc(100% - 2rem);
}
.asgt-modal--wide { max-inline-size: 860px; }
.asgt-modal::backdrop { background: rgba(18,14,24,.5); backdrop-filter: blur(3px); }
.asgt-modal__head { padding: var(--asgt-s-6) var(--asgt-s-6) 0; }
.asgt-modal__body { padding: var(--asgt-s-4) var(--asgt-s-6); }
.asgt-modal__foot {
  padding: var(--asgt-s-4) var(--asgt-s-6) var(--asgt-s-6);
  display: flex; justify-content: flex-end; gap: var(--asgt-s-3); flex-wrap: wrap;
}

/* Handbook viewer — contents rail + document pane */
.asgt-doc { display: grid; grid-template-columns: 220px 1fr; gap: var(--asgt-s-6); align-items: start; }
.asgt-doc__toc { position: sticky; top: var(--asgt-s-4); display: flex; flex-direction: column; gap: 2px; }
.asgt-doc__toc a {
  padding: 6px var(--asgt-s-3); border-radius: var(--asgt-r-sm);
  font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.asgt-doc__toc a:hover { background: var(--asgt-surface-alt); color: var(--asgt-text); }
.asgt-doc__toc a.is-active {
  color: var(--asgt-accent); border-inline-start-color: var(--asgt-accent);
  background: var(--asgt-accent-tint); font-weight: 700;
}
.asgt-doc__pane {
  background: var(--asgt-surface); border: 1px solid var(--asgt-border-hair);
  border-radius: var(--asgt-r-lg); padding: var(--asgt-s-6); min-block-size: 320px;
}
@media (max-width: 820px) { .asgt-doc { grid-template-columns: 1fr; } .asgt-doc__toc { position: static; } }

/* ==========================================================================
   18 · UTILITIES
   ========================================================================== */

.asgt-muted { color: var(--asgt-text-muted); }
.asgt-faint { color: var(--asgt-text-faint); }
.asgt-stack { display: flex; flex-direction: column; gap: var(--asgt-s-4); }
.asgt-stack--tight { gap: var(--asgt-s-2); }
.asgt-row  { display: flex; align-items: center; gap: var(--asgt-s-3); flex-wrap: wrap; }
.asgt-row--end { margin-inline-start: auto; }
.asgt-grid { display: grid; gap: var(--asgt-s-4); }
.asgt-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.asgt-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.asgt-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.asgt-grid--sidebar { grid-template-columns: minmax(0,1fr) 320px; }
@media (max-width: 900px) { .asgt-grid--sidebar { grid-template-columns: 1fr; } }
.asgt-divider { block-size: 1px; background: var(--asgt-border-hair); border: 0; margin-block: var(--asgt-s-5); }

.asgt-visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* ==========================================================================
   19 · PRINT
   Every surface token is mode-relative, so without this a page printed from
   dark mode is near-white text on white paper. This re-points the whole token
   layer to ink-on-paper and strips the application chrome, so any consumer
   gets a correct printout without hand-un-theming anything.
   ========================================================================== */

@media print {
  /* Token layer forced to paper, whatever [data-surface] says */
  .asgt, [data-surface] {
    --asgt-canvas:        #FFFFFF;
    --asgt-surface:       #FFFFFF;
    --asgt-surface-alt:   #FFFFFF;
    --asgt-well:          #FFFFFF;
    --asgt-border:        #767078;
    --asgt-border-hair:   #767078;
    --asgt-edge:          #767078;
    --asgt-edge-strong:   #4A444C;
    --asgt-text:          #000000;
    --asgt-text-muted:    #333036;
    --asgt-text-faint:    #4A444C;
    --asgt-hover:         transparent;
    --asgt-hover-strong:  transparent;
    --asgt-chip-bg:       #FFFFFF;
    --asgt-chip-fg:       #000000;
    --asgt-icon-faint:    #4A444C;
    --asgt-accent:        #520741;
    --asgt-accent-on-tint:#520741;
    --asgt-accent-tint:   transparent;
    --asgt-stock:         #06432F;
    --asgt-low:           #573200;
    --asgt-out:           #7A0F19;
    --asgt-info:          #103356;
    --asgt-stock-bg:      transparent;
    --asgt-low-bg:        transparent;
    --asgt-out-bg:        transparent;
    --asgt-info-bg:       transparent;
    --asgt-shadow-raise:    none;
    --asgt-shadow-raise-sm: none;
    --asgt-shadow-raise-lg: none;
    --asgt-shadow-well:     none;
    --asgt-shadow-accent:   none;
    --asgt-shadow-pop:      none;
  }

  body.asgt { background: #fff; color: #000; }

  /* Application chrome does not belong on paper */
  .asgt-sidebar, .asgt-rail, .asgt-topbar, .asgt-ticker, .asgt-statusbar,
  .asgt-menu-btn, .asgt-scrim, .asgt-pagination, .asgt-filterbar,
  .asgt-segmented, .asgt-tabs, .asgt-skeleton, .asgt-spinner,
  .asgt-table__actions, .asgt-pagehead__actions, .asgt-basketbar,
  .asgt-footer, .asgt-cta { display: none !important; }

  /*
   * min-block-size: 100vh has to go, not just the flex.
   *
   * In paged media 100vh is the height of the PAGE AREA, so the app shell
   * stays at least one full sheet tall when printed — and anything after it,
   * including a container's own bottom padding, is then pushed onto a second,
   * near-blank sheet. Cable OS's certificate printed on two pages for exactly
   * this reason, and any surface printing a short page has it.
   */
  .asgt-app { display: block; min-block-size: 0; }
  .asgt-main { display: block; }

  /* Wells and cards become ruled boxes rather than shadowed ones */
  .asgt-card, .asgt-panel, .asgt-well, .asgt-spec, .asgt-table-wrap,
  .asgt-alert, .asgt-toast, .asgt-report__raw, .asgt-doc__pane {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #767078 !important;
  }
  .asgt-card--accent { color: #000 !important; }
  .asgt-card--accent .asgt-figure__label,
  .asgt-card--accent .asgt-figure__unit,
  .asgt-card--accent .asgt-figure__sub,
  .asgt-card--accent .asgt-figure__value { color: #000 !important; }

  .asgt-btn, .asgt-icon-btn, .asgt-toggle, .asgt-chip { display: none !important; }

  /* Badges keep meaning without a fill */
  .asgt-badge, .asgt-role {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px currentColor;
  }

  /* Tables must not be cut mid-row across a page break */
  .asgt-table-wrap { overflow: visible !important; }
  .asgt-table { page-break-inside: auto; }
  .asgt-table tr { page-break-inside: avoid; page-break-after: auto; }
  .asgt-table thead { display: table-header-group; }
  .asgt-table th { background: #fff !important; border-block-end: 1.5px solid #000; }
  .asgt-table tbody tr:hover td { background: #fff !important; }

  .asgt-panel, .asgt-card { page-break-inside: avoid; }
  h1, h2, h3, h4 { page-break-after: avoid; }

  /* A link that says "click here" is useless on paper */
  .asgt-doc__pane a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--asgt-font-data); font-size: .85em; color: #4A444C;
  }

  a { text-decoration: underline; color: #000; }
}

/* ==========================================================================
   20 · BRAND MARKS
   Ship both lockups in the DOM and let the surface mode choose. No JS, no
   flash, and it stays correct when the user flips the theme.
   ========================================================================== */

.asgt-logo { display: block; block-size: 28px; inline-size: auto; }
.asgt-logo--sm { block-size: 20px; }
.asgt-logo--lg { block-size: 44px; }
.asgt-logo--dark { display: none; }
[data-surface="dark"] .asgt-logo--light { display: none; }
[data-surface="dark"] .asgt-logo--dark  { display: block; }

/* Square mark in the sidebar, using the artwork instead of a letter */
.asgt-sidebar__mark--image {
  background: none; box-shadow: none; padding: 0; overflow: hidden;
}
.asgt-sidebar__mark--image img {
  inline-size: 100%; block-size: 100%; object-fit: contain;
}

@media print {
  .asgt-logo--dark { display: none !important; }
  .asgt-logo--light { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  .asgt *, .asgt *::before, .asgt *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .asgt-btn:hover, .asgt-product:hover, .asgt-category:hover { transform: none; }
  .asgt-ticker__track { animation: none; }
}

@media (max-width: 900px) {
  /* DEFAULT: the app stacks and navigation stays reachable. It does not vanish. */
  .asgt-app { flex-direction: column; }
  .asgt-sidebar {
    inline-size: 100%; flex-direction: row; align-items: center;
    gap: var(--asgt-s-1); overflow-x: auto;
    border-inline-end: 0; border-block-end: 1px solid var(--asgt-border-hair);
    padding: var(--asgt-s-2) var(--asgt-s-3);
  }
  .asgt-sidebar__brand { padding: 0 var(--asgt-s-3) 0 0; flex: none; }
  .asgt-sidebar__group { margin-block-start: 0; display: contents; }
  .asgt-sidebar__group-label { display: none; }
  .asgt-navitem { inline-size: auto; white-space: nowrap; flex: none; }
  .asgt-sidebar__foot {
    margin-block-start: 0; margin-inline-start: auto; flex: none;
    padding-block-start: 0; border-block-start: 0;
    padding-inline-start: var(--asgt-s-3);
    border-inline-start: 1px solid var(--asgt-border-hair);
  }
  .asgt-sidebar__foot-meta { display: none; }
  .asgt-rail { inline-size: 100%; flex-direction: row; justify-content: flex-start;
    padding: var(--asgt-s-2); border-inline-end: 0;
    border-block-end: 1px solid var(--asgt-border-hair); overflow-x: auto; }

  .asgt-line { grid-template-columns: 1fr auto; row-gap: var(--asgt-s-3); }
}

/* OPT-IN drawer. Only use this if you also ship an opener — see .asgt-menu-btn. */

/* The opener is hidden by default and revealed by the drawer breakpoint below.
   THIS DECLARATION MUST STAY ABOVE THAT MEDIA QUERY. It used to sit after it at
   identical specificity (0,1,0), so it won on source order at every width and
   the button could never be shown — the drawer shipped with no way to open it
   on the only viewports where the drawer exists.

   .asgt-scrim below has the same shape and escaped only because
   .asgt-scrim.is-open is (0,2,0) and outranks it. The opener has no equivalent
   modifier and should not grow one: it is not "open", it is the thing that
   opens. Source order is the fix. */
.asgt-menu-btn { display: none; }

@media (max-width: 900px) {
  .asgt-sidebar--drawer {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
    inline-size: var(--asgt-sidebar-w); flex-direction: column; overflow-y: auto;
    border-block-end: 0; border-inline-end: 1px solid var(--asgt-border-hair);
    padding: var(--asgt-s-4);
    transform: translateX(-105%); transition: transform var(--asgt-dur) var(--asgt-ease);
  }
  [dir="rtl"] .asgt-sidebar--drawer { transform: translateX(105%); }
  .asgt-sidebar--drawer.is-open { transform: translateX(0); }
  .asgt-sidebar--drawer .asgt-sidebar__group { display: block; }
  .asgt-sidebar--drawer .asgt-sidebar__group-label,
  .asgt-sidebar--drawer .asgt-sidebar__foot-meta { display: block; }
  .asgt-sidebar--drawer .asgt-sidebar__foot {
    margin-block-start: auto; margin-inline-start: 0;
    padding-block-start: var(--asgt-s-4); border-block-start: 1px solid var(--asgt-border-hair);
    border-inline-start: 0; padding-inline-start: 0;
  }
  .asgt-scrim {
    position: fixed; inset: 0; z-index: 39;
    background: rgba(18,14,24,.5); backdrop-filter: blur(2px);
  }
  .asgt-menu-btn { display: inline-grid; }
}
.asgt-scrim { display: none; }
.asgt-scrim.is-open { display: block; }

@media (max-width: 640px) {
  /* --asgt-t-page collapses onto --asgt-t-2xl here rather than staying at 36.
     This block drops 2xl from 42 to 32, so a fixed 36 would leave the page
     title LARGER than the page head above it and invert the scale on every
     phone. Below 640 there is no room for a distinct step between them, so
     they meet — the distinction is a desktop one. */
  :root { --asgt-t-page: 2rem; --asgt-t-2xl: 2rem; --asgt-t-3xl: 2.5rem; --asgt-card-p: var(--asgt-s-4); }
  .asgt-container { padding-inline: var(--asgt-s-4); }
  .asgt-section { padding-block: var(--asgt-s-12); }
  .asgt-alert { flex-wrap: wrap; }
  .asgt-alert__cta { margin-inline-start: 0; inline-size: 100%; }
}

/* ==========================================================================
   TOUCH TARGETS AND FIELD SIZE
   ==========================================================================
   The component half of the compact-density touch layer declared near the top
   of this file. It has to be HERE, after every component it adjusts: written
   beside the density tokens it sat above `.asgt-input`'s own font-size and lost
   on source order, so fields still triggered the iOS zoom while the height
   tokens — which are on a different selector and do not collide — worked.
   ========================================================================== */

@media (pointer: coarse), (max-width: 900px) {
  /*
   * 16px IS NOT A TYPE CHOICE — it is the threshold below which iOS Safari
   * zooms the page on focus, leaving the person looking at one field with the
   * rest of the form off screen and no way back but pinching. Named as a token
   * so it reads as the constraint it is rather than as a magic number.
   */
  .asgt-input, .asgt-select, .asgt-textarea,
  .asgt-input--sm, .asgt-select--sm { font-size: var(--asgt-t-touch); }

  /* A nav item is the one control ALWAYS on screen. At 38px it was the
     most-tapped thing in the app and under the minimum. */
  .asgt-navitem { min-block-size: var(--asgt-control-h); }

  /* The segmented control sets its own height and so misses the token. */
  .asgt-segmented__item { min-block-size: var(--asgt-control-h-sm); }

  /*
   * The same miss a third time, measured on Cable OS's live catalogue
   * 12 Aug 2026: .asgt-pagination__page hard-codes a 32px box, so no density
   * or touch token has ever reached it. Six of them sat in a row at 32x32 on
   * a phone.
   *
   * It is the control that moves you through a long list — precisely what you
   * do on a phone — and 32px targets side by side means the wrong page every
   * few taps. min-inline-size rather than a fixed width, so a three-digit
   * page number still grows.
   */
  .asgt-pagination__page {
    min-inline-size: var(--asgt-control-h);
    block-size: var(--asgt-control-h);
  }
}