/*
 * style-document.css
 * Document workspace layout and component styles.
 * Design tokens live in variables.css (:root + [data-theme="dark"]).
 *
 * Light mode is the default. Add class "dark-mode" to .sk-ui-demo for dark mode.
 */

/* ─── Breadcrumbs (Global) ──────────────────────────────────────────────── */

/* Document breadcrumb styling - more specific selector than style-lessons.css */
body .full-height .sk-breadcrumb,
body .full-height .sk-breadcrumb .crumb,
body .full-height .sk-breadcrumb .crumb-brand,
body .full-height .sk-breadcrumb .crumb-link,
body .full-height .sk-breadcrumb .crumb-sep {
  font-family: "Manrope", "Noto Sans", Arial, sans-serif;
}

body .full-height .sk-breadcrumb {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 1.25rem;
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 20;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

body .full-height .sk-breadcrumb .crumb {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.35;
}

body .full-height .sk-breadcrumb .crumb-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--text);
  padding-left: 0;
  line-height: 1.2;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #1e293b;
  flex-shrink: 0;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-logo-wrap img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

body .full-height .sk-breadcrumb .crumb-link {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--skilvana-links);
  font-weight: 500;
  font-size: 0.875rem;
}

body .full-height .sk-breadcrumb .crumb-link:hover {
  color: var(--skilvana-links-hover);
  text-decoration: underline;
}

body .full-height .sk-breadcrumb .crumb-current {
  color: var(--skilvana-primary-headings);
  font-weight: 600;
}

body .full-height .sk-breadcrumb .crumb-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--border-subtle);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  width: 1em;
  flex-shrink: 0;
  user-select: none;
  margin: 0 0.05rem;
  transform: translateY(-0.05em);
}

body .full-height .sk-breadcrumb.document-shell-header {
  flex-wrap: wrap;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-spacer {
  flex: 1;
  min-width: 0.5rem;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-user-name {
  flex-shrink: 1;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  margin-right: 0;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-logout {
  margin-left: auto;
  flex-shrink: 0;
}

/*
 * Pre-fill help icon + tooltip — top-level selectors so the bubble is never
 * inline with the icon (nested rules can fail to apply in some environments).
 * Tooltip opens below the icon to avoid clipping under overflow scroll areas.
 */
body .sk-ui-demo .field-help-tooltip-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body .sk-ui-demo .field-help-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: help;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

body .sk-ui-demo .field-help-tooltip-trigger:hover,
body .sk-ui-demo .field-help-tooltip-trigger:focus-visible {
  color: var(--accent);
  background: rgba(9, 104, 232, 0.08);
  outline: none;
}

body .sk-ui-demo .field-help-icon-svg {
  display: block;
}

body .sk-ui-demo .field-help-tooltip-bubble,
body .sk-ui-demo .field-help-tooltip-wrap > button + span[role="tooltip"] {
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 500;
  text-align: left;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  z-index: 200;
  pointer-events: none;
  display: none;
}

body .sk-ui-demo .field-help-tooltip-wrap:hover .field-help-tooltip-bubble,
body .sk-ui-demo .field-help-tooltip-wrap:focus-within .field-help-tooltip-bubble,
body .sk-ui-demo .field-help-tooltip-wrap:hover > button + span[role="tooltip"],
body .sk-ui-demo .field-help-tooltip-wrap:focus-within > button + span[role="tooltip"] {
  display: block;
}

/* Checkbox + label + help icon: one vertical rhythm (flex, not inline-baseline). */
body .sk-ui-demo .ask-question-action-bar__main {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

body .sk-ui-demo .ask-question-action-bar__main .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.35;
  margin: 0;
}

body .sk-ui-demo .ask-question-action-bar__main .checkbox-inline input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}

/* Optical center with ~15–16px checkbox + 0.9rem label */
body .sk-ui-demo .ask-question-action-bar__main .field-help-tooltip-wrap {
  align-self: center;
  transform: translateY(2px);
}

body .sk-ui-demo .question-generation-row .autofill-inline-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body .sk-ui-demo .question-generation-row .autofill-inline-group .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.35;
  margin: 0;
}

body .sk-ui-demo .question-generation-row .autofill-inline-group .checkbox-inline input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}

body .sk-ui-demo .question-generation-row .autofill-inline-group .field-help-tooltip-wrap {
  align-self: center;
  transform: translateY(2px);
}

/* ─── Document workspace page ───────────────────────────────────────────── */

/* Wrapper when onboarding + workspace share main-content (flex child) */
.document-workspace-page-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-self: stretch;
  height:100%;
}

.document-workspace-page-wrap > .sk-ui-demo {
  flex: 1;
  min-height: 0;
}

