/* Filmrummet: mörk bassäng, kakelrutor och gul primärfärg. */

:root {
  --bg: #050f14;
  --surface: #0a1a22;
  --surface-2: #10262f;
  --line: #1b3744;
  --text: #e4eef0;
  --muted: #7f9ba5;
  --accent: #fdeb40;
  --accent-ink: #1c1900;
  --danger: #ff6b57;
  --danger-ink: #2a0a05;       /* text på röd bakgrund */
  --danger-surface: #2b110d;   /* bakgrund i felmeddelanden */
  --danger-text: #ffdcd6;      /* text i felmeddelanden */
  --surface-3: #123543;        /* matchflikar och grupprubriker */
  --surface-4: #17414f;        /* hovring och redigeringsläge */
  --panel: #0f2a35;            /* filterpanelen */
  --line-strong: #2c5263;      /* tydligare kantlinje */
  --line-dashed: #4d6874;      /* streckad ram kring redigerbart namn */
  --placeholder: #55717c;
  --field: rgba(0, 0, 0, .28); /* bakgrund i textfält och liknande */
  --accent-shade: rgba(0, 0, 0, .16); /* antalsbricka på gul pill */
  --shadow: rgba(0, 0, 0, .8);
  --backdrop: rgba(2, 8, 11, .78);
  --glow: rgba(70, 180, 210, .17);      /* ljuset från ytan i bakgrunden */
  --tile-line: rgba(130, 205, 225, .04); /* kakelrutorna i bakgrunden */
  --video-bg: #000;
  --ease: .1s ease-out;        /* den enda övergången i hela stilmallen, se regeln för * nedan */
  --page-fade: .2s;           /* hur länge en sida tonas ut och in vid sidbyte */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Chivo Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* Rullningslisten får sin plats reserverad på alla sidor. Annars blir en kort sida (startsidan) bredare
   än en lång (ett inlägg), och toppraden hoppar i sidled när man går mellan dem. */
html { color-scheme: dark; scrollbar-gutter: stable; }

/* Mjuk övergång mellan sidor: den gamla sidan tonas ut och den nya in. Toppraden har ett eget namn, så
   att den står still i stället för att tonas med.
   OBS: själva påslagningen, @view-transition { navigation: auto; }, ligger inbäddad i layouts/head.blade.php
   och inte här. Härifrån, eller inuti @media, räknar den NYA sidan den inte, och då hoppas övergången över
   utan felmeddelande (provat 2026-09-21, Chrome 152). Den som bett om mindre rörelse får animationerna
   avstängda, så att sidbytet sker direkt. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
  animation-duration: var(--page-fade);
  animation-timing-function: ease-out;
}


body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 1rem/1.55 var(--font-body);
  background:
    radial-gradient(1100px 480px at 50% -140px, var(--glow), transparent 70%),
    linear-gradient(var(--tile-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--tile-line) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

#app, .topbar {
  width: min(1280px, 100%);
  margin: 0 auto;
}
#app { padding: 28px 16px 80px; }

.topbar {
  view-transition-name: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 0;
  color: var(--muted);
  font-size: .9rem;
}
.topbar form { display: flex; align-items: center; gap: 14px; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font: 500 .8rem var(--font-mono);
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
}
.brand::before { content: ''; width: 36px; height: 2px; background: var(--accent); }

a { color: inherit; }

/* ALLT har övergång, och alltid utan uppräknade egenskaper. Då följer nya stilar med av sig själva.
   Skriv aldrig "transition: background ..." eller liknande någon annanstans i den här filen. */
*, *::before, *::after { transition: var(--ease); }
h1, h2, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* En dialogruta får själv fokus när den öppnas (openDialog i app.js). Rutan ska inte ha någon ram för det. */
dialog:focus, dialog:focus-visible { outline: none; }

/* ---------- Byggstenar ---------- */

input, textarea {
  width: 100%;
  padding: 11px 12px;
  color: var(--text);
  font: inherit;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { display: block; resize: vertical; }
/* Kalendern: egen datumväljare, samma på alla enheter. Fältet är en knapp som visar valet, och under
   den öppnas månaden i ett kort. Ett klick väljer en dag, två klick första och sista dagen. */
.datefield > span:first-child { display: block; margin-bottom: 6px; color: var(--muted); font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.datepick { position: relative; }
.datepick-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; color: var(--text); font: inherit; text-align: left; background: var(--field); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.datepick-field[aria-expanded="true"] { border-color: var(--accent); }
.datepick-field svg { flex: none; color: var(--muted); }
.datepick-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* platshållaren är en hel mening */
.datepick-value.placeholder { color: var(--placeholder); }
.datepick-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 320px; max-width: calc(100vw - 32px); padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px var(--shadow); }
.datepick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.datepick-month { font: 600 .95rem var(--font-body); text-transform: capitalize; }
.datepick-nav { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 8px; cursor: pointer; }
@media (hover: hover) { .datepick-nav:hover { color: var(--text); background: var(--bg); } }
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepick-dow { padding: 4px 0; color: var(--muted); font: 500 .68rem var(--font-mono); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.datepick-day { display: flex; align-items: center; justify-content: center; height: 38px; padding: 0; color: var(--text); font: 500 .9rem var(--font-mono); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: var(--ease), background-color 0s; } /* markeringen av dagar emellan ska slå till direkt, inte svepa in cell för cell */
@media (hover: hover) { .datepick-day:hover { background: var(--bg); } }
.datepick-day.today { border-color: var(--line-strong); }
/* Ett valt intervall är gult rakt igenom. Bara förhandsläget, dagarna mellan första dagen och den pekaren
   står på innan andra klicket, har den dämpade färgen. */
.datepick-day.between { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.datepick-day.between-preview { background: var(--surface-3); }
.datepick-day.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
/* Snabbvalen bredvid datumfältet, som ett fält bland de andra: samma lilla rubrik som fältrubrikerna, och under
   den två kompakta rader med veckodagen till vänster och de tre senaste dagarna som lika breda piller. Raderna
   linjerar med datumfältet och hjälptexten bredvid. Ingen egen bakgrund (Markus tog bort den). */
.datepick-quicks { display: grid; gap: 6px; align-content: start; }
.datepick-quicks-title { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.datepick-quicks-title svg { width: 13px; height: 13px; } /* kalenderikonen visar att snabbvalen styr datumet */
.datepick-quick { display: flex; align-items: center; gap: 8px; }
.datepick-quick-chips { display: flex; flex: 1; gap: 8px; min-width: 0; }
/* Mobil: veckodagen på egen rad och pillren under, som Markus skiss. */
@media (max-width: 759px) {
  .datepick-quick { flex-flow: column nowrap; align-items: stretch; gap: 6px; }
  .datepick-quick > .datepick-quick-label { flex: none; } /* de 72 px är en bredd för raden på skrivbord, inte en höjd här. Två klasser: etikettregeln ligger senare i filen */
  .datepick-quicks { gap: 10px; }
}
/* Foten, staplad enligt Markus skiss: Klar i full bredd, Rensa centrerad under. Ingen text som byter
   radantal och får knapparna att hoppa. */
.datepick-foot { display: grid; gap: 12px; justify-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.datepick-foot .btn { justify-self: stretch; padding: 13px 28px; } /* Klar är vägen ut ur kalendern, så den ska synas */
.datepick-quick-label { flex: 0 0 72px; color: var(--muted); font: 500 .68rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
/* .chip och .chip.plain ligger senare i filen. Kanten sätts med samma tyngd som .chip.on, som ska vinna för det
   valda pillret, och luften med en tyngre väljare än .chip.plain. */
.datepick-quick-chips .chip { flex: 1 1 0; justify-content: center; font-size: .85rem; }
.datepick-quick-chips .chip.plain { padding: 8px 10px; }
.new-post > label, .datefield, .datepick-quicks { min-width: 0; } /* rutnätets celler får inte växa av innehållets egen bredd: platshållaren i datumfältet är en hel mening utan radbrytning */
/* Pekskärm: fält under 16 px får iOS att zooma in vid fokus, så där är de aldrig mindre. */
 (hover: none) { input, textarea, select { font-size: max(1rem, 16px); } }

.btn {
  flex: none;
  padding: 11px 16px;
  color: var(--accent-ink);
  font: 600 .95rem var(--font-body);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
@media (hover: hover) { .btn:hover { filter: brightness(1.08); } }
.btn.ghost { color: var(--text); background: transparent; border-color: var(--line); }
.btn.danger { color: var(--danger-ink); background: var(--danger); border-color: var(--danger); }
.btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }
@media (hover: hover) { .btn.ghost:hover { border-color: var(--muted); } }

.link-danger {
  padding: 0;
  color: var(--muted);
  font: 400 .85rem var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (hover: hover) { .link-danger:hover { color: var(--danger); } }

.link {
  padding: 0;
  color: var(--muted);
  font: 400 .85rem var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (hover: hover) { .link:hover { color: var(--text); } }

.row { display: flex; gap: 8px; }

.hint { color: var(--muted); }
.hint.small { font-size: .9rem; }

.time {
  font: 500 .95rem var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.time.big { color: var(--accent); font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px 5px 12px;
  color: var(--text);
  font: 500 .875rem var(--font-body);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
@media (hover: hover) { .chip:hover { border-color: var(--muted); } }
.chip .count {
  min-width: 1.7em;
  padding: 1px 7px;
  color: var(--muted);
  font: 500 .75rem var(--font-mono);
  text-align: center;
  background: var(--surface-2);
  border-radius: 999px;
}
.chip.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.chip.on .count { color: var(--accent-ink); background: var(--accent-shade); }
.chip.static { padding: 5px 12px; cursor: default; }
.chip.plain { padding: 5px 12px; } /* pill utan antal, t.ex. sorteringen */

/* ---------- Startsida ---------- */

.hero { padding: 4vh 0 36px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--accent);
  font: 500 .8rem var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 36px; height: 2px; background: var(--accent); }
.hero h1 {
  font: 900 clamp(3.2rem, 10vw, 7rem)/.88 var(--font-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.new-post {
  display: grid;
  gap: 12px;
  align-items: end;
  padding: 18px;
  background: var(--surface);
  border-radius: 12px; /* kort utan kantlinje: linjer krockar med rutmönstret i bakgrunden */
}
/* Startsidan: "Skapa inlägg" är ett lugnt block längst ned i kortet, lika brett som fälten och med samma
   radie som dem (Markus skiss). Den gula knappen blev för skrikig fullbred och obalanserad i rad med fälten. */
.create-post > .add-row {
  grid-column: 1 / -1;
  margin-top: 12px; /* lite mer luft från fälten än rutnätets 20 px */
  padding: 18px;
  color: var(--muted);
  font: 600 1.25rem/1.2 var(--font-body);
  text-align: center;
  background: var(--surface-3);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
@media (hover: hover) { .create-post > .add-row:hover { color: var(--accent); } }
/* Fältens rubriker: bara det första spannet i etiketten, inte omslagen runt lösenords- och datumfält. */
.new-post label > span:first-child, .clip-form > label, .views-label, .sub-label, .auth-form label > span:first-child, .filter-group h3, .feed-title {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font: 500 .72rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.clip-form > label { color: var(--text); font-size: .936rem; } /* "Ny timestamp": 30 % större och vit, formulärets huvudsak */
@media (min-width: 760px) {
  .new-post { grid-template-columns: 1fr auto; }
  .new-post.attach-video { grid-template-columns: 1.6fr 1fr auto; }
  .new-post.rename { grid-template-columns: 1fr auto; }
  /* Startsidan: titel och länk sida vid sida, under dem kalender (med hjälptexten) och snabbval. */
  .new-post.create-post { grid-template-columns: 1fr 1fr; }
  /* Inläggssidan: "Ändra datum" har kalendern och Spara på samma rad. */
  .new-post.date-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } /* kalender, snabbval, Spara */
  .date-form .datefield { align-self: start; } /* fältet i höjd med blockets överkant, Spara ligger kvar i botten */
}

/* Tomt läge på startsidan, i båda vyerna */
.empty-card { margin-top: 30px; padding: 34px 20px; color: var(--muted); text-align: center; background: var(--surface); border-radius: 12px; }

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
/* Startsidan: filterrad, månadsrubriker och klippvy */
.home-views { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
.home-views .views-label { margin: 0; }
.home-views.home-group-row { margin-top: 16px; } /* Grupper, direkt under Vyer */
.home-tags { margin-top: 14px; }
.month { margin-top: 30px; }
.month-title {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text); /* vit, som sektionsrubrikerna på inläggssidan */
  font: 700 1.25rem/1 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.month .posts { margin-top: 16px; }
.home-group { margin-top: 16px; overflow: hidden; background: var(--surface); border-radius: 12px; }
.home-group h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  font: 700 1.25rem/1.1 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--surface-3);
}
.home-group h3 a { text-decoration: none; }
@media (hover: hover) { .home-group h3 a:hover { color: var(--accent); } }
.home-group h3 .count { color: var(--muted); font: 500 .75rem var(--font-mono); letter-spacing: 0; text-transform: none; }

.posts li { animation: rise .45s ease both; animation-delay: calc(var(--i) * 50ms); }
.posts a {
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid transparent; /* syns bara vid hovring, då den blir gul */
  border-radius: 12px;
}
@media (hover: hover) { .posts a:hover { border-color: var(--accent); } }
.posts img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--video-bg); }
.post-title {
  display: block;
  padding: 14px 16px 0;
  font: 700 1.7rem/1 var(--font-display);
  text-transform: uppercase;
}
.post-meta { display: block; padding: 6px 16px 16px; color: var(--muted); font: 400 .8rem var(--font-mono); }
/* Datumet under titeln: kalenderikon och "12 sep", eller "12 sep - 15 sep" över flera dagar. */
.post-date { display: flex; align-items: center; gap: 6px; margin: 8px 16px 0; color: var(--muted); font-size: .85rem; }
.post-date svg { flex: none; }
.home-group h3 .post-date { flex: 1; margin: 0; font: 400 .85rem var(--font-body); letter-spacing: 0; text-transform: none; }
/* Skapa inlägg: mer luft mellan fälten än i de andra formulären. Hjälptexten om dagens datum hör till
   datumfältet och ligger inne i dess etikett, så fälten linjerar upptill i stället för nedtill. */
.create-post { gap: 20px; align-items: start; }
.create-post .field-hint { display: block; margin-top: 8px; }
/* Inlägg utan video har ingen bild, och i vyn Anteckningar visas början av första kortet. */
.posts a.note-post .post-title { padding-top: 18px; }
.post-excerpt { display: -webkit-box; overflow: hidden; margin: 8px 16px 0; color: var(--muted); font-size: .9rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* ---------- Inläggssida ---------- */

/* Sidan har två delar: toppen med titel och anteckningar, och under den videodelen. */
/* Sektionsrubrikerna "Anteckningar" och "Video" är vita och tydliga. Sidans titel skiljs från dem
   genom att den ligger i ett eget kort, inte genom att de tonas ner (Markus val). */
.section-title { margin: 0 0 16px; color: var(--text); font: 700 1.75rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.video-section { margin-top: 56px; }
/* Rubrikraden i videodelen: flikar för inläggets filmer (först vid två eller fler) och ägarens verktyg. */
/* "Video" står på en egen rad. Under den: filmernas flikar till vänster och verktygen till höger. */
.video-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.video-head .section-title { flex: 0 0 100%; margin: 0 0 4px; }
/* Textknapp med ikon framför, t.ex. "Namn" och "Ta bort" vid filmerna. */
.icon-link { display: inline-flex; align-items: center; gap: 6px; font: 400 .85rem/1.3 var(--font-body); }
.icon-link svg { flex: none; width: 15px; height: 15px; }
/* Rubrik med plusknapp direkt efter: "Video" (ny film) och startsidans "Nytt inlägg". Formuläret under
   är infällt tills man trycker, och plus blir minus medan det är öppet. */
.section-title.with-plus { display: flex; align-items: center; gap: 10px; }
.section-title > .icon-btn { color: var(--text); border-color: var(--line); }
@media (hover: hover) { .section-title > .icon-btn:hover { color: var(--accent); border-color: var(--muted); } }
/* Filmflikarna: den valda är diskret (mörk yta, ingen synlig kant), inte gul. Övriga är ghostknappar. Kanten finns
   kvar men genomskinlig, så att den valda är lika stor som de andra. */
#video-tabs .chip.on { color: var(--text); background: var(--surface-3); border-color: transparent; }
@media (hover: hover) { #video-tabs a.chip:not(.on):hover { border-color: var(--muted); } }
/* Den valda filmens flik: namnet, pennan och, utfällt, "Redigera namn" och "Ta bort". Allt i fliken. */
.video-tab { gap: 2px; padding: 3px 4px 3px 12px; cursor: default; }
.video-tab a { margin-right: 4px; color: inherit; text-decoration: none; }
.tab-tool { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; color: inherit; font: inherit; background: none; border: 0; border-radius: 999px; cursor: pointer; }
.tab-tool svg { flex: none; width: 14px; height: 14px; }
.tab-tool[aria-expanded="true"] { background: var(--surface-4); }
@media (hover: hover) { .tab-tool:hover { background: var(--surface-4); } }
/* "Redigera namn" och "Ta bort" är vita knappar som fälls ut åt höger ur pennan på 0,2 s. Kolumnen går
   från 0fr till 1fr. Inne i den klipps knapparna, och luften före dem är en marginal som klipps med. */
.tab-actions { display: grid; grid-template-columns: 0fr; visibility: hidden; opacity: 0; transition: .2s ease-out; }
.tab-actions > span { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.tab-actions > span > :first-child { margin-left: 4px; }
.video-tab.open .tab-actions { grid-template-columns: 1fr; visibility: visible; opacity: 1; }
.tab-action, .tab-action[aria-expanded="true"] { color: var(--bg); white-space: nowrap; background: var(--text); }
@media (hover: hover) { .tab-action:hover { background: var(--text); filter: brightness(.88); } }
@media (max-width: 759px) {
  .video-head { gap: 8px 12px; }
  .tab-tool { min-height: 32px; } /* lättare att träffa med tummen */
}
a.chip { text-decoration: none; }
.video-section > .attach-video { margin-bottom: 16px; }
.notes { margin-top: 56px; } /* samma avstånd som ner till videodelen. Marginalen slås ihop med rubrikkortets, så 56 är det som gäller */
.note-list { display: grid; gap: 16px; }
.note { position: relative; padding: 20px 22px; background: var(--surface); border-radius: 12px; }
/* Ägarens kort: hovring ger en streckad ram, klick öppnar kortet för redigering. */
.note-view { margin: -9px 30px -9px -11px; padding: 8px 10px; border: 1px dashed transparent; border-radius: 8px; cursor: text; }
.note-view:focus-visible { border-color: var(--line-dashed); outline: none; }
@media (hover: hover) { .note-view:hover { border-color: var(--line-dashed); outline: none; } }
/* Papperskorgen är gömd tills man hovrar över kortet (skrivbord) eller har kortet i skrivläge (pekskärm). */
.note-trash { position: absolute; top: 10px; right: 10px; opacity: 0; visibility: hidden; }
.note-trash:focus-visible { opacity: 1; visibility: visible; }
@media (hover: hover) { .note:hover .note-trash { opacity: 1; visibility: visible; } }
@media (hover: none) { .note.editing .note-trash { opacity: 1; visibility: visible; } }
.note-form textarea { min-height: 8rem; overflow: hidden; resize: none; transition: var(--ease), height 0s; } /* allt utom höjden: fältet växer medan man skriver */
.note-form .save-row { margin-top: 10px; }
.add-note {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 22px;
  color: var(--muted);
  font: 500 .9rem var(--font-body);
  text-align: left;
  background: var(--surface);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
@media (hover: hover) { .add-note:hover { color: var(--accent); } }

/* Sidans titel ligger i ett eget kort, med samma bakgrund som sidans övriga kort. Det skiljer den
   tydligt från sektionerna under. */
.post-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 32px;
  align-items: end;
  margin-bottom: 22px;
  padding: 28px 32px 30px;
  background: var(--surface);
  border-radius: 12px;
}
@media (max-width: 759px) {
  .post-head { padding: 20px 20px 22px; }
}
.back {
  grid-column: 1 / -1;
  width: fit-content;
  margin-bottom: 20px; /* luft mot rubriken, annars klistrar länken mot versalerna */
  color: var(--muted);
  font: 400 .8rem var(--font-mono);
  text-decoration: none;
}
@media (hover: hover) { .back:hover { color: var(--accent); } }
.post-head h1 {
  font: 900 clamp(2.3rem, 6vw, 4rem)/.92 var(--font-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
/* Titeln med "Redigera namn" direkt under sig. Dela och ta bort står för sig, till höger på skrivbord
   och en bit under på mobil. */
.head-title { display: grid; gap: 18px; justify-items: start; }
/* "Redigera namn" fäller ut fältet under titelraden, inne i kortet och utan eget kort. */
.post-head .post-rename, .post-head .date-form { grid-column: 1 / -1; margin-top: 18px; padding: 0; background: none; }
/* "Redigera namn" och "Ändra datum" sida vid sida under titeln. */
.head-tools { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.layout { display: grid; gap: 24px; }

.player {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--video-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px var(--shadow);
}
.player { scroll-margin-top: 16px; }
.player iframe { display: block; width: 100%; height: 100%; border: 0; }

#detail { margin-top: 20px; }
/* Tiden till vänster, spela/pausa och helskärm högerställda på samma rad. */
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; }
.player-controls { display: flex; gap: 8px; }
.player-controls .btn { height: 42px; }
.player-controls .btn.icon-only { width: 42px; } /* .btn.icon-only (46 px) ligger senare i filen */
.player-controls .btn svg { flex: none; width: 18px; height: 18px; }
/* Kortkommandot som en liten tangent i knappen: mellanslag och F. Dolt på telefon, synligt från
   iPad och uppåt. Med tangenten blir knappen bredare än den kvadratiska ikonknappen. */
.key-hint { padding: 1px 5px; color: var(--muted); font: 500 11px/1.4 var(--font-mono); border: 1px solid var(--line-strong); border-radius: 4px; }
.player-controls .btn.icon-only:has(.key-hint) { width: auto; gap: 8px; padding: 0 12px; }
/* Spara (Ctrl S): texten och tangenten bredvid varandra. På den gula knappen tar tangenten knappens egen
   mörka färg, med en halvgenomskinlig kant. */
.btn:has(> .key-hint) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn:not(.ghost) > .key-hint { color: var(--accent-ink); border-color: var(--accent-shade); }
@media (max-width: 510px) {
  .key-hint { display: none; }
  .player-controls .btn.icon-only:has(.key-hint) { width: 42px; padding: 0; }
}
/* Länkarna är infällda tills man trycker på YouTube-knappen, och fälls ut nedåt på 0,2 s. Luften ovanför
   dem ligger inne i det som klipps, så att den också försvinner när de är infällda. */
.yt-links { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: .2s ease-out; }
.yt-links > div { min-height: 0; overflow: hidden; }
.yt-links.open { grid-template-rows: 1fr; visibility: visible; opacity: 1; }
.player-controls .btn[aria-expanded="true"] { border-color: var(--muted); } /* YouTube-knappen när länkarna är utfällda */
/* Under tiden: kopiera YouTube-länken (klippets tid eller filmens nuvarande tid), eller öppna den.
   Samma dämpade stil på alla tre, knapp som länk. */
.detail-links { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px 20px; margin-top: 20px; }
.copy-link { color: var(--muted); font: 400 .9rem/1.3 var(--font-body); text-decoration: none; }
.copy-link span { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .copy-link:hover { color: var(--text); } }
/* Var och en är vanlig löpande text med ikonen som ett inskjutet tecken. Då delar de baslinje med
   varandra och med tiden bredvid. Som flexlåda fick knappen baslinjen av ikonen och hamnade snett. */
.copy-link { display: inline; padding: 0; background: none; border: 0; cursor: pointer; }
/* Ikonen centreras på texten SOM DEN SER UT: gemener och understrykning, från versalhöjden ner till
   strecket, dvs. ca 3 px över baslinjen (uppmätt). Mitt på versalhöjden (5 px) ser den för hög ut.
   Inline (skrivbord) sköter vertical-align det. Som flexlåda (mobil) centreras ikonen på 4,6 px, och
   där flyttar top den resten av vägen. */
.copy-link svg { margin-right: 6px; vertical-align: -4.5px; }
/* Mobil: länkarna staplas under tiden, vänsterställda och med tryckytor för tummen, som filmens verktyg. */
@media (max-width: 759px) {
  .detail-links { flex-flow: column nowrap; align-items: flex-start; justify-content: flex-start; gap: 0; margin-top: 10px; }
  .copy-link { display: flex; align-items: center; min-height: 42px; } /* staplade behöver de ingen gemensam baslinje */
  .copy-link svg { position: relative; top: 1.5px; }
}
.head-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: flex-end; } /* båda knapparna har ikon + text */
/* Mobil: knapparna staplas under titeln med tryckytor för tummen. 42 px höga rader centrerar texten,
   så 24 px mellanrum ger 36 px synlig luft från titeln till "Redigera namn" och lika mycket vidare
   till dela och ta bort. */
@media (max-width: 759px) {
  .head-title { gap: 24px; }
  .head-tools { flex-flow: column nowrap; gap: 0; }
  .head-tools > button { min-height: 42px; }
  .head-actions { grid-column: 1 / -1; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-start; gap: 0; margin-top: 12px; }
  .head-actions > button { min-height: 42px; }
}
#detail > .eyebrow { margin-bottom: 8px; }
/* Mobil: kommentaren före taggarna, så att den inte hamnar under en lång tagglista. På skrivbord
   ligger taggarna först. Ordningen byts med order, så app.js ritar panelerna likadant överallt. */
@media (max-width: 759px) {
  #detail { display: grid; }
  #detail .comment-panel { margin-top: 20px; }
  #detail .tags-panel { order: 1; margin-top: 16px; }
  #related-panel { order: 2; }
}
.comment-text { overflow-wrap: anywhere; }
/* Formaterad kommentar: stycken, en rubriknivå och punktlistor. */
.comment-text > * + * { margin-top: 10px; }
.comment-text h3 { margin: 0; color: var(--text); font: 700 1.25rem/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.comment-text > * + h3 { margin-top: 18px; }
.comment-text ul { margin-bottom: 0; padding-left: 1.2em; list-style: disc; }
.comment-text li + li { margin-top: 4px; }
.comment-text li::marker { color: var(--accent); }
/* Ägarens kommentar visas formaterad. Hovring ger en streckad ram, som på ett matchnamn: klicka för
   att redigera. De negativa marginalerna håller texten i linje med kortets innehåll. */
.comment-view { margin: -9px -11px; padding: 8px 10px; border: 1px dashed transparent; border-radius: 8px; cursor: text; }
.comment-view:focus-visible { border-color: var(--line-dashed); outline: none; }
@media (hover: hover) { .comment-view:hover { border-color: var(--line-dashed); outline: none; } }
/* Knapparna ovanför kommentarsfältet */
.format-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.format-bar .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: .82rem; }

/* Kort i stället för skiljelinjer: en linje direkt på sidans rutmönster krockar med rutorna. */
.panel { margin-top: 16px; padding: 18px 20px 20px; background: var(--surface); border-radius: 12px; }
.yt-links + .panel { margin-top: 20px; }
.panel h2 {
  margin-bottom: 12px;
  color: var(--muted);
  font: 500 .72rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.panel .row { margin-top: 12px; max-width: 420px; }

/* Taggförslag */
.combo { position: relative; flex: 1; min-width: 0; }
.suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px var(--shadow);
}
.suggest li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
@media (hover: hover) { .suggest li:hover { background: var(--bg); } }
.suggest li.active { color: var(--accent-ink); background: var(--accent); }
.suggest .uses { flex: none; color: var(--muted); font: 500 .75rem var(--font-mono); }
.suggest li.active .uses { color: var(--accent-ink); }

#comment-form textarea { min-height: 7rem; overflow: hidden; resize: none; transition: var(--ease), height 0s; } /* allt utom höjden: fältet växer medan man skriver */
.panel .save-row { align-items: center; gap: 14px; max-width: none; margin-top: 10px; }

/* Flödet med timestamps */

.feed {
  align-self: start;
  background: var(--surface);
  border-radius: 12px;
}
/* Formuläret ligger kvar överst när listan rullas, så att man alltid kan lägga till en timestamp.
   Egen bakgrund (samma som matchrubrikerna) så att raderna inte lyser igenom, och rundade övre hörn
   som följer kortets. */
.clip-form { position: sticky; top: 0; z-index: 10; padding: 16px; background: var(--surface-3); border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
/* Smal skärm (en kolumn): formuläret ligger fast i skärmens nederkant, kant till kant. Det glider in
   först när videodelen är i bild (klassen in-view sätts av app.js). Etiketten göms för att spara höjd,
   fältet har samma text som aria-label. */
@media (max-width: 979px) {
  .clip-form {
    position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 30;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-strong); border-bottom: 0; border-radius: 0;
    box-shadow: 0 -18px 36px -18px var(--shadow);
    visibility: hidden; transform: translateY(100%);
  }
  .clip-form.in-view { visibility: visible; transform: none; }
  .clip-form > label { display: none; }
  body:has(#clip-form) #app { padding-bottom: 190px; } /* så att fältet inte täcker det sista på sidan */
}
.clip-form input { font-family: var(--font-mono); }
.preview { margin-top: 8px; color: var(--muted); font-size: .85rem; }
/* Tidsfältet med plusknappen till höger. Under står bara en rad om att tomt fält betyder nuvarande tid. */
.clip-entry { display: flex; gap: 8px; }
.clip-entry input { flex: 1 1 auto; min-width: 0; }
.btn.icon-only { display: inline-flex; align-items: center; justify-content: center; width: 46px; padding: 0; }
.clip-form .field-hint { margin-top: 8px; }
.preview.bad { color: var(--danger); }


/* Rubriken till vänster och tratten till höger, alltid på samma rad. Aktiva filter får raden under. */
.feed-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.feed-title { margin: 0; }
/* Raden under: aktiva filter som gula piller, högerställda under tratten, och krysset som rensar dem. */
.filter-summary { display: flex; flex: 0 0 100%; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.filter-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }

/* Infällt filter: knappen visar vad som är aktivt även när panelen är stängd. */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  color: var(--text);
  font: 500 1rem var(--font-body);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.filter-toggle svg { flex: none; }
.filter-toggle[aria-expanded="true"] { border-color: var(--muted); }
@media (hover: hover) { .filter-toggle:hover { border-color: var(--muted); } }
.filter-active {
  overflow: hidden;
  max-width: 100%;
  padding: 1px 8px;
  color: var(--accent-ink);
  font-size: .78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--accent);
  border-radius: 999px;
}
/* Panelen är ett eget kort som hänger under trattikonen, så att den inte flyter ihop med klipplistan. */
.filter-panel {
  position: relative;
  display: grid;
  gap: 16px;
  margin: 10px 12px 14px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 18px 36px -18px var(--shadow);
}
.filter-toggle[aria-expanded="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
.filter-group h3 { margin: 0 0 8px; }
.filter-close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.filter-close svg { flex: none; }
select {
  padding: 7px 34px 7px 11px;
  color: var(--text);
  font: 500 1rem var(--font-body);
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237f9ba5' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.clips > .hint { padding: 16px; }
.clips li + li { border-top: 1px solid var(--line); }
.clip-game { color: var(--accent); font-size: .78rem; font-weight: 500; }

/* Matcher: varje match är en grupp med redigerbar rubrik */
/* Matchrubriken har egen bakgrund men ingen kant. Matchen man står i visas med gult namn,
   övriga matcher har samma grå som "Utan match". */
.game-head { padding: 8px 16px; background: var(--surface-3); }
.game-head.editing { background: var(--surface-4); } /* öppen ruta. Styrs av klassen, inte av fokus: ett klick i rutans marginal får inte stänga den */
.game-line { display: flex; align-items: center; gap: 12px; }
.game-name {
  flex: 1;
  min-width: 0;
  margin-left: -9px;
  padding: 5px 8px;
  color: var(--muted);
  font: 700 1.05rem/1.15 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px dashed transparent;
  border-radius: 8px;
}
.game-name::placeholder { color: var(--muted); letter-spacing: .04em; }
/* Streckad ram: visar att namnet går att redigera. Syns alltid på en namnlös match. */
input.game-name:placeholder-shown { border-color: var(--line-dashed); }
@media (hover: hover) { .game-head[data-id]:hover input.game-name { border-color: var(--line-dashed); } }
/* Hela rubriken är klickbar och ger fokus i namnfältet. Handen visar det. Skrivmarkören kommer först i fokus. */
.game-head[data-id], .game-head[data-id] input.game-name { cursor: pointer; }
.game-head[data-id] input.game-name:focus { cursor: text; }
input.game-name:focus { background: var(--field); border-color: var(--accent); outline: none; }
.game-name.static { margin-left: 0; padding: 5px 0; border: 0; }
.group.active .game-name, .game-head.editing .game-name { color: var(--accent); }
.game-meta { display: inline-flex; flex: none; align-items: center; color: var(--muted); font: 500 .75rem var(--font-mono); white-space: pre; }
/* Matchstarten är klickbar: den hoppar dit i videon. Ikonen och den gula hovringen visar det. När
   pekaren står på den visas inte den streckade "redigerbar"-ramen kring namnet. */
.game-start { display: inline-flex; align-items: center; gap: 5px; margin: -4px -6px; padding: 4px 6px; color: var(--muted); font: inherit; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.game-start svg { flex: none; }
.game-start span { text-decoration: underline; text-underline-offset: 2px; } /* på tiden, inte på ikonen. Färgen följer texten, så hovringen tonar strecket med */
.game-start:focus-visible { color: var(--accent); outline: none; }
@media (hover: hover) { .game-start:hover { color: var(--accent); outline: none; } }
@media (hover: hover) { .game-head[data-id]:has(.game-start:hover) input.game-name:not(:placeholder-shown) { border-color: transparent; } }
.game-extra { display: none; gap: 12px; padding: 12px 0 8px; } /* fälten är fullbreda, ett per rad */
.game-head.editing .game-extra { display: grid; }
.game-head.editing .game-meta { display: none; }
.game-extra label span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font: 500 .68rem var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.game-extra input { padding: 8px 10px; }
.game-extra .time-input { font-family: var(--font-mono); }
.game-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 2px; }
.btn.small { padding: 8px 14px; font-size: .88rem; }
.field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.add-game {
  display: block;
  width: 100%;
  padding: 12px 16px;
  color: var(--muted);
  font: 500 .85rem var(--font-body);
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  cursor: pointer;
}
@media (hover: hover) { .add-game:hover { color: var(--accent); } }

.clips.enter li { animation: rise .4s ease both; animation-delay: calc(var(--i) * 35ms); }

.clip {
  display: grid;
  grid-template-columns: 4.9rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 13px 16px 13px 14px;
  text-decoration: none;
  border-left: 2px solid transparent;
}
@media (hover: hover) { .clip:hover { background: var(--surface-2); } }
.clip.selected { background: var(--surface-2); border-left-color: var(--accent); }
.clip.selected .time { color: var(--accent); }
/* Ägarens tider går att justera: streckad ram när man hovrar över raden. På pekskärm, där man inte kan
   hovra, sitter ramen i stället alltid på den valda. Den negativa marginalen tar ut ramen och luften,
   så att raden inte flyttar sig. */
.clip .time.editable { justify-self: start; margin: -4px -7px; padding: 3px 6px; border: 1px dashed transparent; border-radius: 6px; cursor: text; }
@media (hover: none) { .clip.selected .time.editable { border-color: var(--line-dashed); } }
@media (hover: hover) { .clip:hover .time.editable { border-color: var(--line-dashed); } }
.clip-time-input { width: calc(100% + 14px); min-width: 0; margin: -4px -7px; padding: 3px 6px; color: var(--accent); background: var(--field); border: 1px dashed var(--accent); border-radius: 6px; }
.clip-time-input:focus { outline: none; } /* den gula streckade ramen visar redan var man skriver */

.clip-body { display: grid; gap: 5px; min-width: 0; }
.clip-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.clip-tags span {
  padding: 1px 8px;
  font-size: .78rem;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.clip.selected .clip-tags span { background: var(--bg); }
@media (hover: hover) { .clip:hover .clip-tags span { background: var(--bg); } }
.clip-snippet {
  overflow: hidden;
  color: var(--muted);
  font-size: .88rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.clip-snippet.empty { opacity: .6; }
/* Papperskorgen: bara på den valda timestampen, längst till höger i raden. */
.clips li { position: relative; }
.clip-trash { position: absolute; top: 7px; right: 8px; }
.has-trash > .clip { padding-right: 50px; }

/* Relaterade klipp: ett klick fäller ut klippet på samma sida */
.related { display: grid; gap: 8px; margin-bottom: 14px; }
.related-row { display: flex; align-items: center; gap: 10px; }
.related-item {
  display: grid;
  flex: 1;
  grid-template-columns: 4.9rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  min-width: 0;
  padding: 11px 14px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: var(--field); /* mörkare än kortet det ligger på, som textfälten */
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.related li.open .related-item { background: var(--surface-2); border-color: var(--line-strong); }
@media (hover: hover) { .related-item:hover { background: var(--surface-2); border-color: var(--line-strong); } }
.related-preview { display: grid; gap: 12px; margin: 10px 0 6px; }
.related-preview .link { justify-self: start; }
.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  color: var(--muted);
  font: 600 .82rem var(--font-body);
  background: none;
  border: 1px solid transparent; /* ingen synlig ram kring krysset */
  border-radius: 8px;
  cursor: pointer;
}
@media (hover: hover) { .icon-btn:hover { color: var(--danger); } }
@media (hover: hover) { #filter-clear:hover { color: var(--text); } } /* att rensa filter är inte destruktivt, så ingen röd färg */
.icon-btn.armed { color: var(--danger-ink); background: var(--danger); border-color: var(--danger); }
.related-title { font-weight: 600; font-size: .92rem; }

/* Dialogrutor */
.dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 20px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 40px 90px -20px var(--shadow);
}
.dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dialog-head h2 { font: 900 1.9rem/1 var(--font-display); text-transform: uppercase; }

.games-list { display: grid; margin: 14px 0; border: 1px solid var(--line); border-radius: 10px; }
.games-list li { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 14px; }
.games-list li.hint { display: block; }
.games-list li + li { border-top: 1px solid var(--line); }
.game-form { display: grid; gap: 8px; margin-bottom: 10px; }
.game-form .time-input { font-family: var(--font-mono); }

.picker { width: min(1080px, calc(100vw - 24px)); }
/* "Lägg till flera matcher": en rad per match, och under fältet syns hur raderna har tolkats. */
.bulk { width: min(560px, calc(100vw - 24px)); }
.bulk textarea { font-family: var(--font-mono); resize: vertical; }
.bulk .hint { margin-bottom: 10px; }
/* Hjälptexten är en punktlista med gula punkter, som listor i kommentarer. */
.bulk-help { padding-left: 1.2em; list-style: disc; }
.bulk-help li + li { margin-top: 4px; }
.bulk-help li::marker { color: var(--accent); }
.bulk-help strong { color: var(--text); font-weight: 600; }
.bulk-preview { display: grid; gap: 6px; margin-top: 12px; }
.bulk-preview li { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: .92rem; }
.bulk-preview .time { font: 500 .88rem var(--font-mono); }
.bulk-preview .bulk-title { overflow-wrap: anywhere; }
.bulk-preview li.bad { display: block; color: var(--danger); }
.picker-grid { display: grid; gap: 18px; }
.picker-search .row select { flex: none; max-width: 45%; }
.picker-results { display: grid; gap: 8px; max-height: 46dvh; margin-top: 12px; overflow-y: auto; }
.pick-group { border: 1px solid var(--line); border-radius: 10px; }
.pick-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pick-group summary::-webkit-details-marker { display: none; }
.pick-group summary .count { color: var(--muted); font: 500 .75rem var(--font-mono); }
.pick-group li { border-top: 1px solid var(--line); }
.pick-row { width: 100%; color: inherit; font: inherit; text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.picker-preview { display: grid; gap: 12px; align-content: start; order: -1; }
.picker-preview .btn { justify-self: start; }
.picker-preview > .hint { padding: 28px 16px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }

/* Inloggningssidor */
.auth { width: min(420px, 100%); margin: 0 auto; padding: 9vh 16px 60px; }
.auth h1 { margin: 0 0 22px; font: 900 clamp(2.8rem, 9vw, 4.2rem)/.9 var(--font-display); text-transform: uppercase; }
.auth-form { display: grid; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.auth-form .btn { margin-top: 4px; }
.auth-form .check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.auth-form .check input { width: auto; accent-color: var(--accent); }
/* Lösenordsfält: ögat till höger visar eller döljer texten (components/password.blade.php, password.js). */
.password-field { position: relative; display: block; }
.password-field input { padding-right: 46px; }
.password-toggle { position: absolute; top: 0; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.password-toggle:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .password-toggle:hover { color: var(--text); } }
.password-toggle[aria-pressed="true"] .eye, .password-toggle[aria-pressed="false"] .eye-off { display: none; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; color: var(--muted); font-size: .9rem; }
@media (hover: hover) { .auth-links a:hover { color: var(--text); } }
.auth > .hint { margin-bottom: 16px; }
.notice { margin: 0 0 16px; padding: 10px 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 4px 10px 10px 4px; }
.notice.bad { color: var(--danger-text); background: var(--danger-surface); border-color: var(--danger); }
.notice li + li { margin-top: 4px; }

@media (min-width: 860px) {
  .picker-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .picker-preview { order: 0; }
  .picker-results { max-height: 60dvh; }
}

@media (min-width: 980px) {
  #app { padding: 36px 32px 80px; }
  .topbar { padding: 18px 32px 0; }
  .layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; }
  .notes, .attach-video { max-width: calc(100% - 444px); } /* 380 px kolumn + 64 px mellanrum */ /* lika breda som videon under, lagom radlängd */
  .feed { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
}

/* ---------- Övrigt ---------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  color: var(--danger-text);
  background: var(--danger-surface);
  border: 1px solid var(--danger);
  border-radius: 8px;
  transform: translateX(-50%);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Frågeruta (ersätter webbläsarens confirm) */
.ask { width: min(440px, calc(100vw - 24px)); padding: 24px; }
.ask h2 { margin-bottom: 10px; font: 900 1.9rem/1 var(--font-display); text-transform: uppercase; }
.ask p { margin-bottom: 20px; color: var(--muted); }
.ask-actions { display: grid; gap: 10px; }
.ask-actions .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; }
.ask-actions .btn svg { flex: none; }
/* Likvärdiga val: samma utseende och vikt, ikonen till vänster. Inget av dem är en framhävd huvudknapp. */
.ask-actions .btn.choice { justify-content: flex-start; color: var(--text); font-weight: 500; text-align: left; background: var(--surface-2); border-color: var(--line); }
.ask-actions .btn.choice svg { color: var(--muted); }
@media (hover: hover) { .ask-actions .btn.choice:hover { border-color: var(--muted); filter: none; } }
.ask-actions .btn.choice.danger-tone svg { color: var(--danger); }
@media (hover: hover) { .ask-actions .btn.choice.danger-tone:hover { border-color: var(--danger); } }
.ask-actions .link { justify-self: center; margin-top: 4px; padding: 6px 12px; }

/* Underrubrik inne i en panel, t.ex. "Vanliga taggar" */
.sub-label { margin: 0 0 8px; }
.own-tags { margin-bottom: 14px; }

/* Inställningssidan */
.settings { width: min(480px, 100%); padding-top: 5vh; }
.settings .back { margin-bottom: 14px; } /* samma luft mot rubriken som på inläggssidan */
.settings .back a { color: var(--muted); font: 400 .8rem var(--font-mono); text-decoration: none; }
@media (hover: hover) { .settings .back a:hover { color: var(--accent); } }
/* Adminsidan: en rad per användare, staplad så att den fungerar lika bra på mobilen */
.admin-link { margin: 10px 0 0; font-size: .9rem; }
.admin-link a { color: var(--muted); text-underline-offset: 3px; }
@media (hover: hover) { .admin-link a:hover { color: var(--accent); } }
.admin-hint { margin: -4px 0 14px; color: var(--muted); font-size: .9rem; }
.admin-hint a { color: inherit; text-underline-offset: 3px; }
/* Grupperna med sina lagkoder: namn och antal medlemmar, och fältet för koden med Spara bredvid. */
.admin-groups { display: grid; gap: 10px; margin-bottom: 32px; }
.admin-groups li { display: grid; gap: 3px; padding: 14px 18px; background: var(--surface); border-radius: 12px; }
.admin-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; }
.admin-code label > span { display: block; margin-bottom: 6px; color: var(--muted); font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.admin-code input { font-family: var(--font-mono); }
.admin-new-group { margin: 0 0 14px; }
.admin-new-group input { font-family: inherit; }
.admin-delete { margin-top: 10px; font-size: .85rem; }
.admin-delete summary { width: max-content; color: var(--muted); cursor: pointer; }
@media (hover: hover) { .admin-delete summary:hover { color: var(--danger); } }
.admin-delete form { display: grid; justify-items: start; gap: 10px; margin-top: 10px; }
.admin-delete p { color: var(--muted); }
.admin-delete label { display: grid; gap: 6px; width: 100%; }
.admin-delete label > span { color: var(--muted); font-size: .85rem; }
.admin-delete .notice { margin: 0; }
.admin-users { display: grid; gap: 10px; }
.admin-users li { display: grid; gap: 3px; padding: 14px 18px; background: var(--surface); border-radius: 12px; }
.admin-name { font-weight: 600; }
.admin-email { overflow-wrap: anywhere; color: var(--muted); font: 400 .85rem var(--font-mono); }
.admin-meta { color: var(--muted); font-size: .82rem; }
.admin-badge { margin-left: 8px; padding: 1px 8px; color: var(--accent-ink); font-size: .72rem; font-weight: 600; background: var(--accent); border-radius: 999px; }
.export-link { text-align: center; text-decoration: none; } /* lika bred som sidans övriga knappar */
.settings h2 { margin: 30px 0 12px; font: 700 1.5rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }

/* Taggvyn på startsidan: klippraden är en knapp som fäller ut klippet på plats */
.home-group button.clip { width: 100%; color: inherit; font: inherit; text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.home-group li.open > .clip { background: var(--surface-2); border-left-color: var(--accent); }
.home-group li.open > .clip .clip-snippet { display: none; } /* hela kommentaren står i det utfällda */
.home-preview { display: grid; gap: 12px; padding: 4px 16px 18px; background: var(--surface-2); }
.home-preview .player { max-width: 760px; }
.home-preview .btn { justify-self: start; text-decoration: none; }

/* Kugghjulet i toppraden leder till inställningarna */
.gear { display: inline-flex; align-items: center; color: var(--muted); }
@media (hover: hover) { .gear:hover { color: var(--text); } }
.logout { display: inline-flex; align-items: center; padding: 0; color: var(--muted); background: none; border: 0; cursor: pointer; }
@media (hover: hover) { .logout:hover { color: var(--text); } }

/* ---------- Grupper ---------- */
/* Initialerna som avatar, t.ex. FN för Fredrik Nygren. */
.avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--text); font: 600 .78rem var(--font-body); letter-spacing: .02em; background: var(--surface-3); border-radius: 50%; }

/* Gruppvyn på startsidan (raden Grupper): flödet till vänster och störst, "Hämta match" i en smal
   kolumn till höger. Flödet ser ut som taggvyn, med vem som skrev kommentaren på varje rad. */
.group-view { display: grid; gap: 8px 32px; }
@media (min-width: 980px) { .group-view { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } }
.group-main > .empty-card { margin-top: 30px; }
.home-views.group-sort { margin-top: 24px; } /* Sortera, överst i gruppflödet */
.group-main.by-activity > .home-group:first-child { margin-top: 30px; } /* linjerar med "Hämta match" utan månadsrubrik */
.home-group h3 > span:first-child { overflow-wrap: anywhere; }
.clip-author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: .85rem; }
.clip-author .avatar { width: 24px; height: 24px; font-size: .6rem; }
/* Antalet svar står under tiden: det hör till kommentaren, inte till den som skrev den. */
.clip-when { display: grid; justify-items: start; gap: 6px; }
.reply-count { padding: 1px 7px; color: var(--muted); font: 500 .72rem var(--font-mono); white-space: nowrap; background: var(--surface-3); border-radius: 999px; }
.home-preview .thread { margin-top: 4px; }
.ready-posts { margin-top: 30px; } /* samma luft som månadsrubrikerna i flödet, så att rubrikerna linjerar */
.ready-list { display: grid; gap: 10px; margin-top: 16px; }
.ready-post { position: relative; display: grid; justify-items: start; gap: 6px; margin-top: 0; padding-right: 44px; }
.ready-hide { position: absolute; top: 10px; right: 10px; } /* minus: döljer kortet för gott */
@media (hover: hover) { .ready-hide:hover { color: var(--text); } } /* inte röd: inget raderas */
.ready-title { font: 700 1.15rem/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.ready-meta { color: var(--muted); font-size: .85rem; }
.ready-post .btn { margin-top: 6px; }
.ready-empty { margin-top: 16px; }

/* Tråden: svaren med avatar och fältet för ett nytt svar. I flödet skiljs den från kommentaren med en
   linje inne i kortet. Under kommentaren i eget inlägg har den ett eget kort och ingen linje. */
.thread { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.group-thread .thread { padding-top: 0; border-top: 0; }
.group-thread h2 a { color: inherit; }
.replies { display: grid; gap: 12px; }
.reply { position: relative; display: flex; gap: 10px; padding-right: 36px; }
.reply-body { min-width: 0; }
.reply-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 4px; }
.reply-meta span { color: var(--muted); font-size: .82rem; }
.reply-delete { position: absolute; top: -4px; right: 0; }
.reply-form { display: grid; gap: 8px; } /* Svara under fältet, som Spara under kommentaren */
.reply-form textarea { min-height: 44px; resize: vertical; }
.reply-form .btn { justify-self: start; }
/* Admins "Grupp: DKP" högst upp i inlägget: gul när inlägget finns i gruppens flöde. */
.group-share[aria-pressed="true"] { color: var(--accent); }

/* Gruppknapparna i kommentaren: tomma pills tills timestampen delats i gruppen, då ifyllda. Till höger om
   Spara när man skriver, och på egen rad längst ner till höger när kommentaren visas formaterad. */
.clip-groups { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.comment-panel > .clip-groups { margin-top: 12px; }
.clip-group svg { flex: none; width: 13px; height: 13px; }
.clip-group[aria-disabled="true"] { cursor: not-allowed; }

/* ---------- Notiser ---------- */
/* Klockan i toppraden, med antalet olästa (inte på filmsidor). Listan fälls ut under, högerställd. */
.notif { position: relative; display: inline-flex; }
.notif-btn { position: relative; display: inline-flex; align-items: center; padding: 0; color: var(--muted); background: none; border: 0; cursor: pointer; }
@media (hover: hover) { .notif-btn:hover { color: var(--text); } }
.notif-btn[aria-expanded="true"] { color: var(--text); }
.notif-count { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; color: var(--accent-ink); font: 700 .66rem/17px var(--font-body); text-align: center; background: var(--accent); border-radius: 999px; }
.notif-pop { position: absolute; top: calc(100% + 12px); right: -8px; z-index: 30; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px var(--shadow); }
.notif-title { margin: 6px 8px 8px; color: var(--muted); font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.notif-empty { padding: 14px 8px; color: var(--muted); }
.notif-item { position: relative; display: flex; gap: 10px; padding: 10px 8px 10px 14px; color: var(--text); text-decoration: none; border-radius: 8px; }
@media (hover: hover) { .notif-item:hover { background: var(--surface-3); } }
.notif-item.unread::before { content: ''; position: absolute; top: 20px; left: 4px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; } /* oläst */
.notif-text { display: grid; gap: 3px; min-width: 0; font-size: .88rem; }
.notif-body { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-meta { color: var(--muted); font-size: .78rem; }