/* AAC Hub 2.0 — Design System
   Source of truth: DESIGN.md
   Calibrated against locked mockups in mockups/.
   Bootstrap 5.3 is loaded first (base.html); this file is the design layer. */

/* ============================================================
   TOKENS — locked Apr 6-10, 2026
   ============================================================ */
:root {
  /* Surfaces (warm gray family) */
  --bg-app:        #FAFAF7;
  --bg-sidebar:    #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-subtle:     #F4F2EC;

  /* Borders */
  --border:        #E9E6DD;
  --border-light:  #F2EFE7;
  --border-strong: #D6D2C5;

  /* Text */
  --text-primary:   #1A1814;
  --text-secondary: #6A655B;
  --text-muted:     #9A958A;

  /* Primary (deeper teal) */
  --primary:        #1F6E69;
  --primary-hover:  #155551;
  --primary-tint:   #E7F1EF;
  --primary-line:   #B8D6D2;

  --danger:  #DC2626;
  --success: #047857;

  /* Status palette — pipeline-specific, used in chips + sparkline only */
  --status-paperwork-fg:   #B45309;
  --status-paperwork-bg:   #FDF3D8;
  --status-paperwork-line: #F4D279;
  --status-paperwork-bar:  #EAB55C;

  --status-equipment-fg:   #1D4ED8;
  --status-equipment-bg:   #E0EAFC;
  --status-equipment-line: #93B4F2;
  --status-equipment-bar:  #6390E8;

  --status-trialing-fg:    #6D28D9;
  --status-trialing-bg:    #ECE5FA;
  --status-trialing-line:  #B79DEC;
  --status-trialing-bar:   #8B6BD6;

  --status-aac-user-fg:    #047857;
  --status-aac-user-bg:    #D8F1E4;
  --status-aac-user-line:  #6BC79A;
  --status-aac-user-bar:   #3DA475;

  --status-former-fg:      #6B7280;
  --status-former-bg:      #F1EFE9;
  --status-former-line:    #C9C5B8;
  --status-former-bar:     #9A958A;

  /* Spacing — 4px base */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px;

  /* Type families */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Shadows (warm-tinted) */
  --sh-xs: 0 1px 2px rgba(28, 24, 16, 0.04);
  --sh-sm: 0 2px 6px rgba(28, 24, 16, 0.05);
  --sh-md: 0 6px 18px rgba(28, 24, 16, 0.07);

  /* Motion */
  --duration-fast:   120ms;
  --duration-base:   180ms;
  --duration-medium: 200ms;
  --duration-slow:   240ms;
  --ease-standard:   ease-out;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-overshoot:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sidebar-w: 240px;
  --content-w: 960px;
  --topbar-h:  68px;
}


/* ============================================================
   RESET (mockup baseline)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, li, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
img, svg { display: block; }
input, textarea, select { font: inherit; }
fieldset { border: none; }

html, body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

.tabular { font-variant-numeric: tabular-nums lining-nums;
           font-feature-settings: 'tnum' 1, 'lnum' 1; }


/* ============================================================
   APP SHELL
   ============================================================ */
.app     { display: flex; min-height: 100vh; }
.main    { flex: 1; background: var(--bg-app); min-width: 0; }
.content { max-width: var(--content-w); margin: 0 auto;
           padding: var(--s-8) var(--s-10) var(--s-20); }


/* ============================================================
   SIDEBAR (locked)
   ============================================================ */
.sidebar { width: var(--sidebar-w); flex-shrink: 0;
           background: var(--bg-sidebar);
           border-right: 1px solid var(--border);
           display: flex; flex-direction: column;
           padding: var(--s-5) var(--s-4) var(--s-4);
           position: sticky; top: 0; height: 100vh; }

.brand      { display: flex; align-items: center; gap: 11px;
              padding: var(--s-2) var(--s-3); margin-bottom: var(--s-5); }
.brand-mark { width: 30px; height: 30px; border-radius: 7px;
              background: var(--primary); color: white;
              font-family: var(--serif); font-weight: 600; font-size: 17px;
              letter-spacing: -0.01em;
              display: flex; align-items: center; justify-content: center;
              box-shadow: 0 1px 2px rgba(31, 110, 105, 0.35); }
.brand-name { font-family: var(--serif); font-size: 21px; font-weight: 600;
              color: var(--text-primary); letter-spacing: -0.015em; }

