/*
 * Owned layout primitives — replaces the vendored Bootstrap 2/3 grid that was
 * removed for security (Bootstrap 3.3.7 JS carried published XSS CVEs and was
 * dead weight). Only the classes still referenced in the portal markup are
 * implemented here; every component (.btn, .alert, .table, .well, .nav-list,
 * navbar, dropdown) is already styled with design tokens in the redesign CSS,
 * so this file deliberately stays small.
 */

/* Page width wrapper. Mirrors Bootstrap 2's responsive .container widths so
   the overall page width does not shift after the upgrade. */
.container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
  width: 100%;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .container {
    max-width: 724px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Flex grid. The two-column layouts (content + sidebar) and full-width rows
   used across docs, bots, and tutorials map cleanly onto flexbox. */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.row > [class*="span"] {
  box-sizing: border-box;
  min-width: 0;
}

.span12 {
  flex: 1 1 100%;
}

.span9 {
  flex: 1 1 0%;
  min-width: 0;
}

.span4 {
  flex: 1 1 300px;
}

.span3 {
  flex: 0 0 240px;
}

@media (max-width: 767px) {
  .span3,
  .span4,
  .span9,
  .span12 {
    flex: 1 1 100%;
  }
}

/* Button variants Bootstrap previously supplied; base .btn lives in the
   tokenized application.css. */
.btn-large {
  font-size: 16px;
  padding: 11px 19px;
}

.btn-secondary {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* List reset previously inherited from Bootstrap's base .nav. */
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hide {
  display: none;
}

.row::after,
.navbar-inner::after,
.navbar .navbar-inner .container::after {
  clear: both;
  content: "";
  display: table;
}

/* button_to wraps its control in a <form>; display: contents lets that button
   participate directly in the surrounding flex/inline layout exactly as the
   old <a> link did, so action rows keep their spacing. */
.bot-action-form,
.account-logout-form {
  display: contents;
}

.inline-form {
  display: inline;
  margin: 0;
}
/* line 1, app/assets/stylesheets/tutorials.sass */
#page.tutorial {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
  max-width: 980px;
}

/* line 6, app/assets/stylesheets/tutorials.sass */
#page.tutorial h1, #page.tutorial h2 {
  color: var(--text-primary);
  font-weight: 700;
}

/* line 9, app/assets/stylesheets/tutorials.sass */
#page.tutorial p {
  font-size: 16px;
  line-height: 1.65;
}

/* line 12, app/assets/stylesheets/tutorials.sass */
#page.tutorial .section-header {
  font-size: 24px;
  margin: 48px 0 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
}

/* line 17, app/assets/stylesheets/tutorials.sass */
#page.tutorial .section-header:first-child {
  margin-top: 0;
}

/* line 20, app/assets/stylesheets/tutorials.sass */
#page.tutorial h3, #page.tutorial h4 {
  color: var(--text-primary);
  margin-top: 24px;
}

/* line 24, app/assets/stylesheets/tutorials.sass */
#page.tutorial ul {
  margin-bottom: 14px;
}

/* line 27, app/assets/stylesheets/tutorials.sass */
#page.tutorial pre {
  margin: 12px 0 18px;
}

/* line 33, app/assets/stylesheets/tutorials.sass */
#page.tutorial .code-block-wrap {
  margin: 12px 0 18px;
}

/* line 35, app/assets/stylesheets/tutorials.sass */
#page.tutorial .code-block-wrap pre {
  margin: 0;
}

/* line 38, app/assets/stylesheets/tutorials.sass */
#page.tutorial img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}
/* line 1, app/assets/stylesheets/forms.sass */
.form-section {
  border-top: 1px solid var(--border-default);
  margin-top: 24px;
  padding-top: 22px;
}

/* line 6, app/assets/stylesheets/forms.sass */
.form-section:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* line 11, app/assets/stylesheets/forms.sass */
.form-section.is-hidden {
  display: none;
}

/* line 14, app/assets/stylesheets/forms.sass */
.form-field {
  display: block;
  margin-bottom: 20px;
}

/* line 18, app/assets/stylesheets/forms.sass */
.form-field:last-child {
  margin-bottom: 0;
}
/* line 1, app/assets/stylesheets/applications.sass */
body {
  background-image: none;
}

/* line 5, app/assets/stylesheets/applications.sass */
.sidebar h2:first-child {
  margin-top: 0;
}

/* line 9, app/assets/stylesheets/applications.sass */
body.applications textarea {
  min-height: 86px;
}

/* line 12, app/assets/stylesheets/applications.sass */
body.applications label.checkbox {
  display: inline-flex;
  gap: 8px;
  font-weight: normal;
  margin-top: 10px;
  padding-left: 0;
}

/* line 19, app/assets/stylesheets/applications.sass */
body.applications tr.banned {
  text-decoration: line-through;
}

/* line 21, app/assets/stylesheets/applications.sass */
body.applications tr.banned .ban {
  visibility: hidden;
}

/* line 24, app/assets/stylesheets/applications.sass */
.alert {
  border-radius: var(--radius-md);
}

@media (max-width: 980px) {
  /* line 29, app/assets/stylesheets/applications.sass */
  .navbar .nav-collapse {
    height: auto;
  }
  /* line 33, app/assets/stylesheets/applications.sass */
  .new_application .span8 {
    width: 100%;
  }
}

/* line 36, app/assets/stylesheets/applications.sass */
.bots-table {
  word-break: break-all;
}

