/* Stark15 Verwaltung - the management area's own layout root (arx-free item 665 lane L1 - the release number is the lead's; docs/plan-management-2026-11-09.md section 3,
   docs/feature-verwaltung.md). Over the house's tokens alone (web/css/tokens.css - no hex, no raw font size here; the CSS gate reads this sheet
   like webapp.css): the two kiosk themes and the blue default colour it through the tokens. DESKTOP-FIRST: under the member app's sticky header
   a left tree of 260 px and the branch's content; the content is the list / detail split - the list takes the width, an opened row's pane
   stands at the right with 420 px on >= 1280 px and below the list on an iPad; below 900 px the tree becomes the select at the top and
   everything stacks (the phone's reading of the plan is prio B). The fixation rule (item 604): the names bold ink, the facts the sentence
   weight, the count line and the ids the hint's grey at the small step; never the headline blue on a column - the blue marks the picked node
   of the tree and the open row's edge (a highlight that is no button, the colour rule). */

html.vw-open .screen { max-width: none; padding: 0 0 24px; }
html.vw-open .page-head { display: none; }   /* the tree's head names the area; the branch's name is the list's own */
html.vw-open body::before { opacity: .12; }   /* the picture steps back behind a working surface */

.vw { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; min-height: calc(100vh - var(--header, 84px)); }

/* --- the tree --- */
.vw-tree { position: sticky; top: var(--header, 84px); align-self: start; max-height: calc(100vh - var(--header, 84px)); overflow: auto; box-sizing: border-box; padding: 14px 10px 24px; border-right: 1px solid var(--line); background: var(--surface); font-size: var(--size-small); }
.vw-tree-head { padding: 4px 10px 12px; color: var(--ink); font-size: var(--size-body); }
.vw-tree ul { list-style: none; margin: 0; padding: 0; }
.vw-tree .vw-sites { padding-left: 10px; }
.vw-tree .vw-branches { padding-left: 16px; margin: 2px 0 8px; border-left: 1px solid var(--line); }
.vw-node { display: block; box-sizing: border-box; min-height: 36px; padding: 7px 10px; border-radius: var(--radius-small); color: var(--ink); text-decoration: none; line-height: 1.3; }
a.vw-node:hover { background: var(--surface-2); }
a.vw-node:focus-visible { outline: 3px solid var(--headline); outline-offset: -3px; }
.vw-node.current { font-weight: 700; color: var(--headline); background: var(--surface-2); }
.vw-site-name { font-weight: 600; }
.vw-site.open > .vw-site-name { font-weight: 700; }
.vw-tree .soon .vw-node { color: var(--ink-3); cursor: default; }
.vw-tree .soon small { font-size: var(--size-tiny); color: var(--ink-3); }
.vw-tree-select { display: none; }

/* --- the branch's content --- */
.vw-main { min-width: 0; padding: 16px 20px 24px; box-sizing: border-box; }
.vw-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.vw-main.has-detail .vw-split { grid-template-columns: minmax(0, 1fr) 420px; }
.vw-org-page .vw-site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.vw-site-card.picked { border-color: var(--headline); }
.vw-soon { color: var(--ink-3); }

