/* Marketing-header base CSS is inlined into the build-generated public/_header.html
       from packages/ui (scripts/build-shared-header.js). The header's responsive @media
       rules remain below, interleaved with app-layout. */
    :root {
      --bg: #003A8F;
      --bg-mid: #0f1f3d;
      --surface: #ffffff;
      --surface-2: #f7f8fa;
      --text: #1a1d24;
      --text-muted: #5c6270;
      --border: #dde1ea;
      --border-focus: #003A8F;
      --accent: #003A8F;
      --accent-hover: #002d70;
      --accent-light: #eff4ff;
      --result-bg: #f7f9ff;
      --result-border: #c3d3f5;
      --success: #0d7a3e;
      --success-bg: #d1fae5;
      --success-border: #6ee7b0;
      --warn: #92400e;
      --warn-bg: #fef3c7;
      --warn-border: #fcd34d;
      --danger: #991b1b;
      --danger-bg: #fee2e2;
      --danger-border: #fca5a5;
      --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.08);
      --shadow-md: 0 4px 20px rgba(10, 22, 40, 0.14);
      --shadow-lg: 0 8px 40px rgba(10, 22, 40, 0.18);
      --radius: 7px;
      --radius-lg: 12px;
      --font-display: "DM Serif Display", Georgia, serif;
      --font-body: "DM Sans", system-ui, sans-serif;

      /* ============================================================
         ULTRAMARINE SEMANTIC TOKENS
         Added Day 14 Phase A2. Coexist with literal-name tokens above
         until Phase H grep confirms zero literal-name consumers.
         Values copied from design/ultramarine-mockup.html.
         ============================================================ */

      /* Brand */
      --cc-brand: #003A8F;
      --cc-brand-soft: #eff4ff;
      --cc-brand-tint: #eef3fb;
      --cc-brand-border: #d6e1f1;
      --cc-brand-on-brand: #ffffff;

      /* Brand alpha (production reality — not in mockup spec).
         Used for subtle brand-tinted backgrounds, hover states,
         focus glows. Per-alpha tokens preserve dark-mode correctness. */
      --cc-brand-a04: rgba(0, 58, 143, 0.04);
      --cc-brand-a06: rgba(0, 58, 143, 0.06);
      --cc-brand-a08: rgba(0, 58, 143, 0.08);
      --cc-brand-a10: rgba(0, 58, 143, 0.10);
      --cc-brand-a12: rgba(0, 58, 143, 0.12);
      --cc-brand-a15: rgba(0, 58, 143, 0.15);
      --cc-brand-a20: rgba(0, 58, 143, 0.20);

      /* Surfaces */
      --cc-bg-page: #003A8F;
      --cc-bg-card: #ffffff;
      --cc-bg-input: #ffffff;
      --cc-bg-citation-from: #fafaf7;
      --cc-bg-citation-to: #f5f4ef;
      --cc-bg-subtle: #fafaf7;
      --cc-bg-muted: #f7f6f1;
      --cc-bg-overlay: rgba(255, 255, 255, 0.96);
      --cc-bg-tab-strip: #f5f4ef;

      /* Text */
      --cc-text-primary: #0a0a0a;
      --cc-text-body: #1a1a1a;
      --cc-text-secondary: #5a5a55;
      --cc-text-tertiary: #67665f;
      --cc-text-disabled: #a8a7a3;
      --cc-text-on-brand: #ffffff;

      /* Borders */
      --cc-border: rgba(10, 22, 40, 0.10);
      --cc-border-strong: rgba(10, 22, 40, 0.20);
      --cc-border-soft: #ececea;
      --cc-border-softer: #e3e2dc;

      /* States */
      --cc-success-bg: #e7f3ee;
      --cc-success-text: #0f6e56;
      --cc-success-border: #9ad9be;
      --cc-warning-bg: #fdf3df;
      --cc-warning-text: #a76b1c;
      --cc-warning-text-strong: #6b3f0e;
      --cc-warning-border: #f0d8a1;
      --cc-error-bg: #f6e9e7;
      --cc-error-text: #9c5454;
      --cc-error-border: #e0b6b6;
      --cc-user-bg: #e6f0fc;
      --cc-user-text: #1a4a8c;
      --cc-user-text-strong: #0e3a72;
      --cc-user-border: #c4daf3;

      /* Interaction */
      --cc-row-hover-bg: #f7f6f1;
      --cc-history-action-bg: #f4f3ee;

      /* Effects */
      --cc-shadow-card: 0 1px 3px rgba(10, 22, 40, 0.04);
      --cc-shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
      --cc-shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
      --cc-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.20);

      /* Focus ring */
      --cc-focus-ring: rgba(0, 58, 143, 0.10);

      /* Loading */
      --cc-loading-track: #eef3fb;

      /* Usage meter (production-only — not in mockup spec).
         Traffic-light states for free-tier citation usage. */
      --cc-meter-healthy-fill: #6b9e7d;
      --cc-meter-healthy-text: #2d5e3f;
      --cc-meter-low-fill: #ef9f27;
      --cc-meter-low-text: #854f0b;
      --cc-meter-critical-fill: #e24b4a;
      --cc-meter-critical-text: #a32d2d;

    }

    :root[data-theme="dark"] {
      /* Ultramarine dark theme.
         Activated by setting the [data-theme="dark"] attribute on <html>.
         Theme-picker UI is wired in Phase H; this block exists now so
         smoke-testing dark mode in DevTools works at every phase boundary. */

      /* Brand */
      --cc-brand: #6db4ff;
      --cc-brand-soft: rgba(109, 180, 255, 0.12);
      --cc-brand-tint: rgba(109, 180, 255, 0.08);
      --cc-brand-border: rgba(109, 180, 255, 0.25);
      --cc-brand-on-brand: #0a0e1a;

      /* Brand alpha (dark-theme equivalents — same alphas, lighter blue) */
      --cc-brand-a04: rgba(109, 180, 255, 0.04);
      --cc-brand-a06: rgba(109, 180, 255, 0.06);
      --cc-brand-a08: rgba(109, 180, 255, 0.08);
      --cc-brand-a10: rgba(109, 180, 255, 0.10);
      --cc-brand-a12: rgba(109, 180, 255, 0.12);
      --cc-brand-a15: rgba(109, 180, 255, 0.15);
      --cc-brand-a20: rgba(109, 180, 255, 0.20);

      /* Surfaces */
      --cc-bg-page: #0a0e1a;
      --cc-bg-card: #14181f;
      --cc-bg-input: #1a1f29;
      --cc-bg-citation-from: #1a1f29;
      --cc-bg-citation-to: #161b24;
      --cc-bg-subtle: #1a1f29;
      --cc-bg-muted: #1c2129;
      --cc-bg-overlay: rgba(20, 24, 31, 0.96);
      --cc-bg-tab-strip: #1c2129;

      /* Text */
      --cc-text-primary: #f5f5f1;
      --cc-text-body: #e8e8e3;
      --cc-text-secondary: #a8a7a3;
      --cc-text-tertiary: #888780;
      --cc-text-disabled: #5a5a55;
      --cc-text-on-brand: #0a0e1a;

      /* Borders */
      --cc-border: rgba(255, 255, 255, 0.08);
      --cc-border-strong: rgba(255, 255, 255, 0.16);
      --cc-border-soft: #2a2f39;
      --cc-border-softer: #232831;

      /* States */
      --cc-success-bg: rgba(95, 200, 154, 0.14);
      --cc-success-text: #5fc89a;
      --cc-success-border: rgba(95, 200, 154, 0.30);
      --cc-warning-bg: rgba(245, 197, 110, 0.14);
      --cc-warning-text: #f5c56e;
      --cc-warning-text-strong: #f5c56e;
      --cc-warning-border: rgba(245, 197, 110, 0.30);
      --cc-error-bg: rgba(220, 130, 130, 0.14);
      --cc-error-text: #dc8282;
      --cc-error-border: rgba(220, 130, 130, 0.30);
      --cc-user-bg: rgba(120, 170, 230, 0.14);
      --cc-user-text: #9bbfeb;
      --cc-user-text-strong: #b9d4ef;
      --cc-user-border: rgba(120, 170, 230, 0.30);

      /* Interaction */
      --cc-row-hover-bg: #1c2129;
      --cc-history-action-bg: #1f242e;

      /* Effects */
      --cc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.30);
      --cc-shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30);
      --cc-shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.30);
      --cc-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.50);

      /* Focus ring */
      --cc-focus-ring: rgba(109, 180, 255, 0.20);

      /* Loading */
      --cc-loading-track: #1c2129;

      /* Usage meter (dark-theme equivalents) */
      --cc-meter-healthy-fill: #7fb892;
      --cc-meter-healthy-text: #9fd5ae;
      --cc-meter-low-fill: #f5b955;
      --cc-meter-low-text: #fbd17a;
      --cc-meter-critical-fill: #e87878;
      --cc-meter-critical-text: #ec9b9b;
    }

    /* ── Dashboard shell — dark mode overrides ── */

    [data-theme="dark"] .cc-sidebar {
      background: #0d1117 !important;
      border-right-color: rgba(255,255,255,0.08);
    }

    [data-theme="dark"] .cc-sidebar-item {
      color: rgba(255,255,255,0.5);
    }

    [data-theme="dark"] .cc-sidebar-item:hover:not(:disabled) {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.85);
    }

    [data-theme="dark"] .cc-sidebar-item--active {
      background: rgba(109,180,255,0.15);
      color: #ffffff;
    }

    [data-theme="dark"] .cc-sidebar-upgrade {
      border-color: rgba(255,255,255,0.1);
    }

    [data-theme="dark"] .cc-sidebar-upgrade-btn {
      border-color: rgba(255,255,255,0.2);
    }

    [data-theme="dark"] .cc-sidebar-help {
      color: rgba(255,255,255,0.3);
      border-top-color: rgba(255,255,255,0.08);
    }

    [data-theme="dark"] .cc-topbar {
      background: var(--cc-bg-card);
      border-bottom-color: var(--cc-border-soft);
    }

    [data-theme="dark"] .cc-topbar-title {
      color: var(--cc-text-primary);
    }

    [data-theme="dark"] .cc-topbar-sub {
      color: var(--cc-text-tertiary);
    }

    [data-theme="dark"] main#mainContent {
      background: var(--cc-bg-card);
    }

    [data-theme="dark"] .card {
      background: var(--cc-bg-card);
      border-color: var(--cc-border-soft);
    }

    [data-theme="dark"] .cc-right-sidebar {
      background: var(--cc-bg-card);
      border-left-color: var(--cc-border-soft);
    }

    [data-theme="dark"] .cc-right-section-title {
      color: var(--cc-text-primary);
    }

    [data-theme="dark"] .cc-theme-pill {
      background: var(--cc-bg-muted);
      border-color: var(--cc-border-soft);
    }

    [data-theme="dark"] .cc-theme-slider {
      background: var(--cc-bg-subtle);
    }

    [data-theme="dark"] .btn-primary,
    [data-theme="dark"] .cc-generate-btn {
      background: var(--cc-brand);
      color: #0a0e1a;
    }

    [data-theme="dark"] .btn-primary:hover,
    [data-theme="dark"] .cc-generate-btn:hover {
      background: #89c4ff;
    }

    [data-theme="dark"] .cc-sidebar-upgrade {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
    }

    [data-theme="dark"] .cc-sidebar-upgrade-title {
      color: rgba(255,255,255,0.85);
    }

    [data-theme="dark"] .cc-sidebar-upgrade-sub {
      color: rgba(255,255,255,0.4);
    }

    [data-theme="dark"] .cc-sidebar-upgrade-btn {
      color: rgba(255,255,255,0.7);
      border-color: rgba(255,255,255,0.2);
    }

    [data-theme="dark"] .cc-right-sidebar {
      background: #14181f;
      border-left-color: rgba(255,255,255,0.08);
    }

    [data-theme="dark"] .cc-theme-option--light {
      color: rgba(255,255,255,0.35);
    }

    [data-theme="dark"] .cc-theme-option--dark {
      color: #6db4ff;
    }

    [data-theme="dark"] .cc-check-card {
      /* [Day 34 P23] No card in dark mode either. */
    }

    [data-theme="dark"] .drop-zone {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
    }

    [data-theme="dark"] .drop-zone-format-pill {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
      color: var(--cc-text-secondary);
    }

    /* Hide Clerk footer attribution and dev-mode banner.
       Note: The "Secured by Clerk" attribution is required by Clerk's TOS
       on the free tier. Confirm your plan allows hiding before shipping. */
    .cl-internal-1dauvpw,
    .cl-footer,
    .cl-internal-b3fm6y,
    [data-clerk-element="footer"],
    .cl-internal-clerkBranding,
    div[class*="cl-internal-"][class*="footer"],
    div[class*="cl-internal-"][class*="Branding"],
    div[class*="cl-internal-"][class*="DevModeNotice"],
    div[class*="cl-internal-"][class*="developmentMode"] {
      display: none !important;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { min-height: 100%; }

    /* Screen reader only — visually hidden but available to assistive tech */
    .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;
    }

    /* Skip link — visible when focused (keyboard users) */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--cc-brand);
      color: var(--cc-text-on-brand);
      padding: 0.5rem 1rem;
      text-decoration: none;
      border-radius: 0 0 4px 0;
      z-index: 10000;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 700;
    }

    @media (prefers-reduced-motion: no-preference) {
      .skip-link {
        transition: top 0.2s ease;
      }
    }

    .skip-link:focus {
      top: 0;
      outline: 2px solid var(--cc-text-on-brand);
      outline-offset: 2px;
    }

    /* Visually hidden but announced by screen readers */
    .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;
    }

    /* Keyboard focus — :focus-visible only (not mouse clicks) */
    :focus-visible {
      outline: 2px solid var(--cc-brand);
      outline-offset: 2px;
      border-radius: 4px;
    }

    button:focus-visible,
    .btn-primary:focus-visible,
    .btn-start-over:focus-visible {
      outline: 2px solid var(--cc-brand);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--cc-brand-a15);
    }

    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: 2px solid var(--cc-brand);
      outline-offset: 1px;
    }

    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible) {
      outline: none;
    }

    body {
      display: grid;
      grid-template-columns: 220px 1fr minmax(0, 360px);
      grid-template-rows: 58px 1fr;
      grid-template-areas:
        "topnav topnav topnav"
        "sidebar main right";
      height: 100vh;
      max-height: 100vh;
      width: 100%;
      max-width: 100vw;
      overflow: hidden;
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.55;
      color: var(--cc-text-body);
      background: var(--cc-bg-page);
      background-image:
        radial-gradient(ellipse 80% 60% at 20% 0%, var(--cc-brand-a15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, var(--cc-brand-a08) 0%, transparent 50%);
      background-color: #003A8F;
      -webkit-font-smoothing: antialiased;
    }

    main#mainContent {
      grid-area: main;
      overflow-y: hidden;
      background: #ffffff;
      padding: 1.5rem 2rem;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .header-controls-logged-out,
    .header-controls-logged-in {
      display: none;
      align-items: center;
      gap: 14px;
    }

    body.header-state-logged-out .header-controls-logged-out {
      display: inline-flex;
    }

    body.header-state-free-healthy .header-controls-logged-in,
    body.header-state-free-low .header-controls-logged-in,
    body.header-state-free-critical .header-controls-logged-in,
    body.header-state-pro .header-controls-logged-in {
      display: inline-flex;
    }

    body.header-state-logged-out .header-controls-logged-in {
      display: inline-flex;
    }

    body.header-state-logged-out .header-controls-logged-in .site-header-history-wrap,
    body.header-state-logged-out .header-controls-logged-in .site-header-usage-meter,
    body.header-state-logged-out .header-controls-logged-in .site-header-tier-badge,
    body.header-state-logged-out .header-controls-logged-in .site-header-avatar-wrap {
      display: none !important;
    }

    .site-header-signin {
      height: 38px;
      padding: 0 16px;
      border: 1px solid var(--cc-brand-border);
      border-radius: 8px;
      background: var(--cc-bg-card);
      color: var(--cc-text-secondary);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }

    .site-header-signin:hover {
      border-color: var(--cc-brand);
      color: var(--cc-brand);
      background: var(--cc-brand-soft);
    }

    .site-header-history {
      appearance: none;
      height: 38px;
      padding: 0 12px;
      border-radius: 8px;
      background: var(--cc-brand-tint);
      border: 0.5px solid var(--cc-brand-border);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--cc-brand);
      font-family: var(--font-body);
      cursor: pointer;
    }

    .site-header-history-wrap {
      display: inline-flex;
      align-items: center;
    }

    .site-header-history-icon {
      width: 13px;
      height: 13px;
      opacity: 0.65;
      flex-shrink: 0;
    }

    .site-header-history-count {
      display: none;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      color: var(--cc-brand);
    }

    body.header-state-free-healthy .site-header-history-count--free-healthy,
    body.header-state-free-low .site-header-history-count--free-low,
    body.header-state-free-critical .site-header-history-count--free-critical,
    body.header-state-pro .site-header-history-count--pro {
      display: inline;
    }

    .site-history-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      width: auto;
      min-width: 100%;
      margin-left: -8px;
      margin-right: -8px;
      background: var(--cc-bg-card);
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 12px;
      box-shadow: var(--cc-shadow-dropdown);
      z-index: 1200;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-4px);
      animation: siteHistoryDropdownIn 120ms ease-out forwards;
    }

    .site-history-dropdown[hidden] {
      display: none;
    }

    @keyframes siteHistoryDropdownIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .site-history-dropdown {
        animation: none;
        opacity: 1;
        transform: none;
      }
    }

    .site-history-dropdown-head {
      padding: 9px 14px;
      background: var(--cc-bg-muted);
      border-bottom: 0.5px solid var(--cc-border-soft);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .site-history-dropdown-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--cc-text-secondary);
      line-height: 1;
    }

    .site-history-dropdown-clear {
      border: none;
      background: transparent;
      color: var(--cc-text-disabled);
      font-size: 11px;
      font-weight: 500;
      font-family: var(--font-body);
      line-height: 1;
      cursor: pointer;
    }

    .site-history-row {
      padding: 9px 14px;
      border-bottom: 0.5px solid var(--cc-border-soft);
      cursor: default;
      transition: background 0.12s ease;
      position: relative;
      z-index: 1;
      background: var(--cc-bg-card);
    }

    .site-history-row:hover {
      background: var(--cc-brand-soft);
    }

    .site-history-row:last-of-type {
      border-bottom: none;
    }

    .site-history-citation {
      font-size: 12px;
      color: var(--cc-text-body);
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }

    .site-history-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .site-history-action-btn {
      border: 0.5px solid var(--cc-border-softer);
      border-radius: 4px;
      background: var(--cc-history-action-bg);
      color: var(--cc-text-secondary);
      font-size: 11px;
      font-weight: 500;
      font-family: var(--font-body);
      line-height: 1;
      padding: 2px 8px;
      cursor: pointer;
    }

    .site-history-dropdown-foot {
      padding: 8px 14px;
      background: var(--cc-bg-muted);
      border-top: 0.5px solid var(--cc-border-soft);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .site-history-dropdown-foot-left {
      font-size: 11px;
      color: var(--cc-text-disabled);
      line-height: 1;
    }

    .site-history-empty {
      padding: 14px 14px;
      font-size: 12px;
      color: var(--cc-text-disabled);
      font-style: italic;
      text-align: center;
    }

    .site-history-dropdown-view-all {
      border: none;
      background: transparent;
      color: var(--cc-brand);
      font-size: 11px;
      font-weight: 500;
      font-family: var(--font-body);
      line-height: 1;
      cursor: pointer;
    }

    .site-header-usage-meter {
      display: none;
      height: 34px;
      padding: 0 10px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid var(--cc-border-strong);
      align-items: center;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    body.header-state-free-healthy .site-header-usage-meter,
    body.header-state-free-low .site-header-usage-meter,
    body.header-state-free-critical .site-header-usage-meter {
      display: inline-flex;
    }

    .site-header-usage-bar {
      width: 56px;
      height: 4px;
      border-radius: 2px;
      overflow: hidden;
      background: var(--cc-border-softer);
    }

    .site-header-usage-fill {
      width: 0%;
      height: 100%;
      border-radius: 2px;
      transform-origin: left center;
    }

    .site-header-usage-text {
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
    }

    body.header-state-free-healthy .site-header-usage-fill {
      background: var(--cc-meter-healthy-fill);
    }

    body.header-state-free-healthy .site-header-usage-text {
      color: var(--cc-meter-healthy-text);
    }

    body.header-state-free-low .site-header-usage-fill {
      background: var(--cc-meter-low-fill);
    }

    body.header-state-free-low .site-header-usage-text {
      color: var(--cc-meter-low-text);
    }

    body.header-state-free-critical .site-header-usage-fill {
      background: var(--cc-meter-critical-fill);
    }

    body.header-state-free-critical .site-header-usage-text {
      color: var(--cc-meter-critical-text);
    }

    .site-header-usage-fraction {
      display: none;
    }

    body.header-state-free-healthy .site-header-usage-fraction--free-healthy,
    body.header-state-free-low .site-header-usage-fraction--free-low,
    body.header-state-free-critical .site-header-usage-fraction--free-critical {
      display: inline;
    }

    .site-header-tier-badge {
      display: none;
      height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      align-items: center;
      background: var(--cc-brand);
      color: var(--cc-text-on-brand);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 1;
    }

    body.header-state-pro .site-header-tier-badge {
      display: inline-flex;
    }

    .site-header-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 0.5px solid var(--cc-brand-border);
      background: var(--cc-brand);
      color: var(--cc-text-on-brand);
      font-size: 11px;
      font-weight: 500;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-body);
      cursor: pointer;
    }

    .site-header-avatar-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .cc-avatar-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #e11d1d;
      color: #ffffff;
      font-size: 0.625rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid var(--cc-brand);
      pointer-events: none;
      font-family: var(--font-body);
    }

    .cc-avatar-badge[hidden] {
      display: none;
    }

    .site-avatar-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 240px;
      background: var(--cc-bg-card);
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 12px;
      box-shadow: var(--cc-shadow-dropdown);
      z-index: 100;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-4px);
      animation: siteAvatarDropdownIn 120ms ease-out forwards;
    }

    .site-avatar-dropdown[hidden] {
      display: none;
    }

    @keyframes siteAvatarDropdownIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .site-avatar-dropdown {
        animation: none;
        opacity: 1;
        transform: none;
      }
    }

    .site-avatar-dropdown-head {
      padding: 12px 14px;
      background: var(--cc-bg-muted);
      border-bottom: 0.5px solid var(--cc-border-soft);
    }

    .site-avatar-dropdown-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--cc-text-body);
      line-height: 1.2;
    }

    .site-avatar-dropdown-email {
      display: none;
      margin-top: 1px;
      font-size: 11px;
      color: var(--cc-text-disabled);
      line-height: 1.2;
    }

    body.header-state-free-healthy .site-avatar-dropdown-email--free,
    body.header-state-free-low .site-avatar-dropdown-email--free,
    body.header-state-free-critical .site-avatar-dropdown-email--free {
      display: block;
    }

    body.header-state-pro .site-avatar-dropdown-email--pro {
      display: block;
    }

    .site-avatar-plan-row {
      padding: 9px 14px;
      border-bottom: 0.5px solid var(--cc-border-soft);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .site-avatar-plan-left {
      font-size: 13px;
      color: var(--cc-text-body);
      line-height: 1;
    }

    .site-avatar-plan-right-upgrade {
      display: none;
      font-size: 12px;
      font-weight: 500;
      color: var(--cc-brand);
      line-height: 1;
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: var(--font-body);
      padding: 0;
    }

    .site-avatar-plan-right-check {
      display: none;
      font-size: 12px;
      font-weight: 600;
      color: var(--cc-success-text);
      line-height: 1;
    }

    body.header-state-free-healthy .site-avatar-plan-left::after,
    body.header-state-free-low .site-avatar-plan-left::after,
    body.header-state-free-critical .site-avatar-plan-left::after {
      content: "Free plan";
    }

    body.header-state-pro .site-avatar-plan-left::after {
      content: "Pro plan";
    }

    body.header-state-free-healthy .site-avatar-plan-right-upgrade,
    body.header-state-free-low .site-avatar-plan-right-upgrade,
    body.header-state-free-critical .site-avatar-plan-right-upgrade {
      display: inline;
    }

    body.header-state-pro .site-avatar-plan-right-check {
      display: inline;
    }

    .site-avatar-menu-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      text-align: left;
      padding: 9px 14px;
      font-size: 13px;
      color: var(--cc-text-body);
      background: var(--cc-bg-card);
      border: none;
      border-bottom: 0.5px solid var(--cc-border-soft);
      cursor: pointer;
      font-family: var(--font-body);
      line-height: 1.2;
    }

    .cc-menu-notification-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #e11d1d;
      flex-shrink: 0;
    }

    .cc-menu-notification-dot[hidden] {
      display: none;
    }

    .site-avatar-menu-row:last-child {
      border-bottom: none;
      color: var(--cc-text-body);
    }

    .site-avatar-menu-row:hover {
      background: var(--cc-brand-soft);
    }

    .site-avatar-menu-row:last-child:hover {
      background: var(--cc-error-bg);
      color: var(--cc-error-text);
    }

    .site-header-get-started {
      height: 38px;
      padding: 0 16px;
      border: none;
      border-radius: 8px;
      background: var(--cc-brand);
      color: var(--cc-text-on-brand);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
    }

    @media (max-width: 640px) {
      .brand-right {
        flex-basis: 100%;
        justify-content: flex-end;
        gap: 6px;
      }

      .header-controls-logged-out,
      .header-controls-logged-in {
        gap: 6px;
      }

      /* Logged-out mobile */
      .site-header-signin {
        display: inline-flex;
        align-items: center;
        height: 38px;
        padding: 0 10px;
        border: 1px solid var(--cc-border);
        border-radius: 8px;
        background: var(--cc-bg-card);
        color: var(--cc-text-secondary);
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
      }

      .site-header-get-started {
        min-height: 38px;
        padding: 0 10px;
        font-size: 12px;
      }

      /* Logged-in mobile */
      .site-header-history {
        min-height: 38px;
        min-width: 52px;
        width: 52px;
        padding: 0 9px;
        justify-content: space-between;
      }

      .site-header-usage-meter {
        min-height: 38px;
        padding: 0 9px;
        width: auto;
      }

      .site-header-usage-bar {
        display: none;
      }

      .site-header-tier-badge {
        min-height: 38px;
        padding: 0 9px;
      }

      .site-header-avatar {
        width: 38px;
        height: 38px;
      }

      /* Mobile: fixed full-width sheet */
      .site-history-dropdown {
        position: fixed;
        top: 16px;
        left: 16px;
        right: 16px;
        width: calc(100vw - 32px);
        margin-left: 0;
        margin-right: 0;
        max-height: 70vh;
        overflow-y: auto;
      }

      .site-avatar-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        width: min(240px, calc(100vw - 32px));
      }

      /* Mobile tap comfort: minimum 38px targets for header / dropdown rows */
      .site-header-history,
      .site-header-get-started,
      .site-header-avatar,
      .site-history-dropdown-clear,
      .site-history-action-btn,
      .site-history-dropdown-view-all,
      .site-avatar-plan-right-upgrade,
      .site-avatar-menu-row {
        min-height: 38px;
      }

      .site-history-action-btn,
      .site-history-dropdown-clear,
      .site-history-dropdown-view-all {
        min-width: 32px;
      }
    }

    .card {
      width: 100%;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    /* [Day 34 P24] When destination is not Craft Cite, .card shrinks to
       fit its visible content (just the topbar title). This stops it from
       stretching to fill main#mainContent's flex column and pushing the
       sibling bulkCheckContainer / historyContainer to the bottom of the
       page. Uses the destination axis introduced in P22. */
    body:not(.destination-craft) .card {
      flex: 0 0 auto;
    }

    .feedback-panel {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      padding: 8px 12px;
      background: var(--cc-bg-subtle);
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 8px;
    }
    .feedback-panel[hidden] { display: none; }
    .feedback-btn.feedback-btn-selected {
      background: var(--cc-brand-soft);
      border-color: var(--cc-brand);
      color: var(--cc-brand);
    }
    .feedback-btn:disabled {
      cursor: default;
      opacity: 0.85;
    }
    .feedback-thanks-text {
      font-size: 13px;
      color: var(--cc-text-secondary);
      padding: 2px 4px;
    }
    .feedback-prompt {
      font-size: 12px;
      color: var(--cc-text-secondary);
      font-family: var(--font-body);
    }
    .feedback-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    /* Layout shell */
    .cc-sidebar {
      grid-area: sidebar;
      background: #002368;
      border-right: 1px solid rgba(255,255,255,0.12);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100%;
      color: #fff;
    }

    .cc-topbar {
      grid-area: header;
      grid-column: 2 / 4;
      background: var(--cc-bg-card);
      border-bottom: 1px solid var(--cc-border-soft);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
      padding-left: 2.5rem;
      height: 58px;
      min-height: 64px;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .cc-topbar-left {
      min-width: 0;
    }

    .cc-topbar-title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      color: var(--cc-text-primary);
      letter-spacing: -0.01em;
      margin: 0;
      line-height: 1.2;
    }

    .cc-topbar-sub {
      font-size: 0.8rem;
      color: var(--cc-text-tertiary);
      margin: 0;
      line-height: 1.35;
    }

    .cc-topbar-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .cc-sidebar-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--cc-text-primary);
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .cc-sidebar-scrim {
      display: none;
    }

    .site-header-history-wrap {
      display: none !important;
    }

    .cc-theme-toggle {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      line-height: 1;
    }

    .cc-theme-pill {
      position: relative;
      display: inline-flex;
      align-items: center;
      background: var(--cc-bg-muted);
      border: 1px solid var(--cc-border-soft);
      border-radius: 100px;
      padding: 2px;
      gap: 0;
    }

    .cc-theme-option {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 100px;
      color: var(--cc-text-tertiary);
      transition: color 0.2s;
    }

    .cc-theme-option svg {
      width: 12px;
      height: 12px;
    }

    .cc-theme-slider {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 22px;
      height: 22px;
      background: var(--cc-bg-card);
      border-radius: 100px;
      box-shadow: 0 1px 3px rgba(10,22,40,0.14);
      transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }

    [data-theme="dark"] .cc-theme-slider {
      transform: translateX(22px);
    }

    .cc-theme-option--light {
      color: var(--cc-brand);
    }

    [data-theme="dark"] .cc-theme-option--light {
      color: var(--cc-text-tertiary);
    }

    [data-theme="dark"] .cc-theme-option--dark {
      color: var(--cc-brand);
    }

    .cc-right-sidebar {
      grid-area: right;
      background: var(--cc-bg-card);
      border-left: 1px solid var(--cc-border-soft);
      overflow-y: auto;
      overflow-x: hidden;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      min-width: 0;
      height: 100%;
    }

    .cc-right-sidebar > * {
      flex: 0 0 auto;
    }

    .cc-sidebar-logo {
      padding: 1.5rem 1.25rem 1rem;
      height: 64px;
      min-height: 64px;
      border-bottom: 1px solid var(--cc-border-soft);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cc-sidebar-logo-mark {
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .cc-sidebar-logo-mark::before {
      content: none;
    }

    .cc-sidebar-logo-mark::after {
      content: none;
    }
    .cc-sidebar-logo-mark svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .cc-sidebar-nav {
      list-style: none;
      padding: 1rem 0.75rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
      min-height: 0;
    }

    .cc-sidebar-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 11px 16px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 600;
      color: var(--cc-text-on-brand);
      opacity: 0.7;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s, opacity 0.15s;
    }
    .cc-sidebar-item svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }

    .cc-sidebar-item:hover:not(:disabled) {
      background: var(--cc-brand-a12);
      opacity: 0.92;
    }

    .cc-sidebar-item--active {
      background: rgba(255, 255, 255, 0.18);
      color: var(--cc-text-on-brand);
      opacity: 1;
      font-weight: 700;
    }

    .cc-sidebar-item--placeholder {
      opacity: 0.4;
      cursor: default;
    }

    .cc-sidebar-marketing-section {
      display: none; /* hidden by default; shown only at compact-desktop via media query */
      flex-shrink: 0;
      padding: 0 0.75rem;
      margin-top: 0.5rem;
    }

    .cc-sidebar-marketing-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.12);
      margin: 0 16px 0.75rem 16px;
    }

    .cc-sidebar-marketing-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cc-sidebar-marketing-item {
      display: block;
      padding: 9px 16px;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--cc-text-on-brand);
      opacity: 0.7;
      text-decoration: none;
      transition: background 0.15s, opacity 0.15s;
    }

    .cc-sidebar-marketing-item:hover {
      background: rgba(255, 255, 255, 0.08);
      opacity: 0.95;
    }

    .cc-sidebar-marketing-item--active {
      background: rgba(255, 255, 255, 0.18);
      opacity: 1;
      font-weight: 600;
    }

    .cc-sidebar-upgrade {
      flex-shrink: 0;
      margin: 0 0.75rem 1rem 0.75rem;
      padding: 1rem;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 10px;
      text-align: center;
      backdrop-filter: blur(4px);
    }

    .cc-sidebar-upgrade-icon {
      color: var(--cc-text-on-brand);
      opacity: 0.85;
      font-size: 0.95rem;
      line-height: 1;
    }

    .cc-sidebar-upgrade-title {
      color: var(--cc-text-on-brand);
      font-size: 0.875rem;
      font-weight: 600;
      margin: 0.5rem 0 0.25rem;
      font-family: var(--font-body);
    }

    .cc-sidebar-upgrade-sub {
      color: var(--cc-text-on-brand);
      opacity: 0.62;
      font-size: 0.75rem;
      line-height: 1.4;
      font-family: var(--font-body);
    }

    .cc-sidebar-upgrade-btn {
      margin-top: 0.75rem;
      width: 100%;
      padding: 8px;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 7px;
      background: rgba(255,255,255,0.1);
      color: #ffffff;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .cc-sidebar-upgrade-btn:hover {
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.35);
    }

    .cc-sidebar-help {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 1rem 1.25rem;
      color: var(--cc-text-on-brand);
      opacity: 0.5;
      font-size: 0.8125rem;
      font-family: var(--font-body);
      border-top: 1px solid var(--cc-border-strong);
      cursor: pointer;
    }

    .cc-right-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .cc-right-section-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--cc-text-primary);
      font-family: var(--font-body);
    }

    .cc-right-section-link {
      font-size: 0.75rem;
      color: var(--cc-brand);
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-weight: 500;
    }

    .cc-right-section-meta {
      font-size: 0.75rem;
      color: var(--cc-text-tertiary);
      font-family: var(--font-body);
    }

    .cc-right-history-card {
      background: var(--cc-bg-card);
      border: 1px solid rgba(221, 225, 234, 0.8);
      border-radius: var(--radius-lg);
      box-shadow: var(--cc-shadow-overlay);
      padding: 0.875rem 1rem;
      min-height: 0;
    }

    #ccHistoryCard {
      flex: 0 0 auto;
    }

    .cc-right-history-empty {
      font-size: 0.8rem;
      color: var(--cc-text-disabled);
      text-align: center;
      padding: 1.25rem 0;
      font-style: italic;
    }

    .cc-right-history-item {
      padding: 6px 10px 6px 10px;
      border-radius: 8px;
      background: var(--cc-bg-subtle);
      border: 0.5px solid var(--cc-border-soft);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      margin-bottom: 4px;
    }

    .cc-right-history-item .cc-right-history-chip {
      margin-left: -3px;
    }

    .cc-right-history-item--statute {
      border-left-color: #e11d1d;
    }

    .cc-right-history-item--webpage {
      border-left-color: #6d28d9;
    }

    .cc-right-history-item--other {
      border-left-color: #475569;
    }

    /* History legend */
    .cc-right-history-legend {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--cc-border-soft);
    }

    .cc-right-history-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.6875rem;
      color: var(--cc-text-tertiary);
      font-family: var(--font-body);
    }

    .cc-right-history-legend-item::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .cc-right-history-legend-item--case::before {
      background: #003A8F;
    }

    .cc-right-history-legend-item--statute::before {
      background: #dc2626;
    }

    .cc-right-history-legend-item--webpage::before {
      background: #7c3aed;
    }

    .cc-right-history-item:last-child {
      margin-bottom: 0;
    }

    .cc-right-history-item:hover {
      border-color: var(--cc-brand-border);
      background: var(--cc-brand-soft);
    }

    [data-theme="dark"] .cc-right-history-item {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .cc-right-history-item:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(0, 58, 143, 0.4);
    }

    .cc-right-history-row1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 2px;
    }

    .cc-right-history-name {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--cc-text-primary);
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .cc-right-history-ago {
      font-size: 0.6875rem;
      color: var(--cc-text-tertiary);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .cc-right-history-row2 {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cc-right-history-cite {
      font-size: 0.75rem;
      color: var(--cc-text-secondary);
      font-family: var(--font-display);
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    /* [Day 34 P25] Base chip = Case = Red */
    .cc-right-history-chip {
      display: inline-flex;
      align-items: center;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(220, 38, 38, 0.08);
      color: #b91c1c;
      border: 0.5px solid rgba(220, 38, 38, 0.22);
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* [Day 34 P25] Chip colors aligned with new source-type color scheme. */
    .cc-right-history-chip--statute {
      background: rgba(234, 88, 12, 0.08);
      color: #c2410c;
      border-color: rgba(234, 88, 12, 0.22);
    }

    .cc-right-history-chip--regulation {
      background: rgba(22, 163, 74, 0.08);
      color: #15803d;
      border-color: rgba(22, 163, 74, 0.22);
    }

    .cc-right-history-chip--constitution {
      background: rgba(202, 138, 4, 0.08);
      color: #92400e;
      border-color: rgba(202, 138, 4, 0.22);
    }

    .cc-right-history-chip--secondary {
      background: rgba(100, 116, 139, 0.08);
      color: #475569;
      border-color: rgba(100, 116, 139, 0.22);
    }

    .cc-right-history-chip--legislative {
      background: rgba(37, 99, 235, 0.08);
      color: #1d4ed8;
      border-color: rgba(37, 99, 235, 0.22);
    }

    .cc-right-history-chip--webpage {
      background: rgba(124, 58, 237, 0.08);
      color: #6d28d9;
      border-color: rgba(124, 58, 237, 0.22);
    }

    .cc-right-history-chip--other {
      background: rgba(100, 116, 139, 0.08);
      color: #475569;
      border-color: rgba(100, 116, 139, 0.22);
    }

    [data-theme="dark"] .cc-right-history-card {
      border-color: var(--cc-border-soft);
      box-shadow: none;
    }

    body.mode-history #magicManualContainer,
    body.mode-history #startOverRow,
    body.mode-history #bulkCheckContainer,
    body.mode-history #ccSourceTypePicker,
    body.mode-history .cc-source-type-picker,
    body.mode-history #citationReveal,
    body.mode-history #advancedScreen,
    body.mode-history #candidatesPanel,
    body.mode-history #apiErrorScreen,
    body.mode-history #rateLimitScreen,
    body.mode-history #zeroMatchScreen,
    body.mode-history #shortciteScreen,
    body.mode-history #webpageLoadingScreen,
    body.mode-history #webpageConfirmScreen,
    body.mode-history #webpageFetchErrorScreen,
    body.mode-history #statuteLoadingScreen,
    body.mode-history #statuteConfirmScreen,
    body.mode-history #statuteFetchErrorScreen,
    body.mode-history .tab-strip,
    body.mode-history .cc-collapsible,
    body.mode-history .cc-generate-row,
    body.mode-history .cc-section-label {
      display: none !important;
    }

    body.mode-history #historyContainer {
      display: block !important;
    }

    .cc-history-card-wrap {
      /* [Day 34 P23] Card chrome removed — content sits on page background.
         mainContent's own padding (1.5rem 2rem) provides outer spacing. */
    }

    [data-theme="dark"] .cc-history-card-wrap {
      /* [Day 34 P23] No card in dark mode either. */
    }

    .cc-history-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
    }

    .cc-history-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--cc-text-primary);
      white-space: nowrap;
    }

    .cc-history-search-wrap {
      flex: 1;
      position: relative;
      min-width: 140px;
    }

    .cc-history-search {
      width: 100%;
      border: 1px solid var(--cc-border);
      border-radius: 8px;
      padding: 7px 12px;
      outline: none;
      font-size: 0.8125rem;
      color: var(--cc-text-body);
      background: var(--cc-bg-input);
      font-family: var(--font-body);
      box-sizing: border-box;
    }

    .cc-history-search:focus {
      outline: none;
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px rgba(0, 58, 143, 0.1);
    }

    .cc-history-pills {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .cc-history-pill {
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 500;
      border: 0.5px solid var(--cc-border-soft);
      background: var(--cc-bg-card);
      color: var(--cc-text-secondary);
      cursor: pointer;
      font-family: var(--font-body);
      transition: all 0.15s;
    }

    /* [Day 34 P25] All pill stays brand-blue when active. Per-type pills
       use their type color when active. */
    .cc-history-pill--active {
      background: var(--cc-brand);
      color: #fff;
      border-color: var(--cc-brand);
    }
    .cc-history-pill[data-filter="case"].cc-history-pill--active {
      background: #dc2626; border-color: #dc2626; color: #fff;
    }
    .cc-history-pill[data-filter="statute"].cc-history-pill--active {
      background: #ea580c; border-color: #ea580c; color: #fff;
    }
    .cc-history-pill[data-filter="constitution"].cc-history-pill--active {
      background: #ca8a04; border-color: #ca8a04; color: #fff;
    }
    .cc-history-pill[data-filter="regulation"].cc-history-pill--active {
      background: #16a34a; border-color: #16a34a; color: #fff;
    }
    .cc-history-pill[data-filter="legislative"].cc-history-pill--active {
      background: #2563eb; border-color: #2563eb; color: #fff;
    }
    .cc-history-pill[data-filter="webpage"].cc-history-pill--active {
      background: #7c3aed; border-color: #7c3aed; color: #fff;
    }
    .cc-history-pill[data-filter="secondary"].cc-history-pill--active {
      background: #64748b; border-color: #64748b; color: #fff;
    }

    .cc-history-section-label {
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--cc-text-tertiary);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin: 1rem 0 0.5rem;
    }

    .cc-history-section-label:first-child {
      margin-top: 0;
    }

    /* [Day 34 P23] 3-line stacked layout. chip / name / citation.
       Mirrors the right-sidebar widget structure. Court abbreviation
       is folded into the citation line (e.g. "347 U.S. 483 (1954) · SCOTUS"). */
    .cc-history-row {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 10px 12px;
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 8px;
      background: var(--cc-bg-card);
      margin-bottom: 6px;
      cursor: pointer;
      transition: border-color 0.15s;
    }

    .cc-history-row:last-child {
      margin-bottom: 0;
    }

    .cc-history-row:hover {
      border-color: var(--cc-brand-border);
    }

    /* Row 1: chip + time + actions — all on one line */
    .cc-history-row1 {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Row 2: case / citation name */
    .cc-history-row-name {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--cc-text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Row 3: citation string */
    .cc-history-row-cite {
      font-size: 0.75rem;
      color: var(--cc-text-secondary);
      font-family: var(--font-display);
      font-weight: 400;
    }

    /* Time — pushed to the right in row1 */
    .cc-history-row-ago {
      font-size: 0.6875rem;
      color: var(--cc-text-tertiary);
      white-space: nowrap;
      flex-shrink: 0;
      margin-left: auto;
    }

    .cc-history-row-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .cc-history-action-btn {
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 0.6875rem;
      font-weight: 500;
      border: 0.5px solid var(--cc-border-soft);
      background: var(--cc-bg-card);
      color: var(--cc-text-secondary);
      cursor: pointer;
      font-family: var(--font-body);
      transition: all 0.15s;
    }

    .cc-history-action-btn:hover {
      border-color: var(--cc-brand);
      color: var(--cc-brand);
    }

    .cc-history-action-btn--danger:hover {
      border-color: #dc2626;
      color: #dc2626;
    }

    .cc-history-empty {
      text-align: center;
      padding: 3rem 0;
      color: var(--cc-text-tertiary);
      font-size: 0.875rem;
    }

    .cc-history-empty-title {
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      margin-bottom: 6px;
    }

    .cc-history-nudge {
      margin-top: 1.25rem;
      padding: 12px 16px;
      border-radius: 8px;
      background: var(--cc-brand-a04);
      border: 0.5px solid var(--cc-brand-a10);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .cc-history-nudge p {
      font-size: 0.75rem;
      color: var(--cc-text-secondary);
    }

    .cc-history-nudge-btn {
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      background: var(--cc-brand);
      color: #fff;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      font-family: var(--font-body);
    }

    /* ── Right sidebar: donut chart ── */
    .cc-right-donut-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    .cc-right-donut-svgwrap {
      position: relative;
      width: 100px;
      height: 100px;
      flex-shrink: 0;
      justify-self: center;
    }

    .cc-right-donut-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cc-right-donut-legend {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      width: 100%;
      padding-left: 1.5rem;
      box-sizing: border-box;
    }

    .cc-right-legend-row {
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      font-family: var(--font-body);
    }

    .cc-right-legend-row .cc-right-history-chip {
      margin-right: auto;
    }

    .cc-right-legend-row .cc-right-legend-pct {
      text-align: right;
    }

    .cc-right-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .cc-right-legend-label {
      flex: 1;
      color: var(--cc-text-secondary);
      font-size: 0.75rem;
    }

    .cc-right-legend-pct {
      font-weight: 600;
      color: var(--cc-text-primary);
      font-size: 0.75rem;
      min-width: 38px;
      text-align: right;
    }

    .cc-right-legend-count {
      color: var(--cc-text-tertiary);
      font-size: 0.7rem;
      min-width: 20px;
      text-align: left;
    }

    .cc-right-view-analytics {
      display: block;
      width: 100%;
      text-align: right;
      background: none;
      border: none;
      color: var(--cc-brand);
      font-size: 0.8125rem;
      font-weight: 500;
      font-family: var(--font-body);
      cursor: pointer;
      padding: 6px 0 2px;
      margin-top: 0.25rem;
    }

    .cc-right-view-analytics:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ── Right sidebar: Platform Activity card ── */
    .cc-right-platform-sub {
      font-size: 0.75rem;
      color: var(--cc-text-tertiary);
      font-family: var(--font-body);
      margin: 0 0 0.625rem 0;
    }

    .cc-right-platform-stats {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 0.625rem;
    }

    .cc-right-platform-stat {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 4px;
    }

    .cc-right-platform-number {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--cc-text-primary);
      font-family: var(--font-body);
      letter-spacing: 0;
      line-height: 1.2;
    }

    .cc-right-platform-label {
      font-size: 0.8125rem;
      color: var(--cc-text-tertiary);
      font-family: var(--font-body);
    }

    .cc-right-platform-divider {
      width: auto;
      height: auto;
      background: none;
      flex-shrink: 0;
      color: var(--cc-text-tertiary);
      font-size: 0.8125rem;
      line-height: 1;
    }

    .cc-right-accuracy-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
      flex-wrap: wrap;
    }

    .cc-right-accuracy-label {
      font-size: 0.8125rem;
      color: var(--cc-text-body);
      font-family: var(--font-body);
    }

    .cc-right-accuracy-label strong {
      font-weight: 700;
      color: var(--cc-text-primary);
    }

    .cc-right-accuracy-badge {
      padding: 2px 8px;
      border-radius: 5px;
      background: #dcfce7;
      color: #166534;
      font-size: 0.6875rem;
      font-weight: 600;
      font-family: var(--font-body);
    }

    .cc-right-accuracy-sub {
      font-size: 0.6875rem;
      color: var(--cc-text-tertiary);
      font-family: var(--font-body);
    }

    /* ── Plugin teaser card ── */
    .cc-right-plugin-card {
      background: #dce8ff !important;
      border: 1px solid rgba(0, 58, 143, 0.2) !important;
    }

    .cc-right-plugin-badge-row {
      margin-bottom: 0.5rem;
    }

    .cc-right-plugin-header {
      margin-bottom: 0.75rem;
    }

    .cc-right-plugin-title-wrap {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .cc-right-plugin-title {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--cc-text-primary);
      font-family: var(--font-body);
      line-height: 1.3;
    }

    .cc-right-plugin-badge {
      display: inline-block;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 4px;
      background: #ffffff;
      color: var(--cc-brand);
      border: 1px solid var(--cc-brand-border);
      white-space: nowrap;
    }

    .cc-right-plugin-desc {
      font-size: 0.75rem;
      color: var(--cc-text-secondary);
      font-family: var(--font-body);
      line-height: 1.4;
    }

    .cc-right-plugin-waitlist {
      width: 100%;
      padding: 6px 12px;
      background: var(--cc-brand);
      border: 1px solid var(--cc-brand);
      border-radius: 6px;
      color: #ffffff;
      font-size: 0.8125rem;
      font-weight: 500;
      font-family: var(--font-body);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, opacity 0.15s;
      text-align: center;
    }

    .cc-right-plugin-waitlist:hover {
      background: #002d70;
      border-color: #002d70;
      color: #ffffff;
    }

    /* ── Settings modal ── */
    .cc-settings-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cc-settings-overlay[hidden] {
      display: none;
    }

    .cc-settings-modal {
      background: var(--cc-bg-card);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
      width: 420px;
      max-width: calc(100vw - 2rem);
      overflow: hidden;
    }

    .cc-settings-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 1.5rem 1rem;
      border-bottom: 1px solid var(--cc-border-soft);
    }

    .cc-settings-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--cc-text-primary);
      font-family: var(--font-body);
      margin: 0;
    }

    .cc-settings-close {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--cc-text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

    .cc-settings-close:hover {
      background: var(--cc-bg-subtle);
    }

    .cc-settings-body {
      padding: 1rem 1.5rem 1.5rem;
    }

    .cc-settings-section-label {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--cc-text-secondary);
      margin: 0 0 0.75rem;
    }

    .cc-settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .cc-settings-row-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cc-settings-row-title {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--cc-text-primary);
      font-family: var(--font-body);
    }

    .cc-settings-row-desc {
      font-size: 0.75rem;
      color: var(--cc-text-secondary);
      font-family: var(--font-body);
    }

    .cc-settings-checkbox-wrap {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      flex-shrink: 0;
    }

    .cc-settings-checkbox-label {
      font-size: 0.8125rem;
      color: var(--cc-text-primary);
      font-family: var(--font-body);
    }

    .cc-right-plugin-waitlist:disabled {
      opacity: 0.75;
      cursor: default;
    }

    [data-theme="dark"] .cc-right-accuracy-badge {
      background: rgba(34, 197, 94, 0.15);
      color: #86efac;
    }

    [data-theme="dark"] .cc-right-donut-svg circle:first-child {
      stroke: #1c2129;
    }
    .feedback-btn {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 5px;
      color: var(--cc-text-secondary);
      cursor: pointer;
      transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    }
    .feedback-btn:hover {
      color: var(--cc-brand);
      border-color: var(--cc-brand);
      background: var(--cc-bg-card);
    }
    .feedback-btn-text {
      height: 26px;
      padding: 0 12px;
      background: transparent;
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 5px;
      color: var(--cc-text-secondary);
      cursor: pointer;
      font-size: 11px;
      font-family: var(--font-body);
      transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    }
    .feedback-btn-text:hover {
      color: var(--cc-brand);
      border-color: var(--cc-brand);
      background: var(--cc-bg-card);
    }

    /* ── Fade-in micro-interactions ── */
    @keyframes citeclerkFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes citeclerkFadeOut {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(-4px); }
    }

    /* ============================================================
       ULTRAMARINE ANIMATION SYSTEM (ported from mockup)
       ============================================================ */
    @keyframes ccDropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ccPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ccCitationReveal { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes ccSpinnerRotate { to { transform: rotate(360deg); } }
    @keyframes ccCheckIn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
    @keyframes ccCheckOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
    @keyframes ccSlideDown { from { opacity: 0; transform: translateY(-6px); max-height: 0; } to { opacity: 1; transform: translateY(0); max-height: 400px; } }
    @keyframes ccToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ccGateIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes ccLoadingBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

    .cc-dropdown { animation: ccDropdownIn 120ms ease-out forwards; }
    .cc-page-content { animation: ccPageIn 280ms cubic-bezier(0.2, 0, 0, 1) both; }
    body.mode-assisted #magicManualContainer,
    body.mode-manual #magicManualContainer {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 0;
    }
    .cc-citation-reveal { animation: ccCitationReveal 460ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
    .cc-spinner { animation: ccSpinnerRotate 1.5s linear infinite; }
    .cc-check-in { animation: ccCheckIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
    .cc-check-out { animation: ccCheckOut 0.2s ease-in forwards; }
    .cc-slide-down { animation: ccSlideDown 220ms ease-out forwards; overflow: hidden; }
    .cc-toast-in { animation: ccToastIn 200ms ease-out forwards; }
    .cc-gate-in { animation: ccGateIn 240ms cubic-bezier(0.2, 0, 0, 1) forwards; }

    .cc-input-field { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
    .cc-input-field:focus { border-color: var(--cc-brand) !important; box-shadow: 0 0 0 3px var(--cc-focus-ring); }
    .cc-hover-blue { transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }

    @media (prefers-reduced-motion: reduce) {
      .cc-dropdown, .cc-page-content, .cc-citation-reveal, .cc-slide-down, .cc-toast-in, .cc-check-in, .cc-check-out, .cc-gate-in {
        animation: none !important; opacity: 1 !important; transform: none !important;
      }
      .cc-spinner { animation: none !important; }
      .try-chips { transition: none !important; }
    }

    .fade-in {
      animation: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      .fade-in {
        animation: citeclerkFadeIn 0.25s ease-out;
      }
    }

    .fade-out {
      animation: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      .fade-out {
        animation: citeclerkFadeOut 0.2s ease-in forwards;
      }
    }

    .shortcite-screen {
      display: flex;
      flex-direction: column;
    }

    #shortciteInlinePanel {
      border-top: 1px solid var(--cc-border-soft);
      padding-top: 0.5rem;
    }
    #shortciteInlinePanel:not([hidden]) {
      margin-top: 0.5rem;
    }
    #citationReveal:has(#shortciteInlinePanel:not([hidden])) > .cc-result-card {
      margin-bottom: 0;
    }
    .shortcite-screen-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.75rem;
    }
    .shortcite-screen-nav .cc-back-btn {
      margin-bottom: 0;
    }
    .shortcite-start-over-link {
      background: transparent;
      border: none;
      padding: 0;
      font-size: 12px;
      color: var(--cc-text-secondary);
      cursor: pointer;
      font-family: var(--font-body);
    }
    .shortcite-start-over-link:hover {
      color: var(--cc-text-body);
      text-decoration: underline;
    }
    .shortcite-subtitle {
      font-size: 13px;
      color: var(--cc-text-secondary);
      margin: 0 0 1rem;
    }
    #shortciteSubtitleCaseName {
      font-family: var(--font-display);
      font-style: italic;
      color: var(--cc-text-body);
    }

    .shortcite-close {
      padding: 0.25rem 0.55rem;
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      background: transparent;
      border: 1px solid var(--cc-border);
      border-radius: 12px;
      cursor: pointer;
      flex-shrink: 0;
      transition: border-color 0.15s, color 0.15s;
    }

    .shortcite-close:hover {
      border-color: var(--cc-text-body);
      color: var(--cc-text-body);
    }

    .shortcite-inputs {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }

    @media (max-width: 480px) {
      .shortcite-inputs { grid-template-columns: 1fr; }
    }

    .shortcite-generate-btn {
      width: 100%;
      padding: 0.875rem 1.5rem;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 700;
      color: var(--cc-text-on-brand);
      background: var(--cc-brand);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 2px 8px var(--cc-brand-a20), 0 1px 3px var(--cc-brand-a15);
      transition: all 0.2s ease;
      letter-spacing: 0.01em;
    }

    .shortcite-generate-btn:hover {
      background: var(--cc-brand);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px var(--cc-brand-a20), 0 2px 6px var(--cc-brand-a20);
    }

    .shortcite-generate-btn:active {
      transform: translateY(0);
    }

    .shortcite-reveal[hidden] {
      display: none;
    }

    .shortcite-reveal {
      display: block;
    }

    .shortcite-reveal.hiding {
      animation: citeclerkFadeOut 220ms cubic-bezier(0.4, 0, 1, 1) both;
    }

    @media (prefers-reduced-motion: reduce) {
      .shortcite-reveal.hiding {
        animation: none;
      }
    }

    .shortcite-paren-toggle[hidden] { display: none; }

    .shortcite-paren-section {
      position: relative;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .shortcite-paren-section[hidden] { display: none; }

    .shortcite-paren-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 0.75rem;
    }

    .shortcite-woa-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 0.75rem;
    }

    .shortcite-woa-grid .field {
      flex: 1 1 0;
      min-width: 0;
    }

    .shortcite-woa-grid #shortcite-field-woa-type { flex: 2 1 0; }
    .shortcite-woa-grid #shortcite-field-woa-lastname { flex: 1.5 1 0; }
    .shortcite-woa-grid #shortcite-field-woa-designation { flex: 0.5 1 auto; min-width: 5rem; }

    @media (max-width: 480px) {
      .shortcite-paren-grid { grid-template-columns: 1fr; }
      .shortcite-woa-grid { flex-direction: column; }
      .shortcite-woa-grid .field { flex: 1 1 100%; }
    }

    .shortcite-error {
      margin-top: 0.5rem;
      font-size: 0.72rem;
      color: var(--cc-error-text);
    }

    .shortcite-error[hidden] { display: none; }

    .brand {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    .brand-left {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .brand-right {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-end;
      min-width: 0;
      padding-right: 4px;
      margin-top: 2px;
    }

    .brand h1 {
      margin: 0;
      font-size: clamp(2.2rem, 5.5vw, 2.9rem);
    }

    h1 {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 5vw, 2.4rem);
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 1;
      color: var(--cc-text-primary);
    }

    .subtitle {
      font-size: 13px;
      color: var(--cc-text-secondary);
      margin-bottom: 1.5rem;
      line-height: 1.4;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .field[hidden] { display: none !important; }
    .citation-grid-bottom[hidden] { display: none !important; }

    label {
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0.03em;
      opacity: 0.8;
      color: var(--cc-text-secondary);
    }

    .field-error-msg {
      font-size: 0.72rem;
      color: var(--cc-error-text);
      display: none;
    }

    .field.has-error input,
    .field.has-error select {
      border-color: var(--cc-error-text);
      box-shadow: 0 0 0 2px rgba(153, 27, 27, 0.12);
    }

    .field.has-error .field-error-msg {
      display: block;
    }

    /* Year range error sits on the filter row without .has-error; show when not [hidden]. */
    #filterYearRangeError.field-error-msg:not([hidden]) {
      display: block;
      margin-top: 0.35rem;
    }

    input[type="text"],
    input[type="number"],
    select {
      width: 100%;
      min-height: 2.25rem;
      padding: 0.5rem 0.75rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--cc-text-body);
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-brand-a10);
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--cc-brand-a04);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      appearance: none;
      -webkit-appearance: none;
    }

    input[type="text"]::placeholder, input[type="number"]::placeholder { color: #a8adb8; }

    input[type="text"]:hover, input[type="number"]:hover, select:hover {
      border-color: var(--cc-brand-a20);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--cc-brand-a08);
    }

    input[type="text"]:focus, input[type="number"]:focus, select:focus {
      outline: none;
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 4.5px rgba(0, 58, 143, 0.18), 0 2px 8px var(--cc-brand-a12);
    }

    input[type="text"]:disabled, input[type="number"]:disabled {
      background: var(--cc-bg-subtle);
      border-color: var(--cc-border);
      color: var(--cc-text-secondary);
      cursor: not-allowed;
      box-shadow: none;
      opacity: 0.75;
    }

    select:disabled {
      background: var(--cc-bg-subtle);
      border-color: var(--cc-border);
      color: var(--cc-text-secondary);
      cursor: not-allowed;
      box-shadow: none;
      opacity: 0.75;
    }

    select:disabled:hover {
      border-color: var(--cc-border);
    }

    input[type="text"]:disabled::placeholder, input[type="number"]:disabled::placeholder {
      color: #a8adb8;
      opacity: 0.8;
    }

    input[type="text"]:disabled:hover, input[type="number"]:disabled:hover {
      border-color: var(--cc-border);
    }

    input.auto-filled {
      background: #f0f5ff;
      border-color: #c3d3f5;
    }

    .select-wrapper {
      position: relative;
    }

    .select-wrapper::after {
      content: "";
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--cc-text-secondary);
      pointer-events: none;
    }

    .select-wrapper select { padding-right: 2rem; }

    .divider {
      height: 1px;
      background: var(--cc-border);
      margin: 1rem 0;
    }

    .section-label {
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--cc-text-secondary);
      margin: 0;
    }

    /* C2: Section labels that sit above a disclosure toggle box need a small gap */
    .section-label.cc-toggle-label {
      margin-top: 1.25rem;
      margin-bottom: 0.625rem;
    }

    /* Inner section headings (inside cards / expandable blocks): sentence case */
    .shortcite-paren-section .section-label,
    .case-info-display .section-label {
      text-transform: none;
      letter-spacing: 0.04em;
      font-weight: 600;
    }

    /* Case Information and Advanced Options toggles */
    .case-info-toggle,
    .advanced-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: var(--cc-bg-subtle);
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--cc-text-primary);
      transition: background 0.2s ease, border-color 0.2s ease;
      margin-top: 0;
      margin-bottom: 0.75rem;
    }

    .case-info-toggle[aria-expanded="true"],
    .advanced-toggle[aria-expanded="true"] {
      background: var(--cc-brand-soft);
      border-color: var(--cc-brand);
    }

    .advanced-toggle-checkbox {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      min-width: 16px;
      border-radius: 4px;
      border: 1.5px solid var(--cc-border-strong);
      background: var(--cc-bg-card);
      color: var(--cc-text-on-brand);
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .advanced-toggle-checkbox svg {
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .case-info-toggle[aria-expanded="true"] .advanced-toggle-checkbox,
    .advanced-toggle[aria-expanded="true"] .advanced-toggle-checkbox {
      border-color: var(--cc-brand);
      background: var(--cc-brand);
    }

    .case-info-toggle[aria-expanded="true"] .advanced-toggle-checkbox svg,
    .advanced-toggle[aria-expanded="true"] .advanced-toggle-checkbox svg {
      opacity: 1;
    }

    .advanced-toggle-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .advanced-toggle-subtitle {
      font-size: 12px;
      color: var(--cc-text-body);
      line-height: 1.45;
    }

    .case-info-toggle-label {
      flex: 0 0 auto;
    }

    /* Arrow rotation for Case Information disclosure toggle */
    .case-info-toggle-arrow {
      font-size: 1rem;
      line-height: 1;
      font-weight: 600;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-block;
      margin-left: auto;
    }

    .case-info-toggle.collapsed .case-info-toggle-arrow {
      transform: rotate(-90deg);
    }

    .citation-fields[hidden] {
      display: none;
    }

    .citation-fields {
      /* Outer wrapper only; card styling lives in .disclosure-card */
      margin: 0;
    }

    .disclosure-card {
      padding: 1rem;
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-brand-a10);
      border-radius: 12px;
      box-shadow: 0 2px 8px var(--cc-brand-a08), 0 1px 2px var(--cc-brand-a04);
      margin-top: 0.5rem;
    }

    #ccFiltersCollapsible .disclosure-card,
    #ccAdvancedBody .disclosure-card,
    #shortciteFormSection .disclosure-card {
      padding: 0.75rem;
      margin-top: 0;
    }

    /* Bare card — fields sit flush, no box (Rule / Restatement statute forms).
       Keeps inherited .disclosure-card margin-top so spacing under the radios survives. */
    .disclosure-card--bare {
      padding: 0;
      background: none;
      border: none;
      box-shadow: none;
    }
    #stFormRule .field > label,
    #stFormRestatement .field > label {
      display: inline-flex;
      align-items: center;
    }
    #stFormRule .field > label > svg,
    #stFormRestatement .field > label > svg {
      flex: 0 0 auto;
      margin-right: 0.4ch;
      opacity: 0.75;
    }

    /* ── Additional Options section (Cases input screen) ── */
    .cc-additional-options-section {
      margin-top: 0;
    }

    .cc-additional-options-card {
      padding: 0.875rem 1rem;
      margin-top: 0;
    }

    .cc-additional-options-item {
      /* Each control row inside the box */
    }

    .cc-additional-options-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--cc-text-secondary);
      margin: 0;
    }

    .cc-additional-options-divider {
      border: none;
      border-top: 1px solid var(--cc-border-soft);
      margin: 0.875rem 0;
    }

    /* Override global .cc-input-toggle-label uppercase for Additional Options
       toggle only. Two-class specificity beats the one-class global rule. */
    .cc-additional-options-card .cc-input-toggle-label {
      text-transform: none;
      letter-spacing: 0;
      font-size: 0.8125rem;
    }

    .cc-shortcite-form-footer {
      margin-top: 1rem;
    }
    .cc-shortcite-result-card {
      margin-top: 0.25rem;
    }

    .cc-shortcite-result-card > .cc-result-status-bar {
      background: var(--cc-user-bg);
      border-bottom: 1px solid var(--cc-user-border);
    }
    .cc-shortcite-result-card .cc-result-status-dot {
      background: var(--cc-user-text-strong);
    }
    .cc-shortcite-result-card .cc-result-status-label,
    .cc-shortcite-result-card .cc-result-status-sub {
      color: var(--cc-user-text-strong);
    }
    .cc-shortcite-result-card .cc-result-status-sub {
      opacity: 0.85;
    }

    .cc-shortcite-edit-bar {
      width: 100%;
      margin-top: 0.75rem;
    }
    .cc-shortcite-edit-bar[hidden] {
      display: none !important;
    }

    /* Check Cite (bulk): align with disclosure-card system */
    .cc-check-card {
      background: var(--cc-bg-card);
      border-radius: 16px;
      border: 1px solid var(--cc-brand-border);
      overflow: hidden;
      box-shadow:
        0 1px 3px rgba(0,35,104,0.05),
        0 4px 24px rgba(0,35,104,0.07);
      width: calc(100% - 48px);
      max-width: 760px;
      margin: 20px auto;
      display: flex;
      flex-direction: column;
    }

    .cc-privacy-block {
      text-align: center;
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--cc-border-soft);
    }

    .cc-privacy-shield {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 0.625rem;
    }

    .cc-privacy-shield-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--cc-brand);
    }

    .cc-privacy-body {
      font-size: 0.8125rem;
      line-height: 1.55;
      color: var(--cc-text-secondary);
      max-width: 560px;
      margin: 0 auto;
    }

    .cc-input-tabs {
      display: flex;
      background: var(--cc-bg-tab-strip);
      border-radius: 8px;
      padding: 3px;
      margin-bottom: 0.75rem;
    }

    /* Inline margin on cite-flow Mode tabs — match tightened rhythm without HTML edits */
    #magicManualContainer .cc-input-tabs[role="tablist"],
    #magicManualContainer .cc-mode-cards[role="tablist"] {
      margin-bottom: 1rem !important;
    }

    .cc-input-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 6px;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      background: none;
      border: none;
      cursor: pointer;
      transition: all 0.15s;
      font-family: var(--font-body);
    }

    .cc-input-tab--active {
      background: var(--cc-brand);
      color: #ffffff;
      border: 1px solid var(--cc-brand);
      box-shadow: 0 1px 2px rgba(0, 58, 143, 0.14);
    }

    /* ── Mode card toggle (Magic / Manual) ── */
    .cc-mode-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      align-items: stretch;
    }

    .cc-mode-card {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 0.75rem;
      min-height: 72px;
      height: 100%;
      box-sizing: border-box;
      background: var(--cc-bg-card);
      border: 1.5px solid var(--cc-border-strong);
      border-radius: 10px;
      cursor: pointer;
      text-align: left;
      font-family: var(--font-body);
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .cc-mode-card:hover {
      border-color: var(--cc-brand);
    }

    .cc-mode-card--active {
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px var(--cc-brand-a10);
    }

    .cc-mode-card-icon {
      color: var(--cc-text-secondary);
      flex-shrink: 0;
      transition: color 0.15s;
    }

    .cc-mode-card--active .cc-mode-card-icon {
      color: var(--cc-brand);
    }

    .cc-mode-card-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .cc-mode-card-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--cc-text-primary);
      line-height: 1.2;
    }

    .cc-mode-card-desc {
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--cc-text-secondary);
      line-height: 1.35;
    }

    .drop-zone {
      background: var(--cc-brand-a04);
      border: 1.5px dashed rgba(0, 58, 143, 0.25);
      border-radius: 12px;
      padding: clamp(2rem, 6vw, 3.5rem) 2rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .drop-zone--window-drag {
      border-color: rgba(0, 58, 143, 0.4);
      background: var(--cc-brand-a08);
    }

    .drop-zone.drag-over {
      border-color: rgba(0, 58, 143, 0.7);
      background: var(--cc-brand-a08);
    }

    @media (prefers-reduced-motion: no-preference) {
      .drop-zone.drag-over { transform: scale(1.01); }
    }

    .drop-zone:focus { outline: none; }

    .drop-zone:focus-visible {
      outline: 2px solid var(--cc-brand);
      outline-offset: 3px;
    }

    .drop-zone-icon { margin-bottom: 1rem; }

    .drop-zone-title {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0.35rem;
      color: var(--cc-text-primary);
    }

    .drop-zone-subtitle {
      font-size: 0.8125rem;
      color: var(--cc-text-secondary);
      margin-bottom: 0.875rem;
    }

    .drop-zone-formats {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .drop-zone-format-pill {
      font-size: 0.6875rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      background: var(--cc-bg-card);
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 4px;
      padding: 2px 7px;
    }

    .drop-zone #fileInput { display: none; }

    .bulk-paste-area { display: none; }
    .bulk-paste-area.visible { display: block; }

    .bulk-document-input {
      width: 100%;
      min-height: 10rem;
      padding: 0.75rem;
      font-family: var(--font-body);
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--cc-text-body);
      border: 1px solid var(--cc-border);
      border-radius: 10px;
      resize: vertical;
      box-sizing: border-box;
      background: var(--cc-bg-input);
    }

    .bulk-document-input:focus {
      outline: none;
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px rgba(0, 58, 143, 0.1);
    }

    .bulk-paste-hint {
      font-size: 0.75rem;
      color: var(--cc-text-tertiary);
      margin-top: 6px;
    }

    .bulk-paste-check-btn { margin-top: 0.75rem; }

    /* ═══════════════════════════════════════════════════════════════════
       Doc Check Upload Page — Premium redesign (doccheck-upload-P1)
    ═══════════════════════════════════════════════════════════════════ */

    /* ── Hero strip ── */
    .dc-upload-hero {
      background: linear-gradient(160deg, #001540 0%, #002368 48%, #003A8F 100%);
      padding: 32px 36px 28px;
      position: relative;
      overflow: hidden;
      border-radius: 0;
      text-align: center;
    }
    .dc-upload-hero-bg-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.05);
      pointer-events: none;
    }
    .dc-upload-hero-bg-ring--1 {
      width: 320px; height: 320px;
      top: -120px; right: -80px;
      border-color: rgba(255,255,255,0.04);
    }
    .dc-upload-hero-bg-ring--2 {
      width: 200px; height: 200px;
      bottom: -100px; left: -40px;
      border-color: rgba(255,255,255,0.03);
    }
    .dc-upload-hero-eyebrow {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.42);
      margin-bottom: 8px;
      position: relative; z-index: 1;
      font-family: var(--font-body);
    }
    .dc-upload-hero-title {
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 400;
      color: #fff;
      letter-spacing: -0.025em;
      line-height: 1.15;
      margin-bottom: 12px;
      position: relative; z-index: 1;
    }
    .dc-upload-hero-desc {
      font-size: 13.5px;
      color: rgba(255,255,255,0.56);
      line-height: 1.65;
      max-width: 500px;
      margin: 0 auto 18px;
      position: relative; z-index: 1;
      font-family: var(--font-body);
    }
    .dc-upload-feature-pills {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      justify-content: center;
      position: relative; z-index: 1;
    }
    .dc-upload-feature-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.72);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 4px 11px 4px 9px;
      font-family: var(--font-body);
      letter-spacing: 0.01em;
    }
    .dc-upload-feature-pill svg {
      flex-shrink: 0;
      stroke: rgba(255,255,255,0.62);
    }

    /* ── Privacy bar ── */
    .dc-upload-privacy-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 20px;
      background: #f3faf5;
      border-bottom: 1px solid #c8e6d0;
      flex-wrap: wrap;
    }
    .dc-upload-privacy-bar svg {
      stroke: #2d7a4a;
      fill: none;
      flex-shrink: 0;
    }
    .dc-upload-privacy-title {
      font-size: 12px;
      font-weight: 700;
      color: #2d7a4a;
      font-family: var(--font-body);
      white-space: nowrap;
    }
    .dc-upload-privacy-body {
      font-size: 11.5px;
      color: #4a7060;
      font-family: var(--font-body);
      line-height: 1.4;
    }

    /* ── Hide tab toggle — keep in DOM for JS ── */
    .dc-upload-tabs-hidden {
      display: none !important;
      visibility: hidden;
      pointer-events: none;
      position: absolute;
      left: -9999px;
    }

    /* ── Upload zone wrapper ── */
    .dc-upload-zone {
      padding: 20px 24px 24px;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    /* ── Unified container — drop zone + divider + paste as one surface ── */
    .dc-unified-zone {
      border: 1.5px dashed rgba(0,58,143,0.28);
      border-radius: 12px;
      overflow: hidden;
      background: var(--cc-brand-a04);
      transition: border-color 0.18s, background 0.18s;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .dc-unified-zone:focus-within {
      border-color: rgba(0,58,143,0.45);
      background: var(--cc-brand-a06);
    }

    /* ── Drop area ── */
    #checkTabUpload {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .dc-drop-zone {
      flex: 1;
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 20px 24px;
      text-align: center;
      cursor: pointer;
      transition: background 0.18s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .dc-drop-zone:hover {
      background: rgba(0,58,143,0.02);
    }
    .dc-unified-zone:has(.dc-drop-zone.drag-over),
    .dc-unified-zone:has(.dc-drop-zone.drop-zone--window-drag) {
      border-color: var(--cc-brand);
      border-style: solid;
      background: var(--cc-brand-a08);
    }
    .dc-drop-zone.drag-over,
    .dc-drop-zone.drop-zone--window-drag {
      background: transparent;
    }
    .dc-drop-icon {
      width: 44px;
      height: 44px;
      background: var(--cc-brand-a08);
      border: 1px solid var(--cc-brand-border);
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 11px;
      transition: background 0.15s;
    }
    .dc-drop-zone:hover .dc-drop-icon,
    .dc-drop-zone.drag-over .dc-drop-icon {
      background: var(--cc-brand-a12);
    }
    .dc-drop-title {
      font-size: 15.5px;
      font-weight: 600;
      color: var(--cc-text-primary);
      letter-spacing: -0.01em;
      margin-bottom: 5px;
      font-family: var(--font-body);
    }
    .dc-drop-sub {
      font-size: 12.5px;
      color: var(--cc-text-secondary);
      margin-bottom: 18px;
      line-height: 1.5;
      font-family: var(--font-body);
    }
    .dc-drop-browse-row { display: none; }
    .dc-browse-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: linear-gradient(135deg, #003A8F 0%, #002368 100%);
      color: #fff;
      font-size: 13.5px;
      font-weight: 600;
      border: none;
      border-radius: 9px;
      padding: 11px 32px;
      cursor: pointer;
      font-family: var(--font-body);
      letter-spacing: 0.01em;
      box-shadow: 0 3px 10px rgba(0,35,104,0.24);
      transition: opacity 0.12s, box-shadow 0.12s;
      width: 100%;
      max-width: 280px;
    }
    .dc-browse-btn:hover {
      opacity: 0.88;
      box-shadow: 0 4px 14px rgba(0,35,104,0.28);
    }
    .dc-browse-btn svg { stroke: #fff; }
    .dc-format-pills {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin-bottom: 10px;
    }
    .dc-format-pill {
      font-size: 10.5px;
      font-weight: 500;
      color: var(--cc-text-secondary);
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-border-soft);
      border-radius: 4px;
      padding: 2px 7px;
      font-family: var(--font-body);
    }

    /* ── Or divider — single hairline band between drop and paste ── */
    .dc-upload-or {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 20px;
      height: 28px;
      background: rgba(0,58,143,0.025);
      border-top: none;
      border-bottom: none;
      margin: 0;
      flex-shrink: 0;
    }
    .dc-upload-or-line {
      flex: 1;
      height: 1px;
      background: rgba(0,58,143,0.1);
    }
    .dc-upload-or-text {
      font-size: 10.5px;
      color: #8aaac8;
      font-family: var(--font-body);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      font-weight: 600;
    }

    /* ── Paste area — seamlessly part of the unified zone ── */
    .dc-paste-area {
      display: flex !important;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }
    .dc-paste-input {
      width: 100%;
      min-height: 5rem;
      flex: 1;
      padding: 14px 20px;
      font-family: var(--font-body);
      font-size: 13px;
      line-height: 1.6;
      color: var(--cc-text-body);
      border: none;
      border-radius: 0;
      resize: none;
      box-sizing: border-box;
      background: #fff;
      display: block;
    }
    .dc-paste-input:focus {
      outline: none;
    }
    .dc-paste-input::placeholder {
      color: var(--cc-text-tertiary);
    }
    .dc-paste-footer {
      padding: 14px 20px 20px;
      background: #fff;
      text-align: center;
      border-top: 1px solid rgba(0,58,143,0.07);
    }
    .dc-paste-hint {
      font-size: 11.5px;
      color: var(--cc-text-secondary);
      font-family: var(--font-body);
      line-height: 1.45;
      margin-bottom: 12px;
      display: block;
    }
    .dc-check-paste-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, #003A8F 0%, #002368 100%);
      color: #fff;
      font-size: 13.5px;
      font-weight: 600;
      border: none;
      border-radius: 9px;
      padding: 11px 32px;
      cursor: pointer;
      font-family: var(--font-body);
      letter-spacing: 0.01em;
      box-shadow: 0 3px 10px rgba(0,35,104,0.24);
      transition: opacity 0.12s, box-shadow 0.12s;
      width: 100%;
      max-width: 280px;
    }
    .dc-check-paste-btn:hover {
      opacity: 0.88;
      box-shadow: 0 5px 16px rgba(0,35,104,0.3);
    }
    .dc-check-paste-btn svg { stroke: #fff; }

    /* ── Dark mode overrides ── */
    [data-theme="dark"] .dc-upload-privacy-bar {
      background: rgba(45,122,74,0.12);
      border-bottom-color: rgba(45,122,74,0.25);
    }
    [data-theme="dark"] .dc-upload-privacy-title { color: #5ecb8a; }
    [data-theme="dark"] .dc-upload-privacy-body { color: #7ab896; }
    [data-theme="dark"] .dc-drop-zone:hover {
      background: rgba(109,180,255,0.03);
    }
    [data-theme="dark"] .dc-drop-icon {
      background: rgba(109,180,255,0.1);
      border-color: rgba(109,180,255,0.2);
    }
    [data-theme="dark"] .cc-check-card {
      border-color: rgba(109,180,255,0.15);
      box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 24px rgba(0,0,0,0.15);
    }
    [data-theme="dark"] .dc-unified-zone {
      border-color: rgba(109,180,255,0.22);
      background: rgba(109,180,255,0.04);
    }
    [data-theme="dark"] .dc-drop-zone {
      border-bottom-color: rgba(109,180,255,0.1);
    }
    [data-theme="dark"] .dc-upload-or {
      background: rgba(109,180,255,0.04);
      border-top-color: rgba(109,180,255,0.1);
      border-bottom-color: rgba(109,180,255,0.1);
    }
    [data-theme="dark"] .dc-paste-input {
      background: var(--cc-bg-card);
      color: var(--cc-text-body);
    }
    [data-theme="dark"] .dc-paste-footer {
      background: var(--cc-bg-card);
      border-top-color: rgba(109,180,255,0.08);
    }

    /* ===== Bulk Progress Container ===== */
    .bulk-progress-container {
      padding: 20px;
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-border);
      border-radius: 16px;
      margin-top: 0;
      box-shadow: var(--cc-shadow-card);
    }

    /* ===== Header ===== */
    .bulk-progress-header {
      margin-bottom: 1.5rem;
    }

    .bulk-progress-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--cc-text-body);
      margin: 0 0 0.5rem 0;
      font-family: var(--font-body);
      letter-spacing: -0.01em;
    }

    .bulk-progress-time-estimate {
      font-size: 0.8125rem;
      color: var(--cc-text-secondary);
      margin: 0;
      font-family: var(--font-body);
      font-feature-settings: "tnum";
    }

    .bulk-progress-subtitle {
      font-size: 0.8125rem;
      color: var(--cc-text-secondary);
      margin: 0 0 0.5rem 0;
      font-family: var(--font-body);
      line-height: 1.5;
    }

    /* ===== Progress Bar ===== */
    .bulk-progress-bar-track {
      width: 100%;
      height: 4px;
      background: var(--cc-loading-track);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .bulk-progress-bar-fill {
      height: 100%;
      background: var(--cc-brand);
      border-radius: 2px;
    }

    @media (prefers-reduced-motion: no-preference) {
      .bulk-progress-bar-fill {
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .bulk-progress-bar-fill {
        transition: none;
      }
    }

    /* ===== Step List ===== */
    .bulk-progress-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 16px;
      border: 1px solid var(--cc-border);
      border-radius: 12px;
      overflow: hidden;
    }

    .bulk-progress-step {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.8125rem;
      font-family: var(--font-body);
      line-height: 1.5;
      transition: color 0.3s ease;
      position: relative;
      border-radius: 0;
      padding: 10px 14px;
      background: var(--cc-bg-card);
      border-bottom: 1px solid var(--cc-border);
    }
    .bulk-progress-step:last-child {
      border-bottom: none;
    }

    .bulk-progress-step:focus {
      outline: none;
    }

    .bulk-progress-step:focus-visible {
      outline: 2px solid var(--cc-brand);
      outline-offset: 2px;
    }

    .bulk-progress-step-icon {
      width: 1.25rem;
      height: 1.25rem;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-weight: 700;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .bulk-progress-step-text {
      flex: 1;
    }

    /* Pending state (default) */
    .bulk-progress-step .bulk-progress-step-icon {
      background: var(--cc-bg-subtle);
      color: transparent;
    }

    .bulk-progress-step .bulk-progress-step-text {
      color: var(--cc-text-secondary);
    }

    /* Active state */
    .bulk-progress-step.active .bulk-progress-step-icon {
      background: var(--cc-brand-a10);
      color: var(--cc-brand);
      position: relative;
      box-shadow: 0 0 0 0 var(--cc-brand-a20);
    }

    @media (prefers-reduced-motion: no-preference) {
      .bulk-progress-step.active .bulk-progress-step-icon {
        animation: bulk-progress-active-glow 2s ease-in-out infinite;
      }
    }

    .bulk-progress-step.active .bulk-progress-step-icon::before {
      content: none;
    }

    .bulk-progress-step.active .bulk-progress-step-icon::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.875rem;
      height: 0.875rem;
      margin-top: -0.4375rem;
      margin-left: -0.4375rem;
      border: 2px solid var(--cc-brand-a20);
      border-top-color: var(--cc-brand);
      border-radius: 50%;
    }

    @media (prefers-reduced-motion: no-preference) {
      .bulk-progress-step.active .bulk-progress-step-icon::after {
        animation: bulk-progress-spinner 0.8s linear infinite;
      }
    }

    .bulk-progress-step.active .bulk-progress-step-text {
      color: var(--cc-text-body);
      font-weight: 500;
    }

    /* Complete state */
    .bulk-progress-step.complete .bulk-progress-step-icon {
      background: var(--success, #22c55e);
      color: white;
    }

    @media (prefers-reduced-motion: no-preference) {
      .bulk-progress-step.complete .bulk-progress-step-icon {
        animation: bulk-progress-check-in 0.4s ease;
      }
    }

    .bulk-progress-step.complete .bulk-progress-step-icon::before {
      content: "✓";
    }

    .bulk-progress-step.complete .bulk-progress-step-text {
      color: var(--cc-text-body);
    }

    .bulk-progress-step-info {
      font-size: 0.75rem;
      color: var(--cc-text-secondary);
      cursor: help;
      opacity: 0.6;
      transition: opacity 0.2s ease;
      margin-left: auto;
      flex-shrink: 0;
      border: none;
      background: transparent;
      padding: 0;
      line-height: 1;
    }

    .bulk-progress-step:hover .bulk-progress-step-info,
    .bulk-progress-step.tooltip-visible .bulk-progress-step-info {
      opacity: 1;
    }

    .bulk-progress-step-count {
      font-size: 0.6875rem;
      color: var(--cc-text-secondary);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      min-width: 52px;
      text-align: right;
      flex-shrink: 0;
    }
    .bulk-progress-step-count--dim {
      color: var(--cc-text-disabled);
    }

    .bulk-progress-step::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 0.75rem);
      left: 50%;
      transform: translateX(-50%);
      background: var(--cc-text-body);
      color: var(--cc-bg-card);
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 400;
      line-height: 1.4;
      white-space: normal;
      width: max-content;
      max-width: 280px;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      z-index: 100;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .bulk-progress-step::before {
      content: "";
      position: absolute;
      bottom: calc(100% + 0.5rem);
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--cc-text-body);
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      z-index: 100;
    }

    .bulk-progress-step:first-child::after,
    .bulk-progress-step:first-child + .bulk-progress-step::after {
      bottom: auto;
      top: calc(100% + 0.75rem);
    }

    .bulk-progress-step:first-child::before,
    .bulk-progress-step:first-child + .bulk-progress-step::before {
      bottom: auto;
      top: calc(100% + 0.5rem);
      border-top-color: transparent;
      border-bottom-color: var(--cc-text-body);
    }

    .bulk-progress-step:hover::after,
    .bulk-progress-step:hover::before,
    .bulk-progress-step:focus-within::after,
    .bulk-progress-step:focus-within::before,
    .bulk-progress-step.tooltip-visible::after,
    .bulk-progress-step.tooltip-visible::before {
      opacity: 1;
      visibility: visible;
    }

    /* ===== Current Batch Section ===== */
    .bulk-progress-current-batch {
      padding: 0;
      background: transparent;
      border-radius: 0;
      border: none;
      margin-top: 16px;
    }

    @media (prefers-reduced-motion: no-preference) {
      .bulk-progress-current-batch {
        animation: bulk-progress-fade-in 0.3s ease;
      }
    }

    .bulk-progress-batch-label {
      font-size: 0.6875rem;
      font-weight: 700;
      color: var(--cc-text-disabled);
      margin: 0 0 7px 0;
      font-family: var(--font-body);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .bulk-progress-stats {
      display: none;
    }

    .bulk-progress-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.125rem;
      font-family: var(--font-body);
    }

    .bulk-progress-stat-value {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--cc-brand);
      font-feature-settings: "tnum";
      transition: color 0.3s ease;
      line-height: 1;
    }

    .bulk-progress-stat-value.bulk-progress-stat-issues {
      color: var(--cc-text-secondary);
    }

    .bulk-progress-stat-value.bulk-progress-stat-issues.has-issues {
      color: var(--warning, #f59e0b);
    }

    @media (prefers-reduced-motion: no-preference) {
      .bulk-progress-stat-value.bulk-progress-stat-issues.has-issues {
        animation: bulk-stat-pulse 0.4s ease;
      }
    }

    .bulk-progress-stat-label {
      font-size: 0.6875rem;
      color: var(--cc-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-weight: 600;
    }

    .bulk-progress-stat-divider {
      width: 1px;
      height: 1.5rem;
      background: var(--cc-brand-a12);
    }

    .bulk-progress-batch-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .bulk-progress-batch-item {
      font-size: 0.71875rem;
      color: var(--cc-text-secondary);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      line-height: 1.4;
      padding: 5px 10px;
      background: var(--cc-bg-subtle);
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bulk-progress-batch-item::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cc-brand-border);
      flex-shrink: 0;
    }
    .bulk-progress-batch-item:first-child::before {
      background: var(--cc-brand);
    }
    .bulk-progress-batch-item:first-child {
      color: var(--cc-brand);
      font-weight: 500;
    }

    /* Loading screen 5-stat grid */
    .bulk-progress-stat-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }
    .bulk-progress-stat-card {
      border-radius: 8px;
      padding: 8px 10px;
      text-align: center;
      border: 1px solid;
    }
    .bulk-progress-stat-card-n {
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 3px;
      font-variant-numeric: tabular-nums;
    }
    .bulk-progress-stat-card-l {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.2;
    }
    /* Grammar & Style card */
    .bulk-progress-stat-card--grammar { background: #fce7f3; border-color: #fbcfe8; }
    .bulk-progress-stat-card--grammar .bulk-progress-stat-card-n { color: #9d174d; }
    .bulk-progress-stat-card--grammar .bulk-progress-stat-card-l { color: #be185d; }
    /* Missing Citations card */
    .bulk-progress-stat-card--missing { background: #ede9fe; border-color: #ddd6fe; }
    .bulk-progress-stat-card--missing .bulk-progress-stat-card-n { color: #5b21b6; }
    .bulk-progress-stat-card--missing .bulk-progress-stat-card-l { color: #7c3aed; }
    .bulk-progress-stat-card--issues { background: var(--cc-warning-bg); border-color: var(--cc-warning-border); }
    .bulk-progress-stat-card--issues .bulk-progress-stat-card-n { color: var(--cc-warning-text-strong); }
    .bulk-progress-stat-card--issues .bulk-progress-stat-card-l { color: var(--cc-warning-text); }
    .bulk-progress-stat-card--verified { background: var(--cc-success-bg); border-color: var(--cc-success-border); }
    .bulk-progress-stat-card--verified .bulk-progress-stat-card-n { color: var(--cc-success-text); }
    .bulk-progress-stat-card--verified .bulk-progress-stat-card-l { color: var(--cc-success-text); }
    .bulk-progress-stat-card--fmtok { background: var(--cc-user-bg); border-color: var(--cc-user-border); }
    .bulk-progress-stat-card--fmtok .bulk-progress-stat-card-n { color: var(--cc-user-text-strong); }
    .bulk-progress-stat-card--fmtok .bulk-progress-stat-card-l { color: var(--cc-user-text); }
    .bulk-progress-stat-card--cantv { background: var(--cc-bg-subtle); border-color: var(--cc-border); }
    .bulk-progress-stat-card--cantv .bulk-progress-stat-card-n { color: var(--cc-text-secondary); }
    .bulk-progress-stat-card--cantv .bulk-progress-stat-card-l { color: var(--cc-text-secondary); }
    .bulk-progress-stat-card--total { background: var(--cc-bg-subtle); border-color: var(--cc-border); }
    .bulk-progress-stat-card--total .bulk-progress-stat-card-n { color: var(--cc-text-body); }
    .bulk-progress-stat-card--total .bulk-progress-stat-card-l { color: var(--cc-text-secondary); }
    .bulk-progress-stat-card-dash { color: var(--cc-border-strong); font-size: 16px; }

    @media (prefers-reduced-motion: no-preference) {
      .bulk-progress-batch-item {
        animation: bulk-progress-item-in 0.3s ease;
        animation-fill-mode: backwards;
      }

      .bulk-progress-batch-item:nth-child(1) { animation-delay: 0ms; }
      .bulk-progress-batch-item:nth-child(2) { animation-delay: 40ms; }
      .bulk-progress-batch-item:nth-child(3) { animation-delay: 80ms; }
      .bulk-progress-batch-item:nth-child(4) { animation-delay: 120ms; }
      .bulk-progress-batch-item:nth-child(5) { animation-delay: 160ms; }
    }

    /* ===== Animations ===== */
    @keyframes bulk-progress-spinner {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes bulk-progress-check-in {
      0% {
        transform: scale(0.5);
        opacity: 0;
      }
      60% {
        transform: scale(1.15);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes bulk-progress-fade-in {
      from {
        opacity: 0;
        transform: translateY(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes bulk-progress-item-in {
      from {
        opacity: 0;
        transform: translateX(-4px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes bulk-progress-active-glow {
      0%, 100% {
        box-shadow: 0 0 0 0 var(--cc-brand-a20);
      }
      50% {
        box-shadow: 0 0 0 6px rgba(0, 58, 143, 0);
      }
    }

    @keyframes bulk-stat-pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.15); }
      100% { transform: scale(1); }
    }

    /* ===== Mobile Responsiveness ===== */
    @media (max-width: 480px) {
      .bulk-progress-container {
        padding: 1.5rem 1.25rem;
      }

      .bulk-progress-title {
        font-size: 0.9375rem;
      }

      .bulk-progress-time-estimate {
        font-size: 0.75rem;
      }

      .bulk-progress-subtitle {
        font-size: 0.75rem;
      }

      .bulk-progress-step {
        font-size: 0.8125rem;
      }

      .bulk-progress-step-icon {
        width: 1.125rem;
        height: 1.125rem;
        font-size: 0.75rem;
      }

      .bulk-progress-step.active .bulk-progress-step-icon::after {
        width: 0.75rem;
        height: 0.75rem;
        margin-top: -0.375rem;
        margin-left: -0.375rem;
        border-width: 1.5px;
      }

      .bulk-progress-batch-item {
        font-size: 0.6875rem;
      }

      .bulk-progress-current-batch {
        padding: 0.75rem;
      }

      .bulk-progress-batch-label {
        font-size: 0.75rem;
      }

      .bulk-progress-stats {
        padding: 0.625rem 0.75rem;
        gap: 1rem;
      }

      .bulk-progress-stat-value {
        font-size: 1.125rem;
      }

      .bulk-progress-stat-label {
        font-size: 0.625rem;
      }
    }

    @media (max-width: 768px) {
      .bulk-progress-step::after {
        max-width: calc(100vw - 4rem);
      }
    }

    /* ── Collapsible sections (Pass 2) ── */
    .cc-collapsible {
      border-top: 1px solid var(--cc-border-soft);
    }

    /* Consistent vertical rhythm: every section label in the cite form gets
       the same top gap. Inline margin-top overrides on individual labels
       should be removed in favour of this rule. */
    #magicManualContainer .cc-section-label {
      margin-top: 1.25rem;
      margin-bottom: 0.625rem;
    }

    /* First label in the container needs no top gap */
    #magicManualContainer .cc-section-label:first-child {
      margin-top: 0;
    }

    /* ── Mode toggle ── */
    .cc-mode-toggle {
      display: inline-flex;
      background: var(--cc-bg-tab-strip);
      border: 1px solid var(--cc-border-soft);
      border-radius: 8px;
      padding: 3px;
      gap: 2px;
      margin-bottom: 1.25rem;
    }

    .cc-mode-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      font-size: 0.8125rem;
      font-weight: 500;
      font-family: var(--font-body);
      color: var(--cc-text-secondary);
      background: none;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
      line-height: 1;
    }

    .cc-mode-btn--active {
      background: var(--cc-bg-card);
      color: var(--cc-brand);
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(10,22,40,0.10);
    }

    .cc-mode-btn:hover:not(.cc-mode-btn--active) {
      color: var(--cc-text-primary);
      background: var(--cc-brand-a06);
    }

    /* ── Generate button ── */
    .cc-generate-row {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--cc-border-soft);
    }

    /* [Day 34 P26] Pill shape (999px radius), max-width 480px centered.
       Full-width on narrow viewports. Premium contained feel vs bleed. */
    .cc-generate-btn {
      width: 100%;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--cc-brand);
      color: var(--cc-brand-on-brand);
      border: none;
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: 0.01em;
      transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    }

    .cc-generate-btn:hover {
      background: #002d70;
      box-shadow: 0 4px 16px var(--cc-brand-a20);
    }

    .cc-generate-btn:active {
      transform: translateY(1px);
    }

    .cc-collapsible-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 0;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      transition: color 0.15s;
    }

    .cc-collapsible-header:hover .cc-collapsible-title {
      color: var(--cc-brand);
    }

    .cc-collapsible-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cc-collapsible-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--cc-text-secondary);
      transition: color 0.15s;
    }

    .cc-collapsible-chevron {
      color: var(--cc-text-tertiary);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }

    .cc-collapsible.is-collapsed .cc-collapsible-chevron {
      transform: rotate(-90deg);
    }

    .cc-collapsible-body {
      display: grid;
      grid-template-rows: 1fr;
      transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.22s ease;
      opacity: 1;
    }

    .cc-collapsible.is-collapsed .cc-collapsible-body {
      grid-template-rows: 0fr;
      opacity: 0;
      pointer-events: none;
    }

    .cc-collapsible-inner {
      overflow: hidden;
      padding-bottom: 0;
    }

    /* Outer filters/advanced have no toggle; keep bodies visible even if JS toggles .is-collapsed */
    #ccFiltersCollapsible.is-collapsed .cc-collapsible-body,
    #ccAdvancedCollapsible.is-collapsed .cc-collapsible-body {
      grid-template-rows: 1fr;
      opacity: 1;
      pointer-events: auto;
    }

    #ccAdvancedCollapsible.cc-collapsible,
    #ccFiltersCollapsible.cc-collapsible {
      border-top: none;
    }

    /* Active filter badge */
    .cc-filter-badge,
    .cc-advanced-badge {
      display: inline-flex;
      align-items: center;
      background: var(--cc-brand-soft);
      border: 1px solid var(--cc-brand-border);
      color: var(--cc-brand);
      font-size: 0.7rem;
      font-weight: 600;
      font-family: var(--font-body);
      border-radius: 100px;
      padding: 2px 8px;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .cc-filter-badge[hidden],
    .cc-advanced-badge[hidden] {
      display: none;
    }

    /* ── Compact stat cards (P14) ─────────────────────────────────── */
    .report-stats-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
      margin-bottom: 10px;
    }

    .report-stat-card {
      padding: 8px 10px;
      border-radius: 8px;
      text-align: center;
      border: 1px solid transparent;
    }

    /* Colour variants — token-consistent with issue badges */
    .report-stat-issues   { background: var(--cc-warning-bg);  border-color: var(--cc-warning-border); }
    .report-stat-grammar  { background: #fce7f3;               border-color: #fbcfe8; }
    .report-stat-missing  { background: #ede9fe;               border-color: #ddd6fe; }
    .report-stat-correct  { background: var(--cc-success-bg);  border-color: var(--cc-success-border); }
    .report-stat-format-ok { background: var(--cc-user-bg);    border-color: var(--cc-user-border); }
    .report-stat-unverifiable { background: var(--cc-bg-subtle); border-color: var(--cc-border); }
    .report-stat-total    { background: var(--cc-bg-subtle);   border-color: var(--cc-border); }

    .report-stat-number {
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    /* Number colours */
    .report-stat-issues    .report-stat-number { color: var(--cc-warning-text-strong); }
    .report-stat-grammar   .report-stat-number { color: #9d174d; }
    .report-stat-missing   .report-stat-number { color: #5b21b6; }
    .report-stat-correct   .report-stat-number { color: var(--cc-success-text); }
    .report-stat-format-ok .report-stat-number { color: var(--cc-user-text-strong); }
    .report-stat-unverifiable .report-stat-number { color: var(--cc-text-secondary); }
    .report-stat-total     .report-stat-number { color: var(--cc-text-body); }

    .report-stat-label {
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-top: 4px;
      line-height: 1.2;
    }

    /* Label colours */
    .report-stat-issues    .report-stat-label { color: var(--cc-warning-text); }
    .report-stat-grammar   .report-stat-label { color: #be185d; }
    .report-stat-missing   .report-stat-label { color: #7c3aed; }
    .report-stat-correct   .report-stat-label { color: var(--cc-success-text); }
    .report-stat-format-ok .report-stat-label { color: var(--cc-user-text); }
    .report-stat-unverifiable .report-stat-label { color: var(--cc-text-secondary); }
    .report-stat-total     .report-stat-label { color: var(--cc-text-secondary); }

    /* ── Privacy banner — compact centered strip (P15) ─────────────── */
    .dc-privacy-banner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 2px;
      padding: 7px 20px;
      background: var(--cc-bg-subtle);
      border-bottom: 1px solid var(--cc-border-soft);
      flex-shrink: 0;
    }
    .dc-privacy-banner-top {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: var(--cc-success-text);
    }
    .dc-privacy-title {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--cc-success-text);
    }
    .dc-privacy-body {
      font-size: 11px;
      color: var(--cc-text-secondary);
      line-height: 1.45;
      max-width: 680px;
    }

    /* Privacy chip — still used in the compact header row */
    .dc-privacy-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      color: var(--cc-success-text);
      white-space: nowrap;
    }
    .dc-privacy-chip svg { flex-shrink: 0; }

    /* Centered onboarding tip (P15: moved out of left pane) */
    .dc-onboarding-banner {
      justify-content: center;
      text-align: center;
    }

    /* ── Doc Check redesign — collapsible sections ───────────────────── */
    .dc-collapsible {
      border: 1px solid var(--cc-border);
      border-radius: 12px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .dc-collapsible-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 13px 16px;
      background: var(--cc-bg-card);
      border: none;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s;
    }
    .dc-collapsible-trigger:hover {
      background: var(--cc-bg-subtle);
    }
    .dc-collapsible-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .dc-collapsible-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .dc-collapsible-dot--amber { background: var(--cc-warning-text); }
    .dc-collapsible-dot--green { background: var(--cc-success-text); }
    .dc-collapsible-dot--blue  { background: var(--cc-user-text); }
    .dc-collapsible-dot--gray  { background: var(--cc-text-disabled); }
    .dc-collapsible-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--cc-text-body);
    }
    .dc-collapsible-sublabel {
      font-size: 11px;
      color: var(--cc-text-disabled);
      font-weight: 400;
      margin-left: 4px;
    }
    .dc-collapsible-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dc-collapsible-count {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 99px;
    }
    .dc-collapsible-count--amber {
      background: var(--cc-warning-bg);
      color: var(--cc-warning-text-strong);
      border: 1px solid var(--cc-warning-border);
    }
    .dc-collapsible-count--green {
      background: var(--cc-success-bg);
      color: var(--cc-success-text);
      border: 1px solid var(--cc-success-border);
    }
    .dc-collapsible-count--blue {
      background: var(--cc-user-bg);
      color: var(--cc-user-text-strong);
      border: 1px solid var(--cc-user-border);
    }
    .dc-collapsible-count--gray {
      background: var(--cc-bg-subtle);
      color: var(--cc-text-secondary);
      border: 1px solid var(--cc-border);
    }
    .dc-collapsible-chevron {
      font-size: 10px;
      color: var(--cc-text-disabled);
      transition: transform 0.2s ease;
      display: inline-block;
    }
    .dc-collapsible-chevron--open {
      transform: rotate(180deg);
    }
    .dc-collapsible-body {
      border-top: 1px solid var(--cc-border);
      padding: 14px;
      background: var(--cc-bg-subtle);
      display: none;
    }
    .dc-collapsible-body--open {
      display: block;
    }

    /* ── Doc Check redesign — issue cards ───────────────────────────── */
    .dc-issue-card {
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-border);
      border-radius: 10px;
      margin-bottom: 8px;
      overflow: hidden;
    }
    .dc-issue-card:last-child {
      margin-bottom: 0;
    }
    .dc-issue-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 13px;
      background: var(--cc-bg-subtle);
      border-bottom: 1px solid var(--cc-border);
    }
    .dc-issue-number {
      font-size: 11px;
      color: var(--cc-text-secondary);
      font-weight: 600;
    }
    .dc-issue-location {
      font-size: 11px;
      color: var(--cc-text-disabled);
      font-weight: 400;
      margin-left: 2px;
    }
    .dc-issue-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--cc-warning-bg);
      color: var(--cc-warning-text-strong);
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 99px;
      border: 1px solid var(--cc-warning-border);
      margin-left: 8px;
      white-space: nowrap;
    }

    /* Citation pair grid — label col 80px to fit YOURS/CORRECT on one line */
    .dc-citation-pair {
      display: grid;
      grid-template-columns: 80px 1fr;
    }
    .dc-cit-label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 10px 6px;
      border-right: 1px solid var(--cc-border);
    }
    .dc-cit-label--yours {
      background: var(--cc-error-bg);
      color: var(--cc-error-text);
      border-bottom: 1px solid var(--cc-border);
    }
    .dc-cit-label--correct {
      background: var(--cc-success-bg);
      color: var(--cc-success-text);
    }
    .dc-cit-text {
      padding: 10px 13px;
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      line-height: 1.5;
      word-break: break-word;
      overflow-wrap: break-word;
      min-width: 0;
      overflow: hidden;
    }
    .dc-cit-text--yours {
      background: var(--cc-error-bg);
      color: var(--cc-error-text);
      border-bottom: 1px solid var(--cc-border);
    }
    .dc-cit-text--correct {
      background: var(--cc-success-bg);
      color: var(--cc-success-text);
    }

    /* Correct row — text + format toggle + copy */
    .dc-correct-row {
      display: grid;
      grid-template-columns: 80px 1fr;
    }
    .dc-correct-content {
      background: var(--cc-success-bg);
      display: flex;
      align-items: stretch;
    }
    .dc-correct-text {
      flex: 1;
      padding: 10px 13px;
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      line-height: 1.5;
      word-break: break-word;
      overflow-wrap: break-word;
      min-width: 0;
      overflow: hidden;
      color: var(--cc-success-text);
    }
    .dc-correct-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 9px;
      border-left: 1px solid var(--cc-success-border);
      background: var(--cc-success-bg);
      flex-shrink: 0;
    }

    /* Diff note */
    .dc-diff-note {
      padding: 7px 13px;
      font-size: 11px;
      color: var(--cc-text-tertiary);
      border-top: 1px solid var(--cc-border);
      background: var(--cc-bg-card);
      display: flex;
      align-items: flex-start;
      gap: 6px;
    }
    .dc-diff-icon {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--cc-user-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
      font-size: 8px;
      font-weight: 700;
      color: var(--cc-user-text-strong);
      font-style: normal;
    }

    /* ── P38: inline diff del/ins spans ─────────────────────────────── */
    .dc-diff-del {
      text-decoration: line-through;
      color: var(--cc-error-text);
      background: var(--cc-error-bg);
      border-radius: 2px;
      padding: 0 1px;
    }
    .dc-diff-ins {
      color: var(--cc-success-text);
      background: var(--cc-success-bg);
      border-radius: 2px;
      padding: 0 1px;
      text-decoration: none;
      font-style: normal;
    }

    /* ── Doc Check redesign — verified items ─────────────────────────── */
    .dc-verified-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }
    .dc-verified-item {
      background: var(--cc-success-bg);
      border: 1px solid var(--cc-success-border);
      border-radius: 8px;
      padding: 8px 11px;
      display: flex;
      align-items: flex-start;
      gap: 7px;
    }
    .dc-verified-check {
      width: 14px;
      height: 14px;
      background: var(--cc-success-text);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
      font-size: 8px;
      color: white;
      font-weight: 700;
    }
    .dc-verified-cite {
      font-size: 11px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: var(--cc-success-text);
      line-height: 1.4;
    }
    .dc-verified-court {
      font-size: 10px;
      color: var(--cc-success-text);
      margin-top: 2px;
      opacity: 0.8;
    }

    /* ── Doc Check redesign — format OK items ────────────────────────── */
    .dc-fmtok-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }
    .dc-fmtok-item {
      background: var(--cc-user-bg);
      border: 1px solid var(--cc-user-border);
      border-radius: 8px;
      padding: 8px 11px;
      display: flex;
      align-items: flex-start;
      gap: 7px;
    }
    .dc-fmtok-dot {
      width: 14px;
      height: 14px;
      border: 2px solid var(--cc-user-text);
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .dc-fmtok-cite {
      font-size: 11px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: var(--cc-user-text-strong);
      line-height: 1.4;
    }
    .dc-fmtok-type {
      font-size: 10px;
      color: var(--cc-user-text);
      margin-top: 2px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* ── Doc Check redesign — cannot verify items ────────────────────── */
    .dc-cantv-item {
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-border);
      border-radius: 8px;
      padding: 9px 13px;
      display: flex;
      align-items: flex-start;
      gap: 7px;
      margin-bottom: 7px;
    }
    .dc-cantv-item:last-child {
      margin-bottom: 0;
    }
    .dc-cantv-dot {
      width: 14px;
      height: 14px;
      border: 2px solid var(--cc-text-disabled);
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .dc-cantv-cite {
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: var(--cc-text-body);
      line-height: 1.4;
    }
    .dc-cantv-note {
      font-size: 11px;
      color: var(--cc-text-secondary);
      margin-top: 3px;
    }

    #reportContainer > .disclosure-card:first-child {
      margin-top: 0;
    }

    /* Narrow left pane: tighten label column so citation text has room */
    .dc-pane-left .dc-citation-pair,
    .dc-pane-left .dc-correct-row {
      grid-template-columns: 62px 1fr;
    }
    .dc-pane-left .dc-cit-label,
    .dc-pane-left .dc-correct-content { min-width: 0; }

    /* ── Doc Check P36b: split pane ────────────────────────────────── */

    /* Outer report wrapper — becomes the split pane container */
    /* Full-height chain: bulkCheckContainer → reportContainer → report card */
    #bulkCheckContainer {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    #reportContainer {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    #reportContainer > .disclosure-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .dc-report-outer {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding-bottom: 12px;
    }

    /* Inline padding wrapper inside dc-report-outer — must not steal height
       from dc-split-row. flex-shrink:0 keeps it at its natural size. */
    .dc-report-outer > div:not(.dc-split-row):not(.dc-report-header) {
      flex-shrink: 0;
    }
    .dc-report-header { flex-shrink: 0; }

    /* Top section: privacy banner + stats + action bar (full width) */
    .dc-report-top {
      /* inherits from disclosure-card; no extra styles needed */
    }

    /* Split pane row */
    .dc-split-row {
      display: flex;
      flex: 1;
      min-height: 0;
      border-top: 1px solid var(--cc-border);
      margin-top: 0;
    }
    .dc-split-row--doc-hidden {
      /* No grid override needed — flex reflows when right pane is hidden */
    }

    /* Left pane: issues list */
    .dc-pane-left {
      width: 520px;
      flex-shrink: 0;
      overflow-y: auto;
      padding: 14px 16px;
      min-width: 0;
    }

    /* ── Section outline ──────────────────────────────────────────── */
    .dc-section-outline {
      margin-bottom: 12px;
      border: 1px solid var(--cc-border);
      border-radius: 10px;
      overflow: hidden;
    }
    .dc-section-outline-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 12px;
      background: var(--cc-bg-subtle);
      border-bottom: 1px solid var(--cc-border);
      font-size: 11px;
      font-weight: 600;
      color: var(--cc-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      user-select: none;
    }
    .dc-section-outline-header:hover { background: var(--cc-bg-muted); }
    .dc-section-outline-body { display: block; }
    .dc-section-outline-body.hidden { display: none; }
    .dc-section-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      cursor: pointer;
      border-bottom: 1px solid var(--cc-border-soft);
      transition: background 0.1s;
    }
    .dc-section-row:last-child { border-bottom: none; }
    .dc-section-row:hover { background: var(--cc-bg-secondary); }
    .dc-section-row.active {
      background: var(--cc-brand-a06, rgba(0,58,143,0.06));
      border-left: 3px solid var(--cc-brand);
      padding-left: 9px;
    }
    .dc-section-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .dc-section-dot--ok     { background: var(--cc-success-text); }
    .dc-section-dot--warn   { background: var(--cc-warning-border); }
    .dc-section-dot--bad    { background: var(--cc-error-text); }
    .dc-section-name {
      flex: 1;
      font-size: 11.5px;
      color: var(--cc-text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 320px;
    }
    .dc-section-pill {
      font-size: 10px;
      font-weight: 600;
      color: var(--cc-text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .dc-section-pill--issues { color: var(--cc-warning-text-strong); }
    .dc-section-clear {
      display: none;
      font-size: 10px;
      color: var(--cc-brand);
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid var(--cc-brand-border);
      background: transparent;
      font-family: var(--font-body);
      white-space: nowrap;
    }
    .dc-section-clear.visible { display: inline-block; }
    .dc-split-row--doc-hidden .dc-pane-left {
      width: 100%;
      flex-shrink: 1;
      overflow-y: auto;
      padding: 16px 20px;
    }

    /* Drag handle — sits between the two panes */
    .dc-drag-handle {
      width: 6px;
      flex-shrink: 0;
      background: var(--cc-border-soft);
      cursor: col-resize;
      position: relative;
      transition: background .12s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dc-drag-handle:hover,
    .dc-drag-handle.dragging { background: var(--cc-brand-border); }
    .dc-drag-handle-grip {
      width: 2px;
      height: 28px;
      background: var(--cc-text-disabled);
      border-radius: 1px;
      pointer-events: none;
      transition: background .12s;
    }
    .dc-drag-handle:hover .dc-drag-handle-grip,
    .dc-drag-handle.dragging .dc-drag-handle-grip { background: var(--cc-brand); }
    .dc-split-row--doc-hidden .dc-drag-handle { display: none; }

    /* Right pane: document viewer */
    .dc-pane-right {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--cc-bg-muted, #f7f6f1);
      position: relative;
    }

    /* Grammar + missing-cite badge variants */
    .dc-issue-badge--grammar {
      background: #fce7f3;
      color: #9d174d;
      border-color: #fbcfe8;
    }
    .dc-issue-badge--missing {
      background: #ede9fe;
      color: #5b21b6;
      border-color: #ddd6fe;
    }
    .dc-pane-right--hidden {
      display: none;
    }

    /* Document view placeholder (until P41) */
    .dc-doc-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 200px;
      gap: 10px;
      color: var(--cc-text-disabled);
      text-align: center;
      padding: 32px;
    }
    .dc-doc-placeholder-icon { opacity: 0.4; }
    .dc-doc-placeholder-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--cc-text-secondary);
    }
    .dc-doc-placeholder-sub {
      font-size: 12px;
      color: var(--cc-text-disabled);
      max-width: 240px;
      line-height: 1.5;
    }

    /* ── P1: Brief document view ────────────────────────────────── */

    /* Outer scrollable pane — bg-muted, padding around the doc card */
    .dc-doc-view-content {
      padding: 24px 20px;
      background: var(--cc-bg-muted);
      min-height: 100%;
      flex: 1;
      overflow-y: auto;
    }

    /* White document card — simulates a real brief page */
    .dc-doc-brief {
      background: #fff;
      max-width: 760px;
      margin: 0 auto;
      padding: 72px 80px;
      box-shadow: 0 2px 16px rgba(10, 22, 40, 0.08), 0 1px 4px rgba(10, 22, 40, 0.04);
      border-radius: 2px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 12pt;
      line-height: 1.85;
      color: var(--cc-text-body);
    }

    /* Headings — mapped from Word styles via mammoth styleMap */
    .dc-doc-brief h1, .dc-doc-brief .dc-h1 {
      font-size: 12pt;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 22px 0 14px;
    }
    .dc-doc-brief h2, .dc-doc-brief .dc-h2 {
      font-size: 12pt;
      font-weight: bold;
      text-align: center;
      margin: 18px 0 10px;
    }
    .dc-doc-brief h3, .dc-doc-brief .dc-h3 {
      font-size: 12pt;
      font-weight: bold;
      font-style: italic;
      margin: 14px 0 8px;
    }

    /* Body paragraphs */
    .dc-doc-brief p, .dc-doc-brief .dc-body {
      margin-bottom: 10px;
      text-align: justify;
    }

    /* Block quotations (common in briefs) */
    .dc-doc-brief blockquote, .dc-doc-brief .dc-quote {
      margin: 10px 48px;
      font-size: 11.5pt;
      line-height: 1.65;
    }

    /* Footnote text */
    .dc-doc-brief .dc-fn {
      font-size: 10pt;
      line-height: 1.5;
      margin-bottom: 6px;
      color: var(--cc-text-secondary);
    }

    /* Inline formatting */
    .dc-doc-brief em  { font-style: italic; }
    .dc-doc-brief strong { font-weight: bold; }
    .dc-doc-brief u   { text-decoration: underline; }

    /* ── P1: Ambient health score badge ──────────────────────────── */
    .dc-health-badge {
      display: flex;
      align-items: baseline;
      gap: 1px;
      background: var(--cc-bg-subtle);
      border: 1px solid var(--cc-border);
      border-radius: 8px;
      padding: 4px 11px;
    }
    .dc-health-num {
      font-size: 17px;
      font-weight: 800;
      line-height: 1;
      color: var(--cc-text-primary);
      transition: color .25s;
      font-family: var(--font-body);
    }
    .dc-health-num[data-level="good"] { color: var(--cc-success-text); }
    .dc-health-num[data-level="warn"] { color: var(--cc-warning-text); }
    .dc-health-num[data-level="bad"]  { color: var(--cc-error-text); }
    .dc-health-denom {
      font-size: 11px;
      font-weight: 600;
      color: var(--cc-text-disabled);
      font-family: var(--font-body);
    }
    .dc-health-proj {
      font-size: 12px;
      font-weight: 700;
      color: var(--cc-success-text);
      margin-left: 4px;
      font-family: var(--font-body);
      transition: opacity .2s;
    }

    /* ── P4: PDF viewer ──────────────────────────────────────────── */

    /* Toolbar sits at the top of the right pane, above the scroll area */
    .dc-pdf-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: var(--cc-bg-card);
      border-bottom: 1px solid var(--cc-border);
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .dc-pdf-toolbar-group {
      display: inline-flex;
      border: 1px solid var(--cc-border);
      border-radius: 7px;
      overflow: hidden;
    }
    .dc-pdf-btn {
      border: 0;
      background: var(--cc-bg-card);
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      color: var(--cc-text-secondary);
      padding: 5px 10px;
      cursor: pointer;
      border-right: 1px solid var(--cc-border);
      transition: background .1s;
    }
    .dc-pdf-btn:last-child { border-right: 0; }
    .dc-pdf-btn:hover { background: var(--cc-bg-subtle); }
    .dc-pdf-btn:disabled { opacity: 0.4; cursor: default; }
    .dc-pdf-page-info {
      font-size: 12px;
      font-weight: 600;
      color: var(--cc-text-body);
      padding: 5px 10px;
      background: var(--cc-bg-card);
      border-right: 1px solid var(--cc-border);
    }
    .dc-pdf-zoom-val {
      padding: 5px 8px;
      background: var(--cc-bg-card);
      font-size: 12px;
      font-weight: 600;
      color: var(--cc-text-body);
      border-right: 1px solid var(--cc-border);
      min-width: 46px;
      text-align: center;
    }
    .dc-pdf-hifi-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      color: var(--cc-success-text);
      background: var(--cc-success-bg);
      border: 1px solid var(--cc-success-border);
      border-radius: 6px;
      padding: 3px 9px;
      margin-left: auto;
    }

    /* Scrollable canvas area */
    .dc-pdf-scroll {
      flex: 1;
      overflow-y: auto;
      background: var(--cc-bg-muted);
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    /* Individual page wrapper */
    .dc-pdf-page {
      background: #fff;
      box-shadow: 0 2px 12px rgba(10, 22, 40, 0.10), 0 1px 3px rgba(10, 22, 40, 0.06);
      border-radius: 2px;
      overflow: visible;
      position: relative;
      opacity: 0;
      transition: opacity .25s ease;
      flex-shrink: 0;
    }
    .dc-pdf-page.loaded { opacity: 1; }

    /* ── P5: Citation highlight overlay ──────────────────────────── */
    .dc-pdf-overlay {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      cursor: default;
      mix-blend-mode: multiply;
    }
    .dc-pdf-overlay.interactive { pointer-events: auto; }

    @keyframes dc-highlight-pulse {
      0%   { opacity: 1; }
      50%  { opacity: 0.25; }
      100% { opacity: 1; }
    }
    .dc-pdf-page.dc-page-pulse .dc-pdf-overlay {
      animation: dc-highlight-pulse 0.55s ease 2;
    }

    /* Skeleton placeholder while a page is rendering */
    .dc-pdf-page-skeleton {
      width: 680px;
      height: 880px;
      background: linear-gradient(90deg,
        var(--cc-bg-muted) 25%,
        var(--cc-border-soft) 50%,
        var(--cc-bg-muted) 75%);
      background-size: 200% 100%;
      animation: dc-skeleton-sweep 1.4s ease-in-out infinite;
      border-radius: 2px;
      flex-shrink: 0;
    }
    @keyframes dc-skeleton-sweep {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ── P3: HiFi consent modal ──────────────────────────────────── */
    .dc-hifi-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(0, 0, 0, 0.45);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      backdrop-filter: blur(2px);
    }
    .dc-hifi-modal {
      background: var(--cc-bg-card);
      border-radius: 16px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20);
      padding: 32px 28px 24px;
      max-width: 420px; width: 100%;
      text-align: center;
    }
    .dc-hifi-modal-icon {
      width: 52px; height: 52px; border-radius: 14px;
      background: var(--cc-brand-tint);
      border: 1px solid var(--cc-brand-border);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      color: var(--cc-brand);
    }
    .dc-hifi-modal-title {
      font-size: 17px; font-weight: 700;
      color: var(--cc-text-primary);
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }
    .dc-hifi-modal-body {
      font-size: 13px; color: var(--cc-text-secondary);
      line-height: 1.6; margin-bottom: 20px;
    }
    .dc-hifi-modal-actions {
      display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
    }
    .dc-hifi-btn {
      border: 0; border-radius: 10px; padding: 12px 20px;
      font: inherit; font-size: 13.5px; font-weight: 600;
      cursor: pointer; transition: opacity .15s;
    }
    .dc-hifi-btn:hover { opacity: 0.88; }
    .dc-hifi-btn--primary  { background: var(--cc-brand); color: #fff; }
    .dc-hifi-btn--secondary {
      background: var(--cc-bg-subtle);
      color: var(--cc-text-secondary);
      border: 1px solid var(--cc-border);
    }
    .dc-hifi-modal-note {
      font-size: 11.5px; color: var(--cc-text-disabled);
    }

    /* Converting skeleton — dims the brief card while Render processes */
    .dc-brief-converting {
      position: relative;
      pointer-events: none;
    }
    .dc-brief-converting::after {
      content: "";
      position: absolute; inset: 0;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 2px;
      display: flex; align-items: center; justify-content: center;
    }
    .dc-brief-converting::before {
      content: "Loading high-fidelity view…";
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-body);
      font-size: 13px; font-weight: 600;
      color: var(--cc-brand);
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-brand-border);
      border-radius: 8px;
      padding: 8px 18px;
      z-index: 10;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0, 58, 143, 0.12);
    }

    /* ── P6: PDF / Annotated view toggle ────────────────────────── */
    .dc-view-toggle-btn {
      display: none; /* hidden until bulkPdfBuffer is set */
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border: 1px solid var(--cc-brand-border);
      border-radius: 6px;
      background: var(--cc-brand-tint);
      font-size: 11px;
      font-weight: 600;
      color: var(--cc-brand);
      cursor: pointer;
      font-family: var(--font-body);
      transition: background .12s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .dc-view-toggle-btn:hover { background: var(--cc-brand-border); }
    .dc-view-toggle-btn.ready { display: inline-flex; }

    /* Report card header row (title + toggle button) */
    /* P14: compact header row — health badge · stats · privacy chip · toggle */
    .dc-report-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--cc-border);
      flex-wrap: wrap;
    }
    .dc-report-title { display: none; } /* removed P14 */
    .dc-doc-toggle-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border: 1px solid var(--cc-brand-border);
      border-radius: 7px;
      background: var(--cc-brand-tint);
      font-size: 11.5px;
      font-weight: 500;
      color: var(--cc-brand);
      cursor: pointer;
      font-family: var(--font-body);
      transition: background 0.15s;
    }
    .dc-doc-toggle-btn:hover { background: var(--cc-brand-border); }

    /* ── P41: document annotation marks ────────────────────────────── */
    .dc-doc-mark {
      border-radius: 2px;
      padding: 0 2px;
      cursor: default;
      transition: background 0.1s;
    }
    .dc-doc-mark--issue {
      background: var(--cc-warning-bg);
      border-bottom: 2px solid var(--cc-warning-border);
      cursor: pointer;
    }
    .dc-doc-mark--issue:hover { background: var(--cc-warning-border); }
    .dc-doc-mark--verified {
      background: var(--cc-success-bg);
      border-bottom: 2px solid var(--cc-success-border);
    }
    .dc-doc-mark--fmtok {
      background: var(--cc-user-bg);
      border-bottom: 2px solid var(--cc-user-border);
    }

    /* ── P41: popover ──────────────────────────────────────────────── */
    .dc-doc-popover {
      position: absolute;
      z-index: 200;
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-border);
      border-radius: 10px;
      box-shadow: var(--cc-shadow-dropdown);
      padding: 12px 14px;
      width: 280px;
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--cc-text-body);
    }
    .dc-pop-issue-num {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--cc-warning-text-strong);
      margin-bottom: 3px;
    }

    .dc-pop-citation {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      color: var(--cc-text-body);
      line-height: 1.45;
      margin-bottom: 6px;
      word-break: break-word;
    }
    .dc-pop-divider { height: 1px; background: var(--cc-border-soft); margin: 8px 0; }
    .dc-pop-correct-label {
      font-size: 9.5px; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--cc-text-disabled); margin-bottom: 4px;
    }
    .dc-pop-correct {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px; color: var(--cc-success-text);
      line-height: 1.45; margin-bottom: 10px; word-break: break-word;
    }
    .dc-pop-status { font-size: 12px; color: var(--cc-text-secondary); font-weight: 600; margin-top: 4px; }
    .dc-pop-actions { display: flex; gap: 8px; }
    .dc-pop-btn {
      flex: 1; border: 1px solid var(--cc-border); background: #fff;
      font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px;
      border-radius: 7px; cursor: pointer; color: var(--cc-text-body);
    }
    .dc-pop-btn--apply { background: var(--cc-brand); color: #fff; border-color: var(--cc-brand); }
    .dc-pop-btn--skip { background: var(--cc-error-bg); color: var(--cc-error-text); border-color: var(--cc-error-border); }
    .dc-pop-btn--list { background: var(--cc-bg-subtle); color: var(--cc-text-secondary); }
    .dc-pop-close {
      position: absolute; top: 8px; right: 10px;
      border: 0; background: transparent; font-size: 14px;
      color: var(--cc-text-disabled); cursor: pointer; line-height: 1; padding: 2px;
    }

    /* Pulse animations */
    @keyframes dcMarkPulse {
      0%, 100% { outline: 3px solid transparent; }
      40%, 60% { outline: 3px solid var(--cc-warning-border); outline-offset: 2px; }
    }
    .dc-mark-pulse { animation: dcMarkPulse 0.7s ease; }
    @keyframes dcCardPulse {
      0%, 100% { outline: 3px solid transparent; }
      40%, 60% { outline: 3px solid var(--cc-brand-border); outline-offset: 2px; }
    }
    .dc-card-pulse { animation: dcCardPulse 0.7s ease; }

    /* Responsive: collapse to single column below 860px */
    @media (max-width: 860px) {
      .dc-split-row {
        grid-template-columns: 1fr;
      }
      .dc-pane-right { display: none; }
      .dc-pane-left {
        border-right: none;
        max-height: none;
        overflow-y: visible;
      }
      .dc-doc-toggle-btn { display: none; }
    }

    /* ── Doc Check P36a: candidate-card issue cards ───────────────────── */

    /* Selection indicator — top-right circle */
    .dc-issue-select-indicator {
      position: absolute;
      top: 11px;
      right: 11px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1.5px solid var(--cc-border-soft);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s;
      pointer-events: none;
    }
    .dc-issue-card--selected .dc-issue-select-indicator {
      background: var(--cc-brand);
      border-color: var(--cc-brand);
    }
    .dc-issue-card--selected .dc-issue-select-indicator svg { display: block; }
    .dc-issue-select-indicator svg { display: none; }

    /* Selectable card overrides */
    .dc-issue-card--selectable {
      position: relative;
      cursor: pointer;
      border: 1.5px solid var(--cc-border-strong);
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .dc-issue-card--selectable:hover { border-color: var(--cc-brand); }
    .dc-issue-card--selected {
      background: var(--cc-brand-a04);
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px var(--cc-brand-a10);
    }
    .dc-issue-card--low-confidence:hover { border-color: var(--cc-caution-text, #c2410c); }

    /* Confidence dot */
    .dc-conf-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-block;
    }
    .dc-conf-dot--high   { background: var(--cc-success-text); }
    .dc-conf-dot--medium { background: var(--cc-caution-text, #c2410c); }
    .dc-conf-dot--low    { background: var(--cc-error-text); }

    /* Occurrence pill */
    .dc-occur-pill {
      font-size: 10.5px;
      color: var(--cc-text-disabled);
      font-weight: 500;
      margin-left: auto;
      white-space: nowrap;
      padding-right: 32px; /* room for indicator */
    }

    /* Rule note */
    .dc-rule-note {
      display: flex;
      align-items: flex-start;
      gap: 0;
      margin: 0;
      padding: 8px 13px;
      background: var(--cc-user-bg);
      border-top: 1px solid var(--cc-border);
      border-radius: 0;
    }
    .dc-rule-note--caution {
      background: var(--cc-caution-bg, #fff7ed);
      border-color: var(--cc-caution-border, #fed7aa);
    }
    .dc-rule-note-text {
      font-size: 12px;
      font-family: var(--font-body);
      color: var(--cc-user-text-strong);
      line-height: 1.5;
    }
    .dc-rule-note--caution .dc-rule-note-text { color: var(--cc-caution-text, #c2410c); }
    .dc-rule-ref { font-weight: 700; color: var(--cc-brand); }
    .dc-rule-error { color: var(--cc-user-text-strong); }

    /* Low-confidence badge */
    .dc-issue-badge--caution {
      background: var(--cc-caution-bg, #fff7ed);
      color: var(--cc-caution-text, #c2410c);
      border-color: var(--cc-caution-border, #fed7aa);
    }

    /* Cannot auto-correct state */
    .dc-no-correct {
      padding: 8px 13px 10px;
      font-size: 11.5px;
      color: var(--cc-text-disabled);
      font-style: italic;
    }

    /* Action bar */
    .dc-action-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      background: var(--cc-brand-tint);
      border: 1px solid var(--cc-brand-border);
      border-radius: 8px;
      margin: 8px 14px 6px;
      flex-wrap: wrap;
    }
    .dc-action-count {
      font-size: 13px;
      font-weight: 600;
      color: var(--cc-brand);
      flex: 1;
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 120px;
    }
    .dc-count-pill {
      background: var(--cc-brand);
      color: var(--cc-brand-on-brand, #ffffff);
      border-radius: 99px;
      padding: 1px 9px;
      font-size: 11px;
      font-weight: 700;
    }
    .dc-mode-toggle {
      display: flex;
      border: 1px solid var(--cc-brand-border);
      border-radius: 7px;
      overflow: hidden;
      background: var(--cc-bg-card);
    }
    .dc-mode-btn {
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 500;
      font-family: var(--font-body);
      color: var(--cc-text-secondary);
      background: transparent;
      border: none;
      border-right: 1px solid var(--cc-brand-border);
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .dc-mode-btn:last-child { border-right: none; }
    .dc-mode-btn--active {
      background: var(--cc-brand);
      color: var(--cc-brand-on-brand, #ffffff);
      font-weight: 600;
    }
    .dc-action-btn-dl {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 12px;
      background: var(--cc-brand);
      color: var(--cc-brand-on-brand, #ffffff);
      border: none; border-radius: 7px;
      font-size: 12px; font-weight: 600;
      font-family: var(--font-body); cursor: pointer;
      white-space: nowrap;
    }

    /* Apply All / Skip All — in the select bar */
    .dc-apply-all-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px;
      background: var(--cc-brand);
      color: var(--cc-brand-on-brand, #fff);
      border: none; border-radius: 99px;
      font-size: 11px; font-weight: 600;
      font-family: var(--font-body); cursor: pointer;
      white-space: nowrap;
    }
    .dc-apply-all-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .dc-skip-all-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px;
      background: transparent;
      color: var(--cc-text-secondary);
      border: 1px solid var(--cc-border); border-radius: 99px;
      font-size: 11px; font-weight: 500;
      font-family: var(--font-body); cursor: pointer;
      white-space: nowrap;
    }

    /* Fix Similar — appears on multi-occurrence cards */
    .dc-fix-similar-btn {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 2px 8px;
      background: var(--cc-brand-a08, rgba(0,58,143,0.08));
      color: var(--cc-brand);
      border: 1px solid var(--cc-brand-border);
      border-radius: 99px;
      font-size: 10px; font-weight: 600;
      font-family: var(--font-body); cursor: pointer;
      white-space: nowrap;
      margin-left: 6px;
    }
    .dc-fix-similar-btn:hover { background: var(--cc-brand-a14, rgba(0,58,143,0.14)); }

    /* Staggered card flash when Apply All fires */
    @keyframes dc-card-applied {
      0%   { background: var(--cc-success-bg); border-color: var(--cc-success-border); }
      70%  { background: var(--cc-success-bg); border-color: var(--cc-success-border); }
      100% { background: var(--cc-bg-card);    border-color: var(--cc-border); }
    }
    .dc-issue-card--applying {
      animation: dc-card-applied 0.55s ease forwards;
      pointer-events: none;
    }

    /* Download toast */
    .dc-toast {
      position: fixed;
      bottom: 24px; right: 24px;
      z-index: 9999;
      display: flex; align-items: center; gap: 8px;
      padding: 10px 16px;
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-success-border);
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(10,22,40,0.12);
      font-size: 12.5px; font-weight: 500;
      color: var(--cc-text-primary);
      animation: dc-toast-in 0.2s ease;
      pointer-events: none;
    }
    .dc-toast-icon { color: var(--cc-success-text); font-size: 15px; }
    @keyframes dc-toast-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .dc-action-btn-copy {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 11px;
      background: transparent;
      color: var(--cc-brand);
      border: 1px solid var(--cc-brand-border);
      border-radius: 7px;
      font-size: 12px; font-weight: 500;
      font-family: var(--font-body); cursor: pointer;
      white-space: nowrap;
    }

    /* Undo button (secondary, sits after Download) */
    .dc-action-btn-undo {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 10px;
      background: transparent;
      color: var(--cc-text-secondary);
      border: 1px solid var(--cc-border);
      border-radius: 7px;
      font-size: 12px; font-weight: 500;
      font-family: var(--font-body); cursor: pointer;
      white-space: nowrap;
    }
    .dc-action-btn-undo:hover { background: var(--cc-bg-subtle); }

    /* Memo button */
    .dc-action-btn-memo {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 10px;
      background: transparent;
      color: var(--cc-text-secondary);
      border: 1px solid var(--cc-border);
      border-radius: 7px;
      font-size: 12px; font-weight: 500;
      font-family: var(--font-body); cursor: pointer;
      white-space: nowrap;
    }
    .dc-action-btn-memo:hover { background: var(--cc-bg-subtle); }

    /* View-in-document icon button on issue card header */
    .dc-view-in-doc-btn {
      border: 0; background: transparent; padding: 2px 4px;
      cursor: pointer; color: var(--cc-text-disabled);
      border-radius: 4px; line-height: 1;
    }
    .dc-view-in-doc-btn:hover { color: var(--cc-brand); background: var(--cc-brand-tint); }

    /* Select-all bar */
    .dc-select-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 0 11px;
      border-bottom: 1px solid var(--cc-border);
      margin-bottom: 11px;
    }
    .dc-select-bar-left { display: flex; align-items: center; gap: 8px; flex: 1; }
    .dc-select-text-btn {
      font-size: 12px;
      font-weight: 600;
      color: var(--cc-brand);
      background: none;
      border: none;
      font-family: var(--font-body);
      cursor: pointer;
      padding: 3px 0;
    }
    .dc-select-text-btn--dim {
      font-weight: 500;
      color: var(--cc-text-secondary);
    }
    .dc-select-divider {
      width: 1px;
      height: 14px;
      background: var(--cc-border-strong);
    }
    .dc-select-count {
      font-size: 12px;
      color: var(--cc-text-secondary);
    }

    /* Short form items in Format OK */
    .dc-sf-section-label {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--cc-text-disabled);
      padding: 10px 0 8px;
      border-bottom: 1px solid var(--cc-border);
      margin-bottom: 9px;
    }
    .dc-sf-item {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 7px 10px;
      background: var(--cc-bg-subtle);
      border: 1px solid var(--cc-border);
      border-radius: 8px;
      margin-bottom: 5px;
    }
    .dc-sf-item:last-child { margin-bottom: 0; }
    .dc-sf-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--cc-user-text);
      flex-shrink: 0;
      margin-top: 4px;
    }
    .dc-sf-content { flex: 1; }
    .dc-sf-cite {
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: var(--cc-text-body);
      margin-bottom: 2px;
    }
    .dc-sf-ref {
      font-size: 11px;
      color: var(--cc-text-secondary);
      line-height: 1.4;
    }
    .dc-sf-ref--corrected { color: var(--cc-warning-text); font-weight: 500; }
    .dc-sf-ref--ok        { color: var(--cc-success-text); font-weight: 500; }
    .dc-sf-badge {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 99px;
      background: var(--cc-user-bg);
      color: var(--cc-user-text-strong);
      border: 1px solid var(--cc-user-border);
      white-space: nowrap;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* caution token fallbacks (in case not defined in :root) */
    :root {
      --cc-caution-bg: #fff7ed;
      --cc-caution-text: #c2410c;
      --cc-caution-border: #fed7aa;
      --cc-brand-on-brand: #ffffff;
      --cc-border-soft: #ececea;
    }

    /* ── P37: onboarding banner ─────────────────────────────────────── */
    .dc-onboarding-banner {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 14px;
      background: var(--cc-brand-tint);
      border: 1px solid var(--cc-brand-border);
      border-radius: 10px;
      margin-bottom: 14px;
      font-size: 12px;
      color: var(--cc-brand);
      line-height: 1.5;
    }
    .dc-onboarding-banner-text { flex: 1; }
    .dc-onboarding-banner-text strong { font-weight: 700; }
    .dc-onboarding-dismiss {
      background: none;
      border: none;
      color: var(--cc-text-disabled);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      padding: 0 2px;
      flex-shrink: 0;
      font-family: var(--font-body);
    }
    .dc-onboarding-dismiss:hover { color: var(--cc-text-secondary); }

    /* Shortcut tooltip trigger */
    .dc-shortcut-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--cc-bg-muted, #f7f6f1);
      border: 1px solid var(--cc-border-strong);
      font-size: 9px;
      font-weight: 700;
      color: var(--cc-text-secondary);
      cursor: pointer;
      flex-shrink: 0;
      font-family: var(--font-body);
      position: relative;
    }
    .dc-shortcut-trigger:hover .dc-shortcut-tooltip { display: block; }

    .dc-shortcut-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--cc-text-primary);
      color: var(--cc-brand-on-brand, #fff);
      border-radius: 8px;
      padding: 8px 11px;
      font-size: 11px;
      font-weight: 400;
      white-space: nowrap;
      z-index: 100;
      line-height: 1.6;
      pointer-events: none;
      box-shadow: var(--cc-shadow-dropdown);
    }
    .dc-shortcut-tooltip::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--cc-text-primary);
    }
    .dc-shortcut-key {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      border-radius: 3px;
      padding: 0 4px;
      font-family: ui-monospace, monospace;
      font-size: 10px;
      font-weight: 700;
    }

    /* Keyboard focus ring on issue cards */
    .dc-issue-card--selectable:focus-visible {
      outline: 2px solid var(--cc-brand);
      outline-offset: 2px;
    }
    .dc-issue-card--selectable:focus-visible.dc-issue-card--selected {
      outline-color: var(--cc-brand);
    }

    @media (max-width: 640px) {
      .report-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
    }

    /* Check Cite: issue cards (progressive disclosure) */
    .issue-card {
      padding: 1.5rem;
      background: #fafafa;
      border: none;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
      margin-bottom: 1.5rem;
    }

    .issue-card:last-child {
      margin-bottom: 0;
    }

    .issue-header {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--cc-text-body);
      margin-bottom: 1rem;
      line-height: 1.45;
    }

    .issue-citation-block {
      margin-bottom: 1rem;
    }

    .issue-citation-label {
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--cc-text-secondary);
      margin-bottom: 0.25rem;
      display: block;
    }

    .issue-citation-text {
      display: block;
      padding: 0.75rem 1rem;
      background: var(--cc-bg-card);
      border: none;
      border-radius: 8px;
      font-size: 0.875rem;
      font-family: var(--font-body);
      line-height: 1.5;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) inset;
      word-break: break-word;
    }

    code.issue-citation-text {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .issue-citation-correct {
      position: relative;
      padding: 0.75rem 3.5rem 0.75rem 1rem;
      background: var(--cc-success-bg);
      color: var(--cc-success-text);
    }

    .issue-citation-code {
      display: block;
      margin: 0;
      padding: 0;
      font: inherit;
      color: inherit;
      background: transparent;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .issue-card .copy-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
    }

    .issue-copy-btn-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .violations-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.875rem 1rem;
      margin-top: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--cc-text-body);
      background: var(--cc-brand-a04);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      text-align: left;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--cc-brand-a04);
      transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .violations-toggle:hover {
      background: var(--cc-brand-a08);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--cc-brand-a08);
      transform: translateY(-1px);
    }

    .violations-toggle:active {
      transform: translateY(0);
    }

    .violations-toggle-icon {
      font-size: 1rem;
      line-height: 1;
      margin-right: 0.5rem;
    }

    .violations-toggle-count {
      color: var(--cc-text-body);
      font-weight: 600;
    }

    .violations-toggle-arrow {
      font-size: 1rem;
      line-height: 1;
      font-weight: 600;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-block;
      flex-shrink: 0;
      margin-left: 0.75rem;
      transform: rotate(-90deg);
    }

    .violations-toggle.expanded .violations-toggle-arrow {
      transform: rotate(0deg);
    }

    .violations-detail {
      margin-top: 1rem;
      display: none;
    }

    .violations-detail.expanded {
      display: block;
    }

    .violation-item {
      padding: 0.75rem;
      background: var(--cc-warning-bg);
      border-left: 3px solid var(--cc-warning-border);
      margin-bottom: 0.75rem;
      border-radius: 6px;
    }

    .violation-item:last-child {
      margin-bottom: 0;
    }

    .violation-field {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--cc-warning-text-strong);
      margin-bottom: 0.25rem;
    }

    .violation-detail-row {
      font-size: 0.75rem;
      color: var(--cc-text-body);
      margin-top: 0.25rem;
    }

    .violation-detail-label {
      color: var(--cc-text-secondary);
    }

    .violation-detail-code {
      background: rgba(0, 0, 0, 0.05);
      padding: 0.125rem 0.25rem;
      border-radius: 6px;
      font-family: var(--font-body);
    }

    .bulk-issues-heading {
      font-size: 1.125rem;
      margin-bottom: 1rem;
      color: var(--cc-text-body);
      font-weight: 600;
    }

    .bulk-issues-list {
      margin-bottom: 2rem;
    }

    .issue-citation-error {
      background: var(--cc-warning-bg);
      color: var(--cc-warning-text-strong);
      border: 1px solid var(--cc-warning-border);
      box-shadow: none;
    }

    .advanced-toggle.collapsed .advanced-toggle-arrow {
      transform: rotate(-90deg);
    }

    /* Apple-style progress spinner */
    .progress-spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .spinner-circle {
      transform-origin: center;
    }

    @media (prefers-reduced-motion: no-preference) {
      .spinner-circle {
        animation: spinnerRotate 1.5s linear infinite;
      }
    }

    @keyframes spinnerRotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* Confetti animation for 100% correct */
    @keyframes confettiFall {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
      }
    }

    /* Hide spinner by default */
    .progress-spinner[hidden] {
      display: none;
    }

    /* Magic Cite: Case Information is hidden — Magic mode owns case-name input only; Manual mode owns parts-entry */
    body.mode-assisted .cc-case-info-block {
      display: none;
    }

    /* Magic Cite: Generate Citation button, divider, and shortcut hint are hidden — the Magic Cite mode button is the generate trigger */
    body.mode-assisted #generateBtn,
    body.mode-assisted #generateShortcutHint,
    body.mode-assisted .advanced-screen-footer {
      display: none;
    }

    /* ──────────────────────────────────────────────────────────────
       Mode + Source Type controls belong to the INPUT screen only.
       One consolidated rule hides them on every other screen state,
       replacing the previous per-screen patchwork. Covers:
         - Source Type label (#ccSourceTypeLabel)
         - Source Type picker (#ccSourceTypePicker)
         - Statute / Regulation / Legislative / secondary "Source Type"
           sub-labels — all .cc-section-label inside #magicManualContainer
         - Mode label (.cc-mode-section-heading)
         - Mode cards (.cc-mode-cards)
         - Webpage Magic placard (.cc-mode-webpage-placard-wrap)
       ────────────────────────────────────────────────────────────── */
    body:not(.screen-input) #ccSourceTypeLabel,
    body:not(.screen-input) #ccSourceTypePicker,
    body:not(.screen-input) #magicManualContainer .cc-section-label,
    body:not(.screen-input) .cc-mode-section-heading,
    body:not(.screen-input) .cc-mode-cards,
    body:not(.screen-input) .cc-mode-webpage-placard-wrap {
      display: none !important;
    }

    /* ──────────────────────────────────────────────────────────────
       All-mode (True Blue) — mode toggle is meaningless because All
       is universally Magic. Hide the mode cards and heading.
       Replaces inline display:none that setCiteType used to apply,
       removed in Day 34 Clean State Step 2 (P12).
       ────────────────────────────────────────────────────────────── */
    body.cite-type-all .cc-mode-section-heading,
    body.cite-type-all .cc-mode-cards {
      display: none !important;
    }

    /* ──────────────────────────────────────────────────────────────
       Consolidated screen-wrapper visibility.
       Each screen wrapper is hidden on every screen except its own.
       Replaces ~14 wrapper entries × 15 per-screen hide lists.
       ────────────────────────────────────────────────────────────── */
    body:not(.screen-loading)             #loadingScreen,
    body:not(.screen-disambig):not(.screen-zero-suggestions) #candidatesPanel,
    body:not(.screen-api-error)           #apiErrorScreen,
    body:not(.screen-rate-limit)          #rateLimitScreen,
    body:not(.screen-zero-match)          #zeroMatchScreen,
    body:not(.screen-webpage-loading)     #webpageLoadingScreen,
    body:not(.screen-webpage-confirm)     #webpageConfirmScreen,
    body:not(.screen-webpage-fetch-error) #webpageFetchErrorScreen,
    body:not(.screen-statute-loading)     #statuteLoadingScreen,
    body:not(.screen-statute-confirm)     #statuteConfirmScreen,
    body:not(.screen-statute-fetch-error) #statuteFetchErrorScreen,
    body:not(.screen-result)              #citationReveal,
    body:not(.screen-advanced)            #advancedScreen,
    body:not(.screen-shortcite)           #shortciteScreen {
      display: none !important;
    }

    /* ──────────────────────────────────────────────────────────────
       Input-screen form chrome — hidden on ALL 15 non-input screens.
       Verified: no mode-* or cite-type-* SHOW rules for any of these,
       so this only ever agrees with existing rules.

       [Day 34 Clean State Step 5] Added #reporterPref and .case-info-toggle
       to fix the leak where these elements appeared on loading and confirm
       screens (the Reporter Preference card and Advanced Mode toggle row).
       ────────────────────────────────────────────────────────────── */
    body:not(.screen-input) #caseNameRow,
    body:not(.screen-input) #tryChips,
    body:not(.screen-input) #ccFiltersCollapsible,
    body:not(.screen-input) #generateBtn,
    body:not(.screen-input) #generateShortcutHint,
    body:not(.screen-input) #modeButtonsRow,
    body:not(.screen-input) .cc-generate-row,
    body:not(.screen-input) #magicManualContainer > .cc-toggle-label,
    body:not(.screen-input) #magicManualContainer > .divider,
    body:not(.screen-input) .cc-additional-options-section,
    body:not(.screen-input) .case-info-toggle {
      display: none !important;
    }

    /* Start Over button — appears on the result and advanced screens
       only (JS un-hides it there). Carries a `hidden` attribute by
       default; this is the CSS belt to that JS suspenders.
       mode-history / mode-bulk also hide it — those agree with this. */
    body:not(.screen-input):not(.screen-result):not(.screen-advanced) #startOverRow {
      display: none !important;
    }

    /* Show the Continue button on the advanced options screen.
       Needs !important to beat the base rule's display: none !important. */
    body.screen-advanced .advanced-screen-footer {
      display: block !important;
    }

    /* Magic Cite: hide divider above hidden Generate (mode row moved under case name; no longer adjacent to .divider). */
    body.mode-assisted #magicManualContainer > .divider {
      display: none;
    }

    body.mode-assisted #magicManualContainer,
    body.mode-manual #magicManualContainer {
      display: block;
    }
    body.mode-assisted #bulkCheckContainer,
    body.mode-manual #bulkCheckContainer {
      display: none;
    }
    body.mode-bulk #magicManualContainer {
      display: none;
    }
    body.mode-bulk #bulkCheckContainer {
      display: flex;
    }

    body.mode-bulk #ccSourceTypePicker {
      display: none !important;
    }

    body.mode-bulk .tab-strip,
    body.mode-bulk .cc-source-type-picker,
    body.mode-bulk #ccSourceTypePicker,
    body.mode-bulk .progress-row,
    body.mode-bulk .error-banner {
      display: none !important;
    }

    body.mode-bulk #startOverRow {
      display: none !important;
    }

    body.mode-bulk .card {
      padding: 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }
    body.sidebar-mode-check main#mainContent {
      padding: 0;
      overflow: hidden;
      height: 100%;
    }
    body.sidebar-mode-check #bulkCheckContainer {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    body.sidebar-mode-check .cc-check-card {
      height: calc(100% - 40px);
      margin: 20px auto;
    }

    body.mode-history .card {
      padding: 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    /* ============================================================
       SCREEN ROUTER — input UI hidden on result screens
       ============================================================ */
    body.screen-result .tab-strip,
    body.screen-result #caseNameRow,
    body.screen-result #tryChips,
    body.screen-result #statuteTypeBlock,
    body.screen-result #secondaryTypeBlock,
    body.screen-result #legislativeTypeBlock,
    body.screen-result #statuteCodeEntrySection,
    body.screen-result #magicManualContainer > .cc-toggle-label,
    body.screen-result .cc-generate-row,
    body.screen-result #ccGenerateBtn,
    body.screen-result #modeButtonsRow,
    body.screen-result #magicManualContainer > .divider,
    body.screen-result #generateBtn,
    body.screen-result #generateShortcutHint,
    body.screen-result #ccFiltersCollapsible,
    body.screen-result #ccAdvancedCollapsible,
    body.screen-result #additionalOptionsSection,
    body.screen-result #additionalOptionsSectionWebpage,
    body.screen-result #webpageLoadingScreen,
    body.screen-result #webpageConfirmScreen,
    body.screen-result #webpageFetchErrorScreen,
    body.screen-result #statuteLoadingScreen,
    body.screen-result #statuteConfirmScreen,
    body.screen-result #statuteFetchErrorScreen,
    body.screen-result .const-magic-row,
    body.screen-result #constMagicChips {
      display: none !important;
    }
    body.screen-result #magicManualContainer {
      padding-top: 0;
      flex: 0 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 0;
    }
    body.screen-result #caseNameRow,
    body.screen-result #actionRowSlot {
      margin: 0;
    }
    body.screen-result #citationReveal {
      margin-top: 0.75rem;
    }

    body.screen-advanced #advancedBackBtn,
    body.screen-advanced #caseNameRow,
    body.screen-advanced #tryChips,
    body.screen-advanced #ccFiltersCollapsible,
    body.screen-advanced #ccAdvancedCollapsible,
    body.screen-advanced .cc-generate-row,
    body.screen-advanced #additionalOptionsSection,
    body.screen-advanced #additionalOptionsSectionWebpage,
    body.screen-advanced .cc-case-info-block,
    body.screen-advanced #caseInfoSection,
    body.screen-advanced #magicManualContainer > .cc-toggle-label,
    body.screen-advanced #modeButtonsRow,
    body.screen-advanced #magicManualContainer > .divider,
    body.screen-advanced #generateBtn,
    body.screen-advanced #generateShortcutHint,
    body.screen-advanced #citationReveal,
    body.screen-advanced #webpageLoadingScreen,
    body.screen-advanced #webpageConfirmScreen,
    body.screen-advanced #webpageFetchErrorScreen,
    body.screen-advanced #statuteLoadingScreen,
    body.screen-advanced #statuteConfirmScreen,
    body.screen-advanced #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-advanced #magicManualContainer {
      padding-top: 0;
    }
    body.screen-advanced #caseNameRow,
    body.screen-advanced #actionRowSlot {
      margin: 0;
    }

    .state-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
      gap: 1.25rem;
      text-align: center;
      min-height: 320px;
    }
    .state-icon {
      width: 40px;
      height: 40px;
    }
    .state-title {
      font-size: 15px;
      font-weight: 500;
      color: var(--cc-text-body);
      margin-bottom: 8px;
      font-family: var(--font-body);
    }
    .state-body {
      font-size: 13px;
      color: var(--cc-text-secondary);
      max-width: 360px;
      font-family: var(--font-body);
    }
    .state-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      max-width: 240px;
    }
    .state-text-link {
      background: transparent;
      border: none;
      padding: 8px;
      font-size: 13px;
      color: var(--cc-brand);
      cursor: pointer;
      font-family: var(--font-body);
    }
    .state-text-link:hover {
      color: var(--cc-brand-hover);
    }
    .loading-progress-track {
      width: 200px;
      height: 3px;
      background: var(--cc-loading-track);
      border-radius: 2px;
      overflow: hidden;
      position: relative;
    }
    .loading-progress-bar {
      width: 60%;
      height: 100%;
      background: var(--cc-brand);
      border-radius: 2px;
      animation: ccLoadingBar 1.6s ease-in-out infinite;
    }
    .loading-dots {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }
    .loading-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--cc-brand);
      display: inline-block;
      animation: ccLoadingDotPulse 1.4s ease-in-out infinite;
    }
    .loading-dot-a { animation-delay: 0s; }
    .loading-dot-b { animation-delay: 0.2s; }
    .loading-dot-c { animation-delay: 0.4s; }
    @keyframes ccLoadingDotPulse {
      0%, 80%, 100% { opacity: 0.25; }
      40% { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .loading-dot { animation: none !important; opacity: 0.6 !important; }
    }

    body.screen-shortcite #caseNameRow,
    body.screen-shortcite #tryChips,
    body.screen-shortcite #ccFiltersCollapsible,
    body.screen-shortcite #ccAdvancedCollapsible,
    body.screen-shortcite .cc-generate-row,
    body.screen-shortcite .cc-case-info-block,
    body.screen-shortcite #caseInfoSection,
    body.screen-shortcite #magicManualContainer > .cc-toggle-label,
    body.screen-shortcite #modeButtonsRow,
    body.screen-shortcite #magicManualContainer > .divider,
    body.screen-shortcite #generateBtn,
    body.screen-shortcite #generateShortcutHint,
    body.screen-shortcite #citationReveal,
    body.screen-shortcite #advancedScreen,
    body.screen-shortcite #startOverRow,
    body.screen-shortcite #webpageLoadingScreen,
    body.screen-shortcite #webpageConfirmScreen,
    body.screen-shortcite #webpageFetchErrorScreen,
    body.screen-shortcite #statuteLoadingScreen,
    body.screen-shortcite #statuteConfirmScreen,
    body.screen-shortcite #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-shortcite #magicManualContainer {
      padding-top: 0;
    }
    body.screen-shortcite #caseNameRow,
    body.screen-shortcite #actionRowSlot {
      margin: 0;
    }

    body.screen-api-error #caseNameRow,
    body.screen-api-error #tryChips,
    body.screen-api-error #ccFiltersCollapsible,
    body.screen-api-error #ccAdvancedCollapsible,
    body.screen-api-error .cc-generate-row,
    body.screen-api-error .cc-case-info-block,
    body.screen-api-error #caseInfoSection,
    body.screen-api-error #magicManualContainer > .cc-toggle-label,
    body.screen-api-error #modeButtonsRow,
    body.screen-api-error #magicManualContainer > .divider,
    body.screen-api-error #generateBtn,
    body.screen-api-error #generateShortcutHint,
    body.screen-api-error #citationReveal,
    body.screen-api-error #advancedScreen,
    body.screen-api-error #shortciteScreen,
    body.screen-api-error #startOverRow,
    body.screen-api-error #webpageLoadingScreen,
    body.screen-api-error #webpageConfirmScreen,
    body.screen-api-error #webpageFetchErrorScreen,
    body.screen-api-error #statuteLoadingScreen,
    body.screen-api-error #statuteConfirmScreen,
    body.screen-api-error #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-api-error #magicManualContainer {
      padding-top: 0;
    }
    body.screen-api-error #caseNameRow,
    body.screen-api-error #actionRowSlot {
      margin: 0;
    }

    body.screen-rate-limit #caseNameRow,
    body.screen-rate-limit #tryChips,
    body.screen-rate-limit #ccFiltersCollapsible,
    body.screen-rate-limit #ccAdvancedCollapsible,
    body.screen-rate-limit .cc-generate-row,
    body.screen-rate-limit .cc-case-info-block,
    body.screen-rate-limit #caseInfoSection,
    body.screen-rate-limit #magicManualContainer > .cc-toggle-label,
    body.screen-rate-limit #modeButtonsRow,
    body.screen-rate-limit #magicManualContainer > .divider,
    body.screen-rate-limit #generateBtn,
    body.screen-rate-limit #generateShortcutHint,
    body.screen-rate-limit #citationReveal,
    body.screen-rate-limit #advancedScreen,
    body.screen-rate-limit #shortciteScreen,
    body.screen-rate-limit #startOverRow,
    body.screen-rate-limit #webpageLoadingScreen,
    body.screen-rate-limit #webpageConfirmScreen,
    body.screen-rate-limit #webpageFetchErrorScreen,
    body.screen-rate-limit #statuteLoadingScreen,
    body.screen-rate-limit #statuteConfirmScreen,
    body.screen-rate-limit #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-rate-limit #magicManualContainer {
      padding-top: 0;
    }
    body.screen-rate-limit #caseNameRow,
    body.screen-rate-limit #actionRowSlot {
      margin: 0;
    }

    body.screen-zero-match #caseNameRow,
    body.screen-zero-match #tryChips,
    body.screen-zero-match #ccFiltersCollapsible,
    body.screen-zero-match #ccAdvancedCollapsible,
    body.screen-zero-match .cc-generate-row,
    body.screen-zero-match .cc-case-info-block,
    body.screen-zero-match #caseInfoSection,
    body.screen-zero-match #magicManualContainer > .cc-toggle-label,
    body.screen-zero-match #modeButtonsRow,
    body.screen-zero-match #magicManualContainer > .divider,
    body.screen-zero-match #generateBtn,
    body.screen-zero-match #generateShortcutHint,
    body.screen-zero-match #citationReveal,
    body.screen-zero-match #advancedScreen,
    body.screen-zero-match #shortciteScreen,
    body.screen-zero-match #startOverRow,
    body.screen-zero-match #webpageLoadingScreen,
    body.screen-zero-match #webpageConfirmScreen,
    body.screen-zero-match #webpageFetchErrorScreen,
    body.screen-zero-match #statuteLoadingScreen,
    body.screen-zero-match #statuteConfirmScreen,
    body.screen-zero-match #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-zero-match #magicManualContainer {
      padding-top: 0;
    }
    body.screen-zero-match #caseNameRow,
    body.screen-zero-match #actionRowSlot {
      margin: 0;
    }

    body.screen-loading #caseNameRow,
    body.screen-loading #tryChips,
    body.screen-loading #ccFiltersCollapsible,
    body.screen-loading #ccAdvancedCollapsible,
    body.screen-loading .cc-generate-row,
    body.screen-loading .cc-case-info-block,
    body.screen-loading #caseInfoSection,
    body.screen-loading #magicManualContainer > .cc-toggle-label,
    body.screen-loading .cc-input-tabs,
    body.screen-loading #modeButtonsRow,
    body.screen-loading #magicManualContainer > .divider,
    body.screen-loading #generateBtn,
    body.screen-loading #generateShortcutHint,
    body.screen-loading #citationReveal,
    body.screen-loading #advancedScreen,
    body.screen-loading #shortciteScreen,
    body.screen-loading #startOverRow,
    body.screen-loading #webpageLoadingScreen,
    body.screen-loading #webpageConfirmScreen,
    body.screen-loading #webpageFetchErrorScreen,
    body.screen-loading #statuteLoadingScreen,
    body.screen-loading #statuteConfirmScreen,
    body.screen-loading #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-loading #magicManualContainer,
    body.screen-webpage-loading #magicManualContainer,
    body.screen-statute-loading #magicManualContainer {
      /* Hide the entire input/form container on loading screens so no form
         chrome (Magic landing logo + Generate button, statute sub-forms,
         advanced panel) leaks above the spinner. #loadingScreen,
         #statuteLoadingScreen, #webpageLoadingScreen and #progress-row are
         all siblings of this container (it spans lines 675-3818), so this is safe. */
      display: none !important;
    }
    body.screen-loading #caseNameRow,
    body.screen-loading #actionRowSlot {
      margin: 0;
    }

    body.screen-disambig #caseNameRow,
    body.screen-disambig #tryChips,
    body.screen-disambig .tab-strip,
    body.screen-disambig #progress-row,
    body.screen-disambig #ccFiltersCollapsible,
    body.screen-disambig #ccAdvancedCollapsible,
    body.screen-disambig .cc-generate-row,
    body.screen-disambig .cc-case-info-block,
    body.screen-disambig #caseInfoSection,
    body.screen-disambig #magicManualContainer > .cc-toggle-label,
    body.screen-disambig #modeButtonsRow,
    body.screen-disambig #actionRowSlot,
    body.screen-disambig #magicManualContainer > .divider,
    body.screen-disambig #generateBtn,
    body.screen-disambig #generateShortcutHint,
    body.screen-disambig #citationReveal,
    body.screen-disambig #advancedScreen,
    body.screen-disambig #shortciteScreen,
    body.screen-disambig #apiErrorScreen,
    body.screen-disambig #rateLimitScreen,
    body.screen-disambig #zeroMatchScreen,
    body.screen-disambig #loadingScreen,
    body.screen-disambig #startOverRow,
    body.screen-disambig #webpageLoadingScreen,
    body.screen-disambig #webpageConfirmScreen,
    body.screen-disambig #webpageFetchErrorScreen,
    body.screen-disambig #statuteLoadingScreen,
    body.screen-disambig #statuteConfirmScreen,
    body.screen-disambig #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-disambig #magicManualContainer {
      padding-top: 0;
      flex: 0 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 0;
    }
    body.screen-disambig #candidatesPanel,
    body.screen-zero-suggestions #candidatesPanel {
      margin-top: 1rem;
    }
    body.screen-disambig #caseNameRow,
    body.screen-disambig #actionRowSlot {
      margin: 0;
    }
    body.screen-disambig .cc-card-header {
      margin-bottom: 0;
      padding-bottom: 0.5rem;
    }

    .disambig-intro {
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--cc-text-secondary);
      line-height: 1.5;
      margin: 0 0 1.5rem;
      text-transform: none;
    }
    body.screen-zero-suggestions .disambig-intro {
      display: none !important;
    }

    body.screen-zero-suggestions #caseNameRow,
    body.screen-zero-suggestions #tryChips,
    body.screen-zero-suggestions #ccFiltersCollapsible,
    body.screen-zero-suggestions #ccAdvancedCollapsible,
    body.screen-zero-suggestions .cc-generate-row,
    body.screen-zero-suggestions .cc-case-info-block,
    body.screen-zero-suggestions #caseInfoSection,
    body.screen-zero-suggestions #magicManualContainer > .cc-toggle-label,
    body.screen-zero-suggestions #modeButtonsRow,
    body.screen-zero-suggestions #magicManualContainer > .divider,
    body.screen-zero-suggestions #generateBtn,
    body.screen-zero-suggestions #generateShortcutHint,
    body.screen-zero-suggestions #citationReveal,
    body.screen-zero-suggestions #advancedScreen,
    body.screen-zero-suggestions #shortciteScreen,
    body.screen-zero-suggestions #apiErrorScreen,
    body.screen-zero-suggestions #rateLimitScreen,
    body.screen-zero-suggestions #zeroMatchScreen,
    body.screen-zero-suggestions #loadingScreen,
    body.screen-zero-suggestions #startOverRow,
    body.screen-zero-suggestions #webpageLoadingScreen,
    body.screen-zero-suggestions #webpageConfirmScreen,
    body.screen-zero-suggestions #webpageFetchErrorScreen,
    body.screen-zero-suggestions #statuteLoadingScreen,
    body.screen-zero-suggestions #statuteConfirmScreen,
    body.screen-zero-suggestions #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-zero-suggestions #magicManualContainer {
      padding-top: 0;
    }
    body.screen-zero-suggestions #caseNameRow,
    body.screen-zero-suggestions #actionRowSlot {
      margin: 0;
    }

    body.screen-webpage-loading #caseNameRow,
    body.screen-webpage-loading #tryChips,
    body.screen-webpage-loading #ccFiltersCollapsible,
    body.screen-webpage-loading #ccAdvancedCollapsible,
    body.screen-webpage-loading .cc-generate-row,
    body.screen-webpage-loading #additionalOptionsSectionWebpage,
    body.screen-webpage-loading .cc-case-info-block,
    body.screen-webpage-loading #caseInfoSection,
    body.screen-webpage-loading #magicManualContainer > .cc-toggle-label,
    body.screen-webpage-loading #modeButtonsRow,
    body.screen-webpage-loading #magicManualContainer > .divider,
    body.screen-webpage-loading #generateBtn,
    body.screen-webpage-loading #generateShortcutHint,
    body.screen-webpage-loading #citationReveal,
    body.screen-webpage-loading #advancedScreen,
    body.screen-webpage-loading #shortciteScreen,
    body.screen-webpage-loading #startOverRow,
    body.screen-webpage-loading #loadingScreen,
    body.screen-webpage-loading #webpageConfirmScreen,
    body.screen-webpage-loading #webpageFetchErrorScreen,
    body.screen-webpage-loading #statuteLoadingScreen,
    body.screen-webpage-loading #statuteConfirmScreen,
    body.screen-webpage-loading #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-webpage-loading #magicManualContainer {
      display: none !important;
    }
    body.screen-webpage-loading #caseNameRow,
    body.screen-webpage-loading #actionRowSlot {
      margin: 0;
    }

    body.screen-webpage-confirm #caseNameRow,
    body.screen-webpage-confirm #tryChips,
    body.screen-webpage-confirm #ccFiltersCollapsible,
    body.screen-webpage-confirm #ccAdvancedCollapsible,
    body.screen-webpage-confirm .cc-generate-row,
    body.screen-webpage-confirm #additionalOptionsSectionWebpage,
    body.screen-webpage-confirm .cc-case-info-block,
    body.screen-webpage-confirm #caseInfoSection,
    body.screen-webpage-confirm #magicManualContainer > .cc-toggle-label,
    body.screen-webpage-confirm #modeButtonsRow,
    body.screen-webpage-confirm #magicManualContainer > .divider,
    body.screen-webpage-confirm #generateBtn,
    body.screen-webpage-confirm #generateShortcutHint,
    body.screen-webpage-confirm #citationReveal,
    body.screen-webpage-confirm #advancedScreen,
    body.screen-webpage-confirm #shortciteScreen,
    body.screen-webpage-confirm #startOverRow,
    body.screen-webpage-confirm #loadingScreen,
    body.screen-webpage-confirm #webpageLoadingScreen,
    body.screen-webpage-confirm #webpageFetchErrorScreen,
    body.screen-webpage-confirm #statuteLoadingScreen,
    body.screen-webpage-confirm #statuteConfirmScreen,
    body.screen-webpage-confirm #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-webpage-confirm #magicManualContainer {
      display: none !important;
    }
    body.screen-webpage-confirm #webpageConfirmScreen {
      margin-top: 0;
      padding-top: 0;
    }
    body.screen-webpage-confirm #caseNameRow,
    body.screen-webpage-confirm #actionRowSlot {
      margin: 0;
    }

    body.screen-webpage-fetch-error #caseNameRow,
    body.screen-webpage-fetch-error #tryChips,
    body.screen-webpage-fetch-error #ccFiltersCollapsible,
    body.screen-webpage-fetch-error #ccAdvancedCollapsible,
    body.screen-webpage-fetch-error .cc-generate-row,
    body.screen-webpage-fetch-error #additionalOptionsSectionWebpage,
    body.screen-webpage-fetch-error .cc-case-info-block,
    body.screen-webpage-fetch-error #caseInfoSection,
    body.screen-webpage-fetch-error #magicManualContainer > .cc-toggle-label,
    body.screen-webpage-fetch-error #modeButtonsRow,
    body.screen-webpage-fetch-error #magicManualContainer > .divider,
    body.screen-webpage-fetch-error #generateBtn,
    body.screen-webpage-fetch-error #generateShortcutHint,
    body.screen-webpage-fetch-error #citationReveal,
    body.screen-webpage-fetch-error #advancedScreen,
    body.screen-webpage-fetch-error #shortciteScreen,
    body.screen-webpage-fetch-error #startOverRow,
    body.screen-webpage-fetch-error #loadingScreen,
    body.screen-webpage-fetch-error #webpageLoadingScreen,
    body.screen-webpage-fetch-error #webpageConfirmScreen,
    body.screen-webpage-fetch-error #statuteLoadingScreen,
    body.screen-webpage-fetch-error #statuteConfirmScreen,
    body.screen-webpage-fetch-error #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-webpage-fetch-error #magicManualContainer {
      padding-top: 0;
    }
    body.screen-webpage-fetch-error #caseNameRow,
    body.screen-webpage-fetch-error #actionRowSlot {
      margin: 0;
    }

    body.screen-statute-loading #caseNameRow,
    body.screen-statute-loading #tryChips,
    body.screen-statute-loading #ccFiltersCollapsible,
    body.screen-statute-loading #ccAdvancedCollapsible,
    body.screen-statute-loading .cc-generate-row,
    body.screen-statute-loading .cc-case-info-block,
    body.screen-statute-loading #caseInfoSection,
    body.screen-statute-loading #magicManualContainer > .cc-toggle-label,
    body.screen-statute-loading #modeButtonsRow,
    body.screen-statute-loading #magicManualContainer > .divider,
    body.screen-statute-loading #generateBtn,
    body.screen-statute-loading #generateShortcutHint,
    body.screen-statute-loading #citationReveal,
    body.screen-statute-loading #advancedScreen,
    body.screen-statute-loading #shortciteScreen,
    body.screen-statute-loading #startOverRow,
    body.screen-statute-loading #loadingScreen,
    body.screen-statute-loading #webpageLoadingScreen,
    body.screen-statute-loading #webpageConfirmScreen,
    body.screen-statute-loading #webpageFetchErrorScreen,
    body.screen-statute-loading #statuteConfirmScreen,
    body.screen-statute-loading #additionalOptionsSectionStatute,
    body.screen-statute-loading .cc-advanced-options-heading.cc-statute-adv-heading,
    body.screen-statute-loading #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-statute-loading #magicManualContainer {
      display: block !important;
    }
    body.screen-statute-loading #caseNameRow,
    body.screen-statute-loading #actionRowSlot {
      display: none !important;
    }

    body.screen-statute-confirm #caseNameRow,
    body.screen-statute-confirm #tryChips,
    body.screen-statute-confirm #ccFiltersCollapsible,
    body.screen-statute-confirm #ccAdvancedCollapsible,
    body.screen-statute-confirm .cc-generate-row,
    body.screen-statute-confirm .cc-case-info-block,
    body.screen-statute-confirm #caseInfoSection,
    body.screen-statute-confirm #magicManualContainer > .cc-toggle-label,
    body.screen-statute-confirm #modeButtonsRow,
    body.screen-statute-confirm #magicManualContainer > .divider,
    body.screen-statute-confirm #generateBtn,
    body.screen-statute-confirm #generateShortcutHint,
    body.screen-statute-confirm #citationReveal,
    body.screen-statute-confirm #advancedScreen,
    body.screen-statute-confirm #shortciteScreen,
    body.screen-statute-confirm #startOverRow,
    body.screen-statute-confirm #loadingScreen,
    body.screen-statute-confirm #webpageLoadingScreen,
    body.screen-statute-confirm #webpageConfirmScreen,
    body.screen-statute-confirm #webpageFetchErrorScreen,
    body.screen-statute-confirm #statuteLoadingScreen,
    body.screen-statute-confirm #additionalOptionsSectionStatute,
    body.screen-statute-confirm .cc-advanced-options-heading.cc-statute-adv-heading,
    body.screen-statute-confirm #statuteFetchErrorScreen {
      display: none !important;
    }
    body.screen-statute-confirm #magicManualContainer {
      display: block !important;
    }
    body.screen-statute-confirm #caseNameRow,
    body.screen-statute-confirm #actionRowSlot {
      display: none !important;
    }

    body.screen-statute-fetch-error #caseNameRow,
    body.screen-statute-fetch-error #tryChips,
    body.screen-statute-fetch-error #ccFiltersCollapsible,
    body.screen-statute-fetch-error #ccAdvancedCollapsible,
    body.screen-statute-fetch-error .cc-generate-row,
    body.screen-statute-fetch-error .cc-case-info-block,
    body.screen-statute-fetch-error #caseInfoSection,
    body.screen-statute-fetch-error #magicManualContainer > .cc-toggle-label,
    body.screen-statute-fetch-error #modeButtonsRow,
    body.screen-statute-fetch-error #magicManualContainer > .divider,
    body.screen-statute-fetch-error #generateBtn,
    body.screen-statute-fetch-error #generateShortcutHint,
    body.screen-statute-fetch-error #citationReveal,
    body.screen-statute-fetch-error #advancedScreen,
    body.screen-statute-fetch-error #shortciteScreen,
    body.screen-statute-fetch-error #startOverRow,
    body.screen-statute-fetch-error #loadingScreen,
    body.screen-statute-fetch-error #webpageLoadingScreen,
    body.screen-statute-fetch-error #webpageConfirmScreen,
    body.screen-statute-fetch-error #webpageFetchErrorScreen,
    body.screen-statute-fetch-error #statuteLoadingScreen,
    body.screen-statute-fetch-error #additionalOptionsSectionStatute,
    body.screen-statute-fetch-error .cc-advanced-options-heading.cc-statute-adv-heading,
    body.screen-statute-fetch-error #statuteConfirmScreen {
      display: none !important;
    }
    body.screen-statute-fetch-error #magicManualContainer {
      display: block !important;
    }
    body.screen-statute-fetch-error #caseNameRow,
    body.screen-statute-fetch-error #actionRowSlot {
      display: none !important;
    }

    /* Prompt 9: initial-screen statute controls stay hidden on loading / confirm / fetch-error */
    body.screen-statute-loading #statuteTypeBlock,
    body.screen-statute-loading #statuteCodeEntrySection,
    body.screen-statute-confirm #statuteTypeBlock,
    body.screen-statute-confirm #statuteCodeEntrySection,
    body.screen-statute-fetch-error #statuteTypeBlock,
    body.screen-statute-fetch-error #statuteCodeEntrySection {
      display: none !important;
    }

    body.screen-input #apiErrorScreen,
    body.screen-result #apiErrorScreen,
    body.screen-advanced #apiErrorScreen,
    body.screen-shortcite #apiErrorScreen,
    body.screen-rate-limit #apiErrorScreen,
    body.screen-zero-match #apiErrorScreen,
    body.screen-loading #apiErrorScreen,
    body.screen-disambig #apiErrorScreen,
    body.screen-zero-suggestions #apiErrorScreen,
    body.screen-webpage-loading #apiErrorScreen,
    body.screen-webpage-confirm #apiErrorScreen,
    body.screen-webpage-fetch-error #apiErrorScreen,
    body.screen-statute-loading #apiErrorScreen,
    body.screen-statute-confirm #apiErrorScreen,
    body.screen-statute-fetch-error #apiErrorScreen,
    body.screen-input #rateLimitScreen,
    body.screen-result #rateLimitScreen,
    body.screen-advanced #rateLimitScreen,
    body.screen-shortcite #rateLimitScreen,
    body.screen-api-error #rateLimitScreen,
    body.screen-zero-match #rateLimitScreen,
    body.screen-loading #rateLimitScreen,
    body.screen-disambig #rateLimitScreen,
    body.screen-zero-suggestions #rateLimitScreen,
    body.screen-webpage-loading #rateLimitScreen,
    body.screen-webpage-confirm #rateLimitScreen,
    body.screen-webpage-fetch-error #rateLimitScreen,
    body.screen-statute-loading #rateLimitScreen,
    body.screen-statute-confirm #rateLimitScreen,
    body.screen-statute-fetch-error #rateLimitScreen,
    body.screen-input #zeroMatchScreen,
    body.screen-result #zeroMatchScreen,
    body.screen-advanced #zeroMatchScreen,
    body.screen-shortcite #zeroMatchScreen,
    body.screen-api-error #zeroMatchScreen,
    body.screen-rate-limit #zeroMatchScreen,
    body.screen-loading #zeroMatchScreen,
    body.screen-disambig #zeroMatchScreen,
    body.screen-zero-suggestions #zeroMatchScreen,
    body.screen-webpage-loading #zeroMatchScreen,
    body.screen-webpage-confirm #zeroMatchScreen,
    body.screen-webpage-fetch-error #zeroMatchScreen,
    body.screen-statute-loading #zeroMatchScreen,
    body.screen-statute-confirm #zeroMatchScreen,
    body.screen-statute-fetch-error #zeroMatchScreen,
    body.screen-input #loadingScreen,
    body.screen-result #loadingScreen,
    body.screen-advanced #loadingScreen,
    body.screen-shortcite #loadingScreen,
    body.screen-api-error #loadingScreen,
    body.screen-rate-limit #loadingScreen,
    body.screen-zero-match #loadingScreen,
    body.screen-disambig #loadingScreen,
    body.screen-zero-suggestions #loadingScreen,
    body.screen-webpage-loading #loadingScreen,
    body.screen-webpage-confirm #loadingScreen,
    body.screen-webpage-fetch-error #loadingScreen,
    body.screen-statute-loading #loadingScreen,
    body.screen-statute-confirm #loadingScreen,
    body.screen-statute-fetch-error #loadingScreen,
    body.screen-input #webpageLoadingScreen,
    body.screen-result #webpageLoadingScreen,
    body.screen-advanced #webpageLoadingScreen,
    body.screen-shortcite #webpageLoadingScreen,
    body.screen-api-error #webpageLoadingScreen,
    body.screen-rate-limit #webpageLoadingScreen,
    body.screen-zero-match #webpageLoadingScreen,
    body.screen-loading #webpageLoadingScreen,
    body.screen-disambig #webpageLoadingScreen,
    body.screen-zero-suggestions #webpageLoadingScreen,
    body.screen-webpage-confirm #webpageLoadingScreen,
    body.screen-webpage-fetch-error #webpageLoadingScreen,
    body.screen-statute-loading #webpageLoadingScreen,
    body.screen-statute-confirm #webpageLoadingScreen,
    body.screen-statute-fetch-error #webpageLoadingScreen,
    body.screen-input #webpageConfirmScreen,
    body.screen-result #webpageConfirmScreen,
    body.screen-advanced #webpageConfirmScreen,
    body.screen-shortcite #webpageConfirmScreen,
    body.screen-api-error #webpageConfirmScreen,
    body.screen-rate-limit #webpageConfirmScreen,
    body.screen-zero-match #webpageConfirmScreen,
    body.screen-loading #webpageConfirmScreen,
    body.screen-disambig #webpageConfirmScreen,
    body.screen-zero-suggestions #webpageConfirmScreen,
    body.screen-webpage-loading #webpageConfirmScreen,
    body.screen-webpage-fetch-error #webpageConfirmScreen,
    body.screen-statute-loading #webpageConfirmScreen,
    body.screen-statute-confirm #webpageConfirmScreen,
    body.screen-statute-fetch-error #webpageConfirmScreen,
    body.screen-input #webpageFetchErrorScreen,
    body.screen-result #webpageFetchErrorScreen,
    body.screen-advanced #webpageFetchErrorScreen,
    body.screen-shortcite #webpageFetchErrorScreen,
    body.screen-api-error #webpageFetchErrorScreen,
    body.screen-rate-limit #webpageFetchErrorScreen,
    body.screen-zero-match #webpageFetchErrorScreen,
    body.screen-loading #webpageFetchErrorScreen,
    body.screen-disambig #webpageFetchErrorScreen,
    body.screen-zero-suggestions #webpageFetchErrorScreen,
    body.screen-webpage-loading #webpageFetchErrorScreen,
    body.screen-webpage-confirm #webpageFetchErrorScreen,
    body.screen-statute-loading #webpageFetchErrorScreen,
    body.screen-statute-confirm #webpageFetchErrorScreen,
    body.screen-statute-fetch-error #webpageFetchErrorScreen,
    body.screen-input #statuteLoadingScreen,
    body.screen-result #statuteLoadingScreen,
    body.screen-advanced #statuteLoadingScreen,
    body.screen-shortcite #statuteLoadingScreen,
    body.screen-api-error #statuteLoadingScreen,
    body.screen-rate-limit #statuteLoadingScreen,
    body.screen-zero-match #statuteLoadingScreen,
    body.screen-loading #statuteLoadingScreen,
    body.screen-disambig #statuteLoadingScreen,
    body.screen-zero-suggestions #statuteLoadingScreen,
    body.screen-webpage-loading #statuteLoadingScreen,
    body.screen-webpage-confirm #statuteLoadingScreen,
    body.screen-webpage-fetch-error #statuteLoadingScreen,
    body.screen-statute-confirm #statuteLoadingScreen,
    body.screen-statute-fetch-error #statuteLoadingScreen,
    body.screen-input #statuteConfirmScreen,
    body.screen-result #statuteConfirmScreen,
    body.screen-advanced #statuteConfirmScreen,
    body.screen-shortcite #statuteConfirmScreen,
    body.screen-api-error #statuteConfirmScreen,
    body.screen-rate-limit #statuteConfirmScreen,
    body.screen-zero-match #statuteConfirmScreen,
    body.screen-loading #statuteConfirmScreen,
    body.screen-disambig #statuteConfirmScreen,
    body.screen-zero-suggestions #statuteConfirmScreen,
    body.screen-webpage-loading #statuteConfirmScreen,
    body.screen-webpage-confirm #statuteConfirmScreen,
    body.screen-webpage-fetch-error #statuteConfirmScreen,
    body.screen-statute-loading #statuteConfirmScreen,
    body.screen-statute-fetch-error #statuteConfirmScreen,
    body.screen-input #statuteFetchErrorScreen,
    body.screen-result #statuteFetchErrorScreen,
    body.screen-advanced #statuteFetchErrorScreen,
    body.screen-shortcite #statuteFetchErrorScreen,
    body.screen-api-error #statuteFetchErrorScreen,
    body.screen-rate-limit #statuteFetchErrorScreen,
    body.screen-zero-match #statuteFetchErrorScreen,
    body.screen-loading #statuteFetchErrorScreen,
    body.screen-disambig #statuteFetchErrorScreen,
    body.screen-zero-suggestions #statuteFetchErrorScreen,
    body.screen-webpage-loading #statuteFetchErrorScreen,
    body.screen-webpage-confirm #statuteFetchErrorScreen,
    body.screen-statute-loading #statuteFetchErrorScreen,
    body.screen-statute-confirm #statuteFetchErrorScreen {
      display: none !important;
    }

    body.screen-input #candidatesPanel,
    body.screen-result #candidatesPanel,
    body.screen-advanced #candidatesPanel,
    body.screen-shortcite #candidatesPanel,
    body.screen-api-error #candidatesPanel,
    body.screen-rate-limit #candidatesPanel,
    body.screen-zero-match #candidatesPanel,
    body.screen-loading #candidatesPanel,
    body.screen-webpage-loading #candidatesPanel,
    body.screen-webpage-confirm #candidatesPanel,
    body.screen-webpage-fetch-error #candidatesPanel,
    body.screen-statute-loading #candidatesPanel,
    body.screen-statute-confirm #candidatesPanel,
    body.screen-statute-fetch-error #candidatesPanel {
      display: none !important;
    }

    body.screen-input #advancedScreen,
    body.screen-result #advancedScreen {
      display: none !important;
    }

    body.screen-input #citationReveal {
      display: none !important;
    }

    body.screen-input #shortciteScreen,
    body.screen-result #shortciteScreen,
    body.screen-advanced #shortciteScreen {
      display: none !important;
    }

    /* Manual Cite: hide the C2 checkbox and subtitle since the section is locked open as a data-entry surface */
    body.mode-manual .case-info-toggle .advanced-toggle-checkbox,
    body.mode-manual .case-info-toggle .advanced-toggle-subtitle {
      display: none;
    }

    /* Manual Cite: hide the entire case-info-toggle card. The section label below it carries the
       "CASE INFORMATION" header, and the input fields are the data-entry surface. The toggle's
       outer border/background was rendering as an empty redundant card. */
    body.mode-manual .case-info-toggle {
      display: none;
    }

    /* Manual Cite: user already chose Manual via the tab; the mode buttons row is redundant
       and would let the user click Magic mid-Manual-flow. */
    body.mode-manual #modeButtonsRow {
      display: none;
    }

    /* Manual Cite: the divider sits above the (now-hidden) mode buttons row.
       Hide it to avoid an orphaned horizontal line. */
    body.mode-manual #magicManualContainer > .divider {
      display: none;
    }
    /* Manual mode — show case info block at top */
    body.mode-manual .cc-case-info-block {
      display: block;
    }

    /* Manual mode — hide filters (not relevant for manual entry) */
    body.mode-manual #ccFiltersLabel,
    body.mode-manual #ccFiltersCollapsible {
      display: none !important;
    }

    /* Manual mode — expand case info section by default */
    body.mode-manual #caseInfoSection {
      display: block !important;
    }

    /* Manual mode — hide try chips */
    body.mode-manual #tryChips {
      display: none;
    }

    body.mode-manual #reporterPref {
      display: none;
    }

    /* ── Webpages source type: hide case-law-only UI (body.cite-type-webpage) ── */
    /* Webpage Additional Options box: hidden by default, shown only for webpages */
    #additionalOptionsSectionWebpage {
      display: none;
    }
    body.cite-type-webpage #additionalOptionsSectionWebpage {
      display: block;
    }
    #additionalOptionsSectionStatute {
      display: none;
    }
    body.cite-type-statute #additionalOptionsSectionStatute {
      display: block;
    }
    .cc-advanced-options-heading.cc-statute-adv-heading {
      display: none !important;
    }
    body.cite-type-statute .cc-advanced-options-heading.cc-statute-adv-heading {
      display: flex !important;
    }

    body.cite-type-webpage #magicManualContainer .cc-mode-cards {
      display: none !important;
    }

    body:not(.cite-type-webpage) .cc-mode-webpage-placard-wrap {
      display: none !important;
    }

    body.cite-type-webpage .cc-mode-webpage-placard-wrap {
      display: block;
      margin-bottom: 0.5rem;
    }

    /* Day 36 — Hide the Webpage Magic placard in Guide Cite and Expert Cite.
       In Guide Cite the placard is redundant with the sidebar mode + header.
       In Expert Cite the placard is misleading (says "Looks up and formats
       automatically" but Expert Cite is manual entry). The sidebar mode is
       the source of truth for what's happening. */
    body.sidebar-mode-guide .cc-mode-webpage-placard-wrap,
    body.sidebar-mode-expert .cc-mode-webpage-placard-wrap {
      display: none !important;
    }

    /* Advanced screen — Citation Details: show case chips for cases,
       webpage chips for webpages. */
    body.cite-type-webpage #advancedChipsInner,
    body.cite-type-statute #advancedChipsInner {
      display: none !important;
    }
    body:not(.cite-type-webpage) #advancedChipsInnerWebpage {
      display: none !important;
    }
    body:not(.cite-type-statute) #advancedChipsInnerStatute {
      display: none !important;
    }

    .cc-mode-card--webpage-placard {
      width: 100%;
      max-width: none;
      box-sizing: border-box;
      cursor: default;
      pointer-events: none;
      transition: none !important;
    }

    .cc-mode-card--webpage-placard:hover {
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px var(--cc-brand-a10);
    }

    .case-name-heading-icon--globe {
      display: none;
    }

    body.cite-type-webpage #caseNameLabel .case-name-heading-icon--doc {
      display: none !important;
    }

    body.cite-type-webpage #caseNameLabel .case-name-heading-icon--globe {
      display: block !important;
    }

    body.cite-type-webpage #ccFiltersLabel,
    body.cite-type-webpage #ccFiltersCollapsible {
      display: none !important;
    }

    /* Constitution: hide case-name row — unused in both Magic and Manual modes */
    body.cite-type-constitution #caseNameRow {
      display: none !important;
    }

    /* Statutes source type: Search Filters are case-law only (Indigo R16-R19). */
    body.cite-type-statute #ccFiltersLabel,
    body.cite-type-statute #ccFiltersCollapsible,
    body.cite-type-regulation #ccFiltersLabel,
    body.cite-type-regulation #ccFiltersCollapsible,
    body.cite-type-constitution #ccFiltersLabel,
    body.cite-type-constitution #ccFiltersCollapsible,
    body.cite-type-secondary #ccFiltersLabel,
    body.cite-type-secondary #ccFiltersCollapsible,
    body.cite-type-legislative #ccFiltersLabel,
    body.cite-type-legislative #ccFiltersCollapsible {
      display: none !important;
    }

    body.cite-type-webpage #magicManualContainer #caseInfoSection,
    body.cite-type-webpage #magicManualContainer .cc-case-info-block,
    body.cite-type-statute #magicManualContainer #caseInfoSection,
    body.cite-type-statute #magicManualContainer .cc-case-info-block,
    body.cite-type-regulation #magicManualContainer #caseInfoSection,
    body.cite-type-regulation #magicManualContainer .cc-case-info-block,
    body.cite-type-constitution #magicManualContainer #caseInfoSection,
    body.cite-type-constitution #magicManualContainer .cc-case-info-block,
    body.cite-type-secondary #magicManualContainer #caseInfoSection,
    body.cite-type-secondary #magicManualContainer .cc-case-info-block,
    body.cite-type-legislative #magicManualContainer #caseInfoSection,
    body.cite-type-legislative #magicManualContainer .cc-case-info-block {
      display: none !important;
    }

    body.cite-type-webpage #magicManualContainer .cc-advanced-grid #woaSection,
    body.cite-type-webpage #magicManualContainer .cc-advanced-grid #historySection,
    body.cite-type-webpage #magicManualContainer .cc-advanced-grid #reporterPref,
    body.cite-type-webpage #advancedScreen .cc-advanced-grid #woaSection,
    body.cite-type-webpage #advancedScreen .cc-advanced-grid #historySectionAdv,
    body.cite-type-regulation #magicManualContainer .cc-advanced-grid #woaSection,
    body.cite-type-regulation #magicManualContainer .cc-advanced-grid #historySection,
    body.cite-type-regulation #magicManualContainer .cc-advanced-grid #reporterPref,
    body.cite-type-regulation #advancedScreen .cc-advanced-grid #woaSection,
    body.cite-type-regulation #advancedScreen .cc-advanced-grid #historySectionAdv,
    body.cite-type-constitution #magicManualContainer .cc-advanced-grid #woaSection,
    body.cite-type-constitution #magicManualContainer .cc-advanced-grid #historySection,
    body.cite-type-constitution #magicManualContainer .cc-advanced-grid #reporterPref,
    body.cite-type-constitution #advancedScreen .cc-advanced-grid #woaSection,
    body.cite-type-constitution #advancedScreen .cc-advanced-grid #historySectionAdv,
    body.cite-type-secondary #magicManualContainer .cc-advanced-grid #woaSection,
    body.cite-type-secondary #magicManualContainer .cc-advanced-grid #historySection,
    body.cite-type-secondary #magicManualContainer .cc-advanced-grid #reporterPref,
    body.cite-type-secondary #advancedScreen .cc-advanced-grid #woaSection,
    body.cite-type-secondary #advancedScreen .cc-advanced-grid #historySectionAdv,
    body.cite-type-legislative #magicManualContainer .cc-advanced-grid #woaSection,
    body.cite-type-legislative #magicManualContainer .cc-advanced-grid #historySection,
    body.cite-type-legislative #magicManualContainer .cc-advanced-grid #reporterPref,
    body.cite-type-legislative #advancedScreen .cc-advanced-grid #woaSection,
    body.cite-type-legislative #advancedScreen .cc-advanced-grid #historySectionAdv {
      display: none !important;
    }

    /* Hide dividers that become orphaned when WoA and History are hidden */
    body.cite-type-webpage #adv-div-pincite-woa,
    body.cite-type-webpage #adv-div-woa-ep,
    body.cite-type-webpage #adv-div-ep-history,
    body.cite-type-regulation #adv-div-pincite-woa,
    body.cite-type-regulation #adv-div-woa-ep,
    body.cite-type-regulation #adv-div-ep-history,
    body.cite-type-constitution #adv-div-pincite-woa,
    body.cite-type-constitution #adv-div-woa-ep,
    body.cite-type-constitution #adv-div-ep-history,
    body.cite-type-secondary #adv-div-pincite-woa,
    body.cite-type-secondary #adv-div-woa-ep,
    body.cite-type-secondary #adv-div-ep-history,
    body.cite-type-legislative #adv-div-pincite-woa,
    body.cite-type-legislative #adv-div-woa-ep,
    body.cite-type-legislative #adv-div-ep-history {
      display: none !important;
    }

    /* Show the Pincite→EP divider when WoA is hidden (webpages, regulations, constitutions) */
    body.cite-type-webpage #adv-div-pincite-ep,
    body.cite-type-regulation #adv-div-pincite-ep,
    body.cite-type-constitution #adv-div-pincite-ep,
    body.cite-type-secondary #adv-div-pincite-ep,
    body.cite-type-legislative #adv-div-pincite-ep {
      display: block !important;
    }

    body.cite-type-webpage #magicManualContainer .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-webpage #advancedScreen .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-regulation #magicManualContainer .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-regulation #advancedScreen .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-constitution #magicManualContainer .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-constitution #advancedScreen .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-secondary #magicManualContainer .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-secondary #advancedScreen .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-legislative #magicManualContainer .cc-advanced-grid #parentheticalSection.parenthetical-section,
    body.cite-type-legislative #advancedScreen .cc-advanced-grid #parentheticalSection.parenthetical-section {
      grid-column: 1 / -1;
    }

    .cc-field-helper {
      display: block;
      margin-top: 0.25rem;
      font-size: 0.6875rem;
      line-height: 1.4;
      color: var(--cc-text-tertiary);
      font-family: var(--font-body);
    }

    body.cite-type-webpage .cc-field-helper--webpage-pincite {
      display: block;
      margin-top: 0.25rem;
      font-size: 0.6875rem;
      line-height: 1.4;
      color: var(--cc-text-tertiary);
      font-family: var(--font-body);
    }

    body:not(.cite-type-webpage) .cc-field-helper--webpage-pincite {
      display: none !important;
    }

    /* Webpage result chips: swap case chip row for webpage chip row */
    body.cite-type-webpage #ccMetaRow {
      display: none !important;
    }
    body:not(.cite-type-webpage) #ccMetaRowWebpage {
      display: none !important;
    }
    body.cite-type-webpage #ccMetaRowWebpage {
      display: flex !important;
    }

    /* Webpage result: blue extraction banner directly under the verified bar */
    body.cite-type-webpage .cc-result-card {
      display: flex;
      flex-direction: column;
    }
    body.cite-type-webpage .cc-result-card > .cc-result-status-bar {
      order: 1;
    }
    body.cite-type-webpage .cc-result-card > .citation-section {
      order: 3;
    }
    body.cite-type-webpage .citation-section {
      display: flex;
      flex-direction: column;
    }
    body.cite-type-webpage .citation-section > #unverifiedBanner {
      order: -1;
      margin-bottom: 1rem;
    }
    body.cite-type-webpage .citation-section > .cc-meta-row,
    body.cite-type-webpage .citation-section > #ccMetaRowWebpage {
      order: 0;
    }
    body.cite-type-webpage .citation-section > .citation-header {
      order: 1;
    }
    body.cite-type-webpage .citation-section > #gptOnlyWarning {
      order: 2;
    }
    body.cite-type-webpage .citation-section > .citation-box-wrap {
      order: 3;
    }
    body.cite-type-webpage .citation-section > .citation-actions-row {
      order: 4;
    }
    body.cite-type-webpage .citation-section > #feedbackPanel {
      order: 5;
    }
    body.cite-type-webpage .citation-section > #citationDisclaimer {
      order: 6;
    }

    /* Webpage short-cite (Indigo R34): no Weight of Authority */
    #shortciteInlinePanel.cc-shortcite-webpage #shortciteWoaSection {
      display: none !important;
    }
    #shortciteInlinePanel.cc-shortcite-webpage #shortcite-div-pincite-woa {
      display: none !important;
    }

    /* Webpage confirm — PDF URL hint (matches URL banner on same screen) */
    .pdf-hint-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 1rem;
      padding: 10px 14px;
      background: var(--cc-bg-subtle);
      border: 1px solid var(--cc-border-soft);
      border-radius: 10px;
    }

    .pdf-hint-banner[hidden] {
      display: none !important;
    }

    .optional-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 0.5rem;
      margin-bottom: 0;
      align-items: start;
    }

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

    .cc-advanced-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .cc-field-label {
      display: block;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      margin-bottom: 0.375rem;
      font-family: var(--font-body);
      text-transform: none;
      letter-spacing: 0.04em;
    }

    /* ── Advanced Options rows ────────────────────────────────────────── */

    /* Row 1: Signal + Compare side by side */
    .cc-advanced-grid #signalSection.parenthetical-section,
    #shortciteFormSection .cc-advanced-grid #shortciteSignalSection.parenthetical-section {
      display: flex;
      flex-direction: row;
      gap: 0.75rem;
      align-items: flex-start;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 0 0.75rem 0 !important;
      background: transparent !important;
    }

    .cc-advanced-grid #signalSection #field-signal,
    #shortciteFormSection .cc-advanced-grid #shortciteSignalSection #shortcite-field-signal {
      flex: 1 1 0;
      min-width: 0;
    }

    .cc-advanced-grid #signalSection #field-compareWith {
      flex: 2 1 0;
      min-width: 0;
      display: flex;
      flex-direction: row;
      gap: 0.75rem;
      align-items: flex-start;
    }

    .cc-advanced-grid #signalSection #field-compareWith[hidden] { display: none !important; }

    .cc-advanced-grid #signalSection #field-compareWith #field-compareWithA,
    .cc-advanced-grid #signalSection #field-compareWith #field-compareWithB {
      flex: 1 1 0;
      min-width: 0;
    }

    /* Hide the group label on signalSection — signal/compare are self-labelled */
    .cc-advanced-grid #signalSection > .cc-field-label,
    #shortciteFormSection .cc-advanced-grid #shortciteSignalSection > .cc-field-label {
      display: none;
    }

    /* Row 2: Pincite full width */
    .cc-advanced-grid #pinciteSection.parenthetical-section,
    #shortciteFormSection .cc-advanced-grid #shortcitePinciteSection.parenthetical-section {
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 0 0.75rem 0 !important;
      background: transparent !important;
    }

    .cc-advanced-grid #pinciteSection > .cc-field-label,
    #shortciteFormSection .cc-advanced-grid #shortcitePinciteSection > .cc-field-label {
      display: none;
    }

    /* Divider */
    .cc-adv-divider {
      border: none;
      border-top: 1px solid var(--cc-border-soft);
      margin: 0.75rem 0;
    }

    /* Rows 3 & 4: WoA and EP — strip card chrome, full width, horizontal */
    .cc-advanced-grid #woaSection.parenthetical-section,
    .cc-advanced-grid #parentheticalSection.parenthetical-section,
    #shortciteFormSection .cc-advanced-grid #shortciteWoaSection.parenthetical-section,
    #shortciteFormSection .cc-advanced-grid #shortciteParenSection.parenthetical-section {
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 0 0.75rem 0 !important;
      background: transparent !important;
    }

    .cc-advanced-grid #woaSection > .cc-field-label,
    .cc-advanced-grid #parentheticalSection > .cc-field-label,
    #shortciteFormSection .cc-advanced-grid #shortciteWoaSection > .cc-field-label,
    #shortciteFormSection .cc-advanced-grid #shortciteParenSection > .cc-field-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--cc-text-secondary);
      text-transform: none;
      letter-spacing: 0.04em;
      margin-bottom: 0.375rem;
      display: block;
    }

    /* WoA inner: 3 fields side by side */
    .cc-advanced-grid #woaSection .woa-grid,
    #shortciteFormSection .cc-advanced-grid #shortciteWoaSection .woa-grid {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      margin-top: 0;
      margin-bottom: 0;
      align-items: flex-start;
    }

    .cc-advanced-grid #woaSection .woa-grid .field,
    #shortciteFormSection .cc-advanced-grid #shortciteWoaSection .woa-grid .field {
      min-width: 0;
    }

    .cc-advanced-grid #woaSection #field-woa-type        { flex: 1 1 0; }
    .cc-advanced-grid #woaSection #field-woa-lastname    { flex: 1.5 1 0; }
    .cc-advanced-grid #woaSection #field-woa-designation { flex: 1 1 0; min-width: 0; }
    .cc-advanced-grid #woaSection #field-woa-votecount   { flex: 0 0 auto; min-width: 0; }
    #shortciteFormSection .cc-advanced-grid #shortciteWoaSection #shortcite-field-woa-type { flex: 2 1 0; }
    #shortciteFormSection .cc-advanced-grid #shortciteWoaSection #shortcite-field-woa-lastname { flex: 1.5 1 0; }
    #shortciteFormSection .cc-advanced-grid #shortciteWoaSection #shortcite-field-woa-designation { flex: 1 1 0; min-width: 0; }

    /* EP inner: 2 fields side by side */
    .cc-advanced-grid #parentheticalSection .parenthetical-grid,
    #shortciteFormSection .cc-advanced-grid #shortciteParenSection .parenthetical-grid {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      margin-top: 0;
      margin-bottom: 0;
      align-items: flex-start;
    }

    .cc-advanced-grid #parentheticalSection .parenthetical-grid .field,
    #shortciteFormSection .cc-advanced-grid #shortciteParenSection .parenthetical-grid .field {
      min-width: 0;
    }

    .cc-advanced-grid #parentheticalSection #field-participle         { flex: 1 1 0; }
    .cc-advanced-grid #parentheticalSection #field-parenthetical-text { flex: 2 1 0; }
    #shortciteFormSection .cc-advanced-grid #shortciteParenSection #shortcite-field-participle { flex: 1 1 0; }
    #shortciteFormSection .cc-advanced-grid #shortciteParenSection #shortcite-field-parenthetical-text { flex: 2 1 0; }

    /* Row 5: Subsequent History — flat (no card chrome), 3 fields horizontal */
    .cc-advanced-grid #historySection.parenthetical-section,
    .cc-advanced-grid #historySectionAdv.parenthetical-section {
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 0 0.75rem 0 !important;
      background: transparent !important;
    }

    .cc-advanced-grid #historySection > .cc-field-label,
    .cc-advanced-grid #historySectionAdv > .cc-field-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--cc-text-secondary);
      text-transform: none;
      letter-spacing: 0.04em;
      margin-bottom: 0.375rem;
      display: block;
    }

    .cc-advanced-grid .history-grid {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      align-items: flex-start;
      margin-top: 0;
      margin-bottom: 0;
    }

    .cc-advanced-grid .history-grid .field {
      min-width: 0;
    }

    .cc-advanced-grid .history-grid #field-history-phrase,
    .cc-advanced-grid .history-grid #field-history-phrase-adv    { flex: 1.5 1 0; }
    .cc-advanced-grid .history-grid #field-history-citation,
    .cc-advanced-grid .history-grid #field-history-citation-adv  { flex: 2 1 0; }
    .cc-advanced-grid .history-grid #field-history-subnom,
    .cc-advanced-grid .history-grid #field-history-subnom-adv    { flex: 1.5 1 0; }

    /* Row 6: Reporter Preference full width */
    #reporterPref {
      margin: 0;
      padding: 0;
      background: transparent;
      border: none;
      border-top: 1px solid var(--cc-border-soft);
      padding-top: 0.75rem;
      margin-top: 0.25rem;
    }

    .cc-advanced-grid #reporterPref .cc-field-label {
      margin-bottom: 0.375rem;
    }

    .cc-advanced-grid #reporterPref .reporter-pref-options {
      margin-top: 0;
    }

    @media (max-width: 600px) {
      .cc-advanced-grid #signalSection,
      #shortciteFormSection .cc-advanced-grid #shortciteSignalSection {
        flex-direction: column;
      }

      .cc-advanced-grid #woaSection .woa-grid,
      .cc-advanced-grid #parentheticalSection .parenthetical-grid,
      .cc-advanced-grid .history-grid,
      #shortciteFormSection .cc-advanced-grid #shortciteWoaSection .woa-grid,
      #shortciteFormSection .cc-advanced-grid #shortciteParenSection .parenthetical-grid {
        flex-direction: column;
      }
      .cc-advanced-grid #woaSection .woa-grid .field,
      .cc-advanced-grid #parentheticalSection .parenthetical-grid .field,
      .cc-advanced-grid .history-grid .field,
      #shortciteFormSection .cc-advanced-grid #shortciteWoaSection .woa-grid .field,
      #shortciteFormSection .cc-advanced-grid #shortciteParenSection .parenthetical-grid .field {
        flex: 1 1 100%;
      }
    }

    .citation-grid-top {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .citation-grid-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .parenthetical-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 1rem;
      margin-top: 0.375rem;
      margin-bottom: 0.5rem;
    }

    .woa-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 0.375rem;
    }

    .woa-grid .field {
      flex: 1 1 0;
      min-width: 0;
    }

    .woa-grid #field-woa-type { flex: 1 1 0; }
    .woa-grid #field-woa-lastname { flex: 1.5 1 0; }
    .woa-grid #field-woa-designation { flex: 0.5 1 auto; min-width: 5rem; }
    .woa-grid #field-woa-votecount { flex: 0 0 auto; min-width: 0; }
    .woa-votecount-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.35rem;
    }
    .woa-votecount-row input[type="number"] {
      width: 4.5rem;
      min-width: 0;
      flex: 0 0 auto;
      -moz-appearance: textfield;
    }
    .woa-votecount-row input[type="number"]::-webkit-outer-spin-button,
    .woa-votecount-row input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .woa-votecount-sep { color: var(--cc-text-secondary); }
    .woa-votecount-label { font-size: 0.875rem; color: var(--cc-text-secondary); }

    .ur-date-row {
      display: flex;
      flex-direction: row;
      gap: 0.35rem;
      align-items: stretch;
    }

    .ur-date-month { flex: 2 1 0; min-width: 0; }
    .ur-date-day   { flex: 1 1 0; min-width: 0; }
    .ur-date-year  { flex: 1.5 1 0; min-width: 0; }

    /* Required-field glow for unreported form — matches manual cite style */
    #unreportedForm:not([hidden]) #urDocket,
    #unreportedForm:not([hidden]) #urCourt,
    #unreportedForm:not([hidden]) #urDateMonth,
    #unreportedForm:not([hidden]) #urDateDay,
    #unreportedForm:not([hidden]) #urDateYear {
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px var(--cc-brand-a12);
      background: var(--cc-bg-subtle);
    }

    .unreported-toggle-row {
      margin-bottom: 0.5rem;
    }
    .unreported-toggle-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--cc-text-secondary);
      cursor: pointer;
      user-select: none;
    }
    .unreported-toggle-label input[type="checkbox"] {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      cursor: pointer;
      accent-color: var(--cc-brand);
    }
    .unreported-toggle-sub {
      font-size: 0.8em;
      color: var(--cc-text-tertiary);
    }
    .statute-type-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      margin-bottom: 0.75rem;
    }
    .statute-type-option {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.875rem;
      color: var(--cc-text-secondary);
      cursor: pointer;
      user-select: none;
    }
    .statute-type-option input[type="radio"] {
      accent-color: var(--cc-brand);
      cursor: pointer;
    }
    .statute-type-sub {
      font-size: 0.8em;
      color: var(--cc-text-tertiary);
    }

    .history-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-top: 0.375rem;
      margin-bottom: 0.5rem;
    }
    /* Inside Advanced Options the history-grid switches to flex row (see .cc-advanced-grid rules) */

    .parenthetical-section {
      position: relative;
      margin-top: 0.25rem;
      margin-bottom: 1rem;
      border: 1px solid var(--cc-brand-a10);
      border-radius: 12px;
      box-shadow: 0 2px 8px var(--cc-brand-a08), 0 1px 2px var(--cc-brand-a04);
      padding: 1.5rem;
      background: var(--cc-bg-card);
    }
    .parenthetical-section[hidden] { display: none; }

    /* Reduce shadow on nested cards inside Advanced Options */
    #advancedScreen .parenthetical-section {
      box-shadow: 0 1px 4px var(--cc-brand-a06), 0 0 0 1px var(--cc-brand-a04);
    }

    .parenthetical-toggle:not(.cc-add-btn) {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.4rem 0;
      margin-top: 1rem;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--cc-brand);
      background: transparent;
      border: none;
      cursor: pointer;
      width: fit-content;
      text-align: left;
      letter-spacing: 0;
      transition: color 0.15s, text-decoration-color 0.15s;
      text-decoration: none;
    }

    .parenthetical-toggle:not(.cc-add-btn):hover {
      color: var(--cc-brand);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }

    .parenthetical-toggle:not(.cc-add-btn):active {
      color: var(--cc-brand);
    }

    .parenthetical-toggle:not(.cc-add-btn)[hidden] { display: none; }

    .cc-add-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 12px 16px;
      background: var(--cc-bg-card);
      border: 0.5px dashed var(--cc-border-strong);
      border-radius: 8px;
      cursor: pointer;
      font-family: var(--font-body);
      text-align: left;
      color: var(--cc-brand);
      transition: all 0.15s ease;
      margin-bottom: 0.5rem;
    }
    .cc-add-btn:hover {
      background: var(--cc-brand-soft);
      border-color: var(--cc-brand);
      border-style: solid;
    }
    .cc-add-btn .add-icon {
      flex-shrink: 0;
      color: var(--cc-brand);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .cc-add-btn .add-content {
      display: flex;
      flex-direction: column;
      gap: 1px;
      align-items: flex-start;
    }
    .cc-add-btn .add-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--cc-brand);
    }
    .cc-add-btn .add-subtitle {
      font-size: 11px;
      color: var(--cc-text-tertiary);
    }

    .reporter-pref {
      margin-top: 8px;
      padding: 12px 16px;
      background: var(--cc-bg-subtle);
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 8px;
    }

    /* Inside Additional Options card: strip the nested-box look.
       Reporter Preference sits directly in the card without its own border/bg. */
    .cc-additional-options-card .reporter-pref {
      margin-top: 0;
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    .reporter-pref-header {
      font-size: 13px;
      font-weight: 500;
      color: var(--cc-text-body);
      margin-bottom: 8px;
      font-family: var(--font-body);
    }
    .reporter-pref-options {
      display: flex;
      gap: 16px;
    }
    .reporter-pref-option {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 13px;
      color: var(--cc-text-body);
      font-family: var(--font-body);
    }
    .reporter-pref-radio {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid var(--cc-border-strong);
      background: var(--cc-bg-card);
      flex-shrink: 0;
      transition: border-color 0.12s ease, background 0.12s ease;
    }
    .reporter-pref-option[data-checked="true"] .reporter-pref-radio {
      border-color: var(--cc-brand);
    }
    .reporter-pref-option[data-checked="true"] .reporter-pref-radio::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cc-brand);
    }
    .reporter-pref-default {
      color: var(--cc-text-tertiary);
      margin-left: 4px;
    }

    #advancedScreen {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .cc-advanced-chips-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.25rem 0;
    }

    .advanced-add-buttons.disclosure-card {
      padding: 1rem;
      margin-top: 0;
    }

    .advanced-subtitle {
      font-size: 13px;
      color: var(--cc-text-secondary);
      margin: 0 0 1rem;
    }
    .advanced-add-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .advanced-screen-footer {
      margin-top: auto;
      padding-top: 1rem;
      border-top: 0.5px solid var(--cc-border);
    }
    #generateBtn,
    #generateShortcutHint,
    .advanced-screen-footer,
    .divider {
      display: none !important;
    }
    .cc-back-btn {
      background: transparent;
      border: none;
      padding: 0;
      font-size: 12px;
      color: var(--cc-text-secondary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 0.75rem;
      font-family: var(--font-body);
    }
    .cc-back-btn:hover {
      color: var(--cc-text-body);
    }
    /* Ensure +Add buttons hide when [hidden] attribute is set.
       Without !important, the .cc-add-btn { display: flex } rule wins over the
       browser default [hidden] behavior. */
    .cc-add-btn[hidden] {
      display: none !important;
    }

    .add-icon {
      font-size: 1.125rem;
      line-height: 1;
      color: var(--cc-brand);
      font-weight: 400;
    }

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

    .section-header-row .section-label {
      margin-bottom: 0;
      text-transform: none;
      letter-spacing: 0.04em;
      font-weight: 600;
    }

    .section-close-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      padding: 0;
      font-size: 1rem;
      line-height: 1;
      color: var(--cc-text-secondary);
      background: transparent;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.15s, background 0.15s, color 0.15s;
      flex-shrink: 0;
    }

    .section-close-btn:hover {
      opacity: 1;
      background: rgba(0, 0, 0, 0.06);
      color: var(--cc-text-body);
    }

    .section-remove-btn {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: color 0.15s;
    }

    .section-remove-btn:hover {
      color: var(--cc-error-text);
    }

    #caseName {
      font-size: 1.125rem;
      font-weight: 500;
      min-height: 3rem;
      padding: 0.85rem 1rem;
    }

    /* Insert-§ buttons: hidden by default; shown only in Magic mode on the
       source types where § is part of the typed citation. Never Manual
       (formatter adds § there), never Cases/Webpages. */
    #insertSectionBtn, #insertSectionBtnConst { display: none; }
    body.mode-assisted.cite-type-statute #insertSectionBtn,
    body.mode-assisted.cite-type-regulation #insertSectionBtn,
    body.mode-assisted.cite-type-secondary #insertSectionBtn,
    body.mode-assisted.cite-type-legislative #insertSectionBtn { display: inline-flex; }

    body.mode-assisted.cite-type-constitution #insertSectionBtnConst { display: inline-flex; }

    body.mode-assisted.cite-type-statute #caseName,
    body.mode-assisted.cite-type-regulation #caseName,
    body.mode-assisted.cite-type-secondary #caseName,
    body.mode-assisted.cite-type-legislative #caseName { padding-right: 4.5rem; }

    #field-stSlOrigSec, #field-secBkPage, #field-legBillSection {
      position: relative;
    }
    #field-stSlOrigSec #stSlOrigSec,
    #field-secBkPage #secBkPage,
    #field-legBillSection #legBillSection { padding-right: 4.5rem; }

    .cc-input-symbol-btn {
      position: absolute; right: 0.55rem; top: 50%;
      transform: translateY(-50%);
      display: inline-flex; align-items: center; justify-content: center;
      height: 2rem; padding: 0 0.6rem; white-space: nowrap;
      border: 0.5px solid var(--cc-border-soft); border-radius: 8px;
      background: var(--cc-bg-card); color: var(--cc-text-secondary);
      font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600;
      line-height: 1; cursor: pointer;
      transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    }
    .cc-input-symbol-btn:hover {
      background: var(--cc-brand-soft); border-color: var(--cc-brand);
      color: var(--cc-brand); box-shadow: 0 2px 8px var(--cc-brand-a10);
    }
    .cc-input-symbol-btn:active { transform: translateY(-50%) translateY(1px); }

    #caseName::placeholder {
      font-size: 1rem;
      font-weight: 400;
    }

    .generate-shortcut-hint {
      display: block;
      text-align: center;
      font-size: 0.72rem;
      color: var(--cc-text-secondary);
      margin-top: 0.4rem;
      margin-bottom: 1rem;
      font-family: var(--font-body);
    }

    @media (max-width: 480px) {
      .divider {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
      }
      .optional-grid { grid-template-columns: 1fr; }
      .citation-fields .disclosure-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      .citation-grid-top,
      .citation-grid-bottom {
        display: contents;
      }
      .parenthetical-grid { grid-template-columns: 1fr; }
      .woa-grid { flex-direction: column; }
      .woa-grid .field { flex: 1 1 100%; }
      .tab-strip { flex-wrap: wrap; }
      .tab-btn { font-size: 0.72rem; padding: 0.35rem 0.6rem 0.35rem 0.45rem; }
      .generate-shortcut-hint {
        font-size: 0.65rem;
        margin-top: 0.25rem;
        margin-bottom: 0.75rem;
      }
    }

    .btn-primary {
      width: 100%;
      padding: 0.875rem 1.5rem;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 700;
      color: var(--cc-text-on-brand);
      background: var(--cc-brand);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 2px 8px var(--cc-brand-a20), 0 1px 3px var(--cc-brand-a15);
      transition: all 0.2s ease;
      margin-bottom: 0;
      letter-spacing: 0.01em;
    }

    .btn-primary:hover {
      background: var(--cc-brand);
      box-shadow: 0 4px 12px var(--cc-brand-a20), 0 2px 6px var(--cc-brand-a20);
    }

    @media (prefers-reduced-motion: no-preference) {
      .btn-primary:hover {
        transform: translateY(-1px);
      }

      .btn-primary:active {
        transform: translateY(0);
      }
    }

    .btn-primary:focus-visible {
      outline: 2px solid var(--cc-brand);
      outline-offset: 2px;
    }

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

    .citation-section { margin-top: 0; }

    .citation-reveal[hidden] {
      display: none;
    }

    .citation-reveal {
      display: block;
    }

    .citation-header {
      display: none !important;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.35rem;
    }

    .citation-label {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0;
      color: var(--cc-text-secondary);
      display: none;
    }

    .confidence-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.175rem 0.5rem;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      border-radius: 999px;
      border: 1px solid transparent;
      line-height: 1.4;
    }

    .confidence-badge[hidden] { display: none; }

    .format-toggle-group {
      display: inline-flex;
      padding: 0.15rem;
      background: var(--cc-bg-subtle);
      border: 1px solid var(--cc-border);
      border-radius: 7px;
      gap: 0;
    }

    .format-toggle-group[hidden] { display: none; }

    .format-toolbar {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 0;
    }
    .citation-header-toolbar {
      margin-left: auto;
    }
    .citation-actions-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }

    /* Metadata row */
    .cc-meta-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 10px 16px;
      gap: 0;
      border-bottom: 1px solid var(--cc-border-soft);
      background: var(--cc-bg-subtle);
      margin-top: 0;
    }

    .cc-meta-item {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 14px;
    }

    .cc-meta-item:first-child {
      padding-left: 0;
    }

    .cc-meta-item:last-child {
      padding-right: 0;
    }

    .cc-meta-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      color: var(--cc-text-tertiary);
      white-space: nowrap;
    }

    .cc-meta-divider {
      width: 1px;
      height: 18px;
      background: var(--cc-border-soft);
      flex-shrink: 0;
    }

    .cc-chip {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 0.75rem;
      font-weight: 600;
      font-family: var(--font-body);
      white-space: nowrap;
      line-height: 1.4;
    }

    /* [Day 34 P26] Result screen type chip. Base = Case = Red.
       Per-type modifier classes set by updateCitationChips in app.js. */
    .cc-chip--type {
      background: rgba(220, 38, 38, 0.08);
      color: #b91c1c;
      border: 1px solid rgba(220, 38, 38, 0.22);
    }
    .cc-chip--type[data-cite-type="statute"] {
      background: rgba(234, 88, 12, 0.08);
      color: #c2410c;
      border-color: rgba(234, 88, 12, 0.22);
    }
    .cc-chip--type[data-cite-type="constitution"] {
      background: rgba(202, 138, 4, 0.08);
      color: #92400e;
      border-color: rgba(202, 138, 4, 0.22);
    }
    .cc-chip--type[data-cite-type="regulation"] {
      background: rgba(22, 163, 74, 0.08);
      color: #15803d;
      border-color: rgba(22, 163, 74, 0.22);
    }
    .cc-chip--type[data-cite-type="legislative"] {
      background: rgba(37, 99, 235, 0.08);
      color: #1d4ed8;
      border-color: rgba(37, 99, 235, 0.22);
    }
    .cc-chip--type[data-cite-type="webpage"] {
      background: rgba(124, 58, 237, 0.08);
      color: #6d28d9;
      border-color: rgba(124, 58, 237, 0.22);
    }
    .cc-chip--type[data-cite-type="secondary"] {
      background: rgba(100, 116, 139, 0.08);
      color: #475569;
      border-color: rgba(100, 116, 139, 0.22);
    }

    .cc-chip--neutral {
      background: var(--cc-bg-muted);
      color: var(--cc-text-secondary);
      border: 1px solid var(--cc-border-softer);
    }

    .cc-result-status-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      background: var(--cc-success-bg);
      border-bottom: 1px solid var(--cc-success-border);
    }

    .cc-result-status-left {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .cc-result-status-dot {
      width: 8px;
      height: 8px;
      background: var(--cc-success-text);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .cc-result-status-label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--cc-success-text);
      font-family: var(--font-body);
    }

    .cc-result-status-sub {
      font-size: 0.75rem;
      color: var(--cc-success-text);
      opacity: 0.7;
      font-family: var(--font-body);
    }

    .cc-confidence-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--cc-success-text);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      font-family: var(--font-body);
      letter-spacing: 0.04em;
      padding: 3px 10px;
      border-radius: 100px;
    }

    .cc-result-card {
      position: relative;
      border: 1px solid var(--cc-border-soft);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-bottom: 16px;
      box-shadow: 0 1px 4px rgba(10, 22, 40, 0.10), 0 0 0 1px rgba(10, 22, 40, 0.06);
      background: var(--cc-bg-card);
    }

    .cc-result-card .citation-section {
      padding: 0;
    }

    /* Hide legacy inline confidence badge; status bar chip replaces it */
    #confidenceBadge,
    .confidence-badge {
      display: none !important;
    }
    #confidenceHelp,
    .confidence-help {
      display: none !important;
    }

    .citation-box-wrap {
      position: relative;
      background: var(--cc-bg-subtle);
      margin-bottom: 0;
    }

    .citation-inline-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 14px 16px;
      background: var(--cc-bg-subtle);
    }

    .citation-inline-row .citation-output {
      flex: 1;
      padding: 0;
      min-height: auto;
    }

    .citation-inline-row .citation-box-toolbar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0;
      background: none;
      border-bottom: none;
      border-radius: 0;
      flex-shrink: 0;
      align-self: flex-start;
      padding-top: 2px;
    }

    .citation-actions-row {
      display: none !important;
    }

    .citation-box-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      padding: 8px 10px 6px;
      background: var(--cc-bg-subtle);
    }

    #citationDisclaimer.citation-disclaimer,
    #shortciteDisclaimer.citation-disclaimer {
      padding: 8px 16px 12px;
      font-size: 0.7rem;
      line-height: 1.45;
      color: var(--cc-text-disabled);
      text-align: center;
      margin: 0;
      border-top: none;
    }

    .feedback-panel {
      padding: 10px 16px;
      border-top: 1px solid var(--cc-border-soft);
      background: var(--cc-bg-card);
      margin-top: 0;
    }

    .citation-output {
      padding: 12px 16px 16px;
      min-height: 52px;
      font-family: var(--font-display);
      font-weight: 400 !important;
      font-size: 1.125rem;
      line-height: 1.65;
      color: var(--cc-text-primary);
      outline: none;
      display: block;
    }

    .format-toggle-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.4rem;
      padding: 0;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      background: transparent;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    }

    .format-toggle-btn:hover {
      color: var(--cc-text-body);
    }

    .format-toggle-btn.active {
      color: var(--cc-text-body);
      background: var(--cc-bg-card);
      font-weight: 600;
      box-shadow: 0 1px 2px rgba(10, 22, 40, 0.08), 0 0 0 0.5px rgba(10, 22, 40, 0.04);
    }

    .format-icon-italic {
      font-style: italic;
      font-family: Georgia, serif;
      font-size: 0.95rem;
      line-height: 1;
    }

    .format-icon-underline {
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1.5px;
      font-family: Georgia, serif;
      font-size: 0.95rem;
      line-height: 1;
    }

    .confidence-high { color: var(--cc-success-text); background: var(--cc-success-bg); border-color: var(--cc-success-border); }
    .confidence-medium { color: var(--cc-warning-text-strong); background: var(--cc-warning-bg); border-color: var(--cc-warning-border); }
    .confidence-low { color: var(--cc-error-text); background: var(--cc-error-bg); border-color: var(--cc-error-border); }

    .confidence-pill {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .confidence-pill[hidden] { display: none; }
    .confidence-pill.high {
      background: var(--cc-success-bg);
      color: var(--cc-success-text);
    }
    .confidence-pill.medium {
      background: var(--cc-warning-bg);
      color: var(--cc-warning-text-strong);
    }
    .confidence-pill.low {
      background: var(--cc-error-bg);
      color: var(--cc-error-text);
    }
    .confidence-pill.user {
      background: var(--cc-user-bg);
      color: var(--cc-user-text);
    }

    .confidence-help {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .confidence-help[hidden] { display: none; }

    .confidence-help-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      font-size: 0.6rem;
      font-weight: 700;
      color: var(--cc-text-secondary);
      background: var(--cc-bg-subtle);
      border: 1px solid var(--cc-border);
      border-radius: 50%;
      cursor: help;
      line-height: 1;
    }

    .confidence-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      width: 16rem;
      padding: 0.5rem 0.65rem;
      font-size: 0.72rem;
      line-height: 1.5;
      color: var(--cc-text-body);
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-border);
      border-radius: 12px;
      box-shadow: var(--cc-shadow-dropdown);
      z-index: 10;
      pointer-events: none;
      font-style: normal;
      font-weight: 400;
    }

    .confidence-help:hover .confidence-tooltip {
      display: block;
    }

    .case-info-display-card {
      padding: 12px;
      border: 0.5px solid var(--cc-border);
      border-radius: 8px;
      background: var(--cc-bg-card);
    }

    .case-info-table {
      width: 100%;
      font-size: 13px;
      border-collapse: collapse;
    }
    .case-info-table td {
      padding: 4px 6px;
    }
    .case-info-table td:first-child {
      color: var(--cc-text-secondary);
      width: 35%;
    }
    .case-info-table td:last-child {
      color: var(--cc-text-primary);
    }

    .citation-disclaimer {
      font-size: 0.72rem;
      color: var(--cc-text-secondary);
      text-align: center;
      margin-top: 0.5rem;
      margin-bottom: 0;
    }

    .cc-citation-output-heading {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--cc-text-secondary);
      letter-spacing: 0.04em;
      margin-bottom: 0.5rem;
      margin-top: 0;
      text-transform: uppercase;
      font-family: var(--font-body);
    }

    .result-page-footer {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
      background: none;
    }

    .result-shortcite-btn {
      width: 100%;
    }
    .result-shortcite-btn[hidden] {
      display: none;
    }

    .candidates-panel {
      display: none;
      margin-top: 0.75rem;
    }
    .candidates-panel.active {
      display: block;
      min-height: 3.2rem;
      font-family: var(--font-body);
      box-sizing: border-box;
    }
    .disambig-refine-apply {
      margin-top: 1rem;
    }
    /* Match .cc-generate-btn footprint while keeping .btn-primary brand treatment */
    .btn-primary.disambig-refine-apply {
      padding: 12px 24px;
      font-size: 0.9375rem;
      font-weight: 600;
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .candidates-cap-note {
      margin: 0.35rem 0 0 0;
      font-size: 0.72rem;
      color: var(--cc-text-secondary);
      font-family: var(--font-body);
      line-height: 1.35;
    }
    #candidatesPanel > .disambig-section .disclosure-card {
      padding: 1rem;
      margin-top: 0.5rem;
      box-sizing: border-box;
    }
    .candidates-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 1rem;
      box-sizing: border-box;
    }
    .candidates-continue-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--cc-brand);
      color: var(--cc-brand-on-brand);
      border: none;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: 0.01em;
      transition: background 0.15s, box-shadow 0.15s, transform 0.1s, opacity 0.15s;
    }
    .candidates-continue-btn:hover:not(:disabled) {
      background: #002d70;
      box-shadow: 0 4px 16px var(--cc-brand-a20);
    }
    .candidates-continue-btn:active:not(:disabled) {
      transform: translateY(1px);
    }
    .candidates-continue-btn:disabled {
      cursor: not-allowed;
      opacity: 0.45;
      box-shadow: none;
    }
    .candidate-card {
      position: relative;
      background: var(--cc-bg-card);
      border: 1.5px solid var(--cc-border-strong);
      border-radius: 10px;
      padding: 0.5rem 0.875rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      margin: 0;
      cursor: pointer;
      box-shadow: none;
      box-sizing: border-box;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .candidate-card:hover {
      border-color: var(--cc-brand);
    }
    .candidate-card--selected {
      background: var(--cc-brand-a04);
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px var(--cc-brand-a10);
    }
    .candidate-info {
      flex: 1;
      min-width: 0;
    }
    .candidate-case-name {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1rem;
      font-weight: 600;
      color: var(--cc-text-primary);
      margin: 0 0 0.375rem 0;
      line-height: 1.35;
    }
    /* Candidate row: same chip pattern as results .cc-meta-row; no bar background inside the card */
    .candidate-meta-row.cc-meta-row {
      padding: 0;
      margin-top: 0;
      border-bottom: none;
      background: transparent;
    }
    .candidate-meta-row .cc-meta-item:first-child {
      padding-left: 0;
    }
    .candidate-select-indicator {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.5px solid var(--cc-border-soft);
      background: transparent;
      color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .candidate-card--selected .candidate-select-indicator {
      background: var(--cc-brand);
      border-color: var(--cc-brand);
      color: #ffffff;
    }
    .candidate-mismatch-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.25rem;
    }
    .candidate-mismatch-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.16rem 0.5rem;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--cc-warning-text-strong);
      background: var(--cc-warning-bg);
      border: 1px solid var(--cc-warning-border);
      border-radius: 999px;
      line-height: 1.35;
      white-space: nowrap;
      cursor: help;
    }
    .candidate-mismatch-detail {
      margin-top: 0.28rem;
      font-size: 0.72rem;
      color: var(--cc-warning-text-strong);
      line-height: 1.4;
    }
    .candidates-empty-message {
      font-size: 0.875rem;
      color: var(--cc-text-secondary);
      line-height: 1.55;
      margin-bottom: 1rem;
    }
    .candidates-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.65rem;
      align-items: stretch;
      width: 100%;
      margin-top: 0.1rem;
    }
    .candidates-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0.65rem 1rem;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      background: var(--cc-bg-subtle);
      border: 1px solid var(--cc-border);
      border-radius: 12px;
      text-decoration: none;
      cursor: pointer;
      box-shadow: none;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      text-align: center;
    }
    .candidates-actions a:hover {
      border-color: var(--cc-brand);
      color: var(--cc-brand);
      background: var(--cc-brand-soft);
      text-decoration: none;
    }
    .candidates-actions-separator {
      display: none;
    }

    .candidates-panel.state-zero-nothing .candidates-empty-message {
      margin-bottom: 1rem;
      padding: 0.7rem 0.95rem;
      min-height: 4.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    @media (max-width: 480px) {
      .candidates-actions {
        grid-template-columns: 1fr;
      }
      .candidate-card {
        padding: 0.5rem 0.875rem;
      }
      .candidate-meta-row.cc-meta-row {
        row-gap: 0.4rem;
      }
      .candidate-meta-row .cc-meta-item {
        padding: 0 8px;
      }
      .candidate-mismatch-detail {
        overflow-wrap: anywhere;
      }
    }
    .candidates-panel > .start-over-row {
      margin-top: 0.85rem;
      padding-top: 0;
      border-top: 0;
    }

    #result {
      min-height: 3.2rem;
      padding: 0;
      white-space: pre-wrap;
      word-break: break-word;
      width: 100%;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      transition: outline 0.15s;
      outline: none;
      font-family: var(--font-display);
      font-weight: 400 !important;
      font-size: 1.125rem;
      line-height: 1.65;
      color: var(--cc-text-primary);
    }

    /* Citation text — never bold */
    #result,
    .citation-output,
    .citation-output *,
    .cc-result-card .citation-output {
      font-weight: 400 !important;
      font-style: normal;
    }

    .citation-output em,
    .citation-output i {
      font-style: italic !important;
      font-weight: 400 !important;
    }

    #result:focus {
      outline: 2px solid var(--cc-brand);
      outline-offset: 2px;
    }

    .copy-btn {
      height: 26px;
      padding: 0 8px;
      background: transparent;
      color: var(--cc-brand);
      border: 0.5px solid var(--cc-border-strong);
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.8125rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-body);
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .copy-btn:hover {
      background: var(--cc-brand-tint);
      border-color: var(--cc-brand);
    }

    .copy-btn.copied {
      color: var(--cc-success-text);
      background: var(--cc-success-bg);
      border-color: var(--cc-success-border);
    }

    .btn-start-over {
      width: 100%;
      padding: 0.65rem 1rem;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--cc-text-primary);
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-border-strong);
      border-radius: 10px;
      cursor: pointer;
      margin: 0;
      box-shadow: none;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      text-align: center;
    }

    .btn-start-over:hover {
      border-color: var(--cc-brand);
      color: var(--cc-brand);
      background: var(--cc-bg-card);
    }

    .start-over-row {
      margin-top: 0.9rem;
      padding-top: 0.9rem;
      border-top: 1px solid var(--cc-border);
    }

    .start-over-row[hidden] { display: none; }

    .debug-placeholder {
      margin-top: 1.5rem;
      padding: 0.75rem 0.875rem;
      background: var(--cc-bg-subtle);
      border: 1px dashed var(--cc-border);
      border-radius: 12px;
      opacity: 0.7;
    }

    .debug-placeholder-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0;
      color: var(--cc-text-secondary);
      margin-bottom: 0.4rem;
      display: block;
    }

    .debug-placeholder .matched-case-row,
    .debug-placeholder .auto-populate-hint {
      margin: 0.3rem 0 0 0;
    }

    .error-banner {
      padding: 0.65rem 0.875rem;
      font-size: 0.8125rem;
      color: var(--cc-error-text);
      background: var(--cc-error-bg);
      border: 1px solid var(--cc-error-border);
      border-radius: 12px;
      margin-bottom: 0.75rem;
    }

    .error-banner[hidden] { display: none; }

    .matched-case-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.4rem;
      flex-wrap: wrap;
    }

    .matched-case-row[hidden] { display: none; }

    .matched-case-left {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      min-width: 0;
      flex: 1;
    }

    .matched-case-right {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-left: auto;
      flex-shrink: 0;
    }

    .matched-case-right[hidden] { display: none; }

    .matched-case {
      font-size: 0.75rem;
      color: var(--cc-text-secondary);
      font-style: italic;
      margin: 0;
    }

    .case-id-badge {
      font-size: 0.6rem;
      padding: 0.15rem 0.45rem;
    }

    .auto-populate-hint {
      font-size: 0.73rem;
      color: var(--cc-brand);
      margin-top: 0.3rem;
      font-style: normal;
      transition: opacity 0.5s ease;
    }

    .auto-populate-hint[hidden] { display: none; }

    /* ── Mode toggle (iOS-style segmented control) ── */
    .tab-strip {
      display: none !important;
    }

    /* ============================================================
       PROGRESS ROW
       ============================================================ */
    .progress-row {
      display: none !important;
    }
    .progress-bar {
      flex: 1;
      height: 2px;
      background: var(--cc-border-soft);
      border-radius: 1px;
    }
    .progress-bar.active {
      background: var(--cc-brand);
    }

    .tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.85rem;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--cc-text-secondary);
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: color 0.15s, background 0.15s, box-shadow 0.15s;
      width: auto;
      margin: 0;
      letter-spacing: 0;
      box-shadow: none;
    }

    .tab-btn:hover {
      color: var(--cc-text-body);
      background: transparent;
      box-shadow: none;
    }

    .tab-btn.active {
      color: var(--cc-text-body);
      background: var(--cc-bg-card);
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(10, 22, 40, 0.12), 0 1px 2px rgba(10, 22, 40, 0.08);
    }

    .tab-btn.active:hover {
      background: var(--cc-bg-card);
    }

    #modeManual {
      display: none !important;
    }

    /* Legacy .mode-radio styles kept as no-ops in case the elements remain;
       the HTML removes them, but the rules don't hurt. */
    .mode-radio { display: none; }

    /* ============================================================
       TRY CHIPS — appears below case name input when input is empty.
       ============================================================ */
    .action-row-slot {
      position: relative;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
    }
    .try-chips {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-top: 0.25rem;
      margin-bottom: 16px;
      transition: opacity 180ms ease;
    }
    .try-chips[hidden] { display: none; }
    .mode-buttons-row[hidden] { display: none; }
    /* Magic home: try-chips fade via opacity + visibility (no hidden attr); mode buttons stay visible. */
    .try-chips-label {
      font-size: 11px;
      color: var(--cc-text-tertiary);
    }
    .try-chip {
      font-size: 12px;
      padding: 4px 12px;
      background: var(--cc-bg-subtle);
      border: 0.5px solid var(--cc-border-soft);
      border-radius: 999px;
      color: var(--cc-brand);
      cursor: pointer;
      font-family: var(--font-body);
      transition: background 0.12s ease, border-color 0.12s ease;
    }

    /* [Day 34 P26/P27] Slightly more prominent try chips in All mode.
       margin-bottom reduced so Generate button sits tight to the chips. */
    body.cite-type-all .try-chip {
      font-size: 13px;
      padding: 5px 14px;
      font-weight: 500;
    }

    body.cite-type-all .try-chips {
      margin-bottom: 8px;
    }
    .try-chip--filter-pill {
      cursor: default;
      pointer-events: none;
    }
    .try-chip--filter-pill:hover {
      background: var(--cc-bg-subtle);
      border-color: var(--cc-border-soft);
    }

    .cc-try-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .try-chip-label-static {
      font-size: 11px;
      color: var(--cc-text-tertiary);
    }

    .search-filters-chip-row,
    .picker-filter-chips {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-left: 4px;
      vertical-align: middle;
    }
    .search-filters-chip-row[hidden],
    .picker-filter-chips[hidden] {
      display: none !important;
    }
    .cc-case-selection-headline {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 0.75rem 0;
    }
    .cc-case-selection-headline .picker-filter-chips {
      margin-left: 0;
    }

    /* ============================================================
       MODE BUTTONS — big filled Magic/Manual buttons before Generate.
       ============================================================ */
    .mode-buttons-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .mode-btn {
      position: relative;
      padding: 12px 16px;
      border: 0.5px solid var(--cc-brand);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%), var(--cc-brand);
      border-radius: 10px;
      cursor: pointer;
      text-align: center;
      font-family: var(--font-body);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.12) inset,
        0 4px 10px var(--cc-brand-a20),
        0 1px 2px var(--cc-brand-a20);
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }
    .mode-btn:hover {
      transform: translateY(-1px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.12) inset,
        0 6px 14px var(--cc-brand-a20),
        0 2px 4px var(--cc-brand-a20);
    }
    .mode-btn:active {
      transform: translateY(1px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 -1px 0 rgba(0, 0, 0, 0.16) inset,
        0 1px 2px var(--cc-brand-a20);
    }
    .mode-btn-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }
    .mode-btn-label {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.005em;
      color: var(--cc-text-on-brand);
    }
    .mode-btn-desc {
      font-size: 11px;
      color: var(--cc-text-on-brand);
      opacity: 0.85;
    }
    .mode-btn svg {
      stroke: var(--cc-text-on-brand);
      color: var(--cc-text-on-brand);
      flex-shrink: 0;
    }

    .beta-badge {
      font-size: 10px;
      padding: 4px 8px;
      background: var(--cc-brand-soft);
      color: var(--cc-brand);
      border-radius: 6px;
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 1;
      flex-shrink: 0;
      /* Flex centers the h1 line-box (includes descender slack "CiteClerk" doesn't use); ~1.5px down = optical center */
      transform: translateY(1.5px);
    }

    @media (prefers-reduced-motion: reduce) {
      .beta-badge {
        transform: none;
      }
    }

    /* ── Magic mode: highlight case name ── */
    body.mode-assisted #caseName {
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px var(--cc-brand-a12);
      background: var(--cc-bg-subtle);
    }

    /* ── Manual mode: highlight case name and case information fields ── */
    body.mode-manual #caseName,
    body.mode-manual #field-volume input,
    body.mode-manual #field-reporter input,
    body.mode-manual #field-page input,
    body.mode-manual #field-year input,
    body.mode-manual #court {
      border-color: var(--cc-brand);
      box-shadow: 0 0 0 3px var(--cc-brand-a12);
      background: var(--cc-bg-subtle);
    }

    /* SCOTUS override: Court field is optional when Reporter is "U.S.",
       so remove the required-field highlight. */
    body.mode-manual #court.scotus-optional {
      border-color: var(--cc-border);
      box-shadow: var(--cc-shadow-card);
      background: var(--cc-bg-card);
    }

    /* ── Manual mode: dim optional fields section ── */
    body.mode-assisted .optional-grid {
      opacity: 1;
    }

    .filters-panel {
      margin-bottom: 0.85rem;
      animation: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      .filters-panel {
        animation: slideDown 0.18s ease;
      }
    }

    .filters-panel[hidden] {
      display: none;
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .auth-gate-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 28, 70, 0.60);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 1.25rem;
    }

    .auth-gate-overlay[hidden] { display: none; }

    .auth-gate-modal {
      position: relative;
      background: #f7f9fc;
      border-radius: 16px;
      border: none;
      box-shadow: 0 32px 100px rgba(0, 28, 70, 0.45), 0 6px 20px rgba(0, 28, 70, 0.20);
      width: 100%;
      max-width: 28rem;
      text-align: center;
      overflow: hidden;
    }

    .auth-gate-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 1.5rem;
      border-radius: 50%;
      background: var(--cc-brand-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ── Navy header ── */
    .auth-gate-header {
      background: #002368;
      padding: 28px 28px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .auth-gate-logo {
      width: 148px;
      color: #fff;
      margin-bottom: 4px;
    }

    .auth-gate-logo svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .auth-gate-title {
      margin: 0;
      padding: 0;
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.25;
      letter-spacing: 0.01em;
    }

    .auth-gate-title em {
      display: block;
      margin-top: 0.1rem;
      font-style: italic;
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.2;
    }

    .auth-gate-title .auth-gate-title-citation {
      font-style: normal;
      font-family: var(--font-display);
      font-size: 1.25rem;
      color: rgba(255, 255, 255, 0.92);
    }

    .auth-gate-subtitle {
      font-size: 0.8125rem;
      color: rgba(255, 255, 255, 0.62);
      line-height: 1.5;
      margin: 0;
    }

    /* ── Body ── */
    .auth-gate-body {
      padding: 24px 24px 20px;
      border-top: 2px solid rgba(0, 58, 143, 0.10);
    }

    .auth-gate-preview {
      position: relative;
      padding: 1rem;
      background: var(--cc-bg-citation-from);
      border: 1.5px solid var(--cc-brand-border);
      box-shadow: 0 1px 3px var(--cc-brand-a06);
      border-radius: 10px;
      margin-bottom: 1.25rem;
      overflow: hidden;
      min-height: 3.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .auth-gate-preview-text {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--cc-text-body);
      filter: blur(4px);
      line-height: 1.6;
      max-width: 96%;
      text-align: center;
      user-select: none;
      pointer-events: none;
      letter-spacing: 0.02em;
    }

    .auth-gate-preview-lock {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--cc-brand);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .auth-gate-preview-lock svg {
      width: 14px;
      height: 14px;
      margin-right: 0.4rem;
    }

    .auth-gate-perks {
      list-style: none;
      padding: 0;
      margin: 0 0 1.25rem;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .auth-gate-perk {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.85rem;
      color: var(--cc-text-body);
      padding: 0.65rem 0.85rem;
      background: var(--cc-bg-subtle);
      border-radius: 8px;
    }

    .auth-gate-check {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      color: var(--cc-brand);
    }

    .auth-gate-cta-google {
      width: 100%;
      padding: 15px 20px;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      background: #003A8F;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s, transform 0.10s;
      margin-bottom: 0.5rem;
      letter-spacing: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
    }

    .auth-gate-cta-google:hover {
      background: #002a6b;
    }

    .auth-gate-cta-google:active {
      transform: scale(0.99);
    }

    .auth-gate-cta-google svg {
      width: 18px;
      height: 18px;
      background: #fff;
      border-radius: 50%;
      padding: 2px;
      flex-shrink: 0;
    }

    .auth-gate-cta-email {
      width: 100%;
      padding: 0.75rem 1rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 500;
      color: #003A8F;
      background: #fff;
      border: 1.5px solid #003A8F;
      border-radius: 10px;
      cursor: pointer;
      margin-bottom: 1rem;
      transition: background 0.15s, color 0.15s;
      text-align: center;
    }

    .auth-gate-cta-email:hover {
      background: #eff4ff;
    }

    .auth-gate-signin-link {
      font-size: 0.8125rem;
      color: var(--cc-text-secondary);
    }

    .auth-gate-signin-btn {
      background: none;
      border: none;
      color: #003A8F;
      cursor: pointer;
      font-size: inherit;
      padding: 0;
      font-family: inherit;
      font-weight: 500;
    }

    .auth-gate-signin-btn:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .auth-gate-maybe-later {
      display: block;
      width: 100%;
      margin-top: 0.75rem;
      padding: 0.25rem;
      background: none;
      border: none;
      font-family: var(--font-body);
      font-size: 0.75rem;
      color: var(--cc-text-secondary);
      cursor: pointer;
      text-align: center;
      transition: color 0.15s;
      opacity: 0.7;
    }

    .auth-gate-maybe-later:hover {
      color: var(--cc-text-body);
      opacity: 1;
    }

    /* ── Modal popup ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10, 22, 40, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 1.25rem;
      backdrop-filter: blur(4px);
    }

    .modal-overlay[hidden] { display: none; }

    .modal {
      background: var(--cc-bg-card);
      border-radius: 14px;
      box-shadow: 0 20px 40px rgba(10, 22, 40, 0.25), 0 1px 3px var(--cc-border);
      padding: 1.25rem 1.5rem 1rem;
      width: 100%;
      max-width: 20rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      text-align: center;
    }

    .modal-title {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 600;
      color: var(--cc-text-body);
      margin: 0;
      line-height: 1.3;
    }

    .modal-message {
      font-size: 0.8125rem;
      color: var(--cc-text-secondary);
      line-height: 1.45;
      margin: 0 0 0.5rem;
    }

    .modal-buttons {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    .modal-btn-primary {
      width: 100%;
      padding: 0.6rem 1rem;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--cc-text-on-brand);
      background: var(--cc-brand);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s;
      text-align: center;
      margin: 0;
      box-shadow: none;
    }

    .modal-btn-primary:hover { background: var(--cc-brand); }

    .modal-btn-destructive {
      width: 100%;
      padding: 0.6rem 1rem;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--cc-text-on-brand);
      background: var(--cc-error-text);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s;
      text-align: center;
      margin: 0;
      box-shadow: none;
    }

    .modal-btn-destructive:hover {
      background: #7a1515;
    }

    .modal-btn-secondary {
      width: 100%;
      padding: 0.6rem 1rem;
      margin-top: 0.3rem;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--cc-brand);
      background: transparent;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s;
      text-align: center;
      box-shadow: none;
    }

    .modal-btn-secondary:hover {
      background: var(--cc-bg-subtle);
    }

    .gpt-only-warning {
      padding: 0.65rem 0.875rem;
      font-size: 0.8rem;
      line-height: 1.5;
      color: var(--cc-warning-text);
      background: #fffbeb;
      border: 1px solid #fcd34d;
      border-radius: 12px;
      margin-bottom: 0.6rem;
    }

    .gpt-only-warning[hidden] { display: none; }

    .unverified-banner {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 8px 12px;
      background: var(--cc-user-bg);
      border: 0.5px solid var(--cc-user-border);
      border-radius: 8px;
      margin-bottom: 1rem;
    }
    .unverified-banner[hidden] {
      display: none;
    }
    .unverified-banner-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--cc-user-text-strong);
      line-height: 1.3;
      font-family: var(--font-body);
    }
    .unverified-banner-body {
      font-size: 11px;
      color: var(--cc-user-text-strong);
      margin-top: 2px;
      line-height: 1.4;
      font-family: var(--font-body);
    }

    .case-name-row {
      display: block;
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;
    }

    /* Anchor for cite-type popover below the input row */
    .cite-type-anchor {
      position: relative;
    }

    /* ─── Cite type picker (Idea D) ─── */

    .cite-type-input-wrap {
      position: relative;
    }

    /* Extra left padding for the input to clear the type tag */
    #field-caseName .cite-type-input-wrap input[type="text"],
    #caseName {
      padding-left: 12px !important;
    }

    .cite-type-tag {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 10px 0 14px;
      border-right: 1px solid var(--cc-brand-a10);
      border-radius: 12px 0 0 12px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease;
      z-index: 1;
    }

    .cite-type-tag:hover {
      background: var(--cc-brand-a04);
    }

    .cite-type-tag:focus-visible {
      outline: 2px solid var(--cc-brand);
      outline-offset: -2px;
      border-radius: 12px 0 0 12px;
    }

    .cite-type-tag-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--cc-brand);
      white-space: nowrap;
      font-family: var(--font-body);
    }

    .cite-type-tag-chevron {
      color: var(--cc-brand);
      opacity: 0.65;
      flex-shrink: 0;
      transition: transform 0.15s ease;
    }

    .cite-type-tag[aria-expanded="true"] .cite-type-tag-chevron {
      transform: rotate(180deg);
    }

    .cite-type-popover {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      background: var(--cc-bg-card);
      border: 1px solid var(--cc-border-soft);
      border-radius: 12px;
      box-shadow: var(--cc-shadow-dropdown);
      min-width: 190px;
      z-index: 200;
      overflow: hidden;
    }

    .cite-type-popover[hidden] { display: none; }

    .cite-type-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      font-size: 13px;
      font-family: var(--font-body);
      color: var(--cc-text-body);
      cursor: pointer;
      transition: background 0.12s ease;
    }

    .cite-type-option:not(.cite-type-option--soon):hover {
      background: var(--cc-brand-soft);
      color: var(--cc-brand);
    }

    .cite-type-option--selected {
      color: var(--cc-brand);
      font-weight: 600;
    }

    .cite-type-option--soon {
      color: var(--cc-text-disabled);
      cursor: default;
    }

    .cite-type-check {
      flex-shrink: 0;
      color: var(--cc-brand);
    }

    .cite-type-soon-badge {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--cc-text-disabled);
      background: var(--cc-bg-muted);
      border-radius: 4px;
      padding: 2px 6px;
      font-family: var(--font-body);
    }

    .cc-section-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--cc-text-secondary);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .cc-source-type-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
      justify-content: center;
    }

    /* [Day 34 P29] Slightly smaller (~10%) so source-type buttons read
       as quiet filters rather than competing with the hero search cluster.
       Border/hover/active states unchanged. */
    .cc-source-type-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1.5px solid var(--cc-brand);
      background: var(--cc-bg-card);
      color: var(--cc-text-secondary);
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
    }

    .cc-source-type-btn:hover {
      background: rgba(0, 58, 143, 0.04);
      color: var(--cc-brand);
    }

    .cc-source-type-btn--active {
      background: var(--cc-brand);
      border-color: var(--cc-brand);
      color: #fff;
    }

    /* Constitution Magic/Manual mode toggle */
    .cc-const-mode-row {
      display: flex;
      gap: 0.375rem;
      margin-bottom: 0.25rem;
    }
    .cc-const-mode-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.75rem;
      font-size: 0.8125rem;
      font-weight: 500;
      border-radius: 6px;
      border: 1px solid var(--cc-border-soft);
      background: transparent;
      color: var(--cc-text-secondary);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .cc-const-mode-btn:hover {
      background: var(--cc-bg-hover);
      color: var(--cc-text-primary);
    }
    .cc-const-mode-btn--active {
      background: var(--cc-brand-a12);
      border-color: var(--cc-brand);
      color: var(--cc-brand);
    }

    .cite-type-tag,
    .cite-type-popover,
    .cite-type-anchor > .cite-type-input-wrap .cite-type-tag {
      display: none !important;
    }

    .copy-tooltip {
      position: fixed;
      background: var(--cc-text-body);
      color: var(--cc-text-on-brand);
      font-size: 0.72rem;
      font-weight: 600;
      padding: 0.3rem 0.65rem;
      border-radius: 6px;
      pointer-events: none;
      z-index: 200;
      opacity: 0;
      transition: opacity 0.15s ease;
      white-space: nowrap;
    }

    .copy-tooltip.visible { opacity: 1; }

    .copy-toast {
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%) translateY(0.5rem);
      background: var(--cc-text-body);
      color: var(--cc-text-on-brand);
      font-size: 0.8rem;
      font-weight: 600;
      padding: 0.5rem 1.25rem;
      border-radius: 999px;
      z-index: 200;
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
      pointer-events: none;
      white-space: nowrap;
    }

    .copy-toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ── In-card header (replaces the deleted topbar) ── */
    .cc-card-header {
      margin-bottom: 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--cc-border-soft);
    }

    .cc-card-header .cc-topbar-title {
      font-family: var(--font-body);
      font-size: 1.375rem;
      font-weight: 600;
      color: var(--cc-text-primary);
      letter-spacing: 0;
      margin: 0 0 0.25rem 0;
      line-height: 1.2;
    }

    .cc-card-header .cc-topbar-sub {
      display: none;
    }

    /* Compact navigation drawer — sidebar overlays main (viewport ≤1199px) */
    @media (max-width: 1199px) {
      html {
        background-color: #003A8F;
      }

      body {
        grid-template-columns: 1fr minmax(0, 360px);
        grid-template-rows: 58px 1fr;
        grid-template-areas:
          "topnav topnav"
          "main right";
      }

      .cc-marketing-nav-inner {
        padding: 0 2rem 0 1.4375rem;
        gap: 0.75rem;
      }

      .cc-marketing-nav-left {
        gap: 0.75rem;
      }

      .cc-marketing-logo-zone {
        width: auto;
        min-width: unset;
        padding: 0;
        justify-content: flex-start;
        gap: 0.5rem;
      }

      .cc-marketing-nav-left .cc-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.2rem;
        color: #ffffff;
        padding: 0;
      }

      .cc-marketing-links-zone {
        display: none;
      }

      .cc-sidebar-marketing-section {
        display: block;
      }

      .field label,
      .optional-grid label {
        letter-spacing: 0;
        font-size: 0.65rem;
      }

      .cc-section-label {
        letter-spacing: 0;
      }

      main#mainContent {
        grid-area: main;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
      }

      .cc-sidebar {
        grid-area: auto;
        position: fixed;
        top: 0;
        left: 0;
        width: min(280px, 82vw);
        height: 100vh;
        height: 100dvh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-sizing: border-box;
      }

      .cc-sidebar.cc-sidebar--open {
        transform: translateX(0);
      }

      .cc-sidebar.cc-sidebar--open .cc-sidebar-nav {
        padding-top: 4.5rem;
      }

      .cc-sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 199;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
      }

      .cc-sidebar-scrim.cc-sidebar-scrim--visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      body.cc-sidebar-drawer-open {
        overflow: hidden;
      }

      .cc-right-sidebar {
        grid-area: right;
      }

      .cc-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.2rem;
        color: var(--cc-text-primary);
        padding: 0;
      }

      .cc-source-type-picker {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
      }

      .cc-source-type-btn {
        flex-shrink: 0;
      }
    }

    @media (max-width: 767px) {
      body {
        grid-template-columns: 1fr;
        grid-template-areas:
          "topnav"
          "main";
      }

      .cc-right-sidebar {
        display: none;
      }

      /* Mobile-only: hide top-nav links and usage meter, shrink logo, tighten logo zone */
      .cc-marketing-links,
      .cc-marketing-help,
      .cc-marketing-links-zone {
        display: none;
      }

      .cc-marketing-logo-svg {
        width: 90px;
        height: 26px;
      }

      .cc-marketing-logo-zone {
        width: auto;
        min-width: unset;
        padding: 0 0.75rem;
        justify-content: flex-start;
        gap: 0.5rem;
      }

      .cc-marketing-nav-right .site-header-usage-meter,
      .cc-marketing-nav-right .site-header-tier-badge {
        display: none !important;
      }
    }

    @media (max-width: 480px) {
      .cc-card-header .cc-topbar-title {
        font-size: 1.875rem;
      }
    }

    @media (max-width: 1024px) and (orientation: landscape) {
      html, body {
        background-color: #003A8F;
      }

      main#mainContent {
        background-color: #ffffff;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    /* ============================================================
       MOBILE RESPONSIVE RULES (Phase H final pass)
       Standard breakpoints: 480px (most common) + 380px (very narrow).
       ============================================================ */
    @media (max-width: 480px) {
      /* Try chips: wrap to multiple lines on narrow screens */
      .try-chips {
        flex-wrap: wrap;
        row-gap: 6px;
      }

      /* Mode buttons: tighten padding so labels don't truncate */
      .mode-btn {
        padding: 10px 12px;
      }
      .mode-btn-label {
        font-size: 13px;
      }
      .mode-btn-desc {
        font-size: 11px;
      }

      /* Citation output: scale down DM Serif Display so it doesn't overflow.
         Phase D used 19px; on mobile, 16px reads cleaner without sacrificing the grand-citation-moment feel. */
      .citation-output {
        font-size: 16px;
        font-weight: 400 !important;
      }

      /* Format toolbar: smaller buttons so they don't push the citation label */
      .format-toolbar .format-toggle-btn,
      .format-toolbar .copy-btn {
        padding: 4px 8px;
      }
      .format-icon-italic,
      .format-icon-underline {
        font-size: 11px;
      }

      /* Auth gate modal: 90vw width on mobile so it doesn't get cropped */
      .auth-gate-modal {
        max-width: 90vw;
        padding: 24px 20px;
      }

      /* State-screen action buttons: full-width on mobile */
      .state-actions {
        max-width: 280px;
      }

      /* Shortcite screen nav: ensure back-button + Start over don't wrap */
      .shortcite-screen-nav {
        flex-wrap: wrap;
        row-gap: 4px;
      }

      /* Section labels and subtitles: tighten line-height for reading on phones */
      .section-label {
        font-size: 12px;
      }
      .shortcite-subtitle,
      .advanced-subtitle {
        font-size: 12px;
      }
    }

    @media (max-width: 380px) {
      /* Very narrow screens (iPhone SE 1st gen, old Androids) */

      /* Mode buttons: stack vertically when 1fr 1fr is too cramped */
      .mode-buttons-row {
        grid-template-columns: 1fr;
      }

      /* Citation output: even tighter scale */
      .citation-output {
        font-size: 15px;
        font-weight: 400 !important;
      }

      /* State-screen narrowing */
      .state-actions {
        max-width: 100%;
      }

      /* Tab strip: smaller font/padding */
      .tab-btn {
        padding: 0.4rem 0.8rem;
        font-size: 12px;
      }

      /* Header at very narrow: shrink history button further */
      .site-header-history {
        min-width: 44px;
        width: 44px;
      }

    }


/* ══════════════════════════════════════════════════════════════
   Extracted from index.html inline <style> block — Day 27.
   Kept at END OF FILE to preserve original source order / cascade.
   The inline block previously loaded after styles.css; keeping it
   last here preserves every same-specificity tie.
   ══════════════════════════════════════════════════════════════ */

.cc-const-manual-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.cc-const-manual-panel[hidden] {
  display: none !important;
}

/* Constitution Magic — heading + jurisdiction + query, styled like case-name-row */
.const-magic-row {
  margin-bottom: 0.75rem;
}
.const-magic-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.const-magic-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--cc-text-secondary);
  margin: 0;
}
.const-magic-input-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
}
.const-magic-juris-wrap {
  flex: 0 0 auto;
  min-width: 9rem;
  max-width: 11rem;
  position: relative;
}
.const-magic-query-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Constitution Magic — required fields use the same recipe as
   Manual-mode case fields (border + halo + bg-subtle fill). */
