@import url("fonts.css");
@import url("tokens.css");
@import url("mud.css");
@import url("workbench.css");

/*
  Application styles. Everything here resolves through a token from tokens.css so the product can be
  re-skinned from that one file.

    app.css        base, shell, and the pages outside the workbench
    workbench.css  the run workbench and its components
    mud.css        MudBlazor, de-Materialised
*/

html,
body {
  margin: 0;
  font-family: var(--sf-font);
  font-size: var(--sf-text-md);
  font-weight: var(--sf-weight-regular);
  line-height: var(--sf-line-height);
  color: var(--sf-text-body);
  background: var(--sf-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*
  Headings are the interface face, one weight up and one step tighter — not a second family. The
  design sets every heading this way, from a 24px page title down to a 14.5px section label, so
  emphasis comes from size and weight alone and never from a change of voice.
*/
h1, h2, h3, h4, h5, h6 {
  color: var(--sf-text-primary);
  font-family: var(--sf-font);
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-heading-tracking);
}

b, strong { font-weight: var(--sf-weight-strong); }

a { color: inherit; }

/* Machine values: run ids, token counts, costs, durations, paths, resource names, tags, models. */
code, pre, kbd, samp, .sf-mono {
  font-family: var(--sf-font-mono);
  font-variant-ligatures: none;
}

.sf-mono { font-variant-numeric: tabular-nums; }

::selection { background: var(--sf-state-running-tint); color: var(--sf-text-primary); }

/* Visible focus everywhere, keyboard only. */
:focus-visible {
  outline: 2px solid var(--sf-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

.sf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Thin, quiet scrollbars. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sf-border-strong) transparent;
}

/* ---- Loading ---------------------------------------------------------------------------- */
/* Never a spinner: the boot screen is a mark and an indeterminate hairline. */

.sf-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 1rem;
  color: var(--sf-text-secondary);
}

/*
  The brand on its own, where there is no bar to carry it: the boot screens and the sign-in card.
  The logo over the product line, in the condensed capitals the top bar uses. Static HTML as well as
  Razor, because the first boot screen is drawn before the runtime has started.
*/
.sf-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: inherit;
}

.sf-lockup--start { align-items: flex-start; }

.sf-lockup__logo {
  height: 32px;
  width: auto;
  display: block;
}

.sf-lockup__name {
  font-family: var(--sf-font-condensed);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sf-text-secondary);
}

.sf-boot__bar {
  position: relative;
  width: 160px;
  height: 1px;
  overflow: hidden;
  background: var(--sf-border);
}

.sf-boot__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--sf-text-secondary);
  animation: sf-boot-slide 1.2s var(--sf-ease-out) infinite;
}

@keyframes sf-boot-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(260%); }
}

.sf-skeleton { display: flex; flex-direction: column; gap: 0.5rem; }
.sf-skeleton__row { border-radius: var(--radius-control) !important; }

/* ---- Shell: top bar, sidebar, brand, account ---------------------------------------------- */

/*
  The finalised design leads with the sidebar, not the bar. The rail carries identity, the
  organisation switcher, the routes and the person; the bar above the content carries only where you
  are and the two things you reach for from anywhere — search and notifications. That is why the
  brand moved out of the top bar: a module that sits inside Nebula names itself once, at the top of
  the rail, and then gets out of the way.
*/

.sf-topbar.mud-appbar {
  background-color: var(--sf-bg-surface);
  color: var(--sf-text-primary);
}

.sf-topbar .mud-toolbar {
  height: var(--sf-bar-height);
  min-height: var(--sf-bar-height);
  gap: 12px;
  padding-inline: var(--sf-page-gutter);
}

/* Where you are. One line, quiet, never a second navigation. */
.sf-topbar__where {
  font-size: var(--sf-text-md);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
  white-space: nowrap;
}

.sf-topbar__divider {
  width: 1px;
  height: 16px;
  margin-inline: 4px;
  background: var(--sf-border);
  flex: none;
}

.sf-topbar__context {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  white-space: nowrap;
}

/* The workbench's own header, which packs a run's identity into the left end of its bar. */
.sf-topbar__start {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.sf-topbar__end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/*
  The search affordance is a button, not an input: it opens the palette, and an input that does not
  take typing where it stands is a lie about what will happen.
*/
.sf-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 260px;
  font: inherit;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  background: var(--sf-bg-inset);
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--radius-control);
  padding: 0 10px;
  min-height: 34px;
  cursor: pointer;
  text-align: left;
}

.sf-search:hover { border-color: var(--sf-border-control); }

.sf-search__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-search__key {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-2xs);
  color: var(--sf-text-secondary);
  border: 1px solid var(--sf-border-strong);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--sf-bg-surface);
  flex: none;
}

/*
  The person, last in the bar. A button, because pressing it opens the account menu — and a control
  that acts must say so. The name gives way before the avatar does when the bar runs short.
*/
.sf-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: 220px;
  font: inherit;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-primary);
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0 6px 0 3px;
  cursor: pointer;
  flex: none;
}

.sf-account:hover { background: var(--sf-bg-hover); }

.sf-account__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-account__chevron { color: var(--sf-text-secondary); flex: none; }

@media (max-width: 1100px) {
  .sf-search { width: 34px; }
  .sf-search__label,
  .sf-search__key,
  .sf-account__name,
  .sf-account__chevron { display: none; }
}

/* ---- Theme menu ---------------------------------------------------------------------------- */
/* Each theme by its swatches, name and one line of description, as the platform's menu shows it. */

.sf-theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  padding: 2px 0;
}

.sf-theme-option__swatches {
  display: inline-flex;
  flex: none;
}

.sf-theme-option__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--sf-bg-surface);
  box-shadow: 0 0 0 1px var(--sf-border-strong);
}

.sf-theme-option__swatch + .sf-theme-option__swatch { margin-left: -5px; }

.sf-theme-option__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.3;
}

.sf-theme-option__name {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
}

.sf-theme-option__description {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

.sf-theme-option__check { color: var(--sf-brand); flex: none; }

/*
  Theme effects a palette cannot express — gradients, translucency, tinted shadows — as the platform
  draws them (Spark.App.Client wwwroot/css/app.css). Nebula needs none.
*/

/* Aurora: a soft pastel mesh over the lavender canvas, a frosted bar with a gradient line below it,
   and violet-tinted shadows on raised surfaces. */
:root[data-nebula-theme="aurora"] body {
  background:
    radial-gradient(1200px 640px at 0% 0%, rgba(124, 92, 252, 0.12), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(219, 79, 142, 0.09), transparent 60%),
    radial-gradient(1100px 640px at 55% 100%, rgba(15, 163, 163, 0.09), transparent 60%),
    var(--sf-bg-canvas);
  background-attachment: fixed;
}

:root[data-nebula-theme="aurora"] .sf-topbar.mud-appbar {
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  border-bottom-color: transparent;
}

:root[data-nebula-theme="aurora"] .sf-topbar.mud-appbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #7c5cfc, #db4f8e 50%, #0fa3a3);
  pointer-events: none;
}

:root[data-nebula-theme="aurora"] .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0) {
  box-shadow: 0 1px 2px rgba(124, 92, 252, 0.06), 0 6px 20px rgba(124, 92, 252, 0.08);
}

/* Midnight: a faint indigo and aqua glow on the navy canvas, and a frosted dark bar. */
:root[data-nebula-theme="midnight"] body {
  background:
    radial-gradient(1200px 640px at 0% 0%, rgba(129, 140, 248, 0.10), transparent 60%),
    radial-gradient(1000px 600px at 100% 100%, rgba(45, 212, 191, 0.06), transparent 60%),
    var(--sf-bg-canvas);
  background-attachment: fixed;
}

:root[data-nebula-theme="midnight"] .sf-topbar.mud-appbar {
  background-color: rgba(16, 23, 42, 0.82);
  backdrop-filter: blur(12px);
}

:root[data-nebula-theme="midnight"] .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ---- The rail ------------------------------------------------------------------------------ */

.sf-nav-drawer .mud-drawer-content {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  box-sizing: border-box;
}

/* The rail's own padding already sets the gutter, so the menu adds none of its own. */
.sf-rail__nav { padding: 0; }

/* The group heading above a set of routes: a label, not a link, and quiet enough to be skimmed past. */
.sf-nav-drawer .mud-nav-group .mud-nav-link { font-size: var(--sf-text-sm); }

.sf-nav-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
  padding-inline-start: 26px;
  font-size: var(--sf-text-sm);
}


/* ---- Brand ---------------------------------------------------------------------------------- */

/* The logo, a hairline, then two lines: the platform over the product line. */
.sf-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: var(--sf-text-primary);
  text-decoration: none;
  min-width: 0;
  flex: none;
}

.sf-brand:hover { color: var(--sf-text-primary); }

/*
  The supplied nebula artwork, orb and wordmark in one file. It is identity, not status: it never
  changes, so it cannot be mistaken for a state — which is the whole reason the state hues are not
  spent anywhere else. One file in both themes: the wordmark is coloured, not black, so it holds on
  the dark canvas without a second copy.
*/
.sf-brand__logo {
  height: 24px;
  width: auto;
  display: block;
  flex: none;
}

/* Spans the label's two lines, so the logo and the words read as two halves of one mark. */
.sf-brand__rule {
  width: 1px;
  align-self: stretch;
  margin-block: 2px;
  background: var(--sf-border-strong);
  flex: none;
}

