/* Skjermspesifikk layout: Hjem, jobb, nøkkeltall, planlegging. */

/* ── Hjem ────────────────────────────────────────────────────────────── */

.home-head { display: flex; align-items: flex-start; gap: 10px; padding: calc(22px + env(safe-area-inset-top, 0px)) var(--gutter) 0; }
.here { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-radius: 12px; }
.here small { display: flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 13px; }
/* Lange stedsnavn bryter i stedet for å skyve knappene (og siden) ut til siden. */
.here-site { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; overflow-wrap: anywhere; font-size: clamp(22px, 7.2vw, var(--fs-title)); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.here-site .icon { color: var(--ink-2); }
.home-actions { display: flex; gap: 8px; }
.screen-home .screen-body { padding-top: 14px; }

.next-job { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-xl); background: var(--brand-soft); }
.nj-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kicker { color: var(--brand); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.nj-due { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.nj-due.tone-crit { color: var(--crit); }
.nj-title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.nj-sub { margin-top: -6px; color: var(--ink-2); font-size: 14px; }

/* ── Jobb ────────────────────────────────────────────────────────────── */

.job-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: -12px; color: var(--ink-2); font-size: 14px; }
.job-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.job-meta .tone-crit { color: var(--crit); }
.job-meta .tone-ok { color: var(--ok-ink); }
.job-title + .job-meta + .pill, .job-meta + .pill { margin-top: -10px; }
.desc { margin-top: -6px; font-size: 15.5px; max-width: 60ch; }
.status-line { margin-top: -12px; color: var(--ink-2); font-size: 14px; }

/* ── Nøkkeltall ──────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--r-lg);
  background: var(--stone-2); color: var(--ink);
}
.tile:hover { background: var(--stone); text-decoration: none; }
.tile-label { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; }
.tile-value { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile-hint { color: var(--ink-2); font-size: var(--fs-xs); }
.tile-crit .tile-value { color: var(--crit); }
.tile-warn .tile-value { color: var(--warn); }

.chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.bar { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bar-track { position: relative; width: 100%; height: 120px; overflow: hidden; border-radius: var(--r-sm); background: var(--stone-2); }
.bar-fill { position: absolute; inset: auto 0 0 0; height: var(--h); background: var(--brand); }
.bar-cap { position: absolute; inset: auto 0 var(--c) 0; border-top: 2px dashed var(--ink-2); }
.bar-value { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-label { color: var(--ink-2); font-size: var(--fs-xs); }
.bar.load-near .bar-fill { background: var(--warn); }
.bar.load-over .bar-fill { background: var(--crit); }

/* ── Planlegging ─────────────────────────────────────────────────────── */

.day-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 68px; padding: 6px 2px;
  border-radius: var(--r-md); background: var(--stone); color: var(--ink-2); text-align: center;
}
.day-chip[aria-pressed='true'] { background: var(--brand); color: var(--paper); }
.day-wd { font-size: 12px; font-weight: 500; }
.day-date { font-size: var(--fs-lg); font-weight: 600; }
.day-n { font-size: 12px; font-variant-numeric: tabular-nums; }
.day-chip.load-over:not([aria-pressed='true']) .day-n { color: var(--crit); font-weight: 600; }

.load { display: flex; flex-direction: column; gap: 8px; }
.load-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.load-row b { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.load-flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; }
.load-near .load-flag { color: var(--ink); }
.load-near .load-flag .icon { color: var(--warn); }
.load-over .load-flag { color: var(--crit); }
.load-bar { display: block; height: 8px; overflow: hidden; border-radius: 9px; background: var(--line-2); }
.load-fill { display: block; width: var(--p); height: 100%; border-radius: 9px; background: var(--brand); }
.load-near .load-fill { background: var(--warn); }
.load-over .load-fill { background: var(--crit); }