/*
  Orbit app styles

  Character (keep this when changing things):
  - Large, readable type that grows with the viewport (16px → 19px → 23px).
  - Golden-ratio spacing steps (0.21, 0.38, 0.62, 1, 1.62, 2.89, 4.86) in em,
    so spacing grows with the type.
  - Plain white paper, deep violet-black ink, one vivid blue for primary
    actions, a light grey surface for everything secondary.
  - Two radii: small corners on controls, softer corners on frames, cards
    and dialogs. The phone preview frame keeps its own.
  - Bold buttons with playful emoji icons; "..." means the button opens a
    dialog and never acts on a single click. Two button sizes, by role.
  - Two text modes: app pages read a little denser (1.35, 72ch); the home
    page reads like prose (1.5, 64ch).
  - Containers have one job each: a bordered card is something you act on,
    a grey box is guidance or a note, a plain section is for reading.

  Token groups: --rs-text-*, --rs-space-*, --rs-radius-*, --rs-color-*,
  --rs-focus-*, --rs-dialog-*, --rs-preview-*, --rs-editor-*.
*/
:root {
  /* Text */
  --rs-text-heading-1: 1.62em;
  --rs-text-heading-2: 1.44em;
  --rs-text-heading-3: 1.1em;
  --rs-text-small: 0.82em;
  --rs-text-fine: 0.62em;
  --rs-text-weight-medium: 500;
  --rs-text-weight-bold: 700;
  --rs-text-line-tight: 1.2;
  --rs-text-line-body: 1.5;
  --rs-text-measure: 64ch;
  /* Code stays at a fixed size so long lines fit; it does not grow with the body text. */
  --rs-text-code: 0.94rem;
  --rs-text-mono:
    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;

  /* Space (golden-ratio steps, in em so they grow with the type) */
  --rs-space-3xs: 0.21em;
  --rs-space-2xs: 0.38em;
  --rs-space-xs: 0.62em;
  --rs-space-sm: 0.79em;
  --rs-space-md: 1em;
  --rs-space-lg: 1.62em;
  --rs-space-xl: 2.89em;
  --rs-space-2xl: 4.86em;
  --rs-space-box-sm: 0.21em 0.38em;
  --rs-space-box-md: 0.62em 1em;

  /*
    Layout: two left edges.
    - Chrome edge (nav, footer): the content wrap's gutter, --rs-space-md.
    - Content edge (page heading, sections): the chrome edge plus this inset.
  */
  --rs-layout-content-inset: var(--rs-space-md);

  /* Radius */
  --rs-radius-sm: 0.21em; /* controls: buttons, fields */
  --rs-radius-lg: 0.79em; /* frames: cards, grey boxes, dialogs, editor panes */
  --rs-radius-pill: 999px; /* status badges */

  /* Color */
  --rs-color-ink: rgb(23, 16, 38);
  --rs-color-ink-muted: rgb(88, 82, 102);
  --rs-color-paper: white;
  --rs-color-surface: #f2f4f7;
  --rs-color-surface-hover: #e4e7ed;
  --rs-color-border: #d8d9dd;
  --rs-color-primary: rgb(50, 91, 255);
  --rs-color-primary-hover: rgb(35, 70, 224);
  --rs-color-primary-ink: white;
  --rs-color-primary-soft: rgba(50, 91, 255, 0.18);
  --rs-color-link: rgb(35, 70, 224);
  --rs-color-danger: #f4e6e6;
  --rs-color-danger-hover: #ebd5d5;
  --rs-color-danger-ink: #7f1d1d;
  --rs-color-danger-border: #e2c4c4;
  --rs-color-success: #dcfce7;
  --rs-color-success-ink: #166534;
  --rs-color-success-border: #b7e8c7;
  --rs-color-pending: #fdf3dc;
  --rs-color-pending-ink: #7a4b00;
  --rs-color-pending-border: #f0dcae;
  --rs-color-highlight: yellow;
  --rs-color-highlight-ink: #111827;

  /* Focus */
  --rs-focus-ring: 2px solid var(--rs-color-primary);
  --rs-focus-offset: 2px;

  /* Dialog */
  --rs-dialog-bg: var(--rs-color-paper);
  --rs-dialog-text: inherit;
  --rs-dialog-border: var(--rs-color-border);
  --rs-dialog-radius: var(--rs-radius-lg);
  --rs-dialog-padding: 2em;
  --rs-dialog-width: 50ch;
  --rs-dialog-width-wide: 89ch;
  --rs-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --rs-dialog-backdrop: rgba(17, 24, 39, 0.62);

  /* Published preview frames */
  --rs-preview-frame: var(--rs-color-ink);
  --rs-preview-radius: 20px;
  --rs-preview-mobile-frame-border: 12px;
  --rs-preview-mobile-scale: 0.5;
  --rs-preview-mobile-src-width: 390px;
  --rs-preview-mobile-src-height: 844px;
  --rs-preview-mobile-content-width: calc(
    var(--rs-preview-mobile-src-width) * var(--rs-preview-mobile-scale)
  );
  --rs-preview-mobile-content-height: calc(
    var(--rs-preview-mobile-src-height) * var(--rs-preview-mobile-scale)
  );
  --rs-preview-mobile-wrap-width: calc(
    var(--rs-preview-mobile-content-width) +
      (2 * var(--rs-preview-mobile-frame-border))
  );
  --rs-preview-mobile-wrap-height: calc(
    var(--rs-preview-mobile-content-height) +
      (2 * var(--rs-preview-mobile-frame-border))
  );
  --rs-preview-desktop-scale: 0.44;

  /* Code editor (matches CodeMirror's ayu-dark theme, so the plain textarea
     and the enhanced editor look alike) */
  --rs-editor-code-bg: #0a0e14;
  --rs-editor-code-ink: #b3b1ad;
  --rs-editor-code-caret: #e6b450;
  /* Collapsed data chips and shown data in the code editor */
  --rs-editor-chip-bg: rgba(230, 180, 80, 0.14);
  --rs-editor-chip-bg-hover: rgba(230, 180, 80, 0.28);
  --rs-editor-chip-border: rgba(230, 180, 80, 0.45);
  --rs-editor-shown-bg: rgba(230, 180, 80, 0.08);
  --rs-editor-overlay-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.35);
  --rs-home-carousel-scrollbar-width: 0px;
}

/* App */

