/* Need A US Address console - shared application styles.

   Existing styles still consume the vendored Web Awesome reset and tokens.
   This is a migration dependency, not a requirement for new UI. DESIGN.md
   owns the design contract: shared templ primitives, owned semantic tokens,
   and reusable CSS. Replace compatibility styles in tested component slices. */

/* anchor: ABE rail and raised surfaces + Stripe-data; adapted to a package
   counter with larger controls and the existing navy identity. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--naua-canvas); }
body {
  margin: 0;
  color: var(--naua-text);
  font-family: var(--naua-font);
  font-size: var(--naua-type-body);
  line-height: var(--naua-leading);
  font-variant-numeric: tabular-nums;
}
.appbar__title, .page-title, .section-title, .brandrow__name { margin: 0; }
.stack { display: flex; flex-direction: column; gap: var(--naua-space-6); }
.stack--tight { gap: var(--naua-space-2); }
.icon {
  display: inline-block;
  flex: none;
  inline-size: var(--naua-icon-size);
  block-size: var(--naua-icon-size);
  background: currentColor;
  mask: var(--icon-url) center / contain no-repeat;
}
.skip-link {
  position: fixed;
  inset-block-start: var(--naua-space-2);
  inset-inline-start: var(--naua-space-2);
  z-index: 100;
  transform: translateY(-200%);
  padding: var(--naua-space-3) var(--naua-space-4);
  background: var(--naua-surface);
  color: var(--naua-text);
}
.skip-link:focus { transform: none; }

/* Native shell. One rail, one content gutter, one shared width ceiling. */
.app-shell { display: grid; grid-template-columns: var(--naua-rail-width) minmax(0, 1fr); min-height: 100dvh; }
.app-workspace { min-width: 0; }
.app-workspace > main { padding: var(--naua-space-8); }
.content { width: 100%; max-width: var(--naua-shell-max); margin-inline: auto; }
.appbar {
  min-height: var(--naua-header-height);
  padding: var(--naua-space-3) var(--naua-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--naua-space-4);
  border-bottom: var(--naua-line) solid var(--naua-border);
  background: var(--naua-surface);
}
.appbar__title {
  font-size: var(--naua-type-title);
  font-weight: var(--naua-weight-strong);
  text-align: start;
  min-width: 0;
}
.appbar > .menu { margin-inline-start: auto; }
.shell-nav {
  position: sticky;
  top: 0;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: var(--naua-nav-surface);
  color: var(--naua-nav-text);
  /* Native controls and any future children inherit the rail's own family. */
  color-scheme: dark;
}
.shell-nav__body { display: flex; flex-direction: column; height: 100dvh; }
.shell-brand {
  display: flex;
  align-items: center;
  gap: var(--naua-space-3);
  min-height: var(--naua-header-height);
  padding: var(--naua-space-4) var(--naua-space-6);
  font-size: var(--naua-type-support);
  font-weight: var(--naua-weight-strong);
  color: var(--naua-nav-text);
  text-decoration: none;
  border-bottom: var(--naua-line) solid var(--naua-nav-border);
}
.shell-brand .brandmark { inline-size: var(--naua-mark-size); block-size: var(--naua-mark-size); }
.counter-console .shell-nav .nav {
  display: flex;
  flex-direction: column;
  gap: var(--naua-space-2);
  flex: 1;
  overflow-y: auto;
  padding: var(--naua-space-6) var(--naua-space-3);
}
.counter-console .shell-nav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--naua-space-3);
  min-height: var(--naua-control-height);
  padding: var(--naua-space-3);
  font-size: var(--naua-type-body);
  font-weight: var(--naua-weight-normal);
  line-height: var(--naua-leading);
  border-radius: var(--naua-radius);
  color: var(--naua-nav-muted);
  text-decoration: none;
}
.shell-nav .nav-link .icon { color: inherit; }
.counter-console .shell-nav .nav-link:hover { background: var(--naua-nav-hover); color: var(--naua-nav-text); }
.counter-console .shell-nav .nav-link[aria-current="page"] {
  background: var(--naua-nav-active);
  color: var(--naua-nav-text);
  font-weight: var(--naua-weight-strong);
}
.shell-nav .nav-more { margin-top: var(--naua-space-6); border: 0; border-top: var(--naua-line) solid var(--naua-nav-border); padding: 0; background: transparent; }
.shell-nav .nav-more > summary { padding: var(--naua-space-4) var(--naua-space-3); font-size: var(--naua-type-support); color: var(--naua-nav-muted); }
.shell-nav .nav-reporting { margin-top: var(--naua-space-4); }
.shell-nav .nav-reporting h2 { padding: var(--naua-space-3); margin: 0; font-size: var(--naua-type-support); font-weight: var(--naua-weight-normal); color: var(--naua-nav-muted); }
.shell-nav__account { border-top: var(--naua-line) solid var(--naua-nav-border); padding: var(--naua-space-3); }
.counter-console .shell-nav :is(a, button, summary):focus-visible { outline: var(--naua-focus-width) solid var(--naua-nav-focus); outline-offset: var(--naua-space-1); }
.nav-toggle { margin: 0; justify-content: flex-start; display: flex; align-items: center; gap: var(--naua-space-3); min-height: var(--naua-control-height); padding: var(--naua-space-4); cursor: pointer; }
.shell-nav[open] > .nav-toggle { display: none; }

/* Shared native menu. Account operations keep a normal POST form. */
.menu { position: relative; border: 0; padding: 0; margin: 0; background: transparent; }
.menu > summary, .nav-toggle { list-style: none; }
.menu > summary::-webkit-details-marker, .nav-toggle::-webkit-details-marker { display: none; }
.menu > summary { cursor: pointer; margin: 0; }
.menu > summary::after, .nav-toggle::after { display: none; }
.menu__panel {
  position: absolute;
  z-index: 30;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--naua-space-2));
  min-width: var(--naua-menu-width);
  max-width: calc(100vw - var(--naua-space-8));
  padding: var(--naua-space-2);
  border: var(--naua-line) solid var(--naua-border);
  border-radius: var(--naua-radius);
  background: var(--naua-surface-raised);
  color: var(--naua-text);
  box-shadow: var(--naua-shadow-popover);
}
.menu__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--naua-space-3);
  width: 100%;
  min-height: var(--naua-control-height);
  padding: var(--naua-space-3);
  font: inherit;
  text-align: start;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--naua-radius);
  cursor: pointer;
}
.menu__item:hover { background: var(--naua-surface-hover); }
.menu__item[aria-pressed="true"] { background: var(--naua-action-surface); color: var(--naua-action); font-weight: var(--naua-weight-strong); }
.menu__item[aria-pressed="true"]::after { content: "✓"; margin-inline-start: auto; }
.menu__label { padding: var(--naua-space-3); margin: 0; overflow-wrap: anywhere; font-size: var(--naua-type-support); color: var(--naua-text-muted); }
.account-trigger { display: flex; align-items: center; gap: var(--naua-space-3); min-height: var(--naua-control-height); padding: var(--naua-space-2); color: var(--naua-nav-text); }
.account-trigger__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--naua-type-support); }
.avatar { display: grid; place-items: center; flex: none; inline-size: var(--naua-space-8); block-size: var(--naua-space-8); border-radius: var(--naua-radius); background: var(--naua-nav-active); color: var(--naua-nav-text); font-size: var(--naua-type-support); font-weight: var(--naua-weight-strong); }
.menu--account .menu__panel {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--naua-space-3));
  inset-inline: 0;
  background: var(--naua-nav-hover);
  color: var(--naua-nav-text);
  border-color: var(--naua-nav-border);
}
.menu--account .menu__label { color: var(--naua-nav-muted); }
.menu--account .menu__item:hover { background: var(--naua-nav-active); }

/* Existing authentication documents reuse the brand row. */
.brandrow { display: flex; align-items: center; gap: var(--naua-space-3); padding: var(--naua-space-3) var(--naua-space-4); }
.brandrow--flush { padding: 0; }
.brandmark { flex: none; width: var(--naua-mark-size); height: var(--naua-mark-size); object-fit: contain; }
.brandrow__name { font-size: var(--naua-type-title); font-weight: var(--naua-weight-strong); }

.notice { padding: var(--naua-space-4); border: var(--naua-line) solid var(--naua-success-border); border-radius: var(--naua-radius); background: var(--naua-success-surface); color: var(--naua-success-text); }
.notice--danger { border-color: var(--naua-danger-border); background: var(--naua-danger-surface); color: var(--naua-danger-text); }

