/*
  DGI CLIENT PORTAL — layout + components
  Tokens come from tokens.css (copy of ../shared/dgi-tokens.css) — load that first.
*/

/* ── Fonts (self-hosted, copied from DGI-Website) ───────────── */
@font-face {
  font-family: 'Tusker Grotesk';
  src: url('../fonts/TuskerGrotesk-7700Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'N27';
  src: url('../fonts/N27-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { border: none; background: none; font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--eggplant);
  min-height: 100vh;
}

/* ── App shell ──────────────────────────────────────────────── */
.portal {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  background: var(--eggplant);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__logo { display: block; }
.sidebar__logo img { width: 150px; height: auto; display: block; }

.sidebar__tag {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--peach);
  margin-top: 8px;
}

.sidebar__nav { margin-top: 32px; display: flex; flex-direction: column; gap: 4px; }
.sidebar__divider {
  border: none;
  border-top: 1px solid rgba(255, 252, 235, 0.15);
  margin: 10px 14px;
}

/* The [hidden] attribute must beat authored display rules (e.g. .sidebar__link
   is display:flex, which otherwise keeps a hidden nav link — like Task Sheet —
   visible). Also lets JS hide empty team sections via el.hidden = true. */
[hidden] {
  display: none !important;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 14px;
  border-radius: 4px;
  color: rgba(255, 252, 235, 0.75);
  transition: background 0.2s, color 0.2s;
}
.sidebar__link:hover { color: var(--ivory); background: rgba(255, 252, 235, 0.08); }
.sidebar__link.is-active {
  color: var(--eggplant);
  background: var(--hot-pink);
}
.sidebar__link .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.6; flex: none;
}
.sidebar__badge {
  margin-left: auto;
  font-size: 11px;
  background: var(--golden-yellow);
  color: var(--eggplant);
  border-radius: 10px;
  padding: 2px 8px;
}

.sidebar__client {
  margin-top: auto;
  border-top: 1px solid rgba(255, 252, 235, 0.15);
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--turquoise);
  color: var(--eggplant);
  font-family: var(--font-label);
  font-size: 14px;
  display: grid; place-items: center;
  flex: none;
}
.sidebar__client-name { font-size: 14px; font-weight: 600; }
.sidebar__client-project {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--peach);
  margin-top: 2px;
}

/* ── Main column ────────────────────────────────────────────── */
.main { padding: 0 48px 64px; min-width: 0; }

/* Anti-flash: the static markup in each page is an offline fallback, so hide
   the main content until the data script declares itself via
   body[data-portal-data] = 'live' | 'fallback' (portal-data.js / board.js;
   portal.js has a 3s safety net). Prevents placeholder data from flashing
   before the database swap-in. Login page has no .main, so it's unaffected. */
body[data-page] .main { opacity: 0; transition: opacity 0.2s ease; }
body[data-portal-data] .main { opacity: 1; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid var(--eggplant-12);
}
.topbar__crumb {
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--eggplant-60);
}
.topbar__actions { display: flex; align-items: center; gap: 16px; }

/* Site's offset-border button style (matches .btn--about-cta) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 24px;
  border-radius: 4px;
  background: var(--hot-pink);
  color: var(--eggplant);
  border-bottom: 4px solid var(--eggplant);
  border-left: 4px solid var(--eggplant);
  transition: transform 0.15s;
}
.btn:hover { transform: translate(-1px, -1px); }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--eggplant-12);
  border-radius: 4px;
}

/* ── Welcome header ─────────────────────────────────────────── */
.welcome { padding: 40px 0 8px; }
.welcome__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.05;
  text-transform: uppercase;
}
.welcome__title em { font-style: normal; color: var(--hot-pink); }
.welcome__sub { margin-top: 28px; font-size: 16px; color: var(--eggplant-60); max-width: 560px; }
.welcome__sub a {
  text-decoration: underline;
  text-decoration-color: var(--hot-pink);
  text-underline-offset: 3px;
}
.welcome__sub a:hover { color: var(--hot-pink); }

/* ── Stage tracker (6-stage flow: Planning → Builder Coordination) ── */
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.phase {
  border: 1px solid var(--eggplant-12);
  border-radius: 8px;
  padding: 20px;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
}
.phase__num {
  font-family: var(--font-headline);
  font-size: 28px;
  line-height: 1;
}
.phase__name {
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
}
.phase__state { font-size: 13px; color: var(--eggplant-60); margin-top: 6px; }
.phase--done { background: var(--peach); }
.phase--active {
  background: var(--turquoise);
  border-color: var(--eggplant);
  border-bottom-width: 4px;
  border-left-width: 4px;
}

/* Per-stage progress bar, pinned to the card bottom */
.phase__state { margin-bottom: 16px; }
.phase__bar {
  margin-top: auto;
  height: 8px;
  border-radius: 4px;
  background: var(--eggplant-12);
  overflow: hidden;
}
.phase__bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--hot-pink);
  transition: width 0.4s ease;
}
.phase--active .phase__bar { background: rgba(82, 0, 38, 0.18); }
.phase--active .phase__bar-fill { background: var(--eggplant); }

