/* ViglAI Hub · HitIA «Ανάλυση» v3 (builder.js, ask.js). After app.css: its tokens, controls and chart kit are used as they are.
   The page is a lookout's chart table. One loud thing: the question in words, on the night slab at the top - the fire of the brand is not
   used here, nothing on this page asks a person to act. Below it the workbench: the fields on the left, the four shelves they are dragged to,
   the answer. Figures in Archivo (no Greek glyphs) only where a cell holds digits. */

:root {
  --pv-heat: #33607A; --pv-grp0: color-mix(in srgb, var(--sunken) 70%, var(--surface)); --pv-grp1: color-mix(in srgb, var(--sunken) 35%, var(--surface));
  --pv-ask: var(--vg-night); --pv-ask-ink: #E9EDEF; --pv-ask-muted: #93A5AE; --pv-ask-rule: #2C3D46; --pv-ask-tok: #1B2A32; --pv-ask-hi: #8DB5CD;
  --pv-drop: var(--sea); --pv-drop-bg: var(--sea-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pv-heat: #6FA3C4; --pv-ask: #16303F; --pv-ask-rule: #2F4A5A; --pv-ask-tok: #10222C; }
}
:root[data-theme="dark"] { --pv-heat: #6FA3C4; --pv-ask: #16303F; --pv-ask-rule: #2F4A5A; --pv-ask-tok: #10222C; }

.pvpage { display: flex; flex-direction: column; gap: 14px; }

/* ---- «Ρώτα με λόγια»: the night slab ---------------------------------------------------------------------------------------- */
.pvask { background: var(--pv-ask); color: var(--pv-ask-ink); border-radius: var(--radius); padding: 12px 18px 10px; position: relative; }
.pvask-l { display: block; font-size: 13px; font-weight: 600; color: var(--pv-ask-muted); margin: 0 0 2px; }
.pvask-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pvask-kb { font-size: 12px; color: var(--pv-ask-muted); }
.pvask-kb kbd { font: 600 12px var(--font-text); display: inline-block; min-width: 18px; text-align: center; padding: 0 5px; border: 1px solid var(--pv-ask-rule); border-radius: 2px; color: var(--pv-ask-ink); }
@media (hover: none), (max-width: 760px) { .pvask-kb { display: none; } }
.pvask-row { display: flex; gap: 10px; align-items: flex-end; position: relative; }
.pvask-in { flex: 1; min-width: 0; margin: 0; background: transparent; color: var(--pv-ask-ink); border: 0; border-bottom: 2px solid var(--pv-ask-muted); border-radius: 0;
  font: 500 21px/1.35 var(--font-text); padding: 6px 2px 7px; letter-spacing: -0.005em; }
.pvask-in::placeholder { color: var(--pv-ask-muted); opacity: .75; font-weight: 400; }
.pvask-in:focus, .pvask-in:focus-visible { outline: none; border-bottom-color: var(--pv-ask-ink); box-shadow: none; }
.pvask-in::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.pvask-go { flex: 0 0 auto; background: var(--pv-ask-ink); color: var(--vg-night); border: 0; font-weight: 650; padding: 8px 18px; margin-bottom: 2px; }
.pvask-go:hover { background: #FFFFFF; }
.pvask-go:focus-visible { outline: 2px solid var(--pv-ask-hi); outline-offset: 2px; }
.pvask-list { position: absolute; left: 0; right: 80px; top: 100%; z-index: 60; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--muted); border-radius: var(--radius); max-height: 320px; overflow: auto; }
.pvask-list li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 12px; cursor: pointer; font-size: 14.5px; }
.pvask-list li .kd { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pvask-list li:hover, .pvask-list li[aria-selected="true"] { background: var(--sunken); }
.pvask-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.pvask-read > .k { font-size: 12.5px; color: var(--pv-ask-muted); margin-right: 2px; }
.pvtok { display: inline-flex; align-items: stretch; border: 1px solid var(--pv-ask-rule); border-radius: var(--radius); font-size: 13.5px; line-height: 1.3; background: var(--pv-ask-tok); }
.pvtok > span { padding: 3px 4px 3px 9px; }
.pvtok .x { border: 0; background: none; color: var(--pv-ask-muted); padding: 0 7px; font-size: 11px; border-radius: 0; }
.pvtok .x:hover { color: var(--pv-ask-ink); }
.pvtok.m { border-color: var(--pv-ask-hi); color: #FFFFFF; font-weight: 600; }
.pvtok.r, .pvtok.c { background: transparent; }
.pvtok.p, .pvtok.cmp, .pvtok.b, .pvtok.s, .pvtok.top, .pvtok.mode { background: transparent; border-style: dashed; }
.pvtok.f { background: transparent; border-color: var(--pv-ask-muted); }
.pvtok.x, .pvtok.wait { background: transparent; border-style: dotted; color: var(--pv-ask-muted); font-style: italic; }
.pvtok.x { color: #E0A94A; border-color: #7A5A22; }
.pvask-ex { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 10px 0 0; font-size: 12.5px; color: var(--pv-ask-muted); }
.pvask-ex .link { color: var(--pv-ask-ink); font-size: 12.5px; text-decoration-color: var(--pv-ask-muted); padding: 0; }
.pvask-ex .link:hover { text-decoration-color: var(--pv-ask-ink); }

/* ---- ready reports and lists -------------------------------------------------------------------------------------------------- */
.pvgal-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pvgal-t { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 3px 8px 3px 2px; font-weight: 650; font-size: 14px; color: var(--ink); margin-right: 6px; }
.pvgal-t::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 2px; }
.pvgal-t[aria-expanded="true"]::before { transform: rotate(45deg); }
.pvgal-t .n { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; border: 1px solid var(--rule); padding: 0 6px; border-radius: var(--radius); }
.pvgal-t:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* the day's lists: one click each */
.pvquick { display: inline-block; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 550;
  padding: 3px 10px; border-radius: var(--radius); }
.pvquick:hover { border-color: var(--muted); background: var(--surface); }
.pvquick[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.pvquick.mgr { border-color: var(--muted); }
.pvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; padding: 14px 16px 12px; margin-top: 8px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius); }
.pvgblock h3 { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pvgblock ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.pvgblock.day { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
/* the day's lists read across the whole width, the questions by theme under them */
.pvgblock.day ul { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px 18px; }
.pvgblock.day .pvcard.lst .nm::after { content: none; }
.pvcard { display: block; width: 100%; text-align: left; border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; padding: 5px 8px 6px;
  color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; }
.pvcard:hover { background: var(--sunken); }
.pvcard[aria-current="true"] { background: var(--sunken); border-left-color: var(--ink); }
.pvcard .nm { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.pvcard .qq { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; line-height: 1.35; margin-top: 1px; }
.pvcard.lst .nm::after { content: "λίστα"; font-size: 11px; font-weight: 550; color: var(--sea); border: 1px solid currentColor; border-radius: 2px; padding: 0 4px; margin-left: 7px; vertical-align: 1px; }
.pvcard.mgr { border-left-color: var(--ink); }
.pvgblock.own p { font-size: 12.5px; padding: 6px 8px; margin: 0; }

/* ---- the workbench: fields | question + answer --------------------------------------------------------------------------------- */
.pvbench { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.pvwork { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* the field panel */
.pvfields { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); min-height: 0; }
.pvfhead { display: none; }
.pvfsearch { margin: 10px 10px 6px; width: auto; font-size: 13.5px; padding: 6px 9px; }
.pvflist { overflow: auto; padding: 0 0 10px; min-height: 0; }
.pvfsec h3 { margin: 10px 12px 2px; font-size: 13px; color: var(--ink); font-weight: 650; }
.pvfgrp h4 { margin: 8px 12px 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pvfi { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 12px; font-size: 13.5px; line-height: 1.35; cursor: grab; user-select: none; border-left: 2px solid transparent; }
.pvfi:hover { background: var(--sunken); }
.pvfi:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pvfi .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvfi .fl { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pvfi .wh { font-size: 11px; font-weight: 550; color: var(--ink); white-space: nowrap; padding: 0 5px; border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); }
.pvfi .add { width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 15px; line-height: 1; color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius);
  visibility: hidden; flex: 0 0 auto; }
.pvfi:hover .add, .pvfi:focus-visible .add { visibility: visible; }
/* the glyph: a figure is a small bar chart, a field a set of lines */
.pvfi .gl { width: 11px; height: 11px; flex: 0 0 auto; }
.pvfi.measure .gl { background: linear-gradient(to top, var(--muted) 45%, transparent 45%) 0 0 / 3px 100% no-repeat, linear-gradient(to top, var(--muted) 100%, transparent 100%) 4px 0 / 3px 100% no-repeat,
  linear-gradient(to top, var(--muted) 70%, transparent 70%) 8px 0 / 3px 100% no-repeat; }
.pvfi.dim .gl, .pvfi.lcol .gl { border-top: 2px solid var(--muted); border-bottom: 2px solid var(--muted); background: linear-gradient(var(--muted), var(--muted)) center / 100% 2px no-repeat; height: 10px; }
.pvfi.lcol .gl { width: 10px; background: none; border: 1.5px solid var(--muted); height: 10px; }
.pvfi.on { border-left-color: var(--ink); font-weight: 600; }
.pvfi.on .gl { filter: none; }
.pvfi.measure.on .gl { background: linear-gradient(to top, var(--ink) 45%, transparent 45%) 0 0 / 3px 100% no-repeat, linear-gradient(to top, var(--ink) 100%, transparent 100%) 4px 0 / 3px 100% no-repeat,
  linear-gradient(to top, var(--ink) 70%, transparent 70%) 8px 0 / 3px 100% no-repeat; }
/* a column the list shows: its box filled */
.pvfi.lcol.on .gl { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }
.pvfi.dim.on .gl { border-color: var(--ink); background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat; }
.pvfi.off { color: var(--faint); cursor: default; }
.pvfi.empty .nm { color: var(--muted); }
.pvfields.drop-out { outline: 2px dashed var(--muted); outline-offset: -4px; }
.pvfbtn { display: none; }

/* the mode: Σύνολα | Λίστα */
.pvq { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0 16px 12px; }
.pvacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; padding: 6px 0; }
.pvacts button { padding: 5px 11px; font-size: 13px; }
.pvmode { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; column-gap: 12px; border-bottom: 1px solid var(--rule); margin: 0 -16px 10px; padding: 0 16px; }
.pvmodes { display: flex; gap: 4px; }
.pvmodeb { display: flex; flex-direction: column; align-items: flex-start; border: 0; border-radius: 0; background: none; padding: 8px 14px 6px 2px; margin-right: 10px;
  border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--muted); text-align: left; }
.pvmodeb .t { font-size: 15.5px; font-weight: 650; }
.pvmodeb .s { font-size: 12px; font-weight: 400; }
.pvmodeb[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.pvmodeb:hover { color: var(--ink); background: none; }

/* period, basis, status, comparison */
.pvctl { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 10px; }
.pvctl-f { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); }
.pvctl-f > .k { font-size: 13px; color: var(--muted); }
.pvctl-f select { width: auto; margin: 0; padding: 4px 8px; font-size: 13.5px; }
/* the period: the one choice every question has, so the loudest control of the row */
.pvctl-b { display: inline-flex; align-items: baseline; gap: 8px; text-align: left; background: none; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: 2px 18px 3px 2px; position: relative; color: var(--ink); }
.pvctl-b::after { content: ""; position: absolute; right: 4px; top: 50%; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); }
.pvctl-b .v { font-size: 16px; font-weight: 650; }
.pvctl-b .d { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pvctl-b:hover { background: var(--sunken); }
.pvctl .seg button { padding: 4px 10px; font-size: 13px; }

/* the shelves */
.pvq-sum { display: none; }
.pvshelf-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.35fr 1fr; gap: 8px; }
.pvshelf-grid.list { grid-template-columns: 2.2fr 0.8fr 1fr; }
.pvshelf { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--page); padding: 4px 6px 6px; min-height: 52px; min-width: 0; transition: background-color .12s; }
.pvshelf-t { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 4px 1px; }
.pvshelf-b { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pvshelf-e { font-size: 12.5px; color: var(--faint); font-style: italic; padding: 3px 2px; }
.pvshelf-add { width: 26px; height: 26px; padding: 0; font-size: 16px; line-height: 1; border-style: dashed; color: var(--muted); background: transparent; }
.pvshelf-add:hover { color: var(--ink); border-color: var(--muted); }
.pvpill { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--surface); cursor: grab; }
.pvpill button, .pvpill .c { border: 0; border-radius: 0; background: none; font-size: 13px; padding: 2px 8px; color: inherit; }
.pvpill .c { cursor: pointer; line-height: 1.5; }
.pvpill .c:hover { text-decoration: underline; text-underline-offset: 3px; }
.pvpill .c:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pvpill .c { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }
.pvpill .x { padding: 3px 7px; color: var(--muted); border-left: 1px solid var(--rule); font-size: 11px; }
.pvpill .x:hover { color: var(--ink); }
.pvpill .lv { font-size: 11px; font-weight: 650; color: var(--muted); padding: 4px 0 0 7px; font-variant-numeric: tabular-nums; }
.pvpill.measure { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.pvpill.measure .x { color: inherit; opacity: .7; border-left-color: color-mix(in srgb, var(--action-ink) 25%, transparent); }
.pvpill.measure.heat .c::after { content: ""; display: inline-block; width: 18px; height: 7px; margin-left: 7px; vertical-align: 1px; border-radius: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pv-heat) 10%, var(--surface)), var(--pv-heat)); outline: 1px solid color-mix(in srgb, var(--action-ink) 40%, transparent); }
.filters .pvpill { border-color: var(--rule); background: var(--sunken); }
.filters .pvpill .c { font-weight: 550; }
.pvpill.lifted { opacity: .4; }
.pvpill.mark { box-shadow: -4px 0 0 -1px var(--pv-drop); }
.pvshelf.mark-end .pvshelf-b::after { content: ""; width: 3px; height: 24px; background: var(--pv-drop); border-radius: 1px; }
/* while something is dragged, the shelves that take it say so */
.pvbench.drag-dim .pvshelf:is(.rows, .cols, .filters), .pvbench.drag-measure .pvshelf.measures, .pvbench.drag-lcol .pvshelf:is(.columns, .group) {
  border-style: dashed; border-color: var(--pv-drop); }
