/* Themes-plugins foundation components (CONTRACT.md §6.1). Tokens only, logical properties. */

/* <x-locked> (handoff §8.13) */
.tp-locked--inline { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
.tp-locked__lock { flex-shrink: 0; margin-block-start: 2px; color: var(--text-tertiary); display: inline-flex; }
.tp-locked__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.tp-locked--inline .tp-locked__title { font-size: var(--text-sm); font-weight: var(--weight-medium, 500); color: var(--text); }
.tp-locked--inline .tp-locked__text { font-size: var(--text-xs); color: var(--text-secondary); text-wrap: pretty; }
.tp-locked__action { margin-block-start: var(--space-2); }
.tp-locked--page { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-4); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tp-locked--page .tp-locked__icon { width: 72px; height: 72px; display: grid; place-items: center; margin-block-end: var(--space-2); color: var(--text-tertiary); background: var(--bg-muted); border-radius: var(--radius-lg); }
.tp-locked--page .tp-locked__title { margin: 0; font-weight: var(--weight-semibold, 600); color: var(--text); }
.tp-locked--page .tp-locked__text { margin: 0; max-width: 44ch; font-size: var(--text-sm); color: var(--text-secondary); }
.tp-locked--page .mc-button { margin-block-start: var(--space-2); }
.tp-locked__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

.tp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tp-field-lock { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); }

/* <x-split-editor> (handoff §8.7) */
.tp-split { position: fixed; inset: 0; z-index: 40; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
.tp-split__bar { flex-shrink: 0; height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); border-block-end: 1px solid var(--border); background: var(--bg); position: relative; z-index: 5; }
.tp-split__exit { display: flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
.tp-split__exit:hover { background: var(--bg-hover); color: var(--text); }
.tp-split__divider { width: 1px; height: 20px; background: var(--border); }
.tp-split__devices { display: flex; gap: 2px; padding: 2px; background: var(--bg-muted); border-radius: var(--radius-md); }
.tp-split__devices button { width: 32px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; color: var(--text-secondary); cursor: pointer; }
.tp-split__devices button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm, none); }
.tp-split__status { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-split__spacer { flex: 1; }
.tp-split__body { flex: 1; min-height: 0; display: flex; }
.tp-split__options { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); border-inline-end: 1px solid var(--border); }
.tp-split__options-scroll { flex: 1; min-height: 0; overflow: auto; }
.tp-split__note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border); background: var(--bg-subtle); font-size: var(--text-xs); color: var(--text-secondary); }
.tp-split__footer { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border); background: var(--bg-subtle); }
/* The frame fills the area (foundation.js fit()): only the iframe scrolls, never the area around it. */
.tp-split__preview { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg-muted); overflow: hidden; position: relative; }
.tp-split__state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--space-6); color: var(--text-tertiary); font-size: var(--text-sm); }
.tp-split__state[hidden], .tp-split__frame[hidden] { display: none; }
.tp-split__error { display: flex; gap: var(--space-3); align-items: flex-start; max-width: 440px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--danger-subtle); color: var(--text); }
.tp-split__error > svg { flex-shrink: 0; margin-block-start: 3px; color: var(--danger); }
.tp-split__error > div { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.tp-split__error-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.tp-split__error-text { font-size: var(--text-sm); color: var(--text-secondary); }
.tp-split__frame { position: absolute; inset-block-start: var(--space-6); inset-inline-start: var(--space-6); display: flex; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface); }
.tp-split__frame iframe { flex: 1; width: 100%; height: 100%; border: 0; }
.tp-split__preview[aria-busy="true"] .tp-split__frame { opacity: .6; transition: opacity .15s; }
.tp-split__mobile-switch { display: none; }
@media (max-width: 1023px) { .tp-split__options { width: 320px; } }
@media (max-width: 639px) {
  .tp-split__desktop { display: none; }
  .tp-split__options { width: 100%; border-inline-end: 0; }
  .tp-split[data-view="options"] .tp-split__preview, .tp-split[data-view="preview"] .tp-split__options { display: none; }
  .tp-split__frame { inset-block-start: 0; border-radius: 0; box-shadow: none; }
  .tp-split__mobile-switch { flex-shrink: 0; display: flex; gap: 2px; margin: var(--space-2) var(--space-3); padding: 2px; background: var(--bg-muted); border-radius: var(--radius-md); }
  .tp-split__mobile-switch button { flex: 1; min-height: 44px; border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .tp-split__mobile-switch button[aria-selected="true"] { background: var(--surface); color: var(--text); }
}

/* <x-repeater> (handoff §4) */
.tp-repeater__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tp-repeater__item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.tp-repeater__summary { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-2); cursor: pointer; list-style: none; }
.tp-repeater__summary::-webkit-details-marker { display: none; }
.tp-repeater__handle { display: inline-flex; color: var(--text-tertiary); cursor: grab; }
.tp-repeater__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.tp-repeater__actions { display: flex; gap: 2px; }
.tp-repeater__fields { padding: var(--space-3); border-block-start: 1px solid var(--border); }
.tp-repeater__add { display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.tp-repeater[hidden], .v2-field[hidden] { display: none; }

/* <x-notifications> (handoff §7.1) */
.tp-notifications { position: relative; }
.tp-notifications__bell { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; }
.tp-notifications__bell:hover { background: var(--bg-hover); color: var(--text); }
.tp-notifications__dot { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }
.tp-notifications__panel { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 60; width: 360px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.tp-notifications__head { position: sticky; inset-block-start: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border); background: var(--surface-raised); }
.tp-notifications__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.tp-notifications__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border); color: var(--text); text-decoration: none; }
.tp-notifications__item:hover { background: var(--bg-hover); }
.tp-notifications__item.is-unread .tp-notifications__item-title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: var(--radius-full); background: var(--accent); vertical-align: middle; }
.tp-notifications__item-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.tp-notifications__item-text { font-size: var(--text-xs); color: var(--text-secondary); }
.tp-notifications__item-date { font-size: var(--text-xs); color: var(--text-tertiary); }
.tp-notifications__empty { margin: 0; padding: var(--space-6) var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); }
.tp-notifications__all { position: sticky; inset-block-end: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--accent-text); background: var(--surface-raised); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }