/*
 * The components of {{NAME}}, in plain CSS, on the tokens in tokens.css.
 *
 * Each block names where the component comes from: the file in the product's code, or "proposed"
 * when the product does not have it yet. A value is never written here; every color, radius, size
 * and duration is a token.
 *
 * STARTER: the few classes the showcase's own frame needs (brand tile, navigation link, buttons,
 * segmented control, tag, badge, card, table, spinner, icon). The Components phase restyles them to
 * the product and adds the rest, one block per section of components/index.html — the showcase's
 * menu then looks like the product's own sidebar.
 */

/* ── Brand tile: the mark and the product's name at the top of the menu — starter ── */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--color-foreground);
  font-weight: 600;
  text-decoration: none;
}
.brand:hover { color: var(--color-foreground); }
.brand__mark {
  /* A picked mark is drawn in currentColor with its knockouts in --lg-ground: here the tile's own fill */
  --lg-ground: var(--color-primary);
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.brand__mark svg { width: 18px; height: 18px; }

/* ── Navigation link: a menu item; the page on show carries aria-current — starter ── */
.navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-control);
  color: var(--color-muted);
  text-decoration: none;
}
.navlink:hover,
.navlink.is-hover {
  background: var(--color-surface-muted);
  color: var(--color-foreground);
}
.navlink[aria-current='page'] {
  background: var(--color-nav-active);
  color: var(--color-nav-active-text);
}

/* ── Icon: a 16 px grid, drawn with the current color; the sprite is in assets/showcase.js ── */
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; stroke-width: 1.5; }

/* ── Button — starter ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--size-control);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.btn:focus-visible, .is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--sm { height: var(--size-control-sm); padding: 0 10px; font-size: 13px; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-primary-hover); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-emphasis); color: var(--color-foreground); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--color-surface-muted); }
.btn--ghost { background: transparent; color: var(--color-foreground); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--color-surface-muted); }
.btn--danger { background: var(--color-danger); color: var(--color-danger-foreground); }
.btn--danger:hover, .btn--danger.is-hover { background: var(--color-danger-hover); }
.btn--block { width: 100%; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading .spinner { position: absolute; }

/* ── Spinner — starter ── */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin var(--duration-spin) linear infinite;
}
.btn.is-loading .spinner { color: var(--color-primary-foreground); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Loader: the picked logo in motion (design/loaders.html) — starter. Each part of the mark is a
   <g class="ld__part"> the animation turns, fades or scales about the centre; the Loaders step adds
   the loaders fitted to the mark. Every animation ends on the mark at rest, so under reduced motion
   a loader is the still mark. Sizes: --sm 16 (buttons, rows), --md 32, --lg 64 ── */
.ld { display: inline-block; flex: none; width: 32px; height: 32px; color: var(--color-primary); overflow: visible; }
.ld--sm { width: 16px; height: 16px; }
.ld--md { width: 32px; height: 32px; }
.ld--lg { width: 64px; height: 64px; }
.btn .ld { color: currentColor; }
.ld__part { transform-box: view-box; transform-origin: 50% 50%; }
@keyframes ld-turn { to { transform: rotate(360deg); } }
@keyframes ld-fade { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.2; } }
@keyframes ld-beat { 0%, 50%, 100% { transform: scale(1); } 20% { transform: scale(0.82); } }

/* ── Segmented control: the theme and language switches of this site — starter ── */
.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-default);
  background: var(--color-surface-muted);
  border-radius: var(--radius-control);
}
.segmented__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--size-control-sm) - 4px);
  padding: 0 10px;
  border: 0;
  border-radius: calc(var(--radius-control) - 2px);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
}
.segmented__item .icon { width: 14px; height: 14px; }
.segmented__item:hover { color: var(--color-foreground); }
.segmented__item[aria-pressed='true'] { background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-card); }
.segmented__item:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }

/* ── Tag and badge — starter ── */
.tag, .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-default);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.badge--success { background: var(--color-success-soft); color: var(--color-success-text); border-color: transparent; }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: transparent; }
.badge--info { background: var(--color-info-soft); color: var(--color-info-text); border-color: transparent; }

/* ── Card — starter ── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ── Table — starter ── */
/* position: an absolutely placed child (a screen-reader-only label in a cell) stays inside the scroller
   instead of widening the page */
.table-wrap { position: relative; overflow: auto; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-default); }
.table th { color: var(--color-subtle); font-weight: var(--weight-regular); font-size: var(--text-label); background: var(--color-surface-muted); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Motion samples of the Motion page (genFoundations.mjs): a box slides in on the duration on show; the drift
   is the sign-in panel's, ±4 px (ADR-0041) ── */
@keyframes fnd-slide { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fnd-drift { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

/* ── Loaders of the delivered mark (design/loaders.html, genLoaders.mjs). The mark's four parts: leaves, body,
   collar, crown. Every keyframe ends on the part at rest, so reduced motion (site.css) shows the still mark. ── */
@keyframes ld-light { 0% { opacity: 0.15; } 30%, 100% { opacity: 1; } }
@keyframes ld-draw { 0% { stroke-dashoffset: 100; fill-opacity: 0; } 60% { stroke-dashoffset: 0; fill-opacity: 0; } 85%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes ld-appear { 0%, 60% { opacity: 0; } 85%, 100% { opacity: 1; } }
.ld--rise .ld__body { animation: ld-light var(--duration-loader) var(--ease-standard) infinite; }
.ld--rise .ld__collar { animation: ld-light var(--duration-loader) var(--ease-standard) infinite; animation-delay: calc(var(--duration-loader) / 6); }
.ld--rise .ld__crown { animation: ld-light var(--duration-loader) var(--ease-standard) infinite; animation-delay: calc(var(--duration-loader) / 3); }
.ld--beat .ld__all { animation: ld-beat var(--duration-loader) var(--ease-standard) infinite; }
.ld--sway .ld__left { animation: ld-fade var(--duration-loader) var(--ease-standard) infinite; }
.ld--sway .ld__right { animation: ld-fade var(--duration-loader) var(--ease-standard) infinite; animation-delay: calc(var(--duration-loader) / 2); }
.ld--draw .ld__leaves path { stroke-dasharray: 100; animation: ld-draw calc(var(--duration-loader) * 1.5) var(--ease-standard) infinite; }
.ld--draw .ld__body, .ld--draw .ld__collar, .ld--draw .ld__crown { animation: ld-appear calc(var(--duration-loader) * 1.5) var(--ease-standard) infinite; }

/* parts:components:decisions start */
/* Components, group "decisions": the AI layer and the decisions on the record.
   Every value is a token (tokens.css); light and dark follow the tokens. */

/* ── Source and confidence ── */
.c-source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 26px;
  padding: 2px 3px 2px var(--space-2);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-foreground);
  font: inherit;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.c-source .icon { width: 12px; height: 12px; color: var(--color-primary); }
.c-source:hover, .c-source.is-hover { background: var(--color-surface-muted); border-color: var(--color-emphasis); }
.c-source:focus-visible, .c-source.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.c-source__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-source__conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--conf-tint);
  color: var(--conf-text);
}
.c-source__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.c-source__bars i { width: 3px; border-radius: 1px; background: currentColor; }
.c-source__bars i:nth-child(1) { height: 4px; }
.c-source__bars i:nth-child(2) { height: 7px; }
.c-source__bars i:nth-child(3) { height: 10px; }
.c-source--high { --conf-tint: var(--color-success-soft); --conf-text: var(--color-success-text); }
.c-source--medium { --conf-tint: var(--color-warning-soft); --conf-text: var(--color-warning-text); }
.c-source--low { --conf-tint: var(--color-danger-soft); --conf-text: var(--color-danger-text); }
.c-source--medium .c-source__bars i:nth-child(3),
.c-source--low .c-source__bars i:nth-child(n + 2) { opacity: 0.3; }
.c-source--none {
  padding-right: var(--space-3);
  border-style: dashed;
  border-color: var(--color-emphasis);
  color: var(--color-muted);
  cursor: default;
}
.c-source--none .icon { color: var(--color-muted); }
.c-source--none:hover { background: var(--color-surface); border-color: var(--color-emphasis); }
.c-source--compact { min-height: 22px; font-size: var(--text-xs); }
.c-source--compact .c-source__text { max-width: 160px; }

.c-readvalue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
.c-readvalue--pending { border-style: dashed; border-color: var(--color-primary); }
.c-readvalue--empty { border-style: dashed; border-color: var(--color-emphasis); }
.c-readvalue__value { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-medium); }
.c-readvalue__none { color: var(--color-subtle); font-weight: var(--weight-regular); }
.c-readvalue__state { height: auto; min-height: 22px; white-space: normal; }

/* ── Proposed update ── */
.c-proposal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.c-proposal--compact { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); gap: var(--space-3); }
.c-proposal__email {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-right: 1px solid var(--color-default);
  background: var(--color-surface-muted);
}
.c-proposal__mailhead { display: flex; align-items: center; gap: var(--space-2); }
.c-proposal__meta, .c-proposal__facts { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.c-proposal__meta > div, .c-proposal__facts > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.c-proposal__meta dd, .c-proposal__facts dd { margin: 0; min-width: 0; }
.c-proposal__quote {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-emphasis);
  color: var(--color-foreground);
}
.c-proposal__mark { padding: 0 2px; border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-foreground); }
.c-proposal__update { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.c-proposal--compact .c-proposal__update { padding: 0; }
.c-proposal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.c-proposal__title { display: flex; align-items: center; gap: var(--space-2); }
.c-proposal__title .icon { color: var(--color-primary); }
.c-proposal__badge { display: none; }
.c-proposal[data-state='proposed'] .c-proposal__badge--proposed,
.c-proposal[data-state='accepted'] .c-proposal__badge--accepted,
.c-proposal[data-state='discarded'] .c-proposal__badge--discarded { display: inline-flex; }
.c-proposal__change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-control);
  background: var(--color-page);
}
.c-proposal__field { flex: 0 0 100%; }
.c-proposal__old { color: var(--color-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.c-proposal__arrow { color: var(--color-subtle); }
.c-proposal__new {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.c-proposal[data-state='discarded'] .c-proposal__new,
.c-proposal[data-state='superseded'] .c-proposal__new,
.c-proposal[data-state='lapsed'] .c-proposal__new { background: var(--color-surface-muted); color: var(--color-muted); text-decoration: line-through; }
.c-proposal__approver { margin: 0; }
.c-proposal__actions { display: none; gap: var(--space-2); }
.c-proposal__outcome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-muted); font-size: var(--text-label); line-height: var(--leading-label); }
.c-proposal__when-accepted, .c-proposal__when-discarded { display: none; }
.c-proposal[data-state='proposed'] .c-proposal__when-proposed { display: flex; }
.c-proposal[data-state='accepted'] .c-proposal__when-accepted,
.c-proposal[data-state='discarded'] .c-proposal__when-discarded { display: flex; }

/* ── Activity timeline ── */
.c-timeline {
  --fn: var(--color-subtle);
  --fn-tint: var(--color-surface-muted);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.c-timeline__head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-default); }
.c-timeline__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c-timeline__pill {
  height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.c-timeline__pill:hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.c-timeline__pill:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.c-timeline__pill[aria-pressed='true'] {
  border-color: currentColor;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-weight: var(--weight-semibold);
}
.c-timeline__pill--land[aria-pressed='true'], .c-timeline__fn--land { --fn: var(--color-fn-land); --fn-tint: var(--color-fn-land-tint); }
.c-timeline__pill--partnerships[aria-pressed='true'], .c-timeline__fn--partnerships { --fn: var(--color-fn-partnerships); --fn-tint: var(--color-fn-partnerships-tint); }
.c-timeline__pill--construction[aria-pressed='true'], .c-timeline__fn--construction { --fn: var(--color-fn-construction); --fn-tint: var(--color-fn-construction-tint); }
.c-timeline__pill--system[aria-pressed='true'], .c-timeline__fn--system { --fn: var(--color-muted); --fn-tint: var(--color-surface-muted); }
.c-timeline__pill--land[aria-pressed='true'],
.c-timeline__pill--partnerships[aria-pressed='true'],
.c-timeline__pill--construction[aria-pressed='true'],
.c-timeline__pill--system[aria-pressed='true'] { background: var(--fn-tint); color: var(--fn); }
.c-timeline__composer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-default); background: var(--color-surface-muted); }
.c-timeline__composer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.c-timeline__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  resize: vertical;
}
.c-timeline__input::placeholder { color: var(--color-subtle); }
.c-timeline__input:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.c-timeline__days { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.c-timeline__day[hidden] { display: none; }
.c-timeline__dayhead {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-default);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-semibold);
}
.c-timeline__entries { display: flex; flex-direction: column; }
.c-timeline__entry {
  position: relative;
  display: grid;
  grid-template-columns: 44px 10px minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.c-timeline__entry[hidden] { display: none; }
.c-timeline__entry:last-child { padding-bottom: 0; }
.c-timeline__entry::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: -2px;
  left: calc(44px + var(--space-3) + 4.5px);
  width: 1px;
  background: var(--color-default);
}
.c-timeline__entry:last-child::before { display: none; }
.c-timeline__entry[data-fn='land'] { --fn: var(--color-fn-land); }
.c-timeline__entry[data-fn='partnerships'] { --fn: var(--color-fn-partnerships); }
.c-timeline__entry[data-fn='construction'] { --fn: var(--color-fn-construction); }
.c-timeline__time { color: var(--color-subtle); font-size: var(--text-xs); line-height: 20px; text-align: right; }
.c-timeline__dot {
  box-sizing: border-box;
  align-self: start;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: var(--radius-full);
  background: var(--fn, var(--color-subtle));
}
.c-timeline__entry--system .c-timeline__dot,
.c-timeline__dot--hollow { border: 2px solid var(--color-subtle); background: var(--color-surface); }
.c-timeline__dot--sample { display: inline-block; align-self: center; margin: 0 var(--space-2) 0 0; }
.c-timeline__dot--land { --fn: var(--color-fn-land); }
.c-timeline__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.c-timeline__fn {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--fn-tint);
  color: var(--fn);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.c-timeline__type { height: 20px; }
.c-timeline__text { margin: 2px 0 0; color: var(--color-foreground); }
.c-timeline__empty { padding: var(--space-6) var(--space-4); color: var(--color-muted); text-align: center; }
.c-timeline__empty[hidden] { display: none; }
.c-timeline__key { gap: var(--space-6); }
.c-timeline__keyitem { display: inline-flex; align-items: center; color: var(--color-muted); font-size: var(--text-label); }

/* ── Score card ── */
.c-scorelist {
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.c-scorelist__head, .c-score {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.3fr) minmax(0, 1fr) auto;
  column-gap: var(--space-4);
}
.c-scorelist__head { padding: var(--space-3) var(--space-4); background: var(--color-surface-muted); border-bottom: 1px solid var(--color-default); }
.c-scorelist__act { text-align: right; }
.c-score { align-items: start; row-gap: var(--space-3); padding: var(--space-4); }
.c-score + .c-score { border-top: 1px solid var(--color-default); }
.c-score__score { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.c-score__figure {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}
.c-score__figure--strong { background: var(--color-success-soft); color: var(--color-success-text); }
.c-score__figure--fair { background: var(--color-warning-soft); color: var(--color-warning-text); }
.c-score__figure--weak { background: var(--color-surface-muted); color: var(--color-muted); }
.c-score__band { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.c-score__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.c-score__buyer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.c-score__reason { color: var(--color-foreground); }
.c-score__note { margin: var(--space-1) 0 0; }
.c-score__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.c-score__actions { display: flex; align-items: center; gap: var(--space-2); }
.c-score__chev { transition: transform var(--duration-fast) var(--ease-standard); }
.c-score [aria-expanded='true'] .c-score__chev { transform: rotate(180deg); }
.c-score__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.c-score__chip .icon { width: 12px; height: 12px; }
.c-score__chip--full { background: var(--color-success-soft); color: var(--color-success-text); }
.c-score__chip--half { background: var(--color-warning-soft); color: var(--color-warning-text); }
.c-score__chip--no { background: var(--color-surface-muted); color: var(--color-muted); }
.c-score__chip--none { border-style: dashed; border-color: var(--color-emphasis); background: var(--color-surface); color: var(--color-muted); }
.c-score__dash { width: 8px; height: 0; border-top: 1.5px solid currentColor; }
.c-score__panel { grid-column: 2 / -1; border: 1px solid var(--color-default); border-radius: var(--radius-control); overflow: hidden; }
.c-score__panel[hidden] { display: none; }
.c-score__panel .table-wrap { border: 0; border-radius: 0; }
.c-score__table tfoot td { padding: var(--space-3); border-top: 1px solid var(--color-default); background: var(--color-surface-muted); vertical-align: middle; }
.c-score__result {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.c-score__result--full { background: var(--color-success-soft); color: var(--color-success-text); }
.c-score__result--half { background: var(--color-warning-soft); color: var(--color-warning-text); }
.c-score__result--no { background: var(--color-surface-muted); color: var(--color-muted); }
.c-score__result--none { border: 1px dashed var(--color-emphasis); color: var(--color-muted); }
.c-score__keyitem { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-4); }

/* ── Comparison table ── */
.c-compare th, .c-compare td { white-space: nowrap; vertical-align: middle; }
.c-compare__grade {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.c-compare__grade--exceptional { background: var(--color-grade-exceptional-tint); color: var(--color-grade-exceptional-text); }
.c-compare__grade--good { background: var(--color-grade-good-tint); color: var(--color-grade-good-text); }
.c-compare__grade--acceptable { background: var(--color-grade-acceptable-tint); color: var(--color-grade-acceptable-text); }
.c-compare__grade--weak { background: var(--color-grade-weak-tint); color: var(--color-grade-weak-text); }
.c-compare__changed { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); color: var(--color-warning-text); font-size: var(--text-xs); line-height: var(--leading-xs); }
.c-compare__changed--same { color: var(--color-muted); }
.c-compare__changed .icon { width: 12px; height: 12px; }
.c-compare__pending {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border: 1px dashed var(--color-emphasis);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.c-compare__rank {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  font-weight: var(--weight-semibold);
}
.c-compare tr:first-child .c-compare__rank { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.c-compare tr.is-out td { color: var(--color-muted); }
.c-compare tr.is-out td:first-child a { color: var(--color-muted); }

/* ── Approval checklist ── */
.c-approval {
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.c-approval__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-default); }
.c-approval__progress { display: flex; align-items: center; gap: var(--space-3); }
.c-approval__meter { display: block; width: 96px; height: 6px; border-radius: var(--radius-full); background: var(--color-chart-track); overflow: hidden; }
.c-approval__meter i { display: block; width: calc(var(--done) / var(--all) * 100%); height: 100%; background: var(--color-success); }
.c-approval__items { display: flex; flex-direction: column; }
.c-approval__item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) minmax(150px, 210px);
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-4);
}
.c-approval__item + .c-approval__item { border-top: 1px solid var(--color-default); }
.c-approval__open { border-style: dashed; border-color: var(--color-emphasis); }
.c-approval__what { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.c-approval__evidence { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-label); }
.c-approval__review { display: flex; flex-direction: column; gap: 2px; }
.c-approval__who { display: inline-flex; align-items: center; gap: var(--space-2); }
.c-approval__avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}
.c-approval__avatar--land { background: var(--color-fn-land-tint); color: var(--color-fn-land); }
.c-approval__avatar--construction { background: var(--color-fn-construction-tint); color: var(--color-fn-construction); }
.c-approval__avatar--partnerships { background: var(--color-fn-partnerships-tint); color: var(--color-fn-partnerships); }
.c-approval__avatar--legal { background: var(--color-fn-legal-tint); color: var(--color-fn-legal); }
.c-approval__exception {
  grid-column: 2 / -1;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-info-soft);
  color: var(--color-info-text);
}
.c-approval__exception .icon { margin-top: 2px; }
.c-approval__exception p { margin: 0; }
.c-approval__exception .t-caption { color: var(--color-info-text); }
.c-approval__actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c-approval__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-default); background: var(--color-surface-muted); }
.c-approval__msg { display: flex; align-items: center; gap: var(--space-2); margin: 0; max-width: 560px; color: var(--color-muted); }
.c-approval--ready .c-approval__msg { color: var(--color-success-text); }

