/*
 * Canonical cross-product contracts for Parallax Portal and Studio.
 * Product styles remain responsible for page-specific layout and identity.
 */
:root{
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:20px;
  --ui-field-caption-height:20px;
  --ui-filter-results-gap:20px;
  --ui-section-stack-gap:30px;
  --ui-section-content-gap:24px;
  --ui-workspace-content-start-gap:16px;
  --ui-page-title-size:20px;
  --ui-page-title-line-height:24px;
  --ui-page-title-weight:600;
  --ui-section-title-size:18px;
  --ui-section-title-line-height:24px;
  --ui-section-title-weight:600;
  --ui-panel-title-size:16px;
  --ui-panel-title-line-height:22px;
  --ui-panel-title-weight:600;
  --ui-body-size:14px;
  --ui-body-line-height:20px;
  --ui-label-size:14px;
  --ui-label-line-height:20px;
  --ui-label-weight:600;
  --ui-meta-size:12px;
  --ui-meta-line-height:16px;
  --ui-section-accent-height:18px;
  --ui-card-title-font:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
  --ui-layer-content:1;
  --ui-layer-sticky:80;
  --ui-layer-header:100;
  --ui-layer-navigation:120;
  --ui-layer-backdrop:115;
  --ui-layer-menu:1200;
  --ui-layer-toast:1400;
  --ui-layer-tooltip:1600;
  --ui-layer-auth-mask:9998;
  --ui-layer-auth-progress:9999;
  --ui-layer-auth-gate:10000;
  --ui-surface-header:var(--sf);
  --ui-table-header:var(--sf2);
  --ui-scroll-shadow:rgba(0,0,0,.28);
  --ui-tone-info:var(--pr);
  --ui-tone-info-bg:var(--prd);
  --ui-tone-success:var(--su);
  --ui-tone-success-bg:var(--sud);
  --ui-tone-warning:var(--wa);
  --ui-tone-warning-bg:var(--wad);
  --ui-tone-danger:var(--da);
  --ui-tone-danger-bg:var(--dad);
  --ui-nav-active-rail:color-mix(in srgb,var(--pr) 68%,var(--bd2));
  --ui-section-accent:color-mix(in srgb,var(--pr) 68%,var(--bd2));
  --ui-link-hover-underline:var(--tx);
  --ui-message-neutral-rail:color-mix(in srgb,var(--tm) 66%,var(--bd2));
  --ui-message-info-rail:color-mix(in srgb,var(--ui-tone-info) 66%,var(--bd2));
  --ui-message-success-rail:color-mix(in srgb,var(--ui-tone-success) 66%,var(--bd2));
  --ui-message-warning-rail:color-mix(in srgb,var(--ui-tone-warning) 66%,var(--bd2));
  --ui-message-danger-rail:color-mix(in srgb,var(--ui-tone-danger) 66%,var(--bd2));
  --ui-empty-outline:var(--bd2);
  --ui-empty-content-min-height:128px;
}

[data-theme="light"]{
  --ui-scroll-shadow:rgba(20,27,34,.18);
  --ui-link-hover-underline:#000;
  --tm:#5b6875;
  --in:#086b8f;
}

html.ui-modal-open{
  overflow:hidden;
  overscroll-behavior:none;
}

html.ui-modal-open body{
  position:fixed;
  top:var(--ui-modal-scroll-y,0);
  left:var(--ui-modal-scroll-x,0);
  width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

/* One element owns each composite surface edge. */
.card,
.table-section,
.tw,
.state,
.skeleton-wrap,
dialog{
  background-clip:padding-box;
}

/* Outer work surfaces need a clear edge; nested tables remain flat and edge-owned. */
.card,
.table-section,
.tw{
  border-color:color-mix(in srgb,var(--bd2) 58%,var(--bd));
}

/* Routine facts stay typographically quiet; emphasis is opt-in for consequential states. */
.status-text{
  display:inline-flex;
  min-width:0;
  align-items:center;
  color:var(--tx);
  font:inherit;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
}

.status-text.is-emphasis{
  gap:6px;
}

.status-text.is-emphasis::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:currentColor;
}

.status-text.is-emphasis[data-tone="enabled"],
.status-text.is-emphasis[data-tone="healthy"],
.status-text.is-emphasis[data-tone="active"],
.status-text.is-emphasis[data-tone="processed"],
.status-text.is-emphasis[data-tone="completed"],
.status-text.is-emphasis[data-tone="current"]{color:var(--su)}

.status-text.is-emphasis[data-tone="warning"],
.status-text.is-emphasis[data-tone="degraded"],
.status-text.is-emphasis[data-tone="paused"],
.status-text.is-emphasis[data-tone="review"],
.status-text.is-emphasis[data-tone="restored"]{color:var(--wa)}

.status-text.is-emphasis[data-tone="unhealthy"],
.status-text.is-emphasis[data-tone="error"],
.status-text.is-emphasis[data-tone="critical"],
.status-text.is-emphasis[data-tone="disabled"],
.status-text.is-emphasis[data-tone="stopped"],
.status-text.is-emphasis[data-tone="failed"]{color:var(--da)}

.status-text.is-emphasis[data-tone="info"],
.status-text.is-emphasis[data-tone="running"],
.status-text.is-emphasis[data-tone="queued"],
.status-text.is-emphasis[data-tone="submitted"],
.status-text.is-emphasis[data-tone="processing"],
.status-text.is-emphasis[data-tone="stopping"],
.status-text.is-emphasis[data-tone="primary"]{color:var(--in)}

.status-text.is-emphasis[data-tone="idle"],
.status-text.is-emphasis[data-tone="unknown"],
.status-text.is-emphasis[data-tone="retired"],
.status-text.is-emphasis[data-tone="inactive"]{color:var(--tm)}

/* Read-only key/value records follow the Load Result Run details treatment. */
.detail-value-table{
  width:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--bd);
  border-radius:var(--r);
  background:var(--sf);
  background-clip:padding-box;
}

.detail-value-table>table{
  width:100%;
  min-width:0;
  border-collapse:separate;
  border-spacing:0;
}

.detail-value-table tbody tr:nth-child(even){
  background:var(--table-stripe);
}

.detail-value-table tbody tr:hover,
.detail-value-table tbody tr:hover>td{
  background:var(--sfh);
}

.detail-value-table td{
  border-bottom:1px solid var(--bd);
}

.detail-value-table tr:last-child td{
  border-bottom:0;
}

.card,
.table-section{
  isolation:isolate;
  overflow:hidden;
  overflow:clip;
}

.card>.ch{
  background:var(--ui-surface-header);
  background-image:none;
  border-bottom:0;
}

/* Editorial type is reserved for true content cards, not structural panel headings. */
.feature-card strong{
  font-family:var(--ui-card-title-font);
  font-weight:500;
}

.table-section>.table-section-head{
  background:var(--ui-table-header);
  background-image:none;
}

.card>.ch:first-child,
.table-section>.table-section-head:first-child{
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}

.card>.ch:last-child,
.table-section>.table-section-head:last-child{
  border-bottom-color:transparent;
  border-radius:calc(var(--r) - 1px);
}

/* Flat sections separate hierarchy without adding another surface around nested content. */
.content-section{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:var(--ui-section-content-gap);
  padding:0 0 var(--ui-space-4);
  border-bottom:1px solid var(--bd);
}

.page-section-stack{
  gap:var(--ui-section-stack-gap);
}

.content-section:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.content-section-head{
  display:flex;
  min-width:0;
  min-height:36px;
  align-items:center;
  justify-content:space-between;
  gap:var(--ui-space-3);
}

/* True page sections must remain visually above their controls and values. */
.content-section>.content-section-head :is(h2,h3),
.filter-surface>.ch>h2{
  margin-top:0;
  margin-bottom:0;
  color:var(--tx);
  font-size:var(--ui-section-title-size);
  font-weight:var(--ui-section-title-weight);
  line-height:var(--ui-section-title-line-height);
  letter-spacing:0;
  text-transform:none;
}

.content-section>.content-section-head h2::before,
.filter-surface>.ch>h2::before{
  height:var(--ui-section-accent-height);
}

.management-view-stack>.content-section>.content-section-head::before,
.content-section.accented-content-section>.content-section-head::before{
  top:1px;
  height:var(--ui-section-accent-height);
}

