/* Shared controls. Load after page styles so the same field behaves everywhere. */
.ip-theme-switching *, .ip-theme-switching *::before, .ip-theme-switching *::after { transition-duration:0s !important; transition-delay:0s !important; }
.ip-workspace-body { --ip-workspace-gutter: clamp(20px, 2.2vw, 36px); }
.ip-workspace-body .ip-shell__content { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 32px var(--ip-workspace-gutter) 72px; }
.ip-workspace-body .ip-workspace-topbar { padding-inline: var(--ip-workspace-gutter); }
.ip-workspace-body .ip-profile-account-layout { max-width: none; }
.ip-workspace-body .ip-profile-account-layout > .ip-profile-form { box-sizing: border-box; width: 100%; max-width: none; margin: 0; }
.ip-preview .ip-profile-section > .ip-form-field__hint { margin-bottom: 16px; }
.ip-preview .ip-profile-section > .ip-form-field + .ip-profile-fields-grid { margin-top: 20px; }
.ip-workspace-body :is(.ip-workspace-empty, .ip-profile-empty) { box-sizing: border-box; width: 100%; max-width: none; margin-inline: 0; text-align: start; justify-items: start; }
.ip-workspace-body :is(.ip-workspace-empty, .ip-profile-empty) > p { max-width: 70ch; margin-inline: 0; }
.ip-workspace-home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 24px; align-items: stretch; }
.ip-preview .ip-workspace-home-card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(24px, 2.2vw, 36px); text-align: start; }
.ip-preview .ip-workspace-home-card h2 { margin: 5px 0 0; font-size: clamp(1.125rem, 1.5vw, 1.5rem); line-height: 1.3; }
.ip-preview .ip-workspace-home-card p { max-width: 62ch; margin: 0; color: var(--ip-color-text-muted); }
.ip-preview .ip-workspace-home-card > .ip-button { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; }
.ip-workspace-home-card__icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--ip-color-action) 10%, var(--ip-color-surface)); color: var(--ip-color-action); }
.ip-workspace-home-card__icon .ip-icon { width: 24px; height: 24px; }
.ip-preview [hidden]:not([hidden="until-found"]) { display: none !important; }
.ip-preview .ip-form-field label,
.ip-preview .ip-form-field--consent label span { color: var(--ip-color-text); }
.ip-preview :is(.ip-collection-dialog__header, .ip-gallery-dialog__header, .ip-share-dialog__header) > button {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
}
/* Dialog dismissal stays after the title and any action menu. */
.ip-preview :is(.ip-collection-dialog__header, .ip-gallery-dialog__header, .ip-share-dialog__header, .ip-vol-apply-dialog__header) > button {
  order: 10;
  margin-inline-start: auto;
}
.ip-preview :is(.ip-collection-dialog__header, .ip-gallery-dialog__header, .ip-share-dialog__header) h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ip-preview :is(input.ip-input[type], input.ip-input:not([type]), select.ip-input, textarea.ip-input) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--ip-input-height);
  padding: var(--ip-input-padding);
  border: 1px solid var(--ip-color-border-strong);
  border-radius: var(--ip-input-radius);
  background: var(--ip-color-surface);
  color: var(--ip-color-text);
  font: 400 1rem/1.5 var(--ip-font-family);
  box-shadow: none;
  transition: border-color var(--ip-duration-fast) var(--ip-ease), box-shadow var(--ip-duration-fast) var(--ip-ease), background-color var(--ip-duration-fast) var(--ip-ease);
}
.ip-preview input.ip-input.ip-input--title { font-weight: var(--ip-input-title-weight); }
.ip-preview .ip-publications-search input.ip-input { padding-inline-start: 40px; }
.ip-preview textarea.ip-input { resize: vertical; min-height: 112px; }
.ip-preview select.ip-input { padding-inline-end: 32px; }
.ip-preview select.ip-input[multiple] { min-height: 144px; }
.ip-preview .ip-input::placeholder { color: var(--ip-color-text-muted); opacity: 1; }
.ip-preview :is(input.ip-input, select.ip-input, textarea.ip-input):focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--ip-color-focus);
  box-shadow: var(--ip-focus-ring);
}
.ip-preview .ip-input.ip-input[aria-invalid="true"] { border-color: var(--ip-color-danger); }
.ip-preview .ip-input.ip-input:disabled, .ip-preview .ip-input.ip-input[readonly] {
  background: var(--ip-color-surface-subtle);
  color: var(--ip-color-text-muted);
}
.ip-preview .ip-input:disabled { cursor: not-allowed; }
.ip-preview .ip-button {
  min-height: var(--ip-control-target);
  transition: background-color var(--ip-duration-fast) var(--ip-ease), border-color var(--ip-duration-fast) var(--ip-ease), box-shadow var(--ip-duration-fast) var(--ip-ease), transform var(--ip-duration-fast) var(--ip-ease);
}
.ip-preview .ip-button:active:not(:disabled) { transform: scale(.98); }
.ip-preview :is(.ip-button, .ip-profile-icon-button, .ip-profile-add-slot):focus-visible {
  outline: 2px solid var(--ip-color-focus); outline-offset: 3px;
}
.ip-preview :is(.ip-profile-icon-button, .ip-profile-add-slot) {
  min-width: var(--ip-control-target); min-height: var(--ip-control-target);
}
.ip-preview .ip-profile-media-item img { animation: ip-media-enter var(--ip-duration-normal) var(--ip-ease); }
@keyframes ip-media-enter { from { opacity: .35; } to { opacity: 1; } }
.ip-preview .ip-profile-media-add-tile:focus-within, .ip-preview .ip-profile-media-upload:focus-within { outline: 2px solid var(--ip-color-focus); outline-offset: 3px; }
.ip-preview .ip-profile-switch { min-height: var(--ip-control-target); cursor: pointer; }
.ip-preview .ip-profile-switch input:focus-visible + .ip-profile-switch__control {
  outline: 2px solid var(--ip-color-focus); outline-offset: 3px;
}
.ip-preview .ip-profile-switch__control { transition: background-color var(--ip-duration-fast) var(--ip-ease), border-color var(--ip-duration-fast) var(--ip-ease); }
.ip-preview .ip-profile-switch__control::after { transition: transform var(--ip-duration-normal) var(--ip-ease); }
.ip-preview .ip-profile-switch:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.ip-preview .ip-publication-toggle { width: var(--ip-switch-width); min-width: var(--ip-switch-width); }
.ip-preview .ip-publication-toggle::before { inset: 7px 0; height: var(--ip-switch-height); box-sizing: border-box; background: var(--ip-color-border-strong); border-color: transparent; }
.ip-preview .ip-publication-toggle > span { top: 10px; left: 3px; width: var(--ip-switch-thumb); height: var(--ip-switch-thumb); background: var(--ip-white); }
.ip-preview .ip-publication-toggle.is-checked::before { background: var(--ip-color-action); }
.ip-preview .ip-publication-toggle.is-checked > span { transform: translateX(var(--ip-switch-travel)); }
.ip-preview .ip-visibility-toggle {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  min-height: var(--ip-input-height);
  min-width: var(--ip-visibility-width);
  gap: 2px;
  padding: 0;
  align-self: start;
  margin-top: 28px;
  justify-content: center;
  justify-self: end;
}
.ip-preview .ip-profile-switch .ip-profile-switch__control {
  box-sizing: border-box;
  width: var(--ip-switch-width);
  height: var(--ip-switch-height);
  background: var(--ip-color-border-strong);
  border-color: transparent;
}
.ip-preview .ip-profile-switch .ip-profile-switch__control::after {
  top: 2px;
  left: 2px;
  width: var(--ip-switch-thumb);
  height: var(--ip-switch-thumb);
  background: var(--ip-white);
}
.ip-preview .ip-profile-switch input[type="checkbox"]:checked + .ip-profile-switch__control { background: var(--ip-color-action); border-color: transparent; }
.ip-preview .ip-profile-switch input[type="checkbox"]:checked + .ip-profile-switch__control::after { transform: translateX(var(--ip-switch-travel)); }
.ip-preview .ip-contact-row,
.ip-preview .ip-profile-contact-item { display: grid; grid-template-columns: minmax(0, 1fr) var(--ip-visibility-width); align-items: start; gap: 12px; }
.ip-preview :is(.ip-contact-row, .ip-profile-contact-item, .ip-profile-repeater-row:has(.ip-visibility-toggle)) .ip-form-field > label { display: block; margin: 0 0 8px; font-size: .875rem; font-weight: 600; line-height: 20px; }
.ip-preview :is(.ip-contact-row, .ip-profile-contact-item, .ip-profile-repeater-row:has(.ip-visibility-toggle)) .ip-form-field { display: block; min-width: 0; margin: 0; }
.ip-preview .ip-contact-row + .ip-contact-row { margin-top: 20px; }
.ip-preview .ip-profile-repeater-row:has(.ip-visibility-toggle) { grid-template-columns: minmax(120px, .7fr) minmax(160px, 1fr) var(--ip-visibility-width) 44px; }
.ip-preview .ip-profile-repeater-row .ip-visibility-toggle { align-self: end; margin-top: 0; }
.ip-preview .ip-profile-form.ip-profile-studio__editor { display: grid; gap: var(--ip-space-5); width: 100%; min-width: 0; max-width: none; margin: 0; }
.ip-preview :is(.ip-form-field__hint, .ip-form-field__error) { font-size: .8125rem; line-height: 1.5; }
.ip-preview .ip-field-error:not([hidden]) { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; color: var(--ip-color-danger); }
.ip-preview .ip-field-error:not([hidden])::before { content: "!"; display: inline-grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.ip-preview .ip-input.ip-input[aria-invalid="true"]:focus { outline-color: var(--ip-color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ip-color-danger) 16%, transparent); }
.ip-preview .ip-form-state { color: var(--ip-color-text-muted); font-size: .875rem; margin: 8px 0 16px; }
.ip-preview .ip-form-state[data-dirty="true"] { color: var(--ip-color-link); }
.ip-preview .ip-upload-queue:empty { display: none; }
.ip-preview .ip-upload-queue { display: grid; gap: 8px; margin-block: 12px; }
.ip-preview .ip-upload-job { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid var(--ip-color-border); border-radius: var(--ip-radius-md); font-size: .875rem; }
.ip-preview .ip-upload-job img { border-radius: var(--ip-radius-sm); object-fit: cover; grid-row: span 2; }
.ip-preview .ip-upload-job > span { overflow-wrap: anywhere; }
.ip-preview .ip-upload-job__state { color: var(--ip-color-text-muted); grid-column: 2; font-size: .8125rem; }
.ip-preview .ip-upload-job button { grid-column: 3; grid-row: 1 / 3; }
.ip-preview .ip-upload-job[data-state="error"] .ip-upload-job__state { color: var(--ip-color-danger); }
.ip-preview.ip-confirm-dialog {
  min-height: 0; margin: auto;
  width: min(440px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100dvh - 32px);
  padding: 28px; border: 1px solid var(--ip-color-border); border-radius: var(--ip-radius-xl);
  background: var(--ip-color-surface); color: var(--ip-color-text); box-shadow: var(--ip-shadow-card);
}
.ip-confirm-dialog::backdrop { background: rgb(21 19 26 / .52); }
.ip-confirm-dialog[open] { animation: ip-dialog-enter var(--ip-duration-normal) var(--ip-ease); }
.ip-confirm-dialog h2 { font-size: 1.25rem; line-height: 1.4; margin: 0 0 12px; }
.ip-confirm-dialog p { color: var(--ip-color-text-muted); line-height: 1.6; margin: 0 0 24px; }
.ip-confirm-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
@keyframes ip-dialog-enter { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .ip-preview .ip-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--ip-shadow-sm); }
  .ip-preview .ip-button:active:not(:disabled) { transform: scale(.98); }
  .ip-preview .ip-input:hover:not(:disabled):not(:focus) { border-color: var(--ip-color-text-muted); }
}
@media (max-width: 480px) {
  .ip-preview .ip-site-header__inner { width: calc(100% - 24px); gap: 6px; }
  .ip-preview .ip-site-header .ip-brand { width: 70px; }
  .ip-preview .ip-site-header .ip-brand__logo { height: 42px; }
  .ip-preview .ip-site-header .ip-header-actions { gap: 4px; }
  .ip-preview .ip-site-header .ip-header-auth-cta { padding-inline: 12px; font-size: .875rem; }
  .ip-preview .ip-site-header .ip-header-auth-link { font-size: .875rem; }
  .ip-preview .ip-site-header .ip-header-user { display: none; }
  .ip-preview :is(.ip-profile-card, .ip-managed-form > .ip-profile-fieldset) { padding: 16px; border-radius: 20px; }
  .ip-preview .ip-upload-job { grid-template-columns: 48px minmax(0, 1fr); }
  .ip-preview .ip-upload-job button { grid-row: auto; grid-column: 2; justify-self: start; }
}
@media (max-width: 900px) {
  .ip-workspace-home-grid { grid-template-columns: minmax(0, 1fr); }
  .ip-preview :is(.ip-profile-studio__aside, .ip-managed-studio__aside, .ip-profile-security-note, .ip-group-status) { grid-row: auto; }
}
@media (max-width: 760px) {
  .ip-workspace-body { --ip-workspace-gutter: 16px; }
  .ip-workspace-body .ip-shell__content { padding-top: 24px; }
  .ip-preview .ip-workspace-home-card > .ip-button { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .ip-preview .ip-profile-privacy-row { flex-direction: row; align-items: center; gap: 16px; }
  .ip-preview .ip-profile-privacy-row > span:first-child { min-width: 0; }
  .ip-preview .ip-profile-privacy-row > .ip-profile-switch { flex-shrink: 0; }
  .ip-preview .ip-profile-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); box-sizing: border-box; overflow: visible; }
  .ip-preview .ip-profile-tabs:has(> :nth-child(3)) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .ip-preview .ip-profile-tabs__button { min-width: 0; min-height: 52px; padding: 8px 4px; font-size: .8125rem; line-height: 1.4; gap: 4px; }
  .ip-preview .ip-profile-tabs__button .ip-icon { display: none; }
  .ip-preview .ip-card-track--related { grid-auto-columns: 84%; }
  .ip-preview .ip-publications-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-preview .ip-workspace-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ip-preview .ip-workspace-kpi { flex-direction: column; gap: 12px; padding: 16px; }
  .ip-preview .ip-workspace-kpi em { white-space: normal; overflow-wrap: anywhere; }
  .ip-preview .ip-profile-repeater-row:has(.ip-visibility-toggle) {
    grid-template-columns: minmax(0, 1fr) var(--ip-visibility-width);
    grid-template-areas: "channel remove" "value visibility";
    padding: 16px 0;
    gap: 16px 12px;
    border: 0;
    border-bottom: 1px solid var(--ip-color-border);
    border-radius: 0;
    background: transparent;
  }
  .ip-preview .ip-profile-repeater-row:has(.ip-visibility-toggle):first-child { padding-top: 0; }
  .ip-preview .ip-profile-repeater-row:has(.ip-visibility-toggle) .ip-profile-repeater-row__type { grid-area: channel; }
  .ip-preview .ip-profile-repeater-row:has(.ip-visibility-toggle) .ip-profile-repeater-row__value { grid-area: value; }
  .ip-preview .ip-profile-repeater-row:has(.ip-visibility-toggle) .ip-profile-icon-button { grid-area: remove; justify-self: center; align-self: end; }
  .ip-preview .ip-profile-repeater-row .ip-visibility-toggle { grid-area: visibility; align-self: start; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-preview *, .ip-preview *::before, .ip-preview *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ip-preview .ip-button:hover, .ip-preview .ip-button:active { transform: none; }
}

