/* Shared by the document and UI shadow roots. Layout belongs to its owner. */
*, *::before, *::after { box-sizing: border-box; }
html { font-family:var(--tp-font-family-sans); color:var(--tp-text-primary); background:var(--tp-surface-canvas); }
body { margin:0; }
:host { font-family:var(--tp-font-family-sans); color:var(--tp-text-primary); }
button,input,select,textarea { font:inherit; }
button,select,summary { touch-action:manipulation; }
a { color:var(--tp-accent); text-underline-offset:.22em; }
a:hover { color:var(--tp-accent-hover); }
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--tp-focus-ring); outline-offset:3px; }
::selection { color:var(--tp-selection-text); background:var(--tp-selection-bg); }
[hidden] { display:none !important; }
code,pre { font-family:var(--tp-font-family-mono); }
img,svg { max-width:100%; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }

/* Native control recipes. Theme-independent roles and interaction states. */
:where(button,.btn) {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--tp-space-2);
  min-height:32px; padding:6px 12px; border:1px solid var(--tp-border-control);
  border-radius:var(--tp-radius-sm); background:var(--tp-surface-input); color:var(--tp-text-primary);
  font:inherit; font-size:var(--tp-font-size-sm); line-height:1.4; text-decoration:none; cursor:pointer;
}
:where(button,.btn):hover { background:var(--tp-selection-bg); color:var(--tp-selection-text); }
:where(button,.btn):active { border-color:var(--tp-border-selected); }
:where(button:disabled,.btn[aria-disabled="true"]) { cursor:default; color:var(--tp-text-disabled); opacity:.65; }
.btn-primary { background:var(--tp-accent); color:var(--tp-text-on-accent); border-color:var(--tp-accent); }
.btn-primary:hover { background:var(--tp-accent-hover); color:var(--tp-text-on-accent); }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-danger { color:var(--tp-status-danger-text); border-color:var(--tp-status-danger-border); background:var(--tp-status-danger-bg); }
.btn-lg { min-height:44px; padding:10px 18px; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea) {
  min-width:0; max-width:100%; min-height:32px; padding:6px 8px;
  border:1px solid var(--tp-border-control); border-radius:var(--tp-radius-sm);
  background:var(--tp-surface-input); color:var(--tp-text-primary); line-height:1.5;
}
textarea { resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--tp-text-muted); }
input[type="checkbox"],input[type="radio"],input[type="range"] { accent-color:var(--tp-accent); }
:where(input,select,textarea)[aria-invalid="true"] { border-color:var(--tp-status-danger-border); }
:where(input,select,textarea):disabled { color:var(--tp-text-disabled); cursor:default; }
.badge { display:inline-flex; align-items:center; padding:3px 8px; border:1px solid var(--tp-border-default); border-radius:var(--tp-radius-sm); font-size:var(--tp-font-size-xs); color:var(--tp-text-secondary); background:var(--tp-surface-panel); }
.badge-accent { color:var(--tp-selection-text); background:var(--tp-selection-bg); border-color:var(--tp-border-selected); }
.badge-success { color:var(--tp-status-success-text); background:var(--tp-status-success-bg); border-color:var(--tp-status-success-border); }
.badge-warning { color:var(--tp-status-warning-text); background:var(--tp-status-warning-bg); border-color:var(--tp-status-warning-border); }
.badge-danger { color:var(--tp-status-danger-text); background:var(--tp-status-danger-bg); border-color:var(--tp-status-danger-border); }
.badge-info { color:var(--tp-status-info-text); background:var(--tp-status-info-bg); border-color:var(--tp-status-info-border); }
.theme-select { display:inline-flex; align-items:center; gap:6px; font-size:var(--tp-font-size-xs); white-space:nowrap; }
.theme-select select { width:auto; font-size:inherit; padding:3px 4px; min-height:28px; }
.field { display:grid; gap:var(--tp-space-1); min-width:0; }
.field-label { color:var(--tp-text-secondary); font-size:var(--tp-font-size-xs); }
.field-error { color:var(--tp-status-danger-text); font-size:var(--tp-font-size-sm); }
.panel-grid { display:grid; gap:var(--tp-space-3); min-width:0; }
.inspector-header { display:flex; align-items:center; justify-content:space-between; gap:var(--tp-space-3); }
.inspector-heading { min-width:0; }
.inspector-content { display:grid; gap:var(--tp-space-3); min-width:0; }
.inspector-header > :not(button) { min-width:0; }
.inspector-header h2 { margin:0; font-size:var(--tp-font-size-base); overflow-wrap:anywhere; }
.inspector-header p { margin:4px 0 0; color:var(--tp-text-muted); font-size:var(--tp-font-size-xs); }
.inspector-title { font-size:var(--tp-font-size-base); font-weight:600; margin:0; overflow-wrap:anywhere; }
.inspector-subtitle { color:var(--tp-text-muted); font-size:var(--tp-font-size-xs); }
.inspector-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--tp-space-2); }
.empty-state { padding:var(--tp-space-6); color:var(--tp-text-secondary); text-align:center; }
.ui-tabs { display:grid; gap:var(--tp-space-2); }
.ui-tab { justify-content:flex-start; text-align:left; width:100%; padding:8px 12px; border-color:transparent; background:transparent; color:var(--tp-text-secondary); border-radius:var(--tp-radius-sm); }
.ui-tab[aria-current="true"],.ui-tab[aria-selected="true"] { border-color:var(--tp-border-selected); background:var(--tp-selection-bg); color:var(--tp-selection-text); }
.ui-section { display:grid; gap:var(--tp-space-3); padding:var(--tp-space-4); border:1px solid var(--tp-border-default); border-radius:var(--tp-radius-md); background:var(--tp-surface-canvas); }
.ui-section-title { margin:0; color:var(--tp-text-muted); font-size:var(--tp-font-size-xs); font-weight:600; letter-spacing:var(--tp-font-tracking-wide); text-transform:uppercase; }
.ui-field-grid { display:grid; gap:var(--tp-space-2); padding-left:var(--tp-space-3); }
.ui-field-row { display:grid; grid-template-columns:minmax(120px,160px) minmax(0,1fr); gap:var(--tp-space-3); align-items:center; min-width:0; }
.ui-field-label { color:var(--tp-text-secondary); font-size:var(--tp-font-size-sm); }
.ui-field-control { width:100%; min-width:0; }
@media(max-width:560px) { .ui-field-row { grid-template-columns:1fr; gap:4px; }.ui-field-grid { padding-left:0; } }
@media(pointer:coarse) { :where(button,.btn,select,summary) { min-height:44px; } }