.sk-ui-demo {
  font-family: "Manrope", "Noto Sans", Arial, sans-serif;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-page);
  height: 100%;
  padding: 1.5rem 2rem;

  /* Two-column layout: chat ~25%, workspace ~75% (flex-grow ratio 25:75). */
  & {
    display:flex;
    flex-direction:row;
    padding:0;
    height:100%;
    overflow:hidden;

    .left-sidebar {
      flex: 25 1 0;
      min-width: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      &.expanded {
        flex: 25 1 0;
      }

      &:not(.expanded) {
        flex: 0 0 3.25rem;
        cursor: pointer;
      }
    }

    .left-sidebar:not(.expanded) .chat-container {
      display: none;
    }

    .left-sidebar .doc-chat-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.75rem 0.75rem 0.25rem;
      flex-shrink: 0;
    }

    .left-sidebar .doc-chat-sidebar-title {
      margin: 0;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-muted);
    }

    .left-sidebar .doc-chat-sidebar-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--bg-card);
      color: var(--text);
      cursor: pointer;
      flex-shrink: 0;
    }

    .left-sidebar .doc-chat-sidebar-toggle:hover {
      background: var(--bg-card-raised);
      border-color: var(--border);
    }

    .left-sidebar .doc-chat-sidebar-toggle:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .left-sidebar .doc-chat-sidebar-toggle img {
      width: 1.25rem;
      height: 1.25rem;
      display: block;
      /* chat_toggle.png is light-on-transparent for dark lesson chrome */
      filter: brightness(0);
    }

    .left-sidebar:not(.expanded) .chat-collapsed-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.75rem 0.5rem;
      flex-shrink: 0;
    }

    .left-sidebar.expanded .chat-collapsed-stack {
      display: none;
    }
    .workspace-main {
      flex: 75 1 0;
      min-width: 0;
      overflow-y: auto;
      padding-top: 0.5rem;
    }

    @media (min-width: 901px) {
      .workspace-main {
        padding-right: 1.25rem;
      }
    }
  }

  .document-title-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
    padding: 0.45rem 0.75rem 0.7rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-page);
  }

  .document-title-panel__question {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--accent);
  }

  .document-title-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
  }

  .document-title-panel__save {
    margin-right: 0.15rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
  }

  .document-title-panel__save:hover:not(:disabled) {
    background: var(--bg-card-raised);
    border-color: var(--border);
  }

  .document-title-panel__save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .document-title-panel__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-card);
    cursor: pointer;
  }

  .document-title-panel__icon-btn:hover:not(:disabled) {
    background: var(--bg-card-raised);
    border-color: var(--border);
  }

  .document-title-panel__icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .document-title-panel__icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .document-title-panel__icon {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
  }

  .document-title-panel__icon--undo {
    transform: scaleX(-1);
  }

  .workspace-tab-bar {
    margin-bottom: 0.75rem;
  }

  /* Legacy accordion styles (unused in tab layout; kept for PDF export selectors) */
  .document-module-accordion {
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 0.75rem;
    overflow: hidden;
  }

  .document-module-accordion-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    border: none;
    background: var(--bg-card-raised);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
  }

  .document-module-accordion-header:hover {
    background: var(--bg-btn-hover);
  }

  .document-module-accordion-header:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .document-module-accordion-header:focus:not(:focus-visible) {
    outline: none;
  }

  .document-module-accordion-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .document-module-accordion-chevron {
    flex-shrink: 0;
    font-size: 0.65rem;
    opacity: 0.75;
    width: 1rem;
    text-align: center;
  }

  .document-module-accordion-title {
    flex: 1;
  }

  .document-module-accordion--collapsed .document-module-accordion-header {
    border-bottom: none;
  }

  .document-module-accordion-body {
    padding: 0;
  }

  .document-module-accordion-body[hidden] {
    display: none;
  }

  /* Inner modules already use .sk-card; soften double chrome slightly */
  .document-module-accordion-body .document-module.sk-card {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* ─── Chat transcript messages ─────────────────────────────────────── */

.chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    .transcript-lines {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      min-height: 0;

      background:white;
      border-radius:var(--radius-card);
      margin:0.5rem;
    }


    .doc-chat-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.35rem 0.75rem;
      border-bottom: 1px solid var(--border);
      background: var(--bg-card);
      border-radius: var(--radius-card) var(--radius-card) 0 0;
      margin: 0.5rem;
      margin-bottom: 0;
    }

    .doc-chat-critique-btn {
      margin-left: auto;
    }

    .doc-chat-critique-spinner {
      width: 14px;
      height: 14px;
      border: 2px solid var(--border);
      border-top-color: var(--accent-color);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex-shrink: 0;
    }
  }

  .doc-chat-message {
    padding: 0.5rem 0.75rem;
    border-radius: var(--chat-bubble-radius, 8px);
    max-width: 85%;
    font-size: 0.9rem;
    line-height: 1.4;

    &.user {
      align-self: flex-end;
      background: var(--chat-user-bg);
      color: var(--chat-user-text);
    }

    &.ai {
      align-self: flex-start;
      background: var(--chat-ai-bg);
      color: var(--chat-ai-text);
    }

    &.doc-chat-thinking {
      display: flex;
      gap: 4px;
      align-items: center;
      padding: 0.6rem 0.9rem;

      span {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #888;
        animation: dev-dot-bounce 1.1s infinite ease-in-out;

        &:nth-child(1) { animation-delay: 0s; }
        &:nth-child(2) { animation-delay: 0.18s; }
        &:nth-child(3) { animation-delay: 0.36s; }
      }
    }
  }

  /* Empty-state prompt card */
  .doc-chat-empty-state {
    align-self: stretch;
    margin-top: auto;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--chat-ai-bg);
    color: var(--fg-muted);
    font-size: 0.875rem;
    text-align: center;
  }

  /* AI suggestion card — amber/green palette (matches pre-refactor doc chat) */
  .doc-chat-suggestion {
    align-self: flex-start;
    max-width: min(92%, 26rem);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem 0.95rem;
    font-size: 0.875rem;
    border: 1.5px solid #d1a800;
    background: #fffbe6;

    &.doc-chat-suggestion--collapsed {
      padding-bottom: 0.75rem;
    }

    &.accepted {
      border-color: #1a9e4a;
      background: #f0faf4;
      .suggestion-label { color: #1a9e4a; }
    }

    &.rejected {
      border-color: #9ca3af;
      background: #f9fafb;
      .suggestion-label { color: var(--text-muted); }
    }

    .suggestion-card-toggle {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      text-align: left;
      cursor: pointer;
      font: inherit;
      color: inherit;

      &:hover .suggestion-label {
        opacity: 0.85;
      }
    }

    .suggestion-card-chevron.document-module-accordion-chevron {
      color: #78716c;
    }

    .suggestion-label {
      display: block;
      font-weight: 700;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    &.pending .suggestion-label {
      color: #a07800;
    }

    .suggestion-card-body {
      margin-top: 0.35rem;
    }

    .suggestion-summary {
      margin: 0.45rem 0 0.15rem;
      line-height: 1.5;
      color: var(--text);
      font-size: 0.875rem;
    }

    .suggestion-summary + .suggestion-summary {
      margin-top: 0.35rem;
    }

    .suggestion-summary--preview {
      margin: 0.35rem 0 0;
      font-size: 0.8125rem;
      line-height: 1.45;
      color: #4b5563;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    &.doc-chat-suggestion--collapsed .suggestion-actions {
      margin-top: 0.45rem;
    }

    .suggestion-digest {
      margin: 0.35rem 0 0;
      line-height: 1.45;
    }

    .suggestion-digest-sep {
      font-weight: 500;
    }

    .suggestion-change-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.5rem;
      margin: 0.4rem 0 0;
    }

    .suggestion-hint {
      margin: 0.45rem 0 0;
      line-height: 1.45;
    }

    &.doc-chat-suggestion--primary-layout {
      max-width: min(92%, 28rem);
      padding: 1rem 1.1rem 1.05rem;

      &.pending {
        border-color: #e5e7eb;
        background: var(--bg-card);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      }

      &.accepted {
        border-color: #86efac;
        background: #f0fdf4;
      }

      &.rejected {
        border-color: #e5e7eb;
        background: #f9fafb;
      }

      .suggestion-card-body {
        margin-top: 0;
      }
    }

    .suggestion-primary-badge {
      display: inline-block;
      margin-bottom: 0.55rem;
      padding: 0.22rem 0.55rem;
      border-radius: 4px;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background: #dcfce7;
      color: #166534;
      border: 1px solid #bbf7d0;
    }

    .suggestion-primary-change {
      margin-top: 0;
      padding: 0;
      border: none;
      background: transparent;
    }

    .suggestion-primary-change-headline {
      margin: 0;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.35;
      color: var(--text);
    }

    .suggestion-primary-change-description {
      margin: 0.55rem 0 0;
      font-size: 0.875rem;
      line-height: 1.55;
      color: var(--text-dim);
    }

    .suggestion-downstream {
      margin-top: 0.85rem;
      border-radius: 8px;
      border: 1px solid #dbeafe;
      background: var(--bg-card-raised);
    }

    .suggestion-downstream-header {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
      margin: 0;
      padding: 0.65rem 0.75rem;
      border: none;
      border-radius: 8px;
      background: transparent;
      text-align: left;
      cursor: pointer;
      font: inherit;
      color: var(--skilvana-links);

      &:hover {
        background: var(--color-accent-700);
      }
    }

    .suggestion-downstream-icon {
      flex: 0 0 auto;
      color: var(--skilvana-links);
    }

    .suggestion-downstream-title {
      font-size: 0.8125rem;
      font-weight: 600;
      flex: 1;
      color: var(--skilvana-links);
    }

    .suggestion-downstream-chevron.document-module-accordion-chevron {
      color: var(--skilvana-links);
      font-size: 0.75rem;
    }

    .suggestion-downstream-body {
      padding: 0 0.75rem 0.75rem;
      border-top: 1px solid #dbeafe;
    }

    .suggestion-downstream-snapshots {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding-top: 0.65rem;
    }

    .suggestion-downstream-tool {
      padding: 0.55rem 0.65rem;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg-card);
    }

    .suggestion-downstream-tool-title {
      display: block;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .suggestion-downstream-tool-summary {
      margin: 0.3rem 0 0;
      font-size: 0.8125rem;
      line-height: 1.45;
      color: var(--skilvana-body-text);
    }

    &.doc-chat-suggestion--primary-layout .suggestion-actions {
      justify-content: flex-end;
      gap: 0.5rem;
      margin-top: 0.95rem;
    }

    &.doc-chat-suggestion--primary-layout .suggestion-actions button {
      padding: 0.45rem 0.9rem;
      font-size: 0.8125rem;
      font-weight: 600;
      border-radius: 8px;
    }

    &.doc-chat-suggestion--primary-layout .suggestion-action-dismiss {
      border: 1px solid var(--skilvana-borders-dividers);
      background: var(--bg-card);
      color: var(--skilvana-secondary-cta-hover);

      &:hover:not(:disabled) {
        background: var(--skilvana-page-background);
      }
    }

    &.doc-chat-suggestion--primary-layout .suggestion-action-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      border-color: var(--skilvana-primary-cta);
      background: var(--skilvana-primary-cta);
      color: var(--color-white);

      &:hover:not(:disabled) {
        background: var(--skilvana-primary-cta-hover);
        border-color: var(--skilvana-primary-cta-hover);
      }
    }

    &.doc-chat-suggestion--primary-layout .suggestion-action-check {
      font-size: 0.875rem;
      line-height: 1;
    }

    .suggestion-option-group--downstream {
      margin-top: 0.45rem;
    }

    .suggestion-groups {
      margin-top: 0.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .suggestion-group {
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.45);
    }

    .suggestion-group-header {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0.25rem 0.4rem;
      width: 100%;
      margin: 0;
      padding: 0.4rem 0.45rem;
      border: none;
      border-radius: 6px;
      background: transparent;
      text-align: left;
      cursor: pointer;
      font: inherit;
      color: #374151;

      &:hover {
        background: rgba(255, 255, 255, 0.65);
      }
    }

    .suggestion-group-chevron.document-module-accordion-chevron {
      color: #78716c;
    }

    .suggestion-group-title {
      font-size: 0.78rem;
      font-weight: 700;
    }

    .suggestion-group-count.muted-text.small {
      font-weight: 600;
    }

    .suggestion-group-preview {
      flex: 1 1 100%;
      margin-left: 1rem;
      line-height: 1.4;
      font-style: italic;
    }

    .suggestion-group-body {
      padding: 0 0.45rem 0.45rem;
    }

    .suggestion-option-group {
      margin-top: 0.35rem;

      &:first-child {
        margin-top: 0.15rem;
      }
    }

    .suggestion-option-group-header {
      margin-bottom: 0.15rem;
      font-size: 0.74rem;
      font-weight: 700;
      color: #4b5563;
    }

    .suggestion-option-group-body {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      padding-left: 0.35rem;
    }

    .suggestion-op-line {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 0.35rem;
      font-size: 0.74rem;
      line-height: 1.4;
      color: #374151;
      padding: 0.2rem 0.35rem;
      border-radius: 4px;

      .op-rationale {
        margin: 0;
        font-size: 0.72rem;
        flex: 1 1 100%;
        margin-left: 1.1rem;
      }
    }

    .suggestion-op-line-marker {
      flex: 0 0 auto;
      min-width: 0.85rem;
      font-weight: 800;
      font-size: 0.78rem;
      line-height: 1.4;
      text-align: center;
    }

    .suggestion-op-line-marker--score {
      min-width: 1.65rem;
      font-variant-numeric: tabular-nums;
      text-align: right;
      letter-spacing: -0.02em;
    }

    .suggestion-op-line.comparison-badge--positive,
    .suggestion-op-line.comparison-badge--engagement,
    .suggestion-op-line.comparison-badge--negative {
      border: none;
      border-radius: 4px;

      .suggestion-op-line-marker {
        color: inherit;
      }
    }

    .suggestion-op-line--subtle {
      color: #78716c;
      background: transparent;
    }

    .suggestion-op-line-text {
      word-break: break-word;
      flex: 1;
      min-width: 0;
    }

    /* Stack ops on the panel background — no inner white card */
    .suggestion-op-card {
      margin-top: 0.5rem;
      padding: 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .suggestion-op-card:first-of-type {
      margin-top: 0.35rem;
    }

    .op-with-rationale {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.45rem;
      width: 100%;
    }

    .suggestion-op-card .comparison-badge {
      margin: 0;
      max-width: 100%;
      padding: 0.35rem 0.55rem;
      border-radius: 3px;
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: 0.02em;
      word-break: break-word;
    }

    .op-rationale {
      margin: 0;
      font-size: 0.75rem;
      line-height: 1.5;
      color: var(--text-muted);
      font-style: italic;
    }

    .suggestion-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 0.5rem;
    }

    .suggestion-actions button {
      padding: 0.25rem 0.75rem;
      font-size: 0.82rem;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid #d1a800;
      background: var(--bg-card);
      color: #334155;
      cursor: pointer;

      &:hover:not(:disabled) {
        background: #fffbe6;
      }

      &:disabled {
        opacity: 0.4;
        cursor: default;
      }
    }

    .suggestion-actions .suggestion-action-primary {
      border-color: #1a9e4a;
      background: #ecfdf5;
      color: #065f46;

      &:hover:not(:disabled) {
        background: #d1fae5;
      }
    }

  }

  .consultations-dashboard {
    padding: 2rem;
    max-width: 1360px;
    width: min(1360px, calc(100vw - 3rem));
    margin: 0 auto;
    overflow-y: auto;

    .business-memories-inline {
      margin-bottom: 1.25rem;
      padding: 0;
      width: 100%;
      max-width: none;
      align-self: stretch;
      box-sizing: border-box;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      overflow: hidden;

      &.sk-card {
        padding: 0;
      }

      .business-memories-inline__header {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.5rem 0.85rem;
        background: var(--bg-card-raised);
        border-bottom: 1px solid #e8ecf0;
      }

      .business-memories-inline__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.125rem;
        height: 2.125rem;
        padding: 0;
        margin: 0;
        flex: 0 0 auto;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-card);
        cursor: pointer;
        box-sizing: border-box;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
      }

      .business-memories-inline__toggle:hover {
        background: var(--bg-card-raised);
        border-color: var(--border-subtle);
      }

      .business-memories-inline__toggle:focus-visible {
        outline: 2px solid var(--dark-blue);
        outline-offset: 2px;
      }

      .business-memories-inline__chevron {
        font-size: 0.62rem;
        line-height: 1;
        color: var(--text-dim);
      }

      .business-memories-inline__header-title {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.015em;
        line-height: 1.25;
        user-select: none;
      }

      .business-memories-inline__body {
        padding: 0.75rem 1rem 1rem;
        background: var(--bg-card);
      }

      .business-memories-inline__intro {
        margin: 0 0 1rem;
        font-size: 1.0625rem;
        line-height: var(--text-body-1-lh);
        color: var(--text-dim);
      }

      .business-memories-inline__progress-wrap {
        margin: 0 0 0.55rem;
      }

      .business-memories-inline__progress {
        margin: 0 0 0.35rem;
        padding: 0;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text-dim);
        line-height: 1.35;
      }

      .business-memories-inline__progress-track {
        height: 6px;
        width: 100%;
        border-radius: 999px;
        background: #e8ecf0;
        overflow: hidden;
      }

      .business-memories-inline__progress-fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--color-accent-800), var(--color-accent-900));
        transition: width 0.25s ease-out;
      }

      .business-memories-inline__progress-wrap + .business-memories-inline__complete {
        margin-top: 0.4rem;
      }

      .business-memories-inline__field {
        margin: 0;
        padding: 0;
        width: 100%;
      }

      .business-memories-inline__row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        width: 100%;
      }

      .business-memories-inline__control {
        width: 100%;
        min-width: 0;
      }

      .business-memories-inline__label {
        display: block;
        margin: 0;
        padding-top: 0.25rem;
        padding-bottom: 0.35rem;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.3;
        cursor: pointer;
      }

      .business-memories-inline__input {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 0.875rem;
        line-height: 1.4;
        padding: 0.5rem 0.65rem;
        min-height: 2.4rem;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: var(--bg-card);
      }

      .business-memories-inline__input::placeholder {
        color: var(--color-neutral-700);
        font-size: 1rem;
        line-height: 1.45;
      }

      .business-memories-inline__input:focus {
        outline: none;
        border-color: var(--dark-blue);
        box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.12);
      }

      .business-memories-inline__textarea {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 4.25rem;
        padding: 0.5rem 0.65rem;
        font-size: 0.875rem;
        line-height: 1.4;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: var(--bg-card);
        resize: vertical;
      }

      .business-memories-inline__textarea:focus {
        outline: none;
        border-color: var(--dark-blue);
        box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.12);
      }

      .business-memories-inline__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
        margin-top: 0.55rem;
      }

      .business-memories-inline__actions .primary-btn,
      .business-memories-inline__actions .secondary-btn {
        font-size: 0.8rem;
        padding: 0.38rem 1rem;
        font-weight: 600;
        border-radius: 8px;
      }

      .business-memories-inline__complete {
        margin: 0;
        font-size: 0.86rem;
        line-height: 1.5;
        color: var(--text-dim);
      }
    }

    .new-consultation-box {
      margin-bottom: 2.5rem;

      .sk-card-header {
        margin-bottom: 1.25rem;
      }

      .sk-card-title {
        font-size: var(--text-heading-1-size);
        font-weight: var(--text-heading-1-weight);
        line-height: var(--text-heading-1-lh);
        color: var(--skilvana-primary-headings);
      }

      .sk-card-subtitle {
        margin-top: 0.35rem;
        max-width: 40rem;
        font-size: 0.95rem;
        line-height: 1.45;
        color: var(--text-muted);
      }
    }

    .action-bar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;

      .spacer {
        flex: 1;
      }

      .checkbox-inline {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: var(--text-muted);
        cursor: pointer;
        user-select: none;

        input {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }

    /* Buttons — Skilvana Style Guide (Figma Buttons component) */
    .primary-btn,
    .secondary-btn,
    .ghost-btn,
    .dark-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      font-family: var(--font-brand);
      font-size: var(--text-button-size);
      font-weight: var(--text-button-weight);
      line-height: var(--text-button-lh);
      border-radius: var(--radius-btn);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
      box-sizing: border-box;
    }

    .btn-size-sm {
      min-height: var(--btn-height-sm);
      padding: 0 var(--space-4);
    }

    .btn-size-md {
      min-height: var(--btn-height-md);
      padding: 0 var(--space-5);
    }

    .btn-size-lg {
      min-height: var(--btn-height-lg);
      padding: 0 var(--space-6);
    }

    .primary-btn {
      background: var(--skilvana-primary-cta);
      color: var(--color-white);
      border: 1px solid transparent;
      box-shadow: var(--shadow-btn);

      &:hover:not(:disabled) {
        background: var(--skilvana-primary-cta-hover);
      }

      &:focus-visible {
        outline: 2px solid var(--color-accent-800);
        outline-offset: 2px;
      }
    }

    .secondary-btn {
      background: var(--skilvana-section-background);
      color: var(--skilvana-secondary-cta);
      border: 1px solid var(--skilvana-secondary-cta);

      &:hover:not(:disabled) {
        background: var(--skilvana-page-background);
      }

      &:focus-visible {
        outline: 2px solid var(--color-accent-800);
        outline-offset: 2px;
      }
    }

    .ghost-btn {
      background: transparent;
      color: var(--skilvana-primary-headings);
      border: 1px solid var(--skilvana-borders-dividers);

      &:hover:not(:disabled) {
        background: var(--skilvana-page-background);
      }
    }

    .dark-btn {
      background: var(--skilvana-secondary-cta);
      color: var(--color-white);
      border: 1px solid transparent;

      &:hover:not(:disabled) {
        background: var(--skilvana-secondary-cta-hover);
      }
    }

    .primary-btn:disabled,
    .secondary-btn:disabled,
    .ghost-btn:disabled,
    .dark-btn:disabled {
      opacity: 0.5;
      cursor: default;
    }

    .section-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: var(--text-muted);
    }

    .consultations-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .consultation-card.horizontal {
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem 1.5rem;
      cursor: pointer;
      border: 1px solid var(--skilvana-borders-dividers);
      box-shadow: var(--shadow-card);
      border-left: 3px solid color-mix(in srgb, var(--color-accent-900) 35%, var(--skilvana-borders-dividers));
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;

      & > .sk-card-body {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 1rem;
      }

      &:focus-visible {
        outline: 2px solid var(--color-accent-800);
        outline-offset: 2px;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--color-neutral-900) 10%, transparent);
        border-color: var(--color-accent-900);
      }

      &:hover .consultation-title {
        color: var(--skilvana-links);
      }

      .consultation-info {
        flex: 1;
        min-width: 0;
      }

      .consultation-title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--skilvana-primary-headings);
        transition: color 0.15s ease;
      }

      .consultation-date {
        margin: 0.25rem 0 0;
        font-size: 0.85rem;
        color: var(--text-dim);
      }
    }

    .consultation-card.horizontal .delete-btn,
    .consultation-card.horizontal .delete-btn.sk-icon-btn {
      width: auto;
      height: auto;
      min-width: 2rem;
      min-height: 2rem;
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0.5rem;
      opacity: 0.3;
      transition: opacity 0.2s, background 0.2s;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        opacity: 1;
        background: var(--danger-bg);
      }

      img {
        width: 18px;
        height: 18px;
        filter: brightness(0) saturate(100%) invert(34%) sepia(93%) saturate(4314%) hue-rotate(346deg) brightness(91%) contrast(95%);
      }
    }

    .empty-state {
      text-align: center;
      padding: 3rem;
      color: var(--text-dim);
      font-style: italic;
    }
  }

  /* ─── Page layout ──────────────────────────────────────────────────── */

  .document-main {
    /*
    min-width: 0;
    max-width: 1360px;
    margin: 0 auto;
    width: min(1360px, calc(100vw - 3rem));
    */

    > .sk-card.document-module {
      margin-top: 1.25rem;
      &:first-of-type { margin-top: 0; }
    }
  }

  /* ─── Cards / modules ──────────────────────────────────────────────── */

  .sk-card,
  .sk-card.document-module,
  .document-hero {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-card);
  }

  .document-hero { margin-bottom: 1.5rem; }

  /* ─── Typography ───────────────────────────────────────────────────── */

  h1, h2, h3, h4 {
    text-align: left;
    color: var(--skilvana-primary-headings);
  }

  p, th, td {
    text-align: left;
    color: var(--skilvana-body-text);
  }

  a {
    color: var(--skilvana-links);
  }

  a:hover {
    color: var(--skilvana-links-hover);
  }

  .document-module h2 {
    margin-top: 0;
    font-family: var(--font-brand);
    font-size: var(--text-heading-3-size);
    font-weight: var(--text-heading-3-weight);
    line-height: var(--text-heading-3-lh);
    letter-spacing: 0;
    color: var(--skilvana-primary-headings);
  }

  .document-module--highlighted {
    border-color: var(--color-accent-900);
    box-shadow: 0 0 0 1px rgba(38, 99, 235, 0.25);
  }

  .document-module--quadrants {
    overflow: visible;
  }

  .document-module--quadrants .quadrants-module-head {
    margin-bottom: 0.85rem;
  }

  .document-module--quadrants .quadrants-module-title-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .document-module--quadrants .quadrants-module-icon {
    display: flex;
    color: var(--color-neutral-700);
    flex-shrink: 0;
  }

  .document-module--quadrants .quadrants-module-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .document-module--quadrants .quadrants-plot-banner {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-btn);
    background: var(--color-neutral-400);
    border: 1px solid var(--color-neutral-500);
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .document-module--quadrants .quadrants-plot-banner-icon {
    flex-shrink: 0;
    color: var(--color-neutral-700);
    margin-top: 0.1rem;
  }

  .document-module--quadrants .quadrants-plot-banner p {
    margin: 0;
  }

  .document-module--quadrants .quadrants-plot-banner-emphasis {
    margin-top: 0.25rem;
    font-weight: 700;
  }

  /* Chart frame: IMPACT top center, plot left, EFFORT right center */
  .document-module--quadrants .quadrants-chart-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(1.85rem, 2.25rem);
    grid-template-rows: auto 1fr;
    gap: 0.35rem 0.5rem;
    align-items: stretch;
    max-width: 560px;
    margin: 0 auto 1rem;
  }

  .document-module--quadrants .quadrants-chart-label-y {
    grid-column: 1 / -1;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-muted);
    user-select: none;
  }

  .document-module--quadrants .quadrants-chart-row {
    min-width: 0;
  }

  .document-module--quadrants .quadrants-chart-plane {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: visible;
    border: none;
    box-shadow: none;
    background: var(--bg-card);
    outline: none;
  }

  .document-module--quadrants .quadrants-bg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
  }

  .document-module--quadrants .quadrant-cell {
    position: absolute;
    box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    border: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .document-module--quadrants .quadrant-cell--tl {
    background: var(--color-neutral-300);
    border-radius: 0;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .document-module--quadrants .quadrant-cell--tr {
    background: var(--color-neutral-400);
    justify-content: flex-end;
    align-items: flex-start;
  }

  .document-module--quadrants .quadrant-cell--bl {
    background: var(--color-neutral-400);
    justify-content: flex-start;
    align-items: flex-end;
  }

  .document-module--quadrants .quadrant-cell--br {
    background: var(--color-neutral-300);
    justify-content: flex-end;
    align-items: flex-end;
  }

  .document-module--quadrants .quadrant-cell-name {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.42);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    pointer-events: none;
    max-width: 7rem;
    line-height: 1.2;
    text-align: inherit;
  }

  .document-module--quadrants .quadrants-crosshair-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed rgba(148, 163, 184, 0.65);
    pointer-events: none;
    z-index: 1;
    transform: translateX(-50%);
  }

  .document-module--quadrants .quadrants-crosshair-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed rgba(148, 163, 184, 0.65);
    pointer-events: none;
    z-index: 1;
    transform: translateY(-50%);
  }

  .document-module--quadrants .quadrants-markers-layer {
    position: absolute;
    inset: 6%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
  }

  .document-module--quadrants .quadrants-plot-anchor {
    pointer-events: auto;
    position: absolute;
    overflow: visible;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    cursor: default;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--color-neutral-800);
  }
  .document-module--quadrants .quadrants-plot-anchor:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .document-module--quadrants .quadrants-plot-anchor:hover,
  .document-module--quadrants .quadrants-plot-anchor:focus,
  .document-module--quadrants .quadrants-plot-anchor:focus-within {
    z-index: 80 !important;
  }

  .document-module--quadrants .quadrants-plot-marker {
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: none;
  }

  .document-module--quadrants .quadrants-plot-anchor:hover .quadrants-plot-marker,
  .document-module--quadrants .quadrants-plot-anchor:focus .quadrants-plot-marker,
  .document-module--quadrants .quadrants-plot-anchor:focus-within .quadrants-plot-marker {
    transform: scale(1.08);
    filter: none;
  }

  .document-module--quadrants .quadrants-plot-marker-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    max-width: 6.5rem;
    padding: 0;
    margin: 0;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(15, 23, 42, 0.62);
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(255, 255, 255, 0.85);
    z-index: 3;
  }

  .document-module--quadrants .quadrants-plot-anchor:hover .quadrants-plot-marker-label,
  .document-module--quadrants .quadrants-plot-anchor:focus .quadrants-plot-marker-label,
  .document-module--quadrants .quadrants-plot-anchor:focus-within .quadrants-plot-marker-label {
    color: rgba(15, 23, 42, 0.35);
  }

  .document-module--quadrants .quadrants-plot-hover-card {
    position: absolute;
    left: 50%;
    /* Below one-line label under the marker (label ~0.6rem + gap) */
    top: calc(100% + 0.65rem + 6px);
    transform: translateX(-50%);
    min-width: 10.5rem;
    max-width: 15rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: rgba(248, 250, 252, 0.98);
    color: var(--text);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
    z-index: 100;
  }

  .document-module--quadrants .quadrants-plot-anchor:hover .quadrants-plot-hover-card,
  .document-module--quadrants .quadrants-plot-anchor:focus .quadrants-plot-hover-card,
  .document-module--quadrants .quadrants-plot-anchor:focus-within .quadrants-plot-hover-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .document-module--quadrants .quadrants-plot-hover-card-title {
    margin: 0 0 0.2rem;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  .document-module--quadrants .quadrants-plot-hover-card-shape {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #475569;
    text-transform: capitalize;
  }

  .document-module--quadrants .quadrants-plot-hover-card-scores {
    margin: 0;
    font-size: 0.68rem;
    color: #334155;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.35rem;
  }

  .document-module--quadrants .quadrants-plot-hover-card-desc {
    margin: 0.4rem 0 0;
    font-size: 0.68rem;
    color: #1e293b;
    line-height: 1.35;
  }

  .document-module--quadrants .quadrants-plot-hover-card-sep {
    color: var(--text-dim);
    user-select: none;
  }

  .document-module--quadrants .quadrants-marker-mask {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    flex-shrink: 0;
  }

  /* SVG sources: static/icon/quadrants/marker-*.svg → CDN (https://cdn.skilvana.com/app/...) */

  .document-module--quadrants .quadrants-marker-mask--00 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-00.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-00.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--01 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-01.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-01.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--02 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-02.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-02.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--03 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-03.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-03.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--04 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-04.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-04.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--05 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-05.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-05.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--06 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-06.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-06.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--07 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-07.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-07.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--08 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-08.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-08.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--09 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-09.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-09.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--10 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-10.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-10.svg');
  }
  .document-module--quadrants .quadrants-marker-mask--11 {
    -webkit-mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-11.svg');
    mask-image: url('https://cdn.skilvana.com/app/icon/quadrants/marker-11.svg');
  }

  .document-module--quadrants .quadrants-plot-legend-wrap {
    max-width: 560px;
    margin: 0 auto 1rem;
  }

  .document-module--quadrants .quadrants-legend-heading {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .document-module--quadrants .quadrants-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.86rem;
    line-height: 1.4;
  }

  .document-module--quadrants .quadrants-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
  }

  .document-module--quadrants .quadrants-legend-glyph {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-neutral-800);
  }

  .document-module--quadrants .quadrants-legend-label {
    word-break: break-word;
    color: var(--text);
  }

  .document-module--quadrants .quadrants-chart-label-x {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-muted);
    place-self: center;
    user-select: none;
  }

  .document-module--quadrants .quadrants-plot-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: min(100%, 560px);
    max-width: 560px;
    margin: 0.35rem auto 0.4rem;
    box-sizing: border-box;
  }

  .document-module--quadrants .quadrants-action-btn {
    min-height: 38px;
  }

  .document-module--quadrants .quadrants-plot-scale-hint {
    text-align: right;
  }

  .document-module--quadrants .quadrants-controls-eyebrow {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
  }

  .document-module--quadrants .quadrants-plot-wrap {
    margin-top: 0.5rem;
  }

  .document-module--quadrants .quadrants-plot-controls {
    width: min(100%, 560px);
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: auto;
  }

  .document-module--quadrants .quadrants-plot-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: var(--bg-card-raised, rgba(248, 250, 252, 0.6));
    border-radius: var(--radius-btn);
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .document-module--quadrants .quadrants-plot-table th,
  .document-module--quadrants .quadrants-plot-table td {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
  }

  .document-module--quadrants .quadrants-plot-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    background: rgba(248, 250, 252, 0.95);
  }

  .document-module--quadrants .quadrants-plot-num {
    width: 4.75rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-size: inherit;
    background: var(--bg-card);
    outline: none;
  }

  .document-module--quadrants .quadrants-plot-num:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: none;
  }

  .document-module--quadrants .quadrants-plot-why {
    width: 100%;
    min-width: 0;
    min-height: 2.7rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-size: 0.82rem;
    line-height: 1.35;
    background: var(--bg-card);
    resize: vertical;
    overflow-wrap: anywhere;
    outline: none;
  }

  .document-module--quadrants .quadrants-plot-why:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: none;
  }

  .document-module--quadrants .quadrants-plot-option-name {
    max-width: 16rem;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .name-list-item--highlighted {
    border-color: rgba(9, 104, 232, 0.4);
    background: rgba(9, 104, 232, 0.06);
  }

  .name-list-weight--highlighted {
    color: var(--accent-color);
    font-weight: 600;
  }

  .document-title {
    margin: 0.3rem 0 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    background: linear-gradient(to right, var(--light-blue), var(--dark-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .document-title:focus {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--medium-blue);
    outline: none;
  }

  .eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-dim);
    font-size: 0.72rem;
    font-weight: 600;
  }

  .muted-text {
    color: var(--text-muted);
    &.small { font-size: 0.82rem; }
  }

  /* Shared sentiment / change-tone pills (artifact comparisons, chat suggestions) */
  .comparison-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.7rem;
    border-radius: 12px;
    border: 1px solid transparent;
  }

  .comparison-badge--compact {
    padding: 0.12rem 0.45rem;
    border-radius: 3px;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .comparison-badge--plain {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none !important;
    font-weight: 600;
  }

  .comparison-badge--positive {
    background: var(--color-accent-700);
    color: var(--color-accent-900);
    border-color: var(--color-accent-800);
  }

  .comparison-badge--neutral {
    background: var(--color-neutral-400);
    color: var(--color-neutral-700);
    border-color: var(--color-neutral-500);
  }

  .comparison-badge--negative {
    background: var(--color-neutral-900);
    color: var(--color-white);
    border-color: var(--color-neutral-900);
  }

  .comparison-badge--strong {
    background: var(--color-neutral-500);
    color: var(--color-neutral-900);
    border-color: var(--color-neutral-800);
  }

  .comparison-badge--medium {
    background: var(--color-neutral-400);
    color: var(--color-neutral-800);
    border-color: var(--color-neutral-500);
  }

  .comparison-badge--weak {
    background: var(--color-neutral-500);
    color: var(--color-neutral-900);
    border-color: var(--color-neutral-700);
  }

  .comparison-badge--unknown {
    background: rgba(148, 163, 184, 0.15);
    color: #475569;
    border-color: rgba(148, 163, 184, 0.3);
  }

  .comparison-badge--engagement {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.3);
  }

  /* ─── Module heading row ───────────────────────────────────────────── */

  .module-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    text-align: left;

    &.compact {
      margin-bottom: 0.5rem;

      h3 {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
    }
  }

  .button-row {
    display: inline-flex;
    gap: 0.45rem;
  }

  .button-row--print {
    margin-top: 1.5rem;
  }

  /* ─── Buttons ──────────────────────────────────────────────────────── */
  /* Transitional: styles unmigrated raw buttons; remove when product code uses Button/sk-component-btn only (see AGENTS.md). */

  button:not(.sk-component-btn):not(.sk-btn):not(.primary-btn):not(.secondary-btn):not(.ghost-btn):not(.dark-btn):not(.danger-btn):not(.sk-modal-close):not(.sk-tab):not(.sk-chip):not(.sk-icon-btn):not(.sk-sidenav-item):not(.sk-field-help-trigger):not(.quadrants-plot-point):not(.weighted-decision-matrix-score):not(.weighted-decision-matrix-weight-pill):not(.weighted-decision-matrix-criterion-label):not(.evaluation-heatmap-cell) {
    appearance: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-btn);
    background: var(--bg-card-raised);
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.38rem 0.75rem;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: border-color 0.15s, background 0.15s, color 0.15s;

    &:hover:not(:disabled) {
      border-color: var(--accent);
      background: var(--bg-btn-hover);
      color: var(--accent);
    }

    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    &.danger-button {
      background: var(--danger-bg);
      border-color: var(--danger-border);
      color: var(--danger-text);

      &:hover:not(:disabled) {
        background: var(--danger-hover-bg);
        border-color: var(--danger-hover-border);
        color: var(--danger-hover-text);
      }
    }

    &.primary {
      background: linear-gradient(135deg, var(--accent) 0%, #0d4dfa 100%);
      border-color: transparent;
      color: #ffffff;
      padding: 0.65rem 1.75rem;
      font-size: 0.95rem;
    }
  }

  /* ─── Inputs & textareas ───────────────────────────────────────────── */

  input[type="text"],
  input[type="range"],
  select,
  textarea {
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
  }

  input[type="text"],
  select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    padding: 0.38rem 0.6rem;
    outline: none;
    transition: border-color 0.15s;
    &:focus { border-color: var(--accent); }
  }

  select { cursor: pointer; }

  textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    padding: 0.38rem 0.6rem;
    outline: none;
    resize: none;
    transition: border-color 0.15s;
    &:focus { border-color: var(--accent); }
  }

  input[type="range"] { accent-color: var(--accent); }

  input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
  }

  /* ─── Document error ───────────────────────────────────────────────── */

  .document-error,
  .document-workspace-error {
    margin-bottom: 1rem;
  }

  /* ─── Generation row (hero) ────────────────────────────────────────── */

  .question-generation-row {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;

    input[type="text"] {
      flex: 1;
      min-width: 12rem;
    }

    .autofill-inline-group {
      flex-shrink: 0;
    }
  }

  .ask-question-progress-label {
    margin-top: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    text-align: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    font-weight: 700;
  }

  .progress-bar-container {
    margin-top: 0.5rem;
    height: 12px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg-card-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-800), var(--color-accent-900));
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.1s linear;
  }

  .progress-bar-fill-2 {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-800), var(--color-accent-900));
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.1s linear;
  }

  .ask-question-gen-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.25rem;
    margin-top: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    .ask-question-gen-steps-description {
      color: var(--text-muted);
      font-style: italic;
    }
  }

  .ask-question-gen-step {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
  }

  .ask-question-gen-step--active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
  }

  .ask-question-gen-step--done {
    color: var(--text);
    opacity: 0.45;
  }

  .ask-question-gen-step--pending {
    color: var(--text-muted);
    opacity: 0.35;
  }

  .ask-question-gen-step-sep {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.4;
    user-select: none;
  }

  .ask-question-form {
    .ask-question-field-wrap {
      position: relative;
      width: 100%;
      padding: 1.25rem;
      border: 1px solid #d1d5db;
      border-radius: var(--radius-btn);
      background: var(--bg-card-raised);
      box-sizing: border-box;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .ask-question-field-wrap:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(9, 104, 232, 0.1);
    }

    .ask-question-textarea {
      position: relative;
      z-index: 0;
      display: block;
      width: 100%;
      font-size: 1.05rem;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      color: var(--text);
      outline: none;
      resize: none;
      min-height: 8.5rem;
      font-family: inherit;
      box-sizing: border-box;
    }

    /* Rotating “Try asking: …” — same position as placeholder, decorative only */
    .try-asking-ghost {
      position: absolute;
      inset: 1.25rem;
      z-index: 1;
      padding: 0;
      pointer-events: none;
    }

    .try-asking-placeholder-stack {
      position: relative;
      min-height: 3.15em;
    }

    .try-asking-placeholder-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      margin: 0;
      font: inherit;
      font-size: 1.05rem;
      line-height: 1.5;
      font-weight: 400;
      text-align: left;
      white-space: pre-wrap;
      word-wrap: break-word;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.55s ease-in-out;
    }

    .try-asking-placeholder-line--visible {
      opacity: 1;
      z-index: 1;
    }

    .try-asking-placeholder-line--solo {
      position: relative;
    }

    .ask-context-kv__question {
      margin: 0 0 0.5rem;
      font-size: 0.92rem;
      color: var(--text-muted);
    }

    .ask-question-context-step__intro {
      margin: 0 0 0.65rem;
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--text-muted);
    }

    .ask-context-kv__grid {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      margin-bottom: 0.25rem;
    }

    .ask-context-kv__row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.35rem;
    }

    .ask-context-kv__label {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text);
    }

    .ask-context-kv__input {
      width: 100%;
      box-sizing: border-box;
      font-size: 0.88rem;
      padding: 0.32rem 0.5rem;
      border-radius: 6px;
      border: 1px solid #d1d5db;
      font-family: inherit;
    }

    .ask-context-kv__help {
      margin: 0.2rem 0 0;
      font-size: 0.76rem;
      line-height: 1.35;
      color: var(--text-dim);
    }

    .ask-question-action-bar {
      margin-top: 1.35rem;
      padding-top: 0.5rem;
      align-items: center;
    }

    .ask-question-action-bar__main {
      min-height: 1.5rem;
    }

    .ask-question-submit-btn {
      margin-left: auto;
    }

    .ask-question-context-step__intro {
      margin: 1rem 0 0.65rem;
      padding-bottom: 1.5rem;
      font-size: 0.95rem;
      color: var(--text-muted);
    }

    .ask-question-context-no-hints {
      margin-top: 1rem;
      font-size: 0.95rem;
    }

    .ask-question-context-fields {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      margin-top: 0.35rem;
      width: 100%;
    }

    .ask-question-context-field-row {
      display: grid;
      /* Keep labels readable but avoid large empty left gutters on wide screens. */
      grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
      gap: 0.65rem 0.75rem;
      align-items: center;
    }

    @media (max-width: 560px) {
      .ask-question-context-field-row {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
    }

    .ask-question-context-field-label {
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--text);
      line-height: 1.35;
    }

    .ask-question-context-field-control {
      min-width: 0;
    }

    .ask-question-context-input {
      width: 100%;
      box-sizing: border-box;
      font-size: 1rem;
      padding: 0.55rem 0.65rem;
      border: 1px solid #d1d5db;
      border-radius: var(--radius-btn);
      background: var(--bg-card-raised);
      color: var(--text);
      font-family: inherit;
    }

    .ask-question-context-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(9, 104, 232, 0.1);
    }

    /* ── Template picker ── */

    .ask-question-template-intro {
      margin: 0 0 0.75rem;
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.4;
    }

    .ask-question-template-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 0.65rem;
    }

    .ask-question-template-card {
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      text-align: left;
      cursor: pointer;
      width: 100%;
      /* tighten .sk-card's default padding */
      padding: 1rem;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .ask-question-template-card:hover:not(:disabled) {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(9, 104, 232, 0.08), var(--shadow-card);
    }

    .ask-question-template-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.35rem;
    }

    .ask-question-template-card-name {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--text);
      line-height: 1.35;
    }

    .ask-question-template-radio {
      flex-shrink: 0;
      width: 1.15rem;
      height: 1.15rem;
      border-radius: 50%;
      border: 1.5px solid var(--border-subtle);
      background: transparent;
      box-sizing: border-box;
      margin-top: 1px;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }

    .ask-question-template-card:hover:not(:disabled) .ask-question-template-radio {
      border: 2px solid var(--accent);
      background: var(--accent);
      box-shadow: inset 0 0 0 3px var(--bg-card);
    }

    .ask-question-template-card-desc {
      margin: 0;
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.4;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sk-ui-demo .ask-question-form .try-asking-placeholder-line {
      transition-duration: 0.01ms;
    }
  }

  .checkbox-inline {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.87rem;
    color: var(--text-muted);
    &.center { justify-content: center; }
  }

  /* ─── Tables (segment options, metrics weights) ────────────────────── */

  .segment-table-wrap,
  .metrics-table-wrap {
    overflow-x: auto;
  }

  .segment-table,
  .metrics-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-input);

    thead th {
      text-align: left;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-dim);
      background: var(--bg-table-header);
      padding: 0.6rem 0.7rem;
      border-bottom: 1px solid var(--border);
      font-weight: 700;
    }

    tbody {
      td {
        padding: 0.45rem 0.55rem;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }
      tr:last-child td { border-bottom: none; }
    }

    input[type="text"] { width: 100%; }
  }

  /* ─── Weight cell ──────────────────────────────────────────────────── */

  .weight-cell {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 42px;
    gap: 0.5rem;
    align-items: center;

    span {
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--accent);
      text-align: right;
    }
  }

  /* ─── Comparison selector ──────────────────────────────────────────── */

  .comparison-grid {
    display: flex;
    column-gap: 0.65rem;
    row-gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .comparison-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.88rem;
    line-height: 1.15;
    min-height: 40px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;

    &:has(input:checked) {
      background: var(--pill-checked-bg);
      border-color: var(--pill-checked-border);
      color: var(--pill-checked-text);
    }

    input[type="checkbox"] {
      margin: 0;
      width: 15px;
      height: 15px;
    }
  }

  /* ─── Weighted decision matrix ─────────────────────────────────────── */

  .document-module--weighted-decision-matrix {
    padding: 1.15rem 1.25rem;
  }

  .weighted-decision-matrix-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .weighted-decision-matrix-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .weighted-decision-matrix-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: rgba(9, 104, 232, 0.08);
    flex-shrink: 0;
  }

  .weighted-decision-matrix-icon img {
    display: block;
    opacity: 0.85;
  }

  .weighted-decision-matrix-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
  }

  .weighted-decision-matrix-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .document-module--weighted-decision-matrix .weighted-decision-matrix-edit-criteria {
    flex-shrink: 0;
  }

  .weighted-decision-matrix-criteria-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle, var(--skilvana-borders-dividers));
    border-radius: var(--radius-card, var(--radius-3));
    background: var(--bg-card-raised, var(--color-neutral-300));
  }

  .weighted-decision-matrix-criterion-edit-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle, var(--skilvana-borders-dividers));
  }

  .weighted-decision-matrix-criterion-edit-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .weighted-decision-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .weighted-decision-matrix-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    table-layout: auto;
  }

  .weighted-decision-matrix-col-label {
    padding: 0.35rem 0.75rem 0.65rem 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
  }

  .weighted-decision-matrix-col-weight {
    width: 5rem;
    padding-right: 1rem;
  }

  .weighted-decision-matrix-option-head {
    padding: 0.35rem 0.85rem 0.65rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    vertical-align: bottom;
  }

  .weighted-decision-matrix-option-head--highlighted {
    color: var(--accent);
  }

  .weighted-decision-matrix-table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
  }

  .weighted-decision-matrix-criterion-cell {
    padding: 0.85rem 0.75rem 0.85rem 0;
    font-weight: 600;
    text-align: left;
    vertical-align: middle;
    min-width: 9rem;
  }

  .weighted-decision-matrix-criterion-label {
    font-weight: 600;
    color: var(--text);
  }

  .weighted-decision-matrix-criterion-label--highlighted {
    color: var(--accent);
  }

  .weighted-decision-matrix-criterion-btn {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }

  .weighted-decision-matrix-criterion-btn:hover {
    color: var(--accent);
  }

  .weighted-decision-matrix-criterion-btn--highlighted {
    color: var(--accent);
  }

  .weighted-decision-matrix-weight-cell {
    padding: 0.85rem 1rem 0.85rem 0;
    vertical-align: middle;
  }

  .weighted-decision-matrix-weight-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.2rem 0.55rem;
    border: none;
    border-radius: 6px;
    background: rgba(9, 104, 232, 0.1);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
  }

  .weighted-decision-matrix-weight-pill:hover {
    background: rgba(9, 104, 232, 0.16);
  }

  .weighted-decision-matrix-weight-pill--highlighted {
    box-shadow: 0 0 0 2px rgba(9, 104, 232, 0.35);
  }

  .weighted-decision-matrix-score-cell {
    padding: 0.85rem;
    text-align: left;
    vertical-align: middle;
  }

  .weighted-decision-matrix-score {
    padding: 0;
    border: none;
    background: none;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
  }

  .weighted-decision-matrix-score:hover {
    color: var(--accent);
  }

  .weighted-decision-matrix-score--selected {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .weighted-decision-matrix-score--strong {
    color: #15803d;
  }

  .weighted-decision-matrix-score-cell--highlighted {
    background: rgba(9, 104, 232, 0.06);
  }

  .weighted-decision-matrix-row--highlighted .weighted-decision-matrix-criterion-label {
    color: var(--accent);
  }

  .weighted-decision-matrix-criterion-actions {
    margin-top: 0.75rem;
  }

  /* ─── Evaluation grid (criterion × option matrix) ─────────────────── */

  .document-module--evaluation-grid .evaluation-matrix-hint {
    margin: 0 0 0.65rem;
    max-width: none;
    line-height: 1.35;
  }

  /* Use more horizontal room inside the center column */
  .document-module.sk-card.document-module--evaluation-grid {
    padding: 1.25rem 1rem;
  }

  .document-module--evaluation-grid .evaluation-matrix-option-head--highlighted {
    color: var(--accent-color);
  }

  .evaluation-matrix-row--highlighted .evaluation-matrix-axis-label {
    color: var(--accent-color);
  }

  .evaluation-grid-cell--highlighted {
    border: 1px solid rgba(9, 104, 232, 0.6);
    background: rgba(9, 104, 232, 0.06);
  }

  .evaluation-grid-cell--score-highlight {
    box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.35);
  }

  .evaluation-grid-cell--justification-highlight {
    outline: 2px dashed rgba(148, 163, 184, 0.8);
    outline-offset: -2px;
  }

  .evaluation-matrix-column--highlighted {
    background: rgba(9, 104, 232, 0.04);
  }

  @media (min-width: 720px) {
    .document-module.sk-card.document-module--evaluation-grid {
      padding: 1.35rem 1.15rem;
    }
  }

  .evaluation-matrix-scroll {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card-raised);
    -webkit-overflow-scrolling: touch;
  }

  .evaluation-matrix {
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
  }

  /*
   * Heatmap: fixed layout for even columns, but each option column has a floor width so long
   * names do not letterbox into one character per line. When columns exceed the pane, scroll
   * horizontally inside .evaluation-matrix-scroll (see evaluation grid section).
   */
  .evaluation-matrix.evaluation-heatmap-table {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  .evaluation-matrix.evaluation-heatmap-table col.evaluation-heatmap-col-axis {
    width: 7rem;
  }

  .evaluation-matrix.evaluation-heatmap-table col.evaluation-heatmap-col-option {
    min-width: 7.25rem;
  }

  /* Option columns: min-width via col keeps readable headers; overflow scrolls when needed */

  .evaluation-matrix.evaluation-heatmap-table th,
  .evaluation-matrix.evaluation-heatmap-table td {
    box-sizing: border-box;
  }

  /* Option headers wrap within column; avoid single-character column crush */
  .evaluation-matrix.evaluation-heatmap-table th.evaluation-matrix-option-head {
    overflow: visible;
  }

  .evaluation-matrix.evaluation-heatmap-table th.evaluation-matrix-corner,
  .evaluation-matrix.evaluation-heatmap-table th.evaluation-matrix-axis-label {
    overflow: visible;
  }

  .evaluation-matrix.evaluation-heatmap-table td.evaluation-heatmap-td {
    overflow: visible;
  }

  .evaluation-matrix.evaluation-heatmap-table .evaluation-matrix-option-head {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    font-size: 0.76rem;
    line-height: 1.28;
    padding: 0.38rem 0.34rem 0.32rem;
  }

  .evaluation-matrix-corner {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 5.25rem;
    min-width: 4.25rem;
    max-width: 6.5rem;
    padding: 0.28rem 0.35rem 0.22rem;
    text-align: left;
    vertical-align: bottom;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    background: var(--bg-card-raised);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border-subtle);
    box-shadow: 6px 0 12px -8px rgba(15, 23, 42, 0.12);
  }

  .evaluation-matrix-option-head {
    padding: 0.2rem 0.18rem 0.18rem;
    text-align: center;
    vertical-align: bottom;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.12;
    min-width: 3.85rem;
    max-width: 5.5rem;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border-subtle);
    background: var(--bg-card-raised);
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .evaluation-matrix-axis-label {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 5.25rem;
    min-width: 4.25rem;
    max-width: 6.5rem;
    padding: 0.2rem 0.35rem;
    text-align: left;
    vertical-align: middle;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    line-height: 1.12;
    background: var(--bg-card-raised);
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 6px 0 12px -8px rgba(15, 23, 42, 0.1);
  }

  /* Let <colgroup> control widths (rules above set legacy sizes for any non-heatmap table). */
  .evaluation-matrix.evaluation-heatmap-table .evaluation-matrix-corner,
  .evaluation-matrix.evaluation-heatmap-table .evaluation-matrix-axis-label,
  .evaluation-matrix.evaluation-heatmap-table .evaluation-matrix-option-head,
  .evaluation-matrix.evaluation-heatmap-table .evaluation-heatmap-td {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .evaluation-matrix tbody tr:last-child .evaluation-matrix-axis-label,
  .evaluation-matrix tbody tr:last-child .evaluation-heatmap-td {
    border-bottom: none;
  }

  /*
   * Table now uses the full container width. The editor is rendered as a floating
   * popover anchored to the clicked cell (see `.evaluation-cell-popover` below).
   */
  .evaluation-inspector-layout {
    display: block;
    width: 100%;
  }

  .evaluation-inspector-layout .evaluation-matrix-scroll {
    width: 100%;
    max-width: none;
  }

  .evaluation-heatmap-focus-root {
    outline: none;

    &:focus-visible {
      box-shadow: 0 0 0 2px var(--bg-card-raised), 0 0 0 4px var(--text-dim);
      border-radius: 8px;
    }
  }

  .evaluation-heatmap-axis-label {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.66rem;
  }

  .evaluation-heatmap-td {
    vertical-align: middle;
    padding: 0;
    border-left: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card-raised);
  }

  .evaluation-heatmap-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.15rem;
    margin: 0;
    padding: 0.22rem 0.14rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    position: relative;
    transition: box-shadow 0.12s ease, transform 0.08s ease;

    &:hover {
      filter: brightness(0.97);
    }

    &:active {
      transform: scale(0.98);
    }
  }

  /* Drop default `button` border only; score-* rules supply inset box-shadow (keep specificity below those). */
  .evaluation-matrix.evaluation-heatmap-table button.evaluation-heatmap-cell {
    border: none;
  }

  .evaluation-heatmap-cell--has-notes::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.85;
    z-index: 5;
  }

  .evaluation-heatmap-score {
    position: relative;
    z-index: 1;
    font-size: 0.84rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--text);
  }

  .evaluation-inspector-panel {
    border: 2px solid color-mix(in srgb, var(--accent) 28%, var(--border-subtle));
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(
      165deg,
      var(--bg-card-raised) 0%,
      color-mix(in srgb, var(--accent) 6%, var(--bg-card-raised)) 100%
    );
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 12px 28px -8px rgba(15, 23, 42, 0.12);
    min-height: 14rem;
  }

  /*
   * Base styling for any popover that uses the `AnchoredPopover` component.
   * Positioning is set inline (position: fixed; top/left) by the component.
   * Themes (e.g. `.evaluation-cell-popover`) add border/background/etc on top of this.
   */
  .anchored-popover {
    z-index: 50;
    box-sizing: border-box;
    animation: anchored-popover-in 0.12s ease-out;
  }

  @keyframes anchored-popover-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Floating editor anchored to the clicked grid cell. */
  .evaluation-cell-popover {
    width: min(420px, calc(100vw - 24px));
    border: 2px solid color-mix(in srgb, var(--accent) 32%, var(--border-subtle));
    border-radius: 12px;
    padding: 0.85rem 1rem 1rem;
    background: linear-gradient(
      165deg,
      var(--bg-card-raised) 0%,
      color-mix(in srgb, var(--accent) 6%, var(--bg-card-raised)) 100%
    );
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.08),
      0 18px 40px -10px rgba(15, 23, 42, 0.28);
  }

  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    .evaluation-cell-popover {
      border-color: var(--border-subtle);
      background: var(--bg-card-raised);
    }
  }

  .evaluation-cell-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
  }

  .evaluation-cell-popover-header .evaluation-inspector-eyebrow {
    margin: 0;
  }

  .evaluation-cell-popover-close {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    width: 1.55rem;
    height: 1.55rem;
    line-height: 1;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    &:hover {
      background: color-mix(in srgb, var(--text-dim) 12%, transparent);
      color: var(--text);
    }

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }
  }

  .evaluation-cell-popover .evaluation-inspector-title {
    font-size: 1.05rem;
  }

  .evaluation-cell-popover .evaluation-inspector-criterion {
    margin-bottom: 0.75rem;
    padding-bottom: 0.55rem;
    font-size: 0.9rem;
  }

  .evaluation-cell-popover .evaluation-inspector-notes {
    min-height: 9rem;
    resize: vertical;
  }

  .evaluation-cell-popover .score-slider {
    grid-template-columns: minmax(120px, 1fr) 40px;
  }

  .evaluation-inspector-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
  }

  .evaluation-inspector-title {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
  }

  .evaluation-inspector-criterion {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
  }

  .evaluation-inspector-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin: 0.5rem 0 0.25rem;

    &:first-of-type {
      margin-top: 0;
    }
  }

  .evaluation-inspector-notes {
    width: 100%;
    min-height: 7rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-muted);
    box-sizing: border-box;
    margin-top: 0.15rem;
  }

  .evaluation-inspector-empty {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 500;
  }

  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    .evaluation-inspector-panel {
      border-color: var(--border-subtle);
      background: var(--bg-card-raised);
    }
  }

  .evaluation-inspector-panel .score-slider {
    grid-template-columns: minmax(120px, 1fr) 40px;
  }

  /* Heatmap cells: stripe + light tint */
  .evaluation-matrix .evaluation-heatmap-cell.score-very-positive {
    background: color-mix(in srgb, var(--score-vpos-bg) 45%, var(--bg-card-raised));
    box-shadow: inset 3px 0 0 0 rgba(16, 185, 129, 0.55);
  }

  .evaluation-matrix .evaluation-heatmap-cell.score-positive {
    background: color-mix(in srgb, var(--score-pos-bg) 50%, var(--bg-card-raised));
    box-shadow: inset 3px 0 0 0 rgba(16, 185, 129, 0.38);
  }

  .evaluation-matrix .evaluation-heatmap-cell.score-neutral {
    background: color-mix(in srgb, var(--score-neu-bg) 55%, var(--bg-card-raised));
    box-shadow: inset 3px 0 0 0 rgba(148, 163, 184, 0.45);
  }

  .evaluation-matrix .evaluation-heatmap-cell.score-negative {
    background: color-mix(in srgb, var(--score-neg-bg) 50%, var(--bg-card-raised));
    box-shadow: inset 3px 0 0 0 rgba(239, 68, 68, 0.42);
  }

  .evaluation-matrix .evaluation-heatmap-cell.score-very-negative {
    background: color-mix(in srgb, var(--score-vneg-bg) 45%, var(--bg-card-raised));
    box-shadow: inset 3px 0 0 0 rgba(239, 68, 68, 0.55);
  }

  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    .evaluation-matrix .evaluation-heatmap-cell.score-very-positive {
      background: var(--bg-card-raised);
      box-shadow: inset 3px 0 0 0 rgba(16, 185, 129, 0.55);
    }

    .evaluation-matrix .evaluation-heatmap-cell.score-positive {
      background: var(--bg-card-raised);
      box-shadow: inset 3px 0 0 0 rgba(16, 185, 129, 0.38);
    }

    .evaluation-matrix .evaluation-heatmap-cell.score-neutral {
      background: var(--bg-card-raised);
      box-shadow: inset 3px 0 0 0 rgba(148, 163, 184, 0.45);
    }

    .evaluation-matrix .evaluation-heatmap-cell.score-negative {
      background: var(--bg-card-raised);
      box-shadow: inset 3px 0 0 0 rgba(239, 68, 68, 0.42);
    }

    .evaluation-matrix .evaluation-heatmap-cell.score-very-negative {
      background: var(--bg-card-raised);
      box-shadow: inset 3px 0 0 0 rgba(239, 68, 68, 0.55);
    }
  }

  /*
   * Active cell: global `button` + score-* layers made background/box-shadow easy to miss.
   * Use td outline + button ::before ring (::after is reserved for notes dot).
   */
  .evaluation-matrix.evaluation-heatmap-table td.evaluation-heatmap-td--selected {
    position: relative;
    z-index: 2;
    outline: 3px solid var(--accent) !important;
    outline-offset: -3px !important;
  }

  .sk-ui-demo .evaluation-matrix.evaluation-heatmap-table button.evaluation-heatmap-cell[data-selected='true']::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-sizing: border-box;
    border: 3px solid var(--accent);
    pointer-events: none;
    z-index: 3;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
  }

  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    .sk-ui-demo .evaluation-matrix.evaluation-heatmap-table button.evaluation-heatmap-cell[data-selected='true']::before {
      background: rgba(9, 104, 232, 0.2);
    }
  }

  .evaluation-matrix .evaluation-heatmap-cell.evaluation-heatmap-cell--selected {
    position: relative;
    z-index: 2;
  }

  /* Score colors */
  .score-very-positive { background: var(--score-vpos-bg); }
  .score-positive      { background: var(--score-pos-bg); }
  .score-neutral       { background: var(--score-neu-bg); }
  .score-negative      { background: var(--score-neg-bg); }
  .score-very-negative { background: var(--score-vneg-bg); }

  /* ─── Score slider ─────────────────────────────────────────────────── */

  .score-slider {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 36px;
    gap: 0.4rem;
    align-items: center;

    span {
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      text-align: right;
    }
  }

  /* ─── Tradeoffs ────────────────────────────────────────────────────── */

  .tradeoff-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr 2fr auto;
    align-items: start;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem;
  }

  .tradeoff-vs {
    align-self: center;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.82rem;
  }

  /* ─── User Intent module (launch-rollout) ───────────────────────────── */

  .document-module--user-intent {
    padding: 1.25rem 1.35rem;
  }

  .document-module--user-intent:not(.document-module--user-intent--editing) {
    padding: 1rem 1.1rem 1.1rem;
  }

  .document-module--user-intent .user-intent-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin-bottom: 0.85rem;
  }

  .document-module--user-intent .user-intent-header-leading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    min-width: 0;
    flex: 1;
  }

  .document-module--user-intent .user-intent-header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .document-module--user-intent .user-intent-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    flex-shrink: 0;
  }

  .document-module--user-intent .user-intent-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    flex: 1;
    color: var(--color-accent-900);
  }

  .document-module--user-intent .user-intent-updated {
    margin: 0;
    font-size: 0.8rem;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .document-module--user-intent .user-intent-decision-banner {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--bg-card-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.1rem;
  }

  .document-module--user-intent .user-intent-decision-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
  }

  .document-module--user-intent .user-intent-decision-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    outline: none;
  }

  .document-module--user-intent .user-intent-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.15rem;
  }

  @media (max-width: 720px) {
    .document-module--user-intent .user-intent-hero-grid {
      grid-template-columns: 1fr;
    }
  }

  .document-module--user-intent .user-intent-card {
    border-radius: 12px;
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .document-module--user-intent .user-intent-card--primary {
    background: rgba(9, 104, 232, 0.06);
    border: 1px solid rgba(9, 104, 232, 0.18);
  }

  .document-module--user-intent .user-intent-card--success {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.28);
  }

  .document-module--user-intent .user-intent-card-label {
    margin: 0.35rem 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
  }

  .document-module--user-intent .user-intent-card-label:first-child {
    margin-top: 0;
  }

  .document-module--user-intent .user-intent-primary-user,
  .document-module--user-intent .user-intent-primary-job,
  .document-module--user-intent .user-intent-success-metric,
  .document-module--user-intent .user-intent-success-detail,
  .document-module--user-intent .user-intent-list-input,
  .document-module--user-intent .user-intent-segment-card-title,
  .document-module--user-intent .user-intent-segment-card-bullet-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    font: inherit;
    color: var(--text);
    outline: none;
  }

  .document-module--user-intent .user-intent-primary-user,
  .document-module--user-intent .user-intent-success-metric {
    font-weight: 700;
    font-size: 1rem;
  }

  .document-module--user-intent .user-intent-card--success .user-intent-success-metric {
    color: #15803d;
  }

  .document-module--user-intent .user-intent-primary-job,
  .document-module--user-intent .user-intent-success-detail {
    font-size: 0.88rem;
    color: var(--text-muted);
  }

  .document-module--user-intent .user-intent-segments-block {
    margin-bottom: 1.15rem;
  }

  .document-module--user-intent .user-intent-segments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
  }

  .document-module--user-intent .user-intent-block-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
  }

  .document-module--user-intent .user-intent-segment-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .document-module--user-intent .user-intent-segment-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem 0.85rem;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
  }

  .document-module--user-intent .user-intent-segment-card.sk-card > .sk-card-header {
    margin-bottom: 0.65rem;
    padding: 0;
  }

  .document-module--user-intent .user-intent-segment-card.sk-card > .sk-card-body {
    padding: 0;
  }

  .document-module--user-intent .user-intent-segment-card .sk-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-accent-900);
    line-height: 1.3;
  }

  .document-module--user-intent .user-intent-segment-card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
  }

  .document-module--user-intent .user-intent-segment-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--segment-icon-bg);
    color: var(--segment-accent);
    flex-shrink: 0;
  }

  .document-module--user-intent .user-intent-segment-card-title-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
  }

  .document-module--user-intent .user-intent-segment-card--view .user-intent-segment-card-header {
    margin-bottom: 0.65rem;
  }

  .document-module--user-intent .user-intent-segment-card-bullets--view {
    padding-left: 0.1rem;
  }

  .document-module--user-intent .user-intent-segment-card-bullet-view {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text);
  }

  .document-module--user-intent .user-intent-segment-card-bullet-view:last-child {
    margin-bottom: 0;
  }

  .document-module--user-intent .user-intent-segment-card-bullet-text {
    flex: 1;
    min-width: 0;
    color: var(--text);
  }

  .document-module--user-intent .user-intent-key-insight-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-accent-900) 28%, var(--border));
  }

  .document-module--user-intent .user-intent-key-insight-callout-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #6366f1;
    margin-top: 0.1rem;
  }

  .document-module--user-intent .user-intent-key-insight-callout-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text);
  }

  .document-module--user-intent .user-intent-key-insight-callout-text strong {
    color: var(--color-accent-900);
    font-weight: 700;
  }

  .document-module--user-intent .user-intent-key-insight-callout--edit {
    padding: 0;
    background: transparent;
    border: none;
  }

  .document-module--user-intent .user-intent-key-insight-editor {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--color-accent-900) 28%, var(--border));
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-top: 0.75rem;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    background: var(--color-white);
    resize: vertical;
    outline: none;
  }

  .document-module--user-intent .user-intent-key-insight-editor:focus {
    border-color: var(--color-accent-800);
  }

  .document-module--user-intent .user-intent-footer {
    margin-top: 0.85rem;
    padding-top: 0.15rem;
  }

  .document-module--user-intent .user-intent-edit-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.5rem 1.15rem;
    border: none;
    border-radius: 8px;
    background: #6366f1;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  .document-module--user-intent .user-intent-edit-toggle:hover {
    background: #4f46e5;
  }

  .document-module--user-intent .user-intent-edit-toggle--done {
    background: var(--bg-card-raised);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: none;
  }

  .document-module--user-intent .user-intent-edit-toggle--done:hover {
    background: var(--bg-input);
  }

  .document-module--user-intent .user-intent-segment-card-title {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    outline: none;
    line-height: 1.3;
  }

  .document-module--user-intent .user-intent-segment-card-remove {
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.15rem 0.25rem;
    flex-shrink: 0;
  }

  .document-module--user-intent .user-intent-segment-card-remove:hover {
    color: var(--danger-text);
  }

  .document-module--user-intent .user-intent-segment-card-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .document-module--user-intent .user-intent-segment-card-bullet {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }

  .document-module--user-intent .user-intent-segment-card-bullet--empty {
    grid-template-columns: 1fr;
    padding-left: 0.15rem;
  }

  .document-module--user-intent .user-intent-segment-card-bullet-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent-900);
    margin-top: 0.5rem;
    flex-shrink: 0;
  }

  .document-module--user-intent .user-intent-segment-card-bullet-input {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text);
    outline: none;
  }

  .document-module--user-intent .user-intent-segment-card-bullet-remove {
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem;
  }

  .document-module--user-intent .user-intent-segment-card-add-bullet {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    padding: 0.2rem 0;
    border: none;
    background: transparent;
    color: var(--segment-accent);
    cursor: pointer;
    font-weight: 600;
  }

  .document-module--user-intent .user-intent-list-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
  }

  .document-module--user-intent .user-intent-list-dot,
  .document-module--user-intent .user-intent-list-x {
    color: var(--text-muted);
    font-weight: 700;
  }

  .document-module--user-intent .user-intent-list-remove {
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
  }

  .document-module--user-intent .user-intent-list-add,
  .document-module--user-intent .user-intent-segment-add {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    padding: 0.2rem 0;
    border: none;
    background: transparent;
    color: var(--accent-color);
    cursor: pointer;
    font-weight: 600;
  }

  .document-module--user-intent .user-intent-field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: 0.65rem 0 0.35rem;
  }

  .document-module--user-intent .user-intent-field-label:first-of-type {
    margin-top: 0;
  }

  .document-module--user-intent .user-intent-boundaries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-subtle);
  }

  @media (max-width: 720px) {
    .document-module--user-intent .user-intent-boundaries {
      grid-template-columns: 1fr;
    }
  }

  .document-module--user-intent .user-intent-boundary-col .user-intent-block-title {
    margin-bottom: 0.5rem;
  }

  /* ─── Tradeoffs module (launch-rollout) ────────────────────────────── */

  .document-module--tradeoffs {
    padding: 1.25rem 1.35rem;
  }

  .document-module--tradeoffs .tradeoffs-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin-bottom: 0.85rem;
  }

  .document-module--tradeoffs .tradeoffs-header-leading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    min-width: 0;
    flex: 1;
  }

  .document-module--tradeoffs .tradeoffs-header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .document-module--tradeoffs .tradeoffs-header-icon {
    color: var(--color-neutral-700);
    display: flex;
  }

  .document-module--tradeoffs .tradeoffs-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    flex: 1;
  }

  .document-module--tradeoffs .tradeoffs-updated {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-neutral-700);
  }

  .document-module--tradeoffs .tradeoffs-context-banner {
    background: var(--color-neutral-400);
    border: 1px solid var(--color-neutral-500);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.1rem;
  }

  .document-module--tradeoffs .tradeoffs-context-banner--view {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .document-module--tradeoffs .tradeoffs-context-banner--view:hover {
    background: var(--color-neutral-500);
  }

  .document-module--tradeoffs .tradeoffs-context-info-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--color-neutral-700);
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 800;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .document-module--tradeoffs .tradeoffs-context-view-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text);
  }

  .document-module--tradeoffs .tradeoffs-context-input {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    color: var(--text);
    outline: none;
    line-height: 1.45;
  }

  .document-module--tradeoffs .tradeoffs-compare-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
  }

  .document-module--tradeoffs .tradeoffs-compare-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
  }

  .document-module--tradeoffs .tradeoffs-option-select {
    min-width: 12rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: 0.88rem;
  }

  .document-module--tradeoffs .tradeoffs-compare-vs {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.85rem;
  }

  .document-module--tradeoffs .tradeoffs-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }

  @media (max-width: 720px) {
    .document-module--tradeoffs .tradeoffs-compare-grid {
      grid-template-columns: 1fr;
    }
  }

  .document-module--tradeoffs .tradeoffs-option-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    height: 100%;
    min-height: 22rem;
    display: flex;
    flex-direction: column;
  }

  .document-module--tradeoffs .tradeoffs-option-card.sk-card {
    padding: 0;
  }

  .document-module--tradeoffs .tradeoffs-option-card.sk-card > .sk-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
  }

  .document-module--tradeoffs .tradeoffs-option-card--recommended {
    border-color: var(--color-accent-800);
    box-shadow: 0 0 0 1px var(--color-accent-800), var(--shadow-card);
  }

  .document-module--tradeoffs .tradeoffs-option-card--recommended .tradeoffs-option-body {
    background: var(--color-white);
  }

  .document-module--tradeoffs .tradeoffs-option-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    padding: 0.75rem 1rem;
    background: var(--color-neutral-800);
    color: var(--color-white);
  }

  .document-module--tradeoffs .tradeoffs-option-header--recommended,
  .document-module--tradeoffs .tradeoffs-option-card--recommended .tradeoffs-option-header {
    background: var(--color-accent-900);
  }

  .document-module--tradeoffs .tradeoffs-option-header .tradeoffs-option-label,
  .document-module--tradeoffs .tradeoffs-option-header .tradeoffs-option-name,
  .document-module--tradeoffs .tradeoffs-option-header .tradeoffs-recommended-badge {
    color: var(--color-white);
  }

  .document-module--tradeoffs .tradeoffs-option-label {
    font-weight: 800;
    font-size: 0.85rem;
    opacity: 0.95;
  }

  .document-module--tradeoffs .tradeoffs-option-name {
    font-weight: 700;
    flex: 1;
  }

  .document-module--tradeoffs .tradeoffs-recommended-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
  }

  .document-module--tradeoffs .tradeoffs-option-body {
    padding: 0.85rem 1rem 1rem;
  }

  .document-module--tradeoffs .tradeoffs-factor {
    margin-bottom: 1rem;
  }

  .document-module--tradeoffs .tradeoffs-factor-title {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .document-module--tradeoffs .tradeoffs-factor-icon--pro,
  .document-module--tradeoffs .tradeoffs-factor-icon--con,
  .document-module--tradeoffs .tradeoffs-factor-icon--unknown {
    color: var(--color-neutral-700);
  }

  .document-module--tradeoffs .tradeoffs-bullets {
    list-style: none;
    margin: 0 0 0.35rem;
    padding: 0;
  }

  .document-module--tradeoffs .tradeoffs-bullets--view .tradeoffs-view-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
    line-height: 1.4;
  }

  .document-module--tradeoffs .tradeoffs-view-text {
    flex: 1;
    font-size: 0.88rem;
  }

  .document-module--tradeoffs .tradeoffs-view-empty {
    margin: 0;
  }

  .document-module--tradeoffs .tradeoffs-unknown-alert--view {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    grid-template-columns: unset;
    background: var(--color-neutral-400);
    border: 1px solid var(--color-neutral-500);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.45rem;
  }

  .document-module--tradeoffs .tradeoffs-unknown-warn-icon {
    flex-shrink: 0;
    color: var(--color-neutral-700);
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .document-module--tradeoffs .tradeoffs-unknown-view-text {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .document-module--tradeoffs .tradeoffs-pro-row,
  .document-module--tradeoffs .tradeoffs-con-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
  }

  .document-module--tradeoffs .tradeoffs-bullet-icon {
    font-weight: 700;
    line-height: 1.4;
  }

  .document-module--tradeoffs .tradeoffs-bullets--pro .tradeoffs-bullet-icon,
  .document-module--tradeoffs .tradeoffs-bullets--con .tradeoffs-bullet-icon {
    color: var(--color-neutral-700);
  }

  .document-module--tradeoffs .tradeoffs-bullet-input,
  .document-module--tradeoffs .tradeoffs-unknown-input {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    color: var(--text);
    outline: none;
    line-height: 1.4;
  }

  .document-module--tradeoffs .tradeoffs-bullet-remove,
  .document-module--tradeoffs .tradeoffs-unknown-remove {
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1.1rem;
  }

  .document-module--tradeoffs .tradeoffs-unknown-alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.45rem;
    background: var(--color-neutral-400);
    border: 1px solid var(--color-neutral-500);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.45rem;
  }

  .document-module--tradeoffs .tradeoffs-unknown-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--color-neutral-700);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .document-module--tradeoffs .tradeoffs-list-add {
    font-size: 0.8rem;
    padding: 0.2rem 0;
    border: none;
    background: transparent;
    color: var(--color-neutral-800);
    cursor: pointer;
    font-weight: 600;
  }

  .document-module--tradeoffs .tradeoffs-recommend-picker {
    margin-bottom: 1rem;
  }

  .document-module--tradeoffs .tradeoffs-recommend-picker-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
  }

  .document-module--tradeoffs .tradeoffs-recommended-panel {
    background: var(--color-white);
    border: 2px solid var(--color-accent-800);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 0;
  }

  .document-module--tradeoffs .tradeoffs-recommended-panel--view {
    margin-top: 0;
  }

  .document-module--tradeoffs .tradeoffs-recommended-title {
    margin: 0 0 0.65rem;
    color: var(--color-accent-800);
    letter-spacing: 0.12em;
  }

  .document-module--tradeoffs .tradeoffs-recommended-panel--view .tradeoffs-recommended-summary {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-neutral-900);
  }

  .document-module--tradeoffs .tradeoffs-recommended-panel--view .tradeoffs-recommended-desc {
    margin: 0 0 0.75rem;
    line-height: 1.55;
    color: var(--color-neutral-700);
  }

  .document-module--tradeoffs .tradeoffs-recommended-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .document-module--tradeoffs .tradeoffs-tag-pill {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--color-accent-700);
    color: var(--color-accent-900);
    border: 1px solid var(--color-accent-800);
  }

  .document-module--tradeoffs .tradeoffs-footer {
    margin-top: 0.5rem;
    padding-top: 0.25rem;
  }

  .document-module--tradeoffs .tradeoffs-edit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--color-neutral-800);
    color: var(--color-white);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  .document-module--tradeoffs .tradeoffs-edit-toggle:hover {
    background: var(--color-neutral-900);
  }

  .document-module--tradeoffs .tradeoffs-edit-toggle--done {
    background: var(--bg-card-raised);
    color: var(--text);
    border: 1px solid var(--border);
  }

  .document-module--tradeoffs .tradeoffs-edit-toggle--done:hover {
    background: var(--bg-input);
  }

  .document-module--tradeoffs .tradeoffs-edit-toggle-icon {
    font-size: 0.95rem;
    line-height: 1;
  }

  .document-module--tradeoffs .tradeoffs-recommended-summary,
  .document-module--tradeoffs .tradeoffs-recommended-desc,
  .document-module--tradeoffs .tradeoffs-recommended-tags {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-neutral-500);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.5rem;
    background: var(--color-white);
    font: inherit;
    color: var(--text);
    resize: vertical;
  }

  .document-module--tradeoffs .tradeoffs-recommended-summary {
    font-weight: 600;
  }

  /* ─── Name list editor ─────────────────────────────────────────────── */

  .name-list-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .name-list-grid--wide {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.75rem;
    width: 100%;
  }

  .name-list-item {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    gap: 0.4rem;
    width: 260px;
    background: var(--bg-card-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 0.75rem;
    margin: 0 0.6rem 0.6rem 0;

    input[type="text"] {
      width: 100%;
      box-sizing: border-box;
    }

    .name-list-label {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--text-dim);
      margin-bottom: -0.1rem;
    }

    .name-list-value {
      color: var(--text);
      min-height: 1.4em;
      em { color: var(--text-dim); font-style: normal; }
    }

    .name-list-name {
      font-size: 1rem;
      font-weight: 700;
    }

    .name-list-desc {
      font-size: 0.82rem;
      font-style: italic;
      color: var(--text-dim);
    }

    .name-list-desc-input { font-size: 0.82rem !important; }
    .name-list-tags-input { font-size: 0.82rem !important; }

    .name-list-tags {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .name-list-weight {
      font-size: 0.78rem;
      color: var(--accent);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .name-list-item-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .name-list-item-title {
      min-width: 0;
      flex: 1;
    }

    .name-list-actions {
      display: flex;
      gap: 0.4rem;
      flex-shrink: 0;
    }
  }

  .name-list-item--wide {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    background: var(--bg-card);
    border-color: var(--border);
    min-height: 6.5rem;
  }

  .document-module--options-list .name-list-item--wide .name-list-name {
    font-size: 1.05rem;
  }

  .document-module--options-list .name-list-item--wide .name-list-desc {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .document-module--options-list .name-list-item--wide .name-list-tags {
    font-size: 0.82rem;
  }

  /* ─── Assumptions / unknowns dual-column ──────────────────────────── */

  .dual-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }

  /* ─── Research ─────────────────────────────────────────────────────── */

  .research-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .research-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--bg-input);

    p { margin: 0.25rem 0; color: var(--text); }
    p strong { color: var(--accent); }
  }

  /* ─── Recommendation ───────────────────────────────────────────────── */

  .result-module {
    .result-top h3 {
      margin: 0.2rem 0 0;
      font-size: 1.5rem;
      background: linear-gradient(to right, var(--light-blue), var(--dark-blue));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .muted-text {
      font-size: 0.85rem;
      margin-top: 0.2rem;
    }
  }

  .decision-artifact-root {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem 1.5rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  }

  .decision-artifact-chrome-wrap {
    width: 100%;
    margin-bottom: 0.35rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e8ecf4;
  }

  .decision-artifact-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0;
    border-bottom: none;
  }

  .decision-artifact-chrome-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--text-dim);
  }

  .decision-artifact-chrome-meta-item {
    white-space: nowrap;
  }

  .decision-artifact-chrome-left {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
  }

  .decision-artifact-chrome-doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    flex-shrink: 0;
  }

  /* Chrome icons: <img> to CDN SVGs (mask-image was invisible when CDN/mask failed). */
  .decision-artifact-chrome-img-icon {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .decision-artifact-chrome-doc-icon .decision-artifact-chrome-img-icon {
    width: 22px;
    height: 22px;
  }

  .decision-artifact-chrome-mask-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .decision-artifact-chrome-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
  }

  .decision-artifact-chrome-title-column {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .decision-artifact-chrome-sync-hint {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }

  .decision-artifact-chrome-sync-hint--ok {
    color: var(--text-dim);
  }

  .decision-artifact-chrome-sync-hint--behind {
    color: var(--danger-hover-text);
  }

  .decision-artifact-chrome-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    overflow: visible;
  }

  .decision-artifact-chrome-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card-raised);
    color: #334155;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
  }

  .decision-artifact-chrome-refresh:hover:not(:disabled) {
    background: #f0fdf4;
    border-color: #86efac;
    color: #047857;
  }

  .decision-artifact-chrome-refresh:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .decision-artifact-chrome-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Ready to refresh: muted mint, same footprint as download — no pulse or heavy gradient. */
  .decision-artifact-chrome-refresh--stale {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
  }

  .decision-artifact-chrome-refresh--stale:hover:not(:disabled) {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
  }

  .decision-artifact-chrome-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card-raised);
    color: #334155;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
  }

  .decision-artifact-chrome-download:hover {
    background: var(--color-accent-700);
    border-color: var(--color-accent-800);
    color: var(--skilvana-links-hover);
  }

  .decision-artifact-chrome-download:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .decision-artifact-tradeoffs-hint {
    margin: -0.35rem 0 0.65rem;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--text-dim);
  }

  .decision-artifact-panel-title--dark {
    color: var(--color-neutral-800);
  }

  .decision-artifact-comparison-icon--tone-0,
  .decision-artifact-comparison-icon--tone-1,
  .decision-artifact-comparison-icon--tone-2 {
    background: var(--color-neutral-400);
    color: var(--color-neutral-800);
  }

  .decision-artifact-bullet-panels--stacked {
    display: block;
  }

  .decision-artifact-bullet-panel--surface,
  .decision-artifact-section--risks .decision-artifact-bullet-panel {
    min-height: 0;
    border: 1px solid var(--border);
    background: var(--bg-card-raised);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    text-align: left;
  }

  .decision-artifact-bullet-panel--surface .decision-artifact-bullet-list {
    color: #334155;
  }

  .decision-artifact-export-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.65rem;
    margin-top: 0.25rem;
    align-self: flex-start;
    width: min(100%, 28rem);
    max-width: 100%;
    box-sizing: border-box;
  }

  .decision-artifact-export-row button {
    min-height: 40px;
    padding: 0.65rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
  }

  .decision-artifact-export-cta {
    justify-content: center;
    font-weight: 700;
  }


  /* Decision artifact footer buttons: equal width, not full-card */
  .decision-artifact-export-row {
    align-self: flex-start;
    width: min(100%, 28rem);
    max-width: 100%;
    box-sizing: border-box;
  }

  .decision-artifact-export-row button {
    min-height: 40px;
    padding: 0.65rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
  }

  .decision-artifact-export-cta {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .decision-artifact-main-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .decision-artifact-main-panel.decision-artifact-hero {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-500);
    border-radius: 20px;
    padding: 1.2rem 1.4rem;
  }

  .decision-artifact-hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .decision-artifact-hero-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
  }

  .decision-artifact-heading {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1.3;
  }

  .decision-artifact-hero-divider {
    height: 1px;
    background: var(--color-neutral-500);
    border-radius: 999px;
  }

  .decision-artifact-recommendation-label {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
  }

  .decision-artifact-summary {
    margin: 0;
    color: var(--color-neutral-900);
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .decision-artifact-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .decision-artifact-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 2.25rem 1.25rem 2.5rem;
    min-height: 220px;
  }

  .decision-artifact-loading .loading-spinner-container {
    margin: 0;
  }

  .decision-artifact-loading-label {
    margin: 0;
    font-size: 0.9rem;
    color: #5b607c;
    text-align: center;
    max-width: 16rem;
    line-height: 1.4;
  }

  .decision-artifact-section {
    background: var(--bg-card);
    border: 1px solid #e2e6f1;
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }

  .decision-artifact-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
  }

  .decision-artifact-section-heading h3 {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #1a2250;
  }

  .decision-artifact-section-heading--with-icon h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: 0.12em;
  }

  .decision-artifact-h-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-neutral-700);
    opacity: 0.92;
  }

  .decision-artifact-section-heading-text {
    min-width: 0;
  }

  .decision-artifact-why-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .decision-artifact-why-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: #1c254a;
    line-height: 1.4;
  }

  .why-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-neutral-600);
    margin-top: 0.35rem;
    flex-shrink: 0;
  }

  .decision-artifact-section--risks {
    border: 2px solid var(--skilvana-primary-headings);
    box-shadow: none;
  }

  .decision-artifact-section--risks .decision-artifact-h-icon {
    color: var(--color-neutral-700);
  }

  .decision-artifact-risk-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .decision-artifact-risk-cards li {
    display: block;
    margin: 0;
  }

  .decision-artifact-risk-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  }

  .decision-artifact-risk-card-text {
    font-weight: 600;
    color: var(--text);
  }

  .decision-artifact-risk-card .decision-artifact-line-block > span:first-of-type {
    font-weight: 600;
    color: var(--text);
  }

  .decision-artifact-section--comparison {
    padding-bottom: 1rem;
  }

  .decision-artifact-comparison-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .decision-artifact-comparison-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    background: var(--bg-card-raised);
  }

  .decision-artifact-comparison-card--selected {
    border-color: var(--color-accent-900);
    background: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-accent-900);
  }

  .decision-artifact-comparison-row {
    display: flex;
    gap: 1rem;
    padding: 0;
    border-bottom: none;
  }

  .decision-artifact-comparison-row:last-child {
    padding-bottom: 0;
  }

  .decision-artifact-comparison-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--color-neutral-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-neutral-800);
    font-size: 1rem;
  }

  .decision-artifact-comparison-icon--score {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
  }

  .decision-artifact-comparison-icon--score-positive,
  .decision-artifact-comparison-icon--score-neutral,
  .decision-artifact-comparison-icon--score-negative {
    background: var(--color-neutral-400);
    color: var(--color-neutral-800);
  }

  .decision-artifact-comparison-card--selected .decision-artifact-comparison-icon--score {
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-accent-800);
    color: var(--color-accent-900);
  }

  .decision-artifact-comparison-content {
    flex: 1;
  }

  .decision-artifact-line-main {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
  }

  .decision-artifact-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.12);
  }

  .decision-artifact-comparison-name {
    margin: 0;
    font-weight: 700;
    color: #0b1a32;
    font-size: 1rem;
  }

  .decision-artifact-comparison-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
  }

  .decision-artifact-comparison-rationale {
    margin-top: 0.45rem;
  }

  .decision-artifact-comparison-rationale-summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: #5b607c;
    list-style: none;
    user-select: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: '';
      display: inline-block;
      width: 0.28em;
      height: 0.28em;
      margin-right: 0.4em;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(-45deg);
      vertical-align: 0.15em;
      transition: transform 0.12s ease;
    }
  }

  .decision-artifact-comparison-rationale[open] .decision-artifact-comparison-rationale-summary {
    color: #0b1a32;
    margin-bottom: 0.35rem;

    &::before {
      transform: rotate(45deg);
      vertical-align: 0.1em;
    }
  }

  .decision-artifact-comparison-summary {
    margin: 0;
    color: #5b607c;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .decision-artifact-line-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
  }

  .decision-artifact-line-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .decision-artifact-comparison-summary--inline {
    margin: 0.15rem 0 0.35rem;
  }

  .decision-artifact-pivot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .decision-artifact-pivot-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--color-neutral-900);
    line-height: 1.4;
  }

  .decision-artifact-pivot-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-neutral-600);
    margin-top: 0.35rem;
    flex-shrink: 0;
  }

  .decision-artifact-section--decision-summary,
  .decision-artifact-decision-summary-panel {
    margin-top: 0.15rem;
  }

  .decision-artifact-decision-summary-body {
    margin: 0;
    color: var(--color-neutral-900);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .decision-artifact-section--next-steps {
    background: var(--bg-card);
  }

  .decision-artifact-next-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .decision-artifact-next-steps-list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    color: #1c254a;
    line-height: 1.45;
  }

  .decision-artifact-next-step-check {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 4px;
    border: 2px solid var(--border-subtle);
    flex-shrink: 0;
    margin-top: 0.2rem;
    box-sizing: border-box;
  }

  .decision-artifact-tradeoffs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .decision-artifact-tradeoffs-list li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    align-items: start;
    column-gap: 0.6rem;
    color: #1c254a;
    line-height: 1.45;
  }

  .tradeoff-icon {
    font-weight: 700;
    color: var(--color-neutral-700);
    margin-top: 0.1rem;
    text-align: center;
    width: 1.25rem;
  }

  .decision-artifact-bullet-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
  }

  .decision-artifact-bullet-panel {
    min-height: 170px;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
  }

  .decision-artifact-panel-title {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .decision-artifact-bullet-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    color: var(--text);
    line-height: 1.4;
  }

  .decision-artifact-bullet-list li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.35rem;
  }

  .decision-artifact-bullet-list--trade-offs .mini-icon {
    color: #16a34a;
  }

  .decision-artifact-bullet-list--risks .mini-icon,
  .decision-artifact-bullet-list--unknowns .mini-icon {
    color: #ef4444;
  }

  .decision-artifact-unknowns {
    margin-top: 0.3rem;
  }

  .decision-artifact-bullet-subtitle {
    margin: 0.4rem 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .decision-artifact-next-step {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(67, 225, 223, 0.35);
    background: linear-gradient(135deg, rgba(67, 225, 223, 0.12), rgba(9, 104, 232, 0.08));
  }

  .decision-artifact-next-step p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
  }

  .decision-artifact-item-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .decision-artifact-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .decision-artifact-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }

  .decision-artifact-card {
    background: var(--bg-card-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: var(--shadow-card);
  }

  .decision-artifact-card--highlight {
    border-color: rgba(67, 225, 223, 0.7);
    box-shadow: 0 6px 18px rgba(67, 225, 223, 0.2);
  }

  .decision-artifact-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .decision-artifact-card-score {
    font-weight: 700;
    color: var(--accent);
  }

  .decision-artifact-card-body {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-dim);
  }

  .decision-artifact-card-mini-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
    list-style: none;
  }

  .decision-artifact-card-mini-list li {
    position: relative;
    margin-bottom: 0.25rem;
    padding-left: 0.4rem;
    display: flex;
    gap: 0.35rem;
    align-items: center;
  }

  .mini-icon {
    font-size: 0.8rem;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mini-icon--pros {
    color: #16a34a;
  }
  .mini-icon--cons {
    color: #ef4444;
  }

  .decision-artifact-card-mini-list--pros li {
    color: var(--text);
  }

  .decision-artifact-card-mini-list--cons li {
    color: var(--text);
  }

  .decision-artifact-bullet-list--narrow {
    padding-left: 1.1rem;
    font-size: 0.85rem;
  }

  .button-row--export {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  @media (max-width: 768px) {
    .decision-artifact-meta {
      flex-direction: column;
    }
    .decision-artifact-bullet-panels {
      grid-template-columns: 1fr;
    }
  }

  .result-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 0.15rem;
  }

  .ranking-grid { margin-top: 0.9rem; }

  .ranking-item {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    gap: 0.25rem;
    width: 200px;
    background: var(--bg-card-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 0.75rem;
    margin: 0 0.6rem 0.6rem 0;

    .ranking-rank {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--text-dim);
    }

    .ranking-name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
    }

    .ranking-score {
      font-size: 0.82rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--accent);
    }
    
    &.highlight {
      border-color: var(--accent);
      border-width: 2px;
      background: linear-gradient(135deg, var(--bg-card-raised) 0%, color-mix(in srgb, var(--accent) 8%, var(--bg-card-raised)) 100%);
      
      .ranking-rank {
        color: var(--accent);
      }
    }
  }

  /* Risks by Option layout */
  .risks-by-option {
    margin-top: 1.5rem;
    
    h3 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 1rem;
    }
  }
  
  .risks-by-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
  
  .risks-option-group {
    background: color-mix(in srgb, var(--danger-bg) 15%, var(--bg-card));
    border: 1px solid var(--danger-border);
    border-radius: 10px;
    padding: 0.75rem;
  }
  
  .risks-option-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--danger-border);
    
    h4 {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--danger-text);
      margin: 0;
    }
  }
  
  .risks-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  
  .risk-card {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--danger-bg) 35%, var(--bg-card));
    border: 1px solid var(--danger-border);
    border-radius: 5px;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    color: var(--danger-text);
    flex: 0 0 auto;
    max-width: 100%;
    
    .risk-icon {
      font-size: 0.8rem;
      opacity: 0.8;
      flex-shrink: 0;
    }
    
    .risk-text {
      line-height: 1.2;
    }
  }
  
  /* Legacy risks section (keep for compatibility) */
  .risks-section {
    .risks-card-group {
      background: color-mix(in srgb, var(--danger-bg) 20%, var(--bg-card));
      border: 1px solid var(--danger-border);
      border-radius: 12px;
      padding: 1rem;
      margin-top: 0.5rem;
    }
  }

  .summary-block {
    margin-top: 1rem;
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
    p { color: var(--text-muted); font-size: 0.9rem; margin: 0.35rem 0; }
  }

  /* ─── Responsive ───────────────────────────────────────────────────── */

  @media (max-width: 1200px) {
    .dual-column { grid-template-columns: 1fr; }
    .tradeoff-row { grid-template-columns: 1fr; }
  }

  @media (max-width: 720px) {
    padding: 1rem;
    .document-main { width: 100%; }
    .question-generation-row { flex-direction: column; align-items: stretch; }
  }
 

