/* ============================================================================
   HUSKER HUB, presentation layer.

   Light Husker theme, same tokens the storefront ships (design-tokens.css) and
   the same card idiom as component-product-card.css: white card, navy band with
   a 4px scarlet top hairline, navy hover glow. Scarlet is reserved for primary
   actions and alerts; navy carries nav, headers and type.

   Layout: fixed 230px rail on the left, content pane to the right that swaps
   sections in place. Under 900px the rail becomes a slide-in drawer.
   ========================================================================== */

/* ---------------------------------------------------------------- reset --- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  min-height: 100vh;
  background-color: var(--off-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; }

:focus-visible { outline: 2px solid var(--scarlet); outline-offset: 2px; }

/* --------------------------------------------------------------- shell --- */

.app { min-height: 100vh; }

/* ---- left rail ---- */

.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 230px;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border-right: 2px solid var(--navy);
  border-top: 4px solid var(--scarlet);
  transition: transform var(--transition-base);
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-md);
  border-bottom: 1px solid var(--border);
  text-align: left;
  width: 100%;
}

.rail__logo {
  width: 36px; height: 36px;
  flex: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.rail__word {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--navy);
  text-transform: uppercase;
}
.rail__word em { font-style: normal; color: var(--scarlet); }

.rail__sub {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}

.rail__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__label {
  padding: var(--space-sm) var(--space-md) var(--space-xs);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}

.navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px var(--space-md) 10px 13px;
  border-left: 3px solid transparent;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--charcoal);
  text-align: left;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.navitem svg { width: 18px; height: 18px; flex: none; }

.navitem:hover { background-color: var(--cream); color: var(--navy); }

.navitem.on {
  background-color: var(--navy);
  border-left-color: var(--scarlet);
  color: var(--white);
}

.navitem .navitem__ext { margin-left: auto; opacity: 0.55; }

/* count pill on Orders */
.navitem__count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background-color: var(--cream);
  color: var(--navy);
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-align: center;
}
.navitem.on .navitem__count { background-color: rgba(255, 255, 255, 0.18); color: var(--white); }
.navitem__count.alert { background-color: var(--scarlet); color: var(--white); }

/* ---- nested rail item: Orders sits under POS ----
   Always visible, never a disclosure. It is indented past the parent's icon
   column and hung off an elbow connector drawn at the centre line of that icon
   (border-left 3px + padding-left 13px + half of an 18px icon = 25px), so the
   rule reads as "this belongs to POS" without any JavaScript. The parent keeps
   the solid navy active fill; the child takes a pale navy wash instead, so POS
   active and Orders active never look like the same state. Mobile needs no
   special case: the drawer is this same rail translated into view. */
.navitem--sub {
  padding-left: 36px;
  font-size: 13px;
  color: var(--slate);
}

.navitem--sub svg { width: 15px; height: 15px; }

/* the drop from POS, and the elbow into the label */
.navitem--sub::before,
.navitem--sub::after {
  content: "";
  position: absolute;
  background-color: var(--border);
  pointer-events: none;
}
.navitem--sub::before { left: 24px; top: -3px; bottom: 50%; width: 2px; }
.navitem--sub::after  { left: 24px; top: calc(50% - 1px); width: 8px; height: 2px; }

.navitem--sub:hover { background-color: var(--cream); color: var(--navy); }

.navitem--sub.on {
  background-color: #EAF0F9;
  border-left-color: transparent;
  color: var(--navy);
  font-weight: var(--weight-bold);
}
.navitem--sub.on::before,
.navitem--sub.on::after { background-color: var(--scarlet); }

/* the pill has to stay legible on the pale child fill, alert included */
.navitem--sub.on .navitem__count { background-color: var(--navy); color: var(--white); }
.navitem--sub.on .navitem__count.alert,
.navitem.on .navitem__count.alert { background-color: var(--scarlet); color: var(--white); }

/* rail footer: identity + sign out, pinned */
.rail__foot {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  background-color: var(--off-white);
}

.uchip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-sm);
  min-width: 0;
}

.uchip .av {
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background-color: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.uchip .em {
  min-width: 0;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signout {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--navy);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.signout:hover { background-color: var(--navy); color: var(--white); }

/* ---- content pane ---- */

.main {
  margin-left: 230px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.titlebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  background-color: var(--white);
  border-bottom: 2px solid var(--navy);
}

.titlebar h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.1;
}

.titlebar .sub {
  font-size: 12px;
  color: var(--slate);
  margin-top: 2px;
}

.titlebar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }

