/* "Pirmoko krepšelis 2026" (/analitika/pirmoko-krepselis-2026) — the furniture
   of ONE study, loaded on top of analitika.css and only by that article.
   Everything here is prefixed `.pk-`; the shared rubric styles stay untouched.

   Same rules as the sheet it extends: no literal colours, every value resolves
   to a sitewide token from :root in app.src.css, and the hairlines are
   color-mix()ed off --c-fg because --c-border is intentionally transparent.
   Dark mode therefore comes for free — analitika.css already redefines
   --an-border/--an-divider under [data-theme="dark"] and this file reuses them.

   Accent policy stays narrow: --c-success for the winning/cheapest signal,
   --c-promo for the promo marker, everything else is ink and muted ink. */


/* ── Fixing-date badge ────────────────────────────────────────────────── */
/* Sits between h1 and the trust block. Says the two things a reader has to
   know before reading any number: WHEN, and that it never changes. */
.an > .pk-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--c-muted);
}
.pk-badge time { font-variant-numeric: tabular-nums; color: var(--c-fg); font-weight: 600 }
.pk-badge-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--c-success);
}


/* ── Summary blocks (full vs partial coverage) ────────────────────────── */
/* Two separate panels rather than one table with a divider: the split is the
   argument, and a shared table body invites the eye to rank across it. */
.an > .pk-summary {
  margin: 1.75rem 0;
  padding: 18px;
  background: var(--c-surface);
  border: 1px solid var(--an-border);
  border-radius: var(--r-sm);
}
.an > .pk-summary--partial { background: none }

.pk-summary-h {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-fg);
}
.pk-summary-sub {
  margin: 0 0 .9rem;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--c-muted);
}

/* Shared shape for the two summary tables and the loyalty one. Deliberately
   NOT .an-table: those live in a horizontal scroller, and these three must fit
   a 360px screen with no sideways scroll at all (they are the blocks people
   screenshot). Hence few columns, normal wrapping, tightened padding. */
.pk-sum-table,
.pk-loy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  line-height: 1.4;
  table-layout: fixed;
}
.pk-sum-table th,
.pk-sum-table td,
.pk-loy-table th,
.pk-loy-table td {
  padding: 9px 4px 9px 0;
  border-bottom: 1px solid var(--an-divider);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pk-sum-table thead th,
.pk-loy-table thead th {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
  border-bottom-color: var(--an-border);
}
.pk-sum-table tbody th,
.pk-loy-table tbody th { font-weight: 600; color: var(--c-fg) }
.pk-sum-table tbody tr:last-child th,
.pk-sum-table tbody tr:last-child td,
.pk-loy-table tbody tr:last-child th,
.pk-loy-table tbody tr:last-child td { border-bottom: none }

.pk-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pk-sum-table thead th:not(:first-child),
.pk-loy-table thead th:not(:first-child) { text-align: right }
/* …and the BODY cells must follow the same axis. `.pk-num` alone loses to the
   `.pk-sum-table td` base rule above (0,1,1 beats 0,1,0), which is why the
   headers sat right while their numbers sat left. Qualifying the class with the
   table restores the intended alignment instead of bumping `.pk-num` globally,
   which would also hit the matrix where the base rule is already right. */
.pk-sum-table th.pk-num,
.pk-sum-table td.pk-num,
.pk-loy-table th.pk-num,
.pk-loy-table td.pk-num { text-align: right }
.pk-num--lead { font-weight: 700; color: var(--c-fg) }
.pk-num--muted { color: var(--c-muted) }

/* The cheapest full-coverage basket. One green number and one tag — the row is
   not filled or boxed, so the table still reads as data rather than as a
   recommendation. */
.pk-sum-table .is-cheapest .pk-num--lead { color: var(--c-success) }
.pk-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--c-success-bg);
  color: var(--c-success);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: 1px;
}

