:root {
    --vegg: #d9d6cf;
    --gra: #8a8a86;
    --tekst: #3b3b39;
    --panel: rgba(240, 239, 235, 0.92);
    --knapp: #5f6b78;
    --skrift: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--vegg);
    color: var(--tekst);
    font-family: var(--skrift);
}

#kontor {
    display: block;
    width: 100vw;
    height: 100dvh;
    touch-action: none;
}

.hud {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: calc(16px + env(safe-area-inset-left));
    display: flex;
    gap: 10px;
    padding: 6px 10px;
    background: var(--panel);
    border: 1px solid #c4c2bc;
    font-size: 13px;
    pointer-events: none;
}

.hud .klokke {
    color: var(--gra);
    font-variant-numeric: tabular-nums;
}

.start {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(217, 214, 207, 0.6);
}

.start[hidden] {
    display: none;
}

/* Før første «Gå på jobb» skal kontoret ikke synes i det hele tatt */
.start.forste {
    background: var(--vegg);
}

/* Dagsjekken i dag.js setter data-onsdag på <html> */
:root:not([data-onsdag="ja"]) .bare-onsdag,
:root:not([data-onsdag="nei"]) .ikke-onsdag {
    display: none !important;
}

/* ---------- Dørskiltet ---------- */

.dorskilt {
    position: fixed;
    left: 50%;
    bottom: calc(64px + env(safe-area-inset-bottom));
    translate: -50% 0;
    padding: 8px 16px;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: var(--knapp);
    border: 0;
    white-space: nowrap;
}

.dorskilt[hidden] {
    display: none;
}

.dorskilt:disabled {
    color: var(--tekst);
    background: var(--panel);
    border: 1px solid #c4c2bc;
}

/* ---------- Sirkelen ---------- */

/* Kontoret åpner seg i en sirkel som vokser ut fra knappen, mens det zoomer
   litt inn på plass. --x, --y og --r settes i script.js. */
:root {
    --avslor: 1.4s;
    --kurve: cubic-bezier(0.7, 0, 0.25, 1);
}

#kontor.skjult {
    clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
    transform: scale(1.15);
    transform-origin: var(--x, 50%) var(--y, 50%);
}

#kontor.skjult.avslor {
    animation: avslor var(--avslor) var(--kurve) forwards;
}

@keyframes avslor {
    from { clip-path: circle(0 at var(--x) var(--y)); transform: scale(1.15); }
    to   { clip-path: circle(var(--r) at var(--x) var(--y)); transform: scale(1); }
}

/* Ringen følger kanten av sirkelen og blekner mot slutten */
.ring {
    position: fixed;
    left: var(--x);
    top: var(--y);
    border: 3px solid var(--knapp);
    border-radius: 50%;
    translate: -50% -50%;
    pointer-events: none;
    display: none;
}

.ring.i-gang {
    display: block;
    animation: ring var(--avslor) var(--kurve) forwards;
}

@keyframes ring {
    0%   { width: 0; height: 0; opacity: 1; }
    70%  { opacity: 1; }
    100% { width: calc(var(--r) * 2); height: calc(var(--r) * 2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --avslor: 0s;
    }

    .ring.i-gang {
        display: none;
    }
}

/* ---------- Legende ---------- */

.legende {
    position: fixed;
    left: calc(16px + env(safe-area-inset-left));
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    max-width: calc(100vw - 32px);
    padding: 6px 10px;
    background: var(--panel);
    border: 1px solid #c4c2bc;
    font-size: 12px;
    color: var(--gra);
    pointer-events: none;
}

.legende b {
    font-weight: normal;
    color: var(--tekst);
}

.legende .touch {
    display: none;
}

@media (pointer: coarse) {
    .legende .mus {
        display: none;
    }

    .legende .touch {
        display: inline;
    }
}

.kort {
    width: min(360px, 100%);
    padding: 24px;
    background: var(--panel);
    border: 1px solid #c4c2bc;
    text-align: center;
}

.kort h1 {
    margin: 0 0 18px;
    font-size: 28px;
    font-weight: normal;
}

.kort p {
    margin: 0 0 18px;
}

.kort button {
    padding: 8px 20px;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: var(--knapp);
    border: 0;
    cursor: pointer;
}