/* ═══════════════════════════════════════════════════════════════════════════
   DAP ADMIN — MODULE LAYER

   Screen-specific rules. A block belongs here only if it is genuinely used
   on one screen; the moment a second screen wants it, it moves up into
   components.css.

   These were previously 25 separate <style> blocks living inside the
   templates themselves. Two name collisions had to be resolved on the way
   in, and both are noted where they occur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   AUTH — login
   ══════════════════════════════════════════
   The login page used to carry a third palette of its own (#1F6F5F green,
   #F5B335 gold) that matched neither the portal nor the public site. It now
   draws from the same tokens as everything else; the layout — a centred card
   on a scrimmed campus photograph — is unchanged. */
.dap-auth {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--sp-6);

  /* Campus photograph behind a green-tinted scrim. The tint is green rather
     than neutral black so the page stays inside the institutional palette,
     matching the public hero. `fixed` is avoided — it misbehaves on iOS
     Safari and buys nothing on a single-screen page.

     The URL is relative on purpose: collectstatic runs through
     CompressedManifestStaticFilesStorage, which rewrites it to the hashed
     filename and fails the build if the image ever goes missing. */
  background-color: var(--dap-primary-text);   /* fallback while the image loads */
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--dap-primary-text) 84%, transparent),
      color-mix(in srgb, #000000 55%, var(--dap-primary-text))
    ),
    url("../../images/login-bg.62930fdce172.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-card {
  width: 100%;
  max-width: 23rem;
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
  border-top: 4px solid var(--dap-accent);
  border-radius: var(--radius-xl);
  background: var(--dap-white);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.login-seal { display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto var(--sp-3); object-fit: contain; }
.login-name { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--dap-primary-text); }
.login-sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dap-muted);
}
.login-rule { height: 1px; margin: var(--sp-6) 0; background: var(--dap-border); }

.login-card form { text-align: left; }
.login-card .field { margin-bottom: var(--sp-4); }
.login-card .field--last { margin-bottom: var(--sp-6); }
.login-card .field label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--dap-muted);
}
.login-card .field input {
  width: 100%;
  padding: var(--sp-3) var(--sp-3);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-lg);
  background: var(--dap-white);
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--dap-text);
}
.login-card .field input:focus {
  outline: 2px solid var(--dap-primary);
  outline-offset: 1px;
  border-color: var(--dap-primary);
}

.login-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
  background: #fef2f2;
  color: var(--dap-danger-fg);
  font-size: var(--fs-sm);
  text-align: left;
}
.login-error i { flex: none; margin-top: 0.1rem; }

.btn-login {
  width: 100%;
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--dap-primary);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.btn-login:hover { background: var(--dap-primary-hover); }
.btn-login:focus-visible { outline: 2.5px solid var(--dap-accent); outline-offset: 2px; }

.login-back {
  display: inline-block;
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--dap-muted);
  text-decoration: none;
}
.login-back:hover { color: var(--dap-primary); text-decoration: underline; }

@media (max-width: 400px) {
  .login-card { padding: var(--sp-8) var(--sp-5) var(--sp-6); }
}

/* ══════════════════════════════════════════
   ACCOUNTS — user form
   ══════════════════════════════════════════ */
.avatar-upload-wrap { display: flex; align-items: flex-start; gap: var(--sp-3); }
.avatar-pick-btn { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer; }
.avatar-pick-btn input[type="file"] { display: none; }

.status-toggle-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.status-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-lg);
  background: var(--dap-white);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.status-toggle-row:has(input:checked) { border-color: var(--dap-primary); background: var(--dap-primary-bg); }
.status-toggle-text { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.status-active-label   { display: none; color: var(--dap-primary-text); }
.status-inactive-label { color: var(--dap-muted); }
.status-toggle-row:has(input:checked) .status-active-label   { display: inline; }
.status-toggle-row:has(input:checked) .status-inactive-label { display: none; }

/* ══════════════════════════════════════════
   ACCREDITATION — form
   ══════════════════════════════════════════ */
.area-row { display: flex; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); }
.area-row-label { flex-shrink: 0; width: 220px; padding-top: var(--sp-1); }
.area-row-fields { flex: 1; display: flex; gap: var(--sp-4); }
.area-field { flex: 1; min-width: 0; }

