/* Copyright (c) 2026 Gotoproject Platform B.V. All rights reserved. */
/* Gold controls for static HTML (and native fallbacks next to Shoelace). */
/* Cascade: Shoelace light.css → fonts.css → theme.css → layout.css → this file. */
/* Copy into the app. Do not invent a second button or field look. */
/* Live catalog: styleguide.html in this folder. */

/* ── Type extras ─────────────────────────────────────────────────────────── */

.overline {
  margin: 0;
  font-size: var(--gtp-font-size-overline);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: var(--gtp-letter-spacing-overline);
  text-transform: uppercase;
  color: var(--gtp-text-secondary);
}

.breadcrumb {
  min-width: 0;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: var(--gtp-spacing-tight);
  column-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;
  min-width: 0;
  max-width: 100%;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline: var(--sl-spacing-x-small);
  color: var(--gtp-text-muted);
  font-weight: var(--sl-font-weight-semibold);
}

.breadcrumb a,
.breadcrumb [aria-current="page"] {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--gtp-font-size-overline);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: var(--gtp-letter-spacing-overline);
  text-transform: uppercase;
  color: var(--gtp-text-secondary);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  outline: none;
  color: var(--sl-color-primary-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.breadcrumb [aria-current="page"] {
  cursor: default;
}

.mark {
  font-style: italic;
  font-weight: inherit;
  color: var(--sl-color-primary-700);
  padding-inline-end: 0.18em;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}

.cta-row--center,
.hero-copy .cta-row {
  justify-content: center;
}

.cta-row .btn {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
}

.prose p {
  margin: 0 0 var(--gtp-spacing-stack);
}

.prose p:last-child {
  margin-bottom: 0;
}

.text-link {
  color: var(--sl-color-primary-700);
  font-weight: var(--sl-font-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--gtp-text-link-underline-offset);
}

.text-link:hover {
  color: var(--sl-color-primary-800);
}

/* ── Buttons (pill; one filled primary per view) ─────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gtp-spacing-tight);
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  height: var(--gtp-chrome-control-size);
  min-height: var(--gtp-chrome-control-size);
  margin: 0;
  padding: 0 var(--gtp-button-padding-inline);
  border: var(--gtp-border-width) solid transparent;
  border-radius: var(--gtp-radius-btn);
  background: var(--gtp-surface);
  color: var(--gtp-text-primary);
  box-shadow: var(--gtp-button-shadow);
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: var(--sl-letter-spacing-tight);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  text-box: trim-both cap alphabetic;
  cursor: pointer;
  transition:
    background var(--gtp-transition-md),
    border-color var(--gtp-transition-md),
    color var(--gtp-transition-md);
}

.btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.btn .gtp-icon,
.btn .gtp-spinner {
  display: block;
  flex-shrink: 0;
  align-self: center;
}

.page-head .btn,
.stack-form .btn,
.inline-form .btn,
.card .btn,
.cta-row .btn,
.dialog-foot .btn,
.toast .btn {
  width: max-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  flex: 0 0 auto;
}

.page-head-actions .btn {
  align-self: center;
  justify-self: center;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sl-color-neutral-50);
}

.btn:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn[aria-busy="true"] {
  cursor: wait;
}

.btn-primary {
  background: var(--sl-color-primary-700);
  color: var(--sl-color-neutral-0);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sl-color-primary-800);
  color: var(--sl-color-neutral-0);
}

.btn-secondary {
  border-color: var(--gtp-border);
  background: var(--sl-color-neutral-0);
  color: var(--gtp-text-primary);
  font-weight: var(--sl-font-weight-medium);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sl-color-neutral-50);
  border-color: var(--sl-color-neutral-300);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  font-weight: var(--sl-font-weight-medium);
}

.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sl-color-neutral-50);
}

.btn-danger {
  background: var(--sl-color-danger-600);
  color: var(--sl-color-neutral-0);
}

.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sl-color-danger-700);
  color: var(--sl-color-neutral-0);
}

.btn-sm {
  height: var(--gtp-chrome-control-size-sm);
  min-height: var(--gtp-chrome-control-size-sm);
  padding: 0 var(--gtp-button-padding-inline-sm);
  font-size: var(--sl-font-size-medium);
  font-weight: var(--sl-font-weight-medium);
}

.btn-icon {
  width: var(--gtp-chrome-control-size);
  min-width: var(--gtp-chrome-control-size);
  height: var(--gtp-chrome-control-size);
  padding: 0;
}

.btn-icon.btn-sm {
  width: var(--gtp-chrome-control-size-sm);
  min-width: var(--gtp-chrome-control-size-sm);
  height: var(--gtp-chrome-control-size-sm);
  min-height: var(--gtp-chrome-control-size-sm);
}

.btn-icon-danger {
  background: var(--sl-color-danger-50);
  border-color: var(--sl-color-danger-200);
  color: var(--sl-color-danger-700);
  box-shadow: none;
}

.btn-icon-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sl-color-danger-100);
  border-color: var(--sl-color-danger-200);
  color: var(--sl-color-danger-700);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.field > label,
.field .field-label {
  margin-bottom: var(--gtp-spacing-tight);
}

.field .hint,
.field .helper,
.field .form-hint,
.field .field-error {
  margin-top: var(--gtp-spacing-tight);
  margin-bottom: 0;
}

.field-error {
  color: var(--sl-color-danger-700);
  font-size: var(--sl-font-size-medium);
}

.field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.field select,
.field textarea,
.stack-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.stack-form select,
.stack-form textarea,
.inline-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.inline-form select,
.inline-form textarea {
  display: block;
  width: 100%;
  max-width: var(--gtp-measure);
  min-height: var(--gtp-chrome-control-size);
  padding: 0.7rem 1rem;
  border: var(--gtp-border-width) solid var(--gtp-border);
  border-radius: var(--gtp-radius);
  background: var(--gtp-surface);
  color: var(--gtp-text-primary);
  font: inherit;
  letter-spacing: inherit;
}

.field textarea,
.stack-form textarea,
.inline-form textarea {
  min-height: var(--gtp-textarea-min-height);
  max-height: var(--gtp-textarea-max-height);
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  resize: none;
  field-sizing: content;
}

.field select,
.stack-form select,
.inline-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

.color-input {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: var(--gtp-chrome-control-size);
  height: var(--gtp-chrome-control-size);
  min-height: var(--gtp-chrome-control-size);
  overflow: hidden;
  border: var(--gtp-border-width) solid var(--gtp-border);
  border-radius: var(--gtp-radius);
  background: var(--gtp-surface);
  cursor: pointer;
}

.color-input:hover {
  border-color: var(--sl-color-primary-300);
}

.color-input:focus-within {
  outline: none;
  border-color: var(--sl-color-primary-700);
}

.color-input input[type="color"],
.field .color-input input[type="color"],
.stack-form .color-input input[type="color"],
.inline-form .color-input input[type="color"] {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.stack-form input:hover,
.stack-form select:hover,
.stack-form textarea:hover {
  border-color: var(--sl-color-primary-300);
}

.field input:focus,
.field input:focus-visible,
.field select:focus,
.field select:focus-visible,
.field textarea:focus,
.field textarea:focus-visible,
.stack-form input:focus,
.stack-form input:focus-visible,
.stack-form select:focus,
.stack-form select:focus-visible,
.stack-form textarea:focus,
.stack-form textarea:focus-visible {
  outline: none;
  border-color: var(--sl-color-primary-700);
  box-shadow: none;
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: var(--sl-color-neutral-50);
  color: var(--gtp-text-secondary);
  cursor: not-allowed;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--sl-color-danger-600);
}

.field.field-short input:not([type="file"]),
.field.field-short select,
.stack-form .field-short input:not([type="file"]) {
  width: max-content;
  max-width: 12ch;
}

.file-input,
.dropzone-input,
.field input[type="file"].file-input,
.field input[type="file"].dropzone-input,
.stack-form input[type="file"].file-input,
.stack-form input[type="file"].dropzone-input,
.stack-form input.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  max-width: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dropzone-input:focus,
.dropzone-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── Dropzone (click or drop a file; Iterator look) ─────────────────────── */

.dropzone {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: var(--gtp-border-width) solid var(--gtp-border);
  border-radius: var(--gtp-radius-card);
  background: var(--gtp-surface);
  transition:
    border-color var(--gtp-transition-md),
    background-color var(--gtp-transition-md);
}

.dropzone:hover,
.dropzone:focus-within {
  background: var(--sl-color-neutral-50);
}

.dropzone.is-over {
  border-color: var(--sl-color-primary-700);
  background: var(--sl-color-primary-50);
}

.dropzone-face {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: var(--gtp-spacing-tight);
  min-width: 0;
  max-width: 100%;
  min-height: var(--gtp-dropzone-min-height);
  padding: var(--sl-spacing-large) var(--gtp-spacing-form-gap);
  cursor: pointer;
  text-align: center;
}

.dropzone-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gtp-chrome-control-size);
  height: var(--gtp-chrome-control-size);
  margin-bottom: 0.35rem;
  border: var(--gtp-border-width) solid var(--gtp-border);
  border-radius: var(--gtp-radius-circle);
  color: var(--sl-color-primary-800);
  line-height: 0;
}

