/* "/analitika" — the editorial-report section. Local token scope under `.an`,
   same technique as .ad (apie-duomenis.css), .ix (indeksai.css) and .pdv
   (parduotuves.css), but deliberately NOT loaded on top of apie-duomenis.css:
   that family's hero gradient, icon tiles and dark CTA panel are the "blog
   post" register these pages avoid. The reference is a technical report that
   gets cited, not a landing page.

   No literal hex in this file and no new colours: every value resolves to a
   sitewide token from :root in app.src.css (--c-fg/--c-muted/--c-surface/
   --c-bg/--c-success/--c-promo/--r-sm), and the visible borders this design
   needs are color-mix()ed off --c-fg because the sitewide --c-border is
   intentionally transparent (borderless catalogue design). Dark mode is
   therefore inherited for free through [data-theme="dark"] — the site never
   uses prefers-color-scheme.

   Accent policy (kept narrow on purpose): --c-success for links only, and a
   directional colour on the takeaway numbers (down = --c-success, up =
   --c-promo). Headings, rules and tables carry no colour at all. */

/* ── Container + the breakout grid ────────────────────────────────── */
/* Text sits in a ~68-72ch measure; figures and wide tables break out to
   --an-wide while staying centred. Implemented as named grid lines rather
   than negative margins so nothing can overflow the viewport: at 360px the
   flanks collapse to 0 and the gutters hold.

   `min(100% - gutter*2, --an-measure)` for the text track is load-bearing —
   a plain minmax(0, 42rem) shrinks unpredictably once the sum of track maxima
   exceeds the container, which is every phone. */
.an {
  --an-measure: 42rem;   /* text column  ≈ 672px ≈ 68-72 characters */
  --an-wide:    60rem;   /* breakout     ≈ 960px (figures, 19×5 table) */
  --an-gutter:  1rem;
  --an-flank:   calc((var(--an-wide) - var(--an-measure)) / 2);

  --an-border:     color-mix(in srgb, var(--c-fg) 11%, transparent);
  --an-divider:    color-mix(in srgb, var(--c-fg) 9%, transparent);
  --an-link:       var(--c-success);
  --an-link-hover: color-mix(in srgb, var(--c-success) 78%, black);

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--an-gutter), 1fr)
    [wide-start] minmax(0, var(--an-flank))
    [text-start] min(100% - var(--an-gutter) * 2, var(--an-measure)) [text-end]
                 minmax(0, var(--an-flank))
    [wide-end]   minmax(var(--an-gutter), 1fr) [full-end];

  color: var(--c-fg);
  padding: 40px 0 40px;
}

[data-theme="dark"] .an {
  --an-border:  color-mix(in srgb, var(--c-fg) 16%, transparent);
  --an-divider: color-mix(in srgb, var(--c-fg) 12%, transparent);
}

/* CSS Grid only ever positions DIRECT children, so the article body must be a
   flat sequence of `.an > *` — h2 opens a section, it is not wrapped in one.
   A <section> around the prose would trap any <figure> inside it and kill the
   breakout. This is a real constraint on the templates, not a style choice. */
/* `min-width: 0` is not decoration. A grid item's automatic minimum size is its
   min-content width, and an item spanning the `wide` lines pushes that minimum
   back into the flank tracks — which at 360px made the whole document 25px
   wider than the viewport (measured, not theoretical). Overriding the auto
   minimum lets the scroller inside absorb the width instead of the page. */
.an > * { grid-column: text; min-width: 0 }
.an > figure,
.an > .an-keys,
.an > .an-wide { grid-column: wide }

/* ── Typography ───────────────────────────────────────────────────── */
/* Larger than the catalogue's .9375rem base: this is a reading context, not a
   scanning one. Hierarchy is typographic only — no coloured eyebrows, no rules
   above headings, no numbered section chips. */
.an > p,
.an > ul,
.an > ol { font-size: 1.125rem; line-height: 1.65; margin: 0 0 1.15rem }
.an > ul,
.an > ol { padding-left: 1.35rem }
.an > ul { list-style: disc }
.an > ul li,
.an > ol li { margin-bottom: .5rem }

.an > h1 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
  text-wrap: balance;
}
.an > h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 2.75rem 0 .85rem;
}
.an > h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 1.85rem 0 .55rem;
}

/* The lead: same size as body, muted, so it reads as an abstract rather than
   as a pull quote. */