body.cite-type-constitution.mode-assisted #constMagicJuris,
body.cite-type-constitution.mode-assisted #constMagicInput {
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px var(--cc-brand-a12);
  background: var(--cc-bg-subtle);
}

/* Error state takes precedence */
body.cite-type-constitution.mode-assisted #field-constMagicJuris.has-error #constMagicJuris,
body.cite-type-constitution.mode-assisted #field-constMagicInput.has-error #constMagicInput {
  border-color: var(--cc-error-text);
  box-shadow: 0 0 0 2px rgba(153, 27, 27, 0.12);
  background: var(--cc-bg-card);
}

body.cite-type-constitution #tryChips {
  display: none !important;
}

/* Constitution Magic inputs — match the case-name input dimensions */
body.cite-type-constitution.mode-assisted #constMagicJuris,
body.cite-type-constitution.mode-assisted #constMagicInput {
  min-height: 3rem;
  padding: 0.85rem 1rem;
  font-size: 1.125rem;
  font-weight: 500;
}

body.mode-assisted.cite-type-constitution #constMagicInput { padding-right: 4.5rem; }

body.cite-type-constitution.mode-assisted #constMagicInput::placeholder {
  font-size: 1rem;
  font-weight: 400;
}

/* Rule / Restatement fields use the default input shape, consistent
   with Code and Session Law. The former oversized required-field
   recipe (3rem / brand halo / bg-subtle fill) was removed for
   cross-form visual consistency. Error states fall through to the
   generic .field.has-error rule, same as the other statute forms. */