@media (max-width: 900px) {
  .c-proposal { grid-template-columns: minmax(0, 1fr); }
  .c-proposal__email { border-right: 0; border-bottom: 1px solid var(--color-default); }
  .c-scorelist__head { display: none; }
  .c-score { grid-template-columns: 72px minmax(0, 1fr); }
  .c-score__chips, .c-score__actions { grid-column: 2; }
  .c-approval__item { grid-template-columns: minmax(0, 1fr); }
  .c-approval__exception, .c-approval__actions { grid-column: 1; }
}
/* parts:components:decisions end */

/* parts:components:display start */
/* ── Display group: shared ── */
.c-display__intro { max-width: 760px; color: var(--color-muted); }
/* A sample that is a card, a table or a bar takes the width of its column, not of its content */
.sc-state > .c-card,
.sc-state > .c-table__wrap,
.sc-state > .c-pagination-frame,
.sc-state > .c-tile__host,
.sc-state > .sc-stack,
.sc-state > .c-progress__host,
.sc-state > .c-stacked { align-self: stretch; }
.sc-state > .t-caption { max-width: 100%; }

/* A skeleton line: the loading look of text, a figure or a chip; it breathes on the loader duration */
.c-skeleton {
  display: block;
  height: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  animation: c-skeleton var(--duration-loader) var(--ease-standard) infinite;
}
.c-skeleton--s { width: 30%; }
.c-skeleton--m { width: 60%; }
.c-skeleton--l { width: 90%; }
.c-skeleton--code { width: 56px; }
.c-skeleton--chip { width: 84px; height: var(--space-5); border-radius: var(--radius-full); }
.c-skeleton--figure { width: 120px; height: var(--space-6); }
@keyframes c-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Badge and status ── */
.c-badge {
  height: 24px;
  gap: 6px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
}
.c-badge .icon { width: 14px; height: 14px; }
.c-badge__dot { flex: none; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.c-badge--count { justify-content: center; min-width: 24px; padding: 0 var(--space-2); background: var(--color-surface-muted); border-color: transparent; color: var(--color-muted); }
.c-badge--sm { height: 20px; min-width: 20px; padding: 0 6px; }
.c-badge--stage { background: var(--color-stage-tint); color: var(--color-stage-text); border-color: color-mix(in srgb, var(--color-stage-text) 15%, transparent); }
.c-badge--stage-done { background: var(--color-stage-done-tint); color: var(--color-stage-done-text); border-color: color-mix(in srgb, var(--color-stage-done-text) 15%, transparent); }
.c-badge--stage-dead { background: var(--color-stage-dead-tint); color: var(--color-stage-dead-text); border-color: color-mix(in srgb, var(--color-stage-dead-text) 15%, transparent); }
.c-badge--good,
.c-badge--warn,
.c-badge--crit,
.c-badge--info { border-color: transparent; font-weight: var(--weight-semibold); }
.c-badge--good { background: var(--color-success-soft); color: var(--color-success-text); }
.c-badge--warn { background: var(--color-warning-soft); color: var(--color-warning-text); }
.c-badge--crit { background: var(--color-danger-soft); color: var(--color-danger-text); }
.c-badge--info { background: var(--color-info-soft); color: var(--color-info-text); }
.c-badge--health-good { background: var(--color-health-good-tint); color: var(--color-health-good-text); border-color: color-mix(in srgb, var(--color-health-good-text) 20%, transparent); }
.c-badge--health-fair { background: var(--color-health-fair-tint); color: var(--color-health-fair-text); border-color: color-mix(in srgb, var(--color-health-fair-text) 20%, transparent); }
.c-badge--health-poor { background: var(--color-health-poor-tint); color: var(--color-health-poor-text); border-color: color-mix(in srgb, var(--color-health-poor-text) 20%, transparent); }
button.c-badge { cursor: pointer; font-size: var(--text-xs); transition: filter var(--duration-fast) var(--ease-standard); }
button.c-badge:hover,
button.c-badge.is-hover { filter: brightness(0.95); }
.c-badge__info { width: 12px; height: 12px; opacity: 0.7; }
.c-badge__none { display: inline-flex; align-items: center; height: 24px; color: var(--color-subtle); }

/* ── Avatar ── */
.c-avatar {
  --c-avatar-size: 32px;
  --c-avatar-font: var(--text-label);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--c-avatar-size);
  height: var(--c-avatar-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--c-avatar-font);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0;
}
.c-avatar--sm { --c-avatar-size: 24px; --c-avatar-font: var(--text-xs); }
.c-avatar--md { --c-avatar-size: 32px; --c-avatar-font: var(--text-label); }
.c-avatar--lg { --c-avatar-size: 40px; --c-avatar-font: var(--text-sm); }
.c-avatar--xl { --c-avatar-size: 48px; --c-avatar-font: var(--text-md); }
.c-avatar--backoffice { background: var(--color-fn-backoffice-tint); color: var(--color-fn-backoffice); }
.c-avatar--land { background: var(--color-fn-land-tint); color: var(--color-fn-land); }
.c-avatar--partnerships { background: var(--color-fn-partnerships-tint); color: var(--color-fn-partnerships); }
.c-avatar--construction { background: var(--color-fn-construction-tint); color: var(--color-fn-construction); }
.c-avatar--legal { background: var(--color-fn-legal-tint); color: var(--color-fn-legal); }
.c-avatar--none { border: 1px dashed var(--color-emphasis); background: transparent; color: var(--color-subtle); }
.c-avatar--none .icon { width: 55%; height: 55%; }
.c-avatar--count { background: var(--color-surface-muted); color: var(--color-muted); }
button.c-avatar { cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-standard); }
button.c-avatar:hover,
button.c-avatar.is-hover { box-shadow: 0 0 0 3px var(--color-emphasis); }
.c-avatar-stack { display: inline-flex; align-items: center; }
.c-avatar-stack .c-avatar { box-shadow: 0 0 0 2px var(--c-avatar-ring, var(--color-page)); }
.c-avatar-stack.c-avatar--sm .c-avatar { box-shadow: 0 0 0 1px var(--c-avatar-ring, var(--color-page)); }
.c-avatar-stack.c-avatar--sm .c-avatar + .c-avatar { margin-inline-start: -2px; }
.c-avatar-stack .c-avatar + .c-avatar { margin-inline-start: calc(var(--c-avatar-size) / -6); }
.c-avatar__ground { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); max-width: 640px; --c-avatar-ring: var(--color-surface); }
.c-avatar__ground .t-caption { margin: 0; }

/* ── Card ── */
.c-card { overflow: hidden; }
.c-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-default);
}
.c-card__bar .t-card-title { margin: 0; }
.c-card__actions { display: flex; align-items: center; gap: var(--space-2); }
.c-card__body { padding: var(--space-5); }
.c-card__body--flush { padding: 0; }
.c-card__body--flush .c-card__table { border: 0; border-radius: 0; }
.c-card__stack { display: flex; flex-direction: column; gap: var(--space-3); }
.c-card__quiet { color: var(--color-subtle); }
.c-card__error { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-danger-text); }
.c-card__error .icon { margin-top: 2px; }
.c-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: var(--space-4) var(--space-8); margin: 0; }
.c-card__facts dd { margin: 0; }
.c-card__list { display: flex; flex-direction: column; }
.c-card__list li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-default); }
.c-card__list li:first-child { padding-top: 0; }
.c-card__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.c-card--sm .c-card__bar { min-height: 48px; padding: 0 var(--space-4); }
.c-card--sm .c-card__body { padding: var(--space-4); }

/* ── Stat tile ── */
.c-tile__host { margin: 0; }
.c-tile__host > .c-tile { height: 100%; }
dl.sc-grid-4 > .c-tile { height: 100%; }
.c-tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); }
.c-tile dt,
.c-tile dd { margin: 0; }
.c-tile__figure { min-height: var(--leading-figure); }
.c-tile__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.c-tile__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 var(--space-2) 0 6px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
}
.c-tile__delta .icon { width: 12px; height: 12px; }
.c-tile__delta--good { background: var(--color-success-soft); color: var(--color-success-text); }
.c-tile__delta--bad { background: var(--color-danger-soft); color: var(--color-danger-text); }
.c-tile__delta--flat { background: var(--color-surface-muted); color: var(--color-muted); }
.c-tile__none { color: var(--color-emphasis); }
.c-tile__error { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-danger-text); }
.c-tile--loading .c-tile__figure { display: flex; align-items: center; }
.c-tile--sm { padding: var(--space-4); }
.c-tile--sm .c-tile__figure { min-height: var(--leading-lg); }

/* ── Data table ── */
.c-table th,
.c-table td { vertical-align: middle; padding: var(--space-2) var(--space-4); }
.c-table th { padding-top: var(--space-3); padding-bottom: var(--space-3); white-space: nowrap; }
.c-table { min-width: 760px; }
.c-table__wrap .c-table + .c-table__foot { border-top: 1px solid var(--color-default); }
.c-table--compact th,
.c-table--compact td { padding: 6px var(--space-3); }
.c-table--compact,
.c-table--fit { min-width: 0; }
.c-table tbody tr:hover td,
.c-table tbody tr.is-hover td { background: var(--color-surface-muted); }
.c-table .c-skeleton { height: var(--space-3); }
.c-table__code { color: var(--color-muted); }
.c-table__site { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-table__name { font-weight: var(--weight-semibold); color: var(--color-primary); }
a.c-table__name:hover { color: var(--color-primary-hover); }
.c-table .c-badge--stage { border-color: transparent; }
.c-table .c-badge--stage .c-badge__dot { display: none; }
.c-table__owner { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.c-table__sort { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.c-table__sort .icon { width: 12px; height: 12px; }
.c-table th[aria-sort] { color: var(--color-foreground); }
.c-table td.c-table__msg { text-align: center; padding-top: var(--space-10); padding-bottom: var(--space-10); }
.c-table__state { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.c-table__bad { color: var(--color-danger-text); width: 20px; height: 20px; }
.c-table__quiet { color: var(--color-subtle); width: 20px; height: 20px; }
.c-table__foot { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-4); color: var(--color-subtle); }

/* ── Pagination ── */
.c-pagination-frame { overflow: hidden; }
.c-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-default);
  color: var(--color-subtle);
}
.c-pagination:first-child { border-top: 0; }
.c-pagination__range { min-height: var(--leading-sm); }
.c-pagination__go { display: inline-flex; gap: var(--space-2); }
.c-pagination__pages { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.c-pagination__pages + .c-pagination__go { margin-inline-start: 0; }
.c-pagination__page {
  min-width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.c-pagination__page:hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.c-pagination__page[aria-current='page'] { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.c-pagination__gap { min-width: var(--size-control-sm); text-align: center; color: var(--color-subtle); }
.c-pagination--sm { min-height: 48px; padding: var(--space-1) var(--space-3); font-size: var(--text-label); }

/* ── Progress and meter ── */
.c-progress__host { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.c-progress { --c-progress-h: 8px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.c-progress--sm { --c-progress-h: 4px; }
.c-progress--lg { --c-progress-h: 12px; }
.c-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-label); line-height: var(--leading-label); }
.c-progress__label { color: var(--color-foreground); }
.c-progress__value { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-muted); }
.c-progress__value .icon { width: 14px; height: 14px; }
.c-progress--good .c-progress__value { color: var(--color-success-text); }
.c-progress--bad .c-progress__value { color: var(--color-danger-text); font-weight: var(--weight-medium); }
.c-progress__track { height: var(--c-progress-h); border-radius: var(--radius-full); background: var(--color-chart-track); overflow: hidden; }
.c-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--color-chart-actual);
  transition: width var(--duration-slow) var(--ease-standard);
}
.c-progress--good .c-progress__fill { background: var(--color-success); }
.c-progress--bad .c-progress__fill { background: var(--color-danger); }
.c-progress--busy .c-progress__fill {
  width: 100%;
  background: linear-gradient(90deg, var(--color-chart-actual), var(--color-chart-forecast), var(--color-chart-actual));
  background-size: 200% 100%;
  animation: c-progress-busy var(--duration-loader) linear infinite;
}
@keyframes c-progress-busy { from { background-position: 200% 0; } to { background-position: 0 0; } }
.c-ring { --c-ring-size: 56px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--c-ring-size); height: var(--c-ring-size); }
.c-ring--sm { --c-ring-size: 32px; }
.c-ring--md { --c-ring-size: 56px; }
.c-ring--lg { --c-ring-size: 80px; }
.c-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-ring circle { fill: none; stroke-width: 6; }
.c-ring__track { stroke: var(--color-chart-track); }
.c-ring__bar { stroke: var(--color-chart-actual); stroke-linecap: round; }
.c-ring__figure { position: relative; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-foreground); }
.c-ring--sm .c-ring__figure { display: none; }
.c-ring--sm circle { stroke-width: 8; }
.c-ring--lg .c-ring__figure { font-size: var(--text-md); }
.c-meter { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.c-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-label); line-height: var(--leading-label); }
.c-meter__value { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-medium); }
.c-meter__value .icon { width: 14px; height: 14px; }
.c-meter__track {
  position: relative;
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-health-poor-tint) 0 40%, var(--color-health-fair-tint) 40% 70%, var(--color-health-good-tint) 70% 100%);
  border: 1px solid var(--color-default);
  box-sizing: content-box;
}
.c-meter__mark {
  position: absolute;
  top: 50%;
  width: var(--space-4);
  height: var(--space-4);
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-foreground);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-card);
}
.c-meter__scale { position: relative; display: flex; justify-content: space-between; height: var(--leading-xs); }
.c-meter__scale span[style] { position: absolute; transform: translateX(-50%); }
.c-stacked { display: flex; flex-direction: column; gap: var(--space-3); }
.c-stacked__head { display: flex; justify-content: space-between; gap: var(--space-3); }
.c-stacked__track { display: flex; height: var(--space-2); border-radius: var(--radius-full); background: var(--color-chart-track); overflow: hidden; }
.c-stacked__part--collected { background: var(--color-chart-actual); }
.c-stacked__part--invoiced { background: var(--color-chart-forecast); }
.c-stacked__legend { display: flex; flex-direction: column; gap: var(--space-2); }
.c-stacked__legend li { display: grid; grid-template-columns: var(--space-3) 1fr auto; align-items: center; gap: var(--space-2); }
.c-stacked__swatch { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-sm); background: var(--color-chart-track); border: 1px solid var(--color-emphasis); }
.c-stacked__swatch--collected { background: var(--color-chart-actual); border-color: transparent; }
.c-stacked__swatch--invoiced { background: var(--color-chart-forecast); border-color: transparent; }

/* ── Tooltip and popover ── */
.c-tooltip__stage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8) var(--space-10); padding-top: var(--space-10); }
.c-tooltip__stage--open { padding-bottom: 0; padding-left: var(--space-12); }
.c-tooltip__stage .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.c-tooltip__btn { padding: 0 var(--space-2); }
.c-tooltip { position: relative; display: inline-flex; }
.c-tooltip__bubble {
  position: absolute;
  z-index: var(--z-header);
  bottom: 100%;
  left: 50%;
  padding-bottom: var(--space-2);
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-standard), visibility var(--duration-fast) var(--ease-standard);
}
.c-tooltip__text {
  position: relative;
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-control);
  background: var(--color-surface-inverted);
  color: var(--color-inverted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-overlay);
}
.c-tooltip__text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: calc(var(--space-1) * -1);
  border: var(--space-1) solid transparent;
  border-top-color: var(--color-surface-inverted);
}
.c-tooltip--wide .c-tooltip__bubble { width: 240px; }
.c-tooltip:hover .c-tooltip__bubble,
.c-tooltip:focus-within .c-tooltip__bubble,
.c-tooltip.is-open .c-tooltip__bubble { opacity: 1; visibility: visible; }
.c-tooltip.is-dismissed .c-tooltip__bubble { opacity: 0; visibility: hidden; }
.c-tooltip.is-open { margin-top: var(--space-8); }
.c-tooltip[data-placement='bottom'] .c-tooltip__bubble { top: 100%; bottom: auto; padding: var(--space-2) 0 0; }
.c-tooltip[data-placement='bottom'] .c-tooltip__text::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--color-surface-inverted); }
.c-popover { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; --c-popover-w: 320px; }
.c-popover__panel {
  position: absolute;
  z-index: var(--z-header);
  top: calc(100% + var(--space-2));
  left: 0;
  width: var(--c-popover-w);
  max-width: calc(100vw - var(--space-12));
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-foreground);
  box-shadow: var(--shadow-overlay);
  text-align: left;
}
.c-popover__panel[hidden] { display: none; }
.c-popover[data-placement='top'] .c-popover__panel { top: auto; bottom: calc(100% + var(--space-2)); }
.c-popover.is-static .c-popover__panel { position: relative; top: auto; margin-top: var(--space-2); }
.c-popover__sub { font-weight: var(--weight-regular); }
.c-popover__list { margin-top: var(--space-3); }
.c-popover__list li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--color-default); }
.c-popover__fact { display: block; color: var(--color-subtle); }
.c-popover__pts { font-weight: var(--weight-semibold); color: var(--color-subtle); white-space: nowrap; }
.c-popover__pts.is-off { color: var(--color-danger-text); }
.c-popover__text { margin-top: var(--space-1); color: var(--color-muted); }
/* parts:components:display end */