/* --- the list engine --- */
.vw-list { min-width: 0; }
.vw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 10px; }
.vw-search { flex: 1 1 320px; max-width: 520px; min-height: 40px; padding: 0 12px; box-sizing: border-box; font-size: var(--size-small); -webkit-appearance: none; appearance: none; }
.vw-views { min-height: 40px; font-size: var(--size-small); }
.vw-views-box:empty { display: none; }
.vw-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.vw-filters .vw-filter { min-height: 36px; padding: 0 8px; font-size: var(--size-small); max-width: 220px; }
.vw-filter-box { display: inline-flex; align-items: center; gap: 6px; }
.vw-filter-box .hint { font-size: var(--size-tiny); }
.vw-filter[aria-invalid="true"] { border-color: var(--danger); }
.vw-table-head { margin: 4px 0 6px; min-height: 28px; }
.vw-count { margin: 0; font-size: var(--size-small); }
.vw-pager .btn.small { min-height: 32px; min-width: 32px; padding: 0 10px; }
.vw-table-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-small); }
.vw-table { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
.vw-table:focus-visible { outline: 3px solid var(--headline); outline-offset: -3px; }
.vw-table th, .vw-table td { text-align: left; padding: 0 10px; height: 40px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.vw-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--ink-2); font-weight: 600; }
.vw-table td.num, .vw-table th.num { text-align: right; }
.vw-table .vw-check { width: 36px; padding: 0 8px; }
.vw-table .vw-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--headline); }
.vw-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: inherit; font: inherit; }
.vw-sort:focus-visible { outline: 3px solid var(--headline); outline-offset: 2px; border-radius: 4px; }
.vw-table th.on .vw-sort { color: var(--ink); font-weight: 700; }
.vw-arrow { font-size: var(--size-tiny); }
.vw-row { cursor: pointer; }
.vw-row:hover td { background: var(--surface-2); }
.vw-table:focus-within .vw-row.focus td { box-shadow: inset 0 2px 0 var(--headline), inset 0 -2px 0 var(--headline); }   /* the keyboard's row: a band of two lines while the table has the focus, never a frame per cell */
.vw-row.open td { background: var(--accent-soft); }
.vw-row.open td:first-child { box-shadow: inset 4px 0 0 var(--headline); }
.vw-row.checked td { background: var(--highlight); }
.vw-table td.vw-name b { font-weight: 700; color: var(--ink); }
.vw-table td.vw-name .web-badge { font-size: var(--size-tiny); }
/* item 708: a person who counts in no statistic - the name greyed (the quiet pair, still the row's name), the word beside it a plain hint; no colour, no badge (a staff decision, the fixation rule) */
.vw-table td.vw-name .vw-excluded b { color: var(--ink-3); }
.vw-excluded-word { white-space: nowrap; }
.vw-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.vw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--badge); color: var(--ink-2); font-size: var(--size-tiny); line-height: 1.6; }
.vw-chip.auto { border: 1px dashed var(--line); background: transparent; }
.vw-chip-x { all: unset; cursor: pointer; padding: 0 2px; color: var(--ink-2); font-weight: 700; line-height: 1; }
.vw-chip-x:focus-visible { outline: 2px solid var(--headline); border-radius: 4px; }
.vw-ind.open { color: var(--attention-soft-ink); font-weight: 600; }
.vw-busy { margin: 6px 0 0; }
.vw-empty { padding: 20px 12px; text-align: center; }
.vw-empty .web-muted { margin: 0 0 10px; }
.vw-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface-2); font-size: var(--size-small); }
.vw-bulk .input { min-height: 34px; font-size: var(--size-small); }
.vw-bulk .btn.small { min-height: 34px; }
.vw-bulk-action { gap: 6px; }

