/* ============================================================
   PRINTOK — NEO-BRUTALIST DESIGN SYSTEM
   ============================================================ */

/* --- DESIGN TOKENS --- */
:root {
  color-scheme: light;

  /* Colors */
  --color-black:         #0d0d0d;
  --color-white:         #fafaf8;
  --color-paper:         #f5f2ec;
  --color-paper-dark:    #ece8df;
  --color-ink:           #1a1a1a;

  /* Brand Accents */
  --color-primary:       #0e5e6f;
  --color-primary-hover: #0a4a58;
  --color-primary-active:#073a45;
  --color-primary-light: #d9ecef;
  --color-secondary:     #d99a1e;
  --color-secondary-light: #fbefd4;
  --color-accent-mint:   #7fa37a;
  --color-accent-mint-light: #e3ecdf;
  --color-accent-coral:  #d0674b;
  --color-accent-coral-light: #f6e1da;
  --color-accent-sky:    #4f6d8f;

  /* Semantic */
  --color-success:       #1db87a;
  --color-success-light: #e3ecdf;
  --color-warning:       #f5a623;
  --color-warning-light: #fff3d6;
  --color-danger:        #e02020;
  --color-danger-light:  #f6e1da;
  --color-info:          #4f6d8f;
  --color-info-light:    #e1e8f0;

  /* Surface */
  --color-surface:       #ffffff;
  --color-surface-muted: #f0ede6;
  --color-border:        #0d0d0d;
  --color-border-muted:  #c8c4bc;

  /* Paper grain overlay */
  --color-grain:         rgba(0,0,0,0.04);

  /* Fixed ink, for surfaces that stay light in every theme (the QR poster) */
  --color-ink-muted:     #55534e;
  --color-paper-tint:    #f0ede6;

  /* Desk surface the app sits on at desktop widths */
  --color-desk:          #e2ddd3;
  --color-desk-dot:      #0d0d0d;

  /* A warmer raised surface, for callouts that sit on top of a card */
  --color-surface-alt:   #fffbe6;

  /* Accent text: readable on the matching --color-*-light tint */
  --color-primary-text:  var(--color-primary);
  --color-success-text:  #0f7a50;
  --color-warning-text:  #b87000;
  --color-danger-text:   #b42318;
  --color-info-text:     #1a7ec0;

  /* Terminal-style command blocks */
  --color-code-bg:       #111111;
  --color-code-text:     #fafaf8;

  /* Neutral "muted" badge */
  --color-badge-muted-bg:   #e6e6e6;
  --color-badge-muted-text: #444444;

  /* Text */
  --color-text-primary:  #0d0d0d;
  --color-text-secondary:#4a4845;
  --color-text-muted:    #888880;
  --color-text-on-dark:  #fafaf8;

  /* Neo-Brutalist Shadows */
  --shadow-color: var(--color-black);
  --shadow-xs:  2px 2px 0 var(--shadow-color);
  --shadow-sm:  3px 3px 0 var(--shadow-color);
  --shadow-md:  4px 4px 0 var(--shadow-color);
  --shadow-lg:  6px 6px 0 var(--shadow-color);
  --shadow-xl:  8px 8px 0 var(--shadow-color);

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Borders */
  --border:      2px solid var(--color-border);
  --border-muted:2px solid var(--color-border-muted);

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;

  /* Spacing */
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-8:     32px;
  --space-10:    40px;
  --space-12:    48px;
  --space-16:    64px;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
}

/* --- RESET & BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-paper);
  color: var(--color-text-primary);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; }

/* --- UTILITY CLASSES --- */
.hidden { display: none !important; }

/* Screens, panes and pills are toggled with the `hidden` attribute. Any class that
   sets an explicit `display` would otherwise beat the UA's [hidden] rule. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.app-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.page-container {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .app-wrapper {
    background-color: var(--color-desk);
    background-image: radial-gradient(var(--color-desk-dot) 0.8px, transparent 0.8px);
    background-size: 18px 18px;
    padding: var(--space-8) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .page-container {
    max-width: 620px;
    background: var(--color-paper);
    border: 3px solid var(--color-border);
    box-shadow: 10px 10px 0 var(--color-black);
    border-radius: 16px;
    padding: var(--space-6);
  }

}

/* --- GLOBAL NAVIGATION BAR --- */
.global-nav-bar {
  display: flex;
  background: var(--color-black);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
  margin-bottom: 8px;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

.nav-pill {
  flex: 1;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  /* The bar stays black in both themes, so its text is the fixed on-dark
     colour rather than the page colour, which inverts. */
  color: var(--color-text-on-dark);
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 150ms ease;
}

.nav-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.nav-pill.active {
  background: var(--color-secondary);
  color: var(--color-black);
  box-shadow: var(--shadow-xs);
}

/* --- DOCUMENT PREVIEW BOX --- */
.document-preview-box {
  margin-top: 14px;
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.preview-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.preview-viewport {
  background: var(--color-paper-dark);
  border: 1px dashed var(--color-border-muted);
  border-radius: 6px;
  min-height: 180px;
  max-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.preview-viewport img,
.preview-viewport canvas {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 4px;
}

/* Business Setup's Pricing and Discounts, framed in the dashboard. */
.is-embedded .app-wrapper {
  background: var(--color-paper);
  background-image: none;
  padding: 0;
  min-height: 0;
}
.is-embedded .page-container {
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
}
.is-embedded .app-header .brand,
.is-embedded .header-actions > :not(#btnSaveAll),
.is-embedded .setup-heading,
.is-embedded .app-footer,
.is-embedded .setup-tab:not([data-tab="tabRates"]):not([data-tab="tabDiscounts"]) {
  display: none;
}

/* Line icons from /icons.svg (Lucide, ISC). Sized and coloured by the text
   around them, so an icon in a button, a heading or an empty state needs no
   rule of its own. */
.icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ID card page: the A4 preview beside its size, with a draggable corner. */
.id-preview {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-block: 10px 12px;
}
#idPreview {
  width: 150px;
  max-width: 45%;
  height: auto;
  flex: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  touch-action: none;
}

/* Paper is white whatever the theme; its shape is set from app.js. */
.preview-sheet {
  background: #fff;
  padding: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 10px auto;
}

.preview-viewport .preview-sheet > img,
.preview-viewport .preview-sheet > canvas {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0;
}

.preview-fallback {
  text-align: center;
  padding: 20px;
}

.fallback-icon {
  font-size: 36px;
  margin-bottom: 6px;
}

/* ============================================================
   HEADER
   ============================================================ */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-black);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
}

/* Crop-mark decoration */
.app-header::before,
.app-header::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: rgba(255,255,255,0.2);
  border-style: solid;
}
.app-header::before {
  top: 5px; left: 5px;
  border-width: 1px 0 0 1px;
}
.app-header::after {
  bottom: 5px; right: 5px;
  border-width: 0 1px 1px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The logo is /favicon.svg, so the tab icon and the header are one file. */
.brand-mark {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
}

.brand-text {}

.brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-on-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-tagline {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

.shop-status-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(127, 163, 122, 0.15);
  border: 1px solid rgba(127, 163, 122, 0.4);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
}

.shop-status-dot {
  width: 7px;
  height: 7px;
  background: var(--color-accent-mint);
  border-radius: 50%;
  animation: blink 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.shop-status-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent-mint);
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card--accent {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.card--success {
  background: var(--color-success-light);
  border-color: var(--color-success);
}

.card--danger {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.display-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.section-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.label-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.meta-text {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-md);
  border: var(--border);
  padding: 11px 20px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Primary */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-lg);
}
.btn-primary:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-xs);
}

/* Secondary */
.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-black);
  box-shadow: var(--shadow-md);
}
.btn-secondary:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-lg);
}
.btn-secondary:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-xs);
}

/* Outline */
.btn-outline {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover:not(:disabled) {
  background: var(--color-paper);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-md);
}
.btn-outline:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-paper);
  border-color: var(--color-border-muted);
}

/* Danger */
.btn-danger {
  background: var(--color-danger);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-danger:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-lg);
}
.btn-danger:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-xs);
}

/* Disabled */
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Sizes */
.btn-sm { font-size: 12px; padding: 7px 12px; }
.btn-lg { font-size: 16px; padding: 14px 28px; }
.btn-full { width: 100%; }

/* Icon button */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ============================================================
   BADGES / STATUS CHIPS
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-neutral  { background: var(--color-surface-muted); border-color: var(--color-border-muted); color: var(--color-text-secondary); }
.badge-queued   { background: var(--color-primary-light);  border-color: var(--color-primary);       color: var(--color-primary-text); }
.badge-download { background: var(--color-info-light);     border-color: var(--color-info);          color: var(--color-info-text); }
.badge-printing { background: var(--color-warning-light);  border-color: var(--color-warning);       color: var(--color-warning-text); }
.badge-success  { background: var(--color-success-light);  border-color: var(--color-success);       color: var(--color-success-text); }
.badge-danger   { background: var(--color-danger-light);   border-color: var(--color-danger);        color: var(--color-danger-text); }