.sf-brand__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
  min-width: 0;
}

/*
  The platform, quietly, so a person who arrived from it does not have to work out whether they
  have left it.
*/
.sf-brand__parent {
  font-size: 0.625rem;
  font-weight: var(--sf-weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf-text-secondary);
}

/* Condensed capitals, as the design draws them, in the platform's IBM Plex Sans Condensed. */
.sf-brand__module {
  font-family: var(--sf-font-condensed);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sf-text-primary);
}

/* Short of room, the logo alone names the product; the words would crowd out where you are. */
@media (max-width: 900px) {
  .sf-topbar .sf-brand__rule,
  .sf-topbar .sf-brand__label { display: none; }
}

/* The workbench header has no room for the wordmark, so it wears the gradient tile alone. */
.sf-brand__mark {
  width: 22px;
  height: 22px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-brand-gradient);
  display: block;
  flex: none;
}

/* Kept for the compact header, which has room for a name but not for two lines of one. */
.sf-brand__name {
  font-size: 0.9375rem;
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-heading-tracking);
}

/* ---- Organisation switcher ------------------------------------------------------------------ */

.sf-org {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
  background: var(--sf-bg-inset);
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--radius-control);
  padding: 0 10px;
  min-height: 36px;
  margin-bottom: 12px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

.sf-org:hover { border-color: var(--sf-border-control); }

/* Not a control: the same row when there is only one organisation to be in. */
.sf-org--static { cursor: default; }
.sf-org--static:hover { border-color: var(--sf-border-strong); }

.sf-org__mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sf-brand);
  color: var(--sf-brand-ink);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sf-org__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Avatars and the account menu ----------------------------------------------------------- */

.sf-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--sf-state-forked-tint);
  color: var(--sf-state-forked-ink);
  font: inherit;
  font-size: var(--sf-text-2xs);
  font-weight: var(--sf-weight-strong);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sf-avatar:hover { filter: brightness(0.96); }

.sf-menu-header { padding: 8px 16px; }
.sf-menu-header__name { font-size: var(--sf-text-sm); font-weight: var(--sf-weight-medium); color: var(--sf-text-primary); }
.sf-menu-header__meta { font-size: var(--sf-text-2xs); color: var(--sf-text-muted); }

/* Environment: a label, not a state — neutral in every environment, outlined in production. */
.sf-env {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--sf-radius-pill);
  border: 1px solid transparent;
  background: var(--sf-bg-selected);
  color: var(--sf-text-secondary);
  font-size: var(--sf-text-2xs);
  white-space: nowrap;
}

.sf-env--prod {
  background: transparent;
  border-color: var(--sf-text-primary);
  color: var(--sf-text-primary);
}

.sf-main { min-height: 100dvh; }

/* ---- Page structure --------------------------------------------------------------------- */

.sf-page {
  padding: var(--sf-page-top) var(--sf-page-gutter) 4rem;
  max-width: 1440px;
  margin: 0 auto;
}

.sf-page__header { margin-bottom: 1.25rem; }

/* 24px/600 at -0.02em, with the count or context line under it — the design's page head exactly. */
.sf-page__title {
  font-family: var(--sf-font);
  font-size: var(--sf-text-2xl);
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-heading-tracking);
  margin: 0;
}

.sf-page__subtitle {
  color: var(--sf-text-secondary);
  font-size: var(--sf-text-md);
  margin: 0.25rem 0 0;
}

/* Metadata voice: mono, small, muted — for identifiers, counts and timestamps. */
.sf-meta {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-text-muted);
  font-variant-numeric: tabular-nums;
}

.sf-card {
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
}

/* ---- The dashboard ------------------------------------------------------------------------- */
/*
  One column, 20px apart: controls, anything waiting on a person, the project cards, then what
  happened recently. The order is the order the questions get asked, and it does not change with the
  data — a person who learns where the waiting banner appears should find it in the same place on
  the day there is nothing in it.
*/

.sf-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sf-board__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-board__heading {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

/* The dashboard heading is a title beside a count; a page heading is a title above a summary. */
.sf-board__heading .sf-board__count { padding-bottom: 3px; }

.sf-board__title {
  margin: 0;
  font-size: var(--sf-text-xl);
  font-weight: var(--sf-weight-strong);
  letter-spacing: -0.01em;
}

.sf-board__count {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}

/* A plain field, drawn by us rather than by MudBlazor: nothing here needs a label that floats. */
.sf-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--radius-control);
  padding: 0 12px;
  min-height: 38px;
}

.sf-field:focus-within { border-color: var(--sf-focus-ring); }

.sf-field__icon.mud-icon-root {
  width: 15px;
  height: 15px;
  color: var(--sf-text-secondary);
  flex: none;
}

.sf-field__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--sf-text-md);
  color: var(--sf-text-primary);
  background: transparent;
  border: 0;
  outline: none;
}

.sf-field__input::placeholder { color: var(--sf-text-secondary); }

/* ---- Waiting on you ------------------------------------------------------------------------ */
/*
  The amber here is the awaiting state, not a decoration, so the banner and the pill on the card it
  refers to are the same colour — which is what lets a person follow one to the other.
*/

.sf-attention {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sf-state-awaiting-tint);
  border: 1px solid var(--sf-state-awaiting-border, transparent);
  border-radius: 10px;
  padding: 12px 14px 12px 16px;
}

.sf-attention__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--sf-state-awaiting-wash);
  color: var(--sf-state-awaiting-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sf-attention__icon .mud-icon-root { width: 15px; height: 15px; }

.sf-attention__headline {
  font-size: var(--sf-text-md);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
}

.sf-attention__where {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-attention__spacer { flex: 1 1 auto; }

/* ---- Project cards -------------------------------------------------------------------------- */

.sf-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1500px) { .sf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1150px) { .sf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .sf-cards { grid-template-columns: minmax(0, 1fr); } }

.sf-card-project {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 236px;
  box-sizing: border-box;
  padding: 0 0 18px;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--sf-text-primary);
  transition: border-color var(--sf-transition-fast);
}

.sf-card-project:hover { border-color: var(--sf-border-control); }

/*
  The head is tinted with the stack's own colour. That colour is identity, never state: it is fixed
  for the life of the project type, so a person learns "the teal ones are infrastructure" and the
  six state hues stay free to mean what they mean.
*/
.sf-card-project__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  background: var(--stack-tint);
  border-bottom: 1px solid var(--stack-line);
}

.sf-card-project__id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sf-card-project__name {
  font-size: 0.9375rem;
  font-weight: var(--sf-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-card-project__repo {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-card-project__now {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 18px;
  min-width: 0;
}

.sf-card-project__spec {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sf-card-project__detail {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sf-card-project__spacer { flex: 1 1 auto; }

.sf-card-project__foot {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 18px;
}

.sf-card-project__meta {
  display: flex;
  align-items: center;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  gap: 8px;
}

/* ---- The stack tile and its colours ---------------------------------------------------------- */
/*
  Two identity hues for the two shipped project types, and ink for anything a tenant adds. Neither
  is a state hue — pink and teal appear nowhere else in the product — so a coloured tile can never
  be misread as a phase. A third type gets ink rather than a third colour, because inventing hues
  per row is how a palette stops meaning anything.
*/

.sf-stack,
.sf-card-project__head,
.sf-stack-dot,
.sf-empty__swatches span {
  --stack: var(--sf-text-primary);
  --stack-tint: var(--sf-bg-elevated);
  --stack-line: var(--sf-border);
}

[data-stack="dotnet"] {
  --stack: #db2777;
  --stack-tint: #fdeef5;
  --stack-line: #f8d3e4;
}

[data-stack="iac"] {
  --stack: #0f766e;
  --stack-tint: #e8f6f4;
  --stack-line: #c8e9e4;
}

:root[data-theme="dark"] [data-stack="dotnet"] {
  --stack: #f472b6;
  --stack-tint: #2a1220;
  --stack-line: #43203a;
}

:root[data-theme="dark"] [data-stack="iac"] {
  --stack: #2dd4bf;
  --stack-tint: #0c2320;
  --stack-line: #164039;
}

.sf-stack {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--stack);
  color: #ffffff;
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* A stack with no identity colour is drawn in ink, which is near-white in the dark theme; white
   letters on it vanished. Ink takes the colour that reads on ink. */
.sf-stack:not([data-stack="dotnet"]):not([data-stack="iac"]) { color: var(--sf-text-on-ink); }

.sf-stack-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--stack);
  flex: none;
}

/* ---- The segmented spec bar ------------------------------------------------------------------ */

.sf-segments {
  display: flex;
  gap: 3px;
}

.sf-segments__part {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: var(--sf-track);
}

.sf-segments__part[data-state="running"]  { background: var(--sf-state-running); }
.sf-segments__part[data-state="awaiting"] { background: var(--sf-state-awaiting); }
.sf-segments__part[data-state="approved"] { background: var(--sf-state-approved); }
.sf-segments__part[data-state="failed"]   { background: var(--sf-state-failed); }
.sf-segments__part[data-state="forked"]   { background: var(--sf-state-forked); }

/* ---- The new-project card -------------------------------------------------------------------- */

.sf-card-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 236px;
  border: 1px dashed var(--sf-border-dashed);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--sf-text-secondary);
  text-decoration: none;
  transition: border-color var(--sf-transition-fast), background var(--sf-transition-fast);
}

.sf-card-new:hover {
  border-color: var(--sf-brand);
  background: var(--sf-bg-surface);
}

.sf-card-new__mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--sf-border-dashed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-text-body);
}

