@font-face {
  font-family: "Lato";
  src: url("assets/fonts/Lato-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("assets/fonts/Lato-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("assets/fonts/Lato-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("assets/fonts/Lato-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* DIN Pro is the GRESB design-system typeface; Lato is the bundled local fallback. */
:root {
  --font-main: "DIN Pro", "Lato", Arial, Helvetica, sans-serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7fafc;
  --ink: #333333;
  --muted: #4a5359;
  --line: #d9dadb;
  --line-strong: #a2c9d8;
  --input: #f7fafc;
  --input-border: #a2c9d8;
  --output: #f7fafc;
  --output-border: #a2c9d8;
  --fixed: #f7fafc;
  --accent: #17789e;
  --accent-deep: #17789e;
  --accent-soft: #a2c9d8;
  --ok: #17789e;
  --success: #4f9b68;
  --success-soft: #eaf7ef;
  --warning: #a15c00;
  --error: #b42318;
  --shadow: none;
  --shadow-soft: none;
  --radius-component: 4px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.45;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 40px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-component);
  background: var(--accent);
  color: #ffffff;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 400;
}

button:hover {
  background: var(--accent-deep);
}

button:disabled {
  border-color: #c8d5dc;
  background: #edf1f4;
  color: #7c8a93;
  cursor: not-allowed;
}

.secondary-button {
  min-height: 32px;
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--accent-deep);
}

.secondary-button:hover {
  background: var(--surface-soft);
}

button:disabled:hover {
  border-color: #c8d5dc;
  background: #edf1f4;
  color: #7c8a93;
}

.app-header-stack {
  position: sticky;
  top: 0;
  z-index: 80;
  background: #ffffff;
}

.app-header {
  background: #ffffff;
  color: var(--ink);
}

.header-inner {
  width: min(1720px, calc(100% - 32px));
  margin: 0 auto;
  padding: 12px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.brand-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 0;
}

.brand-logo {
  width: 100%;
  max-width: 60px;
  display: block;
}

.app-header h1 {
  font-size: clamp(20px, 2vw, 26px);
}

.brand-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.header-resource-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-resource-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.header-resource-link .external-link-mark {
  font-size: 0.9em;
}

.header-resource-link:hover,
.header-resource-link:focus-visible {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 980px;
  margin-bottom: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 6px;
  font-size: 20px;
  letter-spacing: 0;
}

.heading-with-widget {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.heading-with-widget h2,
.heading-with-widget h3 {
  margin-bottom: 0;
}

.heading-help-link {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #ffffff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.heading-help-link:hover,
.heading-help-link:focus-visible {
  border-color: var(--accent);
  background: var(--surface-soft);
  color: var(--accent-deep);
}

.heading-help-link:focus-visible {
  outline: 3px solid rgba(23, 120, 158, 0.18);
}

.guide-widget {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: #ffffff;
  color: var(--muted);
  box-shadow: none;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.guide-widget:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--accent-deep);
}

.guide-widget-helper {
  border-color: #c9d9df;
  background: #f7fafc;
  color: #506a78;
}

.guide-widget-helper:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--accent-deep);
}

.guide-widget-helper:focus-visible {
  outline: 3px solid rgba(23, 120, 158, 0.18);
}

.guide-widget-helper .guide-arrow {
  background: currentColor;
}

.guide-widget-helper .guide-arrow::after {
  border-color: currentColor;
}

.disclosure-toggle {
  border-style: solid;
  background: #ffffff;
  color: var(--accent-deep);
}

.disclosure-toggle:hover,
.disclosure-toggle:focus-visible {
  border-color: var(--accent);
  background: var(--surface-soft);
}

.section-cue {
  border-style: dashed;
  cursor: default;
}

.guide-widget:focus-visible {
  outline: 3px solid rgba(23, 120, 158, 0.18);
}

.guide-arrow {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 2px;
  border-radius: var(--radius-component);
  background: var(--accent);
}

.guide-arrow::after {
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  content: "";
  transform: rotate(45deg);
}

.control-collapse-button .guide-arrow {
  width: 13px;
}

.control-collapse-button .guide-arrow::after {
  top: -3px;
  width: 6px;
  height: 6px;
}

.guide-widget-down .guide-arrow {
  width: 2px;
  height: 18px;
}

.guide-widget-down .guide-arrow::after {
  top: auto;
  right: -4px;
  bottom: 0;
  transform: rotate(135deg);
}

.control-collapse-button {
  cursor: pointer;
}

.source-note {
  margin-bottom: 16px;
  color: var(--muted);
}

.disclaimer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-component);
  background: #e8f2f5;
  padding: 4px 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-variant-ligatures: none;
  line-height: 1.2;
}

.disclaimer-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.print-export-date {
  display: none;
}

.header-actions {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 18px;
  margin-left: auto;
}

.top-tab-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.tab-reset-icon {
  align-self: center;
  min-height: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}

.tab-reset-icon:hover,
.tab-reset-icon:focus-visible {
  color: var(--accent);
  background: var(--surface-soft);
  opacity: 1;
}

.tab-reset-icon:disabled {
  color: var(--muted);
  background: transparent;
  opacity: 0.3;
  cursor: not-allowed;
}

.tab-reset-icon:disabled:hover {
  color: var(--muted);
  background: transparent;
}

/* The Assessment Explorer reset is handled by the tab's ↺ icon, so the in-panel
   "Reset edits" button is hidden (kept in the DOM for the icon to trigger). */
#reset-edits-button {
  display: none;
}