/* parts:components:feedback start */
/* ── Shared by the feedback group: the icon-only button of an alert, a modal, a drawer and a file row ── */
.c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.c-icon-btn:hover, .c-icon-btn.is-hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.c-icon-btn:focus-visible, .c-icon-btn.is-focus { outline: 2px solid var(--color-ring); outline-offset: 1px; }
[data-c-host] { width: 100%; display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
[data-c-host] > .c-alert { flex: 1 1 100%; }
[data-c-restore][hidden], .c-alert[hidden], .c-upload [hidden] { display: none; }

/* ── Alert ── */
.c-alert {
  --tone-soft: var(--color-info-soft);
  --tone-text: var(--color-info-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 14px;
  border: 1px solid color-mix(in srgb, var(--tone-text) 18%, transparent);
  border-radius: var(--radius-control);
  background: var(--tone-soft);
  color: var(--color-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.c-alert--success { --tone-soft: var(--color-success-soft); --tone-text: var(--color-success-text); }
.c-alert--warning { --tone-soft: var(--color-warning-soft); --tone-text: var(--color-warning-text); }
.c-alert--danger { --tone-soft: var(--color-danger-soft); --tone-text: var(--color-danger-text); }
.c-alert__icon { display: inline-flex; flex: none; margin-top: 1px; color: var(--tone-text); }
.c-alert__body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.c-alert__title { color: var(--tone-text); font-weight: var(--weight-medium); }
.c-alert__text { color: var(--color-foreground); }
.c-alert__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.c-alert__close { margin: -4px -6px -4px 0; color: var(--tone-text); }
.c-alert__close:hover, .c-alert__close.is-hover { background: color-mix(in srgb, var(--tone-text) 14%, transparent); color: var(--tone-text); }
.c-alert--compact { align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-label); line-height: var(--leading-label); }
.c-alert--compact .c-alert__icon { margin-top: 0; }

/* ── Toast (the stack is built by assets/showcase.js: .toaster › .toast › .toast__icon, .toast__body, .toast__close) ── */
.toaster {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(var(--size-form), calc(100vw - var(--space-8)));
}
.toast {
  --tone-text: var(--color-info-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--size-form);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: inset 3px 0 0 var(--tone-text), var(--shadow-overlay);
  color: var(--color-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.toast--success { --tone-text: var(--color-success-text); }
.toast--warning { --tone-text: var(--color-warning-text); }
.toast--danger { --tone-text: var(--color-danger-text); }
.toast__icon { display: inline-flex; flex: none; margin-top: 1px; color: var(--tone-text); }
.toast__body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.toast__title { font-weight: var(--weight-medium); }
.toast__text { color: var(--color-muted); }
.toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  margin: -4px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.toast__close:hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.toast__close:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.toast > .btn { align-self: center; flex: none; }
.toaster .toast { animation: c-toast-in var(--duration-base) var(--ease-standard); }
@keyframes c-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Modal (the .scrim is the dark area: showcase.js opens the one with the id a [data-modal-open] names) ── */
html.modal-open { overflow: hidden; }
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 15vh var(--space-4) var(--space-4);
  overflow: auto;
  background: var(--color-overlay);
  animation: c-scrim-in var(--duration-base) var(--ease-standard);
}
.scrim[hidden] { display: none; }
.scrim--end { align-items: stretch; justify-content: flex-end; padding: 0; overflow: hidden; }
@keyframes c-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.c-stage-overlay {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-overlay);
}
.c-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 520px;
  max-width: 100%;
  padding: var(--space-6);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  color: var(--color-foreground);
}
.c-modal--sm { width: 400px; }
.c-modal--lg { width: 640px; }
.scrim > .c-modal { animation: c-modal-in var(--duration-base) var(--ease-standard); }
@keyframes c-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.c-modal__head { display: flex; align-items: flex-start; gap: var(--space-4); }
.c-modal__copy { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }
.c-modal__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); }
.c-modal__icon--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.c-modal__icon--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.c-modal__icon--primary { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.c-modal__title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); }
.c-modal__text { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.c-modal__items { margin: 0; padding: 0 var(--space-4); list-style: none; border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.c-modal__items li { display: flex; gap: 10px; padding: var(--space-2) 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.c-modal__items li + li { border-top: 1px solid var(--color-default); }
.c-modal__tick { display: inline-flex; flex: none; margin-top: 2px; color: var(--color-success-text); }
.c-modal__error { margin: 0; color: var(--color-danger-text); font-size: var(--text-sm); line-height: var(--leading-sm); }
.c-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }

/* ── Drawer ── */
.c-drawer {
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: 100%;
  height: 100%;
  border-left: 1px solid var(--color-default);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  color: var(--color-foreground);
}
.c-drawer--sm { width: 360px; }
.c-drawer--lg { width: 640px; }
.scrim--end > .c-drawer { animation: c-drawer-in var(--duration-base) var(--ease-standard); }
@keyframes c-drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.c-drawer-stage { display: flex; justify-content: flex-end; width: 100%; height: 560px; overflow: hidden; border-radius: var(--radius-card); background: var(--color-overlay); }
.c-drawer--static { width: min(440px, 88%); border-radius: var(--radius-card) 0 0 var(--radius-card); }
.c-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-default); }
.c-drawer__copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.c-drawer__title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); }
.c-drawer__sub { margin: 0; color: var(--color-muted); font-size: var(--text-label); line-height: var(--leading-label); }
.c-drawer__body { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: var(--space-5); margin: 0; padding: var(--space-6); overflow: auto; }
.c-drawer__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-default); }
.c-drawer__list { display: flex; flex-direction: column; margin: 0; }
.c-drawer__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-default); }
.c-drawer__row:last-child { border-bottom: 0; }
.c-drawer__row dt { color: var(--color-subtle); font-size: var(--text-label); }
.c-drawer__row dd { margin: 0; font-size: var(--text-sm); }
.c-drawer__text { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.c-drawer__fn { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-full); background: var(--fn-tint); color: var(--fn); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.c-drawer__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--fn); }
.c-drawer__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.c-drawer__field label, .c-drawer__label { padding: 0; color: var(--color-foreground); font-size: var(--text-label); font-weight: var(--weight-medium); line-height: var(--leading-label); }
.c-drawer__hint { color: var(--color-subtle); font-size: var(--text-xs); line-height: var(--leading-xs); }
.c-drawer__input { width: 100%; height: var(--size-control); padding: 0 12px; border: 1px solid var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-foreground); font: inherit; font-size: var(--text-sm); }
.c-drawer__input--area { height: auto; padding: var(--space-2) 12px; resize: vertical; line-height: var(--leading-sm); }
.c-drawer__input:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.c-drawer__locked { display: flex; align-items: center; gap: var(--space-2); height: var(--size-control); padding: 0 12px; border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); font-size: var(--text-sm); }
.c-drawer__locked-fn { color: var(--color-subtle); }
.c-drawer__radio { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-4); font-size: var(--text-sm); }
.c-drawer__radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); }
.c-drawer__field--set { flex-direction: row; flex-wrap: wrap; align-items: center; }
.c-drawer__field--set .c-drawer__label { flex: 1 1 100%; float: left; }
.c-drawer__field--set .c-drawer__hint { flex: 1 1 100%; }

/* ── Empty state ── */
.c-empty-frame { width: 100%; }
.c-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center; }
.c-empty__art { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--space-1); border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); }
.c-empty__art--brand { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.c-empty__art--success { background: var(--color-success-soft); color: var(--color-success-text); }
.c-empty__title { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-medium); }
.c-empty__text { max-width: 320px; margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.c-empty .btn { margin-top: var(--space-2); }
.c-empty--compact { gap: var(--space-2); padding: var(--space-6) var(--space-4); }
.c-empty--compact .c-empty__art { width: 40px; height: 40px; }

/* ── File upload ── */
.c-upload { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); width: 100%; max-width: 560px; }
.c-upload__zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border: 2px dashed var(--color-emphasis);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.c-upload__zone:hover, .c-upload__zone.is-hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.c-upload__zone:focus-within, .c-upload__zone.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.c-upload__zone.is-disabled { border-color: var(--color-default); background: var(--color-surface-muted); color: var(--color-subtle); cursor: not-allowed; }
.c-upload__zone.is-disabled:hover { border-color: var(--color-default); background: var(--color-surface-muted); }
.c-upload__zone.has-error { border-color: var(--color-danger); background: var(--color-danger-soft); }
.c-upload__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.c-upload__art { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); }
.c-upload__zone:hover .c-upload__art, .c-upload__zone.is-hover .c-upload__art { background: var(--color-surface); color: var(--color-primary-strong); }
.c-upload__lead { font-size: var(--text-sm); line-height: var(--leading-sm); }
.c-upload__lead strong { font-weight: var(--weight-medium); }
.c-upload__choose { color: var(--color-primary); font-weight: var(--weight-medium); }
.is-disabled .c-upload__choose { color: var(--color-subtle); }
.c-upload__hint { max-width: 400px; color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.c-upload__msg { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-danger-text); font-size: var(--text-label); line-height: var(--leading-label); }
.c-upload__msg .icon { margin-top: 2px; }
.c-upload__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; }
.c-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.c-file + .c-file { border-top: 1px solid var(--color-default); }
.c-file__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); }
.c-file__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); min-width: 0; }
.c-file__name { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.c-file__size { color: var(--color-subtle); font-size: var(--text-xs); }
.c-file__bar { flex: 1 1 100%; height: 6px; margin: 4px 0; overflow: hidden; border-radius: var(--radius-full); background: var(--color-chart-track); }
.c-file__fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-chart-actual); transition: width var(--duration-base) var(--ease-standard); }
.c-file__meta { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.c-file__meta .spinner { width: 12px; height: 12px; border-width: 2px; color: var(--color-primary); }
.c-file__side { display: flex; align-items: center; gap: var(--space-1); }
.c-file--error .c-file__icon { background: var(--color-danger-soft); color: var(--color-danger-text); }
.c-file--error .c-file__meta { color: var(--color-danger-text); }

/* ── The code names in the feedback blocks stay on one line ── */
#feedback code, #modal code, #drawer code, #emptyState code, #fileUpload code { white-space: nowrap; }
.c-modal__actions .spinner { width: 14px; height: 14px; }
.c-empty-frame { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* parts:components:feedback end */

/* parts:components:inputs start */
/* ── Button ── */
.c-button--remove { background: var(--color-surface); border-color: var(--color-danger-text); color: var(--color-danger-text); }
.c-button--remove:hover, .c-button--remove.is-hover { background: var(--color-danger-soft); }
.c-button--remove-quiet { background: transparent; color: var(--color-danger-text); }
.c-button--remove-quiet:hover, .c-button--remove-quiet.is-hover { background: var(--color-danger-soft); }
/* A disabled button is a grey fill with a grey label, whatever its variant, and says why when it can */
.btn[disabled], .btn[disabled]:hover { opacity: 1; background: var(--color-surface-muted); border-color: var(--color-default); color: var(--color-subtle); cursor: not-allowed; }
.btn:not(.is-loading) > .spinner { display: none; }
.btn--secondary.is-loading .spinner, .btn--ghost.is-loading .spinner { color: var(--color-muted); }
.btn--danger.is-loading .spinner { color: var(--color-danger-foreground); }
.c-button--icon { width: var(--size-control); padding: 0; }
.btn--sm.c-button--icon { width: var(--size-control-sm); }
.c-button__with-reason { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.c-button__reason { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.c-button__form { width: var(--size-form); max-width: 100%; }
.c-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--space-5) var(--space-4); align-items: start; }
.c-states--wide { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.c-states__row { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-4); align-items: flex-start; }
.c-caption { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }

/* ── Text field ── */
.c-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-field--form { width: var(--size-form); max-width: 100%; }
.c-field__label { color: var(--color-muted); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); }
.c-field__control { position: relative; display: flex; align-items: center; }
.c-field__hint { margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.c-field__error { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-danger-text); }
.c-field__error[hidden] { display: none; }
.c-input {
  width: 100%;
  height: var(--size-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.c-input::placeholder { color: var(--color-subtle); opacity: 1; }
.c-input:hover:not(:disabled):not([readonly]), .c-input.is-hover { border-color: var(--color-subtle); }
.c-input:focus, .c-input.is-focus { outline: 3px solid var(--color-primary-accent); outline-offset: 0; border-color: var(--color-ring); }
.c-input[aria-invalid='true'] { border-color: var(--color-danger-text); box-shadow: inset 0 0 0 1px var(--color-danger-text); }
.c-input:disabled { background: var(--color-surface-muted); border-color: var(--color-default); color: var(--color-subtle); cursor: not-allowed; }
.c-input[readonly] { background: var(--color-surface-muted); border-color: var(--color-default); color: var(--color-muted); }
.c-input--sm { height: var(--size-control-sm); }
.c-input--area { height: auto; min-height: 88px; padding: var(--space-2) var(--space-3); resize: vertical; }
.c-input--password { padding-right: 72px; }
.c-input--prefixed { padding-left: var(--space-8); }
.c-input__prefix { position: absolute; left: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); pointer-events: none; }
.c-input__reveal {
  position: absolute;
  right: var(--space-1);
  height: 28px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.c-input__reveal:hover { background: var(--color-primary-soft); }
.c-input__reveal:focus-visible { outline-offset: 0; }

/* ── Select ── */
.c-select { position: relative; }
.c-select--filter { display: inline-block; min-width: 160px; }
.c-select--filter .c-select__list { width: max-content; min-width: 100%; }
.c-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--size-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  text-align: left;
  cursor: pointer;
}
.c-select--sm .c-select__trigger { height: var(--size-control-sm); }
.c-select__trigger:hover:not(:disabled), .c-select__trigger.is-hover { border-color: var(--color-subtle); }
.c-select__trigger:focus-visible, .c-select__trigger.is-focus { outline: 3px solid var(--color-primary-accent); outline-offset: 0; border-color: var(--color-ring); }
.c-select__trigger[aria-expanded='true'] { border-color: var(--color-ring); }
.c-select__trigger[aria-invalid='true'] { border-color: var(--color-danger-text); box-shadow: inset 0 0 0 1px var(--color-danger-text); }
.c-select__trigger:disabled { background: var(--color-surface-muted); border-color: var(--color-default); color: var(--color-subtle); cursor: not-allowed; }
.c-select__trigger[aria-readonly='true'] { background: var(--color-surface-muted); border-color: var(--color-default); color: var(--color-muted); cursor: default; }
.c-select__trigger[aria-readonly='true'] .c-select__chevron { display: none; }
.c-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-select__value.is-placeholder { color: var(--color-subtle); }
.c-select__chevron { color: var(--color-muted); transition: transform var(--duration-fast) var(--ease-standard); }
.c-select__trigger:disabled .c-select__chevron { color: var(--color-subtle); }
.c-select__trigger[aria-expanded='true'] .c-select__chevron { transform: rotate(180deg); }
.c-select__list {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: calc(var(--z-header) - 1);
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}
.c-select__list[hidden] { display: none; }
.c-select__list.is-up { top: auto; bottom: calc(100% + var(--space-1)); }
.c-select__list--static { position: static; max-height: none; margin-top: var(--space-1); width: 100%; }
.c-select__list--static.is-up { margin: 0 0 var(--space-1); }
.c-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-control);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  white-space: nowrap;
  cursor: pointer;
}
.c-select__label { flex: 1; }
.c-select__note { font-size: var(--text-xs); color: var(--color-subtle); }
.c-select__check { color: var(--color-primary); visibility: hidden; }
.c-select__option.is-active { background: var(--color-primary-soft); }
.c-select__option[aria-selected='true'] { color: var(--color-primary-strong); font-weight: var(--weight-semibold); }
.c-select__option[aria-selected='true'] .c-select__check { visibility: visible; }
.c-select__option[aria-disabled='true'] { color: var(--color-subtle); cursor: not-allowed; }
.c-select__option[aria-disabled='true'].is-active { background: transparent; }
.c-select__group-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); color: var(--color-subtle); }
.c-select__sep { height: 1px; margin: var(--space-1) 0; background: var(--color-default); }
.c-select--ghost .c-select__trigger { height: var(--size-control-sm); padding: 0 var(--space-2); border-color: transparent; background: transparent; font-weight: var(--weight-medium); }
.c-select--ghost .c-select__trigger:hover:not(:disabled) { background: var(--color-surface-muted); border-color: transparent; }
.c-select--ghost .c-select__trigger[aria-expanded='true'] { background: var(--color-surface-muted); }
.c-select--ghost .c-select__list { max-height: 224px; }
.c-select__stage { display: flex; flex-direction: column; gap: var(--space-2); width: var(--size-form); max-width: 100%; }
.c-select__keys kbd, .c-datepicker__keys kbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