/* ============================================================
   INPUTS & FORMS
   ============================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-hint {
  font-size: 11px;
  color: var(--color-text-muted);
}

.form-input {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  width: 100%;
  transition: box-shadow var(--transition-base);
  outline: none;
  -webkit-appearance: none;
}

.form-input:focus {
  box-shadow: var(--shadow-sm);
}

.form-input.input-sm {
  padding: 7px 10px;
  font-size: 14px;
  width: 72px;
  text-align: center;
}

.form-error {
  font-size: 12px;
  color: var(--color-danger);
  font-weight: 500;
  display: none;
}
.form-error.visible { display: block; }

/* ============================================================
   SEGMENTED CONTROL
   ============================================================ */

.segmented {
  display: flex;
  background: var(--color-paper);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.segment-btn {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.segment-btn.active {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   COUNTER CONTROL
   ============================================================ */

.counter-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.counter-btn {
  width: 34px;
  height: 34px;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.counter-btn:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
.counter-btn:active { transform: translate(1px,1px); box-shadow: none; }

.counter-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-primary);
  min-width: 28px;
  text-align: center;
}

/* ============================================================
   SETTING ROW
   ============================================================ */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-paper-dark);
}

.setting-row:last-child { border-bottom: none; }

.setting-label .label-text { margin-bottom: 2px; }

/* ============================================================
   DIVIDER
   ============================================================ */

.divider {
  height: 1px;
  background: var(--color-paper-dark);
  border: none;
}

/* ============================================================
   DROP ZONE
   ============================================================ */

.drop-zone {
  border: 2px dashed var(--color-border-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--color-paper);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.drop-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.drop-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: inset 0 0 0 3px var(--color-primary);
}

.drop-zone.has-file {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.drop-zone.has-error {
  border-style: solid;
  border-color: var(--color-danger);
  background: var(--color-danger-light);
}

.drop-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  pointer-events: none;
}

.drop-icon {
  width: 48px;
  height: 48px;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drop-icon svg { width: 24px; height: 24px; }

.drop-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.drop-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* File selected state */
.file-selected-display {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.file-selected-display.visible { display: flex; }

.file-icon-box {
  width: 36px;
  height: 36px;
  background: var(--color-danger-light);
  border: 1.5px solid var(--color-danger);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.file-icon-box svg { width: 18px; height: 18px; color: var(--color-danger); }

.file-info { flex: 1; min-width: 0; }

.file-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: 11px;
  color: var(--color-text-muted);
}

.file-remove-btn {
  width: 30px;
  height: 30px;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-danger);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.file-remove-btn:hover { background: var(--color-danger-light); }

/* ============================================================
   ACTION BAR (STICKY BOTTOM)
   ============================================================ */

.action-bar {
  position: sticky;
  bottom: var(--space-4);
  z-index: 10;
}

.action-bar-inner {
  background: var(--color-black);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.price-block {}

.price-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
}

.price-amount {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text-on-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}

.pay-btn {
  flex-shrink: 0;
  background: var(--color-secondary);
  color: var(--color-black);
  border: var(--border);
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pay-btn:hover:not(:disabled) {
  transform: translate(-1px,-1px);
  box-shadow: var(--shadow-lg);
}
.pay-btn:active:not(:disabled) {
  transform: translate(3px,3px);
  box-shadow: none;
}
.pay-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.pay-btn-loading {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: var(--color-black);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.pay-btn.loading .pay-btn-label { display: none; }
.pay-btn.loading .pay-btn-arrow { display: none; }
.pay-btn.loading .pay-btn-loading { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   LANDING SCREEN
   ============================================================ */

.landing-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-4);
  min-height: 60vh;
}

.landing-motif {
  width: 80px;
  height: 80px;
  background: var(--color-secondary);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-motif svg { width: 36px; height: 36px; }

.landing-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.landing-heading em {
  font-style: normal;
  background: var(--color-secondary);
  padding: 0 4px;
  border-radius: 2px;
}

.landing-body {
  font-size: 15px;
  color: var(--color-text-secondary);
  max-width: 320px;
  line-height: 1.6;
}

.landing-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 300px;
  text-align: left;
}

.landing-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.landing-step-num {
  width: 26px;
  height: 26px;
  background: var(--color-black);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.landing-step-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 320px;
  width: calc(100vw - 32px);
}

.toast {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  pointer-events: auto;
  animation: toast-in 0.15s ease forwards;
}

.toast.toast-out { animation: toast-out 0.2s ease forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to   { opacity: 0; transform: translateY(-8px); }
}

.toast-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid;
}
.toast-icon svg { width: 14px; height: 14px; }

.toast-success .toast-icon { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); }
.toast-warning .toast-icon { background: var(--color-warning-light); border-color: var(--color-warning); color: var(--color-warning); }
.toast-danger  .toast-icon { background: var(--color-danger-light);  border-color: var(--color-danger);  color: var(--color-danger); }
.toast-info    .toast-icon { background: var(--color-info-light);    border-color: var(--color-info);    color: var(--color-info); }

.toast-body { flex: 1; }

.toast-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.toast-msg {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.toast-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}
.toast-close:hover { color: var(--color-text-primary); }

/* ============================================================
   LOADING SKELETON
   ============================================================ */

.skeleton {
  background: linear-gradient(90deg, var(--color-paper-dark) 25%, var(--color-paper) 50%, var(--color-paper-dark) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton-text {
  height: 14px;
  border-radius: var(--radius-sm);
}

.skeleton-badge {
  width: 80px;
  height: 24px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.empty-icon {
  width: 64px;
  height: 64px;
  background: var(--color-paper-dark);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.empty-body {
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 260px;
  line-height: 1.6;
}

/* ============================================================
   INLINE DECORATIONS
   ============================================================ */

/* Registration-mark dot (print motif) */
.reg-mark {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.35;
}
.reg-mark::before,
.reg-mark::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.reg-mark::before {
  width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%);
}
.reg-mark::after {
  height: 1px; width: 100%; top: 50%; left: 0; transform: translateY(-50%);
}

/* Print-motif label tag */
.print-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1.5px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
}

/* ============================================================
   RESPONSIVE — TABLET+DESKTOP
   ============================================================ */

@media (min-width: 640px) {
  .page-container {
    padding: var(--space-6);
    max-width: 640px;
  }

  .card { padding: var(--space-6); }

  .drop-zone { padding: var(--space-12) var(--space-8); }

  .action-bar-inner { padding: var(--space-5) var(--space-6); }

  .price-amount { font-size: 30px; }

  .pay-btn { font-size: 15px; padding: 14px 28px; }
}

@media (min-width: 1024px) {
  body { display: flex; align-items: flex-start; }

  .app-wrapper { width: 100%; }

  /* Every page is a single-column stack (header → nav → main → footer).
     Widen the column rather than splitting it. */
  .page-container {
    max-width: 720px;
  }

  .page-container--wide {
    max-width: 1600px;
  }
}

/* Signup: wide enough for the rate grid and two-up fields, not a stretched form. */
@media (min-width: 768px) {
  .page-container.page-container--signup { max-width: 1080px; }
}

/* ============================================================
   PRINT MOTIF BACKGROUND TEXTURE
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      var(--color-grain) 39px,
      var(--color-grain) 40px
    );
  pointer-events: none;
  z-index: 0;
}

.app-wrapper { position: relative; z-index: 1; }

/* ============================================================
   KEYBOARD FOCUS VISIBILITY
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.btn:focus-visible,
.nav-pill:focus-visible,
.option-pill:focus-visible,
.dash-tab-btn:focus-visible,
.filter-pill:focus-visible,
.stepper-btn:focus-visible,
.btn-icon:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 3px;
}

.form-input:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 0;
}

/* A pill whose hidden radio has focus must show the ring too. */
.option-pill:has(input:focus-visible) {
  outline: 3px solid var(--color-black);
  outline-offset: 3px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

.agent-offline-banner {
  background: var(--color-warning-light);
  border: 2px solid var(--color-warning);
  border-left: 6px solid var(--color-warning);
  color: var(--color-warning-text);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  margin-bottom: 12px;
}

.shop-status-dot.offline {
  background: var(--color-danger);
  animation: none;
}

/* ============================================================
   PRICING MATRIX & REVENUE CALCULATOR
   ============================================================ */

.pricing-matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pricing-card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-xs);
}

.pricing-card-type {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.pricing-card-rate {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary);
  margin: 2px 0;
}

.pricing-card-rate span {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.pricing-card-meta {
  font-size: 10px;
  color: var(--color-text-muted);
}

.revenue-estimate-box {
  background: var(--color-black);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

/* ============================================================
   DASHBOARD TABS & CONTROL ROOM
   ============================================================ */

.dash-tabs {
  display: flex;
  background: var(--color-paper);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.dash-tab-btn {
  flex: 1;
  padding: 6px 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.dash-tab-btn.active {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs);
}

.stat-card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  margin-top: 2px;
}

/* ============================================================
   RESPONSIVE WIDE LAYOUT & MULTI-PAGE STYLES
   ============================================================ */


.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* --- STATUS PULSE ANIMATION --- */
.status-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
}

.status-pulse-dot.online {
  background-color: var(--color-accent-mint);
  box-shadow: 0 0 0 0 rgba(127, 163, 122, 0.7);
  animation: pulse-mint 2s infinite;
}

.status-pulse-dot.offline {
  background-color: var(--color-accent-coral);
  box-shadow: 0 0 0 0 rgba(255, 92, 92, 0.7);
  animation: pulse-coral 2s infinite;
}

@keyframes pulse-mint {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(127, 163, 122, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(127, 163, 122, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(127, 163, 122, 0); }
}

@keyframes pulse-coral {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 92, 92, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 92, 92, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 92, 92, 0); }
}

/* --- STEP WIZARD --- */
.step-wizard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--color-border-muted);
}

