/* Maverick UI elements. Generated by scripts/build-ui-elements.mjs from app/ui-elements/document.css; do not edit. */
/*
 * Maverick UI elements: document stylesheet (source of public/ui/elements.css).
 * Built by scripts/build-ui-elements.mjs; loaded in <head> on /app and /account.
 *
 * It does two jobs:
 * 1. :root design tokens (--ui-*). Shadow roots read them through var(); custom properties
 *    inherit into shadow trees. Declare every token here: the build fails on an undeclared one.
 * 2. Host-level CSS for every s-* tag, so server-rendered pages lay out before the element
 *    script runs. Layout hosts (page, section, stack, box, grid, text, lists, link, badge,
 *    banner box, table family) are styled here in both states. Elements with shadow chrome
 *    (button, modal, fields) get only display here plus a :not(:defined) fallback look;
 *    their shadow CSS owns the rest.
 *
 * Document rules beat :host rules in shadow CSS, so a component cannot override a property set
 * here from :host. React 18 attribute names arrive lowercased; HTML attribute-name matching is
 * case-insensitive, values are matched as written (Polaris keywords are lowercase).
 * Attribute booleans are strings: "false" means off, hence the :not([x="false"]) guards.
 */

/* ======================================================================= tokens */

:root {
  /* colors */
  --ui-ink: #141210;
  --ui-ink-2: #2b2620;
  --ui-paper: #faf8f3;
  --ui-canvas: #f4f2ed;
  --ui-surface: #ffffff;
  --ui-subdued: #f7f5f0;
  --ui-line: #e6e1d7;
  --ui-line-strong: #cfc7b8;
  --ui-muted: #6b645a;
  --ui-amber: #ffb000;
  --ui-amber-soft: #fff4d6;
  --ui-amber-ink: #6b4a00;
  --ui-critical: #b42318;
  --ui-critical-bg: #fef3f2;
  --ui-critical-border: #fda29b;
  --ui-warning: #b54708;
  --ui-warning-bg: #fffaeb;
  --ui-warning-border: #fec84b;
  --ui-success: #067647;
  --ui-success-bg: #ecfdf3;
  --ui-success-border: #75e0a7;
  --ui-info: #175cd3;
  --ui-info-bg: #eff8ff;
  --ui-info-border: #84caff;
  --ui-neutral: #4a443b;
  --ui-neutral-bg: #efece5;
  --ui-neutral-border: #dcd6ca;
  /* Primary button fill, its hover, and the text on it; the field fill; the text on a critical fill.
     Defaults keep the sign-in pages as they were; the admin shell (AdminShell.module.css) sets amber. */
  --ui-primary: #141210;
  --ui-primary-hover: #2b2620;
  --ui-primary-ink: #faf8f3;
  --ui-field-bg: #ffffff;
  --ui-on-critical: #ffffff;

  /* type */
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ui-font-size: 14px;
  --ui-font-size-small: 12.5px;
  --ui-font-size-label: 13px;
  --ui-line-height: 1.5;
  --ui-weight-strong: 600;

  /* spacing: Polaris keywords */
  --ui-space-none: 0px;
  --ui-space-small-500: 2px;
  --ui-space-small-400: 2px;
  --ui-space-small-300: 4px;
  --ui-space-small-200: 6px;
  --ui-space-small-100: 8px;
  --ui-space-small: 8px;
  --ui-space-base: 12px;
  --ui-space-large: 16px;
  --ui-space-large-100: 20px;
  --ui-space-large-200: 24px;
  --ui-space-large-300: 32px;
  --ui-space-large-400: 40px;
  --ui-space-large-500: 48px;

  /* shape */
  --ui-radius-small: 6px;
  --ui-radius-control: 8px;
  --ui-radius-base: 10px;
  --ui-radius-card: 12px;
  --ui-radius-full: 999px;
  --ui-border-width: 1px;
  --ui-shadow-card: 0 1px 2px rgba(20, 18, 16, 0.04);
  --ui-shadow-modal: 0 24px 48px -12px rgba(20, 18, 16, 0.28), 0 2px 6px rgba(20, 18, 16, 0.08);
  --ui-backdrop: rgba(20, 18, 16, 0.45);

  /* controls */
  --ui-control-height: 36px;
  --ui-field-height: 40px;
  /* amber-ink, not amber: the ring must reach 3:1 on white and canvas (WCAG 1.4.11). */
  --ui-focus-color: var(--ui-amber-ink);
  --ui-field-ring: 0 0 0 3px rgba(255, 176, 0, 0.45);
  --ui-duration: 120ms;
  /* s-button label wrapping; table cells set nowrap so "Edit A-01" never breaks in a squeezed column */
  --ui-button-wrap: normal;

  /* page and section */
  --ui-page-max: 1040px;
  --ui-page-max-large: 1600px;
  --ui-page-pad: 24px;
  --ui-page-gap: 16px;
  --ui-section-pad: 20px;
  --ui-section-gap: 12px;
}

