/* Versions: the version button and drawer, the autocomplete field, the strip under the bar, change
   markers, ghosts of deleted rows, change-type chips, diff and history blocks, and the History view. */

/* Version button in the top bar; it opens the version drawer */
.range-btn{display:inline-flex;align-items:center;gap:var(--space-2);max-width:min(560px,60vw);font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--pill-radius);padding:var(--space-1) var(--space-3);cursor:pointer;white-space:nowrap}
.range-btn:hover,.range-btn[aria-expanded="true"]{border-color:var(--ink-2)}
.range-btn svg{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;color:var(--muted)}
.rc-lbl{color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.rc-val{font-weight:var(--fw-strong);overflow:hidden;text-overflow:ellipsis;min-width:0}
.rc-sep,.rc-caret{color:var(--muted)}
.rc-counts{display:inline-flex;gap:var(--space-1);font-variant-numeric:tabular-nums}

/* Version drawer */
.range-drawer{width:min(var(--w-drawer-range),94vw)}
.range-drawer .drawer-body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-4)}
.rd-legend{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--accent-ink);padding:0;margin-bottom:var(--space-1)}
.rd-mode{border:0;padding:0;margin:0}
.rd-help{margin:calc(-1 * var(--space-2)) 0 0}
.rd-arrow{text-align:center;color:var(--muted);margin:calc(-1 * var(--space-2)) 0}
.rd-presets{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.rd-summary{padding:var(--space-2) var(--space-3);background:var(--range-wash);border-radius:var(--radius-sm);font-size:var(--fs-md);line-height:1.45}
.rd-types{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1)}
.rd-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:auto}
.rd-actions .primary-btn:disabled{opacity:var(--from-fade);cursor:not-allowed}
.pk-chip{font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--pill-radius);padding:calc(0.125rem * var(--dz)) calc(0.5625rem * var(--dz));cursor:pointer}
.pk-chip:hover{border-color:var(--ink-2)}

/* Autocomplete field (combobox.js) */
.cb{position:relative}
.cb-label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-2);margin-bottom:calc(0.1875rem * var(--dz))}
.cb-field{display:flex;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface-2)}
.cb-field input{flex:1;min-width:0;font:inherit;font-size:var(--fs-md);padding:calc(0.4375rem * var(--dz)) calc(0.625rem * var(--dz));border:0;background:transparent;color:var(--ink)}
.cb-field input:focus{outline:none}
.cb-toggle{font:inherit;color:var(--muted);background:none;border:0;border-left:1px solid var(--line);padding:0 calc(0.625rem * var(--dz));cursor:pointer}
.cb-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:var(--z-picker);max-height:min(380px,55dvh);overflow-y:auto;margin:0;padding:var(--space-1);list-style:none;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--control-radius);box-shadow:var(--shadow-overlay)}
.cb-list li[role=option]{display:grid;grid-template-columns:1fr auto;gap:calc(0.0625rem * var(--dz)) var(--space-2);padding:calc(0.375rem * var(--dz)) var(--space-2);border-radius:var(--radius-xs);cursor:pointer;font-size:var(--fs-md);scroll-margin-top:32px}
.cb-list li.cb-group .cb-main{color:var(--accent-ink)}
.cb-head{position:sticky;top:calc(-1 * var(--space-1));z-index:1;background:var(--surface-2);padding:var(--space-2) var(--space-2) var(--space-1);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted);border-bottom:1px solid var(--grid)}
.cb-head ~ .cb-head{margin-top:var(--space-1)}
.cb-list li.is-active{background:var(--grid)}
.cb-list li[aria-selected="true"]{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent)}
.cb-list li[aria-disabled="true"]{opacity:var(--from-fade);cursor:not-allowed}
.cb-main{font-weight:var(--fw-strong)}
.cb-meta{justify-self:end;font-size:var(--fs-xs);color:var(--muted)}
.cb-meta .ctype{text-transform:none;letter-spacing:0}
.cb-detail{grid-column:1 / -1;color:var(--ink-2);font-size:var(--fs-sm)}
.cb-why{grid-column:1 / -1;color:var(--neg);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.cb-empty{padding:var(--space-2);font-size:var(--fs-sm);color:var(--muted)}
.cb-note{margin:calc(0.1875rem * var(--dz)) 0 0;font-size:var(--fs-xs);color:var(--neg);min-height:1em}

/* Strip under the bar: demo notice, comparison summary, earlier-version notice */
.ver-strip{position:sticky;top:var(--bar-h);z-index:var(--z-bar);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);padding:calc(0.3125rem * var(--dz)) var(--pad);font-size:var(--fs-md);background:var(--range-wash);border-bottom:1px solid var(--line)}
.ver-strip.is-demo{background:var(--demo-wash)}
.ver-strip .sep{color:var(--muted)}
.warn{color:var(--neg);font-weight:var(--fw-semibold)}
/* Capitalised badges: DEMO HISTORY, FROM / TO */
.demo-tag,.hbadge{font-size:var(--fs-xs);font-weight:var(--fw-heavy);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--pill-radius)}
.demo-tag{color:var(--demo);border:1px solid var(--demo);padding:calc(0.0625rem * var(--dz)) var(--space-2)}

