/* ============================================================================
   FORRE.NU — SERVERREGISTRET  (?page=discord)
   themes/forre_pulse/css/pulse-discord.css     ·  2026-09-01

   Vy "A · Porten", Kentas val 2026-09-01.
   Mockup: design-proposals/discord-registret-2026-09-01.html

   ALLT ÄR SCOPAT UNDER .dcr. Den gamla vyn bakade in 187 rader CSS i
   app/Views/pages/discord/index.php med elva var(--color-*) som INTE finns i
   forre_pulse.css — tio föll på hårdkodade mörka reservvärden och gjorde korten
   svarta i ljust läge, och den elfte (--color-primary) saknade reserv helt, så
   sökknappen fick ingen bakgrund men behöll color:white. Här används bara
   temats egna tokens. Inga egna färger, inga hårdkodade hex.

   TVÅ REGLER UR §0B SOM SITTER I FILEN:
     · Inga lodräta färgade linjer. En markerad rad TONAS i sin helhet
       (--accent-wash), den får aldrig en border-left.
     · Inget svart i ljust läge. --board-bg och var(--ink) som ytfyllning
       förekommer inte här.
   ============================================================================ */

/* ---- Sidskalet ----------------------------------------------------------
   250 px vänsterrail + innehåll. INTE `.shell.c3`, som är 250/1fr/320 och
   reserverar en högerrail sidan inte har — under 1100px byter temat den till
   `1fr 320px` och då hade 320 px stått tomma till höger. Temats egen regel
   `.left{display:none}` vid 1100px fäller railen; här faller mallen till en
   kolumn i samma andetag. minmax(0,1fr) och inte 1fr: annars vägrar kolumnen
   krympa under sitt bredaste barn och listan trycker ut sidan. */
.shell.dcr-skal{ grid-template-columns:250px minmax(0,1fr); }
@media (max-width:1100px){ .shell.dcr-skal{ grid-template-columns:minmax(0,1fr); } }

.dcr{ display:grid; gap:14px; }
.dcr .mono{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.dcr .dcr-dim{ color:var(--dim); }
.dcr .dcr-gron{ color:var(--live); }
.dcr code{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:11.5px;
  background:var(--inset); border:1px solid var(--line); border-radius:3px; padding:0 4px; }

/* Rubriketikett över en yta. */
.dcr .dcr-pt{ font-size:9.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); }

/* ---- Ikoner ------------------------------------------------------------- */
.dcr .dcr-i{ width:13px; height:13px; flex:0 0 auto; }
.dcr .dcr-i-l{ width:28px; height:28px; }
.dcr .dcr-i-acc{ color:var(--accent-ink); }
.dcr .dcr-i-ok{ color:var(--live); }
.dcr .dcr-i-dim{ color:var(--dim); }

/* ---- Knappar ------------------------------------------------------------ */
.dcr .dcr-kn{
  height:30px; padding:0 12px; border-radius:var(--r-sm);
  border:1px solid var(--line2); background:var(--card); color:var(--ink2);
  font-size:12.5px; font-weight:700; display:inline-flex; align-items:center;
  gap:6px; white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background .12s, border-color .12s, color .12s;
}
.dcr .dcr-kn:hover{ background:var(--inset); border-color:var(--dim); color:var(--ink); }
.dcr .dcr-kn-p{ background:var(--accent); border-color:var(--accent); color:#fff; }
.dcr .dcr-kn-p:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; }
.dcr .dcr-kn-tyst{ background:transparent; border-color:transparent; color:var(--dim); }
.dcr .dcr-kn-tyst:hover{ background:var(--inset); color:var(--ink2); }
.dcr .dcr-kn-s{ height:26px; padding:0 10px; font-size:12px; }
.dcr .dcr-kn-fara{ color:var(--danger); border-color:var(--line2); }
.dcr .dcr-kn-fara:hover{ background:var(--inset); border-color:var(--danger); color:var(--danger); }
/* Avstängd = tydligt inte tryckbar. Allt som SER ut som en knapp ska annars gå att trycka på. */
.dcr .dcr-kn-av{ background:var(--inset); border-color:var(--line); color:var(--dim); cursor:default; }
.dcr .dcr-kn-av:hover{ background:var(--inset); border-color:var(--line); color:var(--dim); }

/* ---- Brickor och avatarer ----------------------------------------------- */
/* Fyrkantig bricka = lag/data. Rund = människa. */
.dcr .dcr-bricka{
  width:44px; height:44px; border-radius:var(--r-sm); flex:0 0 auto;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px;
  letter-spacing:-.02em; object-fit:cover; background:var(--inset);
}
.dcr .dcr-bricka-xl{ width:72px; height:72px; font-size:24px; border-radius:var(--r); }
.dcr .dcr-bricka-l{ display:block; flex:0 0 auto; }
.dcr .dcr-av{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.dcr .dcr-av-ph{ background:var(--inset); border:1px solid var(--line); }

/* ---- Nivåmärken --------------------------------------------------------- */
.dcr .dcr-niv{
  display:inline-flex; align-items:center; gap:4px; height:19px; padding:0 7px;
  border-radius:var(--r-sm); font-size:10.5px; font-weight:800; white-space:nowrap;
  border:1px solid transparent; vertical-align:2px;
}
.dcr .dcr-niv-1{ background:var(--inset); border-color:var(--line2); color:var(--dim); }
.dcr .dcr-niv-2{ background:var(--accent-wash); border-color:var(--dia); color:var(--accent-ink); }
.dcr .dcr-niv-3{ background:var(--champ-w); color:var(--champ); }
.dcr .dcr-niv-hem{ background:var(--gold-r); color:var(--board-bg); }
.dcr .dcr-niv-vanta{ background:var(--inset); border-color:var(--line2); color:var(--gold); }

/* ---- Närvaro ------------------------------------------------------------ */
/* GRÖNT = live/närvaro. Ingen annan yta på sidan får använda det. */
.dcr .dcr-live{ display:inline-flex; align-items:center; gap:5px; font-size:12px;
  font-weight:700; color:var(--live); }
.dcr .dcr-prick{ width:6px; height:6px; border-radius:50%; background:var(--live); flex:0 0 auto; }
.dcr .dcr-dod{ color:var(--dim); }
.dcr .dcr-dod .dcr-prick{ background:var(--faint); }
.dcr .dcr-fara{ color:var(--danger); font-weight:700; }

/* AKTIVITETSSTAPELN — lånad rakt av ur förslag B och listans enda ärliga mått.
   Går inte att skriva in för hand: online delat med medlemmar, båda från Discord. */
.dcr .dcr-stapel{ width:74px; height:5px; border-radius:3px; background:var(--line);
  overflow:hidden; flex:0 0 auto; display:block; }
.dcr .dcr-stapel > i{ display:block; height:100%; background:var(--live); border-radius:3px; }
.dcr .dcr-stapel.svag > i{ background:var(--faint); }

/* ============================================================================
   HJÄLTEN — FORRE.NU:s egen server
   ============================================================================ */
.dcr .dcr-hem{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}

/* VATTENSTÄMPELN: F-ringen med toningen INUTI märket (mask), aldrig som
   gradient på ytan. Ligger på KORTET, inte i gridden — i mockupen vann
   `.dcr-hero > *{position:relative}` (0,1,1) över `position:absolute` (0,1,0)
   och sköt hela hjälten åt höger. Regeln nedan undantar märket uttryckligen. */
.dcr .dcr-marke{
  position:absolute; right:-34px; top:-26px; width:196px; height:196px; z-index:0;
  color:var(--ink); opacity:.06; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 6%, rgba(0,0,0,.34) 56%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 6%, rgba(0,0,0,.34) 56%, transparent 92%);
}
[data-theme="dark"] .dcr .dcr-marke{ opacity:.085; }

.dcr .dcr-hero{ padding:16px 18px; display:grid; grid-template-columns:1fr auto;
  gap:16px; align-items:center; }
.dcr .dcr-hero > *, .dcr .dcr-auth{ position:relative; z-index:1; }
.dcr .dcr-hero-v{ display:flex; align-items:center; gap:13px; min-width:0;
  text-decoration:none; color:inherit; border-radius:var(--r-sm); }
