/* Shared interaction system styles (web/uiKit.js). Tokens only — the
   palette itself lives in environment.css/shell.css. Loaded by index.html
   for both the shell landmarks and the depth-layer workstations. */

:root {
  --ok: #7da77c;
  --info: #8ea3b8;
  --elev-1: rgba(255, 255, 255, 0.03);
  --elev-2: rgba(255, 255, 255, 0.06);
  --ui-radius: 8px;
}

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

/* ── chips ── */
.ui-chip {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ui-chip-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ui-chip-progress { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.ui-chip-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.ui-chip-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.ui-chip-neutral { color: var(--muted); }
.ui-chip-locked { color: var(--muted); border-style: dashed; }

/* ── states ── */
.ui-state {
  border: 1px dashed var(--line);
  border-radius: var(--ui-radius);
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
  background: var(--elev-1);
}
.ui-state-title { margin: 0 0 0.25rem; font-style: italic; color: var(--muted); }
.ui-state-body { margin: 0; font-size: 0.9rem; color: var(--muted); }
.ui-state-error { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.ui-state-error .ui-state-title { color: var(--danger); font-style: normal; }
.ui-state-locked { border-style: dotted; }
.ui-state-action { margin-top: 0.6rem; }

/* ── confirm dialog ── */
.ui-confirm {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  padding: 1.25rem 1.5rem;
  max-width: 28rem;
}
.ui-confirm::backdrop { background: rgba(0, 0, 0, 0.6); }
.ui-confirm h3 { margin-top: 0; }
.ui-confirm-consequence { color: var(--warn); }
.ui-confirm-reason, .ui-confirm-ack { display: block; margin: 0.75rem 0; }
.ui-confirm-reason input { width: 100%; margin-top: 0.25rem; }
.ui-confirm-ack input { width: auto; margin-right: 0.4rem; }
.ui-confirm-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }

/* ── toolbar + dataview ── */
.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
  margin-bottom: 0.75rem;
}
.ui-search { min-width: 14rem; }
.ui-filter { font-size: 0.85rem; color: var(--muted); display: grid; gap: 0.2rem; }

.ui-dataview-body { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th, .ui-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ui-table th { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ui-sort { background: none; border: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.ui-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ui-row-link { cursor: pointer; }
.ui-row-link:hover, .ui-row-link:focus-visible { background: var(--elev-2); outline: none; }
.ui-row-actions { white-space: nowrap; }

/* saved views + shown-count + bulk selection */
.ui-savedviews { display: inline-flex; gap: 0.4rem; align-items: end; }
.ui-savedviews button { font-size: 0.82rem; }
.ui-dataview-count { color: var(--muted); font-size: 0.82rem; margin-left: auto; align-self: center; white-space: nowrap; }
.ui-bulkbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: var(--elev-1);
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.6rem;
}
.ui-bulkbar-count { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.ui-bulkbar-actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.ui-select-cell { width: 2rem; }
.ui-select-cell input { width: 1rem; height: 1rem; }

/* <768px: table rows become labeled cards */
@media (max-width: 767px) {
  .ui-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ui-table, .ui-table tbody, .ui-table tr, .ui-table td { display: block; width: 100%; }
  .ui-table tr {
    border: 1px solid var(--line);
    border-radius: var(--ui-radius);
    margin-bottom: 0.6rem;
    background: var(--elev-1);
    padding: 0.25rem 0;
  }
  .ui-table td { border-bottom: none; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; }
  .ui-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.1rem; }
  .ui-select-cell { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-chip, .ui-state, .ui-table tr { transition: none !important; }
}

/* ── entityPicker ── */
.ui-picker { position: relative; }
.ui-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  max-height: 16rem;
  overflow-y: auto;
}
.ui-picker-opt { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0.55rem; border-radius: 6px; cursor: pointer; }
.ui-picker-opt.is-active { background: var(--elev-2); }
.ui-picker-meta { color: var(--muted); font-size: 0.8rem; }
.ui-picker-none { color: var(--muted); font-style: italic; padding: 0.4rem 0.55rem; }

/* ── recordDetail ── */
.ui-record-head h3 { margin-bottom: 0.15rem; }
.ui-record-sub { margin-top: 0; color: var(--muted); }
.ui-record-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 0.9rem; flex-wrap: wrap; }
.ui-record-tabs [role=tab] {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 0.45rem 0.8rem; cursor: pointer; font: inherit;
}
.ui-record-tabs [role=tab][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.ui-record-tabs [role=tab]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── timeline ── */
.ui-timeline { list-style: none; margin: 0; padding: 0; }
.ui-timeline-day { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.9rem 0 0.35rem; }
.ui-timeline-item { display: grid; grid-template-columns: 5rem 1fr; gap: 0.75rem; padding: 0.35rem 0; border-left: 2px solid var(--line); padding-left: 0.75rem; margin-left: 0.25rem; }
.ui-timeline-time { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.ui-timeline-title { margin: 0; }
.ui-timeline-actor { color: var(--muted); font-size: 0.85rem; }
.ui-timeline-text { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 767px) { .ui-timeline-item { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ── audit ── */
.ui-audit-export { float: right; margin-bottom: 0.5rem; }

/* ── charts ── */
.ui-chart { max-width: 100%; height: auto; display: block; }
.ui-spark { display: inline-block; vertical-align: middle; }
.ui-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.ui-spark-end { fill: var(--accent); }
.ui-chart-grid { stroke: var(--line); stroke-width: 0.5; }
.ui-line-path { fill: none; stroke: var(--accent); stroke-width: 1.75; }
.ui-line-dot { fill: var(--accent); }
.ui-bar-row { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr 4.5rem; gap: 0.6rem; align-items: center; padding: 0.25rem 0; }
.ui-bar-label { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-bar-track { background: var(--elev-1); border-radius: 4px; height: 0.85rem; overflow: hidden; }
.ui-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ui-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.88rem; }
.ui-funnel-stage { position: relative; margin: 0.3rem 0; height: 1.7rem; }
.ui-funnel-bar { position: absolute; inset: 0 auto 0 0; background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 4px; }
.ui-funnel-text { position: relative; line-height: 1.7rem; padding-left: 0.6rem; font-size: 0.9rem; }
.ui-donut { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.ui-donut-slice { fill: none; stroke-width: 14; transform: rotate(-90deg); transform-origin: center; }
.ui-donut-legend { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; display: grid; gap: 0.3rem; }
.ui-donut-swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.45rem; vertical-align: -1px; }
.ui-donut-slice-0 { stroke: var(--accent); } .ui-donut-swatch.ui-donut-slice-0 { background: var(--accent); }
.ui-donut-slice-1 { stroke: var(--ok); } .ui-donut-swatch.ui-donut-slice-1 { background: var(--ok); }
.ui-donut-slice-2 { stroke: var(--info); } .ui-donut-swatch.ui-donut-slice-2 { background: var(--info); }
.ui-donut-slice-3 { stroke: var(--warn); } .ui-donut-swatch.ui-donut-slice-3 { background: var(--warn); }
.ui-donut-slice-4 { stroke: var(--danger); } .ui-donut-swatch.ui-donut-slice-4 { background: var(--danger); }
.ui-donut-slice-5 { stroke: var(--muted); } .ui-donut-swatch.ui-donut-slice-5 { background: var(--muted); }

/* ── kanban ── */
.ui-kanban-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); gap: 0.75rem; overflow-x: auto; align-items: start; }
.ui-kanban-col { background: var(--elev-1); border: 1px solid var(--line); border-radius: var(--ui-radius); padding: 0.6rem; }
.ui-kanban-col.is-over { border-color: var(--accent); }
.ui-kanban-colhead { margin: 0 0 0.5rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ui-kanban-card { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.55rem 0.65rem; margin-bottom: 0.5rem; cursor: grab; }
.ui-kanban-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ui-kanban-title { margin: 0 0 0.2rem; font-size: 0.95rem; }
.ui-kanban-meta { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.82rem; }
.ui-kanban-controls { display: flex; gap: 0.3rem; justify-content: flex-end; }
.ui-kanban-controls button { font-size: 0.8rem; padding: 0.05rem 0.5rem; }
.ui-kanban-error { color: var(--danger); }
@media (max-width: 767px) { .ui-kanban-cols { grid-auto-columns: 85%; } }

/* ── calendar ── */
.ui-cal-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.ui-cal-title { margin: 0; }
.ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-cal-dow { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem; }
.ui-cal-cell { min-height: 4.6rem; border: 1px solid var(--line); border-radius: 4px; padding: 0.25rem; background: var(--elev-1); }
.ui-cal-empty { background: transparent; border-color: transparent; }
.ui-cal-day { font-size: 0.78rem; color: var(--muted); }
.ui-cal-event { display: block; width: 100%; text-align: left; font-size: 0.78rem; margin-top: 0.2rem; padding: 0.1rem 0.3rem; border: 1px solid var(--accent); background: var(--accent-bg); border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ui-cal-agenda { display: none; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.ui-cal-agenda-item { width: 100%; text-align: left; padding: 0.45rem 0.5rem; background: none; border: none; border-bottom: 1px solid var(--line); color: inherit; font: inherit; cursor: pointer; }
.ui-cal-agenda-date { color: var(--muted); font-size: 0.82rem; margin-right: 0.5rem; }
.ui-cal-agenda-meta { color: var(--muted); font-size: 0.82rem; }
@media (max-width: 767px) {
  .ui-cal-grid { display: none; }
  .ui-cal-agenda { display: block; }
}

/* ── gallery ── */
.ui-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.ui-gallery-tile { display: grid; gap: 0.3rem; background: var(--elev-1); border: 1px solid var(--line); border-radius: var(--ui-radius); padding: 0.5rem; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.ui-gallery-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ui-gallery-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 5px; background: var(--elev-2); }
.ui-gallery-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4/3; border-radius: 5px; background: var(--elev-2); color: var(--muted); font-size: 1.4rem; letter-spacing: 0.1em; }
.ui-gallery-caption { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-gallery-meta { color: var(--muted); font-size: 0.78rem; }

/* ── graphView ── */
.ui-graph-scroll { overflow-x: auto; }
.ui-graph-svg { min-width: 100%; }
.ui-graph-node { fill: var(--elev-1); stroke: var(--line); }
.ui-graph-node-ok { stroke: var(--ok); }
.ui-graph-node-warn { stroke: var(--warn); }
.ui-graph-node-danger { stroke: var(--danger); }
.ui-graph-node-accent { stroke: var(--accent); }
.ui-graph-nodelabel { fill: var(--fg); font-size: 12px; }
.ui-graph-nodemeta { fill: var(--muted); font-size: 10px; }
.ui-graph-edge { fill: none; stroke: var(--muted); stroke-width: 1.2; opacity: 0.8; }
.ui-graph-edge-ok { stroke: var(--ok); }
.ui-graph-edge-warn { stroke: var(--warn); }
.ui-graph-edge-danger { stroke: var(--danger); }
.ui-graph-edgelabel { fill: var(--muted); font-size: 9.5px; }
.ui-graph-arrowhead { fill: var(--muted); }

/* ── blockEditor ── */
.ui-blocks { display: grid; gap: 0.6rem; }
.ui-block { border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--elev-1); padding: 0.5rem 0.6rem; }
.ui-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.ui-block-type { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ui-block-controls button { font-size: 0.78rem; padding: 0.05rem 0.45rem; margin-left: 0.2rem; }
.ui-block-fields { display: grid; gap: 0.35rem; }
.ui-block-fields input, .ui-block-fields textarea { width: 100%; }
.ui-block-note { margin: 0; color: var(--muted); font-size: 0.8rem; font-style: italic; }
.ui-blocks-add { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ui-blocks-add button { font-size: 0.82rem; }
.ui-blocks-preview summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.ui-blocks-frame { width: 100%; min-height: 14rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fff; margin-top: 0.4rem; }