.hamburger {
  display: none;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  place-items: center;
  color: var(--navy);
}
.hamburger:hover { border-color: var(--navy); }

.pane { padding: var(--space-xl); max-width: 1180px; width: 100%; }

/* --------------------------------------------------------------- cards --- */

.card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Panel: white card, navy head band with a 4px scarlet top hairline.
   Straight carry of the storefront product-card language. */
.panel {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  background-color: var(--navy);
  border-top: 4px solid var(--scarlet);
}

.panel__head h2 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
}

.panel__head .note { margin-left: auto; font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }

.panel__body { padding: var(--space-md); }

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

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}

.stat .n {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--navy);
}

.stat .l {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* alert stat: the only place scarlet appears on the dashboard */
.stat.alert { border-top-color: var(--scarlet); }
.stat.alert .n { color: var(--scarlet); }

.substats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}

.substat { padding: var(--space-sm) 0; }
.substat .n { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-semibold); color: var(--navy); line-height: 1; }
.substat .l { margin-top: 4px; font-size: 10.5px; font-weight: var(--weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }

.statnote { margin-top: var(--space-md); font-size: 13px; color: var(--slate); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover { background-color: var(--navy); color: var(--white); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:disabled:hover { background-color: var(--white); color: var(--navy); }

.btn--primary { background-color: var(--scarlet); border-color: var(--scarlet); color: var(--white); }
.btn--primary:hover { background-color: var(--scarlet-dark); border-color: var(--scarlet-dark); color: var(--white); }
.btn--primary:disabled:hover { background-color: var(--scarlet); color: var(--white); }

.btn--navy { background-color: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--navy:hover { background-color: var(--navy-dark); border-color: var(--navy-dark); }

.btn--sm { padding: 6px 12px; font-size: 11px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------- status dot --- */

.dot {
  width: 9px; height: 9px;
  flex: none;
  border-radius: var(--radius-full);
  background-color: var(--border);
}
.dot.on { background-color: var(--success); }
.dot.off { background-color: var(--scarlet); }

.muted { color: var(--slate); font-size: 12.5px; }
.empty { padding: var(--space-2xl) var(--space-md); text-align: center; color: var(--slate); font-size: 14px; }

/* ------------------------------------------------------------- toolbar --- */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.field {
  flex: 1;
  min-width: 180px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--charcoal);
  font-size: 14px;
  outline: none;
}
.field:focus { border-color: var(--navy); }
.field::placeholder { color: var(--slate); opacity: 0.75; }

/* -------------------------------------------------------------- tables --- */

.tblwrap { overflow-x: auto; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.tbl thead th {
  padding: 9px var(--space-md);
  background-color: var(--cream);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: left;
  white-space: nowrap;
}

.tbl tbody td {
  padding: 11px var(--space-md);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.tbl tbody tr:last-child td { border-bottom: 0; }

.tbl tbody tr.ocard { cursor: pointer; transition: background-color var(--transition-fast); }
.tbl tbody tr.ocard:hover { background-color: var(--off-white); }
.tbl tbody tr.ocard:hover td:first-child { box-shadow: inset 3px 0 0 var(--scarlet); }

.tbl .ref { font-family: var(--font-display); font-size: 14.5px; font-weight: var(--weight-semibold); letter-spacing: 0.04em; color: var(--navy); }
.tbl .sub { font-size: 11.5px; color: var(--slate); }
.tbl .num { text-align: right; font-weight: var(--weight-semibold); white-space: nowrap; }

.src {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* --------------------------------------------------------- status chip --- */

.st {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.st-received   { color: #8A5A00; background-color: #FCF3E3; border-color: #EBD9B4; }
.st-paid       { color: var(--success); background-color: #EAF4EB; border-color: #C3E0C5; }
.st-sent-to-sdp{ color: var(--navy); background-color: #EAF0F9; border-color: #C6D5EC; }
.st-shipped    { color: #1B5E20; background-color: #E4F1E5; border-color: #B6D9B9; }
.st-unknown    { color: var(--slate); background-color: #F2F2F2; border-color: var(--border); }

/* ------------------------------------------------------ recent activity --- */

.feed { display: flex; flex-direction: column; }

.feed__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.feed__row:last-child { border-bottom: 0; }
.feed__row .when { margin-left: auto; font-size: 11.5px; color: var(--slate); white-space: nowrap; }
.feed__row .who { color: var(--slate); font-size: 12px; }
.feed__row b { color: var(--navy); font-family: var(--font-display); letter-spacing: 0.03em; }

/* --------------------------------------------------------- order drawer --- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: rgba(26, 26, 26, 0.42);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.scrim.show { opacity: 1; }

.drawer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background-color: var(--white);
  border-top: 4px solid var(--scarlet);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-drawer);
  transform: translateY(102%);
  transition: transform var(--transition-base);
}
.drawer.show { transform: translateY(0); }

@media (min-width: 900px) {
  .drawer {
    inset: 0 0 0 auto;
    width: 460px;
    max-height: none;
    border-radius: 0;
    border-top: 0;
    border-left: 4px solid var(--scarlet);
    transform: translateX(102%);
  }
  .drawer.show { transform: translateX(0); }
}

.dhead {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--navy);
  color: var(--white);
}
.dhead .oref { font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-semibold); letter-spacing: 0.05em; }
.dhead .osub { font-size: 11.5px; color: rgba(255, 255, 255, 0.72); }

.dx {
  margin-left: auto;
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  color: var(--white);
}
.dx:hover { background-color: rgba(255, 255, 255, 0.14); }

.dbody {
  overflow-y: auto;
  padding: var(--space-md) var(--space-md) calc(var(--space-xl) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.dsec h4 {
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}

.kv { display: grid; grid-template-columns: 96px 1fr; gap: 5px var(--space-md); font-size: 13px; }
.kv .k { color: var(--slate); }
.kv .v { color: var(--charcoal); word-break: break-word; }

.items { display: flex; flex-direction: column; gap: 6px; }
.item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.item .nm b { display: block; font-weight: var(--weight-semibold); color: var(--navy); }
.item .nm span { font-size: 11.5px; color: var(--slate); }
.item .pz { text-align: right; white-space: nowrap; color: var(--slate); }
.item.un { border-color: #EBD9B4; background-color: #FCF9F2; }
.item.un .nm span { color: #8A5A00; font-weight: var(--weight-semibold); }

.track {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid #C3E0C5;
  border-radius: var(--radius-md);
  background-color: #EAF4EB;
  font-size: 13.5px;
}
.track b { letter-spacing: 0.04em; color: #1B5E20; }
.track a { margin-left: auto; font-size: 11.5px; font-weight: var(--weight-bold); color: var(--success); white-space: nowrap; }

.pushwrap { display: flex; flex-direction: column; gap: var(--space-sm); }

.pushmsg {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--off-white);
  font-size: 12.5px;
  color: var(--slate);
  word-break: break-word;
}
.pushmsg.ok { border-color: #C3E0C5; background-color: #EAF4EB; color: #1B5E20; }
.pushmsg.bad { border-color: #F0C2CA; background-color: #FDEEF0; color: var(--scarlet-dark); }

pre.raw {
  max-height: 220px;
  padding: 11px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--off-white);
  font-size: 11px;
  line-height: 1.5;
  color: var(--slate);
}

/* =========================================================== POS section === */

.pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 1040px) { .pos { grid-template-columns: minmax(0, 1fr) 330px; } }

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--space-md);
}

/* Product tile: the storefront card idiom, tightened for a register. */
.ptile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  background-color: var(--white);
  border: 1.5px solid #b7c3d9;
  border-radius: 14px;
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.ptile::before {
  content: "";
  display: block;
  flex-shrink: 0;
  height: 14px;
  background-color: var(--navy);
  border-top: 4px solid var(--scarlet);
}

.ptile:hover {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(27, 58, 107, 0.28), 0 14px 44px rgba(27, 58, 107, 0.30);
  transform: translateY(-3px);
}
.ptile:active { transform: translateY(0); }

.thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--white);
  border-bottom: 1px solid var(--border);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.thumb .mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--weight-bold);
  color: var(--border);
}

.ptile__info { padding: 10px; }
.pn {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--navy);
  min-height: 2.5em;
}
.pp { margin-top: 4px; font-family: var(--font-display); font-size: 15px; font-weight: var(--weight-semibold); color: var(--charcoal); }
.pp small { font-family: var(--font-body); font-size: 10.5px; font-weight: var(--weight-medium); color: var(--slate); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- ticket ---- */

.ticket {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
@media (min-width: 1040px) {
  .ticket { position: sticky; top: 90px; }
  /* On desktop the ticket is always in its column: the bar and its dismiss
     button are mobile-sheet affordances only. */
  .posbar { display: none !important; }
  .ticket__close { display: none; }
}

.ticket__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  background-color: var(--navy);
  border-top: 4px solid var(--scarlet);
}
.ticket__head h2 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
}
.ticket__head .cnt { margin-left: auto; font-size: 11.5px; color: rgba(255, 255, 255, 0.75); }

.ticket__body { padding: var(--space-md); }

.trow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.trow:last-of-type { border-bottom: 0; }
.trow .tn { flex: 1; min-width: 0; font-size: 13px; font-weight: var(--weight-semibold); line-height: 1.25; color: var(--navy); }
.trow .ts { display: block; font-size: 11px; font-weight: var(--weight-regular); color: var(--slate); }
.trow b { min-width: 20px; text-align: center; font-size: 14px; }
.trow .amt { width: 66px; text-align: right; font-weight: var(--weight-bold); font-size: 13px; }

.qbtn {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--navy);
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1;
}
.qbtn:hover { border-color: var(--navy); background-color: var(--cream); }

.paytog { display: flex; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-sm); }
.paytog button {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--slate);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.paytog button:hover { border-color: var(--navy); color: var(--navy); }
.paytog button.on { border-color: var(--navy); background-color: var(--navy); color: var(--white); }

.custrow { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }

.totalline {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) 0 var(--space-md);
  border-top: 2px solid var(--navy);
  margin-top: var(--space-sm);
}
.totalline span {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.totalline b { margin-left: auto; font-family: var(--font-display); font-size: 28px; font-weight: var(--weight-bold); color: var(--navy); line-height: 1; }

/* mobile ticket bar + sheet behaviour */
.posbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: none;
  align-items: center;
  gap: var(--space-md);
  padding: 11px var(--space-md) calc(11px + env(safe-area-inset-bottom));
  background-color: var(--navy);
  border-top: 4px solid var(--scarlet);
  color: var(--white);
}
.posbar.show { display: flex; }
.posbar .n { font-size: 12.5px; font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.85); }
.posbar .t { margin-left: auto; font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-bold); }
.posbar .open {
  padding: 7px 14px;
  border: 2px solid var(--white);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

@media (max-width: 1039px) {
  .ticket {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-modal);
    max-height: 86vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-drawer);
    transform: translateY(102%);
    transition: transform var(--transition-base);
  }
  .ticket.open { transform: translateY(0); }
  .ticket__body { padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); }
}