@media (pointer: coarse) {
  :root {
    --ui-control-height: 44px;
    --ui-field-height: 44px;
  }
}

@media (max-width: 640px) {
  :root {
    --ui-page-pad: 16px;
    --ui-section-pad: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-duration: 0ms;
  }
}

/* ======================================================================= all hosts */

:is(
  s-page, s-section, s-stack, s-box, s-grid, s-heading, s-text, s-paragraph, s-badge, s-banner,
  s-unordered-list, s-ordered-list, s-list-item, s-link, s-button, s-modal,
  s-text-field, s-number-field, s-email-field, s-url-field, s-date-field, s-text-area, s-select,
  s-option, s-checkbox, s-drop-zone,
  s-table, s-table-header-row, s-table-header, s-table-body, s-table-row, s-table-cell
) {
  box-sizing: border-box;
}

/* Children of layout hosts may shrink below their content (wide tables scroll instead of
   blowing out the column), and carry no outer margins: the parent's gap spaces them. */
:is(s-page, s-section, s-stack, s-box, s-grid, s-banner) > * {
  min-inline-size: 0;
}

:is(s-page, s-section, s-stack, s-box, s-grid, s-banner) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, form, figure, pre, details, blockquote) {
  margin-block: 0;
}

/* Inline-level controls keep their own width in block (column) layouts instead of stretching. */
:is(s-page, s-section, s-stack, s-box, s-banner) > :is(s-button, s-badge, s-link) {
  align-self: flex-start;
}

s-stack[direction="inline"] > :is(s-button, s-badge, s-link) {
  align-self: auto;
}

/* Without alignItems an inline row stretches its items: a button beside a labelled field would
   grow to label + input height. Sit it on the row's bottom edge (the input) instead. */
s-stack[direction="inline"]:not([alignitems]) > :is(s-button, s-badge) {
  align-self: end;
}

/* Bare native buttons that page code puts straight into layout hosts (no class, no inline
   style: e.g. "Hold for manager review", EasyPost settings) get the secondary s-button look
   instead of stretching across a column as a thin browser-default bar. */
:is(s-page, s-section, s-stack, s-box, s-banner, s-table-cell) > button:not([class], [style]) {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--ui-control-height);
  padding: 6px 14px;
  border: var(--ui-border-width) solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: inherit;
  font-weight: var(--ui-weight-strong);
  line-height: 1.25;
  cursor: pointer;
  transition: background-color var(--ui-duration) ease, border-color var(--ui-duration) ease;
}

:is(s-page, s-section, s-stack, s-box, s-banner, s-table-cell) > button:not([class], [style]):hover:not(:disabled) {
  background: var(--ui-subdued);
  border-color: var(--ui-muted);
}

:is(s-page, s-section, s-stack, s-box, s-banner, s-table-cell) > button:not([class], [style]):focus-visible {
  outline: 2px solid var(--ui-focus-color);
  outline-offset: 2px;
}

:is(s-page, s-section, s-stack, s-box, s-banner, s-table-cell) > button:not([class], [style]):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

s-stack[direction="inline"] > button:not([class], [style]) {
  align-self: auto;
}

s-grid > :is(s-button, s-badge, s-link) {
  justify-self: start;
}

:is(s-page, s-section, s-stack, s-box, s-grid, s-banner) > :is(s-button, s-badge) {
  min-inline-size: auto;
}

/* ======================================================================= s-page */

s-page {
  display: flex;
  flex-direction: column;
  gap: var(--ui-page-gap);
  inline-size: 100%;
  max-inline-size: calc(var(--ui-page-max) + 2 * var(--ui-page-pad));
  margin-inline: auto;
  padding: var(--ui-page-pad);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  line-height: var(--ui-line-height);
  container-type: inline-size;
  container-name: s-default;
}