/* ── Stat cards ─────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.stats--3 { grid-template-columns: repeat(3, 1fr); margin-top: 32px; }
.stat {
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--eggplant-12);
}
.stat__label {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--eggplant-60);
}
.stat__value {
  font-family: var(--font-headline);
  font-size: 44px;
  line-height: 1;
  margin-top: 10px;
}
.stat__hint { font-size: 12px; color: var(--eggplant-60); margin-top: 8px; }
.stat--yellow { background: var(--golden-yellow); }
.stat--yellow .stat__label, .stat--yellow .stat__hint { color: var(--eggplant); opacity: 0.7; }

/* ── Two-column content ─────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}

.panel {
  border: 1px solid var(--eggplant-12);
  border-radius: 8px;
  background: var(--ivory);
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--eggplant-12);
}
.panel__title {
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.panel__link { font-size: 13px; color: var(--hot-pink); font-weight: 600; }

/* Activity feed */
.activity { padding: 8px 20px; }
.activity li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--eggplant-12);
  font-size: 14px;
}
.activity li:last-child { border-bottom: none; }
.activity .dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 5px; flex: none;
}
.dot--pink   { background: var(--hot-pink); }
.dot--teal   { background: var(--turquoise); }
.dot--yellow { background: var(--golden-yellow); }
.activity time {
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eggplant-60);
  white-space: nowrap;
}

/* Deliverables */
.deliverables { padding: 12px 20px 20px; display: grid; gap: 12px; }
.deliverable {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  transition: border-color 0.15s;
}
.deliverable:hover { border-color: var(--hot-pink); }
.deliverable__thumb {
  width: 48px; height: 48px; border-radius: 4px; flex: none;
}
.deliverable__name { font-size: 14px; font-weight: 600; }
.deliverable__meta { font-size: 12px; color: var(--eggplant-60); margin-top: 2px; }
.pill {
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.pill--review   { background: var(--golden-yellow); }
.pill--approved { background: var(--turquoise); }
.pill--new      { background: var(--hot-pink); color: var(--ivory); }

/* Invoice record — spend history only, payments happen in QuickBooks */
.invoice-list { padding: 4px 20px 0; }
.invoice-list li { border-bottom: 1px solid var(--eggplant-12); }
.invoice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 14px;
}
.invoice-row:hover { opacity: 0.75; }
.invoice-row__id { font-family: var(--font-label); letter-spacing: 1px; }
.invoice-row__amount { font-weight: 600; margin-left: auto; }
.invoice-row .pill { margin-left: 0; }
.invoice-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--peach);
  border-radius: 0 0 8px 8px;
  margin-top: 8px;
}
.invoice-total span {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.invoice-total strong {
  font-family: var(--font-headline);
  font-size: 26px;
}

/* ── Login page ─────────────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  background: var(--eggplant);
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  position: relative;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--eggplant);
  border-bottom-width: 6px;
  border-left-width: 6px;
  border-radius: 8px;
  padding: 48px;
  max-width: 480px;
  width: 100%;
}
/* Turquoise jackalope floated behind the card content (transparent PNG shows
   the ivory card through it). Matches the DGI-Tool designer login exactly. */
.login-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.login-card > *:not(.login-card__bg) { position: relative; }
.login-card__logo { width: 160px; height: auto; display: block; }
.login-card__tag { color: var(--eggplant-60); }
.login-card__title {
  font-family: var(--font-headline);
  font-size: clamp(44px, 8vw, 64px);
  line-height: 1.05;
  text-transform: uppercase;
  margin-top: 28px;
}
.login-card__title em { font-style: normal; color: var(--hot-pink); }
.login-card__sub { margin-top: 24px; font-size: 15px; color: var(--eggplant-60); line-height: 1.5; }
.login-card__form { margin-top: 28px; }
.login-card__label {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.login-card__input {
  width: 100%;
  font: inherit;
  color: var(--eggplant);
  background: transparent;
  border: 1px solid var(--eggplant-12);
  border-radius: 4px;
  padding: 14px 16px;
}
.login-card__input:focus {
  outline: none;
  border-color: var(--hot-pink);
}
.login-card__btn { width: 100%; margin-top: 16px; }
.login-card__msg { margin-top: 16px; font-size: 14px; line-height: 1.5; }
.login-card__help { margin-top: 28px; font-size: 13px; color: var(--eggplant-60); }
.login-card__help a {
  text-decoration: underline;
  text-decoration-color: var(--hot-pink);
  text-underline-offset: 3px;
}

/* Sign-out link under the sidebar client card */
.sidebar__signout {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 252, 235, 0.5);
}
.sidebar__signout:hover { color: var(--ivory); }

/* ── Team page ──────────────────────────────────────────────── */
.team-section { margin-top: 40px; }
.team-section__label {
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--eggplant-12);
}
.team-section__addr {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--eggplant-60);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.contact-card {
  border: 1px solid var(--eggplant-12);
  /* Signature DGI offset "drop shadow" (like the buttons) on EVERY card. */
  border-bottom: 4px solid var(--eggplant);
  border-left: 4px solid var(--eggplant);
  border-radius: 8px;
  padding: 20px;
  background: var(--ivory);
}
/* Primary contact: eggplant hairline on the thin sides too. */
.contact-card--accent { border-color: var(--eggplant); }
/* Empty-state card (e.g. no builder yet). */
.contact-card--placeholder {
  border-style: dashed;
  border-color: var(--eggplant-12);
  color: var(--eggplant-60);
}
.contact-card--placeholder .contact-card__name { color: var(--eggplant); }
.contact-card .avatar { width: 48px; height: 48px; font-size: 16px; }
.contact-card__name { font-size: 16px; font-weight: 600; margin-top: 14px; }
.contact-card__role {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--eggplant-60);
  margin-top: 4px;
}
.contact-card__org { font-size: 13px; color: var(--eggplant-60); margin-top: 2px; }
.contact-card__rows { margin-top: 14px; display: grid; gap: 6px; }
.contact-card__rows a {
  display: block;
  font-size: 13px;
  color: var(--eggplant);
  text-decoration: underline;
  text-decoration-color: var(--hot-pink);
  text-underline-offset: 3px;
}
.contact-card__rows a:hover { color: var(--hot-pink); }