/* ─── Document dev page layout ──────────────────────────────────────────── */

.doc-dev-page {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 2.725rem);
  overflow: hidden;

  .doc-dev-chat-panel {
    flex: 0 0 383px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);

    /* legacy wrapper used by ChatTranscriptComponent */
    .chat-container {
      flex: 1;
      min-height: 0;
      height: 100%;
    }

    .doc-dev-transcript {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      min-height: 0;

      .doc-dev-message {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        max-width: 85%;
        font-size: 0.9rem;
        line-height: 1.4;

        &.user {
          align-self: flex-end;
          background: var(--chat-user-bg);
          color: var(--chat-user-text);
        }

        &.ai {
          align-self: flex-start;
          background: var(--chat-ai-bg);
          color: var(--chat-ai-text);
        }

        /* Animated thinking dots */
        &.doc-dev-thinking {
          display: flex;
          gap: 4px;
          align-items: center;
          padding: 0.6rem 0.9rem;

          span {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #888;
            animation: dev-dot-bounce 1.1s infinite ease-in-out;

            &:nth-child(1) { animation-delay: 0s; }
            &:nth-child(2) { animation-delay: 0.18s; }
            &:nth-child(3) { animation-delay: 0.36s; }
          }
        }
      }

      .scroll-sentinel {
        height: 1px;
      }

      /* AI suggestion card */
      .doc-dev-suggestion {
        align-self: flex-start;
        max-width: 92%;
        border-radius: 0.5rem;
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
        border: 1.5px solid #d1a800;
        background: #fffbe6;

        &.accepted {
          border-color: #1a9e4a;
          background: #f0faf4;

          .suggestion-label { color: #1a9e4a; }
        }

        &.pending {
          .suggestion-label { color: #a07800; }
        }

        .suggestion-label {
          font-weight: 700;
          font-size: 0.78rem;
          text-transform: uppercase;
          letter-spacing: 0.04em;
        }

        .suggestion-summary {
          margin: 0.3rem 0 0;
          line-height: 1.4;
        }

        .suggestion-awaiting {
          display: block;
          margin-top: 0.35rem;
          font-size: 0.78rem;
          color: #888;
          font-style: italic;
        }
      }
    }

    /* Status bar at the bottom of the chat panel */
    .doc-dev-chat-footer {
      flex-shrink: 0;
      padding: 0.45rem 1rem;
      font-size: 0.78rem;
      color: var(--text-muted);
      border-top: 1px solid var(--border);
      background: var(--bg-card);
    }
  }

  .doc-dev-tools-panel {
    flex: 3 1 0;
    overflow: auto;
    padding: 1.25rem;
    min-width: 0;
  }

  .doc-dev-output-panel {
    flex: 2 1 0;
    overflow: auto;
    padding: 1.25rem;
    min-width: 0;
    border-left: 1px solid var(--border);
  }

  /* Shared panel content styles */
  .dev-panel-section {
    margin-bottom: 1.75rem;

    .dev-panel-heading {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin: 0 0 0.6rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .dev-panel-count {
      font-weight: 400;
      color: var(--text-dim);
      font-size: 0.85em;
    }

    .dev-panel-empty {
      color: var(--text-dim);
      font-size: 0.85rem;
      font-style: italic;
      margin: 0;
    }

    /* Process step list */
    .dev-process-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      .dev-process-step {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.5rem 0.7rem;
        border-radius: 0.4rem;
        border: 1.5px solid transparent;
        transition: background 0.2s, border-color 0.2s;

        &.proposed {
          background: var(--bg-card-raised);
          border-color: var(--border);
          color: var(--text-muted);

          .dev-process-marker { background: var(--text-dim); color: #fff; }
          strong { color: var(--text-muted); }
          em     { color: var(--text-dim); }
        }

        &.active {
          background: #fffbe6;
          border-color: #f0c040;

          .dev-process-marker { background: #f0c040; color: #fff; }
        }

        &.done {
          background: #f0faf4;
          border-color: #68c47a;

          .dev-process-marker { background: #1a9e4a; color: #fff; }
          strong { color: #1a7a34; }
        }

        .dev-process-marker {
          flex-shrink: 0;
          width: 1.4rem;
          height: 1.4rem;
          border-radius: 50%;
          background: #ccc;
          color: #fff;
          font-size: 0.75rem;
          font-weight: 700;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0.1rem;
        }

        .dev-process-body {
          display: flex;
          flex-direction: column;
          gap: 0.1rem;

          strong { font-size: 0.88rem; }
          em     { font-size: 0.78rem; color: var(--text-muted); font-style: normal; }
        }
      }
    }

    /* Evaluation grid table */
    .dev-eval-grid-wrap {
      overflow-x: auto;
    }

    .dev-eval-grid {
      border-collapse: collapse;
      font-size: 0.82rem;
      width: 100%;

      th, td {
        padding: 0.3rem 0.5rem;
        text-align: center;
        white-space: nowrap;
      }

      thead th {
        font-weight: 600;
        color: var(--text-muted);
        border-bottom: 2px solid var(--border);
        font-size: 0.78rem;
        max-width: 7rem;
        white-space: normal;
        text-align: center;
      }

      .dev-eval-option-name {
        text-align: left;
        font-weight: 500;
        padding-right: 0.75rem;
        white-space: nowrap;
        color: var(--text);
      }

      .dev-eval-cell {
        font-weight: 700;
        border-radius: 0.25rem;
        min-width: 2.5rem;
        cursor: default;

        &.vp   { background: #bbf7d0; color: #14532d; }
        &.p    { background: #dcfce7; color: #166534; }
        &.n    { background: #f3f4f6; color: var(--text-muted); }
        &.neg  { background: #fee2e2; color: var(--error-text); }
        &.vneg { background: #fecaca; color: #7f1d1d; }
        &.empty { color: var(--text-dim); }
      }

      tbody tr:hover td {
        filter: brightness(0.95);
      }
    }

    .dev-panel-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;

      li {
        padding: 0.45rem 0.7rem;
        background: var(--bg-card-raised);
        border-radius: 0.375rem;
        font-size: 0.88rem;
        line-height: 1.4;

        em {
          color: var(--text-muted);
          font-size: 0.85em;
        }
      }
    }
  }

  /* Ranking list in the outcomes panel */
  .dev-ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    .dev-ranking-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 0.75rem;
      background: var(--bg-card-raised);
      border-radius: 0.375rem;
      font-size: 0.9rem;

      &.top {
        background: #eef7ef;
        border: 1.5px solid #68c47a;

        .dev-ranking-pos  { color: #1a7a34; font-weight: 700; }
        .dev-ranking-score { color: #1a7a34; }
      }

      .dev-ranking-pos {
        color: var(--text-dim);
        font-size: 0.8rem;
        min-width: 1.2rem;
        text-align: center;
      }

      .dev-ranking-name {
        flex: 1;
      }

      .dev-ranking-score {
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--text-muted);
        min-width: 2rem;
        text-align: right;
      }
    }
  }
}

@keyframes dev-dot-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
  40%           { transform: translateY(-5px); opacity: 1;   }
}

/* ─── Trade-offs Cards ───────────────────────────────────────────────────── */

.trade-offs-cards {
  margin: 1.5rem 0;
  
  h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
  }
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.option-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  
  &:hover {
    box-shadow: var(--shadow-card);
  }
  
  &.top-option {
    border-color: var(--accent);
    border-width: 2px;
    background: linear-gradient(135deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 5%, var(--bg-card)) 100%);
  }
}

.option-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  
  h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .option-score {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    min-width: 52px;
    text-align: center;
  }
}

.option-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.pros-section, .cons-section {
  h5 {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.3rem 0;
    color: var(--text-dim);
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
    li {
      font-size: 0.7rem;
      color: var(--text-muted);
      padding: 0.1rem 0;
      padding-left: 1rem;
      position: relative;
      line-height: 1.3;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.25rem;
        width: 0.7rem;
        height: 0.7rem;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
  
  .muted-text.small {
    font-size: 0.7rem;
  }
}

.pros-section {
  h5 {
    color: #166534;
  }
  
  ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  }
}

.cons-section {
  h5 {
    color: var(--error-text);
  }
  
  ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/%3E%3C/svg%3E");
  }
}

/* ─── First-visit onboarding (documents workspace) ───────────────────────── */

.document-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: block;
  padding: 0;
  font-family: "Manrope", "Noto Sans", Arial, sans-serif;
  box-sizing: border-box;
}

.document-onboarding-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.document-onboarding-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Horizontal padding matches .sk-ui-demo so columns line up with the workspace */
  padding: 1rem 2rem 1.25rem;
  pointer-events: none;
}

.document-onboarding-shell .document-onboarding-lead,
.document-onboarding-shell .document-onboarding-columns,
.document-onboarding-shell .document-onboarding-cta-wrap {
  pointer-events: auto;
}

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

.document-onboarding-lead {
  flex: 0 0 auto;
  margin: 0 auto 0.65rem;
  max-width: min(40rem, calc(100% - 1.5rem));
  padding: 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--bg-card-raised);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.document-onboarding-columns {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  gap: 0.5rem;
  box-sizing: border-box;
}

.document-onboarding-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 0;
}