/* The area row's own label. Named .area-name before, which collided with the
   .area-name in the area list — same class, two different components, two
   different sizes. Renamed here; the list keeps the shorter name. */
.area-row-code {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--dap-primary);
}
.area-row-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--dap-text-secondary); }

@media (max-width: 900px) {
  .area-row { flex-direction: column; gap: var(--sp-3); }
  .area-row-label { width: auto; padding-top: 0; }
  .area-row-fields { width: 100%; flex-wrap: wrap; }
  .area-field { flex: 1 1 220px; }
}

.staff-tag-list { display: flex; flex-direction: column; gap: var(--sp-1); min-height: 0; }
.staff-tag-list:not(:empty) { margin-bottom: 2px; }
.staff-tag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--dap-border);
  border-left: 3px solid var(--dap-primary);
  border-radius: var(--radius-md);
  background: var(--dap-primary-bg);
  color: var(--dap-primary-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.btn-staff-remove {
  display: flex;
  align-items: center;
  padding: 0 0 0 var(--sp-2);
  border: none;
  background: none;
  color: var(--dap-danger);
  font-size: var(--fs-base);
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}
.btn-staff-remove:hover { opacity: 1; }

/* ══════════════════════════════════════════
   ACCREDITATION — area list & detail
   ══════════════════════════════════════════ */
.areas-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-1) var(--sp-1);
  border-bottom: 2px solid var(--dap-border);
}
.areas-section-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--dap-primary-bg);
  color: var(--dap-primary-text);
  font-size: var(--fs-lg);
}
.areas-section-header.program .areas-section-icon { background: var(--dap-accent-bg); color: var(--dap-accent-dark); }
.areas-section-label { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--dap-text); }
.areas-section-sub   { margin-top: 1px; font-size: var(--fs-xs); color: var(--dap-muted); }

.area-code-badge {
  flex-shrink: 0;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
}
.area-code-badge.institutional { background: var(--dap-primary-bg); color: var(--dap-primary-text); }
.area-code-badge.program       { background: var(--dap-accent-bg);  color: var(--dap-accent-dark); }

.area-name       { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--dap-text); }
.area-type-label { margin-top: 2px; font-size: var(--fs-xs); color: var(--dap-muted); }

.param-letter-badge {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--dap-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* ══════════════════════════════════════════
   ACCREDITATION — management & task force
   ══════════════════════════════════════════ */
.tf-detail { display: flex; flex-direction: column; gap: 2px; }
.tf-detail-item { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--dap-danger); }

/* ══════════════════════════════════════════
   ACCREDITATION — requirements admin
   ══════════════════════════════════════════ */
.req-admin-table { width: 100%; }
.req-admin-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
  border-bottom: 1px solid var(--dap-border-soft);
  transition: background var(--t-fast) var(--ease);
}
.req-admin-row:last-child { border-bottom: none; }
.req-admin-row:hover { background: var(--dap-bg); }
.req-admin-code {
  flex-shrink: 0;
  min-width: 80px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--dap-muted);
}
.req-admin-name { flex: 1; min-width: 0; font-size: var(--fs-base); color: var(--dap-text); }
.req-admin-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

@media (max-width: 575.98px) {
  .req-admin-row { flex-wrap: wrap; padding-right: var(--sp-2); }
  .req-admin-name { flex: 1 1 100%; order: 2; }
  .req-admin-actions { order: 3; margin-left: auto; }
}

/* ══════════════════════════════════════════
   WORKSPACE DASHBOARD
   ══════════════════════════════════════════ */
.db-ready { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-3); }
.db-ready-bar   { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--dap-border); overflow: hidden; }
.db-ready-fill  { height: 100%; border-radius: var(--radius-pill); background: var(--dap-primary); transition: width var(--t-slow) var(--ease); }
.db-ready-count { flex: none; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--dap-muted); }

