:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(238, 244, 252, 1);   /* ice - the light ground */
  --color-cream-100: rgba(255, 255, 255, 1);  /* white - light surfaces */
  --color-gray-200: rgba(219, 233, 254, 1);   /* text on the dark ground */
  --color-gray-300: rgba(159, 182, 214, 1);
  --color-gray-400: rgba(111, 135, 168, 1);
  --color-slate-500: rgba(75, 100, 132, 1);   /* secondary text, light */
  --color-brown-600: rgba(63, 92, 134, 1);    /* borders, light */
  --color-charcoal-700: rgba(7, 13, 26, 1);   /* the dark ground */
  --color-charcoal-800: rgba(15, 26, 46, 1);  /* dark surfaces */
  --color-slate-900: rgba(10, 31, 61, 1);     /* text, light */
  --color-teal-300: rgba(56, 189, 248, 1);    /* accent, dark */
  --color-teal-400: rgba(125, 211, 252, 1);
  --color-teal-500: rgba(11, 99, 197, 1);     /* accent, light */
  --color-teal-600: rgba(10, 85, 168, 1);
  --color-teal-700: rgba(8, 74, 146, 1);
  --color-teal-800: rgba(14, 165, 233, 1);
  --color-red-400: rgba(255, 107, 129, 1);
  --color-red-500: rgba(200, 30, 74, 1);
  --color-orange-400: rgba(246, 185, 59, 1);
  --color-orange-500: rgba(154, 90, 5, 1);    /* 4.9:1 on white */

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 63, 92, 134;
  --color-teal-500-rgb: 11, 99, 197;
  --color-slate-900-rgb: 10, 31, 61;
  --color-slate-500-rgb: 75, 100, 132;
  --color-red-500-rgb: 200, 30, 74;
  --color-red-400-rgb: 255, 107, 129;
  --color-orange-500-rgb: 154, 90, 5;
  --color-orange-400-rgb: 246, 185, 59;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: rgba(13, 148, 96, 1);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a1f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dbe9fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 11, 99, 197;
  --color-error-rgb: 200, 30, 74;
  --color-warning-rgb: 154, 90, 5;
  --color-info-rgb: 75, 100, 132;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 111, 135, 168;
    --color-teal-300-rgb: 56, 189, 248;
    --color-gray-300-rgb: 159, 182, 214;
    --color-gray-200-rgb: 219, 233, 254;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
    
    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: rgba(52, 211, 153, 1);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a1f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dbe9fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: 52, 211, 153;
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 111, 135, 168;
  --color-teal-300-rgb: 56, 189, 248;
  --color-gray-300-rgb: 159, 182, 214;
  --color-gray-200-rgb: 219, 233, 254;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
  
  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: rgba(52, 211, 153, 1);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a1f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dbe9fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: 52, 211, 153;
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 63, 92, 134;
  --color-teal-500-rgb: 11, 99, 197;
  --color-slate-900-rgb: 10, 31, 61;
  
  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: rgba(13, 148, 96, 1);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: 13, 148, 96;
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

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

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

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

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

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

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

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* ==========================================================================
   Layout shell
   ========================================================================== */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
}

.header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-12) var(--space-24);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.header__title {
  margin: 0;
  font-size: var(--font-size-xl);
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.header__byline {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

.header__logo {
  width: 34px;
  height: 34px;
  display: block;
  /* Nudge down so the mark sits on the wordmark's optical centre, not its
     baseline - the title's flex uses `align-items: baseline`. */
  align-self: center;
  flex: none;
}

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

.engine-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-xs);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.engine-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-warning);
}

.engine-badge--loading .engine-dot { animation: pulse 1.2s infinite; }
.engine-badge--ready .engine-dot { background: var(--color-success); }
.engine-badge--error .engine-dot { background: var(--color-error); }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-12) var(--space-24);
  text-align: center;
}

.footer__content p {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Tabs ------------------------------------------------------------------ */

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-16);
  background: var(--color-bg-1);
  border-bottom: 1px solid var(--color-border);
}

.tab-btn {
  padding: var(--space-10) var(--space-16);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}

.tab-btn:hover { color: var(--color-text); background: var(--color-secondary); }

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-surface);
}

.tab-content { display: none; flex: 1; flex-direction: column; min-height: 0; }
.tab-content.active { display: flex; }

.tool-header {
  padding: var(--space-20) var(--space-24) var(--space-12);
  text-align: center;
  background: var(--color-bg-3);
}

.tool-header h2 { margin: 0 0 var(--space-4); }
.tool-header p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* Engine boot ----------------------------------------------------------- */

.engine-loading {
  position: absolute;
  inset: 0;
  background: var(--color-background);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

.engine-loading.hidden { display: none; }

.engine-loading__inner {
  max-width: 460px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-32);
}

