/* Shared look for Tryck's add-on pages (ledger, shopping, pantry, chores, setbook, portal, receipt, connect, guide).
   Linked before each page's own <style>, so a page can still override what it must. It carries what makes the add-ons
   feel like one app: the house font, a visible focus ring, the two selection components and phone-sized touch targets.
   - .tf-tabs: switches the VIEW (Month / Overview, Plan / Furniture / To do). Selected = solid accent, accent-ink text.
   - .tf-chips: FILTERS a list (Everything / Fridge / Freezer). Selected = accent-soft, accent-text.
   Both keep the page's own buttons, click handlers and aria-pressed; only the look is shared. */
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--tf-body:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --tf-ink:#FFFFFF; --tf-accent-text:#B03410}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tf-ink:#1A0C07; --tf-accent-text:#FF7448}}
:root[data-theme="dark"]{--tf-ink:#1A0C07; --tf-accent-text:#FF7448}

/* focus: every control shows where the keyboard is, whatever a page did to outlines
   (not tabindex=-1: dialogs and panels a page focuses from script, which are not controls) */
:is(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}

/* view switch */
:root .tf-tabs{display:inline-flex;flex-wrap:nowrap;gap:3px;padding:3px;background:var(--surface,var(--card));border:1px solid var(--line);border-radius:10px}
:root .tf-tabs > button{min-height:32px;padding:5px 14px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;flex:none}
:root .tf-tabs > button:hover{color:var(--fg)}
:root .tf-tabs > button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink,var(--tf-ink))}
/* list filter */
.tf-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
:root .tf-chips > button[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent-text,var(--tf-accent-text));font-weight:600}

/* touch: on a phone (or any coarse pointer) every everyday control is at least 44 px to hit */
@media (pointer:coarse), (max-width:759px){
  :root :is(.tf-tabs > button,.tf-chips > button,.seg button,.chip,.btn,.iconbtn){min-height:44px}
  :root .iconbtn{min-width:44px}
  :root :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select){min-height:44px}
  :root a.back{display:inline-flex;align-items:center;min-height:44px}
}