.db-ready-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0 var(--sp-5) var(--sp-4); list-style: none; }
.db-ready-list li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--dap-muted); }
.db-ready-list li > i { flex: none; font-size: var(--fs-md); color: var(--dap-border); }
.db-ready-list li.is-done > i { color: var(--dap-primary); }
.db-ready-list li.is-done .db-ready-name { color: var(--dap-text); }
.db-ready-name  { min-width: 9.5rem; font-weight: var(--fw-semibold); color: var(--dap-muted); }
.db-ready-value { margin-left: auto; font-size: var(--fs-xs); text-align: right; }

@media (max-width: 520px) {
  .db-ready-list li { flex-wrap: wrap; }
  .db-ready-name { min-width: 0; }
  .db-ready-value { flex-basis: 100%; margin-left: 0; padding-left: 1.5rem; text-align: left; }
}

.db-welcome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--dap-primary-light);
  border-radius: var(--radius-xl);
  background: var(--dap-primary-bg);
}
.db-avatar {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--dap-primary);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
}
.db-name      { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--dap-text); }
.db-role      { font-size: var(--fs-sm); color: var(--dap-muted); }
.db-acc-badge { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--dap-primary-text); }

@media (max-width: 575.98px) {
  .db-welcome { flex-wrap: wrap; }
}

.db-area-card { border-radius: var(--radius-xl); overflow: hidden; }
.db-area-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--dap-border);
  background: var(--dap-primary-bg);
}
.db-area-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--dap-primary);
  color: #fff;
  font-size: var(--fs-lg);
}
.db-area-code {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.db-area-name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--dap-text); }

.db-role-badge {
  margin-left: auto;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.db-role-badge.leader { background: var(--dap-warning-bg); color: var(--dap-warning-fg); border: 1px solid var(--dap-accent-light); }
.db-role-badge.staff  { background: var(--dap-neutral-bg); color: var(--dap-neutral-fg); border: 1px solid var(--dap-border); }

.db-area-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--dap-border);
  background: var(--dap-bg);
}

.db-contributions   { border-radius: var(--radius-xl); overflow: hidden; }
.db-contrib-grid    { display: grid; grid-template-columns: 1fr 1fr; }
.db-contrib-single  { grid-template-columns: 1fr !important; }
@media (max-width: 700px) { .db-contrib-grid { grid-template-columns: 1fr; } }

