/* ==========================================================================
   Page styles: projects (list, detail, form). Classes are prefixed project(s)-.
   Accent colors come from .accent--{color} (--sw, --accent-bg, --accent-fg).
   ========================================================================== */

/* ---------- Shared bits ---------- */
.project-cell { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-snug); }
.project-person { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.project-critical { color: var(--tone-red-fg); }

/* Colored project code badge (WTL) */
.project-code {
  --size: 52px;
  flex: none;
  min-width: var(--size);
  height: var(--size);
  padding-inline: 8px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--sw) 38%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--sw) 32%, transparent), color-mix(in srgb, var(--sw) 7%, transparent));
  box-shadow: var(--glass-highlight), 0 12px 26px -16px var(--sw);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  direction: ltr;
  white-space: nowrap;
}
.project-code--long { font-size: 0.6875rem; letter-spacing: 0.02em; }
.project-code--xl { --size: 72px; border-radius: var(--r-lg); font-size: 1.0625rem; }
.project-code--xl.project-code--long { font-size: 0.8125rem; }

/* Monef-style ratio pill (same shape as .delta) */
.projects-pill {
  display: inline-flex; align-items: center;
  height: 26px; padding-inline: 9px;
  border-radius: var(--r-sm);
  background: var(--tone-neutral-bg); color: var(--tone-neutral-fg);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  white-space: nowrap;
}
.projects-pill--green { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.projects-pill--amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.projects-pill--red { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.projects-pill--indigo { background: var(--tone-indigo-bg); color: var(--tone-indigo-fg); }

/* Environment tones used by bars and legends */
.project-env__seg--production, .project-env__key--production,
.project-breakdown__bar--production, .project-breakdown__label--production { --seg: var(--tone-plum); }
.project-env__seg--staging, .project-env__key--staging,
.project-breakdown__bar--staging, .project-breakdown__label--staging { --seg: var(--tone-amber); }
.project-env__seg--development, .project-env__key--development,
.project-breakdown__bar--development, .project-breakdown__label--development { --seg: var(--tone-sky); }

/* ==========================================================================
   List
   ========================================================================== */

/* ---------- KPI strip ---------- */
.projects-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.projects-kpi { display: flex; flex-direction: column; }
.projects-kpi .card__head { margin-bottom: var(--sp-3); }
.projects-kpi .kpi { flex: 1; gap: var(--sp-2); }
.projects-kpi .kpi__hint { margin-top: auto; }

.projects-kpi__split { display: flex; gap: 4px; height: 8px; margin-top: var(--sp-1); }
.projects-kpi__seg { min-width: 8px; border-radius: var(--r-full); background: var(--tone-neutral); transform-origin: right; animation: iv-grow var(--dur-4) var(--ease-out) backwards; }
.projects-kpi__seg--green { background: var(--tone-green); box-shadow: 0 0 10px -2px var(--tone-green); }
.projects-kpi__seg--amber { background: var(--tone-amber); }
.projects-kpi__meter { height: 8px; margin-top: var(--sp-1); }
.projects-kpi__health { height: 8px; margin-top: var(--sp-1); border-radius: var(--r-full); background-color: var(--chip); overflow: hidden; }
.projects-kpi__health > span {
  display: block; height: 100%;
  width: calc(var(--value) * 1%);
  border-radius: inherit;
  background: var(--tone-green);
  transform-origin: right;
  animation: iv-grow var(--dur-4) var(--ease-out) backwards;
}
.projects-kpi__people { margin-top: var(--sp-1); min-height: 30px; }

/* ---------- Toolbar ---------- */
.projects-browser { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.projects-toolbar { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.projects-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.projects-toolbar__search { flex: 0 1 420px; width: auto; }
.projects-toolbar__scope { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.projects-toolbar .segmented__item,
.projects-toolbar .filter-chip,
.projects-sort__menu .dropdown__item { cursor: pointer; }
.projects-toolbar .filter-chip { height: 40px; padding-inline: var(--sp-4); }

.projects-toolbar .segmented__item:has(:checked) { background: var(--card-3); color: var(--text); box-shadow: var(--glass-highlight); }
.projects-toolbar .segmented__item:has(:checked) .segmented__count { color: var(--accent-text); }
.projects-toolbar .filter-chip:has(:checked) {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-text);
}
.projects-toolbar :is(.segmented__item, .filter-chip):has(:focus-visible) { box-shadow: var(--focus-ring); }

.projects-sort .pill-action { cursor: pointer; }
.projects-sort__prefix { color: var(--text-3); }
.projects-sort__caret { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.projects-sort .pill-action[aria-expanded="true"] .projects-sort__caret { transform: rotate(180deg); }
.projects-sort__menu .dropdown__item:has(:checked) { color: var(--text); }
.projects-sort__menu .dropdown__item:has(:checked)::after {
  content: ""; margin-inline-start: auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}
.projects-sort__menu .dropdown__item:has(:focus-visible) { background: var(--hover); color: var(--text); }

/* ---------- Results ---------- */
.projects-results { min-width: 0; transition: opacity var(--dur-2); }
.projects-results.htmx-request { opacity: 0.55; }
.projects-group + .projects-group { margin-top: var(--sp-6); }
.projects-group__title {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--text-2);
}
.projects-group__count {
  min-width: 22px; height: 22px; padding-inline: 7px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--chip);
  color: var(--text-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
}
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--sp-4); }
.projects-grid > * { animation: iv-rise var(--dur-4) var(--ease-out) backwards; }
.projects-grid > :nth-child(2) { animation-delay: 40ms; }
.projects-grid > :nth-child(3) { animation-delay: 80ms; }
.projects-grid > :nth-child(4) { animation-delay: 120ms; }
.projects-grid > :nth-child(5) { animation-delay: 160ms; }
.projects-grid > :nth-child(n + 6) { animation-delay: 200ms; }
.projects-empty { padding: 0; }

/* ---------- Project card ---------- */
.project-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  isolation: isolate;
}
.project-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  /* soft accent glow behind the code badge (inline-start corner in RTL) */
  background: radial-gradient(380px 170px at 100% 0%, color-mix(in srgb, var(--sw) 14%, transparent), transparent 72%);
  pointer-events: none;
}
.project-card:has(.project-card__link:focus-visible) { box-shadow: var(--focus-ring); }