/* ---- size picker modal ---- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

.modal__card {
  width: 100%;
  max-width: 380px;
  max-height: 82vh;
  overflow-y: auto;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--scarlet);
  box-shadow: var(--shadow-dropdown);
}
.modal__head { padding: var(--space-md); border-bottom: 1px solid var(--border); }
.modal__head h2 { font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-semibold); color: var(--navy); line-height: 1.2; }
.modal__head .sub { font-size: 12.5px; color: var(--slate); margin-top: 2px; }
.modal__body { padding: var(--space-md); }

.sizebtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: 12px 14px;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--white);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--charcoal);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.sizebtn:hover { border-color: var(--navy); background-color: var(--cream); }
.sizebtn .pr { font-family: var(--font-display); font-size: 16px; color: var(--navy); }

/* ------------------------------------------------------------- backend --- */

.intlist { display: flex; flex-direction: column; }

.introw {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}
.introw:last-child { border-bottom: 0; }
.introw .nm { font-weight: var(--weight-semibold); color: var(--navy); }
.introw .ds { font-size: 12.5px; color: var(--slate); margin-top: 2px; }
.introw .ep { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--slate); margin-top: 3px; word-break: break-all; }
.introw .state { margin-left: auto; flex: none; }

/* ---------------------------------------------------------------- toast --- */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  z-index: var(--z-modal);
  max-width: 88vw;
  padding: 11px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-md);
  background-color: var(--white);
  box-shadow: var(--shadow-dropdown);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--charcoal);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { border-left-color: var(--scarlet); color: var(--scarlet-dark); }