.pvbench.dragging .pvshelf.over { background: var(--pv-drop-bg); }
.pvnote { font-size: 12.5px; color: var(--smoke); margin: 8px 0 0; }

/* ---- popovers and menus --------------------------------------------------------------------------------------------------------- */
.pvpop { position: absolute; z-index: 80; background: var(--surface); border: 1px solid var(--muted); border-radius: var(--radius); width: max-content;
  max-width: min(760px, calc(100vw - 16px)); max-height: 72vh; display: flex; flex-direction: column; font-size: 14px; }
.pvpop.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-width: none; width: auto; max-height: 86vh; border-width: 1px 0 0; border-radius: 0; }
.pvpop-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 14px 6px; border-bottom: 1px solid var(--rule); }
.pvpop-b { padding: 10px 14px; overflow: auto; min-height: 0; }
.pvpop-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 14px 10px; border-top: 1px solid var(--rule); }
.pvpop-f > .muted { margin-right: auto; font-size: 13px; }
.pvpop h4 { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pvmenu { display: grid; gap: 1px; padding: 6px 6px 8px; min-width: 230px; max-width: 340px; }
.pvmenu button { display: flex; justify-content: space-between; gap: 14px; text-align: left; border: 0; border-radius: 0; background: none; padding: 6px 10px; font-weight: 500; font-size: 13.5px; }
.pvmenu button:hover, .pvmenu button:focus-visible { background: var(--sunken); }
.pvmenu button:disabled { color: var(--faint); background: none; }
.pvmenu button[role="menuitemradio"]::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--muted); border-radius: 50%; align-self: center; flex: 0 0 auto; order: -1; margin-right: -6px; }
.pvmenu button[aria-checked="true"]::before { background: var(--ink); border-color: var(--ink); }
.pvmenu button[aria-checked="true"] { font-weight: 650; }
.pvmenu button > span:first-child { flex: 1; }
.pvmenu .n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pvmenu h4 { margin: 6px 10px 2px; font-weight: 550; font-size: 12px; line-height: 1.4; }
.pvmenu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; width: 100%; }
.pvpickb { width: min(360px, calc(100vw - 40px)); }
.pvpickb > input { margin-bottom: 6px; }
.pvpick { max-height: 360px; overflow: auto; }
.pvpick h4 { margin: 8px 0 2px; }
.pvpk { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; border-radius: 0; background: none; padding: 5px 6px; font-weight: 500; font-size: 13.5px; }
.pvpk:hover { background: var(--sunken); }
.pvpk .n { color: var(--muted); font-size: 11.5px; }
.pvmgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; width: min(720px, calc(100vw - 60px)); }
.pvpop.sheet .pvmgrid { width: auto; }
.pvmg { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.pvmg legend { font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 0; margin-bottom: 2px; }
label.pvm { display: flex; gap: 0; align-items: flex-start; margin: 0; padding: 4px 0; color: var(--ink); font-size: 13.5px; cursor: pointer; }
label.pvm input { margin-top: 3px; }
label.pvm .nm { display: block; font-weight: 550; }
label.pvm .hint { margin-top: 0; font-size: 12px; line-height: 1.35; }
label.pvm:has(input:disabled) { color: var(--muted); cursor: default; }
.pvperiod { width: min(640px, calc(100vw - 40px)); }
.pvpcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; }
.pvpcol { display: grid; gap: 1px; align-content: start; min-width: 0; }
.pvpre { display: flex; flex-direction: column; gap: 0; text-align: left; border: 0; border-radius: 0; background: none; padding: 4px 6px 5px; font-weight: 550; font-size: 13.5px; }
.pvpre .d { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 400; }
.pvpre:hover { background: var(--sunken); }
.pvpre[aria-pressed="true"] { background: var(--action); color: var(--action-ink); }
.pvpre[aria-pressed="true"] .d { color: inherit; opacity: .8; }
.pvprow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.pvprow h4 { flex-basis: 100%; }
.pvprow select, .pvprow input { width: auto; margin: 0; }
.pvprow label { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pvfpop { width: min(460px, calc(100vw - 60px)); }
.pvpop.sheet .pvfpop, .pvpop.sheet .pvperiod, .pvpop.sheet .pvpickb { width: auto; }
.pvfpop > label { margin-bottom: 8px; }
/* a list's limit on a number: the column, then from / to side by side */
.pvlim { width: min(360px, calc(100vw - 60px)); }
.pvpop.sheet .pvlim { width: auto; }
.pvlimrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pvlimrow input { font-variant-numeric: tabular-nums; }
.filters .pvpill.lim { border-style: dashed; }
.pvfrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin: 6px 0 4px; }
.pvfrow label.check { margin: 0; font-size: 13.5px; }
.pvfrow .links { display: flex; gap: 12px; font-size: 13px; }
.pvvals { border: 1px solid var(--rule); border-radius: var(--radius); max-height: 300px; overflow: auto; padding: 2px 0; background: var(--page); }
.pvvals > p { padding: 8px 10px; margin: 0; font-size: 13px; }
label.pvval { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; margin: 0; padding: 4px 10px; color: var(--ink); font-size: 13.5px; cursor: pointer; }
label.pvval:hover { background: var(--sunken); }
label.pvval .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
label.pvval .n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-left: 10px; }