.project-card__head { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.project-card__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.project-card__name {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-card__link { transition: color var(--dur-1); }
.project-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.project-card__link:focus-visible { box-shadow: none; }
.project-card:hover .project-card__link { color: var(--accent-fg); }
.project-card__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.project-card__tools { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; flex: none; }

.project-card__desc {
  font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  min-height: calc(2em * 1.5);
}

.project-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.project-stat {
  display: flex; flex-direction: column-reverse; gap: 2px;
  min-width: 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--card-2);
  border: 1px solid var(--border);
}
.project-stat dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.project-stat dd { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }

/* Slim environment distribution bar */
.project-env { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.project-env__bar { display: flex; gap: 3px; height: 8px; }
.project-env__seg {
  flex: 1 1 0; min-width: 6px;
  border-radius: var(--r-full);
  background: var(--seg);
  transform-origin: right;
  animation: iv-grow var(--dur-4) var(--ease-out) backwards;
  transition: filter var(--dur-2);
}
.project-env__seg:hover { filter: brightness(1.18); }
.project-env__bar--empty { border-radius: var(--r-full); background-color: var(--chip); }
.project-env__legend { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); }
.project-env__key { display: inline-flex; align-items: center; gap: 6px; }
.project-env__key i { width: 8px; height: 8px; border-radius: 3px; background: var(--seg); }
.project-env__key b { font-weight: var(--fw-medium); color: var(--text-2); }
.project-env__key.is-empty { opacity: 0.5; }
.project-env__none { font-size: var(--fs-xs); color: var(--text-3); }

.project-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
}
.project-card__owner { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.project-card__owner-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; font-size: var(--fs-xs); color: var(--text-2); }
.project-card__owner-label { font-size: var(--fs-2xs); color: var(--text-3); }
.project-card__time { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

/* Pin toggle (tilted when off, upright and filled when on) */
.project-pin { display: inline-flex; }
.project-pin__btn .icon { transform: rotate(40deg); transition: transform var(--dur-3) var(--ease-spring), fill var(--dur-2); }
.project-pin__btn.is-pinned { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.project-pin__btn.is-pinned .icon { transform: none; fill: currentColor; }
.project-pin__btn.is-pinned:hover { background: color-mix(in srgb, var(--tone-amber) 22%, transparent); color: var(--tone-amber-fg); }

/* ==========================================================================
   Detail
   ========================================================================== */
.project-page { --sw: var(--tone-neutral); }

.project-hero { padding: var(--sp-6); overflow: hidden; isolation: isolate; }
.project-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(640px 300px at 100% 0%, color-mix(in srgb, var(--sw) 17%, transparent), transparent 70%);
  pointer-events: none;
}
.project-hero::after {
  content: "";
  position: absolute; inset-block: 0; inset-inline-end: 0; z-index: -1;
  width: min(46%, 520px);
  background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--sw) 24%, transparent) 0 1.5px, transparent 1.5px 9px);
  -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, black, transparent 70%);
  mask-image: radial-gradient(120% 90% at 0% 0%, black, transparent 70%);
  pointer-events: none;
}
.project-hero__top { display: flex; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.project-hero__text { flex: 1 1 340px; min-width: 0; }
.project-hero__title-row { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.project-hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }
.project-hero__slug { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.project-hero__desc { margin-top: var(--sp-3); max-width: 72ch; font-size: var(--fs-md); color: var(--text-2); line-height: var(--lh-snug); }
.project-hero__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.project-hero__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--sp-2);
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px dashed var(--border-strong);
}
.project-fact {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--card-2) 72%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.project-fact dt { font-size: var(--fs-xs); color: var(--text-3); }
.project-fact dd { display: flex; align-items: center; gap: var(--sp-2); min-height: 30px; min-width: 0; font-size: var(--fs-md); color: var(--text); }
.project-fact--wide { grid-column: span 2; }
.project-fact__teams { flex-wrap: wrap; }
.project-team-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding-inline: 10px;
  border-radius: var(--r-full);
  background: var(--accent-bg); color: var(--accent-fg);
  font-size: var(--fs-xs); white-space: nowrap;
  transition: filter var(--dur-2);
}
.project-team-chip:hover { filter: brightness(1.15); }
.project-team-chip .accent-swatch { width: 7px; height: 7px; border-radius: 50%; }