.top-tabs {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

/* Override the .page-shell vertical margins; keep a small breath of space under the top bar. */
.app-header-stack .top-tabs {
  margin-top: 6px;
  margin-bottom: 0;
}

.top-tabs-left {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.top-tabs-info {
  position: relative;
  display: inline-flex;
  align-self: flex-end;
  margin-bottom: 6px;
}

.disclaimer-info-button {
  display: inline-flex;
  width: 26px;
  height: 26px;
  min-height: 0;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff7e6;
  color: var(--warning);
  padding: 0;
  cursor: pointer;
}

.disclaimer-info-button:hover,
.disclaimer-info-button[aria-expanded="true"] {
  background: #ffefc7;
}

/* Collapsed by default; the info button toggles it open as a dropdown
   flying out to the side of the icon, like a tooltip. */
.top-tabs-disclaimer {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  z-index: 70;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #ead6ac;
  border-radius: var(--radius-component);
  background: #fff7e6;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  box-shadow: 0 12px 28px rgba(23, 120, 158, 0.14);
}

.top-tabs-right {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-bottom: 6px;
  margin-left: auto;
}

.tab-reset-button {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: #ffffff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tab-reset-button:hover,
.tab-reset-button:focus-visible {
  border-color: var(--accent);
  background: var(--surface-soft);
}

.top-tab-button[hidden],
.top-tab-step[hidden] {
  display: none;
}

.top-tab-button {
  display: inline-flex;
  width: 192px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  border-color: transparent;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-component) var(--radius-component) 0 0;
  background: #ffffff;
  color: var(--muted);
  font-weight: 700;
}

.top-tab-button:hover,
.top-tab-button.is-active {
  border-color: var(--line);
  border-bottom-color: var(--accent);
  background: var(--surface-soft);
  color: var(--accent);
}

.top-tab-button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.top-tab-step {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1;
  text-transform: uppercase;
}

.top-tab-title {
  white-space: nowrap;
}

.top-tab-button:hover .top-tab-step,
.top-tab-button.is-active .top-tab-step,
.top-tab-button[aria-selected="true"] .top-tab-step {
  border-color: var(--accent);
  background: #eaf6f8;
  color: var(--accent);
}

.how-to-button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbead6;
  border-radius: var(--radius-component);
  background: #eaf7ef;
  padding: 0 10px;
  color: #2f6f46;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.how-to-button::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

.how-to-button:hover,
.how-to-button[aria-expanded="true"] {
  border-color: #9fd8b5;
  background: #dff2e7;
  color: #2f6f46;
}

.view-file-button {
  min-height: 28px;
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--accent);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.view-file-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.view-file-button:hover {
  border-color: var(--accent);
  background: var(--surface-soft);
  color: var(--accent);
}

.view-file-button:disabled {
  opacity: 0.46;
  filter: grayscale(0.45);
}

.view-file-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.feedback-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 14px;
}

.feedback-honeypot {
  display: none;
}

.feedback-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.feedback-question {
  color: #2f6f46;
  font-weight: 700;
  white-space: nowrap;
}

.feedback-rating-group {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
}

.feedback-rating-button {
  display: inline-flex;
  width: 34px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  color: #89949b;
  padding: 0;
  cursor: pointer;
}

.feedback-rating-button:first-child {
  border-left: 0;
}

.feedback-rating-button:hover,
.feedback-rating-button:focus-visible,
.feedback-rating-button.is-selected {
  background: #dfeee9;
  color: var(--ink);
}

.feedback-rating-button:hover,
.feedback-rating-button:focus-visible {
  color: #2f6f46;
}

.feedback-rating-button:focus-visible {
  outline: 3px solid rgba(79, 155, 104, 0.18);
  outline-offset: -2px;
}

.feedback-rating-button svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 150ms ease;
}

.feedback-rating-button:hover svg,
.feedback-rating-button:focus-visible svg {
  transform: scale(1.15);
}

.feedback-face {
  fill: #dfe7e7;
  stroke: none;
}

.feedback-rating-button:hover .feedback-face,
.feedback-rating-button:focus-visible .feedback-face {
  fill: var(--success-soft);
}

.feedback-eye {
  fill: currentColor;
  stroke: none;
}

.feedback-mouth {
  fill: none;
  stroke: currentColor;
}

.feedback-rating-button.is-selected .feedback-face {
  fill: #c5e1da;
}

.feedback-details {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  width: min(280px, calc(100vw - 32px));
  border: 1px solid #b8d6cb;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(23, 120, 158, 0.12);
  padding: 0;
}

.feedback-details textarea {
  display: block;
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: #ffffff;
  padding: 10px;
  color: var(--ink);
  font-family: var(--font-main);
  font-size: 14px;
  outline: none;
}

.feedback-details textarea::placeholder {
  color: #879197;
}

.feedback-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 8px 8px;
}

.feedback-status {
  flex: 1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.feedback-submit-button {
  min-height: 30px;
  border-color: transparent;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 4px 12px;
}

.feedback-submit-button:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--accent);
}

.tour-widget {
  position: fixed;
  z-index: 90;
  display: grid;
  width: min(320px, calc(100vw - 24px));
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-component);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(23, 120, 158, 0.14);
  padding: 14px;
  color: var(--muted);
}

.tour-widget[hidden] {
  display: none;
}

.tour-widget::before {
  position: absolute;
  top: 22px;
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: #ffffff;
  content: "";
}

.tour-widget[data-side="right"]::before {
  left: -6px;
  transform: rotate(45deg);
}

.tour-widget[data-side="left"]::before {
  right: -6px;
  transform: rotate(225deg);
}

.tour-widget[data-side="bottom"]::before,
.tour-widget[data-side="top"]::before {
  display: none;
}

.tour-step-label {
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.tour-widget p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.tour-next-button {
  justify-self: end;
}

.tour-close-button {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 24px;
  min-height: 24px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.tour-close-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.tour-target-active {
  position: relative;
  z-index: 5;
  outline: 2px solid rgba(79, 155, 104, 0.34);
  outline-offset: -5px;
  box-shadow:
    inset 0 0 0 3px rgba(79, 155, 104, 0.28),
    0 0 0 3px rgba(79, 155, 104, 0.16) !important;
}

.page-shell {
  width: min(1720px, calc(100% - 32px));
  margin: 24px auto 42px;
}

.app-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) minmax(330px, 380px);
  gap: 18px;
  align-items: start;
}

.portfolio-sidebar,
.control-sidebar {
  position: sticky;
  top: var(--sticky-sidebar-offset, 12px);
  max-height: calc(100vh - var(--sticky-sidebar-offset, 12px) - 12px);
}

.portfolio-sidebar {
  z-index: 8;
  max-height: none;
  overflow: visible;
}

.control-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
}

.main-content {
  min-width: 0;
}

.panel,
.metric-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  margin-bottom: 18px;
  padding: 18px;
}

/* Momentary highlight ring shown when a "Define Portfolio"/"Define Control"
   placeholder is clicked, to point the user at the pane that needs input. */
.is-highlighted-pane {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: var(--radius-component);
}

.needs-portfolio {
  cursor: pointer;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--muted);
}

.section-heading.compact {
  margin-bottom: 12px;
}

.sidebar-heading {
  display: block;
}

.sidebar-heading .scenario-actions {
  margin-top: 14px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.scenario-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.reset-floating-button {
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  border-color: var(--line-strong);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  font-weight: 700;
}

.reset-floating-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.control-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

.control-sidebar .section-heading {
  display: block;
}

.control-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: start;
}

.control-heading-row > div {
  display: contents;
}

.control-heading-row .heading-with-widget {
  grid-column: 1;
  grid-row: 1;
}

.control-heading-row .secondary-button {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-height: 30px;
  padding: 0 10px;
}

.control-heading-row p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  white-space: nowrap;
}

.control-sidebar .button-row {
  justify-content: flex-start;
  margin-top: 12px;
}

.control-collapsible-content {
  display: grid;
  gap: 12px;
}

.control-panel.is-collapsed {
  padding-bottom: 10px;
}

.control-panel.is-collapsed .section-heading.compact {
  margin-bottom: 0;
}

.control-panel.is-collapsed .control-collapse-button .guide-arrow {
  width: 13px;
  height: 2px;
  transform: rotate(90deg);
  transform-origin: center;
}

.score-collapsible-content {
  display: block;
}

.control-actions button {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  line-height: 1.15;
  white-space: normal;
}

.control-actions .light-preset-button {
  border-color: var(--line-strong);
  background: #d1e4ec;
  color: #111111;
}