.an > .an-lead { color: var(--c-muted); margin-bottom: 1.5rem }

.an a { color: var(--an-link); text-decoration: underline; text-underline-offset: 2px }
.an a:hover { color: var(--an-link-hover) }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
/* Third restatement of the same six declarations (.cmp-breadcrumb in
   palyginimas.css:23-27, .md-breadcrumb in metodika.css:15-19). Those two
   share apie-duomenis.css and their note says to promote this to
   .ad-breadcrumb if a third family needs it — this family deliberately does
   NOT load that file, so promoting it here would mean pulling in 243 lines of
   hero/card/CTA CSS for a breadcrumb. Kept local; if analitika ever adopts the
   .ad base, retire this block and the other two together. */
.an-breadcrumb { font-size: .82rem; color: var(--c-muted); margin-bottom: 18px }
.an-breadcrumb a { color: inherit; text-decoration: none }
.an-breadcrumb a:hover { text-decoration: underline; color: var(--c-fg) }
.an-breadcrumb span[aria-hidden] { margin: 0 6px; opacity: .6 }
.an-breadcrumb-current { color: var(--c-fg) }

/* ── Trust meta-block (directly under h1, before the lead) ────────── */
/* The first thing a journalist checks: when was this published, when was it
   last touched, where do the numbers come from. Small, but never in a footer. */
.an-meta {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--an-divider);
}
.an-meta p { margin: 0 }
.an-meta time { font-variant-numeric: tabular-nums }
.an-meta-sep { margin: 0 .5rem; opacity: .6 }
.an-meta a { color: var(--an-link) }
/* Byline sits above the dates and carries slightly more weight: the person is
   the accountability signal, the dates are the provenance one. */
.an-byline { font-weight: 600; color: var(--c-fg); margin-bottom: .25rem !important }

/* ── Figures (§5.2) ───────────────────────────────────────────────── */
/* Title and "ŽŪDC / smartakcija.lt" attribution are burned into the PNG by the
   charting system, so a screenshot of the image alone is self-contained; the
   caption only adds period and notes. width/height on the <img> reserve the
   box → CLS stays at 0 without an aspect-ratio rule. */
.an > figure { margin: 2.5rem 0 }
.an > figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  background: var(--c-img);
}
.an figcaption {
  margin-top: .65rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--c-muted);
  max-width: var(--an-measure);
}

/* ── Inline SVG charts (.an-chart) ────────────────────────────────── */
/* Second figure flavour, alongside the PNG above. Used when the chart is a
   handful of editor-typed points rather than a rendered series: it needs no
   asset, no charting run and no fixed-width raster, it re-flows the text at any
   viewport, and it inherits the page font and the theme.

   The PNG carries its own title and attribution burned in; an inline SVG has to
   draw them (.c-title/.c-sub), for the same reason — a screenshot of the chart
   alone must still say what it shows and where it came from.

   Every colour is a CLASS, not a presentation attribute: `fill="var(--c-fg)"`
   is not reliably honoured (presentation attributes are not full CSS values),
   while a class rule is. That also means the whole chart follows
   [data-theme="dark"] for free, like everything else in this file.

   Font sizes here are in USER UNITS of the 960-wide viewBox, not px: they scale
   with the figure. At the 360px viewport the 13px category labels land at ~4.9
   real px, which is why the labels are short — anything longer needs a second
   layout, not a smaller type size. */
/* Scroller + hint, the same arrangement the wide table uses. A 960-unit
   viewBox shrunk into a 328px reading area puts the 13px labels at ~4.5 real
   px: unreadable, and no font-size bump inside the viewBox can fix a 2.7x
   downscale. So below 719px the chart keeps a floor width and SCROLLS, exactly
   like the 4-column table — one behaviour for all wide data on the page. */
.an-chartwrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Same paint-containment fix as .an-tablewrap: without it the over-wide
     child leaks into the document scroll at 360px even though the wrapper
     clips it. */
  contain: paint;
  border-radius: var(--r-sm);
}
.an-chart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.an-chart-scrollhint { display: none }
.an-chart text { fill: var(--c-fg); font-family: inherit }
.an-chart .c-title { font-size: 21px; font-weight: 700; letter-spacing: -.01em }
.an-chart .c-sub  { font-size: 13px; fill: var(--c-muted) }
.an-chart .c-axis { font-size: 12px; fill: var(--c-muted); font-variant-numeric: tabular-nums }
.an-chart .c-cat  { font-size: 13px; font-weight: 600 }
.an-chart .c-cat2 { font-size: 11.5px; fill: var(--c-muted) }
.an-chart .c-val  { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums }
/* The point the article argues from is the only one at full weight. */
.an-chart .c-val--now { font-size: 16px }
.an-chart .c-grid     { stroke: var(--an-divider); stroke-width: 1 }
.an-chart .c-axisline { stroke: var(--an-border); stroke-width: 1.5 }
.an-chart .c-stem     { stroke: var(--an-divider); stroke-width: 1; stroke-dasharray: 2 4 }
/* Reference line = the "today" level read across the whole plot. Dashed, so it
   is never mistaken for a data series. */