.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.step-item.active {
  opacity: 1;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--border);
  background: var(--color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
}

.step-item.active .step-number {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}

.step-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.step-line {
  flex: 1;
  height: 2px;
  background: var(--color-border-muted);
  margin: 0 8px;
}

/* --- KPI GRID & CARDS --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kpi-card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 12px;
}

.kpi-icon {
  font-size: 24px;
}

.kpi-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.kpi-sub {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* --- DASHBOARD HEADER --- */
.dash-shop-header {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.dash-shop-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  background: var(--color-paper-dark);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.dash-shop-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
}

.dash-printer-subtitle {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.agent-live-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* --- OPTION PILLS & STEPPERS --- */
.option-pill-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.option-pill {
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  background: var(--color-surface);
  cursor: pointer;
  transition: all 150ms ease;
}

.option-pill.active,
.option-pill[aria-pressed="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xs);
  color: var(--color-primary-active);
}

.stepper-box {
  display: flex;
  align-items: center;
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.stepper-btn {
  width: 36px;
  height: 38px;
  border: none;
  background: var(--color-paper-dark);
  font-size: 18px;
  font-weight: 800;

  &:hover { background: var(--color-border-muted); }
  &:active { transform: scale(0.95); }
}

.stepper-val {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}

/* --- COST SUMMARY BOX --- */
.cost-summary-box {
  background: var(--color-black);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  box-shadow: var(--shadow-md);
}

.cost-label {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-secondary);
  font-weight: 700;
}

.cost-breakdown {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}

.cost-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-secondary);
}

/* --- SHOP IDENTITY (who the customer is ordering from) --- */
.shop-identity-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}

.shop-identity-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-identity-icon .icon { width: 22px; height: 22px; }

.shop-identity-body { min-width: 0; }

.shop-identity-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.shop-identity-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin: 2px 0 0;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.shop-identity-place {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.shop-identity-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-text);
  margin-top: 6px;
}

.shop-identity-platform {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.shop-identity-card.is-unavailable { border-color: var(--color-danger); }
.shop-identity-card.is-unavailable .shop-identity-role { color: var(--color-danger-text); }

/* --- ORDER REVIEW (immediately above the pay buttons) --- */
.order-review { margin-top: 14px; }

.order-review-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}

.order-review .key-value-row strong { word-break: normal; overflow-wrap: anywhere; }

.order-review-status {
  font-size: 12px;
  color: var(--color-warning-text);
  margin: 8px 0 0;
}

.order-review-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
}

.order-review-note a { color: var(--color-primary-text); font-weight: 600; }

.app-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 10px;
}

.app-footer-links a { color: var(--color-primary-text); font-weight: 600; }

/* --- TOKEN CARD & PROGRESS TRACKER --- */
.token-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff;
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.token-header {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 800;
  opacity: 0.8;
}

.token-number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-secondary);
  margin: 4px 0;
}

.token-sub {
  font-size: 12px;
  opacity: 0.9;
}

.progress-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.progress-step {
  text-align: center;
  padding: 8px 4px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: 6px;
  opacity: 0.6;
}

.progress-step.completed {
  background: var(--color-accent-mint-light);
  border-color: var(--color-accent-mint);
  opacity: 1;
}

.progress-step.active {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  font-weight: 700;
  opacity: 1;
}

.p-icon { font-size: 16px; margin-bottom: 2px; }
.p-text { font-size: 10px; font-family: var(--font-display); }




/* ============================================================
   LAYOUT PRIMITIVES USED BY THE CURRENT MARKUP
   (previously referenced in HTML with no matching rule)
   ============================================================ */

.bg-paper {
  background-color: var(--color-paper);
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-2) var(--space-4);
}

.app-footer {
  margin-top: var(--space-6);
  padding-block: var(--space-5);
  border-top: 2px dashed var(--color-border-muted);
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.app-footer a {
  text-decoration: none;
}

.app-footer a:hover {
  text-decoration: underline;
}

.card--elevated {
  box-shadow: var(--shadow-lg);
}

.badge-primary {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.text-danger {
  color: var(--color-danger);
}

/* --- Key / value description lists --- */
.key-value-list {
  display: flex;
  flex-direction: column;
  border: var(--border-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.key-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  font-size: 12px;
  border-bottom: 1px solid var(--color-border-muted);
}

.key-value-row:last-child {
  border-bottom: none;
}

.key-value-row > span:first-child {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.key-value-row code,
.key-value-row strong {
  font-size: 11px;
  text-align: right;
  word-break: break-all;
  min-width: 0;
}

.key-value-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  padding: 2px 5px;
}

/* --- Form extras --- */
.form-help {
  margin-top: 5px;
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.form-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 var(--space-2);
  padding-bottom: 5px;
  border-bottom: 2px dashed var(--color-border-muted);
}

.form-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 34px 10px 12px;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230d0d0d' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  border: var(--border);
  border-radius: var(--radius-sm);
  appearance: none;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--color-primary);
}

/* --- Customer upload drop zone --- */
.file-drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.file-drop-zone:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.file-drop-zone.drag-over {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  border-style: solid;
}

.drop-zone-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.drop-zone-text {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.drop-zone-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* --- Selected file pill --- */
.file-info-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.file-info-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.file-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.file-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* --- Landing hero --- */
.landing-hero {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.landing-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  background: var(--color-secondary-light);
  border: 2px solid var(--color-secondary);
  border-radius: 99px;
}

.landing-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 800;
  line-height: 1.05;
  margin: var(--space-3) 0 var(--space-2);
}

.landing-title em {
  font-style: normal;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
}

.landing-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 46ch;
  margin: 0 auto;
}

/* --- Compact pricing cards --- */
.pricing-mini-card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-xs);
}

.pricing-type {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.pricing-rate {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.15;
  margin-top: 2px;
}

.pricing-rate span {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.pricing-meta {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* --- Register wizard panes & success banner --- */
.wizard-pane {
  display: flex;
  flex-direction: column;
}

.hero-banner {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  margin-bottom: var(--space-3);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 5.5vw, 30px);
  font-weight: 800;
  line-height: 1.15;
}

.hero-sub {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin-inline: auto;
}

.registration-success-banner {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  background: var(--color-accent-mint-light);
  border: var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.registration-success-banner h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin-top: var(--space-2);
}

.registration-success-banner p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-top: 5px;
}

.success-icon {
  font-size: 34px;
  line-height: 1;
}

/* --- QR poster preview ---
   Deliberately white in both themes: a QR code inverted against a dark
   surface is unreliable to scan, and this one is meant to be printed. */
.qr-poster-preview {
  background: #fff;
  border: 2px solid var(--color-black);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  text-align: center;
}

/* The poster keeps its paper colours in dark mode along with its white
   background, so its text cannot follow the theme: the shop name would be
   white on white. These are the printed colours, not the page's. */
.qr-poster-preview { color: var(--color-ink); }
.qr-poster-preview .qr-printer-title,
.qr-poster-preview .qr-url-badge { color: var(--color-ink-muted); }
.qr-poster-preview .qr-url-badge {
  background: var(--color-paper-tint);
  border-color: var(--color-border-muted);
}

.qr-shop-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}

.qr-printer-title {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.qr-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-3) auto;
  padding: var(--space-2);
  width: fit-content;
  max-width: 100%;
  background: #fff;
  border: var(--border);
  border-radius: var(--radius-sm);
  min-height: 120px;
  min-width: 120px;
}