.engine-loading__inner h3 { margin: 0 0 var(--space-8); }
.engine-loading__inner p { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.engine-loading__note {
  margin-top: var(--space-16);
  font-size: var(--font-size-xs);
  opacity: 0.85;
}

/* Drop zones & panels --------------------------------------------------- */

.file-drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  margin: var(--space-20) var(--space-24);
  background: var(--color-bg-4);
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-bg-1);
}

.file-drop-zone p { margin: 0 0 var(--space-12); color: var(--color-text-secondary); }
.file-drop-zone--half { flex: 1; margin: 0; }

.compare-inputs {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  flex-wrap: wrap;
}

.panel {
  padding: var(--space-8) var(--space-24) var(--space-24);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.panel.hidden { display: none; }

.summary-box {
  padding: var(--space-12) var(--space-16);
  background: var(--color-bg-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-16);
  font-size: var(--font-size-sm);
}

.result-box {
  margin-top: var(--space-16);
  padding: var(--space-16);
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  text-align: center;
  font-size: var(--font-size-sm);
}

.result-box.hidden { display: none; }

.action-buttons {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  padding: var(--space-16) var(--space-24);
  flex-wrap: wrap;
}

.hint {
  margin: 0;
  padding: var(--space-8) var(--space-16);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
}

.hint--inline { background: transparent; border: none; padding: 0 0 var(--space-8); }
.muted { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.warn { color: var(--color-warning); font-weight: var(--font-weight-medium); }
.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-20) 0; }

/* Workspace (viewer + side panel) --------------------------------------- */

.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.workspace.hidden { display: none; }
.workspace--full { flex-direction: column; }

.workspace__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--color-bg-2);
}

.workspace__side {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.side-header {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.side-header h4 { margin: 0; font-size: var(--font-size-md); }
.side-subtitle { margin: 0 0 var(--space-8); font-size: var(--font-size-sm); }

.side-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-16);
}

.side-footer {
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.viewer-toolbar {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-8) var(--space-16);
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
}

.tool-group { display: flex; gap: var(--space-6); align-items: center; }

.tool-option {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.page-indicator {
  font-size: var(--font-size-sm);
  min-width: 56px;
  text-align: center;
}

.mode-btn {
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.mode-btn:hover { border-color: var(--color-primary); }
.mode-btn.active {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
  border-color: var(--color-primary);
}

/* Page canvas + thumbnail rail ------------------------------------------- */

.viewer-body {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
}

/* The page scrolls in its own column so that zooming, which can make the page
   several times wider than the viewer, never pushes the rail off screen. */
.viewer-scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* The app grows with its content rather than filling the viewport, so a rail
   sized by flex would be as tall as sixty thumbnails and never scroll - which
   also means every one counts as on screen and the whole document gets
   rendered at once. Capping it here gives it something to scroll inside, and
   sticky keeps it beside the page as the window scrolls. */
.thumb-rail {
  width: 156px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: var(--space-8);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-12) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  scrollbar-width: thin;
}

.thumb {
  border: 1px solid transparent;
  background: none;
  padding: var(--space-4);
  border-radius: var(--radius-base);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.thumb:hover { border-color: var(--color-primary); }

.thumb--current {
  border-color: var(--color-primary);
  background: var(--color-secondary);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* A fixed box so the rail does not jolt as thumbnails arrive one by one:
   every page keeps its place from the moment the rail is built. */
.thumb__frame {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  display: block;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
}

.thumb__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: white;
}

.thumb__no { line-height: 1; }

.page-jump {
  width: 56px;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-align: center;
}

.page-holder {
  position: relative;
  margin: var(--space-20) auto;
  align-self: center;
  box-shadow: var(--shadow-lg);
  background: white;
  line-height: 0;
  max-width: 100%;
}

.page-image { display: block; max-width: 100%; height: auto; }

.overlay { position: absolute; inset: 0; }
.overlay--draw { cursor: crosshair; }

.span-box {
  position: absolute;
  border: 1px solid rgba(var(--color-teal-500-rgb), 0.35);
  background: rgba(var(--color-teal-500-rgb), 0.08);
  cursor: text;
  border-radius: 2px;
  transition: background var(--duration-fast) var(--ease-standard);
}

.span-box:hover { background: rgba(var(--color-teal-500-rgb), 0.25); border-color: var(--color-primary); }

/* What a scan found, marked on the page itself. Amber while it is only a
   proposal; struck through and faded once deselected, so "everything still
   ticked" and "I have unticked that one" are told apart at a glance. */
.scan-mark {
  position: absolute;
  background: rgba(230, 129, 22, 0.28);
  border: 1px solid var(--color-warning, #a84b2f);
  border-radius: 2px;
  cursor: pointer;
}

.scan-mark:hover { background: rgba(230, 129, 22, 0.45); }

.scan-mark--off {
  background: none;
  border-style: dashed;
  opacity: 0.55;
}

.scan-mark--flash {
  animation: scan-flash 1.2s var(--ease-standard);
}

@keyframes scan-flash {
  0%, 100% { box-shadow: none; }
  30%      { box-shadow: 0 0 0 4px rgba(230, 129, 22, 0.55); }
}

.scan-group { margin-bottom: var(--space-12); }

.scan-group__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.scan-row { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .scan-mark--flash { animation: none; outline: 3px solid var(--color-primary); }
}

/* Unsaved work. A dot on the Save button and a line above it, so the state
   is on screen rather than something you have to hold in your head. */
.btn--unsaved::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: var(--space-8);
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.unsaved-note {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-xs);
  color: var(--color-warning, #a84b2f);
}

/* Search results that read as text rather than a row of identical buttons,
   and the matching boxes on the page itself. */
.search-hit {
  display: flex;
  gap: var(--space-8);
  width: 100%;
  text-align: left;
  padding: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.search-hit:hover { border-color: var(--color-primary); background: var(--color-secondary); }
.search-hit__page { flex-shrink: 0; font-weight: var(--font-weight-medium); color: var(--color-text); }
.search-hit__text { overflow-wrap: anywhere; }
.search-hit mark { background: rgba(230, 129, 22, 0.35); color: inherit; }
.search-count { margin: 0 0 var(--space-4); }

.search-mark {
  position: absolute;
  background: rgba(230, 129, 22, 0.30);
  border: 1px solid rgba(230, 129, 22, 0.8);
  border-radius: 2px;
  pointer-events: none;
}

.search-mark--current {
  background: rgba(230, 129, 22, 0.55);
  box-shadow: 0 0 0 3px rgba(230, 129, 22, 0.35);
}

/* A passage that only moved reads differently from one that was rewritten. */
.diff-row--move { border-left: 3px solid var(--color-primary); padding-left: var(--space-8); }
.diff-move { font-size: var(--font-size-xs); color: var(--color-primary); font-weight: var(--font-weight-medium); }
.diff-same { color: var(--color-text-secondary); }

.export-option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-6);
  grid-column: 1 / -1;
  margin-bottom: var(--space-8);
}

.restore-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
  justify-content: space-between;
  margin: var(--space-12) 0;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-base);
  background: var(--color-secondary);
}