.control-actions .light-preset-button:hover {
  background: #74aec5;
  color: #111111;
}

.control-actions .light-preset-button.is-active {
  border-color: var(--accent-deep);
  background: #d1e4ec;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.control-actions .light-preset-button.is-active:hover {
  border-color: var(--accent-deep);
  background: #c2dde7;
}

.site-control-presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-self: center;
  gap: 8px;
  grid-template-columns: none;
  max-width: none;
  margin: 0 auto 0 0;
}

.site-action-row .site-control-presets button {
  flex: 0 0 auto;
  width: auto;
  min-height: 28px;
  padding: 0 10px;
}

.site-control-presets button {
  display: inline-flex;
  align-items: center;
  border-color: var(--line-strong);
  background: #d1e4ec;
  color: #111111;
}

.site-control-presets button:hover {
  background: #74aec5;
  color: #111111;
}

.site-control-presets button.is-active {
  border-color: var(--accent-deep);
  background: #d1e4ec;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.site-control-presets button.is-active:hover {
  border-color: var(--accent-deep);
  background: #c2dde7;
}

.preset-checkbox {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-right: 7px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.site-control-presets button.is-active .preset-checkbox {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
}

.site-control-presets button.is-active .preset-checkbox::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sidebar-heading .scenario-actions,
.sidebar-heading .button-row {
  justify-items: stretch;
  justify-content: stretch;
}

.sidebar-heading .button-row {
  display: grid;
}

.portfolio-scenario-button {
  justify-content: center;
  border-color: var(--line-strong);
  background: #d1e4ec;
  color: #111111;
}

.portfolio-scenario-button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: none;
}

.portfolio-scenario-button.is-active:hover {
  background: var(--accent-deep);
  color: #ffffff;
}

.portfolio-sidebar button.portfolio-scenario-button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: none;
}

.portfolio-sidebar button.portfolio-scenario-button[aria-pressed="true"]:hover {
  background: var(--accent-deep);
  color: #ffffff;
}

.portfolio-scenario-button:hover {
  background: #74aec5;
  color: #111111;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.portfolio-grid label,
.output-tile {
  display: flex;
  min-height: 84px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: var(--fixed);
  padding: 12px;
}

.portfolio-split-control {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: var(--fixed);
  padding: 14px 12px;
  user-select: none;
  -webkit-user-select: none;
}

.portfolio-split-donut {
  position: relative;
  display: grid;
  width: 172px;
  height: 172px;
  place-items: center;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.portfolio-split-donut:active {
  cursor: grabbing;
}

.portfolio-split-donut:focus-visible {
  outline: 3px solid rgba(23, 120, 158, 0.24);
  outline-offset: 4px;
}

.portfolio-split-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.portfolio-split-track,
.portfolio-split-segment {
  fill: none;
  stroke-width: 18;
}

.portfolio-split-track {
  stroke: #d1e4ec;
}

.portfolio-split-segment {
  stroke: #17789e;
  stroke-linecap: round;
  transition: stroke-dasharray 120ms ease;
}

.portfolio-split-handle {
  fill: #ffffff;
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 2px 3px rgba(23, 120, 158, 0.16));
}

.portfolio-split-center {
  position: relative;
  z-index: 1;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    inset 0 -5px 8px rgba(23, 120, 158, 0.06),
    0 2px 6px rgba(23, 120, 158, 0.08);
  text-align: center;
}

.portfolio-split-center strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.portfolio-split-center span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.portfolio-split-hint {
  position: absolute;
  z-index: 30;
  top: 12px;
  left: calc(100% + 18px);
  width: 210px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #4f9b68;
  border-radius: var(--radius-component);
  background: #ffffff;
  color: #245d3a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 10px 24px rgba(23, 120, 158, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.portfolio-split-hint::before {
  position: absolute;
  top: 16px;
  left: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid #4f9b68;
  border-bottom: 1px solid #4f9b68;
  background: #ffffff;
  content: "";
  transform: rotate(45deg);
}

.portfolio-split-hint.is-attention {
  opacity: 1;
  transform: translateX(0);
}

.portfolio-split-values {
  display: grid;
  width: 100%;
  gap: 7px;
}

.portfolio-split-values span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.portfolio-split-values strong {
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.portfolio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.operational-dot {
  background: #17789e;
}

.new-development-dot {
  background: #d1e4ec;
  border: 1px solid rgba(23, 120, 158, 0.24);
}

.portfolio-grid label span,
.output-tile span,
.metric-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.excel-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-component);
  background: var(--input);
  color: var(--ink);
  padding: 8px 10px;
}

.excel-input:focus {
  outline: 3px solid rgba(23, 107, 135, 0.2);
  border-color: var(--accent);
}

.excel-input.is-dirty {
  border-color: var(--accent);
  background: #d1e4ec;
}

.is-disabled-input {
  background: #f1f5f7;
  color: #7c8a93;
}

.is-disabled-input span,
.excel-input:disabled {
  color: #7c8a93;
}

.excel-input:disabled {
  border-color: #c8d5dc;
  background: #edf1f4;
  cursor: not-allowed;
  opacity: 1;
}

.excel-input[readonly] {
  background: var(--output);
  cursor: default;
}

.percent-input {
  max-width: 96px;
}

.output-tile {
  background: var(--output);
  border-color: var(--output-border);
}

.output-tile strong,
.metric-panel strong {
  font-size: 27px;
  line-height: 1.1;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr minmax(180px, 0.85fr);
  gap: 14px;
  margin-bottom: 18px;
}

.metric-panel {
  position: relative;
  min-height: 104px;
  overflow: hidden;
  padding: 18px;
}

.metric-panel::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent-soft);
  content: "";
}

.primary-metric::before {
  background: var(--accent);
}

.metric-panel strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 34px;
  font-weight: 900;
}

.metric-context {
  background: var(--surface);
}

.metric-context > span {
  display: block;
}

.metric-context strong {
  display: flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
  color: var(--accent);
  padding: 3px 12px;
  font-size: 14px;
  line-height: 1.2;
}

.metric-context small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.status-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: var(--radius-component);
  padding: 5px 10px;
  font-size: 14px;
}

.status-ok {
  background: #e5f4ec;
  color: var(--ok);
}

.status-warning {
  background: #fff2d8;
  color: var(--warning);
}

.status-error {
  background: #ffe5e1;
  color: var(--error);
}

.status-neutral {
  background: #edf1f4;
  color: #53606b;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
}

.component-breakdown-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: stretch;
  font-family: var(--font-main);
}

.component-panel {
  overflow: hidden;
}

.component-panel .section-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.component-heading {
  align-items: center;
}

.component-current-view {
  display: grid;
  min-width: min(100%, 270px);
  justify-items: end;
  gap: 6px;
}

.component-current-view > span,
.component-current-view small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.component-current-view strong {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
  color: var(--accent);
  padding: 3px 12px;
  font-size: 14px;
  line-height: 1.2;
}

