@layer twin-components {
  :where([data-twin-component], [data-twin-component] *, [data-twin-icon]) {
    box-sizing: border-box;
  }

  :where([data-twin-component]) { min-inline-size: 0; }

  :where([data-twin-icon], [data-twin-component] .icon) {
    display: inline-block;
    inline-size: var(--twin-icon-size, 1em);
    block-size: var(--twin-icon-size, 1em);
    flex-shrink: 0;
    vertical-align: -0.125em;
  }

  :where(
    [data-twin-component="plan-action"] .button,
    [data-twin-component="account-action"] .button,
    [data-twin-component="entitlement-actions"] .entitlement-configure,
    [data-twin-component="entitlement-actions"] button,
    [data-twin-component="setup-form"] button,
    [data-twin-component="setup-connection"] button,
    [data-twin-component="run-form"] button
  ) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-block-size: 2.5em;
    max-inline-size: 100%;
    padding: 0.6em 1em;
    border: 1px solid var(--twin-control-border, currentColor);
    border-radius: var(--twin-control-radius, 0.375rem);
    background: var(--twin-control-bg, transparent);
    color: var(--twin-control-text, inherit);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  :where([data-twin-component] :is(button, a, input, select, textarea):focus-visible) {
    outline: 2px solid var(--twin-focus-color, currentColor);
    outline-offset: 3px;
  }

  :where([data-twin-component] :disabled) { opacity: 0.55; cursor: not-allowed; }

  :where(
    [data-twin-component="input-field"],
    [data-twin-component="setup-form"] .input-field,
    [data-twin-component="plan-action"] .plan-action-schedule label
  ) { display: grid; gap: 0.375em; }

  :where(
    [data-twin-component="input-field"] :is(input, select, textarea),
    [data-twin-component="setup-form"] .input-field :is(input, select, textarea),
    [data-twin-component="plan-action"] .plan-action-schedule input
  ) {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: 2.5em;
    padding: 0.5em 0.625em;
    border: 1px solid var(--twin-control-border, currentColor);
    border-radius: var(--twin-control-radius, 0.375rem);
    background: var(--twin-control-bg, transparent);
    color: inherit;
    font: inherit;
  }

  :where([data-twin-component="input-check"]) { display: flex; align-items: center; gap: 0.5em; }
  :where([data-twin-component="input-check"] input) { flex-shrink: 0; }
  :where([data-twin-component="input-help"]) { margin-block: 0.375em 0.875rem; font-size: 0.875em; }
  :where([data-twin-component="setup-form"] > :is(.input-field, .input-check), [data-twin-component="run-form"] > :is(.input-field, .input-check)) { margin-block-end: 0.875rem; }
  :where([data-twin-component="setup-form"] button, [data-twin-component="run-form"] button) { justify-self: start; }
  :where([data-twin-component="setup-connection"], [data-twin-component="entitlement-actions"], [data-twin-component="account-action"]) { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
  :where([data-twin-component="setup-connection"] .setup-form) { flex: 1 1 16rem; }
  :where([data-twin-component="plan-action"] .plan-action-schedule) { display: grid; gap: 0.75rem; margin-block-end: 0.75rem; }

  :where([data-twin-schedule]) { display: grid; gap: 0.375rem; inline-size: min(100%, 26rem); margin-block-end: 1rem; }
  :where([data-twin-schedule] .schedule-time) { grid-template-columns: auto minmax(0, 9rem); align-items: center; justify-content: start; gap: 0.75rem; }
  :where([data-twin-schedule] .schedule-zone-summary) { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.875em; }
  :where([data-twin-schedule] [data-schedule-zone-label]) { min-inline-size: 0; overflow-wrap: anywhere; }
  :where([data-twin-schedule] [data-schedule-zone-toggle]) { min-block-size: 2.75rem; padding: 0.25em; border: 0; border-radius: var(--twin-control-radius, 0.375rem); background: transparent; color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
  :where([data-twin-schedule] :is([data-schedule-zone-toggle], [data-schedule-zone-editor])[hidden]) { display: none !important; }

  :where([data-twin-component="run-thread"] .spread) { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; }
  :where([data-twin-component="run-thread"] .run-thread) { display: grid; gap: 0.75rem; margin: 0; padding: 0; }
  :where([data-twin-component="run-thread"] .run-thread-item) { display: flex; align-items: flex-start; gap: 0.75rem; }
  :where([data-twin-component="run-thread"] .run-activity-icon) { display: inline-flex; align-items: center; gap: 0.25em; flex-shrink: 0; padding-block-start: 0.125em; }
  :where([data-twin-component="run-thread"] .grow) { min-inline-size: 0; flex: 1; overflow-wrap: anywhere; }
  :where([data-twin-component="run-thread"] .feed-when) { display: block; margin-block-start: 0.25em; font-size: 0.8125em; }
  :where([data-twin-component="run-thread"] .run-activity-state) { inline-size: 0.5em; block-size: 0.5em; border: 1px solid currentColor; border-radius: 50%; }
  :where([data-twin-component="run-thread"] .is-done .run-activity-state) { background: currentColor; }
  :where([data-twin-component="run-thread"] .is-running .run-activity-state) { border-style: dashed; }
  :where([data-twin-component="run-thread"] .is-failed .run-activity-state) { border-radius: 0; }
  :where([data-twin-component="run-thread"] .live-dot) { display: inline-block; flex-shrink: 0; inline-size: 0.5em; block-size: 0.5em; margin-block-start: 0.5em; border-radius: 50%; background: currentColor; }
  :where([data-twin-component="run-thread"] .visually-hidden) { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  :where([data-twin-component="result-activity"]) { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
  :where([data-twin-component="result-activity"] li) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5em; }
  :where([data-twin-component="result-activity"] li > span) { min-inline-size: 0; flex: 1; overflow-wrap: anywhere; }
  :where([data-twin-component="result-output"], [data-twin-component="result-section"]) { max-inline-size: 100%; overflow-x: auto; overflow-wrap: anywhere; }
  :where([data-twin-component="result-output"]) { line-height: 1.6; }
  :where([data-twin-component="result-output"] img) { max-inline-size: 100%; block-size: auto; }
  :where([data-twin-component="result-output"] pre) { overflow-x: auto; }
  :where([data-twin-component="result-section"] .result-table) { inline-size: 100%; border-collapse: collapse; text-align: start; }
  :where([data-twin-component="result-section"] .result-table :is(th, td)) { padding: 0.5em 0.625em; border-block-end: 1px solid currentColor; }
  :where([data-twin-component="result-section"] .result-metrics dd) { margin-inline-start: 0; margin-block-end: 0.75em; }
  :where([data-twin-component="result-attachments"]) { display: grid; gap: 0.5em; padding-inline-start: 1.25em; overflow-wrap: anywhere; }
  :where([data-twin-component="result-attachments"] li > a + a) { margin-inline-start: 0.75em; }
  :where([data-twin-component="run-summary"] .banner.warning) { padding: 0.75em; border-inline-start: 3px solid currentColor; }

  :where([data-twin-component="modal"]) { display: none; position: fixed; inset: 0; z-index: 100; overflow-y: auto; padding: 1rem; }
  :where([data-twin-component="modal"]:target) { display: grid; place-items: center; }
  :where([data-twin-component="modal"] .modal-backdrop) { position: fixed; inset: 0; background: rgb(0 0 0 / 35%); }
  :where([data-twin-component="modal"] .modal-card) { position: relative; inline-size: min(100%, 32rem); padding: 1.5rem; border: 1px solid currentColor; border-radius: var(--twin-control-radius, 0.375rem); background: var(--twin-dialog-surface, Canvas); color: var(--twin-dialog-text, CanvasText); }
  :where([data-twin-component="modal"] .modal-title) { margin-block: 0 1rem; padding-inline-end: 2rem; }
  :where([data-twin-component="modal"] .modal-close) { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; font-size: 1.5rem; color: inherit; text-decoration: none; }
}