.qr-image-wrapper img {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.qr-image-wrapper img:not([src]),
.qr-image-wrapper img[src=""] {
  display: none;
}

.qr-url-badge {
  display: inline-block;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  word-break: break-all;
}

/* --- Dashboard tabs --- */
.dash-tabs-bar {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: var(--border);
  background: var(--color-surface-muted);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dash-tabs-bar::-webkit-scrollbar {
  display: none;
}

.dash-tab-pane {
  animation: fade-in 160ms ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dash-header-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.kpi-body {
  min-width: 0;
}

/* --- Dashboard queue feed --- */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.filter-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.filter-pill {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: var(--border-muted);
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.filter-pill:hover {
  border-color: var(--color-border);
}

.filter-pill.active {
  background: var(--color-black);
  color: var(--color-text-on-dark);
  border-color: var(--color-black);
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.empty-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 42ch;
  margin-inline: auto;
  margin-top: 4px;
}

/* --- Queue job rows (rendered by app.js) --- */
.queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 10px var(--space-3);
  background: var(--color-surface);
  border: var(--border-muted);
  border-radius: var(--radius-md);
}

.queue-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.queue-token {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  padding: 4px 8px;
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  flex-shrink: 0;
}

.queue-file {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/*
  Who placed the order. Sits between the file name and the print settings
  because that is the reading order a shop owner actually uses: what to print,
  who for, then how.
*/
.queue-customer {
  font-size: 12px;
  color: var(--color-text-primary);
  margin-top: 2px;
}

.queue-customer a {
  color: var(--color-primary);
  text-decoration: none;
}

.queue-customer a:hover {
  text-decoration: underline;
}

.queue-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.queue-amount {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

/* The wizard progress indicator is a semantic <ol>; drop the list affordances. */
.step-wizard {
  list-style: none;
}

/* ---------------------------------------------------------------------------
   Agent pairing & paired device list
   --------------------------------------------------------------------------- */

.pairing-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--color-border, #111);
}

.pairing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pairing-code-box {
  padding: 12px;
  margin-bottom: 12px;
  border: 2px dashed var(--color-border, #111);
  border-radius: 8px;
  background: var(--color-surface-alt, #fffbe6);
}

.pairing-command {
  display: block;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  font-size: 0.85rem;
  /* Long commands must scroll rather than widen the dashboard on phones. */
  overflow-x: auto;
  white-space: nowrap;
}

/*
  The code, at the size of the thing that matters on this panel.

  Monospace and widely letter-spaced because it is read off one screen and
  typed into another, and because the alphabet drops I, L, O, 0 and 1 to keep
  that transcription unambiguous — spacing the characters out is the rest of
  that same job.
*/
.pairing-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.pairing-code-value {
  flex: 1 1 auto;
  padding: 10px 14px;
  border: 2px solid var(--color-border, #111);
  border-radius: 6px;
  background: var(--color-paper, #fff);
  color: var(--color-text-primary);
  font-family: var(--font-mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  user-select: all; /* one click selects the code and nothing around it */
}

.pairing-advanced { margin-top: 10px; }
.pairing-advanced > summary { cursor: pointer; }
.pairing-advanced .pairing-command { margin-top: 8px; }

.pairing-expiry { font-weight: 600; }

.device-list { display: flex; flex-direction: column; gap: 8px; }

.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 2px solid var(--color-border, #111);
  border-radius: 8px;
  background: var(--color-surface, #fff);
}

.device-row--revoked { opacity: 0.55; }

.device-info { min-width: 0; flex: 1 1 200px; }

.device-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.device-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .pairing-header { flex-direction: column; align-items: stretch; }
  .device-row { flex-direction: column; align-items: stretch; }
  .device-actions { justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   Platform admin console
   --------------------------------------------------------------------------- */

.admin-auth-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}

.admin-auth-card { width: 100%; max-width: 420px; }

.admin-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.admin-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat-tile {
  padding: 14px;
  border: 2px solid var(--color-border, #111);
  border-radius: 10px;
  background: var(--color-surface, #fff);
}

.stat-tile--accent { background: var(--color-surface-alt, #fffbe6); }

/* Reserved for a state that genuinely needs a person to act. */
.stat-tile--warn { border-color: var(--color-danger); background: var(--color-danger-light); }

.stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin-top: 4px; }
.stat-sub { font-size: 0.75rem; opacity: 0.7; margin-top: 2px; }

.admin-filter { max-width: 260px; }

/* A wide table must scroll inside its own box rather than widening the page. */
.table-scroll { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: top;
  font-size: 0.86rem;
}

.admin-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-border, #111);
  white-space: nowrap;
}

.cell-title { font-weight: 700; }
.cell-accent { font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; }
.warn-text { color: var(--color-danger-text); font-weight: 600; }

.form-input--compact { padding: 5px 8px; font-size: 0.82rem; max-width: 110px; }
.commission-cell { display: flex; align-items: center; gap: 5px; }

.badge-muted { background: var(--color-badge-muted-bg); color: var(--color-badge-muted-text); }

@media (max-width: 640px) {
  .admin-topbar { flex-direction: column; align-items: stretch; }
  .admin-filter { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Marketing landing page
   --------------------------------------------------------------------------- */

.landing {
  max-width: 1500px;
  margin: 0 auto;
  padding-inline: 20px;
  color: var(--color-text-primary);
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 18px;
  border-bottom: 3px solid var(--color-border);
}

.landing-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 1.15rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}

.landing-nav-links { display: flex; gap: 18px; flex-wrap: wrap; }

.landing-nav-links a {
  text-decoration: none;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
}

.landing-nav-links a:hover { color: var(--color-primary); }
.landing-nav-actions { display: flex; gap: 8px; }

.landing-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  padding-block: 56px 48px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
}

.landing-hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.08;
  font-weight: 900;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  max-width: 52ch;
}

.landing-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.flow-card {
  border: 3px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 8px 8px 0 var(--color-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-paper);
  font-weight: 600;
  font-size: 0.88rem;
}

.flow-step--done { background: var(--color-accent-mint-light); }

.flow-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-secondary);
  font-weight: 900;
  font-size: 0.78rem;
}

.flow-token {
  align-self: center;
  margin-top: 4px;
  padding: 8px 18px;
  border: 2px dashed var(--color-border);
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.landing-section { padding-block: 56px; }

.landing-section--alt {
  background: var(--color-paper);
  border-block: 3px solid var(--color-border);
  /* Full-bleed band while the page keeps its gutter. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(20px, calc(50vw - 560px));
}

.landing-section h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 900;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}

.section-lede { color: var(--color-text-secondary); margin: 0 0 28px; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }

.feature-card,
.benefit {
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 20px;
  box-shadow: 5px 5px 0 var(--color-border);
}

.feature-card h3,
.benefit h3 { margin: 8px 0 8px; font-size: 1.05rem; font-weight: 800; }
.feature-card p,
.benefit p { margin: 0; color: var(--color-text-secondary); line-height: 1.55; font-size: 0.92rem; }
.feature-icon { font-size: 1.9rem; }

/* --- "How it works" screenshot walkthrough ---------------------------------
   Real captures of the customer's phone, so the frames are sized by the
   screenshots' own aspect ratio rather than a fixed height: a future capture
   at a different size must not crop or letterbox itself. */

.walkthrough {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  /* Fixed three across rather than auto-fit: six steps land as a clean 3 + 3,
     where auto-fit gives a lopsided 4 + 2 at common desktop widths. */
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 22px;
}

.walk-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* One fixed frame for every step, so the captions line up across a row: the
   captures vary slightly in aspect ratio, and letting each set its own height
   staggered every caption against its neighbour.

   9:16 rather than the phone's own ~9:19.5. The captures are cropped to match,
   trimming the dead space each one carried below its content — at full handset
   proportions the steps were taller than the copy explaining them, and the
   section read as a column of long strips. */
.walk-shot {
  margin: 0 auto 0;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  border: 3px solid var(--color-border);
  border-radius: 14px;
  /* The captures are of a light phone screen, so the frame stays light in dark
     mode too — inverting it would misrepresent what the customer sees. */
  background: #fff;
  box-shadow: 5px 5px 0 var(--color-border);
  overflow: hidden;
}

.walk-shot img {
  display: block;
  width: 100%;
  height: 100%;
  /* The crops are already 9:16, so this only guards a future capture at a
     different size — it would letterbox rather than cut content out. */
  object-fit: contain;
  object-position: top center;
}

.walk-copy { position: relative; padding-left: 42px; }

.walk-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-black);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
}

.walk-copy h3 { margin: 3px 0 6px; font-size: 1.02rem; font-weight: 800; }
.walk-copy p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
  font-size: 0.92rem;
}

/* The owner-side steps, deliberately quieter than the screenshots above. */
.setup-strip {
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-muted);
  padding: 20px 22px;
}

.setup-strip-title {
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 800;
}

.setup-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 26px;
}

.setup-steps li {
  color: var(--color-text-secondary);
  line-height: 1.55;
  font-size: 0.92rem;
}

.setup-steps strong { color: var(--color-text-primary); }

@media (max-width: 900px) {
  .walkthrough { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* One wide screenshot per row on a phone reads better than two cramped ones,
     and the captures are phone-shaped to begin with. */
  .walkthrough { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}

.price-card {
  position: relative;
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 24px 20px;
  box-shadow: 5px 5px 0 var(--color-border);
  display: flex;
  flex-direction: column;
}

.price-card--featured {
  background: var(--color-secondary-light);
  box-shadow: 8px 8px 0 var(--color-primary);
}

.price-badge {
  position: absolute;
  top: -13px;
  left: 20px;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.price-card h3 { margin: 4px 0 4px; font-size: 1.2rem; font-weight: 900; }
.price-tagline { color: var(--color-text-secondary); font-size: 0.86rem; margin: 0 0 14px; }
/* Namespaced as plan-* because .price-amount already exists above for the
   customer payment bar, where it is white-on-dark. Reusing that name put white
   text on the white and yellow pricing cards, making the figure unreadable. */
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.plan-figure {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  /* Explicit, so no ancestor or later rule can wash it out again. */
  color: var(--color-text-primary);
  line-height: 1.1;
}

.plan-cadence {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}

/* The featured card sits on yellow; keep the same ink for contrast. */
.price-card--featured .plan-figure,
.price-card--featured h3 { color: var(--color-black); }
.price-card--featured .plan-cadence { color: #5a5237; }

.price-commission {
  margin: 6px 0 16px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-primary);
}

.price-features { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }

.price-features li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: var(--color-success);
}

.price-card .btn { margin-top: auto; }
.pricing-footnote { margin-top: 18px; }

.faq-list { display: grid; gap: 10px; }

.faq-item {
  border: 3px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 14px 16px;
}

.faq-item summary { font-weight: 700; cursor: pointer; font-size: 0.95rem; }
.faq-item p { margin: 10px 0 0; color: var(--color-text-secondary); line-height: 1.55; font-size: 0.92rem; }

.landing-closing {
  text-align: center;
  padding-block: 60px;
}

.landing-closing h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 900; margin: 0 0 8px; }
.landing-closing p { color: var(--color-text-secondary); margin: 0 0 22px; }

.landing-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 26px 40px;
  border-top: 3px solid var(--color-border);
}

.landing-footer-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

.landing-footer-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
}

.landing-footer-links a:hover { color: var(--color-primary); }

@media (max-width: 860px) {
  .landing-hero { grid-template-columns: 1fr; gap: 32px; padding-block: 36px 32px; }
  .landing-nav { gap: 10px; }
  .landing-nav-links { order: 3; width: 100%; }
  .landing-logo { margin-right: 0; }
  .landing-nav-actions { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   Admin console — spacing pass (B3) and shop lifecycle controls (F1)

   The console was dense to the point of being tiring: tiles, table rows and
   panels all sat on minimal padding with no separation between sections. These
   rules add breathing room without removing anything.
   --------------------------------------------------------------------------- */


.admin-topbar {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--color-border);
}

.admin-topbar .card-title { font-size: 1.5rem; margin-bottom: 2px; }

.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.stat-tile { padding: 20px 18px; }
.stat-value { font-size: 1.9rem; margin-top: 8px; }
.stat-sub { margin-top: 6px; line-height: 1.4; }
.stat-label { line-height: 1.3; }

/* Clear separation between the major panels. */
.admin-panel { margin-top: 28px; padding: 0; }

.admin-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 22px 18px;
  border-bottom: 2px solid var(--color-border-muted);
}

.admin-panel-header .card-title { margin-bottom: 4px; }
.admin-panel-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-filter { max-width: 280px; min-width: 200px; }

.admin-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.admin-table th,
.admin-table td {
  padding: 15px 16px;
  line-height: 1.45;
}

.admin-table th { padding-block: 13px; }
.admin-table tbody tr:hover { background: var(--color-surface-muted); }
.admin-table .meta-text { margin-top: 3px; }
.cell-title { margin-bottom: 2px; }

.col-select { width: 40px; text-align: center; }
.col-select input { width: 16px; height: 16px; cursor: pointer; }

.row--archived { opacity: 0.55; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.protected-note { white-space: nowrap; cursor: help; border-bottom: 1px dotted currentColor; }

/* Bulk bar only appears when rows are selected, so it never takes space idly. */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--color-primary-light);
  border-bottom: 2px solid var(--color-border);
}

.bulk-count { font-weight: 800; font-size: 0.9rem; }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.audit-list { padding: 8px 22px 22px; display: grid; gap: 2px; }

.audit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 2px;
  border-bottom: 1px solid var(--color-border-muted);
  font-size: 0.86rem;
}

.audit-row:last-child { border-bottom: none; }

.admin-auth-card { padding: 30px 28px; }
.admin-auth-card .card-title { font-size: 1.35rem; }
.admin-auth-card .form-group { margin-bottom: 16px; }

/* A destructive action must look different from a safe one. */
.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border: 2px solid var(--color-border);
}

.btn-danger:hover { background: #b81a1a; }

.btn-ghost {
  background: transparent;
  border: 2px solid transparent;
  color: var(--color-text-secondary);
}

.btn-ghost:hover { color: var(--color-text-primary); }

@media (max-width: 900px) {
  .admin-panel-header { padding: 18px 16px 14px; }
  .bulk-bar { padding: 12px 16px; }
  .audit-list { padding: 8px 16px 18px; }
  .admin-table th, .admin-table td { padding: 12px 12px; }
}

/* ---------------------------------------------------------------------------
   Admin console — vertical centring

   The sign-in card is the whole page when signed out, so it should sit in the
   middle of the viewport rather than pinned near the top. The console itself is
   content that grows, so it is centred horizontally and top-aligned: vertically
   centring a long table would push its header off screen.
   --------------------------------------------------------------------------- */

.admin-auth-view {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keeps the card clear of the edges on short screens. */
  padding-block: 32px;
}

/* A short console (few shops) also reads better centred; a long one scrolls
   naturally from the top. */
#adminConsoleView {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 76px);
  min-height: calc(100dvh - 76px);
}

@media (max-height: 700px) {
  .admin-auth-view { align-items: flex-start; padding-block: 24px; }
}

/* ---------------------------------------------------------------------------
   Landing page — F3 additions

   Motion is limited to one rotating phrase, a stepping flow card, counters and
   a fade-in on scroll. All of it is disabled under prefers-reduced-motion, and
   the page reads correctly with none of it running.
   --------------------------------------------------------------------------- */

.rotator {
  display: inline-block;
  position: relative;
  color: var(--color-primary);
  /* Underline stays put while the word above it changes. */
  box-shadow: inset 0 -0.18em 0 var(--color-secondary);
}

.rotator-track {
  display: inline-block;
  transition: opacity 240ms ease, transform 240ms ease;
}

.rotator-track.is-swapping { opacity: 0; transform: translateY(-6px); }

.hero-stats {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 2px solid var(--color-border-muted);
}

.hero-stats > div { margin: 0; }

.hero-stats dt {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.hero-stats dd {
  margin: 3px 0 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.flow-phone-notch {
  width: 74px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  margin: 0 auto 6px;
  opacity: 0.35;
}

.flow-step {
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.flow-step.is-active {
  transform: translateX(5px);
  background: var(--color-primary-light);
  box-shadow: -4px 0 0 var(--color-primary);
}

.flow-step--done.is-active { background: var(--color-accent-mint-light); box-shadow: -4px 0 0 var(--color-success); }

/* --- Architecture diagram --- */

.arch-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.arch-node {
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 20px 18px;
  box-shadow: 5px 5px 0 var(--color-border);
}

.arch-node--core { background: var(--color-primary-light); box-shadow: 5px 5px 0 var(--color-primary); }
.arch-icon { font-size: 1.9rem; }
.arch-node h3 { margin: 8px 0 6px; font-size: 1.02rem; font-weight: 800; }
.arch-node p { margin: 0 0 10px; color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; }

.arch-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }

.arch-points li {
  position: relative;
  padding-left: 16px;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

.arch-points li::before { content: "·"; position: absolute; left: 4px; font-weight: 900; }

.arch-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 74px;
}

.arch-arrow { font-size: 1.5rem; font-weight: 900; color: var(--color-primary); }

.arch-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center;
}

.arch-footnote { margin-top: 18px; }

/* --- Comparison table --- */

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border-muted);
  vertical-align: top;
}

.compare-table thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  border-bottom: 3px solid var(--color-border);
  background: var(--color-paper-dark);
}