/* line 39, app/assets/stylesheets/applications.sass */
.sidebar-description {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

/* line 45, app/assets/stylesheets/applications.sass */
.sidebar-description h2 {
  margin: 0 0 12px 0;
  padding: 0;
  border-bottom: none;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* line 52, app/assets/stylesheets/applications.sass */
.sidebar-description p {
  margin-bottom: 10px;
}

/* line 54, app/assets/stylesheets/applications.sass */
.sidebar-description ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 58, app/assets/stylesheets/applications.sass */
.sidebar-description li {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* line 63, app/assets/stylesheets/applications.sass */
.sidebar-description li:last-child {
  margin-bottom: 0;
}

/* line 65, app/assets/stylesheets/applications.sass */
.sidebar-description li b {
  color: var(--text-primary);
  display: block;
}

/* line 69, app/assets/stylesheets/applications.sass */
.create-app {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

/* line 75, app/assets/stylesheets/applications.sass */
.create-app__intro {
  margin-bottom: 4px;
}

/* line 77, app/assets/stylesheets/applications.sass */
.create-app__intro h1 {
  margin-bottom: 8px;
}

/* line 80, app/assets/stylesheets/applications.sass */
.create-app__aside .sidebar-description {
  position: sticky;
  top: var(--space-5);
}

/* line 86, app/assets/stylesheets/applications.sass */
.applications.new #page,
.applications.edit #page {
  margin: var(--space-6) auto 0;
  max-width: 760px;
}

/* line 91, app/assets/stylesheets/applications.sass */
.form-section__title {
  border-bottom: none;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  padding: 0;
}

/* line 98, app/assets/stylesheets/applications.sass */
.form-section__hint {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 18px;
}

/* line 105, app/assets/stylesheets/applications.sass */
.form-field label {
  margin-bottom: 6px;
}

/* line 107, app/assets/stylesheets/applications.sass */
.form-field input,
.form-field textarea,
.form-field select {
  margin-top: 0;
}

/* line 111, app/assets/stylesheets/applications.sass */
.form-field .help-block {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 6px 0 0;
  opacity: 0.9;
}

/* line 118, app/assets/stylesheets/applications.sass */
.form-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 18px;
}

/* line 123, app/assets/stylesheets/applications.sass */
.form-row .form-field {
  margin-bottom: 0;
}

/* line 126, app/assets/stylesheets/applications.sass */
.form-agreement {
  align-items: flex-start;
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 16px;
}

/* line 135, app/assets/stylesheets/applications.sass */
.form-agreement input[type="checkbox"] {
  accent-color: var(--brand);
  cursor: pointer;
  flex: 0 0 auto;
  height: 16px;
  margin: 3px 0 0;
  width: 16px;
}

/* line 143, app/assets/stylesheets/applications.sass */
body.applications .form-agreement label.checkbox {
  color: var(--text-secondary);
  display: inline;
  font-weight: normal;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* line 155, app/assets/stylesheets/applications.sass */
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
}

/* line 162, app/assets/stylesheets/applications.sass */
.form-actions .btn {
  align-items: center;
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-width: 130px;
  padding: 10px 18px;
  text-decoration: none;
}

/* line 172, app/assets/stylesheets/applications.sass */
.form-actions .btn-secondary,
.form-actions .btn:not(.btn-primary) {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

/* line 178, app/assets/stylesheets/applications.sass */
.form-actions .btn-secondary:hover,
.form-actions .btn:not(.btn-primary):hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

@media (max-width: 880px) {
  /* line 184, app/assets/stylesheets/applications.sass */
  .create-app {
    grid-template-columns: 1fr;
  }
  /* line 186, app/assets/stylesheets/applications.sass */
  .create-app__aside .sidebar-description {
    position: static;
  }
}

@media (max-width: 520px) {
  /* line 190, app/assets/stylesheets/applications.sass */
  .form-row {
    grid-template-columns: 1fr;
  }
  /* line 195, app/assets/stylesheets/applications.sass */
  .form-actions {
    flex-direction: column;
  }
  /* line 198, app/assets/stylesheets/applications.sass */
  .form-actions .btn {
    width: 100%;
  }
}

/* line 201, app/assets/stylesheets/applications.sass */
.close {
  opacity: 0.6;
}

/* line 203, app/assets/stylesheets/applications.sass */
.close:hover {
  opacity: 1;
}

/* line 206, app/assets/stylesheets/applications.sass */
.section-header {
  padding: 0;
  margin: 0 0 1em 0;
  line-height: 27px;
  border-bottom: none;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

/* line 215, app/assets/stylesheets/applications.sass */
.nav-tabs a {
  margin-bottom: -1px;
  padding: 8px 12px;
  line-height: 18px;
  margin-right: 2px;
  display: list-item;
  float: left;
  color: var(--brand);
  border-radius: 4px 4px 0 0;
  border: 1px solid var(--border-default);
  border-bottom-color: var(--border-default);
  background-color: var(--bg-surface-muted);
  transition: color var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease), border-color var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease), background-color var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease);
}

/* line 229, app/assets/stylesheets/applications.sass */
.nav-tabs a:not(.active):hover {
  color: var(--brand-strong);
  border-color: var(--border-strong);
  background-color: var(--bg-surface);
}

/* line 234, app/assets/stylesheets/applications.sass */
.nav-tabs a.active {
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-bottom-color: transparent;
  cursor: default;
  background: var(--bg-surface);
}

/* line 241, app/assets/stylesheets/applications.sass */
.entity-list-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* line 247, app/assets/stylesheets/applications.sass */
.entity-title {
  align-items: center;
  display: flex;
  gap: 11px;
  margin: 0;
}

/* line 253, app/assets/stylesheets/applications.sass */
.entity-title__icon {
  align-items: center;
  background: var(--brand-soft);
  border-radius: 10px;
  color: var(--brand-strong);
  display: inline-flex;
  flex: none;
  height: 38px;
  justify-content: center;
  width: 38px;
}

/* line 264, app/assets/stylesheets/applications.sass */
.entity-title__text {
  min-width: 0;
}

/* line 267, app/assets/stylesheets/applications.sass */
.entity-title__count {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
}

/* line 278, app/assets/stylesheets/applications.sass */
.entity-create-btn {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

/* line 287, app/assets/stylesheets/applications.sass */
.entity-list-header .btn.btn-primary.entity-create-btn {
  background: var(--brand);
  background-image: none;
  border: 1px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 15px;
  text-shadow: none;
  transition: transform 160ms cubic-bezier(0.42, 0, 0.58, 1), background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

/* line 300, app/assets/stylesheets/applications.sass */
.entity-list-header .btn.btn-primary.entity-create-btn:hover {
  background: var(--brand-strong);
  background-image: none;
  border-color: var(--brand-strong);
  box-shadow: 0 4px 12px -4px rgba(21, 93, 252, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}

/* line 308, app/assets/stylesheets/applications.sass */
.entity-list-header .btn.btn-primary.entity-create-btn:active {
  background: var(--brand-strong);
  background-image: none;
  border-color: var(--brand-strong);
  box-shadow: none;
  color: #ffffff;
  transform: translateY(0) scale(0.97);
}

/* line 316, app/assets/stylesheets/applications.sass */
.entity-list-header .btn.btn-primary.entity-create-btn:focus {
  outline: none;
}

/* line 319, app/assets/stylesheets/applications.sass */
.entity-list-header .btn.btn-primary.entity-create-btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 323, app/assets/stylesheets/applications.sass */
.entity-list-header .btn.btn-primary.entity-create-btn:disabled,
.entity-list-header .btn.btn-primary.entity-create-btn[disabled],
.entity-list-header .btn.btn-primary.entity-create-btn.is-disabled {
  background: var(--brand);
  background-image: none;
  border-color: var(--brand);
  box-shadow: none;
  color: #ffffff;
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

/* line 335, app/assets/stylesheets/applications.sass */
.entity-create-btn__icon {
  align-items: center;
  display: inline-flex;
  transition: transform 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

/* line 340, app/assets/stylesheets/applications.sass */
.entity-list-header .btn.btn-primary.entity-create-btn:hover .entity-create-btn__icon {
  transform: rotate(90deg);
}

/* line 343, app/assets/stylesheets/applications.sass */
.entity-list-header .btn.btn-primary.entity-create-btn:disabled:hover .entity-create-btn__icon,
.entity-list-header .btn.btn-primary.entity-create-btn[disabled]:hover .entity-create-btn__icon,
.entity-list-header .btn.btn-primary.entity-create-btn.is-disabled:hover .entity-create-btn__icon {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* line 349, app/assets/stylesheets/applications.sass */
  .entity-list-header .btn.btn-primary.entity-create-btn,
.entity-create-btn__icon {
    transition: none;
  }
  /* line 352, app/assets/stylesheets/applications.sass */
  .entity-list-header .btn.btn-primary.entity-create-btn:hover {
    transform: none;
  }
  /* line 354, app/assets/stylesheets/applications.sass */
  .entity-list-header .btn.btn-primary.entity-create-btn:hover .entity-create-btn__icon {
    transform: none;
  }
}

/* line 357, app/assets/stylesheets/applications.sass */
.entity-meta {
  color: var(--text-muted);
  font-size: 13px;
}

/* line 361, app/assets/stylesheets/applications.sass */
.entity-empty-state {
  align-items: center;
  background: var(--bg-surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

/* line 373, app/assets/stylesheets/applications.sass */
.entity-empty-icon {
  align-items: center;
  background: var(--brand-soft);
  border-radius: 50%;
  color: var(--brand-strong);
  display: flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}

/* line 383, app/assets/stylesheets/applications.sass */
.entity-empty-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* line 389, app/assets/stylesheets/applications.sass */
.entity-empty-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 42ch;
}

/* line 396, app/assets/stylesheets/applications.sass */
.entity-empty-action {
  margin-top: 4px;
}

/* line 399, app/assets/stylesheets/applications.sass */
.field-group {
  border-top: 1px solid var(--border-default);
  margin-top: 18px;
  padding-top: 16px;
}

/* line 403, app/assets/stylesheets/applications.sass */
.field-group:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* line 408, app/assets/stylesheets/applications.sass */
.form-kicker {
  color: var(--text-muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* line 417, app/assets/stylesheets/applications.sass */
.activity-badge {
  background: var(--brand-soft);
  border-radius: 999px;
  color: var(--brand-strong);
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
}

/* line 426, app/assets/stylesheets/applications.sass */
.danger-zone {
  background: var(--danger-soft);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px;
}
/* line 1, app/assets/stylesheets/bots.sass */
.access-token {
  background-color: var(--danger-soft);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin: 0 auto 16px;
  max-width: 640px;
  padding: 12px 14px;
  width: 100%;
}

/* line 10, app/assets/stylesheets/bots.sass */
.btn-warning, .btn-warning:hover {
  color: #000000;
}

/* line 13, app/assets/stylesheets/bots.sass */
.bots-stage {
  margin-top: 14px;
}

/* line 16, app/assets/stylesheets/bots.sass */
.bot-avatar-preview {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  max-height: 120px;
  max-width: 120px;
  padding: 4px;
}

/* line 23, app/assets/stylesheets/bots.sass */
.bots-collection {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  margin-top: 0;
}

/* line 30, app/assets/stylesheets/bots.sass */
.bots-filter {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
}

/* line 42, app/assets/stylesheets/bots.sass */
.bots-filter__option {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 8px 16px;
  transition: background-color 160ms ease, color 160ms ease;
}

/* line 57, app/assets/stylesheets/bots.sass */
.bots-filter__option:hover {
  color: var(--text-primary);
}

/* line 60, app/assets/stylesheets/bots.sass */
.bots-filter__option.is-selected {
  background: var(--text-primary);
  color: var(--bg-surface);
}

/* line 64, app/assets/stylesheets/bots.sass */
.bots-filter__option:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 68, app/assets/stylesheets/bots.sass */
.bots-filter-empty {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 4px 2px 0;
  padding: 8px 0;
}

@media (min-width: 840px) {
  /* line 75, app/assets/stylesheets/bots.sass */
  .bots-collection {
    grid-template-columns: repeat(auto-fit, minmax(320px, 600px));
    justify-content: space-between;
  }
}

/* line 79, app/assets/stylesheets/bots.sass */
.bot-card {
  background: linear-gradient(150deg, color-mix(in srgb, var(--card-tint, var(--brand)) 9%, transparent) 0%, transparent 46%), var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
  cursor: pointer;
  max-width: 600px;
  padding: 16px;
  position: relative;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
  width: 100%;
}

/* line 92, app/assets/stylesheets/bots.sass */
.bot-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 14px 30px rgba(10, 32, 58, 0.13);
  transform: translateY(-1px);
}

/* line 97, app/assets/stylesheets/bots.sass */
.bot-card::before {
  background: linear-gradient(90deg, var(--card-tint, var(--brand)), var(--card-accent, var(--brand-strong)) 55%, transparent);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  content: "";
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* line 108, app/assets/stylesheets/bots.sass */
.bot-card__top {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

/* line 114, app/assets/stylesheets/bots.sass */
.bot-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--card-tint, var(--bg-surface-muted)) 0%, var(--card-accent, var(--bg-surface-muted)) 100%);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 20px -12px var(--card-tint, rgba(0, 0, 0, 0.4));
  display: flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 44px;
}

/* line 127, app/assets/stylesheets/bots.sass */
.bot-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* line 133, app/assets/stylesheets/bots.sass */
.bot-avatar-fallback {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* line 139, app/assets/stylesheets/bots.sass */
.bot-card__identity {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 1px;
}

/* line 147, app/assets/stylesheets/bots.sass */
.bot-card__sublabel {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* line 157, app/assets/stylesheets/bots.sass */
.bot-card__sublabel-icon {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
}

/* line 162, app/assets/stylesheets/bots.sass */
.bot-name {
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  order: -1;
}

/* line 169, app/assets/stylesheets/bots.sass */
.bot-name__link {
  align-items: center;
  color: var(--text-primary);
  display: inline-flex;
  gap: 5px;
  max-width: 100%;
  text-decoration: none;
}

/* line 177, app/assets/stylesheets/bots.sass */
.bot-name__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 182, app/assets/stylesheets/bots.sass */
.bot-name__open {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  flex: none;
  opacity: 0;
  transform: translate(-2px, 2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* line 191, app/assets/stylesheets/bots.sass */
.bot-card:hover .bot-name__open {
  opacity: 1;
  transform: translate(0, 0);
}

/* line 198, app/assets/stylesheets/bots.sass */
.bot-name__link:hover,
.bot-name__link:hover .bot-name__text,
.bot-name__link:focus,
.bot-name__link:focus .bot-name__text {
  color: var(--text-primary);
  text-decoration: none;
}

/* line 208, app/assets/stylesheets/bots.sass */
.bot-name__link::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

/* line 217, app/assets/stylesheets/bots.sass */
.bot-name__link:focus-visible {
  outline: none;
}

/* line 220, app/assets/stylesheets/bots.sass */
.bot-name__link:focus-visible::after {
  border-radius: var(--radius-md);
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  /* line 225, app/assets/stylesheets/bots.sass */
  .bot-name__open {
    transition: none;
  }
}

/* line 228, app/assets/stylesheets/bots.sass */
.bot-card__tools {
  align-items: center;
  display: inline-flex;
  flex: none;
  gap: 2px;
  margin-left: auto;
  position: relative;
  z-index: 5;
}

/* line 237, app/assets/stylesheets/bots.sass */
.card-icon-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 30px;
  justify-content: center;
  padding: 0;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms cubic-bezier(0.42, 0, 0.58, 1);
  width: 30px;
}

/* line 252, app/assets/stylesheets/bots.sass */
.card-icon-btn:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

/* line 256, app/assets/stylesheets/bots.sass */
.card-icon-btn:active {
  transform: scale(0.9);
}

/* line 259, app/assets/stylesheets/bots.sass */
.card-icon-btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 263, app/assets/stylesheets/bots.sass */
.bot-menu {
  position: relative;
}

/* line 266, app/assets/stylesheets/bots.sass */
.bot-menu__list {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px -12px rgba(10, 22, 44, 0.32);
  display: none;
  min-width: 168px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
}

/* line 279, app/assets/stylesheets/bots.sass */
.bot-menu.is-open .bot-menu__list {
  display: block;
}

/* line 282, app/assets/stylesheets/bots.sass */
.bot-menu__item {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  padding: 8px 10px;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

/* line 295, app/assets/stylesheets/bots.sass */
.bot-menu__item:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
  text-decoration: none;
}

/* line 300, app/assets/stylesheets/bots.sass */
.bot-menu__item:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 304, app/assets/stylesheets/bots.sass */
.bot-menu__item .fluent-icon {
  color: var(--text-muted);
  flex: none;
}

/* line 308, app/assets/stylesheets/bots.sass */
.bot-menu__item:hover .fluent-icon {
  color: inherit;
}

/* line 311, app/assets/stylesheets/bots.sass */
.bot-menu__item.is-danger,
.bot-menu__item.is-danger .fluent-icon {
  color: var(--danger, #c0392b);
}

/* line 315, app/assets/stylesheets/bots.sass */
.bot-menu__item.is-danger:hover {
  background: var(--danger-soft);
  color: var(--danger, #c0392b);
}

/* line 323, app/assets/stylesheets/bots.sass */
.bot-menu__form {
  display: block;
  margin: 0;
  width: 100%;
}

/* line 328, app/assets/stylesheets/bots.sass */
button.bot-menu__item {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  width: 100%;
}

/* line 339, app/assets/stylesheets/bots.sass */
.bot-card__footer {
  align-items: center;
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  position: relative;
  z-index: 2;
}

/* line 349, app/assets/stylesheets/bots.sass */
.status-pill {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  text-transform: uppercase;
}

/* line 361, app/assets/stylesheets/bots.sass */
.status-pill__dot {
  background: currentColor;
  border-radius: 50%;
  flex: none;
  height: 6px;
  position: relative;
  width: 6px;
}

/* line 371, app/assets/stylesheets/bots.sass */
.status-pill.is-active .status-pill__dot::after {
  animation: status-pulse 2.2s ease-out infinite;
  background: currentColor;
  border-radius: 50%;
  content: "";
  inset: 0;
  position: absolute;
}

@keyframes status-pulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70%, 100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 388, app/assets/stylesheets/bots.sass */
  .status-pill.is-active .status-pill__dot::after {
    animation: none;
  }
}

/* line 391, app/assets/stylesheets/bots.sass */
.status-pill.is-active {
  background: var(--success-soft);
  border-color: #98d1aa;
  color: #1d5f35;
}

/* line 396, app/assets/stylesheets/bots.sass */
.status-pill.is-inactive {
  background: var(--bg-surface-muted);
  border-color: var(--border-default);
  color: var(--text-muted);
}

/* line 401, app/assets/stylesheets/bots.sass */
html[data-theme="dark"] .status-pill.is-active {
  background: rgba(46, 160, 90, 0.18);
  border-color: rgba(126, 215, 154, 0.5);
  color: #8fe0a6;
}

/* line 406, app/assets/stylesheets/bots.sass */
.bot-card__timestamp {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

/* line 411, app/assets/stylesheets/bots.sass */
.bot-card__timestamp time {
  color: var(--text-secondary);
  font-weight: 600;
}

/* line 415, app/assets/stylesheets/bots.sass */
.bot-meta {
  align-items: baseline;
  display: grid;
  gap: 12px 14px;
  grid-template-columns: 80px minmax(0, 1fr);
  margin: 4px 0 0;
  padding: 0;
}

/* line 423, app/assets/stylesheets/bots.sass */
.bot-meta dt {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

/* line 431, app/assets/stylesheets/bots.sass */
.bot-meta dd {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  min-width: 0;
}

/* line 438, app/assets/stylesheets/bots.sass */
.bot-meta__mono {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 445, app/assets/stylesheets/bots.sass */
.bot-meta__muted {
  color: var(--text-muted);
  font-style: italic;
}

/* line 449, app/assets/stylesheets/bots.sass */
.bot-meta__callback {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 0;
}

/* line 455, app/assets/stylesheets/bots.sass */
.bot-meta__callback-icon {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  flex: none;
}

/* line 461, app/assets/stylesheets/bots.sass */
.bot-meta__callback .bot-meta__mono {
  min-width: 0;
}

/* line 464, app/assets/stylesheets/bots.sass */
.bot-id-row {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* line 473, app/assets/stylesheets/bots.sass */
.bot-id-row .bot-id-value {
  flex: 1 1 auto;
}

/* line 479, app/assets/stylesheets/bots.sass */
.secret-toggle__hide {
  display: none;
}

/* line 482, app/assets/stylesheets/bots.sass */
.secret-toggle.is-revealed .secret-toggle__show {
  display: none;
}

/* line 485, app/assets/stylesheets/bots.sass */
.secret-toggle.is-revealed .secret-toggle__hide {
  display: inline-flex;
}

/* line 492, app/assets/stylesheets/bots.sass */
.secret-copy {
  position: relative;
}

/* line 495, app/assets/stylesheets/bots.sass */
.secret-copy__idle,
.secret-copy__done {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  transition: opacity 150ms cubic-bezier(0.42, 0, 0.58, 1), transform 150ms cubic-bezier(0.42, 0, 0.58, 1);
}

/* line 502, app/assets/stylesheets/bots.sass */
.secret-copy__idle {
  transition-delay: 150ms;
}

/* line 505, app/assets/stylesheets/bots.sass */
.secret-copy.is-copied .secret-copy__idle {
  opacity: 0;
  transform: scale(0.6);
  transition-delay: 0ms;
}

/* line 510, app/assets/stylesheets/bots.sass */
.secret-copy__done {
  color: var(--success, #2ea05a);
  inset: 0;
  opacity: 0;
  position: absolute;
  transform: scale(0.6);
}

/* line 517, app/assets/stylesheets/bots.sass */
.secret-copy.is-copied .secret-copy__done {
  opacity: 1;
  transform: scale(1);
  transition-delay: 150ms;
}

/* line 524, app/assets/stylesheets/bots.sass */
.secret-copy.is-error .secret-copy__idle {
  color: var(--danger, #c10007);
}

/* line 530, app/assets/stylesheets/bots.sass */
.bot-meta .bot-id-value {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
}

/* line 541, app/assets/stylesheets/bots.sass */
.bot-meta .bot-id-value[data-revealed="true"] {
  background: transparent;
  border: 0;
}

@keyframes secret-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes secret-slide-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 565, app/assets/stylesheets/bots.sass */
.bot-id-value.is-sliding-out,
.bot-id-value__text.is-sliding-out,
.token-value__text.is-sliding-out {
  animation: secret-slide-out 150ms cubic-bezier(0.42, 0, 0.58, 1) both;
}

/* line 570, app/assets/stylesheets/bots.sass */
.bot-id-value.is-sliding-in,
.bot-id-value__text.is-sliding-in,
.token-value__text.is-sliding-in {
  animation: secret-slide-in 150ms cubic-bezier(0.42, 0, 0.58, 1);
}

@media (prefers-reduced-motion: reduce) {
  /* line 576, app/assets/stylesheets/bots.sass */
  .bot-id-value.is-sliding-out,
.bot-id-value.is-sliding-in,
.bot-id-value__text.is-sliding-out,
.bot-id-value__text.is-sliding-in,
.token-value__text.is-sliding-out,
.token-value__text.is-sliding-in {
    animation: none;
  }
  /* line 584, app/assets/stylesheets/bots.sass */
  .secret-copy__idle,
.secret-copy__done {
    transition: none;
  }
}

/* line 588, app/assets/stylesheets/bots.sass */
.bot-id-value {
  background: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
  max-width: 100%;
  min-height: 32px;
  min-width: 0;
  overflow-x: auto;
  padding: 6px 10px;
  white-space: nowrap;
}

/* line 606, app/assets/stylesheets/bots.sass */
.bot-id-value[data-revealed="true"] {
  background: var(--bg-surface-muted);
  border-color: var(--border-default);
}

/* line 613, app/assets/stylesheets/bots.sass */
.bot-id-value__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 621, app/assets/stylesheets/bots.sass */
.btn.bot-id-toggle {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* line 630, app/assets/stylesheets/bots.sass */
.btn.bot-id-toggle,
.copy-token-button.bot-id-copy {
  box-sizing: border-box;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.2;
  min-height: 32px;
  min-width: 72px;
  padding: 6px 12px;
  text-align: center;
}

/* line 641, app/assets/stylesheets/bots.sass */
.bot-id-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* line 645, app/assets/stylesheets/bots.sass */
.bot-id-toggle:focus,
.bot-id-copy:focus,
.bot-actions .btn:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 651, app/assets/stylesheets/bots.sass */
.bot-actions {
  border-top: 1px solid color-mix(in srgb, var(--border-default) 84%, var(--brand) 16%);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  position: relative;
  z-index: 2;
}

/* line 662, app/assets/stylesheets/bots.sass */
.bot-actions .btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  min-width: 88px;
  margin-bottom: 0;
}

/* line 668, app/assets/stylesheets/bots.sass */
.bot-action-secondary {
  background: color-mix(in srgb, var(--bg-elevated) 88%, #ffffff 12%);
  border: 1px solid color-mix(in srgb, var(--border-default) 84%, var(--brand) 16%);
  color: var(--text-secondary);
}

/* line 673, app/assets/stylesheets/bots.sass */
.bot-action-secondary:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* line 677, app/assets/stylesheets/bots.sass */
.bot-action-primary {
  border-color: var(--brand-strong);
  box-shadow: none;
}

/* line 681, app/assets/stylesheets/bots.sass */
.bot-action-primary:hover {
  transform: translateY(-1px);
}

/* line 684, app/assets/stylesheets/bots.sass */
.bot-action-danger {
  box-shadow: none;
}

/* line 687, app/assets/stylesheets/bots.sass */
html[data-theme="dark"] .bot-action-secondary {
  background: color-mix(in srgb, var(--bg-elevated) 80%, #ffffff 20%);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

@media (max-width: 900px) {
  /* line 693, app/assets/stylesheets/bots.sass */
  .bot-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  /* line 697, app/assets/stylesheets/bots.sass */
  .bot-meta dt {
    margin-top: 6px;
  }
  /* line 700, app/assets/stylesheets/bots.sass */
  .bot-id-value {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  /* line 704, app/assets/stylesheets/bots.sass */
  .bot-card {
    max-width: 100%;
    padding: 14px;
  }
  /* line 708, app/assets/stylesheets/bots.sass */
  .bot-name {
    font-size: 17px;
  }
  /* line 711, app/assets/stylesheets/bots.sass */
  .bot-card__top {
    align-items: flex-start;
  }
  /* line 714, app/assets/stylesheets/bots.sass */
  .bot-avatar {
    flex-basis: 42px;
    height: 42px;
    width: 42px;
  }
}

/* line 723, app/assets/stylesheets/bots.sass */
.bot-form {
  max-width: 800px;
  margin: 0 auto;
}

/* line 729, app/assets/stylesheets/bots.sass */
.bots.new #page,
.bots.edit #page {
  margin: var(--space-6) auto 0;
  max-width: 848px;
}

/* line 734, app/assets/stylesheets/bots.sass */
.form-notice {
  background: linear-gradient(90deg, rgba(0, 102, 255, 0.08) 0%, rgba(0, 102, 255, 0) 100%);
  border: 1px solid color-mix(in srgb, var(--border-default) 84%, var(--brand) 16%);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  padding: 14px 16px;
}

/* line 741, app/assets/stylesheets/bots.sass */
.form-notice-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

/* line 746, app/assets/stylesheets/bots.sass */
.form-notice-text strong {
  color: var(--text-primary);
}

/* line 749, app/assets/stylesheets/bots.sass */
.form-notice-text em {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 600;
}

/* line 754, app/assets/stylesheets/bots.sass */
.form-section-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
}

/* line 761, app/assets/stylesheets/bots.sass */
.form-section-help {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 16px;
}

/* line 766, app/assets/stylesheets/bots.sass */
.form-mode-toggle {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 12px;
}

/* line 772, app/assets/stylesheets/bots.sass */
.form-mode-option {
  align-items: stretch;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease;
}

/* line 784, app/assets/stylesheets/bots.sass */
.form-mode-option input {
  appearance: none;
  margin: 0;
  position: absolute;
  opacity: 0;
}

/* line 790, app/assets/stylesheets/bots.sass */
.form-mode-option:hover {
  border-color: color-mix(in srgb, var(--border-default) 72%, var(--brand) 28%);
}

/* line 793, app/assets/stylesheets/bots.sass */
.form-mode-option.is-active {
  background: linear-gradient(145deg, rgba(0, 102, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(0, 102, 255, 0.18);
}

/* line 798, app/assets/stylesheets/bots.sass */
.form-mode-label {
  color: var(--text-primary);
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

/* line 805, app/assets/stylesheets/bots.sass */
.form-mode-desc {
  color: var(--text-muted);
  display: block;
  font-size: 13px;
}

/* line 810, app/assets/stylesheets/bots.sass */
.form-label {
  align-items: baseline;
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 14px;
  gap: 8px;
  margin-bottom: 6px;
}

/* line 820, app/assets/stylesheets/bots.sass */
.form-required {
  color: var(--danger);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

/* line 827, app/assets/stylesheets/bots.sass */
.form-optional {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 1px 8px;
  text-transform: uppercase;
}

/* line 839, app/assets/stylesheets/bots.sass */
.form-helper {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: normal;
}

/* line 846, app/assets/stylesheets/bots.sass */
.form-input,
.form-select {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
}

/* line 856, app/assets/stylesheets/bots.sass */
.form-input {
  padding: 10px 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* line 860, app/assets/stylesheets/bots.sass */
.form-input:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
  outline: none;
}

/* line 866, app/assets/stylesheets/bots.sass */
.form-input::placeholder {
  color: var(--text-muted);
}

/* line 869, app/assets/stylesheets/bots.sass */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  cursor: pointer;
  line-height: 1.4;
  min-height: 44px;
  padding: 10px 40px 10px 12px;
  text-overflow: ellipsis;
}

/* line 883, app/assets/stylesheets/bots.sass */
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239AA4B2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* line 886, app/assets/stylesheets/bots.sass */
.form-avatar-preview {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: block;
  margin-top: 8px;
  object-fit: cover;
}

/* line 893, app/assets/stylesheets/bots.sass */
.bot-form .form-actions {
  align-items: center;
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
}

/* line 903, app/assets/stylesheets/bots.sass */
.bot-form .form-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

/* line 909, app/assets/stylesheets/bots.sass */
.bot-form .form-actions .btn {
  min-width: 120px;
}

/* line 912, app/assets/stylesheets/bots.sass */
.btn-lg {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
}

@media (max-width: 900px) {
  /* line 924, app/assets/stylesheets/bots.sass */
  .bot-form {
    max-width: 100%;
  }
  /* line 927, app/assets/stylesheets/bots.sass */
  .form-mode-toggle {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  /* line 932, app/assets/stylesheets/bots.sass */
  .form-section {
    margin-top: 20px;
    padding-top: 20px;
  }
  /* line 936, app/assets/stylesheets/bots.sass */
  .form-section-title {
    font-size: 16px;
  }
  /* line 939, app/assets/stylesheets/bots.sass */
  .form-mode-toggle {
    grid-template-columns: 1fr;
  }
  /* line 942, app/assets/stylesheets/bots.sass */
  .form-actions {
    flex-direction: column;
  }
  /* line 945, app/assets/stylesheets/bots.sass */
  .bot-form .form-actions-buttons {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
  }
  /* line 950, app/assets/stylesheets/bots.sass */
  .btn-lg {
    width: 100%;
  }
}

/* line 957, app/assets/stylesheets/bots.sass */
.detail-topbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* line 965, app/assets/stylesheets/bots.sass */
.detail-back-link {
  align-items: center;
  color: var(--text-secondary);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  text-decoration: none;
}

/* line 974, app/assets/stylesheets/bots.sass */
.detail-back-link:hover {
  color: var(--text-primary);
}

/* line 977, app/assets/stylesheets/bots.sass */
.detail-back-icon {
  font-size: 16px;
  line-height: 1;
}

/* line 981, app/assets/stylesheets/bots.sass */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* line 986, app/assets/stylesheets/bots.sass */
.detail-actions .btn {
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 0;
  min-width: 88px;
}

/* line 992, app/assets/stylesheets/bots.sass */
.detail-actions .btn:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 996, app/assets/stylesheets/bots.sass */
.detail-list__value a {
  color: var(--brand-strong);
  word-break: break-all;
}

/* line 1000, app/assets/stylesheets/bots.sass */
.detail-list__value--empty {
  color: var(--text-muted);
  font-style: italic;
}

/* line 1004, app/assets/stylesheets/bots.sass */
.bot-test {
  margin-top: 28px;
}

/* line 1007, app/assets/stylesheets/bots.sass */
.bot-test-title {
  font-size: 20px;
  margin: 0 0 6px;
}

/* line 1011, app/assets/stylesheets/bots.sass */
.bot-test-lead {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 16px;
}

/* line 1016, app/assets/stylesheets/bots.sass */
.bot-test-form {
  max-width: 640px;
}

/* line 1019, app/assets/stylesheets/bots.sass */
.bot-test-form .form-field {
  margin-bottom: 12px;
}

/* line 1022, app/assets/stylesheets/bots.sass */
.bot-test-form textarea {
  margin-bottom: 0;
}

/* line 1025, app/assets/stylesheets/bots.sass */
.bot-test-cli {
  margin-top: 24px;
}

/* line 1028, app/assets/stylesheets/bots.sass */
.bot-test-cli-title {
  font-size: 15px;
  margin: 0 0 4px;
}

/* line 1032, app/assets/stylesheets/bots.sass */
.bot-test-cli-lead {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 10px;
}

/* line 1037, app/assets/stylesheets/bots.sass */
.code-block {
  position: relative;
}

/* line 1040, app/assets/stylesheets/bots.sass */
.code-block-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* line 1046, app/assets/stylesheets/bots.sass */
.code-block-reveal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  line-height: 1.2;
  padding: 6px 10px;
}

/* line 1054, app/assets/stylesheets/bots.sass */
.code-block-reveal:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* line 1058, app/assets/stylesheets/bots.sass */
.code-block-reveal:focus,
.code-block-copy:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* line 1063, app/assets/stylesheets/bots.sass */
.bot-id-value--inline {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border: none;
  border-radius: 4px;
  display: inline;
  font-family: inherit;
  font-size: inherit;
  max-width: none;
  min-height: 0;
  padding: 1px 5px;
  white-space: normal;
}

/* line 1075, app/assets/stylesheets/bots.sass */
.code-block pre {
  margin: 0;
}

/* line 1080, app/assets/stylesheets/bots.sass */
.related-links {
  border-top: 1px solid var(--border-default);
  margin-top: 28px;
  padding-top: 20px;
}

/* line 1085, app/assets/stylesheets/bots.sass */
.related-links__title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
}

/* line 1091, app/assets/stylesheets/bots.sass */
.related-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 1099, app/assets/stylesheets/bots.sass */
.related-links__list a {
  color: var(--brand);
  font-size: 14px;
  text-decoration: none;
}

/* line 1104, app/assets/stylesheets/bots.sass */
.related-links__list a:hover {
  text-decoration: underline;
}
/* line 2, app/assets/stylesheets/terms.sass */
body.terms #page {
  max-width: 980px;
  margin: 0 auto;
}

/* line 6, app/assets/stylesheets/terms.sass */
body.terms .terms-hero {
  border-bottom: 1px solid var(--border-default);
  padding-bottom: var(--space-5);
}

/* line 10, app/assets/stylesheets/terms.sass */
body.terms .terms-body {
  max-width: 74ch;
}

/* line 14, app/assets/stylesheets/terms.sass */
body.terms .terms-preamble p {
  margin: 0;
}

/* line 17, app/assets/stylesheets/terms.sass */
body.terms .terms-definitions {
  margin: var(--space-4) 0 0;
}

/* line 20, app/assets/stylesheets/terms.sass */
body.terms .terms-definitions dt {
  color: var(--text-primary);
  font-weight: 600;
  margin-top: var(--space-4);
}

/* line 25, app/assets/stylesheets/terms.sass */
body.terms .terms-definitions dd {
  margin: var(--space-1) 0 0;
}

/* line 28, app/assets/stylesheets/terms.sass */
body.terms .terms-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
}

/* line 33, app/assets/stylesheets/terms.sass */
body.terms .terms-list li + li {
  margin-top: var(--space-2);
}

/* line 37, app/assets/stylesheets/terms.sass */
body.terms.brand_standards .container {
  max-width: 1080px;
  width: auto;
}

/* line 41, app/assets/stylesheets/terms.sass */
body.terms.brand_standards #page img {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: block;
  margin: 0 0 18px;
  width: 100%;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *









 */
:root {
  /* Project Persephone — native system font stack with Inter as a fallback. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-headings: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-soft: 0 1px 2px rgba(9, 9, 11, 0.04), 0 8px 24px rgba(9, 9, 11, 0.06);
  --shadow-medium: 0 2px 4px rgba(9, 9, 11, 0.06), 0 16px 40px rgba(9, 9, 11, 0.1);
  --focus-ring: 0 0 0 3px rgba(21, 93, 252, 0.35);

  /* Persephone light — flat neutral (zinc) canvas with a blue accent. */
  --bg-canvas: #ffffff;
  --bg-canvas-accent: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-muted: #fafafa;
  --bg-surface-sunken: #f4f4f5;
  --bg-elevated: #ffffff;
  --bg-sidebar: #fafafa;
  --bg-header: rgba(255, 255, 255, 0.82);
  --bg-code: #fafbfc;
  --bg-code-header: #f6f8fa;

  --text-primary: #0a0a0a;
  --text-secondary: #52525c;
  --text-muted: #71717a;
  --text-faint: #a1a1aa;
  --text-on-brand: #ffffff;
  --text-on-code: #1f2328;

  --border-default: #e4e4e7;
  --border-strong: #d4d4d8;
  --doc-card-glow: #a1a1aa;
  --border-code: #d0d7de;

  /* Syntax palette (light) — GitHub-light inspired, high contrast on #f6f8fa. */
  --code-comment: #6e7781;
  --code-keyword: #cf222e;
  --code-string: #0a3069;
  --code-number: #0550ae;
  --code-attr: #0550ae;
  --code-title: #8250df;
  --code-type: #953800;
  --code-tag: #116329;
  --code-variable: #953800;
  --code-meta: #0550ae;
  --code-deletion: #82071e;
  --code-addition: #116329;

  --brand: #155dfc;
  --brand-strong: #1447e6;
  --brand-soft: #eff6ff;
  --brand-border: #bedbff;
  --brand-text: #1c398e;
  --brand-gradient: linear-gradient(120deg, #1447e6 0%, #155dfc 100%);

  --success: #008236;
  --success-soft: #f0fdf4;
  --success-border: #b9f8cf;
  --warning: #a16207;
  --warning-soft: #fffbeb;
  --warning-border: #fee685;
  --danger: #c10007;
  --danger-soft: #fef2f2;
  --danger-border: #ffc9c9;

  --method-get: #008236;
  --method-post: #155dfc;
  --method-put: #a16207;
  --method-delete: #c10007;
}

html[data-theme="dark"] {
  /* Persephone dark — near-black zinc canvas. */
  --bg-canvas: #09090b;
  --bg-canvas-accent: #09090b;
  --bg-surface: #18181b;
  --bg-surface-muted: #18181b;
  --bg-surface-sunken: #27272a;
  --bg-elevated: #1c1c1f;
  --bg-sidebar: #0a0a0a;
  --bg-header: rgba(9, 9, 11, 0.82);
  --bg-code: #000000;
  --bg-code-header: #18181b;

  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-faint: #52525c;
  --text-on-brand: #ffffff;
  --text-on-code: #e4e4e7;

  --border-default: #27272a;
  --border-strong: #3f3f46;
  --doc-card-glow: #71717a;
  --border-code: #27272a;

  /* Syntax palette (dark) — Tokyo Night. */
  --code-comment: #565f89;
  --code-keyword: #bb9af7;
  --code-string: #9ece6a;
  --code-number: #ff9e64;
  --code-attr: #7dcfff;
  --code-title: #7aa2f7;
  --code-type: #2ac3de;
  --code-tag: #89ddff;
  --code-variable: #e0af68;
  --code-meta: #7aa2f7;
  --code-deletion: #f7768e;
  --code-addition: #9ece6a;

  --brand: #4f86ff;
  --brand-strong: #75a1ff;
  --brand-soft: #0f1c33;
  --brand-border: #1c398e;
  --brand-text: #bedbff;

  --success: #4ade80;
  --success-soft: #0d1f15;
  --success-border: #14532d;
  --warning: #fbbf24;
  --warning-soft: #231a08;
  --warning-border: #4d3b13;
  --danger: #ff6467;
  --danger-soft: #2a1213;
  --danger-border: #532325;

  --method-get: #4ade80;
  --method-post: #4f86ff;
  --method-put: #fbbf24;
  --method-delete: #ff6467;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.55), 0 18px 44px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 3px rgba(79, 134, 255, 0.45);
}

/* No-JS fallback: honor the OS preference when no explicit theme is chosen. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-canvas: #09090b;
    --bg-canvas-accent: #09090b;
    --bg-surface: #18181b;
    --bg-surface-muted: #18181b;
    --bg-surface-sunken: #27272a;
    --bg-elevated: #1c1c1f;
    --bg-sidebar: #0a0a0a;
    --bg-header: rgba(9, 9, 11, 0.82);
    --bg-code: #000000;
    --bg-code-header: #18181b;

    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-faint: #52525c;
    --text-on-brand: #ffffff;
    --text-on-code: #e4e4e7;

    --border-default: #27272a;
    --border-strong: #3f3f46;
    --doc-card-glow: #71717a;
    --border-code: #27272a;

    /* Syntax palette (dark) — Tokyo Night. */
    --code-comment: #565f89;
    --code-keyword: #bb9af7;
    --code-string: #9ece6a;
    --code-number: #ff9e64;
    --code-attr: #7dcfff;
    --code-title: #7aa2f7;
    --code-type: #2ac3de;
    --code-tag: #89ddff;
    --code-variable: #e0af68;
    --code-meta: #7aa2f7;
    --code-deletion: #f7768e;
    --code-addition: #9ece6a;

    --brand: #4f86ff;
    --brand-strong: #75a1ff;
    --brand-soft: #0f1c33;
    --brand-border: #1c398e;
    --brand-text: #bedbff;

    --success: #4ade80;
    --success-soft: #0d1f15;
    --success-border: #14532d;
    --warning: #fbbf24;
    --warning-soft: #231a08;
    --warning-border: #4d3b13;
    --danger: #ff6467;
    --danger-soft: #2a1213;
    --danger-border: #532325;

    --method-get: #4ade80;
    --method-post: #4f86ff;
    --method-put: #fbbf24;
    --method-delete: #ff6467;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.55), 0 18px 44px rgba(0, 0, 0, 0.55);
    --focus-ring: 0 0 0 3px rgba(79, 134, 255, 0.45);
  }
}

html,
body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

body {
  padding-bottom: var(--space-6);
}

h1,
h2,
h3,
h4 {
  color: var(--text-primary);
  font-family: var(--font-headings);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 27px;
  margin: var(--space-7) 0 var(--space-4);
}

h3 {
  font-size: 22px;
  margin-top: var(--space-5);
}

h4 {
  font-size: 18px;
  margin-top: var(--space-5);
}

p,
li,
dt,
dd,
label,
input,
textarea,
select,
button {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

a {
  color: var(--brand);
  text-decoration-color: rgba(0, 102, 255, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand-strong);
  text-decoration-color: currentColor;
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav a:focus-visible,
.dropdown-menu a:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Bootstrap turns required fields red on focus before the user types anything,
   which reads as a premature error (notably on the autofocused first field of
   the create-bot/application forms). Use the standard brand focus ring instead;
   real validation errors are surfaced via server-rendered .field_with_errors. */
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid,
input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  color: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

.skip-link {
  background: var(--brand-strong);
  border-radius: var(--radius-sm);
  color: var(--text-on-brand);
  left: var(--space-3);
  padding: var(--space-2) var(--space-3);
  position: absolute;
  top: -200px;
  z-index: 1000;
}

.skip-link:focus {
  top: var(--space-3);
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.shell-main-header {
  margin-top: var(--space-2);
  position: sticky;
  top: var(--space-2);
  z-index: 900;
}

.shell-main {
  margin-top: var(--space-5);
}

#page {
  padding: 0;
}

#page a.btn,
#page ul.nav a {
  text-decoration: none;
}

section {
  padding-top: var(--space-5);
}

section:first-child {
  padding-top: 0;
}

section > h2:first-child,
section > h3:first-child {
  margin-top: 0;
}

.section-header {
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 24px;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
}

.section_body {
  margin-top: var(--space-3);
  padding-left: var(--space-4);
}

.section_footer {
  margin-top: var(--space-4);
}

.well {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  margin: 0;
  padding: var(--space-4);
}

.doc-card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-4);
}

/* Data tables: token-based override for legacy Bootstrap .table markup. */
.table {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  overflow: hidden;
  width: 100%;
}

.table th,
.table td {
  border-top: 1px solid var(--border-default);
  font-size: 14px;
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  transition: background-color var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease);
}

.table thead th {
  background: var(--bg-surface-muted);
  border-top: 0;
  border-bottom: 2px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.table tbody tr:first-child td,
.table > tr:first-child td {
  border-top: 0;
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background: var(--bg-surface-muted);
}

.table-striped tbody tr:nth-child(even) td,
.table-striped tbody tr:nth-child(even) th {
  background: var(--bg-surface);
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background: var(--brand-soft);
}

/* Subtle row highlight on every data table aids scanning of dense API
   reference tables (status codes, thumbnail sizes). Cheap paint-only
   change, eased via the shared motion token. */
.table tbody tr:hover td,
.table tbody tr:hover th {
  background: var(--bg-surface-sunken);
}

/* Legacy Bootstrap .table-bordered hardcodes a #ddd column rule that reads as
   harsh light bars on dark. Re-tint it with the theme border token. */
.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: var(--border-default);
}

/* Detail list: tokenized key/value card replacing legacy show-page tables. */
.detail-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  margin: 0 0 var(--space-5);
  overflow: hidden;
  position: relative;
}

.detail-list::before {
  background: var(--brand-gradient);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.detail-list__head {
  align-items: center;
  background: linear-gradient(145deg, rgba(0, 102, 255, 0.06) 0%, rgba(0, 102, 255, 0) 62%);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
}

.detail-list__avatar {
  align-items: center;
  background: linear-gradient(160deg, var(--bg-surface-muted) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.detail-list__avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.detail-list__avatar-fallback {
  color: var(--brand-strong);
  font-size: 16px;
  font-weight: 700;
}

.detail-list__heading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.detail-list__title {
  color: var(--text-primary);
  font-family: var(--font-headings);
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-list__subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.detail-list__status {
  align-items: center;
  border-radius: 6px;
  cursor: default;
  display: inline-flex;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  text-transform: uppercase;
}

.detail-list__status::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  flex: none;
  height: 6px;
  width: 6px;
}

.detail-list__status.is-active {
  background: var(--success-soft);
  border: 1px solid #98d1aa;
  color: #1d5f35;
}

.detail-list__status.is-inactive {
  background: var(--warning-soft);
  border: 1px solid #e8c27b;
  color: #7f5714;
}

html[data-theme="dark"] .detail-list__status.is-active {
  background: rgba(46, 160, 90, 0.18);
  border-color: rgba(126, 215, 154, 0.5);
  color: #8fe0a6;
}

html[data-theme="dark"] .detail-list__status.is-inactive {
  background: rgba(220, 165, 70, 0.16);
  border-color: rgba(232, 194, 123, 0.5);
  color: #f0c987;
}

.detail-list__row {
  border-top: 1px solid var(--border-default);
  display: grid;
  gap: var(--space-1) var(--space-4);
  grid-template-columns: minmax(140px, 220px) 1fr;
  padding: var(--space-3) var(--space-4);
}

.detail-list__row:first-child {
  border-top: 0;
}

.detail-list__label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.detail-list__value {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.detail-list__value code {
  word-break: break-all;
}

@media (max-width: 560px) {
  .detail-list__row {
    gap: var(--space-1);
    grid-template-columns: 1fr;
  }
}

pre,
code {
  font-family: var(--font-mono);
}

pre {
  background-color: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sm);
  color: var(--text-on-code);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  padding: var(--space-3);
}

code {
  background: var(--bg-surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 1px 6px;
}

pre code {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}

pre.header {
  background: var(--bg-code-header);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-on-code);
  font-weight: 600;
  margin: 0;
}

pre.body {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border-top: 1px solid var(--border-code);
}

.code-block-wrap {
  margin-bottom: var(--space-4);
  position: relative;
}

.copy-code-button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 8px;
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
}

.copy-code-button:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.token-copy-row {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  min-width: 0;
}

.token-value {
  align-items: center;
  background: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  color: var(--text-on-code);
  display: inline-flex;
  flex: 1 1 auto;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  max-width: 100%;
  min-height: 32px;
  min-width: 0;
  overflow: hidden;
  padding: 6px 10px;
  white-space: nowrap;
}

.token-value__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-copy-row .copy-token-button,
.token-copy-row .token-reveal-button {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  line-height: 1.2;
  min-height: 32px;
  min-width: 72px;
}

.copy-token-button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  min-width: 64px;
  padding: 6px 12px;
  text-align: center;
}

.copy-token-button:hover,
.copy-token-button:focus,
.copy-token-button:active {
  background: var(--bg-elevated);
  background-image: none;
  border-color: var(--border-strong);
  box-shadow: none;
  color: var(--text-primary);
}

/* Access token modal --------------------------------------------------- */
#tokenModal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(10, 32, 58, 0.28);
  overflow: hidden;
}

#tokenModal::before {
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 50%, #2cf2ff 50%) 55%, rgba(0, 102, 255, 0) 100%);
  content: "";
  display: block;
  height: 4px;
}

/* Entrance motion: a gentle scale + fade instead of Bootstrap's dated
   top-slide. Transform/opacity only, eased through the shared motion tokens
   so it matches the rest of the portal and collapses under reduced-motion.
   modal_accessibility.js focus handling is untouched (CSS-only change). */
#tokenModal.fade {
  opacity: 0;
  top: 10%;
  transform: scale(0.96) translateY(-8px);
  transition:
    opacity var(--ph-dur-base, 200ms) var(--ph-ease-out, ease),
    transform var(--ph-dur-base, 200ms) var(--ph-ease-out, ease);
}

#tokenModal.fade.in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.modal-backdrop.fade {
  transition: opacity var(--ph-dur-base, 200ms) var(--ph-ease-out, ease);
}

#tokenModal .modal-header {
  background: transparent;
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.token-modal-heading {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.token-modal-icon {
  align-items: center;
  background: var(--brand-soft);
  border-radius: 50%;
  color: var(--brand-strong);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

#tokenModal .modal-header h3 {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

#tokenModal .close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  opacity: 1;
  position: absolute;
  right: var(--space-3);
  text-shadow: none;
  top: var(--space-3);
  width: 28px;
  z-index: 1;
}

#tokenModal .close:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

#tokenModal .modal-body {
  background: var(--bg-surface);
  padding: var(--space-4);
}

.token-modal-lead {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 var(--space-3);
}

.token-value__text[data-revealed="false"] {
  color: var(--text-muted);
  letter-spacing: 0.18em;
}

.token-reveal-button {
  background: var(--bg-elevated);
  background-image: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  min-width: 64px;
  padding: 6px 12px;
  text-align: center;
  text-shadow: none;
}

/* Cover Bootstrap's .btn :active/:focus/.active gradient + inset shadow, which
   otherwise sticks as a washed-out state after a tap on touch devices. */
.token-reveal-button:hover,
.token-reveal-button:focus,
.token-reveal-button:active,
.token-reveal-button.active {
  background: var(--bg-elevated);
  background-image: none;
  border-color: var(--border-strong);
  box-shadow: none;
  color: var(--text-primary);
}

.token-warning {
  align-items: flex-start;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border-default) 68%);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
}

.token-warning-icon {
  color: var(--danger);
  flex: 0 0 auto;
  line-height: 0;
  margin-top: 1px;
}

.token-warning-text {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.token-warning-text strong {
  color: var(--danger);
}

/* Access token page panel (token UI rendered outside the modal) ---------- */
.token-panel {
  max-width: 640px;
  margin-top: var(--space-4);
}

/* Styled confirmation dialog (replaces window.confirm) ----------------- */
.gm-confirm-overlay {
  align-items: center;
  background: rgba(10, 22, 41, 0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-4);
  position: fixed;
  z-index: 1100;
}

.gm-confirm-overlay[hidden] {
  display: none;
}

.gm-confirm {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(10, 32, 58, 0.28);
  box-sizing: border-box;
  max-width: 420px;
  overflow: hidden;
  padding: var(--space-5) var(--space-5) var(--space-4);
  width: 100%;
}

.gm-confirm__icon {
  align-items: center;
  background: var(--danger-soft);
  border-radius: 50%;
  color: var(--danger);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: var(--space-3);
  width: 44px;
}

.gm-confirm__title {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

.gm-confirm__body {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: var(--space-2) 0 0;
}

.gm-confirm__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.gm-confirm__actions .btn {
  align-items: center;
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 38px;
  min-width: 104px;
  padding: 8px 16px;
}

.gm-confirm__cancel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.gm-confirm__cancel:hover,
.gm-confirm__cancel:focus {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

@media (max-width: 520px) {
  .gm-confirm__actions {
    flex-direction: column-reverse;
  }

  .gm-confirm__actions .btn {
    width: 100%;
  }
}


dl {
  margin-left: var(--space-4);
}

dl dt small,
dl dd small {
  color: var(--text-muted);
  font-style: italic;
  font-weight: normal;
}

dl dd {
  margin-bottom: var(--space-3);
}

.required {
  color: var(--danger);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  margin-left: var(--space-1);
  vertical-align: middle;
}

.param-required {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: color-mix(in srgb, var(--danger) 62%, var(--text-muted) 38%);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-left: var(--space-2);
  padding: 3px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.center {
  text-align: center;
}

.sidebar,
.sidebar-description,
.sidebar-nav {
  color: var(--text-secondary);
}

/* Flex row lets the sidebar column stretch to the full content height so
   position: sticky has room to pin the nav across the entire page scroll. */
.docs-layout {
  align-items: stretch;
  display: flex;
}

.docs-layout > .span9 {
  min-width: 0;
}

.sidebar-nav {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: var(--space-3);
  position: sticky;
  top: var(--space-4);
}

.sidebar-nav .nav-list {
  margin: 0;
  padding: 0;
}

.sidebar-nav .nav-list > li > a,
.sidebar-nav .nav-header {
  margin-left: 0;
  margin-right: 0;
  text-shadow: none;
}

.sidebar-nav .nav-header {
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.sidebar-nav .nav-header:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.sidebar-nav .nav-header > a {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-nav .nav-header > a:hover {
  color: var(--brand-strong);
}

.sidebar-nav .nav-list > li > a {
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  display: block;
  font-size: 13px;
  margin-bottom: var(--space-1);
  padding: 5px 8px;
  text-shadow: none;
}

.sidebar-nav .nav-list > li > a:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.sidebar-nav .nav-list > li > a.is-active {
  background: var(--brand-soft);
  border-left-color: var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--brand-strong);
  font-weight: 600;
}

/* "On this page" disclosure toggle — hidden on desktop, shown on mobile where
   the table of contents collapses above the content. */
.sidebar-toc-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  display: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  justify-content: space-between;
  padding: var(--space-2) var(--space-1);
  width: 100%;
}

.sidebar-toc-toggle-chevron {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  display: inline-block;
  height: 8px;
  margin-right: var(--space-1);
  transform: rotate(45deg);
  transition: transform 160ms ease;
  width: 8px;
}

.sidebar-nav.is-open .sidebar-toc-toggle-chevron {
  transform: rotate(225deg);
}

.docs-intro-lead {
  color: var(--text-secondary);
  font-size: 17px;
  max-width: 70ch;
}

.docs-callout {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 70ch;
  padding: var(--space-4);
}

.docs-callout p {
  margin: 0;
}

.docs-callout__link {
  align-self: flex-start;
  font-weight: 600;
}

.endpoint {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
  padding: var(--space-4);
}

.endpoint h3 {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.endpoint h3 i {
  color: var(--brand);
  vertical-align: middle;
}

.endpoint .section_body {
  padding-left: 0;
}

.btn {
  align-items: center;
  border-radius: var(--radius-sm);
  box-shadow: none;
  box-sizing: border-box;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  transition: background-color var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease),
    border-color var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease),
    box-shadow var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease),
    transform var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease);
}

.btn:hover:not(:disabled):not([disabled]) {
  transform: translateY(var(--ph-lift, -1px));
}

.btn:active:not(:disabled):not([disabled]) {
  transform: translateY(0) scale(var(--ph-press-scale, 0.97));
}

.btn:disabled,
.btn[disabled] {
  background: var(--bg-surface-sunken);
  border-color: var(--border-default);
  box-shadow: none;
  color: var(--text-faint);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

.btn-primary {
  background: var(--brand);
  background-image: none;
  border-color: var(--brand);
  box-shadow: none;
  color: #ffffff;
  text-shadow: none;
}

.btn-primary:hover:not(:disabled):not([disabled]) {
  background: var(--brand-strong);
  background-image: none;
  border-color: var(--brand-strong);
  box-shadow: 0 4px 12px -4px rgba(21, 93, 252, 0.45);
  color: #ffffff;
  text-shadow: none;
}

.btn-primary:active:not(:disabled):not([disabled]) {
  background: var(--brand-strong);
  background-image: none;
  border-color: var(--brand-strong);
  box-shadow: none;
  text-shadow: none;
}

.btn-primary:focus {
  outline: none;
}

.btn-primary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.btn-warning {
  background: linear-gradient(180deg, #ffd36f 0%, #f5ba37 100%);
  border-color: #e7a91f;
  color: #3e3012;
}

.btn-danger {
  background: linear-gradient(180deg, #d86470 0%, #bb4451 100%);
  border-color: #a73843;
  color: #ffffff;
  text-shadow: none;
}

.btn.btn-link {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--brand);
  padding-left: 0;
  padding-right: 0;
}

.form-actions {
  background: transparent;
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-5);
  padding-left: 0;
  padding-right: 0;
}

label {
  color: var(--text-primary);
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  margin-top: var(--space-1);
  min-height: 38px;
  padding: 8px 12px;
  width: 100%;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.help-block {
  color: var(--text-muted);
  font-size: 13px;
  margin: -6px 0 var(--space-3);
}

.alert {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  text-shadow: none;
}

.alert .close {
  color: var(--text-muted);
  float: right;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin-left: var(--space-3);
  opacity: 0.75;
  position: static;
  right: auto;
  text-shadow: none;
  top: auto;
}

.alert .close:hover {
  color: var(--text-primary);
  opacity: 1;
}

.alert-success {
  background: var(--success-soft);
  border-left-color: #2f9e5f;
  color: var(--text-primary);
}

.alert-error {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  color: var(--text-primary);
}

.alert-error ul {
  margin-bottom: 0;
}

/* Toasts: transient flash messages that overlay content (top-right stack). */
.toast-container {
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  left: auto;
  max-width: calc(100vw - 2 * var(--space-4));
  pointer-events: none;
  position: fixed;
  right: var(--space-4);
  top: var(--space-4);
  width: 360px;
  z-index: 1100;
}

.toast {
  align-items: flex-start;
  animation: toast-in var(--ph-dur-slow, 320ms) var(--ph-ease-out, ease) both;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 36px rgba(10, 32, 58, 0.24);
  color: var(--text-primary);
  display: flex;
  font-size: 14px;
  gap: var(--space-3);
  line-height: 1.5;
  overflow: hidden;
  padding: var(--space-3) var(--space-4);
  pointer-events: auto;
  position: relative;
}

.toast.is-hiding {
  animation: toast-out var(--ph-dur-base, 200ms) var(--ph-ease-in, ease) forwards;
}

.toast-icon {
  align-items: center;
  background: var(--brand);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  width: 20px;
}

.toast-icon::before {
  content: "i";
}

.toast-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast-content ul {
  margin: 0;
  padding-left: var(--space-4);
}

.toast-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  margin: -2px -4px 0 0;
  padding: 0;
}

.toast-close:hover {
  color: var(--text-primary);
}

.toast-progress {
  background: var(--brand);
  bottom: 0;
  height: 3px;
  left: 0;
  opacity: 0.55;
  position: absolute;
  transform: scaleX(1);
  transform-origin: left center;
  width: 100%;
}

.toast.alert-success {
  border-left-color: #2f9e5f;
}

.toast.alert-success .toast-icon,
.toast.alert-success .toast-progress {
  background: #2f9e5f;
}

.toast.alert-success .toast-icon::before {
  content: "\2713";
}

.toast.alert-error {
  border-left-color: var(--danger);
}

.toast.alert-error .toast-icon,
.toast.alert-error .toast-progress {
  background: var(--danger);
}

.toast.alert-error .toast-icon::before {
  content: "!";
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateX(14px);
  }
}

@media (max-width: 640px) {
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
  }
}

.auth-page {
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.auth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  max-width: 480px;
  overflow: hidden;
  padding: var(--space-6) var(--space-6) var(--space-5);
  position: relative;
  width: 100%;
}

.auth-card__header {
  margin-bottom: var(--space-5);
  text-align: center;
}

.logo-mark {
  display: inline-block;
  fill: currentColor;
  flex: none;
}

.auth-card__stamp {
  display: grid;
  place-items: center;
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto var(--space-4);
  color: var(--text-primary);
}

.auth-card__stamp > * {
  grid-area: 1 / 1;
}

.auth-card__stamp-ring {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: auth-stamp-spin 24s linear infinite;
}

.auth-card__stamp-ring text {
  fill: currentColor;
  font-family: "Silkscreen", "SFMono-Regular", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.auth-card__stamp-logo {
  display: grid;
  place-items: center;
}

.auth-card__stamp-logo .logo-mark {
  height: 32px;
  width: 32px;
}

@keyframes auth-stamp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card__stamp-ring {
    animation: none;
  }
}

.auth-card__title {
  margin: 0 0 var(--space-2);
}

.auth-card__subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0 auto;
  max-width: 36ch;
}

.auth-form {
  margin: 0 auto;
  max-width: 400px;
}

.auth-card .auth-form {
  margin: 0;
  max-width: none;
}

.auth-form .form-field {
  margin-bottom: var(--space-4);
}

.auth-form .help-block {
  margin: var(--space-2) 0 0;
}

.auth-form .form-actions {
  border-top: 0;
  margin-top: var(--space-5);
}

.auth-form .btn-primary {
  width: 100%;
}

.auth-card__footer {
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  text-align: center;
}

.auth-resend-label {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 var(--space-3);
}

.auth-resend-form {
  margin: 0;
}

.auth-resend-btn {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--brand);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-width: 200px;
  overflow: hidden;
  padding: 10px 18px;
  position: relative;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.auth-resend-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-strong);
}

.auth-resend-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.auth-resend-btn.is-cooldown {
  background: var(--bg-surface-muted);
  border-color: var(--border-default);
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}

.auth-resend-btn__fill {
  background: var(--brand);
  bottom: 0;
  height: 3px;
  left: 0;
  position: absolute;
  width: 0;
  z-index: 0;
}

.auth-resend-btn__label {
  position: relative;
  z-index: 1;
}

.auth-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: var(--space-3) 0;
}

.auth-secondary-action {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.auth-secondary-action:hover {
  color: var(--text-primary);
}

/* Progressive enhancement: the segmented 4-box OTP UI is hidden until
   portal_ui.js initializes and adds .otp-enhanced to the form. Until then
   — including when JS is disabled or fails to load — the single PIN field
   stays visible and is the submitted control, so the code is never lost. */
.form-field--otp {
  display: none;
  text-align: center;
}

.otp-enhanced .form-field--otp {
  display: block;
}

.otp-enhanced .form-field--pin-fallback {
  display: none;
}

.otp-input {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.otp-input .otp-digit {
  -moz-appearance: textfield;
  appearance: textfield;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 600;
  height: 56px;
  margin: 0;
  min-height: 0;
  padding: 0;
  text-align: center;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  width: 52px;
}

.otp-input .otp-digit::-webkit-outer-spin-button,
.otp-input .otp-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.otp-input .otp-digit:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  outline: none;
}

.otp-input.is-invalid .otp-digit {
  border-color: var(--danger);
}

footer {
  color: var(--text-secondary);
  font-size: 14px;
  margin: var(--space-6) 0 0;
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

footer ul li {
  display: inline-flex;
}

footer p {
  font-size: 13px;
  margin-top: var(--space-3);
}

input.inline {
  display: inline;
}

.theme-toggle {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.theme-toggle select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23808a99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 12px;
  margin-bottom: 0;
  max-width: 140px;
  min-height: 30px;
  padding: 4px 30px 4px 10px;
}

.cc-banner {
  display: none;
}

/* Wraps wide data tables so they scroll horizontally on small screens instead
   of forcing the whole page wider. Applied to content tables via JS. */
.table-scroll {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overflow-x: auto;
}

/* Only surfaced inside the mobile nav drawer (see the 979px breakpoint). */
.nav-drawer-theme {
  display: none;
}

@media (max-width: 640px) {
  h1,
  .auth-card__title {
    font-size: 26px;
  }

  h2 {
    font-size: 21px;
  }

  h3 {
    font-size: 17px;
  }

  #page {
    padding: 0;
  }

  /* Comfortable tap targets for primary controls. */
  .btn,
  .account-trigger,
  .theme-trigger,
  .btn-navbar,
  .copy-token-button {
    min-height: 44px;
  }

  /* Flex centering lets the taller tap target vertically center its label and
     keeps full-width buttons from spilling past their container. */
  .btn,
  .copy-token-button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  /* Full-width primary actions read better on a phone. */
  .entity-list-header .btn,
  .form-actions .btn {
    width: 100%;
  }

  .entity-list-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Give the stacked sidebar column (Get Started / Related Content) clear
     separation from the content card above it once it wraps below. */
  .span3.sidebar {
    border-top: 1px solid var(--border-default);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
}

@media (max-width: 979px) {
  .shell-main {
    margin-top: var(--space-4);
  }

  #page {
    padding: 0;
  }

  /* Docs: stack into a single column and lift the table of contents above the
     content as a collapsible "On this page" disclosure. */
  .docs-layout {
    display: flex;
    flex-direction: column;
  }

  .docs-layout > .span9,
  .docs-layout > .span3 {
    float: none;
    margin-left: 0;
    order: -1;
    width: auto;
  }

  .sidebar-nav {
    margin: 0 0 var(--space-4);
    max-height: none;
    position: static;
  }

  .sidebar-toc-toggle {
    display: flex;
  }

  .sidebar-nav .nav-list {
    display: none;
  }

  .sidebar-nav.is-open .nav-list {
    display: block;
    margin-top: var(--space-3);
  }

  /* Nav: the hamburger collapses ONLY the page links. The avatar/theme
     controls stay persistent in the top bar so they are never clipped. */
  .btn-navbar {
    display: inline-flex;
  }

  .navbar .navbar-inner .container {
    position: relative;
  }

  #primary-nav.nav-collapse {
    clear: both;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    width: 100%;
  }

  #primary-nav.nav-collapse.is-open {
    max-height: 520px;
  }

  #primary-nav .nav,
  #primary-nav .nav li > a,
  #primary-nav .nav a {
    float: none;
  }

  .navbar .nav.account-bar {
    float: right;
    margin: 0;
  }

  .navbar .nav.account-bar > li {
    float: right;
  }

  /* Logged out: fold the standalone theme circle into the page-links drawer
     (mirrors how the logged-in theme picker lives inside the account popover),
     so the top bar stays brand + Log In + hamburger on a single row. */
  .navbar .brand {
    font-size: 18px;
    padding-left: var(--space-3);
    padding-right: var(--space-2);
  }

  /* Shrink the logo to track the smaller brand text so the mark and the
     "Developers" label stay optically aligned (at 24px desktop text the 26px
     mark looks balanced; at 18px it dominates and reads as misaligned). */
  .navbar .brand .logo-mark {
    height: 20px;
    width: 20px;
  }

  /* Breathing room between the Log In button and the hamburger. */
  .navbar .btn-navbar {
    margin-left: var(--space-3);
  }

  .navbar .nav.account-bar .theme-menu {
    display: none;
  }

  .navbar .nav-login-button {
    padding: 10px 14px;
  }

  .nav-drawer-theme {
    clear: both;
    display: block;
    padding: var(--space-3) 14px var(--space-1);
  }

  .nav-drawer-theme .account-section-label {
    color: rgba(255, 255, 255, 0.78);
    display: block;
  }

  .nav-drawer-theme .theme-segmented {
    margin-top: var(--space-2);
    max-width: 280px;
  }

  .theme-toggle {
    padding: 8px 10px;
  }

  /* Pin the access-token dialog to the top of the viewport with a small margin
     so it can never be cut off or stranded mid-scroll. Bootstrap's responsive
     stylesheet sets .modal{position:absolute} and .modal.fade.in{top:auto},
     which leaves it sitting in document flow near the page bottom on phones. */
  #tokenModal,
  #tokenModal.fade.in {
    bottom: auto;
    left: 16px;
    margin: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    position: fixed;
    right: 16px;
    top: 16px;
    width: auto;
  }

  /* Gentle slide-in from just above its resting spot (never off-screen). */
  #tokenModal.fade {
    top: 16px;
    transform: translateY(-12px);
    transition:
      opacity var(--ph-dur-base, 200ms) var(--ph-ease-out, ease),
      transform var(--ph-dur-base, 200ms) var(--ph-ease-out, ease);
  }

  #tokenModal.fade.in {
    transform: translateY(0);
  }

  /* Let the dialog use the available height instead of Bootstrap's 400px cap. */
  #tokenModal .modal-body {
    max-height: none;
  }
}