@media (max-width: 960px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Footer (full-width, matches the marketing site) ────────── */
.portal-footer {
  background: var(--ivory);
  padding: 60px 48px 0;
  overflow: hidden;                 /* clips DAAAMN at the bottom only */
  border-top: 1px solid var(--eggplant-12);
}
.portal-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 72px;
  margin-bottom: 60px;              /* must stay < |logo bottom| for overlap */
}
.portal-footer__email,
.portal-footer__copy {
  font-family: var(--font-headline);
  font-size: 15px;
  line-height: 1;
  color: var(--eggplant);
  text-transform: uppercase;
}
.portal-footer__email:hover { color: var(--hot-pink); }
.portal-footer__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100px;                   /* hangs into the DAAAMN text */
  display: block;
}
.portal-footer__logo img {
  width: 288px;
  height: 122px;
  object-fit: contain;
  display: block;
}
.portal-footer__daaaamn {
  font-family: var(--font-headline);
  font-size: clamp(5rem, 21vw, 28rem);  /* fallback; JS sets exact vw */
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: var(--eggplant);
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
  margin: 0 -48px -0.22em;
  padding-top: 12px;
}

/* ── Task Sheet (Trello-style board) ──────────────────────────
   Column accent color is set per-column via inline --col-color
   (see COLUMN_COLORS in js/board.js). Falls back to eggplant. */
.main--board { padding-right: 0; }
.board {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 32px;
  padding-bottom: 24px;
  padding-right: 48px;
  overflow-x: auto;
}
.board__list {
  flex: none;
  width: 272px;
  background: var(--ivory);
  border: 1px solid var(--eggplant-12);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  min-height: 120px;
}
.board__list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 12px 16px;
  border-bottom: 4px solid var(--col-color, var(--eggplant-12));
  border-radius: 8px 8px 0 0;
}
.board__list-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--col-color, var(--eggplant));
  flex: none;
}
.board__list-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: transparent;
  border: none;
  color: var(--eggplant);
  padding: 2px 0;
}
.board__list-title:focus {
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--hot-pink);
}
.board__list-count {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--eggplant-60);
  flex: none;
}
.board__list-delete {
  flex: none;
  font-size: 16px;
  line-height: 1;
  color: var(--eggplant-60);
  padding: 2px 4px;
}
.board__list-delete:hover { color: var(--hot-pink); }

.board__cards {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 32px;
}
.board__cards.is-dragover { background: var(--eggplant-12); border-radius: 6px; }

.board__card {
  background: var(--ivory);
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(82, 0, 38, 0.06);
}
.board__card:hover { border-color: var(--hot-pink); }
.board__card.is-dragging { opacity: 0.35; }
.board__card-text { white-space: pre-wrap; word-break: break-word; }
.board__card textarea {
  width: 100%;
  font: inherit;
  color: var(--eggplant);
  border: none;
  background: transparent;
  resize: vertical;
  min-height: 48px;
  padding: 0;
}
.board__card textarea:focus { outline: none; }
.board__card-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.board__card-save {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ivory);
  background: var(--hot-pink);
  padding: 6px 12px;
  border-radius: 4px;
}
.board__card-cancel, .board__card-delete {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eggplant-60);
}
.board__card-delete:hover { color: var(--hot-pink); }

.board__add-card { padding: 4px 10px 12px; }
.board__add-card-btn {
  width: 100%;
  text-align: left;
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eggplant-60);
  padding: 8px;
  border-radius: 6px;
}
.board__add-card-btn:hover { background: var(--eggplant-12); color: var(--eggplant); }
.board__add-card-form textarea {
  width: 100%;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  color: var(--eggplant);
  min-height: 56px;
}
.board__add-card-form textarea:focus { outline: none; border-color: var(--hot-pink); }

