/* ---------------------------------------------------------
   ALLSCANTOOL — SCANNER CSS (FINAL-LOCK VERSION)
   Governance: Zero Assumption Rule — April 2026
   Owner: Lexicon Media Holdings LLC
   Scope: Scanner UI + Navigation (Hybrid Layout)
   Updated: April 14, 2026 — Complete with governance blocks
   Storage: Email only — scanner frontend is stateless
--------------------------------------------------------- */

/* ---------------------------------------------------------
   SECTION 0 — GOVERNANCE RULES (FINAL-LOCK)
   Purpose: Prevent drift, duplication, and inconsistency
   Scope: Comment-only — no functional impact
--------------------------------------------------------- */
/* Architecture Policy:
   - No section renumbering
   - No duplicate sections
   - No patch sections
   - No layout drift
*/
/* Override Policy:
   - No hidden overrides
   - No duplicate selectors
   - No repeated hover/disabled states
   - No repeated typography blocks
*/
/* Transition Policy:
   - Only allow: border-color, background, color, opacity
   - Never use: transition: all
*/
/* Flex Layout Policy:
   - All horizontal control groups must support flex-wrap
*/
/* Animation Policy:
   - Only use predefined keyframes
   - No new animations without approval
*/
/* Micro-Control Consistency:
   - Shared radius (6px or var(--radius))
   - Shared transition rules
   - Disabled opacity: 0.45
*/
/* Color Policy:
   - No raw hex values outside Section 1
   - All colors must use tokens
*/
/* CLS (Layout Stability) Policy:
   - No layout shifts on hover
   - No dynamic height changes without control
*/
/* End of Governance Rules — Locked */

/* ---------------------------------------------------------
   SECTION 1 — COLOR & SYSTEM TOKENS (LOCKED)
--------------------------------------------------------- */
:root {
  /* Primary */
  --black:          #0E0E0D;
  --black-2:        #1A1A18;
  --black-3:        #222220;
  --text-dark:      #F5F5F3;
  --orange:         #FF7A1A;

  /* Light Theme */
  --white:          #FFFFFF;
  --white-elevated: #F7F7FB;
  --text-light:     #1A1A1F;

  /* Secondary */
  --grey:           #C2C1BC;
  --grey-dim:       #6B6A66;
  --divider:        #2A2A28;
  --divider-light:  #E0E0E6;

  /* Semantic */
  --success:        #00D47E;
  --warning:        #FFB800;
  --error:          #FF3B30;

  /* Dim variants — rgba only, defined here, used everywhere */
  --orange-dim:     rgba(255, 122, 26, 0.12);
  --orange-glow:    rgba(255, 122, 26, 0.25);
  --success-dim:    rgba(0, 212, 126, 0.12);
  --warning-dim:    rgba(255, 184, 0, 0.12);
  --error-dim:      rgba(255, 59, 48, 0.12);

  /* System Tokens */
  --radius:         10px;
  --font-ui:        'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Governance Tokens */
  --focus-ring:     var(--orange);
  --border-accent:  1px solid var(--orange);
  --transition-speed: 0.2s;
  --shadow-accent:  0 0 20px rgba(255, 122, 26, 0.15);
  --card-padding:   14px 16px;

  /* Layout Tokens */
  --nav-height:     52px;

  /* Motion Tokens */
  --chevron-speed:  0.25s;
  --ring-speed-1:   0.9s;
  --ring-speed-2:   1.4s;
  --ring-speed-3:   2s;

  /* Component Tokens */
  --jump-top-size:  42px;
}

/* ---------------------------------------------------------
   SECTION 2 — THEME SYSTEM
--------------------------------------------------------- */
[data-theme="dark"] {
  --bg:           var(--black);
  --bg-elevated:  var(--black-2);
  --bg-card:      var(--black-3);
  --text-color:   var(--text-dark);
  --divider-color:var(--divider);
  --results-bg:   var(--black-2);
  --input-bg:     var(--black-2);
}

[data-theme="light"] {
  --bg:           var(--white);
  --bg-elevated:  var(--white-elevated);
  --bg-card:      #EFEFEF;
  --text-color:   var(--text-light);
  --divider-color:var(--divider-light);
  --results-bg:   #FFFFFF;
  --input-bg:     #FFFFFF;
}

