/*
  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;
  /* The phone and desktop frames side by side, with the gap between them. */
  --rs-preview-pair-width: calc(
    var(--rs-preview-mobile-wrap-width) + var(--rs-space-lg) +
      (1440px * var(--rs-preview-desktop-scale)) +
      (2 * var(--rs-preview-mobile-frame-border))
  );

  /* 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;
  /* Line numbers and comments: the theme's own are below 4.5:1 */
  --rs-editor-code-muted: #7b838c;
  /* 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);
  /* Source matched from a preview selection: a faint wash. The editor's own
     selection is solid with dark ink, so the caret and the text being
     edited stand out inside a match. */
  --rs-editor-match-bg: rgba(255, 221, 0, 0.17);
  --rs-editor-selection-bg: #ffd84d;
  --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 [data-form-test-code] {
  overflow-wrap: anywhere;
}

.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, muted until hovered. A short bar under the current section
    marks it. The bar sits in padding every link reserves, and hover and the
    current section change only colour, so no state moves the text or
    changes the nav's height.
  */
  .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 {
    position: relative;
    gap: var(--rs-space-2xs);
    padding-block: var(--rs-space-2xs);
    color: var(--rs-color-ink-muted);
    font-weight: var(--rs-text-weight-medium);
  }
  .rs-c-nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: var(--rs-space-lg);
    height: 0.12em;
    border-radius: var(--rs-radius-pill);
    background-color: transparent;
    transform: translateX(-50%);
  }
  .rs-c-nav-link:hover,
  .rs-c-nav-link[aria-current="page"] {
    color: var(--rs-color-ink);
  }
  .rs-c-nav-link[aria-current="page"]::after {
    background-color: currentColor;
  }
  /* The signed-in cue: the account email's first letter, beside "Account". */
  .rs-c-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.62em;
    height: 1.62em;
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-pill);
    background-color: var(--rs-color-surface);
    color: var(--rs-color-ink);
    font-size: var(--rs-text-small);
    font-weight: var(--rs-text-weight-bold);
    line-height: 1;
  }
  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);

  /* The copyright is the only fine print; the links read at the small size. */
  small {
    font-size: max(var(--rs-text-fine), 0.75rem);
  }
  .rs-c-footer__links {
    font-size: var(--rs-text-small);
  }
  /* Muted, like the nav links: underline on hover and keyboard focus. */
  .rs-c-footer__links a {
    display: inline-flex;
    align-items: center;
    color: var(--rs-color-ink-muted);
    text-decoration: none;
  }
  .rs-c-footer__links a:hover,
  .rs-c-footer__links a:focus-visible {
    color: var(--rs-color-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }
}
/*
  The footer sits on the page content's left edge: the wrap's gutter plus
  the content indent (the footer's inner div is .rs-u-content-indent). Orbit's
  pages, then the legal links, then the copyright alone on the last line.
*/
.rs-c-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rs-space-2xs) var(--rs-space-lg);
  padding-bottom: var(--rs-space-md);

  small {
    order: 1;
    flex-basis: 100%;
  }
}
.rs-c-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-2xs) var(--rs-space-md);

  a {
    padding-block: var(--rs-space-3xs);
  }
}

/* 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,
  .rs-c-footer__links a {
    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);
}

/* A danger button that opens a confirmation ("...") stays last in a row of
   actions but stands apart from them, so a slip from its neighbour does not
   land on it. Confirmation footers (Cancel, then the destructive action)
   keep the normal gap. Narrow rows wrap instead. */
@media (min-width: 40rem) {
  .rs-c-actions > .rs-c-btn--danger[aria-haspopup="dialog"]:not(:first-child) {
    margin-inline-start: 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);
}

/* A checkbox before its label, e.g. the age and terms box. The box is
   1.5rem (24px) so it meets the 24px target size on its own. */
.rs-c-check {
  display: flex;
  align-items: flex-start;
  gap: var(--rs-space-xs);
  margin-top: var(--rs-space-2xs);

  input[type="checkbox"] {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--rs-color-primary);
  }
  label {
    line-height: var(--rs-text-line-body);
  }
  .rs-c-help {
    margin-top: var(--rs-space-3xs);
  }
}