.board__add-list { flex: none; width: 272px; }
.board__add-list-btn {
  width: 100%;
  text-align: left;
  border: 1px dashed var(--eggplant-12);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--eggplant-60);
}
.board__add-list-btn:hover { border-color: var(--hot-pink); color: var(--hot-pink); }
.board__add-list-form {
  background: var(--ivory);
  border: 1px solid var(--eggplant-12);
  border-radius: 8px;
  padding: 14px;
}
.board__add-list-form input {
  width: 100%;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  color: var(--eggplant);
  margin-bottom: 10px;
}
.board__add-list-form input:focus { outline: none; border-color: var(--hot-pink); }

/* Card front badges (checklist progress, link/file counts) */
.board__card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.board__badge {
  font-family: var(--font-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eggplant-60);
  background: var(--eggplant-12);
  border-radius: 10px;
  padding: 3px 8px;
}
.board__badge--done { background: var(--turquoise); color: var(--eggplant); }

/* Column being dragged */
.board__list.is-dragging { opacity: 0.4; }
.board__list-head { cursor: grab; }

/* ── Presentations admin (staff only) ───────────────────────── */
.pres-form {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  margin: 4px 20px 16px;
}
.pres-form input, .pres-form select {
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  padding: 9px 11px;
  font: inherit;
  color: var(--eggplant);
  background: var(--ivory);
}
.pres-form input:focus, .pres-form select:focus { outline: none; border-color: var(--hot-pink); }
.pres-form__actions { display: flex; gap: 12px; align-items: center; }
.deliverable__admin { display: flex; gap: 2px; margin-left: 8px; flex: none; }
.deliverable__admin button { font-size: 15px; line-height: 1; color: var(--eggplant-60); padding: 3px 6px; }
.deliverable__admin button:hover { color: var(--hot-pink); }

/* ── Card detail modal ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(82, 0, 38, 0.55);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 100;
}
.card-modal {
  background: var(--ivory);
  border: 1px solid var(--eggplant);
  border-bottom-width: 6px;
  border-left-width: 6px;
  border-radius: 8px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 24px 28px 28px;
}
.card-modal__top { display: flex; align-items: center; justify-content: space-between; }
.card-modal__col {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--eggplant-60);
}
.card-modal__close { font-size: 26px; line-height: 1; color: var(--eggplant-60); padding: 0 4px; }
.card-modal__close:hover { color: var(--hot-pink); }
.card-modal__title {
  width: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--eggplant);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  resize: vertical;
  min-height: 52px;
  margin-top: 10px;
  padding: 8px;
}
.card-modal__title:focus { outline: none; border-color: var(--hot-pink); background: #fff; }
.card-modal__title--static { min-height: 0; }
.card-modal__section { margin-top: 22px; }
.card-modal__label {
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--eggplant-12);
  margin-bottom: 10px;
}
.card-modal__empty { font-size: 13px; color: var(--eggplant-60); padding: 4px 0; }

.card-modal__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  cursor: pointer;
}
.card-modal__check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--hot-pink);
  flex: none;
}
.card-modal__check span { flex: 1; }
.card-modal__check span.is-done { text-decoration: line-through; color: var(--eggplant-60); }

.card-modal__link-row, .card-modal__file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}
.card-modal__link-row a, .card-modal__file {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--hot-pink);
  text-underline-offset: 3px;
  color: var(--eggplant);
}
.card-modal__link-row a:hover, .card-modal__file:hover { color: var(--hot-pink); }
.card-modal__file-size {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--eggplant-60);
  flex: none;
}
.card-modal__remove { flex: none; font-size: 16px; color: var(--eggplant-60); padding: 0 4px; }
.card-modal__remove:hover { color: var(--hot-pink); }

.card-modal__add { display: flex; gap: 10px; margin-top: 10px; }
.card-modal__add input {
  flex: 1;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  color: var(--eggplant);
}
.card-modal__add input:focus { outline: none; border-color: var(--hot-pink); }

.card-modal__upload { display: flex; align-items: center; gap: 12px; margin-top: 10px; cursor: pointer; }
.card-modal__upload-status { font-size: 13px; color: var(--eggplant-60); }

.card-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--eggplant-12);
}

/* ── Mobile ─────────────────────────────────────────────────── */
.menu-toggle { display: none; }