.sf-card-new__mark .mud-icon-root { width: 15px; height: 15px; }

.sf-card-new__label {
  font-size: var(--sf-text-md);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
}

.sf-card-new__hint { font-size: var(--sf-text-xs); }

/* ---- Recent activity -------------------------------------------------------------------------- */

.sf-activity {
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.sf-activity__head {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sf-border-divider);
}

.sf-activity__title {
  margin: 0;
  font-size: var(--sf-text-md);
  font-weight: var(--sf-weight-strong);
}

.sf-activity__all {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  text-decoration: none;
}

.sf-activity__all:hover { color: var(--sf-text-primary); text-decoration: underline; text-underline-offset: 2px; }

.sf-activity__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  min-height: 44px;
  text-decoration: none;
  color: var(--sf-text-primary);
  border-bottom: 1px solid var(--sf-border-divider);
}

.sf-activity__row:last-child { border-bottom: 0; }
.sf-activity__row:hover { background: var(--sf-bg-hover); }

.sf-activity__what {
  font-size: var(--sf-text-sm);
  white-space: nowrap;
}

.sf-activity__where {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-activity__when {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  flex: none;
}

.sf-activity__empty {
  margin: 0;
  padding: 18px;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}

/* A bare state dot, for rows that carry no pill. */
.sf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sf-state-queued);
  flex: none;
}

.sf-dot[data-state="running"]  { background: var(--sf-state-running); }
.sf-dot[data-state="awaiting"] { background: var(--sf-state-awaiting); }
.sf-dot[data-state="approved"] { background: var(--sf-state-approved); }
.sf-dot[data-state="failed"]   { background: var(--sf-state-failed); }
.sf-dot[data-state="forked"]   { background: var(--sf-state-forked); }

@media (max-width: 960px) {
  .sf-attention { flex-wrap: wrap; }
  .sf-attention__where { flex-basis: 100%; }
  .sf-activity__where { display: none; }
}

/* ---- Documents (shared by the workbench's artifact pane) --------------------------------- */

.sf-doc__body {
  max-width: var(--sf-reading-width);
  font-size: var(--sf-text-md);
  line-height: 1.65;
  color: var(--sf-text-body);
}

.sf-doc__body--rendered h1,
.sf-doc__body--rendered h2,
.sf-doc__body--rendered h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.sf-doc__body--rendered h1 { font-size: 1.25rem; }
.sf-doc__body--rendered h2 { font-size: 1.0625rem; }
.sf-doc__body--rendered h3 { font-size: 0.9375rem; }

.sf-doc__body--rendered pre { overflow-x: auto; }

.sf-doc__body--rendered table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--sf-text-sm);
}

.sf-doc__body--rendered th,
.sf-doc__body--rendered td {
  border: 1px solid var(--sf-border);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}

.sf-doc__body--source {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  line-height: 1.7;
  max-width: none;
}

.sf-doc__line {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 0 4px 0 0;
  border-radius: var(--radius-control);
  position: relative;
}

.sf-doc__line:hover { background: var(--sf-bg-hover); }

.sf-doc__ln {
  flex: 0 0 3.5ch;
  text-align: right;
  color: var(--sf-text-muted);
  -webkit-user-select: none;
  user-select: none;
  padding-top: 1px;
}

/* The comment affordance appears on hover and on keyboard focus, so it is reachable without a mouse. */
.sf-doc__add.mud-icon-button {
  opacity: 0;
  flex: 0 0 auto;
  padding: 2px;
  transition: opacity var(--sf-transition-fast);
}

.sf-doc__line:hover .sf-doc__add,
.sf-doc__add:focus-visible {
  opacity: 1;
}

.sf-doc__text {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Inline comments -------------------------------------------------------------------- */
/*
  A saved comment annotates its line; it never interrupts the document. One quiet row, truncated,
  expanded on demand.
*/

.sf-comment {
  margin: 2px 0 6px 5ch;
  padding: 6px 10px;
  border-left: 2px solid var(--sf-border-strong);
  background: var(--sf-bg-inset);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-family: var(--sf-font);
  font-size: var(--sf-text-sm);
  cursor: pointer;
}

.sf-comment--applied {
  border-left-color: var(--sf-state-approved);
  opacity: 0.75;
}

.sf-comment__summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-comment__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-comment__body {
  margin-top: 8px;
  white-space: pre-wrap;
  color: var(--sf-text-body);
}

/* ---- Rendered agent questions and reports ------------------------------------------------ */
/* Markdown from the agent, so the tags are whatever it wrote — these keep tables and long option
   lists inside their block instead of pushing the answer box off. */

.sf-question {
  font-size: var(--sf-text-md);
  overflow-x: auto;
}

.sf-question > :first-child { margin-top: 0; }
.sf-question > :last-child { margin-bottom: 0; }

.sf-question p,
.sf-question ul,
.sf-question ol {
  margin: 0.4rem 0;
}

.sf-question table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
  font-size: var(--sf-text-sm);
}

.sf-question th,
.sf-question td {
  border: 1px solid var(--sf-border);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}

.sf-question code {
  background: var(--sf-bg-elevated);
  padding: 1px 4px;
  border-radius: 4px;
}

/* ---- Sign-in ------------------------------------------------------------------------------ */

.sf-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.sf-auth__card {
  width: 100%;
  max-width: 400px;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
}

/* ---- Provider presets, project cards ------------------------------------------------------ */

.sf-preset {
  cursor: pointer;
  border-radius: var(--radius-card);
  transition: border-color var(--sf-transition-fast), background var(--sf-transition-fast);
}

.sf-preset:hover { background: var(--sf-bg-hover); }

/* Selection is a choice the person made, so it wears the action colour rather than more ink. */
.sf-preset.is-selected {
  border-color: var(--sf-brand-tint-border);
  background: var(--sf-brand-tint);
  color: var(--sf-brand-tint-ink);
}

.sf-project {
  cursor: pointer;
  height: 100%;
  transition: border-color var(--sf-transition-fast);
}

.sf-project:hover { border-color: var(--sf-border-strong); }

/* Only the title navigates, so the action menu can be reached without opening the project. */
.sf-project__open { cursor: pointer; }
.sf-project__open:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Archived items stay legible but visibly set aside. */
.sf-project--archived { opacity: 0.62; }

/* ---- Framework error banner ---------------------------------------------------------------- */
/* Blazor toggles display on this element by id; it stays hidden until it does. */

.sf-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  padding: 10px 20px;
  background: var(--sf-state-failed-tint);
  color: var(--sf-state-failed-ink);
  border-top: 1px solid var(--sf-state-failed);
  font-size: var(--sf-text-sm);
}

.sf-error-ui .reload { margin-left: 8px; }

.sf-error-ui .dismiss {
  float: right;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
}

/* ---- Narrow screens -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .sf-page { padding: 1rem; }
}

/* ---- Insights ------------------------------------------------------------------------------- */
/*
  Measurement, not reporting. The figures come first as plain numbers, because a number somebody
  needs to quote is worse as a wedge of a pie; the charts underneath are for shape and trend.

  Nothing on this page is a state except the failure count and the chart series that genuinely are
  states — a spend bar is a quantity, so it stays neutral.
*/

.sf-insights { display: flex; flex-direction: column; gap: 20px; }

.sf-insights__header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 0;
}

.sf-insights__scope { margin-left: auto; }

/* A real select, so it works with a keyboard and reads to a screen reader as what it is. */
.sf-select {
  font: inherit;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-primary);
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--radius-control);
  padding: 0 10px;
  min-height: 38px;
  min-width: 200px;
  cursor: pointer;
}

.sf-select:hover { border-color: var(--sf-border-control); }

/* ---- The figure row -------------------------------------------------------------------------- */

.sf-figures {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1400px) { .sf-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .sf-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sf-figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  min-width: 0;
}

.sf-figure__value {
  font-size: var(--sf-text-2xl);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-figure__value--failed { color: var(--sf-state-failed); }

.sf-figure__label {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
}

.sf-figure__note {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Panels ----------------------------------------------------------------------------------- */

.sf-panels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.sf-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  min-width: 0;
}

.sf-panel--half { grid-column: span 5; }
.sf-panel--wide { grid-column: span 7; }
.sf-panel--full { grid-column: span 12; }

@media (max-width: 1100px) {
  .sf-panel--half,
  .sf-panel--wide { grid-column: span 12; }
}

.sf-panel__title {
  margin: 0;
  font-size: 0.90625rem;
  font-weight: var(--sf-weight-strong);
}

.sf-panel__note {
  margin: 0 0 8px;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

.sf-panel__title + .sf-chart { margin-top: 12px; }
.sf-panel__title + .sf-cost-table { margin-top: 12px; }

/* ---- Cost tables -------------------------------------------------------------------------------- */

.sf-cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sf-text-sm);
}

.sf-cost-table th,
.sf-cost-table td {
  padding: 7px 8px;
  text-align: left;
  vertical-align: middle;
}

.sf-cost-table thead th {
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-regular);
  color: var(--sf-text-secondary);
  border-bottom: 1px solid var(--sf-border);
}

.sf-cost-table tbody tr + tr th,
.sf-cost-table tbody tr + tr td {
  border-top: 1px solid var(--sf-border-divider);
}

