/* [project]/apps/web/app/ui/product-ui.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --ink: #14211d;
  --ink-2: #263832;
  --muted: #6f7d78;
  --faint: #98a39f;
  --paper: #f3f4ef;
  --paper-warm: #f7f5ee;
  --surface: #fffefa;
  --surface-2: #f8f9f5;
  --surface-soft: #f0f3ee;
  --surface-strong: #fff;
  --line: #dfe4df;
  --line-strong: #cbd3cd;
  --green: #175f46;
  --green-deep: #103b2e;
  --green-pale: #e5f0e9;
  --signal: #b9dc6e;
  --blue: #42677a;
  --amber: #a66c19;
  --amber-pale: #f7edd9;
  --red: #a6463e;
  --red-pale: #fae9e6;
  --shadow: 0 18px 54px #14211d17;
  --shadow-sm: 0 8px 30px #1a2d260f;
  --shadow-lg: 0 32px 90px #14211d21;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --ui-color-ink: var(--ink);
  --ui-color-ink-secondary: var(--ink-2);
  --ui-color-muted: var(--muted);
  --ui-color-faint: var(--faint);
  --ui-color-canvas: var(--paper);
  --ui-color-surface: var(--surface);
  --ui-color-surface-subtle: var(--surface-2);
  --ui-color-surface-raised: var(--surface-strong);
  --ui-color-line: var(--line);
  --ui-color-line-strong: var(--line-strong);
  --ui-color-brand: var(--green);
  --ui-color-brand-strong: var(--green-deep);
  --ui-color-brand-soft: var(--green-pale);
  --ui-color-signal: var(--signal);
  --ui-color-info: var(--blue);
  --ui-color-info-soft: #e5eef2;
  --ui-color-success: var(--green);
  --ui-color-success-soft: var(--green-pale);
  --ui-color-warning: var(--amber);
  --ui-color-warning-soft: var(--amber-pale);
  --ui-color-danger: var(--red);
  --ui-color-danger-soft: var(--red-pale);
  --ui-radius-control: var(--radius-sm);
  --ui-radius-card: var(--radius);
  --ui-radius-surface: var(--radius-lg);
  --ui-shadow-raised: var(--shadow-sm);
  --ui-shadow-card: var(--shadow);
  --ui-shadow-overlay: var(--shadow-lg);
  --ui-control-small: 36px;
  --ui-control-medium: 44px;
  --ui-control-large: 50px;
  --ui-content-narrow: 720px;
  --ui-content-default: 1120px;
  --ui-content-wide: 1440px;
  --ui-page-gutter: clamp(16px, 3vw, 44px);
  --ui-duration-fast: .14s;
  --ui-duration-default: .2s;
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
}

.mtUiControl {
  font: inherit;
}

.mtUiButton {
  border-radius: var(--ui-radius-control);
  transition: color var(--ui-duration-fast) var(--ui-ease),
    background var(--ui-duration-fast) var(--ui-ease),
    border-color var(--ui-duration-fast) var(--ui-ease),
    box-shadow var(--ui-duration-fast) var(--ui-ease),
    transform var(--ui-duration-fast) var(--ui-ease);
  position: relative;
}

.mtUiButton-primary, .mtUiButton-secondary, .mtUiButton-quiet, .mtUiButton-danger, .mtUiButton-text {
  min-height: var(--ui-control-medium);
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-weight: 760;
  line-height: 1.15;
  display: inline-flex;
}

.mtUiButton-primary {
  color: #fff;
  background: var(--ui-color-brand-strong);
  box-shadow: 0 8px 20px #103b2e24;
}

.mtUiButton-primary:hover:not(:disabled) {
  background: var(--ui-color-brand);
  transform: translateY(-1px);
}

.mtUiButton-secondary {
  border-color: var(--ui-color-line-strong);
  color: var(--ui-color-ink);
  background: var(--ui-color-surface-raised);
}

.mtUiButton-secondary:hover:not(:disabled), .mtUiButton-quiet:hover:not(:disabled) {
  border-color: color-mix(in srgb,
    var(--ui-color-brand) 36%,
    var(--ui-color-line));
  background: var(--ui-color-brand-soft);
}

.mtUiButton-quiet {
  border-color: var(--ui-color-line);
  color: var(--ui-color-ink-secondary);
  background: var(--ui-color-surface-subtle);
}

.mtUiButton-text {
  color: var(--ui-color-muted);
  background: none;
  padding-inline: 10px;
}

.mtUiButton-text:hover:not(:disabled) {
  color: var(--ui-color-brand);
  background: var(--ui-color-brand-soft);
}

.mtUiButton-danger {
  color: var(--ui-color-danger);
  background: var(--ui-color-danger-soft);
}

.mtUiButton-danger:hover:not(:disabled) {
  color: #fff;
  background: var(--ui-color-danger);
}

.mtUiControl-small {
  min-height: var(--ui-control-small);
  padding-inline: 12px;
  font-size: 12px;
}

.mtUiControl-large {
  min-height: var(--ui-control-large);
  padding-inline: 20px;
}

.mtUiControl-full {
  width: 100%;
}

.mtUiIconButton {
  width: var(--ui-control-medium);
  flex: none;
  padding: 0;
  font-size: 19px;
}

.mtUiControl-small.mtUiIconButton {
  width: var(--ui-control-small);
}

.mtUiControl-large.mtUiIconButton {
  width: var(--ui-control-large);
}

.mtUiButton:focus-visible, .mtUiLink:focus-visible, .mtUiSummary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-color-brand) 20%, transparent);
  outline-offset: 2px;
}

.mtUiButton:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none;
}

.mtUiLink {
  color: var(--ui-color-brand);
  text-underline-offset: 3px;
  border-radius: 6px;
  font-weight: 720;
  text-decoration-thickness: 1px;
}

.mtUiLink-quiet {
  color: var(--ui-color-muted);
}

.mtUiLink-button {
  min-height: var(--ui-control-medium);
  border: 1px solid var(--ui-color-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-surface-raised);
  align-items: center;
  padding: 0 16px;
  text-decoration: none;
  display: inline-flex;
}

.mtUiField {
  gap: 7px;
  min-width: 0;
  display: grid;
}

.mtUiFieldLabel {
  color: var(--ui-color-muted);
  letter-spacing: .01em;
  font-size: 11px;
  font-weight: 780;
}

.mtUiFieldLabel em {
  color: var(--ui-color-danger);
  margin-left: 3px;
  font-style: normal;
}

.mtUiFieldControl {
  min-width: 0;
}

.mtUiField > .mtUiFieldControl {
  width: 100%;
  min-height: var(--ui-control-medium);
  border: 1px solid var(--ui-color-line-strong);
  border-radius: var(--ui-radius-control);
  color: var(--ui-color-ink);
  background: var(--ui-color-surface-raised);
  padding: 10px 13px;
}

.mtUiField > .mtUiTextarea {
  resize: vertical;
  min-height: 112px;
}

.mtUiField > .mtUiFieldControl:focus-visible {
  border-color: color-mix(in srgb,
    var(--ui-color-brand) 58%,
    var(--ui-color-line));
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--ui-color-brand) 10%, transparent);
  outline: 0;
}

.mtUiFieldHint, .mtUiFieldError {
  font-size: 10px;
  line-height: 1.45;
}

.mtUiFieldHint {
  color: var(--ui-color-muted);
}

.mtUiFieldError {
  color: var(--ui-color-danger);
}

.mtUiField:has(.mtUiFieldError) > .mtUiFieldControl {
  border-color: color-mix(in srgb,
    var(--ui-color-danger) 58%,
    var(--ui-color-line));
}

.mtUiNativeChoice {
  accent-color: var(--ui-color-brand);
}

.mtUiFieldset, .mtUiDetails {
  min-width: 0;
}

.mtUiSummary {
  min-height: var(--ui-control-medium);
  cursor: pointer;
  align-items: center;
  display: flex;
}

.mtUiCheckbox {
  border: 1px solid var(--ui-color-line);
  background: var(--ui-color-surface-raised);
  cursor: pointer;
  border-radius: 14px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
  padding: 13px;
  display: grid;
  position: relative;
}

.mtUiCheckbox > input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.mtUiCheckboxMark {
  border: 1px solid var(--ui-color-line-strong);
  color: #0000;
  background: var(--ui-color-surface-subtle);
  border-radius: 7px;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 900;
  display: grid;
}

.mtUiCheckbox:has(input:checked) {
  border-color: color-mix(in srgb,
    var(--ui-color-brand) 48%,
    var(--ui-color-line));
  background: var(--ui-color-brand-soft);
}

.mtUiCheckbox:has(input:checked) .mtUiCheckboxMark {
  border-color: var(--ui-color-brand);
  color: #fff;
  background: var(--ui-color-brand);
}

:is(.mtUiCheckbox:has(input:focus-visible), .mtUiChoiceCard:has(input:focus-visible)) {
  outline: 3px solid color-mix(in srgb, var(--ui-color-brand) 18%, transparent);
  outline-offset: 2px;
}

.mtUiCheckbox strong, .mtUiCheckbox small {
  display: block;
}

.mtUiCheckbox strong {
  font-size: 12px;
}

.mtUiCheckbox small {
  color: var(--ui-color-muted);
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.45;
}

.mtUiChoiceCard {
  border: 1px solid var(--ui-color-line);
  background: var(--ui-color-surface-raised);
  cursor: pointer;
  border-radius: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 84px;
  padding: 14px;
  display: grid;
  position: relative;
}

.mtUiChoiceCard > input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.mtUiChoiceCard strong, .mtUiChoiceCard small {
  display: block;
}

.mtUiChoiceCard strong {
  font-size: 13px;
}

.mtUiChoiceCard small {
  color: var(--ui-color-muted);
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
}

.mtUiChoiceCard > b {
  color: var(--ui-color-brand);
}

.mtUiChoiceCard:has(input:checked) {
  border-color: var(--ui-color-brand);
  background: var(--ui-color-brand-soft);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--ui-color-brand) 10%, transparent);
}

.mtUiBadge {
  min-height: 24px;
  color: var(--ui-color-muted);
  background: var(--ui-color-surface-soft, var(--surface-soft));
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 820;
  display: inline-flex;
}

.mtUiBadge-info {
  color: var(--ui-color-info);
  background: var(--ui-color-info-soft);
}

.mtUiBadge-success {
  color: var(--ui-color-success);
  background: var(--ui-color-success-soft);
}

.mtUiBadge-warning {
  color: var(--ui-color-warning);
  background: var(--ui-color-warning-soft);
}

.mtUiBadge-danger {
  color: var(--ui-color-danger);
  background: var(--ui-color-danger-soft);
}

.mtUiNotice {
  border: 1px solid var(--ui-color-line);
  color: var(--ui-color-ink);
  background: var(--ui-color-surface-subtle);
  border-radius: 15px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 14px;
  display: grid;
}

.mtUiNotice > span {
  border-radius: 10px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 900;
  display: grid;
}

.mtUiNotice strong {
  font-size: 12px;
  display: block;
}

.mtUiNoticeBody {
  color: var(--ui-color-muted);
  margin: 3px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.mtUiNotice-info {
  border-color: color-mix(in srgb,
    var(--ui-color-info) 20%,
    var(--ui-color-line));
}

.mtUiNotice-info > span {
  color: var(--ui-color-info);
  background: var(--ui-color-info-soft);
}

.mtUiNotice-success {
  border-color: color-mix(in srgb,
    var(--ui-color-success) 20%,
    var(--ui-color-line));
  background: var(--ui-color-success-soft);
}

.mtUiNotice-success > span {
  color: #fff;
  background: var(--ui-color-success);
}

.mtUiNotice-warning {
  border-color: color-mix(in srgb,
    var(--ui-color-warning) 24%,
    var(--ui-color-line));
  background: var(--ui-color-warning-soft);
}

.mtUiNotice-warning > span {
  color: var(--ui-color-warning);
  background: color-mix(in srgb, var(--ui-color-warning-soft) 55%, white);
}

.mtUiNotice-danger {
  border-color: color-mix(in srgb,
    var(--ui-color-danger) 24%,
    var(--ui-color-line));
  background: var(--ui-color-danger-soft);
}

.mtUiNotice-danger > span {
  color: #fff;
  background: var(--ui-color-danger);
}

.mtUiCard {
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-card);
  background: var(--ui-color-surface);
  min-width: 0;
  box-shadow: var(--ui-shadow-raised);
  padding: clamp(16px, 2.3vw, 22px);
}

.mtUiCard-subtle {
  background: var(--ui-color-surface-subtle);
  box-shadow: none;
}

.mtUiCard-brand {
  border-color: color-mix(in srgb,
    var(--ui-color-brand) 22%,
    var(--ui-color-line));
  background: radial-gradient(circle at 100% 0,
      color-mix(in srgb, var(--ui-color-signal) 23%, transparent),
      transparent 34%),
    var(--ui-color-brand-soft);
}

.mtUiCard-danger {
  border-color: color-mix(in srgb,
    var(--ui-color-danger) 22%,
    var(--ui-color-line));
  background: var(--ui-color-danger-soft);
}

.mtUiCard-interactive {
  transition: border-color var(--ui-duration-default) var(--ui-ease),
    box-shadow var(--ui-duration-default) var(--ui-ease),
    transform var(--ui-duration-default) var(--ui-ease);
}

.mtUiCard-interactive:hover {
  border-color: color-mix(in srgb,
    var(--ui-color-brand) 30%,
    var(--ui-color-line));
  box-shadow: var(--ui-shadow-card);
  transform: translateY(-2px);
}

.mtUiDataRow {
  border-bottom: 1px solid var(--ui-color-line);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 0;
  display: grid;
}

.mtUiDataRow:last-child {
  border-bottom: 0;
}

.mtUiDataRowLeading {
  width: 38px;
  height: 38px;
  color: var(--ui-color-brand);
  background: var(--ui-color-brand-soft);
  border-radius: 12px;
  place-items: center;
  font-weight: 850;
  display: grid;
}

.mtUiDataRowCopy {
  min-width: 0;
}

.mtUiDataRowCopy > span {
  align-items: center;
  gap: 8px;
  display: flex;
}

.mtUiDataRowCopy strong, .mtUiDataRowCopy small {
  display: block;
}

.mtUiDataRowCopy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
}

.mtUiDataRowCopy small {
  color: var(--ui-color-muted);
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.4;
}

.mtUiEmptyState, .mtUiLoadingState {
  border: 1px dashed var(--ui-color-line-strong);
  border-radius: var(--ui-radius-card);
  background: var(--ui-color-surface-subtle);
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 14px;
  min-height: 150px;
  padding: 24px;
  display: grid;
}

.mtUiEmptyState > span {
  width: 42px;
  height: 42px;
  color: var(--ui-color-brand);
  background: var(--ui-color-brand-soft);
  border-radius: 14px;
  place-items: center;
  font-size: 18px;
  font-weight: 850;
  display: grid;
}

.mtUiEmptyState strong, .mtUiLoadingState strong {
  font-size: 14px;
  display: block;
}

.mtUiEmptyState p, .mtUiLoadingState p {
  color: var(--ui-color-muted);
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.mtUiEmptyState > :last-child:not(div) {
  grid-column: 2;
  justify-self: start;
}

.mtUiLoadingState {
  min-height: 110px;
}

.mtUiSpinner {
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  display: inline-grid;
}

.mtUiSpinner > span {
  border: 2px solid;
  border-right-color: #0000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: .7s linear infinite mtUiSpin;
}

.mtUiSkeleton {
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-card);
  background: var(--ui-color-surface);
  gap: 10px;
  padding: 18px;
  display: grid;
}

.mtUiSkeleton i {
  background: linear-gradient(90deg,
      transparent,
      #ffffffbd,
      transparent),
    var(--ui-color-line);
  background-size: 220% 100%;
  border-radius: 999px;
  width: 100%;
  height: 12px;
  animation: 1.4s ease-in-out infinite mtUiSkeleton;
  display: block;
  overflow: hidden;
}

.mtUiSkeleton i:first-child {
  width: 42%;
  height: 17px;
}

.mtUiSkeleton i:last-child {
  width: 70%;
}

.mtUiPageHeader {
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-surface);
  background: radial-gradient(circle at 92% 8%,
      color-mix(in srgb, var(--ui-color-signal) 20%, transparent),
      transparent 30%),
    var(--ui-color-surface);
  box-shadow: var(--ui-shadow-card);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  padding: clamp(24px, 4vw, 46px);
  display: grid;
}

.mtUiEyebrow {
  color: var(--ui-color-brand);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 850;
  display: block;
}

.mtUiPageHeader h1 {
  letter-spacing: -.052em;
  max-width: 760px;
  margin: 10px 0 12px;
  font-size: clamp(30px, 5vw, 56px);
  line-height: .98;
}

.mtUiPageHeader p {
  max-width: 720px;
  color: var(--ui-color-muted);
  margin: 0;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.55;
}

.mtUiPageHeaderActions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  display: flex;
}

.mtUiSectionHeader {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  display: flex;
}

.mtUiSectionHeader h2 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: clamp(20px, 3vw, 28px);
}

.mtUiSectionHeader p {
  max-width: 680px;
  color: var(--ui-color-muted);
  margin: 6px 0 0;
  font-size: 11px;
}

.mtUiTabs {
  border: 1px solid var(--ui-color-line);
  background: color-mix(in srgb,
    var(--ui-color-surface-subtle) 90%,
    transparent);
  border-radius: 14px;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  display: flex;
  overflow-x: auto;
}

.mtUiTabs > button {
  min-height: 36px;
  color: var(--ui-color-muted);
  background: none;
  border: 0;
  border-radius: 10px;
  flex: none;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 760;
}

.mtUiTabs > button[aria-current="page"] {
  color: var(--ui-color-brand-strong);
  background: var(--ui-color-surface-raised);
  box-shadow: 0 4px 14px #14211d12;
}

.mtUiActionBar {
  border: 1px solid var(--ui-color-line);
  background: color-mix(in srgb,
    var(--ui-color-surface-raised) 92%,
    transparent);
  box-shadow: var(--ui-shadow-raised);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 14px;
  display: grid;
}

.mtUiActionBar > p {
  color: var(--ui-color-muted);
  margin: 0;
  font-size: 10px;
}

.mtUiActionBar > div {
  gap: 9px;
  display: flex;
}

.mtUiOverlay {
  z-index: 120;
  overscroll-behavior: contain;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #0c1d176b;
  padding: 20px;
  animation: .15s ease-out both mtUiOverlayEnter;
  display: flex;
  position: fixed;
  inset: 0;
}

.mtUiOverlay-dialog {
  justify-content: center;
  align-items: center;
}

.mtUiOverlay-drawer {
  justify-content: flex-end;
  align-items: stretch;
}

.mtUiOverlaySurface {
  border: 1px solid var(--ui-color-line);
  background: var(--ui-color-canvas);
  width: min(620px, 100%);
  min-height: 0;
  max-height: calc(100dvh - 40px);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 24px;
  outline: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: .18s cubic-bezier(.2, .8, .2, 1) both mtUiDialogEnter;
  display: grid;
  position: relative;
  overflow: hidden;
}

.mtUiOverlay-drawer .mtUiOverlaySurface {
  border-radius: 24px;
  width: min(560px, 100vw - 40px);
  height: 100%;
  max-height: none;
  animation-name: mtUiDrawerEnter;
}

.mtUiOverlayClose {
  z-index: 2;
  position: absolute;
  top: 18px;
  right: 18px;
}

.mtUiOverlayHeader {
  padding: clamp(20px, 4vw, 30px);
  border-bottom: 1px solid color-mix(in srgb,
    var(--ui-color-line) 72%,
    transparent);
  background: color-mix(in srgb,
    var(--ui-color-canvas) 94%,
    transparent);
  padding-right: clamp(68px, 8vw, 82px);
}

.mtUiOverlayHeader h2 {
  letter-spacing: -.04em;
  outline: none;
  margin: 7px 0;
  font-size: clamp(23px, 4vw, 32px);
}

.mtUiOverlayHeader p {
  color: var(--ui-color-muted);
  margin: 0;
  font-size: 12px;
}

.mtUiOverlayBody {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  min-width: 0;
  min-height: 0;
  padding: clamp(18px, 3vw, 28px);
  scroll-padding-block: 18px;
  overflow: auto;
}

.mtUiOverlayBody > :first-child {
  margin-top: 0;
}

.mtUiOverlayBody > :last-child {
  margin-bottom: 0;
}

.mtUiOverlayActions {
  z-index: 1;
  border-top: 1px solid var(--ui-color-line);
  background: color-mix(in srgb,
    var(--ui-color-canvas) 94%,
    transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 14px clamp(18px, 3vw, 28px);
  display: flex;
  position: relative;
  box-shadow: 0 -12px 28px #14211d0f;
}

.mtUiOverlayBody .mtUiActionBar {
  z-index: 1;
  position: sticky;
  bottom: 0;
}

@keyframes mtUiOverlayEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mtUiDialogEnter {
  from {
    opacity: 0;
    transform: translateY(8px)scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes mtUiDrawerEnter {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mtUiSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mtUiSkeleton {
  0% {
    background-position: 160% 0;
  }

  100% {
    background-position: -80% 0;
  }
}

@media (max-width: 719px) {
  :root {
    --ui-page-gutter: 14px;
  }

  .mtUiStyleframeBrand, .mtUiTabs > button {
    min-height: var(--ui-control-medium);
  }

  .mtUiButton-primary, .mtUiButton-secondary, .mtUiButton-quiet, .mtUiButton-danger {
    min-height: 46px;
  }

  .mtUiPageHeader {
    border-radius: 22px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    padding: 22px;
  }

  .mtUiPageHeaderActions {
    grid-template-columns: 1fr;
    width: 100%;
    display: grid;
  }

  .mtUiPageHeaderActions > * {
    width: 100%;
  }

  .mtUiSectionHeader {
    align-items: start;
  }

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

  .mtUiDataRowAction {
    grid-column: 2;
  }

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

  .mtUiActionBar > div {
    grid-template-columns: 1fr;
    display: grid;
  }

  .mtUiActionBar > div > * {
    width: 100%;
  }

  .mtUiOverlay-dialog {
    padding: max(12px, env(safe-area-inset-top)) 12px
      max(12px, env(safe-area-inset-bottom));
    align-items: center;
  }

  .mtUiOverlay-dialog .mtUiOverlaySurface {
    width: 100%;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) -
      max(24px, env(safe-area-inset-bottom)));
    border-radius: 22px;
  }

  .mtUiOverlay-drawer {
    padding: max(10px, env(safe-area-inset-top)) 0 0;
    align-items: flex-end;
  }

  .mtUiOverlay-drawer .mtUiOverlaySurface {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)));
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 24px 24px 0 0;
    animation-name: mtUiSheetEnter;
  }

  .mtUiOverlayHeader {
    padding: 22px 66px 18px 18px;
  }

  .mtUiOverlayHeader h2 {
    font-size: clamp(23px, 7vw, 29px);
  }

  .mtUiOverlayClose {
    top: 14px;
    right: 14px;
  }

  .mtUiOverlayBody {
    padding: 18px;
    scroll-padding-block: 14px;
  }

  .mtUiOverlayActions {
    padding: 12px 18px max(12px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .mtUiOverlayActions > * {
    width: 100%;
  }

  .mtUiOverlayBody .mtUiActionBar {
    bottom: 0;
  }

  @keyframes mtUiSheetEnter {
    from {
      opacity: 0;
      transform: translateY(28px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 390px) {
  .mtUiPageHeader h1 {
    font-size: 32px;
  }

  .mtUiEmptyState, .mtUiLoadingState {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mtUiButton, .mtUiCard-interactive {
    transition: none;
  }

  .mtUiOverlay, .mtUiOverlaySurface, .mtUiSpinner > span, .mtUiSkeleton i {
    animation: none;
  }
}

.mtUiStyleframe {
  width: min(var(--ui-content-wide), calc(100% - (var(--ui-page-gutter) * 2)));
  align-content: start;
  gap: 22px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 22px 0 80px;
  display: grid;
}

.mtUiStyleframeTopline {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  display: flex;
}

.mtUiStyleframeBrand {
  color: var(--ui-color-ink);
  align-items: center;
  gap: 11px;
  text-decoration: none;
  display: inline-flex;
}

.mtUiStyleframeBrand > span:first-child {
  width: 36px;
  height: 36px;
  color: var(--ui-color-signal);
  background: var(--ui-color-brand-strong);
  border-radius: 11px;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  display: grid;
}

.mtUiStyleframeBrand strong, .mtUiStyleframeBrand small {
  display: block;
}

.mtUiStyleframeBrand strong {
  letter-spacing: -.025em;
  font-size: 14px;
}

.mtUiStyleframeBrand small {
  color: var(--ui-color-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 1px;
  font-size: 8px;
}

.mtUiStyleframeSection {
  gap: 20px;
  padding-top: 10px;
  display: grid;
}

.mtUiTokenGrid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.mtUiTokenGrid .mtUiCard {
  align-content: start;
  gap: 8px;
  min-height: 132px;
  padding: 12px;
  display: grid;
}

.mtUiTokenGrid strong, .mtUiTokenGrid small {
  display: block;
}

.mtUiTokenGrid strong {
  font-size: 10px;
}

.mtUiTokenGrid small {
  color: var(--ui-color-muted);
  overflow-wrap: anywhere;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 7px;
}

.mtUiTokenSwatch {
  border: 1px solid color-mix(in srgb, var(--ui-color-ink) 8%, transparent);
  border-radius: 12px;
  height: 64px;
  display: block;
}

.mtUiTokenSwatch-brand {
  background: var(--ui-color-brand);
}

.mtUiTokenSwatch-signal {
  background: var(--ui-color-signal);
}

.mtUiTokenSwatch-surface {
  background: var(--ui-color-surface);
}

.mtUiTokenSwatch-canvas {
  background: var(--ui-color-canvas);
}

.mtUiTokenSwatch-info {
  background: var(--ui-color-info);
}

.mtUiTokenSwatch-warning {
  background: var(--ui-color-warning);
}

.mtUiTokenSwatch-danger {
  background: var(--ui-color-danger);
}

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

.mtUiFoundationGrid .mtUiCard {
  min-height: 300px;
}

.mtUiTypeDisplay {
  letter-spacing: -.055em;
  max-width: 480px;
  margin: 12px 0 20px;
  font-size: clamp(34px, 5vw, 54px);
  line-height: .96;
}

.mtUiTypeHeading {
  letter-spacing: -.035em;
  margin: 0 0 8px;
  font-size: 20px;
}

.mtUiFoundationGrid p {
  max-width: 560px;
  color: var(--ui-color-muted);
}

.mtUiTypeMeta {
  color: var(--ui-color-faint);
  font-size: 9px;
}

.mtUiSpacingScale {
  align-items: end;
  gap: 14px;
  min-height: 150px;
  display: flex;
}

.mtUiSpacingScale > span {
  color: var(--ui-color-muted);
  justify-items: center;
  gap: 8px;
  font-size: 8px;
  display: grid;
}

.mtUiSpacingScale i {
  background: var(--ui-color-brand);
  border-radius: 999px;
  min-width: 4px;
  height: 80px;
  display: block;
}

.mtUiSpacingScale .mtUiSpace-1 {
  width: var(--space-1);
}

.mtUiSpacingScale .mtUiSpace-2 {
  width: var(--space-2);
}

.mtUiSpacingScale .mtUiSpace-3 {
  width: var(--space-3);
}

.mtUiSpacingScale .mtUiSpace-4 {
  width: var(--space-4);
}

.mtUiSpacingScale .mtUiSpace-5 {
  width: var(--space-5);
}

.mtUiSpacingScale .mtUiSpace-6 {
  width: var(--space-6);
}

.mtUiSpacingScale .mtUiSpace-7 {
  width: var(--space-7);
}

.mtUiRadiusScale {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.mtUiRadiusScale > span {
  border: 1px solid
    color-mix(in srgb, var(--ui-color-brand) 22%, var(--ui-color-line));
  min-height: 58px;
  color: var(--ui-color-brand);
  background: var(--ui-color-surface-raised);
  place-items: center;
  font-size: 8px;
  font-weight: 780;
  display: grid;
}

.mtUiRadiusScale > span:first-child {
  border-radius: var(--ui-radius-control);
}

.mtUiRadiusScale > span:nth-child(2) {
  border-radius: var(--ui-radius-card);
}

.mtUiRadiusScale > span:last-child {
  border-radius: var(--ui-radius-surface);
}

.mtUiComponentGrid > .mtUiCard {
  align-content: start;
  gap: 15px;
  display: grid;
}

.mtUiComponentGrid h3, .mtUiPatternHeader h3 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: 17px;
}

.mtUiComponentRow, .mtUiBadgeRow {
  flex-wrap: wrap;
  gap: 9px;
  display: flex;
}

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

.mtUiFormFull {
  grid-column: 1 / -1;
}

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

.mtUiNoticeStack {
  gap: 9px;
  display: grid;
}

.mtUiStyleframeFieldset {
  border: 1px solid var(--ui-color-line);
  border-radius: 14px;
  gap: 8px;
  margin: 0;
  padding: 13px;
  display: grid;
}

.mtUiStyleframeFieldset > legend {
  color: var(--ui-color-muted);
  padding: 0 6px;
  font-size: 9px;
  font-weight: 780;
}

.mtUiStyleframeFieldset .mtUiSummary {
  color: var(--ui-color-brand);
  font-size: 11px;
  font-weight: 760;
}

.mtUiStyleframeFieldset p {
  color: var(--ui-color-muted);
  margin: 9px 0 0;
  font-size: 10px;
}

.mtUiStateShowcase {
  gap: 14px;
  padding-top: 8px;
  display: grid;
}

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

.mtUiPatternGrid > .mtUiCard {
  align-content: start;
  gap: 14px;
  display: grid;
}

.mtUiPatternHeader {
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  display: flex;
}

.mtUiPatternLead {
  color: var(--ui-color-muted);
  margin: 0;
  font-size: 12px;
}

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

.mtUiPatternFacts > div {
  border: 1px solid var(--ui-color-line);
  background: var(--ui-color-surface-raised);
  border-radius: 12px;
  padding: 11px;
}

.mtUiPatternFacts small, .mtUiPatternFacts strong {
  display: block;
}

.mtUiPatternFacts small {
  color: var(--ui-color-muted);
  text-transform: uppercase;
  font-size: 8px;
}

.mtUiPatternFacts strong {
  margin-top: 4px;
  font-size: 10px;
}

@media (max-width: 1050px) {
  .mtUiTokenGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .mtUiStyleframe {
    gap: 14px;
    padding-top: 12px;
  }

  .mtUiTokenGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mtUiFoundationGrid, .mtUiComponentGrid, .mtUiPatternGrid, .mtUiFormGrid, .mtUiChoiceGrid, .mtUiLoadingGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mtUiFormFull {
    grid-column: auto;
  }

  .mtUiStyleframeSection > .mtUiSectionHeader, .mtUiStateShowcase > .mtUiSectionHeader {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .mtUiStateShowcase .mtUiTabs, .mtUiComponentRow > .mtUiButton {
    width: 100%;
  }
}

/* [project]/apps/web/app/globals.css [app-client] (css) */
* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
  min-width: 320px;
  min-height: 100%;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  color: var(--ink);
  background: radial-gradient(circle at 18% -12%, #b9dc6e2b, transparent 32rem),
    var(--paper);
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

button, input, select, textarea {
  font: inherit;
}

button, a, select {
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, dl, dd, ol, ul {
  margin-top: 0;
}

a {
  color: inherit;
}

.alsBrand {
  color: var(--ink);
  align-items: center;
  gap: 11px;
  text-decoration: none;
  display: inline-flex;
}

.alsBrand > span {
  color: #f8fbf6;
  background: linear-gradient(145deg, var(--green), var(--green-deep));
  border-radius: 12px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-family: Georgia, Times New Roman, serif;
  font-size: 21px;
  font-style: italic;
  display: grid;
  box-shadow: 0 8px 22px #103b2e2e;
}

.alsBrand > strong {
  letter-spacing: -.02em;
  font-size: 16px;
}

.alsKicker {
  color: var(--green);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 820;
  display: block;
}

.alsCenteredState {
  place-content: center;
  gap: 16px;
  width: min(680px, 100%);
  min-height: 320px;
  margin: 0 auto;
  display: grid;
}

.alsCenteredState > .mtUiButton, .alsCenteredState > .mtUiLink-button {
  justify-self: center;
}

.alsPortfolioPage {
  width: min(1480px, calc(100% - (var(--ui-page-gutter) * 2)));
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: 72px;
}

.alsPortfolioTopbar {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 84px;
  display: flex;
}

.alsPrincipal, .alsOrganizationIdentity {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.alsPortfolioSession {
  align-items: center;
  gap: 12px;
  display: flex;
}

.alsSessionButton {
  white-space: nowrap;
}

.alsSessionButton.is-compact {
  width: 40px;
  min-width: 40px;
  padding: 0;
  font-size: 16px;
}

.alsDevelopmentSession {
  border: 1px solid var(--line);
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 8px;
  font-weight: 780;
}

.alsLoginPage {
  background: var(--surface);
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  min-height: 100dvh;
  display: grid;
}

.alsLoginPanel {
  align-content: center;
  justify-self: end;
  gap: 28px;
  width: min(100%, 640px);
  min-height: 100dvh;
  padding: clamp(28px, 6vw, 78px);
  display: grid;
}

.alsLoginPanel > .alsBrand {
  position: absolute;
  top: clamp(22px, 4vw, 42px);
}

.alsLoginCopy {
  gap: 10px;
  display: grid;
}

.alsLoginCopy h1 {
  letter-spacing: -.06em;
  margin: 0;
  font-size: clamp(42px, 6vw, 68px);
  line-height: .98;
}

.alsLoginCopy p {
  max-width: 510px;
  color: var(--ink-2);
  margin: 3px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

.alsGoogleSignIn {
  align-content: center;
  justify-items: start;
  min-height: 52px;
  display: grid;
  position: relative;
}

.alsGoogleSignIn.is-busy > div:first-child {
  pointer-events: none;
  opacity: .35;
}

.alsGoogleSignIn .mtUiLoadingState {
  width: min(100%, 390px);
  padding: 13px;
}

.alsLoginProgress {
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  width: min(100% + 16px, 400px);
  position: absolute;
  inset: -8px auto auto -8px;
}

.alsLoginTrust {
  border-top: 1px solid var(--line);
  max-width: 500px;
  color: var(--muted);
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  padding-top: 18px;
  display: grid;
}

.alsLoginTrust > span {
  width: 22px;
  height: 22px;
  color: var(--green);
  background: var(--green-pale);
  border-radius: 50%;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.alsLoginTrust p {
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
}

.alsLoginContext {
  color: #fff;
  background: radial-gradient(circle at 82% 18%, #b9dc6e47, #0000 24rem), linear-gradient(145deg, #174a38, #0e2d24 72%);
  align-items: end;
  min-height: 100dvh;
  padding: clamp(34px, 6vw, 86px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.alsLoginContext:before, .alsLoginContext:after {
  content: "";
  border: 1px solid #ffffff14;
  border-radius: 50%;
  position: absolute;
}

.alsLoginContext:before {
  width: 52vw;
  height: 52vw;
  top: -18vw;
  right: -19vw;
}

.alsLoginContext:after {
  width: 32vw;
  height: 32vw;
  top: -7vw;
  right: -9vw;
}

.alsLoginContext > div {
  z-index: 1;
  gap: 12px;
  max-width: 620px;
  display: grid;
  position: relative;
}

.alsLoginContext span {
  color: var(--signal);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 820;
}

.alsLoginContext strong {
  letter-spacing: -.045em;
  font-family: Georgia, Times New Roman, serif;
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 500;
  line-height: 1.04;
}

.alsAuthState {
  place-content: center;
  gap: 14px;
  width: min(620px, 100% - 32px);
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
}

.alsAuthState > .mtUiButton {
  justify-self: center;
}

.alsPrincipal > span, .alsOrganizationIdentity > span {
  border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line));
  width: 38px;
  height: 38px;
  color: var(--green-deep);
  background: var(--green-pale);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 12px;
  font-weight: 850;
  display: grid;
}

.alsPrincipal > div, .alsOrganizationIdentity > div {
  min-width: 0;
  display: grid;
}

.alsPrincipal small, .alsOrganizationIdentity small {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 760;
}

.alsPrincipal strong, .alsOrganizationIdentity strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.alsPortfolioHero {
  border: 1px solid color-mix(in srgb, var(--green-deep) 16%, transparent);
  color: #f4f8f5;
  background: radial-gradient(circle at 92% 16%, #b9dc6e3d, #0000 22rem), linear-gradient(135deg, #173e32 0%, #0e2f25 68%, #10271f 100%);
  border-radius: 34px;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr);
  align-items: end;
  gap: clamp(28px, 6vw, 90px);
  min-height: 310px;
  padding: clamp(34px, 6vw, 78px) clamp(24px, 5vw, 72px);
  display: grid;
  overflow: hidden;
  box-shadow: 0 28px 80px #103b2e2b;
}

.alsPortfolioHero .mtUiPageHeader {
  color: inherit;
  box-shadow: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.alsPortfolioHero .mtUiEyebrow {
  color: var(--signal);
}

.alsPortfolioHero .mtUiPageHeader h1 {
  color: #fff;
  letter-spacing: -.055em;
  max-width: 760px;
  font-size: clamp(38px, 5vw, 66px);
  line-height: .98;
}

.alsPortfolioHero .mtUiPageHeader p {
  color: #f4f8f5b8;
  max-width: 700px;
  font-size: clamp(14px, 1.4vw, 17px);
}

.alsPortfolioSummary {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #ffffff1a;
  border: 1px solid #ffffff21;
  border-radius: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  display: grid;
  overflow: hidden;
}

.alsPortfolioSummary > div {
  background: #0d2b2294;
  align-content: space-between;
  min-height: 92px;
  padding: 18px;
  display: grid;
}

.alsPortfolioSummary dt {
  color: #f4f8f591;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 760;
}

.alsPortfolioSummary dd {
  color: #fff;
  letter-spacing: -.04em;
  margin: 0;
  font-size: 29px;
  font-weight: 760;
}

.alsPortfolioSummary .is-info dd {
  color: var(--signal);
}

.alsPortfolioDirectory {
  gap: 22px;
  padding-top: clamp(34px, 5vw, 66px);
  display: grid;
}

.alsDirectoryHeading {
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  display: flex;
}

.alsDirectoryHeading h2 {
  letter-spacing: -.045em;
  margin: 5px 0 0;
  font-size: clamp(24px, 3vw, 36px);
}

.alsPortfolioGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.alsPortfolioCardLink, .alsWorkspaceCardLink {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: block;
}

.alsPortfolioCard {
  border-color: color-mix(in srgb, var(--green) 10%, var(--line));
  background: linear-gradient(145deg, #ffffffd4, #f8f9f5f2),
    var(--surface);
  grid-template-rows: auto auto 1fr auto;
  gap: 22px;
  height: 100%;
  min-height: 365px;
  padding: 24px;
  display: grid;
}

.alsPortfolioCardTopline, .alsPortfolioCardFooter, .alsWorkspaceCardHeader, .alsEntityStatusLine, .alsDecisionHeader {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.alsOrganizationMark {
  width: 42px;
  height: 42px;
  color: var(--green-deep);
  background: var(--green-pale);
  border-radius: 14px;
  place-items: center;
  font-size: 14px;
  font-weight: 840;
  display: grid;
}

.alsPortfolioCardCopy h2 {
  letter-spacing: -.035em;
  margin: 5px 0 8px;
  font-size: 23px;
}

.alsPortfolioCardCopy p, .alsWorkspaceCard > p, .alsNarrative, .alsDecisionCard > p, .alsHeadSourceList p {
  color: var(--ink-2);
  margin: 0;
  line-height: 1.65;
}

.alsPortfolioMetrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  display: grid;
}

.alsPortfolioMetrics > div {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px 12px;
}

.alsPortfolioMetrics dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
}

.alsPortfolioMetrics dd {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 780;
}

.alsPortfolioMetrics .is-warning dd {
  color: var(--red);
}

.alsPortfolioMetrics .is-info dd {
  color: var(--blue);
}

.alsPortfolioCardFooter {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.alsPortfolioCardFooter small {
  color: var(--muted);
  font-size: 9px;
}

.alsPortfolioCardFooter strong, .alsOpenLabel {
  color: var(--green);
  font-size: 11px;
}

.alsApplicationShell {
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100dvh;
  display: grid;
}

.alsSidebar {
  color: #f7fbf8d1;
  background: radial-gradient(circle at 10% 0, #b9dc6e1a, #0000 22rem), #102d24;
  border-right: 1px solid #ffffff14;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 22px;
  width: 264px;
  height: 100dvh;
  padding: 22px 18px;
  display: grid;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.alsSidebar .alsBrand {
  color: #fff;
}

.alsSidebar .alsBrand > span {
  color: var(--green-deep);
  background: var(--signal);
  box-shadow: none;
}

.alsOrganizationIdentity {
  background: #ffffff0b;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  padding: 13px;
}

.alsOrganizationIdentity > span {
  color: var(--signal);
  background: #b9dc6e1a;
  border-color: #b9dc6e2e;
}

.alsOrganizationIdentity small {
  color: #f7fbf86e;
}

.alsOrganizationIdentity strong {
  color: #fff;
}

.alsSidebarNav {
  scrollbar-color: #ffffff1f transparent;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding-right: 3px;
  display: grid;
  overflow-y: auto;
}

.alsSidebarNav > div {
  gap: 3px;
  display: grid;
}

.alsSidebarNav > div > span {
  color: #f7fbf85c;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 0 10px 6px;
  font-size: 8px;
  font-weight: 800;
}

.alsSidebarNav .mtUiLink {
  color: #f7fbf89e;
  border-radius: 10px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 11px;
  text-decoration: none;
  transition: color .14s, background .14s;
  display: grid;
}

.alsSidebarNav .mtUiLink > span:first-child {
  color: #b9dc6e94;
  text-align: center;
  font-size: 13px;
}

.alsSidebarNav .mtUiLink:hover {
  color: #fff;
  background: #ffffff0f;
}

.alsSidebarNav .mtUiLink[aria-current="page"] {
  color: #fff;
  box-shadow: inset 2px 0 var(--signal);
  background: #b9dc6e1f;
}

.alsSidebarNav .mtUiLink[aria-current="page"] > span:first-child {
  color: var(--signal);
}

.alsBackToPortfolio {
  color: #f7fbf873;
  border-top: 1px solid #ffffff12;
  border-radius: 0;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 10px;
  font-size: 10px;
  text-decoration: none;
  display: flex;
}

.alsSidebarFooter {
  border-top: 1px solid #ffffff12;
  gap: 5px;
  display: grid;
}

.alsSidebarFooter .alsBackToPortfolio {
  border-top: 0;
}

.alsSidebarFooter .alsSessionButton {
  color: #f7fbf88c;
  background: #ffffff0a;
  border-color: #ffffff14;
  justify-content: flex-start;
}

.alsSidebarFooter .alsDevelopmentSession {
  color: #f7fbf866;
  border-color: #ffffff14;
  justify-self: start;
}

.alsWorkspaceShell {
  min-width: 0;
}

.alsMobileHeader {
  display: none;
}

.alsWorkspaceMain {
  width: min(1180px, calc(100% - (var(--ui-page-gutter) * 2)));
  align-content: start;
  gap: 22px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 64px) 0 100px;
  display: grid;
}

.alsWorkspaceMain:has(.alsWorkCommandCenter) {
  gap: 10px;
  width: calc(100% - 24px);
  padding-top: 12px;
  padding-bottom: 24px;
}

.alsWorkspaceMain > .mtUiPageHeader {
  margin-bottom: 2px;
}

.alsWorkspaceMain > .mtUiPageHeader h1 {
  letter-spacing: -.055em;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
}

.alsWorkspaceMain > .mtUiPageHeader p {
  max-width: 760px;
  font-size: 15px;
}

.alsActionResult {
  z-index: 8;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 14px;
}

.alsStateNotice {
  margin: 0;
}

.alsMetricStrip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
  display: grid;
}

.alsMetricStrip > div {
  border: 1px solid var(--line);
  background: #fffefabf;
  border-radius: 17px;
  align-content: space-between;
  min-height: 112px;
  padding: 17px;
  display: grid;
  box-shadow: 0 8px 30px #1a2d2608;
}

.alsMetricStrip dt {
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 760;
}

.alsMetricStrip dd {
  letter-spacing: -.045em;
  margin: 6px 0 0;
  font-size: 28px;
  font-weight: 780;
}

.alsMetricStrip small {
  color: var(--muted);
  font-size: 9px;
}

.alsMetricStrip .is-positive dd {
  color: var(--green);
}

.alsMetricStrip .is-warning dd {
  color: var(--amber);
}

.alsMetricStrip .is-danger dd {
  color: var(--red);
}

.alsSectionGroups, .alsWorkspaceGroup, .alsEntityBlocks {
  gap: 18px;
  display: grid;
}

.alsKnowledgeFilters {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.alsKnowledgeFilters label {
  color: var(--muted);
  gap: 6px;
  font-size: 12px;
  font-weight: 720;
  display: grid;
}

.alsWorkspaceGroup {
  gap: 14px;
  padding-top: 8px;
}

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

.alsWorkspaceCard {
  align-content: start;
  gap: 13px;
  height: 100%;
  min-height: 230px;
  padding: 20px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.alsWorkspaceCardLink {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.alsWorkspaceCardLink:hover .alsWorkspaceCard {
  border-color: var(--green);
}

.alsWorkspaceCard:before {
  background: linear-gradient(90deg, var(--green), transparent 65%);
  content: "";
  opacity: .5;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.alsWorkspaceCardHeader > div {
  min-width: 0;
}

.alsWorkspaceCard h3 {
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 4px 0 0;
  font-size: 18px;
  overflow: hidden;
}

.alsOwnerLine {
  align-items: center;
  gap: 9px;
  display: flex;
}

.alsOwnerLine > span:first-child {
  width: 29px;
  height: 29px;
  color: var(--green);
  background: var(--green-pale);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.alsOwnerLine > span:last-child {
  display: grid;
}

.alsOwnerLine small {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 8px;
}

.alsOwnerLine strong {
  font-size: 11px;
}

.alsProgress {
  gap: 6px;
  display: grid;
}

.alsProgress > div {
  color: var(--muted);
  justify-content: space-between;
  font-size: 9px;
  display: flex;
}

.alsProgress > span {
  background: var(--surface-soft);
  border-radius: 10px;
  height: 5px;
  display: block;
  overflow: hidden;
}

.alsProgress > span > i {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--signal));
  height: 100%;
  display: block;
}

.alsFactGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  display: grid;
}

.alsFactGrid > div {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 11px;
  min-width: 0;
  padding: 10px 12px;
}

.alsFactGrid dt {
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 740;
}

.alsFactGrid dd {
  overflow-wrap: anywhere;
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 700;
}

.alsFactGrid .is-positive dd {
  color: var(--green);
}

.alsFactGrid .is-warning dd {
  color: var(--amber);
}

.alsFactGrid .is-danger dd {
  color: var(--red);
}

.alsTagRow, .alsAvailableActions > div, .alsStateActions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.alsOpenLabel {
  justify-self: end;
  margin-top: auto;
}

.alsBreadcrumbs {
  min-width: 0;
  color: var(--muted);
  scrollbar-width: none;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  display: flex;
  overflow-x: auto;
}

.alsBreadcrumbs::-webkit-scrollbar {
  display: none;
}

.alsBreadcrumbs > span {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.alsEntityStatusLine {
  justify-content: flex-start;
  min-height: 28px;
}

.alsEntityStatusLine > span:not(.mtUiBadge) {
  color: var(--ink-2);
  font-weight: 650;
}

.alsEntityStatusLine small {
  color: var(--muted);
  margin-left: auto;
}

.alsEntityBlocks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.alsEntityBlock {
  gap: 14px;
  min-width: 0;
  padding: 22px;
  display: grid;
}

.alsEntityBlock .mtUiSectionHeader {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.alsNarrative {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.alsNarrative .mtUiLink {
  overflow-wrap: anywhere;
  display: inline;
}

.alsResultArtifacts {
  grid-column: 1 / -1;
}

.alsResultArtifactGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 14px;
  display: grid;
}

.alsResultArtifactCard {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, var(--green-pale));
  border-radius: 22px;
  min-width: 0;
  display: grid;
  overflow: hidden;
}

.alsResultArtifactPreview {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 0;
  width: 100%;
  min-height: 180px;
  max-height: 360px;
  display: block;
  overflow: hidden;
}

.alsResultArtifactPreview img {
  object-fit: contain;
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: block;
}

.alsResultArtifactCopy {
  gap: 8px;
  min-width: 0;
  padding: 16px 17px 10px;
  display: grid;
}

.alsResultArtifactCopy > div {
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  display: flex;
}

.alsResultArtifactCopy strong {
  font-size: 17px;
}

.alsResultArtifactCopy code {
  min-width: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  display: block;
  overflow: hidden;
}

.alsResultArtifactCopy small {
  color: var(--muted);
}

.alsResultArtifactActions {
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 4px 17px 17px;
  display: flex;
}

.alsResultArtifactActions .mtUiLink-button {
  flex: auto;
  justify-content: center;
}

.alsRelationList {
  display: grid;
}

.alsRelationList .mtUiDataRow {
  padding-inline: 0;
}

.alsServiceAccessBlock {
  grid-column: 1 / -1;
}

.alsServiceAccessBlock .mtUiDataRowCopy small {
  overflow-wrap: anywhere;
}

.alsTimeline {
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.alsTimeline > li {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
  padding: 0 0 22px;
  display: grid;
  position: relative;
}

.alsTimeline > li:last-child {
  padding-bottom: 0;
}

.alsTimeline > li:before {
  background: var(--line-strong);
  content: "";
  width: 1px;
  position: absolute;
  top: 11px;
  bottom: -1px;
  left: 5px;
}

.alsTimeline > li:last-child:before {
  display: none;
}

.alsTimeline > li > span {
  z-index: 1;
  border: 3px solid var(--surface);
  background: var(--green);
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 1px var(--green);
  border-radius: 50%;
  margin-top: 4px;
  position: relative;
}

.alsTimeline > li > div > div {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.alsTimeline p {
  color: var(--ink-2);
  margin: 5px 0;
  font-size: 12px;
}

.alsTimeline small {
  color: var(--muted);
  font-size: 9px;
}

.alsConversationBlock {
  grid-column: 1 / -1;
}

.alsConversation {
  gap: 16px;
  display: grid;
}

.alsMessage {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  display: grid;
}

.alsMessageAvatar {
  width: 36px;
  height: 36px;
  color: var(--green-deep);
  background: var(--green-pale);
  border-radius: 50%;
  place-items: center;
  font-size: 10px;
  font-weight: 820;
  display: grid;
}

.alsMessage > div {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 5px 16px 16px;
  min-width: 0;
  padding: 12px 14px;
}

.alsMessage header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.alsMessage header small {
  color: var(--muted);
  font-size: 9px;
}

.alsMessage p {
  color: var(--ink-2);
  white-space: pre-line;
  margin: 6px 0 0;
  line-height: 1.65;
}

.alsExpertDetails {
  border: 1px solid var(--line);
  background: #f8f9f5b8;
  border-radius: 16px;
  overflow: hidden;
}

.alsExpertDetails .mtUiSummary {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 13px 17px;
  list-style: none;
  display: flex;
}

.alsExpertDetails .mtUiSummary::-webkit-details-marker {
  display: none;
}

.alsExpertDetails .mtUiSummary > span:first-child {
  display: grid;
}

.alsExpertDetails .mtUiSummary small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.alsExpertDetails[open] .mtUiSummary > span:last-child {
  transform: rotate(180deg);
}

.alsExpertDetails > dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 17px 17px;
  display: grid;
}

.alsExpertDetails > dl > div {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  min-width: 0;
  padding: 10px;
}

.alsExpertDetails dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 8px;
}

.alsExpertDetails dd {
  overflow-wrap: anywhere;
  margin: 3px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.alsHeadSourceIdentity {
  border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line));
  background: radial-gradient(circle at 100% 0, #b9dc6e21, transparent 24rem),
    var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 22px;
  gap: 20px;
  padding: 22px;
  display: grid;
}

.alsHeadSourceSpine {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}

.alsHeadSourceSpine > span {
  color: var(--faint);
  flex: none;
}

.alsReferencePill {
  border: 1px solid var(--line);
  min-width: 140px;
  color: var(--ink);
  background: #ffffffbd;
  border-radius: 13px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
  text-decoration: none;
  display: inline-grid;
}

.alsReferencePill > span:first-child {
  color: var(--green);
  letter-spacing: .08em;
  text-transform: uppercase;
  grid-column: 1 / -1;
  font-size: 8px;
  font-weight: 800;
}

.alsReferencePill > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.alsReferencePill .mtUiBadge {
  margin-left: 6px;
}

.alsGoalSpine, .alsContextRow {
  gap: 9px;
  display: grid;
}

.alsGoalSpine > div, .alsContextRow > div {
  align-items: center;
  gap: 8px;
  display: flex;
  overflow-x: auto;
}

.alsGoalSpine > div > span {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.alsGoalSpine i {
  color: var(--faint);
  font-style: normal;
}

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

.alsHeadSourceGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alsDecisionCard, .alsHeadSourceList {
  align-content: start;
  gap: 11px;
  min-width: 0;
  padding: 20px;
  display: grid;
}

.alsDecisionCard.is-sufficient, .alsDecisionCard.is-ready {
  border-color: color-mix(in srgb, var(--green) 22%, var(--line));
  background: linear-gradient(145deg, var(--surface), var(--green-pale));
}

.alsDecisionCard.is-blocked, .alsDecisionCard.is-insufficient {
  border-color: color-mix(in srgb, var(--red) 24%, var(--line));
  background: linear-gradient(145deg, var(--surface), var(--red-pale));
}

.alsDecisionCard h3 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: 22px;
}

.alsDecisionCard ul {
  color: var(--muted);
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  display: grid;
}

.alsAssessmentFacts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  display: grid;
}

.alsAssessmentFacts > div {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 48%, var(--surface));
  border-radius: 10px;
  gap: 2px;
  padding: 9px 10px;
  display: grid;
}

.alsAssessmentFacts dt {
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 800;
}

.alsAssessmentFacts dd {
  color: var(--ink);
  margin: 0;
  font-size: 11px;
  font-weight: 750;
}

.alsAssessmentSignals {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 48%, var(--surface));
  border-radius: 11px;
  gap: 5px;
  padding: 10px 11px;
  display: grid;
}

.alsAssessmentSignals.is-warning {
  border-color: color-mix(in srgb, var(--amber) 27%, var(--line));
  background: color-mix(in srgb, var(--amber-pale) 54%, var(--surface));
}

.alsAssessmentSignals.is-danger {
  border-color: color-mix(in srgb, var(--red) 27%, var(--line));
  background: color-mix(in srgb, var(--red-pale) 54%, var(--surface));
}

.alsAssessmentSignals > strong {
  font-size: 10px;
}

.alsAssessmentEvidence {
  gap: 8px;
  display: grid;
}

.alsAssessmentEvidence > div {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  display: flex;
}

.alsHeadSourceList .mtUiSectionHeader {
  border-bottom: 1px solid var(--line);
  padding-bottom: 11px;
}

.alsHeadSourceList > ul {
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.alsHeadSourceList > ul > li {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  display: grid;
}

.alsHeadSourceList > ul > li > span {
  width: 22px;
  height: 22px;
  color: var(--green);
  background: var(--green-pale);
  border-radius: 50%;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.alsHeadSourceList li > div > div {
  justify-content: space-between;
  align-items: start;
  gap: 7px;
  display: flex;
}

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

.alsHeadSourceList p {
  margin-top: 4px;
  font-size: 11px;
}

.alsHeadSourceList small {
  color: var(--muted);
  margin-top: 5px;
  font-size: 8px;
  display: block;
}

.alsBriefingLine {
  gap: 14px;
  display: grid;
}

.alsBriefingHeader {
  justify-content: space-between;
  align-items: start;
  gap: 22px;
  padding: 4px 2px;
  display: flex;
}

.alsBriefingHeader > div {
  max-width: 760px;
}

.alsBriefingHeader h2 {
  letter-spacing: -.04em;
  margin: 5px 0 7px;
  font-size: clamp(24px, 3vw, 34px);
}

.alsBriefingHeader p {
  max-width: 680px;
  color: var(--muted);
  font-size: 12px;
}

.alsBriefingHeader > .mtUiBadge {
  flex: none;
  margin-top: 4px;
}

.alsBriefingRoot {
  border-color: color-mix(in srgb, var(--green) 27%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), var(--green-pale));
  gap: 19px;
  padding: 24px;
  display: grid;
}

.alsBriefingRootHeader {
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  display: flex;
}

.alsBriefingRootHeader h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.alsBriefingRootHeader > span {
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line));
  color: var(--green-dark);
  background: color-mix(in srgb, var(--green-pale) 70%, var(--surface));
  border-radius: 999px;
  flex: none;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
}

.alsBriefingRootText {
  border-left: 3px solid var(--green);
  color: var(--ink);
  white-space: pre-wrap;
  margin: 0;
  padding-left: 17px;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.65;
}

.alsBriefingOutcome {
  border-top: 1px solid color-mix(in srgb, var(--green) 15%, var(--line));
  gap: 10px;
  padding-top: 16px;
  display: grid;
}

.alsBriefingOutcome dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  display: grid;
}

.alsBriefingOutcome dl > div {
  border: 1px solid color-mix(in srgb, var(--green) 10%, var(--line));
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-radius: 11px;
  gap: 3px;
  padding: 11px 12px;
  display: grid;
}

.alsBriefingOutcome dt {
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.alsBriefingOutcome dd {
  color: var(--ink-2);
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

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

.alsBriefingBranch {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  border-radius: 20px;
  align-content: start;
  gap: 14px;
  padding: 20px;
  display: grid;
}

.alsBriefingBranch > header {
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  display: flex;
}

.alsBriefingBranch h3 {
  letter-spacing: -.025em;
  margin: 4px 0 0;
  font-size: 19px;
}

.alsBriefingBranch ol {
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.alsBriefingBranch article {
  border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line));
  background: color-mix(in srgb, var(--paper) 52%, var(--surface));
  border-radius: 13px;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  display: grid;
}

.alsBriefingOrdinal {
  width: 25px;
  height: 25px;
  color: var(--green-dark);
  background: var(--green-pale);
  border-radius: 50%;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.alsBriefingBranch article p {
  color: var(--ink);
  white-space: pre-wrap;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.alsBriefingBranch article small {
  color: var(--muted);
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.5;
  display: block;
}

.alsBriefingBranch article footer {
  border-top: 1px solid var(--line);
  color: var(--faint);
  gap: 5px;
  margin-top: 11px;
  padding-top: 9px;
  font-size: 8px;
  display: grid;
}

.alsBriefingAttribution {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  display: flex;
}

.alsBriefingBranch article footer .mtUiLink, .alsBriefingAttribution .mtUiLink {
  color: var(--green-dark);
  font-weight: 750;
}

.alsBriefingEmpty {
  border: 1px dashed var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 44%, var(--surface));
  border-radius: 13px;
  margin: 0;
  padding: 15px;
  font-size: 11px;
  line-height: 1.55;
}

.alsReworkBriefings {
  gap: 14px;
  display: grid;
}

.alsReheader {
  justify-content: space-between;
  align-items: start;
  gap: 22px;
  padding: 4px 2px;
  display: flex;
}

.alsReheader > div {
  max-width: 760px;
}

.alsReheader h2 {
  letter-spacing: -.04em;
  margin: 5px 0 7px;
  font-size: clamp(23px, 3vw, 32px);
}

.alsReheader p {
  max-width: 690px;
  color: var(--muted);
  font-size: 12px;
}

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

.alsReworkCard {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--line));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 94%, transparent),
    color-mix(in srgb, var(--amber-pale) 48%, var(--surface)));
  gap: 16px;
  min-width: 0;
  padding: 20px;
  display: grid;
}

.alsReworkCard > header {
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  display: flex;
}

.alsReworkCard h3 {
  overflow-wrap: anywhere;
  margin: 4px 0 0;
  font-size: 18px;
}

.alsReworkExpectedState {
  border-left: 3px solid var(--amber);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-radius: 0 12px 12px 0;
  padding: 14px 15px;
}

.alsReworkExpectedState p {
  color: var(--ink);
  white-space: pre-wrap;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.65;
}

.alsReworkCard dl {
  gap: 8px;
  margin: 0;
  display: grid;
}

.alsReworkCard dl > div {
  grid-template-columns: minmax(80px, .32fr) minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.alsReworkCard dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.alsReworkCard dd {
  color: var(--ink-2);
  margin: 0;
  font-size: 10px;
}

.alsReworkCard > footer {
  border-top: 1px solid var(--line);
  color: var(--faint);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 11px;
  font-size: 8px;
  display: flex;
}

.alsRoleContract {
  gap: 14px;
  display: grid;
}

.alsRoleContractHeader {
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  padding: 4px 2px;
  display: flex;
}

.alsRoleContractHeader h2 {
  letter-spacing: -.04em;
  margin: 5px 0 6px;
  font-size: clamp(23px, 3vw, 32px);
}

.alsRoleContractHeader p {
  max-width: 680px;
  color: var(--muted);
  font-size: 12px;
}

.alsRoleResponsibility {
  border-color: color-mix(in srgb, var(--green) 20%, var(--line));
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--green-pale) 45%, var(--surface)));
  gap: 15px;
  padding: 22px;
  display: grid;
}

.alsRoleResponsibility > p {
  max-width: 920px;
  color: var(--ink);
  white-space: pre-wrap;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

.alsRoleResponsibility > div {
  border-top: 1px solid color-mix(in srgb, var(--green) 14%, var(--line));
  gap: 8px;
  padding-top: 13px;
  display: grid;
}

.alsRoleResponsibility ol {
  color: var(--ink-2);
  gap: 5px;
  margin: 0;
  padding-left: 19px;
  font-size: 11px;
  display: grid;
}

.alsRoleEffects {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 18px;
  gap: 12px;
  padding: 18px 20px;
  display: grid;
}

.alsRoleEffects > header, .alsRoleEffects article {
  align-items: center;
  gap: 9px;
  display: flex;
}

.alsRoleEffects > header {
  justify-content: space-between;
}

.alsRoleEffects > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.alsRoleEffects article {
  border: 1px solid color-mix(in srgb, var(--green) 13%, var(--line));
  background: color-mix(in srgb, var(--green-pale) 35%, var(--surface));
  border-radius: 11px;
  align-items: start;
  padding: 10px 11px;
}

.alsRoleEffects article > span {
  color: var(--green);
  font-weight: 900;
}

.alsRoleEffects article div {
  gap: 2px;
  display: grid;
}

.alsRoleEffects article strong {
  font-size: 11px;
}

.alsRoleEffects article small {
  color: var(--muted);
  font-size: 8px;
}

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

.alsRoleContractList {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  border-radius: 15px;
  align-content: start;
  gap: 9px;
  padding: 16px;
  display: grid;
}

.alsRoleContractList > header {
  justify-content: space-between;
  align-items: start;
  gap: 8px;
  display: flex;
}

.alsRoleContractList h3 {
  margin: 0;
  font-size: 13px;
}

.alsRoleContractList ul {
  color: var(--ink-2);
  gap: 6px;
  margin: 0;
  padding-left: 17px;
  font-size: 10px;
  line-height: 1.5;
  display: grid;
}

.alsRoleContractList > p {
  color: var(--muted);
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.alsRunStatus {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-radius: 16px;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
}

.alsRunStatus > span:not(.mtUiBadge) {
  min-width: 0;
  color: var(--ink-2);
  font-size: 12px;
}

.alsRunStatus > small {
  color: var(--green);
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.alsRunStatus > small > i {
  background: var(--green);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent);
  border-radius: 50%;
  animation: 1.8s ease-in-out infinite alsRunLivePulse;
}

@keyframes alsRunLivePulse {
  50% {
    opacity: .45;
  }
}

.alsRunIdentity {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 9px;
  display: grid;
}

.alsRunIdentity > .mtUiLink-quiet:not(.mtUiLink-button) {
  border: 1px solid var(--line);
  background: #fffefab8;
  border-radius: 14px;
  gap: 2px;
  min-width: 0;
  padding: 13px 15px;
  text-decoration: none;
  display: grid;
}

.alsRunIdentity > .mtUiLink-quiet:not(.mtUiLink-button):hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.alsRunIdentity small {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 760;
}

.alsRunIdentity strong {
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.alsRunIdentity > .mtUiLink-button {
  align-self: stretch;
}

.alsRunControl {
  gap: 15px;
  padding: 20px;
  display: grid;
}

.alsRunControl .mtUiSectionHeader {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.alsRunControlActions, .alsRunControlActions > span, .alsRunControlForm > div:last-child {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.alsRunControlActions > span {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.alsRunControlActions > span > small, .alsRunControlDone {
  color: var(--muted);
  font-size: 9px;
}

.alsRunControlActions > .mtUiButton:last-child {
  margin-left: auto;
}

.alsRunControlForm {
  border-top: 1px solid var(--line);
  gap: 12px;
  padding-top: 14px;
  display: grid;
}

.alsRunControlForm .mtUiTextarea {
  min-height: 92px;
}

.alsRunFeed {
  border: 1px solid var(--line);
  background: #fffefac7;
  border-radius: 20px;
  gap: 17px;
  min-width: 0;
  padding: 22px;
  display: grid;
  box-shadow: 0 12px 38px #1a2d2609;
}

.alsRunFeed > .mtUiSectionHeader {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.alsRunFeed > ol {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.alsRunFeed > ol > li {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 15px;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
  padding: 14px;
  display: grid;
}

.alsRunFeed > ol > li.is-reasoning_summary, .alsRunFeed > ol > li.is-plan, .alsRunFeed > ol > li.is-progress {
  border-color: color-mix(in srgb, var(--green) 18%, var(--line));
  background: color-mix(in srgb, var(--green-pale) 52%, var(--surface));
}

.alsRunFeed > ol > li.is-failure, .alsRunFeed > ol > li.is-blocker {
  border-color: color-mix(in srgb, var(--red) 22%, var(--line));
  background: color-mix(in srgb, var(--red-pale) 58%, var(--surface));
}

.alsRunFeed > ol > li > span {
  width: 32px;
  height: 32px;
  color: var(--green-deep);
  background: var(--green-pale);
  border-radius: 10px;
  place-items: center;
  font-weight: 820;
  display: grid;
}

.alsRunFeed > ol > li.is-failure > span, .alsRunFeed > ol > li.is-blocker > span {
  color: var(--red);
  background: var(--red-pale);
}

.alsRunFeed article {
  gap: 7px;
  min-width: 0;
  display: grid;
}

.alsRunFeed article > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.alsRunFeed article > header > div {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.alsRunFeed article > header small {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 760;
}

.alsRunFeed article > header strong {
  letter-spacing: -.015em;
  font-size: 13px;
}

.alsRunFeed article > p {
  overflow-wrap: anywhere;
  max-width: 90ch;
  color: var(--ink-2);
  white-space: pre-wrap;
  margin: 0;
  font-size: 12px;
}

.alsRunFeed article > footer {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  font-size: 8px;
  display: flex;
}

.alsRunFeed article > footer .mtUiLink {
  font-size: inherit;
  font-weight: 760;
}

.alsRunExpertDetails {
  margin-top: 2px;
}

.alsAvailableActions {
  border: 1px solid var(--line);
  background: #fffefac2;
  border-radius: 20px;
  gap: 14px;
  margin-top: 12px;
  padding: 20px;
  display: grid;
}

.alsAvailableActions .mtUiSectionHeader {
  align-items: center;
}

.alsActionChoice {
  gap: 4px;
  display: inline-grid;
}

.alsActionChoice > small {
  max-width: 240px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.alsActionComposer {
  gap: 17px;
  display: grid;
}

.alsDependencyComposer {
  border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line));
  background: color-mix(in srgb, var(--green-pale) 32%, var(--surface));
  border-radius: 14px;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.alsActionComposerFooter {
  padding: 15px 24px calc(15px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin: 4px -24px -24px;
  display: flex;
  position: sticky;
  bottom: -24px;
}

@media (max-width: 1240px) {
  .alsPortfolioGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alsPortfolioHero {
    grid-template-columns: minmax(0, 1fr) minmax(350px, .7fr);
  }

  .alsHeadSourceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .alsLoginPanel {
    justify-self: center;
    width: min(100%, 720px);
  }

  .alsRunIdentity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alsLoginContext {
    display: none;
  }

  .alsApplicationShell {
    display: block;
  }

  .alsSidebar {
    display: none;
  }

  .alsMobileHeader {
    z-index: 20;
    min-height: 66px;
    padding: 10px var(--ui-page-gutter);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    display: flex;
    position: sticky;
    top: 0;
  }

  .alsMobileHeader .alsBrand > span {
    width: 34px;
    height: 34px;
  }

  .alsMobileHeader .mtUiSelect {
    width: min(48vw, 280px);
    min-height: 40px;
  }

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

  .alsPortfolioSummary {
    max-width: 660px;
  }

  .alsMetricStrip, .alsHeadSourceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .alsLoginPanel {
    align-content: center;
    gap: 22px;
    padding: 86px 24px 34px;
  }

  .alsLoginPanel > .alsBrand {
    top: 20px;
  }

  .alsLoginCopy h1 {
    font-size: clamp(40px, 13vw, 54px);
  }

  .alsPortfolioPage {
    width: min(100% - 28px, 1480px);
    padding-bottom: 48px;
  }

  .alsPortfolioTopbar {
    min-height: 68px;
  }

  .alsPrincipal > div, .alsPortfolioTopbar .alsBrand > strong {
    display: none;
  }

  .alsPortfolioHero {
    border-radius: 25px;
    gap: 28px;
    min-height: 0;
    padding: 34px 22px 24px;
  }

  .alsPortfolioHero .mtUiPageHeader h1 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .alsPortfolioSummary > div {
    min-height: 76px;
    padding: 13px;
  }

  .alsPortfolioSummary dd {
    font-size: 23px;
  }

  .alsPortfolioGrid, .alsWorkspaceGrid, .alsEntityBlocks, .alsDecisionGrid, .alsHeadSourceGrid, .alsBriefingBranches, .alsReworkGrid, .alsRoleContractGrid, .alsRoleEffects > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .alsPortfolioCard {
    min-height: 330px;
  }

  .alsDirectoryHeading {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }

  .alsWorkspaceMain {
    gap: 17px;
    width: min(100% - 28px, 1180px);
    padding-top: 30px;
    padding-bottom: 84px;
  }

  .alsWorkspaceMain:has(.alsWorkCommandCenter) {
    width: calc(100% - 16px);
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .alsWorkspaceMain > .mtUiPageHeader h1 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .alsEntityBlocks, .alsWorkspaceGrid {
    gap: 11px;
  }

  .alsEntityBlock, .alsWorkspaceCard, .alsHeadSourceIdentity, .alsDecisionCard, .alsHeadSourceList, .alsBriefingRoot, .alsBriefingBranch, .alsReworkCard {
    padding: 17px;
  }

  .alsBriefingHeader, .alsReheader, .alsRoleContractHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

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

  .alsResultArtifactPreview, .alsResultArtifactPreview img {
    min-height: 160px;
  }

  .alsResultArtifactActions {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .alsConversationBlock {
    grid-column: auto;
  }

  .alsAvailableActions > div, .alsStateActions {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .alsAvailableActions > div > *, .alsStateActions > *, .alsActionChoice > .mtUiButton {
    width: 100%;
  }

  .alsActionComposerFooter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .alsRunStatus {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .alsRunStatus > span:not(.mtUiBadge) {
    width: calc(100% - 100px);
  }

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

  .alsRunIdentity > .mtUiLink-button {
    width: 100%;
  }

  .alsRunControl, .alsRunFeed {
    padding: 17px;
  }

  .alsRunControlActions {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .alsRunControlActions > *, .alsRunControlActions > span > .mtUiButton, .alsRunControlActions > .mtUiButton:last-child {
    width: 100%;
    margin-left: 0;
  }

  .alsRunControlForm > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
}

@media (max-width: 430px) {
  .alsMobileHeader {
    padding-inline: 14px;
  }

  .alsMobileHeader .alsBrand > strong {
    display: none;
  }

  .alsMobileHeader .mtUiSelect {
    width: calc(100vw - 124px);
  }

  .alsMetricStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .alsMetricStrip > div {
    min-height: 96px;
    padding: 13px;
  }

  .alsMetricStrip dd {
    font-size: 23px;
  }

  .alsPortfolioCardFooter {
    flex-direction: column;
    align-items: start;
  }

  .alsFactGrid, .alsExpertDetails > dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .alsEntityStatusLine {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .alsEntityStatusLine small {
    width: 100%;
    margin-left: 0;
  }

  .alsRunStatus > span:not(.mtUiBadge) {
    width: 100%;
  }

  .alsRunStatus > small {
    margin-left: 0;
  }

  .alsRunFeed > ol > li {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  .alsRunFeed > ol > li > span {
    border-radius: 8px;
    width: 27px;
    height: 27px;
  }

  .alsRunFeed article > header {
    flex-direction: column;
    align-items: flex-start;
  }

  .alsHeadSourceSpine {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }

  .alsHeadSourceSpine > span {
    align-self: center;
    transform: rotate(90deg);
  }

  .alsReferencePill {
    width: 100%;
  }

  .alsBriefingRootHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .alsBriefingOutcome dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .alsMessage {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
  }

  .alsMessageAvatar {
    width: 28px;
    height: 28px;
  }

  .alsMessage header {
    flex-direction: column;
    align-items: start;
    gap: 2px;
  }
}

.alsDecisionInbox, .alsStructureView {
  gap: 22px;
  display: grid;
}

.alsPortfolioSection, .alsStructureTree {
  gap: 14px;
  display: grid;
}

.alsAttentionGrid, .alsAbilityGrid, .alsLearningColumns, .alsPortfolioTwin, .alsServiceEndpointGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.alsLearningColumns {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.alsAttentionCard, .alsAbilityCard, .alsDecisionRequest, .alsServiceControl, .alsVoiceControl {
  gap: 14px;
}

.alsCardTopline, .alsPositionCard > header, .alsTreeNode > header, .alsTreeRoot > header, .alsWorkNode > header, .alsServiceEndpoint > header, .alsEnvironmentRuntime {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.alsCardTopline small {
  color: var(--muted);
  font-size: 9px;
}

.alsAttentionCard h3, .alsAbilityCard h3, .alsPositionCard h4, .alsTreeNode h3, .alsTreeRoot h2, .alsWorkNode h4, .alsServiceEndpoint h3, .alsEnvironmentRuntime h3 {
  color: var(--ink);
  letter-spacing: -.025em;
  margin: 0;
}

.alsAttentionCard p, .alsAbilityCard p, .alsTreeNode p, .alsTreeRoot p, .alsWorkNode p, .alsServiceEndpoint p, .alsEnvironmentRuntime p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.alsAttentionCard .mtUiLink {
  justify-self: start;
  margin-top: auto;
}

.alsAbilityCard dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  display: grid;
}

.alsAbilityCard dl > div {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 9px;
}

.alsAbilityCard dt, .alsAbilityCard dd {
  margin: 0;
}

.alsAbilityCard dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 8px;
}

.alsAbilityCard dd {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 750;
}

.alsRelationList, .alsCharacterSummary, .alsDecisionStack, .alsRequestedInputs, .alsDecisionRequestComposer, .alsLearningColumns > .mtUiCard, .alsServiceControl, .alsVoiceControl {
  gap: 12px;
  display: grid;
}

.alsMembershipStrip {
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  display: flex;
}

.alsConversationDirectory {
  gap: 8px;
  display: grid;
}

.alsConversationDirectoryItem {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 11px 13px;
  text-decoration: none;
  display: flex;
}

.alsConversationDirectoryItem:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.alsConversationDirectoryItem > span {
  align-items: center;
  gap: 9px;
  display: flex;
}

.alsConversationDirectoryItem small {
  color: var(--muted);
  font-size: 9px;
}

.alsCompactRecord, .alsLearningRecord {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.alsCompactRecord:last-child, .alsLearningRecord:last-child {
  border-bottom: 0;
}

.alsCompactRecord p, .alsLearningRecord p, .alsCharacterSummary p {
  color: var(--muted);
  margin: 3px 0 0;
  font-size: 10px;
}

.alsCompactRecord > span, .alsLearningRecord small, .alsCharacterSummary small {
  color: var(--muted);
  font-size: 9px;
}

.alsDecisionRequest {
  padding: clamp(18px, 3vw, 26px);
}

.alsDecisionRequest > header h2 {
  letter-spacing: -.04em;
  margin: 4px 0 0;
  font-size: clamp(20px, 3vw, 28px);
}

.alsDecisionRequest > header p {
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.55;
}

.alsDecisionOptions {
  border: 0;
  gap: 8px;
  margin: 0;
  padding: 0;
  display: grid;
}

.alsDecisionOptions legend {
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 780;
}

.alsDecisionOptions > label {
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  border-radius: 13px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 13px;
  display: grid;
}

.alsDecisionOptions > label.is-selected {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  background: var(--green-pale);
}

.alsDecisionOptions label span, .alsDecisionOptions label small, .alsDecisionOptions label em {
  display: block;
}

.alsDecisionOptions label small, .alsDecisionOptions label em {
  color: var(--muted);
  margin-top: 4px;
  font-size: 9px;
  font-style: normal;
}

.alsRequestedInputs select {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-height: 42px;
  color: var(--ink);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px 11px;
}

.alsDecisionConsequences {
  background: var(--surface-2);
  border-radius: 13px;
  padding: 13px 15px;
  font-size: 11px;
}

.alsDecisionConsequences ul {
  margin: 7px 0 0;
  padding-left: 18px;
}

.alsDecisionActions, .alsServiceActions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.alsCollaborationBoard, .alsCollaborationLanes, .alsCollaborationLanes > .mtUiCard {
  gap: 10px;
  display: grid;
}

.alsCollaborationBoard {
  border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line));
  background: color-mix(in srgb, var(--green-pale) 50%, var(--surface));
  border-radius: 17px;
  padding: 14px;
}

.alsCollaborationLanes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alsCollaborationLanes > .mtUiCard {
  align-content: start;
}

.alsCollaborationLanes > .mtUiCard > header, .alsCollaborationRecord {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.alsCollaborationRecord {
  border-top: 1px solid var(--line);
  min-width: 0;
  color: inherit;
  padding: 10px 0;
  text-decoration: none;
}

.alsCollaborationRecord > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.alsCollaborationRecord strong, .alsCollaborationRecord small {
  text-overflow: ellipsis;
  overflow: hidden;
}

.alsCollaborationRecord small, .alsCollaborationLanes p {
  color: var(--muted);
  margin: 0;
  font-size: 9px;
}

.alsTreeRoot, .alsTreeNode {
  gap: 13px;
}

.alsTreeRoot {
  border-color: color-mix(in srgb, var(--green) 23%, var(--line));
  background: linear-gradient(145deg, var(--surface), var(--green-pale));
}

.alsTreeBranches, .alsWorkBranches, .alsHeadList, .alsReleaseList {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.alsTreeBranches {
  padding-left: 28px;
}

.alsTreeBranches > li, .alsWorkBranches > li {
  position: relative;
}

.alsFlowDisclosure {
  gap: 8px;
  display: grid;
}

.alsFlowDisclosure > summary {
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 48px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  list-style: none;
  display: flex;
}

.alsFlowDisclosure > summary::-webkit-details-marker {
  display: none;
}

.alsFlowDisclosure > summary:after {
  color: var(--muted);
  content: "⌄";
  order: 3;
  font-size: 14px;
  transition: transform .16s;
}

.alsFlowDisclosure:not([open]) > summary:after {
  transform: rotate(-90deg);
}

.alsFlowDisclosure > summary > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.alsFlowDisclosure > summary small {
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 740;
}

.alsFlowDisclosure > summary strong {
  color: var(--ink);
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.alsFlowDisclosure[open] > summary {
  border-color: color-mix(in srgb, var(--green) 26%, var(--line));
  background: color-mix(in srgb, var(--green-pale) 34%, var(--surface));
}

.alsFlowDisclosure > .alsTreeNode, .alsFlowDisclosure > .alsWorkNode, .alsFlowDisclosure > .alsTreeBranches, .alsFlowDisclosure > .alsWorkBranches {
  margin-top: 8px;
}

.alsTreeBranches > li:before {
  border-bottom: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  content: "";
  border-radius: 0 0 0 10px;
  width: 14px;
  height: 32px;
  position: absolute;
  top: -10px;
  left: -17px;
}

.alsWorkNode, .alsServiceEndpoint {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-radius: 13px;
  gap: 9px;
  padding: 13px;
  display: grid;
}

.alsWorkNode h4 {
  font-size: 13px;
}

.alsHeadList li, .alsReleaseList li, .alsWorkNode footer {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  display: flex;
}

.alsVacancy {
  color: var(--red);
  font-size: 9px;
  font-weight: 720;
}

.alsWorkBranches {
  margin-top: 10px;
  padding-left: 20px;
}

.alsWorkNode footer {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.alsDependencySummary {
  gap: 6px;
  display: grid;
}

.alsDependencySummary > article {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 10px;
  gap: 6px;
  padding: 8px 9px;
  display: grid;
}

.alsDependencySummary > article > header, .alsDependencySummary > article > div {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  display: flex;
}

.alsDependencySummary > article > header {
  color: var(--muted);
  font-size: 9px;
}

.alsDependencySummary > article > div {
  font-size: 9px;
}

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

.alsVoiceEvidence {
  border-top: 1px solid var(--line);
  gap: 13px;
  padding-top: 18px;
  display: grid;
}

.alsVoiceSessionPicker {
  max-width: 440px;
}

.alsVoiceEvidenceBody {
  gap: 12px;
  display: grid;
}

.alsVoiceEvidenceHero, .alsVoiceEvidenceHero > div, .alsVoiceCanonicalTranscript, .alsVoiceEvidenceDetails, .alsVoiceReceiptList {
  display: grid;
}

.alsVoiceEvidenceHero {
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  background: linear-gradient(135deg, var(--surface), var(--green-pale));
  border-radius: 15px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 15px 16px;
}

.alsVoiceEvidenceHero > div {
  gap: 3px;
}

.alsVoiceEvidenceHero span, .alsVoiceOutcomeGrid span, .alsVoiceUsageGrid span {
  color: var(--muted);
  letter-spacing: .055em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 730;
}

.alsVoiceEvidenceHero strong {
  letter-spacing: -.02em;
  font-size: 15px;
}

.alsVoiceEvidenceHero small, .alsVoiceOutcomeGrid small {
  color: var(--muted);
  font-size: 9px;
}

.alsVoiceOutcomeGrid, .alsVoiceUsageGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.alsVoiceOutcomeGrid > div, .alsVoiceUsageGrid > div {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 12px;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  display: grid;
}

.alsVoiceOutcomeGrid strong, .alsVoiceUsageGrid strong {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.alsVoiceCanonicalTranscript {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  gap: 9px;
  padding: 14px;
}

.alsVoiceCanonicalTranscript h4 {
  margin: 0 0 2px;
  font-size: 12px;
}

.alsVoiceCanonicalTranscript article {
  background: var(--surface-2);
  border-radius: 12px 12px 12px 4px;
  gap: 4px;
  max-width: min(88%, 680px);
  padding: 10px 12px;
  display: grid;
}

.alsVoiceCanonicalTranscript article[data-speaker="principal"] {
  background: var(--green-pale);
  border-radius: 12px 12px 4px;
  justify-self: end;
}

.alsVoiceCanonicalTranscript article span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 760;
}

.alsVoiceCanonicalTranscript article p, .alsVoiceCanonicalTranscript article small, .alsVoiceEvidenceEmpty {
  margin: 0;
}

.alsVoiceCanonicalTranscript article p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.5;
}

.alsVoiceCanonicalTranscript article small, .alsVoiceEvidenceEmpty {
  color: var(--muted);
  font-size: 8px;
}

.alsVoiceEvidenceDetails {
  gap: 10px;
}

.alsVoiceEvidenceDetails > :not(summary) {
  margin-top: 10px;
}

.alsVoiceExpertEvidence dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 0;
  display: grid;
}

.alsVoiceExpertEvidence dl > div {
  background: var(--surface-2);
  border-radius: 10px;
  min-width: 0;
  padding: 9px;
}

.alsVoiceExpertEvidence dt, .alsVoiceExpertEvidence dd {
  margin: 0;
}

.alsVoiceExpertEvidence dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 8px;
}

.alsVoiceExpertEvidence dd {
  overflow-wrap: anywhere;
  font-family: var(--font-mono, monospace);
  margin-top: 3px;
  font-size: 8px;
}

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

.alsFanoutComposer, .alsFanoutArm {
  gap: 12px;
  display: grid;
}

.alsFanoutArm {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 14px;
  min-width: 0;
  margin: 0;
  padding: 14px;
}

.alsFanoutArm > legend {
  color: var(--ink);
  letter-spacing: .045em;
  text-transform: uppercase;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 780;
}

.alsFanoutArmControls {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: end;
  gap: 10px;
  display: grid;
}

.alsServiceAccessGroup {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 13px;
  gap: 10px;
  margin: 0;
  padding: 14px;
  display: grid;
}

.alsServiceAccessGroup legend {
  color: var(--ink);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 780;
}

.alsServiceAccessGroup > p {
  color: var(--muted);
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.alsServiceAccessChoices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 260px;
  display: grid;
  overflow: auto;
}

.alsServiceAccessChoices label {
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  border-radius: 11px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  display: grid;
}

.alsServiceAccessChoices label:has(input:checked) {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  background: var(--green-pale);
}

.alsServiceAccessChoices span, .alsServiceAccessChoices strong, .alsServiceAccessChoices small {
  min-width: 0;
  display: block;
}

.alsServiceAccessChoices strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.alsServiceAccessChoices small {
  color: var(--muted);
  margin-top: 2px;
  font-size: 8px;
}

.alsServiceEndpointDetails {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  display: flex;
}

.alsServiceEndpointDetails span {
  border: 1px solid var(--line);
  max-width: 100%;
  color: var(--muted);
  background: var(--surface-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 8px;
  overflow: hidden;
}

.alsEnvironmentRuntime {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 15px;
}

.alsServiceCreateForm, .alsServiceReleaseForm {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
  border-radius: 14px;
  gap: 12px;
  padding: 15px;
  display: grid;
}

.alsServiceReleaseForm {
  border-color: color-mix(in srgb, var(--green) 22%, var(--line));
  margin-top: 4px;
}

.alsServiceRuntimeHint {
  max-width: 280px;
  color: var(--muted);
  text-align: right;
  font-size: 10px;
  line-height: 1.45;
}

.alsServiceEndpointGrid {
  align-items: start;
}

.alsServiceEndpoint h3, .alsEnvironmentRuntime h3 {
  margin-top: 3px;
  font-size: 17px;
}

.alsReleaseList {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .alsAttentionGrid, .alsAbilityGrid, .alsLearningColumns, .alsPortfolioTwin, .alsCollaborationLanes, .alsServiceEndpointGrid, .alsVoiceConfiguration, .alsVoiceOutcomeGrid, .alsVoiceUsageGrid, .alsServiceAccessChoices, .alsHandoffHeads, .alsFanoutArmControls, .alsVoiceEvidenceHero {
    grid-template-columns: minmax(0, 1fr);
  }

  .alsVoiceCanonicalTranscript article {
    max-width: 96%;
  }

  .alsTreeBranches {
    padding-left: 18px;
  }

  .alsDecisionActions, .alsServiceActions, .alsEnvironmentRuntime, .alsWorkNode footer {
    flex-direction: column;
    align-items: stretch;
  }

  .alsServiceRuntimeHint {
    text-align: left;
    max-width: none;
  }

  .alsConversationDirectoryItem {
    flex-direction: column;
    align-items: flex-start;
  }

  .alsDecisionActions > *, .alsServiceActions > * {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .alsAbilityCard dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .alsDecisionOptions > label {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .alsDecisionOptions > label > .mtUiBadge {
    grid-column: 2;
  }

  .alsVoiceExpertEvidence dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .alsRunStatus > small > i {
    animation: none;
  }
}

/*# sourceMappingURL=apps_web_app_10tbh8s._.css.map*/