.db-contrib-col { padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--dap-border); }
.db-contrib-col:last-child { border-right: none; }
@media (max-width: 700px) {
  .db-contrib-col { border-right: none; border-bottom: 1px solid var(--dap-border); }
  .db-contrib-col:last-child { border-bottom: none; }
}
.db-contrib-col-title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.db-contrib-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.db-contrib-item:hover { background: var(--dap-primary-bg); }
.db-contrib-item-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.db-contrib-icon { flex-shrink: 0; font-size: var(--fs-lg); color: var(--dap-primary); }
.db-contrib-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--dap-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-contrib-meta  { margin-top: 1px; font-size: var(--fs-xs); color: var(--dap-muted); }
.db-contrib-empty { padding: var(--sp-2) 0; font-size: var(--fs-sm); font-style: italic; color: var(--dap-disabled); }
.db-contrib-status {
  flex-shrink: 0;
  padding: 3px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.db-contrib-status.draft          { background: var(--dap-neutral-bg); color: var(--dap-neutral-fg); }
.db-contrib-status.for_checking   { background: #fef9c3;               color: #854d0e; }
.db-contrib-status.for_validation { background: var(--dap-info-bg);    color: var(--dap-info-fg); }
.db-contrib-status.approved       { background: #d1fae5;               color: #065f46; }
.db-contrib-status.rejected       { background: var(--dap-danger-bg);  color: var(--dap-danger-fg); }
.db-contrib-status.pending        { background: #fef9c3;               color: #854d0e; }
.db-contrib-status.verified       { background: #d1fae5;               color: #065f46; }

/* ══════════════════════════════════════════
   INSTRUMENT GRID
   ══════════════════════════════════════════
   A spreadsheet, not a form. This module deliberately opts out of the global
   type scale: it runs its own density tokens, because fifty indicators have
   to fit on one screen and the controls are shrunk to the row rather than the
   row grown to the controls. Touch devices get their targets back at the
   bottom of the block. */
.ig {
  --ig-fs:      0.78rem;
  --ig-fs-sm:   0.72rem;
  --ig-fs-xs:   0.66rem;
  --ig-row-h:   22px;
  --ig-pad-y:   2px;
  --ig-pad-x:   8px;
}

.ig-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ig-mean-card {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--dap-primary-light);
  border-radius: var(--radius-lg);
  background: var(--dap-primary-bg);
}
/* Scoped: the toolbar card and the table's summary row both wanted the name
   .ig-mean-label but need opposite treatments. */
.ig-mean-card .ig-mean-label {
  font-size: var(--ig-fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.ig-mean-val { font-size: var(--fs-xl); font-weight: var(--fw-heavy); line-height: var(--lh-tight); color: var(--dap-primary); }
.ig-tally { font-size: var(--ig-fs-sm); color: var(--dap-muted); font-variant-numeric: tabular-nums; }

.ig-save-wrap  { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.ig-save-state { font-size: var(--ig-fs-sm); color: var(--dap-muted); }
.ig-save-state.dirty { color: #b45309; font-weight: var(--fw-semibold); }
#ss-save.is-dirty { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dap-accent) 40%, transparent); }

.ig-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-md);
  background: var(--dap-bg);
  font-size: var(--ig-fs-sm);
  color: var(--dap-muted);
}
.ig-leg-title { font-weight: var(--fw-bold); color: var(--dap-text); }
.ig-leg-item  { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ig-leg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 var(--sp-1);
  border-radius: 3px;
  font-size: var(--ig-fs-xs);
  font-weight: var(--fw-bold);
  color: #fff;
}
.ig-leg-badge.bna { background: var(--dap-disabled); }
.ig-leg-badge.b1  { background: #dc3545; }
.ig-leg-badge.b2  { background: #fd7e14; }
.ig-leg-badge.b3  { background: #ffc107; color: var(--dap-text); }
.ig-leg-badge.b4  { background: #20c997; }
.ig-leg-badge.b5  { background: #198754; }
.ig-leg-note { margin-left: auto; }

.ig-card { margin-bottom: var(--sp-2); border-radius: var(--radius-lg); overflow: hidden; }
.ig-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: var(--sp-1) var(--sp-3);
  border-bottom: 1px solid var(--dap-border);
  background: var(--dap-primary-bg);
  cursor: pointer;
  user-select: none;
}
.ig-head:hover { background: var(--dap-primary-light); }
.ig-letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: var(--dap-primary);
  color: #fff;
  font-size: var(--ig-fs-sm);
  font-weight: var(--fw-heavy);
}
.ig-name { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--dap-text); }
.ig-pill {
  flex: none;
  padding: 1px var(--sp-2);
  border: 1px solid var(--dap-primary-light);
  border-radius: var(--radius-pill);
  background: var(--dap-white);
  font-size: var(--ig-fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--dap-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ig-pill-mov { color: var(--dap-muted); border-color: var(--dap-border); }
.ig-chevron  { flex: none; font-size: var(--ig-fs-sm); color: var(--dap-muted); transition: transform var(--t-base) var(--ease); }
.ig-head[aria-expanded="true"] .ig-chevron { transform: rotate(180deg); }

.ig-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--ig-fs); line-height: 1.35; }
.ig-c-code { width: 3.6rem; }
.ig-c-ir   { width: 4.2rem; }
.ig-c-mov  { width: 15rem; }
.ig-c-link { width: 12rem; }
.ig-table th {
  padding: var(--sp-1) var(--ig-pad-x);
  border-bottom: 1px solid var(--dap-border);
  background: var(--dap-bg);
  font-size: var(--ig-fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
  text-align: left;
  white-space: nowrap;
}
.ig-th-ir { text-align: center !important; }
.ig-table td { padding: var(--ig-pad-y) var(--ig-pad-x); border-bottom: 1px solid var(--dap-border-soft); vertical-align: middle; }
.ig-row:hover td { background: var(--dap-surface-2); }
.ig-group td {
  padding: var(--sp-1) var(--ig-pad-x) var(--ig-pad-y);
  background: var(--dap-primary-bg);
  font-size: var(--ig-fs-xs);
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-primary-text);
}
.ig-code { font-size: var(--ig-fs-sm); font-weight: var(--fw-bold); color: var(--dap-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ig-ind  { min-width: 0; color: var(--dap-text); }
.ig-parent .ig-text { font-weight: var(--fw-semibold); }
/* Composed at render time as ig-d{{ row.depth }} — these names never appear
   literally in the template, so a search for them finds nothing. */
.ig-d1 .ig-code, .ig-d1 .ig-ind { padding-left: 20px; }
.ig-d2 .ig-code, .ig-d2 .ig-ind { padding-left: 32px; }
.ig-d3 .ig-code, .ig-d3 .ig-ind { padding-left: 44px; }

/* Scoring guidance attached to a single indicator: it tells you how to
   choose a score, it is not another thing to score. */
.ig-guide {
  display: block;
  margin-top: 1px;
  padding-left: var(--sp-2);
  border-left: 2px solid var(--dap-border);
  font-size: var(--ig-fs-sm);
  line-height: 1.35;
  color: var(--dap-muted);
}

.ig-ir { text-align: center; white-space: nowrap; }
.ig-table .ss-ir-select {
  width: 3.4rem; height: var(--ig-row-h);
  padding: 0 2px 0 var(--sp-2);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-sm);
  background: var(--dap-white);
  font-size: var(--ig-fs-sm);
  line-height: 1;
  cursor: pointer;
}
.ig-table .ss-ir-select:focus { outline: none; border-color: var(--dap-primary); box-shadow: 0 0 0 2px var(--dap-primary-light); }
.ig-table .ss-ir-select.rated { border-color: var(--dap-primary); background: var(--dap-primary-bg); font-weight: var(--fw-bold); color: var(--dap-primary); }
.ig-table .ss-ir-select.na    { border-color: var(--dap-muted); color: var(--dap-muted); font-style: italic; }
.ig-table .ss-calc-ir {
  display: inline-block;
  min-width: 3.4rem;
  padding: 1px var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--dap-bg);
  font-size: var(--ig-fs-sm);
  font-weight: var(--fw-bold);
  color: var(--dap-muted);
  font-variant-numeric: tabular-nums;
}

.ig-in {
  width: 100%; min-width: 0; height: var(--ig-row-h);
  padding: 0 7px;
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-sm);
  background: var(--dap-white);
  font-size: var(--ig-fs-sm);
  color: var(--dap-text);
}
.ig-in:focus { outline: none; border-color: var(--dap-primary); box-shadow: 0 0 0 2px var(--dap-primary-light); }
.ig-link-input { font-size: var(--ig-fs-sm); }
.ig-in.has-mov, .ig-in.has-link {
  border-color: var(--dap-primary-light);
  background: var(--dap-primary-bg);
}
/* The only MOV error left: a link that is not a web address. The amber
   `needed` state that flagged a link with no name went with the rule — the
   name is optional now, so nothing is waiting to be filled. */
.ig-in.invalid { border-color: var(--dap-danger); background: #fff5f5; }

.ig-link-wrap { display: flex; align-items: center; gap: 3px; min-width: 0; }
.ig-open {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: var(--ig-row-h);
  border-radius: var(--radius-sm);
  color: var(--dap-muted);
  font-size: var(--ig-fs-sm);
  text-decoration: none;
}
.ig-open:hover { background: var(--dap-primary-bg); color: var(--dap-primary); }
.ig-open.is-hidden { visibility: hidden; }

.ig-mean td { background: var(--dap-primary-bg); border-top: 1px solid var(--dap-border); }
.ig-pm td   { background: var(--dap-primary-bg); border-top: 2px solid var(--dap-primary-light); }
.ig-table .ig-mean-label { text-align: right; font-size: var(--ig-fs-sm); font-weight: var(--fw-bold); color: var(--dap-muted); }
.ig-pm .ig-mean-label { font-size: var(--ig-fs); color: var(--dap-primary-text); }
.ig-mean-num { font-size: var(--ig-fs); font-weight: var(--fw-bold); color: var(--dap-primary); font-variant-numeric: tabular-nums; }
.ig-left { text-align: left !important; }

/* Best Practices — the MOV row after the Parameter Mean. Same inputs as an
   indicator row; the label cells say what it is, since it has no code. */
.ig-bp td { border-top: 1px solid var(--dap-border); }
.ig-bp .ig-code { color: var(--dap-primary); }
.ig-bp-label { font-size: var(--ig-fs-sm); font-weight: var(--fw-semibold); color: var(--dap-text-secondary); }
.ig-bp-hint  { margin-left: var(--sp-2); font-size: var(--ig-fs-xs); font-weight: var(--fw-normal); color: var(--dap-muted); }

.ig-summary td, .ig-summary th { padding: var(--sp-1) var(--sp-3); }
.ig-summary .ig-th-ir { width: 6rem; }
.ig-qual { width: 11rem; font-size: var(--ig-fs-sm); color: var(--dap-muted); }
.ig-summary-card { margin-top: var(--sp-3); }

.ig-empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--dap-muted); }
.ig-empty i { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-2xl); opacity: 0.6; }

/* Five columns do not stack; below 768 the table keeps its shape and the
   wrapper scrolls sideways. Touch devices get taller controls. */
@media (max-width: 768px) {
  .ig-table:not(.ig-summary) { min-width: 720px; }
  .ig-leg-note { margin-left: 0; flex-basis: 100%; }
}
@media (pointer: coarse) {
  .ig { --ig-row-h: 40px; --ig-pad-y: 4px; }
  .ig-open { width: 40px; }
}
@media (max-width: 640px) {
  .ig-save-wrap { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* ══════════════════════════════════════════
   PAGE BUILDER
   ══════════════════════════════════════════ */
.pb-area-code {
  margin-bottom: 2px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--dap-muted);
}

.pb-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--dap-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.pb-tabs::-webkit-scrollbar { display: none; }
.pb-tabs button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--dap-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pb-tabs button:hover { color: var(--dap-primary-text); }
.pb-tabs button[aria-selected="true"] { color: var(--dap-primary-text); border-bottom-color: var(--dap-primary); }
.pb-panel[hidden] { display: none; }

/* Below 768 the tab strip is replaced by headings — an area leader reviewing
   on a phone gets the same four sections without a strip that scrolls the
   last two out of sight. */
.pb-acc-head { display: none; }
@media (max-width: 768px) {
  .pb-tabs { display: none; }
  .pb-acc-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 3rem;
    margin-bottom: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--dap-border);
    border-radius: var(--radius-lg);
    background: var(--dap-primary-bg);
    color: var(--dap-primary-text);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    text-align: left;
    cursor: pointer;
  }
  .pb-acc-head > span { flex: 1; min-width: 0; }
  .pb-acc-chevron { flex: none; font-size: var(--fs-xs); color: var(--dap-muted); transition: transform var(--t-base) var(--ease); }
  .pb-acc-head[aria-expanded="true"] .pb-acc-chevron { transform: rotate(180deg); }
  .pb-section { margin-bottom: var(--sp-2); }
}

.pb-live-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--dap-success-bg);
  color: var(--dap-success-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.pb-doc-current {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-lg);
  background: var(--dap-primary-bg);
  font-size: var(--fs-sm);
}
.pb-doc-current > i { color: #b02a37; }
.pb-doc-current form { margin: 0; }
.pb-doc-name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

.msg-portrait-preview {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--dap-border);
  border-radius: 50%;
  background: var(--dap-primary-bg);
  color: var(--dap-muted);
  font-size: var(--fs-xl);
}
.msg-portrait-preview img { width: 100%; height: 100%; object-fit: cover; }

.ao-card { border-radius: var(--radius-xl); overflow: hidden; }
.ao-card-body { padding: var(--sp-5); }
.ao-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 640px) { .ao-fields { grid-template-columns: 1fr; } }
.ao-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ao-label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.ao-field-hint { font-size: var(--fs-xs); color: var(--dap-muted); }
.ao-current-photo { display: flex; align-items: center; gap: var(--sp-2); }
.ao-current-photo img { width: 80px; height: 50px; border: 1px solid var(--dap-border); border-radius: var(--radius-sm); object-fit: cover; }
.ao-photo-caption { font-size: var(--fs-xs); color: var(--dap-muted); }
.ao-avp-preview iframe { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--dap-border); border-radius: var(--radius-md); }
.ao-actions { margin-top: var(--sp-4); }

/* ══════════════════════════════════════════
   PROGRAMS & ACADEMIC UNITS
   ══════════════════════════════════════════ */
.pr-filter { /* alias kept; see .dap-filter-bar in components.css */
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  background: var(--dap-white);
}
.pr-stat {
  height: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  background: var(--dap-white);
}
.pr-stat-value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.1; color: var(--dap-primary-text); }
.pr-stat-label { margin-top: 2px; font-size: var(--fs-xs); color: var(--dap-muted); }