/* Match .sk-ui-demo: .left-sidebar 400px, .center-column flex 3, .right-column flex 2 */
.document-onboarding-column--left {
  flex: 0 0 min(400px, 36vw);
  align-items: flex-start;
}

.document-onboarding-column--center {
  flex: 3 1 0;
  align-items: center;
}

.document-onboarding-column--right {
  flex: 2 1 0;
  align-items: flex-end;
}

.document-onboarding-column .document-onboarding-card {
  width: 100%;
  max-width: min(340px, 100%);
}

.document-onboarding-column--center .document-onboarding-card {
  max-width: min(400px, 94%);
}

.document-onboarding-cta-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 0.5rem;
  box-sizing: border-box;
}

@media (max-width: 960px) {
  .document-onboarding-shell {
    height: 100%;
    overflow-y: auto;
    padding: 0.75rem 0.75rem 1.25rem;
    -webkit-overflow-scrolling: touch;
  }

  .document-onboarding-columns {
    flex-direction: column;
    align-items: stretch;
    flex: none;
    gap: 1.25rem;
    max-height: none;
  }

  .document-onboarding-column--left,
  .document-onboarding-column--center,
  .document-onboarding-column--right {
    flex: none !important;
    align-items: stretch !important;
    width: 100%;
  }

  .document-onboarding-column .document-onboarding-card,
  .document-onboarding-column--center .document-onboarding-card {
    max-width: none;
  }
}