/* ---------------------------------------------------------
   SECTION 3 — ACCESSIBILITY FLAGS
--------------------------------------------------------- */
[data-calm="true"] * {
  transition-duration: 0.15s !important;
}

[data-reduce-motion="true"] *,
@media (prefers-reduced-motion: reduce) {
  * {
    animation:       none !important;
    transition:      none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   SECTION 4 — GLOBAL RESET
--------------------------------------------------------- */
html { scroll-behavior: smooth; }
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* ---------------------------------------------------------
   SECTION 5 — GLOBAL LAYOUT
--------------------------------------------------------- */
body {
  background:      var(--bg);
  color:           var(--text-color);
  font-family:     var(--font-ui);
  margin:          0;
  padding:         0;
  display:         flex;
  justify-content: center;
  align-items:     flex-start;
  min-height:      100vh;
  line-height:     1.5;
}

/* ---------------------------------------------------------
   SECTION 6 — SCANNER CONTAINER
--------------------------------------------------------- */
.scanner-container {
  width:         90vw;
  max-width:     900px;
  margin-top:    40px;
  background:    var(--bg-elevated);
  padding:       24px;
  border-radius: var(--radius);
  border:        var(--border-accent);
  box-shadow:    var(--shadow-accent);
}

/* ---------------------------------------------------------
   SECTION 7 — HEADER
--------------------------------------------------------- */
.header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   16px;
  gap:             12px;
}

.header h2 {
  margin:      0;
  font-weight: 600;
  font-size:   18px;
}

.header-controls {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.scan-session-chip {
  padding:       4px 10px;
  border-radius: 20px;
  background:    var(--bg-card);
  border:        1px solid var(--divider-color);
  font-size:     11px;
  font-weight:   600;
  color:         var(--grey);
  user-select:   none;
}

.theme-toggle {
  padding:       6px 12px;
  border-radius: 6px;
  background:    var(--bg-card);
  border:        1px solid var(--divider-color);
  cursor:        pointer;
  font-size:     13px;
  font-weight:   600;
  color:         var(--text-color);
  font-family:   var(--font-ui);
  transition:    background     var(--transition-speed),
                 border-color   var(--transition-speed);
}

.theme-toggle:hover {
  background:   var(--orange-dim);
  border-color: var(--orange);
}

/* ---------------------------------------------------------
   SECTION 8 — INSTRUCTION TEXT
--------------------------------------------------------- */
.instruction {
  color:         var(--text-color);
  opacity:       0.75;
  margin-bottom: 14px;
  font-size:     14px;
}

/* ---------------------------------------------------------
   SECTION 9 — INPUT AREA
--------------------------------------------------------- */
textarea {
  width:         100%;
  height:        220px;
  background:    var(--input-bg);
  color:         var(--text-color);
  border:        var(--border-accent);
  border-radius: var(--radius);
  padding:       14px;
  font-family:   var(--font-mono);
  font-size:     14px;
  resize:        none;
  outline:       none;
  transition:    border-color var(--transition-speed) ease;
}

textarea::placeholder { color: var(--grey); }

.input-status {
  margin-top:      6px;
  font-size:       11px;
  color:           var(--grey);
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             6px;
}

.scan-context {
  font-size:  11px;
  color:      var(--grey);
  margin-top: 6px;
  opacity:    0.75;
}

.char-limit-bar {
  height:        4px;
  width:         100%;
  background:    var(--divider-color);
  border-radius: 4px;
  margin-top:    6px;
  overflow:      hidden;
}

.char-limit-fill {
  height:     100%;
  width:      0%;
  background: var(--orange);
  transition: width      0.25s ease,
              background 0.25s ease;
}

.char-limit-fill.warning { background: var(--warning); }
.char-limit-fill.danger  { background: var(--error); }

/* ---------------------------------------------------------
   SECTION 10 — PRIMARY ACTION BUTTON
--------------------------------------------------------- */
.scan-btn {
  width:         100%;
  margin-top:    14px;
  padding:       14px;
  background:    var(--orange);
  color:         var(--text-dark);
  border:        none;
  border-radius: var(--radius);
  font-size:     16px;
  font-weight:   700;
  cursor:        pointer;
  font-family:   var(--font-ui);
  transition:    opacity    var(--transition-speed) ease,
                 box-shadow var(--transition-speed) ease,
                 transform  0.15s ease;
}

.scan-btn:hover    { opacity: 0.88; box-shadow: 0 0 12px rgba(255, 122, 26, 0.4); transform: translateY(-1px); }
.scan-btn:active   { opacity: 0.75; transform: translateY(0); }
.scan-btn:disabled { opacity: 0.4;  cursor: not-allowed; transform: none; }

.shortcut-hint {
  margin-top:  6px;
  font-size:   11px;
  color:       var(--grey);
  text-align:  center;
  opacity:     0.75;
  user-select: none;
}

/* ---------------------------------------------------------
   SECTION 11 — RESULTS PANEL
--------------------------------------------------------- */
.results-panel {
  display:       none;
  margin-top:    20px;
  background:    var(--results-bg);
  border:        1px solid var(--divider-color);
  border-radius: var(--radius);
  overflow:      hidden;
}

.results-panel.visible { display: block; }

.results-panel[data-state="clean"]    { border-color: var(--success); box-shadow: 0 0 14px rgba(0, 212, 126, 0.12); }
.results-panel[data-state="warning"]  { border-color: var(--warning); box-shadow: 0 0 14px rgba(255, 184, 0, 0.12); }
.results-panel[data-state="critical"] { border-color: var(--error);   box-shadow: 0 0 14px rgba(255, 59, 48, 0.12); }

.results-header {
  position:        sticky;
  top:             var(--nav-height);
  z-index:         100;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             10px;
  padding:         var(--card-padding);
  border-bottom:   1px solid var(--divider-color);
  background:      var(--bg-elevated);
}

.results-title   { font-size: 15px; font-weight: 700; }
.results-summary { display: flex; gap: 12px; flex-wrap: wrap; }

.summary-badge { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 100px; }
.summary-badge.critical { background: var(--error-dim);   color: var(--error);   border: 1px solid rgba(255, 59, 48, 0.3); }
.summary-badge.warning  { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(255, 184, 0, 0.3); }
.summary-badge.clean    { background: var(--success-dim); color: var(--success); border: 1px solid rgba(0, 212, 126, 0.3); }

.score-badge  { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; font-family: var(--font-mono); }
.score-value  { font-size: 20px; font-weight: 800; line-height: 1; }
.score-value.good { color: var(--success); }
.score-value.fair { color: var(--warning); }
.score-value.poor { color: var(--error); }

.results-controls {
  display:       flex;
  gap:           10px;
  padding:       10px 14px;
  border-bottom: 1px solid var(--divider-color);
  background:    var(--bg-elevated);
  flex-wrap:     wrap;
}

.results-control-btn {
  font-size:     12px;
  font-weight:   600;
  padding:       6px 10px;
  border-radius: 6px;
  border:        1px solid var(--divider-color);
  background:    var(--bg-card);
  color:         var(--text-color);
  cursor:        pointer;
  font-family:   var(--font-ui);
  transition:    border-color var(--transition-speed),
                 background   var(--transition-speed),
                 color        var(--transition-speed),
                 opacity      var(--transition-speed);
}

.results-control-btn:hover    { border-color: var(--orange); background: var(--orange-dim); }
.results-control-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.filter-group {
  display:       flex;
  gap:           8px;
  flex-wrap:     wrap;
  padding:       10px 14px;
  border-bottom: 1px solid var(--divider-color);
}

.filter-btn {
  font-size:     11px;
  font-weight:   700;
  padding:       4px 10px;
  border-radius: 100px;
  border:        1px solid var(--divider-color);
  background:    var(--bg-card);
  color:         var(--grey);
  cursor:        pointer;
  font-family:   var(--font-ui);
  transition:    border-color var(--transition-speed),
                 background   var(--transition-speed),
                 color        var(--transition-speed),
                 opacity      var(--transition-speed);
}

.filter-btn.active    { border-color: var(--orange); color: var(--orange); background: var(--orange-dim); }
.filter-btn:hover     { border-color: var(--orange); }
.filter-btn:disabled  { opacity: 0.45; cursor: not-allowed; }

.results-body {
  padding:         var(--card-padding);
  max-height:      420px;
  overflow-y:      auto;
  scroll-behavior: smooth;
  display:         flex;
  flex-direction:  column;
  gap:             12px;
}

.finding-card {
  background:    var(--bg-card, var(--bg-elevated));
  border:        1px solid var(--divider-color);
  border-radius: var(--radius);
  overflow:      hidden;
  transition:    border-color var(--transition-speed);
}

.finding-card:hover    { border-color: var(--grey-dim); }
.finding-card.critical { border-left: 3px solid var(--error); }
.finding-card.warning  { border-left: 3px solid var(--warning); }
.finding-card.clean    { border-left: 3px solid var(--success); }

.finding-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     var(--card-padding);
  cursor:      pointer;
  user-select: none;
}

.finding-severity {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding:        3px 9px;
  border-radius:  4px;
  flex-shrink:    0;
}

.finding-severity.critical { background: var(--error-dim);   color: var(--error); }
.finding-severity.warning  { background: var(--warning-dim); color: var(--warning); }
.finding-severity.clean    { background: var(--success-dim); color: var(--success); }

.finding-title { font-size: 14px; font-weight: 700; flex: 1; line-height: 1.4; }
.finding-line  { font-size: 12px; color: var(--grey); font-family: var(--font-mono); opacity: 0.75; flex-shrink: 0; }

.finding-chevron {
  font-size:   12px;
  color:       var(--grey);
  transition:  transform var(--chevron-speed) ease;
  flex-shrink: 0;
}

.finding-card.expanded .finding-chevron { transform: rotate(180deg); }

.finding-body {
  display:    none;
  padding:    0 var(--card-padding) 14px;
  border-top: 1px solid var(--divider-color);
}

.finding-card.expanded .finding-body { display: block; }

.finding-desc { font-size: 13px; color: var(--grey); line-height: 1.65; margin-top: 12px; }

.finding-fix {
  margin-top:    10px;
  padding:       10px 14px;
  background:    var(--success-dim);
  border-radius: 6px;
  font-size:     12px;
  color:         var(--success);
  font-family:   var(--font-mono);
  line-height:   1.6;
}

.finding-fix-label {
  font-size:      10px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--success);
  margin-bottom:  4px;
  font-family:    var(--font-ui);
}