@media (max-width: 359px) {
  /* Keep the signed-out top bar (brand + Log In + hamburger) on a single row
     on very narrow phones by trimming the brand a touch further. */
  .navbar .brand {
    font-size: 16px;
  }

  .navbar .brand .logo-mark {
    height: 18px;
    width: 18px;
  }

  .navbar .nav-login-button {
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Project Persephone — developer portal shell
   Header + 3-column docs grid + sidebar + on-this-page TOC + components.
   Loaded last in the manifest so it layers cleanly over the legacy base.
   ========================================================================== */

.shell-body { padding-bottom: 0; }

.fluent-icon { display: block; flex: none; }

/* --------------------------------------------------------------------------
   Motion tokens
   Single source of truth for durations + easings. Consume via var() in both
   .css and .sass. Reduced-motion collapses every duration to ~0 so any
   transition/animation built on these tokens is effectively off, while still
   landing on its final state (no permanently-hidden content).
   - fast (140ms): micro-interactions — hover, press, focus
   - base (200ms): standard component state changes
   - slow (320ms) / slower (400ms): larger transitions, reveals
   -------------------------------------------------------------------------- */
:root {
  --ph-dur-instant: 80ms;
  --ph-dur-fast: 140ms;
  --ph-dur-base: 200ms;
  --ph-dur-slow: 320ms;
  --ph-dur-slower: 400ms;

  --ph-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ph-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ph-ease-in: cubic-bezier(0.4, 0, 1, 1);

  --ph-stagger-step: 40ms;

  /* Tactile press distances, tuned per control type. */
  --ph-press-scale: 0.97;
  --ph-lift: -1px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ph-dur-instant: 0.01ms;
    --ph-dur-fast: 0.01ms;
    --ph-dur-base: 0.01ms;
    --ph-dur-slow: 0.01ms;
    --ph-dur-slower: 0.01ms;
    --ph-stagger-step: 0ms;
    --ph-press-scale: 1;
    --ph-lift: 0px;
  }
}

/* Theme cross-fade. The toggle JS adds .theme-transition to <html> only for the
   duration of a user-initiated switch, so colours ease between light/dark
   instead of snapping. It's removed right after, so element-level transitions
   (hover, focus, etc.) are never affected at rest. Reduced-motion zeroes the
   shared duration vars above, making the switch effectively instant. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color var(--ph-dur-base) var(--ph-ease-standard),
    border-color var(--ph-dur-base) var(--ph-ease-standard),
    color var(--ph-dur-base) var(--ph-ease-standard),
    fill var(--ph-dur-base) var(--ph-ease-standard),
    stroke var(--ph-dur-base) var(--ph-ease-standard),
    box-shadow var(--ph-dur-base) var(--ph-ease-standard) !important;
  transition-delay: 0s !important;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.ph-header {
  position: sticky;
  top: 0;
  z-index: 950;
  background: var(--bg-header);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-default);
}

.ph-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 64px;
  padding: 0 var(--space-5);
}

.ph-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

.ph-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.ph-brand:hover { color: var(--text-primary); }

.ph-brand .logo-mark {
  color: var(--text-primary);
  flex: none;
  height: 24px;
  width: 24px;
}

.ph-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ph-nav a {
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 12px;
  text-decoration: none;
  transition: color var(--ph-dur-fast) var(--ph-ease-out),
    background-color var(--ph-dur-fast) var(--ph-ease-out),
    transform var(--ph-dur-fast) var(--ph-ease-out);
}

.ph-nav a:hover {
  color: var(--text-primary);
  background: var(--bg-surface-sunken);
}

.ph-nav a:active { transform: scale(var(--ph-press-scale)); }

.ph-nav a.is-active {
  color: var(--text-primary);
  background: var(--bg-surface-sunken);
}

.ph-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Search ------------------------------------------------------------------ */
.ph-search { margin: 0; }

.ph-search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 256px;
  height: 36px;
  margin: 0;
  padding: 0 var(--space-3);
  background: var(--bg-surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: text;
  transition: border-color var(--ph-dur-fast) var(--ph-ease-out),
    box-shadow var(--ph-dur-fast) var(--ph-ease-out),
    background-color var(--ph-dur-fast) var(--ph-ease-out);
}

.ph-search-field:focus-within {
  background: var(--bg-surface);
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

.ph-search-icon { display: inline-flex; color: var(--text-muted); }

.ph-search-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
  outline: none;
  padding: 0;
}

.ph-search-input::placeholder { color: var(--text-muted); }

/* The wrapper's :focus-within ring is the visible focus indicator for this
   field, so suppress the global input:focus ring to avoid a doubled ring.
   Keyboard focus stays clearly visible via the wrapper — no a11y loss. */
.ph-search-input:focus { box-shadow: none; outline: none; }

.ph-search-kbd {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1;
}

/* Icon button + theme glyphs ---------------------------------------------- */
.ph-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--ph-dur-fast) var(--ph-ease-out),
    background-color var(--ph-dur-fast) var(--ph-ease-out),
    border-color var(--ph-dur-fast) var(--ph-ease-out),
    transform var(--ph-dur-fast) var(--ph-ease-out);
}