.document-onboarding-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg-card);
  border-radius: 18px;
  padding: 2rem 1.35rem 1.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.document-onboarding-step {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.document-onboarding-step--blue {
  /*background: linear-gradient(135deg, var(--dark-blue), var(--medium-blue));*/
  background: var(--color-blue); /*var(--medium-blue);*/
  box-shadow: 0 4px 12px rgba(9, 104, 232, 0.4);
}

.document-onboarding-step--purple {
  /*background: linear-gradient(135deg, #6d28d9, #8b5cf6);*/
  background: #8b5cf6;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.38);
}

.document-onboarding-step--green {
  /*background: linear-gradient(135deg, #047857, #10b981);*/
  background: #10b981;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.38);
}

.document-onboarding-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.document-onboarding-icon--blue {
  background: rgba(9, 104, 232, 0.12);
  color: var(--color-blue);
}

.document-onboarding-icon--purple {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}

.document-onboarding-icon--green {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
}

.document-onboarding-icon-svg {
  display: block;
}

.document-onboarding-card-title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}

.document-onboarding-card-subheader {
  margin: 0 0 0.65rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
  max-width: 26rem;
}

.document-onboarding-card-desc {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-dim);
  flex: 1;
  max-width: 28rem;
}

.document-onboarding-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.document-onboarding-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.document-onboarding-tag--blue-soft {
  background: rgba(38, 99, 235, 0.09);
  color: var(--skilvana-accent-moments);
}

