/* sitemap page: only what castomo-dashkit does not already draw; kit tokens only (no colour literals, no font-family, no pixel font sizes). */

/* ---------- The frame ---------- */
.sm-actions { display: contents; }
/* A block with nothing in it draws nothing, so it also adds no gap to the page's rhythm (#view > * + *). */
.sm-notices:empty, .sm-drag-hint:empty, .sm-bulk:empty { display: none; }
.sm-notices { display: grid; gap: var(--s1); }
.sm-block { display: block; }
.sm-keys { margin-block-start: calc(-1 * var(--s1)); }
.sm-editing { margin: 0; }

/* The inspector sits beside the tree from 1200 px (the kit's wide-screen step) and is a sheet under it. */
.sm-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (min-width: 1200px) {
  .sm-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 26rem); }
  .sm-aside { position: sticky; inset-block-start: var(--s2); max-block-size: calc(100dvh - var(--s5)); overflow-y: auto; overscroll-behavior: contain; }
}
.sm-main { padding: var(--s1); min-width: 0; }
.sm-aside { min-width: 0; }

/* ---------- Toolbar ---------- */
.sm-toolbar { display: grid; gap: var(--s1); }
.sm-toolbar .toolbar { margin-bottom: 0; }
.sm-count { display: inline-flex; margin-inline-start: 2px; }
.sm-summary { margin: 0; }
.sm-filter-panel { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); background: var(--paper-2); }
.sm-filter-group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s0); }
.sm-filter-group legend { padding: 0; margin-block-end: var(--s0); color: var(--ink-3); font-size: var(--t-1); font-weight: 650; }
.sm-chips { display: flex; flex-wrap: wrap; gap: var(--s0); }
.sm-drag-hint { margin: 0; }

/* ---------- Bulk edit ---------- */
.sm-bulk { display: grid; gap: var(--s1); }
.sm-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); }
.sm-bulkbar { display: grid; gap: var(--s1); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); padding-inline: var(--s2); }
.sm-bulkbar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s0); }
.sm-bulkbar-controls { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end; }
.sm-apply { display: flex; align-items: flex-end; gap: var(--s0); min-width: 0; }
.sm-apply .field { min-width: 0; }
.sm-apply .select { max-inline-size: 100%; }

/* ---------- The list ---------- */
.sm-tree { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; container-type: inline-size; }
/* When the list is narrow (the inspector beside it takes half the page) the type tag steps aside: the status badge and the
   issue count are what a row must show, and the type is one tap away in the inspector. */
@container (max-width: 720px) { .sm-badges .tag { display: none; } }
.sm-none { padding: var(--s3); color: var(--ink-3); text-align: center; }
/* Depth is an indent of one step per level; --depth is the page's level less one. */
.sm-row { padding-inline-start: calc(var(--depth, 0) * var(--s3)); min-width: 0; }
.sm-row-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s0);
  min-width: 0;
  padding: 2px var(--s0);
  border: var(--rule-w) solid transparent;
  border-radius: var(--radius-control);
}
@media (hover: hover) { .sm-row:not(.is-selected) > .sm-row-body:hover { background: var(--hover); } }
.sm-row.is-selected > .sm-row-body { background: var(--accent-wash); border-color: var(--rule-strong); }
.sm-row.is-picked > .sm-row-body { border-style: dashed; border-color: var(--accent); }
.sm-row.is-dimmed { opacity: .5; }
:root[data-theme^="contrast"] .sm-row.is-selected > .sm-row-body { outline: 3px solid var(--ink); outline-offset: -3px; }
.sm-pick { inline-size: 18px; block-size: 18px; margin: 0; flex: none; cursor: pointer; }
.sm-twirl-gap, .sm-twirl { inline-size: 36px; block-size: 36px; flex: none; }
.sm-twirl-gap { display: inline-block; }
/* The name over its address, so every row is two short lines and the badges and actions fit beside it. */
.sm-name {
  flex: 1 1 9rem;
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0;
  min-block-size: var(--target);
  padding: 0 var(--s0);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}