.ph-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-sunken);
  border-color: var(--border-default);
}

.ph-icon-btn:active { transform: scale(var(--ph-press-scale)); }

/* Theme glyph swaps with a soft rotate/fade so the sun/moon change reads as
   a deliberate transition rather than a hard cut. */
.ph-theme-glyph {
  display: none;
  transition: transform var(--ph-dur-base) var(--ph-ease-out),
    opacity var(--ph-dur-base) var(--ph-ease-out);
}
.ph-icon-btn:hover .ph-theme-glyph { transform: rotate(-18deg); }
html[data-theme="light"] .ph-theme-glyph-light { display: inline-flex; }
html[data-theme="dark"] .ph-theme-glyph-dark { display: inline-flex; }
html:not([data-theme="light"]):not([data-theme="dark"]) .ph-theme-glyph-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .ph-theme-glyph-light { display: none; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .ph-theme-glyph-dark { display: inline-flex; }
}

.ph-login-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--brand);
  color: var(--text-on-brand);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--ph-dur-fast) var(--ph-ease-out),
    transform var(--ph-dur-fast) var(--ph-ease-out),
    box-shadow var(--ph-dur-fast) var(--ph-ease-out);
}

.ph-login-button:hover {
  background: var(--brand-strong);
  color: var(--text-on-brand);
  transform: translateY(var(--ph-lift));
  box-shadow: var(--shadow-soft);
}
.ph-login-button:active { transform: translateY(0) scale(var(--ph-press-scale)); box-shadow: none; }

