/* Sheet Assistant: built on Fluent 2 design tokens (vendor/fluent-tokens.css, generated from @fluentui/tokens webLightTheme). */
:root {
  --brand: #107c41; /* Excel brand green */
  --brand-hover: #0e7038;
  --brand-pressed: #0a5c2e;
  --brand-tint: #ebf6ef;
  --brand-stroke: #9fd3b2;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  color: var(--colorNeutralForeground1);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--colorNeutralBackground2); min-width: 300px; }
[hidden] { display: none !important; }
a { color: var(--colorBrandForegroundLink); }
a:hover { color: var(--colorBrandForegroundLinkHover); }
h2 { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightSemibold); margin: 0 0 4px; }
h3 { font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); margin: 16px 0 8px; }
p { margin: 0 0 8px; }
.caption { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }

/* Icons: Fluent System Icons rendered as masks so they take the text colour */
.ic { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-s { width: 16px; height: 16px; }
.ic-xl { width: 32px; height: 32px; }

/* Header + tabs */
.app-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; background: var(--colorNeutralBackground1); }
.app-header h1 { font-size: var(--fontSizeBase400); font-weight: var(--fontWeightSemibold); margin: 0; }
.pill { margin-left: auto; font-size: var(--fontSizeBase100); padding: 0 8px; line-height: 20px; border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2); white-space: nowrap; }
.pill.excel { background: var(--brand-tint); color: var(--brand-pressed); }
.tablist { display: flex; gap: 0; padding: 0 4px; background: var(--colorNeutralBackground1); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.tab { position: relative; flex: 1 1 auto; justify-content: center; display: flex; align-items: center; gap: 5px; padding: 10px 6px; border: 0; background: none; font: inherit; color: var(--colorNeutralForeground2); cursor: pointer; border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0; white-space: nowrap; }
.tab .ic { width: 16px; height: 16px; }
@media (max-width: 340px) { .tab .ic { display: none; } }
.tab:hover { color: var(--colorNeutralForeground1); background: var(--colorSubtleBackgroundHover); }
.tab[aria-selected='true'] { color: var(--colorNeutralForeground1); font-weight: var(--fontWeightSemibold); }
.tab[aria-selected='true']::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 2px; background: var(--brand); }
.tab:focus-visible, .btn:focus-visible, .dropzone:focus-visible, summary:focus-visible, .finding:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 1px; }

main { flex: 1; overflow: auto; padding: 16px; }
.intro p { color: var(--colorNeutralForeground2); }

/* Steps */
.steps { display: flex; gap: 4px; list-style: none; padding: 0; margin: 12px 0 16px; }
.steps li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); padding-top: 6px; border-top: 3px solid var(--colorNeutralStroke2); }
.steps li span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; background: var(--colorNeutralBackground5); color: var(--colorNeutralForeground2); }
.steps li.done { border-color: var(--brand-stroke); color: var(--colorNeutralForeground2); }
.steps li.done span { background: var(--brand-tint); color: var(--brand-pressed); }
.steps li.current { border-color: var(--brand); color: var(--colorNeutralForeground1); font-weight: var(--fontWeightSemibold); }
.steps li.current span { background: var(--brand); color: #fff; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 12px; font: inherit; font-weight: var(--fontWeightSemibold); border-radius: var(--borderRadiusMedium); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--colorNeutralBackground1Hover); border-color: var(--colorNeutralStroke1Hover); }
.btn:active { background: var(--colorNeutralBackground1Pressed); }
.btn.primary { background: var(--brand); border-color: transparent; color: #fff; }
.btn.primary:hover { background: var(--brand-hover); }
.btn.primary:active { background: var(--brand-pressed); }
.btn.subtle { background: transparent; border-color: transparent; color: var(--colorNeutralForeground2); }
.btn.subtle:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); }
.btn.small { min-height: 24px; padding: 2px 8px; font-size: var(--fontSizeBase200); }
.btn:disabled { background: var(--colorNeutralBackgroundDisabled); color: var(--colorNeutralForegroundDisabled); border-color: var(--colorNeutralStrokeDisabled); cursor: not-allowed; }