.dropzone-mark .gtp-icon,
.dropzone-mark sl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gtp-icon-size);
  height: var(--gtp-icon-size);
}

.dropzone.is-over .dropzone-mark {
  border-color: var(--sl-color-primary-700);
}

.dropzone-title {
  display: block;
  box-sizing: border-box;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-weight: var(--sl-font-weight-semibold);
  line-height: var(--sl-line-height-dense);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.dropzone--compact .dropzone-face {
  min-height: var(--gtp-dropzone-min-height-compact);
  padding: var(--gtp-card-padding) var(--gtp-spacing-stack);
}

.dropzone--compact .dropzone-title {
  justify-self: center;
  width: 100%;
  max-width: var(--gtp-dropzone-title-max);
}

.dropzone.is-busy .dropzone-face,
.dropzone.is-disabled .dropzone-face {
  pointer-events: none;
}

.dropzone.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dropzone.is-disabled .dropzone-input {
  pointer-events: none;
}

@media (max-width: 639px) {
  .dropzone-face {
    padding: 1.75rem 1rem;
  }

  .dropzone--compact .dropzone-face {
    padding: 1.5rem 1rem;
  }
}

/* ── Choice: checkbox is always a slider; radio stays exclusive ─────────── */

.choice,
.switch {
  display: flex;
  align-items: center;
  gap: var(--sl-spacing-small);
  cursor: pointer;
  font-weight: var(--sl-font-weight-normal);
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-list legend {
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 var(--gtp-choice-legend-gap);
  padding: 0;
  font-weight: var(--sl-font-weight-medium);
}

.choice-list .choice {
  margin-inline-start: var(--gtp-choice-indent);
}

.choice-list .choice + .choice,
.choice-list .switch + .switch {
  margin-top: var(--gtp-spacing-stack);
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  width: var(--gtp-switch-width);
  height: var(--gtp-switch-height);
  min-width: var(--gtp-switch-width);
  min-height: var(--gtp-switch-height);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--gtp-radius-btn);
  background: var(--sl-color-neutral-300);
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--gtp-transition-md);
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: var(--gtp-switch-inset);
  left: var(--gtp-switch-inset);
  width: var(--gtp-switch-thumb);
  height: var(--gtp-switch-thumb);
  border-radius: var(--gtp-radius-circle);
  background: var(--sl-color-neutral-0);
  box-shadow: var(--gtp-toast-shadow);
  transition: transform var(--gtp-transition-md);
}