.document-onboarding-tag--blue-strong {
  background: rgba(9, 104, 232, 0.18);
  color: #1e3a8a;
}

.document-onboarding-tag--purple-soft {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
}

.document-onboarding-tag--pink {
  background: rgba(219, 39, 119, 0.12);
  color: #9d174d;
}

.document-onboarding-tag--lavender {
  background: rgba(167, 139, 250, 0.22);
  color: #4c1d95;
}

.document-onboarding-tag--green-soft {
  background: rgba(5, 150, 105, 0.1);
  color: #047857;
}

.document-onboarding-tag--green-strong {
  background: rgba(5, 150, 105, 0.2);
  color: #064e3b;
}


/* CTA button style copied from standard document page button */
button.document-onboarding-cta {
  --border-subtle: var(--border-subtle);
  --radius-btn:    8px;
  --bg-card-raised:  var(--bg-card-raised);
  --text:       var(--text);
  --shadow-btn:  0 1px 3px rgba(0, 0, 0, 0.08);
  --accent: var(--color-blue);
  --bg-btn-hover:    #eef3fb;

  appearance: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-btn);
  background: var(--bg-card-raised);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.38rem 0.75rem;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: border-color 0.15s, background 0.15s, color 0.15s;

  &:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--bg-btn-hover);
    color: var(--accent);
  }

  &:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  &.danger-button {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);

    &:hover:not(:disabled) {
      background: var(--danger-hover-bg);
      border-color: var(--danger-hover-border);
      color: var(--danger-hover-text);
    }
  }

  &.primary {
    background: linear-gradient(135deg, var(--accent) 0%, #0d4dfa 100%);
    border-color: transparent;
    color: #ffffff;
    padding: 0.65rem 1.75rem;
    font-size: 0.95rem;
  }
}
} /* end .sk-ui-demo */