.content-section-body{
  min-width:0;
}

/* Content disclosures use one precise trailing affordance across both tools. */
.disclosure-summary{
  cursor:pointer;
  list-style:none;
  user-select:none;
}

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

.disclosure-summary::after{
  content:"";
  width:16px;
  height:16px;
  margin-left:auto;
  flex:0 0 16px;
  color:var(--tm);
  background:
    linear-gradient(currentColor,currentColor) center/8px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 8px no-repeat;
}

details[open]>.disclosure-summary::after{
  background:linear-gradient(currentColor,currentColor) center/8px 1px no-repeat;
}

.disclosure-summary:hover::after{
  color:var(--tx);
}

@media(max-width:720px){
  :where(:root:not([data-navigation-mode="desktop"])) .content-section-head{
    align-items:flex-start;
    flex-wrap:wrap;
  }
}

/* Named layer ownership prevents menus and help from falling behind surfaces. */
.env-strip{z-index:var(--ui-layer-sticky)}
.ph{z-index:var(--ui-layer-header)}
.sb{z-index:var(--ui-layer-navigation)}
.sb-backdrop{z-index:var(--ui-layer-backdrop)}
.row-action-menu{z-index:var(--ui-layer-menu)}
.toast-stack{z-index:var(--ui-layer-toast)}
.field-help-popover{z-index:var(--ui-layer-tooltip)}
.auth-gate{z-index:var(--ui-layer-auth-gate)}
html.auth-pending body::before{z-index:var(--ui-layer-auth-mask)}
html.auth-pending body::after{z-index:var(--ui-layer-auth-progress)}

/* Color communicates state; ordinary section chrome stays neutral. */
.policy-note{
  border-left-color:var(--ui-message-info-rail);
  background:var(--ui-tone-info-bg);
}

.policy-note.info-note{
  border-left-color:var(--ui-message-info-rail);
  background:var(--ui-tone-info-bg);
}

.policy-note.success-note{
  border-left-color:var(--ui-message-success-rail);
  background:var(--ui-tone-success-bg);
}

.policy-note.warning-note,
.policy-note.partial-note,
.policy-note.stale-note{
  border-left-color:var(--ui-message-warning-rail);
  background:var(--ui-tone-warning-bg);
}

.policy-note.danger-note{
  border-left-color:var(--ui-message-danger-rail);
  background:var(--ui-tone-danger-bg);
}

.policy-note,
.toast,
.provider-warning,
.persona-readiness-preview,
.telemetry-warning,
.raw-trace-warning,
.notice-release,
dialog .settings-copy{
  border-left-width:2px;
}

.toast,
.notice-release,
dialog .settings-copy{
  border-left-color:var(--ui-message-info-rail);
}

.toast.success,
.persona-readiness-preview.healthy{
  border-left-color:var(--ui-message-success-rail);
}

.provider-warning,
.telemetry-warning,
.raw-trace-warning,
.persona-readiness-preview.warning{
  border-left-color:var(--ui-message-warning-rail);
}

.toast.error,
.persona-readiness-preview.unhealthy{
  border-left-color:var(--ui-message-danger-rail);
}

.persona-readiness-preview:not(.healthy):not(.warning):not(.unhealthy){
  border-left-color:var(--ui-message-neutral-rail);
}

.state[data-state-kind]{
  min-width:0;
}

.state[data-state-kind] .state-ic{
  color:var(--ui-tone-info);
  background:var(--ui-tone-info-bg);
}

.state.state-success .state-ic{
  color:var(--ui-tone-success);
  background:var(--ui-tone-success-bg);
  border-color:color-mix(in srgb,var(--ui-tone-success) 30%,var(--bd));
}

.state.state-stale .state-ic,
.state.state-partial .state-ic{
  color:var(--ui-tone-warning);
  background:var(--ui-tone-warning-bg);
  border-color:color-mix(in srgb,var(--ui-tone-warning) 30%,var(--bd));
}

.state.state-error .state-ic{
  color:var(--ui-tone-danger);
  background:var(--ui-tone-danger-bg);
  border-color:color-mix(in srgb,var(--ui-tone-danger) 30%,var(--bd));
}

