/* ==========================================================================
   UA Living Spec Book — dashboard + spec-book section styles (db-*, sb-*)
   Consumes tokens from css/tokens.css only. No brand hex in this file.
   ========================================================================== */

/* ======================================================================
   Portal header (sticky, on ink)
   ====================================================================== */
.ua-portal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ua-s4);
  height: var(--ua-header-h);
  padding-inline: clamp(var(--ua-s4), 3vw, var(--ua-s6));
  background: var(--ua-ink);
  color: var(--ua-text-on-ink);
}

.ua-portal-header > * {
  display: flex;
  align-items: center;
  gap: var(--ua-s3);
  min-width: 0;
}

.ua-portal-header a {
  color: inherit;
  text-decoration: none;
}

.ua-portal-header img {
  display: block;
  height: 22px;
  width: auto;
}

.ua-portal-header__label {
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: var(--ua-tracking-caps);
  color: var(--ua-text-on-ink-muted);
  border-left: 1px solid var(--ua-line-on-ink);
  padding-left: var(--ua-s3);
  white-space: nowrap;
}

/* Buttons and atoms recolored for the ink surface */
.ua-portal-header .ua-btn {
  color: var(--ua-text-on-ink);
  border-color: var(--ua-line-on-ink);
  background: transparent;
}

.ua-portal-header .ua-btn:hover {
  background: var(--ua-text-on-ink);
  color: var(--ua-ink);
}

.ua-portal-header .ua-avatar {
  background: transparent;
  border: 1px solid var(--ua-line-on-ink);
  color: var(--ua-text-on-ink);
}

.ua-portal-header :focus-visible {
  outline: 2px solid var(--ua-text-on-ink);
  outline-offset: 2px;
}

/* Count badge (pins) — light-on-dark in the header, dark-on-light elsewhere */
.ua-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.3em;
  border-radius: var(--ua-radius-pill);
  background: var(--ua-ink);
  color: var(--ua-text-on-ink);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.ua-count:empty {
  display: none;
}

.ua-portal-header .ua-count {
  background: var(--ua-text-on-ink);
  color: var(--ua-ink);
}

/* User menu (details/summary dropdown) */
.ua-usermenu {
  position: relative;
}

.ua-usermenu summary {
  display: flex;
  align-items: center;
  gap: var(--ua-s2);
  padding: var(--ua-s1) var(--ua-s2);
  border-radius: var(--ua-radius-pill);
  cursor: pointer;
  list-style: none;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-on-ink);
  white-space: nowrap;
  user-select: none;
}

.ua-usermenu summary::-webkit-details-marker {
  display: none;
}

.ua-usermenu summary:hover {
  background: var(--ua-line-on-ink);
}

.ua-usermenu summary .ua-icon svg {
  transition: transform var(--ua-fast) var(--ua-ease);
}

.ua-usermenu[open] summary .ua-icon:last-child svg {
  transform: rotate(180deg);
}

/* Dropdown panel — tolerant of the wrapper's tag/class */
.ua-usermenu > :not(summary) {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 130;
  min-width: 200px;
  padding: var(--ua-s2);
  background: var(--ua-bg-raised);
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius-lg);
  box-shadow: var(--ua-shadow-pop);
  color: var(--ua-text);
}

.ua-usermenu a,
.ua-usermenu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--ua-s2);
  padding: var(--ua-s2) var(--ua-s3);
  border: 0;
  border-radius: var(--ua-radius);
  background: none;
  color: var(--ua-text);
  font: inherit;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ua-usermenu a:hover,
.ua-usermenu button:hover {
  background: var(--ua-bg);
}

/* Reading-progress bar pinned to the header's bottom edge */
.ua-progressbar {
  position: fixed;
  top: calc(var(--ua-header-h) - 2px);
  left: 0;
  z-index: 101;
  height: 2px;
  width: 0;
  background: var(--ua-ink);
  transition: width 80ms linear;
  pointer-events: none;
}

/* ======================================================================
   Shared progress track (dashboard cards + spec-book hero)
   ====================================================================== */
.ua-progress {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: var(--ua-radius-pill);
  background: var(--ua-line-soft);
  overflow: hidden;
}

.ua-progress > * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  border-radius: inherit;
  background: var(--ua-ink);
  opacity: 0.72;
}

/* ======================================================================
   Guard screen ("not available") — calm, centered
   ====================================================================== */
#app > .ua-empty {
  max-width: 480px;
  margin: 18vh auto var(--ua-s9);
}

/* ======================================================================
   Dashboard
   ====================================================================== */
.db-hero {
  padding: clamp(var(--ua-s7), 7vh, var(--ua-s8)) 0 var(--ua-s6);
}