body.rs-orbit-app {
  background-color: var(--rs-color-paper);
  color: var(--rs-color-ink);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media only screen and (min-width: 40rem) {
  body.rs-orbit-app {
    font-size: 1.2rem;
  }
}
@media only screen and (min-width: 64rem) {
  body.rs-orbit-app {
    font-size: 1.44rem;
  }
}

.rs-orbit-app :focus-visible {
  outline: var(--rs-focus-ring);
  outline-offset: var(--rs-focus-offset);
}

.rs-orbit-app a:not(.rs-c-btn) {
  color: var(--rs-color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}
.rs-orbit-app a:not(.rs-c-btn):hover {
  text-decoration-thickness: 2px;
}

.rs-orbit-app code {
  font-family: var(--rs-text-mono);
  font-size: 0.88em;
}

.rs-orbit-app .rs-l-content-wrap {
  --rs-content-wrap-max-width: 100%;
  margin: 0 auto;
  width: var(--rs-content-wrap-max-width);
}

@media only screen and (min-width: 64rem) {
  .rs-orbit-app .rs-l-content-wrap {
    --rs-content-wrap-max-width: 92%;
  }
  :root {
    --rs-layout-content-inset: calc(var(--rs-space-xl) + var(--rs-space-md));
  }
}

body.rs-orbit-app header {
  nav {
    display: flex;
    justify-content: space-between;
    padding-top: var(--rs-space-2xs);
    padding-bottom: var(--rs-space-2xs);
  }
  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rs-space-2xs) var(--rs-space-md);
  }
  /* Plain links. The current section is bold and underlined; the others are muted. */
  .rs-c-nav-home,
  .rs-c-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .rs-c-nav-home {
    color: var(--rs-color-ink);
    font-weight: var(--rs-text-weight-bold);
  }
  .rs-c-nav-link {
    color: var(--rs-color-ink-muted);
    font-weight: var(--rs-text-weight-medium);
  }
  .rs-c-nav-link:hover,
  .rs-c-nav-link[aria-current="page"] {
    color: var(--rs-color-ink);
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.3em;
  }
  .rs-c-nav-link[aria-current="page"] {
    font-weight: var(--rs-text-weight-bold);
  }
  nav ul li {
    display: flex;
    align-items: center;
  }
}
body.rs-orbit-app main {
  h1 {
    font-size: var(--rs-text-heading-1);
    font-weight: var(--rs-text-weight-medium);
    line-height: var(--rs-text-line-tight);
    text-wrap: balance;
  }
}
body.rs-orbit-app.rs-is-editor-fullscreen {
  overflow: hidden;
}
body.rs-orbit-app.rs-is-editor-fullscreen main {
  overflow: hidden;
}
body.rs-orbit-app footer {
  margin-top: auto;
  padding-top: var(--rs-space-xl);

  small {
    /* Fine print, but never below 0.75rem on phones. */
    font-size: max(var(--rs-text-fine), 0.75rem);
  }
}

/* Layout */

.rs-u-content-indent {
  padding-inline: var(--rs-layout-content-inset);
}

/*
  Page rhythm: the space between blocks lives on the sections, not on their
  headings, so every page spaces the same way whatever a section starts with.
  - The first block (page heading or section) starts --rs-space-md below the nav.
  - Every later section starts --rs-space-xl below the block before it.
*/
main > .rs-l-page-heading {
  padding-top: var(--rs-space-md);
}
/* The page title, with an optional page-level action at the far end. */
.rs-c-page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-space-xs) var(--rs-space-md);
}
:is(main, .rs-scope-home-wrap) > .rs-l-content-section {
  margin-top: var(--rs-space-xl);
}
main > .rs-l-content-section:first-child {
  margin-top: var(--rs-space-md);
}
article.rs-c-detail-surface > :first-child {
  margin-top: 0;
}

/* Components */

/* Section surface: one h2 per section, h3 for sub-sections. */
article.rs-c-detail-surface {
  background-color: var(--rs-color-paper);
}

/* Text modes: app pages read a little denser; the home page reads like prose. */
body.rs-orbit-app main {
  --rs-text-line-body: 1.35;
  --rs-text-measure: 72ch;
}
body.rs-orbit-app main :is(.rs-c-home-hero, .rs-scope-home-wrap) {
  --rs-text-line-body: 1.5;
  --rs-text-measure: 64ch;
}
body.rs-orbit-app main p:not(.rs-c-flash, .rs-c-empty-note) {
  line-height: var(--rs-text-line-body);
  max-width: var(--rs-text-measure);
}

article.rs-c-detail-surface .rs-c-detail-surface__heading {
  font-size: var(--rs-text-heading-2);
  font-weight: var(--rs-text-weight-bold);
  text-wrap: balance;
  line-height: var(--rs-text-line-tight);
  margin-bottom: 0.15em;
}

:where(article.rs-c-detail-surface, dialog.rs-c-dialog) h3 {
  font-size: var(--rs-text-heading-3);
  font-weight: var(--rs-text-weight-bold);
  line-height: var(--rs-text-line-tight);
  text-wrap: balance;
  margin-top: var(--rs-space-lg);
  margin-bottom: var(--rs-space-2xs);
}

header.rs-c-orbit-website-overview {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--rs-space-md);
  margin-bottom: var(--rs-space-md);

  img {
    width: 10em;
    height: 6.25em;
    border-radius: var(--rs-radius-lg);
    object-fit: cover;
  }

  > div {
    display: flex;
    flex-direction: column;
  }

  > div .rs-c-detail-surface__heading {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/*
  Buttons: two sizes, by role.
  - Standard (default): every group of actions, such as toolbars, card
    actions, dialog footers and page actions.
  - Inline (--inline): only inside a row, a table cell or a sentence.
  Color marks emphasis, never size: grey by default, blue (--primary) for the
  one main action in a group, light red-grey (--danger) for destructive ones.
*/
button.rs-c-btn,
a.rs-c-btn,
label.rs-c-btn {
  display: flex;
  align-items: center;
  gap: var(--rs-space-2xs);
  background-color: var(--rs-color-surface);
  color: var(--rs-color-ink);
  border-radius: var(--rs-radius-sm);
  width: max-content;
  max-width: 100%;
  height: max-content;
  transition: background-color 100ms ease;
  font-weight: var(--rs-text-weight-bold);
  padding: var(--rs-space-box-sm);
  cursor: pointer;
}
button.rs-c-btn:hover,
a.rs-c-btn:hover,
label.rs-c-btn:hover {
  transition: none;
  background-color: var(--rs-color-surface-hover);
}
button.rs-c-btn.rs-c-btn--primary,
a.rs-c-btn.rs-c-btn--primary {
  background-color: var(--rs-color-primary);
  color: var(--rs-color-primary-ink);
}
button.rs-c-btn.rs-c-btn--primary:hover,
a.rs-c-btn.rs-c-btn--primary:hover {
  background-color: var(--rs-color-primary-hover);
}
button.rs-c-btn.rs-c-btn--danger,
a.rs-c-btn.rs-c-btn--danger {
  background-color: var(--rs-color-danger);
  color: var(--rs-color-danger-ink);
}
button.rs-c-btn.rs-c-btn--danger:hover,
a.rs-c-btn.rs-c-btn--danger:hover {
  background-color: var(--rs-color-danger-hover);
}
button.rs-c-btn.rs-c-btn--inline,
a.rs-c-btn.rs-c-btn--inline,
label.rs-c-btn.rs-c-btn--inline {
  padding: 0 var(--rs-space-2xs);
}
/* Touch screens: inline buttons and nav links get a comfortable tap height. */
@media (pointer: coarse) {
  .rs-c-btn.rs-c-btn--inline,
  body.rs-orbit-app header .rs-c-nav-link {
    min-height: 2.75rem;
  }
}
button.rs-c-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Trailing "✏️..." on a button that opens a dialog. */
.rs-c-btn__trail {
  white-space: nowrap;
}
.rs-c-icon {
  font-style: normal;
  font-weight: normal;
}

/* A row of buttons, e.g. a dialog footer: secondary first, primary last. */
.rs-c-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-xs);
  margin-top: var(--rs-space-md);
}