/* Data tables retain density while clearly signaling horizontal overflow. */
.tw{
  position:relative;
  min-width:0;
  max-width:100%;
  overflow:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

.tw table{
  width:100%;
  font-variant-numeric:tabular-nums;
}

.tw th{
  background:var(--ui-table-header);
  background-clip:padding-box;
}

.tw td{
  vertical-align:middle;
}

button>svg,
.btn>svg,
.row-actions svg{
  display:block;
}

.row-action-cell{
  text-align:right;
}

.row-actions{
  vertical-align:middle;
}

.policy-summary-grid strong,
.mc .mv,
.metric-card .mv{
  font-variant-numeric:tabular-nums;
}

.table-summary{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.table-summary>strong{
  color:var(--tx);
  font-size:12px;
  font-weight:650;
  line-height:1.35;
}

.table-summary>small{
  max-width:100%;
  color:var(--tm);
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.table-summary>.badge{
  align-self:flex-start;
}

.table-summary>.table-exception{
  color:var(--wa);
}

.table-primary-link{
  min-width:0;
  max-width:100%;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--tx);
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.table-primary-link:hover{
  color:var(--tx);
}

a.table-primary-link{
  color:inherit;
  text-decoration:none;
}

a.table-primary-link:hover,
a.table-primary-link:focus-visible{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--ui-link-hover-underline);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.table-primary-link:focus-visible{
  border-radius:3px;
  outline:2px solid var(--bdf);
  outline-offset:3px;
}

.pager-page-label,
.section-meta{
  color:var(--tm);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1.35;
  white-space:nowrap;
}

.section-meta:not(:where(table .section-meta)){
  font-size:var(--ui-meta-size);
  line-height:var(--ui-meta-line-height);
}

.tw[data-scrollable="true"]:focus-visible{
  outline:2px solid var(--bdf);
  outline-offset:2px;
}

.tw[data-scroll-left="true"][data-scroll-right="false"]{
  box-shadow:inset 14px 0 14px -14px var(--ui-scroll-shadow);
}

.tw[data-scroll-left="false"][data-scroll-right="true"]{
  box-shadow:inset -14px 0 14px -14px var(--ui-scroll-shadow);
}

.tw[data-scroll-left="true"][data-scroll-right="true"]{
  box-shadow:
    inset 14px 0 14px -14px var(--ui-scroll-shadow),
    inset -14px 0 14px -14px var(--ui-scroll-shadow);
}

.tw .mono,
.tw time,
.tw [data-numeric]{
  font-variant-numeric:tabular-nums;
}

/* Form state remains legible without relying on color or delayed validation. */
.form-contract{
  position:relative;
}

/* Keep paired controls aligned across plain, required, and help-enabled captions. */
label:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
label:has(> select),
label:has(> .ui-select),
label:has(> textarea){
  line-height:var(--ui-field-caption-height);
}

/* Opaque select presentation is shared so browser-native popup translucency cannot vary by platform. */
.ui-select{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  color:var(--tx);
  font:inherit;
}

.ui-select-native{
  position:absolute!important;
  width:1px!important;
  min-width:1px!important;
  height:1px!important;
  min-height:1px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  border:0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}

.ui-select-trigger{
  display:flex;
  width:100%;
  min-width:0;
  min-height:var(--control-height,38px);
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 11px;
  border:1px solid var(--bd2);
  border-radius:var(--rs);
  background:var(--sf2);
  background-image:none;
  box-shadow:none;
  color:var(--tx);
  font:inherit;
  font-size:13px;
  font-weight:inherit;
  line-height:1.4;
  text-align:left;
  white-space:nowrap;
  opacity:1;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:border-color 120ms ease,background-color 120ms ease,box-shadow 120ms ease;
}

.ui-select-trigger:hover{
  border-color:color-mix(in srgb,var(--bd2) 72%,var(--tm));
}

.ui-select-trigger:focus-visible,
.ui-select-trigger[aria-expanded="true"]{
  border-color:var(--bdf);
  background:var(--sf);
  box-shadow:0 0 0 3px var(--prd);
  outline:0;
}

.ui-select-trigger[aria-invalid="true"]{
  border-color:var(--da);
  box-shadow:0 0 0 3px var(--dad);
}

.ui-select-trigger:disabled{
  border-color:var(--bd);
  background:var(--sfh);
  color:var(--tm);
  cursor:not-allowed;
  opacity:.58;
}

.ui-select-trigger-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ui-select-trigger>svg{
  width:12px;
  height:12px;
  flex:0 0 12px;
  color:var(--tm);
  transition:transform 120ms ease;
}

.ui-select-trigger[aria-expanded="true"]>svg{
  transform:rotate(180deg);
}

.ui-select-popover{
  position:fixed;
  right:auto;
  bottom:auto;
  z-index:var(--ui-layer-menu);
  display:grid;
  align-content:start;
  gap:2px;
  margin:0;
  padding:5px;
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid var(--bd2);
  border-radius:var(--r);
  background:var(--sf);
  background-image:none;
  box-shadow:var(--shl);
  color:var(--tx);
  font-family:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px;
  opacity:1;
  isolation:isolate;
  backdrop-filter:none;
  transform:none;
}

.ui-select-popover:popover-open{
  display:grid;
  position:fixed;
  inset:auto;
  margin:0;
}

.ui-select-popover[hidden]{
  display:none!important;
}

.ui-select-option{
  display:grid;
  width:100%;
  min-width:0;
  min-height:34px;
  grid-template-columns:16px minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:0;
  border-radius:var(--rs);
  background:var(--sf);
  box-shadow:none;
  color:var(--tx);
  font:inherit;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}

.ui-select-option:hover,
.ui-select-option:focus-visible{
  background:var(--sfh);
  outline:0;
}

.ui-select-option[aria-selected="true"]{
  background:var(--prd);
  color:var(--pr-text,var(--pr));
}

.ui-select-option:disabled{
  background:var(--sf);
  color:var(--tf);
  cursor:not-allowed;
  opacity:.68;
}

.ui-select-option-check{
  display:flex;
  width:16px;
  height:16px;
  align-items:center;
  justify-content:center;
  opacity:0;
}

.ui-select-option[aria-selected="true"] .ui-select-option-check{
  opacity:1;
}

.ui-select-option-check svg{
  width:14px;
  height:14px;
}

.ui-select-option-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ui-select-group{
  padding:8px 9px 4px 32px;
  color:var(--tm);
  font-size:10px;
  font-weight:750;
  line-height:1.2;
  text-transform:uppercase;
}

.ui-select-empty-state{
  padding:9px 11px;
  color:var(--tm);
  font-size:12px;
}

label.control-readonly .ui-select-trigger:disabled{
  border-color:var(--readonly-border,var(--bd2));
  background:var(--readonly-bg,var(--sfh));
  box-shadow:inset 3px 0 0 var(--readonly-border,var(--bd2));
  color:var(--tm);
  opacity:1;
}

.ui-select-native.model-execution-drift+.ui-select-trigger,
.ui-select-native.model-execution-combination-drift+.ui-select-trigger{
  border-color:var(--wa);
}

.persona-model-choice>.ui-select,
.persona-objective-choice>.ui-select{
  min-width:0;
}

.persona-model-choice .ui-select-trigger,
.persona-objective-choice .ui-select-trigger,
.attachment-type-table .ui-select-trigger{
  min-height:30px;
  padding:5px 8px;
  font-size:12px;
}

.persona-model-choice input:not(:checked)~.ui-select{
  opacity:.65;
}

@media(max-width:720px){
  :where(:root:not([data-navigation-mode="desktop"])) .persona-model-choice>.ui-select,
  :where(:root:not([data-navigation-mode="desktop"])) .persona-objective-choice>.ui-select{
    grid-column:2;
    width:100%;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .ui-select-option{
    min-height:42px;
  }
}

label > .field-label-row{
  min-height:var(--ui-field-caption-height);
  align-items:center;
  line-height:var(--ui-field-caption-height);
}

.form-required-marker,
.field-label-row > .form-required-marker{
  color:var(--tm);
  font-size:11px;
  font-weight:750;
  letter-spacing:0;
  line-height:1;
  flex:0 0 auto;
}

.has-inline-label-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
}

.check-row.has-inline-label-row{
  align-items:flex-start;
}

.check-row.has-inline-label-row > input{
  margin-top:2px;
}

.form-contract :is(input,select,textarea)[aria-invalid="true"]{
  border-color:var(--ui-tone-danger);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-tone-danger) 16%,transparent);
}

.form-error-summary{
  margin-bottom:var(--ui-space-4);
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--ui-tone-danger) 34%,var(--bd));
  border-left:3px solid var(--ui-tone-danger);
  border-radius:var(--radius-control);
  background:var(--ui-tone-danger-bg);
  color:var(--tx);
}

.form-error-summary strong{
  display:block;
  margin-bottom:6px;
  font-size:12px;
}

.form-error-summary ul{
  display:grid;
  gap:4px;
  margin:0;
  padding-left:18px;
}

.form-error-summary a{
  color:var(--tx);
  font-size:11px;
  text-underline-offset:2px;
}

