/*
  BOK-specific styles, layered on top of /css/etaia.css (loaded first by the
  shared layout). Reuses the template's real CSS custom properties
  (--title-color, --link-color, --border-color-*, --text-muted-color, etc.,
  defined in that file) rather than the slightly different hex values in the
  draft docs/Web Style Guide.html -- see README for that discrepancy.
*/

/* Overrides etaia.css's .container (width: min(1080px, ...)) -- scoped to the
   navigator page only, since the 3-pane workspace (tree + diagram +
   inspector) benefits from using the full viewport rather than being capped
   to a prose-reading measure. No max-width at all here (unlike etaia.css's
   own 1080px cap): just the same calc(100% - 2rem) margin etaia.css already
   uses, so the container fills the screen edge-to-edge at any width, with a
   consistent 1rem gutter left/right (etaia.css's own `margin: 0 auto` on
   .container centers whatever's left over). The public/marketing pages keep
   the standard 1080px container (narrower measure is preferable for prose).
   Loaded after etaia.css (see stylesheets option in server.js), so this wins
   the cascade at equal specificity without needing !important. */
.bok-page .container {
  width: calc(100% - 2rem);
}

/* etaia.css's body{min-height:100vh} (flex column: header + .page-content +
   footer) renders to a concrete pixel height, but a min-height-derived size
   does NOT count as "definite" per the flexbox spec -- so .page-content's
   own resolved height, though visually correct on screen, isn't usable for
   percentage-height descendants (see .content.bok-page below, which was
   silently falling back to auto instead of actually filling .page-content).
   :has() scopes this to pages that render .bok-page, so no other page using
   the shared layout is affected. Changing min-height to height doesn't
   change body's rendered size in either the short- or tall-content case
   (overflow stays visible everywhere, so taller content still overflows
   past 100vh and the page still scrolls normally) -- it only makes that
   size definite, which is what percentage children actually need. */
body:has(.bok-page) {
  height: 100vh;
}

/* @etaia/web-app 0.15.0 replaced the old flat hex palette with a
   color-mix()-based token system and, in doing so, dropped --global-color-3
   (a flat #e6e0ff) with no replacement -- redefine the same light-violet
   tint locally, following that same color-mix convention (etaia.css's own
   --table-row-hover-background does the same thing off --etaia-01), for the
   hover/chip/badge backgrounds further down this file that used it. */
.bok-page {
  --bok-tint-background: color-mix(in srgb, var(--etaia-01) 12%, var(--page-background));
}

/* Overrides etaia.css's .content (padding: 3rem 0) -- same scoping rationale
   as .bok-page .container above: the workspace already fills the viewport
   height itself (.bok-workspace's own fixed height), so the shared layout's
   generous top/bottom breathing room just eats into that on this page. */
.content.bok-page {
  padding: 1rem 0;
  /* height:100% of .page-content (main.handlebars: <main class="page-content">
     wraps this <section> directly), not 100vh -- .page-content already
     correctly excludes the header/footer and adapts as the window is
     resized, where 100vh would ignore both. Only actually resolves though
     with the body:has(.bok-page) fix above (see its comment) -- without
     that, this silently fell back to auto and just sized to content.
     box-sizing:border-box so the padding above is included in that 100%,
     not added on top of it (which would make this section taller than
     .page-content and defeat the point). */
  box-sizing: border-box;
  height: 100%;
}

.bok-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--title-color);
  margin: 0 0 0.3rem;
}

ul.plain {
  margin: 0;
  padding-left: 1.2rem;
}

ul.plain li {
  margin-bottom: 0.5rem;
}

.bok-w-cycle-preview {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 1.2rem 0;
  border: 1px solid var(--border-color-muted);
  border-radius: 8px;
  background: #fff;
}

/* ---------------- page head + toolbar ---------------- */
.bok-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bok-page-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--title-color);
  margin: 0;
}

.bok-toolbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.bok-search {
  position: relative;
}

.bok-search input {
  width: 400px;
  max-width: 60vw;
  padding: 0.5rem 0.7rem 0.5rem 2rem;
  border: 1.5px solid var(--border-color-muted);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
}

.bok-search input:focus {
  outline: none;
  border-color: var(--form-field-border-color-selected);
}

.bok-search svg {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted-color);
}

#bokRoleFilter {
  padding: 0.5rem 0.6rem;
  border: 1.5px solid var(--border-color-muted);
  border-radius: 8px;
  background: var(--page-background);
  color: var(--text-color);
  font-family: inherit;
  font-size: 0.85rem;
}

