/* Management pages (owners and admin). Tokens and fonts come from tokens.css. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--rb-color-surface-light);
  color: var(--rb-color-text-dark-primary);
  font-family: var(--rb-font-family-default);
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2 {
  margin: 0 0 var(--rb-normal);
  font-family: var(--rb-font-family-heading);
  font-weight: 700;
  line-height: 1.2;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}

a {
  color: var(--rb-color-primary);
}

code {
  padding: 0 var(--rb-2-x-tight);
  border-radius: var(--rb-border-radius-small);
  background: var(--rb-color-glass-dark-05);
  font-size: 0.875em;
}

.muted {
  color: var(--rb-color-text-dark-secondary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* App bar: surface-dark-lighter per the App Bar component doc. */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  padding: var(--rb-tight) var(--rb-x-loose);
  background: var(--rb-color-surface-dark-lighter);
  color: var(--rb-color-text-light-primary);
}
.app-bar__title {
  color: inherit;
  font-family: var(--rb-font-family-heading);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}
.app-bar form {
  margin: 0;
}
.app-bar__account {
  display: flex;
  align-items: center;
  gap: var(--rb-normal);
  min-width: 0;
}
.app-bar__user {
  overflow: hidden;
  color: var(--rb-color-text-light-secondary);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--rb-x-loose);
}

.card {
  margin-bottom: var(--rb-loose);
  padding: var(--rb-loose);
  border: 1px solid var(--rb-color-glass-dark-10);
  border-radius: var(--rb-border-radius-large);
  background: var(--rb-color-surface-light-lighter);
}
.card--narrow {
  max-width: 28rem;
  margin: var(--rb-2-x-loose) auto;
}
.card--danger {
  border-color: var(--rb-color-accent-negative-lightest);
}

/* Buttons: pill-shaped (--rb-border-radius-full), primary is blue, never brand red. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 var(--rb-loose);
  border: 1px solid transparent;
  border-radius: var(--rb-border-radius-full);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button:focus-visible,
.field__control:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--rb-color-primary);
  outline-offset: 2px;
}
.button--primary {
  background: var(--rb-color-primary);
  color: var(--rb-color-text-light-primary);
}
.button--primary:hover {
  background: var(--rb-color-primary-lighter);
}
.button--primary:active {
  background: var(--rb-color-primary-darker);
}
.button--secondary {
  border-color: var(--rb-color-glass-dark-20);
  background: transparent;
  color: var(--rb-color-text-dark-primary);
}
.button--secondary:hover {
  background: var(--rb-color-glass-dark-05);
}
.button--secondary-light {
  border-color: var(--rb-color-glass-light-20);
  background: transparent;
  color: var(--rb-color-text-light-primary);
}
.button--negative {
  background: var(--rb-color-accent-negative);
  color: var(--rb-color-text-light-primary);
}
.button--negative:hover {
  background: var(--rb-color-accent-negative-darker);
}

/* Forms */
.form {
  max-width: 40rem;
}
.form .button + .button {
  margin-left: var(--rb-x-tight);
}
.form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: none;
  margin-top: var(--rb-normal);
}
.form--inline .field {
  margin: 0 var(--rb-normal) 0 0;
}
.field {
  margin-bottom: var(--rb-loose);
}
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  column-gap: var(--rb-normal);
}
.field__label {
  display: block;
  margin-bottom: var(--rb-2-x-tight);
  font-size: 0.875rem;
  font-weight: 500;
}
.field__control {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--rb-x-tight) var(--rb-tight);
  border: 1px solid var(--rb-color-glass-dark-20);
  border-radius: var(--rb-border-radius-medium);
  background: var(--rb-color-surface-light-lighter);
  color: inherit;
  font: inherit;
}
.field__control:hover {
  border-color: var(--rb-color-glass-dark-40);
}
.field__control[readonly] {
  background: var(--rb-color-surface-light);
}
.field__control[aria-invalid="true"] {
  border-color: var(--rb-color-accent-negative);
}
.field__control--small {
  min-width: 16rem;
  min-height: 2rem;
  font-size: 0.875rem;
}
.field__hint {
  margin: var(--rb-2-x-tight) 0 0;
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
}
.field__error {
  margin: var(--rb-2-x-tight) 0 0;
  color: var(--rb-color-accent-negative);
  font-size: 0.875rem;
}
.field--checkbox {
  display: flex;
  align-items: flex-start;
}
.field--checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem var(--rb-x-tight) 0 0;
  accent-color: var(--rb-color-primary);
}