/* 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. A
   flash spans its content column, even in a column that centres its items,
   so its edges line up with the content around it. */
.rs-c-flash {
  align-self: stretch;
  width: 100%;
  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, 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 {
  --rs-dialog-max-height: 85vh;
  position: fixed;
  /* Sit a little above centre, but never so high that a dialog at its
     tallest loses its top edge: the centre stays at least half the maximum
     height plus a gap below the viewport top. */
  top: max(calc(50% - 4.86rem), calc(var(--rs-dialog-max-height) / 2 + var(--rs-space-md)));
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: var(--rs-dialog-width);
  max-height: var(--rs-dialog-max-height);
  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 {
  --rs-dialog-max-height: 89vh;
  max-width: var(--rs-dialog-width-wide);
}

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;
  }

  .rs-c-code-keys {
    position: absolute;
    z-index: 10;
    right: var(--rs-space-sm);
    bottom: var(--rs-space-xs);
    max-width: calc(100% - 2 * var(--rs-space-sm));
    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);
    font-size: var(--rs-text-small);
    box-shadow: var(--rs-editor-overlay-shadow);
  }

  .CodeMirror.rs-is-focus-visible {
    outline: var(--rs-focus-ring);
    outline-offset: calc(-1 * var(--rs-focus-offset));
  }

  .CodeMirror.cm-s-ayu-dark .CodeMirror-linenumber,
  .CodeMirror.cm-s-ayu-dark span.cm-comment:not(.cm-attribute, .cm-def, .cm-tag, .cm-type) {
    color: var(--rs-editor-code-muted);
  }

  .CodeMirror .rs-is-editor-scroll-highlight {
    background-color: var(--rs-editor-match-bg);
  }

  /* The wash layers over the chip's own background. */
  .CodeMirror .rs-c-code-data.rs-is-code-data-highlighted {
    background-image: linear-gradient(var(--rs-editor-match-bg), var(--rs-editor-match-bg));
  }

  .CodeMirror.cm-s-ayu-dark div.CodeMirror-selected {
    background: var(--rs-editor-selection-bg);
  }

  .CodeMirror.cm-s-ayu-dark .CodeMirror-line::selection,
  .CodeMirror.cm-s-ayu-dark .CodeMirror-line > span::selection,
  .CodeMirror.cm-s-ayu-dark .CodeMirror-line > span > span::selection,
  .rs-c-builder-code-area::selection {
    background: var(--rs-editor-selection-bg);
    color: var(--rs-color-highlight-ink);
  }

  /* Selected text (app.js marks it); after the match rule so it wins. */
  .CodeMirror .rs-is-code-selected {
    background-color: var(--rs-editor-selection-bg);
    color: var(--rs-color-highlight-ink) !important;
  }

  .CodeMirror .rs-is-code-selected * {
    color: var(--rs-color-highlight-ink) !important;
  }
}
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%;
  }

  /* Keys go to the owner's page while it has focus (app.js marks it). */
  iframe.rs-is-frame-focused {
    outline: var(--rs-focus-ring);
    outline-offset: calc(-1 * var(--rs-focus-offset));
  }
}
/*
  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 */

/* The frames stand on one line, bottom-aligned, and stack when they don't fit. */
.rs-c-published-preview-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  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 screenshot (or, without one, its name)
   until the live preview has loaded underneath it (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);
}
/* The screenshot fills the frame; the poster box is fixed, so nothing moves. */
.rs-orbit-app a.rs-c-sample-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background-color: var(--rs-color-surface);
}
/* Over a screenshot, the status shows only while loading or after a failure. */
.rs-orbit-app a.rs-c-sample-poster img + small {
  position: absolute;
  right: var(--rs-space-xs);
  bottom: var(--rs-space-xs);
  left: var(--rs-space-xs);
  height: auto;
  padding: var(--rs-space-2xs) var(--rs-space-xs);
  border-radius: var(--rs-radius-pill);
  background-color: var(--rs-color-ink);
  color: var(--rs-color-paper);
  opacity: 0;
}
.rs-orbit-app article[data-sample-state="loading"] a.rs-c-sample-poster img + small,
.rs-orbit-app article[data-sample-state="failed"] a.rs-c-sample-poster img + small {
  opacity: 1;
}
/* Once the live page has loaded, the poster gives way: a short crossfade, or
   at once when the visitor prefers reduced motion. */