/* Right-padding for the select so text doesn't overlap the chevron */
body.cite-type-constitution.mode-assisted #constMagicJuris {
  padding-right: 2rem;
}

/* Let the juris wrap grow a bit so "U.S. Const." doesn't crowd the chevron */
body.cite-type-constitution.mode-assisted .const-magic-juris-wrap {
  min-width: 11rem;
  max-width: 13rem;
}

/* Constitution: hide Advanced Options sections that don't apply per Indigo R23 */
body.cite-type-constitution #pinciteSection,
body.cite-type-constitution #woaSection,
body.cite-type-constitution #historySection,
body.cite-type-constitution #adv-div-signal-pincite,
body.cite-type-constitution #adv-div-pincite-woa,
body.cite-type-constitution #adv-div-pincite-ep,
body.cite-type-constitution #adv-div-woa-ep,
body.cite-type-constitution #adv-div-ep-history {
  display: none !important;
}

/* Constitution: hide the first Generate Citation button inside the form.
   The global ccGenerateBtn below Advanced Options remains the single
   Generate button for Constitution. */
body.cite-type-constitution #btnConstitutionGenerate,
body.cite-type-constitution #stFormConstitution .cc-generate-row {
  display: none !important;
}

/* [Day 34 P30] History chip colors — duplicate set removed.
   Canonical declarations live near line 1729 (next to other
   .cc-right-history-card rules). All color values were identical
   to that set after P25, so removing this block is a pure
   deduplication with no visual change. */