input[type="checkbox"]:checked {
  background: var(--sl-color-primary-700);
}

input[type="checkbox"]:checked::after {
  transform: translateX(var(--gtp-switch-travel));
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none;
}

input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  width: var(--gtp-radio-size);
  height: var(--gtp-radio-size);
  min-width: var(--gtp-radio-size);
  min-height: var(--gtp-radio-size);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: var(--gtp-radio-stroke) solid var(--sl-color-neutral-400);
  border-radius: var(--gtp-radius-circle);
  background: var(--sl-color-neutral-300);
  cursor: pointer;
  vertical-align: middle;
  transition:
    background var(--gtp-transition-md),
    border-color var(--gtp-transition-md);
}

.choice input[type="radio"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--gtp-radio-dot);
  height: var(--gtp-radio-dot);
  border-radius: var(--gtp-radius-circle);
  background: var(--sl-color-neutral-0);
  box-shadow: var(--gtp-toast-shadow);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition:
    opacity var(--gtp-transition-md),
    transform var(--gtp-transition-md);
}

.choice input[type="radio"]:checked {
  border-color: var(--sl-color-primary-700);
  background: var(--sl-color-primary-700);
}

.choice input[type="radio"]:checked::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.choice input[type="radio"]:focus,
.choice input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--sl-color-primary-700);
}