.component-table-wrap {
  min-width: 0;
  border-color: var(--line);
}

.component-panel table {
  table-layout: fixed;
  font-size: 13px;
}

.component-panel th,
.component-panel td {
  padding: 8px 9px;
}

.component-panel th:nth-child(1),
.component-panel td:nth-child(1) {
  width: 42%;
  text-align: left;
}

.component-panel th:nth-child(2),
.component-panel td:nth-child(2),
.component-panel th:nth-child(3),
.component-panel td:nth-child(3) {
  width: 24%;
  text-align: center;
}

.component-panel th:nth-child(4),
.component-panel td:nth-child(4) {
  width: 54px;
  text-align: center;
}

.component-panel .needs-portfolio {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.component-panel .is-not-scored-value {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.component-panel td.is-linked-component-cell {
  background: #e6f5fa !important;
  box-shadow: inset 0 -3px 0 var(--accent-deep);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.component-color-cell {
  text-align: center;
}

.component-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(23, 120, 158, 0.24);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 1px 3px rgba(23, 120, 158, 0.16);
  vertical-align: middle;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

th,
td {
  border-bottom: 1px solid rgba(192, 213, 223, 0.72);
  padding: 10px 11px;
  text-align: left;
  vertical-align: middle;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #d1e4ec;
  color: #17789e;
  font-size: 12px;
  text-transform: capitalize;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: #f6fbfd;
}

.score-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12.5px;
}

.score-table thead th {
  top: var(--sticky-header-offset, 0px);
  height: 64px;
  max-height: none;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
  z-index: 4;
  line-height: 1.2;
}

.score-table-wrap {
  overflow-x: visible;
  overflow-y: visible;
}

.score-panel {
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.score-panel.is-collapsed {
  padding-bottom: 10px;
}

.score-panel.is-collapsed > .section-heading.compact {
  margin-bottom: 0;
}

.score-panel.is-collapsed .score-collapse-button .guide-arrow {
  transform: rotate(90deg);
  transform-origin: center;
}

.score-panel > .section-heading.compact {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px 22px;
  align-items: start;
}

.score-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
  padding: 12px;
  margin-bottom: 10px;
}

.score-filters {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 1.1fr) minmax(160px, 0.95fr) minmax(170px, 0.95fr) minmax(122px, auto);
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.export-menu {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
}

.export-menu-button {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: #ffffff;
  color: var(--accent-deep);
  cursor: pointer;
  list-style: none;
}

.export-menu-button::-webkit-details-marker {
  display: none;
}

.export-menu-button:hover,
.export-menu[open] .export-menu-button {
  border-color: var(--accent);
  background: var(--surface-soft);
  color: var(--accent);
}

.export-menu.is-disabled {
  pointer-events: auto;
}

.export-menu.is-disabled .export-menu-button {
  border-color: #c8d5dc;
  background: #edf1f4;
  color: #7c8a93;
  cursor: not-allowed;
}

.export-menu-button:focus-visible {
  outline: 3px solid rgba(23, 107, 135, 0.2);
}

.export-menu-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.export-menu-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 150px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 6px;
}

.export-menu-list button {
  display: flex;
  min-height: 34px;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.export-menu-list button:hover,
.export-menu-list button:focus-visible {
  background: var(--surface-soft);
  color: var(--accent);
}

.score-filter {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.score-filter > span,
.toggle-filter,
.filter-summary,
.filter-chip,
.clear-filter-button,
.evidence-summary {
  user-select: none;
  -webkit-user-select: none;
}

.evidence-filter > span {
  color: var(--muted);
}

.header-line {
  white-space: nowrap;
}

#score-evidence-filter {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 36px;
  padding: 8px 28px 8px 10px;
  background-color: var(--input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%23333333' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.score-search {
  min-width: 0;
}

.toggle-filter {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: #ffffff;
  padding: 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.checkbox-filter {
  cursor: pointer;
}

.checkbox-filter.is-locked {
  cursor: default;
}

.checkbox-filter input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.checkbox-filter.is-locked input:disabled {
  cursor: default;
  opacity: 1;
}

.checkbox-filter:has(input:checked) {
  border-color: var(--line-strong);
  color: var(--ink);
}

.checkbox-filter:has(input:focus-visible) {
  outline: 3px solid rgba(23, 107, 135, 0.2);
}

.visibility-toggle {
  cursor: pointer;
}

.show-all-toggle.is-locked {
  cursor: default;
}

.visibility-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.visibility-icon {
  display: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.visibility-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.visibility-toggle input:checked ~ .visibility-icon-open,
.visibility-toggle input:not(:checked) ~ .visibility-icon-closed {
  display: inline-flex;
}

.visibility-toggle:has(input:focus-visible) {
  outline: 3px solid rgba(23, 107, 135, 0.2);
}

.visibility-toggle:has(input:not(:checked)) {
  color: #7c8a93;
}

.visibility-toggle:has(input:not(:checked)) .visibility-icon {
  color: #7c8a93;
}

.show-all-toggle.is-locked input:disabled ~ .visibility-icon,
.show-all-toggle.is-locked:has(input:checked) {
  color: var(--ink);
}

.compact-select {
  min-height: 36px;
  user-select: none;
  -webkit-user-select: none;
}

.multi-filter {
  position: relative;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.multi-filter-summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-component);
  background: var(--input);
  color: var(--ink);
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.multi-filter-summary::-webkit-details-marker {
  display: none;
}

.multi-filter-summary::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  content: "";
  transform: rotate(45deg) translateY(-2px);
}

.multi-filter[open] .multi-filter-summary {
  border-color: var(--accent);
  outline: 3px solid rgba(23, 107, 135, 0.16);
}

.multi-filter[open] .multi-filter-summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

.multi-filter-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 6px;
}

.multi-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-component);
  padding: 7px 8px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.multi-filter-option:hover {
  background: var(--surface-soft);
}

.multi-filter-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.control-input-pair {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 72px 18px;
  gap: 10px;
  align-items: center;
}

.control-panel {
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.control-table-wrap {
  overflow-x: hidden;
}

.control-table {
  table-layout: fixed;
  font-size: 12px;
}

.control-table th,
.control-table td {
  padding: 7px;
}

.control-table tbody tr:not(.control-group-row):hover td {
  background: #f3f9fb;
}

.control-group-row th {
  background: #eef6f9;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.control-table th:nth-child(1),
.control-table td:nth-child(1) {
  width: 14%;
}

.control-table th:nth-child(2),
.control-table td:nth-child(2) {
  width: 36%;
}

.control-table th:nth-child(3),
.control-table td:nth-child(3) {
  width: 50%;
}

.reported-control-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.bulk-control-header {
  display: grid;
  grid-template-columns: 52px 12px;
  gap: 4px;
  align-items: center;
}

.bulk-control-header .excel-input {
  min-height: 30px;
  max-width: 52px;
  padding: 5px 6px;
}

.control-table td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-panel .control-input-pair {
  grid-template-columns: minmax(56px, 1fr) 54px 12px;
  gap: 4px;
  min-width: 0;
}

.control-panel .control-range {
  min-width: 0;
}

.control-panel .percent-input {
  max-width: 54px;
  padding: 7px 8px;
}

.site-control-page {
  display: block;
}

.portfolio-summary-actions {
  display: flex;
  min-width: 380px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  justify-content: flex-end;
}

.portfolio-summary-actions #aggregate-control-button {
  min-width: 220px;
}

.site-control-status {
  align-self: flex-start;
  min-width: max-content;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.site-control-status:disabled {
  cursor: default;
  opacity: 1;
}

.site-control-status.status-warning:hover {
  border-color: #d9a74f;
  background: #fff3d6;
}

.formula-callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
  padding: 10px 12px;
  color: var(--ink);
}

.formula-callout-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #3d8a58;
}

.formula-callout-expression {
  line-height: 1.45;
}

.control-info-guide-link {
  display: block;
  margin-top: 12px;
  text-align: right;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.control-info-guide-link .external-link-mark {
  font-size: 0.95em;
}

.control-info-guide-link:hover,
.control-info-guide-link:focus-visible {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.control-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  min-height: 28px;
  border: 1px solid #cbead6;
  border-radius: var(--radius-component);
  background: #eaf7ef;
  padding: 3px 9px;
  color: #2f6f46;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.control-info-button:hover,
.control-info-button[aria-expanded="true"] {
  border-color: #9fd8b5;
  background: #dff2e7;
  color: #2f6f46;
}

.control-info-popover {
  position: fixed;
  z-index: 120;
  width: min(420px, calc(100vw - 24px));
  border: 1px solid var(--line-strong);
  border-left: 4px solid #4f9b68;
  border-radius: var(--radius-component);
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(23, 120, 158, 0.18);
  padding: 18px 18px 16px;
}

.control-info-popover strong {
  display: block;
  margin-bottom: 8px;
  color: #3d8a58;
  font-size: 0.86rem;
  text-transform: uppercase;
}

.control-info-popover p {
  margin-bottom: 10px;
  color: var(--ink);
}

.site-save-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  border: 1px solid #ead6ac;
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-component);
  background: #fff7e6;
  padding: 10px 12px;
  color: var(--ink);
  font-weight: 700;
}

.site-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom: 8px;
}

/* Secondary action buttons (Undo / Export / Import) in the Site-Level Data heading. */
.site-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.site-mini-button.site-mini-button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.site-action-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-action-col button {
  width: 100%;
}

.site-table-panel > .section-heading.compact {
  align-items: flex-start;
  margin-bottom: 0;
}

.site-action-row button {
  min-height: 38px;
}

.site-action-row #reset-site-control-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  color: var(--accent);
  font-weight: 700;
}

