/* Owncheck – styles. Same look as Høstlogbog: change colours and spacing in :root and everything follows. */

@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+2212;
}
@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+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

:root {
  --frost: #e9efeb;      /* page */
  --paper: #ffffff;      /* surfaces */
  --wash: #f3f7f4;       /* quiet fills */
  --ink: #14302a;        /* text */
  --muted: #52675f;
  --line: #cdd9d2;
  --bar: #17352c;        /* top bar, login screen */
  --bar-ink: #eef6f0;
  --primary: #17352c;    /* main buttons */
  --on-primary: #ffffff;
  --accent: #f1c232;     /* golden apple: active tab, highlights */
  --leaf: #3f7a45;
  --focus: #d99a00;
  --err-bg: #fbe3e7; --err-ink: #8c1d31; --err-solid: #b3263e;
  --ice-bg: #dff0fa; --ice-ink: #0d4d73; --frz-bg: #e4e6fb; --frz-ink: #2b2f86;
  --buy-bg: #fbf0c9; --buy-line: #ecd98d; --buy-ink: #5b4700;
  --r-s: 8px; --r-m: 14px;
  --tab-h: 64px;
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --frost: #0e1a16; --paper: #15251f; --wash: #1b2e27; --ink: #e6efe9; --muted: #9bb2a7; --line: #294037;
    --bar: #0a1310; --bar-ink: #e6efe9; --primary: #9fd493; --on-primary: #0e1a16; --focus: #f1c232;
    --err-bg: #3a1a22; --err-ink: #ffb3c0; --err-solid: #8f1d31;
    --ice-bg: #14323f; --ice-ink: #9fd3f0; --frz-bg: #1e2144; --frz-ink: #b9bdf5;
    --buy-bg: #3a3314; --buy-line: #5d5223; --buy-ink: #f3dd84;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--frost); color: var(--ink); font: 450 1rem/1.5 var(--font); }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
a { color: inherit; }
small, .muted { color: var(--muted); }
.icon { flex: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; z-index: 100; background: var(--paper); padding: 8px 12px; border-radius: var(--r-s); }

/* ---- app bar and tabs ------------------------------------------------------ */
.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; background: var(--bar); color: var(--bar-ink); padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.brand .icon { color: var(--accent); }
.who { margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bar-ink); color: var(--bar); font-weight: 800; text-decoration: none; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; font-size: .72rem; font-weight: 650; color: var(--muted); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; }
.tabs[data-n="5"] { grid-template-columns: repeat(5, 1fr); }
@media (min-width: 900px) {
  .tabs { position: static; display: flex; gap: 4px; margin-left: 24px; padding: 0; background: none; border: 0; }
  .tabs a { flex-direction: row; gap: 8px; font-size: .95rem; padding: 8px 12px; border-radius: var(--r-s); color: var(--bar-ink); opacity: .78; }
  .tabs a[aria-current="page"] { opacity: 1; background: rgba(255, 255, 255, .13); }
  .tabs a[aria-current="page"]::before { display: none; }
}

.page { max-width: 780px; margin: 0 auto; padding: 20px 16px calc(var(--tab-h) + 36px + env(safe-area-inset-bottom)); }
.page:focus { outline: none; }
@media (min-width: 900px) { .page { padding: 32px 16px 56px; } }
.page-head { margin-bottom: 16px; }
.page-head .sub { color: var(--muted); margin: 4px 0 0; }

/* ---- menu (More tab) ------------------------------------------------------- */
.menu { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.menu li + li { border-top: 1px solid var(--line); }
.menu a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; }
.menu a span { flex: 1; display: grid; }
.menu small { font-weight: 450; }

/* ---- forms ----------------------------------------------------------------- */
.stack { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field > span, .field > label { font-weight: 650; font-size: .92rem; }
input, select, textarea { width: 100%; min-height: 48px; padding: 11px 12px; font: inherit; color: inherit; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-s); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.has-error input, .has-error select { border-color: var(--err-solid); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 99px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: progress; }
.form-error { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--err-bg); color: var(--err-ink); font-weight: 650; }
.check { display: flex; align-items: flex-start; gap: 10px; }
.check input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; accent-color: var(--primary); }