/* Account cluster (avatar link + subtle Log Out) -------------------------- */
.account-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.account-avatar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 36px;
  width: 36px;
  border: 1px solid transparent;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
  text-decoration: none;
  transition: transform var(--ph-dur-fast) var(--ph-ease-out),
    box-shadow var(--ph-dur-fast) var(--ph-ease-out);
}
.account-avatar-link:hover {
  transform: translateY(var(--ph-lift));
  box-shadow: var(--shadow-soft);
}
.account-avatar-link:active { transform: scale(var(--ph-press-scale)); box-shadow: none; }
.account-avatar-link .account-avatar { height: 100%; width: 100%; font-size: 14px; }

/* Initials avatar rendered by the account_avatar helper. */
.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.account-avatar-has-image {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.account-avatar-image {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ph-logout-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-3);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--ph-dur-fast) var(--ph-ease-out),
    background-color var(--ph-dur-fast) var(--ph-ease-out),
    border-color var(--ph-dur-fast) var(--ph-ease-out),
    transform var(--ph-dur-fast) var(--ph-ease-out);
}
.ph-logout-button:hover {
  color: var(--text-primary);
  background: var(--bg-surface-sunken);
  border-color: var(--border-strong);
}
.ph-logout-button:active { transform: scale(var(--ph-press-scale)); }