/* Forms: a label above each field. */
form.rs-c-form {
  input:not([type="checkbox"], [type="radio"], [type="hidden"]),
  select {
    padding: var(--rs-space-box-sm);
    border-radius: var(--rs-radius-sm);
    border: 1px solid var(--rs-color-border);
    background-color: var(--rs-color-paper);
  }
  textarea {
    width: 100%;
    padding: var(--rs-space-box-sm);
    border-radius: var(--rs-radius-sm);
    min-height: 16rem;
  }
  label {
    font-weight: var(--rs-text-weight-medium);
  }
}
form.rs-c-form .rs-c-form__controls {
  display: flex;
  gap: var(--rs-space-xs);
  margin-top: var(--rs-space-md);
}
form.rs-c-form.rs-c-form--grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  gap: var(--rs-space-2xs) 0;
}
form.rs-c-form.rs-c-form--grid .rs-c-form__controls {
  grid-column: 1 / -1;
  grid-row: auto;
}
form.rs-c-form.rs-c-form--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-2xs);
}
form.rs-c-form.rs-c-form--stacked .rs-c-actions {
  margin-top: var(--rs-space-xs);
}
form.rs-c-form .rs-c-form__help,
.rs-c-help {
  font-size: var(--rs-text-small);
  line-height: var(--rs-text-line-body);
  color: var(--rs-color-ink-muted);
}

/* Data list: label / value rows. Values may end with an action button. */
dl.rs-c-data-list {
  margin-top: var(--rs-space-md);
  display: grid;
  grid-template-columns: minmax(max-content, 30%) 1fr;
  grid-template-rows: auto;

  > div {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: var(--rs-space-md);
    padding: var(--rs-space-xs) 0;
    border-top: 1px solid var(--rs-color-border);
  }
  > div dt {
    grid-column: 1;
  }
  > div dd {
    grid-column: 2;
    min-width: 0;
  }
}

ul.rs-c-card-list {
  display: grid;
  gap: var(--rs-space-md);
  margin-top: var(--rs-space-md);

  > li {
    padding: 0 var(--rs-space-md);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-lg);
  }
  > li > dl.rs-c-data-list {
    margin-top: 0;
  }
  > li > dl.rs-c-data-list > div:first-child {
    border-top: 0;
  }
}

/* Flash messages: role="status" for success, role="alert" for errors. */
.rs-c-flash {
  margin-top: var(--rs-space-md);
  padding: var(--rs-space-box-md);
  border-radius: var(--rs-radius-lg);
  border: 1px solid var(--rs-color-border);
  border-left-width: var(--rs-space-3xs);
  background-color: var(--rs-color-surface);
  line-height: var(--rs-text-line-body);
}
.rs-c-flash:empty {
  display: none;
}
.rs-c-flash + :is(.rs-c-builder-site-card, .rs-c-site-picker, .rs-c-form-card, .rs-c-editor-site, form) {
  margin-top: var(--rs-space-md);
}
.rs-c-flash.rs-c-flash--success {
  background-color: var(--rs-color-success);
  border-color: var(--rs-color-success-border);
  color: var(--rs-color-success-ink);
}
.rs-c-flash.rs-c-flash--error {
  background-color: var(--rs-color-danger);
  border-color: var(--rs-color-danger-border);
  color: var(--rs-color-danger-ink);
}

/* Status badge: data-tone is neutral, success, pending or danger. */
.rs-c-status {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2xs);
  padding: 0 var(--rs-space-xs);
  border-radius: var(--rs-radius-pill);
  background-color: var(--rs-color-surface);
  font-weight: var(--rs-text-weight-bold);
  white-space: nowrap;
}
.rs-c-status[data-tone="success"] {
  background-color: var(--rs-color-success);
  color: var(--rs-color-success-ink);
}
.rs-c-status[data-tone="pending"] {
  background-color: var(--rs-color-pending);
  color: var(--rs-color-pending-ink);
}
.rs-c-status[data-tone="danger"] {
  background-color: var(--rs-color-danger);
  color: var(--rs-color-danger-ink);
}

.rs-c-inbox-read-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: var(--rs-space-2xs);
}

.rs-c-inbox-unread-dot {
  width: var(--rs-space-xs);
  height: var(--rs-space-xs);
  display: inline-block;
  border-radius: var(--rs-radius-pill);
  background-color: var(--rs-color-primary);
  box-shadow: 0 0 0 2px var(--rs-color-primary-soft);
}

/* Empty states: a large one for "nothing here yet" pages, a note for lists. */
div.rs-c-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rs-space-xs);
  padding: var(--rs-space-xl) var(--rs-space-lg);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-lg);
  text-align: center;

  svg {
    height: var(--rs-space-xl);
    width: var(--rs-space-xl);
    color: var(--rs-color-ink-muted);
  }
}
article.rs-c-detail-surface .rs-c-empty-state__title {
  font-size: var(--rs-text-heading-2);
  font-weight: var(--rs-text-weight-bold);
  line-height: var(--rs-text-line-tight);
}
.rs-c-empty-state__text {
  max-width: var(--rs-text-measure);
  color: var(--rs-color-ink-muted);
}
.rs-c-empty-state form {
  margin-top: var(--rs-space-md);
}
p.rs-c-empty-note {
  margin-top: var(--rs-space-md);
  padding: var(--rs-space-box-md);
  border-radius: var(--rs-radius-lg);
  background-color: var(--rs-color-surface);
  color: var(--rs-color-ink-muted);
}

dialog.rs-c-dialog {
  position: fixed;
  top: calc(50% - 4.86rem);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: var(--rs-dialog-width);
  max-height: 85vh;
  overflow: auto;
  margin: 0;

  padding: var(--rs-dialog-padding);
  border-radius: var(--rs-dialog-radius);
  background-color: var(--rs-dialog-bg);
  color: var(--rs-dialog-text);
  box-shadow: var(--rs-dialog-shadow);

  &::backdrop {
    background-color: var(--rs-dialog-backdrop);
    backdrop-filter: blur(4px);
  }

  > h2 {
    font-size: var(--rs-text-heading-2);
    font-weight: var(--rs-text-weight-bold);
    line-height: var(--rs-text-line-tight);
    margin-bottom: var(--rs-space-md);
    text-wrap: balance;
  }

  p + p {
    margin-top: var(--rs-space-2xs);
  }

  hr {
    margin: var(--rs-space-md) 0;
    border-color: var(--rs-dialog-border);
  }
}

