.wp-skip-link {
  background: var(--wp-color-focus);
  border-radius: var(--wp-radius-sm);
  color: #ffffff;
  font-weight: 700;
  left: var(--wp-space-4);
  padding: var(--wp-space-3) var(--wp-space-4);
  position: fixed;
  top: -8rem;
  z-index: 20;
}

.wp-skip-link:focus {
  top: var(--wp-space-4);
}

.wp-site-header {
  align-items: center;
  background: var(--wp-color-brand);
  border-bottom: 0.0625rem solid var(--wp-color-border);
  display: flex;
  gap: var(--wp-space-5);
  justify-content: space-between;
  padding: var(--wp-space-3) max(var(--wp-space-4), calc((100% - var(--wp-content-max)) / 2));
  position: sticky;
  top: 0;
  z-index: 10;
}

.wp-brand {
  color: #ffffff;
  font-size: var(--wp-font-size-lg);
  font-weight: 800;
  min-block-size: 2.75rem;
  padding: var(--wp-space-2);
  text-decoration: none;
  white-space: nowrap;
}

.wp-noscript {
  background: var(--wp-color-warning-bg);
  border-bottom: 0.125rem solid var(--wp-color-warning);
  color: var(--wp-color-warning);
  font-weight: 700;
  margin: 0;
  padding: var(--wp-space-3) var(--wp-space-4);
  text-align: center;
}

.wp-gallery,
.wp-footer {
  margin-inline: auto;
  max-inline-size: var(--wp-content-max);
  padding-inline: var(--wp-space-4);
}

