/* The Dates button and drawer, the autocomplete field and change-type chips. */

/* Dates button in the top bar; it opens the Dates 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}

/* Dates 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)}
/* Compare drawer (E45): the order switch, one row per comparison date, the resolved date and message under each */
.compare-drawer{width:min(var(--w-drawer-range),94vw)}
.compare-form .drawer-body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-4)}
.cmp-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.cmp-fields{display:flex;align-items:center;gap:var(--space-2)}
.cmp-fields select,.cmp-fields input[type="date"]{min-width:0;flex:1;box-sizing:border-box;min-height:var(--ctl-h);font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--control-radius);padding:0 calc(0.625rem * var(--dz))}
.cmp-fields select[aria-invalid="true"],.cmp-fields input[aria-invalid="true"]{border-color:var(--neg)}
.cmp-fields input[hidden]{display:none}
.cmp-resolved,.cmp-row .warn{margin:calc(0.1875rem * var(--dz)) 0 0}
.compare-form .link-btn[disabled]{opacity:var(--from-fade);cursor:not-allowed}
.compare-form .rd-actions{flex-wrap:wrap;align-items:center}
/* Period form (E60): a labelled select per parameter, the options, the read-only preview of the generated columns */
.cmp-field{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-sm);color:var(--muted)}
.cmp-field select,.cmp-fields input[type="month"]{min-width:0;box-sizing:border-box;min-height:var(--ctl-h);font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--control-radius);padding:0 calc(0.625rem * var(--dz))}
.cmp-fields input[type="month"]{flex:1}
.cmp-fields input[type="month"][aria-invalid="true"]{border-color:var(--neg)}

.cmp-options{display:flex;flex-direction:column;gap:var(--space-2)}.cmp-opt{display:flex;align-items:center;gap:var(--space-1)}
.cmp-preview{gap:var(--space-2)}.cmp-preview .cmp-resolved{margin:0}
.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}

.warn{color:var(--neg);font-weight:var(--fw-semibold)}

/* 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)}

/* Dates drawer: the date inputs and the chosen quick range */
.rd-group{display:flex;flex-direction:column;gap:var(--space-3)}
.rd-group[hidden]{display:none}
.rd-dates{display:flex;gap:var(--space-3)}
.rd-date{flex:1;min-width:0}
.rd-date input{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--control-radius);padding:calc(0.4375rem * var(--dz)) calc(0.625rem * var(--dz))}
.pk-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-ink)}