.copy-finding-btn {
  margin-top:    8px;
  padding:       6px 10px;
  font-size:     11px;
  font-weight:   600;
  border-radius: 6px;
  border:        1px solid var(--divider-color);
  background:    transparent;
  color:         var(--grey);
  cursor:        pointer;
  font-family:   var(--font-ui);
  transition:    border-color var(--transition-speed),
                 background   var(--transition-speed),
                 color        var(--transition-speed),
                 opacity      var(--transition-speed);
}

.copy-finding-btn:hover    { border-color: var(--orange); color: var(--orange); }
.copy-finding-btn.copied   { border-color: var(--success); color: var(--success); }
.copy-finding-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------
   SECTION 12 — RESULTS FOOTER ACTIONS
--------------------------------------------------------- */
.results-footer {
  padding:   var(--card-padding);
  border-top:1px solid var(--divider-color);
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

.copy-btn,
.rescan-btn {
  flex:            1;
  min-width:       140px;
  padding:         12px 20px;
  border-radius:   var(--radius);
  font-size:       14px;
  font-weight:     700;
  cursor:          pointer;
  text-align:      center;
  font-family:     var(--font-ui);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  transition:      background   var(--transition-speed) ease,
                   color        var(--transition-speed) ease,
                   border-color var(--transition-speed) ease;
}

.copy-btn {
  background: transparent;
  color:      var(--orange);
  border:     var(--border-accent);
}

.copy-btn:hover    { background: var(--orange); color: var(--text-dark); }
.copy-btn.copied   { background: var(--success); border-color: var(--success); color: var(--black); }
.copy-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.rescan-btn {
  background: var(--bg-elevated);
  color:      var(--text-color);
  border:     1px solid var(--divider-color);
}

.rescan-btn:hover    { border-color: var(--orange); }
.rescan-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------
   SECTION 13 — EMPTY STATE
--------------------------------------------------------- */
.empty-state {
  text-align:  center;
  padding:     32px 20px;
  color:       var(--success);
  font-size:   15px;
  font-weight: 600;
}

.empty-state .empty-icon { font-size: 32px; margin-bottom: 12px; display: block; }

/* ---------------------------------------------------------
   SECTION 14 — LOADING STATE + SCANNER RINGS
   Animation policy: only @keyframes spin defined here.
--------------------------------------------------------- */
.loading-state {
  text-align: center;
  padding:    32px 20px;
  color:      var(--grey);
  font-size:  14px;
}

.scanner-rings {
  position: relative;
  width:    80px;
  height:   80px;
  margin:   0 auto 16px;
}

.ring {
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  border:        2px solid transparent;
}

.ring-1 { border-top-color: var(--orange); animation: spin var(--ring-speed-1) linear infinite; }
.ring-2 { inset: 8px;  border-top-color: var(--orange); opacity: 0.5;  animation: spin var(--ring-speed-2) linear infinite reverse; }
.ring-3 { inset: 18px; border-top-color: var(--orange); opacity: 0.25; animation: spin var(--ring-speed-3) linear infinite; }

.loading-phase { font-size: 12px; color: var(--grey); margin-top: 8px; opacity: 0.85; }

.loading-spinner {
  width:         28px;
  height:        28px;
  border:        3px solid var(--divider-color);
  border-top:    3px solid var(--orange);
  border-radius: 50%;
  animation:     spin 0.7s linear infinite;
  margin:        0 auto 14px;
}

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

/* ---------------------------------------------------------
   SECTION 15 — ERROR STATE
--------------------------------------------------------- */
.error-state {
  background:    rgba(255, 59, 48, 0.08);
  border:        1px solid rgba(255, 59, 48, 0.25);
  border-radius: var(--radius);
  padding:       var(--card-padding);
  color:         var(--error);
  font-size:     14px;
  margin-top:    16px;
  line-height:   1.6;
}

/* ---------------------------------------------------------
   SECTION 16 — RESPONSIVE ADJUSTMENTS
--------------------------------------------------------- */
@media (max-width: 600px) {
  .scanner-container {
    width:         100vw;
    margin-top:    0;
    border-radius: 0;
    border-left:   none;
    border-right:  none;
    padding:       16px;
  }
  .header-controls { justify-content: flex-start; width: 100%; }
  textarea          { height: 160px; }
  .results-footer   { flex-direction: column; }
  .copy-btn,
  .rescan-btn       { width: 100%; }
  .results-body     { max-height: 300px; }
  .filter-group     { gap: 6px; }
}

/* ---------------------------------------------------------
   SECTION 17 — FOCUS / ACCESSIBILITY
--------------------------------------------------------- */
button:focus,
textarea:focus,
.copy-btn:focus,
.rescan-btn:focus,
.scan-btn:focus {
  outline:        2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow:     0 0 0 3px rgba(255, 122, 26, 0.25);
}

/* ---------------------------------------------------------
   SECTION 18 — LONG TEXT STABILITY
--------------------------------------------------------- */
.finding-title,
.finding-desc,
.finding-line,
.empty-state,
.error-state,
.results-title {
  word-break:    break-word;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   SECTION 19 — SCROLLBAR POLISH
--------------------------------------------------------- */
.results-body::-webkit-scrollbar,
textarea::-webkit-scrollbar { width: 10px; }

.results-body::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track { background: var(--bg-elevated); }

.results-body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb { background: var(--divider-color); border-radius: 10px; }

.results-body::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* ---------------------------------------------------------
   SECTION 20 — SCAN HELPER TEXT
--------------------------------------------------------- */
.scan-helper {
  margin-top:  10px;
  font-size:   12px;
  color:       var(--grey);
  line-height: 1.5;
}

/* ---------------------------------------------------------
   SECTION 21 — PRINT STYLES
   Print-safe guarantee per governance policy.
   Print styles live here only.
--------------------------------------------------------- */
@media print {
  .progress-bar-wrap,
  .nav-back,
  .jump-top,
  .theme-toggle,
  .scan-session-chip,
  .results-footer,
  .results-controls,
  .filter-group,
  .copy-finding-btn,
  .shortcut-hint,
  .char-limit-bar,
  .loading-state,
  .scan-btn { display: none !important; }

  .scanner-container { border: none; box-shadow: none; width: 100%; max-width: 100%; margin: 0; padding: 0; }
  .results-body      { max-height: none; overflow: visible; }
  .finding-body      { display: block !important; }
  .finding-card      { break-inside: avoid; }
  body               { background: white; color: black; }
  .finding-title,
  .finding-desc      { color: black; }
  .finding-severity  { border: 1px solid currentColor; }
}

/* ---------------------------------------------------------
   SECTION 22 — NAVIGATION ENHANCEMENTS
   Progress bar, back button, jump to top.
   All stateless — no storage.
--------------------------------------------------------- */
.progress-bar-wrap {
  background:    var(--bg-elevated);
  border-bottom: 1px solid var(--divider-color);
  padding:       14px 24px;
}

.progress-steps {
  display:         flex;
  align-items:     center;
  justify-content: center;
  max-width:       600px;
  margin:          0 auto;
}

.progress-step { display: flex; align-items: center; gap: 8px; }

.step-dot {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          2px solid var(--divider-color);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     800;
  color:           var(--grey);
  transition:      border-color var(--transition-speed),
                   background   var(--transition-speed),
                   color        var(--transition-speed),
                   box-shadow   var(--transition-speed);
  flex-shrink:     0;
  font-family:     var(--font-mono);
}

.step-label {
  font-size:   12px;
  font-weight: 700;
  color:       var(--grey);
  transition:  color var(--transition-speed);
  white-space: nowrap;
}

.progress-connector {
  width:       40px;
  height:      2px;
  background:  var(--divider-color);
  flex-shrink: 0;
  transition:  background var(--transition-speed);
  margin:      0 6px;
}

.progress-step.active .step-dot   { border-color: var(--orange); background: var(--orange); color: var(--black); box-shadow: 0 0 10px var(--orange-glow); }
.progress-step.active .step-label { color: var(--orange); }
.progress-step.done .step-dot     { border-color: var(--success); background: var(--success); color: var(--black); }
.progress-step.done .step-label   { color: var(--success); }
.progress-connector.done          { background: var(--success); }

.nav-back {
  display:         flex;
  align-items:     center;
  gap:             6px;
  font-size:       13px;
  font-weight:     600;
  color:           var(--grey);
  cursor:          pointer;
  padding:         6px 14px;
  border-radius:   6px;
  border:          1px solid var(--divider-color);
  transition:      color        var(--transition-speed),
                   border-color var(--transition-speed),
                   background   var(--transition-speed);
  text-decoration: none;
  background:      transparent;
  font-family:     var(--font-ui);
}

.nav-back:hover  { color: var(--text-color); border-color: var(--orange); background: var(--orange-dim); }
.nav-back.hidden { display: none; }

.jump-top {
  position:        fixed;
  bottom:          28px;
  right:           24px;
  width:           var(--jump-top-size);
  height:          var(--jump-top-size);
  border-radius:   50%;
  background:      var(--orange);
  color:           var(--black);
  border:          none;
  font-size:       18px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 16px rgba(0, 0, 0, 0.4);
  opacity:         0;
  transform:       translateY(12px);
  transition:      opacity   0.25s,
                   transform 0.25s;
  pointer-events:  none;
  z-index:         300;
}

.jump-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.jump-top:hover   { opacity: 0.88; }

@media (max-width: 600px) {
  .step-label         { display: none; }
  .progress-connector { width: 24px; }
  .jump-top           { bottom: 16px; right: 16px; }
}

/* ---------------------------------------------------------
   GOVERNANCE — END OF FILE
   This file is governance-locked.
   Any modifications require explicit owner approval.
   Lexicon Media Holdings LLC — Michie Allen
   April 14, 2026
--------------------------------------------------------- */