/* Coverage chip. Muted by default and only quiet-green at 27/27, because the
   number it carries is the caveat, not the achievement. */
.pk-cov {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--an-border);
  background: var(--c-bg);
  color: var(--c-muted);
  font-size: .66rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.pk-cov--full { color: var(--c-success); border-color: var(--c-success-border) }
.pk-cov--inline { margin-left: 6px }

/* Which positions a partial seller was missing, under its row. */
.pk-missing-row td {
  padding-top: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--c-muted);
  border-bottom: 1px solid var(--an-divider);
}
.pk-sum-table tbody tr.pk-missing-row:last-child td { border-bottom: none }


/* ── Loyalty-card panel — the screenshot asset ────────────────────────── */
/* Must make its point captured alone on a cheap Android: self-contained
   heading, its own date line, one table that never scrolls sideways, and the
   conclusion sentence inside the same box. */
.an > .pk-loyalty {
  margin: 2rem 0;
  padding: 20px;
  border: 1px solid var(--an-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.pk-loyalty-h {
  margin: 0 0 .25rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--c-fg);
}
.pk-loyalty-sub {
  margin: 0 0 1rem;
  font-size: .82rem;
  color: var(--c-muted);
}
.pk-loyalty-sub time { font-variant-numeric: tabular-nums }
.pk-loy-prog {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--c-muted);
}
/* The saving is the point of the block, so it is the only coloured column. */
.pk-save { color: var(--c-success); font-weight: 700 }
.pk-save-pct {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  opacity: .85;
}
.pk-loyalty-foot {
  margin: .9rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--c-muted);
}


/* ── The 27 × 7 matrix ────────────────────────────────────────────────── */
.an > .pk-matrix { margin: 2rem 0 }

/* Mode switch. A segmented control, not a <select>: three options that must be
   comparable at a glance, and the current one has to stay visible. */
.pk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.pk-toolbar-lbl {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-muted);
}
.pk-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--an-border);
  border-radius: var(--r-pill);
  background: var(--c-bg);
}
.pk-seg-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.pk-seg-btn:hover { color: var(--c-fg) }
/* Selected state is driven by aria-pressed, so the accessible state and the
   visible state are the SAME fact and cannot fall out of sync. */
.pk-seg-btn[aria-pressed="true"] {
  background: var(--c-fg);
  color: var(--c-bg);
}
.pk-seg-btn:focus-visible,
.pk-av--btn:focus-visible {
  outline: 2px solid var(--c-success);
  outline-offset: 2px;
}

.pk-modenote {
  margin: 0 0 .7rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--c-muted);
  max-width: var(--an-measure);
}

/* ── Mode switching is pure CSS ──
   Each cell carries all three values; exactly one is shown. The DEFAULT (no
   mode class on the wrapper) is the kvitas-with-promos view, so the table is
   correct and complete before Alpine runs — and stays correct if it never
   does. Alpine only ever adds/removes ONE class up on .pk-matrix. */
.pk-v { display: none }
.pk-v--kvitas_su { display: inline }
.pk-mode-kvitas_be .pk-v--kvitas_su,
.pk-mode-norm_su  .pk-v--kvitas_su { display: none }
.pk-mode-kvitas_be .pk-v--kvitas_be { display: inline }
.pk-mode-norm_su  .pk-v--norm_su  { display: inline }

/* …but inside the MATRIX the three values must not change the column width
   when they swap: "34,96 €" and "1,29 €/vnt" are different lengths, and with an
   auto table layout every toggle reflowed all seven seller columns (measured:
   93→99px on Maxima). So in the matrix the values are stacked in one grid cell
   and hidden with `visibility`, which keeps their box: the column is sized once,
   to the widest of the three, and never moves again. `display` switching stays
   for .pk-v elsewhere (the mode note under the toggle), where reflow is the
   point. Specificity: `.pk-vals > .pk-v` (0,2,0) outranks the `.pk-v--x` rules
   above, and the `.pk-mode-*` overrides below (0,3,0) outrank both. */