@media (max-width: 48rem) {
  .app-shell { display: block; }
  .shell-nav { position: relative; height: auto; }
  .shell-nav[open] > .nav-toggle { margin: 0; justify-content: flex-start; display: flex; }
  .shell-nav__body { height: auto; max-height: 80dvh; }
  .shell-brand { display: none; }
  .counter-console .shell-nav .nav { padding-top: 0; }
  .menu--account .menu__panel { inset-inline-start: auto; width: var(--naua-menu-width); }
  .app-workspace > main { padding: var(--naua-space-6) var(--naua-space-4); }
  .appbar { padding-inline: var(--naua-space-4); min-height: var(--naua-space-16); }
}

/* ------------------------------------------------------------------ panels */

/* The workhorse surface: a bordered card whose body can hold a flush,
   edge-to-edge table. Used for every index and detail section. */
.panel {
  box-shadow: var(--naua-shadow-panel);
  background-color: var(--wa-color-surface-default);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  overflow: hidden;
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
  padding: var(--wa-space-m) var(--wa-space-l);
}
.panel--divided .panel__head {
  border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.panel__body {
  padding: var(--wa-space-l);
}

wa-card { box-shadow: var(--naua-shadow-panel); }

.section-title {
  font-size: var(--wa-font-size-m);
  font-weight: var(--wa-font-weight-semibold);
  line-height: 1.3;
}
.section-sub {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
}

/* --------------------------------------------------------------- data table */

.table-wrap {
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  padding: var(--wa-space-xs) var(--wa-space-l);
  text-align: start;
  font-size: var(--wa-font-size-2xs);
  font-weight: var(--wa-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wa-color-text-quiet);
  background-color: var(--wa-color-surface-raised);
  border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  white-space: nowrap;
}
.data-table tbody td {
  padding: var(--wa-space-xs) var(--wa-space-l);
  vertical-align: middle;
  border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.data-table tbody tr:first-child td {
  border-top: none;
}
.data-table.zebra tbody tr:nth-child(even) td {
  background-color: color-mix(in oklab, var(--wa-color-surface-lowered) 55%, transparent);
}
.data-table tbody tr:hover td {
  background-color: var(--wa-color-neutral-fill-quiet);
}
/* Plain tables (opening hours, pricing) sit inside a padded card body, so drop
   the side padding and the raised header band and let them read flush. */
.data-table--plain thead th,
.data-table--plain tbody td {
  padding-inline: 0;
}
.data-table--plain thead th {
  background-color: transparent;
}

.sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-3xs);
  color: inherit;
  text-decoration: none;
}
.sort-link:hover {
  color: var(--wa-color-text-link);
}
.sort-link span {
  color: var(--wa-color-text-link);
  font-size: var(--wa-font-size-2xs);
  text-transform: none;
}
.customer-grid {
  width: 100%;
  --row-height: 2.75rem;
  --max-height: calc(100vh - 16rem);
}
/* The customers list ships both views. data-grid="off" is the no-JS state (the
   server-rendered table); customersGridScript flips it to "on", which hands the
   panel to the data grid and drops the Search button - typing filters. */
#customers-list { position: relative; }
.customers-grid-wrap { padding: 0; }
#customers-list[data-grid="loading"] .customers-grid-wrap {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  visibility: hidden;
}
#customers-list[data-grid="off"] .customers-grid-wrap {
  display: none;
}
#customers-list[data-grid="on"] .customers-fallback,
#customers-list[data-grid="on"] .search__go {
  display: none;
}

.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mono {
  font-family: var(--wa-font-family-code);
  font-size: var(--wa-font-size-xs);
}
.muted {
  color: var(--wa-color-text-quiet);
}
.xsmall {
  font-size: var(--wa-font-size-xs);
}
.nowrap {
  white-space: nowrap;
}
.truncate {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Cap the tracking-number column so a long carrier barcode ellipsizes instead
   of stretching the table past its container. The full value stays in the
   cell's title tooltip. */
.col-tracking {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Branded link, for names and IDs that navigate to a detail page. */
.link {
  color: var(--wa-color-text-link);
  text-decoration: none;
  font-weight: var(--wa-font-weight-medium);
}
.link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------- stats */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-3xs);
}
.stat__label {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat__value {
  font-size: var(--wa-font-size-2xl);
  font-weight: var(--wa-font-weight-semibold);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.stat__desc {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
}

/* Customer detail summary: bolder record facts before the dense field cards. */
.record-strip {
  --min-column-size: 12rem;
}
.record-fact {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  padding: var(--wa-space-m);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  background-color: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
}
.record-fact wa-icon {
  flex: none;
  font-size: var(--wa-font-size-l);
  color: var(--wa-color-text-link);
}
.record-fact__label {
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-quiet);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.record-fact strong {
  font-size: var(--wa-font-size-l);
  line-height: 1.1;
}

/* Definition grid for the detail cards. */
.field-list {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: var(--wa-space-2xs) var(--wa-space-m);
  margin: 0;
  font-size: var(--wa-font-size-s);
}
.field-list dt {
  color: var(--wa-color-text-quiet);
}
.field-list dd {
  margin: 0;
  font-weight: var(--wa-font-weight-medium);
}

/* Row list (mailboxes, oldest-in-store). */
.row-list {
  display: flex;
  flex-direction: column;
}
.row-list__item {
  display: flex;
  align-items: center;
  gap: var(--wa-space-m);
  padding: var(--wa-space-xs) 0;
  border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.row-list__item:first-child {
  border-top: none;
}
.row-list__grow {
  flex: 1;
  min-width: 0;
}

/* Package activity timeline: an icon gutter beside each note/contact entry. */
.timeline__item {
  align-items: flex-start;
}
.timeline__icon {
  margin-top: 0.15rem;
  color: var(--wa-color-text-quiet);
  flex: none;
}
.timeline__body {
  margin: var(--wa-space-3xs) 0;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.latefee-total {
  display: inline-flex;
}

/* ------------------------------------------------------------------ layout */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wa-space-m);
}
.page-title {
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-semibold);
  line-height: 1.2;
}

.grid {
  display: grid;
  gap: var(--wa-space-l);
}
/* Let grid cells shrink below the intrinsic width of a chart or table so a wide
   child scrolls inside its cell instead of overflowing the page. */
.grid > * {
  min-width: 0;
}
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
@media (min-width: 64rem) {
  /* Keep the dashboard's four summary cards on the same four-column rhythm as
     the desktop shell. */
  .grid--stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid--split {
    grid-template-columns: 2fr 1fr;
  }
  .grid--halves {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------------- buttons */

/* Native buttons and link-buttons share three owned tiers. Native so search,
   filters, and pagination keep working with JavaScript disabled. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--naua-space-2);
  padding: var(--naua-space-2) var(--naua-space-4);
  border: var(--naua-line) solid var(--naua-border);
  border-radius: var(--naua-radius);
  background-color: var(--naua-surface);
  color: var(--naua-text);
  font: inherit;
  font-weight: var(--naua-weight-strong);
  line-height: 1.4;
  box-shadow: var(--naua-shadow-control);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  background-color: var(--naua-surface-hover);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.btn--brand {
  background-color: var(--naua-action);
  border-color: var(--naua-action);
  color: var(--naua-action-text);
}
.btn--brand:hover {
  background-color: var(--naua-action-hover);
  border-color: var(--naua-action-hover);
  color: var(--naua-action-text);
}
.btn--ghost {
  box-shadow: none;
  border-color: transparent;
  background-color: transparent;
}
.btn--danger {
  border-color: var(--naua-danger-border);
  color: var(--naua-danger-text);
}
.btn--danger:hover {
  background-color: var(--naua-danger-surface);
}
.btn--sm {
  min-height: 1.5rem;
  padding: var(--wa-space-3xs) var(--wa-space-s);
  font-size: var(--wa-font-size-xs);
}
.btn--icon {
  padding: var(--naua-space-2);
}

/* Segmented control for the package status filter. */
.segmented {
  display: inline-flex;
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-s);
  overflow: hidden;
}
.segmented a {
  padding: var(--wa-space-3xs) var(--wa-space-s);
  color: var(--wa-color-text-quiet);
  text-decoration: none;
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-medium);
  border-inline-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-normal);
}
.segmented a:first-child {
  border-inline-start: none;
}
.segmented a:hover {
  background-color: var(--wa-color-neutral-fill-quiet);
}
.segmented a[aria-current="page"] {
  background-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

/* ------------------------------------------------------------------ forms */

.search {
  display: flex;
  gap: var(--wa-space-2xs);
}
.field {
  display: flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  padding-inline: var(--wa-space-s);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-s);
  background-color: var(--wa-color-surface-default);
}
.field:focus-within {
  border-color: var(--wa-color-brand-border-loud);
  outline: var(--wa-border-width-m) solid var(--wa-color-brand-fill-quiet);
}
.field wa-icon {
  color: var(--wa-color-text-quiet);
  flex: none;
}
.field input {
  border: none;
  background: transparent;
  padding: var(--wa-space-2xs) 0;
  color: inherit;
  font: inherit;
  outline: none;
  width: 100%;
}
/* WA's native labels add a top margin and its inputs carry their own height.
   A composite field owns the box; its control must sit centrally inside it. */
