/* Accepted i2l workshop presentation. All rules are scoped to this UI slice. */
@font-face {
  font-family: "Cooper Hewitt";
  src: url("/assets/fonts/cooperhewitt-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
.i2l-workspace,
.i2l-workspace-portal {
  --ws-canvas: #f9fafb;
  --ws-surface: #fff;
  --ws-ink: #252a2e;
  --ws-muted: #626970;
  --ws-line: #dfe4e8;
  --ws-input: #87929c;
  --ws-hover: #eef0f2;
  --ws-focus: #657581;
  --ws-radius: 25px;
  --ws-inset: 16px;
  --ws-control: 44px;
  --ws-control-radius: 8px;
  --background: var(--ws-surface);
  --foreground: var(--ws-ink);
  --primary: var(--ws-ink);
  --primary-foreground: #fff;
  --secondary: #eef0f2;
  --secondary-foreground: #30353a;
  --muted: #f1f3f4;
  --muted-foreground: var(--ws-muted);
  --accent: #e9ecef;
  --accent-foreground: var(--ws-ink);
  --border: var(--ws-line);
  --input: var(--ws-input);
  --ring: var(--ws-focus);
  --destructive: #a52d3b;
  --card: var(--ws-surface);
  --card-foreground: var(--ws-ink);
  font-family:
    "Cooper Hewitt",
    "Noto Sans Arabic Variable",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ws-ink);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.i2l-workspace *,
.i2l-workspace-portal * {
  box-sizing: border-box;
}
.i2l-workspace {
  position: relative;
}
.i2l-workspace :where(h1, h2, h3, p, dl, dd, ul, fieldset),
.i2l-workspace-portal :where(h1, h2, h3, p) {
  margin: 0;
}
.i2l-workspace :where(h1, h2, h3),
.i2l-workspace-portal :where(h1, h2, h3) {
  color: var(--ws-ink);
  font-weight: 700;
  text-wrap: balance;
  line-height: 1.3;
}
.i2l-workspace h1 {
  font-size: clamp(26px, 2vw, 32px);
  letter-spacing: -0.025em;
}
.i2l-workspace h2,
.i2l-workspace-portal h2 {
  font-size: 18px;
  letter-spacing: -0.015em;
}
.i2l-workspace p {
  max-inline-size: 72ch;
  text-wrap: pretty;
}
.i2l-workspace :where(input, textarea, select, button),
.i2l-workspace-portal :where(input, textarea, select, button) {
  font: inherit;
}
.i2l-workspace a,
.i2l-workspace-portal a {
  color: inherit;
  text-underline-offset: 0.2em;
}
.i2l-workspace :where(button, a, summary),
.i2l-workspace-portal :where(button, a, summary) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.i2l-workspace ::selection,
.i2l-workspace-portal ::selection {
  background: #d5eef0;
  color: var(--ws-ink);
}
.i2l-workspace :where(input, textarea) {
  caret-color: var(--ws-ink);
}
.i2l-workspace :where(input, textarea)::placeholder {
  color: var(--ws-muted);
  opacity: 1;
}
.i2l-workspace :focus-visible,
.i2l-workspace-portal :focus-visible {
  outline: 2px solid var(--ws-focus);
  outline-offset: 3px;
}
.i2l-workspace ::-webkit-scrollbar,
.i2l-workspace-portal ::-webkit-scrollbar {
  inline-size: 10px;
  block-size: 10px;
}
.i2l-workspace ::-webkit-scrollbar-thumb,
.i2l-workspace-portal ::-webkit-scrollbar-thumb {
  background: #b9c1c8;
  border: 3px solid var(--ws-canvas);
  border-radius: 6px;
}
.i2l-workspace :where(button, input, textarea, select, [data-slot="button"]),
.i2l-workspace-portal :where(button, [role="option"]) {
  corner-shape: squircle;
}
.i2l-workspace .ws-control,
.i2l-workspace-portal .ws-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  block-size: var(--ws-control);
  min-block-size: var(--ws-control);
  max-block-size: var(--ws-control);
  border-radius: var(--ws-control-radius);
  border-width: 1px;
  border-style: solid;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
  transition-property: background-color, border-color, color, box-shadow, scale;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.i2l-workspace .ws-control[data-size="icon"],
.i2l-workspace-portal .ws-control[data-size="icon"] {
  inline-size: 44px;
  padding: 0;
}
.i2l-workspace .ws-control svg,
.i2l-workspace-portal .ws-control svg {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  stroke-width: 1.8;
}
.i2l-workspace .ws-control:hover,
.i2l-workspace-portal .ws-control:hover {
  transition-duration: 140ms;
}
.i2l-workspace .ws-control:active:not(:disabled),
.i2l-workspace-portal .ws-control:active:not(:disabled) {
  scale: 0.96;
  transition-duration: 80ms;
}
.i2l-workspace .ws-control:disabled,
.i2l-workspace-portal .ws-control:disabled {
  opacity: 0.5;
  cursor: default;
}
.i2l-workspace .ws-control[data-variant="outline"],
.i2l-workspace-portal .ws-control[data-variant="outline"] {
  background: var(--ws-surface);
  border-color: var(--ws-input);
  color: var(--ws-ink);
}
.i2l-workspace .ws-control[data-variant="outline"]:hover,
.i2l-workspace-portal .ws-control[data-variant="outline"]:hover {
  background: var(--ws-hover);
  border-color: var(--ws-focus);
}
.i2l-workspace .ws-control[data-variant="ghost"] {
  background: transparent;
  border-color: transparent;
}
.i2l-workspace .ws-control[data-variant="ghost"]:hover {
  background: var(--ws-hover);
}
.i2l-workspace .ws-control[data-variant="default"],
.i2l-workspace-portal .ws-control[data-variant="default"] {
  background: var(--ws-ink);
  color: #fff;
  border-color: var(--ws-ink);
}
.i2l-workspace .ws-control[data-variant="default"]:hover {
  background: #3b4249;
}
.i2l-workspace [dir="rtl"] .ws-back svg,
.i2l-workspace[dir="rtl"] .ws-back svg,
.i2l-workspace[dir="rtl"] [data-icon="inline-end"] {
  rotate: 180deg;
}
.ws-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ws-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-inline-size: 0;
}
.ws-select {
  min-inline-size: 0;
  max-inline-size: 100%;
  background: var(--ws-surface);
  color: var(--ws-ink);
  border: 1px solid var(--ws-input);
  text-align: start;
  cursor: pointer;
}
.ws-select:hover {
  border-color: var(--ws-focus);
  background: var(--ws-hover);
}
.ws-select[aria-invalid="true"] {
  border-color: var(--destructive);
}
.ws-select > [data-radix-select-value],
.ws-select > span:first-child {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ws-select-popup {
  z-index: 70;
  min-inline-size: var(--radix-select-trigger-width);
  max-inline-size: min(520px, calc(100vw - 24px));
  max-block-size: var(--radix-select-content-available-height);
  overflow: hidden;
  border: 1px solid var(--ws-line);
  border-radius: 13px;
  padding: 4px;
  background: var(--ws-surface);
  box-shadow:
    0 8px 28px #2023261a,
    0 2px 5px #2023260a;
  transform-origin: var(--radix-select-content-transform-origin);
  corner-shape: squircle;
  animation: ws-popup-in 160ms cubic-bezier(0.2, 0, 0, 1);
}
.ws-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  outline: none;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
  overflow-wrap: anywhere;
  corner-shape: squircle;
  transition: background-color 140ms ease-out;
}
.ws-select-option[data-highlighted] {
  background: var(--ws-hover);
}
.ws-select-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ws-input);
}
.ws-select-option[data-disabled] {
  opacity: 0.45;
  cursor: default;
}
.ws-select-option [data-radix-select-item-text] {
  min-inline-size: 0;
}
.ws-select-option svg {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
}
.ws-select-scroll {
  display: grid;
  place-items: center;
  block-size: 24px;
  background: var(--ws-surface);
}
.ws-select-scroll svg {
  inline-size: 16px;
  block-size: 16px;
}
.ws-panel {
  min-inline-size: 0;
  background: var(--ws-surface);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  corner-shape: squircle;
}
.ws-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 64px;
  padding: 16px;
  border-block-end: 1px solid var(--ws-line);
}
.ws-panel-heading > div:first-child {
  min-inline-size: 0;
}
.ws-panel-heading p {
  margin-block-start: 6px;
  color: var(--ws-muted);
  font-size: 14px;
  line-height: 1.5;
}
.ws-panel-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-inline-size: 0;
  padding: 16px;
}
.ws-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-block-end: 24px;
}
.ws-page-heading > div {
  min-inline-size: 0;
}
.ws-page-heading p {
  margin-block-start: 6px;
  color: var(--ws-muted);
}
.ws-back {
  margin-block-end: 16px;
}
.ws-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}
.ws-field > [data-slot="field-label"] {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
}
.ws-field
  :where(
    [data-slot="input"],
    input:not([type="checkbox"]):not([type="hidden"]):not([aria-hidden="true"]),
    select:not([aria-hidden="true"])
  ) {
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 44px;
  min-block-size: 44px;
  border: 1px solid var(--ws-input);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--ws-surface);
  line-height: 22px;
  font-size: 16px;
  transition:
    border-color 160ms ease-out,
    box-shadow 160ms ease-out;
}
.ws-field textarea {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 100px;
  border: 1px solid var(--ws-input);
  border-radius: 8px;
  padding: 12px;
  background: var(--ws-surface);
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}
.ws-field [data-slot="field-description"] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ws-muted);
}
.ws-field-error {
  font-size: 14px;
  color: var(--destructive);
}
.ws-field [aria-invalid="true"] {
  border-color: var(--destructive);
}
.ws-fields-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ws-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-inline-size: 0;
}
.ws-check > [data-slot="checkbox"] {
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border: 0;
  border-radius: 8px;
  margin: 0;
  background: transparent;
}
.ws-check > [data-slot="field-content"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-inline-size: 0;
}
.ws-check [data-slot="field-label"] {
  display: flex;
  align-items: flex-start;
  min-block-size: 44px;
  padding-block: 11px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
}
.ws-check [data-slot="field-description"] {
  color: var(--ws-muted);
  font-size: 14px;
  line-height: 1.5;
}
.ws-notice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-inline-size: 0;
  padding: 16px;
  border: 1px solid var(--ws-line);
  border-radius: 17px;
  background: var(--ws-surface);
  margin-block-end: 16px;
  corner-shape: squircle;
}
.ws-notice > svg {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  transform: none;
}
.ws-notice [data-slot="alert-description"] {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ws-notice[data-variant="destructive"] {
  border-color: #dba8b0;
  background: #fff9fa;
  color: var(--destructive);
}
.ws-disclosure {
  border: 1px solid var(--ws-line);
  border-radius: 17px;
  background: var(--ws-canvas);
  padding: 8px;
  corner-shape: squircle;
}
.ws-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  list-style: none;
  cursor: pointer;
  corner-shape: squircle;
  transition: background-color 160ms ease-out;
}
.ws-disclosure > summary::-webkit-details-marker,
.ws-summary-small > summary::-webkit-details-marker {
  display: none;
}
.ws-disclosure > summary:hover {
  background: var(--ws-hover);
}
.ws-disclosure > summary > span {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}
.ws-disclosure > summary strong {
  font-size: 15px;
  font-weight: 600;
}
.ws-disclosure > summary span span {
  font-size: 14px;
  color: var(--ws-muted);
}
.ws-disclosure > summary svg,
.ws-summary-small > summary svg {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  transition: rotate 180ms cubic-bezier(0.2, 0, 0, 1);
}
.ws-disclosure[open] > summary svg,
.ws-summary-small[open] > summary svg {
  rotate: 180deg;
}
.ws-disclosure-content {
  padding: 16px 8px 8px;
  display: grid;
  gap: 16px;
  min-inline-size: 0;
}
.ws-loading {
  padding: 24px;
  color: var(--ws-muted);
}
/* One app frame: header/footer dividers cross the rail, context and task pane. */
.ws-shell {
  --ws-nav-size: 312px;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) 64px;
  block-size: 100dvh;
  min-block-size: 400px;
  overflow: hidden;
  background: var(--ws-canvas);
}
.ws-shell[data-context="false"] {
  --ws-nav-size: 64px;
}
.ws-shell-header {
  display: flex;
  min-inline-size: 0;
  border-block-end: 1px solid var(--ws-line);
  background: var(--ws-canvas);
}
.ws-shell-brand {
  display: flex;
  align-items: stretch;
  inline-size: var(--ws-nav-size);
  flex: none;
  border-inline-end: 1px solid var(--ws-line);
  color: inherit;
  text-decoration: none !important;
  overflow: hidden;
}
.ws-wing-cell {
  display: grid;
  place-items: center;
  inline-size: 64px;
  flex: none;
  border-inline-end: 1px solid var(--ws-line);
}
.ws-wing-cell img {
  inline-size: 30px;
  block-size: 30px;
  object-fit: contain;
}
.ws-wordmark-cell {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  min-inline-size: 0;
  padding-inline: 16px;
}
.ws-wordmark-cell img {
  display: block;
  inline-size: 198px;
  max-inline-size: 100%;
  block-size: auto;
}
.ws-wordmark-cell > span {
  font-size: 13px;
  color: var(--ws-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-shell[data-context="false"] .ws-wordmark-cell {
  display: none;
}
.ws-shell-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
  flex: 1;
  padding-inline: 24px;
}
.ws-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
  font-size: 14px;
}
.ws-breadcrumb > span:first-child {
  color: var(--ws-muted);
}
.ws-breadcrumb > strong {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
  min-inline-size: 0;
}
.ws-simulation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-block-size: 26px;
  padding: 3px 7px;
  border: 1px solid var(--ws-line);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  corner-shape: squircle;
}
.ws-shell-body {
  display: flex;
  min-block-size: 0;
  min-inline-size: 0;
}
.ws-navigation-wide {
  display: flex;
  inline-size: var(--ws-nav-size);
  flex: none;
  min-block-size: 0;
  border-inline-end: 1px solid var(--ws-line);
  background: #f3f4f6;
}
.ws-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  inline-size: 64px;
  align-items: center;
  padding: 16px 8px;
  flex: none;
  overflow: auto;
  border-inline-end: 1px solid var(--ws-line);
}
.ws-rail-link {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  min-block-size: 44px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  corner-shape: squircle;
  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    scale 120ms ease-out;
}
.ws-rail-link svg {
  inline-size: 20px;
  block-size: 20px;
  stroke-width: 1.8;
}
.ws-rail-link:hover {
  background: #e8ebee;
}
.ws-rail-link:active {
  scale: 0.96;
}
.ws-rail-link[aria-current="page"] {
  background: #e0e5e9;
  border-color: #b7c3cc;
  color: #252a2e;
}
.ws-context {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1;
  min-block-size: 0;
}
.ws-context-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ws-muted);
  padding: 20px 20px 16px;
  overflow-wrap: anywhere;
}
.ws-context-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  min-block-size: 0;
  scrollbar-gutter: stable;
  border-block: 1px solid var(--ws-line);
  padding: 16px 12px;
}
.ws-context-group + .ws-context-group {
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--ws-line);
}
.ws-context-group h2 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ws-muted);
  padding-inline: 12px;
  margin-block-end: 8px;
}
.ws-context-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
  min-inline-size: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  margin-block: 4px;
  text-align: start;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  corner-shape: squircle;
  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    scale 120ms ease-out;
}
.ws-context-link > svg {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  stroke-width: 1.8;
}
.ws-context-link > span {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}
.ws-context-link small {
  font-size: 12px;
  line-height: 18px;
  color: var(--ws-muted);
}
.ws-context-link:hover {
  background: #e8ebee;
}
.ws-context-link:active {
  scale: 0.98;
}
.ws-context-link[aria-current="page"] {
  background: #e4e8eb;
  font-weight: 600;
}
.ws-context-link[aria-disabled="true"],
.ws-rail-link[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}
.ws-shell-main {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 32px;
  background: var(--ws-canvas);
}
.ws-shell-main:focus-visible {
  outline-offset: -4px;
}
.ws-shell-footer {
  display: flex;
  min-inline-size: 0;
  border-block-start: 1px solid var(--ws-line);
  background: var(--ws-canvas);
}
.ws-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: var(--ws-nav-size);
  flex: none;
  min-inline-size: 0;
  padding: 10px;
  border: 0;
  border-inline-end: 1px solid var(--ws-line);
  background: #f3f4f6;
  text-align: start;
  color: var(--ws-ink);
}
button.ws-identity {
  cursor: pointer;
  transition: background-color 180ms ease-out;
}
button.ws-identity:hover {
  background: #e8ebee;
}
.ws-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  border: 1px solid var(--ws-line);
  border-radius: 8px;
  background: #e9edf0;
  font-size: 14px;
  corner-shape: squircle;
}
.ws-identity-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}
.ws-identity-text strong {
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-identity-text > span {
  font-size: 12px;
  line-height: 19px;
  color: var(--ws-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-identity > svg {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  margin-inline-start: auto;
}
.ws-shell[data-context="false"] .ws-identity-text,
.ws-shell[data-context="false"] .ws-identity > svg {
  display: none;
}
.ws-shell-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
  min-inline-size: 0;
  padding-inline: 24px;
  color: var(--ws-muted);
  font-size: 12px;
}
.ws-shell-footnote > span {
  white-space: nowrap;
}
.ws-account-content {
  z-index: 70;
  max-inline-size: min(340px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid var(--ws-line);
  border-radius: 25px;
  background: var(--ws-surface);
  box-shadow: 0 8px 28px #2023261a;
  corner-shape: squircle;
  animation: ws-popup-in 160ms ease-out;
}
.ws-account-content > p {
  font-size: 13px;
  color: var(--ws-muted);
  margin-block: 4px 16px;
}
.ws-tooltip {
  z-index: 75;
  max-inline-size: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #252a2e;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  box-shadow: 0 4px 12px #2023261a;
  corner-shape: squircle;
}
.ws-skip {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 90;
  padding: 10px 14px;
  transform: translateY(-200%);
  border: 1px solid var(--ws-line);
  border-radius: 8px;
  background: var(--ws-surface);
}
.ws-skip:focus {
  transform: none;
}
.ws-drawer-trigger {
  display: none !important;
}
.ws-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #20232652;
  animation: ws-fade-in 160ms ease-out;
}
.ws-navigation-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 65;
  display: flex;
  flex-direction: column;
  gap: 0;
  inline-size: min(360px, calc(100vw - 24px));
  background: var(--ws-canvas);
  border-inline-end: 1px solid var(--ws-line);
  box-shadow: 8px 0 32px #20232621;
  overflow: auto;
  animation: ws-drawer-in 200ms cubic-bezier(0.2, 0, 0, 1);
}
.ws-navigation-drawer[dir="rtl"] {
  --ws-slide: 16px;
  box-shadow: -8px 0 32px #20232621;
}
.ws-drawer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-block-end: 1px solid var(--ws-line);
}
.ws-drawer-heading > div {
  min-inline-size: 0;
}
.ws-drawer-heading img {
  display: block;
  inline-size: 190px;
  max-inline-size: 100%;
  block-size: auto;
  margin-block-end: 8px;
}
.ws-drawer-heading h2 {
  font-size: 14px;
  font-weight: 500;
  color: var(--ws-muted);
}
.ws-drawer-sections {
  padding: 12px;
  border-block-end: 1px solid var(--ws-line);
}
.ws-navigation-drawer .ws-context-scroll {
  overflow: visible;
  border: 0;
  scrollbar-gutter: auto;
}
.ws-navigation-drawer .ws-context-title {
  padding-block-end: 0;
}
/* Saved sessions: row and heading share their exact column insets. */
.ws-sessions {
  container-type: inline-size;
}
.ws-sessions,
.ws-session-setup {
  background: transparent;
}
/* The existing setup controller retains its data and capture lifecycle. These
   rules give its DOM the same presentation contract as the extracted views. */