/* ------------------------------------------------------------- sign in --- */

body.gated > *:not(#authGate) { display: none !important; }

#authGate {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  overflow-y: auto;
  background-color: var(--cream);
}

/* The card wears the vial-label header: a scarlet stripe over a navy band. */
.authbox {
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  text-align: center;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-top: 5px solid var(--scarlet);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
}

.authband {
  padding: 12px var(--space-md);
  background-color: var(--navy);
}

.authband span {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--white);
}

.authbody {
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

.authlogo {
  width: 68px; height: 68px;
  margin: 0 auto var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.authword {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1;
}
.authword em { font-style: normal; color: var(--scarlet); }

.authmsg {
  padding: 10px 12px;
  margin-bottom: var(--space-md);
  border: 1px solid #F0C2CA;
  border-left: 3px solid var(--scarlet);
  border-radius: var(--radius-md);
  background-color: #FDEEF0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--scarlet-dark);
  text-align: left;
}

.gbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--navy);
  font-size: 14px;
  font-weight: var(--weight-bold);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.gbtn:hover { background-color: var(--cream); }
.gbtn:disabled { opacity: 0.55; cursor: default; }
.gbtn svg { width: 18px; height: 18px; flex: none; }

.authonly {
  margin-top: var(--space-md);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.authp { margin-top: var(--space-sm); font-size: 12px; line-height: 1.6; color: var(--slate); text-align: left; }

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 899px) {
  .rail {
    transform: translateX(-100%);
    box-shadow: var(--shadow-drawer);
  }
  .rail.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .hamburger { display: grid; }
  .titlebar { padding: var(--space-sm) var(--space-md); }
  .titlebar h1 { font-size: 17px; }
  .pane { padding: var(--space-md); }
  .railscrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background-color: rgba(26, 26, 26, 0.42);
  }
}