body:not(.cite-type-case) #additionalOptionsSection {
  display: none !important;
}

/* ── Input screen toggle rows ── */
.cc-input-toggle-row {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cc-border-soft);
}

.cc-input-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: left;
  color: inherit;
}

.cc-input-toggle-track {
  flex-shrink: 0;
  margin-top: 2px;
  width: 2rem;
  height: 1.125rem;
  border-radius: 999px;
  background: var(--cc-border);
  position: relative;
  transition: background 0.15s;
}

.cc-input-toggle--on .cc-input-toggle-track {
  background: var(--cc-brand);
}

.cc-input-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.cc-input-toggle--on .cc-input-toggle-thumb {
  transform: translateX(0.875rem);
}

.cc-input-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--cc-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cc-input-toggle-label--static {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--cc-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0;
}

.cc-input-toggle-hint {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--cc-text-tertiary, var(--cc-text-secondary));
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

/* ── Advanced screen citation preview ── */
.cc-advanced-preview {
  background: var(--cc-bg-subtle);
  border: 1px solid var(--cc-border-soft);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
}

.cc-advanced-preview-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cc-text-secondary);
  margin: 0 0 0.4rem;
}

.cc-advanced-preview-box {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cc-text-primary);
}

/* ── Source type tab colors — professional style ── */