/* Inline messages */
.inline-message {
  margin: 0 0 var(--rb-loose);
  padding: var(--rb-tight) var(--rb-normal);
  border: 1px solid var(--rb-color-glass-dark-10);
  border-radius: var(--rb-border-radius-large);
  background: var(--rb-color-primary-lightest);
}
.inline-message p {
  margin: 0 0 var(--rb-x-tight);
}
.inline-message .button {
  margin-top: var(--rb-x-tight);
}
.inline-message--success {
  background: var(--rb-color-accent-positive-lightest);
  color: var(--rb-color-accent-positive-darker);
}
.inline-message--error {
  background: var(--rb-color-accent-negative-lightest);
  color: var(--rb-color-accent-negative-darker);
}

/* Tags */
.tag {
  display: inline-block;
  margin: 0 var(--rb-2-x-tight) var(--rb-2-x-tight) 0;
  padding: 0 var(--rb-x-tight);
  border: 1px solid var(--rb-color-glass-dark-10);
  border-radius: var(--rb-border-radius-full);
  background: var(--rb-color-glass-dark-05);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.tag--positive {
  background: var(--rb-color-accent-positive-lightest);
  color: var(--rb-color-accent-positive-darker);
}
.tag--info {
  background: var(--rb-color-accent-info-lightest);
  color: var(--rb-color-accent-info-darker);
}
.tag--negative {
  background: var(--rb-color-accent-negative-lightest);
  color: var(--rb-color-accent-negative-darker);
}

/* Table */
.table-wrap {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th,
.table td {
  padding: var(--rb-tight) var(--rb-x-tight);
  border-bottom: 1px solid var(--rb-color-glass-dark-10);
  text-align: left;
  vertical-align: top;
}
.table th {
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}
.actions {
  white-space: nowrap;
}
.actions .button + .button {
  margin-left: var(--rb-x-tight);
}

.steps {
  margin: 0 0 var(--rb-normal);
  padding-left: var(--rb-loose);
}
.steps li {
  margin-bottom: var(--rb-2-x-tight);
}

/* Screen link with its Preview button */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-x-tight);
}
.link-row .field__control {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: 0.875rem;
}
.link-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-x-tight);
}
.status-line {
  margin: var(--rb-normal) 0 0;
}

/* Page header: title, subtitle and page-level actions (Stellar Page Header). */
.page-header {
  margin-bottom: var(--rb-loose);
}
.page-header__back {
  display: inline-block;
  margin-bottom: var(--rb-x-tight);
}
.page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rb-normal);
}
.page-header h1 {
  margin: 0;
}
.page-header__subtitle {
  max-width: 44rem;
  margin: var(--rb-2-x-tight) 0 0;
  color: var(--rb-color-text-dark-secondary);
}
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-x-tight);
}

.button--ghost {
  min-height: 2rem;
  margin-top: var(--rb-tight);
  padding: 0 var(--rb-tight);
  background: transparent;
  color: var(--rb-color-primary);
}
.button--ghost:hover {
  background: var(--rb-color-glass-dark-05);
}
.button.is-done {
  border-color: var(--rb-color-accent-positive-darker);
  background: var(--rb-color-accent-positive-lightest);
  color: var(--rb-color-accent-positive-darker);
}
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-x-tight);
  margin-top: var(--rb-loose);
}
.form .form__actions .button + .button {
  margin-left: 0;
}
.form--bare {
  margin: 0;
}
.field--narrow {
  max-width: 24rem;
}
.field__hint--block {
  margin-bottom: var(--rb-loose);
}
.page-note {
  max-width: 48rem;
  font-size: 0.875rem;
}