.an-chart .c-ref  { stroke: var(--c-fg); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .5 }
.an-chart .c-dot  { fill: color-mix(in srgb, var(--c-fg) 38%, transparent) }
.an-chart .c-dot--now { fill: var(--c-fg) }

/* ── Key takeaways (§5.1) ─────────────────────────────────────────── */
/* Screenshot asset: the three cards must read as a unit when captured
   together, so they stay quiet — one hairline border, no icon, no gradient,
   no fill. The number is the only loud thing on the page after the h1. */
.an-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 2.25rem 0;
}
.an-key {
  background: var(--c-surface);
  border: 1px solid var(--an-border);
  border-radius: var(--r-sm);
  padding: 20px;
}
.an-key-num {
  display: block;
  /* Deliberately below the h1 clamp at every width: the brief wants this to be
     the largest type AFTER the headline, and at 360px an equal 1.9rem read as a
     second h1. */
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--c-fg);
}
/* Direction is semantic, not decorative: cheaper = the sitewide "good" green,
   more expensive = the sitewide promo/alert colour. Both already exist and both
   already have dark-theme values. */
.an-key-num--down { color: var(--c-success) }
.an-key-num--up { color: var(--c-promo) }
.an-key p {
  margin: .5rem 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--c-muted);
}

/* ── Data tables (§5.3) ───────────────────────────────────────────── */
/* Horizontal scroll on narrow screens; the table is never broken into cards
   (unlike .md-table/.cmp-table) because the whole value of a 19×5 grid is
   reading ACROSS retailers — stacking it destroys the comparison.

   NO sticky <thead>. `overflow-x: auto` computes overflow-y to auto too, which
   makes this wrapper the scrollport; a `position: sticky; top: 0` header would
   then stick to the top of a box that never scrolls vertically — a no-op — and
   it can no longer stick to the viewport. The only fixes are JS or duplicating
   the table, both out of scope. The sticky first COLUMN below works fine and
   carries the orientation the header would have. */
/* The whole component is one `.an-wide` block (hint + scroller + note) so the
   caption paragraphs are NOT direct children of `.an` — otherwise the
   `.an > p` reading-size rule would out-specify their small type. */
.an-tablock { margin: 2rem 0 }
.an-tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* `contain: paint` is a FIX, not an optimisation. Without it the wide table
     leaks ~39px into the document's scrollable overflow at a 360px viewport —
     the page itself scrolls sideways — even though the wrapper clips it
     correctly. Measured in headless Edge; `overflow-x: hidden`, `min-width` on
     the table and `overflow: hidden` on the parent all fail to stop it, paint
     containment is the only thing that does. Safe here: it clips nothing that
     overflow:auto does not already clip, the horizontal scroll still works and
     the sticky first column still sticks. */
  contain: paint;
}
.an-table {
  /* `separate` is required, not cosmetic: with border-collapse:collapse the
     shared borders do not travel with a position:sticky cell, so the frozen
     first column loses its lines and visually detaches while scrolling. */
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: .9rem;
  line-height: 1.4;
}
.an-table th,
.an-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--an-divider);
  white-space: nowrap;
}
.an-table thead th {
  text-align: right;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
  border-bottom-color: var(--an-border);
}
.an-table tbody td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--c-fg);
}
/* Frozen product-name column. Needs an opaque background of its own (the page
   background, since the table has no fill) plus a hairline on its trailing
   edge, which box-shadow paints without taking layout space. */
.an-table thead th:first-child,
.an-table tbody th {
  position: sticky;
  left: 0;
  text-align: left;
  white-space: normal;
  min-width: 11rem;
  background: var(--c-bg);
  box-shadow: 1px 0 0 var(--an-divider);
}
.an-table tbody th {
  font-weight: 500;
  color: var(--c-fg);
}
.an-table tbody tr:last-child th,
.an-table tbody tr:last-child td { border-bottom: none }

