* { box-sizing: border-box; }
body { --portal-page-bg: linear-gradient(135deg, #eef2f8, #f8fbff); --portal-text: #172033; margin: 0; min-width: 320px; background: var(--portal-page-bg); color: var(--portal-text); }
body:has(.portal[data-theme="dark"]) { --portal-page-bg: linear-gradient(135deg, #0b1220, #131d30); --portal-text: #edf3ff; }
.portal { --portal-page-bg: linear-gradient(135deg, #eef2f8, #f8fbff); --portal-text: #14213d; --portal-muted: #5d6b82; --portal-surface: #fff; --portal-surface-soft: #f8fbff; --portal-border: #d7e0ec; --portal-control-border: #d7e0ec; --portal-control-hover: #eaf2ff; --portal-accent: #1769e0; --portal-accent-hover: #0f58c8; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; width: min(1500px, calc(100% - 32px)); margin: 8px auto 0; }
.portal[data-theme="dark"] { --portal-page-bg: linear-gradient(135deg, #0b1220, #131d30); --portal-text: #eef4ff; --portal-muted: #aebbd0; --portal-surface: #172131; --portal-surface-soft: #1c293b; --portal-border: #334158; --portal-control-border: #334158; --portal-control-hover: #243a59; --portal-accent: #5a9cff; --portal-accent-hover: #76adff; }
.portal-header { display: flex; justify-content: flex-end; align-items: center; margin: 0 0 8px; }
.portal-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; color: var(--portal-text); background: var(--portal-surface-soft); border: 1px solid var(--portal-control-border); border-radius: 11px; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.portal-theme-toggle:hover { border-color: var(--portal-accent); background: var(--portal-control-hover); }
.portal-theme-toggle:focus-visible, #mechanisms > ul li a:focus-visible { outline: 3px solid color-mix(in srgb, var(--portal-accent) 35%, transparent); outline-offset: 2px; }
#mechanisms { display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 18px; align-items: start; border: 0; background: transparent; padding: 0; }
#mechanisms > ul { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 8px; width: auto; margin: 0; padding: 0; border: 0; background: transparent; }
#mechanisms > ul li { list-style: none; margin: 0; padding: 0; }
#mechanisms > ul li a { display: block; width: 100%; padding: 12px 10px; color: var(--portal-text); border: 1px solid var(--portal-border); border-radius: 12px; background: var(--portal-surface); font: inherit; font-size: .8125rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
#mechanisms > ul li.is-active a { color: #fff; border-color: var(--portal-accent); background: var(--portal-accent); }
.portal-tabs > .portal-header { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; align-items: flex-end; width: auto; margin: 0; padding: 0; }
.portal-tabs > .portal-header .portal-theme-toggle { margin: 0; }
.tab-panel { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: auto; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--portal-border); border-radius: 16px; background: var(--portal-surface); box-shadow: 0 14px 35px rgba(32, 52, 90, .09); overflow: hidden; }
#mechanisms > ul li a:hover { color: var(--portal-text); border-color: var(--portal-accent); background: var(--portal-control-hover); }
#mechanisms > ul li.is-active a:hover { color: #fff; border-color: var(--portal-accent-hover); background: var(--portal-accent-hover); }
.portal-tabs #processor-root .page { padding-top: 0; padding-bottom: 0; }

/* In the unified portal the shell owns the single theme control. */
#processor-root .theme-toggle, #filter-root .filter-theme-toggle { display: none; }


.filter-app { --filter-bg: #f4f6fb; --filter-card: #fff; --filter-text: #172033; --filter-muted: #5c6780; --filter-border: #dce3f1; --filter-soft: #f1f5ff; --filter-primary: #2557d6; width: min(1120px, calc(100% - 32px)); margin: 24px auto; color: var(--filter-text); }
.filter-app[data-theme="dark"] { --filter-bg: #0d1321; --filter-card: #141c2e; --filter-text: #edf3ff; --filter-muted: #a8b4cb; --filter-border: #2a3752; --filter-soft: #1a2740; --filter-primary: #6b92ff; }
.filter-card { background: var(--filter-card); border: 1px solid var(--filter-border); border-radius: 18px; padding: 24px; box-shadow: 0 18px 50px rgba(30,45,80,.08); margin-bottom: 20px; }
.filter-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.filter-app h1 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 42px); }
.filter-app h2 { margin-top: 0; }
.filter-app p { color: var(--filter-muted); line-height: 1.55; }
.filter-app button { background: var(--filter-primary); color: #fff; border: 0; border-radius: 12px; padding: 13px 18px; font-weight: 700; cursor: pointer; }
.filter-app button[disabled] { opacity: .65; cursor: wait; }
.filter-app label { display: block; margin: 10px 0; }
.filter-app input[type="file"], .filter-app input[type="search"], .filter-app select { width: 100%; padding: 12px 14px; border: 1px solid var(--filter-border); border-radius: 10px; background: var(--filter-card); color: var(--filter-text); }
.filter-status { min-height: 1.5em; font-weight: 700; }
.filter-status.is-error { color: #b42318; }
.filter-meta, .filter-selected-summary { margin: 12px 0; padding: 12px; border: 1px solid var(--filter-border); border-radius: 10px; background: var(--filter-soft); }
.filter-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.filter-toolbar label { margin: 0; }
.filter-secondary { background: transparent !important; color: var(--filter-text) !important; border: 1px solid var(--filter-border) !important; }
.filter-brand-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; max-height: 560px; overflow: auto; padding: 6px; border: 1px solid var(--filter-border); border-radius: 12px; }
.filter-brand-item { display: flex; gap: 10px; align-items: center; padding: 9px; border: 1px solid var(--filter-border); border-radius: 10px; background: var(--filter-card); }
.filter-brand-item[hidden] { display: none; }
.filter-supplier-wrap { max-width: 420px; }
@media (max-width: 900px) {
  .portal { width: min(100% - 16px, 1500px); margin-top: 4px; }
  #mechanisms { display: block; }
  #mechanisms > .portal-header { width: auto; margin-bottom: 12px; }
  #mechanisms > ul { width: auto; flex-direction: row; flex-wrap: wrap; margin: 0 0 12px; }
  .tab-panel { width: auto; min-height: 680px; }
  .tab-panel { min-height: 680px; }
  .filter-app { width: min(100% - 16px, 1120px); margin: 12px auto; }
  .filter-topbar, .filter-toolbar { display: block; }
  .filter-toolbar > * { margin-bottom: 10px; }
}




/* Three-column portal shell: navigation, work frame, theme control. */
#mechanisms { grid-template-columns: 190px minmax(0, 1fr) 36px; grid-template-rows: auto; }
#mechanisms > .portal-header { grid-column: 3; grid-row: 1; align-self: start; width: 36px; min-width: 36px; margin: 0; padding: 0; display: flex; align-items: flex-start; justify-content: flex-start; }
#mechanisms > .portal-nav { grid-column: 1; grid-row: 1; min-width: 0; }
#mechanisms > .portal-nav > ul { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 0; }
#mechanisms > .portal-nav > ul li { list-style: none; margin: 0; padding: 0; }
#mechanisms > .portal-nav > ul li a { display: block; width: 100%; padding: 12px 10px; color: var(--portal-text); border: 1px solid var(--portal-border); border-radius: 12px; background: var(--portal-surface); font: inherit; font-size: .8125rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
#mechanisms > .portal-nav > ul li.is-active a { color: #fff; border-color: var(--portal-accent); background: var(--portal-accent); }
#mechanisms > .portal-nav > ul li a:hover { color: var(--portal-text); border-color: var(--portal-accent); background: var(--portal-control-hover); }
#mechanisms > .portal-nav > ul li.is-active a:hover { color: #fff; border-color: var(--portal-accent-hover); background: var(--portal-accent-hover); }
#mechanisms > .portal-nav > ul li a:focus-visible { outline: 3px solid color-mix(in srgb, var(--portal-accent) 35%, transparent); outline-offset: 2px; }
#mechanisms > .tab-panel { grid-column: 2; grid-row: 1; }
.portal-theme-toggle { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 10px; font-size: 1.05rem; line-height: 1; }
.portal-theme-toggle #portal-theme-icon { display: block; line-height: 1; }
.portal-theme-toggle #portal-theme-label { display: none; }
.portal-tabs #processor-tab.tab-panel { min-height: 0; }
@media (max-width: 900px) {
  #mechanisms > .portal-header { width: 36px; min-width: 36px; margin: 0 0 8px auto; align-items: flex-start; }
  #mechanisms > .portal-nav { width: auto; margin-bottom: 12px; }
  #mechanisms > .portal-nav > ul { flex-direction: row; flex-wrap: wrap; margin: 0; }
  #mechanisms > .portal-nav > ul li { flex: 1 1 180px; }
}
/* Keep the CSV chooser visually consistent with the processor chooser. */
.filter-app #filter-analyze-form > label[for="filter-file"] {
  display: block;
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
}
.filter-app #filter-file {
  padding: 6px;
  background: var(--filter-card);
  border-color: var(--filter-border);
  cursor: pointer;
}
.filter-app #filter-file::file-selector-button {
  margin-right: 10px;
  padding: 9px 14px;
  color: var(--filter-primary);
  font: inherit;
  font-weight: 700;
  background: var(--filter-soft);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.filter-app #filter-file:hover,
.filter-app #filter-file:focus-visible {
  border-color: var(--filter-primary);
}
.filter-app #filter-file:hover::file-selector-button {
  background: var(--filter-border);
}
.filter-app {
  --filter-soft-2: #f8faff;
  --filter-soft-border: #dce7ff;
  --filter-warning: #fff7df;
  --filter-warning-border: #f1d28b;
  --filter-ok: #e8fff2;
  --filter-ok-border: #9ee7bc;
}
.filter-app[data-theme="dark"] {
  --filter-soft-2: #121b2d;
  --filter-soft-border: #30415f;
  --filter-warning: #342812;
  --filter-warning-border: #806331;
  --filter-ok: #10291d;
  --filter-ok-border: #2f7f53;
}
/* Restored visual language from the standalone CSV filter, scoped to the portal. */
.filter-app .filter-card {
  background: var(--filter-card);
  border: 1px solid var(--filter-border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 18px 50px rgba(30, 45, 80, .08);
  margin-bottom: 20px;
}
.filter-app .filter-steps,
.filter-app .filter-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.filter-app .filter-step,
.filter-app .filter-mode-card {
  background: var(--filter-soft-2, var(--filter-soft));
  border: 1px solid var(--filter-soft-border, var(--filter-border));
  border-radius: 14px;
  padding: 14px;
}
.filter-app .filter-mode-card--plain {
  background: var(--filter-ok, #e8fff2);
  border-color: var(--filter-ok-border, #9ee7bc);
}
.filter-app .filter-mode-card--normalized {
  background: var(--filter-warning, #fff7df);
  border-color: var(--filter-warning-border, #f1d28b);
}
.filter-app .filter-card > ul {
  margin: 0;
  padding-left: 1.25rem;
}
.filter-app .filter-card > ul li {
  line-height: 1.55;
  color: var(--filter-muted);
}

.filter-app code {
  background: var(--filter-soft);
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--filter-text);
}
.filter-app #filter-file {
  padding: 14px;
  border: 1px dashed var(--filter-border);
  border-radius: 12px;
  background: var(--filter-soft-2, var(--filter-soft));
}
.filter-app #filter-file::file-selector-button {
  margin-right: 10px;
  padding: 9px 14px;
  color: var(--filter-primary);
  font: inherit;
  font-weight: 700;
  background: var(--filter-soft);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.filter-app #filter-file:hover::file-selector-button {
  background: var(--filter-border);
}
.filter-app .filter-loading-status {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--filter-soft);
  border: 1px solid var(--filter-border);
  color: var(--filter-text);
  font-weight: 700;
}
.filter-app .filter-loading-status.is-visible {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-app .filter-spinner {
  width: 16px;
  height: 16px;
  border: 3px solid var(--filter-border);
  border-top-color: var(--filter-primary);
  border-radius: 50%;
  animation: filter-spin .8s linear infinite;
  flex: none;
}
@keyframes filter-spin { to { transform: rotate(360deg); } }
.filter-app .filter-visually-hidden {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 760px) {
  .filter-app .filter-topbar { display: block; }
}


.filter-app .filter-unknown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  padding: 10px 12px;
  color: var(--filter-text);
  background: var(--filter-soft);
  border: 1px solid var(--filter-border);
  border-radius: 10px;
  font-weight: 700;
}
.filter-app .filter-unknown-toggle input { width: auto; }


/* Keep the portal results screen visually aligned with the original filter. */
.filter-app .filter-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 16px 0; }
.filter-app .filter-meta-pill, .filter-app .filter-selected-panel, .filter-app .filter-toolbar, .filter-app .filter-normalize-panel { background: var(--filter-soft); border: 1px solid var(--filter-border); border-radius: 12px; padding: 12px; }
.filter-app .filter-meta-pill { line-height: 1.45; }
.filter-app .filter-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 14px; align-items: end; margin-bottom: 14px; }
.filter-app .filter-search-field span, .filter-app .filter-toolbar-label { display: block; margin-bottom: 6px; color: var(--filter-muted); font-size: 13px; }
.filter-app .filter-sort-options, .filter-app .filter-actions, .filter-app .filter-output-mode { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.filter-app .filter-sort-options label, .filter-app .filter-actions label, .filter-app .filter-output-mode label { margin: 0; }
.filter-app .filter-selected-panel { margin-bottom: 14px; }
.filter-app #filter-selected-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.filter-app .filter-chip { display: inline-block; padding: 5px 9px; border: 1px solid var(--filter-border); border-radius: 999px; background: var(--filter-card); color: var(--filter-text); font-size: 13px; }
.filter-app .filter-actions { margin: 12px 0; }
.filter-app .filter-secondary { background: transparent; color: var(--filter-text); border: 1px solid var(--filter-border); }
.filter-app .filter-secondary:hover { background: var(--filter-soft); }
.filter-app .filter-brand-name { font-weight: 700; }
.filter-app .filter-brand-count { color: var(--filter-muted); font-size: 13px; }
.filter-app .filter-brand-favorite {
  margin-left: auto;
  border: 0;
  padding: 2px 4px;
  background: transparent;
  color: #64748b;
  opacity: 0.28;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.filter-app .filter-brand-favorite:hover { color: var(--filter-primary); opacity: 0.85; }
.filter-app .filter-brand-favorite.is-favorite { color: var(--filter-accent); opacity: 1; }
.filter-app .filter-output-mode { margin: 16px 0; }
.filter-app .filter-normalize-panel { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(220px, .8fr); gap: 14px; align-items: center; margin-bottom: 16px; }
.filter-app .filter-normalize-panel > label, .filter-app .filter-supplier-wrap label { margin: 0; }
@media (max-width: 760px) { .filter-app .filter-toolbar, .filter-app .filter-normalize-panel { display: block; } .filter-app .filter-toolbar > *, .filter-app .filter-normalize-panel > * { margin-bottom: 10px; } }

/* Use the available desktop width instead of stacking every introductory
   block vertically. Results keep the full row for the brand list. */
.filter-app {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 16px;
  align-items: start;
}
.filter-app > .filter-card { margin-bottom: 0; }
.filter-app > .filter-modes-card,
.filter-app > .filter-results { grid-column: 1 / -1; }
.filter-app > .filter-analysis-card { grid-column: 1; }
.filter-app > .filter-results > .filter-card { margin-bottom: 0; }
@media (max-width: 900px) {
  .filter-app { display: block; }
  .filter-app > .filter-card { margin-bottom: 20px; }
}
@media (min-width: 901px) {
  .filter-app > .filter-analysis-card #filter-analyze-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: end;
  }
  .filter-app > .filter-analysis-card #filter-analyze-form > label[for="filter-file"] {
    grid-column: 1 / -1;
  }
  .filter-app > .filter-analysis-card #filter-file { min-width: 0; }
  .filter-app > .filter-analysis-card #filter-analyze-form > button { white-space: nowrap; }
  .filter-app > .filter-analysis-card .filter-loading-status,
  .filter-app > .filter-analysis-card #filter-analyze-status { grid-column: 1 / -1; }
}

/* The mode cards need the full available width; a narrow side column makes
   their copy wrap excessively and leaves an empty area beside the analyser. */
@media (min-width: 901px) {
  .filter-app > .filter-modes-card { grid-column: 1 / -1; }
  .filter-app > .filter-analysis-card { grid-column: 1 / -1; }
}

.filter-instruction-card {
  grid-column: 1 / -1;
  margin-top: 20px;
  border: 1px solid var(--filter-border);
  border-radius: 14px;
  background: var(--filter-surface-soft);
  overflow: hidden;
}
.filter-instruction-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.filter-instruction-summary::-webkit-details-marker { display: none; }
.filter-instruction-eyebrow,
.filter-instruction-title { display: block; }
.filter-instruction-eyebrow {
  margin-bottom: 4px;
  color: var(--filter-primary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filter-instruction-title {
  color: var(--filter-text);
  font-size: 1.15rem;
  font-weight: 800;
}
.filter-instruction-chevron {
  color: var(--filter-primary);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  transform: rotate(180deg);
  transition: transform 160ms ease;
}
.filter-instruction-card[open] .filter-instruction-chevron { transform: rotate(0); }
.filter-instruction-content {
  max-width: 900px;
  padding: 0 22px 22px;
  color: var(--filter-muted);
  line-height: 1.55;
}
.filter-instruction-content p { margin: 0 0 12px; }
.filter-instruction-content ol { margin: 0; padding-left: 22px; }
.filter-instruction-content li { padding-left: 5px; }
@media (max-width: 600px) {
  .filter-instruction-summary { padding: 16px; }
  .filter-instruction-content { padding: 0 16px 18px; }
}