dialog.rs-c-dialog.rs-c-dialog--wide {
  max-width: var(--rs-dialog-width-wide);
  max-height: 89vh;
}

details > summary {
  cursor: pointer;
  font-weight: var(--rs-text-weight-bold);
}

/* Editor */

form.rs-c-editor-layout {
  --rs-editor-pane-height: clamp(640px, 70vh, 52rem);
  --rs-editor-preview-basis: 50%;
  display: grid;
  grid-template-rows: auto var(--rs-editor-pane-height);
  grid-template-columns: minmax(0, 1fr) minmax(320px, var(--rs-editor-preview-basis));
}
form.rs-c-editor-layout .rs-c-editor-controls {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: var(--rs-space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-space-xs) var(--rs-space-md);
}
.rs-c-editor-tabs {
  display: none;
}

form.rs-c-editor-layout:has(#preview-size-sm:checked) {
  --rs-editor-preview-basis: 10%;
}
form.rs-c-editor-layout:has(#preview-size-md:checked) {
  --rs-editor-preview-basis: 50%;
}
form.rs-c-editor-layout:has(#preview-size-lg:checked) {
  --rs-editor-preview-basis: 88%;
}
form.rs-c-editor-layout .rs-c-editor-preview-code {
  grid-column: 1;
  grid-row: 2;
  position: relative;

  .CodeMirror {
    border-top-left-radius: var(--rs-radius-lg);
    border-bottom-left-radius: var(--rs-radius-lg);
    font-family: var(--rs-text-mono);
    font-size: var(--rs-text-code);
    line-height: 1.44;
    min-height: 28rem;
  }

  /* The editor before (or without) its CodeMirror enhancement. */
  .rs-c-builder-code-area {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 28rem;
    margin: 0;
    padding: var(--rs-space-3xs) var(--rs-space-xs);
    border: 0;
    border-top-left-radius: var(--rs-radius-lg);
    border-bottom-left-radius: var(--rs-radius-lg);
    background-color: var(--rs-editor-code-bg);
    color: var(--rs-editor-code-ink);
    caret-color: var(--rs-editor-code-caret);
    font-family: var(--rs-text-mono);
    font-size: var(--rs-text-code);
    line-height: 1.44;
    white-space: pre;
    overflow: auto;
    resize: none;
  }

  .rs-c-builder-code-area::placeholder {
    color: var(--rs-editor-code-ink);
    opacity: 0.62;
  }

  /* A large page's textarea waits, hidden, for the code editor. */
  .rs-c-builder-code-area[hidden] {
    display: none;
  }

  .rs-c-code-pending {
    box-sizing: border-box;
    height: 100%;
    min-height: 28rem;
    margin: 0;
    padding: var(--rs-space-sm) var(--rs-space-md);
    border-top-left-radius: var(--rs-radius-lg);
    border-bottom-left-radius: var(--rs-radius-lg);
    background-color: var(--rs-editor-code-bg);
    color: var(--rs-editor-code-ink);
    font-size: var(--rs-text-small);
  }

  /* Long data: URIs show as a chip; the text stays in the document. */
  .CodeMirror .rs-c-code-data {
    display: inline;
    margin: 0 0.15em;
    padding: 0 var(--rs-space-2xs);
    border: 1px solid var(--rs-editor-chip-border);
    border-radius: var(--rs-radius-sm);
    background-color: var(--rs-editor-chip-bg);
    color: var(--rs-editor-code-caret);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
  }

  .CodeMirror .rs-c-code-data:hover {
    background-color: var(--rs-editor-chip-bg-hover);
  }

  .CodeMirror .rs-c-code-data-shown {
    background-color: var(--rs-editor-shown-bg);
  }

  .CodeMirror .rs-c-code-data.rs-is-code-find-current {
    outline: 2px solid var(--rs-color-highlight);
    outline-offset: 1px;
  }

  .CodeMirror .rs-is-code-find-current:not(.rs-c-code-data) {
    background-color: var(--rs-color-highlight);
    color: var(--rs-color-highlight-ink) !important;
  }

  .CodeMirror .rs-is-code-find-current:not(.rs-c-code-data) * {
    color: var(--rs-color-highlight-ink) !important;
  }

  /* Find in code and the status line float over the code pane. */
  .rs-c-code-find,
  .rs-c-code-status[data-shown="true"] {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rs-space-2xs) var(--rs-space-xs);
    box-sizing: border-box;
    max-width: calc(100% - 2 * var(--rs-space-sm));
    padding: var(--rs-space-2xs) var(--rs-space-xs);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-lg);
    background-color: var(--rs-color-paper);
    color: var(--rs-color-ink);
    font-size: var(--rs-text-small);
    box-shadow: var(--rs-editor-overlay-shadow);
  }

  .rs-c-code-find {
    top: var(--rs-space-xs);
    right: var(--rs-space-sm);
  }

  /* While Find is open the code starts below it (height set by app.js). */
  .CodeMirror.rs-is-code-finding {
    box-sizing: border-box;
    padding-top: calc(var(--rs-code-find-height, 2.75rem) + 2 * var(--rs-space-xs));
  }

  .rs-c-code-find[hidden] {
    display: none;
  }

  .rs-c-code-find input {
    flex: 1 1 12ch;
    width: 16ch;
    min-width: 12ch;
    padding: var(--rs-space-box-sm);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-sm);
    font: inherit;
  }

  .rs-c-code-find__count {
    min-width: 6ch;
    color: var(--rs-color-ink-muted);
    white-space: nowrap;
  }

  .rs-c-code-status {
    position: absolute;
    left: var(--rs-space-sm);
    bottom: var(--rs-space-xs);
  }

  .rs-c-code-status[data-shown="false"] {
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
  }

  .rs-c-code-status button[hidden] {
    display: none;
  }

  .CodeMirror .rs-is-editor-scroll-highlight {
    background-color: var(--rs-color-highlight);
    color: var(--rs-color-highlight-ink) !important;
  }

  .CodeMirror .rs-is-editor-scroll-highlight * {
    color: var(--rs-color-highlight-ink) !important;
  }

  .CodeMirror .rs-c-code-data.rs-is-code-data-highlighted {
    background-color: var(--rs-color-highlight);
    color: var(--rs-color-highlight-ink);
  }
}
form.rs-c-editor-layout #editor-find-button[hidden] {
  display: none;
}
form.rs-c-editor-layout .rs-c-editor-preview-render {
  grid-column: 2;
  grid-row: 2;

  iframe {
    border-top-right-radius: var(--rs-radius-lg);
    border-bottom-right-radius: var(--rs-radius-lg);
    width: 100%;
    height: 100%;
  }
}
/*
  Each preview refresh loads in a new frame that waits, transparent and
  inert, under the shown one until it is ready (app.js,
  createPreviewRefresh). Only the shown frame is #live-preview.
*/
.rs-c-editor-preview-stage {
  position: relative;
  height: 100%;
  min-height: 0;
}
.rs-c-editor-preview-stage > iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rs-c-editor-preview-stage > iframe.rs-is-preview-pending {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.rs-c-editor-preview-render[data-preview-stale="true"] #live-preview {
  opacity: 0.6;
}
.rs-c-editor-preview-status {
  position: absolute;
  z-index: 2;
  left: var(--rs-space-xs);
  bottom: var(--rs-space-xs);
  max-width: calc(100% - 2 * var(--rs-space-xs));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-2xs) var(--rs-space-xs);
  margin: 0;
  padding: var(--rs-space-2xs) var(--rs-space-xs);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-lg);
  background-color: var(--rs-color-paper);
  color: var(--rs-color-ink-muted);
  font-size: var(--rs-text-small);
}
.rs-c-editor-preview-status[hidden] {
  display: none;
}
form.rs-c-editor-layout[data-editor-fullscreen="true"] {
  position: fixed;
  inset: 0;
  z-index: 1100;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  box-sizing: border-box;
  padding: var(--rs-space-2xs);
  background-color: var(--rs-color-paper);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}