/* ─── Print styles ───────────────────────────────────────────────────────── */
@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  .document-onboarding-overlay {
    display: none !important;
  }
  .sk-ui-demo {
    padding: 0;
  }
  .sk-ui-demo > *:not(.workspace-main),
  .workspace-main > *:not(.workspace-tab-panels),
  .workspace-tab-panels > *:not([id="workspace-panel-artifact"]),
  [id="workspace-panel-artifact"] > *:not(.document-module.result-module),
  .lesson-breadcrumb,
  .sk-breadcrumb,
  .button-row,
  .button-row--export {
    display: none !important;
  }
  .result-module {
    display: block !important;
    break-inside: avoid;
  }
}

/* PDF export mode - optimized for PDF generation */
body.pdf-export-mode .sk-ui-demo {
  padding: 0 !important;
}

body.pdf-export-mode .sk-ui-demo > *:not(.workspace-main),
body.pdf-export-mode .workspace-main > *:not(.workspace-tab-panels),
body.pdf-export-mode .workspace-tab-panels > *:not([id="workspace-panel-artifact"]),
body.pdf-export-mode [id="workspace-panel-artifact"] > *:not(.document-module.result-module),
body.pdf-export-mode .lesson-breadcrumb,
body.pdf-export-mode .sk-breadcrumb,
body.pdf-export-mode .button-row {
  display: none !important;
}