/* [Day 34 P25] Per-type active colors. Unselected state uses brand-blue
   border for all types (set on .cc-source-type-btn base rule above).
   Only the active/selected state uses the type's specific color. */

/* Cases — Red */
.cc-source-type-btn[data-type="case"].cc-source-type-btn--active {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.cc-source-type-btn[data-type="case"]:not(.cc-source-type-btn--active):hover {
  border-color: #dc2626;
  color: #dc2626;
}

/* Statutes — Orange */
.cc-source-type-btn[data-type="statute"].cc-source-type-btn--active {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
}
.cc-source-type-btn[data-type="statute"]:not(.cc-source-type-btn--active):hover {
  border-color: #ea580c;
  color: #ea580c;
}

/* Constitutions — Yellow */
.cc-source-type-btn[data-type="constitution"].cc-source-type-btn--active {
  background: #ca8a04;
  border-color: #ca8a04;
  color: #fff;
}
.cc-source-type-btn[data-type="constitution"]:not(.cc-source-type-btn--active):hover {
  border-color: #ca8a04;
  color: #ca8a04;
}

/* Regulations — Green */
.cc-source-type-btn[data-type="regulation"].cc-source-type-btn--active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.cc-source-type-btn[data-type="regulation"]:not(.cc-source-type-btn--active):hover {
  border-color: #16a34a;
  color: #16a34a;
}

/* Legislative — Blue */
.cc-source-type-btn[data-type="legislative"].cc-source-type-btn--active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.cc-source-type-btn[data-type="legislative"]:not(.cc-source-type-btn--active):hover {
  border-color: #2563eb;
  color: #2563eb;
}

/* Webpages — Purple (unchanged) */
.cc-source-type-btn[data-type="webpage"].cc-source-type-btn--active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}
.cc-source-type-btn[data-type="webpage"]:not(.cc-source-type-btn--active):hover {
  border-color: #7c3aed;
  color: #7c3aed;
}