.field :is(input, select) {
  margin: 0;
  height: auto;
  min-inline-size: 0;
  align-self: stretch;
}
.field--search {
  width: min(22rem, 60vw);
}
/* Native select dressed as a field so the store filter matches the search box. */
.field--select {
  padding-inline-end: var(--wa-space-2xs);
}
.field--select select {
  border: none;
  background: transparent;
  padding-block: var(--wa-space-2xs);
  padding-inline-start: 0;
  color: inherit;
  font: inherit;
  outline: none;
  cursor: pointer;
}

/* Standalone labelled field for the login form. */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs);
}
/* Label spacing belongs to the stack, never to an inherited input margin. */
.form-field > :is(input, select, textarea) {
  margin: 0;
}
.form-field > span {
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-medium);
  color: var(--wa-color-text-quiet);
}
.form-field input {
  padding: var(--wa-space-xs) var(--wa-space-s);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-s);
  background-color: var(--wa-color-surface-default);
  color: inherit;
  font: inherit;
}
.form-field select {
  /* Full width so a long option (e.g. "Customer's primary store") gets the
     whole field, and extra end padding so the native dropdown arrow never
     overlaps the selected text. */
  width: 100%;
  padding: var(--wa-space-xs) var(--wa-space-xl) var(--wa-space-xs) var(--wa-space-s);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-s);
  background-color: var(--wa-color-surface-default);
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
}
.form-field input:focus-visible {
  border-color: var(--wa-color-brand-border-loud);
  outline: var(--wa-border-width-m) solid var(--wa-color-brand-fill-quiet);
}
.form-field select:focus-visible {
  border-color: var(--wa-color-brand-border-loud);
  outline: var(--wa-border-width-m) solid var(--wa-color-brand-fill-quiet);
}

.user-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--wa-space-s);
  align-items: end;
}
.user-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--naua-space-2);
}
/* A keyboard-shortcut hint chip, e.g. the "E" on the customer edit button. */
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  padding: 0 var(--wa-space-3xs);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-normal);
  border-bottom-width: var(--wa-border-width-m);
  border-radius: var(--wa-border-radius-s);
  background-color: var(--wa-color-surface-raised);
  color: var(--wa-color-text-quiet);
  font-family: var(--wa-font-family-code);
  font-size: var(--wa-font-size-2xs);
  line-height: 1.4;
}

/* Inline customer record editor: a <details> disclosure whose summary reads as
   a toolbar row and whose open panel holds the edit form. */
.customer-edit__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-l);
  cursor: pointer;
  list-style: none;
}
.customer-edit__summary::-webkit-details-marker,
.customer-edit__summary::marker {
  display: none;
  content: "";
}
.customer-edit[open] .customer-edit__summary {
  border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.customer-edit__form {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
  padding: var(--wa-space-l);
}

.user-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wa-space-xs);
  margin-block-end: var(--wa-space-s);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
}
.user-row-meta strong {
  color: var(--wa-color-text-normal);
  font-size: var(--wa-font-size-s);
}

/* User logins: one distinct <details> entry per account. The summary is the
   at-a-glance identity row; the edit form opens beneath on demand so the page
   is not a stack of identical forms. */
/* The user list is a single aligned grid: a header row plus one summary row per
   login, both driven by the same column template so every field lines up in its
   own column with tight, consistent spacing. */
.user-table {
  display: flex;
  flex-direction: column;
  --user-cols:
    minmax(6rem, 1fr) minmax(6rem, 1fr) minmax(11rem, 1.6fr)
    minmax(8rem, 1.4fr) max-content max-content max-content max-content;
}
.user-table__head {
  display: grid;
  grid-template-columns: var(--user-cols);
  align-items: center;
  gap: var(--wa-space-s) var(--wa-space-m);
  padding: var(--wa-space-2xs) var(--wa-space-l);
  border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  font-size: var(--wa-font-size-2xs);
  font-weight: var(--wa-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wa-color-text-quiet);
}
.user-table__head-edit {
  text-align: end;
}
.user-entry {
  border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.user-entry:first-child {
  border-top: none;
}
.user-entry__summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.user-entry__summary::-webkit-details-marker,
.user-entry__summary::marker {
  display: none;
  content: "";
}
.user-entry__row {
  display: grid;
  grid-template-columns: var(--user-cols);
  align-items: center;
  gap: var(--wa-space-s) var(--wa-space-m);
  padding: var(--wa-space-2xs) var(--wa-space-l);
}
.user-entry__summary:hover {
  background-color: var(--wa-color-neutral-fill-quiet);
}
.user-entry__cell {
  min-width: 0;
  font-size: var(--wa-font-size-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-entry__email,
.user-entry__company,
.user-entry__joined {
  color: var(--wa-color-text-quiet);
}
.user-entry__edit {
  justify-self: end;
}
.user-entry[open] .user-entry__edit {
  background-color: var(--wa-color-neutral-fill-quiet);
}
.user-entry__form {
  padding: var(--wa-space-s) var(--wa-space-l) var(--wa-space-l);
  border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  background-color: color-mix(in oklab, var(--wa-color-surface-lowered) 40%, transparent);
}

/* On narrow viewports the grid collapses to stacked, labelled rows so the data
   stays legible without a horizontal table. */
@media (max-width: 60rem) {
  .user-table__head {
    display: none;
  }
  .user-entry__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--wa-space-2xs) var(--wa-space-m);
    padding: var(--wa-space-s) var(--wa-space-l);
  }
  .user-entry__cell {
    white-space: normal;
  }
  .user-entry__cell[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xs);
    font-weight: var(--wa-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .user-entry__email {
    grid-column: 1 / -1;
  }
  .user-entry__edit {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.empty {
  padding: var(--wa-space-2xl) var(--wa-space-l);
  text-align: center;
  color: var(--wa-color-text-quiet);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
  padding: var(--wa-space-s) var(--wa-space-l);
  border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
}

/* -------------------------------------------------------------- login card */

.login-main {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--wa-space-l);
}
.portal-main {
  padding: var(--wa-space-l);
}
.login-card {
  width: 100%;
  max-width: 24rem;
  box-shadow: none;
}
.login-card__header {
  padding-inline: 0;
}
.login-title,
.login-copy {
  margin: 0;
}

/* Wide account cards keep the native form first on mobile and pair it with
   supporting artwork on desktop. The artwork itself is shared with landing. */
@media (min-width: 1024px) {
  .login-card--wide {
    max-width: var(--naua-shell-max);
  }
  .login-card__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--naua-space-8);
  }
  .login-card__columns > :first-child {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .login-card__columns > .login-card__media {
    grid-column: 1;
    grid-row: 1;
  }
  .login-card--wide .grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .login-card--wide .section-sub {
    font-size: var(--naua-type-support);
  }
}

/* -------------------------------------------------------------------- misc */

.chart {
  width: 100%;
}

/* ---------------------------------------------------------------- reports */

/* Text starts at the leading edge; numeric headings and values stay aligned. */
.data-table--left thead th,
.data-table--left tbody td {
  text-align: start;
}

.report-filters {
  margin-bottom: calc(-1 * var(--wa-space-s));
}

/* A native <details> disclosure styled as an Excel-style column filter: the
   summary is the trigger button, the panel floats a scrollable checkbox list. */
.filter-menu {
  position: relative;
}
.filter-menu > summary {
  list-style: none;
  cursor: pointer;
}
.filter-menu > summary::-webkit-details-marker,
.filter-menu > summary::marker {
  display: none;
  content: "";
}
.filter-menu[open] > summary {
  background-color: var(--wa-color-neutral-fill-quiet);
}
.filter-menu[open] > summary wa-icon[name="chevron-down"] {
  transform: rotate(180deg);
}
.filter-menu__panel {
  position: absolute;
  z-index: 20;
  margin-top: var(--wa-space-2xs);
  min-width: 15rem;
  max-height: 20rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-3xs);
  padding: var(--wa-space-2xs);
  background-color: var(--wa-color-surface-raised);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--wa-shadow-m);
}
.filter-menu__option {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  padding: var(--wa-space-3xs) var(--wa-space-2xs);
  border-radius: var(--wa-border-radius-s);
  font-size: var(--wa-font-size-s);
  cursor: pointer;
}
.filter-menu__option:hover {
  background-color: var(--wa-color-neutral-fill-quiet);
}
.filter-menu__option input {
  accent-color: var(--wa-color-brand-fill-loud);
}