.pk-vals {
  display: inline-grid;
  justify-items: end;
}
.pk-vals > .pk-v {
  grid-area: 1 / 1;
  display: block;
  visibility: hidden;
}
.pk-vals > .pk-v--kvitas_su { visibility: visible }
.pk-mode-kvitas_be .pk-vals > .pk-v--kvitas_su,
.pk-mode-norm_su  .pk-vals > .pk-v--kvitas_su { visibility: hidden }
.pk-mode-kvitas_be .pk-vals > .pk-v--kvitas_be { visibility: visible }
.pk-mode-norm_su  .pk-vals > .pk-v--norm_su    { visibility: visible }

/* Row minimum, likewise pre-marked per mode: the cheapest cell changes when a
   till total becomes a unit price, so one static `is-best` would be wrong in
   two views out of three. */
.pk-table .pk-best--kvitas_su { font-weight: 700 }
.pk-mode-kvitas_be .pk-table .pk-best--kvitas_su,
.pk-mode-norm_su  .pk-table .pk-best--kvitas_su { font-weight: 400 }
.pk-mode-kvitas_be .pk-table .pk-best--kvitas_be,
.pk-mode-norm_su  .pk-table .pk-best--norm_su { font-weight: 700 }

/* Position column: three stacked facts (number+name, spec, quantity) in the
   frozen column, so a row is identifiable without scrolling back. */
.pk-table tbody th { padding-top: 12px; padding-bottom: 12px }
.pk-pos { display: block; font-weight: 600; color: var(--c-fg) }
.pk-spec {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-muted);
}
.pk-qty {
  display: inline-block;
  margin-top: 3px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* Header: seller name over its coverage chip. */
.pk-table thead th { text-align: right; vertical-align: bottom }
.pk-table thead th .pk-cov { display: block; margin-top: 3px; margin-left: auto; width: max-content }
.pk-table thead th:first-child { text-align: left }

/* The number IS the link — 189 separate icons would be noise. Underline only
   on hover/focus so the column still reads as numbers. */
.pk-cell-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--c-fg) 30%, transparent);
}
.pk-cell-link:hover,
.pk-cell-link:focus-visible {
  color: var(--c-success);
  border-bottom-color: currentColor;
}
.pk-cell-link:focus-visible { outline: 2px solid var(--c-success); outline-offset: 2px }

/* Promo marker. Hidden outside the promo views: a "%" next to a base price
   would claim a discount that view is specifically excluding. */
.pk-promo {
  margin-left: 3px;
  color: var(--c-promo);
  font-size: .7rem;
  font-weight: 700;
  vertical-align: 2px;
}
/* `visibility`, not `display`: removing the marker from flow shrank every cell
   that had one, so switching to the no-promo view nudged the whole column. It
   keeps its box and stops claiming a discount the view excludes. */
.pk-mode-kvitas_be .pk-promo { visibility: hidden }

/* Indivisible-package marker (methodology: such cases are flagged). */
.pk-over {
  margin-left: 3px;
  color: var(--c-muted);
  font-size: .6rem;
  vertical-align: 2px;
}

/* Totals row. Sticky at the bottom of the scroller so the sums stay in view
   while reading down 27 rows; the partial ones stay muted, never bold. */
.pk-table tfoot th,
.pk-table tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--c-bg);
  border-top: 2px solid var(--an-border);
  border-bottom: none;
  font-weight: 700;
  box-shadow: 0 -1px 0 var(--an-divider);
}
.pk-table tfoot th { z-index: 2 }
.pk-tot .pk-cov { display: block; margin-top: 3px; margin-left: auto; width: max-content }
.pk-tot--partial { color: var(--c-muted); font-weight: 500 }


/* ── Availability chips ───────────────────────────────────────────────── */
/* Rendered only when a stock check exists for that cell — see the macro. The
   colour never carries the meaning alone: every chip also has a word or a
   count, so it survives greyscale and colour blindness (WCAG 1.4.1). */