.compare-table tbody th {
  font-weight: 800;
  width: 22%;
  background: var(--color-paper);
}

.compare-table td { color: var(--color-text-secondary); }

/* Our column is the answer, so it carries the emphasis. */
.compare-table .compare-ours {
  background: var(--color-primary-light);
  color: var(--color-text-primary);
  font-weight: 600;
}

.compare-table thead .compare-ours { background: var(--color-primary); color: #fff; }
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: none; }

/* --- Contact --- */

.contact-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 20px;
  align-items: start;
}

.contact-form { padding: 24px; }
.contact-aside { display: grid; gap: 12px; }

.contact-card {
  border: 3px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 16px 18px;
  box-shadow: 4px 4px 0 var(--color-border);
}

.contact-card h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 800; }
.contact-card p { margin: 0 0 6px; font-size: 0.88rem; }
.contact-card a { color: var(--color-primary); font-weight: 700; }

/* --- Scroll reveal --- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rotator-track, .flow-step { transition: none; }
}

@media (max-width: 960px) {
  .arch-diagram { grid-template-columns: 1fr; }
  .arch-link { flex-direction: row; gap: 8px; min-width: 0; padding: 2px 0; }
  .arch-arrow { transform: rotate(90deg); }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero-stats { gap: 18px; }
  .hero-stats dd { font-size: 1.25rem; }
}

/* Honeypot field: visually removed but still reachable by assistive tech, which
   is why it carries a real label telling a screen reader user to skip it.
   display:none would hide it from some bots too, defeating the purpose. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact enquiries in the admin console */