form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-controls {
  margin-bottom: var(--rs-space-2xs);
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: var(--rs-space-2xs);
  background-color: var(--rs-color-paper);
}
form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-preview-code,
form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-preview-render {
  min-height: 0;
  overflow: hidden;
}
form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-preview-code .CodeMirror,
form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-preview-code .rs-c-builder-code-area {
  min-height: 0;
  height: 100% !important;
}
form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-preview-code .CodeMirror-scroll {
  height: 100%;
}

/*
  Phones: one pane at a time (Preview / Code tabs). The pane has a fixed
  height instead of filling the screen, so a short page doesn't leave a
  screen of blank white, and its frame shows where the preview ends.
*/
@media only screen and (max-width: 48rem) {
  form.rs-c-editor-layout {
    --rs-editor-pane-height: min(70dvh, 30em);
    display: flex;
    flex-direction: column;
  }

  form.rs-c-editor-layout .rs-c-editor-controls {
    margin-bottom: var(--rs-space-sm);
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  form.rs-c-editor-layout .rs-c-editor-controls [role="group"] {
    display: none;
  }

  form.rs-c-editor-layout .rs-c-editor-tabs {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--rs-color-border);
  }

  form.rs-c-editor-layout .rs-c-editor-tabs button {
    flex: 1;
    padding: var(--rs-space-xs) 0;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: inherit;
    font-size: var(--rs-text-small);
    font-weight: var(--rs-text-weight-bold);
    cursor: pointer;
  }

  form.rs-c-editor-layout .rs-c-editor-tabs button[aria-selected="true"] {
    border-bottom-color: var(--rs-color-primary);
  }

  form.rs-c-editor-layout .rs-c-editor-preview-code,
  form.rs-c-editor-layout .rs-c-editor-preview-render {
    flex: 0 0 var(--rs-editor-pane-height);
    min-height: 0;
    overflow: hidden;
    padding-top: var(--rs-space-sm);
  }

  form.rs-c-editor-layout .rs-c-editor-preview-code {
    display: none;
  }

  form.rs-c-editor-layout .rs-c-editor-preview-render {
    display: flex;
    flex-direction: column;
  }

  form.rs-c-editor-layout .rs-c-editor-preview-stage {
    flex: 1 1 auto;
    height: auto;
  }

  form.rs-c-editor-layout .rs-c-editor-preview-render iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-lg);
  }

  form.rs-c-editor-layout[data-mobile-tab="code"] .rs-c-editor-preview-render {
    display: none;
  }

  form.rs-c-editor-layout[data-mobile-tab="code"] .rs-c-editor-preview-code {
    display: flex;
    flex-direction: column;
  }

  form.rs-c-editor-layout[data-mobile-tab="code"]
    .rs-c-editor-preview-code
    .CodeMirror,
  form.rs-c-editor-layout[data-mobile-tab="code"]
    .rs-c-editor-preview-code
    .rs-c-builder-code-area {
    flex: 1;
    height: 100% !important;
    min-height: 0;
    border-radius: var(--rs-radius-lg);
  }

  form.rs-c-editor-layout[data-mobile-tab="code"]
    .rs-c-editor-preview-code
    .CodeMirror-scroll {
    height: 100%;
  }

  form.rs-c-editor-layout .rs-c-editor-preview-code .rs-c-code-find {
    left: var(--rs-space-xs);
    right: var(--rs-space-xs);
    max-width: none;
  }

  form.rs-c-editor-layout[data-editor-fullscreen="true"] {
    padding: var(--rs-space-2xs);
  }

  form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-controls {
    margin-bottom: var(--rs-space-2xs);
  }

  /* Fullscreen fills the screen, so the open pane takes the remaining height. */
  form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-preview-code,
  form.rs-c-editor-layout[data-editor-fullscreen="true"] .rs-c-editor-preview-render {
    flex: 1 1 0;
  }
}

/* Published preview frames */

.rs-c-published-preview-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--rs-space-lg);
  width: 100%;
  max-width: 1200px;
  margin: var(--rs-space-lg) auto;
}
.rs-c-published-preview {
  box-sizing: content-box;
  border: var(--rs-preview-mobile-frame-border) solid var(--rs-preview-frame);
  border-radius: var(--rs-preview-radius);
  overflow: hidden;
  background-color: var(--rs-color-paper);
  position: relative;
}
.rs-c-published-preview iframe {
  border: none;
  transform-origin: top left;
}
div.rs-c-published-preview.rs-c-published-preview--mobile {
  width: var(--rs-preview-mobile-content-width);
  height: var(--rs-preview-mobile-content-height);
  flex-shrink: 0;
}
div.rs-c-published-preview.rs-c-published-preview--mobile iframe {
  width: var(--rs-preview-mobile-src-width);
  height: var(--rs-preview-mobile-src-height);
  transform: scale(var(--rs-preview-mobile-scale));
}
/* A sample's phone frame shows its name until the live preview loads (app.js). */
.rs-orbit-app a.rs-c-sample-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--rs-space-xs);
  padding: var(--rs-space-md);
  background-color: var(--rs-color-surface);
  color: var(--rs-color-ink);
  font-size: 1rem;
  line-height: var(--rs-text-line-tight);
  text-align: center;
  text-decoration: none;
}
.rs-orbit-app a.rs-c-sample-poster:focus-visible {
  outline-offset: calc(-1 * var(--rs-space-2xs));
}
.rs-orbit-app a.rs-c-sample-poster[hidden] {
  display: none;
}
.rs-orbit-app a.rs-c-sample-poster strong {
  font-size: var(--rs-text-heading-3);
}
/* The note changes from "loads on demand" to "loading" in a fixed box, so nothing moves. */
.rs-orbit-app a.rs-c-sample-poster small {
  align-self: stretch;
  height: calc(2em * var(--rs-text-line-tight));
  color: var(--rs-color-ink-muted);
  font-size: var(--rs-text-small);
}
div.rs-c-published-preview.rs-c-published-preview--desktop {
  width: calc(1440px * var(--rs-preview-desktop-scale));
  height: calc(900px * var(--rs-preview-desktop-scale));
  flex-shrink: 0;
}
div.rs-c-published-preview.rs-c-published-preview--desktop iframe {
  width: 1440px;
  height: 900px;
  transform: scale(var(--rs-preview-desktop-scale));
}