.site-action-row #reset-site-control-button:disabled {
  opacity: 0.48;
  filter: grayscale(0.55);
}

.site-action-row #reset-site-control-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.site-control-table {
  --site-number-width: 54px;
  --site-name-width: 118px;
  --site-lifecycle-width: 124px;
  --site-changed-width: 88px;
  --site-date-width: 150px;
  --site-business-width: 194px;
  --site-report-width: 128px;
  --site-capacity-width: 115px;
  --site-sticky-2-left: var(--site-number-width);
  --site-sticky-3-left: calc(var(--site-number-width) + var(--site-name-width));
  --site-indicator-width: 106px;
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  font-size: 12px;
}

.site-control-table th,
.site-control-table td {
  height: 40px;
  padding: 3px 6px;
  vertical-align: middle;
}

.site-control-table th {
  background: #d1e4ec;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
}

.site-control-table thead tr:first-child th {
  height: 42px;
}

.site-control-table .indicator-group-heading {
  border-left: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  background: #b8d7e3;
  color: #0f6688;
  text-align: center;
}

/* Identity column labels match the Implementation/Measurement header style: accent colour, title case. */
.site-control-table .site-label-cell {
  text-transform: none;
  color: var(--accent);
}

/* First-row cells above Site # through Capacity are completely blank. */
.site-control-table .site-identity-spacer {
  background: #ffffff;
  border: none;
  box-shadow: none;
}

/* Spreadsheet-style light gridlines around each control cell. */
.site-control-table .site-control-matrix-cell {
  border: 1px solid #e3e8ec;
}

/* Read-only (selection mode) control inputs behave like spreadsheet cells, not text fields. */
.site-control-table .site-percent-input[readonly] {
  cursor: cell;
  user-select: none;
}

/* Full-width clickable "add site" row at the bottom of the table. */
.site-control-table tbody tr.site-add-row td {
  position: static;
  left: auto;
  width: auto;
  padding: 0;
  background: #ffffff;
  text-align: left;
}

.site-add-row-button {
  display: block;
  width: 100%;
  min-height: 40px;
  border: none;
  border-top: 1px dashed var(--line-strong);
  border-radius: 0;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

/* Sticks to the left edge of the scrollable table so it stays visible
   no matter how far the user has scrolled horizontally. */
.site-add-row-label {
  position: sticky;
  left: 12px;
  display: inline-block;
}

.site-add-row-button:hover,
.site-add-row-button:focus-visible {
  background: #e7f1f5;
  color: var(--accent-deep);
}

/* Sticky action bar at the bottom of the Portfolio Summary. */
.summary-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 16px;
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.summary-action-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Light bulk-action background applies only to the indicator columns (10-21). */
.site-control-table .indicator-bulk-row th:nth-child(n+10):nth-child(-n+21) {
  background: #eaf3f7;
  color: var(--ink);
  text-transform: none;
}

.site-control-table .is-col-hidden {
  display: none;
}

/* Temporarily hidden pending approval; remove this rule to bring the column back. */
.site-control-table .lifecycle-changed-col {
  display: none;
}

/* Frozen identity columns: Site #, Site Name, Lifecycle (both header rows + body) */
.site-control-table thead th:nth-child(1),
.site-control-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 4;
  width: var(--site-number-width);
  text-align: center;
}

.site-control-table thead th:nth-child(2),
.site-control-table td:nth-child(2) {
  position: sticky;
  left: var(--site-sticky-2-left);
  z-index: 4;
  width: var(--site-name-width);
}

.site-control-table thead th:nth-child(3),
.site-control-table td:nth-child(3) {
  position: sticky;
  left: var(--site-sticky-3-left);
  z-index: 4;
  width: var(--site-lifecycle-width);
}

/* Scrolling identity columns 4-9 */
.site-control-table thead tr:first-child th:nth-child(4),
.site-control-table td:nth-child(4) {
  width: var(--site-changed-width);
}

.site-control-table thead tr:first-child th:nth-child(5),
.site-control-table td:nth-child(5),
.site-control-table thead tr:first-child th:nth-child(6),
.site-control-table td:nth-child(6) {
  width: var(--site-date-width);
}

.site-control-table thead tr:first-child th:nth-child(7),
.site-control-table td:nth-child(7) {
  width: var(--site-business-width);
}