@media (min-width: 900px) {
  .railscrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}

/* ----------------------------------------------------------------- comms ---
   Consent ledger + the read-only Snipcart template map. */

/* Section tabs. Scrolls sideways on a narrow phone instead of wrapping. */
.tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding-bottom: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.tab {
  flex: none;
  padding: 9px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--slate);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--navy); }
.tab.on { color: var(--navy); border-bottom-color: var(--scarlet); }

/* The generated signing link, ready to copy. */
.linkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--off-white);
}
.linkbox code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--navy);
  word-break: break-all;
}
.linkbox .btn { flex: none; }

.linkbtn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: var(--navy);
  cursor: pointer;
}
.linkbtn:hover { border-color: var(--navy); background-color: var(--off-white); }

/* A typed signature reads as a signature, not as data. */
.sigcell { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 14px; color: var(--charcoal); }

.st-sent   { color: #8A5A00; background-color: #FCF3E3; border-color: #EBD9B4; }
.st-signed { color: #1B5E20; background-color: #E4F1E5; border-color: #B6D9B9; }

.tpllink {
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.tpllink:hover { text-decoration: underline; }
.panel__head .note--link { color: var(--white); text-decoration: underline; }
.introw .state { display: flex; align-items: center; gap: var(--space-sm); }

/* ---- the hub's own email kit ----
 * Snipcart's templates are a list of pointers. Ours are real files in /emails/,
 * so this block is the viewer: a device-toggled render of the actual HTML in a
 * sandboxed frame, the download rail, and the placeholder strip. */

.kitrail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
}
.kitrail .kitnote { color: var(--slate); font-size: 12px; }

/* The head band carries a close control, so it needs a button that reads as the
 * .note--link anchor beside it. */
.panel__head .note--btn {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: var(--white);
  text-decoration: underline;
  cursor: pointer;
}

.tplbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.tplbar .tplsp { flex: 1 1 auto; }

.devtog {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.devbtn {
  padding: 7px 13px;
  border: 0;
  background-color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--slate);
  cursor: pointer;
}
.devbtn + .devbtn { border-left: 1px solid var(--border); }
.devbtn.on { background-color: var(--navy); color: var(--white); }

/* The stage is deliberately grey: the templates are white cards and they have to
 * read as a page, not as part of the hub. 600px does not fit a phone, so the
 * stage scrolls sideways rather than lying about the width. */
.pvstage {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: #ECECEC;
  overflow-x: auto;
  text-align: center;
}
.pvframe {
  display: inline-block;
  width: 600px;
  height: 460px;
  border: 1px solid var(--border);
  background-color: var(--white);
  vertical-align: top;
}
.pvframe.mobile { width: 375px; }

.phwrap { margin-top: var(--space-md); }
.phhead {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.phlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-sm); }
.ph {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--off-white);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--navy);
}
/* A raw block is substituted as HTML, not escaped. Flag it so nobody feeds it
 * customer-typed text by accident. */