.db-hero h1 {
  margin: var(--ua-s2) 0 var(--ua-s3);
  font-family: var(--ua-font-display);
  font-size: var(--ua-fs-h1);
  font-weight: 400;
  letter-spacing: var(--ua-tracking-display);
  line-height: 1.08;
  color: var(--ua-text-strong);
}

.db-hero p {
  color: var(--ua-text-muted);
  font-weight: 200;
}

/* --- Project cards --- */
.db-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ua-s5);
  margin-top: var(--ua-s5);
}

.db-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ua-bg-card);
  border: 1px solid var(--ua-line-soft);
  border-radius: var(--ua-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--ua-slow) var(--ua-ease), box-shadow var(--ua-slow) var(--ua-ease);
}

.db-project-card:hover,
.db-project-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--ua-shadow-soft);
}

.db-project-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ua-line-soft);
}

.db-project-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ua-slow) var(--ua-ease);
}

.db-project-card:hover img,
.db-project-card:focus-within img {
  transform: scale(1.03);
}

.db-project-card .ua-badge {
  position: absolute;
  top: var(--ua-s4);
  left: var(--ua-s4);
  z-index: 2;
}

.db-project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ua-s2);
  flex: 1;
  padding: var(--ua-s5);
}

.db-project-card h2 {
  margin: 0;
  font-family: var(--ua-font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ua-text-strong);
}

.db-project-card h2 a {
  color: inherit;
  text-decoration: none;
}

.db-project-card p {
  margin: 0;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
}

.db-project-card__meta {
  font-size: var(--ua-fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ua-text-faint);
}

.db-project-card__progress {
  display: flex;
  align-items: center;
  gap: var(--ua-s3);
  margin-top: var(--ua-s2);
  font-size: var(--ua-fs-tiny);
  color: var(--ua-text-muted);
}

.db-project-card footer,
.db-project-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ua-s3);
  margin-top: auto;
  padding-top: var(--ua-s4);
}

/* --- Updates feed --- */
.db-updates {
  margin-top: var(--ua-s8);
}

.db-updates h2,
.db-contact h2 {
  margin: 0 0 var(--ua-s4);
  font-family: var(--ua-font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ua-text-strong);
}

.db-updates a {
  color: inherit;
  text-decoration: none;
}

.db-update,
.db-updates li {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: var(--ua-s4);
  padding-block: var(--ua-s4);
  border-top: 1px solid var(--ua-line-soft);
  align-items: baseline;
}

.db-update:hover {
  background: var(--ua-bg-card);
}

.db-update time,
.db-update__date {
  font-size: var(--ua-fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ua-text-faint);
  white-space: nowrap;
}

.db-update strong {
  display: block;
  font-weight: 400;
  font-size: var(--ua-fs-small);
  color: var(--ua-text-strong);
  margin-bottom: var(--ua-s1);
}

/* --- Design team contact --- */
.db-contact {
  margin-top: var(--ua-s8);
}

.db-contact .ua-card {
  padding: var(--ua-s6);
}

.db-contact li,
.db-contact__row {
  display: flex;
  align-items: center;
  gap: var(--ua-s3);
  padding-block: var(--ua-s3);
  list-style: none;
}

.db-contact li > .ua-btn,
.db-contact__row > .ua-btn {
  margin-left: auto;
}

.db-contact strong {
  display: block;
  font-weight: 400;
  color: var(--ua-text-strong);
}

.db-contact .u-muted,
.db-contact__role {
  font-size: var(--ua-fs-small);
}

/* --- Dashboard footer --- */
.db-footer {
  margin-top: var(--ua-s9);
  padding: var(--ua-s6) 0;
  border-top: 1px solid var(--ua-line-soft);
  text-align: center;
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  letter-spacing: 0.05em;
  color: var(--ua-text-muted);
}

/* ======================================================================
   Spec book — layout shell
   ====================================================================== */
.sb-layout {
  display: grid;
  grid-template-columns: var(--ua-toc-width) minmax(0, 1fr);
  gap: clamp(var(--ua-s5), 4vw, var(--ua-s8));
  align-items: start;
}

.sb-content {
  min-width: 0;
  padding-bottom: var(--ua-s9);
}

/* ======================================================================
   Spec book — hero
   ====================================================================== */
.sb-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 44vh;
  overflow: hidden;
  background: var(--ua-ink-surface);
  color: var(--ua-text-on-ink);
}

.sb-hero > img,
.sb-hero > .ua-img-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ua-overlay-hero);
  pointer-events: none;
}

.sb-hero__content,
.sb-hero > :not(img):not(.ua-img-fallback) {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ua-s3);
  width: 100%;
  padding: clamp(var(--ua-s5), 4vw, var(--ua-s7));
}

.sb-hero .ua-eyebrow {
  color: var(--ua-text-on-ink-muted);
}