/* Calendars as cards: name, source and Add view, then its views, each with its link. */
.calendar-list {
  margin: 0 0 var(--rb-loose);
  padding: 0;
  list-style: none;
}
.calendar-card {
  margin-bottom: var(--rb-tight);
  padding: var(--rb-normal) var(--rb-loose) var(--rb-tight);
  border: 1px solid var(--rb-color-glass-dark-10);
  border-radius: var(--rb-border-radius-large);
  background: var(--rb-color-surface-light-lighter);
}
.calendar-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-normal);
  margin-bottom: var(--rb-tight);
}
.calendar-card__main {
  flex: 1 1 22rem;
  min-width: 0;
}
.calendar-card__title {
  margin: 0;
  font-size: 1.25rem;
}
.calendar-card__meta {
  margin: var(--rb-2-x-tight) 0 0;
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
}
.calendar-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-x-tight);
}
.view-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.view-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-x-tight) var(--rb-normal);
  padding: var(--rb-tight) 0;
  border-top: 1px solid var(--rb-color-glass-dark-10);
}
.view-row__main {
  flex: 1 1 20rem;
  min-width: 0;
}
.view-row__name {
  color: var(--rb-color-text-dark-primary);
  font-weight: 500;
  text-decoration: none;
}
.view-row__name:hover {
  text-decoration: underline;
}
.view-row__title,
.view-row__zone {
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
}
.view-row__title::before,
.view-row__zone::before {
  content: "· ";
}
.view-row__status {
  margin: var(--rb-2-x-tight) 0 0;
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
}
.view-row__status .tag {
  margin-bottom: 0;
}
.view-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-x-tight);
}

.empty-state {
  padding: var(--rb-2-x-loose) var(--rb-loose);
  text-align: center;
}
.empty-state p {
  margin: 0 auto var(--rb-normal);
  max-width: 30rem;
}

/* Add calendar: steps, then the list of calendars to choose from. */
.steps-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-loose);
  margin: 0 0 var(--rb-loose);
  padding: 0;
  list-style: none;
  color: var(--rb-color-text-dark-secondary);
  font-weight: 500;
}
.steps-bar__step {
  display: flex;
  align-items: center;
}
.steps-bar__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: var(--rb-x-tight);
  border: 1px solid var(--rb-color-glass-dark-20);
  border-radius: var(--rb-border-radius-full);
  font-size: 0.875rem;
}
.steps-bar__step.is-current {
  color: var(--rb-color-text-dark-primary);
}
.steps-bar__step.is-current .steps-bar__number {
  border-color: var(--rb-color-primary);
  background: var(--rb-color-primary);
  color: var(--rb-color-text-light-primary);
}
.steps-bar__step.is-done .steps-bar__number {
  border-color: var(--rb-color-primary);
  color: var(--rb-color-primary);
}
.card--list h2 {
  font-size: 1.25rem;
}
.choice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.choice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-normal);
  padding: var(--rb-tight) 0;
  border-top: 1px solid var(--rb-color-glass-dark-10);
}
.choice-row__text {
  min-width: 0;
}
.choice-row__name {
  display: block;
  font-weight: 500;
}
.choice-row__detail {
  display: block;
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
}
.choice-row__detail .tag {
  margin: 0;
}
.chosen {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rb-normal);
  margin-bottom: var(--rb-loose);
  padding-bottom: var(--rb-normal);
  border-bottom: 1px solid var(--rb-color-glass-dark-10);
}
.chosen p {
  margin: 0;
}
.chosen__label {
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}
.chosen__name {
  font-family: var(--rb-font-family-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

/* What to show: range cards, then the chosen range's layouts with pictures. */
.display-form {
  max-width: 60rem;
}
fieldset.field,
.layouts {
  min-width: 0;
  margin: 0 0 var(--rb-loose);
  padding: 0;
  border: 0;
}
.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--rb-x-tight);
}
.option,
.layout-option {
  display: block;
  position: relative;
  padding: var(--rb-tight) var(--rb-normal);
  border: 1px solid var(--rb-color-glass-dark-20);
  border-radius: var(--rb-border-radius-large);
  background: var(--rb-color-surface-light-lighter);
  cursor: pointer;
}
.option:hover,
.layout-option:hover {
  border-color: var(--rb-color-glass-dark-40);
}
.option:has(input:checked),
.layout-option:has(input:checked) {
  border-color: var(--rb-color-primary);
  background: var(--rb-color-primary-lightest);
  box-shadow: 0 0 0 1px var(--rb-color-primary);
}
.option:has(input:focus-visible),
.layout-option:has(input:focus-visible) {
  outline: 2px solid var(--rb-color-primary);
  outline-offset: 2px;
}
/* The radio itself stays reachable by keyboard and screen readers; the card shows the state. */
.option input,
.layout-option input {
  position: absolute;
  top: var(--rb-tight);
  right: var(--rb-tight);
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--rb-color-primary);
}
.option__name {
  display: block;
  padding-right: var(--rb-loose);
  font-family: var(--rb-font-family-heading);
  font-size: 1.125rem;
  font-weight: 700;
}
.option__detail,
.layout-option__detail {
  display: block;
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
}
.layouts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--rb-tight);
}
.layout-option {
  padding: var(--rb-tight);
}
.layout-option .layout-option__name input {
  position: static;
  flex: none;
  margin-right: var(--rb-x-tight);
}
.layout-option__name {
  display: flex;
  align-items: center;
  margin-top: var(--rb-x-tight);
  font-weight: 500;
}
.layout-option__name .tag {
  margin: 0 0 0 var(--rb-2-x-tight);
}
/* Only the chosen range's layouts; browsers without :has show them all, which still works. */
.display-form:has(input[name="range"][value="day"]:checked) .layouts:not([data-range="day"]),
.display-form:has(input[name="range"][value="week"]:checked) .layouts:not([data-range="week"]),
.display-form:has(input[name="range"][value="month"]:checked) .layouts:not([data-range="month"]),
.display-form:has(input[name="range"][value="year"]:checked) .layouts:not([data-range="year"]) {
  display: none;
}
.display-form:has(input[name="range"]:checked) .layouts__range {
  display: none;
}