/* Cards */
.card { background: var(--colorNeutralBackground1); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow2); padding: 12px; margin: 0 0 12px; border: 0; }
.card > summary { cursor: pointer; font-weight: var(--fontWeightSemibold); list-style: none; display: flex; align-items: center; gap: 8px; }
.card > summary::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url(icons/chevron_right_16_regular.svg) center / contain no-repeat; mask: url(icons/chevron_right_16_regular.svg) center / contain no-repeat; transition: transform var(--durationFaster); }
.card[open] > summary::before { transform: rotate(90deg); }
.card > summary .caption { margin-left: auto; font-weight: var(--fontWeightRegular); }
.card > summary::-webkit-details-marker { display: none; }
.source { display: flex; align-items: center; gap: 8px; }
.filecard { display: flex; align-items: center; gap: 10px; background: var(--colorNeutralBackground1); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow2); padding: 10px 12px; }
.filecard > .ic { color: #c43e1c; width: 28px; height: 28px; }
.filecard strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hint { display: flex; align-items: center; gap: 6px; }

/* Drop zone */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; border: 1.5px dashed var(--colorNeutralStroke1); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground1); cursor: pointer; transition: background var(--durationFaster), border-color var(--durationFaster); }
.dropzone .ic { color: var(--brand); }
.dropzone u { color: var(--colorBrandForegroundLink); text-decoration: none; }
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--brand-tint); }

/* Busy + message bars */
.busy { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--colorNeutralBackground1); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow2); }
.spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--brand-tint); border-top-color: var(--brand); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.messagebar { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; margin: 0 0 12px; border-radius: var(--borderRadiusMedium); border: var(--strokeWidthThin) solid; font-size: var(--fontSizeBase300); }
.messagebar::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat; }
.messagebar .btn { margin-left: auto; }
.messagebar.error { --mi: url(icons/error_circle_16_filled.svg); background: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); color: var(--colorStatusDangerForeground1); }
.messagebar.success { --mi: url(icons/checkmark_circle_16_filled.svg); background: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); color: var(--colorStatusSuccessForeground1); }
.messagebar.warning { --mi: url(icons/warning_16_filled.svg); background: var(--colorStatusWarningBackground1); border-color: var(--colorStatusWarningBorder1); color: var(--colorStatusWarningForeground1); }
.messagebar > div { color: var(--colorNeutralForeground1); }

/* Import checks */
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); box-shadow: var(--shadow2); }
.checks li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat; }
.checks li.pass { --mi: url(icons/checkmark_circle_16_filled.svg); color: var(--colorStatusSuccessForeground1); }
.checks li.fail { --mi: url(icons/warning_16_filled.svg); color: var(--colorStatusWarningForeground1); background: var(--colorStatusWarningBackground1); }
.checks li.info { --mi: url(icons/info_16_filled.svg); color: var(--colorNeutralForeground3); }
.checks strong { display: block; color: var(--colorNeutralForeground1); font-weight: var(--fontWeightSemibold); }
.checks .caption { color: var(--colorNeutralForeground2); }

.fields { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; }
.fields dt { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); padding-top: 3px; }
.fields dd { margin: 0; }

/* Tables */
.table-wrap { overflow: auto; max-height: 340px; background: var(--colorNeutralBackground1); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow2); }
.table-wrap.short { max-height: 200px; margin-bottom: 8px; }
.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fontSizeBase200); }
.grid th, .grid td { padding: 5px 8px; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3); text-align: left; white-space: nowrap; }
.grid thead th { position: sticky; top: 0; background: var(--colorNeutralBackground3); font-weight: var(--fontWeightSemibold); z-index: 1; }
.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid td[contenteditable] { cursor: text; }
.grid td[contenteditable]:hover { background: var(--colorNeutralBackground1Hover); }
.grid td[contenteditable]:focus { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--colorNeutralBackground1); }
.grid td.edited { background: var(--brand-tint); }
.grid tr.excluded td:not(.pick) { color: var(--colorNeutralForegroundDisabled); text-decoration: line-through; }
.grid tr.flag td { background: var(--colorStatusWarningBackground1); }
.grid .pick { width: 28px; padding-right: 0; }
.fields dd[contenteditable] { border-radius: var(--borderRadiusSmall); padding: 1px 4px; margin-left: -4px; }
.fields dd[contenteditable]:hover { background: var(--colorNeutralBackground1Hover); }
.fields dd[contenteditable]:focus { outline: 2px solid var(--brand); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; flex: none; }