button[aria-label="Close"],button[aria-label="Close inspector"] { width:32px;height:32px;min-width:32px;min-height:32px;padding:0;flex:none;display:grid;place-items:center;border-radius:var(--tp-radius-full); }
@media(pointer:coarse) { button[aria-label="Close"],button[aria-label="Close inspector"] { width:44px;height:44px;min-width:44px;min-height:44px; } }

/* Shared popup menu items; the host owns placement and menu geometry. */
.ui-menu-item {
  border: none;
  border-radius: var(--tp-radius-full);
  background: var(--tp-menu-item-bg);
  color: var(--tp-text-primary);
  padding: var(--tp-space-2) var(--tp-space-3);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--tp-motion-duration-fast) var(--tp-motion-ease-default),
              color var(--tp-motion-duration-fast) var(--tp-motion-ease-default);
}
.ui-menu-item:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  background: var(--tp-menu-item-hover-bg);
  color: var(--tp-text-primary);
}
.ui-menu-item:is(:disabled, [aria-disabled="true"]) {
  background: var(--tp-menu-item-bg);
  color: var(--tp-text-disabled);
  cursor: default;
  opacity: .48;
}
@media (prefers-reduced-motion: reduce) {
  .ui-menu-item { transition: none; }
}

/* app-modal */
:host(:where(app-modal)) {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:var(--tp-space-4);
}

:where(:host(app-modal)) .modal::backdrop {
  background:var(--tp-surface-overlay);
}

:where(:host(app-modal)) .modal:not([open]) {
  display:none;
}

:where(:host(app-modal)) .modal {
  margin:auto;
  padding:0;
  color:var(--tp-text-primary);
  position:relative;
  width:min(calc(100% - 32px),640px);
  max-height:calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  background:var(--tp-surface-panel);
  border:1px solid var(--tp-border-control);
  border-radius:var(--tp-radius-md);
  box-shadow:var(--tp-elevation-3);
}

:where(:host(app-modal)) .modal--large {
  width:min(100%,1040px);
}

:where(:host(app-modal)) .modal--small {
  width:min(100%,420px);
}

:where(:host(app-modal)) .modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--tp-space-3);
  padding:var(--tp-space-4);
  border-bottom:1px solid var(--tp-border-default);
}

:where(:host(app-modal)) .modal-title {
  margin:0;
  font-size:var(--tp-font-size-lg);
}

:where(:host(app-modal)) .modal-body {
  min-height:0;
  overflow:auto;
  padding:var(--tp-space-4);
}

:where(:host(app-modal)) .modal-text {
  margin:0;
  line-height:var(--tp-font-leading-normal);
}