.switch:has(.switch-ui) input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.switch-ui {
  position: relative;
  display: inline-block;
  width: var(--gtp-switch-width);
  height: var(--gtp-switch-height);
  flex-shrink: 0;
  border-radius: var(--gtp-radius-btn);
  background: var(--sl-color-neutral-300);
  transition: background var(--gtp-transition-md);
}

.switch-ui::after {
  content: "";
  position: absolute;
  top: var(--gtp-switch-inset);
  left: var(--gtp-switch-inset);
  width: var(--gtp-switch-thumb);
  height: var(--gtp-switch-thumb);
  border-radius: var(--gtp-radius-circle);
  background: var(--sl-color-neutral-0);
  box-shadow: var(--gtp-toast-shadow);
  transition: transform var(--gtp-transition-md);
}

.switch input:checked + .switch-ui,
.switch:has(input:checked) .switch-ui {
  background: var(--sl-color-primary-700);
}

.switch input:checked + .switch-ui::after,
.switch:has(input:checked) .switch-ui::after {
  transform: translateX(var(--gtp-switch-travel));
}

/* ── Dropdown menu (actions and field selects) ───────────────────────────── */

.dropdown {
  position: relative;
  display: inline-block;
  scroll-margin: var(--gtp-dropdown-viewport-pad);
}

.dropdown-field {
  display: block;
  width: 100%;
  max-width: var(--gtp-measure);
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-spacing-small);
  width: 100%;
  min-height: var(--gtp-chrome-control-size);
  padding: 0.7rem 1rem;
  border: var(--gtp-border-width) solid var(--gtp-border);
  border-radius: var(--gtp-radius);
  background: var(--gtp-surface);
  color: var(--gtp-text-primary);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.dropdown-trigger:hover {
  border-color: var(--sl-color-primary-300);
}

.dropdown.is-open .dropdown-trigger,
.dropdown-trigger:focus,
.dropdown-trigger:focus-visible {
  outline: none;
  border-color: var(--sl-color-primary-700);
  box-shadow: none;
}

.dropdown-trigger .gtp-icon,
.dropdown > .btn .gtp-icon {
  flex-shrink: 0;
  color: var(--gtp-text-secondary);
  transition: transform var(--gtp-transition-md);
}

.dropdown.is-open .dropdown-trigger .gtp-icon,
.dropdown.is-open > .btn .gtp-icon {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  z-index: var(--sl-z-index-dropdown);
  top: calc(100% + var(--gtp-spacing-tight));
  left: 0;
  min-width: 16rem;
  max-height: min(24rem, calc(100dvh - 2 * var(--gtp-dropdown-viewport-pad)));
  margin: 0;
  padding: var(--sl-spacing-x-small);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--gtp-surface);
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius-card);
  box-shadow: var(--gtp-dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.4rem);
  transition:
    opacity var(--gtp-transition-md),
    transform var(--gtp-transition-md),
    visibility var(--gtp-transition-md);
}

.dropdown-field .dropdown-menu {
  width: 100%;
  min-width: 0;
}

.dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.dropdown-menu[hidden] {
  display: none;
}

.dropdown-menu button,
.dropdown-menu a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sl-spacing-small);
  min-height: var(--gtp-chrome-control-size);
  padding: 0 var(--sl-spacing-medium);
  border: 0;
  border-radius: var(--gtp-radius-inner);
  background: transparent;
  color: var(--gtp-text-primary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-menu [role="option"] {
  justify-content: space-between;
}

.dropdown-menu button > span,
.dropdown-menu a > span {
  display: flex;
  align-items: center;
  gap: var(--sl-spacing-small);
  min-width: 0;
}

.dropdown-menu button:hover,
.dropdown-menu a:hover,
.dropdown-menu button:focus,
.dropdown-menu button:focus-visible,
.dropdown-menu a:focus,
.dropdown-menu a:focus-visible,
.dropdown-menu [role="option"][aria-selected="true"] {
  outline: none;
  background: var(--sl-color-neutral-50);
  box-shadow: none;
}

.dropdown-check {
  flex-shrink: 0;
  opacity: 0;
  color: var(--sl-color-primary-700);
}

.dropdown-menu [role="option"][aria-selected="true"] .dropdown-check {
  opacity: 1;
}

.dropdown-menu .is-danger {
  color: var(--sl-color-danger-700);
}

.dropdown-sep {
  height: 0;
  margin: var(--sl-spacing-2x-small) 0;
  border: 0;
  border-top: var(--gtp-border-width-thin) solid var(--gtp-border-soft);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sl-spacing-medium);
  margin-bottom: var(--gtp-spacing-stack);
}