.sb-hero h1 {
  margin: 0;
  font-family: var(--ua-font-display);
  font-size: var(--ua-fs-hero);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ua-tracking-display);
  line-height: 1.02;
  color: var(--ua-text-on-ink);
}

.sb-hero p {
  margin: 0;
  max-width: 56ch;
  font-weight: 200;
  color: var(--ua-text-on-ink);
  opacity: 0.85;
}

.sb-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ua-s2);
}

.sb-hero .ua-chip {
  border-color: var(--ua-line-on-ink);
  background: transparent;
  color: var(--ua-text-on-ink);
}

.sb-hero .ua-progress {
  width: min(320px, 60%);
  flex: 0 0 auto;
  margin-top: var(--ua-s2);
  background: var(--ua-line-on-ink);
}

.sb-hero .ua-progress > * {
  background: var(--ua-text-on-ink);
  opacity: 1;
}

.sb-hero :focus-visible {
  outline: 2px solid var(--ua-text-on-ink);
  outline-offset: 2px;
}

/* ======================================================================
   Spec book — "what's new" banner
   ====================================================================== */
.sb-whatsnew {
  position: relative;
  display: grid;
  gap: var(--ua-s3);
  margin: var(--ua-s6) 0 0;
  padding: var(--ua-s5) var(--ua-s6);
  background: var(--ua-ink);
  border-radius: var(--ua-radius-lg);
  color: var(--ua-text-on-ink);
  font-weight: 200;
}

.sb-whatsnew .ua-eyebrow,
.sb-whatsnew h2,
.sb-whatsnew h3 {
  margin: 0;
  font-family: var(--ua-font-body);
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: var(--ua-tracking-caps);
  color: var(--ua-text-on-ink-muted);
}

.sb-whatsnew a {
  color: var(--ua-text-on-ink);
  text-decoration: underline;
  text-decoration-color: var(--ua-line-on-ink);
  text-underline-offset: 3px;
}

.sb-whatsnew a:hover {
  text-decoration-color: var(--ua-text-on-ink);
}

.sb-whatsnew time {
  font-size: var(--ua-fs-tiny);
  color: var(--ua-text-on-ink-muted);
  margin-right: var(--ua-s2);
}

.sb-whatsnew button,
.sb-whatsnew .ua-btn {
  position: absolute;
  top: var(--ua-s3);
  right: var(--ua-s3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ua-s2);
  background: transparent;
  border: 1px solid var(--ua-line-on-ink);
  border-radius: var(--ua-radius-pill);
  color: var(--ua-text-on-ink);
  cursor: pointer;
}

.sb-whatsnew button:hover,
.sb-whatsnew .ua-btn:hover {
  background: var(--ua-text-on-ink);
  color: var(--ua-ink);
}

.sb-whatsnew :focus-visible {
  outline: 2px solid var(--ua-text-on-ink);
  outline-offset: 2px;
}

/* ======================================================================
   Spec book — toolbar (sticky under header)
   ====================================================================== */
.sb-toolbar {
  position: sticky;
  top: var(--ua-header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ua-s4);
  padding-block: var(--ua-s3);
  background: var(--ua-bg);
  border-bottom: 1px solid var(--ua-line-soft);
}

.sb-toolbar > * {
  display: flex;
  align-items: center;
  gap: var(--ua-s2);
  min-width: 0;
}

.sb-toolbar a {
  color: var(--ua-text-muted);
  text-decoration: none;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  white-space: nowrap;
}

.sb-toolbar a:hover {
  color: var(--ua-text-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sb-toolbar__crumbs {
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  /* The sticky toolbar carries Search/Pins on small screens — the header
     keeps only the identity cluster. */
  .ua-portal-header .ua-btn--small {
    display: none;
  }

  .sb-maint summary {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    justify-items: start;
  }

  .sb-maint .ua-badge {
    white-space: normal;
    text-align: left;
  }

  .sb-budget-row__amounts {
    flex-wrap: wrap;
    white-space: normal;
    justify-content: flex-end;
  }

  .sb-budget-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem var(--ua-s3);
  }

  .sb-toolbar {
    flex-wrap: wrap;
  }

  .sb-toolbar > * {
    flex-wrap: wrap;
  }

  .sb-toolbar .ua-kbd {
    display: none;
  }

  .sb-toolbar .ua-btn--small {
    min-height: 1.9rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ======================================================================
   Spec book — section anatomy
   ====================================================================== */
.sb-section {
  margin-top: var(--ua-s8);
  padding-top: var(--ua-s8);
  border-top: 1px solid var(--ua-line-soft);
  scroll-margin-top: calc(var(--ua-header-h) + 72px);
}

.sb-section:first-of-type {
  margin-top: 0;
  border-top: 0;
  padding-top: var(--ua-s7);
}

.sb-section__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ua-s4) var(--ua-s5);
  align-items: start;
}

.sb-section__num {
  font-family: var(--ua-font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--ua-text-faint);
  min-width: 2ch;
}

.sb-section__title {
  margin: 0;
  font-family: var(--ua-font-display);
  font-size: var(--ua-fs-h2);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.12;
  color: var(--ua-text-strong);
}

.sb-section__meta {
  margin: var(--ua-s2) 0 0;
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ua-text-muted);
}