/* ── Checkbox, radio, switch ── */
.c-choice { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.c-choice__legend { margin-bottom: var(--space-1); padding: 0; color: var(--color-muted); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); }
.c-choice__sub { display: flex; flex-direction: column; gap: var(--space-3); padding-left: var(--space-6); }
.c-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); color: var(--color-foreground); font-size: var(--text-sm); line-height: var(--leading-sm); cursor: pointer; }
.c-check:has(:disabled) { color: var(--color-subtle); cursor: not-allowed; }
.c-check__input {
  appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.c-check__input::after { content: ''; width: 4px; height: 8px; margin-top: -2px; border: solid var(--color-primary-foreground); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.c-check__input:hover:not(:disabled), .c-check__input.is-hover { border-color: var(--color-subtle); }
.c-check__input:checked, .c-check__input[type='checkbox']:indeterminate { border-color: var(--color-primary); background: var(--color-primary); }
.c-check__input:checked::after { opacity: 1; }
.c-check__input[type='checkbox']:indeterminate::after { width: 8px; height: 0; margin-top: 0; border-width: 0 0 2px 0; transform: none; opacity: 1; }
.c-check__input[aria-invalid='true'] { border-color: var(--color-danger-text); box-shadow: inset 0 0 0 1px var(--color-danger-text); }
.c-check__input:disabled { opacity: 0.5; cursor: not-allowed; }
.c-check__input--radio { border-radius: var(--radius-full); }
.c-check__input--radio::after { width: 8px; height: 8px; margin: 0; border: 0; border-radius: var(--radius-full); background: var(--color-primary-foreground); transform: none; }
.c-check__text { display: flex; flex-direction: column; }
.c-check__hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.c-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-subtle);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.c-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.c-switch[aria-checked='true'] { background: var(--color-primary); }
.c-switch[aria-checked='true']::after { transform: translateX(20px); background: var(--color-primary-foreground); }
.c-switch:hover:not(:disabled), .c-switch.is-hover { background: var(--color-muted); }
.c-switch[aria-checked='true']:hover:not(:disabled), .c-switch[aria-checked='true'].is-hover { background: var(--color-primary-hover); }
.c-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.c-switch-row { display: flex; align-items: center; gap: var(--space-3); }
.c-switch-row__text { display: flex; flex-direction: column; gap: 2px; }
.c-switch-row__label { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); }
.c-switch-row__state { margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-muted); min-width: 64px; text-align: right; }

/* ── Date picker ── */
.c-datepicker { position: relative; width: 280px; max-width: 100%; }
.c-datepicker--range { width: 320px; }
.c-datepicker__anchor { position: relative; }
.c-datepicker__control { position: relative; display: flex; align-items: center; }
.c-datepicker .c-input { padding-right: 44px; }
.c-datepicker__toggle {
  position: absolute;
  right: var(--space-1);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.c-datepicker__toggle:hover, .c-datepicker__toggle[aria-expanded='true'] { background: var(--color-surface-muted); color: var(--color-foreground); }
.c-datepicker__toggle:focus-visible { outline-offset: 0; }
.c-datepicker__range-shell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--size-control);
  padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
.c-datepicker__range-shell:hover { border-color: var(--color-subtle); }
.c-datepicker__range-shell:focus-within { outline: 3px solid var(--color-primary-accent); outline-offset: 0; border-color: var(--color-ring); }
.c-datepicker__range-shell.is-invalid { border-color: var(--color-danger-text); box-shadow: inset 0 0 0 1px var(--color-danger-text); }
.c-datepicker__range-shell .c-input { flex: none; width: 96px; height: 28px; padding: 0 var(--space-1); border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; }
.c-datepicker__range-shell .c-input:focus { outline: 0; }
.c-datepicker__dash { color: var(--color-subtle); }
.c-datepicker__range-shell .c-datepicker__toggle { position: static; margin-left: auto; }
.c-datepicker__popup {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: calc(7 * var(--size-control) + 2 * var(--space-3) + 2px);
  padding: var(--space-3);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}
.c-datepicker__popup[hidden] { display: none; }
.c-datepicker__popup.is-up { top: auto; bottom: calc(100% + var(--space-1)); }
.c-datepicker__popup--static { position: static; }
.c-datepicker__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.c-datepicker__selects { display: flex; align-items: center; gap: var(--space-1); }
.c-datepicker__selects .c-select--ghost:first-child .c-select__list { min-width: 140px; }
.c-datepicker__nav {
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-foreground);
  cursor: pointer;
}
.c-datepicker__nav:hover { background: var(--color-surface-muted); }
.c-datepicker__status { margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); text-align: center; }
.c-datepicker__status[hidden] { display: none; }
.c-datepicker__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.c-datepicker__grid th { height: 28px; padding: 0; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); color: var(--color-subtle); text-align: center; }
.c-datepicker__grid td { width: var(--size-control); height: var(--size-control); padding: 0; text-align: center; }
.c-datepicker__day {
  width: var(--size-control);
  height: var(--size-control);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.c-datepicker__day:hover:not(:disabled) { background: var(--color-surface-muted); }
.c-datepicker__day:focus-visible { outline-offset: -2px; }
.c-datepicker__day.is-outside { color: var(--color-subtle); }
.c-datepicker__day.is-today { box-shadow: inset 0 0 0 1px var(--color-primary); font-weight: var(--weight-semibold); }
.c-datepicker__day:disabled { color: var(--color-subtle); text-decoration: line-through; cursor: not-allowed; }
.c-datepicker__grid td.is-range { background: var(--color-primary-soft); }
.c-datepicker__grid td.is-range .c-datepicker__day:hover:not(:disabled) { background: var(--color-primary-accent); }
.c-datepicker__grid td.is-start.has-end { background: linear-gradient(to right, transparent 50%, var(--color-primary-soft) 50%); }
.c-datepicker__grid td.is-end { background: linear-gradient(to left, transparent 50%, var(--color-primary-soft) 50%); }
.c-datepicker__grid td[aria-selected='true'] .c-datepicker__day { background: var(--color-primary); color: var(--color-primary-foreground); font-weight: var(--weight-semibold); }
.c-datepicker__grid td[aria-selected='true'] .c-datepicker__day:hover { background: var(--color-primary-hover); }
.c-datepicker__foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-2); border-top: 1px solid var(--color-default); }
.c-datepicker__stage { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }

/* ── Locked field ── */
.c-locked__hint { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.c-locked__hint .icon { width: 14px; height: 14px; margin-top: 1px; }
.c-locked__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); align-items: start; }
.c-locked__as { align-self: flex-start; }
.c-locked__as--land { background: var(--color-fn-land-tint); color: var(--color-fn-land); }
.c-locked__as--construction { background: var(--color-fn-construction-tint); color: var(--color-fn-construction); }
.c-locked__as { border-color: transparent; }
.c-locked__form { display: flex; flex-direction: column; gap: var(--space-4); width: var(--size-form); max-width: 100%; padding: var(--space-5); }
.c-locked__beside { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.c-select--above { display: flex; flex-direction: column-reverse; }
.c-select--above .c-select__trigger { flex: none; }

/* ── Date picker: the day samples ── */
.c-datepicker__day { display: inline-grid; place-items: center; }
.c-datepicker__day.is-selected { background: var(--color-primary); color: var(--color-primary-foreground); font-weight: var(--weight-semibold); }
.c-datepicker__day.is-in-range { background: var(--color-primary-soft); border-radius: 0; }
.c-datepicker__day.is-hover { background: var(--color-surface-muted); }
.c-datepicker__day.is-focus { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.c-datepicker__days { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-4); }

.c-states--wide .sc-state { align-items: stretch; }
/* parts:components:inputs end */

/* parts:components:navigation start */
/* ── Navigation group: shared bits ── */
.c-nav__rule { max-width: 760px; color: var(--color-muted); }
.c-nav__col { flex-direction: column; align-items: flex-start; }
.c-nav__top { align-items: flex-start; }

/* ── Tabs ── */
.c-tabs-box { container-type: inline-size; width: 100%; }
.c-tabs-box--narrow { max-width: 360px; }
.c-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  max-width: 100%;
  padding: var(--space-1);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}
.c-tabs--fill { display: flex; width: 100%; }
@container (min-width: 640px) {
  .c-tabs--fill { justify-content: space-between; }
}
.c-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--size-control-sm);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-subtle);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.c-tabs__tab:hover, .c-tabs__tab.is-hover { color: var(--color-muted); }
.c-tabs__tab:focus-visible, .c-tabs__tab.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.c-tabs__tab[aria-current='page'] {
  background: var(--color-surface);
  color: var(--color-foreground);
  box-shadow: var(--shadow-card);
}
.c-tabs__tab:disabled { opacity: 0.5; cursor: not-allowed; }
@media (forced-colors: active) {
  .c-tabs__tab[aria-current='page'] { outline: 2px solid; outline-offset: -2px; }
}
.c-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.c-tabs__tab[aria-current='page'] .c-tabs__count { background: var(--color-surface-muted); color: var(--color-foreground); }
.c-tabs__tab .c-tabs__count--alert,
.c-tabs__tab[aria-current='page'] .c-tabs__count--alert { background: var(--color-danger-soft); color: var(--color-danger-text); }

/* ── Breadcrumbs ── */
.c-crumbs { min-width: 0; }
.c-crumbs__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-subtle);
}
.c-crumbs__item { display: flex; flex: none; align-items: center; gap: var(--space-2); min-width: 0; }
.c-crumbs__item:last-child { flex: 0 1 auto; }
.c-crumbs__item[hidden] { display: none; }
.c-crumbs__sep { flex: none; color: var(--color-subtle); }
.c-crumbs__link {
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--color-subtle);
  white-space: nowrap;
  text-decoration: none;
}
.c-crumbs__link:hover, .c-crumbs__link.is-hover { color: var(--color-foreground); }
.c-crumbs__current {
  min-width: 0;
  overflow: hidden;
  color: var(--color-foreground);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-crumbs__fold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-subtle);
  line-height: 1;
  cursor: pointer;
}
.c-crumbs__fold:hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.c-crumbs-narrow { width: 280px; max-width: 100%; }

/* ── Dropdown menu ── */
.c-menu { position: relative; display: inline-block; }
.c-menu__trigger { gap: var(--space-2); }
.c-menu__trigger--icon { width: var(--size-control); padding: 0; }
.c-menu__chevron { transition: transform var(--duration-fast) var(--ease-standard); }
.c-menu__trigger[aria-expanded='true'] .c-menu__chevron { transform: rotate(180deg); }
.c-menu__list {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-header);
  min-width: 220px;
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}
.c-menu__list[hidden] { display: none; }
.c-menu--end .c-menu__list { left: auto; right: 0; }
.c-menu__list.is-up { top: auto; bottom: calc(100% + var(--space-1)); }
.c-menu--static .c-menu__list { position: static; display: block; width: 240px; max-height: none; margin-top: var(--space-1); }
.c-menu__list--inline { position: static; display: block; min-width: 0; width: 200px; }
.c-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--size-control);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.c-menu__item .icon { color: var(--color-muted); }
.c-menu__item:hover, .c-menu__item:focus, .c-menu__item.is-active { background: var(--color-primary-soft); }
.c-menu__item:focus { outline: none; }
.c-menu__item:focus-visible, .c-menu__item.is-focus { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.c-menu__item[aria-disabled='true'] { color: var(--color-subtle); cursor: not-allowed; }
.c-menu__item[aria-disabled='true'] .icon { color: var(--color-subtle); }
.c-menu__item--danger, .c-menu__item--danger .icon { color: var(--color-danger-text); }
.c-menu__item--danger:hover, .c-menu__item--danger:focus, .c-menu__item--danger.is-active { background: var(--color-danger-soft); }
.c-menu__heading {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--color-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
}
.c-menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--color-default); }
.c-menu-stage { display: flex; flex-direction: column; gap: var(--space-3); min-height: 380px; }
.c-menu-out { color: var(--color-muted); }
.c-menu-out strong { color: var(--color-foreground); font-weight: var(--weight-medium); }
.c-menu__key {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--color-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 16px;
  text-align: center;
}

/* ── Stepper ── */
.c-stepper { display: flex; align-items: flex-start; width: 100%; }
.c-stepper__step { position: relative; display: flex; flex: 1 1 0; flex-direction: column; gap: var(--space-2); min-width: 0; }
.c-stepper__step:last-child { flex: 0 0 auto; }
.c-stepper__head { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-2); }
.c-stepper__marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-emphasis);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.c-stepper__line { flex: 1 1 auto; height: 2px; min-width: var(--space-4); border-radius: var(--radius-full); background: var(--color-emphasis); }
.c-stepper__step:last-child .c-stepper__line { display: none; }
.c-stepper__text { display: flex; flex-direction: column; gap: 2px; padding-right: var(--space-3); }
.c-stepper__title { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-regular); color: var(--color-muted); white-space: nowrap; }
.c-stepper__desc { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.c-stepper__status { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.c-stepper__status { display: none; }
.is-done .c-stepper__status--done,
.is-current .c-stepper__status--current,
.is-todo .c-stepper__status--todo { display: block; }
.c-stepper__step.is-done .c-stepper__marker { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-foreground); }
.c-stepper__step.is-done .c-stepper__line { background: var(--color-primary); }
.c-stepper__step.is-done .c-stepper__title { color: var(--color-foreground); }
.c-stepper__step.is-current .c-stepper__marker { border-color: var(--color-primary); color: var(--color-primary); }
.c-stepper__step.is-current .c-stepper__title { color: var(--color-foreground); font-weight: var(--weight-medium); }
.c-stepper__step.is-current .c-stepper__status { color: var(--color-primary); font-weight: var(--weight-medium); }
.c-stepper--single { width: auto; }
.c-stepper--vertical { flex-direction: column; width: auto; max-width: 320px; }
.c-stepper--vertical .c-stepper__step,
.c-stepper--vertical .c-stepper__step:last-child { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); flex: none; }
.c-stepper--vertical .c-stepper__head { flex-direction: column; padding-right: 0; }
.c-stepper--vertical .c-stepper__line { flex: 1 1 auto; width: 2px; min-width: 0; height: auto; min-height: var(--space-6); }
.c-stepper--vertical .c-stepper__text { padding: 3px 0 var(--space-4); }
.c-stepper--vertical .c-stepper__step:last-child .c-stepper__text { padding-bottom: 0; }
.c-stepper-demo { display: flex; flex-direction: column; gap: var(--space-4); }
.c-stepper-compact { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 280px; }
.c-stepper-compact__text { display: flex; align-items: baseline; gap: var(--space-3); }
.c-stepper-compact__track { display: flex; gap: var(--space-1); }
.c-stepper-compact__seg { flex: 1 1 0; height: 4px; border-radius: var(--radius-full); background: var(--color-chart-track); }
.c-stepper-compact__seg.is-done, .c-stepper-compact__seg.is-current { background: var(--color-primary); }
.c-stepper-compact__seg.is-current { background: var(--color-primary-accent); }

/* ── App shell ── */
.c-shell { display: flex; min-height: 760px; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); overflow: hidden; }
.c-shell__column { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.c-shell__frame { display: flex; align-self: flex-start; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); }
.c-shell__frame > .c-shell__side { border-right: 0; border-radius: var(--radius-card) 0 0 var(--radius-card); }
.c-shell__frame--tip { min-width: 220px; border: 0; background: transparent; }
.c-shell__frame--tip > .c-shell__side { border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.sc-state:has(> .c-shell__frame:not(.c-shell__frame--wide)) { width: 260px; }
.sc-state:has(> .c-shell__frame--tip) { width: 300px; }
.c-shell__frame--wide { display: block; width: 100%; overflow: hidden; }
.c-shell__frame--wide > .c-shell__top { border-bottom: 0; }

/* the sidebar */
.c-shell__side {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-3);
  width: var(--size-sidebar);
  min-height: 760px;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--color-default);
  background: var(--color-sidebar);
  transition: width var(--duration-base) var(--ease-standard);
}
.c-shell__side.is-collapsed { align-items: center; width: calc(var(--space-12) + var(--space-4)); padding-inline: var(--space-2); }
.c-shell__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; height: var(--size-control); }
.c-shell__side.is-collapsed .c-shell__head { flex-direction: column; height: auto; gap: var(--space-2); }
.c-shell__brand { min-height: var(--size-control); min-width: 0; padding: 0 var(--space-1); border-radius: var(--radius-control); }
.c-shell__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-shell__side.is-collapsed .c-shell__name { display: none; }
.c-shell__toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-subtle);
  cursor: pointer;
}
.c-shell__toggle:hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.c-shell__arrow-out { display: none; }
.c-shell__side.is-collapsed .c-shell__arrow-in { display: none; }
.c-shell__side.is-collapsed .c-shell__arrow-out { display: inline; }

.c-shell__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--size-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-subtle);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.c-shell__search:hover { border-color: var(--color-emphasis); color: var(--color-muted); }
.c-shell__search .c-shell__label { flex: 1 1 auto; }
.c-shell__search .c-shell__kbd { flex: none; }
.c-shell__kbd {
  padding: 1px 6px;
  border: 1px solid var(--color-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 16px;
}
.c-shell__side.is-collapsed .c-shell__search { justify-content: center; width: var(--size-control); padding: 0; }
.c-shell__side.is-collapsed .c-shell__label { display: none; }

.c-shell__user {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-foreground);
  text-decoration: none;
}
.c-shell__user:hover { color: var(--color-foreground); }
.c-shell__side.is-collapsed .c-shell__user { justify-content: center; width: auto; padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
.c-shell__who { display: flex; flex-direction: column; min-width: 0; }
.c-shell__user-name { overflow: hidden; font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.c-shell__user-role { overflow: hidden; color: var(--color-subtle); font-size: var(--text-xs); line-height: var(--leading-xs); text-overflow: ellipsis; white-space: nowrap; }
.c-shell__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-control);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.c-shell__avatar--backoffice { background: var(--color-fn-backoffice-tint); color: var(--color-fn-backoffice); }
.c-shell__avatar--land { background: var(--color-fn-land-tint); color: var(--color-fn-land); }
.c-shell__avatar--partnerships { background: var(--color-fn-partnerships-tint); color: var(--color-fn-partnerships); }
.c-shell__avatar--construction { background: var(--color-fn-construction-tint); color: var(--color-fn-construction); }
.c-shell__avatar--legal { background: var(--color-fn-legal-tint); color: var(--color-fn-legal); }
.c-shell__avatar--more { background: var(--color-surface-muted); color: var(--color-muted); }

.c-shell__nav { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.c-shell__group { display: flex; flex-direction: column; gap: 2px; }
.c-shell__caption {
  padding: 0 var(--space-3) var(--space-1);
  color: var(--color-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c-shell__rule { display: none; height: 1px; margin: 0 var(--space-2) var(--space-1); background: var(--color-default); }
.c-shell__side.is-collapsed .c-shell__caption { display: none; }
.c-shell__side.is-collapsed .c-shell__rule { display: block; }
.c-shell__side.is-collapsed .c-shell__nav, .c-shell__side.is-collapsed .c-shell__group { align-items: center; }
.c-shell__side.is-collapsed .c-shell__rule { align-self: stretch; }
.c-shell__item {
  position: relative;
  gap: var(--space-3);
  height: var(--size-control);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}
.c-shell__item[aria-current='page'] { font-weight: var(--weight-medium); }
.c-shell__side.is-collapsed .c-shell__item { justify-content: center; width: var(--size-control); padding: 0; }
.c-shell__foot { width: 100%; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-default); }
.c-shell__side.is-collapsed .c-shell__foot { display: flex; justify-content: center; }
.c-shell__tip {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-3));
  z-index: var(--z-header);
  display: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--color-surface-inverted);
  box-shadow: var(--shadow-overlay);
  color: var(--color-inverted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}
.c-shell__side.is-collapsed .c-shell__item:hover .c-shell__tip,
.c-shell__side.is-collapsed .c-shell__item:focus-visible .c-shell__tip,
.c-shell__side.is-collapsed .c-shell__item.is-hover .c-shell__tip,
.c-shell__side.is-collapsed .c-shell__user:hover .c-shell__tip,
.c-shell__side.is-collapsed .c-shell__user:focus-visible .c-shell__tip { display: block; }

/* the top bar */
.c-shell__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--size-header);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-default);
  background: var(--color-surface);
}
.c-shell__crumbs { flex: 1 1 auto; min-width: 0; }
.c-shell__tools { display: flex; flex: none; align-items: center; gap: var(--space-3); }
.c-shell__updated { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.c-shell__stack { display: flex; align-items: center; padding-left: var(--space-2); }
.c-shell__stack .c-shell__avatar {
  width: 28px;
  height: 28px;
  margin-left: -4px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-surface);
  font-size: var(--text-xs);
}