/* Utilities */

.rs-u-m0-auto {
  margin: 0 auto;
}
.rs-u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.rs-u-inline-flex-els {
  display: inline-flex;
  gap: var(--rs-space-xs);
  align-items: center;
  flex-wrap: wrap;
}

.rs-u-flex-justify-center {
  justify-content: center;
}

.rs-u-mt-base {
  margin-top: var(--rs-space-md);
}

.rs-u-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.rs-u-px-base {
  padding-left: var(--rs-space-md);
  padding-right: var(--rs-space-md);
}

.rs-u-font-bold {
  font-weight: var(--rs-text-weight-bold);
}

/* Home */

section.rs-c-home-hero {
  background-color: var(--rs-color-ink);
  background-image:
    linear-gradient(
      rgba(2, 3, 5, 0.62),
      rgba(2, 3, 5, 0.88),
      rgba(2, 3, 5, 0.92)
    ),
    url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-780.jpg");
  background-image:
    linear-gradient(
      rgba(2, 3, 5, 0.62),
      rgba(2, 3, 5, 0.88),
      rgba(2, 3, 5, 0.92)
    ),
    -webkit-image-set(
        url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-780.webp")
          type("image/webp") 1x,
        url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-780.jpg")
          type("image/jpeg") 1x
      );
  background-image:
    linear-gradient(
      rgba(2, 3, 5, 0.62),
      rgba(2, 3, 5, 0.88),
      rgba(2, 3, 5, 0.92)
    ),
    image-set(
      url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-780.webp")
        type("image/webp") 1x,
      url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-780.jpg")
        type("image/jpeg") 1x
    );
  background-size: 78em;
  color: var(--rs-color-paper);
  padding-top: 7em;
  padding-bottom: 4em;
  text-align: center;

  h1 {
    font-size: var(--rs-text-heading-1);
    font-weight: var(--rs-text-weight-bold);
    text-wrap: balance;
  }
}

@media only screen and (min-width: 40rem) {
  section.rs-c-home-hero {
    background-image:
      linear-gradient(
        rgba(2, 3, 5, 0.62),
        rgba(2, 3, 5, 0.88),
        rgba(2, 3, 5, 0.92)
      ),
      url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-2560.jpg");
    background-image:
      linear-gradient(
        rgba(2, 3, 5, 0.62),
        rgba(2, 3, 5, 0.88),
        rgba(2, 3, 5, 0.92)
      ),
      -webkit-image-set(
          url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-2560.webp")
            type("image/webp") 1x,
          url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-2560.jpg")
            type("image/jpeg") 1x
        );
    background-image:
      linear-gradient(
        rgba(2, 3, 5, 0.62),
        rgba(2, 3, 5, 0.88),
        rgba(2, 3, 5, 0.92)
      ),
      image-set(
        url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-2560.webp")
          type("image/webp") 1x,
        url("/static/images/orbit-v1-static-mobile-prime--utility-demo-rotate--crop-2560.jpg")
          type("image/jpeg") 1x
      );
  }
}

section.rs-c-home-hero p {
  margin-inline: auto;
}
ul.rs-c-home-points,
ol.rs-c-home-steps {
  display: grid;
  gap: var(--rs-space-sm);
  margin-top: var(--rs-space-md);
}
ul.rs-c-home-points {
  list-style: none;
  padding-left: 0;
}
div.rs-c-home-role-grid {
  display: grid;
  gap: var(--rs-space-md);
  margin-top: var(--rs-space-md);
}
article.rs-c-home-role-card {
  padding: var(--rs-space-md);
  border-radius: var(--rs-radius-lg);
  background-color: var(--rs-color-surface);
}

div.rs-c-home-mobile-carousel {
  max-width: 100%;
  margin-top: var(--rs-space-lg);
  overflow-x: hidden;
  position: relative;
  min-height: calc(
    var(--rs-preview-mobile-wrap-height) + var(--rs-space-xl) +
      var(--rs-home-carousel-scrollbar-width) + 1px
  ); /* Absolute rail: reserve frame height plus controls, scrollbar, and a 1px guard. */
}

div.rs-c-home-mobile-carousel > ul {
  display: flex;
  padding-bottom: var(--rs-space-2xs);
  gap: var(--rs-space-xl);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  inset: 0;
  height: 100%;
}
div.rs-c-home-mobile-carousel > ul > li {
  flex: 0 0 auto;
}

div.rs-c-home-evolution-wrap {
  overflow-x: auto;
}

/* Tables */

table.rs-c-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  background-color: var(--rs-color-paper);
}
@media only screen and (max-width: 48rem) {
  table.rs-c-table {
    min-width: 34rem;
  }
}

table.rs-c-table th.rs-u-mobile-remove,
table.rs-c-table td.rs-u-mobile-remove {
  display: none;
}
@media only screen and (min-width: 40rem) {
  table.rs-c-table th.rs-u-mobile-remove,
  table.rs-c-table td.rs-u-mobile-remove {
    display: table-cell;
  }
}

table.rs-c-table th,
table.rs-c-table td {
  border: 1px solid var(--rs-color-border);
  padding: var(--rs-space-xs);
  text-align: left;
  vertical-align: top;
}
table.rs-c-table thead th {
  background-color: var(--rs-color-surface);
  font-weight: var(--rs-text-weight-bold);
}
table.rs-c-table tbody th {
  font-weight: var(--rs-text-weight-bold);
}

/* Custom domains */