.sf-cost-table__number { text-align: right; }

.sf-cost-table__cost {
  color: var(--sf-text-primary);
  font-weight: var(--sf-weight-medium);
}

/* The share sits behind the name, not beside it: context for the figure, not a fifth number. */
.sf-cost-table__name {
  position: relative;
  font-weight: var(--sf-weight-regular);
  color: var(--sf-text-primary);
  min-width: 0;
  overflow: hidden;
}

.sf-cost-table__share {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  background: var(--sf-bg-selected);
  border-radius: 3px;
  max-width: 100%;
}

.sf-cost-table__text {
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-cost-table__empty {
  margin: 12px 0 0;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}

/* ---- Filter pills ---------------------------------------------------------------------------- */
/*
  A chosen filter wears the brand wash, the same one the active navigation item wears. One selected
  look across the product means a person learns it once.
*/

.sf-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--sf-radius-pill);
  padding: 0 12px;
  min-height: 30px;
  cursor: pointer;
  white-space: nowrap;
}

.sf-pill:hover { border-color: var(--sf-border-control); }

.sf-pill[aria-pressed="true"] {
  background: var(--sf-brand-tint);
  border-color: var(--sf-brand-tint-border);
  color: var(--sf-brand-tint-ink);
  font-weight: var(--sf-weight-strong);
}

.sf-pill__count { opacity: 0.7; }

.sf-field--compact { flex: 0 0 200px; min-height: 30px; }

/* ---- The project table ------------------------------------------------------------------------ */
/*
  A table drawn with grid rather than <table>, because every cell here is a small layout of its own —
  a tile beside two lines, a pill above a sentence, a bar above a count — and a table cell fights
  that. The column widths live in one place so the head and the rows cannot drift apart.
*/

