/* css/refined/system.css -- owner R1-RF-SYSTEM (REFINE-COMMON). Every rule is scoped under body.rf. */
/* ==========================================================================
   "Tarino, refined": the component layer. Today's classes (components.css), restyled, never renamed.
   One radius scale, one 4px spacing scale, one type scale, tabular lining figures for every price with a smaller
   currency, cherry only for the brand, the primary action and the active state, hairlines and soft low shadows,
   a pressed state on everything tappable, a visible focus ring. No transitions here: motion is MOTION's file.
   Dark mode follows the trunk's themed tokens; only the shadows need their own dark values (end of file).
   ========================================================================== */


/* ---- 1. Tokens ------------------------------------------------------------------------------------------------- */
body.rf{
  /* radius: 6 / 8 / 12 / 16 / 20 / pill. The trunk's roles map onto it, so every component follows. */
  --rf-r-xs:6px; --rf-r-sm:8px; --rf-r-md:12px; --rf-r-lg:16px; --rf-r-xl:20px; --rf-r-pill:999px;
  --radius-6:var(--rf-r-xs); --radius-7:var(--rf-r-xs); --radius-8:var(--rf-r-sm); --radius-9:var(--rf-r-sm);
  --radius-10:var(--rf-r-sm); --radius-11:var(--rf-r-md); --radius-12:var(--rf-r-md); --radius-13:var(--rf-r-md);
  --radius-14:var(--rf-r-md); --radius-15:var(--rf-r-lg); --radius-16:var(--rf-r-lg); --radius-18:var(--rf-r-lg);
  --radius-badge:var(--rf-r-xs); --radius-thumb:var(--rf-r-sm); --radius-photo:var(--rf-r-sm);
  --radius-field:var(--rf-r-md); --radius-tile:var(--rf-r-lg); --radius-panel:var(--rf-r-lg); --radius-card:var(--rf-r-lg);

  /* type: 12 13 14 16 18 20 24 28 36 */
  --rf-fs-xs:.75rem; --rf-fs-sm:.8125rem; --rf-fs-md:.875rem; --rf-fs-base:1rem; --rf-fs-lg:1.125rem;
  --rf-fs-xl:1.25rem; --rf-fs-2xl:1.5rem; --rf-fs-3xl:1.75rem; --rf-fs-4xl:2.25rem;

  /* colour roles */
  --rf-accent:var(--visnja);                                         /* brand, primary action */
  --rf-active:var(--visnja-ink);                                     /* the current tab, chip, link */
  --rf-active-bg:color-mix(in srgb,var(--visnja) 10%,var(--surface));
  --rf-neutral-bg:color-mix(in srgb,var(--ink) 5%,var(--surface));   /* icon tiles, quiet fills */
  --rf-press:color-mix(in srgb,var(--ink) 6%,transparent);           /* a row or a quiet control while pressed */
  --rf-hairline:var(--line);
  --rf-save-bg:color-mix(in srgb,var(--save) 13%,var(--surface));

  /* elevation: 1 cards, 2 raised controls, 3 toasts, sheets and dialogs. Low and soft. */
  --rf-e1:0 1px 2px rgba(32,26,28,.05);
  --rf-e2:0 1px 2px rgba(32,26,28,.05), 0 4px 12px -6px rgba(32,26,28,.12);
  --rf-e3:0 2px 4px rgba(32,26,28,.06), 0 12px 32px -12px rgba(32,26,28,.22);
  --shadow:var(--rf-e1); --shadow-card:var(--rf-e3); --shadow-btn:none; --shadow-app:var(--rf-e2);
  --shadow-search:var(--rf-e2); --shadow-snap:var(--rf-e1);

  /* focus: a 2px ring, 2px off the element, in the focus colour */
  --focus-w:2px; --focus-offset:2px;
}


/* ---- 2. Figures: every price tabular and lining, the currency smaller than the figure ---------------------------- */
body.rf .price,
body.rf .product-row__figs,body.rf .product-row__price,body.rf .product-row__unit,
body.rf .chain-row__price,body.rf .chain-row__unit,
body.rf .chain-card__amt,body.rf .chain-card__unit,
body.rf .basket-row__price,body.rf .basket-group__sub,body.rf .tick-row__price,
body.rf .total-card__value,body.rf .list-card__total-value,
body.rf .stat__v,body.rf .receipt__unit,body.rf .marker__text,body.rf .deal-card__meta b,
body.rf .summary-list dd,body.rf .count-badge,body.rf .stepper__val{font-variant-numeric:tabular-nums lining-nums}
body.rf .rf-cur{font-size:.72em;font-weight:var(--fw-semi);letter-spacing:0}
body.rf .price__cur{font-size:.5em;font-weight:var(--fw-semi);align-self:baseline}
body.rf .price--lg .price__cur,body.rf .price--md .price__cur{font-size:var(--rf-fs-xl)}
body.rf .price__e{letter-spacing:-.025em}