.pr-code {
  display: inline-block;
  padding: 2px var(--sp-2);
  border: 1px solid var(--dap-accent-light);
  border-radius: var(--radius-md);
  background: var(--dap-accent-bg);
  color: var(--dap-accent-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.pr-name { font-weight: var(--fw-semibold); color: var(--dap-text); text-decoration: none; }
.pr-name:hover { color: var(--dap-primary-text); text-decoration: underline; }

.unit-badge {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--dap-primary-bg);
  color: var(--dap-primary);
}
.unit-name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--dap-text); }
.unit-meta { font-size: var(--fs-xs); color: var(--dap-muted); }

.dept-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--dap-border-soft);
}
.dept-row:last-child { border-bottom: none; }
.dept-arrow { flex-shrink: 0; color: var(--dap-primary-light); }
.dept-name  { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--dap-text-secondary); }

/* ══════════════════════════════════════════
   PUBLIC-SITE ADMIN — carousel
   ══════════════════════════════════════════ */
.cs-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--dap-border);
}
.cs-row:last-child { border-bottom: none; }
.cs-row-off { opacity: 0.55; }

.cs-thumb {
  position: relative;
  flex-shrink: 0;
  width: 132px;
  overflow: hidden;
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-lg);
}
.cs-thumb img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.cs-pos {
  position: absolute;
  top: var(--sp-1); left: var(--sp-1);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}