.rs-c-domain-status {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2xs);
  font-weight: var(--rs-text-weight-bold);
}
.rs-c-domain-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--rs-color-pending);
  color: var(--rs-color-pending-ink);
}
.rs-c-domain-status[data-domain-status="active"] .rs-c-domain-status-icon {
  background: var(--rs-color-success);
  color: var(--rs-color-success-ink);
}
.rs-c-domain-status[data-domain-status="failed"] .rs-c-domain-status-icon {
  background: var(--rs-color-danger);
  color: var(--rs-color-danger-ink);
}
.rs-c-domain-help {
  font-size: var(--rs-text-small);
  line-height: var(--rs-text-line-body);
  margin-top: var(--rs-space-xs);
}
.rs-c-domain-dns-wrap {
  overflow-x: auto;
  margin-block: 1em;
}
.rs-c-domain-dns-table code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rs-c-domain-dns-table .rs-c-btn {
  display: block;
  margin-top: var(--rs-space-2xs);
}
.rs-c-domain-pair {
  display: flex;
  align-items: baseline;
  gap: var(--rs-space-xs);
}
.rs-c-domain-pair input[type="checkbox"] {
  width: auto;
  flex: none;
}
.rs-js-domain-check button {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2xs);
}
.rs-js-domain-check[aria-busy="true"] button:disabled {
  cursor: wait;
}
.rs-c-domain-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: orbit-domain-spin 0.8s linear infinite;
}
.rs-c-domain-spinner[hidden] {
  display: none;
}
@keyframes orbit-domain-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rs-c-domain-spinner {
    animation: none;
  }
}
dialog.rs-c-dialog:has(.rs-c-domain-dns-wrap),
dialog.rs-c-dialog:has(.rs-js-domain-check) {
  top: 50%;
  padding: clamp(1rem, 3vw, 2em);
}
[data-domain-visit][hidden] {
  display: none !important;
}
@media (max-width: 40rem) {
  .rs-c-domain-dns-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .rs-c-domain-dns-table,
  .rs-c-domain-dns-table tbody,
  .rs-c-domain-dns-table tr {
    display: block;
    width: 100%;
  }
  .rs-c-domain-dns-table tr {
    border: 1px solid var(--rs-dialog-border);
    border-radius: var(--rs-radius-lg);
  }
  .rs-c-domain-dns-table th,
  .rs-c-domain-dns-table td {
    display: block;
    width: auto;
    white-space: normal;
    border: 0;
    padding: var(--rs-space-xs) var(--rs-space-sm);
  }
  .rs-c-domain-dns-table [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--rs-text-small);
    font-weight: var(--rs-text-weight-bold);
    margin-bottom: var(--rs-space-3xs);
  }
}

/* Builder loop: editor */

.rs-c-editor-site {
  color: var(--rs-color-ink-muted);
}
.rs-c-builder-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rs-space-md);
  margin-block: var(--rs-space-md);
  padding: 0;
  list-style: none;
}
/* A progress strip, not tabs: a rule above each step, blue for the current one. */
.rs-c-builder-steps li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rs-space-2xs);
  padding-top: var(--rs-space-xs);
  border-top: 3px solid var(--rs-color-border);
}
.rs-c-builder-steps li[aria-current="step"] {
  border-top-color: var(--rs-color-primary);
}
.rs-c-builder-steps__title {
  font-weight: var(--rs-text-weight-bold);
}
.rs-c-builder-steps small {
  font-size: var(--rs-text-small);
  color: var(--rs-color-ink-muted);
}
.rs-c-starter-prompt {
  white-space: pre-wrap;
  font: inherit;
  margin-block: var(--rs-space-md);
  padding: var(--rs-space-box-md);
  background-color: var(--rs-color-surface);
  border-radius: var(--rs-radius-lg);
}
.rs-c-editor-status {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-xs);
  min-width: 0;
}
.rs-c-status[hidden] {
  display: none;
}
.rs-c-editor-feedback {
  font-size: var(--rs-text-small);
  color: var(--rs-color-ink-muted);
}
.rs-c-editor-feedback:empty {
  display: none;
}
.rs-c-editor-feedback[role="alert"] {
  color: var(--rs-color-danger-ink);
}
.rs-c-editor-preview-size {
  flex-wrap: nowrap;
  margin-left: auto;
}

/* Builder loop: My Site dashboard */

.rs-c-site-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-xs);
  margin-bottom: var(--rs-space-md);
}
.rs-c-builder-site-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--rs-space-lg);
  padding: var(--rs-space-lg);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-lg);
}
.rs-c-builder-site-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rs-space-2xs);
}
.rs-c-builder-site-preview iframe,
.rs-c-safe-previews iframe {
  pointer-events: none;
}
.rs-c-builder-site-preview__caption {
  font-size: var(--rs-text-small);
  color: var(--rs-color-ink-muted);
}
/* Same footprint as the mobile preview frame, so the card keeps its shape. */
.rs-c-preview-placeholder {
  box-sizing: border-box;
  width: var(--rs-preview-mobile-wrap-width);
  height: var(--rs-preview-mobile-wrap-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rs-space-xs);
  padding: var(--rs-space-md);
  background-color: var(--rs-color-surface);
  border-radius: var(--rs-preview-radius);
  color: var(--rs-color-ink-muted);
  text-align: center;

  svg {
    width: var(--rs-space-xl);
    height: var(--rs-space-xl);
  }
  small {
    font-size: var(--rs-text-small);
    line-height: var(--rs-text-line-tight);
  }
}
.rs-c-builder-site-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rs-space-xs);
}
article.rs-c-detail-surface .rs-c-builder-site-content .rs-c-detail-surface__heading {
  margin: 0;
}
.rs-c-builder-site-content > .rs-c-actions {
  margin-top: var(--rs-space-xs);
}
.rs-c-builder-site-url {
  overflow-wrap: anywhere;
}

.rs-c-next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-space-xs) var(--rs-space-md);
  margin-top: var(--rs-space-md);
  padding: var(--rs-space-md) var(--rs-space-lg);
  background-color: var(--rs-color-surface);
  border-left: var(--rs-space-3xs) solid var(--rs-color-primary);
  border-radius: var(--rs-radius-lg);
}
.rs-c-next-step__title {
  font-size: var(--rs-text-small);
  font-weight: var(--rs-text-weight-bold);
  color: var(--rs-color-link);
}
.rs-c-next-step__body p {
  font-weight: var(--rs-text-weight-medium);
}

.rs-c-dashboard-columns {
  margin-top: var(--rs-space-md);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rs-space-md);
}
.rs-c-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rs-space-xs);
  padding: var(--rs-space-md) var(--rs-space-lg);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-lg);

  > .rs-c-actions {
    margin-top: 0;
  }
  dl.rs-c-data-list {
    width: 100%;
    margin-top: 0;
  }
}
.rs-c-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-space-xs);
  width: 100%;
}
.rs-c-panel__title {
  font-size: var(--rs-text-heading-3);
  font-weight: var(--rs-text-weight-bold);
  line-height: var(--rs-text-line-tight);
}
.rs-c-panel__footer {
  width: 100%;
  padding-top: var(--rs-space-xs);
  border-top: 1px solid var(--rs-color-border);

  h3 {
    margin-top: 0;
  }
}
.rs-c-stat {
  display: flex;
  align-items: baseline;
  gap: var(--rs-space-2xs);
}
.rs-c-stat__value {
  font-size: var(--rs-text-heading-1);
  font-weight: var(--rs-text-weight-bold);
  line-height: 1;
}
.rs-c-stat__label {
  color: var(--rs-color-ink-muted);
}

