/* Stämpelklocka — Emotions grafiska profil (samma värden som PP:s el-brand-tokens.css).
   Ljust tema, raka hörn på ytor, pillerknappar. Byggd för pekskärm: stora träffytor, inga rullistor,
   fyller hela fönstret i både stående och liggande läge. */
@font-face { font-family: 'TT Commons'; src: url('fonts/TTCommons-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'TT Commons'; src: url('fonts/TTCommons-DenimBold.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }

:root {
    --k-primary: #D50037;
    --k-primary-hover: #b3002e;
    --k-accent: #FCDF51;
    --k-text: #1D252C;
    --k-muted: #5B6670;
    --k-bg: #FFFFFF;
    --k-surface: #EFF0F1;
    --k-border: #dcdee0;
    --k-success: #2d7a4f;
    --k-heading: 'TT Commons', 'Open Sans', system-ui, -apple-system, sans-serif;
    --k-body: 'Open Sans', system-ui, -apple-system, sans-serif;
    --k-gap: clamp(0.6rem, 1.6vmin, 1.1rem);
    --k-pad: clamp(1rem, 3vmin, 2.2rem);
}
* { box-sizing: border-box; }
html { font-size: clamp(16px, 1.1vmin + 11px, 22px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    font-family: var(--k-body); color: var(--k-text); background: var(--k-bg);
    -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
h1, h2 { font-family: var(--k-heading); font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.5rem; }
p { margin: 0; }
[hidden] { display: none !important; }

/* ── Sidhuvud ── */
.k-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.7rem var(--k-pad); border-bottom: 1px solid var(--k-border); padding-top: max(0.7rem, env(safe-area-inset-top)); }
.k-logo { height: 2rem; width: auto; }
.k-site { font-weight: 600; color: var(--k-muted); }
.k-clock { justify-self: end; font-family: var(--k-heading); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.k-main { flex: 1; display: flex; flex-direction: column; padding: var(--k-pad); padding-bottom: max(var(--k-pad), env(safe-area-inset-bottom)); }

.k-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); margin-bottom: 0.3rem; }
.k-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); margin: 1.4rem 0 0.6rem; }