#bokRoleFilter:focus {
  outline: none;
  border-color: var(--form-field-border-color-selected);
}

.bok-search-hint {
  font-size: 0.72rem;
  color: var(--text-muted-color);
  white-space: nowrap;
}

/* ---------------- W-cycle position vignette ---------------- */
.bok-cycle-vignette {
  border: 1px solid var(--border-color-muted);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  margin: 0 0.5rem 0.6rem;
  background: var(--page-background);
}

#bokCycleSvg {
  display: block;
  width: 100%;
  height: 140px;
}

.bok-w-path {
  fill: none;
  stroke: var(--border-color-light);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bok-w-node {
  cursor: pointer;
}

.bok-w-node circle,
.bok-w-node rect {
  fill: var(--page-background);
  stroke: var(--text-muted-color);
  stroke-width: 1.5;
}

.bok-w-node:hover circle,
.bok-w-node:hover rect {
  stroke: var(--link-color);
}

.bok-w-node:focus-visible circle,
.bok-w-node:focus-visible rect {
  outline: 2px solid var(--form-field-border-color-selected);
}

.bok-w-node.is-current circle,
.bok-w-node.is-current rect {
  fill: var(--title-color);
  stroke: var(--title-color);
}

.bok-w-label {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--title-color);
}

.bok-w-label--cross {
  font-size: 8px;
  font-weight: 600;
  fill: var(--text-muted-color);
}

.bok-w-node--cross.is-current .bok-w-label--cross {
  fill: var(--link-color-hover);
}

/* ---------------- workspace ---------------- */
.bok-workspace {
  display: grid;
  /* Only the tree pane needs a dedicated grid column now -- the inspector
     lives inside .bok-diagram-card (see .bok-inspector-card below) and sizes
     itself as a flex item there instead, so .bok-canvas-pane's own column
     is a plain 1fr. */
  grid-template-columns: 280px 1fr;
  gap: 0;
  border: 1px solid var(--border-color-muted);
  border-radius: 10px;
  overflow: hidden;
  /* Viewport-relative -- min-height is a floor for short windows, below
     which the workspace stops shrinking and the page scrolls instead. */
  height: 85vh;
  min-height: 520px;
}

@media (max-width: 980px) {
  .bok-workspace {
    grid-template-columns: 240px 1fr;
  }
  /* Hides the whole card, not just #bokInspector -- otherwise
     .bok-inspector-card's own border/padding would still render as an empty
     box. */
  .bok-inspector-card {
    display: none;
  }
}

/* Hide the activity tree pane (see initTreeToggle) -- drops its column
   entirely rather than collapsing it to 0px, so no leftover border/padding
   sliver remains. */
.bok-workspace.bok-tree-hidden {
  grid-template-columns: 1fr;
}

.bok-workspace.bok-tree-hidden .bok-tree-pane {
  display: none;
}

.bok-tree-pane {
  border-right: 1px solid var(--border-color-muted);
  overflow-y: auto;
  padding: 0.6rem 0.4rem 1.2rem;
  background: var(--form-background);
  min-height: 0; /* same grid-item overflow fix as .bok-canvas-pane */
}

.bok-tree-pane h3 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--link-color);
  margin: 0.4rem 0.5rem 0.5rem;
}

.bok-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  border-radius: 6px;
  color: var(--text-color);
  font-family: inherit;
}

.bok-row:hover {
  background: var(--bok-tint-background);
}

.bok-row.is-selected {
  background: var(--title-color);
  color: #fff;
}

.bok-row.is-selected .bok-row-count {
  color: #fff;
  opacity: 0.85;
}

.bok-row.is-ancestor {
  background: var(--page-background);
  box-shadow: inset 2px 0 0 var(--link-color);
}

.bok-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted-color);
}

.bok-row.is-selected .bok-chevron {
  color: #fff;
}

.bok-chevron svg {
  width: 8px;
  height: 8px;
  transition: transform 0.15s ease;
}

.bok-chevron.is-open svg {
  transform: rotate(90deg);
}

.bok-chevron.is-spacer {
  visibility: hidden;
}

.bok-node-icon {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
}

.bok-node-icon.is-leaf {
  border-radius: 50%;
  background: var(--text-muted-color);
}

.bok-row.is-selected .bok-node-icon.is-leaf {
  background: #fff;
}

.bok-node-icon.is-parent {
  border-radius: 2px;
  border: 1.5px solid var(--text-muted-color);
  background: transparent;
}

