/* DesignSystemScanner plugin styles. Reads the host's design tokens
   (--surface, --text, --muted, --line, --brand, --brand-contrast,
   --hover-tint, --control-border, --input-border, --empty-veil, --font,
   --btn-radius) when they exist, so light/dark mode follows the host, and
   falls back to sane defaults otherwise. Everything is scoped under
   .dss-root. Icons are Material Symbols Outlined — load that font in the
   host page. */
.dss-root { --dss-err: #b3261e; --dss-err-bg: rgba(179,38,30,.10); --dss-warn: #8a5a00; --dss-warn-bg: rgba(245,166,35,.16);
  --dss-ok: #1b7a3d; font-family: var(--font, system-ui, sans-serif); color: var(--text, #111827); position: relative; }
.dss-root *, .dss-root *::before, .dss-root *::after { box-sizing: border-box; }
.dss-root [hidden] { display: none !important; }
.dss-icon { font-size: 16px; line-height: 1; flex: 0 0 auto; }

.dss-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.dss-label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.dss-label.dss-inline { margin: 0; }
.dss-hint { font-size: 12px; color: var(--muted, #6b7280); margin: 8px 0 0; }
.dss-select, .dss-input { border: 1px solid var(--input-border, #d1d5db); border-radius: 4px; padding: 8px 12px; font-size: 14px;
  font-family: inherit; color: var(--text, #111827); background: var(--surface, #fff); outline: none; }
.dss-input { width: 100%; }
textarea.dss-input { resize: vertical; }
.dss-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.dss-select:focus, .dss-input:focus { border-color: var(--brand, #d63a0c); box-shadow: 0 0 0 3px rgba(214,58,12,.14); }

.dss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--btn-radius, 8px);
  font-size: 12px; line-height: 16px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; }
.dss-btn-primary { border: 0; background: var(--brand, #d63a0c); color: var(--brand-contrast, #fff); }
.dss-btn-primary:hover:not(:disabled) { background: var(--brand-hover, var(--brand, #d63a0c)); filter: brightness(.95); }
.dss-btn-ghost { border: 1px solid var(--control-border, #d1d5db); background: var(--surface, #fff); color: var(--text, #111827); font-weight: 600; }
.dss-btn-ghost:hover { background: var(--hover-tint, rgba(0,0,0,.04)); }
.dss-btn-danger { border: 1px solid var(--control-border, #d1d5db); background: var(--surface, #fff); color: var(--danger, #b3261e); }
.dss-btn-danger:hover { background: var(--danger-tint, rgba(179,38,30,.08)); }
.dss-btn:disabled { opacity: .55; cursor: default; }
/* A quiet text link, pushed to the far right of its row — used for About. */
.dss-btn-link { height: auto; padding: 4px 6px; margin-left: auto; border: 0; background: none; color: var(--muted, #6b7280); font-size: 12px; font-weight: 500; gap: 4px; }
.dss-btn-link .dss-icon { font-size: 16px; }
.dss-btn-link:hover { color: var(--text, #111827); text-decoration: underline; }
.dss-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted, #6b7280); cursor: pointer; }
.dss-icon-btn:hover { background: var(--hover-tint, rgba(0,0,0,.05)); color: var(--text, #111827); }
.dss-btn:focus-visible, .dss-icon-btn:focus-visible, .dss-tab:focus-visible, .dss-chip:focus-visible { outline: 2px solid var(--g-focus, var(--text, currentColor)); outline-offset: 2px; }

.dss-loader { margin: 0 0 16px; }
.dss-loader .dss-panel { max-width: 760px; }
.dss-loader > .dss-status { margin: 10px 0 0; min-height: 18px; }
.dss-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 16px; align-items: start; }
/* Stack by the width of the space the plugin is given, not the window's: in a docs page's narrow column the page and results can't sit side by side. */
.dss-root { container-type: inline-size; }
@container (max-width: 900px) { .dss-split { grid-template-columns: minmax(0, 1fr); } }
.dss-results-panel, .dss-preview-panel { background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 12px; min-width: 0; }
.dss-results-panel { padding: 14px 16px; max-height: min(780px, calc(100vh - 180px)); min-height: 240px; overflow-y: auto; }
.dss-results-panel .dss-actions { margin: 0 0 12px; }
.dss-preview-panel { padding: 0; overflow: hidden; }
.dss-preview-toolbar { padding: 10px 14px; border-bottom: 1px solid var(--line, #e5e7eb); font-size: 12px; color: var(--muted, #6b7280); overflow-wrap: anywhere; }
.dss-frame { display: block; width: 100%; height: min(70vh, 720px); border: 0; background: #fff; }

/* Rail is an inset shadow and tabs have no negative margin, so a host that gives the bar overflow can't clip the underline. */
.dss-tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--line, #e5e7eb); margin: 0 0 14px; }
.dss-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted, #6b7280); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.dss-tab.dss-active { color: var(--text, #111827); border-bottom-color: var(--brand, #d63a0c); font-weight: 600; }
.dss-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dss-row > .dss-input { flex: 1 1 200px; width: auto; }
.dss-panel > * + * { margin-top: 8px; }
.dss-actions { display: flex; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.dss-status { font-size: 14px; color: var(--muted, #6b7280); }
.dss-status.dss-error { color: var(--dss-err); }
.dss-status.dss-ok { color: var(--dss-ok); }

.dss-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.dss-summary-card { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.dss-summary-num { font-size: 20px; font-weight: 600; }
.dss-summary-label { font-size: 12px; color: var(--muted, #6b7280); }
.dss-summary-card.dss-error .dss-summary-num { color: var(--dss-err); }
.dss-summary-card.dss-warning .dss-summary-num { color: var(--dss-warn); }
.dss-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.dss-chip { border: 1px solid var(--control-border, #d1d5db); border-radius: 999px; background: var(--surface, #fff); color: var(--text, #111827);
  padding: 5px 12px; font: 600 12.5px/1.2 inherit; font-family: inherit; cursor: pointer; text-transform: capitalize; }
.dss-chip:hover { background: var(--hover-tint, rgba(0,0,0,.04)); }
.dss-chip.dss-active { background: var(--brand, #d63a0c); border-color: var(--brand, #d63a0c); color: var(--brand-contrast, #fff); }

.dss-violations { display: flex; flex-direction: column; gap: 8px; }
.dss-violation { border: 1px solid var(--line, #e5e7eb); border-left-width: 4px; border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.dss-violation:hover { border-color: var(--brand, #2563eb); }
.dss-violation.dss-error { border-left-color: var(--dss-err); background: var(--dss-err-bg); }
.dss-violation.dss-warning { border-left-color: var(--dss-warn); background: var(--dss-warn-bg); }
.dss-violation-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; }
.dss-violation-msg { display: inline-flex; gap: 6px; align-items: flex-start; }
.dss-violation-msg .dss-icon { margin-top: 2px; }
.dss-violation-count { color: var(--muted, #6b7280); flex: 0 0 auto; }
.dss-violation-meta { font-size: 12px; color: var(--muted, #6b7280); margin-top: 4px; overflow-wrap: anywhere; }
.dss-violation-examples { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-top: 4px; overflow-wrap: anywhere; color: var(--muted, #6b7280); }
.dss-empty { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--control-border, #d1d5db); border-radius: 12px;
  padding: 24px; background: var(--empty-veil, transparent); color: var(--muted, #6b7280); font-size: 14px; text-align: center; }

.dss-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.45); }
.dss-modal { width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface, #fff); color: var(--text, #111827);
  border-radius: 12px; border: 1px solid var(--line, #e5e7eb); overflow: hidden; }
.dss-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line, #e5e7eb); }
.dss-modal-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.dss-modal-body { padding: 18px; overflow-y: auto; }
.dss-spec-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 22px; }
.dss-spec-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 6px 8px 6px 12px; }
.dss-spec-row.dss-active { border-color: var(--brand, #d63a0c); box-shadow: inset 0 0 0 1px var(--brand, #d63a0c); }
.dss-spec-name { flex: 1 1 auto; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dss-spec-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.dss-badge { font-size: 11px; font-weight: 600; color: var(--muted, #6b7280); border: 1px solid var(--line, #e5e7eb); border-radius: 999px; padding: 2px 8px; }
.dss-add h3 { font-size: 16px; margin: 0 0 12px; }
.dss-add .dss-label { margin-top: 14px; }
.dss-add .dss-row + .dss-row, .dss-add textarea + .dss-row { margin-top: 10px; }

.dss-file-drop { display: flex; align-items: center; gap: 10px; border: 2px dashed var(--control-border, #d1d5db); border-radius: 8px; padding: 16px;
  background: var(--empty-veil, transparent); color: var(--muted, #6b7280); font-size: 14px; cursor: pointer; }
.dss-file-drop:hover, .dss-file-drop.dss-dragover, .dss-file-drop:focus-within { border-color: var(--brand, #d63a0c); color: var(--text, #111827); }
.dss-file-drop .dss-icon { font-size: 20px; }
.dss-file-name { overflow-wrap: anywhere; }
.dss-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.dss-file-drop { position: relative; }

.dss-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text, #111827); cursor: pointer; }
.dss-check input { margin-top: 2px; accent-color: var(--brand, #d63a0c); }

.dss-importer-form { margin-top: 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; }
.dss-importer-form summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.dss-importer-form-body { padding: 0 12px 12px; }
.dss-importer-form-body .dss-label { margin-top: 10px; }
.dss-importer-form-body .dss-btn { margin-top: 12px; }

/* Dropdown: same shape as the Gestalt System's custom menus (e.g. the demo switcher). */
.dss-menu-wrap { position: relative; display: inline-flex; }
.dss-menu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; min-height: 32px; border-radius: 4px; border: 1px solid var(--control-border, #d1d5db);
  background: var(--surface, #fff); color: var(--text, #111827); font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; }
.dss-menu-btn:hover:not(:disabled) { background: var(--hover-tint, rgba(0,0,0,.04)); }
.dss-menu-btn:disabled { opacity: .6; cursor: default; }
.dss-menu-btn:focus-visible { outline: 2px solid var(--g-focus, var(--text, currentColor)); outline-offset: 2px; }
.dss-menu-btn .dss-icon { font-size: 18px; }
.dss-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 100%; max-height: 60vh; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.dss-menu.dss-open { display: block; }
.dss-menu-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--text, #111827); cursor: pointer; white-space: nowrap; }
.dss-menu-option:hover, .dss-menu-option:focus { background: var(--hover-tint, rgba(0,0,0,.05)); outline: 0; }
.dss-menu-option .dss-icon { font-size: 16px; width: 16px; visibility: hidden; }
.dss-menu-option[aria-selected="true"] .dss-icon { visibility: visible; }
@media (max-width: 640px) { .dss-menu-btn { font-size: 14px; min-height: 40px; } .dss-menu-option { padding: 12px; } }

/* Space between a form field and the button that submits it. */
.dss-panel > textarea.dss-input { display: block; }
.dss-panel > textarea.dss-input + .dss-btn { margin-top: 12px; }

/* A parenthetical note inside a label, in regular weight. */
.dss-note { font-weight: 400; color: var(--muted, #6b7280); }
.dss-note a { color: var(--brand-link, var(--brand, #d63a0c)); overflow-wrap: anywhere; }

/* Violation rows highlight their elements in the preview on hover; example labels target one element. */
.dss-example-chip { border-radius: 4px; cursor: pointer; }
.dss-example-chip:hover { background: var(--hover-tint, rgba(0,0,0,.08)); color: var(--text, #111827); text-decoration: underline; }
.dss-example-stale { cursor: default; opacity: .6; }
.dss-example-stale:hover { background: none; text-decoration: none; }
.dss-examples-more { font-style: italic; }

/* Code mode: the preview panel shows stylesheet source, with flagged lines highlighted. */
.dss-tabs { flex-wrap: wrap; }
.dss-tab { white-space: nowrap; }
.dss-files-label { margin-top: 14px; }
.dss-code-view { height: min(70vh, 720px); overflow: auto; background: var(--surface, #fff); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.dss-code-files { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line, #e5e7eb); position: sticky; top: 0; background: var(--surface, #fff); z-index: 1; }
.dss-code-file { border: 1px solid var(--control-border, #d1d5db); background: transparent; color: var(--muted, #6b7280); border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.dss-code-file.dss-active { color: var(--text, #111827); border-color: var(--brand, #d63a0c); font-weight: 600; }
.dss-code-line { display: flex; white-space: pre; min-height: 1.6em; line-height: 1.6; }
.dss-code-ln { flex: 0 0 auto; width: 52px; padding-right: 12px; text-align: right; color: var(--muted, #6b7280); user-select: none; }
.dss-code-lc { flex: 1; padding-right: 16px; color: var(--text, #111827); }
.dss-code-line.dss-hl-error { background: var(--dss-err-bg); box-shadow: inset 3px 0 0 var(--dss-err); }
.dss-code-line.dss-hl-warning { background: var(--dss-warn-bg); box-shadow: inset 3px 0 0 var(--dss-warn); }
.dss-code-truncated { padding: 12px 16px; color: var(--muted, #6b7280); font-style: italic; }

/* The About card (the Studio kit's About card, same layout). Host names from the plugin bridge and --g-* sizes, each with a
   fallback, so it follows the host's light and dark. */
.dss-about { width: min(440px, 100%); }
.dss-about p { margin: 0; }
.dss-about-body { display: flex; flex-direction: column; gap: var(--g-space-4, 16px); }
.dss-about-app { display: flex; align-items: center; gap: var(--g-space-4, 16px); }
.dss-about-icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--g-radius-l, 14px); background: var(--brand, #ea580c); color: var(--brand-contrast, #fff); }
.dss-about-icon .dss-icon { font-size: 36px; }
.dss-about-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dss-about-names h3 { margin: 0; font-size: var(--g-text-2xl, 22px); line-height: var(--g-lh-2xl, 1.3); font-weight: var(--g-weight-title, 700); }
.dss-about-by { font-size: var(--g-text-s, 13px); line-height: var(--g-lh-s, 1.45); color: var(--muted, #6b7280); }
.dss-about-purpose { font-size: var(--g-text-m, 14px); line-height: var(--g-lh-m, 1.5); color: var(--text, #111827); }
.dss-about-facts { display: flex; flex-wrap: wrap; gap: var(--g-space-2, 8px) var(--g-space-6, 24px); margin: 0; padding: var(--g-space-3, 12px) var(--g-space-4, 16px); border-radius: var(--g-radius-m, 8px); background: var(--g-surface-2, var(--empty-veil, #f3f4f6)); }
.dss-about-facts div { display: flex; flex-direction: column; gap: 2px; }
.dss-about-facts dt { font-size: var(--g-text-xs, 12px); line-height: var(--g-lh-xs, 1.4); color: var(--muted, #6b7280); }
.dss-about-facts dd { margin: 0; font-size: var(--g-text-m, 14px); line-height: var(--g-lh-m, 1.5); font-weight: var(--g-weight-strong, 600); }
.dss-about-suite { display: flex; align-items: center; gap: var(--g-space-3, 12px); padding-top: var(--g-space-4, 16px); border-top: 1px solid var(--line, #e5e7eb); }
.dss-about-suite-logo { flex: none; width: 44px; height: 44px; border-radius: var(--g-radius-m, 8px); object-fit: contain; }
.dss-about-suite-logo.is-placeholder { display: grid; place-items: center; box-sizing: border-box; border: 1px dashed var(--g-line-strong, var(--line, #d1d5db)); color: var(--g-faint, var(--muted, #9ca3af)); font-size: var(--g-text-xs, 12px); font-weight: var(--g-weight-strong, 600); }
.dss-about-suite-name { font-size: var(--g-text-m, 14px); line-height: var(--g-lh-m, 1.5); font-weight: var(--g-weight-strong, 600); }
.dss-about-suite-line, .dss-about-credits { font-size: var(--g-text-s, 13px); line-height: var(--g-lh-s, 1.45); color: var(--muted, #6b7280); }
.dss-about-small { display: flex; flex-direction: column; gap: var(--g-space-1, 4px); padding-top: var(--g-space-4, 16px); border-top: 1px solid var(--line, #e5e7eb); font-size: var(--g-text-xs, 12px); line-height: var(--g-lh-xs, 1.4); color: var(--muted, #6b7280); }
.dss-about-links { display: flex; flex-wrap: wrap; gap: var(--g-space-1, 4px) var(--g-space-4, 16px); }
.dss-about a { color: var(--g-brand-link, var(--brand, #c2410c)); text-decoration: none; }
.dss-about a:hover { text-decoration: underline; }
.dss-about a:focus-visible { outline: 2px solid var(--g-focus, var(--text, currentColor)); outline-offset: 2px; border-radius: var(--g-radius-s, 4px); }
.dss-about-soon { color: var(--muted, #6b7280); cursor: default; text-decoration: underline dotted; text-underline-offset: 3px; }
.dss-about-actions { display: flex; justify-content: flex-end; padding: 0 18px 18px; }

/* Confirm dialog: the Gestalt Dialogs pattern (surface, 12px corners, the dialog shadow, 24px padding, at most 480px wide). */
.dss-confirm { width: min(480px, calc(100vw - 32px)); box-sizing: border-box; padding: 24px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff); color: var(--text, #111827); font-family: var(--font, system-ui, sans-serif);
  box-shadow: var(--g-shadow-2, 0 16px 48px rgba(20,24,35,.18)); }
.dss-confirm::backdrop { background: rgba(15,17,21,.6); }
.dss-confirm-title { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 600; }
.dss-confirm-msg { margin: 0 0 24px; font-size: 14px; line-height: 20px; color: var(--muted, #6b7280); }
.dss-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* A result that names the token to use, and the code-mode bar that applies those fixes. */
.dss-violation-fix { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.dss-violation-fix code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--hover-tint, rgba(0,0,0,.05)); border: 1px solid var(--line, #e5e7eb); border-radius: 4px; padding: 1px 6px; }
.dss-fix-note { color: var(--muted, #6b7280); }
.dss-fix-copy { border: 1px solid var(--control-border, #d1d5db); background: transparent; color: var(--muted, #6b7280); border-radius: 6px; padding: 2px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.dss-fix-copy:hover { color: var(--text, #111827); border-color: var(--brand, #33a0d9); }
.dss-fix-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; background: var(--hover-tint, rgba(0,0,0,.04)); font-size: 13px; }
.dss-fix-bar-actions { display: flex; gap: 6px; }
.dss-fix-bar .dss-btn { height: 32px; font-size: 13px; padding: 0 12px; }
.dss-fix-bar-note { flex-basis: 100%; font-size: 12px; color: var(--muted, #6b7280); }