/* --- the detail pane --- */
.vw-detail { position: sticky; top: calc(var(--header, 84px) + 16px); align-self: start; max-height: calc(100vh - var(--header, 84px) - 32px); overflow: auto; box-sizing: border-box; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; font-size: var(--size-small); }
.vw-detail-empty { margin: 0; }
.vw-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vw-detail-head h2 { margin: 0 0 4px; font-size: var(--size-large); }
.vw-detail-facts { margin: 0; color: var(--ink-2); }
.vw-detail-ids { margin: 4px 0 0; }
.vw-detail h3 { margin: 16px 0 8px; font-size: var(--size-small); color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vw-links { margin: 12px 0 4px; }
.vw-detail .btn.small, .vw-bulk .btn.small, .vw-site-card .btn.small { min-height: 36px; padding: 0 12px; font-size: var(--size-small); }   /* a desktop's working pane: the small step; the coarse-pointer block below lifts every control back to 44 px */
.vw-chip-row { margin-bottom: 8px; }
.vw-chip-row .vw-chip { font-size: var(--size-small); padding: 3px 10px; }
.vw-new-word { margin-top: 8px; }
.vw-her-tags .input { min-height: 36px; font-size: var(--size-small); }
/* item 708: the pane's quiet row „Von Statistiken ausnehmen" - a checkbox with the word; while its door works the row fades and takes no second tap (answerTap - the pattern of .channel-pref) */
.vw-stats-flag { margin-top: 14px; }
.vw-stats-flag .hint { margin: 2px 0 0; }
.vw-flag-row { cursor: pointer; align-items: center; }
.vw-flag-row input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.vw-flag-row input[type=checkbox]:disabled { cursor: default; }
.vw-stats-flag[aria-busy="true"] .vw-flag-row { opacity: .6; pointer-events: none; }
.vw-kinds .chip { min-height: 32px; padding: 0 10px; font-size: var(--size-tiny); }
.vw-timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.vw-event { padding: 8px 0 8px 14px; border-left: 2px solid var(--line); position: relative; }
.vw-event::before { content: ""; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.vw-event.kind-training::before { background: var(--go); }
.vw-event.kind-checkin::before { background: var(--accent); }
.vw-event.kind-measurement::before { background: var(--headline); }
.vw-event.kind-booking_cancelled::before { background: var(--danger); }
.vw-event:first-child::before { width: 10px; height: 10px; left: -6px; }
.vw-event b { color: var(--ink); }
.vw-facts { color: var(--ink-2); }
.vw-when { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--size-tiny); }
/* item 725: the training event's „Trainingspolaroid senden" - the small button under the event's lines, its result line beside it (the hint's look) */
.vw-event .polaroid-send { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vw-event .polaroid-send-line:empty { display: none; }

/* --- the Statistik branch and the Kraft-Story (item 706) --- the fixation rule: the % figure bold at the large step, the exercise at the
   sentence weight beside it, the counts and the provenance the hint's grey at the small step; the line and the dots in the ink, the band
   and the thin months in the quiet greys - never the headline blue on a data state (the colour rule), no third colour */
.vw-tree .vw-subs { padding-left: 14px; margin: 0 0 4px; border-left: 1px dashed var(--line); }
.vw-tree .vw-sub { min-height: 32px; padding: 5px 10px; font-size: var(--size-tiny); }
.vw-stats { margin: 0 0 12px; }
.vw-stats .chip { min-height: 32px; padding: 0 10px; font-size: var(--size-tiny); }
.vw-stats .chip.vw-soon { color: var(--ink-3); border-style: dashed; cursor: default; }
.vw-story-title { margin: 0 0 6px; font-size: var(--size-large); }
.vw-story-intro { margin: 0 0 12px; max-width: 72ch; }
.vw-story-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 24px; margin: 0 0 12px; }
.vw-story-toggle .chip { min-height: 36px; padding: 0 12px; font-size: var(--size-small); }
.vw-story-toggle .chip.on { background: var(--headline); border-color: var(--headline); color: var(--headline-ink); }
.vw-story-plausibility { margin: 6px 0 0; max-width: 64ch; }
.vw-story-controls .vw-filters { margin: 0; }
.vw-story-curves, .vw-story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 16px; margin: 0 0 20px; }
.vw-story-card { padding: 14px 16px 12px; }
.vw-story-card.quiet { padding: 10px 16px; }
.vw-story-head { margin: 0 0 4px; }
.vw-story-figure { margin: 0; font-size: var(--size-body); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.vw-story-figure b { font-size: var(--size-large); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.vw-story-exercise { color: var(--ink-2); }
.vw-story-basis { margin: 4px 0 0; }
.vw-story-persons-head { margin: 8px 0 8px; font-size: var(--size-small); color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vw-story-person { margin: 0 0 16px; }
.vw-story-person:empty { display: none; }
.vw-main.has-story .vw-story-overview { display: none; }
.vw-story-person .vw-detail-head h2 { margin: 0 0 2px; font-size: var(--size-large); }
.ks-chart { display: block; width: 100%; max-width: 760px; height: auto; margin: 4px 0 2px; }   /* a unit stays near a pixel: the type of the ticks never grows with a stretched picture (item 642's lesson) */
.vw-story-controls .vw-filter-box .hint { white-space: nowrap; }
.ks-tick { stroke: var(--line); stroke-width: 1; }
.ks-zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.ks-tick-label, .ks-axis text { font-size: var(--size-tiny); fill: var(--muted); }
.ks-line { stroke: var(--ink); stroke-width: 1.8; fill: none; }
.ks-dot { fill: var(--ink); stroke: var(--panel); stroke-width: 1.2; }
.ks-dot-later { fill: var(--ink-3); stroke: var(--panel); stroke-width: 1; }
.ks-ring { fill: var(--panel); stroke: var(--ink-3); stroke-width: 1.4; }
.ks-pt.month.thin .ks-ring { stroke: var(--ink); stroke-dasharray: 2 2; }
.ks-band { fill: var(--ink); fill-opacity: .08; stroke: none; }
.ks-end-label { font-size: var(--size-small); font-weight: 700; fill: var(--ink); }
/* item 706 (e): a month's marker answers a tap - a finger-sized transparent hit circle under the small dot; the tapped month's composition stands in the quiet line under the chart */
.ks-pt.month { cursor: pointer; }
.ks-hit { fill: transparent; stroke: none; }
.vw-story-words { margin: 4px 0 0; }
.vw-story-words:empty { display: none; }
.vw-story-position { color: var(--ink-2); }

/* --- the iPad: the pane goes under the list, every control at the finger's floor --- */
@media (max-width: 1279px) {
  .vw-main.has-detail .vw-split { grid-template-columns: minmax(0, 1fr); }
  .vw-detail { position: static; max-height: none; }
  .vw { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 1279px) and (pointer: coarse) {
  .vw-node { min-height: 44px; padding-top: 11px; }
  .vw-search, .vw-views, .vw-filters .vw-filter, .vw-bulk .input, .vw-her-tags .input { min-height: 44px; }
  .vw-table th, .vw-table td { height: 44px; }
  .vw-pager .btn.small, .vw-detail .btn.small, .vw-bulk .btn.small, .vw-site-card .btn.small { min-height: 44px; min-width: 44px; }
}

/* --- below 900 px: the tree becomes the select at the top, everything stacks --- */
@media (max-width: 899px) {
  .vw { grid-template-columns: minmax(0, 1fr); }
  .vw-tree { display: none; }
  .vw-tree-select { display: block; margin: 12px 16px 0; width: calc(100% - 32px); box-sizing: border-box; min-height: 44px; }
  .vw-main { padding: 12px 16px 24px; }
  .vw-table th, .vw-table td { white-space: normal; }
}

/* item 728 f - the Sprach-Nutzung (sprache.js): the three tiles (the figure bold at the large step, the word under it at the sentence weight),
   the bars (one colour - the ink, a day without an answer a hairline in the quiet grey), the month's meter (one colour, no red: past the quota the
   words say it). The fixation rule of item 604: the figures are the relevant tier, the words accompany, the hints are the quiet tier. */
.vu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-in); margin: 0 0 6px; }
.vu-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); min-width: 0; }
.vu-tile b { font-size: var(--size-large); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.vu-tile-word { font-size: var(--size-small); color: var(--ink-2); }
.vu-paths { margin: 0 0 12px; }
.vu-card { margin-top: 12px; }
.vu-head { margin: 0 0 6px; font-size: var(--size-body); color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.vu-head-word { font-weight: 700; }
.vu-chart { width: 100%; height: auto; display: block; }
.vu-bar rect { fill: var(--ink); }
.vu-bar.empty rect { fill: var(--ink-3); }
.vu-figure { margin: 0 0 8px; font-size: var(--size-body); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.vu-figure b { font-size: var(--size-large); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.vu-figure-word { color: var(--ink); }
.vu-meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 0 0 8px; }
.vu-meter-fill { display: block; height: 100%; background: var(--headline); border-radius: 4px; }
.vu .hint { margin: 2px 0 0; }
@media (max-width: 480px) { .vu-tiles { grid-template-columns: 1fr; } }