/* Cheapest value in a row. Set from the content, never computed in CSS. */
.an-table .is-best { font-weight: 700 }
/* Missing observation. The em dash carries a title for pointer users and a
   visually-hidden sentence for screen readers — `title` alone is not reliably
   announced (WCAG 2.1 AA is a standing requirement on this site). */
.an-table .is-empty { color: var(--c-muted) }

.an-table-note {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--c-muted);
  margin: .7rem 0 0;
  max-width: var(--an-measure);
}
/* Scroll affordance, shown only where the table can actually overflow. */
.an-table-scrollhint { display: none }

/* Small tables (the 4-row month-over-month block) live in the text column and
   never scroll — same typography, no wrapper, no frozen column.
   `white-space: normal` is mandatory here: the wide table can afford nowrap
   because it sits in a scroller, but a nowrap narrow table pushes the whole
   PAGE into horizontal overflow at 360px (long Lithuanian column headers). */
.an > .an-table--narrow { margin: 1.75rem 0 1.5rem }
.an-table--narrow th,
.an-table--narrow td { white-space: normal }
.an-table--narrow thead th:first-child,
.an-table--narrow tbody th {
  position: static;
  min-width: 0;
  box-shadow: none;
  background: none;
}

/* ── "Apie duomenis" — the single, closing CTA (§4.7) ─────────────── */
/* One paragraph, one link to the tool. No button, no banner, no panel: a
   report earns the click by being right, not by shouting. */
.an-about {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--an-divider);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.an-about h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-fg);
  margin: 0 0 .6rem;
  letter-spacing: 0;
}
.an-about p { margin: 0 0 .7rem }
.an-about p:last-child { margin-bottom: 0 }

/* ── Rubric index (/analitika) ────────────────────────────────────── */
/* Chronological list, nothing else: date, title, one line. No cards, no
   thumbnails, no pagination — under ten articles it would be furniture. */
/* Selectors are `.an > .an-list …` rather than `.an-list …` on purpose: the
   prose rules above are `.an > ul`, which out-specifies a lone class and would
   otherwise put disc bullets and body-size type on the article list. */
.an > .an-list { list-style: none; margin: 2rem 0 0; padding: 0 }
.an > .an-list li {
  margin: 0;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--an-divider);
}
.an > .an-list li:first-child { padding-top: 0 }
.an-list-date {
  display: block;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  margin-bottom: .3rem;
}
.an-list-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.an-list-title a { color: var(--c-fg); text-decoration: none }
.an-list-title a:hover { text-decoration: underline }
.an-list-dek {
  margin: .35rem 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.an-empty { color: var(--c-muted); font-size: 1rem }

/* ── Responsive ───────────────────────────────────────────────────── */
/* 719px is the sitewide "tables stop fitting" breakpoint (metodika.css,
   palyginimas.css use the same one). Here it only stacks the takeaway cards —
   the data table keeps its shape and scrolls. */
@media (max-width: 719px) {
  .an { padding: 24px 0 32px }
  .an-keys { grid-template-columns: 1fr; gap: 12px }
  .an-table-scrollhint {
    display: block;
    font-size: .78rem;
    color: var(--c-muted);
    margin: 0 0 .5rem;
  }
  .an-table th,
  .an-table td { padding: 9px 12px }
  .an-table thead th:first-child,
  .an-table tbody th { min-width: 8.5rem }

  /* Chart: floor width + a proportional type bump. 660px of a 960 viewBox is a
     0.69 scale, so 16px category labels land at ~11 real px — readable — and
     the scroll is about as long as the wide table's. Raising the sizes alone
     (no floor) collides the labels; widening alone (no bump) still reads at
     9px. Both together, or neither. */
  .an-chart { min-width: 660px }
  .an-chart .c-title { font-size: 24px }
  .an-chart .c-sub   { font-size: 15px }
  .an-chart .c-axis  { font-size: 15px }
  .an-chart .c-cat   { font-size: 16px }
  .an-chart .c-cat2  { font-size: 14px }
  .an-chart .c-val   { font-size: 18px }
  .an-chart .c-val--now { font-size: 19px }
  .an-chart-scrollhint {
    display: block;
    font-size: .78rem;
    color: var(--c-muted);
    margin: 0 0 .5rem;
  }
}