/* the page */
.c-shell__page { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.c-shell__page .c-tabs__tab { padding: 0 var(--space-2); }
.c-shell__title { display: flex; flex-direction: column; gap: var(--space-1); }
.c-shell__meta { display: flex; align-items: center; gap: var(--space-2); }
.c-shell__stage { height: 20px; border-color: transparent; background: var(--color-stage-tint); color: var(--color-stage-text); }
.c-shell__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.c-shell__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.c-shell__bar { display: block; height: 10px; border-radius: var(--radius-full); background: var(--color-surface-muted); }
.c-shell__bar--w40 { width: 40%; }
.c-shell__bar--w60 { width: 60%; }
.c-shell__bar--w80 { width: 80%; }
.c-shell__states { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.c-shell__state-box { width: var(--size-sidebar); padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-sidebar); }
/* parts:components:navigation end */

/* parts:components:record start */
/* ── Record group: shared ── */
.c-rec__purpose { max-width: 760px; color: var(--color-muted); }

/* ── Function chip ── */
.c-fnchip {
  --fn: var(--color-fn-legal);
  --fn-tint: var(--color-fn-legal-tint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  background: var(--fn-tint);
  color: var(--fn);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.c-fnchip--backoffice { --fn: var(--color-fn-backoffice); --fn-tint: var(--color-fn-backoffice-tint); }
.c-fnchip--land { --fn: var(--color-fn-land); --fn-tint: var(--color-fn-land-tint); }
.c-fnchip--partnerships { --fn: var(--color-fn-partnerships); --fn-tint: var(--color-fn-partnerships-tint); }
.c-fnchip--construction { --fn: var(--color-fn-construction); --fn-tint: var(--color-fn-construction-tint); }
.c-fnchip--legal { --fn: var(--color-fn-legal); --fn-tint: var(--color-fn-legal-tint); }
.c-fnchip--sm { height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.c-fnchip--lg { height: 28px; padding: 0 var(--space-3); font-size: var(--text-label); }
.c-fnchip__avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: -8px;
  border-radius: var(--radius-full);
  background: var(--fn);
  color: var(--fn-tint);
  font-size: 9px;
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}
.c-fnchip--sm .c-fnchip__avatar { width: 16px; height: 16px; margin-left: -6px; font-size: 8px; }
.c-fnchip--lg .c-fnchip__avatar { width: 24px; height: 24px; margin-left: -9px; font-size: 10px; }
.c-fnchip__person { font-weight: var(--weight-semibold); }
.c-fnchip__group { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.c-fnchip__table { max-width: 720px; }

/* ── Stage bar ── */
.c-stagebar { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.c-stagebar--inline { padding: var(--space-4); }
.c-stagebar__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.c-stagebar__title { display: flex; align-items: baseline; gap: var(--space-2); }
.c-stagebar__scroll { overflow-x: auto; padding-bottom: var(--space-1); }
.c-stagebar__list { display: flex; gap: calc(var(--space-1) * 1.5); min-width: max-content; width: 100%; }
.c-stagebar__seg { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 112px; }
.c-stagebar__list--sm .c-stagebar__seg { min-width: 56px; gap: var(--space-1); }
.c-stagebar__track { width: 100%; height: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-emphasis); }
.c-stagebar__list--sm .c-stagebar__track { height: 4px; }
.c-stagebar__fill { width: var(--fill, 50%); height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.c-stagebar__name { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.c-stagebar__note { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.c-stagebar__seg.is-done .c-stagebar__track { background: var(--color-primary); }
.c-stagebar__seg.is-done .c-stagebar__name { color: var(--color-foreground); }
.c-stagebar__seg.is-current .c-stagebar__track { background: var(--color-primary-soft); }
.c-stagebar__seg.is-current .c-stagebar__name,
.c-stagebar__seg.is-current .c-stagebar__note { color: var(--color-primary); font-weight: var(--weight-medium); }
.c-stagebar__seg.is-na .c-stagebar__track { background: transparent; border: 1px dashed var(--color-emphasis); }
.c-stagebar__seg.is-na .c-stagebar__name { text-decoration: line-through; }
.c-stagebar__owner { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; font-size: var(--text-xs); line-height: 1; font-weight: var(--weight-medium); color: var(--color-muted); }
.c-stagebar__owner--joint { gap: 2px; }
.c-stagebar__owner--joint > span:last-child { margin-left: var(--space-1); }
.c-stagebar__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-fn-legal); }
.c-stagebar__dot--backoffice { background: var(--color-fn-backoffice); }
.c-stagebar__dot--land { background: var(--color-fn-land); }
.c-stagebar__dot--partnerships { background: var(--color-fn-partnerships); }
.c-stagebar__dot--construction { background: var(--color-fn-construction); }
.c-stagebar__legend { margin-top: calc(var(--space-1) * -1); }
.c-stagebar__swatch { display: block; width: 96px; height: 6px; border-radius: var(--radius-full); background: var(--color-emphasis); }
.c-stagebar__swatch.is-done { background: var(--color-primary); }
.c-stagebar__swatch.is-current { background: linear-gradient(to right, var(--color-primary) 40%, var(--color-primary-soft) 40%); }
.c-stagebar__swatch.is-na { background: transparent; border: 1px dashed var(--color-emphasis); }

/* ── Deal clock ── */
.c-clock { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.c-clock__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.c-clock__figure { display: flex; align-items: baseline; gap: var(--space-2); }
.c-clock__bar { height: 4px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-chart-track); }
.c-clock__fill { width: var(--fill, 0%); height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.c-clock--soon .c-clock__fill { background: var(--color-warning); }
.c-clock--soon .c-clock__figure .t-figure { color: var(--color-warning-text); }
.c-clock--over .c-clock__fill { background: var(--color-danger); }
.c-clock--over .c-clock__figure { color: var(--color-danger-text); }
.c-clock__dates { display: flex; justify-content: space-between; gap: var(--space-2); }
.c-clock__applied { color: var(--color-subtle); }
.c-clock__pill { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ── Deal Health ── */
.c-health {
  --c-tint: var(--color-health-good-tint);
  --c-text: var(--color-health-good-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--c-tint);
  color: var(--c-text);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.c-health--fair { --c-tint: var(--color-health-fair-tint); --c-text: var(--color-health-fair-text); }
.c-health--poor { --c-tint: var(--color-health-poor-tint); --c-text: var(--color-health-poor-text); }
.c-health--none { background: transparent; color: var(--color-subtle); padding: 0 var(--space-2); }
.c-health--lg { height: 32px; padding: 0 14px; gap: var(--space-2); font-size: var(--text-lg); }
button.c-health { cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-standard); }
button.c-health:hover, button.c-health.is-hover { box-shadow: inset 0 0 0 1px currentColor; }
button.c-health:focus-visible, button.c-health.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.c-health__info { width: 12px; height: 12px; opacity: 0.8; }
.c-health__more { margin-left: var(--space-1); font-weight: var(--weight-regular); }
.c-health__bandname { margin-left: var(--space-2); }
.c-health__stage { min-height: 0; }
.c-health__stage--live { min-height: 420px; }
.c-health__anchor { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.c-health__panel {
  width: 384px;
  max-width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.c-health__panel[hidden] { display: none; }
.c-health__stage--live .c-health__panel { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--z-header); }
.c-health__sub { color: var(--color-subtle); font-weight: var(--weight-regular); }
.c-health__rows { margin-top: var(--space-3); }
.c-health__rowitem { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--color-default); }
.c-health__pts { font-weight: var(--weight-semibold); color: var(--color-subtle); white-space: nowrap; }
.c-health__pts.is-neg { color: var(--color-danger-text); }
.c-health__fired { margin: var(--space-3) 0; padding-top: var(--space-3); border-top: 1px solid var(--color-default); }
.c-health__list { margin-top: var(--space-1); padding-left: var(--space-5); list-style: disc; }

/* ── Key dates ── */
.c-keydates { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.c-keydates__list { display: flex; flex-direction: column; gap: var(--space-4); }
.c-keydates__row { display: flex; flex-direction: column; gap: var(--space-2); }
.c-keydates__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.c-keydates__label { min-width: 88px; color: var(--color-subtle); font-size: var(--text-label); line-height: var(--leading-label); }
.c-keydates__date { margin-left: auto; font-size: var(--text-sm); }
.c-keydates__date--none { color: var(--color-subtle); }
.c-keydates__tag { height: 20px; }
.c-keydates__tag--target { border-color: transparent; background: var(--color-primary-soft); color: var(--color-primary-strong); }
.c-keydates__count { height: 20px; }
.c-keydates__count--target { border-color: transparent; background: var(--color-primary-soft); color: var(--color-primary-strong); }
.c-keydates__count--hard { background: var(--color-surface-muted); color: var(--color-muted); }
.c-keydates__count--soon { border-color: transparent; background: var(--color-warning-soft); color: var(--color-warning-text); }
.c-keydates__count--over { border-color: transparent; background: var(--color-danger-soft); color: var(--color-danger-text); }
.c-keydates__count--met { border-color: transparent; background: var(--color-success-soft); color: var(--color-success-text); }
.c-keydates__bar { height: 4px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-chart-track); }
.c-keydates__fill { width: var(--fill, 0%); height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.c-keydates__bar--hard .c-keydates__fill { background: var(--color-subtle); }
.c-keydates__bar--soon .c-keydates__fill { background: var(--color-warning); }
.c-keydates__bar--over .c-keydates__fill { background: var(--color-danger); }
.c-keydates__bar--met .c-keydates__fill { background: var(--color-success); }

/* ── Position card ── */
.c-position { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.c-position__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.c-position__name { font-weight: var(--weight-semibold); }
.c-position__name:hover, .c-position__name.is-hover { color: var(--color-primary-hover); text-decoration: underline; }
.c-position__status {
  --c-tint: var(--color-stage-tint);
  --c-text: var(--color-stage-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--c-text) 15%, transparent);
  border-radius: var(--radius-full);
  background: var(--c-tint);
  color: var(--c-text);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.c-position__status--done { --c-tint: var(--color-stage-done-tint); --c-text: var(--color-stage-done-text); }
.c-position__status--dead { --c-tint: var(--color-stage-dead-tint); --c-text: var(--color-stage-dead-text); }
.c-position__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.c-position__pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.c-position__pairs dd { margin: 0; font-weight: var(--weight-semibold); }
.c-position__empty { color: var(--color-subtle); }

/* ── Fee stream card ── */
.c-fee { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.c-fee__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.c-fee__amount { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.c-fee__pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.c-fee__pairs dd { margin: 0; }
.c-fee__steps { display: flex; gap: calc(var(--space-1) * 1.5); }
.c-fee__step { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--space-1); min-width: 0; }
.c-fee__track { height: 4px; border-radius: var(--radius-full); background: var(--color-emphasis); }
.c-fee__step.is-done .c-fee__track { background: var(--color-primary); }
.c-fee__stepname { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.c-fee__step.is-done .c-fee__stepname { color: var(--color-foreground); }
.c-fee__step.is-current .c-fee__stepname { color: var(--color-primary); font-weight: var(--weight-medium); }
.c-fee__flag { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); color: var(--color-warning-text); }
.c-fee.is-notpayable .c-fee__money { color: var(--color-subtle); text-decoration: line-through; }
.c-fee__np { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-control); }
.c-fee__rate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: var(--space-5); }
.c-fee__rate > div:first-child { display: flex; flex-direction: column; }
.c-fee__rateline { display: flex; flex-direction: column; gap: var(--space-1); }
/* parts:components:record end */

/* parts:components:reserve start */
/* ── Reserve ── */
.c-reserve__list { gap: var(--space-10); }
.c-reserve { display: flex; flex-direction: column; gap: var(--space-3); }
.c-reserve__head { display: flex; align-items: center; gap: var(--space-3); }
.c-reserve__head .t-section-title { margin: 0; }
.c-reserve__why { max-width: 760px; margin: 0; color: var(--color-muted); }
.c-reserve__variants { max-width: 880px; margin: 0; }
.c-reserve__intro { max-width: 760px; margin: 0; color: var(--color-muted); }

/* A Deal Health chip: the icon and the figure, in the band's tint */
.c-reserve__health { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; }
.c-reserve__health .icon { width: 12px; height: 12px; }
.c-reserve__health--good { background: var(--color-health-good-tint); color: var(--color-health-good-text); }
.c-reserve__health--fair { background: var(--color-health-fair-tint); color: var(--color-health-fair-text); }
.c-reserve__health--poor { background: var(--color-health-poor-tint); color: var(--color-health-poor-text); }

/* ── Site map ── */
.c-sitemap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--space-4); align-items: start; }
.c-sitemap__frame { border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); overflow: hidden; }
.c-sitemap__frame svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.c-sitemap__region { fill: var(--color-surface-muted); stroke: var(--color-emphasis); stroke-width: 1.5; stroke-linejoin: round; }
.c-sitemap__region-name { fill: var(--color-subtle); font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.04em; }
.c-sitemap__pin { stroke: var(--color-surface); stroke-width: 1.5; }
.c-sitemap__pin--good { fill: var(--color-health-good-text); }
.c-sitemap__pin--fair { fill: var(--color-health-fair-text); }
.c-sitemap__pin--poor { fill: var(--color-health-poor-text); }
.c-sitemap__dot { fill: var(--color-surface); }
.c-sitemap__label { fill: var(--color-foreground); font-size: 12px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--color-surface-muted); stroke-width: 3; stroke-linejoin: round; }
.c-sitemap__legend { display: flex; flex-direction: column; gap: var(--space-3); }
.c-sitemap__legend p { margin: 0; }
.c-sitemap__keys { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.c-sitemap__keys li { display: flex; align-items: center; gap: var(--space-2); }
.c-sitemap__swatch { width: 12px; height: 12px; border-radius: var(--radius-full); }
.c-sitemap__swatch--good { background: var(--color-health-good-text); }
.c-sitemap__swatch--fair { background: var(--color-health-fair-text); }
.c-sitemap__swatch--poor { background: var(--color-health-poor-text); }

/* ── Signature status ── */
.c-signature { display: flex; flex-direction: column; gap: var(--space-5); max-width: 880px; padding: var(--space-5); }
.c-signature__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.c-signature__file { display: inline-flex; align-items: center; gap: var(--space-2); }
.c-signature__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.c-signature__step { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-10); }
.c-signature__marker { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); }
.c-signature__step--done .c-signature__marker { background: var(--color-success-soft); color: var(--color-success-text); }
.c-signature__step--current .c-signature__marker { background: var(--color-warning-soft); color: var(--color-warning-text); }
/* the line to the next step */
.c-signature__step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 36px; right: 8px; height: 2px; border-radius: var(--radius-full); background: var(--color-default); }
.c-signature__step--done:not(:last-child)::after { background: var(--color-success); }
.c-signature__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-default); }