.dcr .dcr-hero-v:hover .dcr-logo{ border-color:var(--accent); }
.dcr .dcr-hero-v:hover h1{ color:var(--accent-ink); }
/* HUVUDLOGGAN, inte Discords. F-ringen i märkets egen blå på kortets yta —
   vit-på-blått hade tagit bort just den färgen. Hårfin ram i stället för fyllning. */
.dcr .dcr-logo{ width:50px; height:50px; border-radius:var(--r); background:var(--card);
  border:1px solid var(--line2); display:grid; place-items:center; color:var(--accent);
  flex:0 0 auto; transition:border-color .12s; }
.dcr .dcr-hero-t h1{ transition:color .12s; }
.dcr .dcr-hero-t{ min-width:0; }
.dcr .dcr-hero-t h1{ font-size:19px; font-weight:800; letter-spacing:-.015em; margin:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.2; }
.dcr .dcr-hero-u{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:3px; font-size:12.5px; color:var(--ink2); }
.dcr .dcr-hero-h{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* AUTH-REMSAN. Är du kopplad står det bara VAD du har, på kortets egen yta —
   ingen färgad platta, ingen bock som skriker. Tystnad är signalen. */
.dcr .dcr-auth{ border-top:1px solid var(--line); padding:9px 18px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink2); }
.dcr .dcr-auth-v{ display:flex; align-items:flex-start; gap:8px; min-width:0; flex:1; }
/* Texten i ETT span. Ligger den som lösa textnoder blir varje nod ett eget
   flex-item och meningen bryts mitt itu på smal skärm ("Kopplad / som / kenta#4417"). */
.dcr .dcr-auth-txt{ min-width:0; }
.dcr .dcr-auth-v .dcr-i{ margin-top:3px; }
.dcr .dcr-auth-v b{ color:var(--ink); }
.dcr .dcr-auth-uppmaning{ background:var(--accent-wash); }

/* ============================================================================
   LISTHUVUD
   ============================================================================ */
.dcr .dcr-hd{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:0 2px; }
.dcr .dcr-hd .dcr-pt{ flex:0 0 auto; }
.dcr .dcr-flik{
  height:26px; padding:0 10px; border-radius:20px; border:1px solid var(--line2);
  background:var(--card); font-size:11.5px; font-weight:700; color:var(--ink2);
  display:inline-flex; align-items:center; text-decoration:none;
}
.dcr .dcr-flik:hover{ background:var(--inset); color:var(--ink); }
.dcr .dcr-flik.on{ background:var(--accent-wash); border-color:var(--dia); color:var(--accent-ink); }

/* Sökfältet absorberar slacket i stället för att ha en fast bredd. Uppmätt
   2026-09-01 med vänsterrailen inne: raden blev 901 px mot 900 tillgängliga och
   bröt till TRE rader — på en enda pixel. Ett fält som krymper kan inte göra om
   det, oavsett hur långa etiketterna blir. */
.dcr .dcr-sok{ display:flex; align-items:center; gap:6px; flex:1 1 210px;
  min-width:0; margin-left:auto; justify-content:flex-end; }
.dcr .dcr-sok select,
.dcr .dcr-sok input{
  height:26px; padding:0 8px; border:1px solid var(--line2); border-radius:var(--r-sm);
  background:var(--card); color:var(--ink); font:inherit; font-size:12px; outline:none;
}
.dcr .dcr-sok input{ flex:1 1 auto; width:auto; min-width:92px; max-width:210px; }
.dcr .dcr-sok input::placeholder{ color:var(--faint); }
.dcr .dcr-sok select:focus, .dcr .dcr-sok input:focus{ border-color:var(--accent); }

/* ============================================================================
   LISTAN
   ============================================================================ */
.dcr .dcr-lista{ background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }

.dcr .dcr-rad{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto auto;
  gap:12px; align-items:center; padding:9px 12px;
  border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
}
.dcr .dcr-lista > .dcr-rad:last-child{ border-bottom:0; }
.dcr .dcr-rad:hover{ background:var(--zebra); }

/* Din egen rad TONAS i sin helhet. Aldrig en lodrät färgad linje — se §0B. */
.dcr .dcr-rad-egen{ background:var(--accent-wash); }
.dcr .dcr-rad-egen:hover{ background:var(--accent-wash); filter:brightness(.985); }
[data-theme="dark"] .dcr .dcr-rad-egen:hover{ filter:brightness(1.15); }