/* ---- 3. Buttons ------------------------------------------------------------------------------------------------ */
body.rf .btn{
  min-height:48px;padding:12px 20px;border-radius:var(--rf-r-md);
  font-weight:var(--fw-semi);font-size:var(--rf-fs-base);letter-spacing:-.005em;box-shadow:none;
}
body.rf .btn--sm{min-height:var(--tap);padding:8px 16px;font-size:var(--rf-fs-md)}
body.rf .btn--primary{background:var(--rf-accent);color:var(--on-visnja)}
body.rf .btn--primary:hover{background:var(--visnja-deep)}
body.rf .btn--primary:active{background:var(--visnja-deep);transform:scale(.98)}
/* secondary and ghost are calm: ink on a hairline, not a second cherry button */
body.rf .btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
body.rf .btn--secondary:hover{background:var(--rf-neutral-bg)}
body.rf .btn--ghost{color:var(--ink-2)}
body.rf .btn--ghost:hover{background:var(--rf-press);color:var(--ink)}
body.rf .btn--secondary:active,body.rf .btn--ghost:active,body.rf .btn--danger:active,body.rf .btn--on-visnja:active{background:var(--rf-press);transform:scale(.98)}
body.rf .btn:disabled,body.rf .btn[aria-disabled="true"]{opacity:.5;transform:none}
body.rf .icon-btn{border-radius:var(--rf-r-md);border-color:var(--rf-hairline);background:var(--surface)}
body.rf .icon-btn--round{border-radius:50%}
body.rf .icon-btn--primary{background:var(--rf-accent);border-color:transparent;box-shadow:none}
body.rf .icon-btn:active{transform:scale(.94)}
body.rf .icon-btn:not(.icon-btn--primary):active{background:var(--rf-press)}
body.rf .icon-btn--primary:active{background:var(--visnja-deep)}
body.rf .show-more__summary{border-radius:var(--rf-r-md);border-color:var(--line-strong);color:var(--ink);font-weight:var(--fw-semi)}
body.rf .show-more__summary:hover{background:var(--rf-neutral-bg)}
body.rf .show-more__summary:active{background:var(--rf-press)}