/* Shared switch used by profiles, teams and public application forms. */
.ip-profile-switch {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.ip-profile-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ip-profile-switch__control {
  position: relative;
  width: 44px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--ip-color-border-strong);
  border-radius: 999px;
  background: var(--ip-color-surface-related);
  transition: background-color var(--ip-duration-fast), border-color var(--ip-duration-fast);
}

.ip-profile-switch__control::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(34 34 34 / 0.24);
  content: "";
  transition: transform var(--ip-duration-fast) var(--ip-ease);
}

.ip-profile-switch input[type="checkbox"]:checked + .ip-profile-switch__control {
  border-color: var(--ip-color-action);
  background: var(--ip-color-action);
}

.ip-profile-switch input[type="checkbox"]:checked + .ip-profile-switch__control::after {
  transform: translateX(18px);
}


.ip-profile-switch input:focus-visible + .ip-profile-switch__control { outline: 3px solid var(--ip-color-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ip-profile-switch__control, .ip-profile-switch__control::after { transition: none; } }

/* Shared, editable first-contact forms across all listing types. */
.ip-message-form { display: grid; gap: 12px; min-width: 0; }
.ip-message-form label { font-weight: 700; color: var(--ip-color-text); }
.ip-message-form textarea { width: 100%; min-height: 116px; resize: vertical; font-size: 16px; line-height: 1.6; }
.ip-message-form [role="status"]:empty { display: none; }
.ip-message-form [hidden] { display: none !important; }
.ip-message-form[aria-busy="true"] button { opacity: .7; cursor: progress; }
.ip-participation-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; }
.ip-participation-consent input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--ip-color-action); }
[data-participation-rules] { white-space: pre-wrap; }
[data-adoption-questions] { display: grid; gap: 16px; }