.ws-native-setup .session-setup {
  color: var(--ws-ink);
  --ink: var(--ws-ink);
  --paper: var(--ws-surface);
  --rule: var(--ws-line);
}
.ws-native-setup .session-setup > p {
  color: var(--ws-muted);
  font-size: 14px;
  margin-block-end: 12px;
}
.ws-native-setup .session-setup > [role="status"] {
  margin-block-end: 20px;
}
.ws-native-setup .session-setup .setup-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 24px;
}
.ws-native-setup .session-setup .setup-form {
  gap: 20px;
}
.ws-native-setup .session-setup .setup-form > fieldset,
.ws-native-setup .session-setup .setup-brief {
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  corner-shape: squircle;
  background: var(--ws-surface);
  padding: var(--ws-inset);
  min-inline-size: 0;
}
.ws-native-setup .session-setup .setup-form > fieldset > legend {
  float: inline-start;
  inline-size: 100%;
  padding: 0;
  margin-block-end: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.ws-native-setup .session-setup .setup-form > fieldset > :not(legend) {
  clear: both;
}
.ws-native-setup .session-setup label {
  color: var(--ws-ink);
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  text-align: start;
}
.ws-native-setup .ws-native-select-proxy {
  position: relative;
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
}
.ws-native-setup .ws-native-select-proxy > .ws-select {
  inline-size: 100%;
  justify-content: space-between;
}
.ws-native-setup .ws-native-select-proxy > select[aria-hidden="true"] {
  min-block-size: 0;
  block-size: 1px;
  max-block-size: 1px;
  padding: 0;
  border: 0;
}
.ws-native-setup
  .session-setup
  :is(
    input:not([type="checkbox"]):not([type="hidden"]),
    select:not([aria-hidden="true"])
  ) {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 44px;
  min-block-size: 44px;
  max-block-size: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ws-input);
  border-radius: var(--ws-control-radius);
  corner-shape: squircle;
  color: var(--ws-ink);
  background: var(--ws-surface);
  font: inherit;
  line-height: 22px;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}