.sf-table {
  --c-project: 300px;
  --c-now: minmax(0, 1fr);
  --c-specs: 180px;
  --c-stack: 110px;
  --c-people: 80px;
  --c-updated: 64px;
  --c-menu: 40px;

  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.sf-table__head,
.sf-table__row {
  display: grid;
  grid-template-columns:
    var(--c-project) var(--c-now) var(--c-specs)
    var(--c-stack) var(--c-people) var(--c-updated) var(--c-menu);
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}

.sf-table__head {
  height: 38px;
  background: var(--sf-bg-elevated);
  border-bottom: 1px solid var(--sf-border);
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

.sf-table__row {
  min-height: 76px;
  border-bottom: 1px solid var(--sf-border-divider);
}

.sf-table__row:last-child { border-bottom: 0; }
.sf-table__row:hover { background: var(--sf-bg-hover); }

/* Archived stays legible but visibly set aside. */
.sf-table__row--archived { opacity: 0.62; }

.sf-table__open {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: var(--sf-text-primary);
  align-self: stretch;
}

.sf-table__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sf-table__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: var(--sf-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-table__repo {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-table__c-now {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.sf-table__headline {
  font-size: var(--sf-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sf-table__detail { color: var(--sf-text-secondary); }

.sf-table__c-specs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sf-table__c-people { display: flex; }

.sf-table__c-updated { text-align: right; }

.sf-table__c-menu { display: flex; justify-content: flex-end; }

.sf-table__muted {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

.sf-table__empty {
  margin: 0;
  padding: 24px 20px;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}

/* A label, not a state: archived is a property of the row, not something an agent did. */
.sf-tag {
  font-size: var(--sf-text-2xs);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-secondary);
  background: var(--sf-bg-selected);
  border-radius: var(--sf-radius-pill);
  padding: 1px 7px;
  flex: none;
}

@media (max-width: 1280px) {
  .sf-table { --c-specs: 0px; --c-stack: 0px; }
  .sf-table__c-specs,
  .sf-table__c-stack { display: none; }
}

@media (max-width: 900px) {
  .sf-table { --c-project: minmax(0, 1fr); --c-now: 0px; --c-people: 0px; }
  .sf-table__c-now,
  .sf-table__c-people { display: none; }
}

/* ---- Avatars, stacked -------------------------------------------------------------------------- */

.sf-avatars { display: inline-flex; align-items: center; }

.sf-avatars__one,
.sf-avatars__more {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--sf-bg-surface);
  font-size: 9.5px;
  font-weight: var(--sf-weight-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
}

.sf-avatars__one + .sf-avatars__one,
.sf-avatars__one + .sf-avatars__more { margin-left: -8px; }

/* Four fixed tints, none of them a state hue, so a circle is identity and never status. */
.sf-avatars__one[data-tint="0"] { background: var(--sf-state-forked-tint); color: var(--sf-state-forked-ink); }
.sf-avatars__one[data-tint="1"] { background: #e3f1ef; color: #0f5f58; }
.sf-avatars__one[data-tint="2"] { background: #fdeef5; color: #9d174d; }
.sf-avatars__one[data-tint="3"] { background: #e8eefc; color: #2a4b9b; }

:root[data-theme="dark"] .sf-avatars__one[data-tint="1"] { background: #0c2320; color: #5eead4; }
:root[data-theme="dark"] .sf-avatars__one[data-tint="2"] { background: #2a1220; color: #f9a8d4; }
:root[data-theme="dark"] .sf-avatars__one[data-tint="3"] { background: #141c31; color: #a5c0f5; }

.sf-avatars__more {
  background: var(--sf-bg-selected);
  color: var(--sf-text-secondary);
}

/* ---- Large empty states -------------------------------------------------------------------------- */

.sf-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  background: var(--sf-bg-surface);
  border: 1px dashed var(--sf-border-dashed);
  border-radius: var(--sf-radius-lg);
}

.sf-empty__body {
  width: 520px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.sf-empty__swatches { display: flex; gap: 8px; }

.sf-empty__swatches span {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* Falls back to ink for a stack with no identity colour, so the row never draws nothing. */
  background: var(--stack, var(--sf-text-primary));
}

.sf-empty__title {
  margin: 0;
  font-size: var(--sf-text-2xl);
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-heading-tracking);
}

.sf-empty__lead {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--sf-text-body);
}

/* ---- One project ------------------------------------------------------------------------------ */
/*
  The header is tinted with the stack's identity colour, so the page says what kind of work this is
  before a word is read. The tint is fixed for the life of the project type and is never one of the
  six state hues, so it cannot be mistaken for a status.
*/

.sf-project-page { display: flex; flex-direction: column; min-height: 100%; }

.sf-project-head {
  background: var(--stack-tint);
  border-bottom: 1px solid var(--stack-line);
  padding: 24px var(--sf-page-gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sf-project-head__top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sf-stack--lg {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.0625rem;
}

.sf-project-head__id {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.sf-project-head__name {
  margin: 0;
  font-size: var(--sf-text-2xl);
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-heading-tracking);
}

.sf-project-head__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
}

.sf-project-head__dot { color: var(--sf-border-control); }

/* The header's own buttons sit on the tint, so their edge follows it rather than the page. */
.sf-project-head .mud-button-outlined {
  background: var(--sf-bg-surface);
  border-color: var(--stack-line);
}

/* ---- Tabs -------------------------------------------------------------------------------------- */

.sf-tabs { display: flex; gap: 22px; }

.sf-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 2px 13px;
  cursor: pointer;
  white-space: nowrap;
}

.sf-tabs__tab:hover { color: var(--sf-text-primary); }

.sf-tabs__tab[aria-current="page"] {
  color: var(--sf-text-primary);
  font-weight: var(--sf-weight-strong);
  border-bottom-color: var(--sf-brand);
}

.sf-tabs__count {
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-regular);
  color: var(--sf-text-secondary);
  background: var(--sf-bg-selected);
  border-radius: var(--sf-radius-pill);
  padding: 1px 7px;
}

.sf-tabs__count--on {
  color: var(--sf-brand-tint-ink);
  background: var(--sf-brand-tint);
}

/* ---- Body and aside ------------------------------------------------------------------------------ */

.sf-project-body {
  flex: 1 1 auto;
  display: flex;
  gap: 24px;
  padding: 24px var(--sf-page-gutter) 4rem;
  min-height: 0;
}

.sf-project-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sf-project-aside {
  width: 280px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 1200px) {
  .sf-project-body { flex-direction: column; }
  .sf-project-aside { width: auto; }
}

.sf-project-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sf-project-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--sf-weight-strong);
}

.sf-project-section__note {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}

.sf-panel__head { display: flex; align-items: center; }

.sf-panel__link {
  font: inherit;
  font-size: var(--sf-text-xs);
  color: var(--sf-brand-tint-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.sf-panel--danger { border-color: var(--sf-state-failed-border); }

.sf-danger {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.sf-danger__text {
  flex: 1 1 auto;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
}

.sf-danger__button.mud-button-outlined {
  color: var(--sf-state-failed);
  border-color: var(--sf-state-failed-border);
  flex: none;
}

/* ---- Fact lists ----------------------------------------------------------------------------------- */

.sf-facts {
  margin: 0;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px 12px;
  font-size: var(--sf-text-sm);
}

.sf-facts--tight { grid-template-columns: 104px minmax(0, 1fr); }

.sf-facts dt { color: var(--sf-text-secondary); }

.sf-facts dd {
  margin: 0;
  color: var(--sf-text-primary);
  overflow-wrap: anywhere;
}

/* ---- The spec list ---------------------------------------------------------------------------------- */

.sf-spec-list {
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.sf-spec-row {
  display: grid;
  grid-template-columns: 260px 220px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  min-height: 76px;
  border-bottom: 1px solid var(--sf-border-divider);
}

.sf-spec-row:last-child { border-bottom: 0; }

/* Waiting rows are tinted, so the one thing needing a person is findable without reading. */
.sf-spec-row--waiting {
  background: color-mix(in srgb, var(--sf-state-awaiting-tint) 45%, var(--sf-bg-surface));
}

.sf-spec-row:hover { background: var(--sf-bg-hover); }
.sf-spec-row--waiting:hover { background: var(--sf-state-awaiting-tint); }

.sf-spec-row__id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-decoration: none;
  color: var(--sf-text-primary);
  align-self: stretch;
  justify-content: center;
}

.sf-spec-row__title {
  font-size: 0.90625rem;
  font-weight: var(--sf-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The number takes the stack's colour: it is an identifier within this project, not a status. */
.sf-spec-row__number {
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-medium);
  color: var(--stack);
  margin-right: 4px;
}

.sf-spec-row__sub {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-spec-row__when { font-family: var(--sf-font); }

.sf-spec-row__phases {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.sf-spec-row__summary {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-segments--tall { gap: 4px; }
.sf-segments--tall .sf-segments__part { height: 5px; border-radius: 3px; }

.sf-spec-row__state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.sf-spec-row__action { display: flex; justify-content: flex-end; }

.sf-spec-row__open {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  text-decoration: none;
}

.sf-spec-row__open:hover {
  color: var(--sf-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1400px) {
  .sf-spec-row { grid-template-columns: 240px 180px minmax(0, 1fr) 110px; }
}

@media (max-width: 1000px) {
  .sf-spec-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .sf-spec-row__phases,
  .sf-spec-row__state { display: none; }
}

/* A dashed row rather than another filled button: it adds to the list above it. */
.sf-add-row {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-brand-tint-ink);
  background: transparent;
  border: 1px dashed var(--sf-brand-tint-border);
  border-radius: var(--radius-control);
  padding: 0 14px;
  min-height: 38px;
  cursor: pointer;
}

.sf-add-row:hover { background: var(--sf-brand-tint); }

/* ---- People and timeline ------------------------------------------------------------------------------ */

.sf-people { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.sf-people__row { display: flex; align-items: center; gap: 10px; min-width: 0; }

.sf-people__name {
  font-size: var(--sf-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-people__role {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  flex: none;
}

.sf-timeline { display: flex; flex-direction: column; margin-top: 4px; }

.sf-timeline__row { display: flex; gap: 10px; padding: 8px 0; }

.sf-timeline__row .sf-dot { margin-top: 6px; }

.sf-timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.sf-timeline__what { font-size: var(--sf-text-sm); line-height: 1.4; }

.sf-timeline__when { font-size: var(--sf-text-xs); color: var(--sf-text-secondary); }

/* ---- Creating a project ------------------------------------------------------------------------ */
/*
  Numbered sections down the left, a live preview on the right. Each section is a label and a hint
  beside its fields, so the question and the answer are on one line of sight — which is the thing a
  stepper takes away in exchange for hiding four fifths of the form.
*/

.sf-new { max-width: 1200px; }

.sf-new__header { margin-bottom: 4px; }

.sf-new__body {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.sf-new__form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.sf-new__preview {
  width: 300px;
  flex: none;
  position: sticky;
  top: calc(var(--sf-bar-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-new__preview-label {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

/* The preview is a card, not a control: nothing on it navigates. */
.sf-card-project--preview { cursor: default; }
.sf-card-project--preview:hover { border-color: var(--sf-border); }

@media (max-width: 1100px) {
  .sf-new__body { flex-direction: column; }
  .sf-new__preview { width: 100%; position: static; }
}

/* ---- One section --------------------------------------------------------------------------------- */

.sf-section {
  display: flex;
  gap: 28px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--sf-border-divider);
}

.sf-section:last-of-type { border-bottom: 0; }

.sf-section__side {
  width: 220px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-section__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.90625rem;
  font-weight: var(--sf-weight-strong);
  color: var(--sf-text-primary);
}

/* The number is an ordinal, not a status: it wears the brand wash, which is never a state hue. */
.sf-section__number {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sf-brand-tint);
  color: var(--sf-brand-tint-ink);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sf-section__hint {
  font-size: var(--sf-text-xs);
  line-height: 1.45;
  color: var(--sf-text-secondary);
}

.sf-section__fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sf-section__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sf-section__note {
  margin: 0;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

@media (max-width: 820px) {
  .sf-section { flex-direction: column; gap: 14px; }
  .sf-section__side { width: auto; }
  .sf-section__pair { grid-template-columns: minmax(0, 1fr); }
}

.sf-new__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  border-top: 1px solid var(--sf-border);
  background: var(--sf-bg-elevated);
}

/* ---- Choice cards ---------------------------------------------------------------------------------- */
/*
  A pressed card rather than a radio, because each option carries a tile, a name and a sentence, and
  a radio label with three lines in it stops reading as a choice.
*/

.sf-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.sf-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: inherit;
  text-align: left;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--sf-transition-fast), background var(--sf-transition-fast);
}

.sf-choice:hover { border-color: var(--sf-border-control); }

.sf-choice[aria-pressed="true"] {
  border-color: var(--sf-brand);
  background: var(--sf-brand-tint);
}

.sf-choice__top { display: flex; align-items: center; width: 100%; }

.sf-choice__tick {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sf-brand);
  color: var(--sf-brand-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sf-choice__tick .mud-icon-root { width: 12px; height: 12px; }

.sf-choice__name {
  font-size: var(--sf-text-md);
  font-weight: var(--sf-weight-strong);
  color: var(--sf-text-primary);
}

.sf-choice__hint {
  font-size: var(--sf-text-xs);
  line-height: 1.45;
  color: var(--sf-text-secondary);
}

/* ---- Step ownership ---------------------------------------------------------------------------------- */

.sf-owners { display: flex; flex-direction: column; gap: 10px; }

.sf-owners__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.sf-owners__step {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
}

/* ---- Provisioning ------------------------------------------------------------------------------------- */

.sf-progress { display: flex; flex-direction: column; }

.sf-progress__label {
  font-size: var(--sf-text-md);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
}

.sf-progress__note {
  margin: 12px 0 0;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

/* ---- The activity feed --------------------------------------------------------------------- */
/*
  A log, so it is read down a narrow column rather than across a wide one. Days are headings between
  cards rather than rows inside one, which is what lets somebody skip a day without reading it.
*/

.sf-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
}

.sf-feed__day {
  margin: 8px 0 0;
  font-size: 0.78125rem;
  font-weight: var(--sf-weight-strong);
  letter-spacing: 0.02em;
  color: var(--sf-text-secondary);
}

.sf-feed__group {
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  padding: 4px 20px;
}

.sf-feed__row {
  display: flex;
  gap: 14px;
  padding: 12px 0;
}

.sf-feed__row + .sf-feed__row { border-top: 1px solid var(--sf-border-divider); }

/* An agent wears the brand mark; a person wears their initials. The mark is a fixed gradient, so
   it is identity and can never be mistaken for a state. */
.sf-feed__actor {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: var(--sf-text-2xs);
  font-weight: var(--sf-weight-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 0;
  box-sizing: border-box;
}

.sf-feed__actor--agent {
  border-radius: 8px;
  background: var(--sf-brand-gradient);
  color: #ffffff;
  font-family: var(--sf-font-mono);
  font-size: 10px;
}

.sf-feed__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-feed__what {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--sf-text-md);
  color: var(--sf-text-primary);
}

.sf-feed__where {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sf-feed__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-primary);
  text-decoration: none;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-feed__link:hover { text-decoration: underline; text-underline-offset: 2px; }

.sf-feed__spec { color: var(--sf-text-secondary); }

.sf-feed__when {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  flex: none;
}

/* What was said, quoted rather than summarised: the words are the reason the row is worth reading. */
.sf-feed__quote {
  font-size: var(--sf-text-sm);
  line-height: 1.5;
  color: var(--sf-text-body);
  background: var(--sf-bg-inset);
  border: 1px solid var(--sf-border-divider);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sf-feed__more {
  max-width: 860px;
  margin: 4px 0 0;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

/* A comment is neither a pipeline state nor a wait: it is a person speaking. The brand is the only
   colour in the product that is not a state, which is what makes it right here. */
.sf-dot[data-state="comment"] { background: var(--sf-brand); }

.sf-select--compact { min-width: 170px; min-height: 32px; }

/* ---- One spec ---------------------------------------------------------------------------------- */
/*
  A white header carrying the title and the five phases, then two columns: what the agent is doing
  or what it produced on the left, and the review, controls and facts on the right. The header never
  changes between states; the body does, which is why the four design boards are one page.
*/

.sf-spec-page { display: flex; flex-direction: column; min-height: 100%; }

.sf-spec-head {
  background: var(--sf-bg-surface);
  border-bottom: 1px solid var(--sf-border);
  padding: 20px var(--sf-page-gutter) 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sf-spec-head__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The stack's colour as a bar, not a tint: the page is about the spec, the project is context. */
.sf-spec-head__bar {
  width: 6px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--stack, var(--sf-text-primary));
  flex: none;
}

.sf-spec-head__bar[data-stack="other"] { --stack: var(--sf-border-control); }

.sf-spec-head__id {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.sf-spec-head__crumbs.mud-breadcrumbs { font-size: var(--sf-text-xs); }
.sf-spec-head__crumbs .mud-breadcrumb-item a { color: var(--sf-text-secondary); }

.sf-spec-head__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: var(--sf-weight-strong);
  letter-spacing: var(--sf-heading-tracking);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-spec-head__title:focus { outline: none; }

/* The number is an identifier within its project, so it wears the project's colour. */
.sf-spec-head__number {
  font-size: 1.125rem;
  font-weight: var(--sf-weight-medium);
  color: var(--stack, var(--sf-text-secondary));
  margin-right: 6px;
}

.sf-spec-head__number[data-stack="other"] { --stack: var(--sf-text-secondary); }

.sf-spec-head__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}

.sf-spec-head__empty {
  margin: 0;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}

/* ---- The stepper -------------------------------------------------------------------------------- */
/*
  Five equal steps. The current one is outlined in its state's colour with a soft ring, so it can be
  found without reading; every step also says what it is doing in words, so colour is never the only
  thing carrying the state.
*/

.sf-stepper { display: flex; gap: 8px; }

.sf-stepper__step {
  --step: var(--sf-state-queued);
  --step-tint: var(--sf-state-queued-tint);
  --step-ink: var(--sf-text-secondary);

  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  color: var(--sf-text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--sf-transition-fast), border-color var(--sf-transition-fast);
}

.sf-stepper__step:hover:not(:disabled) { background: var(--sf-bg-hover); }
.sf-stepper__step:disabled { cursor: default; }

.sf-stepper__step[data-state="running"]  { --step: var(--sf-state-running);  --step-tint: var(--sf-state-running-tint);  --step-ink: var(--sf-state-running-ink); }
.sf-stepper__step[data-state="awaiting"] { --step: var(--sf-state-awaiting); --step-tint: var(--sf-state-awaiting-tint); --step-ink: var(--sf-state-awaiting-ink); }
.sf-stepper__step[data-state="approved"] { --step: var(--sf-state-approved); --step-tint: var(--sf-state-approved-tint); --step-ink: var(--sf-text-secondary); }
.sf-stepper__step[data-state="failed"]   { --step: var(--sf-state-failed);   --step-tint: var(--sf-state-failed-tint);   --step-ink: var(--sf-state-failed-ink); }
.sf-stepper__step[data-state="forked"]   { --step: var(--sf-state-forked);   --step-tint: var(--sf-state-forked-tint);   --step-ink: var(--sf-state-forked-ink); }

.sf-stepper__step[aria-current="step"] {
  background: var(--sf-bg-surface);
  border-color: var(--step);
  box-shadow: 0 0 0 3px var(--step-tint);
}

/* The phase whose output is open, when it is not the current one. */
.sf-stepper__step[aria-pressed="true"]:not([aria-current="step"]) {
  background: var(--sf-bg-selected);
}

.sf-stepper__mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-strong);
  color: var(--sf-text-secondary);
  background: var(--sf-bg-surface);
  border: 1.5px solid var(--sf-border-dashed);
}

.sf-stepper__mark .mud-icon-root { width: 13px; height: 13px; }

/* Settled and reached phases fill with their colour; not-started stays an outlined numeral. */
.sf-stepper__step:not([data-state="queued"]) .sf-stepper__mark {
  background: var(--step);
  border-color: var(--step);
  color: #ffffff;
}

.sf-stepper__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  animation: sf-activity 1.4s ease-in-out infinite;
}

.sf-stepper__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sf-stepper__label {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-medium);
  white-space: nowrap;
}

.sf-stepper__step[aria-current="step"] .sf-stepper__label { font-weight: var(--sf-weight-strong); }

.sf-stepper__meta {
  font-size: var(--sf-text-xs);
  color: var(--step-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .sf-stepper { overflow-x: auto; scrollbar-width: none; }
  .sf-stepper__step { flex: 0 0 auto; }
}

/* ---- What sits under a phase ------------------------------------------------------------------------ */

.sf-subnodes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -6px;
}

.sf-subnodes__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-body);
  background: var(--sf-bg-inset);
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--sf-radius-pill);
  padding: 0 10px;
  min-height: 26px;
  cursor: pointer;
}

.sf-subnodes__item[aria-pressed="true"] {
  background: var(--sf-brand-tint);
  border-color: var(--sf-brand-tint-border);
  color: var(--sf-brand-tint-ink);
}

.sf-subnodes__meta { color: var(--sf-text-secondary); }

/* ---- Body -------------------------------------------------------------------------------------------- */

.sf-spec-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px var(--sf-page-gutter) 3rem;
  min-width: 0;
}

.sf-spec-columns {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.sf-spec-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.sf-spec-aside {
  width: 340px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--sf-bar-height) + 16px);
}

@media (max-width: 1280px) {
  .sf-spec-columns { flex-direction: column; align-items: stretch; }
  .sf-spec-aside { width: auto; position: static; }
}

/* ---- The view tabs ------------------------------------------------------------------------------------- */

.sf-viewtabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  border-bottom: 1px solid var(--sf-border);
  background: var(--sf-bg-elevated);
  overflow-x: auto;
  scrollbar-width: none;
}

.sf-viewtabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 11px 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.sf-viewtabs__tab:hover { color: var(--sf-text-primary); }

.sf-viewtabs__tab[aria-selected="true"] {
  color: var(--sf-text-primary);
  font-weight: var(--sf-weight-strong);
  border-bottom-color: var(--sf-brand);
}

.sf-viewtabs__file {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

/* The console scrolls within itself, so it can stay pinned to the newest row while the page does not. */
.sf-spec-console {
  max-height: calc(100dvh - 300px);
  min-height: 360px;
  overflow-y: auto;
  padding: 16px 18px;
}

.sf-spec-console[hidden] { display: none; }

.sf-spec-artifact { padding: 16px 18px; min-width: 0; }

.sf-spec-main .sf-filelist { padding: 10px 18px 0; }

/* ---- Comments in the aside ------------------------------------------------------------------------------ */

.sf-comments { display: flex; flex-direction: column; margin-top: 6px; }

.sf-comments__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--sf-border-divider);
  padding: 10px 0;
  cursor: pointer;
}

.sf-comments__item:first-child { border-top: 0; }

.sf-comments__item:hover .sf-comments__body { color: var(--sf-text-primary); }

/* Applied or dismissed comments stay listed but step back. */
.sf-comments__item--settled { opacity: 0.6; }

.sf-comments__who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sf-text-xs);
}

.sf-comments__name { font-weight: var(--sf-weight-strong); color: var(--sf-text-primary); }

.sf-comments__where { color: var(--sf-text-secondary); font-size: var(--sf-text-2xs); }

.sf-comments__body {
  font-size: var(--sf-text-sm);
  line-height: 1.45;
  color: var(--sf-text-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The approval bar was drawn for the foot of a narrow stream; given the full width it gets the
   awaiting tint so it reads as the thing the page is waiting on. */
.sf-spec-body > .sf-approval {
  margin: 0;
  padding: 16px 20px;
  background: var(--sf-state-awaiting-tint);
  border: 1px solid var(--sf-state-awaiting-border);
  border-radius: var(--radius-card);
}

/* ---- The git row in the phase panel ------------------------------------------------------------ */
/* The branch chip may shrink below its content so a long branch name cannot push the Push button
   out of a narrow column. min-width: 0 is what lets a flex child truncate at all. */
.sf-gitrow { min-width: 0; }

.sf-gitrow .sf-gitrow__branch.mud-chip {
  max-width: 100%;
  min-width: 0;
}

.sf-gitrow .sf-gitrow__branch .mud-chip-content {
  min-width: 0;
  overflow: hidden;
}

.sf-gitrow .sf-gitrow__branch .mud-chip-content > span,
.sf-gitrow .sf-gitrow__branch .mud-chip-content {
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Anything in the side panel stays inside it. */
.sf-spec-aside .sf-panel { min-width: 0; overflow-wrap: anywhere; }

/* ---- The command palette ------------------------------------------------------------------------- */
/*
  A floating surface, so it takes the one shadow the product allows floating surfaces. It sits in
  the upper third rather than the centre: the eye is already at the top bar when it opens, and a
  list that grows downward from there does not jump as results change.
*/

.sf-palette {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(17, 19, 24, 0.32);
}

:root[data-theme="dark"] .sf-palette { background: rgba(0, 0, 0, 0.55); }

.sf-palette__dialog {
  width: 640px;
  max-width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--sf-bg-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--sf-shadow-float);
  overflow: hidden;
}

.sf-palette__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sf-border);
}

.sf-palette__icon.mud-icon-root { width: 18px; height: 18px; color: var(--sf-text-secondary); flex: none; }

.sf-palette__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--sf-text-primary);
  background: transparent;
  border: 0;
  outline: none;
  padding: 16px 0;
}

.sf-palette__input::placeholder { color: var(--sf-text-secondary); }

.sf-palette__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
}

.sf-palette__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
}

/* The highlighted row wears the selection wash every other chosen thing in the product wears. */
.sf-palette__option[aria-selected="true"] { background: var(--sf-brand-tint); }
.sf-palette__option[aria-selected="true"] .sf-palette__title { color: var(--sf-brand-tint-ink); }

.sf-palette__kind {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--sf-bg-selected);
  color: var(--sf-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sf-palette__kind .mud-icon-root { width: 15px; height: 15px; }

.sf-palette__kind[data-kind="Action"] { background: var(--sf-brand-tint); color: var(--sf-brand-tint-ink); }

.sf-palette__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.sf-palette__title {
  font-size: var(--sf-text-md);
  color: var(--sf-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-palette__subtitle {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-palette__type {
  font-size: var(--sf-text-2xs);
  color: var(--sf-text-secondary);
  flex: none;
  width: 48px;
  text-align: right;
}

.sf-palette__empty {
  margin: 0;
  padding: 24px 18px;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}

.sf-palette__foot {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--sf-border);
  background: var(--sf-bg-elevated);
  font-size: var(--sf-text-2xs);
  color: var(--sf-text-secondary);
}

.sf-palette__foot .sf-search__key { margin-right: 3px; }

@media (max-width: 600px) {
  .sf-palette { padding-top: 16px; }
  .sf-palette__foot { display: none; }
  .sf-palette__type { display: none; }
}

/* ---- Settings ------------------------------------------------------------------------------------ */
/*
  One heading for the whole of Settings, a section menu on the left, and each page in the column
  beside it. A page's own heading becomes the section's heading, one size down, so there is exactly
  one page title on screen.
*/

.sf-settings { display: flex; flex-direction: column; gap: 20px; }

.sf-settings__head { margin: 0; }

.sf-settings__body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.sf-settings__nav {
  width: 200px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: calc(var(--sf-bar-height) + 16px);
}

.sf-settings__group {
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-secondary);
  padding: 14px 12px 4px;
}

.sf-settings__group:first-child { padding-top: 0; }

.sf-settings__link {
  display: flex;
  align-items: center;
  padding: 0 12px;
  min-height: 34px;
  border-radius: var(--radius-control);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
  text-decoration: none;
}

.sf-settings__link:hover { background: var(--sf-bg-hover); color: var(--sf-text-primary); }

/* The same wash as the active sidebar link: one "you are here" look across the product. */
.sf-settings__link[aria-current="page"] {
  background: var(--sf-brand-tint);
  color: var(--sf-brand-tint-ink);
  font-weight: var(--sf-weight-strong);
}

.sf-settings__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* A settings page's own header is now a section heading, not a second page title. */
.sf-settings__content > .sf-page__header { margin-bottom: 0; }

.sf-settings__content > .sf-page__header .sf-page__title,
.sf-settings__content .sf-page__header .sf-page__title {
  font-size: var(--sf-text-xl);
  letter-spacing: -0.01em;
}

.sf-settings__content .sf-page__subtitle {
  font-size: var(--sf-text-sm);
  max-width: 68ch;
}

@media (max-width: 960px) {
  .sf-settings__body { flex-direction: column; }
  .sf-settings__nav {
    width: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sf-settings__group { display: none; }
}

/* ---- A card of settings sections --------------------------------------------------------------------- */

.sf-settings-card {
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.sf-settings-card .sf-section__label { margin: 0; }

/* Label and control on one line, the control taking what is left. */
.sf-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sf-inline > .mud-input-control { flex: 1 1 auto; max-width: 28rem; }
.sf-inline > .mud-button-root { margin-top: 6px; flex: none; }

.sf-settings-block { display: flex; flex-direction: column; gap: 10px; }

.sf-settings-block__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.sf-settings-block__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--sf-weight-strong);
}

.sf-settings-block__note { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }

/* ---- A person in a table row ---------------------------------------------------------------------------- */

.sf-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sf-person .sf-avatar { cursor: default; }
.sf-person__text { display: flex; flex-direction: column; min-width: 0; }
.sf-person__name { font-size: var(--sf-text-sm); color: var(--sf-text-primary); }
.sf-person__email { font-size: var(--sf-text-xs); color: var(--sf-text-secondary); }

.sf-tag + .sf-tag { margin-left: 4px; }

/* ---- The first visit ------------------------------------------------------------------------------ */

.sf-empty--first { flex: 1 1 auto; min-height: 520px; }

.sf-empty__intro { display: flex; flex-direction: column; gap: 8px; }

.sf-empty__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.sf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sf-steps__item { display: flex; gap: 12px; align-items: flex-start; }

/* An ordinal, not a status, so it wears the brand wash rather than a state hue. */
.sf-steps__number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sf-brand-tint);
  color: var(--sf-brand-tint-ink);
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sf-steps__text { display: flex; flex-direction: column; gap: 3px; }
.sf-steps__title { font-size: var(--sf-text-md); font-weight: var(--sf-weight-medium); color: var(--sf-text-primary); }
.sf-steps__hint { font-size: var(--sf-text-sm); line-height: 1.45; color: var(--sf-text-secondary); }

/* ---- The notification bell ------------------------------------------------------------------------ */

.sf-bell { position: relative; }

.sf-bell__button {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  border: 1px solid var(--sf-border-strong);
  background: var(--sf-bg-surface);
  color: var(--sf-text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sf-bell__button:hover { border-color: var(--sf-border-control); }
.sf-bell__button .mud-icon-root { width: 15px; height: 15px; }

/* The count wears the awaiting colour: most of what the bell reports is something waiting on you. */
.sf-bell__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: var(--sf-radius-pill);
  border: 1.5px solid var(--sf-bg-surface);
  background: var(--sf-state-awaiting);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: var(--sf-weight-strong);
  line-height: 13px;
  text-align: center;
}

.sf-bell__scrim { position: fixed; inset: 0; z-index: 1300; }

.sf-bell__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1301;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--sf-bg-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--sf-shadow-float);
  overflow: hidden;
}

.sf-bell__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sf-border);
}

.sf-bell__title { margin: 0; font-size: var(--sf-text-md); font-weight: var(--sf-weight-strong); }

.sf-bell__new {
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-state-awaiting-ink);
  background: var(--sf-state-awaiting-tint);
  border-radius: var(--sf-radius-pill);
  padding: 1px 8px;
}

.sf-bell__list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }

.sf-bell__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-control);
  text-decoration: none;
  color: var(--sf-text-primary);
}