/* ---------- Tabs & panel ---------- */
.project-detail { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.project-tabs__count {
  min-width: 22px; height: 20px; padding-inline: 6px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--chip); color: var(--text-3);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  transition: background var(--dur-2), color var(--dur-2);
}
.project-tabs [aria-selected="true"] .project-tabs__count { background: var(--accent-soft); color: var(--accent-text); }
.section-title .project-tabs__count { margin-inline-start: 2px; }
.project-panel { min-width: 0; min-height: 240px; transition: opacity var(--dur-2); }
.project-panel:focus { box-shadow: none; }
.project-panel.htmx-request { opacity: 0.5; }
.project-panel > * { animation: iv-rise var(--dur-4) var(--ease-out) backwards; }

.project-tab { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.project-tab__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.project-tab__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.project-tab__note { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-snug); }
.project-tab__section { display: flex; flex-direction: column; gap: var(--sp-3); }
.project-tab__section + .project-tab__section { margin-top: var(--sp-4); }
.project-table-card { padding-block: var(--sp-2); }
.project-activity { padding: var(--sp-6) var(--sp-5) var(--sp-3); }

/* ---------- Overview ---------- */
.project-overview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-4); }
.project-overview > .card { grid-column: span 6; }
.project-minis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.project-overview > .project-overview__env, .project-overview > .project-overview__activity { grid-column: span 7; }
.project-overview > .project-overview__domains, .project-overview > .project-overview__teams { grid-column: span 5; }

