/* skal.css — skallens eget layout: arbejdsrummenes faner, startskærmen og skiftet mellem dem.
   Bruger kun tokens fra studio.css. */

.skjult-arbejdsrum { display: none !important }
/* Før et arbejdsrum er valgt (startskærmen), vises intet arbejdsrums eget indhold. */
body:not([data-aktivt-arbejdsrum]) :is([data-arbejdsrum], [data-i-projekt]) { display: none !important }

/* ── faner ────────────────────────────────────────────────────────────────── */
.arbejdsrum-faner { display: flex; align-items: center; gap: 2px; margin-left: 12px; padding: 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line) }
.arbejdsrum-faner button {
  height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: none;
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.arbejdsrum-faner button:hover { background: var(--accent-tint); color: var(--accent-strong) }
.arbejdsrum-faner button[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: var(--shadow-1) }

/* Flammen: et kort lysbånd i den nye accent langs menulinjens underkant. */
.appbar { position: relative }
.appbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-strong) 50%, var(--accent) 65%, transparent);
  opacity: 0; transform: scaleX(0); transform-origin: left center;
}
.appbar.skifter::after { animation: flamme 0.7s ease-out }
@keyframes flamme {
  0% { opacity: 1; transform: scaleX(0) }
  55% { opacity: 1; transform: scaleX(1) }
  100% { opacity: 0; transform: scaleX(1) }
}

/* ── tomme arbejdsrum ─────────────────────────────────────────────────────── */
.tomt-arbejdsrum p { margin: 14px; color: var(--muted); font-size: 12.5px; line-height: 1.5 }

/* ── startskærm ───────────────────────────────────────────────────────────── */
.startskaerm {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(3px);
}
.start-indhold {
  width: min(760px, calc(100vw - 32px)); padding: 28px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.start-indhold h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em }
.start-indhold h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em }
.start-valg { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px }
.ws-kort {
  --ws: var(--studio-kloak);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 112px; padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
}
.ws-kort[data-studio-kort="bassin"] { --ws: var(--studio-bassin) }
.ws-kort[data-studio-kort="flood"] { --ws: var(--studio-flood) }
.ws-kort b { font-size: 15px }
.ws-kort span:last-child { color: var(--muted); font-size: 12px; line-height: 1.4 }
.ws-maerke { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ws) }
.ws-kort[data-studio-kort="alle"] .ws-maerke {
  background: linear-gradient(90deg, var(--studio-kloak) 0 33.3%, var(--studio-bassin) 33.3% 66.6%, var(--studio-flood) 66.6%);
}
.ws-kort:hover, .ws-kort:focus-visible { border-color: var(--ws); box-shadow: var(--shadow-1); transform: translateY(-1px); outline: none }
.ws-kort[data-studio-kort="alle"]:hover, .ws-kort[data-studio-kort="alle"]:focus-visible { border-color: var(--ink-2) }
.start-knapper { display: flex; gap: 8px; margin-top: 18px }

/* ── fælles tegnelag ──────────────────────────────────────────────────────── */
/* Gitter, referencetegninger og LER under arbejdsrummenes lag; nedtones aldrig. */
#data-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 449 }

/* ── projektområdet ───────────────────────────────────────────────────────── */
/* Laget over kortet, mens området trækkes; arbejdsrummenes værktøjer får ikke musen. */
.omraade-tegner { position: absolute; inset: 0; z-index: 1000; cursor: crosshair; touch-action: none }
.adresse-resultater { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
.adresse-resultater:empty { display: none }
.adresse-resultater li.tom { color: var(--muted); font-size: 11.5px }
.adresse-resultater button { text-align: left }
#omraade-maal.advarsel { color: var(--bad) }