/* Investigator mode (30-6, lane INVESTIGATOR, 4 Oct 2026): the opt-in price calendar on the product page (mock-10, judged
   44/55). One switch; on, a chain x day grid of the last days we hold (lighter = cheaper, a dot = promotion day) and, per
   chain, the line of every day we hold. Tokens only (tokens.css); no colour carries meaning alone (numbers are printed). */
.inv{margin-top:var(--space-6,24px)}
.inv-switch{margin:0}
.inv-switch__btn{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;text-align:left;cursor:pointer;color:inherit;font:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card)}
.inv-switch__text{flex:1;display:flex;flex-direction:column;min-width:0}
.inv-switch__title{font-weight:var(--fw-bold)}
.inv-switch__sub{color:var(--muted)}
.inv-switch__track{flex:none;width:52px;height:32px;border-radius:16px;background:var(--line-strong);position:relative;transition:background var(--motion-fast)}
.inv-switch__knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--motion-fast)}
.inv-switch__btn[aria-checked="true"] .inv-switch__track{background:var(--visnja)}
.inv-switch__btn[aria-checked="true"] .inv-switch__knob{transform:translateX(20px)}
.inv-range{margin:14px 2px 6px;color:var(--ink-2)}
.inv-grid{--inv-c:var(--visnja)}
.inv-cells{display:grid;grid-template-columns:repeat(var(--inv-cols,7),minmax(0,1fr));gap:2px;width:100%}
.inv-head{padding:4px 4px 6px}
.inv-day{display:flex;flex-direction:column;align-items:center;line-height:1.15;color:var(--muted);font-variant-numeric:tabular-nums}
.inv-day b{color:var(--ink-2);font-weight:var(--fw-semi)}
.inv-chain{border-top:1px solid var(--line)}
.inv-chain>summary{display:block;list-style:none;cursor:pointer;padding:6px 4px 8px;min-height:44px}
.inv-chain>summary::-webkit-details-marker{display:none}
.inv-chain[open]>summary{background:var(--line-2)}
.inv-name{display:block;margin-bottom:4px;font-weight:var(--fw-semi)}
.inv-cell{position:relative;display:flex;align-items:center;justify-content:center;height:40px;border-radius:6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;color:var(--ink);background:color-mix(in srgb,var(--inv-c) var(--inv-mix,4%),var(--surface));border:1px solid color-mix(in srgb,var(--inv-c) 18%,var(--line))}
.inv-cell--0{--inv-mix:4%}
.inv-cell--1{--inv-mix:14%}
.inv-cell--2{--inv-mix:24%}
.inv-cell--3{--inv-mix:34%}
.inv-cell--4{--inv-mix:46%}
.inv-cell--none{background:none;border:0}
.inv-cell--promo::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--surface)}
.inv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.inv-line{padding:4px 4px 12px}
.inv-plot{position:relative;margin:10px 0 6px}
.inv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.inv-path{fill:none;stroke:var(--chart-line);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.inv-low{stroke:var(--save);stroke-width:1.5;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.inv-mark{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--surface);transform:translate(-50%,-50%)}
.inv-axis{display:flex;justify-content:space-between;color:var(--muted);font-variant-numeric:tabular-nums}
.inv-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 2px 0}
.inv-key{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.inv-key--cheap{background:linear-gradient(90deg,color-mix(in srgb,var(--visnja) 4%,var(--surface)),color-mix(in srgb,var(--visnja) 46%,var(--surface)));border:1px solid var(--line)}
.inv-key--promo{width:8px;height:8px;border-radius:50%;background:var(--ink);vertical-align:1px}
/* Dark: the tint is the light ink on a dark surface, so more tint reads lighter; the scale turns round so that, as in
   light, the cheapest cell is the lightest and the legend "lighter = cheaper" stays true. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .inv-grid{--inv-c:var(--visnja-ink)}
  :root:not([data-theme="light"]) .inv-cell--0{--inv-mix:46%}
  :root:not([data-theme="light"]) .inv-cell--1{--inv-mix:34%}
  :root:not([data-theme="light"]) .inv-cell--2{--inv-mix:24%}
  :root:not([data-theme="light"]) .inv-cell--3{--inv-mix:14%}
  :root:not([data-theme="light"]) .inv-cell--4{--inv-mix:4%}
  :root:not([data-theme="light"]) .inv-key--cheap{background:linear-gradient(90deg,color-mix(in srgb,var(--visnja-ink) 46%,var(--surface)),color-mix(in srgb,var(--visnja-ink) 4%,var(--surface)))}
}
:root[data-theme="dark"] .inv-grid{--inv-c:var(--visnja-ink)}
:root[data-theme="dark"] .inv-cell--0{--inv-mix:46%}
:root[data-theme="dark"] .inv-cell--1{--inv-mix:34%}
:root[data-theme="dark"] .inv-cell--2{--inv-mix:24%}
:root[data-theme="dark"] .inv-cell--3{--inv-mix:14%}
:root[data-theme="dark"] .inv-cell--4{--inv-mix:4%}
:root[data-theme="dark"] .inv-key--cheap{background:linear-gradient(90deg,color-mix(in srgb,var(--visnja-ink) 46%,var(--surface)),color-mix(in srgb,var(--visnja-ink) 4%,var(--surface)))}
@media (max-width:359px){.inv-cells{gap:1px}.inv-cell{letter-spacing:-.05em}}
@media (forced-colors:active){.inv-cell--promo::after,.inv-mark,.inv-key--promo{forced-color-adjust:none}}