/* ---- the answer ------------------------------------------------------------------------------------------------------------- */
.pvbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; }
.pvbar .l, .pvbar .r { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pvbar select { width: auto; margin: 0; padding: 4px 8px; font-size: 13px; }
.pvbar .r button { padding: 5px 11px; font-size: 13px; }
.pvbar-t { font-weight: 650; font-size: 14px; margin-right: 6px; }
.pvtog { padding: 4px 10px; font-size: 12.5px; font-weight: 550; color: var(--muted); }
.pvtog[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.pvsigma { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 4px 8px; font-size: 12.5px; font-weight: 600; }
.pvsigma .s { font-family: var(--font-text); font-size: 16px; line-height: 1; font-weight: 500; }
.pvres .pvmeta { margin: 0; }
.pvres { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pvres.busy .pvout { opacity: .5; transition: opacity .15s .15s; }
@media (prefers-reduced-motion: reduce) { .pvres.busy .pvout { transition: none; } .pvshelf { transition: none; } }
.pvout > .notice, .pvout > .pvinfo { margin-bottom: 8px; }
.pvinfo { font-size: 13px; color: var(--muted); border-left: 3px solid var(--sea); background: var(--surface); padding: 6px 12px; border-radius: var(--radius); }
.pvinfo a { color: var(--ink); }
.pverr { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; }
.pverr strong { color: var(--ink); font-weight: 600; }
.pvwait { padding: 20px 4px; }

.pvwrap { overflow: auto; max-height: calc(100vh - 120px); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); outline: none; }
.pvt, .pvlt { border-collapse: separate; border-spacing: 0; font-size: 13px; width: max-content; min-width: 100%; }
.pvt th, .pvt td, .pvlt th, .pvlt td { padding: 5px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
:is(.pvt, .pvlt) thead th { position: sticky; top: 0; z-index: 2; background: var(--sunken); color: var(--muted); font-weight: 600; text-align: left; vertical-align: bottom; }
:is(.pvt, .pvlt) thead th.num { text-align: right; }
.pvt thead th.grp { text-align: center; color: var(--ink); border-bottom-color: color-mix(in srgb, var(--muted) 45%, var(--rule)); }
:is(.pvt, .pvlt) th.sort { cursor: pointer; user-select: none; }
:is(.pvt, .pvlt) th.sort:hover { color: var(--ink); }
:is(.pvt, .pvlt) th.sort[aria-sort] .hl::after { content: "↓"; margin-left: 4px; color: var(--ink); }
:is(.pvt, .pvlt) th.sort[aria-sort="ascending"] .hl::after { content: "↑"; }
.pvlt th .sn { font-size: 10.5px; color: var(--ink); margin-left: 3px; font-variant-numeric: tabular-nums; }
/* a column's edge, dragged to change its width */
:is(.pvt, .pvlt) th { position: sticky; }
.rz { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; }
.rz::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 2px; background: transparent; }
th:hover > .rz::after, .resizing .rz::after { background: var(--faint); }
.resizing { cursor: col-resize; user-select: none; }
.pvt .cs { border-left: 1px solid var(--rule); }
/* the row-field columns stay on the left (offsets from builder.js) */
:is(.pvt, .pvlt) [data-lc] { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; }
:is(.pvt, .pvlt) thead [data-lc] { z-index: 3; background: var(--sunken); }
:is(.pvt, .pvlt) .edge { border-right: 1px solid var(--rule); }
.pvt .rh { font-weight: 500; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
.pvt td.rh.rep { color: transparent; }
.pvt td.num, .pvlt td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pvt td.fig, .pvlt td.fig { font-family: var(--font-figure); font-stretch: 85%; font-size: 13.5px; }
.pvt td.ly { color: var(--muted); }
.pvt td.tot, .pvt td.sub { background-color: color-mix(in srgb, var(--sunken) 30%, var(--surface)); }
.pvt td.tot { font-weight: 650; }
.pvt td .closed, .pvt td .nodata { font-family: var(--font-text); color: var(--muted); font-size: 12.5px; }
.pvt td .closed { font-style: italic; }
.pvt td .delta.none { color: var(--muted); }
:is(.pvt, .pvlt) tbody tr:hover td { background-color: color-mix(in srgb, var(--sunken) 55%, var(--surface)); }
.pvt tr.grp td { font-weight: 650; }
.pvt tr.grp.g0 td { background-color: var(--pv-grp0); }
.pvt tr.grp.g1 td { background-color: var(--pv-grp1); }
.pvt tr.grp.g1 td.rh { font-weight: 600; }
.pvt tr.leaf td.rh { font-weight: 450; }
.pvt tr.others td.rh .lab { font-style: italic; }
.pvt tr.gap td.rh { color: var(--muted); }
:is(.pvt, .pvlt) .tw { border: 0; background: none; padding: 0 6px 0 0; width: 18px; font-size: 12px; color: var(--muted); vertical-align: 0; }
:is(.pvt, .pvlt) .tw::before { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); }
:is(.pvt, .pvlt) .tw[aria-expanded="true"]::before { transform: rotate(45deg) translate(-1px, -1px); }
:is(.pvt, .pvlt) tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; background: var(--surface); position: sticky; bottom: 0; z-index: 1; }
:is(.pvt, .pvlt) tfoot td[data-lc] { z-index: 2; }
.pvt td.go { cursor: pointer; }
.pvt td.go:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.pvt td.go:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pvt.heat td.hm.pos { background-color: color-mix(in srgb, var(--pv-heat) calc(var(--a) * 46%), var(--surface)); }
.pvt.heat td.hm.neg { background-color: color-mix(in srgb, var(--smoke) calc(var(--a) * 40%), var(--surface)); }
.pvotb { display: inline-block; margin-left: 7px; padding: 0 4px; font-size: 10.5px; font-weight: 650; line-height: 1.45; color: var(--sea); border: 1px solid currentColor; border-radius: 2px; vertical-align: 1px; }
.pvotb.part { border-style: dashed; }
.pvlt td.when { font-variant-numeric: tabular-nums; }
.pvlt td.clip, .pvlt th.clip { overflow: hidden; text-overflow: ellipsis; }
.pvlt td.rh { font-weight: 550; }
.pvlt tr.grp td { background: var(--pv-grp0); font-weight: 650; }
.pvlt tr.grp .cnt { color: var(--muted); font-weight: 500; font-size: 12px; }
.pvlt tfoot .cnt { color: var(--muted); font-weight: 500; }

.pvchart svg.chart { max-width: 100%; }
.hb.click .hbrow:disabled { cursor: default; }
.hb .bar.otb, .hbrow .bar.otb { background: var(--c-otb); }

/* ---- drawer (the reservations behind a number) and dialogs --------------------------------------------------------------------- */
dialog.pvdrawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(880px, 100vw); max-width: 100vw; border-width: 0 0 0 1px; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; }
dialog.pvdrawer:not([open]) { display: none; }
.pvdhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 10px; border-bottom: 1px solid var(--rule); }
.pvdhead h2 { font-size: 16px; }
.pvdhead p { margin: 2px 0 0; font-size: 12.5px; }
.pvdbody { padding: 12px 20px 20px; overflow: auto; min-height: 0; flex: 1; }
.pvdt td, .pvdt th { white-space: nowrap; }
.pvdt tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
dialog.pvdlg { width: min(460px, 94vw); }
dialog.pvdlg label.check { margin: 2px 0 10px; }
dialog.pvdlg .muted { font-size: 13px; }