/* Books & Journals — Gray */
.cc-source-type-btn[data-type="secondary"].cc-source-type-btn--active {
  background: #64748b;
  border-color: #64748b;
  color: #fff;
}
.cc-source-type-btn[data-type="secondary"]:not(.cc-source-type-btn--active):hover {
  border-color: #64748b;
  color: #64748b;
}

/* Constitution Manual — card heading */
.cc-const-info-card {
  margin-top: 1rem;
}
.cc-const-info-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--cc-text-secondary);
  margin-bottom: 0.85rem;
}

/* Constitution Manual — two-row grid */
.cc-const-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

/* Row 1 field widths */
.cc-const-field-juris  { flex: 2; min-width: 0; }
.cc-const-field-part   { flex: 1.5; min-width: 0; }
.cc-const-field-number { flex: 1; min-width: 0; }

/* Row 2 field widths — Section and Clause equal 50/50 */
.cc-const-field-section { flex: 1; min-width: 0; }
.cc-const-field-clause  { flex: 1; min-width: 0; }

/* Optional label sub-text */
.cc-field-label-opt {
  font-weight: 400;
  opacity: 0.65;
  font-size: 11px;
}

/* Required-field blue glow for Manual mode required fields */
body.cite-type-constitution.mode-manual #stConstJuris,
body.cite-type-constitution.mode-manual #stConstPart,
body.cite-type-constitution.mode-manual #stConstNumber {
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px var(--cc-brand-a12);
  background: var(--cc-bg-subtle);
}