.k-msg { padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-weight: 600; text-align: left; border-left: 6px solid var(--k-muted); background: var(--k-surface); }
.k-msg--ok { border-color: var(--k-success); background: rgba(45, 122, 79, 0.12); }
.k-msg--err { border-color: var(--k-primary); background: rgba(213, 0, 55, 0.10); }
.k-msg--warn { border-color: #b08500; background: rgba(252, 223, 81, 0.25); }

/* ── Knappar (piller) ── */
.k-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: 0.8rem 1.8rem;
    font: 700 1.15rem var(--k-body); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
    border: 2px solid transparent; border-radius: 999px; background: var(--k-surface); color: var(--k-text);
}
.k-btn:disabled { opacity: 0.5; }
.k-btn--primary { background: var(--k-primary); color: #fff; }
.k-btn--primary:active { background: var(--k-primary-hover); }
.k-btn--accent { background: var(--k-accent); color: var(--k-text); }
.k-btn--dark { background: var(--k-text); color: #fff; }
.k-btn--outline { background: #fff; border-color: var(--k-text); }
.k-btn--ghost { background: #fff; border-color: var(--k-border); min-height: 2.8rem; padding: 0.5rem 1.3rem; font-size: 1rem; font-weight: 600; }
:focus-visible { outline: 3px solid var(--k-text); outline-offset: 3px; }

/* ── PIN-skärm ── */
.k-pinscreen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.k-pinscreen .k-msg { width: min(100%, 34rem); }
.k-pinscreen form { display: flex; flex-direction: column; align-items: center; }
#k-pin { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } /* värdet visas som prickar */
.k-dots { display: flex; gap: 1.1rem; margin: 1.4rem 0 1.6rem; }
.k-dots i { width: 1.3rem; height: 1.3rem; border: 2px solid var(--k-text); border-radius: 50%; }
.k-dots i.on { background: var(--k-text); }
.k-pad { --key: clamp(4rem, 13vmin, 7.5rem); display: grid; grid-template-columns: repeat(3, var(--key)); gap: var(--k-gap); }
.k-pad button {
    height: var(--key); font: 700 calc(var(--key) * 0.42) var(--k-heading); color: var(--k-text);
    background: var(--k-surface); border: 0; border-radius: 0; cursor: pointer;
}
.k-pad button:active { background: var(--k-primary); color: #fff; }
.k-pad .k-pad--alt { font: 600 calc(var(--key) * 0.2) var(--k-body); background: #fff; border: 2px solid var(--k-border); }
/* Liggande och lågt fönster: rubrik till vänster, knappsats till höger */
@media (orientation: landscape) and (max-height: 720px) {
    .k-pad { --key: clamp(3.4rem, 15vh, 6rem); }
    .k-dots { margin: 0.8rem 0 1rem; }
    h1 { font-size: 1.8rem; }
}

/* ── Personskärmar ── */
.k-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.k-step { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.k-screen { flex: 1; display: flex; flex-direction: column; }

.k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--k-gap); }
.k-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.k-step + .k-grid { margin-top: 1.2rem; }
.k-tile {
    display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; min-height: 6rem; padding: 1rem 1.2rem;
    text-align: left; font: inherit; color: var(--k-text); cursor: pointer;
    background: #fff; border: 2px solid var(--k-border); border-radius: 0;
}
.k-tile strong { font: 700 1.25rem/1.2 var(--k-heading); overflow-wrap: anywhere; }
.k-tile span { font-size: 0.9rem; color: var(--k-muted); }
.k-tile:active { background: var(--k-primary); color: #fff; }
.k-tile:active span { color: #fff; }
/* Kundruta med logotyp: bara bilden, centrerad (namnet ligger i alt-texten). */
.k-tile--logo { align-items: center; padding: 0.8rem 1rem; }
.k-tile--logo img { max-width: 100%; max-height: 4.4rem; object-fit: contain; pointer-events: none; }
.k-tile--planned { border-color: var(--k-primary); border-left-width: 10px; }
.k-tile--central { border-color: var(--k-text); }
/* Grå = går inte att trycka på (kategori som har underval hos kunden). */
.k-tile--locked, .k-tile--locked:active { background: var(--k-surface); border-color: var(--k-surface); color: var(--k-muted); cursor: default; opacity: 1; }

/* Uppgiftsskärmen: en kolumn per kategori sida vid sida, underval under sin kategori.
   Liggande: alla kategorier på en rad. Stående/smalt: kolumnerna radbryts. */
.k-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--k-gap); align-items: start; margin-top: 1.2rem; }
.k-col { display: grid; gap: var(--k-gap); }
.k-col .k-tile { min-height: 5.5rem; padding: 0.9rem 1rem; }
.k-col .k-tile strong { font-size: 1.1rem; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* långa ord avstavas med bindestreck */
.k-tile--sub { border-left: 6px solid var(--k-text); }
@media (orientation: portrait), (max-width: 900px) {
    .k-cols { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
}

.k-now { padding: 1.4rem 1.6rem; background: var(--k-surface); border-left: 10px solid var(--k-success); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.k-now > div:first-child { display: grid; gap: 0.3rem; }
.k-now--break { border-color: var(--k-accent); }
.k-now strong { font: 700 2rem/1.15 var(--k-heading); }
.k-now span { color: var(--k-muted); font-size: 1.1rem; }
.k-timer { text-align: right; }
.k-timer span { display: block; font: 700 clamp(2.4rem, 7vmin, 4rem)/1 var(--k-heading); font-variant-numeric: tabular-nums; }
.k-now .k-timer span { color: var(--k-text); }
.k-timer small { color: var(--k-muted); font-size: 1rem; }

/* Dagens tidigare uppgifter */
.k-today { margin-top: 1.8rem; }
.k-today__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--k-text); padding-bottom: 0.4rem; }
.k-today__head span { color: var(--k-muted); }
.k-today__head strong { color: var(--k-text); }
.k-today__empty { color: var(--k-muted); padding: 0.9rem 0; }
.k-today ul { list-style: none; margin: 0; padding: 0; }
.k-today li { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--k-border); }
.k-today__time { font-variant-numeric: tabular-nums; color: var(--k-muted); }
.k-today__what { font-weight: 600; }
.k-today__dur { font-variant-numeric: tabular-nums; font-weight: 600; }
.k-today--break .k-today__what, .k-today--break .k-today__dur { font-weight: 400; color: var(--k-muted); }

.k-actions { display: grid; gap: var(--k-gap); margin-top: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.k-actions .k-btn { min-height: 5.5rem; font-size: 1.4rem; line-height: 1.25; text-align: center; }

/* ── Bekräftelse ── */
.k-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; }
.k-done__icon { width: clamp(5rem, 18vmin, 9rem); height: auto; margin-bottom: 0.8rem; }
.k-done__icon circle { fill: var(--k-success); }
.k-done__icon path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.k-done__name { font-size: 1.2rem; font-weight: 600; color: var(--k-muted); }
.k-done h1 { font-size: 3rem; }
.k-done__detail { font: 700 1.6rem var(--k-heading); }
.k-done__time { font-size: 1.2rem; color: var(--k-muted); }
.k-done__undo { margin-top: 1.6rem; min-height: 4.2rem; padding: 0.9rem 2.4rem; font-size: 1.25rem; }
.k-done__bar { width: min(80%, 26rem); height: 6px; background: var(--k-surface); margin-top: 1.4rem; }
.k-done__bar i { display: block; height: 100%; background: var(--k-text); animation: k-count 3s linear forwards; }
@keyframes k-count { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .k-done__bar { display: none; } }

/* ── Aktivering ── */
.k-setup { width: min(100%, 30rem); margin: auto; }
.k-setup label { display: block; margin: 1.2rem 0 0.4rem; font-weight: 600; }
.k-setup select, .k-setup input { width: 100%; font: 1.2rem var(--k-body); padding: 0.9rem; border: 2px solid var(--k-muted); border-radius: 0; background: #fff; color: var(--k-text); }
.k-setup .k-btn { width: 100%; margin-top: 1.6rem; }