/* ---- sign-in and error screens --------------------------------------------- */
body.bare { background: var(--bar); color: var(--bar-ink); }
.login { min-height: 100dvh; max-width: 380px; margin: 0 auto; padding: 32px 20px; display: grid; align-content: center; gap: 4px; }
.login-mark { color: var(--accent); margin-bottom: 8px; }
.login-sub { color: color-mix(in srgb, var(--bar-ink) 75%, transparent); margin-bottom: 20px; }
.login .field > span { color: var(--bar-ink); }
.login .check { color: var(--bar-ink); }
.login .btn.primary { background: var(--accent); border-color: var(--accent); color: #1c2a00; }
.login input[type="checkbox"] { accent-color: var(--accent); }

/* ---- toasts ---------------------------------------------------------------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); z-index: 50; display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
body.bare .toasts { bottom: 24px; }
.toast { pointer-events: auto; max-width: 520px; padding: 12px 16px; border-radius: 12px; background: var(--bar); color: var(--bar-ink); font-weight: 650; box-shadow: 0 8px 24px rgb(0 0 0 / .25); animation: toast-in .22s ease-out; }
.toast.error { background: var(--err-solid); color: #fff; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
@media (min-width: 900px) { .toasts { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---- card form, segmented control ---------------------------------------------- */
.card-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; }
.grid2 { display: grid; gap: 16px; }
@media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.field em { font-style: normal; font-weight: 450; color: var(--muted); }
.field > label:first-child { font-weight: 650; font-size: .92rem; }
.field.has-error input { border-color: var(--err-solid); }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; background: var(--wash); border: 1.5px solid var(--line); border-radius: 99px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.seg span { display: grid; place-items: center; min-height: 42px; border-radius: 99px; font-weight: 700; cursor: pointer; color: var(--muted); }
.seg input:checked + span { background: var(--primary); color: var(--on-primary); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }


/* ---- small shared pieces ------------------------------------------------------------ */
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; color: var(--muted); font-weight: 650; text-decoration: none; }
.sec { margin: 24px 0 10px; font-size: 1.05rem; font-weight: 800; }
.hist { list-style: none; margin: 0 0 12px; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.hist li + li { border-top: 1px solid var(--line); }
.hist a, .devrow { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; color: inherit; text-decoration: none; }
.devrow { grid-template-columns: 1fr; }
.hist a:hover { background: var(--wash); }
.h-date { color: var(--muted); font-size: .88rem; }
.h-main { display: grid; min-width: 0; }
.h-main small { color: var(--muted); overflow-wrap: anywhere; }
.btn.small { min-height: 40px; padding: 0 14px; font-size: .92rem; }
.hint { color: var(--muted); }
textarea { width: 100%; padding: 11px 12px; font: .85rem/1.4 ui-monospace, monospace; color: inherit; background: var(--wash); border: 1.5px solid var(--line); border-radius: var(--r-s); }

/* Sign-in fields: the screen is dark, but the fields are light, so their text must be dark.
   Change the colour of what you type here. */
.login input:not([type="checkbox"]) { color: var(--ink); caret-color: var(--ink); }
.login input::placeholder { color: var(--muted); }
.login input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 40px var(--paper) inset; }

.version { margin: 24px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
.banner { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-m); background: var(--buy-bg); border: 1px solid var(--buy-line); color: var(--buy-ink); }
.banner a { color: inherit; font-weight: 700; }

/* ---- Owncheck: state chips, tiles, measuring ---------------------------------------- */
.chip.fridge { background: var(--ice-bg); border-color: transparent; color: var(--ice-ink); }
.chip.freezer { background: var(--frz-bg); border-color: transparent; color: var(--frz-ink); }
.chip.ok { background: color-mix(in srgb, var(--leaf) 18%, var(--paper)); border-color: transparent; color: var(--leaf); }
.chip.due { background: var(--buy-bg); border-color: var(--buy-line); color: var(--buy-ink); }
.chip.bad { background: var(--err-bg); border-color: transparent; color: var(--err-ink); }
.chip.off { color: var(--muted); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--wash); border: 1px solid var(--line); font-size: .8rem; font-weight: 650; }
.banner.bad { background: var(--err-bg); border-color: transparent; color: var(--err-ink); }
.banner ul { margin: 4px 0 0; padding-left: 18px; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty strong { color: var(--ink); font-size: 1.1rem; }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 8px; }
.tile { display: grid; gap: 4px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--leaf); border-radius: var(--r-m); color: inherit; text-decoration: none; }
.tile.due { border-left-color: var(--accent); }
.tile.bad { border-left-color: var(--err-solid); }
.tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile h3 { overflow-wrap: anywhere; }
.big { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.big small { font-size: 1rem; font-weight: 650; }
.big.bad { color: var(--err-solid); }
.tile .meta { color: var(--muted); font-size: .88rem; }

.measure { display: grid; gap: 12px; }
.mtime { display: grid; gap: 6px; }
.ucard { display: grid; gap: 10px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: var(--r-m); }
.ucard.k-fridge { border-left-color: #4aa3d3; } .ucard.k-freezer { border-left-color: #5b61d6; }
.ucard.done { opacity: .78; }
.uc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.uc-head small { display: block; }
.tempin { display: flex; align-items: center; gap: 8px; }
.tempin input { flex: 1 1 auto; min-width: 0; font-size: 1.5rem; font-weight: 800; min-height: 56px; text-align: center; }
.tempin .deg { color: var(--muted); font-weight: 700; min-width: 2.2ch; }
.signbtn { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--wash); color: var(--ink); font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.verdict { margin: 0; font-weight: 700; }
.verdict:empty { display: none; }
.verdict.ok { color: var(--leaf); } .verdict.bad { color: var(--err-solid); }
.action-box { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-s); background: var(--err-bg); color: var(--err-ink); }
.action-box input { color: var(--ink); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; }
.stickybar { position: sticky; bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom)); z-index: 10; }
@media (min-width: 900px) { .stickybar { bottom: 12px; } }