.card-head h2,
.card-head h3 {
  margin: 0;
  font-size: var(--gtp-font-size-title);
  font-weight: var(--sl-font-weight-semibold);
}

.card-head .subtitle {
  margin: var(--gtp-spacing-tight) 0 0;
  font-size: var(--gtp-font-size-subtitle);
  color: var(--gtp-text-secondary);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--gtp-card-min-width)), 1fr)
  );
  gap: var(--gtp-spacing-section);
  min-width: 0;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gtp-spacing-tight);
  box-sizing: border-box;
  min-height: var(--gtp-chrome-control-size-sm);
  padding: 0.35rem 0.95rem;
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius-tag);
  background: var(--sl-color-neutral-50);
  color: var(--gtp-text-primary);
  font-size: var(--sl-font-size-medium);
  font-weight: var(--sl-font-weight-medium);
  line-height: 1;
}

.tag-success {
  border-color: var(--sl-color-success-200);
  background: var(--sl-color-success-50);
  color: var(--gtp-color-success-text);
}

.tag-warning {
  border-color: var(--sl-color-warning-200);
  background: var(--sl-color-warning-50);
  color: var(--gtp-color-warning-text);
}

.tag-danger {
  border-color: var(--sl-color-danger-200);
  background: var(--sl-color-danger-50);
  color: var(--sl-color-danger-700);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gtp-tag-gap);
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sl-spacing-small);
  padding: var(--gtp-card-padding);
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius);
  background: var(--sl-color-neutral-50);
  color: var(--gtp-text-primary);
}

.alert .gtp-icon {
  margin-top: 0.15rem;
  color: var(--sl-color-primary-700);
}

.alert-title {
  margin: 0 0 var(--gtp-spacing-tight);
  font-weight: var(--sl-font-weight-semibold);
}

.alert p {
  margin: 0;
}

.alert-success {
  border-color: var(--sl-color-success-200);
  background: var(--sl-color-success-50);
}

.alert-success .gtp-icon {
  color: var(--gtp-color-success-text);
}

.alert-warning {
  border-color: var(--sl-color-warning-200);
  background: var(--sl-color-warning-50);
}

.alert-warning .gtp-icon {
  color: var(--gtp-color-warning-text);
}

.alert-danger {
  border-color: var(--sl-color-danger-200);
  background: var(--sl-color-danger-50);
}

.alert-danger .gtp-icon {
  color: var(--sl-color-danger-700);
}

/* ── Toast ───────────────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  z-index: var(--sl-z-index-toast);
  right: max(var(--gtp-chrome-inset), env(safe-area-inset-right, 0px));
  bottom: max(var(--gtp-chrome-inset), env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--gtp-spacing-tight);
  width: min(var(--gtp-toast-max-width), calc(100vw - 2 * var(--gtp-chrome-inset)));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: var(--sl-spacing-small) var(--sl-spacing-medium);
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius);
  background: var(--gtp-surface);
  box-shadow: var(--gtp-toast-shadow);
}

/* ── Dialog ──────────────────────────────────────────────────────────────── */

.dialog {
  width: calc(100% - (2 * var(--gtp-chrome-inset)));
  max-width: var(--gtp-modal-max-width);
  margin: auto;
  padding: 0;
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius-dialog);
  background: var(--gtp-surface);
  color: inherit;
  box-shadow: var(--gtp-modal-shadow);
  opacity: 0;
  transform: translateY(0.6rem) scale(0.98);
  transition:
    opacity var(--gtp-transition-slow),
    transform var(--gtp-transition-slow),
    overlay var(--gtp-transition-slow) allow-discrete,
    display var(--gtp-transition-slow) allow-discrete;
}

.dialog[open].is-shown {
  opacity: 1;
  transform: none;
}

.dialog[open].is-leaving {
  opacity: 0;
  transform: translateY(0.4rem) scale(0.98);
}

.dialog::backdrop {
  background: var(--gtp-overlay-bg);
  backdrop-filter: blur(var(--gtp-overlay-blur));
  opacity: 0;
  transition:
    opacity var(--gtp-transition-slow),
    overlay var(--gtp-transition-slow) allow-discrete,
    display var(--gtp-transition-slow) allow-discrete;
}