.cs-fields  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cs-active  { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-sm); color: var(--dap-muted); }
.cs-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.cs-move    { display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 700px) {
  .cs-row { flex-wrap: wrap; }
  .cs-thumb { width: 100px; }
}

/* ══════════════════════════════════════════
   PUBLIC-SITE ADMIN — landing photo
   ══════════════════════════════════════════ */
.lp-photo-preview { position: relative; width: 100%; height: 220px; background-size: cover; background-position: center; }
.lp-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.65));
}
.lp-overlay-badge {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lp-overlay-title { color: #fff; font-size: var(--fs-2xl); font-weight: var(--fw-bold); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.lp-photo-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--dap-border);
  font-size: var(--fs-sm);
  color: var(--dap-muted);
}

/* Empty-state strip shared by the landing-photo and certificate screens,
   which had it twice under two names (.lp-no-photo-inner, .cert-no-cert). */
.dap-file-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-xl);
  color: var(--dap-muted);
  font-size: var(--fs-base);
}
.dap-file-empty > i { flex-shrink: 0; font-size: var(--fs-3xl); opacity: 0.4; }

/* ══════════════════════════════════════════
   PUBLIC-SITE ADMIN — certificate
   ══════════════════════════════════════════ */
.cert-current-card { overflow: hidden; border: 2px solid var(--dap-primary-light); border-radius: var(--radius-xl); }
.cert-current-body { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }
.cert-file-icon { flex-shrink: 0; font-size: var(--fs-4xl); color: #dc2626; }
.cert-file-info { flex: 1; min-width: 0; }
.cert-file-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--dap-text); }
.cert-file-meta { margin-top: 3px; font-size: var(--fs-xs); color: var(--dap-muted); }