.form-dirty-status{
  margin-right:auto;
  color:var(--ui-tone-warning);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.form-contract[data-dirty="true"] .management-editor-actions{
  border-top-color:color-mix(in srgb,var(--ui-tone-warning) 30%,var(--bd));
}

.error-presentation{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:10px;
}

.error-presentation-main>.state{
  margin:0;
}

.error-context{
  color:var(--tm);
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:10px;
  overflow-wrap:anywhere;
}

.technical-error{
  border-top:1px solid var(--bd);
  padding-top:8px;
}

.technical-error summary{
  display:flex;
  width:100%;
  min-height:28px;
  align-items:center;
  gap:10px;
  color:var(--tm);
  font-size:12px;
  font-weight:700;
}

.technical-error pre{
  max-height:220px;
  margin:8px 0 0;
  padding:10px;
  border:1px solid var(--bd);
  border-radius:var(--radius-control);
  background:var(--sf2);
  color:var(--tx);
  font-size:10px;
  line-height:1.55;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.request-error-toast{
  width:min(460px,calc(100vw - 36px));
  gap:10px;
  pointer-events:auto;
}

.request-error-toast .state{
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
}

.request-error-toast .state-ic{
  display:none;
}

.request-error-toast .request-error-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-top:2px;
}

.data-context{
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  color:var(--tm);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

.data-context:empty{
  display:none;
}

.data-context>span{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:5px;
}

.data-context strong{
  color:var(--tx);
  font-weight:700;
}

/* Compact facts support secondary metadata without introducing another grid surface. */
.plain-fact-list{
  display:grid;
  min-width:0;
  margin:0;
}

.plain-fact-list>div{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);
  gap:8px 16px;
  align-items:baseline;
  padding:7px 0;
}

.plain-fact-list dt,
.plain-fact-list dd{
  min-width:0;
  margin:0;
}

.plain-fact-list dt{
  color:var(--tm);
  font-size:12px;
  font-weight:680;
  line-height:1.45;
}

.plain-fact-list dd{
  color:var(--tx);
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.plain-fact-list dd.mono{
  font-size:11px;
}

/* Empty result surfaces carry their own boundary; a vacant table frame adds no hierarchy. */
.empty,
.state-empty:not(.compact){
  border:1px dashed var(--ui-empty-outline);
}

/* Hydrated placeholders wrap a state component, so only the outer surface owns the edge. */
.empty>.state-empty{
  border:0;
}

/* Match the hydrated result surface to the static placeholder it replaces. */
.content-section-body>.state-empty:not(.compact){
  min-height:var(--ui-empty-content-min-height);
}

/* Compact empty states gain a boundary only when they represent a complete result surface. */
.activity-list>.state-empty,
.persona-access-list>.state-empty{
  border:1px dashed var(--ui-empty-outline);
  border-radius:var(--r);
  background:var(--empty-fill);
}

.table-section:has(>.table-section-body>:is(.state-empty,.empty):only-child){
  overflow:visible;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.table-section:has(>.table-section-body>:is(.state-empty,.empty):only-child)>.table-section-head{
  display:none;
}

.table-section:has(>.table-section-body>:is(.state-empty,.empty):only-child)>.table-section-body>:is(.state-empty,.empty){
  border:1px dashed var(--ui-empty-outline);
  border-radius:var(--r);
  background:var(--empty-fill);
  box-shadow:none;
}

@media(max-width:720px){
  :root:not(:where([data-navigation-mode="desktop"])){
    --ui-empty-content-min-height:112px;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .plain-fact-list>div{
    grid-template-columns:1fr;
    gap:2px;
  }
}

.policy-title-link:hover:not(:disabled){
  text-decoration-color:var(--ui-link-hover-underline);
}

/* Set the decoration color independently so responsive hover shorthands cannot restore currentColor. */
.table-primary-link,
.policy-title-link{
  text-decoration-color:var(--ui-link-hover-underline);
}

.readiness-snapshot{
  padding:0 0 10px;
}

/* Provider identity stays compact enough for dense grids and model dialogs. */
.model-provider-identity{
  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  max-width:100%;
}

.model-provider-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.model-provider-mark{
  --model-provider-icon:url("provider-icons/generic.svg");
  display:inline-block;
  width:15px;
  height:15px;
  flex:0 0 15px;
  margin-top:1px;
  background-color:var(--tm);
  -webkit-mask:var(--model-provider-icon) center/contain no-repeat;
  mask:var(--model-provider-icon) center/contain no-repeat;
}

.model-provider-openai{
  --model-provider-icon:url("provider-icons/openai.svg");
  background-color:var(--provider-openai);
}

.model-provider-anthropic{
  --model-provider-icon:url("provider-icons/anthropic.svg");
  background-color:var(--provider-anthropic);
}

.model-provider-xai{
  --model-provider-icon:url("provider-icons/xai.svg");
  background-color:var(--tx);
}

.model-provider-deepseek{
  --model-provider-icon:url("provider-icons/deepseek.svg");
  background-color:var(--provider-deepseek);
}

.model-provider-google-gemini{
  --model-provider-icon:url("provider-icons/google-gemini.svg");
  background-color:var(--provider-gemini);
}

.model-provider-kimi{
  --model-provider-icon:url("provider-icons/kimi.svg");
  background-color:var(--provider-kimi);
}

.model-provider-mistral{
  --model-provider-icon:url("provider-icons/mistral.svg");
  background-color:var(--provider-mistral);
}

.model-provider-meta{
  --model-provider-icon:url("provider-icons/meta.svg");
  background-color:var(--provider-meta);
}

.model-provider-z-ai{
  --model-provider-icon:url("provider-icons/z-ai.svg");
  background-color:var(--provider-z-ai);
}

.model-provider-identity strong,
.model-provider-identity small,
.model-provider-copy strong,
.model-provider-copy small{
  min-width:0;
  overflow-wrap:anywhere;
}

/* Tenant marks identify a concrete isolation boundary without competing with its name. */
.tenant-identity{
  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  max-width:100%;
}

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

.tenant-copy strong,
.tenant-copy small,
.tenant-copy span{
  min-width:0;
  overflow-wrap:anywhere;
}

.tenant-copy>strong{
  color:var(--tx);
  font-size:12px;
  font-weight:650;
  line-height:1.35;
}

.tenant-copy>small{
  max-width:100%;
  color:var(--tm);
  font-size:11px;
  line-height:1.4;
}

.tenant-inline{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  max-width:100%;
}

.tenant-mark{
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin:1px 0 0;
  color:var(--sidebar-icon-blue);
  overflow:visible;
}

.tenant-mark .tenant-mark-layer:nth-of-type(1){stroke:var(--sidebar-icon-blue)}
.tenant-mark .tenant-mark-layer:nth-of-type(2){stroke:var(--sidebar-icon-cyan)}
.tenant-mark .tenant-mark-layer:nth-of-type(3){stroke:var(--sidebar-icon-green)}

.tenant-mark-compact{
  width:15px;
  height:15px;
  flex-basis:15px;
}

.tenant-inline>.tenant-mark{
  margin-top:0;
}

/* Persona topology marks communicate active reasoner and integrator structure. */
.persona-identity{
  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  max-width:100%;
}

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

.persona-copy strong,
.persona-copy small,
.persona-copy span{
  min-width:0;
  overflow-wrap:anywhere;
}

.persona-inline{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  max-width:100%;
}

.persona-topology-mark{
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin:1px 0 0;
  color:var(--sidebar-icon-violet);
  overflow:visible;
}

.persona-topology-compact{
  width:15px;
  height:15px;
  flex-basis:15px;
}

.persona-inline>.persona-topology-mark{
  margin-top:0;
}

.persona-topology-mark .persona-topology-network,
.persona-topology-mark .persona-topology-center{
  stroke:var(--sidebar-icon-violet);
  stroke-linecap:round;
  stroke-linejoin:round;
}

.persona-topology-mark .persona-topology-network{
  stroke-width:1.45;
}

.persona-topology-mark .persona-topology-node,
.persona-topology-mark .persona-topology-center-filled{
  fill:var(--sidebar-icon-violet);
}

.persona-topology-mark .persona-topology-node{
  fill:var(--sidebar-icon-cyan);
  stroke:none;
}

.persona-topology-mark .persona-topology-center{
  stroke-width:1.45;
}

.persona-topology-mark .persona-topology-center-hollow{
  fill:none;
}

/* Loading geometry is shared and grayscale in both themes. */
.skeleton-wrap{
  position:relative;
  overflow:hidden;
  border:1px solid var(--bd);
  border-radius:var(--r);
  background:var(--empty-fill);
}

.skeleton-layout{width:100%}

.skeleton-section{
  display:flex;
  align-items:center;
  min-height:96px;
  padding:20px;
  border-color:transparent;
  background:var(--empty-fill);
}

.skeleton-section-layout,
.skeleton-page-layout{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.skeleton-page{
  min-height:184px;
  grid-column:1/-1;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}

.skeleton-page-layout{gap:12px;padding:2px 0}
.skeleton-page .skeleton-title{max-width:220px}
.skeleton-page .skeleton-line.wide{max-width:min(620px,88%)}
.skeleton-page .skeleton-line.medium{max-width:min(460px,70%)}

.skeleton-page-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  width:min(800px,100%);
  margin-top:8px;
}

.skeleton-column{
  display:flex;
  min-height:88px;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  padding:16px;
  border:1px solid var(--skeleton-divider);
  border-radius:var(--r);
  background:var(--sf);
}

.skeleton-column .skeleton-line{max-width:none}
.skeleton-column .skeleton-line.short{max-width:72%}

.skeleton-rows{
  min-height:222px;
  padding:0;
}

.table-section-body>.skeleton-rows,
.collapsible-table-body>.skeleton-rows{
  border:0;
  border-radius:0;
}

.skeleton-rows-layout{
  display:flex;
  flex-direction:column;
}

.skeleton-row{
  display:grid;
  grid-template-columns:minmax(120px,1.5fr) minmax(80px,.8fr) minmax(72px,.55fr);
  align-items:center;
  gap:18px;
  min-height:46px;
  padding:10px 14px;
  border-bottom:1px solid var(--skeleton-divider);
}

.skeleton-row:last-child{border-bottom:0}

.skeleton-row-head{
  min-height:38px;
  background:var(--ui-table-header);
}

.skeleton-row-head .skeleton-cell{height:9px}

.skeleton-title,
.skeleton-line,
.skeleton-cell{
  height:12px;
  border:1px solid var(--skeleton-divider);
  border-radius:3px;
  background:linear-gradient(
    90deg,
    var(--skeleton-base) 0%,
    var(--skeleton-base) 38%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-base) 62%,
    var(--skeleton-base) 100%
  );
  background-size:240% 100%;
  animation:parallax-ui-shimmer 1.35s linear infinite;
}

.skeleton-title{
  height:16px;
  max-width:190px;
}

.skeleton-line{max-width:320px}
.skeleton-line.short{max-width:240px}
.skeleton-cell{width:100%}
.skeleton-cell.wide{width:88%}
.skeleton-cell.short{width:74%;justify-self:end}

/* Keep the information glyph inside its control box at every density. */
button.field-help-trigger{
  box-sizing:border-box;
  width:20px;
  min-width:20px;
  height:20px;
  min-height:20px;
  flex:0 0 20px;
}

/*
 * Shared shell contracts keep Portal and Studio visually aligned.
 * Product styles retain page-specific grids, navigation categories, and features.
 */
:root{
  --brand-grad:linear-gradient(135deg,var(--pr),var(--in));
  --content-max:1480px;
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:340ms;
  --sb:264px;
  --hh:68px;
  --radius-control:8px;
  --radius-account:12px;
  --pr-text:#8f99ff;
  --sidebar-icon-blue:#8291ff;
  --sidebar-icon-cyan:#4fc4df;
  --sidebar-icon-green:#53c79a;
  --sidebar-icon-violet:#b096f2;
  --sidebar-icon-amber:#e1ad55;
  --sidebar-icon-coral:#dc7f72;
  --sidebar-icon-slate:#8a99aa;
  --provider-openai:#31c48d;
  --provider-anthropic:#e58a67;
  --provider-deepseek:#7895ff;
  --provider-gemini:#73a7ff;
  --provider-kimi:#9280ff;
  --provider-mistral:#ff8a45;
  --provider-meta:#4d9cff;
  --provider-z-ai:#8794ff;
}

:root[data-navigation-mode="desktop"]{
  --sb:240px;
  --hh:60px;
  --control-height:34px;
  --compact-page-gutter:24px;
}

:root[data-navigation-mode="desktop"].sidebar-collapsed{
  --sb:var(--sb-collapsed);
}

[data-theme="light"]{
  --pr-text:#3543cc;
  --sidebar-icon-blue:#4f61d8;
  --sidebar-icon-cyan:#147f9d;
  --sidebar-icon-green:#21845f;
  --sidebar-icon-violet:#7157bd;
  --sidebar-icon-amber:#9a6818;
  --sidebar-icon-coral:#a34f45;
  --sidebar-icon-slate:#657280;
  --provider-openai:#087f5b;
  --provider-anthropic:#b95838;
  --provider-deepseek:#405dd8;
  --provider-gemini:#2468c5;
  --provider-kimi:#6049cf;
  --provider-mistral:#c74a14;
  --provider-meta:#1769c2;
  --provider-z-ai:#5361c7;
}

/* Icon-only commands retain their hit area while the glyph carries state. */
:where(
  button.btn.ik,
  summary.btn.ik,
  .icon-btn,
  button.btn.row-action-primary,
  a.btn.row-action-primary,
  button.row-action-more,
  .copy-chip,
  .notice-dismiss,
  .list-filter-clear
){
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}

:where(
  button.btn.ik,
  summary.btn.ik,
  .icon-btn,
  button.btn.row-action-primary,
  a.btn.row-action-primary,
  button.row-action-more,
  .copy-chip,
  .notice-dismiss,
  .list-filter-clear
):is(:hover,:focus-visible),
:where(.selection-mode-action,.view-mode-action)[aria-pressed="true"],
.activity-menu[open]>.activity-trigger{
  border-color:transparent!important;
  background:transparent!important;
  color:var(--pr-text)!important;
}

/* Pressed icon toggles use deliberate solid geometry, not a faint color-only state. */
:where(.selection-mode-action,.view-mode-action,.activity-trigger) .toggle-state-fill{
  fill:transparent;
  transition:fill .14s ease;
}

:where(.selection-mode-action,.view-mode-action)[aria-pressed="true"] .toggle-state-fill,
.activity-menu[open]>.activity-trigger .toggle-state-fill{
  fill:currentColor;
}

:where(
  button.btn.ik,
  summary.btn.ik,
  .icon-btn,
  button.btn.row-action-primary,
  a.btn.row-action-primary,
  button.row-action-more,
  .copy-chip,
  .notice-dismiss,
  .list-filter-clear
):focus-visible{
  outline:2px solid var(--bdf);
  outline-offset:2px;
}

:where(
  button.btn.ik,
  summary.btn.ik,
  .icon-btn,
  button.btn.row-action-primary,
  a.btn.row-action-primary,
  button.row-action-more,
  .copy-chip,
  .notice-dismiss,
  .list-filter-clear
):disabled{
  border-color:transparent!important;
  background:transparent!important;
  color:var(--tf)!important;
}

:where(button.btn.ik,.icon-btn,button.btn.row-action-primary):is([aria-label*="delete" i],[aria-label*="remove" i],[title*="delete" i],[title*="remove" i]):hover{
  color:var(--da)!important;
}

@media(forced-colors:active){
  :where(.selection-mode-action,.view-mode-action)[aria-pressed="true"] .toggle-state-fill,
  .activity-menu[open]>.activity-trigger .toggle-state-fill{
    fill:ButtonText;
  }

  .tenant-mark .tenant-mark-layer,
  .persona-topology-mark .persona-topology-network,
  .persona-topology-mark .persona-topology-center{
    stroke:currentColor!important;
  }

  .persona-topology-mark .persona-topology-node,
  .persona-topology-mark .persona-topology-center-filled{
    fill:currentColor!important;
  }
}

/* Semantic color belongs to the icon geometry; navigation labels remain neutral. */
.sb-nav svg[data-sidebar-icon],
.sb-rail-item svg[data-sidebar-icon]{
  color:var(--sidebar-icon-blue);
}

svg[data-sidebar-icon="overview"]>:nth-child(odd){stroke:var(--sidebar-icon-blue)}
svg[data-sidebar-icon="overview"]>:nth-child(even){stroke:var(--sidebar-icon-cyan)}
svg[data-sidebar-icon="operations"]>*{stroke:var(--sidebar-icon-blue)}
svg[data-sidebar-icon="governance"]>:first-child{stroke:var(--sidebar-icon-blue)}
svg[data-sidebar-icon="governance"]>:last-child{stroke:var(--sidebar-icon-green)}
svg[data-sidebar-icon="ai-configuration"]>:first-child{stroke:var(--sidebar-icon-violet)}
svg[data-sidebar-icon="ai-configuration"]>:last-child{stroke:var(--sidebar-icon-cyan)}
svg[data-sidebar-icon="runtime"]>:first-child{stroke:var(--sidebar-icon-amber)}
svg[data-sidebar-icon="runtime"]>:last-child{stroke:var(--sidebar-icon-coral)}
svg[data-sidebar-icon="observability"]>:first-child{stroke:var(--sidebar-icon-blue)}
svg[data-sidebar-icon="observability"]>:last-child{stroke:var(--sidebar-icon-green)}
svg[data-sidebar-icon="analytics"]>:first-child{stroke:var(--sidebar-icon-slate)}
svg[data-sidebar-icon="analytics"]>:nth-child(2){stroke:var(--sidebar-icon-cyan)}
svg[data-sidebar-icon="analytics"]>:last-child{stroke:var(--sidebar-icon-violet)}
svg[data-sidebar-icon="load-testing"]>:first-child{stroke:var(--sidebar-icon-amber)}
svg[data-sidebar-icon="load-testing"]>:nth-child(2){stroke:var(--sidebar-icon-coral)}
svg[data-sidebar-icon="load-testing"]>:last-child{stroke:var(--sidebar-icon-slate)}
svg[data-sidebar-icon="usage"]>:first-child{stroke:var(--sidebar-icon-violet)}
svg[data-sidebar-icon="usage"]>:last-child{stroke:var(--sidebar-icon-cyan)}
svg[data-sidebar-icon="workspace"]>:first-child{stroke:var(--sidebar-icon-blue)}
svg[data-sidebar-icon="workspace"]>:nth-child(2){stroke:var(--sidebar-icon-green)}
svg[data-sidebar-icon="workspace"]>:last-child{stroke:var(--sidebar-icon-cyan)}
svg[data-sidebar-icon="compose"]>:first-child{stroke:var(--sidebar-icon-slate)}
svg[data-sidebar-icon="compose"]>:last-child{stroke:var(--sidebar-icon-violet)}
svg[data-sidebar-icon="evaluation"]>:nth-child(odd){stroke:var(--sidebar-icon-blue)}
svg[data-sidebar-icon="evaluation"]>:nth-child(even){stroke:var(--sidebar-icon-coral)}
svg[data-sidebar-icon="personas"]>:nth-child(-n+2){stroke:var(--sidebar-icon-violet)}
svg[data-sidebar-icon="personas"]>:nth-child(n+3){stroke:var(--sidebar-icon-cyan)}

@media(forced-colors:active){
  .sb-nav svg[data-sidebar-icon]>*,
  .sb-rail-item svg[data-sidebar-icon]>*,
  .pt-page-icon>*{
    stroke:currentColor!important;
  }
}

html.sidebar-collapsed .sb::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:2px;
  background:var(--brand-grad);
  opacity:.5;
  pointer-events:none;
}

/* Keep the sidebar state legible without relying on a directional chevron. */
.sb-toggle .sb-toggle-icon{
  width:15px;
  height:15px;
  flex:0 0 15px;
  transform:none;
  transition:none;
}

.sb-toggle .sb-toggle-rail-collapsed{
  display:none;
}

html.sidebar-collapsed .sb-toggle .sb-toggle-icon{
  transform:none;
}

html.sidebar-collapsed .sb-toggle .sb-toggle-rail-expanded{
  display:none;
}

html.sidebar-collapsed .sb-toggle .sb-toggle-rail-collapsed{
  display:inline;
}

.sb-rail,
.sb-rail-menu,
.sb-rail-tooltip{
  display:none;
}

.ph-brand-dock{
  display:none;
}

html:not(.sidebar-desktop-mode) .ph-brand-dock{
  display:none;
}

:root{
    --sb-collapsed:48px;
    --sb-rail-top:calc(var(--hh) + 20px);
    --sb-rail-item-size:36px;
  }

  .sb-toggle[data-sidebar-movable="true"]{
    top:var(--sidebar-toggle-y,calc(var(--hh) / 2));
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    cursor:ns-resize;
  }

  .ph>.pt,
  .ph>.hr{
    position:relative;
    z-index:2;
  }

  .ph-brand-dock{
    position:absolute;
    top:50%;
    left:50%;
    z-index:1;
    display:flex;
    width:92px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    line-height:0;
    text-decoration:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:opacity 160ms var(--ease),visibility 0s linear 160ms;
  }

  .ph-brand-logo{
    display:block;
    width:100%;
    line-height:0;
  }

  .ph-brand-logo .sb-logo-img{
    display:block;
    width:100%;
    height:auto;
  }

  .ph-brand-logo .sb-logo-light{display:none}
  [data-theme="light"] .ph-brand-logo .sb-logo-dark{display:none}
  [data-theme="light"] .ph-brand-logo .sb-logo-light{display:block}

  html.sidebar-desktop-mode.sidebar-collapsed .ph-brand-dock{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }

  .ph-brand-dock:focus-visible{
    border-radius:6px;
    outline:2px solid var(--bdf);
    outline-offset:3px;
  }

  html.sidebar-toggle-dragging,
  html.sidebar-toggle-dragging *{
    cursor:ns-resize!important;
  }

  .sb-rail{
    position:absolute;
    top:var(--sb-rail-top);
    right:0;
    bottom:48px;
    left:0;
    z-index:124;
    width:100%;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:0 6px 8px;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:none;
  }

  .sb-rail::-webkit-scrollbar{display:none}

  html.sidebar-desktop-mode.sidebar-collapsed .sb-rail:not([hidden]){
    display:flex;
  }

  .sb-rail-item{
    position:relative;
    display:flex;
    width:var(--sb-rail-item-size);
    min-width:var(--sb-rail-item-size);
    height:var(--sb-rail-item-size);
    min-height:var(--sb-rail-item-size);
    flex:0 0 var(--sb-rail-item-size);
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:var(--nav-muted,var(--tm));
    text-decoration:none;
    box-shadow:none;
  }

  .sb-rail-item:hover,
  .sb-rail-item:focus-visible,
  .sb-rail-item[aria-expanded="true"]{
    border-color:var(--nav-line,var(--bd));
    background:var(--nav-hover,var(--sfh));
    color:var(--nav-text,var(--tx));
  }

  .sb-rail-item:focus-visible{
    outline:2px solid var(--bdf);
    outline-offset:1px;
  }

  .sb-rail-item.on{
    background:var(--nav-active,var(--prd));
    color:var(--pr);
  }

  .sb-rail-item.on::before{
    content:'';
    position:absolute;
    top:7px;
    bottom:7px;
    left:0;
    width:2px;
    border-radius:999px;
    background:var(--ui-nav-active-rail);
  }

  .sb-rail-item svg{
    width:16px;
    height:16px;
    flex:0 0 16px;
  }

  .sb-rail-menu:not([hidden]){
    position:fixed;
    z-index:420;
    display:block;
    width:min(224px,calc(100vw - 72px));
    max-height:calc(100dvh - 16px);
    overflow:auto;
    padding:6px;
    border:1px solid var(--bd2);
    border-radius:8px;
    background:var(--sf);
    box-shadow:var(--shl);
    color:var(--tx);
  }

  .sb-rail-menu-title{
    padding:7px 9px 8px;
    color:var(--tm);
    font-size:10px;
    font-weight:750;
    line-height:1.2;
    text-transform:uppercase;
  }

  .sb-rail-menu-list{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .sb-rail-menu-item{
    display:flex;
    min-height:34px;
    align-items:center;
    padding:7px 9px;
    border-radius:6px;
    color:var(--tx);
    font-size:12px;
    font-weight:600;
    line-height:1.3;
    text-decoration:none;
  }

  .sb-rail-menu-item:hover,
  .sb-rail-menu-item:focus-visible,
  .sb-rail-menu-item.on{
    background:var(--sfh);
    color:var(--pr-text);
  }

  .sb-rail-menu-item:focus-visible{
    outline:2px solid var(--bdf);
    outline-offset:-1px;
  }

  .sb-rail-tooltip:not([hidden]){
    position:fixed;
    z-index:430;
    display:block;
    max-width:200px;
    padding:5px 8px;
    border:1px solid var(--bd2);
    border-radius:6px;
    background:var(--sf);
    box-shadow:var(--sh);
    color:var(--tx);
    font-size:11px;
    font-weight:650;
    line-height:1.25;
    white-space:nowrap;
    pointer-events:none;
  }

.env-strip,
.breadcrumbs{display:none!important}

.nf-body{
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--bg);
}

.nf-card{
  display:flex;
  width:min(460px,100%);
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:34px 30px 30px;
  border:1px solid var(--bd2);
  border-radius:var(--r-lg);
  background:var(--sf);
  box-shadow:var(--shl);
  text-align:center;
}

.nf-card h1{
  margin:8px 0 0;
  color:var(--tx);
  font-size:22px;
  font-weight:760;
}

.nf-card p{
  max-width:340px;
  margin:0 0 8px;
  color:var(--tm);
  font-size:13px;
  line-height:1.55;
}

html.auth-pending body.nf-body::before,
html.auth-pending body.nf-body::after{
  display:none;
  content:none;
}

html.auth-pending body.nf-body{overflow:auto}

.sb-brand{
  min-height:90px;
  padding-inline:22px;
}

.sb-logo{width:154px}
.sb-nav{padding:18px 14px 14px}

.ph{
  padding-inline:32px;
  box-shadow:0 1px 0 var(--bd),0 10px 30px rgba(0,0,0,.08);
}

.pt{gap:13px}

.pt-owner-mark{
  width:24px;
  height:28px;
  opacity:.9;
}

.pt-tx{
  gap:3px;
  padding-left:13px;
  border-left:1px solid var(--bd);
}

.pt-product{
  font-size:9px;
  font-weight:750;
}

.pt-page{
  font-size:17px;
  font-weight:720;
}

.pt-page-row{
  display:flex;
  min-width:0;
  align-items:center;
  gap:3.9375px;
}

.pt-page-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--sidebar-icon-blue);
}