.project-mini { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
.project-mini__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.project-mini__title { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-title); line-height: var(--lh-snug); }
.project-mini__value { display: flex; align-items: baseline; gap: 2px; margin-top: var(--sp-1); font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.project-mini .kpi__hint { margin-top: auto; font-size: var(--fs-xs); }
.project-mini__ring-row { display: flex; align-items: center; gap: var(--sp-3); }
.project-mini__ring-row .project-mini__value { margin-top: 0; }
.project-mini__dots { display: flex; flex-wrap: wrap; gap: 5px; min-height: 6px; padding-block: 1px; }
.project-mini__dot { width: 18px; height: 6px; border-radius: var(--r-full); background: var(--tone-neutral); }
.project-mini__dot--green { background: var(--tone-green); }
.project-mini__dot--amber { background: var(--tone-amber); }
.project-mini__dot--red { background: var(--tone-red); }

/* Environment breakdown (Monef "Expense breakdown": value pins over hatched pill bars) */
.project-breakdown { display: flex; flex-direction: column; padding-top: var(--sp-2); }
.project-breakdown__row { display: flex; gap: 8px; padding-inline: 6px; }
.project-breakdown__cell { position: relative; flex: 1 1 0; min-width: 64px; }
.project-breakdown__pins { height: 76px; }
.project-breakdown__pin {
  position: absolute; bottom: 0; inset-inline-start: 14px;
  width: 1px; height: var(--stem, 40px);
  background: linear-gradient(to top, transparent, var(--text-2));
  transform-origin: bottom;
  animation: project-stem var(--dur-4) var(--ease-out) 120ms backwards;
}
.project-breakdown__cell:nth-child(1) .project-breakdown__pin { --stem: 62px; }
.project-breakdown__cell:nth-child(2) .project-breakdown__pin { --stem: 48px; }
.project-breakdown__cell:nth-child(3) .project-breakdown__pin { --stem: 36px; }
.project-breakdown__pin::before {
  content: "";
  position: absolute; top: -3px; inset-inline-start: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 3px var(--card);
}
.project-breakdown__bubble {
  position: absolute; top: -6px; inset-inline-start: 10px;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: var(--card-3);
  border: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text);
  white-space: nowrap;
}
.project-breakdown__track {
  padding-block: 6px;
  border-radius: var(--r-lg);
  background-color: color-mix(in srgb, var(--chip) 55%, transparent);
}
.project-breakdown__bar {
  display: block; height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--seg) 88%, var(--text) 12%), color-mix(in srgb, var(--seg) 62%, var(--card) 38%));
  box-shadow: var(--glass-highlight), 0 14px 26px -16px var(--seg);
  transform-origin: right;
  animation: iv-grow var(--dur-4) var(--ease-out) backwards;
}
.project-breakdown__bar.is-empty { background: var(--bar-off); box-shadow: inset 0 0 0 1px var(--border); }
.project-breakdown__labels { padding-top: var(--sp-3); }
.project-breakdown__label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--text-title); }
.project-breakdown__label i { width: 8px; height: 8px; flex: none; border-radius: 3px; background: var(--seg); }
.project-breakdown__sub { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
@keyframes project-stem { from { transform: scaleY(0); opacity: 0; } }

.project-capacity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-5); }
.project-capacity > div {
  display: flex; flex-direction: column-reverse; gap: 2px;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--card-2);
  border: 1px solid var(--border);
}
.project-capacity dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
.project-capacity dd { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.project-capacity small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-3); }