s-page[inlinesize="large"] {
  max-inline-size: calc(var(--ui-page-max-large) + 2 * var(--ui-page-pad));
}

s-page[inlinesize="small"] {
  max-inline-size: calc(640px + 2 * var(--ui-page-pad));
}

/* A form that wraps several sections (orders/new) sits between the page and its cards, so the
   page gap does not reach them: give it the same column and gap. */
s-page > form:has(> s-section) {
  display: flex;
  flex-direction: column;
  gap: var(--ui-page-gap);
}

s-page > form:has(> s-section) > :is(s-button, s-badge, s-link) {
  align-self: flex-start;
}

/* Upgraded, the heading is a shadow <h1> followed by the slot (both flex items of the host). */
s-page:not(:defined)[heading]::before {
  content: attr(heading);
  display: block;
  margin: 0;
  font-size: 24px;
  font-weight: var(--ui-weight-strong);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ======================================================================= s-section */

s-section {
  display: flex;
  flex-direction: column;
  gap: var(--ui-section-gap);
  padding: var(--ui-section-pad);
  background: var(--ui-surface);
  border: var(--ui-border-width) solid var(--ui-line);
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow-card);
  scroll-margin-block-start: 16px;
  container-type: inline-size;
  container-name: s-default;
}

/* A section inside a section is a plain group: heading and content, no card. */
s-section s-section {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Page code focuses a section (tabindex=-1) after a jump link: keep that quiet. */
s-section:focus {
  outline: none;
}

s-section:focus-visible {
  outline: 2px solid var(--ui-focus-color);
  outline-offset: 2px;
}

s-section:not(:defined)[heading]::before {
  content: attr(heading);
  display: block;
  font-size: 16px;
  font-weight: var(--ui-weight-strong);
  line-height: 1.35;
}

/* ======================================================================= s-stack */

s-stack {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

s-stack[direction="inline"] {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Fields in an inline row share the width and wrap on narrow screens. */
s-stack[direction="inline"] > :is(s-text-field, s-number-field, s-email-field, s-url-field, s-date-field, s-text-area, s-select, s-drop-zone) {
  flex: 1 1 12rem;
}

/* ======================================================================= s-box */

s-box {
  display: block;
}

s-box[background="base"] {
  background: var(--ui-surface);
}

s-box[background="subdued"] {
  background: var(--ui-subdued);
}

s-box[background="strong"] {
  background: var(--ui-neutral-bg);
}

s-box:is([border]:not([border="none"]), [borderwidth]:not([borderwidth="none"])) {
  border: var(--ui-border-width) solid var(--ui-line);
}

s-box[borderradius="small"] {
  border-radius: var(--ui-radius-small);
}

s-box[borderradius="base"] {
  border-radius: var(--ui-radius-base);
}

s-box[borderradius="large"] {
  border-radius: var(--ui-radius-card);
}

s-box[borderradius="max"] {
  border-radius: var(--ui-radius-full);
}

/* ======================================================================= s-grid */

s-grid {
  display: grid;
}

/* Upgraded, the element sets columns (it parses the @container gridtemplatecolumns value);
   until then a single shrinkable column. Never set columns here for :defined grids. */
s-grid:not(:defined) {
  grid-template-columns: minmax(0, 1fr);
}

/* ======================================================================= gap, padding, alignment (stack, grid, box) */

:is(s-stack, s-grid)[gap="none"] { gap: var(--ui-space-none); }
:is(s-stack, s-grid)[gap="small-500"] { gap: var(--ui-space-small-500); }
:is(s-stack, s-grid)[gap="small-400"] { gap: var(--ui-space-small-400); }
:is(s-stack, s-grid)[gap="small-300"] { gap: var(--ui-space-small-300); }
:is(s-stack, s-grid)[gap="small-200"] { gap: var(--ui-space-small-200); }
:is(s-stack, s-grid)[gap="small-100"] { gap: var(--ui-space-small-100); }
:is(s-stack, s-grid)[gap="small"] { gap: var(--ui-space-small); }
:is(s-stack, s-grid)[gap="base"] { gap: var(--ui-space-base); }
:is(s-stack, s-grid)[gap="large"] { gap: var(--ui-space-large); }
:is(s-stack, s-grid)[gap="large-100"] { gap: var(--ui-space-large-100); }
:is(s-stack, s-grid)[gap="large-200"] { gap: var(--ui-space-large-200); }
:is(s-stack, s-grid)[gap="large-300"] { gap: var(--ui-space-large-300); }
:is(s-stack, s-grid)[gap="large-400"] { gap: var(--ui-space-large-400); }
:is(s-stack, s-grid)[gap="large-500"] { gap: var(--ui-space-large-500); }

:is(s-stack, s-grid, s-box)[padding="none"] { padding: var(--ui-space-none); }
:is(s-stack, s-grid, s-box)[padding="small-500"] { padding: var(--ui-space-small-500); }
:is(s-stack, s-grid, s-box)[padding="small-400"] { padding: var(--ui-space-small-400); }
:is(s-stack, s-grid, s-box)[padding="small-300"] { padding: var(--ui-space-small-300); }
:is(s-stack, s-grid, s-box)[padding="small-200"] { padding: var(--ui-space-small-200); }
:is(s-stack, s-grid, s-box)[padding="small-100"] { padding: var(--ui-space-small-100); }
:is(s-stack, s-grid, s-box)[padding="small"] { padding: var(--ui-space-small); }
:is(s-stack, s-grid, s-box)[padding="base"] { padding: var(--ui-space-base); }
:is(s-stack, s-grid, s-box)[padding="large"] { padding: var(--ui-space-large); }
:is(s-stack, s-grid, s-box)[padding="large-100"] { padding: var(--ui-space-large-100); }
:is(s-stack, s-grid, s-box)[padding="large-200"] { padding: var(--ui-space-large-200); }
:is(s-stack, s-grid, s-box)[padding="large-300"] { padding: var(--ui-space-large-300); }
:is(s-stack, s-grid, s-box)[padding="large-400"] { padding: var(--ui-space-large-400); }
:is(s-stack, s-grid, s-box)[padding="large-500"] { padding: var(--ui-space-large-500); }

:is(s-stack, s-grid)[alignitems="start"] { align-items: start; }
:is(s-stack, s-grid)[alignitems="center"] { align-items: center; }
:is(s-stack, s-grid)[alignitems="end"] { align-items: end; }
:is(s-stack, s-grid)[alignitems="baseline"] { align-items: baseline; }
:is(s-stack, s-grid)[alignitems="stretch"] { align-items: stretch; }

:is(s-stack, s-grid)[justifycontent="start"] { justify-content: start; }
:is(s-stack, s-grid)[justifycontent="center"] { justify-content: center; }
:is(s-stack, s-grid)[justifycontent="end"] { justify-content: end; }
:is(s-stack, s-grid)[justifycontent="space-between"] { justify-content: space-between; }
:is(s-stack, s-grid)[justifycontent="space-around"] { justify-content: space-around; }
:is(s-stack, s-grid)[justifycontent="space-evenly"] { justify-content: space-evenly; }

s-grid[justifyitems="start"] { justify-items: start; }
s-grid[justifyitems="center"] { justify-items: center; }
s-grid[justifyitems="end"] { justify-items: end; }

/* ======================================================================= text */

s-text {
  display: inline;
}

s-paragraph {
  display: block;
  margin: 0;
}

:is(s-text, s-paragraph)[color="subdued"] {
  color: var(--ui-muted);
}

:is(s-text, s-paragraph)[type="strong"] {
  font-weight: var(--ui-weight-strong);
}

:is(s-text, s-paragraph)[tone="critical"] { color: var(--ui-critical); }
:is(s-text, s-paragraph)[tone="warning"] { color: var(--ui-warning); }
:is(s-text, s-paragraph)[tone="success"] { color: var(--ui-success); }
:is(s-text, s-paragraph)[tone="info"] { color: var(--ui-info); }

s-heading {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: var(--ui-weight-strong);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* ======================================================================= lists */

s-unordered-list,
s-ordered-list {
  display: block;
  margin: 0;
  padding-inline-start: 1.25em;
}

s-unordered-list {
  list-style: disc outside;
}

s-ordered-list {
  list-style: decimal outside;
}

s-list-item {
  display: list-item;
}

s-list-item + s-list-item {
  margin-block-start: var(--ui-space-small-300);
}

s-list-item::marker {
  color: var(--ui-muted);
}

/* ======================================================================= s-link */

/* Visuals live on the host. A shadow <a> must set color: inherit and text-decoration: none
   (decoration propagates from the host; a second UA underline would double it). */
s-link {
  display: inline;
  color: var(--ui-ink);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ui-line-strong);
  cursor: pointer;
  transition: text-decoration-color var(--ui-duration) ease;
}

s-link:hover {
  text-decoration-color: var(--ui-amber);
}

:is(s-banner, s-paragraph[tone="critical"], s-text[tone="critical"]) s-link {
  color: inherit;
}

/* ======================================================================= s-badge */

s-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-inline-size: 100%;
  padding: 1px 8px;
  border: var(--ui-border-width) solid var(--ui-neutral-border);
  border-radius: var(--ui-radius-full);
  background: var(--ui-neutral-bg);
  color: var(--ui-neutral);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}

s-badge[tone="success"] { background: var(--ui-success-bg); border-color: var(--ui-success-border); color: var(--ui-success); }
s-badge[tone="warning"] { background: var(--ui-warning-bg); border-color: var(--ui-warning-border); color: var(--ui-warning); }
s-badge[tone="critical"] { background: var(--ui-critical-bg); border-color: var(--ui-critical-border); color: var(--ui-critical); }
s-badge[tone="info"] { background: var(--ui-info-bg); border-color: var(--ui-info-border); color: var(--ui-info); }
s-badge[tone="caution"] { background: var(--ui-amber-soft); border-color: var(--ui-warning-border); color: var(--ui-amber-ink); }

/* ======================================================================= s-banner */

/* The tinted box is the host in both states. Upgraded, the shadow lays out icon + heading +
   slotted body; before that, a flex column with the heading from attr(). */
s-banner {
  display: block;
  padding: 12px 14px;
  border: var(--ui-border-width) solid var(--ui-info-border);
  border-radius: var(--ui-radius-base);
  background: var(--ui-info-bg);
  color: var(--ui-ink);
}

s-banner[tone="critical"] { background: var(--ui-critical-bg); border-color: var(--ui-critical-border); }
s-banner[tone="warning"] { background: var(--ui-warning-bg); border-color: var(--ui-warning-border); }
s-banner[tone="success"] { background: var(--ui-success-bg); border-color: var(--ui-success-border); }
s-banner[tone="info"],
s-banner[tone="auto"] { background: var(--ui-info-bg); border-color: var(--ui-info-border); }
s-banner[tone="neutral"] { background: var(--ui-subdued); border-color: var(--ui-line); }

s-banner:not(:defined) {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-small);
}

s-banner:not(:defined)[heading]::before {
  content: attr(heading);
  display: block;
  font-weight: var(--ui-weight-strong);
}

/* ======================================================================= s-button */

/* Upgraded, the shadow renders the button (an inner native <button>/<a>); the host only sets
   the inline-level box. Before that, a look-alike so the page does not jump. */
s-button {
  display: inline-flex;
  vertical-align: middle;
  max-inline-size: 100%;
}

s-button:not(:defined) {
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: var(--ui-control-height);
  padding: 0 14px;
  border: var(--ui-border-width) solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  font-weight: var(--ui-weight-strong);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

s-button:not(:defined)[variant="primary"] {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: var(--ui-primary-ink);
}

s-button:not(:defined)[variant="tertiary"] {
  border-color: transparent;
  background: transparent;
}

s-button:not(:defined)[tone="critical"] {
  border-color: var(--ui-critical);
  color: var(--ui-critical);
}

s-button:not(:defined)[tone="critical"][variant="primary"] {
  background: var(--ui-critical);
  color: var(--ui-on-critical);
}

s-button:not(:defined)[tone="critical"][variant="tertiary"] {
  border-color: transparent;
}

s-button:not(:defined):is([disabled]:not([disabled="false"]), [loading]:not([loading="false"])) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ======================================================================= s-modal */

/* Never display:none once defined: the shadow <dialog> must be able to render in the top layer.
   Before the definition, the modal's server-rendered content stays hidden. */
s-modal {
  display: contents;
}

s-modal:not(:defined) {
  display: none;
}

/* ======================================================================= fields */

s-text-field,
s-number-field,
s-email-field,
s-url-field,
s-date-field,
s-text-area,
s-select,
s-drop-zone {
  display: block;
}

s-checkbox {
  display: block;
}

/* s-select renders its own options in the shadow root; the light-DOM s-option elements never show. */
s-option {
  display: none;
}

/* Pre-upgrade look-alike: label above an empty control showing the value attribute. */
:is(s-text-field, s-number-field, s-email-field, s-url-field, s-date-field, s-text-area, s-select):not(:defined) {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-small-200);
}

:is(s-text-field, s-number-field, s-email-field, s-url-field, s-date-field, s-text-area, s-select):not(:defined)::before {
  content: attr(label);
  font-size: var(--ui-font-size-label);
  font-weight: var(--ui-weight-strong);
  line-height: 1.3;
}

:is(s-text-field, s-number-field, s-email-field, s-url-field, s-date-field, s-text-area, s-select):not(:defined)::after {
  content: "";
  display: block;
  block-size: var(--ui-field-height);
  padding: 0 12px;
  border: var(--ui-border-width) solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-field-bg);
  line-height: calc(var(--ui-field-height) - 2px);
  overflow: hidden;
  white-space: nowrap;
}