.ws-native-setup .session-setup .setup-fields {
  gap: 16px;
  margin-block: 0 12px;
}
.ws-native-setup .session-setup .setup-role {
  grid-template-columns: minmax(0, 1.6fr) minmax(72px, 0.8fr) minmax(0, 1fr);
  gap: 12px;
  padding-block: 16px;
  margin-block: 8px 16px;
  border-block-end: 1px solid var(--ws-line);
}
.ws-native-setup .session-setup .setup-role > button {
  grid-column: 1 / -1;
  justify-self: start;
}
.ws-native-setup
  .session-setup
  :is(.setup-hint, fieldset > p, .capture-setup > p) {
  color: var(--ws-muted);
  font-size: 14px;
  line-height: 1.6;
}
.ws-native-setup .session-setup label:has(input[type="checkbox"]) {
  position: relative;
  align-items: flex-start;
  gap: 10px;
  min-block-size: 44px;
  padding-block: 11px;
  font-weight: 500;
  line-height: 22px;
}
.ws-native-setup .session-setup input[type="checkbox"] {
  appearance: auto;
  order: -1;
  flex: 0 0 20px;
  inline-size: 20px;
  block-size: 20px;
  min-block-size: 20px;
  margin: 1px 0 0;
  accent-color: var(--ws-ink);
  cursor: pointer;
}
.ws-native-setup .session-setup :is(button, .setup-console-link) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 10px 14px;
  color: var(--ws-ink);
  border: 1px solid var(--ws-input);
  background: var(--ws-surface);
  border-radius: var(--ws-control-radius);
  corner-shape: squircle;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  text-align: center;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    scale 180ms cubic-bezier(0.2, 0, 0, 1);
}
.ws-native-setup
  .session-setup
  :is(button, .setup-console-link):hover:not(:disabled) {
  background: var(--ws-hover);
  border-color: var(--ws-focus);
}
.ws-native-setup
  .session-setup
  :is(button, .setup-console-link):active:not(:disabled) {
  scale: 0.97;
  transition-duration: 80ms;
}
.ws-native-setup .session-setup button:disabled {
  opacity: 0.5;
}
.ws-native-setup
  .session-setup
  :is(button, input, select, summary):focus-visible {
  outline: 2px solid var(--ws-focus);
  outline-offset: 3px;
}
.ws-native-setup .session-setup button.primary {
  background: var(--ws-ink);
  border-color: var(--ws-ink);
  color: #fff;
}
.ws-native-setup .session-setup button.primary:hover:not(:disabled) {
  background: #3b4249;
}
.ws-native-setup .session-setup :is(.setup-actions, .capture-actions) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  margin-block: 16px 0;
}
.ws-native-setup .session-setup .setup-brief {
  position: sticky;
  inset-block-start: 16px;
  max-block-size: calc(100dvh - 184px);
  overflow: auto;
  scrollbar-gutter: stable;
}
.ws-native-setup .session-setup .setup-brief h3 {
  font-size: 18px;
  margin-block-end: 16px;
}
.ws-native-setup .session-setup .setup-brief h4 {
  font-size: 15px;
  line-height: 1.5;
  margin-block: 20px 6px;
}
.ws-native-setup .session-setup .setup-brief :is(p, li) {
  font-size: 14px;
  line-height: 1.65;
}
.ws-native-setup .session-setup .setup-brief button {
  inline-size: 100%;
  margin-block-start: 20px;
}
.ws-native-setup .session-setup .setup-brief:fullscreen {
  position: static;
  max-block-size: none;
  padding: clamp(24px, 5vw, 80px);
}
.ws-native-setup .session-setup .capture-setup {
  border: 0;
  padding-block-start: 0;
}
.ws-native-setup .session-setup .capture-setup h3 {
  font-size: 16px;
  margin-block-end: 8px;
}
.ws-native-setup .session-setup .capture-inputs {
  gap: 16px;
  margin-block-start: 16px;
}
.ws-native-setup .session-setup details {
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-control-radius);
  corner-shape: squircle;
  margin-block: 16px 0;
  padding-inline: 12px;
}
.ws-native-setup .session-setup summary {
  padding-block: 12px;
  font-size: 14px;
  line-height: 22px;
}
.ws-native-setup .session-setup .setup-output {
  gap: 12px;
}
.ws-native-setup .session-setup [role="alert"]:not(:empty) {
  color: var(--destructive);
  background: #fff4f5;
  border: 1px solid #e8bbc1;
  border-radius: var(--ws-control-radius);
  padding: 12px;
}
@media (max-width: 1100px) {
  .ws-native-setup .session-setup .setup-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ws-native-setup .session-setup .setup-brief {
    position: static;
    max-block-size: none;
  }
}
@media (max-width: 600px) {
  .ws-native-setup
    .session-setup
    :is(.setup-fields, .setup-role, .capture-inputs) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ws-list-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 0;
  min-inline-size: 0;
}
.ws-list-tools > .ws-select {
  flex: 0 1 240px;
}
.ws-search {
  position: relative;
  min-inline-size: 0;
  flex: 1;
}
.ws-search > svg {
  position: absolute;
  inset-inline-start: 13px;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 18px;
  block-size: 18px;
  color: var(--ws-muted);
  pointer-events: none;
}
.ws-search > input {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 44px;
  border: 1px solid var(--ws-input);
  border-radius: 8px;
  padding: 10px 12px;
  padding-inline-start: 44px;
  background: var(--ws-surface);
  font-size: 15px;
  line-height: 22px;
  transition:
    border-color 160ms ease-out,
    box-shadow 160ms ease-out;
}
.ws-search > input:hover {
  border-color: var(--ws-focus);
}
.ws-result-count {
  padding: 12px 16px;
  color: var(--ws-muted);
  font-size: 12px;
}
.ws-session-table-wrap {
  padding: 0 16px 16px;
}
.ws-session-table {
  inline-size: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
}
.ws-session-table :where(th, td) {
  padding: 16px;
  text-align: start;
  vertical-align: middle;
  border-block-end: 1px solid var(--ws-line);
  overflow-wrap: anywhere;
}
.ws-session-table th {
  font-size: 12px;
  font-weight: 500;
  color: var(--ws-muted);
  padding-block: 12px;
}
.ws-session-table td:first-child {
  inline-size: 38%;
}
.ws-session-table td:last-child {
  white-space: nowrap;
}
.ws-session-table tbody tr:last-child td {
  border-block-end: 0;
}
.ws-session-table tbody tr {
  transition: background-color 160ms ease-out;
}
.ws-session-table tbody tr:hover {
  background: var(--ws-canvas);
}
.ws-session-table td > p {
  font-size: 13px;
  color: var(--ws-muted);
  margin-block-start: 6px;
}
.ws-session-table strong {
  font-weight: 600;
}
.ws-status {
  display: inline-flex;
  align-items: center;
  min-block-size: 26px;
  padding: 3px 7px;
  border: 1px solid var(--ws-line);
  border-radius: 5px;
  background: #f0f2f4;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  corner-shape: squircle;
}
.ws-status[data-state="running"] {
  background: #e6eee9;
  border-color: #b9cbbf;
  color: #31533d;
}
.ws-status[data-state="paused"] {
  background: #f4eee2;
  border-color: #dbcba9;
  color: #70572b;
}
.ws-session-cards {
  display: none;
  list-style: none;
  padding: 0 16px 16px;
}
.ws-session-cards > li {
  padding: 16px 0;
  border-block-start: 1px solid var(--ws-line);
  min-inline-size: 0;
}
.ws-session-card-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.ws-session-card-title > strong {
  font-weight: 600;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.ws-session-cards dl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-block: 12px;
}
.ws-session-cards dt {
  font-size: 12px;
  color: var(--ws-muted);
  margin-block-end: 2px;
}
.ws-session-cards dd {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ws-session-cards li > p {
  font-size: 13px;
  color: var(--ws-muted);
  margin-block-end: 12px;
}
.ws-session-cards li > .ws-control {
  inline-size: 100%;
  justify-content: space-between;
}
.ws-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
}
.ws-empty > svg {
  inline-size: 26px;
  block-size: 26px;
  color: var(--ws-muted);
  margin-block-end: 4px;
}
.ws-empty > p {
  font-size: 14px;
  color: var(--ws-muted);
}
.ws-empty > .ws-control {
  margin-block-start: 8px;
}
/* Setup keeps real controller-owned capabilities inside a readable form. */
.ws-setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 290px);
  gap: 24px;
  align-items: start;
}
.ws-setup-form,
.ws-setup-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-inline-size: 0;
}
.ws-setup-fields {
  padding: 0;
  border: 0;
  margin: 0;
}
.ws-setup-fields:disabled {
  opacity: 0.7;
}
.ws-setup-aside {
  min-inline-size: 0;
  position: sticky;
  inset-block-start: 0;
}
.ws-summary-small {
  border: 0;
}
.ws-summary-small > summary {
  display: none;
}
.ws-summary-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-inline-size: 0;
}
.ws-summary-list > div {
  min-inline-size: 0;
}
.ws-summary-list dt {
  font-size: 12px;
  color: var(--ws-muted);
  margin-block-end: 4px;
}
.ws-summary-list dd {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ws-setup-actions {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
  padding: 8px;
  border: 1px solid var(--ws-line);
  border-radius: 17px;
  background: var(--ws-surface);
  box-shadow: 0 4px 20px #2023260a;
  corner-shape: squircle;
}
.ws-setup-actions > .ws-actions {
  justify-content: flex-end;
}
.ws-setup-actions > span {
  font-size: 12px;
  color: var(--ws-muted);
  padding-inline: 8px;
}
.ws-created {
  margin-block-end: 24px;
}
.ws-created .ws-panel-heading {
  justify-content: flex-start;
}
.ws-created .ws-panel-heading > svg {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
}
.ws-created .ws-created-status {
  margin-block: 0 3px;
  font-size: 13px;
  color: var(--ws-muted);
}
.ws-created-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ws-created-facts dt {
  font-size: 12px;
  color: var(--ws-muted);
  margin-block-end: 4px;
}
.ws-created-facts dd {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.ws-created-facts bdi {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
}
.ws-created .ws-notice {
  margin: 0;
}
.ws-created-actions > .ws-control {
  flex: 0 1 auto;
}
@container (max-width:760px) {
  .ws-session-table-wrap {
    display: none;
  }
  .ws-session-cards {
    display: block;
  }
  .ws-list-tools {
    flex-wrap: wrap;
  }
  .ws-list-tools > .ws-search {
    flex-basis: 100%;
  }
  .ws-list-tools > .ws-select {
    flex-basis: 100%;
  }
}
@media (max-width: 1279px) {
  .ws-setup-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ws-setup-aside {
    position: static;
    order: -1;
  }
  .ws-summary-small > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 44px;
    padding: 10px 14px;
    list-style: none;
    border: 1px solid var(--ws-input);
    border-radius: 8px;
    background: var(--ws-surface);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .ws-summary-small > .ws-panel {
    margin-block-start: 12px;
  }
}
@media (max-width: 1100px) {
  .ws-shell {
    --ws-nav-size: 64px;
  }
  .ws-wordmark-cell,
  .ws-navigation-wide > .ws-context,
  .ws-context-toggle,
  .ws-shell .ws-identity-text,
  .ws-shell .ws-identity > svg {
    display: none !important;
  }
  .ws-drawer-trigger {
    display: inline-flex !important;
  }
  .ws-shell-topbar {
    padding-inline: 16px;
  }
  .ws-shell-main {
    padding: 24px;
  }
  .ws-breadcrumb > span:first-child,
  .ws-breadcrumb > span:nth-child(2) {
    display: none;
  }
}
@media (max-width: 700px) {
  .ws-shell {
    --ws-nav-size: 0px;
    grid-template-rows: auto minmax(0, 1fr) 56px;
  }
  .ws-shell-header {
    min-block-size: 64px;
  }
  .ws-shell-brand {
    display: flex;
    inline-size: 52px;
    border: 0;
  }
  .ws-shell-brand .ws-wing-cell {
    inline-size: 52px;
    border: 0;
  }
  .ws-navigation-wide {
    display: none;
  }
  .ws-shell-topbar {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ws-breadcrumb {
    flex: 1;
    min-inline-size: 8ch;
    font-size: 14px;
  }
  .ws-topbar-actions {
    gap: 8px;
    max-inline-size: 100%;
  }
  .ws-topbar-actions .ws-simulation {
    display: none;
  }
  .ws-shell-main {
    padding: 20px 16px;
  }
  .ws-shell-footer > .ws-identity {
    inline-size: 64px;
    display: flex;
  }
  .ws-shell-footnote {
    padding-inline: 12px;
    font-size: 11px;
  }
  .ws-shell-footnote > span {
    white-space: normal;
  }
  .ws-shell-footnote > .ws-actions {
    gap: 4px;
  }
  .ws-page-heading {
    align-items: flex-start;
  }
  .ws-page-heading > .ws-actions {
    inline-size: 100%;
  }
  .ws-page-heading > .ws-actions > .ws-control {
    flex: 1;
  }
  .ws-fields-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ws-created-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .ws-setup-actions > .ws-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .ws-setup-actions .ws-control {
    inline-size: 100%;
  }
  .ws-panel-heading {
    gap: 12px;
  }
  .ws-panel-heading > .ws-actions {
    margin-inline-start: auto;
  }
  .ws-created-actions > .ws-control {
    flex: 1;
    min-inline-size: 0;
  }
}
@media (max-width: 380px) {
  .ws-topbar-actions {
    inline-size: 100%;
    justify-content: flex-end;
  }
  .ws-shell-topbar {
    row-gap: 4px;
  }
  .ws-created-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@keyframes ws-popup-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ws-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ws-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes ws-popup-out {
  to {
    opacity: 0;
    transform: translateY(-3px) scale(0.98);
  }
}
@keyframes ws-drawer-out {
  to {
    opacity: 0;
    transform: translateX(var(--ws-slide, -12px));
  }
}
.ws-select-popup[data-state="closed"],
.ws-account-content[data-state="closed"] {
  animation: ws-popup-out 120ms ease-out;
}
.ws-navigation-drawer[data-state="closed"] {
  animation: ws-drawer-out 140ms ease-out;
}
.ws-drawer-overlay[data-state="closed"],
.ws-tooltip[data-state="closed"] {
  animation: ws-fade-out 120ms ease-out;
}
@keyframes ws-drawer-in {
  from {
    opacity: 0;
    transform: translateX(var(--ws-slide, -16px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .i2l-workspace *,
  .i2l-workspace-portal * {
    animation: none !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .i2l-workspace :active,
  .i2l-workspace-portal :active {
    scale: 1 !important;
  }
}