@media (max-width: 960px) {
  .portal { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.is-open { transform: translateX(0); }
  .menu-toggle {
    display: inline-flex;
    font-family: var(--font-label);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    gap: 8px;
    align-items: center;
  }
  .main { padding: 0 20px 48px; }
  .stats, .phases { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  .portal-footer { padding: 40px 20px 0; }
  .portal-footer__daaaamn { margin: 0 -20px -0.22em; }
  .portal-footer__logo { bottom: -60px; }
  .portal-footer__logo img { width: 180px; height: auto; }
  .portal-footer__email, .portal-footer__copy { font-size: 12px; }

  .main--board { padding-right: 0; }
  .board { padding-right: 20px; }
  .board__list, .board__add-list { width: 240px; }
}

/* ══════════ Room Boards (Phase 3 — published boards + approve/decline) ══ */
/* Mirrors DGI-Tool's Houzz-style tile: ONE white container, image box,
   one-line name + ↗, price with qty, decision bar at the bottom. Declined
   tiles grey out. Top-right stays clear (approval state color = the bar). */

.rb-empty { color: var(--eggplant-60); margin: 8px 0 0; }

/* Package total — the client-visible grand total (client price × qty over
   the items on the package). The only money rollup a client ever sees. */
.rb-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  border-top: 1px solid var(--eggplant-12);
}
.rb-total__label {
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--eggplant-60);
}
.rb-total__amount {
  font-weight: 600;
  font-size: 18px;
  color: var(--eggplant);
}

/* ── Proposals (Phase 4): the client-ready document ──────────────── */

.pr-doc-dates { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.pr-status {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--eggplant-06, rgba(82, 0, 38, 0.06));
  color: var(--eggplant-60);
}
.pr-status--approved, .pr-status--invoiced { background: rgba(0, 128, 96, 0.1); color: #006a4e; }

.pr-doc {
  background: var(--ivory, #fffdf7);
  border: 1px solid var(--eggplant-12);
  border-radius: 8px;
  padding: 28px 32px;
  margin-top: 20px;
}
.pr-room { margin-bottom: 28px; }
.pr-room__name {
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--eggplant);
  margin: 0 0 10px;
}
.pr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pr-table th {
  font-family: var(--font-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--eggplant-60);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--eggplant-12);
}
.pr-table td { padding: 10px 8px; border-bottom: 1px solid var(--eggplant-06, rgba(82, 0, 38, 0.06)); vertical-align: middle; }
.pr-num { text-align: right; white-space: nowrap; }
.pr-amount { font-weight: 600; }
.pr-item { display: flex; align-items: center; gap: 12px; }
.pr-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex: none; }
.pr-thumb--empty { width: 48px; height: 48px; border-radius: 4px; background: var(--eggplant-06, rgba(82, 0, 38, 0.06)); flex: none; }
.pr-thumb--badge {
  object-fit: contain;
  padding: 9px;
  box-sizing: border-box;
  background: var(--eggplant-06, rgba(82, 0, 38, 0.06));
}
.pr-item__text { display: flex; flex-direction: column; gap: 2px; }
.pr-retail { font-size: 12px; color: var(--eggplant-60); }
.pr-subtotal-label {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--eggplant-60);
  text-align: right;
}
.pr-table tfoot td { border-bottom: none; padding-top: 12px; }

.pr-totals { margin-top: 8px; padding-top: 16px; border-top: 2px solid var(--eggplant); max-width: 340px; margin-left: auto; }
.pr-totals__row { display: flex; justify-content: space-between; padding: 4px 8px; font-size: 14px; }
.pr-totals__row--grand { font-size: 17px; padding-top: 10px; }
.pr-totals__row--grand b { color: var(--eggplant); }
.pr-totals__savings { text-align: right; padding: 8px 8px 0; font-size: 13px; color: #006a4e; }

.pr-approve { margin-top: 28px; padding: 24px 16px 8px; border-top: 1px solid var(--eggplant-12); text-align: center; }
.pr-approve__note { color: var(--eggplant-60); font-size: 14px; max-width: 460px; margin: 0 auto 16px; }
/* The signature pink offset-border button (.btn), sized up — this is the
   e-signature moment, it should be unmissable (Eli 2026-07-09). */
.pr-approve__btn { font-size: 16px; padding: 16px 36px; cursor: pointer; }
.pr-approve__btn:hover { box-shadow: -4px 4px 0 var(--eggplant); }
.pr-approved-banner {
  margin-top: 28px;
  padding: 14px;
  border-radius: 6px;
  background: rgba(0, 128, 96, 0.1);
  color: #006a4e;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 640px) {
  .pr-doc { padding: 18px 14px; }
  .pr-table th:nth-child(3), .pr-table td:nth-child(3) { display: none; } /* Unit column folds into Amount on phones */
}
.rb-room { margin-bottom: 36px; }
.rb-room__name {
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 10px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--eggplant-12);
}

/* Grid / list toggle (mirrors the DGI-Tool view-toggle) */
.rb-index-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 4px; }
.view-toggle { display: inline-flex; border: 1px solid var(--eggplant-12); border-radius: 6px; overflow: hidden; }
.view-toggle button {
  background: #fff;
  border: none;
  padding: 6px 14px;
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eggplant-60);
  cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--eggplant-12); }
.view-toggle button.is-active { background: var(--eggplant); color: var(--ivory); }

/* List view: one row per board */
.rb-board-list { display: flex; flex-direction: column; }
.rb-board-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--eggplant-12);
  color: var(--eggplant);
  text-decoration: none;
}
.rb-board-row:hover { background: var(--eggplant-04, rgba(74,20,45,0.04)); }
.rb-board-row__thumb {
  width: 48px; height: 48px; flex: none;
  border: 1px solid var(--eggplant-12); border-radius: 4px; overflow: hidden;
  display: grid; place-items: center; background: #fff;
}
/* Sit the whole image inside the box (Eli 2026-07-14): logos were cropped by
   cover in list view — contain shows the full logo/product shot. */