.dcr .dcr-mitt{ min-width:0; display:block; text-decoration:none; color:inherit; }
.dcr .dcr-namn{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; }
.dcr .dcr-be{ display:block; font-size:12.5px; color:var(--ink2); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dcr .dcr-sif{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.dcr .dcr-tal{ display:flex; align-items:center; gap:8px; }
.dcr .dcr-m{ font-size:11.5px; color:var(--dim); }

.dcr .dcr-rad-erbjudande{ grid-template-columns:auto minmax(0,1fr) auto; }

/* Felremsan. RÖTT = trasigt. Den syns BARA när något faktiskt är sönder —
   noll servrar är inte ett fel och får aldrig se ut som ett. */
.dcr .dcr-fel{
  display:flex; align-items:center; gap:9px; padding:10px 13px;
  background:var(--card); border:1px solid var(--danger); border-radius:var(--r);
  font-size:12.5px; color:var(--ink2);
}
.dcr .dcr-fel .dcr-i{ color:var(--danger); margin-top:2px; }
.dcr .dcr-tekniskt{ display:inline-block; margin-top:5px; font-size:11px; color:var(--ink2);
  white-space:normal; word-break:break-word; }

.dcr .dcr-fot{ font-size:11.5px; color:var(--dim); padding:0 2px; margin:0; }

/* ============================================================================
   EN SERVER  (.dcr-en)
   ============================================================================ */
.dcr .dcr-brod{ font-size:11.5px; color:var(--dim); display:flex; gap:6px; align-items:center; }
.dcr .dcr-brod a{ color:var(--accent-ink); text-decoration:none; font-weight:700; }
.dcr .dcr-brod a:hover{ text-decoration:underline; }

.dcr .dcr-topp{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px 18px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center;
}
.dcr .dcr-topp-t{ min-width:0; }
.dcr .dcr-topp-t h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.15; }
.dcr .dcr-alias{ font-size:12px; color:var(--dim); margin:3px 0 0; }
.dcr .dcr-alias b{ color:var(--ink2); }
.dcr .dcr-topp-u{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:7px; }
.dcr .dcr-topp-h{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

.dcr .dcr-text{ font-size:13.5px; color:var(--ink2); margin:0; padding:0 2px; max-width:78ch; }

.dcr .dcr-siff{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.dcr .dcr-siff-s{ background:var(--card); padding:10px 13px; }
.dcr .dcr-siff-s .v{ font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.dcr .dcr-siff-s .t{ font-size:9.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-top:2px; }
.dcr .dcr-siff-s .dcr-stapel{ margin-top:6px; width:100%; }

.dcr .dcr-tva{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.dcr .dcr-ruta{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:13px 15px; display:grid; gap:6px; align-content:start; }
.dcr .dcr-ruta-t{ font-size:13.5px; margin:0; }
.dcr .dcr-ruta-b{ font-size:12.5px; color:var(--ink2); margin:0; }
.dcr .dcr-ruta .dcr-kn{ justify-self:start; margin-top:2px; }
.dcr .dcr-agare{ display:flex; align-items:center; gap:9px; font-size:13.5px;
  font-weight:700; color:var(--ink); text-decoration:none; }
.dcr .dcr-agare:hover{ color:var(--accent-ink); }
.dcr .dcr-agarruta{ background:var(--inset); }

/* ============================================================================
   FORMULÄRET  (.dcr-form)
   ============================================================================ */
.dcr-form h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0; }
.dcr .dcr-lead{ font-size:13.5px; color:var(--ink2); margin:0; max-width:74ch; }
.dcr .dcr-falt{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px 18px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 16px;
}
.dcr .dcr-f{ grid-column:1 / -1; display:grid; gap:4px; }
.dcr .dcr-f-halv{ grid-column:auto; }
.dcr .dcr-f-t{ font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--ink); }
.dcr .dcr-f input[type="text"],
.dcr .dcr-f input[type="file"],
.dcr .dcr-f select,
.dcr .dcr-f textarea{
  border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--card);
  color:var(--ink); font:inherit; font-size:13px; padding:7px 10px; outline:none; width:100%;
}
.dcr .dcr-f textarea{ resize:vertical; min-height:80px; line-height:1.5; }
.dcr .dcr-f input:focus, .dcr .dcr-f select:focus, .dcr .dcr-f textarea:focus{ border-color:var(--accent); }
.dcr .dcr-f-h{ font-size:11.5px; color:var(--dim); line-height:1.45; }
.dcr .dcr-f-h b{ color:var(--ink2); }
.dcr .dcr-f-fot{ grid-column:1 / -1; display:flex; align-items:center; gap:9px;
  flex-wrap:wrap; border-top:1px solid var(--line); padding-top:13px; }
.dcr .dcr-f-fot .dcr-f-h{ margin-left:auto; }

/* ============================================================================
   SMALT — en enda brytpunkt, samma yta som anpassar sig.
   Ingen egen mobilbygge; sidan känner av bredden (regeln från 2026-08-26).
   ============================================================================ */
@media (max-width: 720px){
  /* Rubriken tar en egen rad så att de tre sorteringsflikarna får plats på nästa. */
  .dcr .dcr-hd .dcr-pt{ flex:0 0 100%; margin-right:0; }
  .dcr .dcr-hd .dcr-lagg{ flex:1; justify-content:center; }

  .dcr .dcr-hero{ grid-template-columns:1fr; gap:12px; }
  .dcr .dcr-marke{ right:-64px; opacity:.05; }
  .dcr .dcr-hero-h{ width:100%; }
  .dcr .dcr-hero-h .dcr-kn{ flex:1; justify-content:center; }
  .dcr .dcr-auth{ padding:9px 14px; }
  .dcr .dcr-auth .dcr-kn{ margin-left:auto; }

  /* Raden: sifferkolumnen flyttar under namnet i stället för att klämmas ihop.
     Stapeln följer med — den är hela poängen med listan och får inte försvinna
     bara för att skärmen är smal (samma miss som fällde förslag B på mobil). */
  .dcr .dcr-rad{
    grid-template-columns:34px minmax(0,1fr) auto;
    grid-template-areas:"bricka namn knapp" ".  sif sif";
    gap:6px 10px; padding:9px 11px;
  }
  .dcr .dcr-rad > .dcr-bricka-l, .dcr .dcr-rad > .dcr-bricka{ grid-area:bricka; }
  .dcr .dcr-rad > .dcr-mitt{ grid-area:namn; }
  .dcr .dcr-rad > .dcr-sif{ grid-area:sif; flex-direction:row; align-items:center;
    justify-content:flex-start; gap:9px; }
  .dcr .dcr-rad > .dcr-kn{ grid-area:knapp; }
  .dcr .dcr-bricka{ width:34px; height:34px; font-size:12px; }
  /* Nivåtexten fälls bort — ikonen bär signalen. UNDANTAG: statusbrickan har
     ingen ikon, så utan text blir den en tom ruta. Den behåller sin text. */
  .dcr .dcr-rad .dcr-niv:not(.dcr-niv-vanta) .txt{ display:none; }
  .dcr .dcr-rad .dcr-niv:not(.dcr-niv-vanta){ padding:0 4px; }
  .dcr .dcr-stapel{ width:52px; }
  .dcr .dcr-rad-erbjudande{ grid-template-columns:auto minmax(0,1fr); }
  .dcr .dcr-rad-erbjudande .dcr-kn{ grid-column:1 / -1; justify-content:center; }

  .dcr .dcr-topp{ grid-template-columns:auto minmax(0,1fr); }
  .dcr .dcr-topp-h{ grid-column:1 / -1; }
  .dcr .dcr-topp-h .dcr-kn{ flex:1; justify-content:center; }
  .dcr .dcr-siff{ grid-template-columns:repeat(2, 1fr); }
  .dcr .dcr-tva{ grid-template-columns:1fr; }
  .dcr .dcr-falt{ grid-template-columns:1fr; }
  .dcr .dcr-f-halv{ grid-column:1 / -1; }
  .dcr .dcr-sok{ width:100%; }
  .dcr .dcr-sok input{ flex:1; width:auto; }
}