/* 5-S2: utility classes for the genuinely-repeated inline styles.
   Scoped extraction — only the high-frequency patterns, verified by
   occurrence count. Values are byte-identical to the inline styles
   they replace. */
.cc-u-flex-shrink-0 { flex-shrink: 0; }
.cc-u-stack { display: flex; flex-direction: column; gap: 1rem; }
.cc-u-mt-075 { margin-top: 0.75rem; }
.cc-u-row-center { display: flex; align-items: center; gap: 6px; }

.cc-small-caps {
  font-variant: small-caps;
  font-variant-caps: small-caps;
}

/* Day 35 Sidebar Redesign — Magic Cite mode hides source type buttons.
   Guide Cite and Expert Cite show them (current behavior). */
body.sidebar-mode-magic #ccCiteTypeButtonGroup,
body.sidebar-mode-magic .cc-cite-type-buttons,
body.sidebar-mode-magic [data-cite-type-buttons],
body.sidebar-mode-magic #ccSourceTypePicker,
body.sidebar-mode-magic .cc-source-type-picker {
  display: none !important;
}

/* Day 35 Magic Cite Layout Polish — scoped to Magic Cite only.
   Guide / Expert / Check / History layouts unchanged. */

/* Hide the topbar header. The CiteClerk logo + sidebar highlight already
   identify the mode. The "Magic Cite" title and subtitle are decorative
   here and create bottom-heavy composition. */