/* Domains */
.project-domains { display: flex; flex-direction: column; }
.project-domain { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--divider); min-width: 0; }
.project-domain:first-child { padding-top: 0; }
.project-domain:last-child { border-bottom: 0; padding-bottom: 0; }
.project-domain__main { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-snug); }
.project-domain__name { font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-domain__meta { font-size: var(--fs-xs); color: var(--text-3); }
.project-domain__badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* Teams (overview list, members tab, form options) */
.project-teams { display: flex; flex-direction: column; gap: var(--sp-2); }
.project-team {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--card-2);
  border: 1px solid var(--border);
  transition: border-color var(--dur-2), background var(--dur-2);
}
.project-team:hover { border-color: var(--border-strong); background: var(--card-3); }
.project-team--static:hover { border-color: var(--border); background: var(--card-2); }
.project-team__mark {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-bg); color: var(--accent-fg);
  font-weight: var(--fw-semibold);
}
.project-team__main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-snug); }
.project-team__name { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.project-team__meta { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-team__go { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.project-team:hover .project-team__go { transform: translateX(-3px); color: var(--text); }
.project-team__count { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

.project-meta { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--border-strong); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-meta__wide { grid-column: 1 / -1; }
.project-meta__link { display: block; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-1); }
.project-meta__link:hover { color: var(--accent-text); }

/* ---------- Services tab ---------- */
.project-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: var(--sp-4); align-items: start; }
.project-svc .card__head { margin-bottom: var(--sp-2); }
.project-svc__server { transition: color var(--dur-1); }
.project-svc__server:hover { color: var(--accent-text); }
.project-svc__item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--divider); }
.project-svc__item:last-child { padding-bottom: 0; }
.project-svc__main { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-snug); }
.project-svc__name { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.project-svc__meta { font-size: var(--fs-xs); color: var(--text-3); }
.project-svc__port { height: 24px; }

/* ---------- Members tab ---------- */
.project-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: var(--sp-3); }
.project-member { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.project-member__main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-snug); }
.project-member__name { font-weight: var(--fw-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-member__job { font-size: var(--fs-sm); color: var(--text-2); }
.project-member__meta { font-size: var(--fs-xs); color: var(--text-3); }
.project-member__role { align-self: flex-start; }
.project-team-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--sp-3); }
.project-team-card { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4); }

/* ==========================================================================
   Form
   ========================================================================== */
.project-form { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-5); align-items: start; }
.project-form__main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.project-form__aside { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.project-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.project-form__wide { grid-column: 1 / -1; }
.project-form__req { margin-inline-start: 3px; color: var(--tone-red-fg); }
.project-form__code { letter-spacing: 0.08em; }
.project-form__actions { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.project-form .alert p + p { margin-top: 2px; }
.project-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.project-status-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.project-status-option {
  --opt: var(--tone-neutral);
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--card-2);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
}
.project-status-option--green { --opt: var(--tone-green); }
.project-status-option--amber { --opt: var(--tone-amber); }
.project-status-option:hover { border-color: var(--border-strong); }
.project-status-option:has(:checked) { border-color: color-mix(in srgb, var(--opt) 55%, transparent); background: color-mix(in srgb, var(--opt) 8%, var(--card-2)); }
.project-status-option:has(:focus-visible) { box-shadow: var(--focus-ring); }
.project-status-option__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-snug); }
.project-status-option__label { font-weight: var(--fw-medium); color: var(--text); }
.project-status-option__hint { font-size: var(--fs-xs); color: var(--text-3); }
.project-status-option__check { color: var(--opt); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.project-status-option:has(:checked) .project-status-option__check { opacity: 1; transform: none; }

.project-team-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--sp-2); }
.project-team-option {
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--card-2);
  transition: border-color var(--dur-2), background var(--dur-2);
}
.project-team-option:hover { border-color: var(--border-strong); }
.project-team-option:has(:checked) { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--card-2)); }

/* Live preview + color swatches */
.project-preview__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--card-2);
  border: 1px solid var(--border);
  transition: border-color var(--dur-3);
}
.project-preview__card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(300px 140px at 100% 0%, color-mix(in srgb, var(--sw) 22%, transparent), transparent 70%);
  transition: background var(--dur-3);
}
.project-preview__card .project-code { transition: background var(--dur-3), border-color var(--dur-3), color var(--dur-3); }
.project-preview__card .project-card__name { display: block; }
.project-preview__card .project-card__heading { align-items: flex-start; }
.project-preview__url { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-3); text-align: right; overflow-wrap: anywhere; }