body.pdf-export-mode .result-module {
  display: block !important;
  break-inside: avoid;
}

body.pdf-export-mode .document-onboarding-overlay {
  display: none !important;
}

.tour-step-content {
  padding: 0.25rem 0;
}

.tour-step-title {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}

.tour-step-subheader {
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
}

.tour-step-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-dim);
}

/* Header account menu (Settings / Log out) */
body .full-height .sk-breadcrumb .sk-breadcrumb-account-wrap {
  position: relative;
  flex-shrink: 0;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-account-caret {
  font-size: 0.7em;
  opacity: 0.85;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 11rem;
  padding: 0.35rem 0;
  margin: 0;
  list-style: none;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 200;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-account-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

body .full-height .sk-breadcrumb .sk-breadcrumb-account-item:hover {
  background: var(--surface-hover);
}

/* Account settings — page content (layout: sk-sidenav-layout in form-component.css) */

.main-content:has(.account-settings-layout) {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
}

.account-settings-layout.sk-sidenav-layout {
  flex: 1;
  min-height: 0;
}

.account-settings-layout .sk-sidenav-main {
  overflow-y: auto;
  min-height: 0;
}

.account-settings-sidenav {
  background: var(--skilvana-auth-panel-gradient);
  border-right-color: rgba(148, 163, 184, 0.34);
  align-self: stretch;
}

.account-settings-sidenav .sk-sidenav-heading {
  color: rgba(255, 255, 255, 0.68);
}

.account-settings-sidenav button.sk-sidenav-item {
  color: rgba(255, 255, 255, 0.72);
}

.account-settings-sidenav button.sk-sidenav-item:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
}

.account-settings-sidenav button.sk-sidenav-item:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
}

.account-settings-sidenav button.sk-sidenav-item.sk-sidenav-item--active {
  color: var(--color-white);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.11);
}

.account-settings-tab-bar {
  flex-shrink: 0;
  flex-wrap: wrap;
}

.account-settings-page {
  --sk-form-field-label-width: 14.5rem;
}

.account-settings-stack {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Account settings page */
.account-settings-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: min(52rem, 100%);
  margin: 0;
  padding: 1.25rem 0 2.5rem;
  width: 100%;
  box-sizing: border-box;
}

.account-settings-intro {
  max-width: 44rem;
}

.account-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.account-settings-tab-panel {
  margin: 0;
}

.account-settings-tab-panel .account-settings-section {
  margin-top: 0;
}

.account-settings-section {
  margin: 0;
}

.account-settings-hidden-value {
  font-style: italic;
  cursor: pointer;
}

.account-settings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.account-settings-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
}

.account-settings-grid-row > .sk-form-field {
  margin-bottom: 0;
  min-width: 0;
}

@media (min-width: 40rem) {
  .account-settings-grid-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@supports (grid-template-rows: subgrid) {
  .account-settings-grid-row {
    grid-template-rows: auto auto auto;
  }

  .account-settings-grid-row > .sk-form-field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}

.account-settings-saved {
  margin: 1rem 0 0;
  color: #15803d;
  font-size: 0.9rem;
}

.account-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}

/* ─── Document critique panel ────────────────────────────────────────────── */

.sk-ui-demo {
  .doc-right-column-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0.5rem 0.5rem 0;
  }

  .doc-right-column-tabs.sk-tabs--bar button.sk-tab.sk-tab--active {
    background: color-mix(in srgb, var(--color-accent-900) 8%, transparent);
    color: var(--color-accent-900);
    border-color: transparent;
    box-shadow: none;
  }

  .doc-critique-discovery {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(9, 104, 232, 0.18);
    background: linear-gradient(135deg, rgba(9, 104, 232, 0.04), rgba(67, 225, 223, 0.06));
  }

  .doc-critique-discovery-copy {
    min-width: 0;
  }

  .doc-critique-discovery-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
  }

  .doc-critique-discovery-text {
    margin: 0.25rem 0 0;
    line-height: 1.45;
  }

  .doc-critique-discovery-btn {
    flex-shrink: 0;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-btn);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;

    &:hover:not(:disabled) {
      filter: brightness(1.05);
    }

    &:disabled {
      opacity: 0.65;
      cursor: default;
    }
  }

  .doc-critique-panel {
    margin: 0.5rem 0.5rem 0.75rem;
    padding: 0;
    overflow: hidden;
  }

  .doc-critique-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: var(--bg-card-raised);
    border-bottom: 1px solid var(--border);
  }

  /* Indeterminate progress directly under the header while critique runs */
  .doc-critique-progress-track {
    height: 3px;
    background: var(--border);
    overflow: hidden;
  }

  .doc-critique-progress-indeterminate {
    height: 100%;
    width: 35%;
    border-radius: 0 2px 2px 0;
    background: var(--accent-color);
    animation: doc-critique-progress-slide 1.1s ease-in-out infinite;
  }

  @keyframes doc-critique-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
  }

  .doc-critique-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    flex: 1;
  }

  /* Health badge */
  .doc-critique-health {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    &--strong     { background: rgba(16,  185, 129, 0.12); color: #059669; }
    &--developing { background: rgba(245, 158,  11, 0.12); color: #b45309; }
    &--needs-work { background: rgba(239,  68,  68, 0.10); color: var(--danger-text); }
  }

  .doc-critique-refresh-btn {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
  }

  /* Loading / empty states */
  .doc-critique-empty {
    margin: 0;
    padding: 0.9rem 1rem;
    font-size: 0.82rem;
    color: var(--text-dim);
    font-style: italic;
  }

  /* Entry list */
  .doc-critique-entries {
    display: flex;
    flex-direction: column;
  }

  /* Paginated carousel: one concern/insight + one suggestion per page */
  .doc-critique-carousel {
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    padding: 0 0 0.35rem;
  }

  .doc-critique-carousel-hint {
    margin: 0;
    padding: 0.55rem 1rem 0.35rem;
    line-height: 1.35;
  }

  .doc-critique-carousel-progress {
    margin: 0;
    padding: 0 1rem 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
  }

  .doc-critique-carousel-slots {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
  }

  @media (min-width: 900px) {
    .sk-ui-demo .doc-critique-carousel-slots {
      grid-template-columns: 1fr 1fr;
    }

    .sk-ui-demo .doc-critique-carousel-slot:first-child {
      border-right: 1px solid var(--border-subtle);
    }
  }

  .doc-critique-carousel-slot {
    border-bottom: 1px solid var(--border-subtle);
    min-height: 3.5rem;
  }

  .doc-critique-carousel-slot-label {
    margin: 0;
    padding: 0.35rem 1rem 0.2rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    background: var(--bg-card-raised, rgba(0, 0, 0, 0.02));
  }

  .doc-critique-carousel-slot .doc-critique-entry {
    border-bottom: none;
  }

  .doc-critique-slot-empty {
    margin: 0;
    padding: 0.75rem 1rem 1rem;
  }

  .doc-critique-carousel-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--bg-card-raised, rgba(0, 0, 0, 0.02));
  }

  .doc-critique-carousel-nav-btn {
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card-raised);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);

    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }

  .doc-critique-entry {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: default;
    transition: background 0.1s;

    &:last-child      { border-bottom: none; }
    &--concern        { border-left: 3px solid #ef4444; }
    &--suggestion     { border-left: 3px solid var(--color-blue); }
    &--insight        { border-left: 3px solid var(--text-dim); }
    &--hovered        { background: var(--bg-card-raised, rgba(0,0,0,0.03)); }
  }

  .doc-critique-entry-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
  }

  /* Type badge */
  .doc-critique-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.42rem;
    border-radius: 4px;
    flex-shrink: 0;

    &--concern    { background: rgba(239,  68,  68, 0.10); color: var(--danger-text); }
    &--suggestion { background: rgba(  9, 104, 232, 0.10); color: var(--color-blue); }
    &--insight    { background: rgba(148, 163, 184, 0.15); color: #475569; }
  }

  .doc-critique-type-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Location chip */
  .doc-critique-location {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-card-raised);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.08rem 0.38rem;
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Entry text */
  .doc-critique-summary {
    margin: 0 0 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
  }

    .doc-critique-detail {
      margin: 0;
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.45;
    }

    .doc-critique-entry--active {
      background: rgba(9, 104, 232, 0.08);
      border-left-color: var(--accent-color);
    }

    .doc-critique-toggle-btn {
      padding: 0.2rem 0.7rem;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      color: var(--text);
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }

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

    .doc-critique-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      padding: 0.75rem 1rem;
    }

    .doc-critique-summary-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      border: 1px solid transparent;
      background: var(--bg-card-raised);
    }

    .doc-critique-summary-pill--concern {
      color: var(--danger-text);
      border-color: rgba(220, 38, 38, 0.3);
    }

    .doc-critique-summary-pill--suggestion {
      color: var(--color-blue);
      border-color: rgba(9, 104, 232, 0.35);
    }

    .doc-critique-summary-pill--insight {
      color: #475569;
      border-color: rgba(148, 163, 184, 0.35);
    }

    &.doc-critique-panel--collapsed .doc-critique-entries {
      display: none;
    }
  }

/* Modal — Skilvana Style Guide (document workspace) */
.sk-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(4px);
  z-index: 10000;
}

.sk-modal {
  width: 100%;
  max-width: 32rem;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  text-align: left;
}

.sk-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.sk-modal-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--font-brand);
  font-size: var(--text-heading-3-size);
  font-weight: var(--text-heading-3-weight);
  line-height: var(--text-heading-3-lh);
  color: var(--skilvana-primary-headings);
}

.sk-modal-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--skilvana-body-text);
  font-family: var(--font-brand);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  box-shadow: none;
}

.sk-modal-close:hover {
  background: var(--skilvana-page-background);
  color: var(--skilvana-primary-headings);
}

.sk-modal-close:focus-visible {
  outline: 2px solid var(--color-accent-800);
  outline-offset: 2px;
}

.sk-modal-body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--text-body-1-size);
  font-weight: var(--text-body-1-weight);
  line-height: var(--text-body-1-lh);
  color: var(--skilvana-body-text);
}

.sk-modal-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* Showcase page — scrollable catalog, not the document workspace shell */
.main-content > .ui-demo-page-root.sk-ui-demo {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  height: auto !important;
  min-height: 100%;
  max-height: none !important;
  overflow: visible !important;
  padding: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  gap: 60px;
  box-sizing: border-box;
  background: var(--skilvana-page-background);
}

.main-content > .ui-demo-page-root.sk-ui-demo > section {
  flex: none;
  min-height: 0;
  overflow: visible;
}

/* Showcase Page Helpers */

.sk-section-title {
  margin: 0 0 24px;
  font-family: var(--font-brand);
  font-size: var(--text-heading-2-size);
  font-weight: var(--text-heading-2-weight);
  color: var(--skilvana-primary-headings);
  border-bottom: 1px solid var(--skilvana-borders-dividers);
  padding-bottom: 8px;
}

.sk-token-label {
  margin: 4px 0 0;
  font-family: monospace;
  font-size: 11px;
  color: var(--skilvana-body-text);
  opacity: 0.7;
}

.sk-demo-subheader {
  margin-top: 0;
  margin-bottom: 12px;
  font-family: var(--font-brand);
  font-size: var(--text-heading-4-size);
  font-weight: var(--text-heading-4-weight);
  color: var(--skilvana-body-text);
}

.sk-heatmap-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.ui-demo-page-intro {
  margin-bottom: 24px;
}

.ui-demo-page-intro .sk-text-heading-1 {
  margin-bottom: 12px;
}

.ui-demo-typography-divider {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--skilvana-borders-dividers);
}

.ui-demo-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.sk-card.sk-card--color-swatch {
  padding: 12px;
}

.sk-card.sk-card--color-swatch .sk-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-demo-color-swatch {
  height: 60px;
  border-radius: var(--radius-1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.sk-card.sk-card--flush {
  padding: 0;
  overflow: hidden;
}

.sk-card.sk-card--flush > .sk-card-body {
  padding: 0;
}

.ui-demo-matrix-header {
  padding: 20px;
}

.ui-demo-matrix-pad-left {
  padding-left: 20px;
}

.ui-demo-matrix-last-row {
  border-bottom: none;
}

.ui-demo-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.ui-demo-heatmap-row,
.ui-demo-badge-row,
.ui-demo-button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ui-demo-button-row {
  gap: 12px;
}

.ui-demo-button-size-row {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.ui-demo-badge-row--spaced {
  margin-top: 16px;
}

.ui-demo-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-demo-form-gap {
  margin-top: 16px;
}

.ui-demo-form-row {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-demo-panel-note {
  margin: 0 0 var(--space-4);
}

.ui-demo-component-block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--skilvana-borders-dividers);
}

.ui-demo-component-block:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.ui-demo-component-status {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-dim);
}

.ui-demo-modal-copy-gap {
  margin-top: 16px;
}

.ui-demo-artifact-root {
  max-width: 800px;
}

.sk-card-header {
  margin-bottom: 12px;
}

.sk-card-title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--text-heading-4-size);
  font-weight: var(--text-heading-4-weight);
  color: var(--skilvana-body-text);
}

.sk-card-subtitle {
  margin: 4px 0 0;
  font-family: var(--font-brand);
  font-size: var(--text-body-2-size);
  color: var(--skilvana-body-text);
}