.sf-bell__item:hover { background: var(--sf-bg-hover); }
.sf-bell__item .sf-dot { margin-top: 6px; }

/* New since the last look: the brand wash, and the headline one weight up. */
.sf-bell__item--unread { background: var(--sf-brand-tint); }
.sf-bell__item--unread:hover { background: var(--sf-brand-tint); filter: brightness(0.98); }
.sf-bell__item--unread .sf-bell__headline { font-weight: var(--sf-weight-strong); }

.sf-bell__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sf-bell__headline { font-size: var(--sf-text-sm); line-height: 1.4; }

.sf-bell__where {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-bell__when { font-size: var(--sf-text-xs); color: var(--sf-text-secondary); flex: none; }

.sf-bell__empty { margin: 0; padding: 20px 16px; font-size: var(--sf-text-sm); line-height: 1.5; color: var(--sf-text-secondary); }

.sf-bell__foot {
  display: block;
  padding: 11px 16px;
  border-top: 1px solid var(--sf-border);
  background: var(--sf-bg-elevated);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  text-decoration: none;
}

.sf-bell__foot:hover { color: var(--sf-text-primary); }

.sf-bell__why { font-size: var(--sf-text-2xs); color: var(--sf-text-secondary); }

/* Dealt with since it was sent: still listed, as a record, but stepped back. */
.sf-bell__item--resolved .sf-bell__headline { color: var(--sf-text-secondary); text-decoration: line-through; text-decoration-color: var(--sf-border-control); }

/* ---- Notification settings ------------------------------------------------------------------------- */

.sf-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
}