/* button_to wraps the logout control in a <form> (the portal has no rails-ujs,
   so sign-out must POST via a real form with CSRF + _method). Keep the wrapper
   transparent to the flex account cluster so the button aligns as before. */
.ph-logout-form {
  display: inline-flex;
  margin: 0;
}

.ph-icon-btn:focus-visible,
.ph-login-button:focus-visible,
.account-avatar-link:focus-visible,
.ph-logout-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Hamburger (mobile) ------------------------------------------------------ */
.btn-navbar {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  height: 44px;
  width: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-navbar .navbar-toggle-bar {
  display: block;
  height: 2px;
  width: 18px;
  margin: 0 auto;
  background: var(--text-secondary);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Main content wrapper
   -------------------------------------------------------------------------- */
.ph-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* Non-docs pages: keep readable measure + comfortable top spacing. */
.ph-main > *:not(.ph-docs):not(footer) { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Docs 3-column grid
   -------------------------------------------------------------------------- */
.ph-docs {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: var(--space-6);
  align-items: start;
}

.ph-docs-no-left { grid-template-columns: minmax(0, 1fr) 240px; }
.ph-docs-no-left .ph-docs-content { grid-column: 1; }

.ph-docs-left,
.ph-docs-right {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ph-docs-content { min-width: 0; padding: var(--space-6) 0 var(--space-7); }

/* Content sits flat on the canvas (no card chrome) in the docs grid. */
.ph-docs-content #page {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Left sidebar navigation
   -------------------------------------------------------------------------- */
.ph-docs-left { padding: var(--space-6) 0; }

.ph-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-2); }

.ph-sidebar-group { border: 0; }
.ph-sidebar-group + .ph-sidebar-group { margin-top: var(--space-3); }

.ph-sidebar-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ph-sidebar-group-summary::-webkit-details-marker { display: none; }

.ph-sidebar-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ph-sidebar-group-chevron {
  height: 16px;
  width: 16px;
  color: var(--text-faint);
  background: currentColor;
  -webkit-mask: var(--ph-chevron) center / 16px 16px no-repeat;
  mask: var(--ph-chevron) center / 16px 16px no-repeat;
  transition: transform var(--ph-dur-fast) var(--ph-ease-out);
}
.ph-sidebar-group[open] .ph-sidebar-group-chevron { transform: rotate(90deg); }

/* The subsection list eases in when a group opens (and on load for the
   default-open groups), keeping expand/collapse from snapping. */
.ph-sidebar-group[open] .ph-sidebar-list {
  animation: ph-fade-slide-in var(--ph-dur-base) var(--ph-ease-out);
}

.ph-sidebar-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; }

.ph-sidebar-list a,
.ph-sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px var(--space-3);
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  text-decoration: none;
  transition: color var(--ph-dur-fast) var(--ph-ease-out),
    background-color var(--ph-dur-fast) var(--ph-ease-out),
    transform var(--ph-dur-fast) var(--ph-ease-out);
}