/* ------------------------------------------------------------- data audit */

.audit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-2xs);
}
.audit-checks {
  display: grid;
  gap: var(--wa-space-s);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.audit-check {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-3xs);
  padding: var(--wa-space-s);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
  color: var(--wa-color-text-normal);
  text-decoration: none;
}
.audit-check:hover {
  background-color: var(--wa-color-neutral-fill-quiet);
}
.audit-check[aria-current="page"] {
  border-color: var(--wa-color-brand-border-loud);
  background-color: var(--wa-color-brand-fill-quiet);
}
.audit-check__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wa-space-2xs);
}
.audit-check__badges {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
}
.audit-check__count {
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-semibold);
  line-height: 1.1;
}
.audit-check__info {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-m);
}
.audit-check:hover .audit-check__info {
  color: var(--wa-color-brand-on-quiet);
}
.audit-check__label {
  font-weight: var(--wa-font-weight-semibold);
}
/* Pin the description to the bottom of the tile so descriptions line up across
   every tile regardless of label length (#57). */
.audit-check__desc {
  margin-top: auto;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
}

/* htmx swaps the table body in place; fade the outgoing rows so a filter change
   reads as a refresh rather than a flicker. */
.htmx-swapping {
  opacity: 0.4;
  transition: opacity 120ms ease-out;
}

/* ApexCharts paints its own tooltip outside the component tree; theme it to the
   raised surface so it matches in both schemes. */
.apexcharts-tooltip {
  background-color: var(--wa-color-surface-raised) !important;
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border) !important;
  border-radius: var(--wa-border-radius-m) !important;
  box-shadow: var(--wa-shadow-l) !important;
  color: var(--wa-color-text-normal) !important;
}
.apexcharts-tooltip-title {
  background-color: var(--wa-color-surface-lowered) !important;
  border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border) !important;
}
.apexcharts-svg {
  outline: none;
}

/* ------------------------------------------------------------- scan console */

/* The barcode scanning console. The forms are plain inputs (a keyboard-wedge
   scanner just types into them); scan.js layers on recognition and the log. */
/* The scan console is capped to one consistent width so the scanner card, the
   session log, and the setup guide all line up under a shared right edge
   instead of the card sitting in a narrow column beside the full-width guide. */
.scan {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-l);
  width: 100%;
  max-width: 72rem;
}
.scan__grid {
  display: grid;
  gap: var(--wa-space-l);
  grid-template-columns: 1fr;
}
/* The scanner card fills the full width until the session log appears (only
   with JavaScript, after the first scan); then the two share the row. */
@media (min-width: 64rem) {
  .scan__grid:has(.scan__session:not([hidden])) {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}
.scan__grid > * {
  min-width: 0;
}
.scan__hint {
  margin-block-start: var(--wa-space-2xs);
}

/* Scanner recognition uses static text and semantic state colors. */
.scan-status {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  padding: var(--wa-space-2xs) var(--wa-space-s);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-pill);
  background-color: var(--wa-color-surface-default);
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-medium);
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
}
.scan-status[data-scan-status="idle"] {
  color: var(--wa-color-text-normal);
  border-color: var(--wa-color-brand-border-normal);
}
.scan-status[data-scan-status="live"] {
  color: var(--wa-color-success-on-quiet);
  border-color: var(--wa-color-success-border-normal);
  background-color: var(--wa-color-success-fill-quiet);
}

/* Check-in / check-out form: a responsive field grid ending in a full-width
   actions row. */
.scan-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--wa-space-m);
  align-items: start;
}
.scan-form--single {
  grid-template-columns: 1fr;
  max-width: 26rem;
}
.scan-field--wide {
  grid-column: 1 / -1;
}
.scan-form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-2xs);
}

/* Recipient confirmation under the mailbox field. */
.scan-recipient {
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-medium);
}
.scan-recipient[data-found="yes"] {
  color: var(--wa-color-success-on-quiet);
}
.scan-recipient[data-found="no"] {
  color: var(--wa-color-danger-on-quiet);
}

.scan-guide {
  border-radius: var(--wa-border-radius-m);
}
.scan-guide p {
  color: var(--wa-color-text-quiet);
  line-height: 1.55;
  margin: 0;
}
.scan-guide h3 {
  font-size: var(--wa-font-size-m);
}

/* ---------------------------------------------------------------- roles page */

/* The role manager uses the same capability matrix for both editing and review. */
.role-list {
  display: flex;
  flex-direction: column;
}
.role-entry {
  border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.role-entry:first-child {
  border-top: none;
}
/* Collapsed: a compact list of role names. Expand to reveal the permissions.
   The summary stays display:block (not flex) so `list-style: none` actually
   removes the UA disclosure triangle; the flex layout lives in an inner row. */
.role-disclosure__summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.role-disclosure__summary::-webkit-details-marker,
.role-disclosure__summary::marker {
  display: none;
  content: "";
}
.role-disclosure__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wa-space-s);
  padding: var(--wa-space-m) var(--wa-space-l);
}
.role-disclosure__summary:hover {
  background-color: color-mix(in oklab, var(--wa-color-surface-lowered) 40%, transparent);
}
.role-disclosure__caret {
  color: var(--wa-color-text-quiet);
  transition: transform 0.15s ease;
}
.role-disclosure[open] > .role-disclosure__summary .role-disclosure__caret {
  transform: rotate(90deg);
}
.role-disclosure__label {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-inline-end: auto;
}
.role-entry__title {
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-semibold);
  line-height: var(--wa-line-height-condensed);
}
.role-disclosure__body {
  padding: 0 var(--wa-space-l) var(--wa-space-l);
}
.role-entry__note,
.role-entry__editor {
  margin-top: var(--wa-space-s);
}
.role-entry__matrix {
  margin-top: 0;
}
.role-entry__editor > summary {
  cursor: pointer;
  list-style: none;
}
.role-entry__editor > summary::-webkit-details-marker,
.role-entry__editor > summary::marker {
  display: none;
  content: "";
}
.role-entry__form {
  padding: var(--wa-space-s) var(--wa-space-l) var(--wa-space-l);
  border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  background-color: color-mix(in oklab, var(--wa-color-surface-lowered) 40%, transparent);
}

.role-form {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}
.role-form__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--wa-space-s);
}

/* Counter workflow: compact identity, packages first, native disclosures. */
.counter-record { padding: var(--wa-space-m); display: grid; gap: var(--wa-space-s); }
.counter-record .page-head { margin: 0; }
.counter-account { font-size: var(--wa-font-size-2xl); font-weight: var(--wa-font-weight-bold); line-height: 1.1; }
.counter-contact { display: flex; flex-wrap: wrap; gap: var(--wa-space-xs) var(--wa-space-l); font-size: var(--wa-font-size-s); }
.disclosure > summary { cursor: pointer; list-style: disclosure-closed inside; }
.disclosure[open] > summary { list-style-type: disclosure-open; border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.disclosure > .panel__body { display: grid; gap: var(--wa-space-m); }
.data-table--touch td { padding-block: var(--wa-space-xs); }
.data-table--touch input[type="checkbox"] { inline-size: var(--wa-space-m); block-size: var(--wa-space-m); }
.account-lookup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  inline-size: 100%;
}
.print-frame { position: fixed; inline-size: 0; block-size: 0; border: 0; }

.account-lookup > .form-field { min-inline-size: 0; }
.data-table--touch th, .data-table--touch td { padding-inline: var(--wa-space-s); }
.disclosure > .panel__body { padding: var(--wa-space-m); }
.data-table--touch .muted { white-space: nowrap; }
/* wa-page already pads main-content; avoid the native main element's second gutter. */
wa-page > main { padding: 0; }
.disclosure > .panel__body { grid-template-columns: minmax(0, 1fr); }
.disclosure > .panel__body > * { min-inline-size: 0; }