.dialog[open].is-shown::backdrop {
  opacity: 1;
}

.dialog[open].is-leaving::backdrop {
  opacity: 0;
}

@starting-style {
  .dialog[open].is-shown {
    opacity: 0;
    transform: translateY(0.6rem) scale(0.98);
  }

  .dialog[open].is-shown::backdrop {
    opacity: 0;
  }
}

.dialog-body {
  padding: var(--gtp-card-padding);
}

.dialog-body h2 {
  margin: 0;
  font-size: var(--gtp-font-size-title);
  font-weight: var(--sl-font-weight-semibold);
}

.dialog-body .lede,
.dialog-body p {
  margin: var(--gtp-spacing-stack) 0 0;
}

.dialog-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sl-spacing-medium);
  padding: var(--sl-spacing-medium) var(--gtp-card-padding) var(--gtp-card-padding);
}

.dialog-body .card-head {
  margin-bottom: var(--gtp-spacing-stack);
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 var(--gtp-spacing-form-gap);
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: var(--gtp-border-width-thin) solid var(--gtp-border);
}

.tabs-ink {
  position: absolute;
  z-index: 1;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  flex: none;
  width: 0;
  height: 2px;
  margin: 0;
  padding: 0;
  background: var(--sl-color-primary-800);
  border-radius: 1px 1px 0 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, width;
  transition:
    transform var(--gtp-transition-slow),
    width var(--gtp-transition-slow);
}

.tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: var(--gtp-chrome-control-size);
  padding: 0 var(--sl-spacing-medium);
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--gtp-text-secondary);
  font: inherit;
  font-weight: var(--sl-font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: color var(--gtp-transition-md);
}

.tabs [role="tab"]:hover {
  color: var(--gtp-text-primary);
}

.tabs [role="tab"][aria-selected="true"] {
  color: var(--gtp-text-primary);
}

.tabs [role="tab"]:focus,
.tabs [role="tab"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.tab-panels {
  position: relative;
  min-width: 0;
}

.tab-panel {
  min-width: 0;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--gtp-transition-md),
    transform var(--gtp-transition-md);
}

.tab-panel.is-entering,
.tab-panel.is-leaving {
  opacity: 0;
  transform: translateY(0.35rem);
}

.tab-panel[hidden] {
  display: none;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sl-font-size-medium);
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: middle;
  padding: var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0;
  border-bottom: var(--gtp-border-width-thin) solid var(--gtp-border);
}

.data-table th {
  font-weight: var(--sl-font-weight-semibold);
  color: var(--gtp-text-primary);
}

.data-table td {
  color: var(--gtp-text-primary);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ── List rows (each row is a card) ──────────────────────────────────────── */

.item-list > li:not(.item-row) {
  display: flex;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-spacing-medium);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--gtp-card-padding);
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius-card);
  background: var(--gtp-surface);
  box-shadow: var(--gtp-card-shadow);
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--gtp-transition-md),
    border-color var(--gtp-transition-md);
}

a.item-row:hover,
a.item-row:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--sl-color-primary-50) 55%, var(--gtp-surface));
  border-color: var(--sl-color-primary-200);
}

.item-row-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.item-row-title {
  margin: 0;
  font-weight: var(--sl-font-weight-medium);
}

.item-row-meta {
  margin: var(--gtp-spacing-tight) 0 0;
  color: var(--gtp-text-secondary);
  font-size: var(--sl-font-size-medium);
}

.item-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  gap: var(--sl-spacing-x-small);
}

/* ── Empty / error ───────────────────────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gtp-spacing-stack);
  padding: var(--gtp-card-padding) 0;
}

.empty p {
  margin: 0;
  max-width: var(--gtp-measure);
  color: var(--gtp-text-secondary);
}

.error-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gtp-spacing-stack);
}

.error-block p {
  margin: 0;
  max-width: var(--gtp-measure);
}

/* ── Media (photos, video, placeholders) ─────────────────────────────────── */

.media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--gtp-media-min-height);
  overflow: hidden;
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius-card);
  background: var(--sl-color-neutral-100);
  color: var(--gtp-text-secondary);
}

.media--wide {
  aspect-ratio: 16 / 10;
}

.media--photo {
  aspect-ratio: 4 / 3;
}

.media--square {
  aspect-ratio: 1;
}

.media--portrait {
  aspect-ratio: 4 / 5;
}