body.sidebar-mode-magic .cc-card-header {
  display: none !important;
}

body.sidebar-mode-check .cc-card-header { display: none; }

/* Shrink the universal CiteClerk logo from 480px to 340px.
   Keeps the 75% max-width cap for narrow viewports. */
body.sidebar-mode-magic.cite-type-all.destination-craft .cc-universal-logo-svg {
  width: 340px !important;
  max-width: 70% !important;
}

/* Reduce the logo wrap's bottom margin so the input sits closer. */
body.sidebar-mode-magic.cite-type-all.destination-craft #universalLogoWrap {
  margin-bottom: 1rem !important;
}

/* Tighten spacing between input, Try chips, and Generate button so they
   read as one coherent centered cluster instead of three separated zones. */
body.sidebar-mode-magic .cc-try-chips {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

body.sidebar-mode-magic .cc-generate-row:has(#ccGenerateBtn) {
  margin-top: 0.75rem !important;
}

/* Slightly larger input for visual prominence — the input IS the page now. */
body.sidebar-mode-magic #caseName {
  font-size: 1.1875rem !important;
  min-height: 3.25rem !important;
  padding: 0.95rem 1rem !important;
  padding-right: 130px !important; /* keep room for Advanced pill */
}

/* Day 36 — Hide the "All" source type button in Guide Cite and Expert Cite.
   All is conceptually equivalent to Magic Cite, which has its own sidebar
   entry. Guide and Expert are type-specific modes; All has no role there. */
body.sidebar-mode-guide .cc-source-type-btn[data-type="all"],
body.sidebar-mode-expert .cc-source-type-btn[data-type="all"] {
  display: none !important;
}

/* Day 36 — Optical-center nudge for SVG icons inside section labels.
   align-items: center aligns bounding boxes, but text glyphs sit lower
   in their line box than SVGs do, making icons appear slightly high.
   2px translateY restores optical alignment with the text baseline.
   (1px was visually insufficient — bumped 2026-05-21.) */
.cc-section-label > svg {
  transform: translateY(2px);
}

/* Day 36 — Sidebar group dividers between Citation modes / Check Cite / Data nav.
   Same visual treatment as .cc-sidebar-marketing-divider for consistency. */
.cc-sidebar-divider-row {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cc-sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0.5rem 16px;
}

    /* ── Global footer ── */
    .cc-global-footer {
      background: #001852;
      font-family: 'DM Sans', system-ui, sans-serif;
      padding: 0;
      margin-top: auto;
      width: 100%;
    }
    .cc-global-footer-inner {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 32px;
      max-width: 1280px;
      margin: 0 auto;
      padding: 24px 40px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .cc-gf-brand {
      display: flex;
      flex-direction: column;
    }
    .cc-gf-logo-link {
      display: inline-block;
      text-decoration: none;
      margin-bottom: 14px;
    }
    .cc-gf-logo-svg {
      width: 180px;
      height: auto;
      display: block;
    }
    .cc-gf-tagline {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.72);
      line-height: 1.6;
      margin: 0;
      max-width: 200px;
    }
    .cc-gf-col-heading {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      margin: 0 0 10px;
      padding: 0;
    }
    .cc-gf-link {
      display: block;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
      margin-bottom: 6px;
      transition: color 0.15s;
    }
    .cc-gf-link:hover {
      color: #ffffff;
    }
    .cc-global-footer a:focus-visible,
    .cc-gf-logo-link:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.80);
      outline-offset: 3px;
      border-radius: 3px;
    }
    .cc-global-footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1280px;
      margin: 0 auto;
      padding: 10px 40px 16px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .cc-gf-copy {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.30);
      font-family: 'DM Sans', system-ui, sans-serif;
    }
    .cc-gf-disclaimer {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.25);
      font-family: 'DM Sans', system-ui, sans-serif;
      text-align: right;
    }
    @media (max-width: 700px) {
      .cc-global-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
        padding: 40px 24px 32px;
      }
      .cc-gf-brand {
        grid-column: 1 / -1;
      }
      .cc-global-footer-bottom {
        padding: 16px 24px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .cc-gf-disclaimer {
        text-align: left;
      }
    }
    @media (max-width: 480px) {
      .cc-global-footer-inner {
        grid-template-columns: 1fr;
        padding: 32px 20px 28px;
      }
    }