.project-swatches { margin-top: var(--sp-5) !important; }
.project-swatches__list { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.project-swatch {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--sw) 70%, var(--text) 30%), var(--sw) 70%);
  box-shadow: 0 0 0 1px var(--border-strong), 0 8px 18px -10px var(--sw);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.project-swatch:hover { transform: scale(1.08); }
.project-swatch:has(:checked) { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--sw), 0 10px 22px -10px var(--sw); }
.project-swatch:has(:focus-visible) { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--indigo); }
.project-swatch__check { color: var(--card); opacity: 0; transform: scale(0.4); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.project-swatch:has(:checked) .project-swatch__check { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .projects-kpis, .project-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-overview > .card,
  .project-overview > .project-overview__env, .project-overview > .project-overview__activity,
  .project-overview > .project-overview__domains, .project-overview > .project-overview__teams { grid-column: 1 / -1; }
  .project-form { grid-template-columns: minmax(0, 1fr); }
  .project-form__aside { position: static; }
}

@media (max-width: 767px) {
  .projects-toolbar, .projects-toolbar__row { gap: var(--sp-2); }
  .projects-toolbar__search { flex: 1 1 0; }
  .projects-toolbar__status { width: 100%; }
  .projects-toolbar__status .segmented__item { flex: 1; justify-content: center; padding-inline: var(--sp-3); }
  .projects-toolbar .filter-chip { height: 44px; padding-inline: var(--sp-3); }
  .projects-sort .pill-action { height: 48px; padding-inline: 6px var(--sp-3); }
  .projects-sort__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .project-card { padding: var(--sp-4); gap: var(--sp-3); }
  .project-code { --size: 46px; }
  .project-card__name { font-size: var(--fs-base); }
  .project-stat { padding: var(--sp-2) var(--sp-3); }
  .project-stat dd { font-size: var(--fs-lg); }
  .project-card__foot { padding-top: var(--sp-3); }
  .project-pin__btn.icon-btn--sm, .project-menu .icon-btn--sm { --ib: 40px; }

  .project-hero { padding: var(--sp-5) var(--sp-4); }
  .project-hero__top { gap: var(--sp-4); }
  .project-code--xl { --size: 56px; font-size: 0.9375rem; }
  .project-hero__title { font-size: var(--fs-2xl); }
  .project-hero__actions { width: 100%; }
  .project-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-fact--wide { grid-column: 1 / -1; }
  /* Without the members fact four facts remain: keep them a 2 × 2 grid. */
  .project-hero__facts--even .project-fact--wide { grid-column: auto; }

  .project-table-card { padding: 0; background: none; border: 0; }
  .project-form__grid, .project-status-options { grid-template-columns: minmax(0, 1fr); }
  .project-swatch { width: 44px; height: 44px; }
}

@media (max-width: 559px) {
  .project-minis { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
  .projects-kpis { grid-template-columns: minmax(0, 1fr); }
  .project-hero__facts { grid-template-columns: minmax(0, 1fr); }
  .project-fact--wide { grid-column: auto; }
  .project-capacity, .project-meta { grid-template-columns: minmax(0, 1fr); }
  .project-capacity > div { flex-direction: row-reverse; align-items: center; justify-content: space-between; }
  .project-breakdown__row { gap: 6px; padding-inline: 4px; }
  .project-breakdown__cell { min-width: 56px; }
  .project-breakdown__bubble { font-size: var(--fs-xs); padding-inline: 8px; }
}

/* ==========================================================================
   Members management (members tab: role menu, remove, add-member modal)
   ========================================================================== */
.project-tab__cta { flex: none; }
.project-member__side { flex: none; align-self: flex-start; display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.project-member__remove { color: var(--text-3); }
.project-member__remove:hover { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.project-member__locked { width: 28px; height: 28px; display: inline-grid; place-items: center; color: var(--text-3); cursor: help; }
/* With role menu + remove, a narrow card (phones, the 2-column tablet grid) moves the actions to their own row. */
.project-member--manage { flex-wrap: wrap; container: member / inline-size; }
.project-member--manage .project-member__main { flex: 1 1 0; }
@container member (max-width: 330px) {
  .project-member--manage .project-member__side {
    flex-basis: 100%;
    justify-content: space-between;
    margin-top: 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--divider);
  }
}

/* Role pill that opens the role menu: the badge of the role, plus a caret and a real hit area. */
.project-role__trigger {
  height: 30px;
  padding-inline: 10px 8px;
  gap: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.project-role__trigger:hover, .project-role__trigger[aria-expanded="true"] { border-color: color-mix(in srgb, currentColor 40%, transparent); }
.project-role__trigger:active { transform: scale(0.96); }
.project-role__trigger:focus-visible { border-radius: var(--r-full); box-shadow: var(--focus-ring); }
.project-role__caret { opacity: 0.7; transition: transform var(--dur-2) var(--ease-out); }
.project-role__trigger[aria-expanded="true"] .project-role__caret { transform: rotate(180deg); }
.project-role__menu { width: min(300px, calc(100vw - 48px)); }
.project-role__menu form { display: flex; flex-direction: column; gap: 1px; }
.project-role__option { align-items: flex-start; padding-block: var(--sp-2); }
.project-role__option > .icon { flex: none; margin-top: 2px; }
.project-role__option.is-active { background: var(--hover); }
.project-role__option.is-active::after { align-self: center; flex: none; }
.project-role__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: var(--lh-snug); }
.project-role__label { color: var(--text); font-weight: var(--fw-medium); }
.project-role__hint { font-size: var(--fs-xs); color: var(--text-3); }

/* Add-member modal. The member picker's popup must float over the modal edge instead of scrolling inside it
   (only where the viewport is tall enough for the whole modal; short screens keep the scrolling body). */
.project-member-modal__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (min-height: 700px) {
  .project-member-modal[open], .project-member-modal .modal__body { overflow: visible; }
  .project-member-modal .modal__foot { border-radius: 0 0 var(--r-xl) var(--r-xl); }
}
.project-roles { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.project-roles > legend { padding: 0; margin-bottom: var(--sp-2); }
.project-roles__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-2); }
.project-role-option {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.project-role-option:hover { border-color: var(--border-strong); }
.project-role-option:active { transform: scale(0.98); }
.project-role-option__chip { transition: background var(--dur-2), color var(--dur-2); }
.project-role-option__label { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.project-role-option__hint { font-size: var(--fs-xs); color: var(--text-2); line-height: var(--lh-snug); }
.project-role-option__check {
  position: absolute; top: var(--sp-3); inset-inline-end: var(--sp-3);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: transparent;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.project-role-option:has(input:checked) { border-color: color-mix(in srgb, var(--sw, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--sw, var(--accent)) 9%, var(--card-2)); }
.project-role-option:has(input:checked) .project-role-option__chip { background: var(--accent-bg, var(--accent-soft)); color: var(--accent-fg, var(--accent-text)); }
.project-role-option:has(input:checked) .project-role-option__check { background: var(--sw, var(--accent)); border-color: var(--sw, var(--accent)); color: var(--card); }
.project-role-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }

@media (max-width: 767px) {
  .project-tab__bar .section-title { flex: 1 1 auto; }
  .project-role__trigger { height: 36px; padding-inline: 12px 10px; }
  .project-member__remove.icon-btn--sm { --ib: 40px; }
  .project-roles__list { grid-template-columns: minmax(0, 1fr); }
  .project-role-option { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); row-gap: 2px; padding: var(--sp-3) var(--sp-4); padding-inline-end: calc(var(--sp-4) + 26px); }
  .project-role-option__chip { grid-row: span 2; align-self: center; }
  .project-role-option__check { top: 50%; transform: translateY(-50%); }
}
@media (max-width: 419px) {
  .project-tab__bar .project-tab__cta { width: 100%; }
}