/* Counter console: the same task-first experience for every operator role. */
.counter-console {
  font-size: var(--wa-font-size-m);
}
.counter-console .nav {
  gap: var(--wa-space-xs);
}
.counter-console .nav-link {
  min-block-size: var(--wa-space-3xl);
  padding: var(--wa-space-s);
}
.nav-more {
  margin-block-start: var(--wa-space-m);
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.nav-more > summary {
  padding: var(--wa-space-m) var(--wa-space-s);
  cursor: pointer;
  font-weight: var(--wa-font-weight-semibold);
}
.counter-console :is(.btn, .segmented a) {
  min-block-size: var(--wa-space-3xl);
  padding: var(--wa-space-s) var(--wa-space-m);
  font-size: var(--wa-font-size-m);
  white-space: normal;
}
.counter-console .segmented a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.counter-console :is(.form-field input, .form-field select, .field) {
  min-block-size: var(--wa-space-3xl);
  min-inline-size: 0;
}
.counter-console :is(.field input, .form-field input, .form-field select) {
  font-size: var(--wa-font-size-m);
}
.counter-console .form-field > span {
  font-size: var(--wa-font-size-m);
  color: var(--wa-color-text-normal);
}
.counter-console :is(.section-sub, .mono, .pager, .scan-status) {
  font-size: var(--wa-font-size-s);
}
.counter-console .section-title {
  font-size: var(--wa-font-size-l);
}
.counter-console :is(a, button, input, select, summary):focus-visible {
  outline: var(--wa-border-width-m) solid var(--wa-color-brand-border-loud);
  outline-offset: var(--wa-space-3xs);
}
.counter-console .field:focus-within {
  outline: var(--wa-border-width-m) solid var(--wa-color-brand-border-loud);
  outline-offset: var(--wa-space-3xs);
}
/* The wrapper owns focus for every composite search/filter field. Standalone
   controls retain the console focus rule above. */
.counter-console .field :is(input, select):focus-visible {
  outline: none;
}
.counter-console .data-table tbody td {
  padding-block: var(--wa-space-m);
}
.counter-console .data-table thead th {
  font-size: var(--wa-font-size-s);
  text-transform: none;
  letter-spacing: normal;
}
.counter-heading {
  margin: 0;
  font-size: var(--wa-font-size-2xl);
  font-weight: var(--wa-font-weight-bold);
  line-height: 1.25;
}
.counter-intro {
  margin: 0;
  color: var(--wa-color-text-quiet);
}
.task-workspace {
  max-inline-size: var(--naua-shell-reading);
  inline-size: 100%;
  margin-inline: auto;
}
.counter-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--naua-space-4);
}
.counter-tile {
  box-shadow: var(--naua-shadow-panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--naua-space-6);
  padding: var(--naua-space-8) var(--naua-space-4);
  min-block-size: var(--naua-tile-height);
  border: var(--naua-line) solid var(--naua-border);
  border-radius: var(--naua-radius);
  background: var(--naua-surface);
  color: var(--naua-text);
  text-decoration: none;
  text-align: center;
}
.counter-tile:hover {
  border-color: var(--naua-focus);
  background: var(--naua-action-surface);
  color: var(--naua-action);
}
.counter-tile:active { background: var(--naua-surface-hover); }
.counter-tile__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--naua-tile-icon);
  block-size: var(--naua-tile-icon);
  color: var(--naua-action);
}
.counter-tile__icon .icon { inline-size: 100%; block-size: 100%; }
.counter-package-icon { inline-size: 100%; block-size: 100%; }
.counter-package-icon__box {
  fill: var(--naua-action-surface);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
}
.counter-package-icon__arrow { fill: currentColor; stroke: var(--naua-surface); stroke-width: 3; stroke-linejoin: round; }
.counter-tile > strong { font-size: var(--naua-type-title); line-height: 1.25; }
.counter-tiles--record { max-inline-size: 48rem; }
.counter-lookup { padding: var(--naua-space-8); }
.counter-options > summary { cursor: pointer; color: var(--wa-color-text-link); min-block-size: var(--wa-space-3xl); display: list-item; align-content: center; }
.counter-options { border: none; padding: 0; background: transparent; }
.counter-options > form { margin-block-start: var(--wa-space-m); }
.counter-options .counter-prefix { margin-block-start: var(--wa-space-l); }
.counter-console .counter-lookup .search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  align-items: stretch;
  gap: var(--wa-space-s);
  max-inline-size: none;
  inline-size: 100%;
}
.counter-lookup .search > .field { inline-size: auto; min-inline-size: 0; }
.counter-console .counter-lookup .account-lookup { align-items: end; }
.counter-lookup .field input { min-inline-size: 0; }
.counter-prefix p { margin: 0; }
.counter-start { max-inline-size: 48rem; margin-inline: auto; inline-size: 100%; }
.counter-start__heading { display: flex; align-items: center; gap: var(--wa-space-l); }
@media (max-width: 40rem) {
  .counter-tiles { gap: var(--wa-space-s); }
  .counter-tile { min-block-size: 10rem; padding: var(--wa-space-m) var(--wa-space-xs); gap: var(--wa-space-m); }
  .counter-tile__icon { inline-size: 4rem; block-size: 4rem; }
  .counter-tile > strong { font-size: var(--wa-font-size-m); }
  .counter-tile__icon wa-icon { font-size: var(--wa-space-3xl); }
}
.counter-assist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wa-space-m);
  padding: var(--wa-space-m);
  background: var(--wa-color-surface-default);
  border-radius: var(--wa-border-radius-m);
}
.counter-assist > span {
  flex: 1 1 18rem;
}
.counter-search-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wa-space-m);
}
.customer-search-head #customers-search {
  flex: 1 1 30rem;
}
.customer-search-head .field--search {
  inline-size: 100%;
}
.counter-console .customer-grid {
  --row-height: 4rem;
  --max-height: 36rem;
  font-size: var(--wa-font-size-m);
}
.counter-console .account-lookup {
  gap: var(--wa-space-s);
}
.counter-console .account-lookup input {
  max-inline-size: none;
  min-inline-size: 0;
  inline-size: 100%;
}
.counter-console .counter-record {
  padding: var(--wa-space-l);
}
.counter-console .counter-contact {
  font-size: var(--wa-font-size-m);
}
.counter-console .scan__grid:has(.scan__session:not([hidden])) {
  grid-template-columns: minmax(0, 1fr);
}
.counter-console .scan-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.counter-console .scan-form--single {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 40rem;
}
.counter-console .scan-form__actions .btn {
  min-block-size: var(--wa-space-4xl);
}
.counter-console [data-scan-first] {
  font-size: var(--wa-font-size-xl);
}
.pickup-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-s);
  min-block-size: var(--wa-space-3xl);
  cursor: pointer;
}
.counter-console .pickup-choice input[type="checkbox"] {
  inline-size: var(--wa-space-l);
  block-size: var(--wa-space-l);
  accent-color: var(--wa-color-brand-fill-loud);
}
.counter-console .data-table--touch tr:has(input:checked) td {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
}
.pickup-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wa-space-m);
  padding-block-start: var(--wa-space-l);
}
#current-storage, #pickup-history, #package-history {
  scroll-margin-block-start: var(--wa-space-4xl);
}
@media (max-width: 64rem) {
  .counter-console .scan-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .counter-tile {
    gap: var(--wa-space-m);
    padding: var(--wa-space-m);
  }
}
@media (max-width: 40rem) {
  .counter-console .scan-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .counter-console .account-lookup {
    inline-size: 100%;
  }
  .counter-console .counter-record {
    padding: var(--wa-space-m);
  }
  .counter-console .search {
    flex-wrap: wrap;
  }
  .counter-console .field--search {
    inline-size: 100%;
  }
  .pickup-summary .btn, .scan-form__actions .btn {
    inline-size: 100%;
  }
  .counter-console .appbar__title {
    font-size: var(--wa-font-size-m);
  }
}
.customer-grid::part(account-link) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--wa-space-3xl);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-link);
}
.customer-grid::part(account-link):focus-visible {
  outline: var(--wa-border-width-m) solid var(--wa-color-brand-border-loud);
}
.counter-console .counter-account {
  font-size: var(--wa-font-size-2xl);
}
.counter-console .account-lookup {
  max-inline-size: 32rem;
}
.pickup-choice span {
  white-space: nowrap;
}