:is(s-text-field, s-number-field, s-email-field, s-url-field, s-date-field):not(:defined)[value]::after {
  content: attr(value);
}

s-text-area:not(:defined)::after {
  block-size: 96px;
}

s-checkbox:not(:defined) {
  display: flex;
  align-items: center;
  gap: var(--ui-space-small);
  min-block-size: 24px;
}

s-checkbox:not(:defined)::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border: 1.5px solid var(--ui-line-strong);
  border-radius: 5px;
  background: var(--ui-surface);
}

s-checkbox:not(:defined)[checked]:not([checked="false"])::before {
  border-color: var(--ui-ink);
  background: var(--ui-ink);
}

s-checkbox:not(:defined)::after {
  content: attr(label);
}

s-drop-zone:not(:defined) {
  padding: 20px;
  border: 1.5px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius-base);
  background: var(--ui-subdued);
  color: var(--ui-muted);
  text-align: center;
}

s-drop-zone:not(:defined)::before {
  content: attr(label);
  font-weight: var(--ui-weight-strong);
  color: var(--ui-ink);
}

/* ======================================================================= tables */

/* Upgraded, s-table is a horizontal scroll box whose shadow root holds one display:table
   element (width 100%) around the slot; slotted rows/cells join that table. Before that the
   host itself is the table. */
s-table {
  display: block;
  inline-size: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

s-table:not(:defined) {
  display: table;
}

/* Chrome makes an overflowing scroll box with no focusable content keyboard-focusable (arrow
   keys scroll it); give it the Maverick ring instead of the UA outline. */
s-table:focus-visible {
  outline: 2px solid var(--ui-focus-color);
  outline-offset: 2px;
}

s-table-header-row {
  display: table-header-group;
}

s-table-body {
  display: table-row-group;
}

s-table-row {
  display: table-row;
}

s-table-header,
s-table-cell {
  display: table-cell;
  padding: 10px 12px;
  text-align: start;
  /* break-word, not anywhere: "anywhere" lowers min-content, so auto table layout split
     words like "#1001" across lines. Whole words widen their column; s-table scrolls. */
  overflow-wrap: break-word;
}

s-table-header {
  vertical-align: bottom;
  border-block-end: var(--ui-border-width) solid var(--ui-line);
  background: var(--ui-subdued);
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: var(--ui-weight-strong);
  line-height: 1.35;
  letter-spacing: 0.02em;
  overflow-wrap: normal;
}

s-table-cell {
  vertical-align: top;
  /* Buttons keep their label on one line; a table too wide for its card scrolls instead. */
  --ui-button-wrap: nowrap;
  border-block-start: var(--ui-border-width) solid var(--ui-line);
}

s-table-body > s-table-row:first-child > s-table-cell {
  border-block-start: 0;
}

s-table-body > s-table-row:hover > s-table-cell {
  background: var(--ui-subdued);
}

/* ======================================================================= print */

@media print {
  s-page {
    max-inline-size: none;
    padding: 0;
  }

  :is(s-section, s-box, s-banner, s-badge) {
    box-shadow: none;
  }

  /* No break-inside on sections: a section taller than a page would jump whole to page 2 and
     leave page 1 nearly blank. Rows stay whole instead. */
  s-section {
    background: #fff;
  }

  s-table-row {
    break-inside: avoid;
  }

  s-table {
    overflow: visible;
  }

  s-table-body > s-table-row:hover > s-table-cell {
    background: none;
  }
}