/* ---- 4. Chips and the segmented control -------------------------------------------------------------------------- */
body.rf .chips{gap:0 var(--space-2)}
body.rf .chip{padding:0 var(--space-3);font-size:var(--rf-fs-md);font-weight:var(--fw-medium)}
body.rf .chip::before{inset:6px 0;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
body.rf .chip:hover::before{background:rgba(255,255,255,.18)}
body.rf .chip:active::before{background:rgba(255,255,255,.26)}
body.rf .chip--page{color:var(--ink-2)}
body.rf .chip--page::before{background:var(--surface);border-color:var(--rf-hairline)}
body.rf .chip--page:hover::before{border-color:var(--line-strong);background:var(--surface)}
body.rf .chip--page:active::before{background:var(--rf-neutral-bg)}
body.rf .chip--page[aria-current="true"]{color:var(--rf-active);font-weight:var(--fw-semi)}
body.rf .chip--page[aria-current="true"]::before{background:var(--rf-active-bg);border-color:color-mix(in srgb,var(--visnja) 32%,var(--line))}
body.rf .chip-group__label{font-size:var(--rf-fs-sm)}
body.rf .loc-chip{font-size:var(--rf-fs-md);font-weight:var(--fw-semi)}
body.rf .loc-chip::before{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
body.rf .loc-chip:active::before{background:rgba(255,255,255,.24)}

body.rf .tabs{gap:2px;padding:3px;background:color-mix(in srgb,var(--ink) 6%,var(--bg))}
body.rf .tab{padding:0 var(--space-4);font-size:var(--rf-fs-md);font-weight:var(--fw-medium);color:var(--ink-2)}
body.rf .tab:active{background:var(--rf-press)}
body.rf .tab[aria-current="true"]{background:var(--surface);color:var(--ink);font-weight:var(--fw-semi);box-shadow:var(--rf-e2)}
body.rf .tab__count{font-variant-numeric:tabular-nums lining-nums}


/* ---- 5. Search field and inputs ------------------------------------------------------------------------------- */
body.rf .search{border-radius:var(--rf-r-md);box-shadow:var(--rf-e2)}
body.rf .search--page{border-color:var(--line-strong);box-shadow:none;background:var(--surface)}
body.rf .search--page:hover{border-color:var(--ink-2)}
body.rf .scan-btn__pill{border-radius:var(--rf-r-sm)}
body.rf .scan-btn:active .scan-btn__pill{transform:scale(.94)}
body.rf .search__icon:active .icon{transform:scale(.9)}
body.rf .field{gap:var(--space-2)}
body.rf .field__label{font-size:var(--rf-fs-md);font-weight:var(--fw-semi);color:var(--ink)}
body.rf .field__control{border-radius:var(--rf-r-md);border-color:var(--line-strong);background:var(--surface)}
body.rf .field__control:focus-visible{border-color:var(--focus)}
body.rf .field__hint{font-size:var(--rf-fs-sm)}
body.rf .field__error{font-size:var(--rf-fs-sm)}


/* ---- 6. Cards, panels and list rows -------------------------------------------------------------------------- */
body.rf .card{background:var(--surface);border-color:var(--rf-hairline);border-radius:var(--rf-r-lg);padding:var(--space-4);box-shadow:var(--rf-e1)}
body.rf .panel{border-color:var(--rf-hairline);border-radius:var(--rf-r-lg);box-shadow:var(--rf-e1)}
body.rf .panel__title{font-size:var(--rf-fs-lg)}
body.rf .deal-card{gap:var(--space-3)}
body.rf .deal-card:hover{border-color:var(--line-strong)}
body.rf .deal-card:active{background:var(--rf-neutral-bg)}
body.rf .deal-card__name{font-size:var(--rf-fs-base);font-weight:var(--fw-semi);line-height:1.3;margin-bottom:var(--space-1)}
body.rf .deal-card__meta{font-size:var(--rf-fs-sm);margin-bottom:var(--space-2)}
body.rf .deal-card__meta b{font-weight:var(--fw-semi);color:var(--ink)}
body.rf .deal-card__baseline,body.rf .deal-card__store{font-size:var(--rf-fs-xs)}
body.rf .chain-card.is-best{border-color:var(--save);box-shadow:var(--rf-e1)}
body.rf .chain-card__name{font-size:var(--rf-fs-base);font-weight:var(--fw-semi)}
body.rf .chain-card__amt{font-size:var(--rf-fs-xl)}
body.rf .chain-card__sub,body.rf .chain-card__unit{font-size:var(--rf-fs-sm)}
body.rf .chain-card__save{border-top-style:solid;border-top-color:var(--line-2)}
body.rf .list-card:hover{border-color:var(--line-strong)}
body.rf .list-card:active{background:var(--rf-neutral-bg)}
body.rf .list-card__total{border-top-style:solid;border-top-color:var(--line-2)}

body.rf .product-row,body.rf .chain-row,body.rf .link-list__row,body.rf .link-list>li>a,body.rf .list-row{border-top-color:var(--line-2)}
body.rf .product-row__name{font-weight:var(--fw-medium);line-height:1.35}
body.rf .product-row:hover .product-row__name{color:var(--ink)}
body.rf .product-row__sub,body.rf .link-list__sub,body.rf .link-row__sub{font-size:var(--rf-fs-sm)}
body.rf .product-row__price,body.rf .chain-row__price{font-weight:var(--fw-bold)}
body.rf .product-row__unit,body.rf .chain-row__unit{font-size:var(--rf-fs-xs)}
body.rf .product-row__thumb,body.rf .thumb{border-radius:var(--rf-r-sm)}
body.rf .chain-row__name{font-weight:var(--fw-semi)}
/* a row pressed: a quiet fill that reaches past the row's own edge into the panel's padding */
body.rf .product-row:active,body.rf a.chain-row:active,body.rf .link-list>li>a:active,body.rf .link-row:active{
  background:var(--rf-press);box-shadow:0 0 0 var(--space-2) var(--rf-press);border-radius:var(--rf-r-xs)
}
body.rf .list-row__icon,body.rf .callout__icon{background:var(--rf-neutral-bg);color:var(--ink-2)}
body.rf .list-row--danger .list-row__icon{background:color-mix(in srgb,var(--danger) 10%,var(--surface));color:var(--danger)}
body.rf .callout{border-style:solid;border-color:var(--rf-hairline);background:var(--surface);border-radius:var(--rf-r-lg)}
body.rf a.callout:hover{border-color:var(--line-strong)}
body.rf a.callout:active{background:var(--rf-neutral-bg)}
body.rf .callout__go{color:var(--muted)}
body.rf .callout__text{font-size:var(--rf-fs-md)}
body.rf .proof{border-color:var(--rf-hairline);border-radius:var(--rf-r-lg)}
body.rf .proof__summary{color:var(--ink);font-weight:var(--fw-semi)}
body.rf .proof__summary:active{background:var(--rf-press)}
body.rf .cat-tile{border-radius:var(--rf-r-lg);border-color:transparent}
body.rf .cat-tile:active{transform:scale(.97)}
body.rf .cat-tile__label{font-size:var(--rf-fs-xs);font-weight:var(--fw-medium)}
body.rf .store-badge{border-radius:var(--rf-r-xs);background:var(--rf-neutral-bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rf-hairline)}
body.rf .store-badge--lg{border-radius:var(--rf-r-md)}
body.rf .pill{border-radius:var(--rf-r-xs);background:var(--rf-neutral-bg);font-size:var(--rf-fs-xs)}
body.rf .tag{font-size:var(--rf-fs-xs);font-weight:var(--fw-semi)}
body.rf .stepper{background:var(--rf-neutral-bg)}
body.rf .stepper__btn{color:var(--ink)}
body.rf .stepper__btn:active{background:var(--rf-press);transform:scale(.92)}
body.rf .basket-row__remove:active{transform:scale(.92)}
body.rf .total-card{border-radius:var(--rf-r-lg);padding:var(--space-4)}
body.rf .section-head__title{font-size:var(--rf-fs-xl)}
body.rf .section-head__link{color:var(--ink-2);font-weight:var(--fw-semi);font-size:var(--rf-fs-md)}
body.rf .section-head__link:active{color:var(--ink)}
body.rf .crumbs__list{font-size:var(--rf-fs-sm)}
@media (min-width:720px){body.rf .section-head__title{font-size:var(--rf-fs-2xl)}}


/* ---- 7. Header and tab bar: solid, a hairline, no blur, no shadow ------------------------------------------------ */
body.rf .site-header{background:var(--bg)}
body.rf .nav__link{font-size:var(--rf-fs-md);color:var(--ink-2)}
body.rf .nav__link:hover{background:var(--rf-press);color:var(--ink)}
body.rf .nav__link:active{background:color-mix(in srgb,var(--ink) 10%,transparent)}
body.rf .nav__link[aria-current="page"]{color:var(--rf-active);background:var(--rf-active-bg)}
body.rf .lang-switch__item{font-size:var(--rf-fs-sm)}
body.rf .tabbar{background:var(--surface);border-top-color:var(--rf-hairline);box-shadow:none}
body.rf .tabbar__item{gap:var(--space-1);color:var(--muted)}
body.rf .tabbar__label{font-size:var(--rf-fs-xs);font-weight:var(--fw-medium)}
body.rf .tabbar__icon{width:56px;height:28px;border-radius:var(--rf-r-pill)}
body.rf .tabbar__item[aria-current="page"]{color:var(--rf-active)}
body.rf .tabbar__item[aria-current="page"] .tabbar__icon{background:var(--rf-active-bg)}
body.rf .tabbar__item[aria-current="page"] .tabbar__label{font-weight:var(--fw-semi)}
body.rf .tabbar__item:active .tabbar__icon{background:var(--rf-press);transform:scale(.94)}
body.rf .tabbar__icon .count-badge--float{top:-5px;right:6px}
body.rf .count-badge{min-width:18px;height:18px;font-weight:var(--fw-semi);box-shadow:0 0 0 2px var(--surface)}


/* ---- 8. The verdict chip and the saving pill ---------------------------------------------------------------------- */
body.rf .verdict{gap:var(--space-2);padding:var(--space-3);border-radius:var(--rf-r-md);background:color-mix(in srgb,var(--v) 9%,var(--surface));border-color:color-mix(in srgb,var(--v) 22%,var(--line))}
body.rf .verdict__text{font-size:var(--rf-fs-md);line-height:1.45}
body.rf .verdict__text b{font-weight:var(--fw-semi);color:var(--v-ink)}
body.rf .verdict__link{color:var(--ink-2);font-weight:var(--fw-semi);font-size:var(--rf-fs-sm);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.2em}
body.rf .deal-card__why a{color:var(--ink-2);text-decoration-color:var(--line-strong)}
/* the hand-drawn loop becomes a quiet pill: the saving reads first, nothing is circled */
body.rf .marker{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2);border-radius:var(--rf-r-pill);background:var(--rf-save-bg)}
body.rf .marker__loop{display:none}
body.rf .marker__text{padding:0;font-size:var(--rf-fs-md);font-weight:var(--fw-bold);color:var(--save-ink);line-height:1.6}
body.rf .marker--on-visnja{background:rgba(255,255,255,.16)}
body.rf .marker--on-visnja .marker__text{color:var(--on-visnja)}


/* ---- 9. Notices and toasts, dialogs and sheets ----------------------------------------------------------------- */
body.rf .notice{--n:var(--ink-2);border-radius:var(--rf-r-md);background:color-mix(in srgb,var(--n) 6%,var(--surface));border-color:color-mix(in srgb,var(--n) 18%,var(--line))}
body.rf .notice--success{--n:var(--save-ink)}
body.rf .notice--error{--n:var(--danger)}
body.rf .notice__icon{background:color-mix(in srgb,var(--n) 12%,var(--surface))}
body.rf .notice__text{font-size:var(--rf-fs-md)}
body.rf .notice--toast{background:var(--surface);border-color:var(--rf-hairline);box-shadow:var(--rf-e3);border-radius:var(--rf-r-lg)}
body.rf .notice__close:active{background:var(--rf-press)}
body.rf .sheet::backdrop,body.rf .scan-dialog::backdrop{background:rgba(20,16,18,.42)}
body.rf .sheet__panel{border-color:var(--rf-hairline);border-radius:var(--rf-r-xl) var(--rf-r-xl) 0 0;box-shadow:var(--rf-e3);padding-top:var(--space-6)}
body.rf .sheet__panel::before{content:"";justify-self:center;width:36px;height:4px;margin-top:calc(-1 * var(--space-3));border-radius:var(--rf-r-pill);background:var(--line-strong)}
body.rf .sheet__title{font-size:var(--rf-fs-xl)}
body.rf .scan-dialog{border-color:var(--rf-hairline);border-radius:var(--rf-r-xl);box-shadow:var(--rf-e3)}
body.rf .ai-chat__sheet{border-color:var(--rf-hairline);border-radius:var(--rf-r-xl);box-shadow:var(--rf-e3)}
body.rf .ai-launcher__btn{box-shadow:var(--rf-e3)}
body.rf .ai-launcher__btn:active{transform:scale(.94)}
@media (min-width:720px){
  body.rf .sheet__panel{border-radius:var(--rf-r-xl);padding-top:var(--space-5)}
  body.rf .sheet__panel::before{display:none}
}
@media (max-width:639px){body.rf .ai-chat__sheet{border-radius:var(--rf-r-xl) var(--rf-r-xl) 0 0}}


/* ---- 10. Loading, empty and error states ------------------------------------------------------------------------- */
body.rf .skeleton{--skel:color-mix(in srgb,var(--ink) 7%,var(--surface));--skel-2:color-mix(in srgb,var(--ink) 11%,var(--surface))}
body.rf .skel{border-radius:var(--rf-r-xs)}
body.rf .skel--snap{border-radius:var(--rf-r-sm)}
body.rf .skel--btn,body.rf .skel--field{border-radius:var(--rf-r-md)}
body.rf .empty,body.rf .error-state{gap:var(--space-2);padding:var(--space-10) var(--space-4)}
body.rf .empty__icon,body.rf .error-state__icon{width:56px;height:56px;margin-bottom:var(--space-2);border-radius:var(--rf-r-lg);background:var(--rf-neutral-bg);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rf-hairline)}
body.rf .error-state__icon{color:var(--danger)}
body.rf .empty__title,body.rf .error-state__title{font-size:var(--rf-fs-xl);line-height:1.25}
body.rf .empty__text,body.rf .error-state__text{font-size:var(--rf-fs-md);color:var(--muted);line-height:1.5}
body.rf .empty .btn,body.rf .error-state__actions{margin-top:var(--space-2)}


/* ---- 11. Dark mode: the themed tokens carry the colours; the shadows go deeper ---------------------------------- */
@media (prefers-color-scheme: dark){
  body.rf:not(:where([data-theme="light"] *)){
    --rf-e1:0 1px 2px rgba(0,0,0,.35);
    --rf-e2:0 1px 2px rgba(0,0,0,.35), 0 4px 12px -6px rgba(0,0,0,.5);
    --rf-e3:0 2px 4px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);
  }
}
body.rf:where([data-theme="dark"] *){
  --rf-e1:0 1px 2px rgba(0,0,0,.35);
  --rf-e2:0 1px 2px rgba(0,0,0,.35), 0 4px 12px -6px rgba(0,0,0,.5);
  --rf-e3:0 2px 4px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);
}


/* ---- 12. Forced colours: the pill and the tab-bar indicator get an edge -------------------------------------- */
@media (forced-colors: active){
  body.rf .marker,body.rf .tabbar__item[aria-current="page"] .tabbar__icon{border:1px solid CanvasText}
}