.ip-public-group-members { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.ip-inline-confirmation .ip-message-form, .ip-inline-confirmation.ip-message-form { min-width:0; width:100%; }

/* Compact application dialogs share centered gutters at every viewport. */
.ip-preview .ip-adoption-dialog {
  width: min(34rem, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow: auto;
  border-radius: 24px;
}
.ip-field-error:empty::before { content: none; }
.ip-adoption-dialog .ip-collection-dialog__header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ip-color-surface);
}
@media (max-width: 480px) {
 .ip-preview .ip-adoption-dialog__body { padding: 16px; }
 .ip-adoption-dialog .ip-collection-dialog__header { min-height: 68px; padding: 12px 16px; }
}

.ip-message-feedback { margin:0; color:var(--ip-color-text-muted); font-size:1rem; line-height:1.5; }
.ip-message-feedback.is-error { color:var(--ip-color-danger); }

.ip-preview .ip-adoption-filter { max-width: 360px; }

.ip-social-identity { display:inline-flex; align-items:center; gap:6px; color:var(--ip-color-text-muted); font-size:12px; }
.ip-social-identity select { max-width:18ch; min-height:36px; border:1px solid var(--ip-color-border); border-radius:8px; padding:6px 8px; color:var(--ip-color-text); background:var(--ip-color-surface); font:inherit; }
.ip-social-feedback { display:block; flex-basis:100%; font-size:12px; color:var(--ip-color-text-muted); }
.ip-social-feedback:empty { display:none; }
[data-social-favorite][aria-pressed="true"] { color:var(--ip-color-action); }
[data-social-favorite][aria-busy="true"] { opacity:.65; }
@media (pointer:coarse) { .ip-social-identity select { min-height:44px; font-size:16px; } }