.sb-section__actions {
  display: flex;
  align-items: center;
  gap: var(--ua-s2);
}

.sb-section__intro {
  margin: var(--ua-s5) 0 0;
  max-width: 62ch;
  font-size: 1.05rem;
  font-weight: 200;
  line-height: 1.7;
  color: var(--ua-text-muted);
}

.sb-section__body {
  margin-top: var(--ua-s6);
}

.sb-section__body > h3,
.sb-section__body h3 {
  margin: var(--ua-s6) 0 var(--ua-s4);
  font-family: var(--ua-font-display);
  font-size: var(--ua-fs-h3);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ua-text-strong);
}

.sb-section__body > h3:first-child {
  margin-top: 0;
}

/* Section flash (arriving from search / what's-new) */
@keyframes sb-flash {
  0%, 55% { background-color: var(--ua-bg-card); }
  100% { background-color: transparent; }
}

.sb-section.is-flash {
  animation: sb-flash 2s var(--ua-ease) both;
  border-radius: var(--ua-radius-lg);
}

/* ======================================================================
   Overview — facts + narrative
   ====================================================================== */
.sb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--ua-s4);
  margin-bottom: var(--ua-s6);
}

.sb-narrative p {
  max-width: 68ch;
  margin: 0 0 var(--ua-s4);
  font-weight: 200;
  line-height: 1.75;
}

.sb-narrative p:last-child {
  margin-bottom: 0;
}

/* ======================================================================
   Brief — goals + priorities
   ====================================================================== */
.sb-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ua-s5);
  margin-bottom: var(--ua-s6);
}

.sb-goals .ua-card {
  padding: var(--ua-s5) var(--ua-s6);
}

.sb-goals ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-goals li {
  position: relative;
  padding: var(--ua-s2) 0 var(--ua-s2) 1.4rem;
  font-weight: 200;
  line-height: 1.6;
}

.sb-goals li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ua-text-faint);
}

.sb-priorities {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-priorities > * {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--ua-s4);
  padding-block: var(--ua-s4);
  border-top: 1px solid var(--ua-line-soft);
  align-items: baseline;
}

.sb-priorities strong,
.sb-priorities dt {
  font-weight: 400;
  font-size: var(--ua-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ua-text-strong);
}

.sb-priorities dd {
  margin: 0;
}

.sb-priorities p,
.sb-priorities span {
  margin: 0;
  font-weight: 200;
  color: var(--ua-text-muted);
  line-height: 1.6;
}

/* ======================================================================
   Concept — keywords + moodboard
   ====================================================================== */
.sb-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ua-s2);
  margin-bottom: var(--ua-s6);
}

.sb-keywords .ua-chip {
  cursor: default;
}

.sb-moodboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 170px;
  grid-auto-flow: dense;
  gap: var(--ua-s3);
}

.sb-moodboard__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ua-radius);
  background: var(--ua-line-soft);
  cursor: zoom-in;
}

.sb-moodboard__item:nth-child(6n + 1),
.sb-moodboard__item:nth-child(6n + 5) {
  grid-row: span 2;
}

.sb-moodboard__item img,
.sb-moodboard__item .ua-img-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-moodboard__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--ua-s5) var(--ua-s4) var(--ua-s3);
  background: linear-gradient(180deg, transparent 0%, var(--ua-overlay-dark) 100%);
  color: var(--ua-text-on-ink);
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  letter-spacing: 0.04em;
}

/* ======================================================================
   Scope — included / excluded + rooms
   ====================================================================== */
.sb-scope-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ua-s5);
  margin-bottom: var(--ua-s6);
}

.sb-scope-cols .ua-card {
  padding: var(--ua-s5) var(--ua-s6);
}

.sb-scope-cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-scope-cols li {
  position: relative;
  padding: var(--ua-s2) 0 var(--ua-s2) 1.4rem;
  font-weight: 200;
  line-height: 1.6;
}

.sb-scope-cols li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ua-text-faint);
}

.sb-scope-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ua-s4);
}

.sb-scope-rooms .ua-card {
  padding: var(--ua-s5);
}

.sb-scope-rooms h4,
.sb-scope-rooms strong {
  display: block;
  margin: 0 0 var(--ua-s2);
  font-family: var(--ua-font-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ua-text-strong);
}

.sb-scope-rooms p {
  margin: 0;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
  line-height: 1.6;
}

/* ======================================================================
   Palette — swatch grids
   ====================================================================== */