.pk-av {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: 1px;
}
.pk-av-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: currentColor }
.pk-av--yes { color: var(--c-success); background: var(--c-success-bg) }
.pk-av--no  { color: var(--c-muted); background: var(--c-chip) }

.pk-av-wrap { position: relative; display: inline-block }
.pk-av--btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: .64rem; font-weight: 700 }

/* Branch list. Absolutely positioned inside the scroller, so it must not push
   the row open; z-index clears the sticky first column and the sticky tfoot.

   ⚠ KNOWN LIMIT, untestable until stock data exists (every chip is currently
   suppressed — see the availChip macro). The popover lives inside
   .an-tablewrap, which is both a scroll container and `contain: paint`
   (analitika.css:219-231), so it is clipped to the scrollport. In practice it
   is fine — it scrolls with its cell and opens leftward from `right: 0` — but a
   chip in one of the LAST rows will have its popover clipped at the bottom
   edge. Whoever lands the availability data should flip it above the chip for
   rows near the end of the table, and verify at 360px. */
.pk-av-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  display: block;
  min-width: 15rem;
  max-width: 20rem;
  padding: 10px 12px;
  border: 1px solid var(--an-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  box-shadow: 0 8px 24px var(--c-overlay);
  white-space: normal;
  text-align: left;
  font-weight: 400;
}
.pk-av-pop-h {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--c-fg);
  margin-bottom: 4px;
}
.pk-av-pop-list { display: block; font-size: .74rem; line-height: 1.5; color: var(--c-muted) }
.pk-av-pop-list span { display: block }
/* The stock-check date is a DIFFERENT measurement from the price date and is
   labelled every time it appears, so the two can never be read as one. */
.pk-av-pop-date {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--an-divider);
  font-size: .68rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}


/* ── Group-sums table ─────────────────────────────────────────────────── */
.an > .pk-groups { margin: 1.75rem 0 }
.pk-groups .is-empty { font-size: .74rem; font-variant-numeric: tabular-nums }


/* ── School-source list ───────────────────────────────────────────────── */
.an > .pk-sources { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0 }
.an > .pk-sources li {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--an-divider);
  font-size: .95rem;
  line-height: 1.45;
}
.an > .pk-sources li:last-child { border-bottom: none }
.pk-sources span {
  margin-left: 6px;
  font-size: .78rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* Inline provenance note for figures that are NOT from this study's dataset. */
.pk-src { display: block; margin-top: .4rem; font-size: .8rem; color: var(--c-muted) }


/* ── Responsive ───────────────────────────────────────────────────────── */
/* 719px is the sitewide "tables stop fitting" breakpoint (analitika.css,
   metodika.css, palyginimas.css all use it). The matrix keeps its shape and
   scrolls; only the panels tighten, because those must fit a 360px screen
   whole — they are what people screenshot and share. */
@media (max-width: 719px) {
  .an > .pk-summary { padding: 14px }
  .an > .pk-loyalty { padding: 14px }
  .pk-sum-table,
  .pk-loy-table { font-size: .84rem }
  .pk-sum-table th,
  .pk-sum-table td,
  .pk-loy-table th,
  .pk-loy-table td { padding: 8px 3px 8px 0 }
  .pk-loyalty-h { font-size: 1.05rem }
  /* Percentage moves under the euro figure — four columns of numbers at 360px
     would otherwise force the sideways scroll this block must not have. */
  .pk-save-pct { font-size: .7rem }
  .pk-tag { display: inline-block; margin: 3px 0 0 0 }
  .pk-seg { width: 100% }
  .pk-seg-btn { flex: 1 1 auto; text-align: center; padding: 7px 8px; font-size: .76rem }
  .pk-av-pop { right: auto; left: 0; min-width: 12rem; max-width: 74vw }
}