/* © IKlett. Alle rettigheter forbeholdt. Proprietær programvare – kopiering og videredistribusjon er forbudt uten skriftlig avtale. */
/* IKlett – Taktil kjøkkenstil (lastes etter app.css og today.css)
   Designet for hansker, melstøv og våte hender:
   - store treffflater (60 px, 84 px i hanske-modus) med >= 10 px mellomrom
   - knapper som "fysiske taster": tykk kant under som trykkes inn (synlig respons uten hover)
   - statusfarge ALDRI alene: alltid ikon/tekst i tillegg
   - sterk fokusring, tall med fast bredde (tabular-nums) for temperaturer
   Fjern denne filen (og linjen i index.html/sw.js) for å gå tilbake til den forrige stilen. */

:root {
  --radius: 16px;
  --btn-h: 60px;
  --btn-font: 18px;
  --key-h: 68px;
  --edge: 4px;
  --edge-ink: color-mix(in srgb, var(--primary) 55%, #000);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --fg-muted: #46606a; } }
:root[data-theme="light"] { --fg-muted: #46606a; }

body { font-size: 17px; font-variant-numeric: tabular-nums; }
body.glove-mode {
  --btn-h: 84px;
  --btn-font: 22px;
  --key-h: 92px;
  --edge: 6px;
  --radius: 20px;
  font-size: 20px;
}

/* ---------- Knapper: "taster" ---------- */
.btn,
body.glove-mode .btn {
  min-height: var(--btn-h);
  padding: 0 26px;
  font-size: var(--btn-font);
  font-weight: 800;
  border: 0;
  border-radius: var(--radius);
  margin: 0;
  box-shadow: 0 var(--edge) 0 var(--edge-c, var(--edge-ink));
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.15s;
}
.btn:active,
body.glove-mode .btn:active {
  transform: translateY(var(--edge));
  box-shadow: 0 0 0 var(--edge-c, var(--edge-ink));
}
.btn-primary { --edge-c: color-mix(in srgb, var(--primary) 55%, #000); }
.btn-ok { --edge-c: color-mix(in srgb, var(--ok-fg) 55%, #000); }
.btn-bad { --edge-c: color-mix(in srgb, var(--bad-fg) 55%, #000); }
.btn-outline,
body.glove-mode .btn-outline {
  --edge-c: var(--card-border);
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  color: var(--primary);
}
.btn-glove-toggle,
body.glove-mode .btn-glove-toggle { --edge-c: var(--warn-border); border: 2px solid var(--warn-border); }
.btn-glove-toggle.active { --edge-c: color-mix(in srgb, var(--warn-fg) 55%, #000); }
.btn .ic { width: 26px; height: 26px; }
@media (hover: hover) { .btn:hover { filter: brightness(1.06); } }
@media (hover: none) { .btn-primary:hover, .btn-outline:hover { background: revert-layer; } }

/* ---------- Valgbrikker ---------- */
.chip, .preset-chip, .rchip,
body.glove-mode .chip {
  min-height: 56px;
  padding: 0 20px;
  border: 2px solid var(--card-border);
  border-radius: 28px;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
body.glove-mode .chip, body.glove-mode .preset-chip, body.glove-mode .rchip { min-height: 72px; font-size: 20px; padding: 0 26px; border-radius: 36px; }
.chips, .presets-row { gap: 10px; }
body.glove-mode .chips, body.glove-mode .presets-row { gap: 14px; }
.rchip.on, .chip.on { box-shadow: 0 3px 0 var(--edge-ink); }

/* ---------- Skjemafelt ---------- */
input, select, textarea,
body.glove-mode input, body.glove-mode select, body.glove-mode textarea {
  min-height: 58px;
  padding: 12px 16px;
  font-size: 18px;
  border: 2px solid var(--card-border);
  border-radius: 14px;
}
body.glove-mode input, body.glove-mode select, body.glove-mode textarea { min-height: 76px; font-size: 22px; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent); }
input[type="checkbox"], input[type="radio"] { min-height: 0; min-width: 0; width: 26px; height: 26px; flex: 0 0 auto; margin: 0; accent-color: var(--primary); }
body.glove-mode input[type="checkbox"], body.glove-mode input[type="radio"] { width: 40px; height: 40px; min-height: 40px; min-width: 40px; }
label { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.form-group { margin-bottom: 18px; }

/* ---------- Tastatur ---------- */
.keypad-grid { gap: 12px; }
.keypad-btn,
body.glove-mode .keypad-btn {
  min-height: var(--key-h);
  border: 0;
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: 0 var(--edge) 0 var(--card-border), 0 0 0 2px var(--card-border) inset;
  font-size: 30px;
  font-weight: 800;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
}
.keypad-btn:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--card-border); }
.keypad-display { font-size: 40px; border-width: 3px; border-radius: 16px; padding: 14px 18px; }

/* ---------- Navigasjon ---------- */
.tab { min-height: 68px; font-size: 12.5px; font-weight: 700; border-radius: 16px; }
.tab .ic { width: 28px; height: 28px; }
.tab.active { background: color-mix(in srgb, var(--primary) 14%, transparent); box-shadow: inset 0 4px 0 var(--primary); }
body.glove-mode .tab { min-height: 82px; font-size: 13.5px; }
body.glove-mode .tab .ic { width: 32px; height: 32px; }
#nav { gap: 6px; }

.hbtn, .icon-btn { min-width: 52px; min-height: 52px; border-width: 2px; border-radius: 14px; }
body.glove-mode .hbtn, body.glove-mode .icon-btn { min-width: 64px; min-height: 64px; }
.sync-dot { min-height: 40px; padding: 0 14px; font-size: 13px; }

/* ---------- Oppgaverader (I dag) ---------- */
.t-list { gap: 12px; }
.trow { padding: 12px 12px 12px 14px; border-left-width: 8px; min-height: 84px; gap: 12px; }
.trow .st .ic { width: 34px; height: 34px; }
.trow .nm { font-size: 18px; }
.trow .sb { font-size: 14px; }
.trow .btn { min-height: 64px; min-width: 112px; }
body.glove-mode .trow { min-height: 104px; }
body.glove-mode .trow .btn { min-height: 80px; min-width: 128px; }
.trow.done { background: color-mix(in srgb, var(--ok-bg) 55%, var(--card-bg)); }
.progress-row .bar { height: 14px; border-radius: 7px; }
.progress-row b { font-size: 18px; }

/* ---------- Ark, rader, brytere ---------- */
.set-row { min-height: 64px; font-size: 17px; border-width: 2px; }
.set-row .sw { width: 58px; height: 32px; border-radius: 16px; }
.set-row .sw::after { top: 4px; left: 4px; width: 24px; height: 24px; }
.set-row.on .sw::after { transform: translateX(26px); }
.seg button { min-height: 60px; font-size: 16px; }
.tile { min-height: 104px; font-size: 14px; border-width: 2px; }
body.glove-mode .set-row { min-height: 80px; font-size: 20px; }
body.glove-mode .tile { min-height: 124px; font-size: 16px; }
body.glove-mode .seg button { min-height: 76px; font-size: 19px; }
.sheet-panel { padding-left: 18px; padding-right: 18px; }

/* ---------- Status: ikon + tekst + farge ---------- */
.status-badge, .smile { padding: 8px 14px; font-size: 14px; border-width: 2px; }

/* ---------- Tilgjengelighet ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (max-width: 480px) { main { padding-left: 10px; padding-right: 10px; } .card { padding: 16px; } }

/* Hanske-modus: høyere topplinje så store knapper ikke klemmes */
body.glove-mode { --header-h: 78px; }
body.glove-mode header { gap: 12px; }
body.glove-mode .site-select { min-height: 64px; font-size: 18px; }
.presets-row { padding: 2px 2px 10px; }

/* Oppgaverader: aldri klem tittelen – knappene brytes til egen linje ved behov */
.trow { flex-wrap: wrap; }
.trow .info { flex: 1 1 220px; }
.trow .btn { flex: 1 1 112px; }
.t-list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1360px) { .t-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.glove-mode .brand-mark { display: none; }
body.glove-mode .site-select { min-width: 130px; }

/* ---------- Treffflate-gulv: gjelder også knapper med inline-stil ---------- */
:root { --tap-min: 48px; }
body.glove-mode { --tap-min: 64px; }
.btn { min-height: max(var(--tap-min), var(--btn-h)) !important; min-width: var(--tap-min) !important; }
.rchip, .chip, .preset-chip, .icon-btn, .hbtn, .seg button, .set-row, select, button.tile {
  min-height: var(--tap-min) !important;
}
.rchip, .chip, .preset-chip { min-height: max(var(--tap-min), 56px) !important; }
body.glove-mode .rchip, body.glove-mode .chip, body.glove-mode .preset-chip { min-height: 72px !important; }
.icon-btn, .hbtn { min-width: var(--tap-min) !important; }
.status-badge[onclick], span[onclick].status-badge, .who [onclick] {
  min-height: 48px; padding-left: 14px; padding-right: 14px; display: inline-flex; align-items: center; cursor: pointer;
}
/* Nærliggende knapper: minst 10 px luft */
td .btn + .btn, .task-row .btn + .btn { margin-left: 10px; }

/* ---------- Emoji -> SVG-ikoner (js/emoji-icons.js) ---------- */
.em-ic { display: inline-flex; width: 1.2em; height: 1.2em; vertical-align: -0.2em; flex: none; }
.em-ic svg { width: 100%; height: 100%; }
.em-ic + .em-ic { margin-left: 0.15em; }
.em-dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; vertical-align: 0; background: currentColor; }
.em-dot.em-ok { background: var(--ok-fg); }
.em-dot.em-warn { background: var(--warn-fg); }
.em-dot.em-bad { background: var(--bad-fg); }
.em-dot.em-mute { background: var(--card-border); box-shadow: inset 0 0 0 2px var(--fg-muted); }
.btn .em-ic, .rchip .em-ic, .chip .em-ic { width: 1.3em; height: 1.3em; vertical-align: middle; }

/* Smale skjermer: faner og titler brytes i stedet for å klippes */
.seg { flex-wrap: wrap; }
.seg button { flex: 1 1 130px; padding: 8px 10px; white-space: normal; line-height: 1.2; text-align: center; }
.card-title { flex-wrap: wrap; gap: 6px 12px; }
.tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { min-width: 0; padding: 12px 4px; overflow-wrap: anywhere; }
@media (min-width: 560px) { .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Start/Stopp vakt: fylte symboler leses raskere enn omriss */
.btn svg.ic polygon, .btn svg.ic rect[width="14"][height="14"] { fill: currentColor; }

/* ---- Oppgaverad: status-merke (ikke en knapp) + hurtigbekreftelse som alltid får plass ---- */
.trow .st {
  width: 44px; height: 44px; flex: none; align-items: center; justify-content: center;
  border-radius: 12px; background: color-mix(in srgb, var(--fg-muted) 14%, transparent); color: var(--fg-muted);
  pointer-events: none;
}
.trow.done .st { background: var(--ok-bg); color: var(--ok-fg); }
.trow.late .st { background: color-mix(in srgb, var(--bad-fg) 16%, transparent); color: var(--bad-fg); }
.trow .st .ic { width: 26px; height: 26px; }

.trow-actions { display: flex; gap: 8px; align-items: stretch; flex: none; max-width: 100%; }
.trow .btn.qconf {
  flex: 1 1 auto; min-width: max-content; white-space: nowrap; gap: 6px;
  padding: 8px 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.trow .btn.qkeys { flex: none; min-width: var(--tap-min, 48px); width: var(--tap-min, 48px); padding: 0; }
.trow .btn.qconf .em-ic, .trow .btn.qkeys .em-ic { flex: none; }
@media (max-width: 480px) {
  .trow-actions { flex: 1 1 100%; }
  .trow .btn.qconf { flex: 1 1 auto; }
}
body.glove-mode .trow .btn.qkeys { width: 64px; min-width: 64px; }
body.glove-mode .trow .btn.qconf { font-size: 20px; }