/* One button shape across public pages and Gestión. Switch tracks retain their own geometry. */
.ip-preview :is(.ip-button,.ip-icon-button,.ip-header-icon,button:not([role="switch"]):not(.ip-theme-toggle)) {
  border-radius:var(--ip-button-radius)!important;
}

/* Transitions.dev recipes, retrieved 2026-09-13. Verbatim CSS; IslaPet adapters follow.
 * https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-dev
 * Desktop only by product decision. No runtime dependency. */
@media (min-width: 1024px) {

/* 05-menu-dropdown */
:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

/* 06-modal */
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

/* 16-tabs-sliding */
:root {
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(15, 15, 15, 0.8);
  --tabs-text-active: #0f0f0f;
  --tabs-bar-bg: #f1f1f1;
  --tabs-pill-bg: #ffffff;
}

/* The bar is just a flex container with padding for the pill
   to sit inside. Tabs sit on z-index: 1, the pill on z-index: 0,
   so labels read above the pill background. */
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}

/* The pill: width + transform are written inline by JS so
   the transition tweens between the previous and next
   measured positions. */
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-tab { transition: none !important; }
}

/* 21-accordion */
:root {
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* grid-template-rows 0fr → 1fr gives a clean height animation
   with no JS measurement; the inner element clips overflow. */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* Flip the chevron vertically to turn the "v" into a "^".
   scaleY(-1) about the centre passes through a flat line at
   the midpoint (same look as a `d:` path morph) but animates
   in every browser, unlike CSS `d:` morphing (Chromium only).
   The chevron path is symmetric about the 16x16 viewBox
   centre, so the flip lands exactly on the "^"; non-scaling
   -stroke keeps the stroke width constant through the flip. */
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron {
  transform: scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron {
    transition: none !important;
  }
}

/* 22-toast */
:root {
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-toast { transition: none !important; }
}

/* 23-like-button */
:root {
  --like-color: #f40051;
  --like-fill: 150ms;
  --like-pop: 350ms;
  --like-pop-ease: cubic-bezier(0.34, 1.96, 0.64, 1);
  --like-particle-dur: 600ms;
  --like-particle-dist: 20px;
  --like-particle-size: 2.5px;
  --like-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-like-heart { color: currentColor; transition: color var(--like-fill) var(--like-ease); }
.t-like-heart path {
  fill: transparent; stroke: currentColor;
  transition: fill var(--like-fill) var(--like-ease), stroke var(--like-fill) var(--like-ease);
}
.t-like[data-liked="true"] .t-like-heart { color: var(--like-color); }
.t-like[data-liked="true"] .t-like-heart path { fill: currentColor; }
/* Pop scale lives on an HTML wrapper, never the <svg> itself:
   transforming an inline SVG makes Chromium rasterise it at 1×
   (pixelated on hi-DPI). Wrapping keeps the vector crisp. */
.t-like[data-liked="true"] .t-like-icon { animation: t-like-pop var(--like-pop) var(--like-pop-ease); }
@keyframes t-like-pop { 0% { transform: scale(1); } 30% { transform: scale(0.82); } 100% { transform: scale(1); } }

/* Particle burst — 8 dots flung along per-particle vectors. */
.t-like-particles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; color: var(--like-color); }
.t-like-particles i {
  position: absolute;
  left: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  top: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  width: calc(var(--like-particle-size) * var(--psize, 1));
  height: calc(var(--like-particle-size) * var(--psize, 1));
  border-radius: 50%; background: currentColor; opacity: 0;
}
@keyframes t-like-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 1; transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6)); }
}
.t-like.is-bursting .t-like-particles i {
  animation: t-like-burst var(--pdur, var(--like-particle-dur)) ease-out var(--pdelay, 0ms) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .t-like-icon, .t-like-particles i { animation: none !important; }
}

