/* Verkstedet: en firespors kassettopptaker og en notatblokk.
   Bare denne sida laster fila. Fargene på maskinen er egne, resten arver fra style.css. */
.verksted {
  --metall: #2b2724;
  --metall-lys: #3a3531;
  --panel: #c9c1b1;
  --skrift: #e9e1cf;
  --tast: #ddd5c4;
  --tast-ned: #b9b09d;
  --rod: #c8361c;
  --papir: #f5eba6;
  --linje: #9db3cf;
  --marg: #d0614d;
  --blekk: #22357a;
  --hand: 'Reenie Beanie', 'Bradley Hand', cursive;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
.usynlig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- Maskinen ---------- */
.dekk {
  background: var(--metall); color: var(--skrift); border-radius: 6px;
  padding: clamp(0.9rem, 2.2vw, 1.6rem); display: grid; gap: clamp(0.9rem, 2vw, 1.4rem);
  border-top: 1px solid var(--metall-lys);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.dekk-topp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(0.8rem, 2vw, 1.4rem); align-items: stretch; }

.kassettrom { background: #15110f; border-radius: 4px; padding: 0.6rem; display: grid; place-items: center; }
.kassett { width: 100%; height: auto; display: block; }
.k-kropp { fill: #4a443e; }
.k-etikett { fill: #f1e7cf; }
.k-stripe { fill: var(--flate); }
.k-side { font: 700 18px var(--font); fill: var(--flate); }
.k-tittel { font: 30px var(--hand); fill: var(--blekk); }
.k-vindu { fill: #1d1714; stroke: #6b6259; stroke-width: 1.5; }
.k-pakke { fill: #5a3a26; }
.k-spole circle { fill: #e6dfd0; }
.k-spole rect { fill: #4a443e; }
.k-bunn { fill: #3d3833; }
.k-skrue { fill: #2b2724; }

.instrumenter { display: grid; gap: 0.8rem; align-content: space-between; }
.teller { display: grid; gap: 0.3rem; justify-items: start; }
.teller .tall {
  font: 700 clamp(1.6rem, 3.4vw, 2.4rem) / 1 var(--font); letter-spacing: 0.3em; padding: 0.3rem 0.1rem 0.3rem 0.4rem;
  background: #0f0c0b; color: #f4eee2; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.etikett { font-size: 0.625rem; color: #a59c8e; }
.vu { display: grid; gap: 0.35rem; }
.vu-rad { display: grid; grid-template-columns: 1rem 1fr; align-items: center; gap: 0.4rem; font-size: 0.625rem; color: #a59c8e; }
/* 12 segmenter: de siste tre er røde. --niva (0–1) styres fra JS. */
.vu-rad i {
  height: 0.6rem; display: block; --niva: 0;
  background:
    linear-gradient(90deg, transparent calc(var(--niva) * 100%), #0f0c0b 0),
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 2px), #0f0c0b 0 calc(100% / 12)),
    linear-gradient(90deg, #e9dcb4 0 75%, var(--rod) 0);
}
.tid { margin: 0; font-size: 0.6875rem; color: #a59c8e; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

/* Mikseren: fire kanaler (pynt) og master (volum) */
.mikser {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem;
  background: var(--panel); color: #2b2724; border-radius: 3px; padding: 0.8rem 1rem;
}
.kanaler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.kanal { display: grid; justify-items: center; gap: 0.45rem; font-weight: 700; }
.knott { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #2b2724; position: relative; }
.knott::after { content: ''; position: absolute; left: 50%; top: 2px; width: 2px; height: 0.4rem; background: var(--panel); transform: translateX(-50%); }
.kanal .knott:nth-child(2) { background: var(--rod); }
.skinne { width: 4px; height: 5.5rem; background: #2b2724; position: relative; margin-block: 0.3rem; }
.skinne b { position: absolute; left: 50%; bottom: var(--pos); width: 1.6rem; height: 0.7rem; transform: translate(-50%, 50%); background: #1b1816; border-top: 2px solid #f1e7cf; }
.master { display: grid; justify-items: center; gap: 0.45rem; font-weight: 700; padding-left: 1rem; border-left: 1px solid #9d9584; }
.master input {
  writing-mode: vertical-lr; direction: rtl; width: 1.6rem; height: 8.3rem; margin: 0;
  accent-color: var(--rod); cursor: pointer;
}

/* Transport: mekaniske taster. Play og Pause blir stående nede. */
.transport { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
.tast {
  appearance: none; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--tast); color: #2b2724; font: inherit;
  display: grid; justify-items: center; gap: 0.15rem; padding: 0.9rem 0.2rem 0.6rem;
  border-bottom: 5px solid #8f8778; transition: transform 60ms, border-width 60ms;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.tast i { font-style: normal; font-size: 1rem; letter-spacing: -0.1em; line-height: 1; }
.tast small { font-size: 0.5625rem; letter-spacing: 0.12em; }
.tast:active, .tast.nede { background: var(--tast-ned); border-bottom-width: 1px; transform: translateY(4px); }
.tast:focus-visible { outline: 2px solid var(--skrift); outline-offset: 2px; }
.tast.rec { background: #3a3531; color: #7f766a; cursor: default; }
.tast.rec i { color: var(--rod); }
.merkeplate { margin: 0; justify-self: end; font-size: 0.625rem; color: #a59c8e; }

/* ---------- Notatblokka ---------- */
.blokk {
  background-color: var(--papir); color: var(--blekk); font-family: var(--hand);
  font-size: 1.6rem; line-height: 2rem;
  padding: 2.6rem 1.4rem 2rem 3.6rem; position: relative;
  background-image:
    linear-gradient(90deg, transparent 2.6rem, var(--marg) 0 calc(2.6rem + 1px), transparent 0),
    repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--linje) 0 2rem);
  background-position: 0 0, 0 0.15rem;
  align-self: stretch;
  border-top: 1.2rem solid #3b2f2a;
  transform: rotate(0.6deg);
}
.blokk h2, .blokk h3, .blokk p, .blokk ol { margin: 0; font-weight: 400; }
.blokk .dato { text-align: right; }
.blokk h2 { font-family: var(--hand); font-size: 2.4rem; line-height: 2rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.notat p { text-wrap: pretty; }
.blokk h3 { font-size: 1.6rem; margin-top: 2rem; }
.innhold { padding: 0; list-style: none; counter-reset: spor; }
.innhold li { counter-increment: spor; }
.innhold button {
  appearance: none; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.innhold button::before { content: counter(spor) '. '; }
.innhold button:hover, .innhold [aria-current] { text-decoration: underline; text-decoration-thickness: 1px; }
.innhold [aria-current]::after { content: ' ←'; }
.innhold .d { opacity: 0.6; }
.blokk ::selection { background: var(--blekk); color: var(--papir); }

@media (max-width: 960px) {
  .verksted { grid-template-columns: minmax(0, 1fr); }
  .blokk { transform: none; }
}
@media (max-width: 520px) {
  .dekk-topp { grid-template-columns: minmax(0, 1fr); }
  .instrumenter { grid-template-columns: auto 1fr; align-items: end; }
  .tid { grid-column: 1 / -1; }
  .knott { width: 1rem; height: 1rem; }
  .skinne { height: 4rem; }
  .master input { height: 6.4rem; }
  .tast { padding-block: 1rem 0.6rem; }
  .blokk { padding-left: 3rem; }
  .blokk { background-image:
    linear-gradient(90deg, transparent 2.1rem, var(--marg) 0 calc(2.1rem + 1px), transparent 0),
    repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--linje) 0 2rem);
    background-position: 0 0, 0 0.15rem; }
}