.restore-banner__text { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-size-sm); }
.restore-banner__actions { display: flex; gap: var(--space-8); }

.export-card--off { opacity: 0.45; cursor: not-allowed; }
.export-card--off:hover { border-color: var(--color-border); transform: none; box-shadow: none; }

/* An indeterminate bar, for the one step whose length cannot be known.
   A stripe that keeps moving says "working" without claiming a position. */
.progress-bar--unknown .progress-fill {
  width: 35% !important;
  animation: progress-sweep 1.4s ease-in-out infinite;
}

@keyframes progress-sweep {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar--unknown .progress-fill { animation: none; width: 100% !important; opacity: 0.5; }
}

.draw-ghost {
  position: absolute;
  border: 2px dashed var(--color-primary);
  background: rgba(var(--color-teal-500-rgb), 0.15);
  pointer-events: none;
}

.draw-ghost--redact { border-color: #ff3b3b; background: rgba(0, 0, 0, 0.45); }

.redact-box {
  position: absolute;
  /* Background is set inline from the colour picker; this is the fallback. */
  background: #000000;
  opacity: 0.88;
  border: 1.5px solid #ff3b3b;
}

.placed-item {
  position: absolute;
  cursor: move;
  border: 1px dashed transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.placed-item:hover { border-color: var(--color-primary); background: rgba(var(--color-teal-500-rgb), 0.08); }
.placed-item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.placed-item span { white-space: nowrap; pointer-events: none; line-height: 1; }

.placed-item__del {
  position: absolute;
  top: -9px; right: -9px;
  width: 18px; height: 18px;
  border: none; border-radius: 50%;
  background: var(--color-error);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.placed-item:hover .placed-item__del { display: flex; }

.stamp-ghost {
  position: absolute;
  border: 2.5px solid #c81e1e;
  color: #c81e1e;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* Page grid (organise) --------------------------------------------------- */

.page-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
}

.page-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-8);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.page-card:hover { border-color: var(--color-primary); }
.page-card.selected { border-color: var(--color-primary); background: var(--color-bg-1); }
.page-card.dragging { opacity: 0.5; }
.page-card img { width: 100%; background: #fff; border-radius: var(--radius-sm); }

.page-card__label {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

/* Sub tabs / panels ------------------------------------------------------ */

.sub-tabs {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-12) var(--space-16) 0;
}

.sub-tab {
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--color-border);
  background: var(--color-bg-1);
  color: var(--color-text);
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.sub-tab.active {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
  border-color: var(--color-primary);
}

.sub-panel.hidden { display: none; }

.form-row { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 90px; }
.form-control--inline { display: inline-block; width: auto; min-width: 90px; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-bottom: var(--space-8);
}

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

/* A plain-spoken callout for the things a tool cannot do. Routed through the
   warning token so all four themes follow without a second definition. */
.notice {
  margin: 0 var(--space-24) var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-base);
  border: 1px solid rgba(var(--color-warning-rgb), 0.35);
  border-left: 3px solid var(--color-warning);
  background: rgba(var(--color-warning-rgb), 0.07);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.55;
}

.notice strong { color: var(--color-text); }

/* Two mutually exclusive ways to protect a file, each needing a sentence of
   explanation - too much for a radio label on its own. */
.mode-choice { display: grid; gap: var(--space-8); }

.mode-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-bg-1);
  cursor: pointer;
}