/* 27-toggle */
:root {
  --toggle-dur: 350ms;
  --toggle-travel: 14.66px;
  --toggle-ov1: 1px;
  --toggle-ov2: 0px;
  --toggle-track: 0ms;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
}

.t-toggle { transition: background var(--toggle-track) var(--toggle-ease); }
.t-toggle-thumb { translate: 0 0; will-change: translate; }
.t-toggle[data-on="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }
.t-toggle.is-init[data-on="true"] .t-toggle-thumb { animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both; }
.t-toggle.is-init[data-on="false"] .t-toggle-thumb { animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both; }
@keyframes t-toggle-on {
  0% { translate: 0 0; }
  55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
  80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
  100% { translate: var(--toggle-travel) 0; }
}
@keyframes t-toggle-off {
  0% { translate: var(--toggle-travel) 0; }
  55% { translate: calc(0px - var(--toggle-ov1)) 0; }
  80% { translate: var(--toggle-ov2) 0; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-toggle-thumb { animation: none !important; }
}

/* 09-icon-swap */
:root {
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}

.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

}

/* IslaPet adapters: motion never changes the approved type scale, geometry or palette. */
@media (min-width:1024px) {
  html.ip-motion-ready {
    --dropdown-open-dur:250ms; --dropdown-close-dur:150ms;
    --modal-open-dur:250ms; --modal-close-dur:150ms;
    --tabs-text-muted:var(--ip-color-text-muted); --tabs-text-active:var(--ip-color-text);
    --tabs-bar-bg:var(--ip-color-surface-related); --tabs-pill-bg:var(--ip-color-surface);
    --like-color:var(--ip-color-action); --toggle-track:150ms;
  }
  html.ip-motion-ready dialog:is(.t-modal,.t-dropdown)[open],
  html.ip-motion-ready details > .t-dropdown,
  html.ip-motion-ready :is(.ip-home-search-panel,[data-search-menu]).t-dropdown { animation:none !important; }
  html.ip-motion-ready dialog:is(.t-modal,.t-dropdown) {
    transition:transform var(--modal-open-dur) var(--modal-ease),opacity var(--modal-open-dur) var(--modal-ease);
  }
  html.ip-motion-ready dialog:is(.t-modal,.t-dropdown).is-closing {
    transition-duration:var(--modal-close-dur); pointer-events:none;
  }
  html.ip-motion-ready dialog:is(.t-modal,.t-dropdown)::backdrop {
    opacity:0; transition:opacity var(--modal-close-dur) var(--modal-ease);
  }
  html.ip-motion-ready dialog:is(.t-modal,.t-dropdown).is-open::backdrop { opacity:1; transition-duration:var(--modal-open-dur); }
  html.ip-motion-ready :is(.t-modal,.t-dropdown,.t-tabs-pill,.t-toggle-thumb,.t-toast,.t-icon) { will-change:auto; }
  html.ip-motion-ready .t-tabs.ip-segmented { padding:4px; gap:4px; border-radius:12px; }
  html.ip-motion-ready .t-tabs.ip-view-switch { padding:3px; gap:4px; border-radius:12px; background:var(--ip-color-surface-subtle); }
  html.ip-motion-ready .t-tabs > .t-tab { height:auto; border-radius:8px; background:transparent; box-shadow:none; transition:color var(--tabs-dur) var(--tabs-ease); }
  html.ip-motion-ready .t-tabs > .t-tabs-pill { border-radius:8px; background:var(--ip-color-surface); box-shadow:var(--ip-shadow-sm); }
  html.ip-motion-ready .t-tabs.ip-view-switch > .t-tabs-pill { background:color-mix(in srgb,var(--ip-color-action) 9%,var(--ip-color-surface)); box-shadow:none; }
  html.ip-motion-ready .t-toggle { --toggle-travel:var(--ip-switch-travel); }
  html.ip-motion-ready :is(.ip-profile-switch__control,.ip-account-theme-switch).t-toggle::after { content:none; }
  html.ip-motion-ready .ip-profile-switch__control.t-toggle > .t-toggle-thumb {
    position:absolute; top:2px; left:2px; width:var(--ip-switch-thumb); height:var(--ip-switch-thumb);
    border-radius:50%; background:var(--ip-white); box-shadow:0 1px 3px #0002;
  }
  html.ip-motion-ready .ip-account-theme-switch.t-toggle { --toggle-travel:12px; }
  html.ip-motion-ready .ip-account-theme-switch.t-toggle > .t-toggle-thumb {
    position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002;
  }
  html.ip-motion-ready .ip-publication-toggle.t-toggle > .t-toggle-thumb { transform:none; transition:none; }
  html.ip-motion-ready .t-acc-panel-inner { min-height:0; }
  html.ip-motion-ready .t-acc[data-open="false"] .ip-home-faq__icon::after { transform:rotate(90deg); }
  html.ip-motion-ready .t-acc[data-open="true"] .ip-home-faq__icon::after { transform:rotate(0); }
  html.ip-motion-ready .t-acc .ip-home-faq__icon::after { transition:transform var(--acc-chevron) var(--acc-ease); }
  html.ip-motion-ready .t-acc[data-open="false"] .ip-hours-disclosure__chevron { transform:rotate(0); }
  html.ip-motion-ready .t-acc[data-open="true"] .ip-hours-disclosure__chevron { transform:rotate(180deg); }
  html.ip-motion-ready .t-like:not(.is-init) .t-like-icon { animation:none; }
  html.ip-motion-ready .t-like-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; }
  html.ip-motion-ready .t-like-icon > svg { width:20px; height:20px; }
  html.ip-motion-ready .t-like-heart { overflow:visible; }
  html.ip-motion-ready [data-toast].t-toast { transition:opacity var(--toast-close) var(--toast-ease),transform var(--toast-close) var(--toast-ease),filter var(--toast-close) var(--toast-ease); }
  html.ip-motion-ready [data-toast].t-toast.is-open { transition-duration:var(--toast-open); }
  html.ip-motion-ready .ip-workspace-theme-toggle.t-icon-swap .t-icon { display:grid; grid-area:1/1; }
  html.ip-motion-ready.ip-theme-switching .ip-workspace-theme-toggle.t-icon-swap .t-icon { transition-duration:var(--icon-swap-dur) !important; }
  html.ip-motion-ready :is(.ip-button,.ip-icon-button,.ip-home-button,.ip-home-menu-toggle) {
    transition:background-color 150ms var(--dropdown-ease),color 150ms var(--dropdown-ease),box-shadow 150ms var(--dropdown-ease),transform 150ms var(--dropdown-ease);
  }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  html.ip-motion-ready :is(.t-modal,.t-dropdown,.t-tabs-pill,.t-tab,.t-acc-panel,.t-acc-panel-inner,.t-icon,.t-toast),
  html.ip-motion-ready dialog::backdrop { transition:none !important; }
}
@media (max-width:1023px) {
  /* If a desktop window is narrowed, generated decoration must not change native layout. */
  .t-tabs-pill,.t-toggle-thumb:not(.ip-publication-toggle > span) { display:none; }
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference) {
  html.ip-motion-ready .ip-home-search-backdrop {
    opacity:1; transition:opacity 150ms var(--dropdown-ease),display 150ms allow-discrete;
  }
  html.ip-motion-ready .ip-home-search-backdrop[hidden] { opacity:0; pointer-events:none; }
  @starting-style { html.ip-motion-ready .ip-home-search-backdrop:not([hidden]) { opacity:0; } }
}