/* ── Comment thread on a record ── */
.c-thread { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; padding: var(--space-5); }
.c-thread__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.c-thread__list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.c-thread__comment, .c-thread__reply { display: flex; align-items: flex-start; gap: var(--space-3); }
.c-thread__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-thread__body p { margin: 0; }
.c-thread__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.c-thread__avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-foreground); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.c-thread__avatar--land { background: var(--color-fn-land-tint); color: var(--color-fn-land); }
.c-thread__avatar--partnerships { background: var(--color-fn-partnerships-tint); color: var(--color-fn-partnerships); }
.c-thread__avatar--legal { background: var(--color-fn-legal-tint); color: var(--color-fn-legal); }
.c-thread__reply { padding-top: var(--space-4); border-top: 1px solid var(--color-default); }
.c-thread__box { position: relative; display: flex; flex: 1; flex-direction: column; gap: var(--space-2); min-width: 0; }
.c-thread__input { width: 100%; min-height: 64px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-foreground); font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); resize: vertical; }
.c-thread__input::placeholder { color: var(--color-subtle); }
.c-thread__input:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.c-thread__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.c-thread__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Kanban of Sites by stage ── */
.c-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); overflow-x: auto; }
.c-kanban__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.c-kanban__colhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-1) 0; }
.c-kanban__cards { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.c-kanban__card { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-card); }
.c-kanban__code { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.c-kanban__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.c-kanban__legend { margin: var(--space-2) 0 0; }

@media (max-width: 900px) {
  .c-sitemap { grid-template-columns: minmax(0, 1fr); }
  .c-signature__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .c-signature__step { padding-top: 0; padding-left: var(--space-10); min-height: 28px; }
  .c-signature__step:not(:last-child)::after { top: 36px; left: 13px; right: auto; width: 2px; height: calc(100% - 20px); }
}
/* parts:components:reserve end */

/* ill:start — the Illustrations block, owned by tools/lib/illustrations.mjs */
/* ── Illustrations (tools/lib/illustrations.mjs, assets/illustrations.js). Drawn only with tokens: the --ill-* set
   and the scheme's --color-* tints, so both themes follow. The parts that move (.ill-m-*) rest in their final pose
   and animate only while the picture has .is-playing; without it — reduced motion, a still screenshot, a mail
   client — each picture is complete. ── */
.ill { display: block; height: auto; overflow: visible; }
.ill--spot { width: 120px; }
.ill--scene { width: 240px; }
.ill--hero { width: 360px; max-width: 100%; }

/* The first set of classes, still used by pictures drawn elsewhere (genEmails' own, 160 x 120) */
.ill .ill-line { stroke: var(--ill-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill .ill-thin { stroke-width: 1.5; }
.ill .ill-thick { stroke-width: 4; }
.ill path.ill-line:not(.ill-fill):not(.ill-soft), .ill .ill-accent-line, .ill .ill-fill-line { fill: none; }
.ill .ill-fill { fill: var(--ill-fill); }
.ill .ill-soft { fill: var(--ill-soft); }
.ill .ill-accent { fill: var(--ill-accent); }
.ill .ill-ground { fill: var(--ill-ground); }
.ill .ill-warm { fill: var(--ill-warm); }
.ill .ill-accent-line { stroke: var(--ill-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .ill-fill-line { stroke: var(--ill-fill); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .ill-dash { stroke-dasharray: 4 4; }
.ill [pathLength].ill-dash { stroke-dasharray: 2.2 1.6; }

/* Sky */
.ill .ill-stop-a { stop-color: var(--ill-soft); }
.ill .ill-stop-b { stop-color: var(--ill-fill); }

/* Strokes: a colour (ill-k*), a width (ill-w*); a stroke with no fill class is unfilled */
.ill [class*='ill-k'] { stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.ill [class*='ill-k']:not([class*='ill-f-']) { fill: none; }
.ill .ill-k { stroke: var(--ill-line); }
.ill .ill-ka { stroke: var(--ill-accent); stroke-width: 2.5; }
.ill .ill-kw { stroke: var(--ill-fill); }
.ill .ill-kok { stroke: var(--color-success); stroke-width: 2.5; }
.ill .ill-kbad { stroke: var(--color-danger); }
.ill .ill-kink { stroke: var(--color-primary-strong); stroke-width: 2.2; }
.ill .ill-kwood { stroke: color-mix(in srgb, var(--color-warning) 50%, var(--ill-fill)); }
.ill .ill-kcrane { stroke: var(--color-warning); }
.ill .ill-ktree { stroke: color-mix(in srgb, var(--color-success) 55%, var(--ill-fill)); stroke-width: 3.5; }
.ill .ill-kr { stroke: var(--ill-accent); stroke-width: 6; opacity: 0.4; }
.ill .ill-kroad { stroke: var(--ill-fill); stroke-width: 4; }
.ill .ill-kroadedge { stroke: var(--ill-line); stroke-width: 6.5; opacity: 0.35; }
.ill .ill-w1 { stroke-width: 1.25; }
.ill .ill-w2 { stroke-width: 2; }
.ill .ill-w3 { stroke-width: 3; }
.ill .ill-w5 { stroke-width: 5; }
.ill .ill-w8 { stroke-width: 8; }
.ill .ill-w12 { stroke-width: 12; }
.ill .ill-faint { opacity: 0.45; }

/* Fills */
.ill .ill-f-room { fill: var(--ill-ground); }
.ill .ill-f-far { fill: var(--color-fn-land-tint); }
.ill .ill-f-mid { fill: var(--color-success-soft); }
.ill .ill-f-near { fill: var(--color-fn-construction-tint); }
.ill .ill-f-plain { fill: var(--ill-fill); }
.ill .ill-f-soft { fill: var(--ill-soft); }
.ill .ill-f-accent { fill: var(--ill-accent); }
.ill .ill-f-accentsoft { fill: color-mix(in srgb, var(--ill-accent) 22%, var(--ill-fill)); }
.ill .ill-f-line { fill: var(--ill-line); }
.ill .ill-f-hedge { fill: color-mix(in srgb, var(--color-success) 40%, var(--ill-fill)); }
.ill .ill-f-tree { fill: color-mix(in srgb, var(--color-success) 58%, var(--ill-fill)); }
.ill .ill-f-treehi { fill: color-mix(in srgb, var(--color-success) 30%, var(--ill-fill)); }
.ill .ill-f-wood { fill: color-mix(in srgb, var(--color-warning) 50%, var(--ill-fill)); }
.ill .ill-f-track { fill: color-mix(in srgb, var(--color-warning) 18%, var(--ill-fill)); }
.ill .ill-f-desk { fill: color-mix(in srgb, var(--color-warning) 26%, var(--ill-ground)); }
.ill .ill-f-deskside { fill: color-mix(in srgb, var(--color-warning) 36%, var(--ill-ground)); }
.ill .ill-f-roof { fill: color-mix(in srgb, var(--color-danger) 50%, var(--ill-warm)); }
.ill .ill-f-door { fill: var(--ill-accent); }
.ill .ill-f-lit, .ill .ill-f-sun { fill: var(--ill-warm); }
.ill .ill-f-halo { fill: var(--ill-warm); opacity: 0.35; }
.ill .ill-f-light { fill: var(--ill-warm); opacity: 0.2; }
.ill .ill-f-cloud { fill: var(--ill-fill); opacity: 0.92; }
.ill .ill-f-grey { fill: color-mix(in srgb, var(--ill-line) 18%, var(--ill-fill)); }
.ill .ill-f-shadow { fill: var(--color-overlay); opacity: 0.3; }
.ill .ill-f-fold { fill: var(--color-overlay); opacity: 0.1; }
.ill .ill-f-frost { fill: var(--ill-fill); opacity: 0.45; }
.ill .ill-f-glass { fill: var(--ill-fill); opacity: 0.35; }
.ill .ill-f-bar { fill: var(--ill-line); opacity: 0.25; }
.ill .ill-f-ok { fill: var(--color-success); }
.ill .ill-f-warn { fill: var(--color-warning); }
.ill .ill-f-warnsoft { fill: var(--color-warning-soft); }
.ill .ill-f-bad { fill: var(--color-danger); }
.ill .ill-f-badsoft { fill: var(--color-danger-soft); }
.ill .ill-f-chart { fill: var(--color-primary-accent); }
.ill .ill-f-ribbon { fill: color-mix(in srgb, var(--ill-accent) 65%, var(--ill-line)); }
.ill .ill-f-brass { fill: color-mix(in srgb, var(--color-warning) 72%, var(--ill-fill)); }
.ill .ill-f-silver { fill: color-mix(in srgb, var(--ill-line) 22%, var(--ill-fill)); }
.ill .ill-f-land { fill: var(--color-fn-land-tint); }
.ill .ill-f-pm { fill: var(--color-fn-partnerships-tint); }
.ill .ill-f-cons { fill: var(--color-fn-construction-tint); }
.ill .ill-f-bo { fill: var(--color-fn-backoffice-tint); }
.ill .ill-f-legal { fill: var(--color-fn-legal-tint); }
.ill .ill-f-c-land { fill: var(--color-fn-land); }
.ill .ill-f-c-pm { fill: var(--color-fn-partnerships); }
.ill .ill-f-c-cons { fill: var(--color-fn-construction); }
.ill .ill-crane { opacity: 0.75; }

/* ── The moving parts, in their final pose. Transient parts (a puff, a glint, a ring) rest hidden ── */
.ill [class*='ill-m-'] { transform-box: fill-box; transform-origin: 50% 50%; }
.ill .ill-sig { stroke-dasharray: 100; stroke-dashoffset: 0; }
.ill .ill-m-dust, .ill .ill-m-ring, .ill--exchange .ill-m-glint, .ill--key .ill-m-glint { opacity: 0; }
.ill .ill-m-peg, .ill .ill-m-pin, .ill .ill-m-house, .ill .ill-m-pause, .ill .ill-m-clock { transform-origin: 50% 100%; }
.ill .ill-m-flag, .ill .ill-m-trail, .ill .ill-m-fill, .ill .ill-m-tag { transform-origin: 0% 50%; }
.ill .ill-m-lock, .ill .ill-m-hook, .ill .ill-m-ros { transform-origin: 50% 0%; }
.ill .ill-m-cable { transform-origin: 0% 0%; }
.ill [class*='ill-m-b'], .ill .ill-m-c1, .ill .ill-m-c2, .ill .ill-m-c3 { transform-origin: 50% 100%; }
.ill .ill-m-hand1 { transform-origin: 50% 100%; }
.ill .ill-m-hand2 { transform-origin: 0% 0%; }
.ill--candidate .ill-m-r1 { transform: scale(1.6); opacity: 0.4; }
.ill--candidate .ill-m-r2 { transform: scale(2.4); opacity: 0.18; }

@keyframes ill-fade { from { opacity: 0; } }
@keyframes ill-march { from { stroke-dashoffset: 40; opacity: 0; } 25% { opacity: 1; } }
@keyframes ill-draw { from { stroke-dashoffset: 100; } }
@keyframes ill-drop { 0% { transform: translateY(-46px); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateY(2px) scaleY(0.92); } 80% { transform: translateY(-3px); } }
@keyframes ill-land { 0% { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } }
@keyframes ill-unfurl { 0% { transform: scaleX(0); } 55% { transform: scaleX(1.12) skewY(-4deg); } 80% { transform: scaleX(0.96) skewY(3deg); } }
@keyframes ill-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 80% { transform: scale(0.94); } }
@keyframes ill-bump { 0%, 100% { transform: none; } 40% { transform: scale(1.06, 0.94); } 70% { transform: scale(0.98, 1.04); } }
@keyframes ill-drift-in { from { transform: translateX(-16px); } }
@keyframes ill-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } }
@keyframes ill-flash { 0% { transform: scale(0.2) rotate(-40deg); opacity: 0; } 45% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(0.8) rotate(20deg); opacity: 0; } }
@keyframes ill-rattle { 0%, 100% { transform: none; } 15% { transform: rotate(-12deg); } 35% { transform: rotate(10deg); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@keyframes ill-shudder { 0%, 100% { transform: none; } 12% { transform: translateX(-3px); } 26% { transform: translateX(2.5px); } 40% { transform: translateX(-1.5px); } 54% { transform: translateX(0.5px); } }
@keyframes ill-swing { 0%, 100% { transform: none; } 30% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(2deg); } }
@keyframes ill-sway { 0%, 100% { transform: none; } 50% { transform: rotate(7deg); } }
@keyframes ill-blink { 0%, 55%, 100% { opacity: 1; transform: none; } 65% { opacity: 0.15; transform: scale(0.5); } 75% { opacity: 1; transform: scale(1.3); } }
@keyframes ill-breathe { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.18); opacity: 0.55; } }
@keyframes ill-ripple { 0% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(3); opacity: 0; } }
@keyframes ill-rise-up { 0% { transform: translateY(44px); } 70% { transform: translateY(-3px); } }
@keyframes ill-slide-in { 0% { transform: translateX(-12px); opacity: 0; } }
@keyframes ill-grow { 0% { transform: scaleY(0); } 70% { transform: scaleY(1.08); } }
@keyframes ill-lit { 0%, 30% { fill: var(--ill-soft); } }
@keyframes ill-seal { 0% { transform: translateY(-34px) scale(1.3); opacity: 0; } 30% { opacity: 1; } 55% { transform: scale(0.88); } 75% { transform: scale(1.05); } }
@keyframes ill-fall { 0% { transform: scaleY(3.4) skewX(-6deg); } 45% { transform: scaleY(2.6) skewX(-14deg); } 72% { transform: scaleY(0.82); } 86% { transform: scaleY(1.1); } }
@keyframes ill-puff { 0%, 62% { transform: scale(0.4); opacity: 0; } 72% { opacity: 0.9; } 100% { transform: scale(1.8) translateY(-4px); opacity: 0; } }
@keyframes ill-search { 0% { transform: translate(-80px, 8px) rotate(-10deg); opacity: 0; } 12% { opacity: 1; } 38%, 52% { transform: translate(-40px, -6px) rotate(-4deg); } 78% { transform: translate(6px, 2px); } }
@keyframes ill-search-shadow { 0% { transform: translateX(-80px); opacity: 0; } 12% { opacity: 1; } 38%, 52% { transform: translateX(-40px); } 78% { transform: translateX(6px); } }
@keyframes ill-glint { 0%, 70% { opacity: 0; } 85% { opacity: 1; stroke-width: 4.5; } }
@keyframes ill-fly { 0% { transform: translate(-90px, 24px) rotate(-30deg); opacity: 0; } 30% { opacity: 1; } 75% { transform: translate(3px, -2px) rotate(2deg); } }
@keyframes ill-key-in { 0% { transform: translateX(-70px); opacity: 0; } 25% { opacity: 1; } 75% { transform: translateX(4px); } }
@keyframes ill-write { 0% { transform: translate(-54px, 4px); } 20% { transform: translate(-44px, -4px); } 40% { transform: translate(-31px, 3px); } 60% { transform: translate(-19px, -4px); } 80% { transform: translate(-7px, 2px); } }
@keyframes ill-rise-sun { 0% { transform: translateY(40px); } }
@keyframes ill-hand { from { transform: rotate(-300deg); } }
@keyframes ill-wobble { 0%, 100% { transform: none; } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-2deg); } }
@keyframes ill-send { 0% { transform: translate(-60px, 26px) rotate(-30deg); opacity: 0; } 25% { opacity: 1; } 75% { transform: translate(3px, -2px); } }
@keyframes ill-stop { 0% { transform: scaleX(0.3); } 60% { transform: scaleX(1.05); } 75% { transform: scaleX(0.98); } }
@keyframes ill-type { 0% { opacity: 0; } }

/* Each picture's sequence: (1) what arrives, (2) how it settles, (3) the small sign that it is done */
.ill.is-playing .ill-m-cloud { animation: ill-drift-in 3s var(--ease-drift) backwards; }
.ill.is-playing .ill-m-bound { animation: ill-march 1.4s var(--ease-standard) backwards; }
.ill--empty.is-playing .ill-m-peg { animation: ill-drop 0.8s var(--ease-standard) 0.7s backwards; }
.ill--empty.is-playing .ill-m-pegsh { animation: ill-land 0.8s var(--ease-standard) 0.7s backwards; }
.ill--empty.is-playing .ill-m-flag { animation: ill-unfurl 0.9s var(--ease-standard) 1.4s backwards; }

.ill--noResults.is-playing .ill-m-loupe { animation: ill-search 2.4s var(--ease-drift) backwards; }
.ill--noResults.is-playing .ill-m-loupesh { animation: ill-search-shadow 2.4s var(--ease-drift) backwards; }
.ill--noResults.is-playing .ill-m-glint { animation: ill-glint 2.8s var(--ease-standard) backwards; }

.ill--error.is-playing .ill-m-panel { animation: ill-fall 1.1s var(--ease-standard) 0.3s backwards; transform-origin: 50% 100%; }
.ill--error.is-playing .ill-m-dust { animation: ill-puff 1.6s var(--ease-standard) 0.3s backwards; }

.ill--noAccess.is-playing .ill-m-gate { animation: ill-shudder 0.9s var(--ease-standard) 0.2s backwards; }
.ill--noAccess.is-playing .ill-m-lock { animation: ill-rattle 0.9s var(--ease-standard) 0.5s backwards; }
.ill--noAccess.is-playing .ill-m-ring { animation: ill-ring 0.9s var(--ease-standard) 1.3s backwards; }

.ill--locked.is-playing .ill-m-seal { animation: ill-seal 0.9s var(--ease-standard) 0.3s backwards; }
.ill--locked.is-playing .ill-m-ring { animation: ill-ring 0.8s var(--ease-standard) 0.75s backwards; }
.ill--locked.is-playing .ill-m-frost { animation: ill-fade 0.8s var(--ease-standard) 1s backwards; }

.ill--offline.is-playing .ill-m-cable { animation: ill-sway 3.2s var(--ease-drift) infinite; }
.ill--offline.is-playing .ill-m-spark { animation: ill-blink 2.4s var(--ease-drift) 0.6s infinite backwards; }

.ill--done.is-playing .ill-m-hook { animation: ill-swing 1.6s var(--ease-drift) backwards; }
.ill--done.is-playing .ill-m-flag { animation: ill-rise-up 1.2s var(--ease-standard) 0.3s backwards; }
.ill--done.is-playing .ill-m-sp1 { animation: ill-pop 0.6s var(--ease-standard) 1.4s backwards; }
.ill--done.is-playing .ill-m-sp2 { animation: ill-pop 0.6s var(--ease-standard) 1.6s backwards; }
.ill--done.is-playing .ill-m-sp3 { animation: ill-pop 0.6s var(--ease-standard) 1.8s backwards; }

.ill--import.is-playing .ill-m-s1 { animation: ill-fly 0.8s var(--ease-standard) backwards; }
.ill--import.is-playing .ill-m-s2 { animation: ill-fly 0.8s var(--ease-standard) 0.25s backwards; }
.ill--import.is-playing .ill-m-s3 { animation: ill-fly 0.8s var(--ease-standard) 0.5s backwards; }
.ill--import.is-playing .ill-m-trail { animation: ill-march 0.9s var(--ease-standard) 1.1s backwards; }
.ill--import.is-playing .ill-m-house { animation: ill-bump 0.6s var(--ease-standard) 1.8s backwards; }
.ill--import.is-playing .ill-m-lit { animation: ill-lit 1s var(--ease-standard) 1.6s backwards; }

.ill--candidate.is-playing .ill-m-pin { animation: ill-drop 0.9s var(--ease-standard) 0.2s backwards; }
.ill--candidate.is-playing .ill-m-pinsh { animation: ill-land 0.9s var(--ease-standard) 0.2s backwards; }
.ill--candidate.is-playing .ill-m-bound { animation: ill-march 1.2s var(--ease-standard) 0.9s backwards; }
.ill--candidate.is-playing .ill-m-r1 { animation: ill-ripple 2.6s var(--ease-drift) 1.1s infinite backwards; }
.ill--candidate.is-playing .ill-m-r2 { animation: ill-ripple 2.6s var(--ease-drift) 2.4s infinite backwards; }