.rs-orbit-app article[data-sample-state="loaded"] a.rs-c-sample-poster {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .rs-orbit-app article[data-sample-state="loaded"] a.rs-c-sample-poster {
    transition:
      opacity 180ms ease,
      visibility 0s linear 180ms;
  }
}
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,
.rs-c-domain-status[data-domain-https-state="healthy"] .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,
.rs-c-domain-status[data-domain-https-state="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-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 */

.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);
}
/* Status lines under the site's address: one plain sentence each, with a
   ✅ when done or a link to the next step. */
.rs-c-site-checks {
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-2xs);
  overflow-wrap: anywhere;
}
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;
}

/* Course link: a read-only field (selectable when the clipboard refuses) and
   its copy button, then whether the link works now. */
.rs-c-course-link {
  display: grid;
  gap: var(--rs-space-xs);
}
.rs-c-course-link__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-xs);
}
.rs-c-course-link__field {
  flex: 1 1 20ch;
  min-width: 0;
  padding: var(--rs-space-box-sm);
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-sm);
  background-color: var(--rs-color-paper);
  font-family: var(--rs-text-mono);
  font-size: var(--rs-text-code);
}
.rs-c-course-link .rs-c-help {
  margin: 0;
}

.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);
}
/* The text takes the room beside the action, which wraps below only when
   the text would get narrower than 16em. */
.rs-c-next-step__body {
  flex: 1 1 16em;
}
.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 */

/* A centred column as wide as the phone and desktop previews side by side,
   or the whole content width when they don't fit. The flash and the next
   step span it, so their edges line up with the previews. */
.rs-c-publish-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rs-space-xs);
  width: min(100%, var(--rs-preview-pair-width));
  margin-inline: auto;
  text-align: center;

  > p {
    max-width: var(--rs-text-measure);
    line-height: var(--rs-text-line-body);
  }
  .rs-c-actions {
    justify-content: center;
  }
  > .rs-c-next-step {
    align-self: stretch;
    text-align: start;
  }
}
body.rs-orbit-app main .rs-c-publish-result h1 {
  font-size: 2.89em;
  font-weight: var(--rs-text-weight-bold);
  overflow-wrap: anywhere;
}
body.rs-orbit-app main .rs-c-publish-result__address {
  font-size: var(--rs-text-heading-3);
  font-weight: var(--rs-text-weight-medium);
  overflow-wrap: anywhere;
}
.rs-c-safe-previews {
  max-width: 100%;
  overflow: hidden;
}

/* Legal pages (/terms, /privacy): plain reading sections rendered from
   docs/legal/v1. Lists keep their bullets, which preflight removes. */
.rs-c-legal {
  h2 {
    font-size: var(--rs-text-heading-2);
    font-weight: var(--rs-text-weight-bold);
    line-height: var(--rs-text-line-tight);
    text-wrap: balance;
    margin-top: var(--rs-space-xl);
    margin-bottom: var(--rs-space-2xs);
  }
  > :first-child {
    margin-top: var(--rs-space-md);
  }
  p,
  ul,
  blockquote {
    margin-top: var(--rs-space-xs);
  }
  blockquote {
    padding: var(--rs-space-box-md);
    border-radius: var(--rs-radius-lg);
    background-color: var(--rs-color-surface);
  }
}
:is(.rs-c-legal, .rs-c-legal-draft) ul {
  list-style: disc;
  padding-inline-start: var(--rs-space-lg);

  li {
    line-height: var(--rs-text-line-body);
    max-width: var(--rs-text-measure);
  }
  li + li {
    margin-top: var(--rs-space-3xs);
  }
}
.rs-c-legal-draft ul {
  margin-top: var(--rs-space-2xs);
}

/* 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);
}

/*
  Media library: the Library page (My media). Files are bordered cards
  (something you act on); notices are grey boxes. The page shows and hides
  its controls with the hidden attribute, which the component display rules
  above would otherwise override.
*/
.rs-scope-media [hidden],
#media-asset-dialog [hidden],
#media-remove-original-dialog [hidden],
#media-stop-serving-dialog [hidden] {
  display: none;
}