.pt-page-row .pt-page{
  min-width:0;
}

.pt-parent-link{
  display:inline-flex;
  min-width:0;
  max-width:150px;
  flex:0 1 auto;
  align-items:center;
  gap:4px;
  color:var(--tm);
  font-size:11px;
  font-weight:650;
  line-height:1;
  text-decoration:none;
  text-transform:none;
}

.pt-parent-link svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
}

.pt-parent-link span{
  min-width:0;
  overflow:hidden;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pt-parent-link:hover span,
.pt-parent-link:focus-visible span{
  text-decoration:underline;
  text-decoration-color:var(--ui-link-hover-underline);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.pt-parent-link:hover,
.pt-parent-link:focus-visible{color:var(--tm)}

.pt-context-divider{
  width:1px;
  height:14px;
  margin-inline:3px 1px;
  flex:0 0 1px;
  background:var(--bd2);
}

.header-build{
  min-height:18px;
  margin-left:2px;
  padding:2px 0 2px 12px;
  border:0;
  border-left:1px solid var(--bd);
  border-radius:0;
  background:transparent;
  color:var(--tm);
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:9px;
  font-weight:600;
}

/*
 * Make clickability explicit throughout the application. Links, enabled
 * commands, and disclosure controls use the pointing hand; exceptional states
 * retain the more informative help, progress, and not-allowed cursors.
 */
a[href]:not(.disabled):not([aria-disabled="true"]),
button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.field-help-trigger):not(.btn-busy):not(.row-action-primary-busy),
.btn:not(.disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.btn-busy):not(.row-action-primary-busy),
[role="button"]:not([aria-disabled="true"]):not([aria-busy="true"]),
summary:not([aria-disabled="true"]),
.nav-group-title,
.nav-section,
.choice-item{
  cursor:pointer;
}

@media(min-width:961px){
  .sb-toggle[data-sidebar-movable="true"]{cursor:ns-resize!important}
}

.account-trigger{
  min-height:40px;
  padding:5px 11px 5px 5px;
  border-color:transparent;
  border-radius:999px var(--radius-account) var(--radius-account) 999px;
  background:transparent;
  box-shadow:none;
}

[data-theme="light"] .account-trigger{
  background:transparent;
  box-shadow:none;
}

.account-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--action);
}