.enquiry-list { padding: 8px 22px 22px; display: grid; gap: 12px; }

.enquiry-row {
  border: 2px solid var(--color-border-muted);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--color-surface);
}

/* An unread enquiry is the only one that needs the eye. */
.enquiry-row--new { border-color: var(--color-border); background: var(--color-secondary-light); }

.enquiry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.enquiry-contact { margin-top: 2px; }
.enquiry-contact a { color: var(--color-primary); font-weight: 600; }

.enquiry-message {
  margin: 10px 0 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  /* Message text is customer-supplied; long unbroken strings must not widen the panel. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.enquiry-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .enquiry-list { padding: 8px 16px 18px; }
}

/* Merchant sign-in gate on the dashboard */

.merchant-auth-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  min-height: 70dvh;
  padding-block: 24px;
}

.merchant-auth-card { width: 100%; max-width: 420px; padding: 28px 26px; }
.merchant-auth-card a { color: var(--color-primary); font-weight: 600; }

/* Document preview — reflects the print settings chosen below it */

.preview-viewport img,
.preview-viewport canvas {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 4px;
  /* Colour/greyscale changes should read as a deliberate switch. */
  transition: filter 180ms ease, opacity 180ms ease;
}

/* A page outside the selected range still shows, but reads as excluded. */
.preview--excluded { opacity: 0.35; }

.preview-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.preview-nav-label {
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 56px;
  text-align: center;
}

.preview-nav .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.preview-note {
  margin-top: 8px;
  text-align: center;
  line-height: 1.45;
}

.preview-note--warn { color: var(--color-danger); font-weight: 600; }

/* ============================================================
   DARK THEME
   ------------------------------------------------------------
   Everything here is a token swap. The components are unchanged:
   they were already built on the tokens above, so the palette is
   the only thing that has to know about dark mode.

   Driven entirely by data-theme on <html>. The operating system
   preference is resolved in dashboard.html's inline script rather
   than by a media query here, so that following the OS stays scoped
   to the merchant dashboard: the customer-facing pages are not part
   of this and must keep rendering exactly as they always have.
   ============================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper:         #121210;
  --color-paper-dark:    #0b0b0a;
  --color-white:         #1c1c19;

  --color-surface:       #1c1c19;
  --color-surface-muted: #26261f;
  --color-border:        #e6e2d8;
  --color-border-muted:  #56534c;

  --color-text-primary:  #f2efe7;
  --color-text-secondary:#bdb9b0;
  --color-text-muted:    #8d8980;

  --shadow-color:        #46443e;
  --color-grain:         rgba(255,255,255,0.035);

  --color-primary-light: #0f2f36;
  --color-secondary-light: #3a2c0c;
  --color-accent-mint-light: #0d3b2c;
  --color-accent-coral-light: #4a1d1d;
  --color-success-light: #0d3b2c;
  --color-warning-light: #3d2a05;
  --color-danger-light:  #4a1717;
  --color-info-light:    #0f2f47;

  /* Accent text, brightened to stay legible on the tints above. */
  --color-primary-text:  #7fc4d1;
  --color-success-text:  #4fd8a4;
  --color-warning-text:  #f0b44a;
  --color-danger-text:   #ff8a8a;
  --color-info-text:     #7cc7f5;

  --color-desk:          #0a0a09;
  --color-desk-dot:      #2e2c27;
  --color-surface-alt:   #2a2410;
  --color-code-bg:       #0a0a09;
  --color-code-text:     #f2efe7;
  --color-badge-muted-bg:   #33332c;
  --color-badge-muted-text: #c4c0b6;
}

/* ============================================================
   LEGAL PAGES & 404
   ------------------------------------------------------------
   Long-form reading rather than marketing: a narrow measure, a
   clear heading hierarchy, and generous spacing between clauses
   so a specific term can be found by scanning.
   ============================================================ */

/* Long-form pages are read on a desktop as often as a phone, and inside the
   540px .page-container they were a narrow ribbon down the middle of a large
   screen. The customer upload flow and the signup wizard keep that width
   deliberately — they are phone-shaped — so this is a variant, not a change to
   the container itself.

   width:100% still governs small screens, so nothing narrows on a phone. */
.page-container.page-container--reading {
  max-width: 1200px;
}

/* The measure grows with the page, so the type grows a little with it: at
   1200px the same 15px text would run to a line length the eye loses its place
   on coming back. */
@media (min-width: 900px) {
  .legal p,
  .legal li {
    font-size: 1rem;
    line-height: 1.7;
  }
}

.legal-nav {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}
.legal-nav a { color: var(--color-text-secondary); text-decoration: none; }
.legal-nav a:hover { color: var(--color-primary-text); }

.legal {
  /* Fills its container; the container sets the width. */
  max-width: 100%;
  /* .page-container is a flex column, so this is a flex item and defaults to
     min-width:auto — sized by its widest child. The fee tables scroll
     horizontally on a phone via white-space:nowrap, and without this that
     width propagated outward and pushed the whole card off the screen. */
  min-width: 0;
  /* Bracketed placeholders and long ids have no break opportunity, and one of
     them is enough to widen the card on a narrow screen. */
  overflow-wrap: anywhere;
  margin: 0 auto 48px;
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 5px 5px 0 var(--color-border);
  padding: 32px clamp(18px, 4vw, 44px) 40px;
}

.legal h1 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 10px;
}

.legal-meta {
  margin: 0 0 26px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.legal h2 {
  font-size: 1.18rem;
  margin: 34px 0 10px;
  padding-top: 16px;
  border-top: 2px solid var(--color-border-muted);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }

.legal h3 {
  font-size: 1rem;
  margin: 22px 0 8px;
  color: var(--color-text-primary);
}

.legal p,
.legal li {
  color: var(--color-text-secondary);
  line-height: 1.65;
  font-size: 0.95rem;
}

.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--color-text-primary); }
.legal a { color: var(--color-primary-text); font-weight: 600; }

/* The summary that spares most readers the whole document. */
.legal-callout {
  border: 2px solid var(--color-primary);
  border-left-width: 6px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  padding: 14px 16px;
  margin: 0 0 28px;
}
.legal-callout p { margin: 0; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 18px;
  font-size: 0.88rem;
}
.legal-table th,
.legal-table td {
  border: 2px solid var(--color-border-muted);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  color: var(--color-text-secondary);
}
.legal-table th {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 700;
}

/* Tables carry the fee figures and cannot reflow to one column without
   losing which number belongs to which plan, so they scroll instead. */
@media (max-width: 560px) {
  .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
}

.legal-address {
  font-style: normal;
  border: 2px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  padding: 14px 16px;
  margin: 0 0 14px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
}

/* --- 404 --- */

.notfound {
  max-width: 620px;
  margin: 6vh auto 48px;
  text-align: center;
}

.notfound-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 18vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  margin: 0 0 6px;
  color: var(--color-secondary);
  /* Outlined rather than filled: at this size a solid block of yellow
     overwhelms the message underneath it. */
  -webkit-text-stroke: 3px var(--color-border);
  paint-order: stroke fill;
}

.notfound h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); margin: 0 0 10px; }

.notfound-lede {
  color: var(--color-text-secondary);
  margin: 0 0 26px;
  font-size: 1rem;
}

.notfound-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.notfound-actions .btn { text-decoration: none; }