.rs-c-media-meter {
  display: grid;
  gap: var(--rs-space-2xs);
  max-width: var(--rs-text-measure);
}
.rs-c-media-meter__label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--rs-space-xs);
}
/* Bars: the storage meter and each upload's progress. */
meter.rs-c-media-meter__bar,
progress.rs-c-media-progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--rs-space-xs);
  border: 0;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-surface);
  overflow: hidden;
}
meter.rs-c-media-meter__bar::-webkit-meter-bar {
  height: var(--rs-space-xs);
  border: 0;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-surface);
}
meter.rs-c-media-meter__bar::-webkit-meter-optimum-value,
meter.rs-c-media-meter__bar::-webkit-meter-suboptimum-value,
meter.rs-c-media-meter__bar::-webkit-meter-even-less-good-value {
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-primary);
}
meter.rs-c-media-meter__bar::-moz-meter-bar {
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-primary);
}
.rs-c-media-meter[data-full] meter.rs-c-media-meter__bar::-webkit-meter-optimum-value {
  background: var(--rs-color-danger-ink);
}
.rs-c-media-meter[data-full] meter.rs-c-media-meter__bar::-moz-meter-bar {
  background: var(--rs-color-danger-ink);
}
.rs-c-media-meter[data-full] [data-media-full-note] {
  color: var(--rs-color-danger-ink);
}
progress.rs-c-media-progress::-webkit-progress-bar {
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-surface);
}
progress.rs-c-media-progress::-webkit-progress-value {
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-primary);
  transition: width 120ms linear;
}
progress.rs-c-media-progress::-moz-progress-bar {
  border-radius: var(--rs-radius-pill);
  background: var(--rs-color-primary);
}

.rs-c-media-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);
}
.rs-c-media-note.rs-c-media-note--warning {
  background-color: var(--rs-color-pending);
  color: var(--rs-color-pending-ink);
}

.rs-c-media-upload {
  display: grid;
  gap: var(--rs-space-md);
  margin-top: var(--rs-space-lg);
}
.rs-c-media-upload__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-xs) var(--rs-space-md);
}
/* The file input stays focusable; its label is the visible button. */
.rs-c-media-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.rs-c-media-upload__input:focus-visible + label {
  outline: var(--rs-focus-ring);
  outline-offset: var(--rs-focus-offset);
}
label.rs-c-btn.rs-c-btn--primary {
  background-color: var(--rs-color-primary);
  color: var(--rs-color-primary-ink);
}
label.rs-c-btn.rs-c-btn--primary:hover {
  background-color: var(--rs-color-primary-hover);
}
.rs-c-media-compress label {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2xs);
  font-weight: var(--rs-text-weight-medium);
}
.rs-c-media-compress input:disabled {
  cursor: not-allowed;
}

.rs-c-media-uploads {
  display: grid;
}
.rs-c-media-upload-item {
  display: grid;
  gap: var(--rs-space-2xs);
  padding: var(--rs-space-xs) 0;
  border-top: 1px solid var(--rs-color-border);
}
.rs-c-media-upload-item .rs-u-inline-flex-els {
  margin-top: 0;
}
.rs-c-media-upload-item__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--rs-space-3xs) var(--rs-space-md);
}
.rs-c-media-upload-item__name {
  min-width: 0;
  font-weight: var(--rs-text-weight-medium);
  overflow-wrap: anywhere;
}
.rs-c-media-upload-item__status {
  color: var(--rs-color-ink-muted);
}
.rs-c-media-upload-item[data-state="done"] .rs-c-media-upload-item__status {
  color: var(--rs-color-success-ink);
}
.rs-c-media-upload-item[data-state="failed"] .rs-c-media-upload-item__status {
  color: var(--rs-color-danger-ink);
}