.bok-row.is-selected .bok-node-icon.is-parent {
  border-color: #fff;
}

.bok-node-icon.is-cross {
  background: var(--link-color);
  transform: rotate(45deg);
  border-radius: 1px;
}

.bok-row.is-selected .bok-node-icon.is-cross {
  background: #fff;
}

.bok-row-label {
  flex: 1 1 auto;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bok-row-count {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.65rem;
  color: var(--text-muted-color);
}

.bok-row-linked {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--bok-tint-background);
  color: var(--link-color-hover);
}

.bok-row.is-selected .bok-row-linked {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.bok-empty {
  font-size: 0.8rem;
  color: var(--text-muted-color);
  font-style: italic;
  padding: 0.5rem;
}

/* ---------------- canvas: breadcrumb + diagram ---------------- */
.bok-canvas-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Grid items default to min-height:auto (sized to their content's
     intrinsic minimum), which can make this pane taller than its grid row
     (.bok-workspace) regardless of that row's own fixed height -- clipped
     there since .bok-workspace has overflow:hidden. min-height:0 lets it
     actually shrink to the row's height and defer scrolling to its own
     children (bok-diagram-wrap) instead. */
  min-height: 0;
}

.bok-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-color-muted);
  font-size: 0.78rem;
  background: var(--page-background);
}

.bok-crumb {
  color: var(--text-muted-color);
}

.bok-crumb.is-current {
  color: var(--text-color);
  font-weight: 700;
}

.bok-crumb-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.bok-crumb-link:hover {
  color: var(--link-color);
  text-decoration: underline;
}

.bok-crumb-sep {
  color: var(--border-color-light);
}

.bok-crumb-id {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.65rem;
  color: var(--text-muted-color);
  margin-left: 2px;
}

.bok-crumb-alt {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--link-color-hover);
  background: var(--bok-tint-background);
  border-radius: 20px;
  padding: 3px 10px;
  border: none;
  cursor: pointer;
}

.bok-crumb-alt:hover {
  background: var(--border-color-muted);
}

.bok-diagram-wrap {
  flex: 1 1 auto;
  padding: 1rem;
  /* Same min-height:auto default as above: without this, this flex item
     would be forced taller than the space actually available by its
     content. No overflow/scrolling of its own though (unlike before) --
     it's not a "wrapper" in that sense any more, just a fixed-size layout
     slot: .bok-diagram-card below fills it at height:100%, and it's
     .bok-diagram-viewer-card/.bok-inspector-card further down that actually
     scroll/resize, independently of each other. */
  min-height: 0;
}

.bok-diagram-card {
  /* Used to cap at max-width: 900px + margin: 0 auto (centered) -- left over
     from when .container itself was capped at 1080/1440px, so 900px rarely
     mattered. Now that the container has no max-width (see .bok-page
     .container above) a plain block element already fills its parent's
     width by default, so removing the cap (and the centering margin that
     only mattered alongside it) is enough. Purely a layout wrapper now (no
     border/background of its own) -- see renderDiagram in bok-navigator.js:
     the header spans full width, then .bok-diagram-body's two children below
     are the actual visible "cards".

     height:100% (of .bok-diagram-wrap, itself a definite size -- see
     .bok-workspace's fixed height) is what lets .bok-diagram-body below
     actually reach the full available height instead of shrinking to its
     own content -- without it, .bok-diagram-wrap would need overflow:auto
     again to contain a shorter, content-sized card. */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: 100%;
  min-height: 0;
}

.bok-diagram-header {
  flex: 0 0 auto;
}

/* Diagram/image card + #bokInspector's card, side by side below the header --
   see renderDiagram in bok-navigator.js. flex:1 1 auto claims the rest of
   .bok-diagram-card's height (after the header) so that, combined with
   align-items:stretch (the default), both cards below actually stretch to
   fill that full height rather than just their own content's height. */
.bok-diagram-body {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 1rem;
  min-height: 0; /* same grid-item overflow fix as .bok-canvas-pane, one level deeper */
}

/* Shared "card" look for the two boxes below -- toolbar/frame/sub-links on
   one side, #bokInspector on the other. */
.bok-diagram-viewer-card,
.bok-inspector-card {
  background: var(--page-background);
  border: 1px solid var(--border-color-muted);
  border-radius: 10px;
  padding: 1.2rem 1.3rem 1rem;
  /* Both cards already stretch to fill the workspace's fixed 720px row (see
     .bok-diagram-body/.bok-diagram-card above) -- no manual resize handle any
     more (was resize:vertical), just contains this card's own scrolling if
     its content is taller than that fixed height. */
  overflow: auto;
  resize: none;
}