.account-menu[open] .account-trigger{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.account-trigger:hover,
.account-trigger:focus-visible{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.account-menu[open] .account-chevron{
  color:var(--pr-text);
}

.account-menu,
.account-popover,
.account-summary>div{
  min-width:0;
}

.account-popover{
  overflow:hidden;
}

button,
.btn{
  gap:7px;
  border-radius:var(--radius-control);
  font-weight:675;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}

.sm{
  min-height:32px;
  padding:6px 11px;
}

.bp{
  box-shadow:0 1px 2px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.13);
}

.bp:hover{
  box-shadow:0 2px 5px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.16);
}

.bs,
.action-secondary{
  border-color:var(--bd2);
  background:color-mix(in srgb,var(--sf) 92%,var(--sf2));
}

.bg{
  border-color:color-mix(in srgb,var(--bd) 82%,transparent);
  color:var(--tm);
}

.bg:hover{color:var(--tx)}

.page-surface>.ch{min-height:36px}
.page-surface>.ch .bg{background:transparent}

.page-surface>.ch .bp,
.page-surface>.ch .action-accent{
  padding-inline:13px;
}

.action-accent,
.view-mode-action[aria-pressed="true"]{
  border-color:var(--bdf);
  background:var(--prd);
  color:var(--pr-text);
  box-shadow:none;
}