.sb-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--ua-s4);
  margin-bottom: var(--ua-s6);
}

.sb-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--ua-s1);
  background: var(--ua-bg-card);
  border: 1px solid var(--ua-line-soft);
  border-radius: var(--ua-radius-lg);
  overflow: hidden;
  padding-bottom: var(--ua-s4);
  font-size: var(--ua-fs-small);
  font-weight: 200;
}

.sb-swatch__chip {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--ua-radius-lg) var(--ua-radius-lg) 0 0;
  border-bottom: 1px solid var(--ua-line-soft);
  margin-bottom: var(--ua-s2);
}

.sb-swatch > :not(.sb-swatch__chip) {
  padding-inline: var(--ua-s4);
}

.sb-swatch strong {
  font-weight: 400;
  color: var(--ua-text-strong);
}

.sb-swatch .u-muted {
  font-size: var(--ua-fs-tiny);
}

.sb-swatch .ua-badge {
  align-self: flex-start;
  margin: var(--ua-s2) var(--ua-s4) 0;
}

/* ======================================================================
   Schedules — filter toolbar + table
   ====================================================================== */
.sb-sched-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ua-s2) var(--ua-s4);
  margin-bottom: var(--ua-s4);
}

.sb-sched-toolbar > * {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ua-s1);
}

.sb-sched-toolbar > :last-child {
  margin-left: auto;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
  white-space: nowrap;
}

.sb-sched {
  width: 100%;
}

.sb-sched tr[hidden] {
  display: none;
}

.sb-sched td {
  vertical-align: middle;
}

.sb-sched__thumb {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--ua-radius);
  cursor: zoom-in;
  background: var(--ua-line-soft);
}

button .sb-sched__thumb {
  cursor: zoom-in;
}

/* The thumb is a <button> wrapping the image — size the img to fill it. */
.sb-sched__thumb img,
.sb-sched__thumb-img,
.sb-sched__thumb .ua-img-fallback {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--ua-radius);
  display: block;
}

/* Lightbox trigger buttons fill their masonry tiles so the imgs'
   percentage heights (and object-fit cover crops) resolve. */
.sb-photo__trigger,
.sb-moodboard__trigger {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.sb-sched strong {
  font-weight: 400;
  color: var(--ua-text-strong);
}

/* ======================================================================
   Gallery — comparisons + photo grid
   ====================================================================== */
.sb-compare {
  display: grid;
  gap: var(--ua-s6);
  margin-bottom: var(--ua-s7);
}

.sb-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
  gap: var(--ua-s3);
}

.sb-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ua-radius);
  background: var(--ua-line-soft);
  cursor: zoom-in;
}

.sb-photo:nth-child(8n + 1),
.sb-photo:nth-child(8n + 6) {
  grid-row: span 2;
}

.sb-photo img,
.sb-photo .ua-img-fallback {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--ua-s5) var(--ua-s4) var(--ua-s3);
  background: linear-gradient(180deg, transparent 0%, var(--ua-overlay-dark) 100%);
  color: var(--ua-text-on-ink);
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  letter-spacing: 0.04em;
}

/* ======================================================================
   Floor plans
   ====================================================================== */
.sb-plans {
  display: grid;
  gap: var(--ua-s6);
}

/* ======================================================================
   Timeline — vertical milestones
   ====================================================================== */
.sb-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--ua-s6);
  list-style: none;
}

.sb-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 1px;
  background: var(--ua-line-strong);
}

.sb-milestone {
  position: relative;
  padding-bottom: var(--ua-s6);
}

.sb-milestone:last-child {
  padding-bottom: 0;
}

.sb-milestone__dot {
  position: absolute;
  top: 5px;
  left: calc(-1 * var(--ua-s6) + 1px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ua-bg);
  border: 1px solid var(--ua-line-strong);
}

.sb-milestone.is-done .sb-milestone__dot {
  background: var(--ua-ink);
  border-color: var(--ua-ink);
}

.sb-milestone.is-current .sb-milestone__dot {
  background: var(--ua-bg);
  border: 2px solid var(--ua-status-pending);
  box-shadow: 0 0 0 3px var(--ua-bg);
}

.sb-milestone.is-upcoming .sb-milestone__dot {
  border-color: var(--ua-line-strong);
}

.sb-milestone time,
.sb-milestone__date {
  display: block;
  margin-bottom: var(--ua-s1);
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ua-text-muted);
}

.sb-milestone h3,
.sb-milestone strong {
  display: block;
  margin: 0 0 var(--ua-s1);
  font-family: var(--ua-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ua-text-strong);
}

.sb-milestone p {
  margin: 0;
  max-width: 58ch;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
  line-height: 1.6;
}

.sb-milestone.is-upcoming h3,
.sb-milestone.is-upcoming strong {
  color: var(--ua-text-muted);
}

