/* HoloInvestor · sidestil for body[data-page="freshness"].
   Lenkes bare fra freshness.html, rett etter style.css.
   Regler som flere sider bruker, ligger i components.css. */

.fresh-buckets { max-width: 560px; margin-top: var(--lin4); }

/* Fordelingen (retning 8-uttrykk): andelen med pris fra siste døgn i svarets skrift, én stripe og en
   liste. Segmentene er token-farger fra fersk til aldri: oliven, oliven blandet 75 % mot papiret
   (3,3:1 lys og 5,0:1 mørk mot --papir, contrast.test), --linje, --linje blandet 45 % mot papiret og
   rasteret for «aldri priset». 1 px --papir skiller naboene, så skillet ikke står på farge alene. */
.fersk-svar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lin1) var(--lin2); margin: 0; }
.fersk-andel { font: 500 var(--svar-st)/1 var(--f-svar); font-variant-numeric: lining-nums tabular-nums; color: var(--blekk); }
.fersk-tekst { font: 400 17px/24px var(--f-tall); color: var(--blekk); max-width: 32ch; }

.fersk-stripe { display: flex; gap: 1px; height: 12px; margin: var(--lin3) 0 0; background: var(--papir); }
.fersk-seg { display: block; height: 100%; min-width: 2px; }

.fresh-buckets .s0 { background: var(--oliven); }
.fresh-buckets .s1 { background: color-mix(in srgb, var(--oliven) 75%, var(--papir)); }
.fresh-buckets .s2 { background: var(--linje); }
.fresh-buckets .s3 { background: color-mix(in srgb, var(--linje) 45%, var(--papir)); }
.fresh-buckets .s4 { background-color: var(--papir); background-image: var(--raster); outline: 1px solid var(--linje); outline-offset: -1px; }

.fersk-liste { list-style: none; margin: var(--lin3) 0 0; padding: 0; border-top: 1px solid var(--linje); }
.fersk-rad { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: var(--lin3); padding: var(--lin2) 0; border-bottom: 1px solid var(--linje); font: 400 15px/22px var(--f-tall); }
.fersk-merke { display: block; width: 12px; height: 12px; }
/* de svake merkene (blandet linje og rasteret) får en hårstrek, så de står mot papiret */
.fersk-merke.s3 { outline: 1px solid var(--linje); outline-offset: -1px; }
.fersk-navn { color: var(--blekk); }
.fersk-pct, .fersk-antall { font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.fersk-pct { color: var(--blekk); min-width: 6ch; }
.fersk-antall { color: var(--blekk-2); min-width: 7ch; }

body[data-page="freshness"] #fresh-total { margin: var(--lin2) 0 var(--lin4); }