.rb-board-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.rb-board-row__thumb .rb-board-card__badge { width: 60%; height: auto; object-fit: contain; }
.rb-board-row__name { font-weight: 600; flex: 1; }
.rb-board-row__go { font-family: var(--font-label); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--eggplant-60); }

.rb-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.rb-board-card {
  display: block;
  background: #fff;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--eggplant);
  transition: transform 0.15s;
}
/* Hover = the signature offset drop shadow (matches buttons / team cards). */
.rb-board-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: -4px 4px 0 var(--eggplant);
}
.rb-board-card__cover {
  aspect-ratio: 4 / 3;
  background: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rb-board-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.rb-board-card__badge { width: 46% !important; height: auto !important; object-fit: contain !important; opacity: 0.5; }
.rb-board-card__name {
  font-weight: 600;
  font-size: 14px;
  padding: 10px 12px;
}

.rb-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--eggplant-12);
}
.rb-detail-title {
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}
.rb-back {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eggplant-60);
  text-decoration: none;
  white-space: nowrap;
}
.rb-back:hover { color: var(--eggplant); }
.rb-staff-note { color: var(--eggplant-60); font-size: 12px; margin: 6px 0 0; }

.rb-section { margin-top: 22px; }
.rb-section__name {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eggplant-60);
  margin: 0 0 10px;
}

.rb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.rb-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  overflow: hidden;
}
.rb-tile--declined { opacity: 0.45; }
.rb-tile__img {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--eggplant-12);
  background: #fff;
}
.rb-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.rb-tile__name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px 0;
  font-weight: 600;
  font-size: 13px;
  min-width: 0;
}
.rb-tile__name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-tile__ext { color: var(--eggplant-60); text-decoration: none; flex: none; }
.rb-tile__ext:hover { color: var(--eggplant); }
.rb-tile__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 12px 10px;
}
.rb-tile__price { font-weight: 600; font-size: 14px; }
.rb-tile__qty { color: var(--eggplant-60); font-size: 12px; }
.rb-tile__comment {
  padding: 0 12px 10px;
  font-size: 12px;
  color: var(--eggplant-60);
  font-style: italic;
}
.rb-tile__actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
  margin-top: auto;
}
.rb-btn {
  flex: 1;
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 6px;
  border: 1px solid var(--eggplant-12);
  border-radius: 4px;
  background: #fff;
  color: var(--eggplant);
  cursor: pointer;
}
.rb-btn--approve:hover { background: var(--turquoise); border-color: var(--turquoise); }
.rb-btn--decline:hover { background: var(--peach); border-color: var(--peach); }
.rb-btn--approved { background: var(--turquoise); border-color: var(--turquoise); }
.rb-btn--declined { background: var(--peach); border-color: var(--peach); }
.rb-btn:disabled { opacity: 0.6; cursor: default; }

/* Detail head right cluster: Grid/List toggle + back link together. */
.rb-detail-head__right { display: flex; align-items: center; gap: 14px; }

/* ── Package/revision detail — LIST lens (Eli 2026-07-13) ─────
   The info-dense alternative to the tile grid: one scannable row per
   item with name, category, price, qty, status, and the same
   approve/decline controls. */
.rb-item-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  margin-top: 16px;
}
.rb-item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--eggplant-12);
}
.rb-item-row:last-child { border-bottom: none; }
.rb-item-row--declined { opacity: 0.5; }
.rb-item-row__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--eggplant-04, rgba(74, 20, 45, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
}
.rb-item-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.rb-item-row__thumb .rb-board-card__badge { width: 60%; height: auto; object-fit: contain; }
.rb-item-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rb-item-row__name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rb-item-row__cat {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--eggplant-60);
}
.rb-item-row__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-item-row__vendor { font-size: 12px; color: var(--eggplant-60); }
.rb-item-row__specs { font-size: 12px; color: var(--eggplant-60); }
.rb-item-row__comment { font-size: 12px; font-style: italic; color: var(--eggplant-60); }
/* Compact spec line on the grid tile — dimensions/finish under the name. */
.rb-tile__specs {
  padding: 0 10px 2px;
  font-size: 11px;
  color: var(--eggplant-60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-item-row__price { font-weight: 600; font-size: 14px; white-space: nowrap; }
.rb-item-row__qty { color: var(--eggplant-60); font-size: 12px; white-space: nowrap; }
.rb-item-row__status {
  font-family: var(--font-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.rb-item-row__status--approved { background: var(--turquoise); color: var(--eggplant); }
.rb-item-row__status--declined { background: var(--peach); color: var(--eggplant); }
.rb-item-row__status--pending { background: var(--golden-yellow); color: var(--eggplant); }
.rb-item-row__actions { display: flex; gap: 6px; flex: none; width: 210px; }

@media (max-width: 640px) {
  .rb-item-row { flex-wrap: wrap; }
  .rb-item-row__main { flex-basis: calc(100% - 62px); }
  .rb-item-row__actions { width: 100%; }
}

/* ── Inspo page (client-visible, Eli 2026-07-13) ─────────────── */
.inspo-board { margin-bottom: 32px; }
.inspo-board__name {
  font-family: var(--font-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 12px;
}
.pin-embed { display: block; overflow-x: auto; }
.inspo-board__link {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hot-pink);
  text-decoration: none;
}
.inspo-board__link:hover { text-decoration: underline; }
.inspo-docs { margin-top: 24px; }
.inspo-doc-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--eggplant-12);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  margin-top: 12px;
}
.inspo-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--eggplant-12);
  text-decoration: none;
  color: var(--eggplant);
}
.inspo-doc:last-child { border-bottom: none; }
.inspo-doc:hover { background: var(--eggplant-04, rgba(74, 20, 45, 0.04)); }
.inspo-doc__name { font-weight: 600; }
.inspo-doc__go {
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eggplant-60);
  white-space: nowrap;
}

