/*
 * Q-Insights design tokens — qi-* semantic classes.
 * All colors use OKLCH. Chroma is kept low at lightness extremes.
 */

.qi-surface        { background: oklch(99.8% 0.004 266); border: 1px solid oklch(89% 0.009 255); }
.qi-btn-primary    { background: oklch(54% 0.21 266); color: oklch(98% 0.004 266); border: none; cursor: pointer; }
.qi-btn-primary:hover { background: oklch(49% 0.21 266); }
.qi-btn-primary:focus-visible { outline: 2px solid oklch(54% 0.21 266); outline-offset: 2px; }
.qi-btn-secondary  { background: transparent; border: 1px solid oklch(82% 0.01 255); color: oklch(34% 0.014 255); cursor: pointer; }
.qi-btn-secondary:hover { background: oklch(97% 0.005 255); }
.qi-btn-secondary:focus-visible { outline: 2px solid oklch(54% 0.21 266); outline-offset: 2px; }
.qi-filter-label   { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
                     text-transform: uppercase; color: oklch(50% 0.01 255); margin-bottom: 4px; }
.qi-filter-input   { display: block; width: 100%; padding: 6px 9px; font-size: 0.8125rem;
                     border: 1px solid oklch(85% 0.01 255); border-radius: 6px;
                     background: oklch(99.5% 0.003 255); color: oklch(22% 0.014 255);
                     transition: border-color 100ms ease-out, box-shadow 100ms ease-out; }
.qi-filter-input:focus { outline: none; border-color: oklch(54% 0.21 266);
                         box-shadow: 0 0 0 3px oklch(54% 0.21 266 / 0.12); }
.qi-filter-input::placeholder { color: oklch(69% 0.007 255); }
.qi-filter-select  { appearance: none;
                     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
                     background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; padding-right: 28px; }
details summary    { list-style: none; }
details summary::-webkit-details-marker { display: none; }
.qi-chevron        { transition: transform 150ms ease-out; flex-shrink: 0; }
details[open] .qi-chevron { transform: rotate(90deg); }
.qi-group-summary  { color: oklch(30% 0.014 255); }
.qi-group-summary:hover { background: oklch(97.5% 0.005 255); }
.qi-group-summary:focus-visible { outline: 2px solid oklch(54% 0.21 266); outline-offset: -2px; }
.qi-group-divider  { height: 1px; background: oklch(91% 0.007 255); margin: 0 16px; }
.qi-filter-badge   { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
                     font-size: 0.6875rem; font-weight: 600;
                     background: oklch(92% 0.055 266); color: oklch(42% 0.18 266); }
.qi-criteria-pill  { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: 999px;
                     font-size: 0.75rem; font-weight: 500;
                     background: oklch(93% 0.05 266); color: oklch(40% 0.17 266);
                     border: 1px solid oklch(86% 0.065 266); }
.qi-row-hover:hover { background: oklch(98.8% 0.004 255); }
.qi-profile-toggle a:focus-visible { outline: 2px solid oklch(54% 0.21 266); outline-offset: -2px; }
.qi-surface tbody tr:last-child { border-bottom: none !important; }
@media (prefers-reduced-motion: reduce) {
  .qi-chevron, .qi-row-hover { transition: none !important; }
}

/* Survey form tokens */
.qi-survey-input {
  border: none;
  border-bottom: 1px solid oklch(82% 0.01 255);
  background: transparent;
  padding: 8px 0;
  font-size: 1rem;
  color: oklch(22% 0.014 255);
  outline: none;
  transition: border-color 150ms ease-out;
}
.qi-survey-input:focus { border-bottom-color: oklch(54% 0.21 266); border-bottom-width: 2px; padding-bottom: 7px; }
.qi-survey-input::placeholder { color: oklch(69% 0.007 255); }
.qi-survey-question { display: block; width: 100%; font-size: 0.9375rem; font-weight: 500; color: oklch(26% 0.013 255); margin-bottom: 1rem; }
.qi-survey-fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.qi-survey-form > * + * { border-top: 1px solid oklch(92% 0.007 255); }
.qi-survey-choice { accent-color: oklch(54% 0.21 266); cursor: pointer; }
.qi-survey-option { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.qi-survey-option-text { font-size: 0.9375rem; color: oklch(28% 0.013 255); }
.qi-btn-primary:disabled, .qi-btn-primary[disabled] { background: oklch(88% 0.006 255); color: oklch(62% 0.008 255); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .qi-survey-input { transition: none !important; }
}