.ph-sidebar-list a:hover,
.ph-sidebar-footer-link:hover {
  color: var(--text-primary);
  background: var(--bg-surface-sunken);
}
.ph-sidebar-list a:active,
.ph-sidebar-footer-link:active { transform: translateX(1px); }

.ph-sidebar-list a.is-active,
.ph-sidebar-footer-link.is-active {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 550;
}

/* Keyboard focus only (no ring on mouse click). Use an inset ring so the full-
   width nav item's indicator can't be clipped by the rail's overflow-y scroll
   container. */
.ph-sidebar-list a:focus-visible,
.ph-sidebar-footer-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand);
}

.ph-sidebar-icon { color: var(--text-faint); display: inline-flex; }
.ph-sidebar-list a:hover .ph-sidebar-icon,
.ph-sidebar-footer-link:hover .ph-sidebar-icon { color: var(--text-secondary); }
.ph-sidebar-list a.is-active .ph-sidebar-icon,
.ph-sidebar-footer-link.is-active .ph-sidebar-icon { color: var(--brand); }

.ph-sidebar-text { min-width: 0; }

.ph-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

/* --------------------------------------------------------------------------
   Right "On this page" TOC
   -------------------------------------------------------------------------- */
.ph-docs-right { padding: var(--space-6) 0; }

.ph-toc-heading {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 var(--space-3) var(--space-2);
}

/* Reuse the existing scroll-spy list (.sidebar-nav .nav-list) but reskin. */
.ph-docs-right .sidebar-nav {
  position: static;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.ph-docs-right .sidebar-toc-toggle { display: none; }

.ph-docs-right .sidebar-nav .nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--border-default);
}

.ph-docs-right .sidebar-nav .nav-list > li > a {
  display: block;
  margin: 0 0 0 -2px;
  padding: 4px var(--space-3);
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  text-shadow: none;
  transition: color 140ms ease, border-color 140ms ease;
}
.ph-docs-right .sidebar-nav .nav-list > li > a:hover {
  background: transparent;
  color: var(--text-primary);
}

.ph-docs-right .sidebar-nav .nav-list > li > a.is-active {
  color: var(--brand);
  border-left-color: var(--brand);
  border-radius: 0;
  background: transparent;
  font-weight: 500;
}
.ph-docs-right .sidebar-nav .nav-list > li > a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand);
}

.ph-docs-right .nav-header {
  padding: var(--space-3) 0 var(--space-1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ph-docs-right .nav-header > a { color: inherit; text-decoration: none; }

/* Adaptive right rail: once JS is ready, show only the group for the
   section currently in view; the matching left-rail item is marked active. */
.ph-docs-right.js-toc-ready .ph-toc-group { display: none; }
.ph-docs-right.js-toc-ready .ph-toc-group.is-active-group {
  display: block;
  animation: ph-fade-slide-in var(--ph-dur-base) var(--ph-ease-out);
}
.ph-docs-right .ph-toc-group + .ph-toc-group { margin-top: var(--space-1); }

/* A section with a single subsection: hide the rail content entirely. */
.ph-docs-right.is-single-section .ph-toc-heading,
.ph-docs-right.is-single-section .ph-toc-groups { display: none; }

/* Auto-generated tutorial TOC: indent nested (h3) entries. */
.ph-docs-right .nav-list > li.ph-toc-sub > a { padding-left: var(--space-5); }

/* Tutorial/landing pages with no headings drop the right rail entirely. */
.ph-docs.ph-docs--no-toc .ph-docs-right { display: none; }
@media (min-width: 1101px) {
  .ph-docs.ph-docs--no-toc { grid-template-columns: 240px minmax(0, 1fr); }
}

/* Code-block copy button — icon only, top-right, revealed on hover. */
.code-block-wrap .copy-code-button {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-on-code) 12%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-on-code) 6%, transparent);
  color: color-mix(in srgb, var(--text-on-code) 66%, transparent);
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 120ms cubic-bezier(0.42, 0, 0.58, 1);
}
.code-block-wrap:hover .copy-code-button,
.code-block-wrap .copy-code-button:focus-visible,
.code-block-wrap .copy-code-button.is-copied,
.code-block-wrap .copy-code-button.is-error {
  opacity: 1;
}
.code-block-wrap .copy-code-button:hover {
  color: var(--text-on-code);
  border-color: color-mix(in srgb, var(--text-on-code) 30%, transparent);
  background: color-mix(in srgb, var(--text-on-code) 12%, transparent);
}
.code-block-wrap .copy-code-button:active {
  transform: scale(0.9);
}
.code-block-wrap .copy-code-button svg { display: block; }

/* Touch devices have no hover, so keep the copy button visible at all times. */
@media (hover: none) {
  .code-block-wrap .copy-code-button { opacity: 1; }
}

/* Glyph -> check swap mirrors the card secret-copy (Framer Motion mode="wait"):
   the copy glyph scales down + fades out, then the green check scales up into
   place. transition-delay sequences the two 150ms phases in both directions so
   the outgoing icon always clears before the incoming icon enters. */
.code-block-wrap .ph-copy-icon-btn .ph-copy-glyph,
.code-block-wrap .ph-copy-icon-btn .ph-copy-check {
  transition: opacity 150ms cubic-bezier(0.42, 0, 0.58, 1), transform 150ms cubic-bezier(0.42, 0, 0.58, 1);
}
.code-block-wrap .ph-copy-icon-btn .ph-copy-glyph {
  transition-delay: 150ms;
}
.code-block-wrap .ph-copy-icon-btn .ph-copy-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  color: var(--success);
}
.code-block-wrap .ph-copy-icon-btn.is-copied .ph-copy-glyph {
  opacity: 0;
  transform: scale(0.6);
  transition-delay: 0ms;
}
.code-block-wrap .ph-copy-icon-btn.is-copied .ph-copy-check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 150ms;
}
/* Copy failure (clipboard unavailable / write rejected) */
.code-block-wrap .ph-copy-icon-btn.is-error {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.code-block-wrap .ph-copy-icon-btn.is-error .ph-copy-glyph {
  color: var(--danger);
}
@media (prefers-reduced-motion: reduce) {
  .code-block-wrap .ph-copy-icon-btn .ph-copy-glyph,
  .code-block-wrap .ph-copy-icon-btn .ph-copy-check {
    transition: none;
  }
}

/* Response label bar above code blocks — Stripe-style uppercase, letter-spaced
   label treatment instead of the raw monospace status line. */
.code-block-wrap pre.header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 46px;
  padding: 9px var(--space-4);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-on-code) 62%, transparent);
}

/* Unified code container: the wrap owns the border + rounded corners so a header
   (or request method line) and its body read as a single top-to-bottom block.
   Children shed their own borders/radii; an internal divider only appears
   between stacked pieces, never below a lone header. */
.code-block-wrap {
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.code-block-wrap > pre,
.code-block-wrap > .ph-request-line {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.code-block-wrap > pre.header:not(:last-child),
.code-block-wrap > .ph-request-line:not(:last-child) {
  border-bottom: 1px solid var(--border-code);
}
/* The request method line acts as the block header when joined to a body. */
.code-block-wrap > .ph-request-line {
  background: var(--bg-code-header);
}

/* Navigation arrow on left-rail items that leave the current view:
   external links (target=_blank) and internal links to sibling sections
   (marked with .ph-sidebar-leave). In-section navigation and links to
   child pages of the current view do not get an arrow. */
.ph-sidebar-list a[target="_blank"]::after,
.ph-sidebar-list a.ph-sidebar-leave::after,
.ph-sidebar-footer-link[target="_blank"]::after {
  content: "";
  flex: none;
  margin-left: auto;
  height: 13px;
  width: 13px;
  background: currentColor;
  -webkit-mask: var(--ph-arrow-up-right) center / 13px 13px no-repeat;
  mask: var(--ph-arrow-up-right) center / 13px 13px no-repeat;
  opacity: 0.4;
  transition: opacity 140ms ease;
}
.ph-sidebar-list a[target="_blank"]:hover::after,
.ph-sidebar-list a.ph-sidebar-leave:hover::after,
.ph-sidebar-footer-link[target="_blank"]:hover::after { opacity: 0.75; }
.ph-sidebar-list a.is-active[target="_blank"]::after,
.ph-sidebar-list a.is-active.ph-sidebar-leave::after { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Method badges (GET / POST / PUT / DELETE)
   -------------------------------------------------------------------------- */
.ph-method,
.endpoint .method,
.request-method {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--method-get);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ph-main footer {
  margin-top: var(--space-7);
  padding: var(--space-6) 0 var(--space-5);
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
}

.ph-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
}

.ph-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--ph-dur-fast) var(--ph-ease-out);
}

.ph-footer-brand:hover { color: var(--text-primary); opacity: 0.78; text-decoration: none; }

.ph-footer-brand svg,
.ph-footer-brand img { width: 26px; height: 26px; display: block; }

.ph-footer-brand-text {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.ph-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.ph-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--ph-dur-fast) var(--ph-ease-out);
}

.ph-footer-links a:hover { color: var(--text-primary); }

.ph-footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle, var(--border-default));
}