.ph--raw { border-color: #F0C2CA; background-color: #FDEEF0; color: var(--scarlet-dark); }

/* ---- send confirmation ----
 * Nothing leaves the hub without the operator reading the address first. */
.mailbox {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid #EBD9B4;
  border-left: 4px solid #C8102E;
  border-radius: var(--radius-md);
  background-color: #FCF9F2;
}
.mailbox .mailq { font-size: 13.5px; line-height: 1.6; color: var(--charcoal); }
.mailbox .mailq b { color: var(--navy); }
.mailbox .mailfrom { margin-top: 5px; font-size: 12px; line-height: 1.6; color: var(--slate); }
.mailbox .mailacts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* ========================================================= address book ===
 * The Customers section reuses the ledger's table and the order drawer. What is
 * new here is the editable form inside that drawer, and the customer block the
 * register grew: everything below serves one of those two. */

/* ---- drawer edit form ---- */

.dform { display: flex; flex-direction: column; gap: var(--space-sm); }

.dfield { min-width: 0; }
.dfield > label {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.dform .field { width: 100%; min-width: 0; }

.dgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
/* City takes the room; the state and ZIP boxes only need to fit what goes in them. */
.dgrid3 { display: grid; grid-template-columns: minmax(0, 1fr) 76px 104px; gap: var(--space-sm); }

.dform textarea.field { min-height: 70px; resize: vertical; font-family: var(--font-body); line-height: 1.5; }

.savebar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.savebar .muted { margin-left: auto; }

/* ---- customer block on the register ----
 * Collapsed to a single row by default: a walk-up who wants no receipt should
 * cost the operator zero taps. */

.custblock {
  margin: var(--space-md) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.custblock.on { border-color: var(--navy); }

.custblock__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 10px 12px;
  background-color: var(--off-white);
  color: var(--navy);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  text-align: left;
}
.custblock__toggle:hover { background-color: var(--cream); }
.custblock__toggle .ico {
  width: 20px; height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  font-size: 13px;
  line-height: 1;
}
.custblock__toggle .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custblock__toggle .chev { flex: none; font-size: 11px; color: var(--slate); transition: transform var(--transition-fast); }
.custblock.on .custblock__toggle .chev { transform: rotate(90deg); }
/* Filled in from the address book rather than typed at the counter. */
.custblock__toggle .tag {
  flex: none;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background-color: #EAF0F9;
  color: var(--navy);
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.custblock__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) 12px 12px;
  border-top: 1px solid var(--border);
}
.custblock__body .field { width: 100%; min-width: 0; }
.cust3 { display: grid; grid-template-columns: minmax(0, 1fr) 68px 92px; gap: var(--space-sm); }

.custclear {
  align-self: flex-start;
  padding: 4px 0;
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: var(--scarlet);
  background: none;
}
.custclear:hover { text-decoration: underline; }

/* ---- type-ahead ---- */

.acwrap { position: relative; }

.acmenu {
  position: absolute;
  inset: calc(100% + 3px) 0 auto 0;
  z-index: var(--z-dropdown);
  max-height: 232px;
  overflow-y: auto;
  background-color: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
}

.acrow {
  display: block;
  width: 100%;
  padding: 8px 11px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background-color: var(--white);
}
.acrow:last-child { border-bottom: 0; }
.acrow:hover, .acrow.on { background-color: var(--cream); }
.acrow .nm { font-size: 13px; font-weight: var(--weight-semibold); color: var(--navy); }
.acrow .dt { font-size: 11px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acmenu .acnote { padding: 8px 11px; font-size: 11.5px; color: var(--slate); }

/* ----------------------------------------------- dashboard brand head --- */
/* The hub opens on the mark. Same panel language as everything else: white
   card, 4px scarlet hairline on top, navy type. */

.brandhead { border-top: 4px solid var(--scarlet); }

.brandhead__body {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
}

.brandhead__logo {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brandhead__word {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.brandhead__word em { font-style: normal; color: var(--scarlet); }

.brandhead__rule {
  width: 56px;
  height: 3px;
  margin: 10px 0;
  background-color: var(--navy);
}

.brandhead__hello { font-size: 14px; color: var(--slate); }

@media (max-width: 620px) {
  .brandhead__body { gap: var(--space-md); padding: var(--space-md); }
  .brandhead__logo { width: 60px; height: 60px; }
  .brandhead__word { font-size: 22px; }
}

/* -------------------------------------------------- catalog price edit --- */

/* The price cell reads as text until it is clicked, so the table stays a table. */
.priceedit {
  font: inherit;
  font-weight: var(--weight-semibold);
  color: var(--navy);
  background: none;
  padding: 2px 6px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.priceedit:hover { border-color: var(--scarlet); color: var(--scarlet); }

.priceform { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.priceform .cur { font-weight: var(--weight-semibold); color: var(--slate); }
.priceform .pinp { width: 92px; padding: 5px 8px; text-align: right; }

.stagepill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--scarlet);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--scarlet);
  white-space: nowrap;
}

.warnline { margin-top: 3px; font-size: 11px; color: var(--slate); max-width: 46ch; }

/* ------------------------------------------------------ pending publish --- */

.pending .pending__lead { font-size: 13.5px; color: var(--slate); margin-bottom: var(--space-md); }

.pending__list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }

.pendrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: 10px var(--space-sm);
  border-bottom: 1px solid var(--border);
  background-color: var(--white);
}
.pendrow:last-child { border-bottom: 0; }
.pendrow__n { flex: 1 1 200px; font-size: 13.5px; color: var(--navy); }
.pendrow__n .sub { font-size: 11.5px; color: var(--slate); }
.pendrow__p { font-size: 14px; color: var(--navy); white-space: nowrap; }
.pendrow__p s { color: var(--slate); }
.pendrow__p .arrow { color: var(--scarlet); }
.pendrow__s { min-width: 68px; }

.statepill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: var(--off-white);
  border: 1px solid var(--border);
  color: var(--slate);
}
.statepill.ready { border-color: var(--scarlet); color: var(--scarlet); }