/* Layout pictures (src/thumbs.ts). */
.thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rb-border-radius-medium);
}
/*
 * Coloured parts follow the form's colour (themes.css; data-theme on .display-form) and look
 * (data-appearance): D's colours when light, A's when dark, as on the screen (styles.css).
 */
.t-bg {
  fill: var(--rb-color-surface-light);
}
.t-bar {
  fill: var(--rb-color-surface-dark-lighter);
}
.t-bar-text {
  fill: var(--rb-color-glass-light-60);
}
.t-card,
.t-now-card,
.t-row-now {
  fill: var(--rb-color-surface-light-lighter);
  stroke: var(--rb-color-glass-dark-10);
  stroke-width: 0.5;
}
.t-weekend {
  fill: var(--rb-color-surface-light);
}
.t-past {
  opacity: 0.45;
}
.t-today {
  stroke: var(--theme-fill);
  stroke-width: 1;
}
.t-line,
.t-dot {
  fill: var(--rb-color-glass-dark-20);
}
.t-line-strong,
.t-now-text {
  fill: var(--rb-color-glass-dark-60);
}
.t-row {
  fill: var(--rb-color-surface-light-darker);
}
.t-accent,
.t-dot-on,
.t-now-strip,
.t-now-label,
.t-now-progress,
.t-level-2 {
  fill: var(--theme-fill);
}
.t-now {
  fill: var(--theme-fill);
}
.t-now-track {
  fill: var(--rb-color-glass-dark-10);
}
.t-next,
.t-level-1 {
  fill: var(--theme-soft);
}
.t-muted {
  fill: var(--rb-color-glass-dark-05);
}
/* Events by kind, as the screen colours them: shades of the form's colour, online 300, in person 500, all day 100. */
.t-event {
  fill: var(--palette-300);
}
.t-event--room {
  fill: var(--palette-500);
}
.t-event--allday {
  fill: var(--palette-100);
}
.t-event--now {
  stroke: var(--theme-fill);
  stroke-width: 0.8;
}