.sm-name b, .sm-name code { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-name b { font-weight: 650; }
.sm-name code { color: var(--ink-3); font-size: var(--t-1); }
.sm-badges { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--s0); }
.sm-row-actions { display: inline-flex; align-items: center; margin-inline-start: auto; }
.sm-row-actions .icon-btn { inline-size: var(--control-h); block-size: var(--control-h); }
/* On a phone (the kit's 640 step) a row is a small grid: tick, fold arrow, name and menu on the first line, the badges
   under the name. Columns are named by part, so a viewer's row (no tick) keeps the same shape. */
@media (max-width: 640px) {
  .sm-row-body { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s0); row-gap: 0; padding-inline: 0; }
  .sm-pick { grid-column: 1; grid-row: 1; }
  .sm-twirl, .sm-twirl-gap { grid-column: 2; grid-row: 1; }
  .sm-name { grid-column: 3; grid-row: 1; }
  .sm-row-actions { grid-column: 4; grid-row: 1; margin-inline-start: 0; }
  .sm-badges { grid-column: 3 / 5; grid-row: 2; padding-block-end: var(--s0); }
  .sm-row { padding-inline-start: calc(var(--depth, 0) * var(--s1)); }
}

/* Drag and drop: the accepted target is outlined, the refused one is dashed, so it is never colour alone. */
.is-dragging { opacity: .4; }
.is-drop-ok { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.is-drop-no { outline: 2px dashed var(--bad); outline-offset: -2px; }

/* ---------- Presence ---------- */
.sm-presence { display: inline-flex; align-items: center; }
.sm-presence .avatar + .avatar { margin-inline-start: -6px; }
.sm-presence .avatar { box-shadow: 0 0 0 2px var(--paper-2); }
.sm-presence .avatar.is-editing { outline: 2px solid var(--accent); outline-offset: 1px; }
.sm-presence-more { margin-inline-start: 4px; color: var(--ink-3); font-size: var(--t-1); }

/* ---------- The map ---------- */
.sm-map {
  position: relative;
  block-size: clamp(22rem, 66dvh, 48rem);
  overflow: hidden;
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius-control);
  background: var(--paper);
  cursor: grab;
  /* Pointer events do the panning and pinching; without this the browser would scroll or zoom the page instead. */
  touch-action: none;
  user-select: none;
}
.sm-map.is-panning { cursor: grabbing; }
.sm-map:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The stage is positioned from the physical top-left: the pan and zoom arithmetic (viewport.ts) is in
   physical pixels, and a right-to-left tree is mirrored in the layout itself, not by the browser. */