/* Clean */
.paste summary { cursor: pointer; color: var(--colorBrandForegroundLink); font-size: var(--fontSizeBase200); margin: 4px 0 12px; }
.paste textarea { width: 100%; font: 12px/1.4 Consolas, 'Courier New', monospace; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-bottom-color: var(--colorNeutralStrokeAccessible); border-radius: var(--borderRadiusMedium); padding: 6px 8px; margin: 4px 0 8px; resize: vertical; }
.option-list { display: grid; gap: 2px; margin-top: 8px; }
.option { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; border-radius: var(--borderRadiusMedium); cursor: pointer; }
.option:hover { background: var(--colorSubtleBackgroundHover); }
.option input { margin-top: 2px; }
.option strong { display: block; font-weight: var(--fontWeightRegular); }
.field { display: grid; gap: 4px; margin: 8px 4px 0; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2); }
select { font: inherit; font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground1); padding: 4px 8px; min-height: 32px; border-radius: var(--borderRadiusMedium); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-bottom-color: var(--colorNeutralStrokeAccessible); background: var(--colorNeutralBackground1); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { font-size: var(--fontSizeBase200); padding: 2px 10px; border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground1); box-shadow: var(--shadow2); }
.chip b { font-weight: var(--fontWeightSemibold); }
.group { background: var(--colorNeutralBackground1); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow2); margin-bottom: 8px; overflow: hidden; }
.group > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; font-weight: var(--fontWeightSemibold); }
.group > summary::-webkit-details-marker { display: none; }
.group > summary .count { margin-left: auto; font-weight: var(--fontWeightRegular); color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); }
.group > summary .chev { width: 16px; height: 16px; transition: transform var(--durationFaster); }
.group[open] > summary .chev { transform: rotate(90deg); }
.group.attention > summary { color: var(--colorStatusWarningForeground1); }
.items { list-style: none; margin: 0; padding: 0; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke3); }
.items li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3); font-size: var(--fontSizeBase200); }
.items li:last-child { border-bottom: 0; }
.items li label { display: flex; gap: 10px; align-items: flex-start; flex: 1; min-width: 0; cursor: pointer; }
.items .where { color: var(--colorNeutralForeground3); display: block; }
.items .diff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; word-break: break-word; }
.items .before { color: var(--colorNeutralForeground3); text-decoration: line-through; white-space: pre-wrap; }
.items .after { color: var(--colorNeutralForeground1); font-weight: var(--fontWeightSemibold); }
.items .arrow { width: 12px; height: 12px; color: var(--colorNeutralForeground3); }
.items li.off .after { color: var(--colorNeutralForeground3); font-weight: var(--fontWeightRegular); }
.output { display: grid; gap: 8px; }
.output legend { font-weight: var(--fontWeightSemibold); padding: 0; float: left; margin-bottom: 4px; }
.radio { display: flex; gap: 8px; align-items: center; cursor: pointer; }