/* A row of headline numbers: label above, number below. */
dl.rs-c-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
  gap: var(--rs-space-md);
  margin-top: var(--rs-space-md);

  dt {
    color: var(--rs-color-ink-muted);
  }
  dd {
    font-size: var(--rs-text-heading-1);
    font-weight: var(--rs-text-weight-bold);
    line-height: 1;
  }
}

.rs-c-create-site {
  width: min(100%, 24rem);
  text-align: left;

  .rs-c-actions {
    margin-top: var(--rs-space-xs);
  }
  .rs-c-actions .rs-c-btn {
    width: 100%;
    justify-content: center;
  }
  > .rs-c-flash {
    margin: 0 0 var(--rs-space-xs);
  }
}
.rs-c-create-site [data-site-link-preview] {
  overflow-wrap: anywhere;
  font-size: var(--rs-text-small);
  color: var(--rs-color-ink-muted);
}

/* Builder loop: publish result */

.rs-c-publish-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rs-space-xs);
  text-align: center;

  > .rs-c-flash {
    align-self: stretch;
  }
  > p {
    max-width: var(--rs-text-measure);
    line-height: var(--rs-text-line-body);
  }
  .rs-c-actions {
    justify-content: center;
  }
}
body.rs-orbit-app main .rs-c-publish-result h1 {
  font-size: 2.89em;
  font-weight: var(--rs-text-weight-bold);
}
.rs-c-publish-result__status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rs-space-xs);
}
.rs-c-safe-previews {
  max-width: 100%;
  overflow: hidden;
}

/* Contained form, e.g. Create account */

.rs-c-form-card {
  width: min(100%, 32rem);
  padding: var(--rs-space-lg);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-lg);
}
.rs-c-form-card--centered {
  margin: var(--rs-space-lg) auto 0;
}
body.rs-orbit-app main .rs-c-form-card__title {
  font-size: var(--rs-text-heading-2);
  font-weight: var(--rs-text-weight-bold);
  margin-bottom: var(--rs-space-2xs);
}
.rs-c-form-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-xs);
  margin-top: var(--rs-space-md);
  padding-top: var(--rs-space-md);
  border-top: 1px solid var(--rs-color-border);
}

@media (max-width: 60rem) {
  .rs-c-builder-steps,
  .rs-c-builder-site-card,
  .rs-c-dashboard-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .rs-c-builder-site-card,
  .rs-c-next-step,
  .rs-c-panel,
  .rs-c-form-card {
    padding: var(--rs-space-md);
  }
  .rs-c-builder-steps {
    gap: var(--rs-space-xs);
  }
  .rs-c-builder-steps li {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--rs-space-2xs);
  }
  .rs-c-builder-site-content > .rs-c-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .rs-c-builder-site-content > .rs-c-actions > form,
  .rs-c-builder-site-content > .rs-c-actions .rs-c-btn {
    width: 100%;
    justify-content: center;
  }
  .rs-c-safe-previews .rs-c-published-preview--desktop {
    display: none;
  }
}

/* Dev tray: local development only (`make dev`; see ComponentDevTray). A
   round button in the bottom-left corner opens the pages the site never
   links to. Ink on paper inverted, so it never reads as part of the product.
   The edge is in rem because it is anchored to the viewport. */
.rs-c-dev-tray {
  --rs-dev-tray-bg: var(--rs-color-ink);
  --rs-dev-tray-ink: var(--rs-color-paper);
  --rs-dev-tray-ink-muted: color-mix(in srgb, var(--rs-color-paper) 70%, var(--rs-color-ink));
  --rs-dev-tray-hover: color-mix(in srgb, var(--rs-color-paper) 14%, var(--rs-color-ink));
  --rs-dev-tray-edge: 1rem;
  --rs-dev-tray-toggle-size: 2.75rem;
  font-size: var(--rs-text-small);
}
.rs-c-dev-tray__toggle {
  position: fixed;
  bottom: var(--rs-dev-tray-edge);
  left: var(--rs-dev-tray-edge);
  z-index: 1200; /* above the full-screen editor */
  display: grid;
  place-items: center;
  width: var(--rs-dev-tray-toggle-size);
  height: var(--rs-dev-tray-toggle-size);
  border-radius: var(--rs-radius-pill);
  background-color: var(--rs-dev-tray-bg);
  color: var(--rs-dev-tray-ink);
  box-shadow: var(--rs-dialog-shadow);
  font-size: 1.38em;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .rs-c-dev-tray__toggle {
    transition: transform 100ms ease;
  }
  .rs-c-dev-tray__toggle:hover {
    transform: scale(1.08);
  }
}
.rs-c-dev-tray__panel {
  inset: auto auto calc(var(--rs-dev-tray-edge) + var(--rs-dev-tray-toggle-size) + var(--rs-space-xs)) var(--rs-dev-tray-edge);
  margin: 0;
  width: min(22em, 100vw - 2 * var(--rs-dev-tray-edge));
  max-height: calc(100dvh - 2 * var(--rs-dev-tray-edge) - var(--rs-dev-tray-toggle-size) - var(--rs-space-xs));
  padding: var(--rs-space-md);
  border-radius: var(--rs-radius-lg);
  background-color: var(--rs-dev-tray-bg);
  color: var(--rs-dev-tray-ink);
  box-shadow: var(--rs-dialog-shadow);
}
.rs-c-dev-tray__panel:popover-open {
  display: flex;
  flex-direction: column;
}
.rs-c-dev-tray__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rs-space-sm);
  padding-bottom: var(--rs-space-sm);
  border-bottom: 1px solid var(--rs-dev-tray-hover);
}
.rs-c-dev-tray__title {
  font-weight: var(--rs-text-weight-bold);
}
.rs-c-dev-tray__muted {
  display: block;
  font-size: var(--rs-text-small);
  color: var(--rs-dev-tray-ink-muted);
}
.rs-c-dev-tray__close {
  padding: var(--rs-space-box-sm);
  border-radius: var(--rs-radius-sm);
  font-weight: var(--rs-text-weight-bold);
  cursor: pointer;
}
.rs-c-dev-tray__nav {
  min-height: 0;
  max-height: 70vh;
  overflow-y: auto;
}
.rs-c-dev-tray__group {
  margin-top: var(--rs-space-sm);
}
.rs-c-dev-tray__label {
  margin-bottom: var(--rs-space-3xs);
  font-size: var(--rs-text-small);
  font-weight: var(--rs-text-weight-bold);
  color: var(--rs-dev-tray-ink-muted);
}
/* The hover box reaches into the panel padding so names line up with labels. */
.rs-c-dev-tray a.rs-c-dev-tray__link {
  display: block;
  margin-inline: calc(-1 * var(--rs-space-xs));
  padding: var(--rs-space-2xs) var(--rs-space-xs);
  border-radius: var(--rs-radius-sm);
  color: var(--rs-dev-tray-ink);
  text-decoration: none;
}
.rs-c-dev-tray__close:hover,
.rs-c-dev-tray a.rs-c-dev-tray__link:hover {
  background-color: var(--rs-dev-tray-hover);
}