.cert-upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.cert-upload-row .form-control { max-width: 400px; }
.cert-upload-hint { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--dap-muted); }

/* Label lines above the two public-site admin screens. */
.cert-acc-label, .lp-acc-label { font-size: var(--fs-sm); color: var(--dap-muted); }

/* ══════════════════════════════════════════
   QA OFFICE — agencies, cycles, compliance
   ══════════════════════════════════════════ */

/* A small uppercase tag: an agency's kind, a finding's type, "mandatory". */
.qa-kind {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--dap-neutral-bg);
  color: var(--dap-neutral-fg);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  vertical-align: middle;
}

/* Filter bar above the cycle register and the compliance tracker. */
.qa-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.qa-filters .form-select { width: auto; min-width: 160px; }
@media (max-width: 575.98px) {
  .qa-filters .form-select { flex: 1 1 100%; }
}

/* Checkbox lists rendered by partials/form_fields.html. */
.qa-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-lg);
}

/* One row per campus a program is offered at, on the program page. */
.qa-offering { padding: var(--sp-4) var(--sp-5); }

/* Row in a plain list card: survey team, unassigned findings. */
.qa-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--dap-border-soft);
}
.qa-list-row:last-child { border-bottom: none; }

/* Findings, each with its compliance actions indented beneath it. */
.qa-finding { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--dap-border-soft); }
.qa-finding:last-child { border-bottom: none; }
.qa-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--dap-primary-light);
  border-radius: var(--radius-sm);
  background: var(--dap-surface-2);
}