.sm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; direction: ltr; }
.sm-stage.is-easing { transition: transform var(--dur-slow) var(--ease-out); }
.sm-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sm-edge { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.sm-edge.is-trail { stroke: var(--accent); stroke-width: 3; }
.sm-controls {
  position: absolute;
  inset-block-end: var(--s1);
  inset-inline-end: var(--s1);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  cursor: default;
}
.sm-zoom { min-inline-size: 4ch; text-align: center; color: var(--ink-2); font-size: var(--t-1); font-variant-numeric: tabular-nums; }

.sm-node {
  position: absolute;
  left: 0;
  top: 0;
  inline-size: var(--node-w);
  block-size: var(--node-h);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border: var(--rule-w) solid var(--rule);
  border-inline-start: 5px solid var(--chart-1);
  border-radius: var(--radius-control);
  background: var(--paper-2);
  color: var(--ink);
  cursor: default;
}
.sm-node[data-hue="2"] { border-inline-start-color: var(--chart-2); }
.sm-node[data-hue="3"] { border-inline-start-color: var(--chart-3); }
.sm-node[data-hue="4"] { border-inline-start-color: var(--chart-4); }
.sm-node[data-hue="5"] { border-inline-start-color: var(--chart-5); }
.sm-node[data-hue="6"] { border-inline-start-color: var(--chart-6); }
/* Priority is a line, not a colour: critical is bold, low is dashed. */
.sm-node[data-priority="critical"] { border-width: 2px; border-color: var(--rule-strong); border-inline-start-width: 5px; }
.sm-node[data-priority="low"] { border-style: dashed; }
.sm-node.is-selected { outline: 3px solid var(--accent); outline-offset: 1px; background: var(--accent-wash); }
.sm-node.is-picked { outline: 3px dashed var(--accent); outline-offset: 1px; }
.sm-node.is-dimmed { opacity: .4; }
:root[data-theme^="contrast"] .sm-node.is-selected { outline-color: var(--ink); }
.sm-node-main { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 8px var(--s1) 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.sm-node-main:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-sm); }
.sm-node-head { display: block; min-width: 0; padding-inline-end: 28px; }
.sm-node-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.sm-node-sub { display: flex; gap: var(--s0); min-width: 0; color: var(--ink-2); font-size: var(--t-2); font-weight: 600; white-space: nowrap; }
.sm-node-sub code { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-weight: 400; }
.sm-node-more { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; inline-size: 32px; block-size: 32px; }
.sm-node-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink-3); font-size: var(--t-2); line-height: 1.35; }
/* Nothing in the foot may shrink: a squeezed badge wraps to one letter a line, which is worse than a clipped one. */
.sm-node-foot { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px var(--s1); border-top: var(--rule-w) solid var(--rule); overflow: hidden; }
.sm-node-foot > * { flex: none; }
.sm-node-foot > .sm-spacer { flex: 1 1 0; }
.sm-spacer { flex: 1; }
.sm-node-foot > .sm-flag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sm-flag { padding: 1px 6px; border: var(--rule-w) dashed var(--rule-strong); border-radius: 6px; color: var(--ink-2); font-size: var(--t-2); white-space: nowrap; }
.sm-fold { display: inline-flex; align-items: center; gap: 2px; min-block-size: 28px; padding: 0 var(--s0); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-pill); background: var(--field); color: var(--ink-2); font-size: var(--t-1); font-weight: 600; cursor: pointer; }
.sm-fold .ci { --ci-size: 14px; }

/* ---------- The inspector ---------- */
.sm-inspector-body { min-width: 0; }
.sm-inspector-head { display: grid; gap: var(--s0); }
.sm-title { font-size: var(--t2); overflow-wrap: anywhere; }
.sm-crumbs { margin: 0; overflow-wrap: anywhere; }
.sm-h { font-size: var(--t0); color: var(--ink-2); }
.sm-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.sm-error { color: var(--bad); margin: 0; }
.sm-adder { display: flex; align-items: flex-end; gap: var(--s0); }
.sm-adder .field { flex: 1; min-width: 0; }
.sm-link-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); inline-size: 100%; min-block-size: var(--target); padding: 0 var(--s0); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; text-align: start; cursor: pointer; }
.sm-link-row .list-main { flex: 1; min-width: 0; }
@media (hover: hover) { .sm-link-row:hover { background: var(--hover); } }
.sm-children, .sm-checks, .sm-issues { margin: 0; padding: 0; }
.sm-checks .list-icon[data-done="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.sm-issues > li { align-items: flex-start; }
.sm-issues .list-main span { overflow-wrap: anywhere; }
/* The inspector is a list of its own inside a card that already pads: from 400 px down its lists lose their side room (§4d). */
@media (max-width: 400px) {
  .sm-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The sheet (the inspector under 1200 px) ---------- */
.sm-drawer .dialog-body { padding-block-start: var(--s2); }
.sm-mentions { display: inline-flex; }

/* The key hints are for a keyboard; a touch screen has none to press them with. */
@media (pointer: coarse) { .sm-keys { display: none; } }