.display-form[data-appearance="dark"] .t-bg,
.display-form[data-appearance="dark"] .t-bar {
  fill: var(--rb-color-surface-dark-darker);
}
.display-form[data-appearance="dark"] .t-bar-text {
  fill: var(--rb-color-glass-light-80);
}
.display-form[data-appearance="dark"] .t-card {
  fill: #0a1f35;
  stroke: none;
}
.display-form[data-appearance="dark"] .t-next-card,
.display-form[data-appearance="dark"] .t-row {
  fill: #123050;
}
.display-form[data-appearance="dark"] .t-weekend {
  fill: var(--rb-color-surface-dark);
}
.display-form[data-appearance="dark"] .t-today {
  stroke: var(--theme-on-dark);
}
.display-form[data-appearance="dark"] .t-line,
.display-form[data-appearance="dark"] .t-dot,
.display-form[data-appearance="dark"] .t-now-track {
  fill: var(--rb-color-glass-light-20);
}
.display-form[data-appearance="dark"] .t-line-strong,
.display-form[data-appearance="dark"] .t-now-text,
.display-form[data-appearance="dark"] .t-now-progress {
  fill: var(--rb-color-glass-light-80);
}
.display-form[data-appearance="dark"] .t-now-card,
.display-form[data-appearance="dark"] .t-row-now,
.display-form[data-appearance="dark"] .t-event--now {
  fill: var(--theme-fill);
  stroke: none;
}
.display-form[data-appearance="dark"] .t-now-strip {
  fill: transparent;
}
.display-form[data-appearance="dark"] .t-accent,
.display-form[data-appearance="dark"] .t-dot-on {
  fill: var(--theme-on-dark);
}
.display-form[data-appearance="dark"] .t-now-label,
.display-form[data-appearance="dark"] .t-now {
  fill: var(--rb-color-accent-negative);
}
.display-form[data-appearance="dark"] .t-next {
  fill: #ffc906;
}
.display-form[data-appearance="dark"] .t-event--allday {
  fill: var(--theme-on-dark);
}
.display-form[data-appearance="dark"] .t-event,
.display-form[data-appearance="dark"] .t-event--room,
.display-form[data-appearance="dark"] .t-level-1 {
  fill: #163a5f;
}
.display-form[data-appearance="dark"] .t-muted {
  fill: var(--rb-color-glass-light-05);
}

/*
 * Colour picker: a small screen in each colour, in the form's look. Light: the navy bar, what's on now in
 * the colour, what's next in its pale shade. Dark: navy, what's on now in the colour, its light shade.
 */
.themes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--rb-tight);
}
.theme-swatch,
.look-swatch {
  display: block;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--rb-color-glass-dark-10);
  border-radius: var(--rb-border-radius-medium);
  background: var(--rb-color-surface-light);
}
.theme-swatch__bar,
.look-swatch__bar {
  display: block;
  height: 0.875rem;
  margin-bottom: var(--rb-x-tight);
  background: var(--rb-color-surface-dark-lighter);
}
.theme-swatch__row,
.look-swatch__row {
  display: block;
  height: 0.75rem;
  margin: 0 var(--rb-x-tight) var(--rb-2-x-tight);
  border-radius: var(--rb-border-radius-small);
  background: var(--theme-fill);
}
.theme-swatch__row + .theme-swatch__row {
  border: 1px solid var(--theme-outline);
  background: var(--theme-soft);
}
.display-form[data-appearance="dark"] .theme-swatch,
.look-swatch[data-look="dark"] {
  border-color: transparent;
  background: var(--rb-color-surface-dark-darker);
}
.display-form[data-appearance="dark"] .theme-swatch__bar,
.look-swatch[data-look="dark"] .look-swatch__bar {
  width: 45%;
  height: 0.375rem;
  margin: var(--rb-x-tight) var(--rb-x-tight) var(--rb-x-tight);
  border-radius: var(--rb-border-radius-small);
  background: var(--rb-color-glass-light-60);
}
.display-form[data-appearance="dark"] .theme-swatch__row + .theme-swatch__row {
  border-color: transparent;
  background: var(--theme-on-dark);
}