.rs-c-media-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--rs-space-sm) var(--rs-space-lg);
  margin-top: var(--rs-space-md);

  label,
  legend {
    font-weight: var(--rs-text-weight-medium);
  }
  input[type="search"] {
    width: 100%;
    padding: var(--rs-space-box-sm);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-sm);
    background-color: var(--rs-color-paper);
  }
}
.rs-c-media-filters__search {
  display: grid;
  gap: var(--rs-space-3xs);
  flex: 1 1 16ch;
  max-width: 36ch;
}
.rs-c-media-filters__kind {
  margin: 0;
  padding: 0;
  border: 0;

  legend {
    padding: 0;
    margin-bottom: var(--rs-space-3xs);
  }
  label {
    display: inline-flex;
    align-items: center;
    gap: var(--rs-space-3xs);
    margin-right: var(--rs-space-md);
    font-weight: normal;
  }
}

.rs-c-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9em), 1fr));
  gap: var(--rs-space-md);
  margin-top: var(--rs-space-md);
}
.rs-c-media-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--rs-color-border);
  border-radius: var(--rs-radius-lg);
  overflow: hidden;
}
.rs-c-media-tile__preview,
.rs-c-media-detail__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background-color: var(--rs-color-surface);

  img:not([hidden]) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.rs-c-media-tile__file {
  font-size: 2.89em; /* the --rs-space-xl step */
  line-height: 1;
}
.rs-c-media-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rs-space-3xs);
  padding: var(--rs-space-xs);

  .rs-c-btn {
    margin-top: auto;
  }
  .rs-c-status {
    font-size: var(--rs-text-small);
  }
}
body.rs-orbit-app main p.rs-c-media-tile__name {
  max-width: 100%;
  overflow: hidden;
  font-weight: var(--rs-text-weight-bold);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rs-c-media-tile__meta {
  font-size: var(--rs-text-small);
  color: var(--rs-color-ink-muted);
}
.rs-c-media-tile__body .rs-c-media-tile__meta:last-of-type {
  margin-bottom: var(--rs-space-2xs);
}

.rs-c-media-detail {
  display: grid;
  grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
  align-items: start;
  gap: var(--rs-space-md);
}
.rs-c-media-detail__preview {
  border-radius: var(--rs-radius-lg);
  overflow: hidden;
}
dl.rs-c-data-list.rs-c-media-detail__facts {
  margin-top: 0;
  overflow-wrap: anywhere;
}
.rs-c-media-link {
  display: grid;
  gap: var(--rs-space-3xs);
  margin-top: var(--rs-space-md);

  label {
    font-weight: var(--rs-text-weight-medium);
  }
  input {
    width: 100%;
    padding: var(--rs-space-box-sm);
    border: 1px solid var(--rs-color-border);
    border-radius: var(--rs-radius-sm);
    background-color: var(--rs-color-surface);
    font-family: var(--rs-text-mono);
    font-size: var(--rs-text-small);
  }
}
.rs-c-media-versions {
  display: grid;
  margin-top: var(--rs-space-xs);
}
.rs-c-media-version {
  display: grid;
  gap: var(--rs-space-3xs);
  padding: var(--rs-space-xs) 0;
  border-top: 1px solid var(--rs-color-border);
}
.rs-c-media-version__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-3xs) var(--rs-space-xs);
}
.rs-c-media-version .rs-c-media-version__actions {
  margin-top: 0;
}
/* The used-on list (docs/backlog/media-reference-retention.md): each of the
   owner's sites with its Live, Draft and Older version marks. */
.rs-c-media-uses {
  margin-top: var(--rs-space-md);
}
.rs-c-media-uses__list {
  display: grid;
  gap: var(--rs-space-3xs);
  margin: var(--rs-space-xs) 0 0;
  padding: 0;
  list-style: none;
}
/* Paragraphs after a used-on list, or after one of the Stop serving
   dialog's two groups, keep the dialog's paragraph spacing. */
.rs-c-media-uses__list + p,
.rs-c-media-stop__group + p {
  margin-top: var(--rs-space-2xs);
}
.rs-c-media-uses + p {
  margin-top: var(--rs-space-sm);
}
.rs-c-media-use {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-3xs) var(--rs-space-xs);

  .rs-c-status {
    font-size: var(--rs-text-small);
  }
}

@media (max-width: 40rem) {
  .rs-c-media-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}