.btn-new   { display: flex; align-items: center; justify-content: center;
             gap: 7px; background: var(--primary); color: white;
             padding: 11px 14px; border-radius: var(--r-md);
             font-weight: 600; font-size: 14px; letter-spacing: -0.005em;
             margin-bottom: var(--s-6);
             transition: background var(--duration-base) ease;
             box-shadow: 0 1px 2px rgba(31, 110, 105, 0.25),
                         inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.btn-new:hover { background: var(--primary-hover); color: white; }
.btn-new svg   { width: 16px; height: 16px; }

.nav-section { margin-bottom: var(--s-5); }
.nav-label   { font-size: 11px; font-weight: 700; letter-spacing: 0.075em;
               text-transform: uppercase; color: var(--text-muted);
               padding: 0 var(--s-3) var(--s-2); }
.nav-list    { display: flex; flex-direction: column; gap: 1px; }
.nav-item    { display: flex; align-items: center; gap: 11px;
               padding: 8px 12px; border-radius: 7px;
               color: var(--text-secondary);
               font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em;
               transition: background var(--duration-fast) ease,
                           color var(--duration-fast) ease; }
.nav-item svg          { width: 18px; height: 18px; opacity: 0.55; }
.nav-item:hover        { background: var(--bg-subtle); color: var(--text-primary); }
.nav-item:hover svg    { opacity: 0.85; }
.nav-item.active       { background: var(--primary-tint); color: var(--primary);
                         font-weight: 600; }
.nav-item.active svg   { opacity: 1; color: var(--primary); }

.sidebar-spacer { flex: 1; }

.support-card    { background: var(--bg-subtle); border: 1px solid var(--border);
                   border-radius: var(--r-lg);
                   padding: var(--s-3) var(--s-4) var(--s-4);
                   margin-bottom: var(--s-3); }
.support-card h4 { font-family: var(--serif); font-size: 15px; font-weight: 600;
                   color: var(--text-primary); margin-bottom: 4px;
                   letter-spacing: -0.005em; }
.support-card p  { font-size: 12.5px; line-height: 1.45;
                   color: var(--text-secondary); margin-bottom: 8px; }
.support-card a  { font-size: 12.5px; color: var(--primary); font-weight: 600; }

.user-chip      { display: flex; align-items: center; gap: 10px;
                  padding: 8px 10px; border-radius: 8px; }
.user-avatar    { width: 30px; height: 30px; border-radius: 50%;
                  background: var(--primary-tint); color: var(--primary);
                  display: flex; align-items: center; justify-content: center;
                  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
                  flex-shrink: 0; }
.user-meta-name { font-size: 13px; font-weight: 600;
                  color: var(--text-primary); letter-spacing: -0.005em; }
.user-meta-role { font-size: 11.5px; color: var(--text-muted); }

.user-logout-form { margin-top: var(--s-2);
                    padding-top: var(--s-3);
                    border-top: 1px solid var(--border-light); }
.user-logout-btn  { display: inline-flex; align-items: center; gap: 6px;
                    padding: 6px var(--s-3); border-radius: var(--r-md);
                    font-size: 12.5px; font-weight: 600;
                    color: var(--text-muted); letter-spacing: -0.003em;
                    transition: background var(--duration-fast) ease,
                                color var(--duration-fast) ease; }
.user-logout-btn:hover { color: var(--primary); background: var(--bg-subtle); }


/* ============================================================
   TOP BAR
   ============================================================ */
.topbar { height: var(--topbar-h);
          display: flex; align-items: center; justify-content: flex-end;
          padding: 0 var(--s-10);
          border-bottom: 1px solid var(--border-light);
          position: sticky; top: 0; z-index: 10;
          background: rgba(250, 250, 247, 0.86);
          backdrop-filter: saturate(140%) blur(10px);
          -webkit-backdrop-filter: saturate(140%) blur(10px); }

.search       { display: flex; align-items: center; gap: 8px;
                background: white; border: 1px solid var(--border);
                border-radius: var(--r-md);
                padding: 8px 12px; width: 320px;
                transition: border-color var(--duration-base) ease,
                            box-shadow var(--duration-base) ease; }
.search:focus-within { border-color: var(--primary-line);
                       box-shadow: 0 0 0 3px var(--primary-tint); }
.search svg   { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.search input { border: none; background: none; outline: none;
                width: 100%; font-size: 14px; color: var(--text-primary); }
.search input::placeholder { color: var(--text-muted); }

.kbd { font-size: 11px; font-weight: 600; color: var(--text-muted);
       padding: 2px 6px; border: 1px solid var(--border);
       border-bottom-width: 2px; border-radius: 4px;
       background: var(--bg-app); letter-spacing: 0.02em; }

.breadcrumb         { display: flex; align-items: center; gap: 8px;
                      font-size: 13px; color: var(--text-muted); }
.breadcrumb a       { font-weight: 600; color: var(--text-secondary);
                      transition: color var(--duration-fast) ease; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep    { color: var(--border-strong); }
.breadcrumb .current { color: var(--text-primary); font-weight: 600; }


/* ============================================================
   PAGE HEADER (eyebrow → title → subtitle)
   ============================================================ */
.page-header   { margin-bottom: var(--s-10); }
.page-eyebrow  { font-size: 12px; font-weight: 700; letter-spacing: 0.085em;
                 text-transform: uppercase; color: var(--primary);
                 margin-bottom: var(--s-3); }
.page-title    { font-family: var(--serif); font-size: 44px; font-weight: 600;
                 line-height: 1.08; letter-spacing: -0.022em;
                 color: var(--text-primary); margin-bottom: var(--s-3);
                 max-width: 740px; }
.page-subtitle { font-size: 16px; line-height: 1.55;
                 color: var(--text-secondary);
                 max-width: 580px; letter-spacing: -0.003em; }


/* ============================================================
   SECTION HEADER (tracked uppercase label + bottom border)
   ============================================================ */
.section          { margin-bottom: var(--s-12); }
.section:last-child { margin-bottom: 0; }
.section-header   { display: flex; align-items: baseline;
                    justify-content: space-between;
                    margin-bottom: var(--s-5);
                    padding-bottom: var(--s-3);
                    border-bottom: 1px solid var(--border); }
.section-title    { font-size: 12px; font-weight: 700;
                    letter-spacing: 0.09em; text-transform: uppercase;
                    color: var(--text-secondary); }
.section-link     { font-size: 13px; font-weight: 600; color: var(--primary);
                    display: inline-flex; align-items: center; gap: 4px; }
.section-link:hover { color: var(--primary-hover); }


/* ============================================================
   CASELOAD SPARKLINE (Today header rail only)
   ============================================================ */
.caseload-mini       { max-width: 580px; margin-top: var(--s-4); }
.caseload-bar-mini   { display: flex; height: 5px; border-radius: var(--r-pill);
                       overflow: hidden; gap: 2px; margin-bottom: 9px; }
.caseload-bar-mini > span { height: 100%; display: block;
                            border-radius: var(--r-pill); }
.bar-paperwork { background: var(--status-paperwork-bar); }
.bar-equipment { background: var(--status-equipment-bar); }
.bar-trialing  { background: var(--status-trialing-bar); }
.bar-aac-user  { background: var(--status-aac-user-bar); }

.caseload-legend-mini       { display: flex; flex-wrap: wrap; gap: var(--s-4);
                              font-size: 11.5px; color: var(--text-muted);
                              font-variant-numeric: tabular-nums;
                              letter-spacing: -0.002em; }
.caseload-legend-mini > span { display: inline-flex; align-items: center; gap: 5px; }
.caseload-legend-mini i      { width: 7px; height: 7px; border-radius: 50%;
                               display: inline-block; }


/* ============================================================
   STATUS CHIP (only place status color lives in chrome)
   ============================================================ */
.chip { display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 9px 3px 7px;
        border-radius: var(--r-pill);
        font-size: 11px; font-weight: 700;
        letter-spacing: 0.04em; text-transform: uppercase;
        border: 1px solid transparent; white-space: nowrap; }
.chip::before { content: ""; display: inline-block;
                width: 6px; height: 6px; border-radius: 50%;
                background: currentColor; }
.chip-paperwork { color: var(--status-paperwork-fg);
                  background: var(--status-paperwork-bg);
                  border-color: var(--status-paperwork-line); }
.chip-equipment { color: var(--status-equipment-fg);
                  background: var(--status-equipment-bg);
                  border-color: var(--status-equipment-line); }
.chip-trialing  { color: var(--status-trialing-fg);
                  background: var(--status-trialing-bg);
                  border-color: var(--status-trialing-line); }
.chip-aac-user  { color: var(--status-aac-user-fg);
                  background: var(--status-aac-user-bg);
                  border-color: var(--status-aac-user-line); }
.chip-former    { color: var(--status-former-fg);
                  background: var(--status-former-bg);
                  border-color: var(--status-former-line); }


/* ============================================================
   ACTION CARD (Today's "Needs your attention")
   ============================================================ */
.action-list  { display: flex; flex-direction: column; gap: var(--s-3); }
.action-card  { background: var(--bg-card); border: 1px solid var(--border);
                border-radius: var(--r-lg);
                padding: var(--s-4) var(--s-5);
                display: grid; grid-template-columns: 38px 1fr auto;
                gap: var(--s-4); align-items: center;
                transition: border-color var(--duration-base) ease,
                            box-shadow var(--duration-base) ease,
                            transform var(--duration-base) ease;
                cursor: pointer; }
.action-card:hover { border-color: var(--border-strong);
                     box-shadow: var(--sh-sm);
                     transform: translateY(-1px); }
.action-avatar { width: 38px; height: 38px; border-radius: 50%;
                 background: var(--bg-subtle);
                 border: 1px solid var(--border);
                 color: var(--text-secondary);
                 display: flex; align-items: center; justify-content: center;
                 font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.action-body   { min-width: 0; }
.action-line-1 { display: flex; align-items: center; gap: var(--s-2);
                 margin-bottom: 3px; }
.action-name   { font-size: 16px; font-weight: 600; color: var(--text-primary);
                 letter-spacing: -0.005em;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-line-2 { font-size: 13.5px; color: var(--text-secondary);
                 letter-spacing: -0.003em;
                 display: flex; align-items: center; gap: 6px; }
.action-urgent-dot { width: 5px; height: 5px; border-radius: 50%;
                     background: var(--danger);
                     display: inline-block; flex-shrink: 0;
                     box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18); }

.btn-action   { display: inline-flex; align-items: center; gap: 6px;
                padding: 8px 14px; border-radius: var(--r-md);
                font-size: 13px; font-weight: 600;
                letter-spacing: -0.005em; white-space: nowrap;
                background: var(--bg-card); color: var(--text-primary);
                border: 1px solid var(--border-strong);
                transition: border-color var(--duration-fast) ease,
                            color var(--duration-fast) ease,
                            background var(--duration-fast) ease; }
.btn-action:hover  { border-color: var(--primary-line); color: var(--primary); }
.btn-action.urgent { background: var(--primary); color: white;
                     border-color: var(--primary);
                     box-shadow: 0 1px 2px rgba(31, 110, 105, 0.25),
                                 inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.btn-action.urgent:hover { background: var(--primary-hover); color: white;
                           border-color: var(--primary-hover); }

.action-footer        { display: flex; justify-content: center;
                        margin-top: var(--s-6); padding-top: var(--s-5);
                        border-top: 1px solid var(--border-light); }
.action-footer a      { display: inline-flex; align-items: center; gap: 6px;
                        font-size: 13.5px; font-weight: 600; color: var(--primary);
                        padding: 8px 14px; border-radius: var(--r-md);
                        transition: background var(--duration-fast) ease; }
.action-footer a:hover { background: var(--primary-tint); }


/* ============================================================
   FORM VOCABULARY (locked Apr 9 — new-ticket mockup)
   ============================================================ */
.form-card     { background: var(--bg-card); border: 1px solid var(--border);
                 border-radius: var(--r-lg);
                 padding: var(--s-6) var(--s-7);
                 box-shadow: var(--sh-xs);
                 max-width: 640px; }
.form-row-2    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.field          { margin-bottom: var(--s-6); }
.field:last-child { margin-bottom: 0; }
.field-label    { display: block; font-size: 14px; font-weight: 600;
                  color: var(--text-primary); letter-spacing: -0.005em;
                  margin-bottom: var(--s-2); }
.field-label .optional { font-weight: 400; color: var(--text-muted);
                         font-size: 13px; margin-left: 4px; }
.field-hint     { font-size: 12.5px; color: var(--text-muted);
                  letter-spacing: -0.002em;
                  margin-top: var(--s-1); line-height: 1.4; }

.input, .select, .textarea {
            width: 100%; padding: 11px var(--s-4);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            background: var(--bg-app);
            font-size: 15px; color: var(--text-primary);
            font-family: var(--sans);
            transition: border-color var(--duration-base) ease,
                        box-shadow var(--duration-base) ease,
                        background var(--duration-base) ease; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus {
            outline: none; border-color: var(--primary-line);
            box-shadow: 0 0 0 3px var(--primary-tint);
            background: var(--bg-card); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.select   { padding-right: 40px; appearance: none; -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A958A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 16px;
            cursor: pointer; }

.form-footer  { display: flex; justify-content: flex-end; align-items: center;
                gap: var(--s-3); margin-top: var(--s-7);
                padding-top: var(--s-5);
                border-top: 1px solid var(--border-light); }
.btn-ghost    { padding: 10px 16px; border-radius: var(--r-md);
                font-size: 14px; font-weight: 600; color: var(--text-secondary);
                border: 1px solid transparent;
                transition: color var(--duration-fast) ease,
                            background var(--duration-fast) ease; }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-subtle); }
.btn-primary  { padding: 10px 18px; border-radius: var(--r-md);
                font-size: 14px; font-weight: 600;
                background: var(--primary); color: white;
                letter-spacing: -0.005em; border: 1px solid var(--primary);
                box-shadow: 0 1px 2px rgba(31, 110, 105, 0.25),
                            inset 0 1px 0 rgba(255, 255, 255, 0.12);
                transition: background var(--duration-base) ease; }
.btn-primary:hover { background: var(--primary-hover); color: white; }


/* ============================================================
   TOASTS (Django messages framework — minimal Phase 1.5 styling)
   ============================================================ */
.toast-container { position: fixed; top: var(--s-4); right: var(--s-4);
                   z-index: 1080;
                   display: flex; flex-direction: column; gap: var(--s-2); }
.toast-msg       { background: var(--bg-card); border: 1px solid var(--border);
                   border-radius: var(--r-md);
                   padding: var(--s-3) var(--s-4);
                   box-shadow: var(--sh-sm);
                   font-size: 14px; color: var(--text-primary);
                   max-width: 360px;
                   animation: toast-in 200ms var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); }
                      to   { opacity: 1; transform: translateY(0); } }


/* ============================================================
   HTMX SWAP TRANSITIONS (locked: 150ms opacity fade)
   ============================================================ */
.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
.htmx-settling { opacity: 1; transition: opacity 150ms ease-in; }


/* ============================================================
   MOBILE — sidebar collapses below 768px (toggle in base.html)
   ============================================================ */
@media (max-width: 767.98px) {
  .sidebar          { position: fixed; top: 0; left: 0; z-index: 1030;
                      transform: translateX(-100%);
                      transition: transform var(--duration-medium) var(--ease-out); }
  .sidebar.sidebar-open { transform: translateX(0); }
  .main             { width: 100%; }
  .content          { padding: var(--s-6) var(--s-4) var(--s-12); }
  .topbar           { padding: 0 var(--s-4); }
  .sidebar-toggle   { position: fixed; top: var(--s-3); left: var(--s-3);
                      z-index: 1031;
                      background: var(--primary); color: white;
                      border-radius: var(--r-md);
                      padding: var(--s-2);
                      box-shadow: var(--sh-sm); }
  .sidebar-backdrop { position: fixed; inset: 0;
                      background: rgba(28, 24, 16, 0.4);
                      z-index: 1029; }
}


/* ============================================================
   ACCESSIBILITY — keep skip-to-content visible on focus
   (Bootstrap defines it; restate so it works without Bootstrap)
   ============================================================ */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ============================================================
   SHADOW MODE BANNER — shown only when an admin is hijacking another user
   (django-hijack). See src/templates/hijack/notification.html.
   ============================================================ */
.hijack-banner          { position: sticky; top: 0; z-index: 1040;
                          background: var(--bg-subtle);
                          border-bottom: 1px solid var(--border-strong);
                          padding: 10px var(--s-4);
                          font-size: 14px;
                          letter-spacing: -0.005em; }
.hijack-banner-inner    { display: flex; align-items: center; gap: var(--s-4);
                          max-width: var(--content-w);
                          margin: 0 auto; }
.hijack-banner-eyebrow  { display: inline-flex; align-items: center;
                          padding: 2px var(--s-2);
                          background: var(--primary); color: white;
                          border-radius: var(--r-sm);
                          font-size: 11px; font-weight: 700;
                          letter-spacing: 0.04em; text-transform: uppercase; }
.hijack-banner-text     { flex: 1; color: var(--text-primary); }
.hijack-banner-text strong { font-weight: 600; }
.hijack-banner-meta     { color: var(--text-muted); margin-left: var(--s-1); }
.hijack-banner-form     { margin: 0; }
.hijack-banner-release  { background: var(--primary); color: white;
                          border: none; border-radius: var(--r-sm);
                          padding: 6px 12px;
                          font-weight: 600; font-size: 13px;
                          letter-spacing: -0.005em;
                          cursor: pointer;
                          transition: background var(--duration-fast) var(--ease-standard); }
.hijack-banner-release:hover  { background: var(--primary-hover); }
.hijack-banner-release:focus-visible { outline: 2px solid var(--primary-line);
                                       outline-offset: 2px; }