.sf-delivery { display: inline-flex; align-items: center; gap: 7px; font-size: var(--sf-text-sm); }
.sf-delivery__why { max-width: 42ch; margin-top: 2px; overflow-wrap: anywhere; }

/* ---- Compliance (D35) ----------------------------------------------------------------------------- */

/*
  Controls are listed, not carded: a catalogue is read down a column, key first. Kind, draft and
  policy-as-code are labels (.sf-tag), never colours; the one state hue used is awaiting, for a waiver
  that is waiting on Security, because that is a person being waited on.
*/
.sf-controls {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-card);
  background: var(--sf-bg-surface);
  overflow: hidden;
}

.sf-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: start;
  padding: 12px 16px;
  border-top: 1px solid var(--sf-border);
}

.sf-control:first-child { border-top: 0; }

.sf-control__key {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
  background: var(--sf-bg-elevated);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  padding: 1px 7px;
  white-space: nowrap;
  margin-top: 1px;
}

.sf-control__main { min-width: 0; }

.sf-control__title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-text-primary);
}

.sf-control__text {
  margin: 3px 0 0;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
  max-width: 88ch;
}

.sf-control__refs {
  margin: 4px 0 0;
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-2xs);
  color: var(--sf-text-secondary);
}

.sf-control__why {
  margin: 4px 0 0;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

.sf-control__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sf-control__detail {
  grid-column: 2 / -1;
  margin-top: 6px;
  display: grid;
  gap: 8px;
}

.sf-control__cloud {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
}

.sf-control__cloud strong { color: var(--sf-text-primary); font-weight: var(--sf-weight-medium); }

.sf-control__types {
  display: block;
  margin-top: 2px;
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-2xs);
  color: var(--sf-text-secondary);
  overflow-wrap: anywhere;
}

.sf-control__waiver {
  grid-column: 2 / -1;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  background: var(--sf-bg-elevated);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
}