/* ── No-project state (login resolves to no project) ─────────── */
.noproject {
  max-width: 520px;
  margin: 8vh auto 0;
  padding: 0 8px;
}
.noproject__title {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.05;
  margin: 0 0 16px;
}
.noproject__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--eggplant-60);
  margin: 0 0 24px;
}
.noproject__help { font-size: 14px; }
.noproject__help a { color: var(--eggplant); }
.noproject__help a:hover { color: var(--hot-pink); }

/* ── Welcome modal (first-login "fill out your card" popup) ──── */
.welcome-modal__title {
  font-family: var(--font-headline);
  font-size: 34px;
  text-transform: uppercase;
  color: var(--eggplant);
  margin: 14px 0 6px;
}
.welcome-modal__sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--eggplant-60);
  margin: 0 0 20px;
}
.welcome-modal__form { display: grid; gap: 14px; }
.welcome-modal__label {
  display: grid;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--eggplant-60);
}
.welcome-modal__error { font-size: 13px; color: #b3261e; margin: 0; }
.welcome-modal__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
}
.welcome-modal__skip {
  font-family: var(--font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--eggplant-60);
}
.welcome-modal__skip:hover { color: var(--hot-pink); }

/* ══════════ #7 Procurement client snapshot ══════════
   The "where's my stuff" order tracker — info-dense rows grouped by room,
   reusing the Team page section headers. No pricing anywhere (RLS + the
   client_procurement RPC guarantee it upstream; this is display only). */
.proc-list {
  border: 1px solid var(--eggplant-12);
  border-radius: 8px;
  overflow: hidden;
}
.proc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--eggplant-12);
}
.proc-row:last-child { border-bottom: none; }
.proc-row__thumb-link { flex: none; display: block; }
.proc-row__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--eggplant-04, rgba(74, 20, 45, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
}
.proc-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.proc-row__thumb--badge img { width: 60%; height: auto; }
.proc-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.proc-row__name { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.proc-code {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--eggplant-60);
}
.proc-row__go { color: var(--hot-pink); text-decoration: none; font-weight: 600; }
.proc-row__meta { font-size: 12px; color: var(--eggplant-60); }
.proc-row__status { flex: none; }
.proc-pill {
  font-family: var(--font-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--eggplant);
}
.proc-pill--flight { background: var(--golden-yellow); }
.proc-pill--done   { background: var(--turquoise); }
.proc-pill--custom { background: var(--peach); }
.proc-pill--none   { background: var(--eggplant-12); color: var(--eggplant-60); }
.proc-row__eta {
  flex: none;
  width: 130px;
  text-align: right;
  font-size: 13px;
  color: var(--eggplant);
}
.proc-row__eta-label {
  font-family: var(--font-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eggplant-60);
}
.proc-row__track { flex: none; width: 120px; text-align: right; }
.proc-track { font-size: 12px; color: var(--hot-pink); text-decoration: none; overflow-wrap: anywhere; }
a.proc-track:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .proc-row { flex-wrap: wrap; }
  .proc-row__main { flex-basis: calc(100% - 62px); }
  .proc-row__status { order: 3; }
  .proc-row__eta { order: 4; width: auto; text-align: left; }
  .proc-row__track { order: 5; width: auto; text-align: left; margin-left: auto; }
}

/* ══════════ #9 Reconciliation (STAFF-ONLY) + client print ══════════ */
.recon-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.recon-toolbar__note {
  flex: 1;
  min-width: 240px;
  font-size: 13px;
  color: var(--eggplant-60);
  margin: 0;
}
.recon-print-btn { flex: none; }

/* The printable document — an 8.5×11-ish sheet, centered, that IS the client
   hand-out (Eli #3). Deliberately shows vendor-level proposed/paid/difference. */