.site-control-table thead tr:first-child th:nth-child(8),
.site-control-table td:nth-child(8) {
  width: var(--site-report-width);
}

.site-control-table thead tr:first-child th:nth-child(9),
.site-control-table td:nth-child(9) {
  width: var(--site-capacity-width);
}

/* Indicator control columns 10-21 */
.site-control-table td:nth-child(n+10):nth-child(-n+21) {
  width: var(--site-indicator-width);
  text-align: center;
}

.site-control-table .indicator-bulk-row th:nth-child(n+10):nth-child(-n+21) {
  width: var(--site-indicator-width);
}

/* Row actions column */
.site-control-table thead tr:first-child th:nth-child(22),
.site-control-table td:nth-child(22) {
  width: 52px;
  text-align: center;
}

.site-control-table thead th:nth-child(1),
.site-control-table thead th:nth-child(2),
.site-control-table thead th:nth-child(3) {
  z-index: 8;
}

.site-control-table tbody td:nth-child(1),
.site-control-table tbody td:nth-child(2),
.site-control-table tbody td:nth-child(3) {
  background: #ffffff;
}

.site-control-table .site-actions-heading {
  padding-inline: 0;
}

.site-control-table .excel-input,
.site-control-table select {
  width: 100%;
  min-height: 30px;
  padding: 3px 8px;
  font-size: 12px;
}

.site-control-table select {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-control-table select.is-placeholder {
  color: #8b98a1;
  font-weight: 600;
}

.site-control-table select option {
  color: var(--ink);
}

.site-control-table select option:disabled {
  color: #8b98a1;
}

.site-not-applicable {
  display: inline-flex;
  min-height: 30px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
  color: #8b98a1;
  font-weight: 700;
  white-space: nowrap;
}

.site-na-text {
  font-style: italic;
  font-weight: 600;
  background: #eef1f4;
}

.reporting-period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
}

/* Temporarily hidden pending approval; remove this rule to bring the bar back. */
.reporting-period-bar {
  display: none;
}

.reporting-period-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.reporting-period-select {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.reporting-period-range {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.indicator-header-control {
  display: grid;
  grid-template-rows: minmax(38px, auto) 24px;
  gap: 5px;
  align-items: center;
  justify-items: center;
  min-height: 72px;
}

.site-term-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.site-term-link .external-link-mark {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.75;
}

.site-term-link:hover,
.site-term-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-term-link:hover .external-link-mark,
.site-term-link:focus-visible .external-link-mark {
  opacity: 1;
}

.indicator-header-link {
  display: flex;
  min-height: 38px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.indicator-header-link span {
  display: block;
}

.indicator-header-link .external-link-mark {
  display: inline;
  font-size: 0.9em;
  font-weight: 900;
}

.indicator-header-link:hover,
.indicator-header-link:focus-visible {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.indicator-header-link:focus-visible {
  outline: 2px solid rgba(23, 120, 158, 0.22);
  outline-offset: 2px;
}

.site-control-table .indicator-bulk-select {
  width: 100%;
  min-height: 24px;
  max-width: 92px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
}

.site-percent-input-wrap {
  display: inline-flex;
  min-width: 92px;
  max-width: 104px;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.site-percent-input {
  width: 70px !important;
  min-height: 30px !important;
  padding: 4px 7px !important;
  text-align: right;
}

.site-percent-input::-webkit-outer-spin-button,
.site-percent-input::-webkit-inner-spin-button {
  margin: 0;
}

.site-percent-input-wrap > span {
  color: var(--muted);
  font-weight: 700;
}

.site-control-matrix-cell {
  position: relative;
  user-select: none;
}

.site-control-matrix-cell.is-matrix-selected {
  background: #edf7f1;
  box-shadow: inset 0 0 0 1px rgba(65, 151, 105, 0.34);
}

.site-control-matrix-cell.is-matrix-anchor {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.site-control-matrix-cell.is-matrix-selected .site-percent-input {
  border-color: rgba(23, 120, 158, 0.55);
}

.site-control-matrix-cell.is-not-applicable-cell.is-matrix-selected {
  background: #f4f8fa;
}

.site-percent-input.is-invalid-value {
  border-color: var(--error);
  background: #fff7f5;
}

.site-number {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #d1e4ec;
  color: var(--accent);
  font-weight: 800;
}

.site-row-actions,
.site-delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.site-row-actions {
  position: relative;
  justify-content: center;
  width: 100%;
}

.site-delete-confirm {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 12;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(23, 120, 158, 0.12);
  padding: 4px;
  transform: translateY(-50%);
}

.icon-button {
  display: inline-flex;
  width: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--accent);
  padding: 0;
}

.icon-button:hover {
  border-color: var(--accent);
  background: var(--surface-soft);
  color: var(--accent);
}

.icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Matches the height of the "Export/Import Portfolio Evidence" buttons next to it. */
#undo-delete-site-button {
  width: 28px;
  min-height: 28px;
}

.confirm-delete-button,
.cancel-delete-button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.confirm-delete-button {
  border-color: var(--error);
  background: #ffffff;
  color: var(--error);
}

.confirm-delete-button:hover {
  background: #fff5f5;
  color: var(--error);
}

.cancel-delete-button {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--muted);
}

.cancel-delete-button:hover {
  background: var(--surface-soft);
  color: var(--accent);
}

.site-control-table .is-missing-required {
  border-color: #d9a74f;
  background: #fff7e6;
  box-shadow: 0 0 0 2px rgba(217, 167, 79, 0.18);
}

.portfolio-summary-panel {
  overflow: hidden;
}

.portfolio-summary-panel > .section-heading {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.portfolio-summary-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 18px;
}

.portfolio-summary-section {
  min-width: 0;
}

.portfolio-summary-section h3 {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
}

.portfolio-summary-section .heading-with-widget h3 {
  margin-bottom: 0;
}

.portfolio-summary-section-wide {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.summary-note {
  margin-bottom: 0;
  color: var(--muted);
}

.site-summary-heading {
  align-items: center;
}

.site-summary-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.aggregate-control-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}

.aggregate-control-status[data-tone="success"] {
  color: var(--success);
}

.aggregate-control-status[data-tone="warning"] {
  color: var(--warning);
}

.aggregate-control-timestamp {
  min-height: 16px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
}

.aggregate-modal-panel {
  max-width: 620px;
}

.aggregate-preview {
  display: grid;
  gap: 14px;
  margin: 14px 0 18px;
}

.aggregate-preview h3 {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.aggregate-preview-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.aggregate-preview-list div,
.aggregate-control-preview-grid span {
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
  padding: 9px 10px;
}

.aggregate-preview-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.aggregate-preview-list dt,
.aggregate-preview-list dd {
  margin: 0;
}

.aggregate-preview-list dt,
.aggregate-control-preview-grid strong {
  font-weight: 800;
}

.aggregate-control-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.aggregate-control-preview-grid span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.lifecycle-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.summary-kpi-card {
  display: grid;
  gap: 5px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
  padding: 14px;
}

.summary-kpi-card span,
.summary-kpi-card small,
.business-summary-main span,
.control-summary-card small {
  color: var(--muted);
  font-weight: 700;
}

.summary-kpi-card strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.business-summary-list {
  display: grid;
  gap: 10px;
}

.business-summary-row {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: #ffffff;
  padding: 10px;
}

.business-summary-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.business-summary-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-capacity-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-component);
  background: #e7f1f5;
}

.business-capacity-bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-component);
  background: var(--accent);
}

.control-card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.control-card-group {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: var(--surface-soft);
  padding: 14px;
}

.control-card-group h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.control-card-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.control-summary-card {
  display: grid;
  min-height: 112px;
  align-content: start;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: #ffffff;
  padding: 11px;
}

.control-summary-card small {
  margin-top: 6px;
}

.control-summary-card strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.control-summary-card strong.is-na {
  color: #b6bfc5;
  font-weight: 700;
}

.empty-summary-message {
  margin: 0;
  color: var(--muted);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.34);
  padding: 20px;
}

.modal-panel {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-component);
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(23, 120, 158, 0.18);
  padding: 22px;
}

.modal-panel h2 {
  margin-bottom: 10px;
}

.modal-field {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  font-weight: 700;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}

.resource-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.resource-card {
  display: grid;
  min-height: 64px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-component);
  background: #ffffff;
  color: #111111;
  box-shadow: var(--shadow);
  padding: 8px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.resource-card:hover,
.resource-card:focus-visible {
  border-color: var(--accent);
  background: var(--surface-soft);
  color: #111111;
  outline: none;
}

.percent-suffix {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.donut-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-main);
}

.score-donut {
  position: relative;
  display: grid;
  width: 146px;
  height: 146px;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 6px 10px rgba(23, 120, 158, 0.1));
  isolation: isolate;
}

.score-donut-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  z-index: 1;
}

.score-donut-track,
.score-donut-segment {
  fill: none;
  stroke-width: 21;
}

.score-donut-track {
  stroke: #edf7fa;
  filter: none;
}

.score-donut-segment {
  stroke-linecap: butt;
  filter: drop-shadow(0 2px 2px rgba(23, 120, 158, 0.1));
  transition: stroke-dasharray 180ms ease, stroke-dashoffset 180ms ease;
}

.score-donut::before {
  position: absolute;
  inset: 7px;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 67% 78%, rgba(68, 114, 196, 0.16), rgba(68, 114, 196, 0) 44%);
  content: "";
  pointer-events: none;
}

.score-donut::after {
  position: absolute;
  inset: 28px;
  z-index: 3;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, #ffffff 0, #ffffff 36%, #f3f8fa 100%);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    inset 0 -5px 8px rgba(23, 120, 158, 0.08),
    0 2px 5px rgba(23, 120, 158, 0.08);
  content: "";
}

.score-donut span {
  position: relative;
  z-index: 4;
  max-width: 70px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.score-donut.is-pending span {
  max-width: 88px;
  color: var(--muted);
  font-size: 14px;
}

.score-donut.is-pending {
  cursor: pointer;
}

.control-range {
  width: 100%;
  accent-color: var(--accent);
}

.control-range.is-dirty {
  accent-color: var(--accent);
}

.score-table th,
.score-table td {
  height: 40px;
  max-height: 40px;
  padding: 7px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-table th:nth-child(1),
.score-table td:nth-child(1) {
  width: 8%;
  overflow: visible;
  text-overflow: clip;
}

.score-table th:nth-child(2),
.score-table td:nth-child(2) {
  width: 27%;
}

.score-table th:nth-child(3),
.score-table td:nth-child(3) {
  width: 16%;
}

.score-table th:nth-child(4),
.score-table td:nth-child(4),
.score-table th:nth-child(5),
.score-table td:nth-child(5),
.score-table th:nth-child(6),
.score-table td:nth-child(6),
.score-table th:nth-child(7),
.score-table td:nth-child(7) {
  text-align: center;
}

.score-table th:nth-child(4),
.score-table td:nth-child(4) {
  width: 12%;
}

.score-table th:nth-child(5),
.score-table td:nth-child(5) {
  width: 13%;
}

.score-table th:nth-child(6),
.score-table td:nth-child(6) {
  width: 14%;
}

.score-table th:nth-child(7),
.score-table td:nth-child(7) {
  width: 10%;
  text-align: center;
}

.score-table td:nth-child(1) .code-pill {
  max-width: none;
  white-space: nowrap;
}

.score-table .component-group-row th {
  height: 40px;
  max-height: 40px;
}

.component-group-content {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.component-group-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.component-subtotals {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  font-size: 12px;
  font-weight: 700;
}

.component-subtotals span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-component);
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 7px;
  white-space: nowrap;
}

.component-subtotal-label {
  white-space: nowrap;
}

.component-subtotals strong {
  display: inline-flex;
  min-width: 84px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.output-cell {
  background: var(--output);
  font-weight: 700;
}

.context-row td {
  background: var(--fixed);
  color: #52606d;
}

.score-table tbody tr.is-linked-row td {
  background: #e6f5fa !important;
  transition: background 180ms ease;
}

.score-table tbody tr.is-linked-row td:first-child {
  box-shadow: inset 4px 0 0 var(--accent-deep);
}

.score-table .needs-portfolio {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.control-table tbody tr.is-linked-control-row td {
  background: #e6f5fa !important;
  transition: background 180ms ease;
}

.control-table tbody tr.is-linked-control-row td:first-child {
  box-shadow: inset 4px 0 0 var(--accent-deep);
}

.component-group-row th {
  position: sticky;
  top: calc(var(--sticky-header-offset, 0px) + 64px);
  z-index: 3;
  background: #74aec5;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
}

.is-not-applicable {
  color: #7c8a93;
}

.is-not-applicable td {
  background: #f1f5f7;
}

.is-not-applicable .code-pill,
.is-not-applicable .control-range,
.is-not-applicable .excel-input {
  opacity: 0.55;
}

.is-not-applicable .control-input-pair {
  display: none;
}

.na-chip {
  display: inline-flex;
  margin-top: 6px;
  border: 1px solid #c6d2d8;
  border-radius: var(--radius-component);
  background: #edf1f4;
  color: #53606b;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
}

.na-chip[hidden] {
  display: none;
}

.evidence-cell {
  color: var(--success);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.empty-row {
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.code-pill,
.input-chip,
.fixed-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: var(--radius-component);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
}

.code-pill {
  background: #d1e4ec;
  color: #17789e;
}

.input-chip {
  border: 1px solid var(--input-border);
  background: #d1e4ec;
}

.score-control-link {
  min-height: 24px;
  border-color: var(--input-border);
  background: #d1e4ec;
  color: var(--ink);
  line-height: 1;
  vertical-align: middle;
}

.score-control-link:hover {
  border-color: var(--accent);
  background: #bfdde8;
  color: var(--ink);
}

.score-control-link:focus-visible {
  outline: 3px solid rgba(23, 120, 158, 0.22);
  outline-offset: 2px;
}

.fixed-chip {
  background: var(--fixed);
  color: var(--muted);
}

.active-filter-strip {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.filter-left {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.filter-summary,
.filter-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: var(--radius-component);
  padding: 3px 9px;
}

.filter-summary {
  background: var(--surface-soft);
  color: var(--accent);
}

.evidence-summary {
  min-height: 26px;
  border: 1px solid transparent;
  background: var(--success-soft);
  color: #17789e;
  font-weight: 800;
  justify-self: end;
  padding: 3px 9px;
  white-space: nowrap;
}

.evidence-summary:hover,
.evidence-summary:focus-visible {
  background: #dff2e7;
  border-color: rgba(79, 155, 104, 0.38);
  color: #17789e;
  outline: 2px solid rgba(79, 155, 104, 0.25);
}

.evidence-summary.is-active {
  border-color: #4f9b68;
  background: #dff2e7;
}

.filter-chip {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: var(--muted);
}

.clear-filter-button {
  min-height: 28px;
  padding: 0 10px;
}

.calculation-cell {
  cursor: help;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 1680px) {
  .score-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .toggle-filter {
    width: 100%;
  }
}

@media (max-width: 1240px) {
  .app-layout {
    display: block;
  }

  .portfolio-sidebar,
  .control-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .section-heading {
    display: block;
  }

  .aggregate-control-status {
    text-align: left;
  }

  .button-row {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .portfolio-grid,
  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-split-hint {
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -4px);
  }

  .portfolio-split-hint::before {
    display: none;
  }

  .portfolio-split-hint.is-attention {
    transform: translate(-50%, 0);
  }

  .component-breakdown-layout {
    grid-template-columns: 1fr;
  }

  .donut-panel {
    max-width: 420px;
  }

  .portfolio-summary-layout {
    grid-template-columns: 1fr;
  }

  .portfolio-summary-section-wide {
    grid-column: auto;
  }

  .control-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-action-row,
  .site-save-warning {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1320px) {
  .score-table-wrap {
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  .header-inner,
  .page-shell {
    width: min(100% - 20px, 1180px);
  }

  .brand-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .brand-logo {
    max-width: 230px;
  }

  h1 {
    font-size: 30px;
  }

  .feedback-details {
    right: auto;
    left: 0;
  }

  .portfolio-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .donut-panel {
    justify-items: center;
  }

  .score-panel > .section-heading.compact {
    grid-template-columns: 1fr;
  }

  .score-toolbar {
    grid-template-columns: 1fr;
  }

  .top-tabs {
    overflow-x: auto;
  }

  .top-tab-button {
    flex: 0 0 auto;
  }

  .lifecycle-card-grid,
  .control-card-grid {
    grid-template-columns: 1fr;
  }

  .business-summary-main {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .export-menu {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .active-filter-strip {
    grid-column: 1;
    grid-row: auto;
  }

  .score-filters {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 14px;
  }

  th,
  td {
    padding: 9px;
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body {
    background: #ffffff;
    color: #333333;
    font-size: 9pt;
  }

  .how-to-button,
  .guide-widget,
  .top-tabs,
  .portfolio-sidebar,
  .control-sidebar,
  .score-toolbar,
  .active-filter-strip,
  .site-control-page,
  .tour-widget,
  .component-breakdown {
    display: none !important;
  }

  .header-actions {
    display: block !important;
  }

  .header-actions button,
  .header-actions .view-file-actions,
  .header-actions .view-file-status,
  .header-actions .feedback-widget,
  .header-actions input {
    display: none !important;
  }

  .page-shell {
    width: 100%;
    margin: 0;
  }

  .app-header {
    border-bottom: 1px solid #d9dadb;
    margin-bottom: 8mm;
  }

  .header-inner {
    position: relative;
    width: 100%;
    padding: 0 0 5mm;
  }

  .print-export-date {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    margin: 0;
    color: #4a5359;
    font-size: 8.5pt;
    font-weight: 700;
    text-align: right;
  }

  .brand-row {
    grid-template-columns: 42mm minmax(0, 1fr);
    gap: 7mm;
    margin-bottom: 4mm;
    padding-right: 58mm;
  }

  .brand-logo {
    max-width: 42mm;
  }

  h1 {
    font-size: 20pt;
    line-height: 1.12;
  }

  .disclaimer {
    max-width: 100%;
    margin-bottom: 0;
    padding: 6px 8px;
    font-size: 9pt;
  }

  .app-layout {
    display: block;
  }

  .main-content {
    width: 100%;
  }

  .panel,
  .metric-panel {
    border-color: #d9dadb;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .panel {
    margin-bottom: 7mm;
    padding: 5mm;
  }

  .score-panel {
    break-before: page;
    page-break-before: always;
    break-inside: auto;
    page-break-inside: auto;
  }

  .score-collapsible-content[hidden] {
    display: block !important;
  }

  .section-heading {
    margin-bottom: 4mm;
  }

  h2 {
    font-size: 14pt;
  }

  .score-table-wrap {
    overflow: visible;
  }

  .component-breakdown-layout {
    grid-template-columns: minmax(0, 1fr) 34mm;
    gap: 7mm;
  }

  .donut-panel {
    align-items: center;
    justify-content: center;
  }

  .score-donut {
    width: 32mm;
    height: 32mm;
    filter: none;
  }

  .score-donut::before {
    display: none;
  }

  .score-donut::after {
    inset: 8mm;
    box-shadow: none;
  }

  .score-donut span {
    max-width: 22mm;
    font-size: 9pt;
  }

  table {
    border-collapse: collapse;
  }

  thead {
    display: table-header-group;
  }

  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  th,
  td {
    border: 1px solid #d9dadb;
    padding: 4px 5px;
  }

  .score-table thead th,
  .component-group-row th {
    position: static;
  }

  .score-table {
    width: 100%;
    font-size: 8pt;
    table-layout: fixed;
  }

  .score-table th,
  .score-table td {
    height: auto;
    max-height: none;
    padding: 4px 5px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .score-table thead th {
    height: auto;
    background: #d1e4ec;
    color: #17789e;
    line-height: 1.18;
  }

  .score-table th:nth-child(1),
  .score-table td:nth-child(1) {
    width: 8%;
  }

  .score-table th:nth-child(2),
  .score-table td:nth-child(2) {
    width: 29%;
  }

  .score-table th:nth-child(3),
  .score-table td:nth-child(3) {
    width: 18%;
  }

  .score-table th:nth-child(4),
  .score-table td:nth-child(4),
  .score-table th:nth-child(5),
  .score-table td:nth-child(5),
  .score-table th:nth-child(6),
  .score-table td:nth-child(6) {
    width: 12%;
  }

  .score-table th:nth-child(7),
  .score-table td:nth-child(7) {
    width: 9%;
  }

  .component-group-row th {
    background: #74aec5;
    color: #ffffff;
  }

  .component-subtotals span,
  .score-control-link,
  .code-pill,
  .input-chip,
  .fixed-chip {
    border-radius: 2px;
  }
}