.action-accent:hover,
.view-mode-action[aria-pressed="true"]:hover{
  border-color:color-mix(in srgb,var(--pr) 72%,transparent);
  background:color-mix(in srgb,var(--pr) 16%,var(--sf));
  color:var(--pr-text);
  box-shadow:none;
}

.action-accent:active,
.view-mode-action[aria-pressed="true"]:active{
  background:color-mix(in srgb,var(--pr) 21%,var(--sf));
}

.action-accent:disabled{
  border-color:var(--bd);
  background:var(--sf2);
  color:var(--tf);
  box-shadow:none;
}

.filter-surface{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:12px;
  padding:0 0 16px;
  border-bottom:1px solid var(--bd);
}

.filter-surface[data-divider="none"]{
  border-bottom:0;
}

.filter-surface[data-divider="spaced"]{
  padding-bottom:var(--ui-space-5);
  border-bottom:0;
}

.filter-surface[data-divider="flush"]{
  padding-bottom:0;
  border-bottom:0;
}

.page-section-stack[data-density="compact"]{
  gap:var(--ui-space-4);
}

.page-section-stack[data-density="related"]{
  gap:var(--ui-section-content-gap);
}

.filter-results-stack{
  gap:var(--ui-filter-results-gap);
}

.filter-results-stack>.filter-shell,
.filter-results-stack>.list-filter-toolbar,
.filter-results-stack>.filter-surface,
.filter-shell[data-spacing="flush"]{
  padding-bottom:0;
}

.filter-surface>.ch{
  min-height:36px;
  padding:0;
  border:0;
  background:transparent;
}

.filter-surface>.cb{
  padding:0;
  background:transparent;
}

.filter-surface input,
.filter-surface select{
  min-width:0;
}

.bounded-control-row{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
  min-width:0;
}

.bounded-control-group{
  display:contents;
}

.bounded-control-row>label,
.bounded-control-group>label{
  min-width:0;
}

.control-width-sm{
  flex:0 1 180px;
  width:min(100%,180px);
}

.control-width-md{
  flex:0 1 280px;
  width:min(100%,280px);
}

.bounded-summary-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),240px));
  justify-content:start;
}

@media(max-width:1200px){
  .ph,
  .env-strip{
    padding-right:24px;
    padding-left:24px;
  }
}

