/* v7.1 shared visual primitives: cards, controls, badges, and statuses. */
:root {
  --ui-radius-card: 18px;
  --ui-radius-control: 8px;
  --ui-control-min-height: 44px;
  /* --border, --accent, and --panel-soft were never real design tokens (the
     actual token names are --line, --blue, and --surface-soft), so these
     always fell back to their fixed light-mode default no matter which
     theme was active. That mostly went unnoticed because the light-mode
     fallback happened to look close enough - but in dark mode it left every
     card that uses --ui-border (core-task-switcher, hardware-panel,
     results-panel, gpu-advisor-panel, gpu-insights-panel,
     gpu-placement-panel, benchmark-panel, studio-shell, ui-card, plus the
     local-funnel/community-measurement panels) with a light gray border
     floating on a dark background instead of blending in. */
  --ui-border: var(--line, #cbd5e1);
  --ui-surface: var(--panel, #ffffff);
  --ui-surface-muted: var(--surface-soft, #f6f8fb);
  --ui-accent: var(--blue, #14658a);
}

:where(.core-task-switcher, .hardware-panel, .results-panel, .gpu-advisor-panel,
  .gpu-insights-panel, .gpu-placement-panel, .benchmark-panel, .studio-shell,
  .ui-card) {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
}

/* button:not(.term-help) - this sitewide minimum-control-height rule was the
   real, viewport-independent cause of the "?" help icons rendering as tall
   ovals (and, by pushing that flex row taller, making the checkbox next to
   it look vertically misaligned): it applies at every width, so the earlier
   mobile-only (max-width: 680px) exclusions never touched it. .term-help is
   a small circular annotation, not a tap target that needs 44px. */
:where(button:not(.term-help), .primary-button, .ghost-button, .toggle-button,
  .icon-button, .ui-button, select, input[type="text"], input[type="search"],
  input[type="number"]) {
  min-height: var(--ui-control-min-height);
  border-radius: var(--ui-radius-control);
}

:where(.grade-pill, .evidence-status, .evidence-badge, .advisor-rank,
  .studio-stale, .studio-aging, .studio-fresh, .ui-badge) {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  border-radius: 999px;
  line-height: 1.25;
}

/* --success/--warning/--danger aren't real tokens either (real names are
   --green/--yellow/--red), so these were always stuck at their fallback
   color regardless of theme - same class of bug as --ui-border above.
   Switching to var(--green/--yellow/--red) directly failed the CI
   accessibility check (axe: color-contrast on .data-completeness > strong),
   because this text has no paired background the way badge/pill text does,
   so it needs a color that stays readable on the plain panel background in
   both themes. Kept the fixed colors (which do pass contrast) rather than
   the theme-linked tokens; revisit with a contrast-checked per-theme pair
   if this ever needs real dark-mode tuning. */
.data-completeness.is-high strong { color: #18794e; }
.data-completeness.is-medium strong { color: #9a6700; }
.data-completeness.is-low strong { color: #b42318; }

.local-funnel-panel {
  width: 100%;
  margin-top: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
}
.local-funnel-panel p { margin: .6rem 0; color: var(--muted, #64748b); }
.local-funnel-summary { display: flex; flex-wrap: wrap; gap: .5rem; }
.local-funnel-summary span { padding: .35rem .55rem; border-radius: 999px; background: var(--ui-surface-muted); }
.local-funnel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.mobile-decision-summary { display: none; }

.community-measurement-panel {
  /* 이 패널은 community-feedback.js에서 #benchmarkSheet 바로 뒤에
     형제 요소로 삽입된다. 그런데 여기서만 독자적인 width 공식
     (min(calc(100% - 2rem), 1400px))을 쓰고 있어서, 같은 부모(.app-shell)
     안의 다른 패널들이 쓰는 공식(min(1540px, calc(100vw - 48px)), 아래
     .benchmark-panel과 동일)과 상한선(1400px vs 1540px)이 달라 화면
     중앙에서 양옆이 다른 패널보다 좁게 안쪽으로 들어간 것처럼 보였다.
     같은 공식으로 맞춰 폭을 통일한다. */
  width: min(1540px, calc(100vw - 48px));
  margin: 1.25rem auto;
  padding: clamp(1rem, 2vw, 1.5rem);
}
.community-measurement-panel > div:first-child p { color: var(--muted, #64748b); }
.community-measurement-panel textarea {
  width: 100%;
  min-height: 9rem;
  margin-top: 1rem;
  padding: .8rem;
  resize: vertical;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-muted);
  color: inherit;
  font: 500 .85rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.community-measurement-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0; }
.community-measurement-panel pre {
  min-height: 4.5rem;
  max-width: 100%;
  overflow: auto;
  padding: .8rem;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.community-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.community-reference-grid article { padding: .9rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); }
.community-reference-grid h3 { margin-top: 0; }

@media (max-width: 700px) {
  .community-reference-grid { grid-template-columns: 1fr; }
}

html:not([data-theme="dark"]) :where(.core-task-button small, .simple-pick-specs > span) {
  color: #475569;
}
html:not([data-theme="dark"]) .theme-toggle button[data-theme="dark"] {
  color: #334155;
}
html:not([data-theme="dark"]) .evidence-badge.is-estimate {
  color: #7c2d12;
  background: #ffedd5;
}
html:not([data-theme="dark"]) .simple-pick-copy[role="button"] {
  color: #164e63;
}
html:not([data-theme="dark"]) .data-kind.is-reference {
  color: #1e3a8a;
  background: #dbeafe;
}
html:not([data-theme="dark"]) :where(.app-footer, .app-footer strong, .local-funnel-panel > summary) {
  color: #334155;
}

@media (max-width: 520px) {
  :where(button:not(.term-help), .primary-button, .ghost-button, .toggle-button, .icon-button) {
    min-height: 44px;
  }

  .mobile-decision-summary {
    position: sticky;
    z-index: 30;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
    backdrop-filter: blur(12px);
  }
}

@media print {
  :where(.app-header, .core-task-switcher, .app-toast, .mobile-decision-summary) { display: none !important; }
  :where(.gpu-advisor-card, .studio-plan-card, .detail-section) { break-inside: avoid; }
}