.ill--instructed.is-playing .ill-m-sig { animation: ill-draw 1.3s linear 0.2s backwards; }
.ill--instructed.is-playing .ill-m-pen { animation: ill-write 1.3s linear 0.2s backwards; }
.ill--instructed.is-playing .ill-m-tick { animation: ill-pop 0.6s var(--ease-standard) 1.6s backwards; }
.ill--instructed.is-playing .ill-m-ring { animation: ill-ring 0.8s var(--ease-standard) 1.9s backwards; }

.ill--exchange.is-playing .ill-m-key1, .ill--exchange.is-playing .ill-m-key2 { animation: ill-key-in 1s var(--ease-standard) backwards; }
.ill--exchange.is-playing .ill-m-key2 { animation-delay: 0.15s; }
.ill--exchange.is-playing .ill-m-glint { animation: ill-flash 0.8s var(--ease-standard) 0.95s backwards; }
.ill--exchange.is-playing .ill-m-lit { animation: ill-lit 1.2s var(--ease-standard) 1.2s backwards; }

.ill--meeting.is-playing .ill-m-sun, .ill--meeting.is-playing .ill-m-halo { animation: ill-rise-sun 2s var(--ease-drift) backwards; }
.ill--meeting.is-playing .ill-m-halo { animation: ill-rise-sun 2s var(--ease-drift) backwards, ill-breathe 4s var(--ease-drift) 2s infinite; }
.ill--meeting.is-playing .ill-m-light { animation: ill-fade 1.6s var(--ease-drift) 0.8s backwards; }
.ill--meeting.is-playing .ill-m-c1 { animation: ill-slide-in 0.5s var(--ease-standard) 1.2s backwards; }
.ill--meeting.is-playing .ill-m-c2 { animation: ill-slide-in 0.5s var(--ease-standard) 1.4s backwards; }
.ill--meeting.is-playing .ill-m-c3 { animation: ill-slide-in 0.5s var(--ease-standard) 1.6s backwards; }

.ill--packReady.is-playing .ill-m-card { animation: ill-rise-up 1s var(--ease-standard) 0.2s backwards; }
.ill--packReady.is-playing .ill-m-b1 { animation: ill-grow 0.5s var(--ease-standard) 1s backwards; }
.ill--packReady.is-playing .ill-m-b2 { animation: ill-grow 0.5s var(--ease-standard) 1.12s backwards; }
.ill--packReady.is-playing .ill-m-b3 { animation: ill-grow 0.5s var(--ease-standard) 1.24s backwards; }
.ill--packReady.is-playing .ill-m-b4 { animation: ill-grow 0.5s var(--ease-standard) 1.36s backwards; }
.ill--packReady.is-playing .ill-m-trend { animation: ill-draw 0.7s var(--ease-standard) 1.6s backwards; }
.ill--packReady.is-playing .ill-m-tick { animation: ill-pop 0.6s var(--ease-standard) 2.1s backwards; }

.ill--siteVisit.is-playing .ill-m-sketch { animation: ill-draw 0.9s var(--ease-standard) 0.6s backwards; }
.ill--siteVisit.is-playing .ill-m-t1 { animation: ill-draw 0.4s var(--ease-standard) 1.4s backwards; }
.ill--siteVisit.is-playing .ill-m-t2 { animation: ill-draw 0.4s var(--ease-standard) 1.7s backwards; }
.ill--siteVisit.is-playing .ill-m-t3 { animation: ill-draw 0.4s var(--ease-standard) 2s backwards; }

.ill--legalStack.is-playing .ill-m-d3 { animation: ill-drop 0.7s var(--ease-standard) backwards; }
.ill--legalStack.is-playing .ill-m-d4 { animation: ill-drop 0.7s var(--ease-standard) 0.3s backwards; }
.ill--legalStack.is-playing .ill-m-ribbon { animation: ill-grow 0.6s var(--ease-standard) 1s backwards; transform-origin: 50% 0%; }
.ill--legalStack.is-playing .ill-m-ros { animation: ill-pop 0.5s var(--ease-standard) 1.4s backwards, ill-swing 1.2s var(--ease-drift) 1.9s; }

.ill--key.is-playing .ill-m-dots { animation: ill-type 0.6s steps(5) 0.2s backwards; }
.ill--key.is-playing .ill-m-key1 { animation: ill-key-in 0.9s var(--ease-standard) 0.6s backwards; }
.ill--key.is-playing .ill-m-btn { animation: ill-bump 0.5s var(--ease-standard) 1.4s backwards; }
.ill--key.is-playing .ill-m-btntick { animation: ill-draw 0.4s var(--ease-standard) 1.6s backwards; stroke-dasharray: 100; }
.ill--key.is-playing .ill-m-glint { animation: ill-flash 0.8s var(--ease-standard) 1.5s backwards; }

.ill--overdue.is-playing .ill-m-hand1 { animation: ill-hand 1.4s var(--ease-standard) backwards; }
.ill--overdue.is-playing .ill-m-hand2 { animation: ill-hand 1.4s var(--ease-standard) backwards; transform-origin: 0% 0%; }
.ill--overdue.is-playing .ill-m-clock { animation: ill-wobble 0.7s var(--ease-standard) 1.4s backwards; }
.ill--overdue.is-playing .ill-m-cross { animation: ill-draw 0.5s var(--ease-standard) 1.9s backwards; stroke-dasharray: 100; }

.ill--stall.is-playing .ill-m-fill { animation: ill-stop 1.2s var(--ease-standard) 0.2s backwards; }
.ill--stall.is-playing .ill-m-pause { animation: ill-drop 0.8s var(--ease-standard) 1.1s backwards; }

.ill--proposedUpdate.is-playing .ill-m-card { animation: ill-rise-up 1s var(--ease-standard) 0.2s backwards; }
.ill--proposedUpdate.is-playing .ill-m-pencil { animation: ill-wobble 0.7s var(--ease-standard) 1.2s backwards; }
.ill--proposedUpdate.is-playing .ill-m-sp1 { animation: ill-pop 0.6s var(--ease-standard) 1.5s backwards; }
.ill--proposedUpdate.is-playing .ill-m-sp2 { animation: ill-pop 0.6s var(--ease-standard) 1.7s backwards; }
.ill--proposedUpdate.is-playing .ill-m-sp3 { animation: ill-pop 0.6s var(--ease-standard) 1.9s backwards; }

.ill--appraisal.is-playing .ill-m-house { animation: ill-drop 0.8s var(--ease-standard) 0.1s backwards; }
.ill--appraisal.is-playing .ill-m-calc { animation: ill-slide-in 0.6s var(--ease-standard) 0.6s backwards; }
.ill--appraisal.is-playing .ill-m-screen { animation: ill-type 0.5s steps(3) 1.1s backwards; }
.ill--appraisal.is-playing .ill-m-sum { animation: ill-draw 0.5s var(--ease-standard) 1.4s backwards; }
.ill--appraisal.is-playing .ill-m-badge { animation: ill-pop 0.6s var(--ease-standard) 1.7s backwards; }

.ill--pitch.is-playing .ill-m-trail { animation: ill-march 1s var(--ease-standard) 0.2s backwards; }
.ill--pitch.is-playing .ill-m-head { animation: ill-fade 0.3s var(--ease-standard) 1s backwards; }
.ill--pitch.is-playing .ill-m-tag { animation: ill-send 1.1s var(--ease-standard) 0.4s backwards; }
/* ill:end */

/* ── Auth layout (layouts/signIn.html, genSignIn.mjs): the screens before the product. Sizes are the screen's own;
   a frame scales the whole screen (zoom). Every scene moves on its own classes and stands still under reduced motion ── */