.bok-diagram-viewer-card {
  flex: 1 1 auto;
  min-width: 0; /* flex-row sibling of .bok-inspector-card, same fix */
}

.bok-diagram-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.bok-diagram-id {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--link-color-hover);
}

.bok-diagram-depth {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.62rem;
  color: var(--text-muted-color);
}

.bok-diagram-card h1 {
  font-size: 1.3rem;
  margin: 0 0 0.8rem;
  color: var(--title-color);
}

.bok-diagram-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.bok-zoom-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-color-muted);
  background: var(--page-background);
  color: var(--link-color);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.bok-zoom-btn:hover {
  border-color: var(--link-color);
  background: var(--bok-tint-background);
}

.bok-zoom-label {
  min-width: 3.2em;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text-muted-color);
}

.bok-open-full {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--link-color);
}

.bok-open-full:hover {
  color: var(--link-color-hover);
}

.bok-diagram-frame-wrap {
  position: relative;
}

.bok-diagram-frame {
  width: 100%;
  height: 62vh;
  min-height: 420px;
  border: 1px solid var(--border-color-muted);
  border-radius: 8px;
  background: #fff;
}

/* Raster (.png/.jpg) diagrams (no viewBox to size against, unlike the SVG
   case) -- let the image keep its own aspect ratio instead of being
   stretched/cropped into the fixed SVG frame height above. */
.bok-diagram-frame.bok-diagram-image {
  height: auto;
  min-height: 0;
  display: block;
  object-fit: contain;
}

.bok-diagram-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  background: #fff;
  color: var(--text-muted-color);
  font-size: 0.85rem;
}

.bok-diagram-loading-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--border-color-muted);
  border-top-color: var(--link-color);
  border-radius: 50%;
  animation: bok-diagram-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bok-diagram-loading-spinner {
    animation: none;
  }
}

@keyframes bok-diagram-spin {
  to {
    transform: rotate(360deg);
  }
}

.bok-diagram-placeholder {
  border: 1px dashed var(--border-color-muted);
  border-radius: 8px;
  padding: 2rem 1rem;
  text-align: center;
}

.bok-ph-title {
  font-size: 0.85rem;
  color: var(--text-color);
  margin-bottom: 0.3rem;
}

.bok-ph-sub {
  font-size: 0.75rem;
  color: var(--text-muted-color);
}

.bok-sub-links {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color-muted);
}

.bok-sub-links-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted-color);
  margin-bottom: 0.4rem;
}

.bok-sub-links a {
  display: block;
  font-size: 0.82rem;
  padding: 0.25rem 0;
}

/* ---------------- inspector ---------------- */
/* .bok-inspector-card (the visible box -- see .bok-diagram-viewer-card
   above, which it shares its "card" look with) carries the width/border/
   resize; #bokInspector itself just fills it. */
.bok-inspector-card {
  /* Proportion of .bok-diagram-body, not a fixed px sliver -- min-width
     keeps a floor for narrower windows while flex-basis lets it grow with
     the screen past that, same idea as the 34%/420px pair below scaling
     together with .bok-inspector-wide. */
  flex: 0 0 22%;
  min-width: 300px;
}

.bok-workspace.bok-inspector-wide .bok-inspector-card {
  flex-basis: 34%;
  min-width: 420px;
}

.bok-inspector-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bok-inspector-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0.4rem 0.6rem 0;
  flex: 0 0 auto;
}

.bok-inspector-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border-color-muted);
  border-radius: 6px;
  background: var(--page-background);
  color: var(--text-muted-color);
  cursor: pointer;
}

.bok-inspector-toggle svg {
  width: 15px;
  height: 15px;
}

.bok-inspector-toggle:hover {
  color: var(--link-color-hover);
  border-color: var(--link-color);
}

.bok-inspector-content {
  flex: 1 1 auto;
  /* Together with #bokInspector's height:100% above, this is what keeps
     .bok-inspector-toolbar pinned at the top and scrolls just this content
     when .bok-inspector-card is dragged shorter than it (rather than the
     toolbar/widen-panel button scrolling out of view along with it). */
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem 1rem 1rem;
}

.bok-insp-section {
  margin-bottom: 1.1rem;
}

/* Anchor spans parsed out of hasPurpose/hasSteps (see renderTextWithAnchors
   in bok-navigator.js). Only anchors resolved to an actual SVG element by
   attachInspectorAnchors get this class -- an anchor with no match on the
   current diagram stays plain, unstyled text. */