.ph-footer-copy {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.ph-footer-disclaimer {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.ph-footer-disclaimer a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ph-footer-disclaimer a:hover { color: var(--text-primary); }

@media (max-width: 640px) {
  .ph-footer-top {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Chevron mask asset (inline SVG data URI, Fluent chevron-right)
   -------------------------------------------------------------------------- */
:root {
  --ph-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z'/%3E%3C/svg%3E");
  --ph-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.5 4C8.224 4 8 3.776 8 3.5C8 3.224 8.224 3 8.5 3H16.5C16.776 3 17 3.224 17 3.5V11.5C17 11.776 16.776 12 16.5 12C16.224 12 16 11.776 16 11.5V4.707L3.854 16.854C3.658 17.049 3.342 17.049 3.146 16.854C2.951 16.658 2.951 16.342 3.146 16.146L15.293 4H8.5Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .ph-docs { grid-template-columns: 220px minmax(0, 1fr); }
  .ph-docs-right { display: none; }
  .ph-docs-no-left { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .btn-navbar { display: inline-flex; }
  .ph-nav { display: none; }
  .ph-header-inner { gap: var(--space-3); }
  .ph-search-field { width: 180px; }
  .ph-search-kbd { display: none; }

  /* Keep the theme toggle a square tap target (it picks up min-height: 44px on
     mobile, so match the width to stay square like the hamburger). */
  .theme-trigger { width: 44px; height: 44px; }

  /* Animated expand/collapse: the drawer stays rendered and reveals with a quick
     slide-and-fade on the .33,0,0,1 curve instead of a hard display swap. */
  .ph-nav-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-soft);
    transform-origin: top center;
    transform: translateY(-8px) scaleY(0.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.33, 0, 0, 1),
      opacity 0.2s cubic-bezier(0.33, 0, 0, 1),
      visibility 0s linear 0.26s;
  }
  .ph-nav-collapse.is-open {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.26s cubic-bezier(0.33, 0, 0, 1),
      opacity 0.2s cubic-bezier(0.33, 0, 0, 1);
  }
  .ph-nav-collapse .ph-nav { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .ph-nav-collapse .ph-nav a { padding: 10px 12px; }

  .ph-docs { grid-template-columns: minmax(0, 1fr); }
  .ph-docs-left { display: none; }
  .ph-docs-content { padding-top: var(--space-5); }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .ph-nav-collapse,
  .ph-nav-collapse.is-open { transition: none; }
}

@media (max-width: 560px) {
  .ph-search { display: none; }
}

/* Phones: logo-only brand so the header right cluster (theme + avatar +
   Log Out) never collides with the wordmark. */
@media (max-width: 480px) {
  .ph-brand-text { display: none; }
  .ph-header-inner { gap: var(--space-2); padding: 0 var(--space-4); }
  .account-cluster { gap: var(--space-2); }
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Code blocks are dark in both themes (Persephone). Inline code is a light
   sunken pill. Override prettify so syntax stays legible on the dark surface. */
pre {
  color: var(--text-on-code);
  font-size: 14px;
  padding: var(--space-4);
}
pre code { color: inherit; }

:not(pre) > code {
  background: var(--bg-surface-sunken);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.4em;
}

.token-value { color: var(--text-on-code); }

/* Syntax palette — highlight.js. Token colours come from theme-aware
   --code-* variables (Tokyo Night in dark, GitHub-light in light); the code
   surface colour comes from --bg-code. .hljs only sets the base. */
.hljs { background: var(--bg-code); color: var(--text-on-code); }
.hljs-comment,
.hljs-quote { color: var(--code-comment); font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name { color: var(--code-keyword); }
.hljs-string,
.hljs-meta .hljs-string,
.hljs-regexp { color: var(--code-string); }
.hljs-number,
.hljs-literal { color: var(--code-number); }
.hljs-attr,
.hljs-attribute { color: var(--code-attr); }
.hljs-title,
.hljs-title.function_,
.hljs-section { color: var(--code-title); }
.hljs-type,
.hljs-class .hljs-title,
.hljs-title.class_ { color: var(--code-type); }
.hljs-tag { color: var(--code-tag); }
.hljs-variable,
.hljs-template-variable,
.hljs-symbol,
.hljs-bullet,
.hljs-params { color: var(--code-variable); }
.hljs-meta,
.hljs-meta .hljs-keyword { color: var(--code-meta); }
.hljs-deletion { color: var(--code-deletion); }
.hljs-addition { color: var(--code-addition); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Request line + method badge variants ------------------------------------ */
.ph-request-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.ph-method.ph-method-get { color: var(--method-get); background: var(--success-soft); border-color: var(--success-border); }
.ph-method.ph-method-post { color: var(--method-post); background: var(--brand-soft); border-color: var(--brand-border); }
.ph-method.ph-method-put,
.ph-method.ph-method-patch { color: var(--method-put); background: var(--warning-soft); border-color: var(--warning-border); }
.ph-method.ph-method-delete { color: var(--method-delete); background: var(--danger-soft); border-color: var(--danger-border); }

.ph-endpoint-path {
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Parameter name rendered as inline code (e.g. `user`, `otherUser`). */
.ph-param-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  vertical-align: middle;
}

/* Endpoint sections -------------------------------------------------------- */
/* No containing box: endpoints flow full-width under their resource heading so
   content gets the full horizontal space (the bordered card was visual noise
   and stole left/right room). A subtle divider keeps them visually separated. */
.endpoint {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  margin-top: 0;
  padding: var(--space-6) 0;
}
.endpoint:last-child { border-bottom: 0; }
.endpoint h3 i.icon-chevron-right { display: none; }
.endpoint h3 {
  font-family: var(--font-headings);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Keep the endpoint name (h3) below the resource title (h2) on mobile, and the
   sub-labels (h4) below the endpoint name. The base h3/h4 mobile rules in
   application.css don't reach these more specific selectors, so without this the
   22px h3 looked larger than the 21px h2 on small screens. */
@media (max-width: 640px) {
  h4 { font-size: 16px; }
  .endpoint h3 { font-size: 19px; }
}

/* Permalink anchors on docs headings -------------------------------------- */
/* The icon scale-fades in on heading hover (or keyboard focus) and copies a
   permalink to that section when clicked. */
.ph-docs-content h2,
.ph-docs-content h3 { scroll-margin-top: 88px; }
.ph-heading-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  vertical-align: middle;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease),
    transform var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease),
    color var(--ph-dur-fast, 140ms) var(--ph-ease-out, ease);
}
.ph-heading-anchor .fluent-icon { display: block; }
.ph-docs-content h2:hover > .ph-heading-anchor,
.ph-docs-content h3:hover > .ph-heading-anchor,
.ph-heading-anchor:focus-visible {
  opacity: 1;
  transform: scale(1);
}
.ph-heading-anchor:hover { color: var(--brand); }
.ph-heading-anchor:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}
/* Brief "Copied" confirmation pill after a click. */
.ph-heading-anchor.is-copied {
  opacity: 1;
  transform: scale(1);
  position: relative;
}
.ph-heading-anchor.is-copied::after {
  content: "Link copied";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 2px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--bg-surface);
  background: var(--text-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ph-heading-anchor { transition: opacity var(--ph-dur-fast, 140ms) linear; transform: none; }
  .ph-docs-content h2:hover > .ph-heading-anchor,
  .ph-docs-content h3:hover > .ph-heading-anchor,
  .ph-heading-anchor:focus-visible { transform: none; }
}

/* Info callout (Persephone blue) ------------------------------------------ */
.alert,
.alert-info {
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  color: var(--brand-text);
}

/* Homepage cards ----------------------------------------------------------- */
.doc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
.well {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: var(--space-5);
  position: relative;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.well:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

/* Reference cards: a Fluent icon (brand color), a solid primary-color title,
   and a CSS-only quadrant tilt on hover. The anchor is an invisible perspective
   wrapper; six transparent hover zones sit above the surface (z-index) but
   inside the anchor, so hover drives the 3D tilt while a click anywhere still
   follows the card link. */
.doc-card {
  --doc-card-tilt: 6deg;
  position: relative;
  display: block;
  perspective: 1000px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.doc-card:hover {
  transform: scale(1.02);
}

.doc-card__surface {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
  box-sizing: border-box;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0, 0, 0, 1), box-shadow 0.7s ease, border-color 140ms ease;
}
.doc-card:hover .doc-card__surface {
  border-color: var(--border-strong);
}

/* Border glow: a masked gradient ring that follows the cursor along the edge.
   JS (initDocCardGlow) sets --glow-x/--glow-y per card on mousemove. */
.doc-card__surface::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(160px circle at var(--glow-x, 50%) var(--glow-y, 50%), var(--doc-card-glow, var(--border-strong)), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.doc-card:hover .doc-card__surface::before {
  opacity: 1;
}

.doc-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.doc-card__icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--brand);
}
.doc-card__icon svg {
  width: 24px;
  height: 24px;
}

.doc-card__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.doc-card__desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.doc-card,
.doc-card:hover,
.doc-card:focus {
  text-decoration: none;
}

.doc-card__zone {
  position: absolute;
  width: 50%;
  height: 50%;
  z-index: 2;
}
.doc-card__zone--tl { top: 0; left: 0; }
.doc-card__zone--tr { top: 0; right: 0; }
.doc-card__zone--bl { bottom: 0; left: 0; }
.doc-card__zone--br { bottom: 0; right: 0; }
.doc-card__zone--tm { top: 0; bottom: 50%; left: 35%; right: 35%; width: auto; height: auto; }
.doc-card__zone--bm { top: 50%; bottom: 0; left: 35%; right: 35%; width: auto; height: auto; }

.doc-card__zone--tl:hover ~ .doc-card__surface { transform: rotate3d(-1, 1, 0, var(--doc-card-tilt)); box-shadow: 4px -4px 16px rgba(0, 0, 0, 0.08); }
.doc-card__zone--tr:hover ~ .doc-card__surface { transform: rotate3d(-1, -1, 0, var(--doc-card-tilt)); box-shadow: -4px -4px 16px rgba(0, 0, 0, 0.08); }
.doc-card__zone--bl:hover ~ .doc-card__surface { transform: rotate3d(1, 1, 0, var(--doc-card-tilt)); box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.08); }
.doc-card__zone--br:hover ~ .doc-card__surface { transform: rotate3d(1, -1, 0, var(--doc-card-tilt)); box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.08); }
.doc-card__zone--tm:hover ~ .doc-card__surface { transform: rotate3d(-1, 0, 0, var(--doc-card-tilt)); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); }
.doc-card__zone--bm:hover ~ .doc-card__surface { transform: rotate3d(1, 0, 0, var(--doc-card-tilt)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .doc-card,
  .doc-card__surface {
    transition: none !important;
    transform: none !important;
  }
}

/* Homepage: replace the legacy Bootstrap span grid with a clean layout
   (left rail + content + sign-in/applications sidebar card). Mobile-first:
   single column by default, then two columns before the full desktop trio. */
.docs.index .ph-main > main.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  max-width: 1320px;
  margin: var(--space-6) auto 0;
}
.docs.index .ph-main > main.row > .ph-docs-left {
  grid-column: 1;
  grid-row: 1;
}
.docs.index .ph-main > main.row > .span9 {
  width: auto;
  margin: 0;
  float: none;
  grid-column: 1;
  grid-row: 1;
}
.docs.index .ph-main > main.row > .span3 {
  width: auto;
  margin: 0;
  float: none;
  grid-column: 1;
}
.docs.index .ph-main #page {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.docs.index .span3.sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5);
}
.docs.index .span3.sidebar h2 {
  font-size: 18px;
  margin-bottom: var(--space-3);
}

@media (min-width: 821px) {
  .docs.index .ph-main > main.row {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .docs.index .ph-main > main.row > .ph-docs-left { grid-column: 1; grid-row: 1; }
  .docs.index .ph-main > main.row > .span9 { grid-column: 2; grid-row: 1; }
  .docs.index .ph-main > main.row > .span3 { grid-column: 2; grid-row: 2; }
  .docs.index .span3.sidebar { position: sticky; top: 88px; }
}

@media (min-width: 1100px) {
  .docs.index .ph-main > main.row {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
  }
  .docs.index .ph-main > main.row > .span3 { grid-column: 3; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   Motion Pass 3 — reveals & polish
   On-load entrances (main content + homepage cards), the <details> expand and
   right-rail section crossfade (keyframes referenced above), plus the
   copy-success pop. Every duration runs through a motion token, so
   prefers-reduced-motion collapses these to an instant final state and never
   leaves content hidden.
   -------------------------------------------------------------------------- */
@keyframes ph-content-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes ph-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes ph-fade-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Main docs/tutorial column eases in once per page load. No fill-mode, so the
   resting state is the element's natural opacity:1 even if animation is
   unsupported. */
.ph-docs-content {
  animation: ph-content-in var(--ph-dur-slow) var(--ph-ease-out);
}

/* Homepage cards rise in with a light stagger so the grid feels orchestrated
   rather than popping in all at once. */
.doc-card-grid .well {
  animation: ph-rise-in var(--ph-dur-slow) var(--ph-ease-out) both;
}
.doc-card-grid .well:nth-child(1) { animation-delay: 0ms; }
.doc-card-grid .well:nth-child(2) { animation-delay: calc(var(--ph-stagger-step) * 1); }
.doc-card-grid .well:nth-child(3) { animation-delay: calc(var(--ph-stagger-step) * 2); }
.doc-card-grid .well:nth-child(4) { animation-delay: calc(var(--ph-stagger-step) * 3); }
.doc-card-grid .well:nth-child(5) { animation-delay: calc(var(--ph-stagger-step) * 4); }
.doc-card-grid .well:nth-child(6) { animation-delay: calc(var(--ph-stagger-step) * 5); }
.doc-card-grid .well:nth-child(n+7) { animation-delay: calc(var(--ph-stagger-step) * 6); }
/* ==========================================================================
   Error screens (404 / 422 / 500)
   Flat, centred typographic layout that reuses the Persephone tokens and the
   shared header/footer shell. Loaded via the application manifest.
   ========================================================================== */

/* Center the error block in the viewport between the trimmed header/footer. */
.error-body { display: flex; flex-direction: column; min-height: 100vh; }
.error-body .ph-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.error-body .ph-main > footer { flex: none; }

/* Persephone adds a top margin to non-docs .ph-main children; cancel it so the
   error block stays vertically centred. */
.error-body .ph-main > .error-screen { margin-top: 0; }

.error-screen {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-7) 0;
}

.error-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The oversized numeral is the single accent on the page. Brand blue by
   default; the controller swaps the tint for warning (422) / danger (500). */
.error-mark {
  font-family: var(--font-headings);
  font-size: clamp(72px, 16vw, 104px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-screen.is-warning .error-mark {
  background: linear-gradient(120deg, var(--warning), color-mix(in srgb, var(--warning) 55%, #000));
  -webkit-background-clip: text;
  background-clip: text;
}

.error-screen.is-danger .error-mark {
  background: linear-gradient(120deg, var(--danger), color-mix(in srgb, var(--danger) 55%, #000));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Fallback for engines without background-clip: text so the numeral is never
   invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .error-mark { background: none; color: var(--brand); }
  .error-screen.is-warning .error-mark { color: var(--warning); }
  .error-screen.is-danger .error-mark { color: var(--danger); }
}

.error-title {
  margin: 0;
  font-family: var(--font-headings);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.error-desc {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.error-desc a {
  color: var(--brand);
  font-weight: 500;
  text-decoration: none;
}

.error-desc a:hover { text-decoration: underline; }

/* Error footer is trimmed to brand + copyright, so lay it out simply. */
.error-body .ph-footer-top { justify-content: space-between; }