.mode-option:hover { border-color: var(--color-primary); }

.mode-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(var(--color-teal-500-rgb), 0.08);
}

.mode-option input { margin-top: 2px; flex: none; }
.mode-option__body { display: grid; gap: 2px; font-size: var(--font-size-sm); }
.mode-option__body span { color: var(--color-text-secondary); font-size: var(--font-size-xs); }

.stamp-gallery { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-16); }

.stamp-btn {
  padding: var(--space-6) var(--space-10);
  border: 2px solid #c81e1e;
  color: #c81e1e;
  background: transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.stamp-btn.active { background: #c81e1e; color: #fff; }

/* Export ---------------------------------------------------------------- */

.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.export-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
  transition: all var(--duration-fast) var(--ease-standard);
}

.export-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.export-card small { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.export-icon { font-size: 26px; }

/* Search / annotations / diff ------------------------------------------- */

.search-results { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

.search-hit {
  padding: var(--space-2) var(--space-8);
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-1);
  color: var(--color-text);
  cursor: pointer;
}

.annot-item {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-xs);
}

.compare-result { padding: 0 var(--space-24) var(--space-24); overflow-y: auto; }

.diff-page {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-12);
  margin-bottom: var(--space-12);
  background: var(--color-surface);
}

.diff-page h4 { margin: 0 0 var(--space-8); font-size: var(--font-size-md); }
.diff-row { margin-bottom: var(--space-8); font-size: var(--font-size-sm); }

.diff-old {
  background: rgba(192, 21, 47, 0.12);
  border-left: 3px solid var(--color-error);
  padding: var(--space-4) var(--space-8);
  margin-bottom: var(--space-2);
}

.diff-new {
  background: rgba(var(--color-teal-500-rgb), 0.12);
  border-left: 3px solid var(--color-success);
  padding: var(--space-4) var(--space-8);
}

/* Modals ---------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }

.modal__dialog {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 92%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal__dialog--sm { max-width: 440px; }

.modal__header,
.modal__footer {
  display: flex;
  align-items: center;
  padding: var(--space-12) var(--space-20);
}

.modal__header { justify-content: space-between; border-bottom: 1px solid var(--color-border); }
.modal__header h3 { margin: 0; }
.modal__footer { justify-content: flex-end; gap: var(--space-12); border-top: 1px solid var(--color-border); }
.modal__body { padding: var(--space-20); }

.modal__close {
  background: transparent;
  border: none;
  font-size: var(--font-size-2xl);
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.sig-canvas {
  width: 100%;
  height: 180px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  cursor: crosshair;
  touch-action: none;
  margin-top: var(--space-12);
}

.sig-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-8);
}

/* Status & toast --------------------------------------------------------- */

.status-container {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  backdrop-filter: blur(3px);
}

.status-container.hidden { display: none; }

.status-content {
  background: var(--color-surface);
  padding: var(--space-24) var(--space-32);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  min-width: 280px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
  margin-top: var(--space-12);
  position: relative;
  overflow: hidden;
}

.progress-bar.hidden { display: none; }

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-standard);
}

.progress-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--color-text);
}