:where(:host(app-modal)) .modal-actions {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:var(--tp-space-2);
  padding:var(--tp-space-4);
  border-top:1px solid var(--tp-border-default);
}

/* Shared frame map / canvas navigation presentation. */
[data-action-framing] { position:relative; height:100%; display:flex; flex-direction:column; background:var(--tp-surface-workspace); }
[data-action-framing][hidden] { display:none; }
[data-framing-controls][hidden] { display:none; }
.framing-viewport { flex:1; min-height:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain; }
.framing-extent { position:relative; overflow:clip; }
.framing-map { position:absolute; top:0; left:0; transform-origin:0 0; }
.framing-filters { position:fixed; inset:auto; margin:0; width:min(320px,calc(100vw - 64px)); padding:var(--tp-space-2); border:1px solid var(--tp-border-default); border-radius:var(--tp-radius-md); background:var(--tp-surface-popover); color:var(--tp-text-primary); box-shadow:var(--tp-elevation-2); overflow:auto; }
.framing-filter-actions { display:flex; gap:var(--tp-space-2); }
.framing-filter-row { display:flex; align-items:center; gap:var(--tp-space-1); }
.framing-filter-row label { flex:1; min-width:0; display:flex; align-items:center; gap:var(--tp-space-2); }
.framing-filter-row label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.framing-filter-row i,.framing-memberships i { flex:none; display:inline-block; width:20px; height:3px; }
.framing-filter-row input { flex:none; }
.framing-memberships > div { display:flex; align-items:center; gap:var(--tp-space-2); }
.framing-memberships span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.framing-memberships small { flex:none; color:var(--tp-text-secondary); }
.framing-rails [hidden] { display:none; }
.framing-rails { position:absolute; inset:0; pointer-events:none; }
.framing-connector { fill:none; stroke-width:1px; }
.framing-route { fill:none; stroke-width:3; }
.framing-unused { stroke:var(--tp-graph-edge); stroke-width:1.5; }
.framing-name { position:absolute; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--tp-surface-workspace); }
.framing-name > span { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.framing-checkpoint { position:absolute; transform:translate(-50%,-50%); width:44px; height:44px; border:0; border-radius:var(--tp-radius-full); background:transparent; display:grid; place-items:center; }
.framing-checkpoint span { display:block; width:16px; height:16px; border:2px solid var(--tp-graph-edge); border-radius:var(--tp-radius-full); background:var(--tp-surface-workspace); }
.framing-checkpoint[data-bound="true"] span { border-color:var(--tp-text-primary); }
.framing-checkpoint[data-chapter="true"] span { background:var(--tp-selection-bg); border-width:4px; }
.framing-checkpoint[aria-pressed="true"],.framing-checkpoint:hover { background:var(--tp-selection-bg); }
.framing-tooltip { overflow:auto; position:absolute; z-index:10; width:max-content; max-width:min(340px,calc(100% - 16px)); padding:var(--tp-space-3); border:1px solid var(--tp-border-default); border-radius:var(--tp-radius-md); background:var(--tp-surface-popover); color:var(--tp-text-primary); overflow-wrap:anywhere; box-shadow:var(--tp-elevation-2); }
.framing-tooltip strong { font-weight:var(--tp-font-weight-medium); }
.framing-tooltip ul { margin:var(--tp-space-2) 0; padding-left:var(--tp-space-5); }
.framing-tooltip > span { color:var(--tp-text-secondary); font-size:var(--tp-font-size-xs); }
.framing-empty { padding:var(--tp-space-6); }

.ontology-pan {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  width: 32px;
  height: 32px;
  border-radius: var(--tp-radius-full);
  border: 1px solid var(--tp-border-control);
  background: var(--tp-surface-input);
  color: var(--tp-text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: var(--tp-font-size-base);
  font-weight: var(--tp-font-weight-semibold);
  line-height: 1;
}

.ontology-pan--left {
  right: 54px;
}

.ontology-pan--right {
  right: 14px;
}

.ontology-pan:hover,
.ontology-pan:focus-visible {
  border-color: var(--tp-accent);
}

.ontology-pan[hidden] {
  display: none;
}


.controls-add {
  width: 40px;
  height: 40px;
  border-radius: var(--tp-radius-full);
  border: 1px solid var(--tp-border-control);
  background: var(--tp-surface-input);
  color: var(--tp-text-primary);
  cursor: pointer;
  font-size: var(--tp-font-size-lg);
  line-height: 1;
}

.controls-add:disabled {
  cursor: default;
  opacity: 0.45;
}

.controls-menu-stack {
  display: grid;
  place-items: center;
  gap: var(--tp-space-2);
}