.counter-console .data-table--touch tr:has(input:checked) .muted {
  color: var(--wa-color-brand-on-quiet);
}
/* Keep all pickup facts visible at a typical counter monitor width. */
.counter-console .data-table--touch :is(th, td) {
  padding-inline: var(--wa-space-s);
}

/* Counter lookup is the primary task; results remain native account links. */
.counter-home-search .field--search {
  flex: 1;
  inline-size: auto;
}
.counter-search-results:empty {
  display: none;
}
.counter-match {
  display: flex;
  align-items: center;
  gap: var(--wa-space-m);
  padding: var(--wa-space-m);
  color: var(--wa-color-text-normal);
  text-decoration: none;
}
.counter-match + .counter-match {
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.counter-match:hover {
  background: var(--wa-color-neutral-fill-quiet);
}
.counter-match__identity {
  display: grid;
  gap: var(--wa-space-3xs);
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.counter-match__identity .muted {
  font-size: var(--wa-font-size-s);
}
.nav-reporting {
  margin-block-start: var(--wa-space-m);
  padding-block-start: var(--wa-space-m);
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.nav-reporting h2 {
  margin: 0;
  padding: var(--wa-space-xs) var(--wa-space-s);
}
@media (max-width: 40rem) {
  .counter-match {
    flex-wrap: wrap;
  }
  .counter-match__identity {
    flex-basis: 100%;
    order: 1;
  }
  .counter-match wa-tag {
    margin-inline-start: auto;
  }
}

/* Package record: aligned details and a single, contained activity composer. */
.package-details .field-list {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--wa-space-xs) var(--wa-space-m);
}
.package-details .field-list dt {
  font-weight: var(--wa-font-weight-normal);
}
.package-details .field-list dd {
  overflow-wrap: anywhere;
}
#activity-feedback:empty,
.activity-feed:empty {
  display: none;
}
.note-composer {
  border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  overflow: hidden;
}
.note-composer:has(textarea:focus-visible) {
  outline: var(--wa-border-width-m) solid var(--wa-color-brand-border-loud);
  outline-offset: var(--wa-space-3xs);
}
.note-composer__label {
  display: block;
  padding: var(--wa-space-m) var(--wa-space-m) 0;
  font-weight: var(--wa-font-weight-semibold);
}
.note-composer textarea {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 6rem;
  padding: var(--wa-space-s) var(--wa-space-m);
  border: none;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font: inherit;
  line-height: var(--wa-line-height-normal);
  resize: none;
  overflow-y: auto;
}
.note-composer textarea:focus-visible {
  outline: none; /* The whole composer carries the focus ring. */
}
.note-composer textarea::placeholder {
  color: var(--wa-color-text-quiet);
  opacity: 1;
}
.note-composer__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-m);
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-lowered);
  font-size: var(--wa-font-size-s);
}
.package-contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wa-space-m);
  align-items: end;
}
.package-contact-form .form-field {
  min-inline-size: 0;
}
.package-activity .htmx-indicator {
  display: none;
}
.package-activity .htmx-request .htmx-indicator {
  display: inline;
}
.package-contact-form > .htmx-indicator {
  grid-column: 1 / -1;
}
.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-feed__entry {
  display: flex;
  align-items: flex-start;
  gap: var(--wa-space-m);
  padding-block: var(--wa-space-l);
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.activity-feed__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--wa-space-2xl);
  block-size: var(--wa-space-2xl);
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-quiet);
}
.activity-feed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wa-space-2xs) var(--wa-space-s);
  font-size: var(--wa-font-size-s);
}
.activity-feed__meta time {
  margin-inline-start: auto;
}
.activity-feed .timeline__body {
  margin-block: var(--wa-space-xs) 0;
  max-inline-size: 75ch;
}
@media (min-width: 48rem) {
  .package-contact-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  }
}
@media (max-width: 40rem) {
  .activity-feed__meta time {
    flex-basis: 100%;
  }
  .note-composer__footer > .wa-cluster {
    margin-inline-start: auto;
  }
}

/* A hovered customer remains distinct from either stripe in both schemes. */
.customer-grid {
  --row-hover-background: var(--wa-color-brand-fill-quiet);
  --stripe-background: color-mix(in oklab, var(--wa-color-surface-lowered) 55%, var(--wa-color-surface-default));
}
.customer-grid::part(sort-indicator) { opacity: 1; }
/* Keep quick server updates from flashing a full-table spinner. */
.customer-grid::part(loading-overlay) {
  animation: customer-grid-loading var(--wa-transition-fast) var(--wa-transition-fast) both;
}
@keyframes customer-grid-loading {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-grid::part(loading-overlay) { animation-duration: 0s; }
}

/* Preserve the appbar columns when the page carries its own visible heading. */
.appbar__title[hidden] { display: block; visibility: hidden; }

/* Shared task workspace and supporting action row, used without a page kit. */
.workspace-intro { margin: 0; color: var(--naua-text-muted); }
.action-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--naua-space-4); color: var(--naua-text-muted); font-size: var(--naua-type-support); }
.action-row .btn { font-size: var(--naua-type-support); }
.field .icon { color: var(--naua-text-muted); }
@media (max-width: 48rem) {
  .counter-lookup { padding: var(--naua-space-6); }
  .counter-tiles { gap: var(--naua-space-2); }
}

.menu-caret { inline-size: var(--naua-space-2); block-size: var(--naua-space-2); border-inline-end: var(--naua-line) solid currentColor; border-block-end: var(--naua-line) solid currentColor; transform: rotate(45deg); }

/* A disclosure indicator belongs to the shared control, not the kit reset. */
.disclosure-toggle { display: flex; align-items: center; gap: var(--naua-space-2); justify-content: flex-start; list-style: none; cursor: pointer; }
.disclosure-toggle::after {
  content: "";
  order: -1;
  inline-size: var(--naua-space-2);
  block-size: var(--naua-space-2);
  background: none;
  mask: none;
  border-inline-end: var(--naua-line) solid currentColor;
  border-block-end: var(--naua-line) solid currentColor;
  rotate: none;
  transform: rotate(-45deg);
}
details[open] > .disclosure-toggle::after { rotate: none; transform: rotate(45deg); }
.shell-nav .nav-more > .disclosure-toggle { margin: 0; justify-content: flex-start; }
.counter-options > .disclosure-toggle { display: flex; padding: 0; margin: 0; }
/* Theme changes are immediate on the controls used all day at the counter. */
.form-field input, .field input, .btn { transition: none; }

/* Shared feedback follows the task controls, never displacing entry fields. */
.feedback { margin-block-start: var(--naua-space-4); }
.feedback:empty { display: none; }