.notfound-help {
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 4px 4px 0 var(--color-border);
  padding: 18px 20px;
  text-align: left;
  margin-bottom: 26px;
}
.notfound-help h2 { font-size: 1rem; margin: 0 0 6px; }
.notfound-help p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.notfound-links {
  display: flex;
  gap: 8px 20px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.notfound-links a { color: var(--color-text-secondary); }
.notfound-links a:hover { color: var(--color-primary-text); }

/* Marks a legal placeholder that is not yet filled in. Deliberately loud: these
   pages are publicly reachable, and a policy still carrying a bracketed
   placeholder should be impossible to scroll past without noticing. */
.legal-todo {
  background: var(--color-warning-light);
  border-bottom: 2px solid var(--color-warning);
  color: var(--color-warning-text);
  padding: 0 4px;
}

/* Declining refuses a customer's job and refunds them, so it reads as the
   destructive action it is — without competing with the primary button beside
   it, which is the one a shop presses all day. */
.btn-decline {
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}
.btn-decline:hover:not(:disabled) {
  background: var(--color-danger);
  color: var(--color-text-on-dark);
}

/* ============================================================
   RESPONSIVE PASS — phones and small tablets
   ------------------------------------------------------------
   Nothing here overflowed horizontally; these are the places
   the layout technically fitted but stopped being usable.
   ============================================================ */

/* The app header packs a brand, a live status pill and two buttons into one
   row. On a phone that ran past the edge and clipped the last button, so the
   "+ New Shop" action was simply unreachable. It wraps now, and the pill takes
   the full width on its own line rather than squeezing the buttons out. */
@media (max-width: 600px) {
  .app-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: var(--space-3);
  }

  .app-header > * { min-width: 0; }

  .brand { flex: 1 1 auto; }
  .brand-name { font-size: 1rem; }
  /* Two words on two lines above a 10px tagline is noise at this size. */
  .brand-tagline { display: none; }

  .agent-live-pill {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
  }
}

/* Six stat tiles, one per row, put the shop table three screens down. Two up
   halves that without making any single figure hard to read. */
@media (max-width: 640px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-tile { padding: 12px 12px; }
  .stat-tile .stat-value { font-size: 1.35rem; }
  /* The explanatory line under a figure is the first thing to go when there
     are two tiles to a row. */
  .stat-tile .stat-sub { display: none; }
}

/* A table that scrolls sideways with no edge is indistinguishable from one
   that is simply cut off — which is how the shop network table read on a
   phone. This fades the right edge only while there is more to scroll to. */
.table-scroll {
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--color-surface) 30%, transparent),
    linear-gradient(to left, var(--color-surface) 30%, transparent) 100% 0,
    linear-gradient(to right, rgba(0,0,0,0.16), transparent 12px),
    linear-gradient(to left, rgba(0,0,0,0.16), transparent 12px) 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* The queue row is a token, a filename and a set of actions. Below this the
   actions were being pushed onto a line of their own anyway, so let them. */
@media (max-width: 520px) {
  .queue-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .queue-row-actions {
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* ============================================================
   THE FILE'S JOURNEY — scroll-driven, degrades to static
   ------------------------------------------------------------
   The illustration sticks while the three explanations scroll
   past it. Written so the section is complete before any script
   runs: every step is visible, the sheet rests in the printer
   tray, and JS only adds the travelling.
   ============================================================ */

.journey-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  /* Stretch, so the illustration panel runs the full height of the steps
     beside it and the two columns finish on the same line. */
  align-items: stretch;
}

.journey-stage { position: relative; }

.journey-stage-inner {
  /* Full height of the row, so its bottom edge lands on the same line as the
     last step card. Deliberately not sticky: an element as tall as its own
     column has nowhere to travel, so `position: sticky` here would be a
     declaration that does nothing. At this size the whole section sits within
     about one viewport anyway, and the illustration stays in view while all
     three steps are read. */
  height: 100%;
  /* Matches the step cards' shadow and radius. At 8px/18px it read as a
     different kind of object sitting next to them rather than part of the set. */
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 5px 5px 0 var(--color-border);
  padding: clamp(14px, 3vw, 22px);

  /* The card was only as tall as its artwork, which left most of this column
     empty below it — a large hole beside three stacked steps. It now fills
     most of the column and centres the illustration, keeping just enough
     travel for the sticky pin to be doing something. */
  /* A floor for the case where the steps are unusually short. */
  min-height: min(62vh, 560px);
  display: grid;
  place-items: center;
}

.journey-svg {
  width: 100%;
  height: auto;
  display: block;
  /* Never taller than the panel it is centred in. */
  max-height: min(58vh, 520px);
}

/* --- the illustration --- */

.jr-rail {
  stroke: var(--color-border-muted);
  stroke-width: 3;
  stroke-dasharray: 7 9;
  stroke-linecap: round;
  fill: none;
}

.jr-body {
  fill: var(--color-surface);
  stroke: var(--color-border);
  stroke-width: 3;
}

.jr-screen { fill: var(--color-surface-muted); stroke: var(--color-border); stroke-width: 2.5; }
.jr-notch  { fill: var(--color-border); }
.jr-tray   { fill: var(--color-surface-muted); stroke: var(--color-border); stroke-width: 2.5; }
.jr-line   { fill: var(--color-border-muted); }
.jr-accent { fill: var(--color-primary); }
.jr-chip   { fill: var(--color-secondary); stroke: var(--color-border); stroke-width: 2.5; }
.jr-dot    { fill: var(--color-text-muted); }

/* A station lifts and colours only while it is the one being explained.
   Transform on a group, so this composites rather than repaints. */
.jr-station {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(.22,1,.36,1);
}

/* Only dim the others once the script is driving; without JS all three
   stations stay at full strength. */
.js-journey .jr-station { opacity: 0.42; }
.js-journey .jr-station.is-active { opacity: 1; transform: scale(1.04); }
.js-journey .jr-station.is-active .jr-dot { fill: var(--color-success); }

.jr-paper-body {
  fill: #fff;
  stroke: var(--color-border);
  stroke-width: 2.5;
}
.jr-paper-line { fill: var(--color-border-muted); }

.jr-paper {
  /* Resting place with no JS: delivered, in the tray. */
  transform: translate(180px, 470px);
}
.js-journey .jr-paper { transform: translate(180px, 79px); }

/* --- the steps --- */

.journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 6vh, 56px);
}

.journey-step {
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 5px 5px 0 var(--color-border);
  padding: clamp(18px, 3vw, 28px);
  position: relative;
  transition: transform 400ms cubic-bezier(.22,1,.36,1), box-shadow 400ms ease;
}

.js-journey .journey-step.is-active {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--color-primary);
}

.journey-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-black);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.journey-step h3 { margin: 0 0 8px; font-size: clamp(1.1rem, 2.4vw, 1.4rem); }

.journey-step > p {
  margin: 0 0 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.journey-points { margin: 0; padding-left: 20px; }
.journey-points li {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.journey-footnote { margin-top: 28px; }

/* Below this the sticky illustration would take the whole screen and the
   steps would scroll behind it, so it stops sticking and simply leads. */
@media (max-width: 860px) {
  .journey-grid { grid-template-columns: 1fr; }

  .journey-stage-inner {
    height: auto;
    max-width: 300px;
    margin-inline: auto;
  }
}

/* Motion is the enhancement, never the information. */
@media (prefers-reduced-motion: reduce) {
  .jr-station,
  .jr-paper,
  .journey-step { transition: none; }
}

/* ===========================================================================
   Business Setup

   Six tabs over one save. The tab chips carry per-tab validity so an
   incomplete section is visible without opening it — which is the whole reason
   a shop notices it has no rates before a customer does.
   =========================================================================== */

.setup-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
}

.setup-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 26px;
  margin: 2px 0 4px;
}

.setup-sub {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin: 0;
  max-width: 56ch;
}

.setup-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 2px solid var(--color-border);
  /* The bar scrolls sideways on a phone rather than wrapping into three rows
     that push the content below the fold. */
  scrollbar-width: none;
}
.setup-tabs::-webkit-scrollbar { display: none; }

.setup-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.setup-tab:hover { color: var(--color-text-primary); }

