/* PMO Customer Portal — light premium, on the PMOC.AI brand system (v3.0.0,
 * the off-white canvas: #F5F4FA page, white cards, near-black ink, one
 * violet-to-cyan accent).
 *
 * The palette is NOT defined here. web/brand/tokens.css is a vendored copy of
 * pmoc-website/brand/tokens.css, served at /brand and shared with the admin
 * portal, and the block below only maps those brand
 * tokens onto the semantic names this stylesheet already used
 * (--bg-primary, --accent-blue, ...). That indirection is deliberate: every
 * component keeps reading the portal names, so a brand change is a re-vendor
 * plus, at most, an edit in this one block.
 *
 * One mode by design — light — so there is no prefers-color-scheme branch to
 * maintain here.
 * Every var() in the mapping block carries a literal fallback. Without them a
 * failed /brand/tokens.css load (404, a stale image that missed the file, a
 * proxy in the way) leaves every token undefined, every declaration below
 * invalid, and the page renders as unstyled black-on-white. With them the
 * import failing is invisible. Keep the two in step when re-vendoring. */

@import url('/brand/tokens.css');

:root {
  /* Backgrounds */
  --bg-primary: var(--surface-1, #f5f4fa);
  --bg-secondary: var(--surface-2, #edebfa);
  --bg-card: var(--surface-0, #ffffff);
  --bg-card-hover: var(--surface-3, #e4e2f0);
  --bg-input: var(--surface-2, #edebfa);

  /* Text */
  --text-primary: var(--ink-900, #0b0b10);
  --text-secondary: var(--ink-700, #3b3a4c);
  --text-muted: var(--ink-600, #5c5a70);
  /* Referenced by .field-hint, which never had a value to read before this.
     Reads ink-600, not ink-400: the tokens file reserves ink-400 for dividers
     and icon strokes, and at ~2.4:1 on white it cannot carry a hint. */
  --text-tertiary: var(--ink-600, #5c5a70);

  /* Borders */
  --border-color: var(--line-subtle, rgba(11, 11, 16, 0.1));

  /* Accent. The brand runs ONE accent, violet -> cyan. --accent-blue keeps its
     name so component rules did not all have to change, but it now resolves to
     brand.600, the violet reserved for links and small interactive text. */
  --accent-blue: var(--brand-600, #6d28d9);
  --accent-blue-hover: var(--brand-700, #5b21b6);
  --accent-blue-light: var(--brand-tint, rgba(124, 58, 237, 0.08));
  --accent-green: var(--green-text, #036b4f);
  --accent-yellow: var(--amber, #8f5205);
  --accent-red: var(--coral-text, #b91c1c);

  /* Score bands, straight from the brand. App.scoreColor() in js/app.js still
     paints scores through --accent-green / --accent-yellow / --accent-red;
     these are here so a rule or script that wants the brand's own three has
     them even when /brand/tokens.css fails to load. Same names as the tokens,
     so — like the shadows below — they are restated, not var()-wrapped. */
  --score-low: #dc2626;
  --score-mid: #b45309;
  --score-good: #059669;

  /* Shadows: ink-tinted and quiet, the light canvas's grounding. These four
     carry the SAME names as the brand tokens, so they cannot be written as
     var(--shadow-sm, ...) — a custom property that reads itself is a cycle and
     computes to nothing, fallback or not. They are the tokens' exact values
     restated, so the fallback discipline still holds; keep them in step when
     re-vendoring. */
  --shadow-sm: 0 1px 2px rgba(11, 11, 16, 0.06), 0 1px 1px rgba(11, 11, 16, 0.04);
  --shadow-md: 0 4px 16px rgba(11, 11, 16, 0.1), 0 2px 6px rgba(11, 11, 16, 0.06);
  --shadow-lg: 0 16px 40px rgba(11, 11, 16, 0.14), 0 4px 14px rgba(11, 11, 16, 0.08);
  --shadow-xl: 0 24px 60px rgba(11, 11, 16, 0.18), 0 8px 24px rgba(11, 11, 16, 0.1);
  --shadow-glow: var(--shadow-glow-violet, 0 0 0 1px rgba(124, 58, 237, 0.35), 0 8px 30px rgba(124, 58, 237, 0.22));

  /* Gradients. The brand allows exactly one, and only where it carries
     meaning: the wordmark, the score ring's sweep, and the progress fill that
     is the same motif unrolled. It is NOT a button fill and NOT a background
     wash — see .btn-primary and .nav-links a.active. */
  --gradient-blue: var(--gradient-brand, linear-gradient(135deg, #7c3aed, #22d3ee));
  --gradient-green: linear-gradient(135deg, var(--green, #059669), var(--green-text, #036b4f));
  --gradient-bg: var(--gradient-page, radial-gradient(60% 55% at 28% 15%, rgba(124, 58, 237, 0.32), transparent 68%), radial-gradient(45% 45% at 78% 8%, rgba(34, 211, 238, 0.2), transparent 70%)), var(--surface-1, #f5f4fa);

  /* Glass: a translucent plate over the canvas, with a solid fallback first
     so a browser without color-mix() gets an opaque card, not an invisible one. */
  --glass-bg: var(--surface-0, #ffffff);
  --glass-bg: color-mix(in srgb, var(--surface-0, #ffffff) 82%, transparent);
  --glass-border: var(--line-subtle, rgba(11, 11, 16, 0.1));
  --glass-blur: 20px;

  /* Animation */
  --transition-fast: var(--motion-fast, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
  --transition-smooth: var(--motion-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
  --transition-spring: var(--motion-spring, 0.4s cubic-bezier(0.34, 1.56, 0.64, 1));

  /* Sizing. Two measures, both from the brand's 1120px: --max-width-wide is
     the outer frame (the nav, and the list pages that earn the width), and
     --max-width is the reading column inside it. The nav used to cap at a
     freehand 1200px while content stopped at 800px, which read at desktop as
     a wide bar over a narrow strip. Now they share one system value. */
  --radius: var(--radius-md, 16px);
  --radius-lg: 20px;
  --max-width: 880px;
  --max-width-wide: 1120px;
  --nav-height: 60px;
}

/* --- Reset & Body --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  /* The page's measure. The nav and the content column both read it, so they
     always share a left edge; a list page opts into the wide one by carrying
     .page-wide on <body>, which is the only thing that changes. */
  --page-measure: var(--max-width);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--gradient-bg);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-blue);
}

a:hover { color: var(--accent-blue-hover); }

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Navigation --- */
.nav {
  background: color-mix(in srgb, var(--surface-0) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  height: var(--nav-height);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.5rem;
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-decoration: none;
}

/* The mark is the score ring drawn small, so the favicon, the marketing
   site and the product's own score display are one idea. */
.nav-brand-mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Gradient on PMOC, solid ink on .AI — per brand/guidelines.md section 2.
   Gradient TEXT reads the text tier (violet -> deep teal): the fill gradient's
   cyan stop is 1.65:1 on the light canvas and cannot carry glyphs. */
.nav-brand-name {
  background: var(--gradient-brand-text, var(--gradient-brand));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.nav-links a:hover {
  background: var(--accent-blue-light);
  color: var(--accent-blue);
}

/* The active page is marked with the accent, not filled with the gradient.
   The gradient is reserved for the wordmark and the score ring; a row of
   gradient pills is what made every nav item look like a call to action. */
.nav-links a.active {
  background: var(--brand-tint);
  color: var(--brand-600);
  box-shadow: inset 0 0 0 1px var(--brand-border-tint);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-version {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.nav-client-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.3rem 0.7rem;
  background: var(--accent-blue-light);
  border: 1px solid var(--brand-border-tint);
  border-radius: 20px;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Logout button in nav */
.nav-right > .nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.nav-right > .nav-link:hover {
  color: var(--accent-red);
  background: var(--coral-wash);
}

/* --- Language Selector --- */
.lang-selector {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(11, 11, 16, 0.04);
  backdrop-filter: blur(4px);
}

.lang-selector button {
  border: none;
  background: transparent;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition-fast);
  font-family: inherit;
}

.lang-selector button.active {
  background: var(--brand-violet);
  color: #fff;
}

.lang-selector button:hover:not(.active) {
  color: var(--text-primary);
}

/* --- Container --- */
.portal-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  animation: contentFadeIn 0.4s ease;
}

/* Multi-column list pages (My Analyses). The single-column reading width that
   suits the rest of the portal squeezes five columns into ~750px, which is
   what forced the name to truncate and the meta to wrap. Setting the measure
   on <body class="page-wide"> widens the nav to match, so the table's edges
   line up with the header's instead of landing 150px inside it. */
body.page-wide { --page-measure: var(--max-width-wide); }

.portal-container-wide { max-width: var(--page-measure); }

.portal-container > h2 {
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

/* Eyebrow over title, the pairing the marketing site opens every section
   with. One element per page, and it carries real information (which run,
   which account) rather than restating the title. */
.page-head { margin-bottom: 1.75rem; }

.page-head > h2 { margin-bottom: 0.35rem; }

.page-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 0.6rem;
}

.page-sub {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 62ch;
}

@keyframes contentFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Card --- */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}

.card + .card { margin-top: 1.5rem; }

.card-error {
  border-color: rgba(185, 28, 28, 0.2);
  background: rgba(185, 28, 28, 0.03);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.btn:focus-visible,
.nav-links a:focus-visible,
.nav-right > .nav-link:focus-visible,
.lang-selector button:focus-visible,
.link-more:focus-visible,
.legal-links a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A square-cornered ring around a pill reads as a mistake. */
.btn:focus-visible { border-radius: var(--radius-pill); }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ONE primary per view. Solid brand violet with an inset highlight and a
   blurred violet glow — not a gradient fill, and not repeated three times
   down a page. Anything that is not THE action on the screen is .btn-secondary. */
.btn-primary {
  background: var(--brand-violet);
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px rgba(124, 58, 237, 0.25);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--brand-700, #5b21b6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 32px rgba(124, 58, 237, 0.32);
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 14px rgba(124, 58, 237, 0.2);
}

/* Glass: a near-transparent ink wash with a soft ink border. */
.btn-secondary {
  background: rgba(11, 11, 16, 0.03);
  color: var(--ink-900);
  border-color: var(--line-strong);
  backdrop-filter: blur(4px);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(11, 11, 16, 0.07);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Coral is the brand's cost/pain colour. A destructive button is a solid deep
   coral plate carrying white, never pink-on-white. (--coral itself is the
   spec-only v2 pink and is not read here.) */
.btn-danger {
  background: var(--coral-text);
  color: #fff;
  border-color: transparent;
}

.btn-danger:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #991b1b;
  box-shadow: 0 8px 24px rgba(185, 28, 28, 0.3);
}

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

.btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
}

/* --- Upload Zone --- */
.upload-zone {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 3.5rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-smooth);
  background:
    linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
    linear-gradient(135deg, var(--line-subtle), var(--line-strong), var(--line-subtle)) border-box;
}

.upload-zone:hover,
.upload-zone.drag-over,
.upload-zone.dragover {
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--gradient-brand) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.upload-zone .upload-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
  color: var(--accent-blue);
  opacity: 0.7;
  transition: all var(--transition-smooth);
}

.upload-zone:hover .upload-icon {
  opacity: 1;
  transform: translateY(-4px);
}

.upload-zone .upload-text {
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.upload-zone .upload-browse {
  color: var(--accent-blue);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.upload-zone .upload-browse:hover {
  color: var(--accent-blue-hover);
}

/* --- File Info (after selection) --- */
.file-info { padding: 1.25rem 0; }

.file-info-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.file-name { font-weight: 600; font-size: 0.9rem; flex: 1; }
.file-size { font-size: 0.8rem; color: var(--text-muted); }
.upload-progress { padding: 1rem 0; }

/* --- Progress Bar --- */
.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(11, 11, 16, 0.07);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-blue);
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  /* A white sweep over the gradient FILL, not over the canvas — still reads. */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-large .progress-bar,
.progress-bar-lg { height: 12px; }

.progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.progress-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* --- Score Circle --- */
.score-circle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.score-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

.score-circle {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  filter: drop-shadow(0 6px 22px rgba(124, 58, 237, 0.25));
}

.score-circle svg {
  width: 100%;
  height: 100%;
}

.score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.score-value {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.score-max {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  font-weight: 500;
}

.score-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.quality-gate-badge {
  margin-top: 0.75rem;
  text-align: center;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-block;
}

/* --- Dimension Bars --- */
.dimension-group h3,
.dimensions-list + h3,
.card > h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.card > h3:first-child { margin-top: 0; }

.dimension-item,
.dimension-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.dimension-item:hover,
.dimension-row:hover {
  background: rgba(11, 11, 16, 0.04);
}

.dimension-label {
  min-width: 160px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: left;
  font-weight: 500;
}

.dimension-bar,
.dimension-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(11, 11, 16, 0.07);
  border-radius: 100px;
  overflow: hidden;
}

.dimension-fill,
.dimension-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dimension-score {
  min-width: 40px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Expandable dimension rows (assessments) --- */
.dimension-item-wrapper { margin-bottom: 0.2rem; }

.dimension-row-toggle {
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dimension-row-toggle:hover,
.dimension-row-toggle:focus-visible {
  background: rgba(11, 11, 16, 0.04);
}

.dimension-row-toggle:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.dimension-toggle-icon {
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.dimension-row-toggle[aria-expanded="true"] .dimension-toggle-icon {
  transform: rotate(180deg);
}

.dimension-assessment {
  padding: 0.15rem 0.5rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.dimension-assessment p { margin: 0; }

.dimension-flag { margin-inline-start: 0.5rem; }

/* --- Timeline --- */
.timeline {
  position: relative;
  padding-left: 2.25rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.65rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-blue), var(--border-color));
  border-radius: 1px;
}

.timeline-item {
  position: relative;
  padding-bottom: 1.75rem;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: -1.65rem;
  top: 0.15rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: var(--surface-0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  transition: all var(--transition-smooth);
}

.timeline-item.completed .timeline-dot,
.timeline-item.timeline-done .timeline-dot,
.timeline-dot.done {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #fff;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

.timeline-item.active .timeline-dot,
.timeline-item.timeline-active .timeline-dot,
.timeline-dot.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.22), 0 2px 6px rgba(109, 40, 217, 0.3);
  animation: pulse-ring 2s ease-in-out infinite;
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.22); }
  50% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.12); }
}

.timeline-label {
  font-size: 0.9rem;
  font-weight: 500;
}

.timeline-item.pending .timeline-label,
.timeline-item.timeline-pending .timeline-label { color: var(--text-muted); }

.timeline-item.completed .timeline-label,
.timeline-item.timeline-done .timeline-label { color: var(--accent-green); }

.timeline-item.active .timeline-label,
.timeline-item.timeline-active .timeline-label { color: var(--accent-blue); font-weight: 600; }

.timeline-detail {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  /* A pill that breaks across two lines ("REBUILD / READY") reads as broken
     layout, so a badge never wraps — the column it sits in is sized for the
     longest label instead. */
  white-space: nowrap;
  line-height: 1.35;
}

/* Washes are the v3 accent at low alpha over white. Amber is a light hue, so
   its border runs heavier than the others or the pill has no edge at all. */
.badge-success { background: rgba(5, 150, 105, 0.1); color: var(--accent-green); border-color: rgba(5, 150, 105, 0.2); }
.badge-warning { background: var(--amber-wash, rgba(245, 158, 11, 0.12)); color: var(--accent-yellow); border-color: rgba(245, 158, 11, 0.35); }
.badge-error { background: rgba(185, 28, 28, 0.08); color: var(--accent-red); border-color: rgba(185, 28, 28, 0.2); }
.badge-info { background: var(--brand-tint); color: var(--accent-blue); border-color: rgba(109, 40, 217, 0.25); }
.badge-default { background: rgba(11, 11, 16, 0.05); color: var(--text-muted); border-color: rgba(11, 11, 16, 0.1); }

/* --- File / Download Cards --- */
.file-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.downloads-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.file-card {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition-smooth);
}

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

.file-card .file-icon,
.file-card-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.file-card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.15rem;
}

.file-card .file-title,
.file-card-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.file-card .file-desc,
.file-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Toast --- */
.toast-container {
  position: fixed;
  top: calc(var(--nav-height) + 1rem);
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: color-mix(in srgb, var(--surface-0) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.15rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  max-width: 380px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
  animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.success, .toast-success { border-left: 3px solid var(--accent-green); }
.toast.error, .toast-error { border-left: 3px solid var(--accent-red); }
.toast.warning, .toast-warning { border-left: 3px solid var(--accent-yellow); }
.toast.info, .toast-info { border-left: 3px solid var(--accent-blue); }

@keyframes toastSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 16, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active,
.modal-overlay.show {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.modal {
  background: color-mix(in srgb, var(--surface-0) 95%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: 1.75rem;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--glass-border);
  animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-header h3 { margin: 0; }

.modal-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  transition: all var(--transition-fast);
}

.modal-close:hover { color: var(--text-primary); background: var(--bg-card-hover); }

.modal-body p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.modal-footer,
.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { transform: translateY(16px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* --- Spinner --- */
.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(124, 58, 237, 0.22);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

.spinner-lg { width: 36px; height: 36px; border-width: 3px; }

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

/* --- Loading / Empty States --- */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 2rem;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}

.empty-state p {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

/* --- Login --- */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--gradient-bg);
  position: relative;
}

.login-container::before {
  content: '';
  position: fixed;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.14) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.login-container::after {
  content: '';
  position: fixed;
  bottom: -15%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.login-card {
  background: color-mix(in srgb, var(--surface-0) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 3rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-xl);
  text-align: center;
  position: relative;
  z-index: 1;
  animation: loginAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes loginAppear {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.login-card h1 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  letter-spacing: -0.03em;
}

.login-card .subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

/* Sign in with Google. Google's branding rules: the full-colour "G" on a white
   ground, a neutral border, the words "Continue with Google". Hidden until
   auth.js confirms the server has Google configured. */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #747775;
  font-weight: 500;
  text-decoration: none;
}

.btn-google:hover {
  background: #f8f9fa;
  box-shadow: var(--shadow-sm);
}

.btn-google svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border-color);
}

.login-lang {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.form-group {
  text-align: left;
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select.input,
.form-group textarea.input,
.login-card input.input,
.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: all var(--transition-fast);
  margin-bottom: 1rem;
}

.form-group input:focus,
.login-card input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16);
}

.form-group select.input {
  appearance: auto;
  cursor: pointer;
}

.form-group textarea.input {
  resize: vertical;
  min-height: 3.5rem;
}

.field-error {
  color: var(--accent-red);
  font-size: 0.85rem;
  font-weight: 500;
  margin: -0.5rem 0 1rem;
}

/* A field the form refused: red border the same width as the focus ring, so
   the control itself says "this one", not just a line of text below it. */
.form-group select.input[aria-invalid="true"],
.form-group input[aria-invalid="true"] {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14);
}

.field-hint {
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}

[dir="rtl"] .field-hint {
  text-align: left;
}

.checkbox-group {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent-blue);
  cursor: pointer;
}

[dir="rtl"] .checkbox-group {
  flex-direction: row-reverse;
}

[dir="rtl"] .form-group {
  text-align: right;
}

.error-msg,
.login-error {
  background: var(--coral-wash);
  color: var(--accent-red);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(185, 28, 28, 0.15);
}

/* A link inside an auth banner (auth.js banner(msg, isError, link)). */
.login-error a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* Show/hide toggle sitting inside a password field on the auth pages. The
   wrapper takes over the input's bottom margin so the toggle can centre on
   the input itself. */
.password-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.login-card .password-wrap input.input {
  margin-bottom: 0;
  padding-right: 4.25rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--text-primary);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
}

[dir="rtl"] .login-card .password-wrap input.input {
  padding-right: 1rem;
  padding-left: 4.25rem;
}

[dir="rtl"] .password-toggle {
  right: auto;
  left: 0.5rem;
}

/* --- Status Page --- */
.status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

#status-filename,
.status-filename {
  font-weight: 700;
  font-size: 1rem;
}

/* --- Analysis Cards (Home's short "recent" list) --- */
.analysis-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* space-between alone leaves ZERO room between the two groups once the row
     is full, which is how the name/badge used to collide with the meta. The
     gap is the guaranteed minimum. */
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  transition: all var(--transition-smooth);
  text-decoration: none;
  color: inherit;
  background: var(--glass-bg);
}

.analysis-card:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: rgba(109, 40, 217, 0.22);
}

.analysis-card-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0; /* let the name truncate instead of shoving the badge out */
}

.analysis-card-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.analysis-time { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.analysis-meta { font-size: 0.75rem; color: var(--text-muted); }

/* --- Analyses table (My Analyses) ---
   A real column grid rather than two free-floating flex groups: every row
   repeats the same track list, so status/score/age/action line up down the
   page instead of landing wherever the row's text happens to end. */
.analysis-table {
  /* The status track is sized for the widest label in the run-state
     vocabulary ("Generating rebuild…" measures ~162px), since each row is its
     own grid and cannot auto-size a shared column. */
  --analysis-cols: minmax(0, 1fr) 11rem 3.5rem 4rem minmax(0, 10.5rem);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.analysis-head,
.analysis-row {
  display: grid;
  grid-template-columns: var(--analysis-cols);
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
}

.analysis-head {
  padding-block: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(11, 11, 16, 0.03);
  border-bottom: 1px solid var(--border-color);
}

/* Header cells over the right-aligned numeric columns. A plain class rather
   than reusing .analysis-score/.analysis-age, whose weight and size would
   make those two headers louder than the rest of the row. */
.analysis-head-num { text-align: end; }

/* The row is a DIV, not an anchor, so the action cell can hold a real
   <button> -- a <button> inside an <a> is invalid HTML and reaches screen
   readers as nested interactive content. Instead the name cell's link is
   "stretched" over the whole row via ::after, which keeps one anchor, one
   button, and a single tab stop for each. */
.analysis-row {
  position: relative;
  color: inherit;
  border-top: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

/* Rows used to be the only <a> among <div> siblings, so `:first-of-type`
   found the first one. They are DIVs now, like `.analysis-head`, which would
   make the header the first-of-type and leave a double border under it. */
.analysis-row:first-child,
.analysis-head + .analysis-row { border-top: none; }
.analysis-row:hover { background: var(--surface-2); }

.analysis-link {
  text-decoration: none;
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Covers the row, so clicking anywhere except the button still opens the run.
   Stops short of the action column so it can never sit over the button, even
   if a future cell changes width. */
.analysis-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.analysis-row:focus-within { outline: 2px solid var(--accent-blue); outline-offset: -2px; }

/* Above the stretched link, so the button gets the click rather than the row. */
.analysis-action > button {
  position: relative;
  z-index: 1;
}

.analysis-name {
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The link fills its cell so the whole name is a click target, not just the
   glyphs. */
.analysis-name > .analysis-link { display: block; }

.analysis-status { min-width: 0; }

.analysis-score {
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.analysis-score-empty { color: var(--text-muted); font-weight: 500; }
/* Desktop reads the scale off the "Score" column header; the stacked mobile
   row has no header, so the suffix comes back there. */
.analysis-score-max { display: none; font-weight: 500; color: var(--text-muted); }

.analysis-age {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.analysis-action {
  min-width: 0;
  text-align: end;
  font-size: 0.75rem;
}

.analysis-expiry {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.analysis-expiry.is-urgent { color: var(--accent-yellow); font-weight: 600; }

/* The unlock hint is the row's action, not more grey metadata — it gets
   button-ish weight so it is not read as noise beside the expiry date. */
.analysis-unlock {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 100px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  border: 1px solid var(--brand-border-tint);
}

.analysis-row:hover .analysis-unlock {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

/* Same pill, green instead of violet, when the row can be unlocked with a
   free-run unit. The colour change is the point: scanning the column, "free"
   must not look like one more price. */
.analysis-unlock.is-free {
  background: rgba(5, 150, 105, 0.1);
  color: var(--accent-green);
  border-color: rgba(5, 150, 105, 0.35);
}

/* A <button> resets: it does not inherit the row's font the way a <span> did. */
button.analysis-unlock {
  font: inherit;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  appearance: none;
}

button.analysis-unlock[disabled] { cursor: default; opacity: 0.6; }

/* "Generate report/rebuild": already paid for, so it is neither an upsell
   (violet) nor a free-run offer (green). Neutral, quieter than both. */
.analysis-unlock.is-start {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.analysis-row:hover .analysis-unlock.is-start {
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  border-color: var(--brand-border-tint);
}

.analysis-row:hover .analysis-unlock.is-free {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green);
}

.analysis-more {
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- Recent Section --- */
.recent-section { margin-top: 2rem; }

.recent-section h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.recent-list {
  display: flex;
  flex-direction: column;
}

/* --- Verdict --- */
/* The verdict is a quoted finding, so it gets the brand's accent-card
   treatment (a 4px brand rule down the leading edge) instead of being set as
   centred bold prose, which read as a pull-quote with nowhere to sit. */
.verdict-block {
  margin-top: 1.75rem;
  text-align: start;
  max-width: 38rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border-inline-start: 4px solid var(--brand-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
}

[dir="rtl"] .verdict-block {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.verdict-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-600);
  margin-bottom: 0.4rem;
}

.verdict-text {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.6;
  margin: 0;
}

/* --- Recommendations --- */
.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.recommendation-item { padding: 0.25rem 0; }

.recommendation-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.recommendation-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.recommendation-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.recommendation-body {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 0 2.2rem;
}

/* --- VC ScoreCard --- */
.vc-overall {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.vc-overall-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vc-overall-score {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Task 21 — freemium portal UX: home page, usage meter, locked/teaser
   panels, staged progress tracks, checkout banners, danger zone.
   ===================================================================== */

/* --- Home: hero / greeting --- */
.home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.home-greeting h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}

.home-greeting p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.home-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.continue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-color: var(--brand-border-tint);
  background: linear-gradient(135deg, var(--brand-tint), var(--glass-bg));
}

.continue-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-blue);
  margin-bottom: 0.25rem;
}

.continue-card-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.section-row h3 { margin: 0; }

.link-more {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-blue);
  text-decoration: none;
}

.link-more:hover { color: var(--accent-blue-hover); }

/* --- Usage meter --- */
.usage-meter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.usage-meter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.usage-meter-remaining {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.usage-meter .progress-fill {
  background: var(--gradient-blue);
}

.usage-meter.cap-reached .progress-fill {
  background: linear-gradient(135deg, var(--score-low), var(--coral-text));
}

.cap-reached-banner {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--coral-wash);
  border: 1px solid rgba(185, 28, 28, 0.15);
}

.cap-reached-banner strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
  color: var(--text-primary);
}

.cap-reached-banner p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}

/* --- Expiry reminders --- */
.expiry-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.expiry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.82rem;
}

.expiry-item-name { font-weight: 600; color: var(--text-primary); }
.expiry-item-date { color: var(--accent-yellow); font-weight: 600; white-space: nowrap; }

/* --- Locked / unlock teaser panels --- */
.unlock-card {
  border: 1px dashed rgba(124, 58, 237, 0.50);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(34, 211, 238, 0.06));
  text-align: center;
  margin-top: 1rem;
}

.unlock-card-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}

.unlock-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.unlock-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 30rem;
  margin: 0 auto 1rem;
  line-height: 1.5;
}

.unlock-card .btn { min-width: 12rem; }

.unlock-card-note {
  margin-top: 0.65rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Free-run grants: the paywall's second currency. Deliberately quieter than the
   priced CTA beside it -- it is an alternative, not the primary action, and a
   customer holding units should still be able to see what the run costs. */
.use-free-run-btn {
  margin-inline-start: 0.5rem;
}

.unlock-card .use-free-run-btn {
  margin-inline-start: 0;
  margin-top: 0.65rem;
  min-width: 12rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.unlock-card-free-note {
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
  font-size: 0.75rem !important;
  color: var(--text-muted);
}

.locked-row-icon {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.35rem;
  color: var(--ink-400);
  vertical-align: middle;
}

.locked-row-icon svg { display: block; }

/* Inside a status badge the lock is a modifier on the word, not a second
   element: it rides the badge's own colour and sits tight against the text. */
.badge > .locked-row-icon {
  margin-inline-start: 0.3rem;
  color: inherit;
  opacity: 0.75;
}

/* --- Assessment reveals (free-assessment-reveals design §8) --- */

/* The note under "Core Persuasion" / the VC card heading: "You can read the
   reasoning behind N scores for free. M left." A subtle line, not a banner. */
.reveals-note {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Small text-button affordance on a revealable row. Deliberately lighter
   than .btn-sm: this sits inside a dense score row, not a card footer. */
.reveal-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 8px);
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-blue);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.reveal-btn:hover:not(:disabled) {
  background: var(--accent-blue-light);
  border-color: var(--accent-blue);
}

.reveal-btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* "Unlock the full analysis" inside the reveals note once the budget is
   spent: a text link in look, a button in behaviour (it starts checkout). */
.reveals-unlock-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent-blue);
  text-decoration: underline;
  cursor: pointer;
}

.reveals-unlock-link:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Small tag on a row the caller has already spent a reveal on, next to the
   entitled-style expandable label. */
.revealed-tag {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 100px;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Icons that replaced emoji: they inherit colour, so they sit at the weight
   of the text around them instead of shouting in full-colour glyphs. */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

.locked-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.35rem;
}

.recommendation-item.is-locked .recommendation-title {
  color: var(--text-secondary);
}

.recommendations-locked-card {
  text-align: center;
  padding: 1.25rem;
}

/* --- Deliverable / download cards: generating + failed + locked states --- */
.file-card.is-locked,
.file-card.is-generating,
.file-card.is-failed {
  flex-wrap: wrap;
}

.file-card-generating {
  flex: 1;
  min-width: 12rem;
}

.file-card-generating .progress-bar { height: 6px; margin-bottom: 0.35rem; }

.file-card-generating-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.file-card-price {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-blue);
  white-space: nowrap;
}

.file-card-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* --- Staged progress tracks (status.html) --- */
.stage-track-group {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.stage-track {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-color);
}

.stage-track:last-child { border-bottom: none; padding-bottom: 0; }

.stage-track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.stage-track-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.stage-track-done-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--accent-green);
  font-weight: 600;
}

.stage-track-done-summary .timeline-dot { position: static; }

.stage-track-locked {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(11, 11, 16, 0.04);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.stage-track-locked-icon { font-size: 1rem; opacity: 0.7; }

.stage-track .timeline { padding-left: 2rem; }

/* --- Checkout return banners --- */
.checkout-banner {
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  animation: contentFadeIn 0.3s ease;
}

.checkout-banner-icon { font-size: 1.4rem; flex-shrink: 0; }

.checkout-banner-body { flex: 1; }

.checkout-banner-title {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}

.checkout-banner-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.checkout-banner.pending {
  background: var(--brand-tint);
  border: 1px solid var(--brand-border-tint);
}

.checkout-banner.success {
  background: rgba(5, 150, 105, 0.07);
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.checkout-banner.timeout {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.checkout-banner.cancel {
  background: rgba(11, 11, 16, 0.04);
  border: 1px solid var(--border-color);
}

/* --- Purged-run banner --- */
.purged-banner {
  border-radius: var(--radius);
  padding: 1rem 1.35rem;
  margin-bottom: 1.5rem;
  background: rgba(11, 11, 16, 0.04);
  border: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.purged-banner strong { display: block; color: var(--text-primary); margin-bottom: 0.15rem; }

/* --- Danger zone --- */
.danger-zone-card {
  border-color: rgba(185, 28, 28, 0.18);
  background: rgba(185, 28, 28, 0.03);
}

.danger-zone-card h3 {
  color: var(--accent-red) !important;
}

.danger-zone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}

.danger-zone-row + .danger-zone-row { border-top: 1px solid rgba(185, 28, 28, 0.12); }

.danger-zone-row-label { font-weight: 600; font-size: 0.88rem; }

.danger-zone-row-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 34rem;
  margin-top: 0.15rem;
}

.danger-irreversible {
  color: var(--accent-red);
  font-weight: 600;
  font-size: 0.85rem;
}

.danger-note { font-size: 0.8rem; }

.danger-confirm-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 1rem 0 0.4rem;
}

.danger-confirm-input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid rgba(185, 28, 28, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text-primary);
}

.danger-confirm-input:focus {
  outline: none;
  border-color: var(--accent-red);
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12);
}

.danger-done-state {
  text-align: center;
  padding: 1.5rem;
}

/* --- Account page --- */
.account-summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.account-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--brand-tint);
  border: 1px solid var(--brand-border-tint);
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.account-summary-name { font-weight: 700; font-size: 1rem; }
.account-summary-email { font-size: 0.82rem; color: var(--text-muted); }

/* --- Utilities --- */
.hidden { display: none !important; }
/* The HTML `hidden` attribute is only a user-agent `display: none`, which any
   class that sets `display` silently overrides. The reveal row's confirm
   controls shipped always-visible because of exactly that, so make the
   attribute authoritative everywhere in the portal. */
[hidden] { display: none !important; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }

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

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* --- RTL Support --- */
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .nav-right { flex-direction: row-reverse; }
[dir="rtl"] .timeline { padding-left: 0; padding-right: 2.25rem; }
[dir="rtl"] .timeline::before { left: auto; right: 0.65rem; }
[dir="rtl"] .timeline-dot { left: auto; right: -1.65rem; }
[dir="rtl"] .dimension-label { text-align: right; }
[dir="rtl"] .dimension-score { text-align: left; }
[dir="rtl"] .file-card { text-align: right; }
[dir="rtl"] .form-group { text-align: right; }
[dir="rtl"] .toast-container { right: auto; left: 1rem; }
[dir="rtl"] .toast { border-left: none; }
[dir="rtl"] .toast.success, [dir="rtl"] .toast-success { border-left: none; border-right: 3px solid var(--accent-green); }
[dir="rtl"] .toast.error, [dir="rtl"] .toast-error { border-left: none; border-right: 3px solid var(--accent-red); }
[dir="rtl"] .toast.warning, [dir="rtl"] .toast-warning { border-left: none; border-right: 3px solid var(--accent-yellow); }
[dir="rtl"] .toast.info, [dir="rtl"] .toast-info { border-left: none; border-right: 3px solid var(--accent-blue); }
[dir="rtl"] .modal-footer,
[dir="rtl"] .modal-actions { flex-direction: row-reverse; }
[dir="rtl"] .analysis-card { flex-direction: row-reverse; }
[dir="rtl"] .status-header { flex-direction: row-reverse; }
[dir="rtl"] .file-info-row { flex-direction: row-reverse; }
[dir="rtl"] .recommendation-header { flex-direction: row-reverse; }
[dir="rtl"] .recommendation-body { margin: 0 2.2rem 0 0; }
[dir="rtl"] .vc-overall { flex-direction: row-reverse; }

/* Task 21 additions */
[dir="rtl"] .home-hero { flex-direction: row-reverse; }
[dir="rtl"] .continue-card { flex-direction: row-reverse; }
[dir="rtl"] .section-row { flex-direction: row-reverse; }
[dir="rtl"] .usage-meter-row { flex-direction: row-reverse; }
[dir="rtl"] .expiry-item { flex-direction: row-reverse; }
[dir="rtl"] .file-card-price { text-align: left; }
[dir="rtl"] .stage-track-header { flex-direction: row-reverse; }
[dir="rtl"] .stage-track-done-summary { flex-direction: row-reverse; }
[dir="rtl"] .stage-track-locked { flex-direction: row-reverse; }
[dir="rtl"] .stage-track .timeline { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .checkout-banner { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .danger-zone-row { flex-direction: row-reverse; }
[dir="rtl"] .danger-zone-row + .danger-zone-row { border-top: 1px solid rgba(185, 28, 28, 0.12); }
[dir="rtl"] .account-summary { flex-direction: row-reverse; }
[dir="rtl"] .locked-row-icon { margin-inline-start: 0; margin-inline-end: 0.35rem; }

/* --- Mobile Responsive --- */
@media (max-width: 640px) {
  :root {
    --radius: 12px;
    --radius-sm: 8px;
    --nav-height: 52px;
  }

  .portal-container { padding: 1rem; }
  .card { padding: 1.25rem; }
  .file-cards { grid-template-columns: 1fr; }

  .nav { height: auto; }
  .nav-inner {
    padding: 0 0.75rem;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--nav-height);
    gap: 0.25rem;
  }
  .nav-brand { font-size: 1rem; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 0.3rem 0.5rem; font-size: 0.75rem; }
  .nav-right { gap: 0.5rem; }
  .nav-right > .nav-link { font-size: 0.75rem; padding: 0.25rem 0.4rem; }
  .lang-selector button { padding: 0.2rem 0.5rem; font-size: 0.7rem; }

  .upload-zone { padding: 2rem 1rem; }
  .score-circle { width: 140px; height: 140px; }
  .score-value { font-size: 2rem; }
  .dimension-label { min-width: 100px; font-size: 0.72rem; }

  .login-card { padding: 2rem 1.5rem; }
  .login-container::before,
  .login-container::after { display: none; }

  .file-card { flex-direction: column; align-items: flex-start; }

  /* Task 21 additions */
  .home-hero { flex-direction: column; align-items: flex-start; }
  .home-cta-row { width: 100%; }
  .home-cta-row .btn { flex: 1; }
  .continue-card { flex-direction: column; align-items: flex-start; }
  .usage-meter-row { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .checkout-banner { flex-direction: column; text-align: center; }
  .danger-zone-row { flex-direction: column; align-items: flex-start; }
  .file-card.is-generating,
  .file-card.is-locked,
  .file-card.is-failed { flex-direction: column; align-items: stretch; }

  /* Analyses table -> stacked rows. Placement is explicit (name on its own
     line, then status/score/age, then the action) so nothing can collide the
     way five columns squeezed into a phone width would. Grid placement is
     writing-mode aware, so this restacks correctly in Hebrew too. */
  .analysis-head { display: none; }

  .analysis-row {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0.45rem 0.75rem;
    padding: 0.85rem 1rem;
  }

  .analysis-name   { grid-area: 1 / 1 / 2 / 4; }
  .analysis-status { grid-area: 2 / 1; }
  .analysis-score  { grid-area: 2 / 2; text-align: start; }
  .analysis-age    { grid-area: 2 / 3; }
  .analysis-action { grid-area: 3 / 1 / 4 / 4; text-align: start; }
  .analysis-score-max { display: inline; }

  /* The [dir="rtl"] row-reverse rule above outranks a bare `.analysis-card`
     here (media queries add no specificity), so RTL needs its own override. */
  .analysis-card,
  [dir="rtl"] .analysis-card { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .analysis-card-main { flex-wrap: wrap; }
}

/* --- Legal notices and links (task 24) ---
   The consent line under the signup / accept-invite forms, and the small
   Terms + Privacy footer on the auth and account pages. The legal DOCUMENT
   pages under /portal/legal/ carry their own inline stylesheet (they are
   generated by tools/build-legal-pages.js) and do not use these rules. */
.legal-consent {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.legal-consent a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.legal-consent a:hover { color: var(--accent-blue); }

.legal-links {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.legal-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.legal-links a:hover { color: var(--accent-blue); text-decoration: underline; }


/* --- Icons that used to be emoji ---------------------------------------
   These containers were sized with font-size, because their contents were
   text glyphs. They now hold inline SVG, so they size the box and let the
   icon inherit the surrounding colour. */
.file-card .file-icon,
.file-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-subtle);
  color: var(--brand-600);
  font-size: inherit;
}

.unlock-card-icon {
  display: flex;
  justify-content: center;
  color: var(--brand-600);
  margin-bottom: 0.6rem;
  opacity: 1;
  font-size: inherit;
}

.checkout-banner-icon {
  display: inline-flex;
  align-items: center;
  font-size: inherit;
}

.checkout-banner.pending .checkout-banner-icon,
.checkout-banner.cancel .checkout-banner-icon { color: var(--brand-600); }
.checkout-banner.success .checkout-banner-icon { color: var(--green-text); }
.checkout-banner.timeout .checkout-banner-icon { color: var(--amber); }

.stage-track-locked-icon {
  display: inline-flex;
  align-items: center;
  font-size: inherit;
  opacity: 1;
}

.timeline-dot svg { display: block; }

.recommendations-locked-card .locked-row-icon {
  display: flex;
  justify-content: center;
  margin: 0 0 0.5rem;
  color: var(--brand-600);
}

/* --- Quiet card: flat, no blur, for a secondary note beside a real card --- */
.card-quiet {
  background: var(--surface-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* --- VC scorecard number: the score is the hero, the word is the label --- */
.vc-overall { align-items: baseline; }

.vc-overall-score {
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.vc-overall-max {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
}

.vc-overall-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* The lock sits with the label it qualifies, at the label's own weight. */
.dimension-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* One note for the recommendations section, not one per row. */
#recommendations-note {
  margin: -0.35rem 0 1rem;
  font-style: normal;
  color: var(--text-muted);
}


/* --- Billing sections + payment table -----------------------------------
   Both sections are cards now; the history table had no styling at all,
   which read as loose text rather than as a table. */
.billing-section + .billing-section { margin-top: 1.5rem; }

.billing-section > h3 { margin-top: 0; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th {
  text-align: start;
  padding: 0.5rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.data-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.data-table tr:last-child td { border-bottom: none; }


/* --- The wordmark on the sign-in / sign-up / reset / invite screens ------
   Brand continuity: someone arriving from pmoc.ai should see the same mark
   on the door they sign in through. */
.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-decoration: none;
  margin-bottom: 1.75rem;
}

.login-brand:hover { color: var(--ink-900); }

.login-brand-mark { width: 19px; height: 19px; flex-shrink: 0; }