.media--avatar {
  width: var(--gtp-avatar-size);
  height: var(--gtp-avatar-size);
  min-height: 0;
  aspect-ratio: 1;
  border-radius: var(--gtp-radius-circle);
  flex-shrink: 0;
}

.media img,
.media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.media--contain img,
.media--contain video {
  object-fit: contain;
}

.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gtp-spacing-tight);
  padding: var(--gtp-spacing-stack);
  text-align: center;
}

.media-placeholder span {
  font-size: var(--gtp-font-size-overline);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: var(--gtp-letter-spacing-overline);
  text-transform: uppercase;
}

.media-block {
  display: flex;
  flex-direction: column;
  gap: var(--gtp-spacing-tight);
  margin: 0;
  min-width: 0;
}

.media-caption {
  margin: 0;
  font-size: var(--sl-font-size-medium);
  color: var(--gtp-text-secondary);
}

.media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gtp-spacing-form-gap);
  min-width: 0;
}

@media (min-width: 640px) {
  .media-grid.cols-2,
  .media-grid.cols-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .media-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card > .media:first-child {
  width: calc(100% + (2 * var(--gtp-card-padding)));
  margin: calc(-1 * var(--gtp-card-padding)) calc(-1 * var(--gtp-card-padding))
    var(--gtp-spacing-stack);
  border: 0;
  border-bottom: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: 0;
}

/* ── Map frame (spinner lives inside this box) ───────────────────────────── */

.map-frame {
  position: relative;
  width: 100%;
  height: var(--gtp-map-height-compact);
  min-height: var(--gtp-map-height-compact);
  overflow: hidden;
  border: var(--gtp-border-width-thin) solid var(--gtp-border);
  border-radius: var(--gtp-radius-card);
  background: var(--sl-color-neutral-50);
}

@media (min-width: 768px) {
  .map-frame {
    height: var(--gtp-map-height);
    min-height: var(--gtp-map-height);
  }
}

/* ── Keyboard focus (:focus-visible only) ────────────────────────────────── */
/* Always visible; never an outline, ring, or glow. Text controls underline   */
/* their label. Boxes and icon-only controls take the field focus border.    */

a:not(.item-row):focus-visible {
  text-decoration-line: underline;
}

.btn:focus-visible,
.tabs [role="tab"]:focus-visible,
.dropdown-menu button:focus-visible,
.dropdown-menu a:focus-visible,
.app-sidebar-nav a:focus-visible,
.lang-trigger:focus-visible,
.switch:has(input:focus-visible),
.choice:has(input:focus-visible),
sl-button::part(base):focus-visible,
sl-tab::part(base):focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.tabs [role="tab"]:focus-visible,
sl-tab::part(base):focus-visible {
  color: var(--gtp-text-primary);
}

.text-link:focus-visible {
  color: var(--sl-color-primary-800);
  text-decoration-thickness: 2px;
}

.legal-links a:focus-visible {
  text-decoration-color: currentColor;
}

.btn-icon:focus-visible,
.nav-toggle:focus-visible,
a.item-row:focus-visible,
.dropzone:has(.dropzone-input:focus-visible) {
  border-color: var(--sl-color-primary-700);
}

.btn-icon-danger:focus-visible {
  border-color: var(--sl-color-danger-700);
}

.app-sidebar-brand:focus-visible {
  border-bottom-color: var(--sl-color-primary-700);
}

.footer-socials a:focus-visible {
  box-shadow: inset 0 0 0 var(--gtp-border-width) currentColor;
}

input[type="checkbox"]:not(.switch input):focus-visible {
  box-shadow: inset 0 0 0 var(--gtp-border-width) var(--gtp-text-primary);
}

.footer-wordmark:focus-visible {
  position: relative;
}

.footer-wordmark:focus-visible::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .dropzone,
  .switch-ui,
  .switch-ui::after,
  input[type="checkbox"],
  input[type="checkbox"]::after,
  .tabs [role="tab"],
  .tabs-ink,
  .tab-panel,
  .choice input[type="radio"],
  .choice input[type="radio"]::after,
  .dropdown-menu,
  .dropdown-trigger .gtp-icon,
  .dropdown > .btn .gtp-icon,
  .item-row,
  .dialog,
  .dialog::backdrop {
    transition: none;
    animation: none;
  }
}

@media print {
  .dropdown-menu,
  .toast-stack,
  .dialog {
    display: none !important;
  }
}