/* Webb-specifika tillägg ovanpå appens riktiga styles.css.
   Medvetet litet: allt utseende ska komma från stylesheeten appen redan har.
   Här ligger bara det som skiljer sig när titelraden och Electron-skalet saknas. */

/* styles.css utgår från att body fylls av titelrad + app-shell (flex:1).
   Utan titelraden behöver body en höjd att fylla. */
html { height: 100%; }
body { min-height: 100dvh; }

/* Läs-läge: säg rakt ut vad som inte finns här. */
.web-notis {
  margin: 0 0 16px;
  padding: 9px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.web-laddar {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

/* Telefon: sidofältet får inte äta 260 px av en 375 px-skärm.
   Det läggs över huvudytan i stället för att stå bredvid. */
@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    max-height: 42vh;
  }
  .sidebar-tree { flex: 1 1 100%; min-width: 0; }
  .sidebar-foot { flex: 1 1 100%; }
  .main { padding-left: 12px; padding-right: 12px; }
}

/* OBS om matrisen på mobil: den behålls medvetet som 2×2, inte staplad.
   Två skäl: (1) rutnätet ÄR modellen – viktigt/brådskande på två axlar; staplar
   man den till en kolumn blir det en vanlig lista och hela poängen försvinner.
   (2) Tekniskt går det inte att stapla med enbart CSS ändå: matrix.js placerar
   kvadranterna med explicita grid-positioner, så implicita spår skapas oavsett
   `grid-template-columns`. Vill man ha en mobilspecifik layout måste matrix.js
   ändras – det hör hemma i Fas 4 (touch & mobil), se docs/WEB-VERCEL-PLAN.md. */