/* ======================================================================
   Budget — summary stats + bars
   ====================================================================== */
.sb-budget-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ua-s4);
  margin-bottom: var(--ua-s6);
}

.sb-budget-rows {
  border-top: 1px solid var(--ua-line-soft);
}

.sb-budget-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ua-s2) var(--ua-s4);
  align-items: baseline;
  padding-block: var(--ua-s4);
  border-bottom: 1px solid var(--ua-line-soft);
}

.sb-budget-row strong {
  font-weight: 400;
  color: var(--ua-text-strong);
}

.sb-budget-row .u-muted,
.sb-budget-row span {
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
  white-space: nowrap;
}

.sb-bar {
  grid-column: 1 / -1;
  position: relative;
  height: 6px;
}

.sb-bar__alloc {
  position: absolute;
  inset: 0;
  background: var(--ua-line-soft);
  border-radius: var(--ua-radius-pill);
}

.sb-bar__actual {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  background: var(--ua-ink);
  opacity: 0.7;
  border-radius: var(--ua-radius-pill);
}

.sb-bar__actual.is-over,
.is-over .sb-bar__actual {
  background: var(--ua-status-danger);
  opacity: 0.85;
}

.sb-budget__disclaimer {
  margin-top: var(--ua-s5);
  max-width: 60ch;
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  color: var(--ua-text-muted);
  line-height: 1.6;
}

/* ======================================================================
   Vendors
   ====================================================================== */
.sb-vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--ua-s4);
}

.sb-vendor {
  display: flex;
  flex-direction: column;
  gap: var(--ua-s2);
  padding: var(--ua-s5);
}

.sb-vendor h3 {
  margin: 0;
  font-family: var(--ua-font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ua-text-strong);
}

.sb-vendor a {
  display: inline-flex;
  align-items: center;
  gap: var(--ua-s2);
  color: var(--ua-text);
  font-size: var(--ua-fs-small);
  font-weight: 200;
  text-decoration: none;
  width: fit-content;
}

.sb-vendor a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sb-vendor a .ua-icon {
  color: var(--ua-text-muted);
}

.sb-vendor p {
  margin: var(--ua-s1) 0 0;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
  line-height: 1.6;
}

/* ======================================================================
   Maintenance — accordions
   ====================================================================== */
.sb-maint {
  display: grid;
  gap: var(--ua-s2);
}

.sb-maint ol {
  margin: var(--ua-s3) 0;
  padding-left: 1.3rem;
  font-weight: 200;
  line-height: 1.7;
}

.sb-maint ol li {
  padding-block: var(--ua-s1);
}

.sb-maint ul {
  margin: var(--ua-s3) 0;
  padding: 0;
  list-style: none;
}

.sb-maint ul li {
  display: flex;
  align-items: baseline;
  gap: var(--ua-s2);
  padding-block: var(--ua-s1);
  font-size: var(--ua-fs-small);
  font-weight: 200;
  line-height: 1.6;
}

.sb-maint ul li .ua-icon {
  flex: 0 0 auto;
  color: var(--ua-status-danger);
  transform: translateY(2px);
}

.sb-maint h4 {
  margin: var(--ua-s4) 0 var(--ua-s1);
  font-size: var(--ua-fs-tiny);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ua-tracking-caps);
  color: var(--ua-text-muted);
}

/* ======================================================================
   Warranties — table
   ====================================================================== */
.sb-warranty {
  width: 100%;
}

.sb-warranty .ua-icon {
  color: var(--ua-status-approved);
}

.sb-warranty strong {
  font-weight: 400;
  color: var(--ua-text-strong);
}

/* ======================================================================
   Documents — file rows
   ====================================================================== */
.sb-doc-list {
  border-top: 1px solid var(--ua-line-soft);
}

.sb-doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--ua-s4);
  align-items: center;
  padding-block: var(--ua-s4);
  border-bottom: 1px solid var(--ua-line-soft);
}

.sb-doc > .ua-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ua-line);
  border-radius: 50%;
  color: var(--ua-text-muted);
}

.sb-doc strong {
  display: block;
  font-weight: 400;
  color: var(--ua-text-strong);
}

.sb-doc p {
  margin: var(--ua-s1) 0 0;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
}

.sb-doc .u-muted,
.sb-doc__meta {
  font-size: var(--ua-fs-tiny);
  color: var(--ua-text-muted);
  white-space: nowrap;
}

/* ======================================================================
   Revisions — feed
   ====================================================================== */
.sb-rev-feed {
  border-top: 1px solid var(--ua-line-soft);
}

.sb-rev {
  display: grid;
  gap: var(--ua-s2);
  padding-block: var(--ua-s5);
  border-bottom: 1px solid var(--ua-line-soft);
}

.sb-rev > :first-child,
.sb-rev header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ua-s2) var(--ua-s3);
}