/* ---- narrower: the fields go into a sheet; the phone: the question folds into one line, the answer comes first ----------------- */
@media (max-width: 1100px) {
  .pvbench { grid-template-columns: minmax(0, 1fr); }
  .pvfields { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; top: auto; max-height: 78vh; border-radius: 0; border-width: 1px 0 0; display: none; }
  .pvfields.open { display: flex; }
  .pvfhead { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 0; }
  .pvfbtn { display: inline-block; margin-bottom: 8px; padding: 5px 12px; font-weight: 600; }
  .pvshelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvshelf-grid.list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pvshelf-grid.list .columns { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pvpage { gap: 10px; }
  .pvask { padding: 10px 12px; margin: 0 -4px; }
  .pvask-in { font-size: 17px; }
  .pvask-go { padding: 7px 12px; }
  .pvask-list { right: 0; }
  .pvask-ex { display: none; }
  .pvask:focus-within .pvask-ex { display: flex; }
  .pvgal { order: 3; }
  .pvbench { order: 2; }
  .pvq { padding: 0 12px 10px; }
  .pvmode { margin: 0 -12px 8px; padding: 0 12px; }
  .pvmodeb { padding: 8px 10px 6px 0; margin-right: 8px; }
  .pvmodeb .s { display: none; }
  .pvq-sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
  .pvq-sum p { margin: 0; font-size: 13.5px; line-height: 1.4; min-width: 0; }
  .pvq-sum .pvedit { flex: 0 0 auto; padding: 5px 12px; }
  .pvctl { display: none; }
  .pvshelf-grid { display: none; }
  .pvq.open .pvctl { display: flex; margin-top: 8px; }
  .pvq.open .pvshelf-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pvctl-b { min-width: 0; width: 100%; }
  .pvbar { flex-direction: column; align-items: stretch; }
  .pvbar .r { justify-content: flex-start; }
  .pvwrap { max-height: 72vh; }
  .pvt .rh { max-width: 38vw; }
  .pvpcols { grid-template-columns: 1fr 1fr; }
  .pvprow input[type="date"] { max-width: 42vw; }
  .pvgrid { padding: 10px; }
  .pvdhead { padding: 12px 14px 8px; flex-direction: column; }
  .pvdbody { padding: 10px 14px 16px; }
}