.maprow { display: grid; gap: 6px; padding: 12px 14px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); margin-bottom: 12px; }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tablewrap th, .tablewrap td { padding: 8px 12px; text-align: left; white-space: nowrap; border-top: 1px solid var(--line); }
.tablewrap th { border-top: 0; background: var(--wash); color: var(--muted); font-size: .8rem; }

/* ---- Owncheck: period chips, charts, statistics, calendar, tables, print ------------------------------ */
.ranges { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; scrollbar-width: none; }
.ranges::-webkit-scrollbar { display: none; }
.ranges a { flex: 0 0 auto; display: grid; place-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--paper); font-weight: 650; text-decoration: none; }
.ranges a[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.chartbox { position: relative; max-width: 640px; margin: 0 auto 14px; padding: 8px 6px 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); touch-action: pan-y; }
.chart { display: block; width: 100%; height: auto; }
.c-zone { fill: color-mix(in srgb, var(--leaf) 11%, transparent); }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-grid.v { stroke-dasharray: 2 3; }
.c-ax { fill: var(--muted); font-size: 10.5px; }
.c-ref { fill: var(--muted); font-size: 10px; font-weight: 650; }
.c-limit { stroke: var(--err-solid); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.c-target { stroke: var(--leaf); stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; fill: none; }
.c-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.c-bad { fill: var(--err-solid); stroke: var(--paper); stroke-width: 1.5; }
.c-cross { stroke: var(--muted); stroke-width: 1; }
.tip { position: absolute; z-index: 5; padding: 6px 10px; border-radius: 8px; background: var(--bar); color: var(--bar-ink); font-size: .85rem; font-weight: 650; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); }
.tip small { display: block; color: inherit; opacity: .8; font-weight: 450; }
.spark { display: block; width: 100%; height: 52px; margin: 2px 0; }
.spark .c-line { stroke-width: 1.6; }
.spark .c-limit { stroke-width: 1; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.stats div { display: grid; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); }
.stats b { font-size: 1.15rem; font-weight: 800; }
.stats span { color: var(--muted); font-size: .82rem; }
.warn { color: var(--err-solid); }
.tile.trend .meta b { font-weight: 700; }

.cal { display: flex; flex-wrap: wrap; gap: 3px; }
.cell { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--leaf); }
.cell.out { background: var(--accent); }
.cell.missed { background: transparent; box-shadow: inset 0 0 0 2px var(--err-solid); }
.cell.due { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 8px 0 0; color: var(--muted); font-size: .85rem; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

.tablewrap table.data td.wrap { white-space: normal; min-width: 170px; }
.tablewrap tr.bad td { background: var(--err-bg); }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 4px 0 14px; }
.report-head .sub { margin-bottom: 10px; }
.rep { margin-bottom: 26px; }
.rep h2 small { color: var(--muted); font-weight: 450; }

@media print {
  .appbar, .tabs, .toasts, .noprint, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .page { max-width: none; padding: 0; }
  .tablewrap { overflow: visible; border: 0; }
  .tablewrap table { font-size: 10.5px; }
  .tablewrap th, .tablewrap td { padding: 3px 8px; white-space: normal; }
  .tablewrap tr { break-inside: avoid; }
  .tablewrap tr.bad td { background: #fbe3e7; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rep { break-before: page; }
  .rep:first-of-type { break-before: auto; }
}
.push-status { margin: 0; font-weight: 650; }
code { padding: 1px 5px; border-radius: 4px; background: var(--wash); font-size: .88em; overflow-wrap: anywhere; }
.hist li.withact { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.hist li.withact .devrow { flex: 1; min-width: 0; }