.wp-hero {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.wp-eyebrow,
.wp-kicker {
  color: var(--wp-color-brand);
  font-size: var(--wp-font-size-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wp-hero h1 {
  font-size: var(--wp-font-size-xl);
  line-height: 1.15;
  margin-block: var(--wp-space-3);
  max-inline-size: 32ch;
}

.wp-lead {
  color: var(--wp-color-muted);
  font-size: var(--wp-font-size-lg);
  max-inline-size: 60ch;
}

.wp-gallery-section {
  background: var(--wp-color-surface);
  border: 0.0625rem solid var(--wp-color-border);
  border-radius: var(--wp-radius-lg);
  box-shadow: var(--wp-shadow-sm);
  margin-block-end: var(--wp-space-6);
  padding: clamp(1.25rem, 3vw, 2rem);
  scroll-margin-top: 7rem;
}

.wp-section-heading {
  align-items: baseline;
  display: flex;
  gap: var(--wp-space-3);
  margin-block-end: var(--wp-space-5);
}

.wp-section-heading h2,
.wp-section-heading p {
  margin: 0;
}

.wp-component-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp-space-4);
  margin-block: var(--wp-space-5);
}

.wp-token-grid {
  display: grid;
  gap: var(--wp-space-3);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin-block-start: var(--wp-space-5);
}

.wp-token {
  border: 0.0625rem solid var(--wp-color-border);
  border-radius: var(--wp-radius-md);
  font-weight: 700;
  min-block-size: 6rem;
  padding: var(--wp-space-4);
}

.wp-token--ink { background: var(--wp-color-ink); color: #ffffff; }
.wp-token--accent { background: var(--wp-color-accent); color: var(--wp-color-on-accent); }
.wp-token--success { background: var(--wp-color-success-bg); color: var(--wp-color-success); }
.wp-token--warning { background: var(--wp-color-warning-bg); color: var(--wp-color-warning); }
.wp-token--danger { background: var(--wp-color-danger-bg); color: var(--wp-color-danger-strong); }
.wp-token--info { background: var(--wp-color-info-bg); color: var(--wp-color-info); }

.wp-form-preview {
  display: grid;
  gap: var(--wp-space-5);
  max-inline-size: 40rem;
}

.wp-required-note {
  color: var(--wp-color-muted);
  font-size: var(--wp-font-size-sm);
}

.wp-alert-grid,
.wp-state-grid,
.wp-dialog-grid {
  display: grid;
  gap: var(--wp-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.wp-dialog-example {
  background: var(--wp-color-surface-subtle);
  border-radius: var(--wp-radius-md);
  min-block-size: 14rem;
  padding: var(--wp-space-4);
}

.wp-dialog-example--enhanced {
  align-items: center;
  display: flex;
  justify-content: center;
}

.wp-footer {
  color: var(--wp-color-muted);
  padding-block: var(--wp-space-6);
}

@media (max-width: 54rem) {
  .wp-site-header {
    align-items: start;
    flex-direction: column;
    position: static;
  }

  .wp-gallery-section {
    scroll-margin-top: var(--wp-space-4);
  }
}

@media (max-width: 30rem) {
  .wp-component-row,
  .wp-dialog__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .wp-button,
  .wp-link {
    inline-size: 100%;
  }

  .wp-section-heading {
    align-items: start;
    flex-direction: column;
  }
}

.wp-site-header .wp-nav__link { color: #ffffff; }
.wp-site-header .wp-nav__link:hover,
.wp-site-header .wp-nav__link[aria-current="page"] { background: #47317e; }
.wp-site-header :focus-visible { outline-color: #c8ff3d; }
.wp-gallery { min-width: 0; width: 100%; }
.wp-workspace { padding-left: 16rem; }
.wp-workspace .wp-site-header {
  align-items: stretch;
  bottom: 0;
  flex-direction: column;
  justify-content: start;
  left: 0;
  overflow-y: auto;
  padding: 1.25rem;
  position: fixed;
  width: 16rem;
}
.wp-workspace .wp-nav__list { flex-direction: column; }
.wp-workspace .wp-nav__link { width: 100%; }
.wp-workspace .wp-site-header li { color: #ffffff; overflow-wrap: anywhere; }
.wp-workspace .wp-gallery { padding-inline: clamp(1rem, 3vw, 3rem); }
@media (max-width: 60rem) {
  .wp-workspace { padding-left: 0; }
  .wp-workspace .wp-site-header { position: static; width: 100%; overflow: visible; }
  .wp-workspace .wp-nav__list { flex-direction: row; flex-wrap: wrap; gap: .35rem; padding-bottom: .3rem; }
  .wp-workspace .wp-nav__link { padding: .65rem; white-space: normal; }
  .wp-workspace .wp-site-header { gap: .5rem; padding: .75rem 1rem; }
  .wp-workspace .wp-nav { min-width: 0; max-width: 100%; }
}
@media print {
  .wp-workspace { padding-left: 0; }
  .wp-site-header, .wp-skip-link { display: none; }
  .wp-gallery { max-width: none; padding: 0; }
  .wp-gallery-section { box-shadow: none; break-inside: avoid; }
  .wp-table-wrap, .wp-table-region { overflow: visible; }
}
/* Account forms stay readable on wide displays and retain native SSR actions. */
.wp-account .wp-gallery { max-inline-size: 56rem; }
.wp-account .wp-gallery > form {
  background: var(--wp-color-surface);
  border: 1px solid var(--wp-color-border);
  border-radius: var(--wp-radius-lg);
  padding: clamp(1rem, 3vw, 2rem);
}
.wp-account form { display: grid; gap: 1.25rem; }
.wp-account form + form { margin-block-start: 1rem; }
.wp-account form > .wp-button { justify-self: start; }
.wp-account .wp-hero { margin-block-end: 1.5rem; }

.wp-state-grid { padding-inline-start: 0; list-style: none; }
.wp-state-grid > .wp-state { margin-block-start: 0; }

.wp-brand__logo { display: block; inline-size: 13rem; max-inline-size: 100%; block-size: auto; }
.wp-brand__logo--dark { display: none; }
.wp-site-header .wp-brand__logo--light { display: none; }
.wp-site-header .wp-brand__logo--dark { display: block; }

/* Dense workspace shell and dashboard, aligned with the approved v7 reference. */
.wp-workspace { background: #eeeaf6; padding-left: 14rem; }
.wp-workspace .wp-site-header {
  gap: 1.25rem;
  padding: 1.15rem 1rem;
  width: 14rem;
}
.wp-workspace .wp-brand { padding: .25rem .5rem; }
.wp-workspace .wp-brand__logo { inline-size: 11.5rem; }
.wp-workspace .wp-nav { display: grid; gap: .25rem; }
.wp-workspace .wp-nav__group + .wp-nav__group {
  border-top: 1px solid rgb(201 193 219 / 28%);
  margin-top: .45rem;
  padding-top: .35rem;
}
.wp-workspace .wp-nav__label {
  color: #c9c1db;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 1rem .65rem .2rem;
  text-transform: uppercase;
}
.wp-workspace .wp-nav__context {
  color: #fff;
  font-size: .8125rem;
  font-weight: 750;
  margin: 0 .65rem .35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wp-workspace .wp-nav__list { gap: .2rem; }
.wp-workspace .wp-nav__link { border-radius: .4rem; padding: .55rem .65rem; }
.wp-workspace .wp-nav__link--sign-out { color: #ffe2e2; }
.wp-workspace .wp-nav__link[aria-current="page"] {
  background: rgb(200 255 61 / 16%);
  box-shadow: inset .2rem 0 #c8ff3d;
  color: #fff;
  text-decoration: none;
}
.wp-workspace .wp-gallery {
  margin-inline: 0;
  max-inline-size: none;
  padding-inline: 2rem;
}
.wp-dashboard { padding-block-end: 2rem; }
.wp-dashboard__hero {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding-block: 1.75rem 1.5rem;
}
.wp-dashboard__hero h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-block: .35rem; }
.wp-dashboard__hero .wp-lead { font-size: 1rem; margin: 0; }
.wp-attention,
.wp-dashboard__projects {
  background: #fff;
  border: 1px solid #e0dbee;
  border-radius: .65rem;
  box-shadow: 0 .15rem .6rem rgb(45 27 105 / 6%);
}
.wp-attention { margin-block-end: 1.75rem; padding: 0; }
.wp-dashboard__heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.wp-attention > .wp-dashboard__heading {
  border-bottom: 1px solid #e0dbee;
  padding: .875rem 1.25rem .75rem;
}
.wp-dashboard__heading h2 { font-size: 1.125rem; margin: .15rem 0 0; }
.wp-attention__list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.wp-attention__list li {
  align-items: center;
  border-top: 1px solid #eeeaf6;
  display: grid;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: .875rem 1.25rem;
}
.wp-attention__mark { background: #b3293b; border-radius: 50%; block-size: .6rem; inline-size: .6rem; }
.wp-attention__list strong,
.wp-attention__list small,
.wp-attention__list span span { display: block; }
.wp-attention__list small,
.wp-attention__list span span,
.wp-dashboard__quiet { color: var(--wp-color-muted); font-size: .875rem; }
.wp-dashboard__quiet { margin: 0; padding: .875rem 1.25rem; }
.wp-kpi-grid {
  display: grid;
  gap: .875rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 1.75rem;
}
.wp-kpi {
  background: #fff;
  border: 1px solid #e0dbee;
  border-radius: .65rem;
  display: grid;
  gap: .35rem;
  padding: 1.125rem 1.375rem;
}
.wp-kpi > span { color: #4d4a6a; font-size: .8125rem; font-weight: 700; }
.wp-kpi strong { color: #2d1b69; font-size: 1.75rem; line-height: 1.2; }
.wp-kpi small { color: #706d8a; }
.wp-dashboard__stale { margin-block: 0 1.75rem; }
.wp-dashboard__projects { margin-block-end: 1.75rem; padding: 0; }
.wp-dashboard__projects > .wp-dashboard__heading { padding: .875rem 1.25rem .75rem; }
.wp-dashboard__filters { position: relative; }
.wp-dashboard__filters > summary {
  border: 1px solid var(--wp-color-brand);
  border-radius: var(--wp-radius-sm);
  color: var(--wp-color-brand);
  cursor: pointer;
  font-weight: 700;
  min-block-size: 2.75rem;
  padding: .65rem .85rem;
}
.wp-dashboard__filter-form {
  background: #fff;
  border: 1px solid #e0dbee;
  border-radius: .65rem;
  box-shadow: var(--wp-shadow-md);
  display: grid;
  gap: .75rem;
  inset-inline-end: 0;
  min-inline-size: min(34rem, calc(100vw - 2rem));
  padding: 1rem;
  position: absolute;
  top: calc(100% + .4rem);
  z-index: 4;
}
.wp-dashboard__projects .wp-table-wrap { margin-block-start: 0; }
.wp-dashboard__projects caption { padding: .65rem 1rem; }
.wp-dashboard__projects th { padding: .5625rem 1rem; }
.wp-dashboard__projects td { padding: .75rem 1rem; }
.wp-project-item th small { color: var(--wp-color-muted); display: block; font-weight: 400; padding-inline: .25rem; }
.wp-project-item--stale { background: var(--wp-color-warning-bg); }
.wp-dashboard__create { display: none; padding: 1.25rem; }
.wp-dashboard__create:target { display: block; }
.wp-dashboard__create .wp-section-heading { justify-content: space-between; margin-block-end: 1.25rem; }

@media (max-width: 64rem) {
  .wp-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 60rem) {
  .wp-workspace { padding-left: 0; }
  .wp-workspace .wp-site-header { gap: .5rem; padding: .65rem 1rem; width: 100%; }
  .wp-workspace .wp-brand__logo { inline-size: 10rem; }
  .wp-workspace .wp-gallery { padding-inline: 1rem; }
  .wp-workspace .wp-nav { display: flex; gap: .75rem; overflow-x: auto; padding-block-end: .35rem; }
  .wp-workspace .wp-nav__group { flex: 0 0 auto; }
  .wp-workspace .wp-nav__group + .wp-nav__group { border-left: 1px solid rgb(201 193 219 / 28%); border-top: 0; margin: 0; padding: 0 0 0 .75rem; }
  .wp-workspace .wp-nav__label { margin: .15rem .65rem .25rem; }
  .wp-workspace .wp-nav__context { max-inline-size: 12rem; }
  .wp-workspace .wp-nav__list { flex-wrap: nowrap; }
  .wp-workspace .wp-nav__link { white-space: nowrap; }
  .wp-dashboard__hero { padding-block: 1.25rem 1rem; }
}

@media (max-width: 42rem) {
  .wp-dashboard__hero { align-items: stretch; flex-direction: column; }
  .wp-dashboard__hero .wp-button { align-self: start; }
  .wp-dashboard__heading { align-items: start; }
  .wp-attention__list li { grid-template-columns: auto minmax(0, 1fr); }
  .wp-attention__list li > .wp-link { grid-column: 2; justify-self: start; }
  .wp-dashboard__filter-form { inset-inline-end: auto; inset-inline-start: 0; }
  .wp-dashboard__projects .wp-table-wrap { overflow: visible; }
  .wp-dashboard__projects table,
  .wp-dashboard__projects tbody,
  .wp-dashboard__projects tr,
  .wp-dashboard__projects th,
  .wp-dashboard__projects td { display: block; min-inline-size: 0; width: 100%; }
  .wp-dashboard__projects thead,
  .wp-dashboard__projects caption { clip: rect(0 0 0 0); clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
  .wp-project-item { border: 1px solid #e0dbee; border-radius: .5rem; margin-block: .75rem; padding: .6rem; }
  .wp-dashboard__projects .wp-project-item :is(th, td) { border: 0; padding: .45rem; }
  .wp-project-item td { display: grid; gap: .75rem; grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr); }
  .wp-project-item td::before { color: var(--wp-color-muted); content: attr(data-label); font-size: .8125rem; font-weight: 700; }
}

@media (max-width: 24rem) {
  .wp-kpi-grid { grid-template-columns: 1fr; }
  .wp-dashboard__heading { display: grid; }
  .wp-dashboard__filter-form { min-inline-size: calc(100vw - 2rem); }
}

.wp-qr { margin-inline: 0; }
.wp-qr svg { display: block; max-inline-size: 100%; block-size: auto; }

.wp-site-header .wp-nav__link[aria-current='location'] { box-shadow: inset 3px 0 #c8ff3d; }

.wp-report-brand { display: grid; gap: 1rem; }
.wp-report-brand__accent { block-size: .5rem; inline-size: 100%; }
.wp-report-brand__logo { block-size: auto; max-block-size: 5rem; max-inline-size: min(20rem, 100%); object-fit: contain; }
.wp-report-footer { border-block-start: 1px solid var(--wp-color-border); color: var(--wp-color-muted); margin-block-start: 2rem; padding-block: 1rem; }