.recon-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  border: 1px solid var(--eggplant-12);
  border-radius: 10px;
  color: var(--eggplant);
}
.recon-doc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--eggplant);
}
.recon-doc__logo { height: 40px; width: auto; }
.recon-doc__kicker {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--hot-pink);
}
.recon-doc__parties { margin: 20px 0 8px; }
.prop-doc__label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  color: var(--eggplant-60);
}
.recon-doc__client { font-family: var(--font-headline); font-size: 22px; }
.recon-doc__addr { font-size: 13px; color: var(--eggplant-60); }

.recon-contingency {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 16px 0 20px;
  background: var(--eggplant-04, rgba(74, 20, 45, 0.04));
  border-radius: 8px;
}
.recon-contingency__stat { font-size: 13px; color: var(--eggplant-60); }
.recon-contingency__stat b { color: var(--eggplant); font-weight: 600; margin-left: 4px; }
.recon-contingency__stat--under b { color: var(--turquoise-ink, var(--eggplant)); }
.recon-contingency__stat--over b { color: #c0392b; }

.recon-table { width: 100%; border-collapse: collapse; }
.recon-table th {
  text-align: left;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--eggplant-60);
  padding: 8px 10px;
  border-bottom: 1px solid var(--eggplant-12);
}
.recon-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--eggplant-12);
  font-size: 14px;
}
.recon-table .num { text-align: right; white-space: nowrap; }
.recon-vendor { font-weight: 600; }
.recon-diff--owed { color: var(--eggplant); font-weight: 600; }
.recon-diff--over { color: #c0392b; font-weight: 600; }
.recon-table__total td {
  border-top: 2px solid var(--eggplant);
  border-bottom: none;
  font-weight: 700;
}
.recon-doc__foot {
  margin-top: 20px;
  font-size: 11px;
  color: var(--eggplant-60);
}

/* Print: the doc is the whole page; strip the app chrome. */
@media print {
  .sidebar, .topbar, .welcome, .portal-footer, .menu-toggle, .no-print { display: none !important; }
  .portal, .main { display: block; margin: 0; padding: 0; }
  .main { max-width: none; }
  .recon-doc { max-width: none; margin: 0; border: none; border-radius: 0; padding: 0; }
  body[data-page="reconciliation"] .main { background: #fff; }
}

/* ── Product comments (Eli 2026-07-22): client↔team thread per item ── */

.rb-cmt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  border: none;
  background: none;
  padding: 0 2px;
  cursor: pointer;
  font-size: 13px;
  color: var(--eggplant-60);
}
.rb-cmt:hover { color: var(--eggplant); }
.rb-cmt__count {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--eggplant);
  background: var(--eggplant-12);
  border-radius: 8px;
  padding: 1px 5px;
}

.cmt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(82, 0, 38, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 24px;
}
.cmt-card {
  background: var(--ivory);
  border: 1px solid var(--eggplant);
  border-radius: 8px;
  padding: 22px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.cmt-title {
  font-family: var(--font-headline);
  font-size: 20px;
  margin: 0 0 12px;
}
.cmt-list {
  flex: 1;
  overflow: auto;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  min-height: 60px;
}
.cmt { border-left: 3px solid var(--eggplant-12); padding-left: 10px; }
.cmt--mine { border-left-color: var(--eggplant); }
.cmt__meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--eggplant-60);
}
.cmt__who { font-weight: 600; color: var(--eggplant); }
.cmt__del {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--eggplant-60);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}
.cmt__del:hover { color: var(--eggplant); }
.cmt__body { white-space: pre-wrap; }
.cmt-form { display: grid; gap: 10px; }
.cmt-input {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--eggplant-12);
  border-radius: 4px;
  padding: 8px;
  font: inherit;
  background: #fff;
}
.cmt-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cmt-actions .rb-btn { flex: none; padding: 8px 14px; }
@media print { .rb-cmt, .cmt-overlay { display: none !important; } }

/* rb-cmt svg bubble alignment (session 47c — emoji retired) */
.rb-cmt svg { display: block; }

/* ── Inspo uploads (session 49e) — client + staff drag-drop images ── */
.inspo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 32px 20px;
  margin: 8px 0 14px;
  border: 2px dashed var(--eggplant-12, rgba(74, 20, 45, 0.15));
  border-radius: 10px;
  background: #fff;
  color: var(--eggplant, #4a142d);
  text-align: center;
  cursor: pointer;
}
.inspo-drop:hover,
.inspo-drop--over {
  border-color: var(--hot-pink, #e0218a);
  background: var(--ivory, #fffbea);
}
.inspo-upload-status { margin: 0 0 10px; color: var(--eggplant-60, rgba(74, 20, 45, 0.6)); font-size: 14px; }
.inspo-upload-status:empty { display: none; }

.pin-masonry {
  columns: 4 220px;
  column-gap: 14px;
}
.pin-tile {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--eggplant-12, rgba(74, 20, 45, 0.12));
  background: #fff;
}
.pin-tile img { width: 100%; display: block; }
.pin-tile__noimg {
  display: block;
  padding: 22px 14px;
  color: var(--eggplant, #4a142d);
  font-weight: 600;
}
.inspo-upload-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
.pin-tile:hover .inspo-upload-del { opacity: 1; }