/* Light or dark: the same small screen in the form's colour, light and dark (the next event's colour). */
.look-option .look-swatch {
  margin-bottom: var(--rb-x-tight);
}
/* The radio beside the name, below the picture (3.5rem tall plus its margin). */
.look-option input {
  top: calc(var(--rb-tight) + 3.5rem + var(--rb-x-tight) + 0.25rem);
}
.look-swatch[data-look="light"] .look-swatch__row + .look-swatch__row {
  background: var(--palette-300);
}
.look-swatch[data-look="dark"] .look-swatch__row + .look-swatch__row {
  background: #ffc906;
}

/*
 * Live preview: what the link shows, on a Videri screen. admin.js draws the page at the screen's own
 * resolution and scales it into a picture of the screen (.dipo), shaped like its pixels through
 * --dipo-ratio. Without the script, screens are 9:16 and 16:9. Every DiPo gets the same silver bezel,
 * whatever its model or orientation, and larger models are drawn larger (--dipo-scale, previewSize in
 * src/devices.ts): the stage keeps room for the largest, so the page doesn't move when the model changes. Portrait and
 * landscape stand side by side at the same height, or one at a time (.preview--toggle) in narrow columns.
 */
.preview {
  --preview-max-height: min(70vh, 34rem);
  margin-top: var(--rb-normal);
}
.preview--toggle {
  --preview-max-height: min(62vh, 36rem);
}
.preview__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-x-tight) var(--rb-normal);
  margin-bottom: var(--rb-tight);
}
.preview__bar .segmented {
  margin-bottom: 0;
}
.preview__device {
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  gap: var(--rb-x-tight);
  max-width: 22rem;
}
.preview__device[hidden] {
  display: none;
}
/* Narrow columns: the choice of DiPo on a row of its own, above the orientation switch. */
.preview--toggle .preview__device {
  flex-basis: 100%;
  max-width: none;
}
.preview__device-label {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.preview__device .field__control {
  flex: 1 1 auto;
  min-width: 0;
}
.preview__open {
  margin-left: auto;
  font-size: 0.875rem;
}
.preview__frames {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--rb-loose);
}
/*
 * Each figure is room for the largest DiPo (16:9) in its orientation, the same whichever 16:9 model is
 * chosen, so they're all sized against it; a square model gets a square room and fills it. Its width
 * grows in proportion to that shape on top of the two bezels, so portrait and landscape stand at the
 * same height: (width - 2 × bezel) / room + 2 × bezel is the same for both.
 */