.pending__act {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.pending__cmd {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--off-white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-md);
}
.pending__cmd h3 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
}
.pending__cmd p { font-size: 13px; color: var(--slate); margin-bottom: var(--space-sm); max-width: 74ch; }

.cmd {
  padding: 10px 12px;
  margin-bottom: var(--space-sm);
  background-color: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Sits beside an editable price so the row says what it does. Fades up on hover
   or keyboard focus, and is always visible on touch, where there is no hover. */
.edithint {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.pricecell:hover .edithint,
.priceedit:focus-visible + .edithint { opacity: 0.85; }

@media (hover: none) {
  .edithint { opacity: 0.7; }
}

/* ------------------------------------------------------ authorized users ---
   The allowlist panel at the top of Backend. Same table idiom as the ledger,
   with an add row above it and a role chip built on the .st shape. */

.usradd {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.usradd .field { flex: 1 1 220px; }

/* a select styled as a field, with room for the native arrow */
.usradd .usrrole {
  flex: 0 0 auto;
  min-width: 150px;
  padding-right: 30px;
  cursor: pointer;
}

.usrnote { line-height: 1.7; margin-bottom: var(--space-md); }

.usrmail { font-weight: var(--weight-semibold); color: var(--navy); word-break: break-all; }
.usrmail .you {
  margin-left: 6px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* role chip: the status-chip shape, coloured by standing rather than by state */
.rl {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rl-owner       { color: var(--scarlet); background-color: #FBEAED; border-color: #F0C4CC; }
.rl-admin       { color: var(--navy); background-color: #EAF0F9; border-color: #C6D5EC; }
.rl-staff       { color: var(--slate); background-color: #F2F2F2; border-color: var(--border); }
.rl-fulfillment { color: #1B5E20; background-color: #E4F1E5; border-color: #B6D9B9; }

/* Remove is destructive, so it reads scarlet on hover and nowhere else. */
.usrx {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--slate);
  background-color: var(--white);
}
.usrx:hover { border-color: var(--scarlet); color: var(--scarlet); }
.usrx:disabled { opacity: 0.45; cursor: default; }
.usrx:disabled:hover { border-color: var(--border); color: var(--slate); }

/* why a row has no Remove button, said rather than left blank */
.usrlock { font-size: 11px; color: var(--slate); white-space: nowrap; }

/* The letter behind a product thumb is a fallback for a missing image, not a
   design element. When the image is there it should not show through, and the
   onerror handler removes the <img> so :has() is an accurate test. */
.thumb:has(img) .mono { display: none; }