.sb-rev .ua-chip {
  cursor: default;
}

.sb-rev time,
.sb-rev .u-muted {
  font-size: var(--ua-fs-small);
  font-weight: 200;
  color: var(--ua-text-muted);
}

.sb-rev ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-rev ul li {
  position: relative;
  padding: var(--ua-s1) 0 var(--ua-s1) 1.4rem;
  font-weight: 200;
  line-height: 1.6;
}

.sb-rev ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ua-text-faint);
}

/* ======================================================================
   Approvals — decision cards
   ====================================================================== */
.sb-approvals {
  display: grid;
  gap: var(--ua-s4);
}

.sb-approval {
  display: grid;
  gap: var(--ua-s3);
  padding: var(--ua-s5) var(--ua-s6);
}

.sb-approval h3 {
  margin: 0;
  font-family: var(--ua-font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ua-text-strong);
}

.sb-approval p {
  margin: 0;
  max-width: 64ch;
  font-weight: 200;
  line-height: 1.6;
}

.sb-approval img,
.sb-approval__thumb {
  display: block;
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--ua-radius);
  background: var(--ua-line-soft);
}

.sb-approval .u-muted {
  font-size: var(--ua-fs-small);
}

.sb-approval .ua-badge {
  justify-self: start;
}

.sb-approval__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ua-s2);
  margin-top: var(--ua-s2);
}

.sb-approval__actions .ua-input {
  flex: 1 1 220px;
  min-width: 0;
}

/* Quiet text button (e.g. "Change decision") */
.sb-approval button:not(.ua-btn) {
  align-self: start;
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ua-text-muted);
  font: inherit;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sb-approval button:not(.ua-btn):hover {
  color: var(--ua-text-strong);
}

/* ======================================================================
   FAQ — accordions
   ====================================================================== */
.sb-faq {
  display: grid;
  gap: var(--ua-s2);
}

.sb-faq p {
  max-width: 65ch;
  margin: 0 0 var(--ua-s3);
  font-weight: 200;
  line-height: 1.7;
}

.sb-faq p:last-child {
  margin-bottom: 0;
}

/* ======================================================================
   Notes — designer letters
   ====================================================================== */
.sb-notes {
  display: grid;
  gap: var(--ua-s5);
  max-width: 740px;
}

.sb-note {
  padding: clamp(var(--ua-s5), 4vw, var(--ua-s7));
  background: var(--ua-bg-card);
  border: 1px solid var(--ua-line-soft);
  border-radius: var(--ua-radius-lg);
}

.sb-note .ua-eyebrow,
.sb-note time {
  display: block;
  margin-bottom: var(--ua-s4);
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: var(--ua-tracking-caps);
  color: var(--ua-text-muted);
}

.sb-note p {
  max-width: 60ch;
  margin: 0 0 var(--ua-s4);
  font-weight: 200;
  line-height: 1.8;
}

.sb-note p:last-of-type {
  margin-bottom: 0;
}

.sb-note__author,
.sb-note__signature,
.sb-note cite,
.sb-note footer {
  display: block;
  margin-top: var(--ua-s5);
  font-family: var(--ua-font-display);
  font-size: 1.35rem;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--ua-text-strong);
}

/* ======================================================================
   Comments footer (per section)
   ====================================================================== */
.sb-comments {
  margin-top: var(--ua-s7);
  padding-top: var(--ua-s5);
  border-top: 1px solid var(--ua-line-soft);
}

.sb-comments h3,
.sb-comments h4 {
  margin: 0 0 var(--ua-s3);
  font-family: var(--ua-font-body);
  font-size: var(--ua-fs-tiny);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ua-tracking-caps);
  color: var(--ua-text-muted);
}

.sb-comment,
.sb-comments li {
  list-style: none;
  padding-block: var(--ua-s3);
  border-bottom: 1px solid var(--ua-line-soft);
}

.sb-comments ul,
.sb-comments ol {
  margin: 0 0 var(--ua-s4);
  padding: 0;
}

.sb-comment strong {
  font-weight: 400;
  font-size: var(--ua-fs-small);
  color: var(--ua-text-strong);
  margin-right: var(--ua-s2);
}

.sb-comment time,
.sb-comment .u-muted {
  font-size: var(--ua-fs-tiny);
  color: var(--ua-text-muted);
}

.sb-comment p {
  margin: var(--ua-s2) 0 0;
  font-weight: 200;
  line-height: 1.6;
  max-width: 64ch;
}

.sb-comments textarea.ua-input,
.sb-comments .ua-input {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  margin-top: var(--ua-s2);
}

.sb-comments .ua-btn {
  margin-top: var(--ua-s3);
}

.sb-comments .u-muted,
.sb-comments small {
  display: block;
  margin-top: var(--ua-s3);
  font-size: var(--ua-fs-tiny);
  color: var(--ua-text-muted);
}