/* Change markers: + added, ~ changed, − deleted */
.chg{display:inline-grid;place-items:center;min-width:1rem;height:1rem;padding:0 calc(0.1875rem * var(--dz));margin-left:var(--space-1);border-radius:var(--radius-xs);font:var(--fw-bold) var(--fs-xs)/1 var(--font);color:var(--on-chg);vertical-align:1px;cursor:pointer}
.chg.static{cursor:default;margin-left:0}
.chg-added{background:var(--chg-add)}
.chg-edited{background:var(--chg-edit)}
.chg-deleted{background:var(--chg-del)}
.chg-line{display:flex;gap:var(--space-1);font-size:var(--fs-xs);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;line-height:1.2}
.chgcol{width:28px;text-align:center}
.n-add,.n-edit,.n-del{font-weight:var(--fw-bold)}
.n-add{color:var(--chg-add)}
.n-edit{color:var(--chg-edit)}
.n-del{color:var(--chg-del)}

/* Ghosts: things deleted since From, shown where they were */
.proc.ghost,.fstep.ghost{border-style:dashed;border-color:var(--chg-del);background:var(--chg-del-wash)}
.proc.ghost{opacity:.85}
.proc.ghost .pname,.fstep.ghost .t{text-decoration:line-through}
.ghost-row td{color:var(--muted);text-decoration:line-through;background:var(--chg-del-wash)}
.ghost-row td.chgcol{text-decoration:none}
.ghost-card{border-style:dashed;border-color:var(--chg-del)}
.ghost-note{background:var(--chg-del-wash);border-radius:var(--radius-xs);padding:calc(0.375rem * var(--dz)) var(--space-2);font-size:var(--fs-md)}

/* Change-type chips */
.ctype{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-bold);border-radius:var(--pill-radius);padding:calc(0.0625rem * var(--dz)) var(--space-2);margin-right:var(--space-1);white-space:nowrap;background:var(--grid);color:var(--ink-2)}
.ctype-correction{background:var(--chg-edit-wash);color:var(--chg-edit)}
.ctype-business-change{background:var(--chg-add-wash);color:var(--chg-add)}
.ctype-tool-change{background:var(--series-track);color:var(--m-system)}
.ctype-restructure{background:var(--grid);color:var(--muted)}
.ctype.draft{background:var(--demo-wash);color:var(--demo)}

/* Diff and history blocks in panels and pages */
.diffbox{margin:var(--space-3) 0;padding:var(--space-2) var(--space-3);border:1px solid var(--chg-edit);border-radius:var(--radius-xs);background:var(--chg-edit-wash)}
.diffbox.none{border-color:var(--line);background:var(--surface-2)}
.diffbox h4,.hist h4{margin:0 0 calc(0.375rem * var(--dz));font-size:var(--fs-md)}
.card .hist h4{font-size:var(--t-title);font-weight:var(--fw-bold)}
table.diff{font-size:var(--fs-md)}
table.diff td{padding:var(--space-1) var(--space-2)}
.before{color:var(--chg-del);text-decoration:line-through;text-decoration-thickness:1px}
.after{color:var(--chg-add);font-weight:var(--fw-semibold)}
.linkdiff{list-style:none;margin:calc(0.375rem * var(--dz)) 0 0;padding:0;font-size:var(--fs-md)}
.linkdiff li,.change-ops ul li{margin:calc(0.1875rem * var(--dz)) 0}
.hist{margin-top:var(--space-3)}
.hist-list{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.hist-list li{margin:0 0 calc(0.125rem * var(--dz))}
.hist-list li.in-range{background:var(--range-wash)}
.hist-item{all:unset;box-sizing:border-box;width:100%;display:flex;flex-wrap:wrap;gap:calc(0.125rem * var(--dz)) var(--space-2);align-items:baseline;padding:calc(0.3125rem * var(--dz)) var(--space-2);border-radius:0 var(--radius-xs) var(--radius-xs) 0;cursor:pointer;font-size:var(--fs-md)}
.hdate{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.hsum{flex:1 1 100%;color:var(--ink)}
.hby{font-size:var(--fs-sm)}
.change-ops{list-style:none;padding:0;margin:0;font-size:var(--fs-md)}
.change-ops > li{padding:var(--space-2) 0;border-top:1px solid var(--grid)}
.change-ops ul{list-style:none;padding:0 0 0 var(--space-3);margin:var(--space-1) 0 0}

/* History view */
.drafts-bar{margin-bottom:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface);border:var(--card-border);border-bottom:var(--card-border-b);border-radius:var(--card-radius);font-size:var(--fs-md)}
.drafts-bar p{margin:calc(0.125rem * var(--dz)) 0}
table.history tr.in-range td{background:var(--range-wash)}
table.history tr.out-range td:not(.rad){opacity:var(--from-fade)}
table.history tr.is-draft td:nth-child(4){background:var(--demo-wash)}
.hbadge{display:inline-block;padding:0 calc(0.4375rem * var(--dz));margin-right:calc(0.375rem * var(--dz));vertical-align:1px}
.hbadge.from{background:var(--series-track);color:var(--m-system)}
.hbadge.to{background:var(--accent-wash);color:var(--accent-ink)}
.h-range{margin:0 0 0 auto;font-size:var(--fs-md);color:var(--ink-2);white-space:nowrap}
.rad{width:28px;text-align:center}
.rad input{accent-color:var(--m-system)}
.rad input:disabled{opacity:var(--from-fade)}
.cid{font-size:var(--fs-sm);color:var(--muted)}