/* Audit */
.empty { text-align: center; padding: 32px 16px; color: var(--colorNeutralForeground3); }
.empty .ic { color: var(--brand); margin-bottom: 8px; }
.health { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--colorNeutralBackground1); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow4); margin-bottom: 12px; }
.health > .ic { width: 32px; height: 32px; }
.health.ok > .ic { color: var(--colorStatusSuccessForeground1); }
.health.bad > .ic { color: var(--colorStatusDangerForeground1); }
.health.warn > .ic { color: var(--colorStatusWarningForeground1); }
.health strong.title { display: block; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); }
.health .counts { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.sev { text-transform: capitalize; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fontSizeBase100); font-weight: var(--fontWeightSemibold); padding: 0 8px; line-height: 20px; border-radius: var(--borderRadiusCircular); }
.sev.high { background: var(--colorStatusDangerBackground1); color: var(--colorStatusDangerForeground1); }
.sev.medium { background: var(--colorStatusWarningBackground1); color: var(--colorStatusWarningForeground1); }
.sev.reviewed { background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filter { font: inherit; font-size: var(--fontSizeBase200); padding: 2px 10px; min-height: 24px; border-radius: var(--borderRadiusCircular); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground2); cursor: pointer; }
.filter[aria-pressed='true'] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-pressed); font-weight: var(--fontWeightSemibold); }
.group .desc { padding: 0 12px 10px; margin: -4px 0 0; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }
.finding { display: block; padding: 10px 12px; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke3); cursor: pointer; }
.finding:hover { background: var(--colorNeutralBackground1Hover); }
.finding.active { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.finding .top { display: flex; align-items: center; gap: 8px; }
.finding .addr { font: 600 12px Consolas, 'Courier New', monospace; padding: 1px 6px; border-radius: var(--borderRadiusSmall); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground1); }
.finding .msg { margin-top: 4px; }
.finding .more { display: none; margin-top: 8px; font-size: var(--fontSizeBase200); }
.finding.active .more { display: block; }
.finding .more dt { font-weight: var(--fontWeightSemibold); }
.finding .more dd { margin: 0 0 6px; color: var(--colorNeutralForeground2); }
.finding .more code { font: 12px Consolas, 'Courier New', monospace; background: var(--colorNeutralBackground3); padding: 1px 4px; border-radius: var(--borderRadiusSmall); word-break: break-all; }
.finding .review { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; cursor: pointer; }
.finding.is-reviewed .msg { color: var(--colorNeutralForeground3); }
.grid.sheet th.rh { width: 28px; text-align: center; color: var(--colorNeutralForeground3); background: var(--colorNeutralBackground3); position: sticky; left: 0; }
.grid.sheet td { border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke3); }
.grid.sheet td.flag-high { box-shadow: inset 0 0 0 2px var(--colorStatusDangerBorder2, #c50f1f); }
.grid.sheet td.flag-medium { box-shadow: inset 0 0 0 2px var(--colorStatusWarningBorder2, #f7630c); }
.grid.sheet td.focus { background: #fff4ce; }

/* Action bar + brand bar */
.actionbar { padding: 10px 16px; background: var(--colorNeutralBackground1); border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.actions { display: flex; gap: 8px; }
.actions .btn.primary { flex: 1; }
.actions:not(.active) { display: none; }
.actionbar:not(:has(.actions.active:not([hidden]))) { display: none; }
.brandbar { display: flex; align-items: center; gap: 6px; padding: 6px 16px; font-size: var(--fontSizeBase100); color: var(--colorNeutralForeground3); background: var(--colorNeutralBackground1); border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke3); }
.brandbar span:nth-child(2) { flex: 1; }
.toast { position: fixed; left: 16px; right: 16px; bottom: 96px; padding: 10px 12px; border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackgroundInverted); color: var(--colorNeutralForegroundInverted); box-shadow: var(--shadow16); font-size: var(--fontSizeBase200); z-index: 10; }

/* Mode switches */
body:not(.in-excel) .excel-only { display: none !important; }
body.in-excel .demo-only { display: none !important; }

/* license */
.card.license { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; border-color: var(--colorPaletteGreenBorder2); }
.license-row { display: flex; gap: 8px; }
.license-row input { flex: 1; min-width: 0; padding: 6px 10px; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); font: inherit; font-size: var(--fontSizeBase200); font-family: Consolas, monospace; }
.license-ok { padding: 2px 2px 8px; color: var(--colorPaletteGreenForeground2); }
.error-text { color: var(--colorPaletteRedForeground1); }