.loading-spinner {
  width: 36px; height: 36px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-12);
}

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

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--color-text);
  color: var(--color-surface);
  padding: var(--space-10) var(--space-20);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-standard);
  z-index: 4000;
  max-width: 90vw;
  text-align: center;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast--success { background: var(--color-success); color: #fff; }
.toast--error { background: var(--color-error); color: #fff; }

.hidden { display: none !important; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 960px) {
  .viewer-body { flex-direction: column; }
  .thumb-rail {
    width: 100%;
    flex-direction: row;
    position: static;
    align-self: stretch;
    max-height: 132px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .thumb { width: 84px; flex-shrink: 0; }
  .workspace { flex-direction: column; }
  .workspace__side { width: 100%; border-left: none; border-top: 1px solid var(--color-border); }
  .compare-inputs { flex-direction: column; }
  .checkbox-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Features dashboard
   ========================================================================== */

.hero {
  padding: var(--space-32) var(--space-24) var(--space-16);
  text-align: center;
  background: var(--color-bg-3);
}

.hero h2 {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-3xl);
}

.hero p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* auto-fill lays out as many column tracks as the width allows, filled or
   not, so on a wide screen a group of four cards sat in a seven-track grid
   with three empty tracks trailing off to the right. Capping and centring
   the dashboard keeps the cards a readable width and the empty space evenly
   split, instead of banked up on one side. */
.dashboard {
  padding: var(--space-24);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  overflow-y: auto;
}

.dash-group {
  margin-bottom: var(--space-32);
}

.dash-group__title {
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-16);
}

.dash-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  text-align: left;
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.dash-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.dash-card__icon { font-size: 26px; line-height: 1; }

.dash-card__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.dash-card__badge {
  font-size: var(--font-size-xs);
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
  border-radius: var(--radius-full);
  padding: 1px var(--space-8);
  letter-spacing: 0.03em;
}

.dash-card__blurb {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* ==========================================================================
   Sensitive-data scan, inspector, replace, auto-split
   ========================================================================== */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.chip {
  font-size: var(--font-size-xs);
  background: var(--color-secondary);
  border-radius: var(--radius-full);
  padding: 2px var(--space-10);
}

.scan-results { margin-top: var(--space-16); }

.scan-row {
  display: grid;
  grid-template-columns: auto 90px minmax(140px, 1fr) 70px 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-8) var(--space-10);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.scan-row:hover { background: var(--color-bg-1); }

.scan-kind {
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.scan-text {
  font-family: var(--font-family-mono, monospace);
  background: var(--color-secondary);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-6);
  overflow-wrap: anywhere;
}

.scan-label { font-size: var(--font-size-xs); }

.findings { margin: var(--space-12) 0 var(--space-24); }

.finding {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-left: 3px solid var(--color-border);
  margin-bottom: var(--space-6);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
}

.finding--risk { border-left-color: var(--color-error); background: var(--color-bg-4); }
.finding--warn { border-left-color: var(--color-warning); background: var(--color-bg-2); }
.finding--info { border-left-color: var(--color-info); }

.finding__area { font-weight: var(--font-weight-medium); }
.finding__detail { color: var(--color-text-secondary); overflow-wrap: anywhere; }

.lvl {
  display: inline-block;
  border-radius: var(--radius-full);
  padding: 1px var(--space-10);
  font-size: var(--font-size-xs);
  margin-left: var(--space-4);
}

.lvl--risk { background: rgba(var(--color-red-500-rgb), 0.15); color: var(--color-error); }
.lvl--warn { background: rgba(var(--color-orange-500-rgb), 0.15); color: var(--color-warning); }
.lvl--info { background: var(--color-secondary); color: var(--color-text-secondary); }

.split-preview { margin-top: var(--space-16); }

.split-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-6) var(--space-10);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

/* Paragraph targets read differently from single-line ones. */
.span-box--block {
  background: rgba(var(--color-teal-500-rgb), 0.10);
  border: 1px dashed rgba(var(--color-teal-500-rgb), 0.55);
}

.span-box--block:hover {
  background: rgba(var(--color-teal-500-rgb), 0.20);
}

/* In-place text editing.
   The editable box sits exactly where the text is, in the page's own font at
   the page's own size, so what you type looks like what you will get. The
   opaque background hides the original glyphs still visible in the page image. */
.inline-edit {
  position: absolute;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-radius: 2px;
  white-space: pre;
  overflow-wrap: normal;
  cursor: text;
  caret-color: var(--color-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* A paragraph wraps and may outgrow the box it started in. */
.inline-edit--block {
  white-space: pre-wrap;
  height: auto;
  overflow-wrap: break-word;
}

.inline-edit__tag {
  position: absolute;
  z-index: 6;
  transform: translateY(calc(-100% - 4px));
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
  font-family: var(--font-family-base);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
  /* It used to be a label and nothing else. Now that the size controls live
     on it, it has to take a click - but only on the controls, so the strip
     itself still lets a click through to the page behind it. */
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Outline editor */
.outline-list { margin-bottom: var(--space-12); }

.outline-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) 0;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border);
}

.outline-title { flex: 1; overflow-wrap: anywhere; }

.outline-del {
  background: transparent;
  border: none;
  color: var(--color-error);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

@media (max-width: 720px) {
  .scan-row { grid-template-columns: auto 1fr; }
  .scan-row .scan-label { display: none; }
  .finding { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ==========================================================================
   Engine boot banner - non-blocking, so the app stays usable while it loads
   ========================================================================== */

.engine-banner {
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-10) var(--space-16) 0;
}

.engine-banner.hidden { display: none; }

.engine-banner__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.engine-banner__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex: none;
}

.engine-banner__text {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.engine-banner__text span { color: var(--color-text-secondary); }

.engine-banner__note {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.engine-banner__bar {
  margin: var(--space-8) 0 var(--space-4);
  height: 4px;
}

@media (max-width: 720px) {
  .engine-banner__note { display: none; }
}

/* Unlock dialog ---------------------------------------------------------- */

.pw-error {
  margin: var(--space-8) 0 0;
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

.pw-error.hidden { display: none; }
.pw-note { margin: var(--space-12) 0 0; }
#pw-modal .form-label { margin-top: var(--space-12); }

/* Mobile navigation ------------------------------------------------------
   Fifteen tabs wrap into three or four rows on a phone, pushing the actual
   tool off-screen. Below the breakpoint they become one horizontally
   scrollable strip instead, so the content starts where it should. */

@media (max-width: 720px) {
  .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 var(--space-8);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .tab-nav::-webkit-scrollbar { display: none; }

  .tab-btn {
    padding: var(--space-10) var(--space-12);
    scroll-snap-align: start;
    flex: none;
  }

  /* Comfortably tappable targets on a touch screen. */
  .btn, .tab-btn, .mode-btn, .export-card { min-height: 44px; }
}

/* Respect a reduced-motion preference. */
@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;
  }
}

/* Keyboard focus needs to be visible; the mouse-driven styles alone are not
   enough to navigate by. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Zoom ------------------------------------------------------------------
   A zoomed page is wider than its column, so the viewer scrolls rather than
   letting the page spill over the layout. Overlays sit in percentages, so
   they track the image at any zoom without recalculation. */

.workspace__main { min-height: 0; }

.page-holder { flex: none; }

.form-control--tiny {
  width: 64px;
  padding: var(--space-4) var(--space-8);
  display: inline-block;
}

/* Add-text mode: the whole page is a target, so say so with the cursor. */
.overlay--add { cursor: crosshair; }

.overlay--add::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(var(--color-teal-500-rgb), 0.4);
  border-radius: var(--radius-base);
  pointer-events: none;
}

/* Empty add-text box needs a prompt, or it is an invisible target. */
.inline-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-secondary);
  opacity: 0.7;
  pointer-events: none;
}

/* Scanned-page notice ----------------------------------------------------
   A scan has no text objects, so the editor has nothing to offer until the
   page is read. This says so where the problem is, with the fix attached. */

.scan-notice {
  margin: 0 var(--space-20) var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-warning, #a84b2f);
  border-left-width: 4px;
  border-radius: var(--radius-base);
  background: var(--color-bg-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.scan-notice.hidden { display: none; }

.scan-notice__body { display: flex; flex-direction: column; gap: 2px; }
.scan-notice__body strong { color: var(--color-text); }
.scan-notice__body span { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.scan-notice__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.form-control--small { width: auto; padding: var(--space-4) var(--space-8); }

@media (max-width: 720px) {
  .scan-notice { margin: 0 var(--space-12) var(--space-8); }
  .scan-notice__actions { gap: var(--space-8); }
  .scan-notice__actions .btn { flex: 1 1 100%; }
}

/* A word the reader was unsure of. Amber rather than red: it is a prompt to
   look, not an error - the reading may well be right. */
.span-box--doubt {
  border-color: var(--color-warning, #a84b2f);
  border-style: dashed;
  background: rgba(var(--color-warning-rgb, 168, 75, 47), 0.12);
}

.span-box--doubt:hover {
  background: rgba(var(--color-warning-rgb, 168, 75, 47), 0.22);
}



/* ---- verifying a signature already on a document ------------------- */
.verify-card {
    border: 1px solid var(--color-card-border);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--space-16);
    margin-bottom: var(--space-16);
    background: var(--color-surface);
}
.verify-card h4 { margin: 0 0 var(--space-4); word-break: break-all; }
.verify-card--good { border-left-color: var(--color-success); }
.verify-card--bad { border-left-color: var(--color-error); }
.verify-card--warn { border-left-color: var(--color-warning); }
.verify-card--none { border-left-color: var(--color-info, var(--color-border)); }

.verify-verdict { margin: 0 0 var(--space-12); font-weight: var(--font-weight-semibold); }
.verify-card--good .verify-verdict { color: var(--color-success); }
.verify-card--bad .verify-verdict { color: var(--color-error); }
.verify-card--warn .verify-verdict { color: var(--color-warning); }

.verify-sig {
    border-top: 1px solid var(--color-card-border);
    padding-top: var(--space-12);
    margin-top: var(--space-12);
}
.verify-sig__head {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}
/* Label and value side by side on a desktop, stacked when there is no room
   for two columns. */
.verify-facts {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: var(--space-4) var(--space-12);
    margin: 0;
}
.verify-facts dt { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.verify-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .verify-facts { grid-template-columns: 1fr; gap: 0 0; }
    .verify-facts dd { margin-bottom: var(--space-8); }
}

.verify-yes { color: var(--color-success); }
.verify-no { color: var(--color-error); font-weight: var(--font-weight-semibold); }
.verify-unknown { color: var(--color-warning); }

.verify-chain {
    margin-top: var(--space-8);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.verify-chain__signer { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.verify-problem {
    margin: var(--space-8) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-warning);
}

/* A short options block that sits with the drop zone rather than inside a
   workspace, so it can be set before the files are chosen. */
.panel--tight { padding: var(--space-16); margin-bottom: var(--space-16); }
.panel--tight .side-subtitle { margin-top: 0; }

/* ---- pictures into a document ------------------------------------- */
.photo-card { position: relative; }
.photo-card img {
    width: 100%;
    height: 130px;
    object-fit: contain;
    background: var(--color-secondary);
    border-radius: var(--radius-sm);
}
.photo-card__size {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: center;
}
.page-card.dragging { opacity: 0.4; }

/* ---- a trimmed page, in the Pages grid ----------------------------- */
.page-card--trimmed { box-shadow: inset 0 0 0 2px var(--color-primary); }
.page-card__tag {
    display: inline-block;
    margin-left: var(--space-4);
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-btn-primary-text, #fff);
    font-size: var(--font-size-xs);
}

/* ==================================================================== */
/* Cyber blue                                                           */
/*                                                                      */
/* The palette above already carries the colour; what follows is the    */
/* character - a lit ground, a glow on the things that matter, and a    */
/* hairline that catches the eye along the top. Kept restrained on      */
/* purpose: this is used for hours at a time on audit work, not for     */
/* five minutes on a demo.                                              */
/* ==================================================================== */

/* A ground that is lit rather than flat. Fixed, so it does not slide
   about as a long document scrolls. */
body {
    background-color: var(--color-background);
    background-image:
        radial-gradient(900px 520px at 12% -8%, rgba(56, 189, 248, 0.10), transparent 60%),
        radial-gradient(760px 460px at 92% 4%, rgba(11, 99, 197, 0.10), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
[data-color-scheme="dark"] body,
:root:not([data-color-scheme="light"]) body {
    background-image:
        radial-gradient(1000px 560px at 10% -10%, rgba(56, 189, 248, 0.16), transparent 62%),
        radial-gradient(820px 500px at 94% 2%, rgba(30, 64, 175, 0.24), transparent 64%);
}

/* The header carries the one bright line in the design. */
.header {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)),
            var(--color-surface));
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-primary) 38%, transparent),
                0 6px 22px -18px rgba(2, 26, 61, 0.9);
}
.header__title { letter-spacing: var(--letter-spacing-tight); }
.header__logo { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary) 45%, transparent)); }