/* ======================================================================
   Pins panel — right slide-over
   ====================================================================== */
@keyframes sb-slide-in {
  from {
    transform: translateX(48px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.sb-pins-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 140;
  display: flex;
  flex-direction: column;
  width: min(400px, 94vw);
  padding: var(--ua-s6) var(--ua-s5) var(--ua-s5);
  background: var(--ua-bg-raised);
  border-left: 1px solid var(--ua-line);
  box-shadow: var(--ua-shadow-pop);
  overflow-y: auto;
  animation: sb-slide-in var(--ua-slow) var(--ua-ease) both;
}

.sb-pins-panel[hidden] {
  display: none;
}

.sb-pins-panel h2,
.sb-pins-panel h3 {
  margin: 0 0 var(--ua-s4);
  font-family: var(--ua-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--ua-text-strong);
  padding-right: var(--ua-s7);
}

.sb-pins-panel ul,
.sb-pins-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-pins-panel li,
.sb-pin {
  display: flex;
  align-items: flex-start;
  gap: var(--ua-s2);
  padding-block: var(--ua-s3);
  border-top: 1px solid var(--ua-line-soft);
}

.sb-pin > :first-child,
.sb-pins-panel li > :first-child {
  flex: 1;
  min-width: 0;
}

.sb-pin strong {
  display: block;
  font-weight: 400;
  font-size: var(--ua-fs-small);
  color: var(--ua-text-strong);
}

.sb-pin .u-muted,
.sb-pin span {
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  color: var(--ua-text-muted);
}

.sb-pins-panel .ua-empty {
  margin-block: var(--ua-s6);
}

.sb-pins-panel footer,
.sb-pins-panel__footer {
  margin-top: auto;
  padding-top: var(--ua-s4);
  font-size: var(--ua-fs-tiny);
  font-weight: 200;
  color: var(--ua-text-muted);
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1100px) {
  .sb-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .sb-moodboard,
  .sb-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ua-portal-header__label {
    display: none;
  }

  .db-projects {
    grid-template-columns: 1fr;
  }

  .db-update,
  .db-updates li {
    grid-template-columns: 1fr;
    gap: var(--ua-s1);
  }

  .sb-hero {
    min-height: 38vh;
  }

  .sb-hero h1 {
    font-size: var(--ua-fs-h1);
  }

  .sb-section {
    margin-top: var(--ua-s7);
    padding-top: var(--ua-s7);
  }

  .sb-section__head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sb-section__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .sb-section__num {
    font-size: 2rem;
  }

  .sb-goals,
  .sb-scope-cols {
    grid-template-columns: 1fr;
  }

  .sb-budget-summary {
    grid-template-columns: 1fr;
    gap: var(--ua-s3);
  }

  .sb-sched-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--ua-s2);
  }

  .sb-sched-toolbar > :last-child {
    margin-left: 0;
  }

  .sb-priorities > * {
    grid-template-columns: 1fr;
    gap: var(--ua-s1);
  }

  .sb-doc {
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-flow: row;
  }

  .sb-doc > :nth-child(n + 3) {
    grid-column: 2;
  }

  .sb-approval img,
  .sb-approval__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .sb-moodboard,
  .sb-photo-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
}

@media (max-width: 480px) {
  .db-hero {
    padding-top: var(--ua-s6);
  }

  .db-project-card__body {
    padding: var(--ua-s4);
  }

  .db-contact .ua-card {
    padding: var(--ua-s5) var(--ua-s4);
  }

  .sb-section {
    margin-top: var(--ua-s6);
    padding-top: var(--ua-s6);
  }

  .sb-whatsnew {
    padding: var(--ua-s4) var(--ua-s4) var(--ua-s5);
  }

  .sb-approval {
    padding: var(--ua-s4);
  }

  .sb-goals .ua-card,
  .sb-scope-cols .ua-card {
    padding: var(--ua-s4);
  }

  .sb-swatches {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--ua-s3);
  }

  .sb-timeline {
    padding-left: var(--ua-s5);
  }

  .sb-milestone__dot {
    left: calc(-1 * var(--ua-s5) + 1px);
  }

  .sb-pins-panel {
    width: 100vw;
    border-left: 0;
  }
}

/* ======================================================================
   Reduced motion
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ua-progressbar,
  .db-project-card,
  .db-project-card img,
  .ua-usermenu summary .ua-icon svg {
    transition: none;
  }

  .db-project-card:hover,
  .db-project-card:focus-within {
    transform: none;
  }

  .db-project-card:hover img,
  .db-project-card:focus-within img {
    transform: none;
  }

  .sb-pins-panel {
    animation: none;
  }

  .sb-section.is-flash {
    animation: none;
    background-color: var(--ua-bg-card);
  }
}