@media(max-width:620px){
  :where(:root:not([data-navigation-mode="desktop"])) .bounded-control-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }

  :where(:root:not([data-navigation-mode="desktop"])) .control-width-sm,
  :where(:root:not([data-navigation-mode="desktop"])) .control-width-md{
    width:100%;
    max-width:none;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .bounded-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:440px){
  :where(:root:not([data-navigation-mode="desktop"])) .bounded-summary-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

@media(max-width:960px){
  :where(:root:not([data-navigation-mode="desktop"])) .sb{width:288px}

  :where(:root:not([data-navigation-mode="desktop"])) .ph,
  :where(:root:not([data-navigation-mode="desktop"])) .env-strip{
    padding-right:18px;
    padding-left:18px;
  }
}

@media(max-width:720px){
  :root:not(:where([data-navigation-mode="desktop"])){--hh:60px}

  :where(:root:not([data-navigation-mode="desktop"])) .pt{gap:10px}

  :where(:root:not([data-navigation-mode="desktop"])) .pt-owner-mark{
    width:20px;
    height:23px;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .pt-tx{padding-left:10px}
  :where(:root:not([data-navigation-mode="desktop"])) .pt-page{font-size:14px}

  :where(:root:not([data-navigation-mode="desktop"])) .account-trigger{
    min-height:36px;
    padding:4px;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .account-avatar{
    width:26px;
    height:26px;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .filter-surface{padding-bottom:14px}

  :where(:root:not([data-navigation-mode="desktop"])) .filter-surface>.ch{
    align-items:flex-start;
    flex-direction:column;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .filter-surface>.ch .cluster{
    width:100%;
    justify-content:space-between;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .tw[data-scrollable="true"]::after{
    content:'Scroll for more';
    position:sticky;
    right:8px;
    bottom:6px;
    display:block;
    width:max-content;
    margin:-24px 8px 6px auto;
    padding:3px 7px;
    border:1px solid var(--bd);
    border-radius:999px;
    background:color-mix(in srgb,var(--sf) 92%,transparent);
    color:var(--tm);
    font-size:9px;
    font-weight:700;
    pointer-events:none;
    opacity:.92;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .tw[data-scroll-left="true"]::after{
    opacity:0;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .tw table[data-sticky-identifier="true"] :is(th,td):first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--sf);
    box-shadow:1px 0 0 var(--bd);
  }

  :where(:root:not([data-navigation-mode="desktop"])) .tw table[data-sticky-identifier="true"] thead th:first-child{
    z-index:3;
    background:var(--ui-table-header);
  }

  :where(:root:not([data-navigation-mode="desktop"])) .form-dirty-status{
    width:100%;
    margin-bottom:2px;
  }
}

/* Browser-zoom-like desktop density without scaling the document. */
@media(min-width:961px){
  :root{
    --sb:240px;
    --hh:60px;
    --control-height:34px;
    --compact-page-gutter:24px;
  }

  body{
    font-size:13px;
    line-height:1.45;
  }

  .sb-brand{
    min-height:82px;
    padding:8px 18px;
  }

  .sb-logo{width:142px}
  .sb-nav{padding:14px 12px 12px}

  .nav-a{
    min-height:32px;
    padding:6px 9px;
    font-size:12px;
  }

  .nav-child{
    width:calc(100% - 22px);
    min-height:28px;
    margin-left:22px;
    padding:4px 9px 4px 11px;
    font-size:12px;
  }

  .sb-foot{
    min-height:40px;
    padding:9px 12px;
  }

  .sb-toggle{top:var(--sidebar-toggle-y,calc(var(--hh) / 2))}
  .ph{padding-inline:var(--compact-page-gutter)}

  .pt{
    min-height:38px;
    gap:10px;
  }

  .pt-owner-mark{
    width:21px;
    height:25px;
  }

  .pt-tx{
    gap:2px;
    padding-left:11px;
  }

  .pt-page{font-size:15px}
  .hr{gap:8px}
  .env-strip{padding:7px var(--compact-page-gutter) 8px}
  .breadcrumbs{font-size:12px}

  .pc{
    gap:12px;
    padding:20px var(--compact-page-gutter) 28px;
  }

  .pf{
    min-height:38px;
    padding:9px var(--compact-page-gutter);
    font-size:10px;
  }

  .ch{
    min-height:44px;
    padding:10px 14px;
  }

  .cb{padding:14px}

  h2,
  .ch h2,
  .mh h2{
    gap:8px;
    font-size:13px;
  }

  h3{font-size:11px}

  .table-section-head{
    min-height:42px;
    padding:9px 12px;
  }

  button,
  .btn{
    min-height:34px;
    padding:6px 12px;
    font-size:12px;
  }

  .sm{
    min-height:30px;
    padding:5px 9px;
    font-size:11px;
  }

  label{
    gap:5px;
    font-size:11px;
  }

  input,
  select,
  textarea{
    min-height:var(--control-height);
    padding:6px 10px;
    font-size:12px;
  }

  .filter-surface{
    gap:10px;
    padding-bottom:12px;
  }

  .tw th{
    padding:9px 12px;
    font-size:10px;
  }

  .tw td{
    padding:9px 12px;
    font-size:12px;
  }

  .tw td.mono{
    font-size:11px;
    line-height:1.4;
  }

  .pc .kvv{font-size:12px}

  .pc .kvv.mono{
    font-size:11px;
    line-height:1.4;
  }

  .pager{
    padding:9px 12px;
    font-size:12px;
  }

  .badge{
    padding:2px 7px;
    font-size:10px;
  }

  .account-trigger{
    min-height:36px;
    padding:4px 9px 4px 4px;
  }

  .account-avatar{
    width:26px;
    height:26px;
  }

  .account-auth{font-size:9px}

  dialog,
  .auth-gate,
  .nf-body{
    font-size:14px;
  }

  dialog label{font-size:12px}

  dialog input,
  dialog select,
  dialog textarea{
    min-height:38px;
    padding:8px 11px;
    font-size:13px;
  }

  dialog button,
  dialog .btn,
  .auth-gate button,
  .auth-gate .btn{
    min-height:36px;
    padding:7px 14px;
    font-size:13px;
  }

  dialog .sm{
    min-height:30px;
    padding:5px 10px;
    font-size:12px;
  }
}

@media(max-width:720px){
  :where(:root:not([data-navigation-mode="desktop"])) .pt-parent-link{
    width:22px;
    max-width:22px;
    flex:0 0 22px;
    justify-content:center;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .pt-parent-link span{display:none}
  :where(:root:not([data-navigation-mode="desktop"])) .pt-context-divider{margin-inline:1px 0}
}

@media(min-width:961px) and (max-width:1200px){
  :root{--compact-page-gutter:20px}
  :root[data-navigation-mode="desktop"]{--compact-page-gutter:20px}
}

@media(min-width:961px) and (pointer:coarse){
  .nav-a,
  .nav-child{
    min-height:44px;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
  }

  button,
  .btn{
    min-height:40px;
    font-size:13px;
  }

  .sm{
    min-height:36px;
    font-size:12px;
  }

  input,
  select,
  textarea{
    min-height:40px;
    font-size:13px;
  }

  label{font-size:12px}
  .account-trigger{min-height:40px}

  .account-avatar{
    width:28px;
    height:28px;
  }
}

/*
 * Product typography and shell rhythm. These semantic rules intentionally sit
 * after the responsive density layer so Portal and Studio share one hierarchy.
 * Table column headers and row content retain their product-specific sizing.
 */
.pc{
  font-size:var(--ui-body-size);
  line-height:var(--ui-body-line-height);
  padding-block-start:var(--ui-workspace-content-start-gap);
}

/* Preserve the product-owned table type scale while page content uses 14/20. */
.pc table{line-height:1.5}

.pt-page{
  font-size:var(--ui-page-title-size);
  font-weight:var(--ui-page-title-weight);
  line-height:var(--ui-page-title-line-height);
}

.card>.ch>h2,
.mh h2,
.sp>h2,
.table-section>.table-section-head h2,
.table-section-title>h2,
.collapsible-table-title,
.management-form-section-head h3,
.analytics-chart-head h2,
.settings-section-head h3,
.load-plan-section-head h3{
  font-size:var(--ui-panel-title-size);
  font-weight:var(--ui-panel-title-weight);
  line-height:var(--ui-panel-title-line-height);
}

/* First-class page sections remain one level above their contained panels. */
.content-section>.content-section-head :is(h2,h3),
.filter-surface>.ch>h2{
  font-size:var(--ui-section-title-size);
  font-weight:var(--ui-section-title-weight);
  line-height:var(--ui-section-title-line-height);
}

label:not(:where(table label)),
.field-label:not(:where(table .field-label)){
  font-size:var(--ui-label-size);
  font-weight:var(--ui-label-weight);
  line-height:var(--ui-label-line-height);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(:where(table input)),
select:not(:where(table select)),
textarea:not(:where(table textarea)),
.ui-select-trigger:not(:where(table .ui-select-trigger)){
  font-size:var(--ui-body-size);
  line-height:var(--ui-body-line-height);
}

.btn:not(.sm):not(.ik):not(.row-action-primary):not(.row-action-menu-item):not(:where(table .btn)){
  font-size:var(--ui-body-size);
  line-height:var(--ui-body-line-height);
}

.pc .content-section-head p,
.management-form-section-head p,
.analytics-chart-head p,
.settings-section-head p,
.load-plan-section-head p,
.management-page-identity>p{
  font-size:var(--ui-meta-size);
  line-height:var(--ui-meta-line-height);
}

@media(min-width:961px){
  .pc table{line-height:1.45}
}

@media(max-width:720px){
  :where(:root:not([data-navigation-mode="desktop"])) .pt-page{
    font-size:14px;
    line-height:18px;
  }
}

.primary,
.tag-primary,
.action-accent{
  color:var(--pr-text);
}

[data-theme="dark"].auth-pending body::after{
  --secure-session-dot-color:#d9dde2;
}

@media(forced-colors:active){
  *,
  *::before,
  *::after{
    forced-color-adjust:auto;
  }

  .badge,
  .action-accent,
  .state,
  .policy-note,
  .form-error-summary{
    border:1px solid CanvasText;
  }

  .content-section-head h3::before,
  .content-section-head::before,
  .management-detail-disclosure>summary>span:first-child::before,
  .evaluation-region-head::before,
  .sb .nav-a.on::before,
  .sb-rail-item.on::before,
  h2::before{
    background:Highlight !important;
    forced-color-adjust:none;
  }

  :focus-visible{
    outline:2px solid Highlight !important;
    outline-offset:2px;
  }
}

@keyframes parallax-ui-shimmer{
  from{background-position:100% 0}
  to{background-position:-100% 0}
}

@media(max-width:720px){
  :where(:root:not([data-navigation-mode="desktop"])) .skeleton-page{
    min-height:188px;
    padding:0;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .skeleton-page-columns{grid-template-columns:1fr}
  :where(:root:not([data-navigation-mode="desktop"])) .skeleton-page-columns .skeleton-column:last-child{display:none}

  :where(:root:not([data-navigation-mode="desktop"])) .skeleton-row{
    grid-template-columns:minmax(120px,1.35fr) minmax(72px,.65fr);
    gap:14px;
    padding-inline:14px;
  }

  :where(:root:not([data-navigation-mode="desktop"])) .skeleton-cell.short{display:none}
}

@media(prefers-reduced-motion:reduce){
  .ph-brand-dock{
    transition:none!important;
  }

  .skeleton-title,
  .skeleton-line,
  .skeleton-cell{
    animation:none;
    background:var(--skeleton-base);
  }
}