.sf-control--retired .sf-control__title,
.sf-control--waived .sf-control__title { color: var(--sf-text-secondary); }

/* A pick list in the New spec dialog: a checkbox beside each control, the reason under it. */
.sf-control--pick { grid-template-columns: auto auto minmax(0, 1fr); cursor: pointer; }
.sf-control--pick:hover { background: var(--sf-bg-hover); }
.sf-control--locked { cursor: default; }
.sf-control--locked:hover { background: transparent; }

.sf-control-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 8px;
}

.sf-control-group__title {
  margin: 0;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-strong);
  color: var(--sf-text-primary);
}

.sf-control-group__hint { font-size: var(--sf-text-xs); color: var(--sf-text-secondary); }

.sf-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sf-filters .mud-input-control { max-width: 280px; }

.sf-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.sf-compliance-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-control);
  background: var(--sf-bg-elevated);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-body);
}

.sf-compliance-note .mud-icon-root { flex: none; margin-top: 1px; color: var(--sf-text-secondary); }

/* A note that lists controls: the list reads as part of the sentence above it, not as a bulleted aside. */
.sf-compliance-note__list {
  margin: 6px 0 8px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-compliance-note__list .sf-mono { color: var(--sf-text-primary); }

.sf-baseline {
  padding: 14px 16px;
  border-top: 1px solid var(--sf-border);
}

.sf-baseline:first-child { border-top: 0; }

.sf-baseline__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-baseline__name { font-size: var(--sf-text-sm); font-weight: var(--sf-weight-strong); color: var(--sf-text-primary); }
.sf-baseline__keys { margin: 6px 0 0; font-family: var(--sf-font-mono); font-size: var(--sf-text-2xs); color: var(--sf-text-secondary); overflow-wrap: anywhere; }
.sf-baseline__assignments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.sf-assignment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 9px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-pill);
  font-size: var(--sf-text-xs);
  color: var(--sf-text-body);
}

.sf-assignment strong { font-weight: var(--sf-weight-medium); color: var(--sf-text-primary); }

@media (max-width: 720px) {
  .sf-control { grid-template-columns: minmax(0, 1fr); }
  .sf-control--pick { grid-template-columns: auto minmax(0, 1fr); }
  .sf-control__actions { justify-content: flex-start; }
  .sf-control__detail, .sf-control__waiver { grid-column: 1 / -1; }
}

/* One scanner result behind a control's verdict (D35, phase 2). */
.sf-finding {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-body);
}

.sf-finding__where { color: var(--sf-text-secondary); overflow-wrap: anywhere; }

/* ---- Architecture (D36) ---------------------------------------------------------------------
   The solution as its code declares it. One box per file, a node per resource, arrows for the
   references between them. Everything is drawn from the derived graph, so the styling here is
   about legibility only: shape and colour carry meaning, and nothing is decorative. */

.sf-architecture {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.sf-architecture__canvas {
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-panel);
  background: var(--sf-bg-inset);
  padding: 12px;
  overflow-x: auto;
}

/* The direct child only. A descendant selector here also matched every glyph nested inside the
   drawing — two classes beat one — and each icon rendered at the canvas's own width. */
.sf-architecture__canvas > svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

/* A file: a quiet frame, named, holding its resources. */
.sf-arch-group rect {
  fill: var(--sf-bg-elevated);
  stroke: var(--sf-border);
  stroke-dasharray: 4 4;
}

.sf-arch-group text {
  fill: var(--sf-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sf-arch-edge {
  fill: none;
  stroke: var(--sf-border-strong);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

/* A declared dependency is the stronger claim, so it is the solid line. */
.sf-arch-edge--strong {
  stroke-dasharray: none;
  stroke-width: 1.4;
}

.sf-arch-node rect {
  fill: var(--sf-bg-surface);
  stroke: var(--sf-border);
}

.sf-arch-node__accent { stroke: none; }

.sf-arch-node__icon svg {
  width: 22px;
  height: 22px;
  min-width: 0;
}

.sf-arch-node__label {
  fill: var(--sf-text-primary);
  font-size: 13px;
  font-weight: 600;
}

.sf-arch-node__type,
.sf-arch-node__badges {
  fill: var(--sf-text-secondary);
  font-size: 11px;
}

.sf-arch-node__badges { fill: var(--sf-text-tertiary); }

/* A scan reached this resource: the verdict takes the state hue it takes everywhere else. */
.sf-arch-node[data-verdict="passed"] .sf-arch-node__dot { fill: var(--sf-state-approved); }
.sf-arch-node[data-verdict="failed"] .sf-arch-node__dot { fill: var(--sf-state-failed); }

.sf-arch-node[data-verdict="failed"] rect:first-of-type {
  stroke: var(--sf-state-failed);
  stroke-width: 1.4;
}

.sf-arch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
}

.sf-arch-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-arch-legend__icon svg {
  width: 14px;
  height: 14px;
  color: var(--sf-text-tertiary);
}

.sf-arch-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* The three drawings sit behind a tab strip of their own, inside the panel's own tab strip, so it
   is smaller and quieter than the one above it. */
.sf-viewtabs--inline {
  border: 0;
  padding: 0;
  gap: 2px;
  min-height: 0;
}

.sf-viewtabs--inline .sf-viewtabs__tab {
  font-size: var(--sf-text-xs);
  padding: 4px 10px;
}

.sf-arch-diff {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-arch-diff__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  color: var(--sf-text-tertiary);
}

.sf-arch-diff__icon svg { width: 18px; height: 18px; }

/* Something the plan promised and the code does not contain: the failed hue, as everywhere else. */
.sf-arch-diff__missing { border-left: 2px solid var(--sf-state-failed); }

/* ---- Customer workshops (D37) ---------------------------------------------------------- */

/* One question in a round. Bordered rather than spaced, because the analyst is reading these
   aloud one at a time and needs to see where one ends and the next begins at a glance. */
.sf-workshop-q {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.sf-workshop-q__title {
  font-size: var(--sf-text-md);
  font-weight: 600;
  margin: 0 0 6px;
}

/* The interviewer's recommended answer. Deliberately quieter than the question: it is there to
   react to, and a customer reading it as the expected answer is the failure mode. */
.sf-workshop-q__rec {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 12px;
  padding: 8px 10px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-bg-inset);
  color: var(--sf-text-secondary);
  font-size: var(--sf-text-sm);
}

.sf-workshop-f {
  border-top: 1px solid var(--sf-border);
  padding: 12px 0;
}

.sf-workshop-f:first-of-type { border-top: 0; }

.sf-workshop-f__title {
  font-size: var(--sf-text-md);
  font-weight: 600;
  margin: 0 0 4px;
}

/* AI per step (D43). A grid rather than a table element so the rows can stack on a narrow screen,
   where four columns of dropdowns would otherwise scroll sideways. */
.sf-ai-table__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--sf-border);
}

.sf-ai-table__row:has(> :nth-child(3):last-child) {
  grid-template-columns: minmax(180px, 1.3fr) minmax(160px, 1fr) minmax(160px, 1fr);
}

.sf-ai-table__head {
  border-top: 0;
  padding-top: 0;
  font-size: var(--sf-text-sm);
  font-weight: 600;
  color: var(--sf-text-secondary);
}

.sf-ai-table__problem {
  color: var(--mud-palette-error);
  font-size: var(--sf-text-sm);
}

@media (max-width: 760px) {
  .sf-ai-table__row,
  .sf-ai-table__row:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; gap: 6px; }
  .sf-ai-table__head { display: none; }
}

.sf-provider-model {
  padding: 8px 0;
  border-top: 1px dashed var(--sf-border);
}

/* What was read out of an attached design (D42): verbatim, because it is exactly what the model is
   shown. Wraps rather than scrolling sideways, and scrolls down rather than taking the page. */
.sf-workshop-reading {
  margin: 8px 0 0;
  padding: 8px 12px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--sf-text-sm);
  background: var(--sf-surface-2, transparent);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
}

/* The platform's default prompt, shown beneath an empty box so nobody has to guess what emptying
   it falls back to. Scrolls rather than pushing the Save button off the page. */
.sf-prompt-default {
  margin: 8px 0 0;
  padding: 10px 12px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-bg-inset);
  color: var(--sf-text-secondary);
  font-size: var(--sf-text-sm);
  white-space: pre-wrap;
}

/* ---- The project edit dialog (D41) ------------------------------------------------------------ */

/* A heading inside a dialog. The form is long enough that "what this is" and "how it runs" need
   separating, and a MudText typo would carry MudBlazor's own scale rather than this one's. */
.sf-dialog__section {
  margin: 0 0 12px;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-text-secondary);
}

.sf-dialog__section:not(:first-child) { margin-top: 20px; }

/* Why a fact is a fact rather than a field. Forced into the value column so it reads as a note on
   the row above it — left in flow it would land under the term and look like the next label. */
.sf-facts__why {
  grid-column: 2;
  margin-top: -6px !important;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-muted) !important;
}

/* The shortfall on a field with a length floor, counted down while typing. */
.sf-field__count { color: var(--sf-warning); }

/* A fact that is a paragraph rather than a value — the project's context. Keeps the author's line
   breaks, and stops short of full width so it reads as prose rather than stretching the row. */
.sf-facts__long {
  white-space: pre-wrap;
  max-width: 62ch;
  line-height: 1.55;
}