.setup-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.setup-tab-chip {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.setup-tab-chip.is-valid   { background: var(--color-success); }
.setup-tab-chip.is-invalid { background: var(--color-warning); }

.setup-pane { display: none; padding: 18px; }
.setup-pane.active { display: block; }

.setup-pane-title {
  font-size: 16px;
  margin: 0 0 4px;
}

.setup-pane-sub {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin: 0 0 16px;
  max-width: 64ch;
}

.setup-block {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.switch-row + .switch-row { margin-top: 10px; }

.switch-row--nested {
  margin-left: 26px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.switch-row input { margin-top: 3px; }

/* --- service catalogue --- */

.service-group + .service-group { margin-top: 22px; }

.service-group-title { font-size: 14px; margin: 0 0 2px; }

.service-group-blurb {
  color: var(--color-text-secondary);
  font-size: 12px;
  margin: 0 0 10px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.service-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  cursor: pointer;
  background: var(--color-surface, transparent);
}

.service-item.is-on {
  border-color: var(--color-success);
  /* A tint rather than a fill: a grid of solid green blocks reads as an error
     state, not as a list of things that are switched on. */
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
}

.service-item input { margin-top: 2px; }

.service-label { display: block; font-size: 13px; font-weight: 600; }

.service-hint {
  display: block;
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* --- rate grid --- */

.table-scroll { overflow-x: auto; }

.rate-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 620px;
}

.rate-grid th,
.rate-grid td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.rate-grid th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.rate-grid .num { text-align: right; }

.rate-input {
  width: 92px;
  text-align: right;
  padding: 5px 7px;
  font-size: 13px;
}

/* A refused value stays on screen so it can be corrected, rather than being
   reverted under the cursor. */
.rate-input.is-invalid,
.form-input.is-invalid {
  border-color: var(--color-danger);
  outline: 2px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
}

/* --- live portal preview ---------------------------------------------------
   A phone-shaped rendering of the customer screen, driven by the unsaved
   draft. Deliberately a sketch rather than a pixel copy: it has to answer
   "which controls will my customer see", and a faithful clone would be a second
   customer page to keep in step with the first.
   -------------------------------------------------------------------------- */

.portal-preview-wrap {
  margin-top: 20px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.portal-preview-head { margin-bottom: 12px; }

.portal-preview {
  display: flex;
  justify-content: center;
}

.pp-phone {
  width: 100%;
  max-width: 300px;
  border: 2px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-paper, #fff);
}

.pp-bar {
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
}

.pp-body { padding: 12px; display: grid; gap: 10px; }

.pp-drop {
  border: 2px dashed var(--color-border);
  border-radius: 10px;
  padding: 18px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.pp-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.pp-field {
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 5px;
}

.pp-pills { display: flex; flex-wrap: wrap; gap: 5px; }

.pp-pill {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
}

.pp-pill.on {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.pp-stepper {
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: 0.3em;
}

.pp-cta {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
  padding: 9px;
}

/* The one state worth shouting about: a shop that has switched off everything
   a customer could order. Silent here means a dead QR poster in a shop. */
.pp-empty {
  border: 1px solid var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  color: var(--color-danger);
  border-radius: 9px;
  padding: 10px;
  font-size: 11px;
  line-height: 1.45;
}

/* --- automation mode cards ------------------------------------------------- */

.mode-cards { display: grid; gap: 10px; }

.mode-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 13px 14px;
  cursor: pointer;
}

/* :has, so the selected card is styled from the radio without a class to keep
   in sync. Browsers without it simply show the radio, which still works. */
.mode-card:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.mode-body { display: block; }

.mode-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}

.mode-text {
  display: block;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* --- order queue toolbar ---------------------------------------------------
   Tabs carry their own counts so a shop can see there are jobs needing
   attention without clicking to find out.
   -------------------------------------------------------------------------- */

.queue-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 10px;
  scrollbar-width: thin;
}

.queue-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.queue-tab:hover { border-color: var(--color-text-secondary); }

.queue-tab.active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

.queue-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-text-primary);
  font-size: 10px;
  font-weight: 700;
}

.queue-tab.active .queue-tab-count {
  background: var(--color-primary);
  color: #fff;
}

.queue-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* The search box takes the slack; the month picker keeps its natural width. */
.queue-search { flex: 1 1 200px; min-width: 0; }
.queue-search .form-input { width: 100%; }
.queue-month .form-input { width: auto; }

/* ===========================================================================
   Scrollbars

   The browser default is a grey slab that belongs to no design system. This is
   the brand's, and it reacts: the thumb grows and takes the brand colour when
   the pointer is over the area being scrolled, so it is discoverable without
   being loud while you read.

   Written against `*`, which has no specificity, so any component that sets
   its own rule still wins — the tab bars hide their scrollbars deliberately
   and keep doing so regardless of where this sits in the file.

   Three deliberate limits:
     * It never animates on `prefers-reduced-motion`. A moving scrollbar is
       exactly the kind of incidental motion that setting exists to stop.
     * Firefox gets `scrollbar-color` only. It has no thumb pseudo-element, so
       there is nothing to animate; a plain branded bar is the honest result
       rather than a worse imitation.
     * Touch devices are left alone. Mobile browsers draw their own overlay
       scrollbar and hide it when idle, which is already the right behaviour.
   =========================================================================== */

@media (hover: hover) and (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-primary) 45%, transparent) transparent;
  }

  *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    /* Inset by a transparent border rather than a smaller width, so the thumb
       can grow on hover without the track resizing and shifting the layout. */
    background-color: color-mix(in srgb, var(--color-text-secondary) 40%, transparent);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
    transition: background-color 180ms ease, border-width 180ms ease;
  }

  /* Hovering anywhere in the scrollable area, not just the bar itself: a 6px
     thumb is hard to aim at, and the point is to show where you are while
     reading rather than to wait until you have found it. */
  *:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
    border-width: 2px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary);
    border-width: 2px;
  }

  *::-webkit-scrollbar-thumb:active {
    /* Shifted toward the text colour rather than toward black: --color-ink does
       not flip with the theme, so mixing with it darkened the thumb against a
       dark background, which is the wrong direction. --color-text-primary does
       flip, so "pressed" reads as pressed in both. */
    background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-text-primary));
  }

  *::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* The page itself, where a full-height bar against the paper background
     would otherwise look heavier than the panes inside it. */
  html {
    scrollbar-gutter: stable;
  }
}

@media (prefers-reduced-motion: reduce) {
  *::-webkit-scrollbar-thumb {
    transition: none;
  }
}


/* --- dashboard tab bar: tabs on the left, links out on the right ---------- */

/* display:contents so the real tabs stay in the bar's own flex row. Without it
   the tablist becomes a box and the four items stop sharing one line. */
.dash-tabs-group { display: contents; }

.dash-tab-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-left: 2px solid var(--color-border);
}

.dash-tab-link:hover { text-decoration: underline; }

/* --- shop details and people ---------------------------------------------- */

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* An address line wants the row to itself; a PIN code does not. */
.form-group--wide { grid-column: 1 / -1; }

.setup-rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 24px 0 18px;
}

.staff-list { display: grid; gap: 8px; margin-bottom: 14px; }

.staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 10px 13px;
}

/* Dimmed rather than hidden: a disabled account is still someone who exists,
   and hiding it makes "why can't they sign in" unanswerable from this screen. */
.staff-row.is-disabled { opacity: 0.55; }

.staff-name { font-size: 13px; font-weight: 600; }

.staff-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

.staff-add summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

/* --- earnings --------------------------------------------------------------
   The settlement notice comes before any figure on purpose. A shop owner's
   first question about a payments screen is when the money arrives, and a
   screenful of totals that does not answer it reads as an evasion.
   -------------------------------------------------------------------------- */

.settlement-notice {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.settlement-notice.is-good {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
}

.settlement-notice.is-pending {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}

.money-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.money-tile {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
}

.money-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.money-value {
  font-size: 20px;
  font-weight: 700;
  margin-top: 3px;
  /* Tabular figures so a column of money lines up on the decimal rather than
     wandering with the width of each digit. */
  font-variant-numeric: tabular-nums;
}

.money-hint {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 660px;
}

.ledger th,
.ledger td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.ledger th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.ledger .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger-file { font-weight: 600; }

.ledger-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* Deductions read as deductions without a colour that says "error". */
.ledger-out { color: var(--color-text-secondary); }

.ledger-net { font-weight: 700; }

.ledger-empty {
  text-align: center;
  color: var(--color-text-secondary);
  padding: 22px 10px;
}

/* Plan usage against allowance. Follows .settlement-notice: same border token,
   same radius, same colour-mix tinting, so the plan card reads as part of the
   dashboard rather than as something bolted onto it. */
.plan-usage {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.plan-usage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

/* Only the over-limit case is coloured. A shop inside its allowance needs no
   decoration, and tinting every row would make the one that matters invisible. */
.plan-usage-row.is-over {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}

.plan-usage-note {
  flex-basis: 100%;
  font-size: 12px;
  opacity: 0.85;
}

/* Agent release form. Reuses .plan-usage for the version breakdown, so the
   fleet panel and the plan card read as one system rather than two. */
.admin-release-form {
  border-top: 1px solid var(--color-border);
  margin-top: 14px;
  padding-top: 12px;
}

.admin-release-form summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.admin-release-form form {
  margin-top: 12px;
  gap: 10px;
}

.admin-release-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.grid-span-2 {
  grid-column: 1 / -1;
}

.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* Plan switch button. Sits at the foot of each pricing card, full width so the
   action is unmissable — the previous screen recommended a plan and gave no way
   to act on it, which read as broken rather than unfinished. */
.plan-switch-btn {
  width: 100%;
  margin-top: 10px;
}

.plan-switch-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Automatic settlement status, sat under the payout form it relates to. */
.razorpay-account {
  border-top: 1px solid var(--color-border);
  margin-top: 14px;
  padding-top: 12px;
}

.razorpay-account h5 {
  font-size: 14px;
  font-weight: 700;
}