/* Shared table actions remain usable with touch, keyboard, and native links. */
.data-table .link {
  font-size: var(--naua-type-body);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--naua-control-height);
  min-inline-size: var(--naua-control-height);
  padding-inline: var(--naua-space-2);
}
.data-table td > .link + .link { margin-inline-start: var(--naua-space-2); }
.data-table .tracking-value {
  inline-size: var(--naua-tracking-width);
  min-inline-size: var(--naua-tracking-width);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Visible labels share the native search layout and retain a full-size submit. */
.search > .form-field { flex: 1; min-inline-size: 0; }
.search > .btn { align-self: end; }
.data-table .form-field { min-inline-size: var(--naua-tracking-width); white-space: normal; }
/* Editable tables use one visible header; native labels remain accessible. */
.data-table.data-table--editable thead th,
.data-table.data-table--editable tbody td { padding: var(--naua-space-2) var(--naua-space-3); }
.data-table--editable th.num { inline-size: var(--naua-tracking-width); }
.data-table--editable .form-field { min-inline-size: var(--naua-record-column); }
.data-table--editable td:first-child .form-field { min-inline-size: var(--naua-tracking-width); }
.data-table--editable .form-field > span {
  position: absolute;
  inline-size: var(--naua-line);
  block-size: var(--naua-line);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.data-table--editable .form-field input { inline-size: 100%; min-block-size: var(--naua-control-height); font-size: var(--naua-type-body); }
.data-table--editable .num input { text-align: end; font-variant-numeric: tabular-nums; }

.data-table :is(th, td).num { text-align: end; font-variant-numeric: tabular-nums; }
.shell-nav :is(.nav-more, .nav-reporting) > .nav-link + .nav-link { margin-block-start: var(--naua-space-2); }

/* Compact task tiles retain the same 64px pictograms on customer records. */
.counter-tile--compact { flex-direction: row; min-block-size: calc(var(--naua-space-16) + 2 * var(--naua-space-4)); gap: var(--naua-space-4); padding: var(--naua-space-4); }
.counter-tile--compact .counter-tile__icon { inline-size: var(--naua-space-16); block-size: var(--naua-space-16); }
@media (max-width: 40rem) {
  .counter-tile--compact { flex-direction: column; gap: var(--naua-space-2); padding: var(--naua-space-3) var(--naua-space-2); }
}

.notice--info { border-color: var(--naua-border); background: var(--naua-surface-raised); color: var(--naua-text); }
.data-table--matrix th[scope="row"] { min-inline-size: var(--naua-tracking-width); font-weight: var(--naua-weight-strong); white-space: normal; }
.data-table--matrix th[scope="row"] span { display: block; }
.data-table--matrix th[scope="row"] .muted { font-weight: var(--naua-weight-normal); }
.data-table--matrix :is(th, td):not(:first-child) { text-align: center; }
.choice-target { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--naua-control-height); min-block-size: var(--naua-control-height); cursor: pointer; }
.disclosure .notice + form, .disclosure .notice + .table-wrap { margin-block-start: var(--naua-space-4); }
/* A collapsed disclosure stays compact beside an expanded card. */
.grid > .disclosure { align-self: start; }

.shell-nav .nav-more[open] > summary { margin-block-end: var(--naua-space-2); }

/* anchor: Apple-airy, diverge: NAUA navy, 3px owned corners, existing 64px
   counter pictograms and independently labeled package facts. */
.visually-hidden { position: absolute; inline-size: var(--naua-line); block-size: var(--naua-line); padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.record-workspace { container-type: inline-size; font-size: var(--naua-type-body); }
.record-workspace :is(.section-sub, .counter-contact, .data-table) { font-size: var(--naua-type-body); }
.record-workspace :is(.btn, input, select) { font-size: var(--naua-type-body); min-block-size: var(--naua-control-height); }
.record-workspace :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: var(--naua-focus-width) solid var(--naua-focus); outline-offset: var(--naua-focus-width); }
.record-workspace :is(details, input, select, button, a, [tabindex]) { scroll-margin-block: var(--naua-record-scroll-offset) var(--naua-space-8); }
.record-workspace .counter-record { padding: var(--naua-space-6); gap: var(--naua-space-3); }
.record-workspace .counter-account { font-size: var(--naua-type-heading); font-weight: var(--naua-weight-strong); }
.record-facts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--naua-space-3) var(--naua-space-6); margin: 0; }
.record-facts > div { min-inline-size: 0; }
.record-facts dt, .table-value-label { display: block; color: var(--naua-text-muted); font-size: var(--naua-type-support); font-weight: var(--naua-weight-normal); }
.record-facts dd { margin: 0; overflow-wrap: anywhere; }
.status-label { display: inline-flex; align-items: center; gap: var(--naua-space-2); padding: var(--naua-space-1) var(--naua-space-3); border-radius: var(--naua-radius); font-size: var(--naua-type-body); font-weight: var(--naua-weight-strong); color: var(--naua-neutral-text); background: var(--naua-neutral-surface); }
.status-label--warning { color: var(--naua-warning-text); background: var(--naua-warning-surface); }
.status-label--success { color: var(--naua-success-text); background: var(--naua-success-surface); }
.status-label--danger { color: var(--naua-danger-text); background: var(--naua-danger-surface); }
.action-dock { position: sticky; inset-block-start: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--naua-space-2) var(--naua-space-4); padding-block: var(--naua-space-3); background: var(--naua-canvas); border-block-end: var(--naua-line) solid var(--naua-border); }
.action-dock .counter-tiles { flex: 1; max-inline-size: none; gap: var(--naua-space-3); }
.action-dock .counter-tile { min-block-size: var(--naua-record-action-height); padding: var(--naua-space-3); flex-direction: row; gap: var(--naua-space-3); }
.action-dock .counter-tile kbd { margin-inline-start: auto; }
.action-dock .counter-tile strong { font-size: var(--naua-type-title); }
.action-dock kbd, .record-workspace kbd, [data-page-shortcuts] kbd:not([data-page-key-hint]) { display: inline-block; padding: 0 var(--naua-space-1); font-family: var(--naua-font); font-size: var(--naua-type-support); font-weight: var(--naua-weight-strong); border: var(--naua-line) solid currentColor; border-radius: var(--naua-radius); }
/* anchor: quiet corner keycap, diverge: out of the label so the action name stays the name */
.has-key-hint { position: relative; }
kbd[data-page-key-hint] {
  position: absolute;
  inset-block-start: var(--naua-space-2);
  inset-inline-end: var(--naua-space-2);
  z-index: 1;
  margin: 0;
  padding: 0 var(--naua-space-1);
  border: var(--naua-line) solid var(--naua-border);
  border-radius: var(--naua-radius);
  background: var(--naua-surface);
  color: var(--naua-text-muted);
  font-family: var(--naua-font);
  font-size: var(--naua-type-support);
  font-weight: var(--naua-weight-normal);
  line-height: 1.3;
  pointer-events: none;
}
/* A text button has no empty corner, so the key stays at the top-right in the row instead of covering the last letter. */
.btn.has-key-hint {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  column-gap: var(--naua-space-2);
}
.btn.has-key-hint > kbd[data-page-key-hint] {
  position: static;
  align-self: start;
}
[data-page-shortcuts].action-row { justify-content: flex-end; }
.disclosure-heading { min-block-size: var(--naua-control-height); gap: var(--naua-space-4); }
.disclosure-heading__text { display: grid; gap: var(--naua-space-1); flex: 1; }
.disclosure-heading__key:empty { display: none; }
.record-workspace .panel__body { padding: var(--naua-space-6); }
.form-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.form-group legend { padding: 0; margin-block-end: var(--naua-space-4); font-size: var(--naua-type-title); font-weight: var(--naua-weight-strong); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--naua-space-4) var(--naua-space-6); }
@media (max-width: 42rem) {
 .form-grid { grid-template-columns: minmax(0, 1fr); }
}
.form-span-all { grid-column: 1 / -1; }
.form-error { color: var(--naua-danger-text); font-size: var(--naua-type-body); }
.form-error:empty { display: none; }
.record-workspace .customer-edit__form { gap: var(--naua-space-8); }
.record-workspace .form-field { font-size: var(--naua-type-body); }
.record-workspace .form-field input[aria-invalid="true"] { border-color: var(--naua-danger-text); }
/* anchor: Stripe-data, diverge: native pickup selection and 48px print actions.
   One header and one row per package; delivery details live on its linked record. */