.bok-inspector-anchor--linked {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

/* "activity" anchors navigate on click (see attachInspectorAnchors) --
   pointer reads as "goes somewhere", more accurate than the plain --linked
   "help" cursor used by self/role/arrow anchors, which only highlight. */
.bok-inspector-anchor--clickable {
  cursor: pointer;
}

/* Plain external link parsed out of hasPurpose/hasSteps by the same
   renderTextWithAnchors -- any [text](target) whose target isn't
   "anchor:...", e.g. [the AI Act](https://eur-lex.europa.eu/...). */
.bok-inspector-link {
  color: var(--link-color);
}

.bok-inspector-link:hover {
  color: var(--link-color-hover);
}

/* "Opens in a new tab" glyph appended to every target="_blank" link -- both
   inline text links (.bok-inspector-link) and asset cards (.bok-asset-name). */
.bok-external-icon {
  width: 0.75em;
  height: 0.75em;
  margin-left: 3px;
  vertical-align: -0.05em;
}

/* Image parsed out of hasPurpose/hasSteps (![alt](target), see
   renderTextWithAnchors) -- constrained to the inspector pane's own width
   rather than the image's native size, since these come from arbitrary
   catalog/storage links. Swapped out for a .bok-inspector-link fallback on
   load failure (onerror), so a bad/non-image target never shows as a broken
   image icon. */
.bok-inspector-image {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  margin: 0.4rem 0;
}

/* [label](anchor:pdf:<url>)/[label](anchor:video:<url>) -- inline PDF
   viewer/MP4 player right in hasPurpose/hasSteps text (bok-navigator.js's
   appendInlineMarkdown). Same-origin src (either a same-app /media/nextcloud/
   proxy route, or an already-public external URL) -- no CSP widening needed
   beyond the default-src 'self' already in place for /tree. */
.bok-inspector-pdf {
  display: block;
  width: 100%;
  height: 500px;
  border: none;
  border-radius: 6px;
  margin: 0.4rem 0;
}

.bok-inspector-video {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  margin: 0.4rem 0;
}

.bok-insp-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--link-color);
  margin-bottom: 0.4rem;
}

.bok-role-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bok-tint-background);
  color: var(--link-color-hover);
  padding: 3px 10px;
  border-radius: 20px;
  margin: 0 0.3rem 0.3rem 0;
}

.bok-insp-body {
  font-size: 0.82rem;
  color: var(--text-color);
  line-height: 1.55;
  /* Free text from the ontology (purpose, steps, ...) can carry real line
     breaks -- preserve them here, on the shared class, so any field reusing
     it does too, instead of bolting a one-off class onto each field. */
  white-space: pre-line;
}

/* `## `/`### ` lines authored in hasPurpose/hasSteps (see renderTextWithAnchors)
   -- a lighter touch than .bok-insp-label, which is reserved for the section
   titles ("Purpose", "Steps", ...) surrounding the whole field. */
.bok-insp-subheading {
  margin: 0.7rem 0 0.3rem;
  font-weight: 700;
  color: var(--title-color);
}

.bok-insp-subheading:first-child {
  margin-top: 0;
}

h4.bok-insp-subheading {
  font-size: 0.86rem;
}

h5.bok-insp-subheading {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-color);
}

.bok-insp-empty {
  font-size: 0.78rem;
  color: var(--text-muted-color);
  font-style: italic;
}

.bok-insp-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.bok-insp-io div {
  font-size: 0.78rem;
  white-space: pre-line;
}

.bok-insp-io-k {
  color: var(--text-muted-color);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.bok-insp-io-item + .bok-insp-io-item {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-color-muted);
}

.bok-insp-step {
  padding: 0.6rem 0;
  border-top: 1px solid var(--border-color-muted);
}

.bok-insp-step:first-of-type {
  padding-top: 0;
  border-top: none;
}

.bok-insp-step-label {
  color: var(--text-muted-color);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.bok-asset-cards {
  display: flex;
  flex-wrap: wrap;
}

.bok-asset-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
  margin: 0 0.4rem 0.4rem 0;
  border: 1px solid var(--border-color-muted);
  border-radius: 6px;
  background: var(--page-background);
}

.bok-asset-type {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--bok-tint-background);
  color: var(--link-color-hover);
}

.bok-asset-name {
  color: inherit;
  text-decoration: none;
}

a.bok-asset-name:hover {
  text-decoration: underline;
}