/* The tab you are on glows rather than merely underlining. */
.tab-btn.active {
    box-shadow: inset 0 -3px 0 0 var(--color-primary),
                0 6px 16px -12px color-mix(in srgb, var(--color-primary) 90%, transparent);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.tab-btn:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }

/* Primary actions read as live. */
.btn--primary {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
                0 4px 14px -8px color-mix(in srgb, var(--color-primary) 85%, transparent);
}
.btn--primary:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
                0 6px 20px -8px color-mix(in srgb, var(--color-primary) 95%, transparent);
}

/* Cards lift towards the accent instead of towards grey. */
.dash-card:hover,
.tool-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--color-primary) 90%, transparent);
}

/* The page itself stays white paper on the dark ground - a scan of a
   bank statement must not be tinted by the theme. */
.page-image, .page-card img, .thumb-rail img {
    background: #fff;
}

/* The workspace status light, and the busy bar, take the accent. */
.engine-dot { box-shadow: 0 0 8px currentColor; }


/* The hero used the green background token, which stood out as the one
   green thing on a blue page. */
.hero {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-primary) 12%, transparent),
            transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.hero h2 {
    background: linear-gradient(92deg, var(--color-text), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@supports not (background-clip: text) {
    .hero h2 { color: var(--color-text); }
}

@media (prefers-reduced-motion: reduce) {
    body { background-attachment: scroll; }
}

/* ---- editing a line: size and width, on the box itself -------------- */
.inline-edit__tag {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    white-space: nowrap;
}
.inline-edit__step,
.inline-edit__grip { pointer-events: auto; }

.inline-edit__step {
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: inherit;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-6);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    cursor: pointer;
}
.inline-edit__step:hover { background: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.inline-edit__help { opacity: 0.75; }

/* The rest of the format panel, living on the same strip as the size steps. */
.inline-edit__select,
.inline-edit__colour { pointer-events: auto; }

.inline-edit__select {
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    background: var(--color-primary);
    color: var(--color-btn-primary-text);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    padding: 0 2px;
    cursor: pointer;
}

.inline-edit__colour {
    width: 18px;
    height: 16px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.inline-edit__toggle { font-weight: var(--font-weight-bold); min-width: 18px; }
.inline-edit__toggle:nth-of-type(2) { font-style: italic; }

/* A pressed control has to look pressed, or the panel cannot be read. */
.inline-edit__step.is-on {
    background: var(--color-btn-primary-text);
    color: var(--color-primary);
    border-color: var(--color-btn-primary-text);
}

.inline-edit__aligns { display: inline-flex; gap: 2px; }

/* The grip sits on the right edge of the box being edited. */
.inline-edit__grip {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    min-height: 12px;
    cursor: ew-resize;
    background: linear-gradient(90deg, transparent, var(--color-primary));
    opacity: 0.5;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.inline-edit__grip:hover { opacity: 1; }
.inline-edit { position: absolute; }

/* Free-form resize anchors on the box being edited: four corners and four
   edge midpoints, so the box can be pulled in either direction, or both at
   once from a corner. They sit on the box outline and take the pointer. */
.inline-edit__handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--color-btn-primary-text, #fff);
  border: 1.5px solid var(--color-primary);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  z-index: 7;
  pointer-events: auto;
}
.inline-edit__handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
.inline-edit__handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.inline-edit__handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.inline-edit__handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.inline-edit__handle--n  { top: -5px; left: 50%; margin-left: -4.5px; cursor: ns-resize; }
.inline-edit__handle--s  { bottom: -5px; left: 50%; margin-left: -4.5px; cursor: ns-resize; }
.inline-edit__handle--w  { top: 50%; left: -5px; margin-top: -4.5px; cursor: ew-resize; }
.inline-edit__handle--e  { top: 50%; right: -5px; margin-top: -4.5px; cursor: ew-resize; }

/* The move grip sits just outside the top-left corner, clear of the anchors
   and the format strip, so grabbing it to slide the whole box is unambiguous. */
.inline-edit__mover {
  position: absolute;
  top: -17px;
  left: -17px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-btn-primary-text, #fff);
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: move;
  z-index: 8;
  pointer-events: auto;
  user-select: none;
}
.inline-edit__mover::before {
  content: "✥";
  font-size: 12px;
  line-height: 1;
  font-family: var(--font-family-base);
}
.inline-edit__mover:hover { filter: brightness(1.1); }


/* Pictures on the page, made grabbable. The box is the engine's own idea of
   where the image sits, so what you take hold of is the real placement. */
.img-box {
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 70%, transparent);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  cursor: move;
  pointer-events: auto;
  z-index: 5;
}

.img-box:hover { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }

.img-box.is-picked {
  border-style: solid;
  border-width: 2px;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.img-box__handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border: 1px solid var(--color-btn-primary-text);
  border-radius: 2px;
  opacity: 0;
}

.img-box.is-picked .img-box__handle { opacity: 1; }
.img-box__handle--nw { left: -5px; top: -5px; cursor: nwse-resize; }
.img-box__handle--ne { right: -5px; top: -5px; cursor: nesw-resize; }
.img-box__handle--sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.img-box__handle--se { right: -5px; bottom: -5px; cursor: nwse-resize; }


/* Results of casting the columns. Red is a real difference; amber is small
   enough to be rounding; grey is something deliberately not added up. */
.foot-row {
  padding: var(--space-8) var(--space-12);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  background: var(--color-bg-1);
  font-size: var(--font-size-xs);
}

.foot-row[data-page] { cursor: pointer; }
.foot-row[data-page]:hover { background: var(--color-bg-3); }
.foot-row--differs { border-left-color: var(--color-error); }
.foot-row--rounding { border-left-color: var(--color-warning); }
.foot-row--skip { border-left-color: var(--color-border); opacity: 0.8; }


/* Saved blocks: a short list of text worth not retyping. */
.side-block { padding: var(--space-12) var(--space-16); border-top: 1px solid var(--color-border); }
.block-list { margin-bottom: var(--space-8); }

.block-item {
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-xs);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-6);
}