/* Shared authentication dialog: the mascot peeks over a single neutral card. */
.ip-auth-dialog { padding:0; border:0; background:transparent; color:var(--ip-color-text); width:440px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 24px); overflow:auto; font-family:var(--ip-font-family); }
html dialog.ip-auth-dialog::backdrop { background:rgb(0 0 0 / .76); backdrop-filter:blur(3px); }
.ip-auth-dialog__body { position:relative; padding:128px 6px 10px; }
.ip-auth-cat { z-index:1; position:absolute; width:150px; height:150px; object-fit:contain; top:0; left:calc(50% - 75px); pointer-events:none; }
.ip-auth-panel { position:relative; padding:38px 34px 30px; background:var(--ip-color-surface); border:1px solid var(--ip-color-border); border-radius:30px; box-shadow:0 0 0 5px color-mix(in srgb,var(--ip-color-surface) 60%,transparent),0 24px 65px rgb(0 0 0 / .22); }
.ip-auth-heading { text-align:center; margin:0 0 26px; }
.ip-auth-heading h2 { margin:0; font-size:27px; line-height:1.3; font-weight:750; letter-spacing:-.9px; color:var(--ip-color-text); outline:none; }
.ip-auth-heading p { margin:9px 0 0; font-size:14px; line-height:1.55; color:var(--ip-color-text-muted); }
.ip-auth-close,.ip-auth-back { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:var(--ip-color-text-muted); cursor:pointer; }
.ip-auth-back { right:auto; left:12px; }
.ip-auth-close:hover,.ip-auth-back:hover { background:var(--ip-color-surface-related); color:var(--ip-color-text); }
.ip-auth-close svg,.ip-auth-back svg { width:17px; height:17px; }
.ip-auth-google-button { display:flex; align-items:center; justify-content:center; position:relative; gap:14px; width:100%; height:50px; border:1px solid var(--ip-color-border-strong); border-radius:20px; background:var(--ip-color-surface-related); color:var(--ip-color-text); font:650 14px var(--ip-font-family); cursor:pointer; }
.ip-auth-google-button:hover { background:var(--ip-color-surface-subtle); }
.ip-auth-google-button svg { position:absolute; left:19px; }
.ip-auth-google { min-height:50px; display:grid; align-items:center; }
.ip-auth-google > div { display:flex; justify-content:center; }
.ip-auth-divider { display:flex; align-items:center; gap:14px; margin:23px 0 20px; color:var(--ip-color-text-muted); font-size:12px; }
.ip-auth-divider::before,.ip-auth-divider::after { content:''; height:1px; flex:1; background:var(--ip-color-border); }
.ip-auth-dialog-form { display:grid; gap:16px; }
.ip-auth-field { display:grid; gap:7px; min-width:0; }
.ip-auth-field label { color:var(--ip-color-text); font-size:13px; font-weight:650; }
html .ip-auth-dialog .ip-input { height:48px; min-height:48px; width:100%; box-sizing:border-box; background:var(--ip-color-surface-related); border:1px solid transparent; border-radius:14px; padding:0 14px; color:var(--ip-color-text); font:500 14px var(--ip-font-family); }
html .ip-auth-dialog .ip-input::placeholder { color:var(--ip-color-text-muted); opacity:1; }
html .ip-auth-dialog .ip-input:focus { outline:0; border-color:var(--ip-color-focus); box-shadow:var(--ip-focus-ring); }
html .ip-auth-dialog .ip-input[aria-invalid=true] { border-color:var(--ip-color-danger); }
.ip-auth-password { position:relative; }
.ip-auth-password .ip-input { padding-right:48px; }
.ip-auth-password button { display:grid; place-items:center; position:absolute; right:4px; top:4px; width:40px; height:40px; background:transparent; color:var(--ip-color-text-muted); border:0; border-radius:12px; cursor:pointer; }
.ip-auth-password button svg { width:19px; height:19px; }
.ip-auth-password button[aria-pressed=true] { color:var(--ip-color-text); background:var(--ip-color-surface-subtle); }
.ip-auth-options { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.ip-auth-options label { display:flex; align-items:center; gap:7px; color:var(--ip-color-text-muted); cursor:pointer; }
.ip-auth-options input { accent-color:var(--ip-color-action); width:15px; height:15px; margin:0; }
.ip-auth-options a { font-weight:650; color:var(--ip-color-text); text-decoration:none; }
.ip-auth-options a:hover { text-decoration:underline; }
.ip-auth-dialog .ip-auth-submit { gap:9px; height:48px; font-size:14px; font-weight:750; }
.ip-auth-dialog [hidden] { display:none!important; }
.ip-auth-error,.ip-auth-field small { color:var(--ip-color-danger); font-size:12px; line-height:1.5; margin:0; }
.ip-auth-footer { margin:26px 0 0; text-align:center; color:var(--ip-color-text-muted); font-size:12px; line-height:1.6; }
.ip-auth-footer button { background:transparent; border:0; color:var(--ip-color-link); font:700 12px var(--ip-font-family); padding:0 0 0 2px; cursor:pointer; }
.ip-auth-footer button:hover { text-decoration:underline; }
.ip-auth-types { display:grid; gap:12px; }
.ip-auth-type { display:flex; align-items:center; gap:15px; width:100%; padding:17px; text-align:left; color:var(--ip-color-text); background:var(--ip-color-surface-related); border:1px solid transparent; border-radius:18px; font-family:inherit; cursor:pointer; }
.ip-auth-type > svg { width:23px; height:23px; flex:none; color:var(--ip-color-brand); }
.ip-auth-type > svg:last-child { width:17px; height:17px; margin-left:auto; color:var(--ip-color-text-muted); }
.ip-auth-type strong,.ip-auth-type small { display:block; }
.ip-auth-type strong { font-size:14px; font-weight:700; }
.ip-auth-type small { color:var(--ip-color-text-muted); font-size:12px; margin-top:4px; }
.ip-auth-type:hover { border-color:var(--ip-color-border-strong); background:var(--ip-color-surface-subtle); }
.ip-auth-panel [data-auth-assisted] p { color:var(--ip-color-text-muted); font-size:14px; line-height:1.6; text-align:center; margin:0 0 20px; }
.ip-auth-spinner { width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ip-auth-spin .65s linear infinite; }
@keyframes ip-auth-spin { to { transform:rotate(360deg); } }
@media(min-width:1024px) and (prefers-reduced-motion:no-preference) {
    .ip-auth-type,.ip-auth-google-button,.ip-auth-close,.ip-auth-back { transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease; }
    .ip-auth-panel[data-auth-transition] > [data-auth-credentials],.ip-auth-panel[data-auth-transition] > [data-auth-chooser],.ip-auth-panel[data-auth-transition] > [data-auth-assisted] { animation:ip-auth-step 220ms cubic-bezier(.16,1,.3,1); }
    @keyframes ip-auth-step { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
}
@media(prefers-reduced-motion:reduce) { .ip-auth-spinner { animation:none; } }
.ip-message-location { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }