.school-success-indicators {
  --ssi-ink: #17302c;
  --ssi-muted: #61716d;
  --ssi-border: #d5e1dc;
  --ssi-surface: #fff;
  --ssi-accent: #126b5b;
  --ssi-accent-dark: #0d5145;
  --ssi-soft: #edf7f3;
  color: var(--ssi-ink);
  display: grid;
  gap: 16px;
  padding: 0 0 28px;
}

body.school-success-indicators-active .workspace-context-bar { display: none; }
body.school-success-indicators-active .workspace { gap: 0; }

.ssi-hero {
  align-items: center;
  background: linear-gradient(125deg, #e8f5ef 0%, #f8f4e9 100%);
  border: 1px solid #cddfd8;
  border-radius: 18px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 20px 24px;
}
.ssi-hero-copy { min-width: 0; }
.ssi-hero h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.15; margin: 2px 0 7px; }
.ssi-hero p { margin: 0; max-width: 820px; }
.ssi-privacy-note { color: var(--ssi-muted); display: block; font-size: .76rem; margin-top: 7px; }
.ssi-eyebrow,.ssi-kicker { color: var(--ssi-accent); font-size: .75rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.ssi-title-row,.ssi-hero-actions,.ssi-toolbar,.ssi-row-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.ssi-title-row { gap: 12px; }
.ssi-institution-context {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: 0 0 9px !important;
}
.ssi-institution-context span { color: var(--ssi-muted); font-size: .74rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.ssi-institution-context strong { color: var(--ssi-ink); font-size: .96rem; }
.ssi-institution-context small { color: #80520b; flex-basis: 100%; font-size: .76rem; }
.ssi-institution-context-unresolved { background: #fff8e8; border-left: 3px solid #b87b18; padding: 6px 9px; }
.ssi-plan-selector { display: grid; gap: 4px; margin: 0 0 14px; max-width: 520px; }
.ssi-plan-selector label { display: grid; gap: 5px; }
.ssi-plan-selector label > span { color: var(--ssi-muted); font-size: .74rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.ssi-plan-selector select { background: #fff; border: 1px solid #91b7aa; border-radius: 9px; color: var(--ssi-ink); font: inherit; font-weight: 700; min-height: 42px; padding: 8px 36px 8px 11px; width: 100%; }
.ssi-plan-selector select:focus-visible { outline: 3px solid rgba(18,107,91,.18); outline-offset: 2px; }
.ssi-plan-selector small { color: var(--ssi-muted); font-size: .78rem; }
.ssi-hero-actions { flex: 0 0 auto; justify-content: flex-end; }
.ssi-lifecycle-action { align-items: center; display: inline-flex; gap: 7px; }
.ssi-help-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ssi-accent);
  border-radius: 50%;
  color: var(--ssi-accent);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 850;
  height: 30px;
  justify-content: center;
  padding: 0;
  width: 30px;
}
.ssi-help-button:hover,.ssi-help-button:focus-visible { background: var(--ssi-soft); outline: 3px solid rgba(18,107,91,.18); outline-offset: 2px; }

.ssi-button,.ssi-tabs button,.ssi-row-actions button,.ssi-share-list button {
  background: var(--ssi-accent);
  border: 1px solid var(--ssi-accent);
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  min-height: 38px;
  padding: 8px 13px;
}
.ssi-button:hover,.ssi-button:focus-visible,.ssi-row-actions button:hover,.ssi-row-actions button:focus-visible { background: var(--ssi-accent-dark); outline: 3px solid rgba(18,107,91,.18); outline-offset: 2px; }
.ssi-button-ghost { background: #fff; color: var(--ssi-accent); }
.ssi-button-warning { background: #fff8e8; border-color: #b87b18; color: #80520b; }
.ssi-button-danger,.ssi-share-list button { background: #8a3029; border-color: #8a3029; }
.ssi-link-button { background: none; border: 0; color: var(--ssi-accent); cursor: pointer; font: inherit; font-weight: 750; padding: 3px 0; }
.ssi-danger-link { color: #8a3029; margin-top: 18px; }

.ssi-tabs { border-bottom: 1px solid var(--ssi-border); display: flex; gap: 4px; overflow-x: auto; padding: 0 4px; }
.ssi-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--ssi-muted); min-height: 44px; padding: 9px 14px; white-space: nowrap; }
.ssi-tabs button:hover,.ssi-tabs button:focus-visible { color: var(--ssi-ink); outline: none; }
.ssi-tabs button.active { border-bottom-color: var(--ssi-accent); color: var(--ssi-accent-dark); }
.ssi-tab-panel { min-height: 300px; }

.ssi-panel,.ssi-card,.ssi-empty,.ssi-summary article {
  background: var(--ssi-surface);
  border: 1px solid var(--ssi-border);
  border-radius: 14px;
  padding: 18px;
}
.ssi-panel h3,.ssi-panel h4,.ssi-card h3,.ssi-empty h3 { margin: 3px 0 8px; }
.ssi-panel p,.ssi-card p,.ssi-empty p,.ssi-tree small,.ssi-link-row small,.ssi-timeline small { color: var(--ssi-muted); font-size: .88rem; }
.ssi-section-heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 16px; }
.ssi-section-heading p { margin: 3px 0 0; }

.ssi-summary { display: grid; gap: 12px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 14px; }
.ssi-summary article { display: grid; gap: 5px; }
.ssi-summary article > span { color: var(--ssi-muted); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
.ssi-summary strong { font-size: 1.08rem; }
.ssi-summary small { color: var(--ssi-muted); }
.ssi-overview-grid,.ssi-governance-grid { display: grid; gap: 14px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.ssi-governance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ssi-governance-wide { grid-column: 1 / -1; }

.ssi-status { background: var(--ssi-soft); border-radius: 999px; color: var(--ssi-accent); display: inline-block; font-size: .76rem; font-weight: 800; padding: 5px 9px; white-space: nowrap; }
.ssi-status-paused { background: #fff4dc; color: #81530d; }
.ssi-status-archived { background: #edf0ef; color: #5d6865; }
.ssi-alert { background: #eef8f4; border: 1px solid #99c8b9; border-radius: 10px; padding: 10px 14px; }
.ssi-alert-error { background: #fff0ef; border-color: #e0aaa5; color: #802c24; }
.ssi-loading { background: #17302c; border-radius: 999px; color: #fff; font-size: .78rem; padding: 6px 11px; position: fixed; right: 24px; top: 78px; z-index: 30; }

.ssi-tree { overflow: auto; padding: 4px; }
.ssi-tree ol { list-style: none; margin: 0 0 0 17px; padding: 0 0 0 22px; position: relative; }
.ssi-tree ol::before { background: #c8dcd4; bottom: 14px; content: ""; left: 7px; position: absolute; top: 0; width: 1px; }
.ssi-tree li { padding: 8px 0; position: relative; }
.ssi-tree li::before { background: #c8dcd4; content: ""; height: 1px; left: -15px; position: absolute; top: 26px; width: 15px; }
.ssi-tree-root,.ssi-tree-node { align-items: flex-start; display: flex; gap: 10px; }
.ssi-tree-root { background: #f4f9f7; border-radius: 10px; margin-bottom: 7px; padding: 11px; }
.ssi-tree-node > div,.ssi-tree-root > div { display: grid; gap: 3px; }
.ssi-tree-icon { align-items: center; background: var(--ssi-accent); border-radius: 7px; color: #fff; display: inline-flex; flex: 0 0 28px; font-size: .72rem; font-weight: 850; height: 28px; justify-content: center; }
.ssi-tree-indicator .ssi-tree-icon { background: #5a7770; }
.ssi-link-chip { background: #e8f1fb; border-radius: 999px; color: #225b86; font-size: .72rem; font-weight: 750; margin-top: 3px; padding: 4px 8px; width: fit-content; }
.ssi-tree-compact { max-height: 255px; }

.ssi-table-wrap { overflow: auto; }
.ssi-table { border-collapse: collapse; min-width: 780px; width: 100%; }
.ssi-table th { color: var(--ssi-muted); font-size: .74rem; letter-spacing: .035em; text-align: left; text-transform: uppercase; }
.ssi-table th,.ssi-table td { border-bottom: 1px solid #e4ece9; padding: 11px 9px; vertical-align: top; }
.ssi-table td small { color: var(--ssi-muted); display: block; font-size: .82rem; margin-top: 3px; }
.ssi-row-actions button { background: #fff; color: var(--ssi-accent); min-height: 31px; padding: 5px 8px; }

.ssi-link-columns { display: grid; gap: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.ssi-link-row { align-items: center; border-top: 1px solid #e4ece9; display: flex; gap: 14px; justify-content: space-between; padding: 12px 0; }
.ssi-link-row > div { display: grid; gap: 3px; }
.ssi-definition-list { margin: 0; }
.ssi-definition-list > div { border-top: 1px solid #e4ece9; display: grid; grid-template-columns: 145px 1fr; padding: 10px 0; }
.ssi-definition-list dt { color: var(--ssi-muted); font-size: .82rem; font-weight: 750; }
.ssi-definition-list dd { margin: 0; }
.ssi-timeline { border-left: 2px solid #c8dcd4; list-style: none; margin: 15px 0 0 7px; padding: 0 0 0 19px; }
.ssi-timeline li { display: grid; gap: 3px; padding: 0 0 15px; position: relative; }
.ssi-timeline li::before { background: var(--ssi-accent); border: 3px solid #fff; border-radius: 50%; content: ""; height: 10px; left: -25px; position: absolute; top: 3px; width: 10px; }

.ssi-form { align-content: start; display: grid; gap: 12px; }
.ssi-form-grid { align-items: end; grid-template-columns: minmax(180px,1fr) minmax(240px,1.35fr) 145px 145px auto; }
.ssi-form-pair { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.ssi-form label { display: grid; gap: 5px; }
.ssi-form label > span { font-size: .79rem; font-weight: 750; }
.ssi-form input,.ssi-form select,.ssi-form textarea { background: #fff; border: 1px solid #b8cac3; border-radius: 8px; color: inherit; font: inherit; min-height: 40px; padding: 8px 10px; }
.ssi-form textarea { min-height: 86px; resize: vertical; }
.ssi-form select[multiple] { min-height: 120px; }
.ssi-check { align-items: center; display: flex !important; grid-template-columns: auto 1fr; }
.ssi-check input { min-height: auto; }
.ssi-setup { display: grid; gap: 18px; }

.ssi-empty { text-align: center; }
.ssi-empty-inline { border-style: dashed; padding: 28px 18px; }
.ssi-share-list { display: grid; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.ssi-share-list li { align-items: center; background: #f7faf9; border-radius: 9px; display: flex; gap: 12px; justify-content: space-between; padding: 10px 12px; }
.ssi-share-list button { min-height: 32px; padding: 5px 9px; }

.ssi-modal-backdrop { align-items: center; background: rgba(11,35,31,.48); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 1000; }
.ssi-modal { background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(10,32,28,.25); max-height: calc(100vh - 48px); max-width: 610px; overflow: auto; padding: 24px; position: relative; width: 100%; }
.ssi-modal-heading { margin-bottom: 18px; padding-right: 35px; }
.ssi-modal-heading h3 { font-size: 1.35rem; margin: 4px 0 7px; }
.ssi-modal-heading p { color: var(--ssi-muted); font-size: .88rem; margin: 0; }
.ssi-modal-close { background: #eff5f2; border: 0; border-radius: 50%; color: var(--ssi-ink); cursor: pointer; font-size: 1.35rem; height: 34px; line-height: 1; position: absolute; right: 16px; top: 16px; width: 34px; }
.ssi-help-content { display: grid; gap: 12px; }
.ssi-help-content p { color: var(--ssi-muted); margin: 0; }
.ssi-help-content .ssi-button { justify-self: start; }

@media (max-width: 1080px) {
  .ssi-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ssi-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ssi-form-grid .ssi-button { width: max-content; }
  .ssi-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ssi-hero { align-items: stretch; flex-direction: column; padding: 16px; }
  .ssi-plan-selector { max-width: none; width: 100%; }
  .ssi-hero-actions { justify-content: flex-start; }
  .ssi-summary,.ssi-governance-grid,.ssi-link-columns,.ssi-form-grid,.ssi-form-pair { grid-template-columns: 1fr; }
  .ssi-section-heading { align-items: stretch; flex-direction: column; }
  .ssi-toolbar { justify-content: flex-start; }
  .ssi-panel,.ssi-card,.ssi-empty { border-radius: 12px; padding: 14px; }
  .ssi-modal-backdrop { padding: 10px; }
  .ssi-modal { max-height: calc(100vh - 20px); padding: 20px; }
}