/* Cycle timeline: each milestone is a row, reached ones carry a filled dot. */
.qa-timeline { margin: 0; padding: 0; list-style: none; }
.qa-timeline li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--dap-muted);
}
.qa-timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--dap-border);
  border-radius: 50%;
  background: var(--dap-white);
  transform: translateY(-50%);
}
.qa-timeline li.done { color: var(--dap-text); }
.qa-timeline li.done::before { border-color: var(--dap-primary); background: var(--dap-primary); }
.qa-timeline time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Outcome figures. */
.qa-stat-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.qa-stat-value { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--dap-text); }

/* Narrow numeric inputs in the area ratings table. */
.qa-col-num { width: 110px; }

/* Compliance KPI tiles — links, since each one filters the list below. */
.qa-kpi {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  background: var(--dap-surface);
  color: var(--dap-text);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease);
}
.qa-kpi:hover, .qa-kpi.is-current { border-color: var(--dap-primary); }
.qa-kpi-value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--dap-primary-text); }
.qa-kpi-label { font-size: var(--fs-xs); color: var(--dap-muted); }
.qa-kpi--alert .qa-kpi-value { color: var(--dap-danger-fg); }

/* ══════════════════════════════════════════
   AGENCIES & SCHEMES
   ══════════════════════════════════════════ */

/* One section per kind of agency; cards two-up from 1200px. */
.ag-group { margin-bottom: var(--sp-6); }
.ag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: var(--sp-4);
}

.ag-card {
  display: flex;
  flex-direction: column;
  background: var(--dap-white);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}
.ag-card.is-inactive { opacity: 0.7; }
.ag-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-5);
}
/* Monogram tile: two letters of the code, so the eye finds an agency by
   shape before reading its long formal name. */
.ag-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--dap-primary-bg);
  color: var(--dap-primary-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.02em;
}
.ag-code { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--dap-text); }
.ag-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--dap-muted);
}

/* Schemes: whole-row links, so the target is the row and not a small word. */
.ag-schemes { margin: 0; padding: 0 var(--sp-2) var(--sp-2); list-style: none; }
.ag-scheme {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-top: 1px solid var(--dap-border-soft);
  color: var(--dap-text);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.ag-schemes li:first-child .ag-scheme { border-top-color: var(--dap-border); }
.ag-scheme:hover { background: var(--dap-primary-bg); border-radius: var(--radius-lg); color: var(--dap-text); }
.ag-schemes li:hover + li .ag-scheme { border-top-color: transparent; }
.ag-scheme:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-lg); }
.ag-scheme.is-inactive { opacity: 0.65; }
.ag-scheme-name { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ag-scheme-name i { color: var(--dap-primary); }
.ag-scheme-meta { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--dap-muted); }
.ag-chevron { flex-shrink: 0; color: var(--dap-disabled); }
.ag-scheme:hover .ag-chevron { color: var(--dap-primary); }
.ag-empty {
  margin: 0 var(--sp-5) var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--dap-border);
  font-size: var(--fs-xs);
  color: var(--dap-muted);
}

/* Scheme page tables. */
.sd-col-code    { width: 120px; }
.sd-col-actions { width: 110px; }
.sd-code {
  display: inline-block;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--dap-neutral-bg);
  color: var(--dap-neutral-fg);
  font-family: var(--bs-font-monospace);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}