.block-item .muted { grid-column: 1 / -1; }

.block-item__use {
  text-align: left;
  border: none;
  background: none;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: 0;
}

.block-item__use:hover { text-decoration: underline; }

.block-item__del {
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0 var(--space-4);
}

.block-item__del:hover { color: var(--color-error); }


/* The licence bar above the Edit tab, and the plan behind it. */
.premium-bar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  padding: var(--space-8) var(--space-24);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.premium-bar--on {
  background: rgba(var(--color-success-rgb), 0.08);
  border-bottom-color: rgba(var(--color-success-rgb), 0.3);
}

.premium-price {
  margin: var(--space-12) 0;
  font-size: var(--font-size-2xl);
  line-height: 1.2;
}

.premium-steps { margin: 0 0 var(--space-12); padding-left: var(--space-20); }
.premium-steps li { margin-bottom: var(--space-8); font-size: var(--font-size-sm); }

.premium-note {
  margin: 0 0 var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-error-rgb), 0.1);
  border: 1px solid rgba(var(--color-error-rgb), 0.35);
  color: var(--color-text);
  font-size: var(--font-size-xs);
}

.premium-note.hidden { display: none; }


/* Payment details, laid out so an account number can be read off without
   squinting or mistranscribing. */
.bank-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-12);
  margin: var(--space-8) 0 0;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-1);
  font-size: var(--font-size-xs);
}

.bank-details dt { color: var(--color-text-secondary); }
.bank-details dd { margin: 0; font-weight: var(--font-weight-medium); }
.bank-details code { font-size: var(--font-size-sm); letter-spacing: 0.04em; }

@media (max-width: 480px) {
  .bank-details { grid-template-columns: 1fr; gap: 0 0; }
  .bank-details dd { margin-bottom: var(--space-6); }
}