.dipo {
  --dipo-bezel: 0.625rem;
  --dipo-sides: calc(2 * var(--dipo-bezel));
  --dipo-room: calc(9 / 16);
  flex: var(--dipo-room) 1 var(--dipo-sides);
  min-width: 0;
  max-width: calc((var(--preview-max-height) - var(--dipo-sides)) * var(--dipo-room) + var(--dipo-sides));
  margin: 0;
  container-type: inline-size;
}
.dipo--landscape {
  --dipo-room: calc(16 / 9);
}
.preview.is-square .dipo--portrait {
  --dipo-room: 1;
}
/* Smaller models stand on the room's bottom edge, centred. */
.dipo__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc((100cqw - var(--dipo-sides)) / var(--dipo-room) + var(--dipo-sides));
}
/* The bezel: the device's own brushed silver, not a theme colour, so it's the same on every page. */
.dipo__frame {
  flex: none;
  width: calc((100cqw - var(--dipo-sides)) * var(--dipo-scale, 1) + var(--dipo-sides));
  padding: var(--dipo-bezel);
  border-radius: var(--rb-border-radius-small);
  background: linear-gradient(135deg, #f2f3f5 0%, #d3d6da 35%, #b4b9be 50%, #d3d6da 65%, #eceef0 100%);
  box-shadow:
    inset 0 0 0 1px var(--rb-color-glass-light-60),
    inset 0 -1px 0 1px var(--rb-color-glass-dark-10),
    0 0.25rem 1rem var(--rb-color-glass-dark-20);
}
.dipo__screen {
  position: relative;
  aspect-ratio: var(--dipo-ratio, var(--dipo-room));
  overflow: hidden;
  background: var(--rb-color-surface-light);
  box-shadow: 0 0 0 1px var(--rb-color-glass-dark-40);
}
.dipo__screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
/* admin.js sets the screen's own size in pixels and the scale. */
.preview.is-device .dipo__screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.dipo__caption {
  margin-top: var(--rb-x-tight);
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* One at a time, chosen with the Portrait/Landscape switch; square screens have only one. */
.preview--toggle:has(input[value="landscape"]:checked) .dipo--portrait,
.preview--toggle:has(input[value="portrait"]:checked) .dipo--landscape,
.preview.is-square .dipo--landscape,
.preview.is-square .preview__orientation {
  display: none;
}
.preview.preview--toggle.is-square .dipo.dipo--portrait {
  display: block;
}
.preview__about {
  margin: var(--rb-normal) 0 0;
  font-size: 0.875rem;
}
.preview__hint {
  margin: var(--rb-2-x-tight) 0 0;
  color: var(--rb-color-text-dark-secondary);
  font-size: 0.8125rem;
}
.preview__note {
  margin: 0 0 var(--rb-x-tight);
  padding: var(--rb-2-x-tight) var(--rb-tight);
  border-radius: var(--rb-border-radius-medium);
  background: var(--rb-color-accent-info-lightest);
  color: var(--rb-color-accent-info-darker);
  font-size: 0.875rem;
}

/* Segmented switch (Stellar Button Toggle): radios styled as joined pills. */
.segmented {
  display: inline-flex;
  margin-bottom: var(--rb-tight);
  padding: 0.125rem;
  border: 1px solid var(--rb-color-glass-dark-20);
  border-radius: var(--rb-border-radius-full);
}
.segmented label {
  position: relative;
  padding: var(--rb-2-x-tight) var(--rb-normal);
  border-radius: var(--rb-border-radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.segmented input {
  position: absolute;
  opacity: 0;
}
.segmented label:has(input:checked) {
  background: var(--rb-color-primary);
  color: var(--rb-color-text-light-primary);
}
.segmented label:has(input:focus-visible) {
  outline: 2px solid var(--rb-color-primary);
  outline-offset: 2px;
}

/* Add calendar, step 2: the choices beside the preview, which stays in view while scrolling. */
.add-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--rb-loose);
  align-items: start;
}
.add-layout .display-form .card {
  margin-bottom: 0;
}
.add-layout__preview {
  position: sticky;
  top: var(--rb-normal);
}
.add-layout__preview h2 {
  font-size: 1.25rem;
}
/* Disclosures: Replace link, Remove from screens, A team that isn't listed. */
.disclosure {
  border-top: 1px solid var(--rb-color-glass-dark-10);
}
.disclosure summary {
  padding: var(--rb-tight) 0;
  font-weight: 500;
  cursor: pointer;
}
.disclosure--danger summary {
  color: var(--rb-color-accent-negative-darker);
}
.disclosure__body {
  padding: 0 0 var(--rb-normal);
}
.disclosure__body p {
  max-width: 44rem;
  margin-top: 0;
}
.disclosure--card {
  margin-bottom: var(--rb-loose);
  padding: 0 var(--rb-loose);
  border: 1px solid var(--rb-color-glass-dark-10);
  border-radius: var(--rb-border-radius-large);
  background: var(--rb-color-surface-light-lighter);
}
.disclosure--card summary {
  padding: var(--rb-normal) 0;
}
.disclosure--card .field {
  max-width: 40rem;
}

@media (max-width: 960px) {
  .add-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .add-layout__preview {
    position: static;
  }
}

@media (max-width: 729px) {
  .page {
    padding: var(--rb-normal);
  }
  .app-bar {
    padding: var(--rb-tight) var(--rb-normal);
  }
  .app-bar__user {
    display: none;
  }
  .preview__frames {
    flex-direction: column;
    align-items: center;
  }
  .dipo,
  .dipo--landscape {
    flex: none;
    width: 100%;
  }
  .calendar-card {
    padding: var(--rb-normal) var(--rb-normal) var(--rb-x-tight);
  }
  .choice-row {
    flex-wrap: wrap;
  }
}