.data-table--records { table-layout: fixed; }
.data-table--records th:nth-child(1) { inline-size: calc(var(--naua-control-height) + var(--naua-space-6)); }
.data-table--records th:nth-child(2) { inline-size: var(--naua-record-package-width); }
.data-table--records th:nth-child(4) { inline-size: var(--naua-record-location-width); }
.data-table--records th:nth-child(5) { inline-size: var(--naua-record-column); }
.data-table--records th:nth-child(6) { inline-size: var(--naua-record-fee-width); }
.data-table--records th:nth-child(7) { inline-size: var(--naua-record-print-width); }
.data-table--records thead th {
  padding: var(--naua-space-3);
  font-size: var(--naua-type-support);
  font-weight: var(--naua-weight-normal);
  text-transform: none;
  letter-spacing: normal;
  color: var(--naua-text-muted);
  background: transparent;
}
.data-table--records tr[data-package-row] > td {
  padding: var(--naua-space-2) var(--naua-space-3);
  border-block-start: var(--naua-line) solid var(--naua-border);
  background: transparent;
}
.data-table--records tr[data-package-row]:is(:hover, :focus-within) { background: var(--naua-surface-hover); }
.data-table--records tr[data-package-row]:has(input:checked) { background: var(--naua-action-surface); }
.data-table--records .table-value-label { display: none; }
.data-table--records .record-cell--sender > span:last-child {
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table--records .record-cell--location { overflow-wrap: anywhere; }
.data-table--records .record-cell--received { font-size: var(--naua-type-support); }
.data-table--records :is(.record-cell--package, .record-cell--received, .record-cell--fee, .record-cell--labels) { white-space: nowrap; }
.data-table--records .record-cell--fee { min-inline-size: var(--naua-record-fee-width); }
.data-table--records .pickup-choice { min-inline-size: var(--naua-control-height); min-block-size: var(--naua-control-height); }
.data-table--records .pickup-choice span { display: none; }
.record-workspace .pickup-choice input[type="checkbox"] { min-block-size: 0; inline-size: var(--naua-space-6); block-size: var(--naua-space-6); margin: 0; }
.record-workspace .pickup-summary { margin-block-start: var(--naua-space-6); gap: var(--naua-space-4); }
.dialog { margin: auto; inline-size: min(var(--naua-sheet-width), calc(100% - var(--naua-space-8))); max-block-size: calc(100dvh - var(--naua-space-8)); padding: var(--naua-space-6); border: var(--naua-line) solid var(--naua-border); border-radius: var(--naua-radius); color: var(--naua-text); background: var(--naua-surface); font-size: var(--naua-type-body); box-shadow: var(--naua-shadow-popover); }
.dialog[open] { display: flex; flex-direction: column; align-items: stretch; gap: var(--naua-space-4); }
.dialog > p { margin: 0; }
.dialog::backdrop { background: var(--naua-backdrop); }
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--naua-space-4); }
.dialog h2 { margin: 0; font-size: var(--naua-type-heading); }
.shortcut-list { margin-block: var(--naua-space-6); font-size: var(--naua-type-body); }
.shortcut-list > div { display: grid; grid-template-columns: var(--naua-record-column) minmax(0, 1fr); gap: var(--naua-space-4); padding-block: var(--naua-space-2); border-block-end: var(--naua-line) solid var(--naua-border); }
.shortcut-list dd { margin: 0; }
@container (max-width: 64rem) {
 .action-dock > .btn { min-block-size: var(--naua-control-height); }
 .action-dock .counter-tile { flex-direction: column; gap: var(--naua-space-2); }
}
@container (max-width: 42rem) {
 .record-facts, .form-grid { grid-template-columns: minmax(0, 1fr); }
 .record-workspace .counter-record, .record-workspace .panel__body, .record-workspace .customer-edit__form { padding: var(--naua-space-4); }
 .action-dock .counter-tile strong { font-size: var(--naua-type-body); }
 .action-dock .counter-tiles { min-inline-size: 100%; }
 .shortcut-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--naua-space-1); }
}
@container (max-width: 56rem) {
 .data-table--records, .data-table--records > tbody { display: block; inline-size: 100%; }
 .data-table--records thead { position: absolute; inline-size: var(--naua-line); block-size: var(--naua-line); overflow: hidden; clip-path: inset(50%); }
 .data-table--records tr[data-package-row] {
   display: grid;
   grid-template-columns: var(--naua-control-height) minmax(0, 1fr) minmax(0, 1fr);
   grid-template-areas: 'select package package' 'sender sender sender' 'location location fee' 'received received fee' 'labels labels labels';
   gap: var(--naua-space-3) var(--naua-space-4);
   padding: var(--naua-space-4);
   border-block-end: var(--naua-line) solid var(--naua-border);
 }
 .data-table--records tr[data-package-row] > td { display: block; min-inline-size: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
 .data-table--records tr[data-package-row]:has(> td[colspan]) { display: block; }
 .data-table--records .table-value-label { display: block; margin-block-end: var(--naua-space-1); }
 .data-table--records :is(.record-cell--select, .record-cell--package, .record-cell--labels) .table-value-label { display: none; }
 .data-table--records .record-cell--select { grid-area: select; }
 .data-table--records .record-cell--package { grid-area: package; }
 .data-table--records .record-cell--sender { grid-area: sender; }
 .data-table--records .record-cell--sender > span:last-child { max-inline-size: none; white-space: normal; overflow: visible; }
 .data-table--records .record-cell--location { grid-area: location; }
 .data-table--records .record-cell--received { grid-area: received; }
 .data-table--records .record-cell--fee { grid-area: fee; }
 .data-table--records .record-cell--labels { grid-area: labels; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
 .record-workspace { scroll-behavior: auto; }
}

.disclosure-heading__key { font-size: var(--naua-type-support); padding-inline: var(--naua-space-2); border: var(--naua-line) solid var(--naua-control-border); border-radius: var(--naua-radius); }
.record-workspace .section-title .icon { margin-inline-end: var(--naua-space-2); }
.record-workspace :is(#current-storage, #pickup-history, #package-history) { scroll-margin-block-start: var(--naua-record-scroll-offset); }
@container (max-width: 64rem) {
 .action-dock .counter-tile { flex-direction: row; flex-wrap: wrap; justify-content: center; }
 .action-dock .counter-tile kbd { margin-inline-start: 0; }
}
/* A visible owned checkbox edge in both schemes; its enclosing label owns the
   48px touch target. The native checked state still works without JavaScript. */
.record-workspace .pickup-choice input[type="checkbox"], .menu--settings .settings-shortcuts input[type="checkbox"] { appearance: none; display: inline-grid; place-content: center; border: var(--naua-focus-width) solid var(--naua-control-border); border-radius: var(--naua-radius); background: var(--naua-surface); color: var(--naua-action-text); }
.record-workspace .pickup-choice input[type="checkbox"]:checked, .menu--settings .settings-shortcuts input[type="checkbox"]:checked { background: var(--naua-action); border-color: var(--naua-action); }
.record-workspace .pickup-choice input[type="checkbox"]:checked::after, .menu--settings .settings-shortcuts input[type="checkbox"]:checked::after { content: '✓'; font-size: var(--naua-type-body); font-weight: var(--naua-weight-strong); }
@media (forced-colors: active) {
 .record-workspace .pickup-choice input[type="checkbox"], .menu--settings .settings-shortcuts input[type="checkbox"] { appearance: auto; }
 .record-workspace .pickup-choice input[type="checkbox"]:checked::after, .menu--settings .settings-shortcuts input[type="checkbox"]:checked::after { content: none; }
}
/* Kit control styles must not reveal native hidden inputs or JS-only actions. */
.record-workspace [hidden] { display: none !important; }
.record-workspace .btn:disabled { opacity: 1; color: var(--naua-text-muted); background: var(--naua-surface-hover); border-color: var(--naua-control-border); box-shadow: none; }

/* Numbered tabs keep one task visible, with native links as their fallback. */
.record-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--naua-space-2); scroll-margin-block-start: var(--naua-record-scroll-offset); }
.record-tab { display: flex; flex-direction: column; gap: var(--naua-space-2); min-block-size: var(--naua-control-height); padding: var(--naua-space-3); border: var(--naua-line) solid var(--naua-control-border); border-block-end: var(--naua-focus-width) solid var(--naua-control-border); border-radius: var(--naua-radius); background: var(--naua-surface); color: var(--naua-text); text-decoration: none; }
.record-tab:hover { background: var(--naua-surface-hover); }
.record-tab[aria-current="page"] { color: var(--naua-action-text); background: var(--naua-action); border-color: var(--naua-action); }
.record-tab[aria-current="page"] .record-tab__fact { color: inherit; }
.record-tab__label { display: flex; justify-content: space-between; gap: var(--naua-space-2); font-weight: var(--naua-weight-strong); }
.record-tab__fact { font-size: var(--naua-type-support); color: var(--naua-text-muted); }
.record-panel { scroll-margin-block-start: var(--naua-record-scroll-offset); }
.record-panel > .panel__head { padding: var(--naua-space-4) var(--naua-space-6); }
.menu--settings .menu__panel { inline-size: min(var(--naua-sheet-width), calc(100vw - var(--naua-space-8))); max-inline-size: var(--naua-form-column); }
.settings-shortcuts { display: flex; align-items: start; gap: var(--naua-space-3); padding: var(--naua-space-4); border-block-start: var(--naua-line) solid var(--naua-border); cursor: pointer; font-size: var(--naua-type-body); }
.menu--settings .settings-shortcuts input[type="checkbox"] { flex: none; inline-size: var(--naua-space-6); block-size: var(--naua-space-6); margin: 0; accent-color: var(--naua-action); }
.settings-shortcuts .section-sub { display: block; margin-block-start: var(--naua-space-2); font-size: var(--naua-type-support); }
:root:not([data-customer-shortcuts="on"]) [data-page-key-hint],
:root:not([data-customer-shortcuts="on"]) .record-workspace kbd,
[data-shortcut-help][hidden],
:root[data-customer-shortcuts="off"] [data-shortcut-help] { display: none !important; }
@container (max-width: 64rem) {
 .record-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 42rem) {
 .record-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .record-panel > .panel__head { padding: var(--naua-space-4); }
}