.au-root { position: relative; width: 100%; height: 100%; min-height: 560px; font-size: var(--text-sm); color: var(--color-foreground); background: var(--color-page); display: flex; flex-direction: column; }
.au { flex: 1; min-height: 0; }
.au--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.au-panel { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-primary), var(--color-primary-deep)); }
.au-panel--soft { background: var(--color-surface-muted); }
.au-form { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-12) var(--space-10); max-width: 420px; margin: 0 auto; width: 100%; }
.au-brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-foreground); margin-bottom: var(--space-4); }
.au-mark { height: 28px; width: auto; color: var(--color-primary); }
.au-title { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-medium); margin: 0; }
.au-lead { color: var(--color-muted); margin: 0; }
.au-foot { color: var(--color-subtle); font-size: var(--text-xs); line-height: var(--leading-xs); margin: var(--space-2) 0 0; }
.au-ms { justify-content: center; gap: var(--space-2); height: 44px; width: 100%; font-weight: var(--weight-semibold); }
.au-ms img { display: block; }
.au-wide { width: 100%; height: 44px; justify-content: center; }
.au-check { display: flex; gap: var(--space-2); align-items: flex-start; }
.au-staging { background: var(--color-warning-soft); color: var(--color-warning-text); text-align: center; padding: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.au--over { position: relative; display: grid; place-items: center; }
.au--over .au-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.au-over__card { position: relative; background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); width: min(440px, 90%); }
.au--band { display: flex; flex-direction: column; }
.au--band .au-scene { display: block; width: 100%; height: 38%; min-height: 160px; }
.au--band .au-form { flex: 1; justify-content: flex-start; padding-top: var(--space-8); }
.au-scene .ill-line { stroke: var(--ill-line); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.au-scene .ill-fill.ill-line, .au-scene .ill-soft.ill-line { fill: var(--ill-fill); }
.au-scene .ill-soft, .au-scene .ill-soft.ill-line { fill: var(--ill-soft); }
.au-scene .ill-fill { fill: var(--ill-fill); }
.au-scene .ill-ground { fill: var(--ill-ground); }
.au-scene .ill-accent { fill: var(--ill-accent); }
.au-scene .ill-warm { fill: var(--ill-warm); }
.au-scene .ill-thin { stroke-width: 1.5; }
.au-scene .ill-dash { stroke-dasharray: 6 6; }

/* Live app: the cards of a deal drifting on the brand panel (the pilot's, ADR-0041) */
.au-live { position: absolute; inset: 0; }
.au-card { position: absolute; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--color-surface); color: var(--color-foreground); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); min-width: 200px; }
.au-card__label { color: var(--color-subtle); font-size: var(--text-xs); }
.au-card__figure { font-size: var(--text-lg); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.au-card--a { left: 12%; top: 16%; width: 62%; animation: fnd-drift var(--duration-drift) var(--ease-drift) infinite alternate; }
.au-card--b { right: 10%; top: 48%; animation: fnd-drift calc(var(--duration-drift) * 1.3) var(--ease-drift) infinite alternate-reverse; }
.au-card--c { left: 18%; bottom: 12%; animation: au-offer 14s var(--ease-standard) infinite; }
.au-bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: var(--space-1) 0; }
.au-bar i { height: 6px; border-radius: var(--radius-full); background: var(--color-surface-muted); }
.au-bar i.is-done { background: var(--color-primary); }
.au-bar__now { background: var(--color-primary-accent) !important; animation: au-fill 14s var(--ease-standard) infinite; }
.au-health { position: relative; display: inline-grid; font-size: var(--text-figure); line-height: var(--leading-figure); font-weight: var(--weight-medium); color: var(--color-health-fair-text); }
.au-health > span { grid-area: 1 / 1; }
.au-health__from { animation: au-out 14s var(--ease-standard) infinite; opacity: 0; }
.au-health__to { animation: au-in 14s var(--ease-standard) infinite; color: var(--color-health-fair-text); }
@keyframes au-offer { 0%, 30% { transform: translateY(30px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
@keyframes au-fill { 0%, 50% { background: var(--color-primary-accent); } 60%, 100% { background: var(--color-primary); } }
@keyframes au-out { 0%, 55% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes au-in { 0%, 55% { opacity: 0; } 65%, 100% { opacity: 1; } }

/* Journey: a deal's route across the fields, a node and a card at every stop (16 s) */
.au-panel--deep { background: linear-gradient(200deg, var(--color-primary), var(--color-primary-deep)); }
.au-j { position: absolute; inset: 0; width: 100%; height: 100%; }
.au-j__field { fill: var(--color-primary-foreground); stroke: var(--color-primary-foreground); stroke-opacity: 0.25; stroke-width: 1.5; }
.au-j__field--0 { fill-opacity: 0.05; } .au-j__field--1 { fill-opacity: 0.1; } .au-j__field--2 { fill-opacity: 0.15; }
.au-j__rows { fill: none; stroke: var(--color-primary-foreground); stroke-opacity: 0.18; stroke-width: 2; stroke-linecap: round; }
.au-j__route { fill: none; stroke: var(--color-primary-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; animation: au-j-route 16s var(--ease-standard) infinite; }
@keyframes au-j-route { 0%, 2% { stroke-dashoffset: 100; } 56%, 100% { stroke-dashoffset: 0; } }
.au-j__stop { }
.au-j__node, .au-j__halo { transform-box: fill-box; transform-origin: 50% 50%; }
.au-j__node { fill: var(--color-surface); stroke: var(--color-primary-accent); stroke-width: 3; }
.au-j__halo { fill: var(--color-primary-accent); fill-opacity: 0.25; }
.au-j__ico { color: var(--color-primary); stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.au-chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: var(--color-surface); color: var(--color-foreground); border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); font-size: var(--text-xs); line-height: var(--leading-xs); }
.au-chip__label { color: var(--color-subtle); }
.au-chip strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
@keyframes au-j-stop-1 { 0%, 2% { opacity: 0; } 5%, 100% { opacity: 1; } }
.au-j__stop--1 { animation: au-j-stop-1 16s var(--ease-standard) infinite; }
@keyframes au-j-stop-2 { 0%, 14% { opacity: 0; } 17%, 100% { opacity: 1; } }
.au-j__stop--2 { animation: au-j-stop-2 16s var(--ease-standard) infinite; }
@keyframes au-j-stop-3 { 0%, 26% { opacity: 0; } 29%, 100% { opacity: 1; } }
.au-j__stop--3 { animation: au-j-stop-3 16s var(--ease-standard) infinite; }
@keyframes au-j-stop-4 { 0%, 38% { opacity: 0; } 41%, 100% { opacity: 1; } }
.au-j__stop--4 { animation: au-j-stop-4 16s var(--ease-standard) infinite; }
@keyframes au-j-stop-5 { 0%, 50% { opacity: 0; } 53%, 100% { opacity: 1; } }
.au-j__stop--5 { animation: au-j-stop-5 16s var(--ease-standard) infinite; }

@keyframes au-j-pop-1 { 0%, 2% { transform: scale(0.3); } 5% { transform: scale(1.15); } 7%, 100% { transform: none; } }
.au-j__stop--1 .au-j__node, .au-j__stop--1 .au-j__halo { animation: au-j-pop-1 16s var(--ease-standard) infinite; }
@keyframes au-j-pop-2 { 0%, 14% { transform: scale(0.3); } 17% { transform: scale(1.15); } 19%, 100% { transform: none; } }
.au-j__stop--2 .au-j__node, .au-j__stop--2 .au-j__halo { animation: au-j-pop-2 16s var(--ease-standard) infinite; }
@keyframes au-j-pop-3 { 0%, 26% { transform: scale(0.3); } 29% { transform: scale(1.15); } 31%, 100% { transform: none; } }
.au-j__stop--3 .au-j__node, .au-j__stop--3 .au-j__halo { animation: au-j-pop-3 16s var(--ease-standard) infinite; }
@keyframes au-j-pop-4 { 0%, 38% { transform: scale(0.3); } 41% { transform: scale(1.15); } 43%, 100% { transform: none; } }
.au-j__stop--4 .au-j__node, .au-j__stop--4 .au-j__halo { animation: au-j-pop-4 16s var(--ease-standard) infinite; }
@keyframes au-j-pop-5 { 0%, 50% { transform: scale(0.3); } 53% { transform: scale(1.15); } 55%, 100% { transform: none; } }
.au-j__stop--5 .au-j__node, .au-j__stop--5 .au-j__halo { animation: au-j-pop-5 16s var(--ease-standard) infinite; }

/* Board: the Morning Meeting in perspective; rows swap, Deal Health counts, a badge turns, an offer arrives (14 s) */
@property --au-h { syntax: '<integer>'; inherits: false; initial-value: 61; }
.au-b { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1200px; overflow: hidden; }
.au-b__glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: var(--radius-full); background: radial-gradient(closest-side, var(--color-primary-accent), transparent); opacity: 0.45; }
.au-b__glow--1 { left: -10%; top: -10%; animation: au-glow 9s var(--ease-drift) infinite alternate; }
.au-b__glow--2 { right: -15%; bottom: -15%; animation: au-glow 11s var(--ease-drift) infinite alternate-reverse; }
@keyframes au-glow { from { transform: translate(0, 0); } to { transform: translate(18%, 12%); } }
.au-b__board { position: relative; width: 84%; background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); padding: var(--space-4); transform: rotateY(14deg) rotateX(8deg); transform-style: preserve-3d; animation: au-tilt 14s var(--ease-drift) infinite alternate; }
@keyframes au-tilt { from { transform: rotateY(18deg) rotateX(10deg); } to { transform: rotateY(8deg) rotateX(5deg); } }
.au-b__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.au-b__head span { color: var(--color-subtle); font-size: var(--text-xs); }
.au-b__row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto 36px; gap: var(--space-2); align-items: center; height: 44px; padding: 0 var(--space-2); border-top: 1px solid var(--color-default); font-size: var(--text-xs); background: var(--color-surface); }
.au-b__name { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-b__due { color: var(--color-muted); white-space: nowrap; }
.au-b__health { justify-self: end; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-health-fair-tint); color: var(--color-health-fair-text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.au-b__check { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--color-emphasis); }
.au-b__row--a .au-b__check { animation: au-check 14s steps(1) infinite; }
@keyframes au-check { 0%, 62% { background: transparent; border-color: var(--color-emphasis); } 63%, 100% { background: var(--color-primary); border-color: var(--color-primary); } }
.au-b__count { counter-reset: h var(--au-h); animation: au-count 14s var(--ease-standard) infinite; }
.au-b__count::after { content: counter(h); }
@keyframes au-count { 0%, 20% { --au-h: 48; } 45%, 100% { --au-h: 61; } }
.au-b__row--b { animation: au-down 14s var(--ease-standard) infinite; position: relative; z-index: 1; }
.au-b__row--c { animation: au-up 14s var(--ease-standard) infinite; position: relative; z-index: 2; }
@keyframes au-down { 0%, 30% { transform: none; } 40%, 100% { transform: translateY(44px); } }
@keyframes au-up { 0%, 30% { transform: none; } 40%, 100% { transform: translateY(-44px); } }
.au-b__new { overflow: hidden; animation: au-new 14s var(--ease-standard) infinite; }
@keyframes au-new { 0%, 74% { max-height: 0; opacity: 0; } 82%, 100% { max-height: 44px; opacity: 1; } }
.au-b__new .au-b__row { background: var(--color-primary-soft); }
.au-b__flip { position: relative; display: grid; margin-top: var(--space-3); }
.au-b__flip > span { grid-area: 1 / 1; justify-self: start; }
.au-b__stalled { animation: au-out 14s var(--ease-standard) infinite; opacity: 0; }
.au-b__ontrack { animation: au-in 14s var(--ease-standard) infinite; }

/* Build: an isometric parcel; the boundary draws, houses rise, a crane swings, cloud shadows drift */
.au--over-left { justify-items: start; }
.au--over-left .au-over__card { margin-left: 6%; }
.au-i__lot { fill: var(--ill-soft); }
.au-i__line { fill: none; stroke: var(--ill-line); stroke-width: 2.5; stroke-dasharray: 3 4; animation: au-i-line 1.4s var(--ease-standard) both; }
@keyframes au-i-line { from { stroke-dashoffset: 100; opacity: 0; } }
.au-i__road { fill: none; stroke: var(--ill-line); stroke-opacity: 0.35; stroke-width: 2; }
.au-i__house { transform-box: fill-box; transform-origin: 50% 100%; animation: au-i-rise 0.9s var(--ease-standard) both; }
@keyframes au-i-rise { from { transform: scaleY(0); opacity: 0; } 70% { transform: scaleY(1.06); opacity: 1; } }
.au-i__house--1 { animation-delay: 1.55s; }
.au-i__house--2 { animation-delay: 1.90s; }
.au-i__house--3 { animation-delay: 2.25s; }
.au-i__house--4 { animation-delay: 2.60s; }
.au-i__house--5 { animation-delay: 2.95s; }
.au-i__house--6 { animation-delay: 3.30s; }
.au-i__house--7 { animation-delay: 3.65s; }
.au-i__l { fill: var(--ill-soft); stroke: var(--ill-line); stroke-width: 1.5; stroke-linejoin: round; }
.au-i__r { fill: var(--ill-fill); stroke: var(--ill-line); stroke-width: 1.5; stroke-linejoin: round; }
.au-i__roof-l { fill: var(--ill-accent); stroke: var(--ill-line); stroke-width: 1.5; stroke-linejoin: round; }
.au-i__roof-r { fill: var(--ill-line); stroke: var(--ill-line); stroke-width: 1.5; stroke-linejoin: round; }
.au-i__win { fill: var(--ill-warm); }
.au-i__mast, .au-i__arm, .au-i__cable { fill: none; stroke: var(--ill-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.au-i__cable { stroke-width: 1.5; }
.au-i__load { fill: var(--ill-accent); }
.au-i__jib { transform-box: view-box; transform-origin: 690px 175px; animation: au-i-jib 7s var(--ease-drift) infinite alternate; }
@keyframes au-i-jib { from { transform: rotate(-18deg); } to { transform: rotate(10deg); } }
.au-i__cloud { fill: var(--ill-line); opacity: 0.07; animation: au-i-cloud 22s linear infinite; }
.au-i__cloud--2 { animation-duration: 30s; animation-delay: -12s; }
@keyframes au-i-cloud { from { transform: translateX(-260px); } to { transform: translateX(760px); } }

/* Network: regions, pins with ripples, lines to the mark, counters ticking */
@property --au-sites { syntax: '<integer>'; inherits: false; initial-value: 48; }
@property --au-offers { syntax: '<integer>'; inherits: false; initial-value: 126; }
.au-n { position: absolute; inset: 0; }
.au-n__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.au-n__region { fill: var(--color-primary-foreground); fill-opacity: 0.1; stroke: var(--color-primary-foreground); stroke-opacity: 0.35; stroke-width: 1.5; stroke-dasharray: 4 6; }
.au-n__link { fill: none; stroke: var(--color-primary-accent); stroke-width: 2; stroke-dasharray: 100; animation: au-n-link 12s var(--ease-standard) infinite; }
@keyframes au-n-link { 0%, 10% { stroke-dashoffset: 100; } 30%, 100% { stroke-dashoffset: 0; } }
.au-n__pin { transform-box: fill-box; transform-origin: 50% 50%; animation: au-n-pin 12s var(--ease-standard) infinite; }
@keyframes au-n-pin { 0%, 4% { transform: scale(0); } 9% { transform: scale(1.3); } 12%, 100% { transform: none; } }
.au-n__link--1 { animation-delay: 0.3s; } .au-n__pin--1 { animation-delay: 0.3s; }
.au-n__link--2 { animation-delay: 0.6s; } .au-n__pin--2 { animation-delay: 0.6s; }
.au-n__link--3 { animation-delay: 0.9s; } .au-n__pin--3 { animation-delay: 0.9s; }
.au-n__link--4 { animation-delay: 1.2s; } .au-n__pin--4 { animation-delay: 1.2s; }
.au-n__link--5 { animation-delay: 1.5s; } .au-n__pin--5 { animation-delay: 1.5s; }
.au-n__link--6 { animation-delay: 1.8s; } .au-n__pin--6 { animation-delay: 1.8s; }
.au-n__link--7 { animation-delay: 2.1s; } .au-n__pin--7 { animation-delay: 2.1s; }
.au-n__dot { fill: var(--color-surface); stroke: var(--color-primary-accent); stroke-width: 3; }
.au-n__ripple { fill: none; stroke: var(--color-primary-foreground); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; animation: au-n-ripple 2.4s var(--ease-standard) infinite; }
@keyframes au-n-ripple { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(3); opacity: 0; } }
.au-n__hub { fill: var(--color-surface); stroke: var(--color-primary-accent); stroke-width: 4; }
.au-n__mark { color: var(--color-primary); fill: currentColor; }
.au-n__stats { position: absolute; left: 8%; right: 8%; top: 7%; display: flex; gap: var(--space-3); }
.au-n__stat { position: static; min-width: 0; flex: 1; }
.au-n__num { font-size: var(--text-figure); line-height: var(--leading-figure); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.au-n__num--sites { counter-reset: s var(--au-sites); animation: au-n-sites 12s var(--ease-standard) infinite; }
.au-n__num--sites::after { content: counter(s); }
.au-n__num--offers { counter-reset: o var(--au-offers); animation: au-n-offers 12s var(--ease-standard) infinite; }
.au-n__num--offers::after { content: counter(o); }
@keyframes au-n-sites { 0%, 10% { --au-sites: 0; } 40%, 100% { --au-sites: 48; } }
@keyframes au-n-offers { 0%, 15% { --au-offers: 0; } 45%, 100% { --au-offers: 126; } }

/* The frames on the page */
.au-devices { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-6); align-items: start; margin-bottom: var(--space-6); }
.au-devices__tab .device--tablet { width: 820px; zoom: 0.317; }
.au-devices__desk .device__screen { overflow: hidden; }
.au-small .device--desktop { zoom: 0.25; width: 1100px; }
.au-small .device__screen { overflow: hidden; }
@media (max-width: 1100px) { .au-devices { grid-template-columns: minmax(0, 1fr); } }

/* ── App layout (layouts/appLayout.html, genAppLayout.mjs): the shell and the Home page. The screen is drawn at
   its own size (1280 x 800) and a frame scales it (zoom) ── */
@property --ap-n { syntax: '<integer>'; inherits: false; initial-value: 5; }
.ap { display: flex; width: 1280px; height: 800px; background: var(--color-page); color: var(--color-foreground); font-size: var(--text-sm); text-align: left; }
.ap-side { flex: none; width: 240px; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-3); background: var(--color-sidebar); border-right: 1px solid var(--color-default); }
.ap-side__brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); }
.ap-mark { height: 26px; width: auto; color: var(--color-primary); flex: none; }
.ap-side__name { font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-primary); }
.ap-fold { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-muted); }
.ap-search { display: flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-subtle); }
.ap-search kbd { margin-left: auto; font: inherit; font-size: var(--text-xs); color: var(--color-subtle); }
.ap-user { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); }
.ap-user__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ap-user__text span { color: var(--color-subtle); font-size: var(--text-xs); }
.ap-user > .icon { margin-left: auto; color: var(--color-subtle); }
.ap-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ap-avatar--sm { width: 26px; height: 26px; border: 2px solid var(--color-surface); margin-left: -8px; }
.ap-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 3; display: flex; flex-direction: column; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); }
.ap-menu a { display: flex; align-items: center; gap: var(--space-2); padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-foreground); text-decoration: none; }
.ap-menu a:first-child { background: var(--color-primary-soft); }
.ap-menu hr { border: 0; border-top: 1px solid var(--color-default); margin: var(--space-1) 0; }
.ap-nav { display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; }
.ap-group { display: flex; flex-direction: column; gap: 2px; }
.ap-group__title { padding: 0 var(--space-2) var(--space-1); color: var(--color-subtle); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.ap-item { position: relative; display: flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-2); border-radius: var(--radius-control); color: var(--color-muted); text-decoration: none; }
.ap-item.is-active { background: var(--color-nav-active); color: var(--color-nav-active-text); font-weight: var(--weight-medium); }
.ap-item__count { margin-left: auto; color: var(--color-subtle); font-size: var(--text-xs); }
.ap-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-foreground); font-size: var(--text-xs); font-weight: var(--weight-semibold); display: grid; place-items: center; }
.ap-count--live { counter-reset: n var(--ap-n); animation: ap-tick 12s var(--ease-standard) infinite; }
.ap-count--live::after { content: counter(n); }
@keyframes ap-tick { 0%, 33% { --ap-n: 4; } 34%, 100% { --ap-n: 5; } }
.ap-side__foot { margin-top: auto; }
.ap-side--folded { width: 64px; align-items: center; padding-inline: var(--space-2); }
.ap-side--folded .ap-side__name, .ap-side--folded .ap-fold, .ap-side--folded .ap-search__text, .ap-side--folded kbd, .ap-side--folded .ap-user__text, .ap-side--folded .ap-user > .icon, .ap-side--folded .ap-group__title, .ap-side--folded .ap-item__label, .ap-side--folded .ap-item__count { display: none; }
.ap-side--folded .ap-search, .ap-side--folded .ap-user { border: 0; background: transparent; justify-content: center; padding: 0; width: 40px; }
.ap-side--folded .ap-item { width: 40px; justify-content: center; padding: 0; }
.ap-side--folded .ap-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.ap-side--folded .ap-menu { left: 52px; right: auto; top: 0; width: 220px; }
.ap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ap-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--size-header); padding: 0 var(--space-6); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.ap-crumb { display: flex; align-items: center; gap: var(--space-1); color: var(--color-subtle); }
.ap-crumb a { color: var(--color-subtle); text-decoration: none; }
.ap-crumb span { color: var(--color-foreground); font-weight: var(--weight-medium); }
.ap-top__right { display: flex; align-items: center; gap: var(--space-2); }
.ap-updated { color: var(--color-subtle); font-size: var(--text-xs); margin-right: var(--space-2); }
.ap-stack { display: flex; padding-left: 8px; margin-right: var(--space-2); }
.ap-page { position: relative; flex: 1; overflow: hidden; padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.ap-hello h1 { margin: 0; }
.ap-hello p { margin: var(--space-1) 0 0; }
.ap-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.ap-tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
.ap-tile__live { counter-reset: n var(--ap-n); animation: ap-tick 12s var(--ease-standard) infinite; }
.ap-tile__live::after { content: counter(n); }
.ap-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ap-stackcol { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ap-card { padding: 0; overflow: hidden; }
.ap-card > header { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-4) var(--space-4) var(--space-3); }
.ap-card > header h2 { margin: 0; }
.ap-list { list-style: none; margin: 0; padding: 0; }
.ap-list > li { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); border-top: 1px solid var(--color-default); }
.ap-list__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ap-list__text > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-check { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--color-emphasis); border-radius: var(--radius-full); }
.ap-due { flex: none; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.ap-due.is-late { color: var(--color-danger-text); font-weight: var(--weight-semibold); }
.ap-prop > .icon { color: var(--color-primary); flex: none; }
.ap-prop > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ap-prop > div > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-prop--new { background: var(--color-primary-soft); overflow: hidden; animation: ap-new 12s var(--ease-standard) infinite; }
@keyframes ap-new { 0%, 30% { max-height: 0; padding-block: 0; opacity: 0; } 36%, 100% { max-height: 64px; opacity: 1; } }
.ap-toast { position: absolute; right: var(--space-6); bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; border-radius: var(--radius-control); background: var(--color-surface-inverted); color: var(--color-inverted); box-shadow: var(--shadow-overlay); animation: ap-toast 12s var(--ease-standard) infinite; }
.ap-toast .icon { color: var(--color-success); }
@keyframes ap-toast { 0%, 60% { transform: translateY(20px); opacity: 0; } 64%, 84% { transform: none; opacity: 1; } 90%, 100% { transform: translateY(20px); opacity: 0; } }
/* Journey band */
.ap-band { position: relative; height: 110px; border-radius: var(--radius-card); overflow: hidden; background: linear-gradient(200deg, var(--color-primary), var(--color-primary-deep)); flex: none; }
.ap-band svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-band__fields { fill: var(--color-primary-foreground); fill-opacity: 0.08; }
.ap-band__route { fill: none; stroke: var(--color-primary-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; animation: ap-route 10s var(--ease-standard) infinite; }
@keyframes ap-route { 0%, 4% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: 0; } }
.ap-band__stop circle { fill: var(--color-surface); stroke: var(--color-primary-accent); stroke-width: 2.5; }
.ap-band__stop use { color: var(--color-primary); stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ap-band__stop { animation: ap-stop 10s var(--ease-standard) infinite; }
.ap-band__stop--1 { animation-name: ap-stop-1; } .ap-band__stop--2 { animation-name: ap-stop-2; } .ap-band__stop--3 { animation-name: ap-stop-3; } .ap-band__stop--4 { animation-name: ap-stop-4; } .ap-band__stop--5 { animation-name: ap-stop-5; }
@keyframes ap-stop-1 { 0%, 4% { opacity: 0.25; } 8%, 100% { opacity: 1; } }
@keyframes ap-stop-2 { 0%, 16% { opacity: 0.25; } 20%, 100% { opacity: 1; } }
@keyframes ap-stop-3 { 0%, 28% { opacity: 0.25; } 32%, 100% { opacity: 1; } }
@keyframes ap-stop-4 { 0%, 42% { opacity: 0.25; } 46%, 100% { opacity: 1; } }
@keyframes ap-stop-5 { 0%, 56% { opacity: 0.25; } 60%, 100% { opacity: 1; } }
.ap-band__text { position: absolute; left: var(--space-5); top: var(--space-3); display: flex; flex-direction: column; color: var(--color-primary-foreground); font-size: var(--text-xs); }
.ap-band__text strong { font-size: var(--text-sm); }
/* Rail */
.ap-rail { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) 0; background: var(--color-surface); border-right: 1px solid var(--color-default); }
.ap-rail .ap-mark { margin-bottom: var(--space-3); }
.ap-rail__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-control); color: var(--color-muted); }
.ap-rail__btn.is-active { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.ap-rail__gap { flex: 1; }
.ap-panel { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-3); background: var(--color-sidebar); border-right: 1px solid var(--color-default); }
.ap-panel__title { padding: var(--space-3) var(--space-2) var(--space-1); color: var(--color-subtle); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
/* Top navigation */
.ap--top { flex-direction: column; }
.ap-tnav { flex: none; display: flex; align-items: center; gap: var(--space-3); height: 60px; padding: 0 var(--space-6); background: var(--color-surface); border-bottom: 1px solid var(--color-default); }
.ap-tabs { display: flex; gap: var(--space-1); margin-left: var(--space-6); }
.ap-tabs a { position: relative; padding: 8px 12px; color: var(--color-muted); text-decoration: none; border-radius: var(--radius-control); }
.ap-tabs a.is-active { color: var(--color-foreground); font-weight: var(--weight-medium); }
.ap-tabs a.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 2px; background: var(--color-primary); border-radius: var(--radius-full); }
.ap-tabs a:hover { background: var(--color-surface-muted); }
.ap-search--top { margin-left: auto; width: 240px; }
.ap--top .ap-user { width: 220px; }
.ap-main--top { overflow: hidden; }
.ap-subnav { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-8) 0; }
.ap-subnav a { color: var(--color-muted); text-decoration: none; padding-bottom: var(--space-2); }
.ap-subnav a.is-active { color: var(--color-primary-strong); font-weight: var(--weight-medium); border-bottom: 2px solid var(--color-primary); }
.ap-tiles--count .t-figure { animation: ap-up 1.2s var(--ease-standard) both; }
@keyframes ap-up { from { opacity: 0; transform: translateY(8px); } }
/* The frames on the page */
.ap-frame .device--desktop { width: 1280px; aspect-ratio: auto; zoom: 0.66; }
.ap-frame .device__screen { height: 800px; overflow: hidden; }
.ap-frame--half .device--desktop { zoom: 0.4; }
.ap-pair { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; margin-top: var(--space-4); }
.ap-tablet .device--tablet { width: 820px; zoom: 0.3; }
.ap-tablet .device__screen { overflow: hidden; }
.ap-tablet .ap { width: 800px; height: 1160px; }
.ap-tablet .ap-tiles { grid-template-columns: repeat(2, 1fr); }
.ap-tablet .ap-cols { grid-template-columns: 1fr; }

/* ── Key screens (screens/key.html, genScreens.mjs): a screen on a desktop beside the same on a tablet ── */
.scr-pair { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }