/* Reduceraren – mobil, dialoger och PWA.

 * Touch-mål och tätare layout på små skärmar, användar-/spar-/konflikt-
 * dialoger, delningsstatus samt läget när appen körs från hemskärmen.
 */

/* --- Import ---------------------------------------------------------------- */

#import-text,
#export-box-slot textarea {
  width: 100%;
  background: #fafaf8;
  color: var(--ink);
  border: 1px solid #d8d8d4;
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.82rem;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#import-text:focus-visible,
#export-box-slot textarea:focus-visible {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(47, 111, 191, 0.18);
}

#import-status {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

#save-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.save-link {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  border: 1px solid #d8d8d4;
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
  min-width: 16rem;
  background: #fafaf8;
  color: var(--ink);
}

.export-box .controls {
  margin-top: 0.5rem;
}

/* Mjukare (2026-09-24): en rundad, varmt tonad ruta med hårfin kant i
   stället för en hård vänsterlinje. Varningen syns lika tydligt – färgen bär
   budskapet – men rutan känns som en upplysning, inte ett felmeddelande. */
.notice {
  background: #fdf7e9;
  border: 1px solid rgba(200, 128, 31, 0.2);
  color: #6b5320;
  padding: 0.7rem 0.95rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: var(--radius-md);
}

/* Varnar om att länken ändrats sedan du senast sparade den (jämfört mot din
   lokala kopia, se showOwnSaveNotice) – samma varningston som .notice, men
   med en egen knapp för att hämta tillbaka din version. */
.own-save-banner {
  background: #fdf7e9;
  border: 1px solid rgba(200, 128, 31, 0.2);
  color: #6b5320;
  padding: 0.7rem 0.95rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: var(--radius-md);
  justify-content: space-between;
  animation: rise-in 0.6s var(--ease-spring) both;
}

.own-save-banner-text {
  flex: 1;
  min-width: 0;
}

.own-save-diff {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
}

.own-save-diff li {
  margin: 0.1rem 0;
}

.own-save-banner button {
  background: var(--blue-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Diskret X för att döljas denna session, i stället för att se ut som en
   till primärknapp (ärver annars .own-save-banner button:s blå gradient). */
.own-save-dismiss {
  background: transparent !important;
  color: #6b5320 !important;
  font-weight: 400 !important;
  padding: 0.3rem 0.5rem !important;
  /* Ingen knappskugga (ärvs annars från .controls button) – krysset ska
     vara ett rent tecken, inte en vit rundel (2026-09-24). */
  box-shadow: none !important;
  opacity: 0.7;
}

.own-save-dismiss:hover {
  opacity: 1;
  color: var(--red-500) !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 560px) {
  .own-save-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .own-save-dismiss {
    align-self: flex-end;
  }
}

footer {
  padding: 1rem;
  text-align: center;
}

/* Ansvarsfullt-spelande-block i sidfoten: syns på alla vyer. Diskret men
   fullt läsbart – en tunn ram ovanför skiljer det från sidans innehåll utan
   att skrika. 18+-brickan sitter först så åldersgränsen fångas direkt. */
.responsible-gaming {
  max-width: 640px;
  margin: 0 auto 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--paper-line);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  text-align: left;
}

.age-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border: 1.5px solid var(--ink-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  line-height: 1;
}

.responsible-gaming-text {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.responsible-gaming-text a {
  color: var(--ink-soft);
  text-decoration: underline;
}

@media (max-width: 560px) {
  .responsible-gaming {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }
}

/* --- Mobil: touch-mål och tätare layout ------------------------------------ */

@media (max-width: 560px) {
  header {
    /* Följer den strama desktop-headern (se header ovan): den gamla regeln
       låg kvar med 1.6/1.8rem och gjorde headern HÖGRE på mobil än på
       desktop, tvärtemot avsikten. */
    padding: 0.45rem 0.8rem 0.5rem;
  }

  main {
    padding: 1rem 0.7rem;
  }

  /* Tätare inre luft i panelerna på mobil (2026-09-24): med panelens OCH
     diagrammets egna kanter blev fördelningsdiagrammet så smalt att
     staplarnas siffror inte gick att läsa. Varje rem här blir bredd åt
     innehållet. */
  #reduce-panel,
  #export-box-slot:has(> details) {
    padding: 0.95rem 0.8rem 0.85rem;
  }

  .dist-chart {
    padding: 0.6rem 0.35rem 0.4rem;
  }

  .hit-chance {
    padding-right: 0.5rem;
  }

  /* Lagnamnet fick ibland plats bredvid 1/X/2-knapparna och ibland inte,
     beroende på hur långt det rådde att vara – vilket gjorde att bara vissa
     matcher fick en radbrytning och andra inte (inkonsekvent, se rapporterad
     skärmbild 2026-08-20). Alltid staplat på mobil i stället: lagnamnet får
     hela bredden (aldrig avklippt av ellipsis) och tecken-raden ligger
     konsekvent under, för alla matcher likadant. */
  .match-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .match-title {
    width: 100%;
  }

  .match-teams {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .sign-row {
    justify-content: flex-end;
  }

  .sign-toggle {
    width: 2.15rem;
    height: 2.15rem;
    font-size: 0.9rem;
  }

  .guard-arrow {
    width: 2.3rem;
    height: 2.3rem;
    font-size: 1.4rem;
  }

  .match-stats th,
  .match-stats td {
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
  }

  .overview-summary {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  /* "Flest rätt just nu" bryts till en egen rad på mobil. Där gällde
     desktopregelns lilla vänstermarginal (.cost ~ .overview-best) och texten
     hamnade en bit in från vänster (David 2026-09-24). Hela raden +
     högerställd text i stället. */
  .overview-summary .overview-best,
  .overview-summary .cost ~ .overview-best {
    flex-basis: 100%;
    margin-left: 0;
    text-align: right;
  }

  .save-share-button,
  .svs-shortcut-button {
    width: 100%;
    justify-content: center;
  }

  /* Sparade lappar / Live-rättning på mobil: en kolumn, full bredd. Större
     radgap mellan kort, och lite mer luft i själva kortet så titeln + datum
     inte ser hopklämda ut mot vänsterkanten. */
  .history-groups {
    gap: 0.6rem;
  }

  /* De tre reglerna som stod här förut (min-height: 3.9rem,
     .history-item-badge { right: 0.9rem }, .history-item-row-title
     { padding-right: 4.6rem }) hörde till kortets GAMLA layout, där
     brickan låg absolut positionerad i hörnet och texten fick handräknad
     padding för att hålla sig undan den (se 02-navigation.css, kortet
     omgjort till rutnät 2026-09-05).

     min-height: 3.9rem var den som gjorde skada kvar även efter
     omgörningen: kortet är numera ett rutnät utan fast höjd, så
     min-height sträckte bara ut ett kort vars innehåll var kortare än
     3.9rem - och eftersom vinstsumman (då en egen rad) låg i en
     egen rad UNDER stämpeln i högerspalten, hamnade den plötsligt långt
     ifrån stämpeln i det utsträckta tomrummet (David 2026-09-05,
     skärmdump: stort gap mellan "10 RÄTT" och "98 kr" bara på mobil).
     De två andra reglerna gjorde inget skadligt men var också dött arv
     från samma gamla layout - borttagna tillsammans. */

  /* Klockreduceringens intervall-tabell (Intervall/Mål/Efter reducering/stapel)
     tvingade fyra kolumner in på en smal skärm och radbröt stygt (rapporterad
     skärmbild 2026-08-20). Om till ett kort per intervall i stället: rubrik
     och stapel överst, målfältet och resultatet sida vid sida därunder – ingen
     kolumn behöver längre krympa för att få plats. */
  .distribution,
  .distribution thead,
  .distribution tbody,
  .distribution tr {
    display: block;
    width: 100%;
  }

  .distribution thead {
    display: none;
  }

  .distribution tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label bar"
      "target got";
    column-gap: 0.6rem;
    row-gap: 0.3rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e8e8e5;
  }

  .distribution tfoot tr {
    display: block;
    border-bottom: none;
  }

  .distribution td {
    padding: 0;
  }

  .distribution tr td:nth-child(1) {
    grid-area: label;
    font-weight: 600;
    align-self: center;
  }

  .distribution tr td:nth-child(2) {
    grid-area: target;
    align-self: center;
  }

  .distribution tr td:nth-child(3) {
    grid-area: got;
    justify-self: end;
    text-align: right;
  }

  .distribution tr td:nth-child(4) {
    grid-area: bar;
    justify-self: end;
    align-self: center;
  }

  .distribution .bar {
    max-width: 40vw;
  }
}

/* --- Användare, spardialog och konfliktdialog (2026-08-21) -------------- */

/* Badgen sitter i headerns övre högra hörn – diskret, men alltid synlig så
   man vet vem appen tror att man är innan man sparar. */
.user-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  /* Mot ljus header: vit knapp med ram, inte vit text på genomskinligt (som
     den var när headern var mörkblå – då blev den osynlig). */
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease;
}

.user-badge:hover {
  border-color: var(--logo-accent);
}

/* Kugghjulet före namnet (2026-09-25, ersatte 👤-emojin). */
.user-badge:not(.user-badge-login) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.user-badge[hidden] {
  display: none;
}
.user-badge-gear {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-soft);
  transition: transform 0.3s ease, color 0.15s ease;
}
.user-badge:hover .user-badge-gear {
  color: var(--ink);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .user-badge-gear {
    transition: none;
  }
}

/* Initialen (renderUserBadge) syns bara på smal skärm, där kugghjul + namn
   kom för nära loggan (David 2026-09-30). Då blir knappen en rund bricka
   med första bokstaven, som en profilbild. */
.user-badge-initial {
  display: none;
}
@media (max-width: 600px) {
  .user-badge:not(.user-badge-login) {
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
  }
  .user-badge:not(.user-badge-login) .user-badge-name {
    display: none;
  }
  /* Kugghjulet som ett litet märke i brickans nedre högra hörn – så det
     syns att inställningarna finns bakom bokstaven (David 2026-09-30). */
  .user-badge:not(.user-badge-login) .user-badge-gear {
    position: absolute;
    right: -0.3rem;
    bottom: -0.3rem;
    width: 0.8rem;
    height: 0.8rem;
    padding: 0.1rem;
    box-sizing: content-box;
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: 50%;
  }
  .user-badge-initial {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--logo-accent);
  }
}

/* "Logga in"-läget (Gäst): ännu mer diskret än den namngivna badgen – ingen
   fylld bakgrund, bara en tunn text-knapp. Den ska finnas där för den som
   söker den, inte dra blicken från verktyget. */
.user-badge.user-badge-login {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.user-badge.user-badge-login:hover {
  color: var(--blue-600);
  border-color: transparent;
}

#user-picker {
  max-width: 640px;
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: center;
}

/* Inloggningsdialogens fyra lägen (2026-09-05, ersätter den gamla
   namnväljarens tre). Tre av dem är formulär och styrs av data-auth-mode på
   #user-picker; det fjärde är kontoläget, som styrs av klassen
   .user-picker-account.

   Allt göms som utgångsläge och visas per läge nedan. Då kan ingen rubrik
   eller inget formulär bli hängande synligt om ett nytt läge läggs till och
   någon glömmer en regel - feläget blir "inget syns", inte "två formulär
   ovanpå varandra". */
.auth-title-login,
.auth-title-register,
.auth-title-forgot,
.auth-title-account,
.auth-hint-login,
.auth-hint-register,
.auth-hint-forgot,
.auth-form,
.auth-alt,
.auth-links-login,
.auth-links-register,
.auth-links-forgot {
  display: none;
}

#user-picker[data-auth-mode="login"] .auth-title-login,
#user-picker[data-auth-mode="register"] .auth-title-register,
#user-picker[data-auth-mode="forgot"] .auth-title-forgot {
  display: inline;
}

#user-picker.user-picker-account .auth-title-login,
#user-picker.user-picker-account .auth-title-register,
#user-picker.user-picker-account .auth-title-forgot {
  display: none;
}

#user-picker.user-picker-account .auth-title-account {
  display: inline;
}

/* I kontoläget bär spelarkortet (.auth-account-card) sidans identitet –
   dess "Inloggad · Spelarkort" + namnet. En separat "Ditt konto"-rubrik
   ovanför vore dubbelt, så <h2> flyttas ur synfältet men lämnas kvar som
   rubrik-landmärke för skärmläsare (samma teknik som .sr-only). */
#user-picker.user-picker-account > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#user-picker[data-auth-mode="login"] .auth-hint-login,
#user-picker[data-auth-mode="register"] .auth-hint-register,
#user-picker[data-auth-mode="forgot"] .auth-hint-forgot,
#user-picker[data-auth-mode="login"] .auth-form-login,
#user-picker[data-auth-mode="register"] .auth-form-register,
#user-picker[data-auth-mode="forgot"] .auth-form-forgot,
#user-picker[data-auth-mode="login"] .auth-alt-login,
#user-picker[data-auth-mode="login"] .auth-links-login,
#user-picker[data-auth-mode="register"] .auth-links-register,
#user-picker[data-auth-mode="forgot"] .auth-links-forgot {
  display: block;
}

/* Formuläret är vänsterställt inuti en centrerad ruta: etiketter och fält
   ovanför varandra läses lättast så, medan själva rutan får stå mitt på
   sidan som resten av #user-picker. */
.auth-form {
  max-width: 320px;
  margin: 1.2rem auto 0;
  text-align: left;
}

.auth-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft, var(--ink));
}

.auth-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
}

/* Kort förklaring under ett fält (t.ex. visningsnamnet vid registrering).
   Sitter tätt inpå fältet ovanför, som en fotnot till det. */
.auth-field-hint {
  margin: -0.55rem 0 0.9rem;
  font-size: 0.78rem;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.auth-submit {
  width: 100%;
}

/* "eller" + Google-knappen. En tunn linje på var sida om ordet, gjord med
   flex i stället för pseudo-element med bakgrundsfärg - fungerar då lika
   bra på alla underlag. */
.auth-alt {
  max-width: 320px;
  margin: 1.1rem auto 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--paper-line);
}

.auth-google-button {
  width: 100%;
}

/* Vägarna mellan lägena. <button> och inte <a>, eftersom de inte navigerar
   någonstans - men de ska SE UT som länkar, därav nollställningen. */
.auth-links {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.auth-link {
  padding: 0;
  font: inherit;
  color: var(--blue-600);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.auth-link:hover {
  color: var(--blue-500);
}

.auth-link-muted {
  color: var(--ink-faint);
}

.auth-links-separator {
  margin: 0 0.4rem;
  color: var(--ink-faint);
}

/* Meddelanderaden: samma ruta för fel och bekräftelser, färgen skiljer dem
   åt. Att ha EN rad i stället för en per formulär gör att ett meddelande
   aldrig kan bli kvar osynligt i ett dolt läge. */
.auth-message {
  max-width: 320px;
  margin: 0.9rem auto 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  text-align: left;
  border-radius: var(--radius-md);
  /* Bekräftelsemeddelandet efter registrering är tvådelat med en tom rad
     emellan (skräppost-uppmaningen i eget stycke) – pre-line bevarar de
     radbrytningarna. Enradsmeddelanden påverkas inte. */
  white-space: pre-line;
}

.auth-message-error {
  color: var(--red-500);
  background: #fdf2f2;
  border: 1px solid #e6c9c9;
}

.auth-message-success {
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
}

/* Skräppost-påminnelsen som står kvar i inloggningsläget efter en nyss gjord
   registrering (#auth-verify-reminder, styrd av justRegisteredThisSession i
   04-state-storage.js). Dämpad varningston – tydligare än en vanlig .hint men
   inte en röd felruta: det är inget fel, bara något man lätt missar. */
.auth-verify-reminder {
  max-width: 320px;
  margin: 0.9rem auto 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  background: #fbf6e8;
  border: 1px solid #e6d7ac;
  border-radius: var(--radius-md);
}

/* Avdelare mellan inställningarna i kontopanelen: en tunn linje och lite
   luft, men allt ligger kvar under samma rubrik "Inställningar". */
.auth-setting {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--paper-line);
}
/* Inställningens RUBRIK (kryssrutans etikett resp. förvalsrutans etikett):
   större, fetare och mörkare än hjälptexten under, så man ser var varje
   inställning börjar (2026-10-02, David: "man ser knappt dom mot resten av
   texten"). Hjälptexten (.auth-groups-intro) får en dämpad ton. */
.auth-setting-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.auth-setting-title em {
  font-style: normal;
}
#default-favorite-weight-row {
  flex-wrap: wrap;
}
#auth-settings #default-favorite-weight-row .auth-setting-title {
  flex-basis: 100%;
  font-size: 0.92rem;
  font-weight: 600;
}
.auth-setting .auth-groups-intro {
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

.auth-setting-first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Guide-länkar scrollar till sin rubrik – lite marginal så den inte hamnar
   under den fasta Om-menyn. */
[id^="guide-"] {
  scroll-margin-top: 4.5rem;
}

/* "Skicka nytt verifieringsmail" – visas bara när en inloggning nekats för
   overifierad e-post (#auth-resend-verify, se submitAuthLogin). */
.auth-resend-verify {
  display: block;
  max-width: 320px;
  margin: 0.6rem auto 0;
}

/* display: block ovan slår ut webbläsarens inbyggda [hidden] { display: none }
   – knappen stod därför ALLTID synlig i inloggningsrutan och skymtade förbi
   vid varje inloggning (David 2026-10-02). Samma buggmönster som
   .history-subtabs[hidden] i 02-navigation.css. */
.auth-resend-verify[hidden] {
  display: none;
}

/* ======================================================================
   KONTOLÄGET (2026-09-05, omformgivet)

   #auth-account visas när man redan är inloggad. Formgivet som ett
   spelarkort i en tryckt tipskupong – samma navy-strip som Om-sidans
   masthead (.about-masthead), samma mono-roll (--about-mono) för allt som
   är "tryckt data" (e-post, medlemsantal, folios), och guld enbart där
   något är utmärkande: ägarskapet av en grupp. Gruppkorten är
   laguppställningar.

   Hela kontoläget är vänsterställt, till skillnad från
   inloggningsformulären som står centrerade i #user-picker. -->
   ====================================================================== */
#auth-account {
  max-width: 620px;
  margin: 1.4rem auto 0;
  text-align: left;
}

/* --- Spelarkortet: namn + e-post mot navy ---------------------------- */
.auth-account-card {
  position: relative;
  margin-bottom: 1.6rem;
  padding: 1.15rem 1.35rem 1.25rem;
  /* Mjukare (2026-09-24): djup blå i stället för nästan svart, samma toning
     som Om-sidans masthead, och en hårfin ljus överkant. */
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800) 70%);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow-md);
  overflow: hidden;
}

/* Tunn guldlinje längst ner – kupongstripens nederkant. Guld används bara
   här och på ägarskaps-etiketten, precis som Om-sidan bara guldmarkerar de
   tre begreppen verktyget bygger på. */
.auth-account-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
}

.auth-account-eyebrow {
  font-family: var(--about-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.auth-account-name {
  margin: 0.5rem 0 0.2rem;
  /* Plats för pennknappen i övre högra hörnet – namnet ska bryta rad före
     den, inte hamna under. */
  padding-right: 6.5rem;
  font-size: clamp(1.65rem, 8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  overflow-wrap: anywhere;
}

@media (max-width: 400px) {
  .auth-account-name {
    padding-right: 3rem;
  }
}

.auth-account-email {
  margin: 0;
  font-family: var(--about-mono);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  word-break: break-all;
}

/* "Byt visningsnamn" som en diskret pill uppe i kortets högra hörn – penna
   + "Byt namn". En redigera-affordance som hör till kortet, inte en
   understruken webblänk i stripen. Ljus, inte guld (guld är reserverat). */
.auth-name-edit {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.auth-name-edit svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.auth-name-edit:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.auth-name-edit:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

/* På riktigt smala skärmar ryms inte texten bredvid ett långt namn – då
   krymper knappen till bara pennan. */
@media (max-width: 400px) {
  .auth-name-edit-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .auth-name-edit {
    padding: 0.4rem;
  }
}

/* Kontotexten under kortet. */
.auth-account-note {
  margin: 0 0 2rem;
}

/* --- Byt visningsnamn (2026-09-05, omgjord) --------------------------
   Formuläret bor INUTI spelarkortet och ersätter #auth-account-display när
   det är öppet (showNameForm togglar [hidden] på båda). Det ärver då
   kortets navy-botten och centrering i stället för att bli en lös
   vänsterställd ruta under kortet. Fälten och knapparna är stylade för mörk
   botten.

   [hidden] räcker för att gömma det – formuläret har ingen egen
   display-regel som skulle behöva slås. */
.auth-name-form {
  margin: 0.7rem 0 0.1rem;
}

.auth-name-label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--about-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.auth-name-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
}

.auth-name-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.auth-name-form input:focus {
  outline: none;
  border-color: var(--gold-400);
  background: rgba(255, 255, 255, 0.12);
}

.auth-name-hint {
  margin: 0.55rem 0 0.9rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Fel vid namnbyte, på kortets mörka botten. Ljust röd, inte --red-500
   (som drunknar mot navy). */
.auth-name-error {
  margin: 0 0 0.8rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  color: #ffd7d4;
  background: rgba(209, 69, 63, 0.25);
  border: 1px solid rgba(255, 150, 145, 0.4);
  border-radius: var(--radius-sm);
}

/* "Avbryt" + "Spara" som ett jämnt par, båda riktiga knappar. "Spara" är
   guldfylld (kortets accentfärg), "Avbryt" en genomskinlig ghost med ram. */
.auth-name-buttons {
  display: flex;
  gap: 0.6rem;
}

.auth-name-cancel,
.auth-name-save {
  flex: 1;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.auth-name-cancel {
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.auth-name-cancel:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

.auth-name-save {
  color: var(--navy-950);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border: 1px solid var(--gold-500);
}

.auth-name-save:hover {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-400));
}

/* --- Mina grupper (etapp 2, 2026-09-05) ------------------------------ */
.auth-groups {
  margin-top: 0;
}

/* Andra sektionen (Mina grupper efter Mina vänner) låg klistrad direkt under
   vänsektionens inbjudningsfält – ge den samma luft som mellan övriga
   sektioner (2026-09-24). */
.auth-groups + .auth-groups {
  margin-top: 2.2rem;
}

/* Sektionsrubrik: mono-eyebrow med hårlinje som växer ut åt höger. Samma
   ton som Om-sidans avsnittsindex. Träffar både "Mina grupper" och
   "Skapa en ny grupp" (den senare är en <label> – se index.html). */
.auth-groups-title,
.auth-group-create > .auth-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.3rem 0 0.7rem;
  /* Större och tydligare (2026-10-02, David: rubrikerna syntes knappt mot
     texten) – var 10,6 px versaler i mono. Nu fetstil i läsbar storlek; den
     tunna linjen efter rubriken finns kvar. */
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--navy-900);
}

.auth-groups-title::after,
.auth-group-create > .auth-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--paper-line);
}

.auth-groups-intro {
  margin: 0 0 1.15rem;
}

.auth-groups-list {
  margin: 0 0 1rem;
}

.auth-groups-list:empty {
  margin: 0;
}

/* Tomläget: en streckad ruta, inte bara en rad text – den ska läsas som
   "här kommer dina grupper att stå". */
.auth-groups-empty {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  background: var(--paper-raised);
  border: 1px dashed #d6d5cd;
  border-radius: var(--radius-md);
}

/* --- Gruppkort: laguppställning ------------------------------------- */
.auth-group-card {
  position: relative;
  margin-bottom: 0.9rem;
  padding: 1rem 1.1rem 1.1rem 1.35rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Vänsterkanten som rundad stapel inne i kortet (2026-09-24), samma grepp
   som lapparna i Sparade lappar. */
.auth-group-card::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 3px;
  border-radius: 999px;
  background: var(--navy-700);
  pointer-events: none;
}

/* Meta-rad ovanför namnet: folio + ägarskap, i mono. Följer Om-sidans
   mönster – siffran står vänster om titeln, och bara när ordningen bär
   information (JS lägger folion bara vid två eller fler grupper). Tom rad
   (vanlig medlem, en enda grupp) kollapsar. */
.auth-group-meta {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.35rem;
  font-family: var(--about-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-group-meta:empty {
  display: none;
}

.auth-group-folio {
  color: var(--ink-faint);
}

/* "Du skapade den" – guld-mono. Det enda utmärkande per grupp, och det
   enda guld i hela kontoläget vid sidan av kortets nederkant. */
.auth-group-role {
  color: var(--gold-500);
}

.auth-group-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Namnbytesfältet, bara i hanteringsläget – ersätter .auth-group-name. */
.auth-group-rename {
  margin: 0.15rem 0 0.1rem;
}

.auth-group-rename .auth-label {
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.auth-group-rename .auth-inline-form {
  margin-top: 0;
}

.auth-group-rename input {
  font-size: 1rem;
  font-weight: 600;
}

.auth-group-count {
  margin: 0.35rem 0 0;
  font-family: var(--about-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Medlemslistan: en riktig lista, en rad per person. Namnet till vänster,
   "du"-etiketten eller (i hanteringsläget) en "Ta bort"-knapp till höger.
   Radavdelare i --paper-line så listan läses som en uppställning, inte en
   textklump. Den egna raden ligger alltid först (JS). */
.auth-member-list {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-member-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2rem;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  color: var(--ink-soft, var(--ink));
  border-top: 1px solid var(--paper-line);
}

.auth-member-row:first-child {
  border-top: none;
  padding-top: 0.1rem;
}

.auth-member-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Din egen rad: namnet i full bläckfärg (lättare att hitta sig själv).
   Skaparens rad får en aning tyngd men inte full ink – hierarkin är
   "du > skaparen > övriga". */
.auth-member-row.is-me .auth-member-name {
  font-weight: 600;
  color: var(--ink);
}

.auth-member-row.is-owner:not(.is-me) .auth-member-name {
  font-weight: 600;
}

.auth-member-you {
  flex: none;
  font-family: var(--about-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* "Ta bort" per rad – syns BARA i hanteringsläget (.is-managing). En knapp
   med ram, inte en länk: den ska se ut som något man trycker på med
   avsikt. Dämpad röd tills man pekar på den. */
/* Lugn grå tills man pekar på den (2026-09-24) – med flera vänner blev
   det en kolumn av röda knappar som skrek, fast inget händer förrän man
   trycker (och bekräftar). Rött visas först när avsikten finns. */
.auth-member-remove {
  flex: none;
  padding: 0.3rem 0.75rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--paper-raised);
  border: 1px solid #e4e3dc;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.auth-member-remove:hover,
.auth-member-remove:focus-visible {
  color: var(--red-500);
  border-color: #e6c9c9;
  background: #fdf2f2;
}

/* "+"-knappen (2026-09-14): lägg till en gruppmedlem som vän direkt. Rund
   och liten – en diskret genväg, inte en primär åtgärd på raden. Grön ton
   i stället för rött: addera är ofarligt, till skillnad från "Ta bort". */
.auth-member-add-friend {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--green-600);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.auth-member-add-friend:hover {
  border-color: var(--green-600);
  background: #f1f8f3;
}

.auth-member-add-friend:disabled {
  opacity: 0.5;
  cursor: default;
}

/* I hanteringsläget får listan en svag ram-inramning, så det syns tydligt
   att kortet bytt läge och att raderna nu är "aktiva". */
.auth-member-list.is-managing {
  margin-top: 0.7rem;
  padding: 0.2rem 0.75rem;
  background: #fbfaf7;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
}

/* Prickad avdelare mot åtgärdsraden – kupongens ledarlinje, som Om-sidans
   innehållsindex. Något mörkare än där eftersom kortet är vitt, inte
   --paper. */
.auth-group-rule {
  margin: 0.85rem 0 0.75rem;
  border: none;
  border-top: 2px dotted #d6d5cd;
}

/* Åtgärdsraden: knappar med ram, inte länkar. */
.auth-group-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0;
}

/* "Hantera medlemmar" / "Klar" – lugn sekundärknapp. När läget är på
   (.is-active) markeras den ifylld så det syns vilket kort som redigeras. */
.auth-group-manage-btn,
.auth-group-leave-btn {
  padding: 0.45rem 0.95rem;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid #dcdbd3;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.auth-group-manage-btn:hover,
.auth-group-leave-btn:hover {
  border-color: #c9c8bf;
  color: var(--ink);
}

.auth-group-manage-btn.is-active {
  color: var(--ink);
  background: var(--paper-raised);
  border-color: var(--navy-700);
}

/* "Visa gruppens lappar" – först i raden, för alla medlemmar (inte bara
   ägaren). Samma form som manage/leave-knapparna men med en mörkare ram så
   den läses som radens huvudåtgärd, utan att bli en helt egen knappstil. */
/* Mjuk blå platta (2026-09-24) i stället för mörk ram – fortfarande
   radens huvudåtgärd, i samma "valt/viktigt"-ton som flikarna. */
.auth-group-entries-btn {
  padding: 0.45rem 0.95rem;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--navy-800);
  background: #eaf0f9;
  border: 1px solid rgba(47, 111, 191, 0.22);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.auth-group-entries-btn:hover {
  background: #dce7f6;
  border-color: rgba(47, 111, 191, 0.4);
}

/* "Ta bort gruppen" – röd danger, syns bara i hanteringsläget. Skild från
   "Klar" bredvid: den ena avslutar redigeringen, den andra river gruppen. */
.auth-group-delete-btn {
  padding: 0.45rem 0.95rem;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--red-500);
  background: var(--paper-raised);
  border: 1px solid #e6c9c9;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.auth-group-delete-btn:hover {
  border-color: var(--red-500);
  background: #fdf2f2;
}

/* Textfält + knapp på samma rad. Fältet tar överbliven plats, knappen
   behåller sin bredd, och på smal skärm bryts raden i stället för att
   fältet kläms ihop. */
.auth-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.auth-inline-form input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid #dcdbd3;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-inline-form input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--focus-ring);
}

/* Väntande inbjudningar, avskilt inne i gruppkortet. */
.auth-invite-list {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--paper-line);
}

.auth-invite-heading {
  margin: 0 0 0.4rem;
  font-family: var(--about-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.auth-invite-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.2rem 0;
  font-size: 0.85rem;
}

.auth-invite-email {
  font-family: var(--about-mono);
  font-size: 0.8rem;
  color: var(--ink-soft, var(--ink));
  word-break: break-all;
}

/* "Kopiera länk" bredvid e-posten: en liten, dämpad knapp med tunn ram i
   stället för blå understruken länktext (.auth-link, gjord för inloggnings-
   formuläret). Den blå webblänks-looken drog blicken till sig och kändes
   främmande mitt i kontopanelen. Nu ligger knappen still på raden och lyser
   först upp när man pekar på den. */
.auth-invite-copy {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-faint);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.auth-invite-copy:hover {
  color: var(--blue-600);
  border-color: var(--blue-500);
}

/* --- Skapa ny grupp ------------------------------------------------- */
.auth-group-create {
  margin-top: 1.8rem;
}

.auth-group-create .auth-inline-form {
  margin-top: 0.5rem;
}

.auth-group-create .auth-inline-form input {
  flex-basis: 14rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.92rem;
  background: var(--paper-raised);
}

/* Gruppsektionens meddelanderad – vänsterställd, inte centrerad som
   inloggningens. */
.auth-groups .auth-message {
  max-width: none;
  margin-left: 0;
}

.user-picker-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

/* I kontoläget står knapparna som en fot, avskild med en linje och
   utspridda på hela bredden. I inloggningsläget behåller de sitt
   centrerade utseende (regeln ovan). */
#user-picker.user-picker-account .user-picker-buttons {
  margin-top: 2.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--paper-line);
}

#user-picker.user-picker-account .user-picker-button {
  flex: 1 1 auto;
}

.user-picker-button {
  padding: 0.75rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.user-picker-button:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
}

/* "Logga ut" – en mild lämna-åtgärd. Dämpad röd text och ram, inte en fylld
   varningsknapp: att bli Gäst igen är ofarligt (lapparna ligger kvar), det
   ska bara gå att skilja från "Avbryt" bredvid. */
.user-picker-button-logout {
  color: var(--red-500);
  border-color: #e6c9c9;
}

.user-picker-button-logout:hover {
  border-color: var(--red-500);
  background: #fdf2f2;
}

/* Ersätter "Dela med"-rutan när gästen sparar (se buildSharePicker). */
.share-guest-note {
  margin-top: 0.4rem;
}

/* Omgångsnumret som underrubrik när lappen har ett namn – namnet är det som
   skiljer flera lappar på samma omgång åt, så det ska dominera. Egen rad
   (display: block) under namnet i stället för inline efter det: ett långt namn
   tryckte annars ut "omgång 2604" så att "omgång" blev kvar på namnraden och
   siffran bröt ner själv (David 2026-09-02). */
.history-item-draw-sub {
  display: block;
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.85em;
  line-height: 1.3;
  /* Lite luft mellan titeln och underraden (David 2026-09-02) – annars klistras
     datumet direkt under lappnamnet. */
  margin-top: 0.2rem;
}

.history-item-shared {
  color: var(--ink-soft);
  font-size: 0.78rem;
  /* Tap-bar tooltip (data-tip, se ensureHistoryPresenceTooltip/
     ensureLivePresenceTooltip) i stället för title (David 2026-09-16,
     title visas aldrig vid tap på mobil). */
  cursor: pointer;
}

/* Presence-prick på "Delad med ..."-raden (2026-09-11): en person tittar på
   lappen just nu eller nyligen (se summarizePresence i 05-sharing.js). Bara
   EN person visas alltid med namn (history-item-shared), fler blir "3
   användare" – då räcker en prick på hela raden, namnen står i tap/hover-
   tooltipen (data-tip), klumpade per status ("Anders, Jimmie tittar just
   nu" i stället för upprepning per namn, David 2026-09-16).
   Medvetet UTAN .live-dots utåtväxande halo-ring: den betyder "omgången
   pågår", en annan sak, och skulle annars läsas som samma händelse. Formen
   (fast prick, glow via box-shadow) är lånad från live-dot/pulse i WSOP
   Fantasy-projektet. Gul (--gold-500), inte grön: appens gröna redan betyder
   "korrekt/vunnet" på många ställen (t.ex. rättningens 1/X/2), och skulle
   här kunna läsas som ett resultat snarare än en närvaromarkering. Ingen
   animation (David 2026-09-11: "behöver inte pulsera") – en stillastående
   prick räcker, mindre flimmer att dras med ögat mot. */
.viewer-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.35em;
  vertical-align: middle;
  flex-shrink: 0;
}

.viewer-dot-live {
  background: var(--gold-500);
  box-shadow: 0 0 5px var(--gold-500);
}

.viewer-dot-recent {
  background: var(--ink-faint);
}

.history-item-creator {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

/* Modaler: samma grundform för spar- och konfliktdialogen. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 24, 48, 0.55);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 420px;
  padding: 1.4rem;
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(10, 24, 48, 0.35);
}

.modal h3 {
  margin: 0 0 0.9rem;
}

.modal label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.modal input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
}

.modal input[type="text"]:focus {
  outline: 2px solid var(--blue-500);
  outline-offset: 1px;
}

.modal-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.secondary-button {
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink-soft);
  /* Mjukare (2026-09-24): vit yta med tunn ram och svag skugga, så den
     läses som en knapp bredvid de fyllda primärknapparna utan att
     konkurrera med dem. */
  background: var(--paper-raised);
  border: 1px solid #dcdbd3;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.4s var(--ease-bounce);
}

.secondary-button:hover {
  color: var(--ink);
  border-color: #c9c8bf;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.secondary-button:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* Spardialogens knapprad ("Avbryt" + "Spara"). Utan detta blev de olika:
   "Spara" är en .save-share-button vars påtvingade (!important) padding +
   box-shadow gjorde den bredare, och på mobil satte .save-share-button dessutom
   width:100% (regeln för toppfältets knappar) så den la sig på egen rad,
   utsträckt till full bredd och delvis omlott med "Avbryt" (David, skärmdump
   2026-08-28). Här får båda lika bred yta (flex:1) och samma padding, så de
   ligger prydligt bredvid varandra och är lika stora – även på smal skärm. */
.modal-buttons-even {
  flex-wrap: nowrap;
  justify-content: stretch;
}

.modal-buttons-even .secondary-button,
.modal-buttons-even .save-share-button {
  flex: 1;
  min-width: 0;
  width: auto;
  text-align: center;
  justify-content: center;
  padding: 0.6rem 0.5rem !important;
}

.secondary-button:hover {
  border-color: var(--blue-500);
  color: var(--ink);
}

/* Raderingsdialogens knappar (se delete-dialog i index.html): tre knappar på
   en rad med justify-content:flex-end blev trångt och radbröt fult - texten
   fick inte plats. Ger dem i stället lika bred yta var (flex:1) så alla tre
   får plats jämnt fördelat på en rad, med mindre padding/font än standard-
   knapparna för att "Ta bara bort för mig" ska rymmas utan radbrytning. */
.modal-buttons-stacked {
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.modal-buttons-stacked .danger-button,
.modal-buttons-stacked .secondary-button {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.5rem;
  font-size: 0.85rem;
  text-align: center;
}

/* Tvåknappsdialog med lång primärtext ("Reducera och fortsätt"). På mobil
   gjorde .save-share-button sig full bredd (toppfältets regel) medan "Avbryt"
   stod kvar liten på en egen rad OVANFÖR (David 2026-09-24). Här staplas
   båda i full bredd, lika stora, med huvudvalet överst. Desktop orört. */
@media (max-width: 560px) {
  .modal-buttons-mobile-stack {
    flex-direction: column-reverse;
  }

  .modal-buttons-mobile-stack .secondary-button,
  .modal-buttons-mobile-stack .save-share-button {
    width: 100%;
    padding: 0.7rem 1rem !important;
    text-align: center;
  }
}

.secondary-button-ghost {
  /* --paper-line är nästan osynlig mot modalens vita bakgrund (#e2e1da på
     #ffffff) - samma svaga kant som secondary-button redan har, men här
     stod knappen ensam utan de andra knapparnas fyllda bakgrund att synas
     mot, så den såg trasig/kantlös ut. Mörkare kant löser det. */
  background: transparent;
  border-color: #b9b7ac;
  color: var(--ink-soft);
}

.secondary-button-ghost:hover {
  background: var(--paper);
  border-color: #9c9a8d;
}

@media (max-width: 420px) {
  /* Även med flex:1 blir tre knappar på en rad för trångt på riktigt smala
     skärmar - stapla dem i full bredd i stället där space verkligen tryter. */
  .modal-buttons-stacked {
    flex-wrap: wrap;
  }

  .modal-buttons-stacked .danger-button,
  .modal-buttons-stacked .secondary-button {
    flex: 1 1 100%;
    padding: 0.7rem 1rem;
    font-size: 1rem;
  }
}

/* Raderingsdialogens "Ta bort för alla" (se delete-dialog i index.html) -
   röd i stället för den neutrala secondary-button, så det oåterkalleliga
   alternativet (tar bort lappen för ALLA, inte bara dig) syns tydligt
   skiljer sig från "Ta bara bort för mig" bredvid. Gradient + skugga ger
   den lite mer tyngd än en helt platt knapp, utan att sticka ut för mycket. */
.danger-button {
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #e04b42, var(--red-500));
  border: 1px solid var(--red-500);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(193, 66, 58, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.danger-button:hover {
  /* Mörkare ton av samma röd - appen har ingen egen --red-700, och en helt
     ny färgvariabel för en enda knapps hover kändes för mycket. */
  background: linear-gradient(180deg, #c8443c, #a8302b);
  border-color: #a8302b;
  box-shadow: 0 4px 12px rgba(168, 48, 43, 0.45);
  transform: translateY(-2px);
}

.danger-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(168, 48, 43, 0.4);
}

.danger-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(193, 66, 58, 0.35);
}

/* Loggan som hem-knapp: en dämpad hover, och en synlig fokusring för den som
   tabbar sig fram (knappen har ingen egen ram att markera fokus med). */
.site-title-row:hover {
  opacity: 0.9;
}

.site-title-row:focus-visible {
  outline: 2px solid var(--logo-accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}


/* Banderoll när du öppnat någon annans delade länk (se showSharedCouponNotice).
   Byggd på .resume-bar men i loggans grå i stället för blått – de två ska gå
   att skilja åt på en blick, eftersom de betyder helt olika saker: den ena är
   din egen halvfärdiga kupong, den andra någon annans lapp. */
.shared-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: #f4f3ef;
  border: 1px solid #dedcd3;
  border-left: 3px solid var(--logo-accent);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem 0.65rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
  animation: rise-in 0.6s var(--ease-spring) both;
}

.shared-bar-hint {
  color: var(--ink-soft);
  font-size: 0.92em;
}

/* Krysset i den delade rutan ligger i ett element utan .resume-bar button-
   reglerna, så utan detta slår webbläsarens standardknapp igenom (grå ram,
   fyrkantig, klumpig). Samma diskreta kryss som i Återuppta-rutan. */
.shared-bar .resume-bar-remove {
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  align-self: center;
  transition: color 0.12s var(--ease-out), background 0.12s var(--ease-out);
}

.shared-bar .resume-bar-remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Banderoll för en väntande gruppinbjudan vid inloggning (se
   showPendingInvitesNotice). Delar .shared-bar-utseendet men med "Gå med"-
   knappar inbakade, så man kan svara direkt utan att öppna kontopanelen. */
.pending-invite-bar {
  flex-wrap: wrap;
}

.pending-invite-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.pending-invite-accept {
  border: 1px solid var(--logo-accent);
  background: var(--logo-accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.12s var(--ease-out);
  white-space: nowrap;
}

.pending-invite-accept:hover {
  opacity: 0.88;
}

.pending-invite-accept:disabled {
  opacity: 0.6;
  cursor: default;
}

/* "Dela med"-väljaren i spardialogen. Kryssrutor i stället för en dropdown:
   man vill kunna välja flera, och <select multiple> kräver ctrl-klick och
   små träffytor – särskilt illa på mobil. */
.share-picker {
  margin: 1rem 0 0;
  padding: 0.7rem 0.8rem 0.5rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
}

.share-picker legend {
  padding: 0 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.share-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.share-picker-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Generös träffyta – raderna ligger tätt och ska gå att pricka med tumme. */
  padding: 0.3rem 0;
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Skaparens rad när det inte är du själv som sparar (se buildSharePicker,
   David 2026-08-26) – nedtonad och omöjlig att klicka, så det syns att den
   är låst och inte bara råkar stå ikryssad. */
.share-picker-item-locked {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Snabbvalet får egen rad och en avskiljare, så det läses som "allt på en
   gång" och inte som ännu ett namn i raden. */
.share-picker-all {
  flex-basis: 100%;
  padding-bottom: 0.45rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid var(--paper-line);
  font-weight: 600;
}

.share-picker .hint {
  margin: 0.5rem 0 0;
}

/* --- Delningsstatus och "ny"-markering (2026-08-21) --------------------- */

/* Visar i kupongfältet vilka lappen delas med, medan man jobbar med den. */
.share-status {
  font-size: 0.82rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Namnen i share-status är <button>-element sedan 2026-09-11 (se
   buildViewerNameSpan) - så "sedd senast"-tiden går att trycka fram på
   mobil, där title-attributets hover-tooltip aldrig syns. Nollställ allt
   knapp-utseende: ska läsas som vanlig text i "Delad med ..."-raden, precis
   som innan den blev klickbar.

   #share-status .viewer-name, INTE bara .viewer-name (2026-09-11, andra
   försöket): #share-status ligger inuti <div class="controls"
   id="product-bar"> (index.html), och .controls button (02-navigation.css,
   den blå/mörkblå-gradienten på "Reducera"/"Nollställ" m.fl.) har HÖGRE
   specificitet (element+klass) än en ensam klass-selektor - den vann över
   .viewer-name oavsett att den senare laddas sist i filordningen, och gav
   exakt den blå piller-looken David fortsatte se även efter att
   appearance: none lades till (som INTE var boven - det var en riktig
   bakgrundsfärg som slog igenom, inget appearance-tema). appearance: none
   behålls ändå, ofarligt och rätt att ha på en knapp som ska se ut som text. */
#share-status .viewer-name {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* Presence-färg på namnen (2026-09-11): "tittar just nu" respektive
   "tittade nyligen". Gul (--gold-500, samma ton som redan används som
   textfärg t.ex. i 04-coupon-reduction.css), inte grön - se motiveringen
   vid .viewer-dot-live ovan. Stillastående, ingen puls (David 2026-09-11).
   Samma specificitetsskäl som ovan: #share-status .viewer-name-live, inte
   bara .viewer-name-live. */
#share-status .viewer-name-live {
  color: var(--gold-500, #b7791f);
  font-weight: 600;
}

#share-status .viewer-name-recent {
  color: var(--gold-500, #b7791f);
  font-weight: 600;
  opacity: 0.7;
}

/* Popup-kortet som öppnas vid tryck på ett namn (showViewerPopup i
   05-sharing.js): visar samma "sedd senast"-text som title-attributet,
   fast tryckbart. position: fixed, egna top/left sätts inline per anrop
   (positionerat vid namnet, se JS). z-index högt nog att ligga ovanpå
   kupongfältets kort men under modalerna (50, se .modal-backdrop). */
.viewer-popup {
  position: fixed;
  z-index: 40;
  max-width: min(280px, calc(100vw - 16px));
  padding: 0.5rem 0.7rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 6px 20px rgba(10, 24, 48, 0.18);
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.3;
}

/* Nuläget överst i spardialogens "Dela med"-ruta. */
.share-current {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* "NY"-märke på lappar någon annan delat och du inte öppnat än. Appen kan
   inte skicka notiser (inga konton), så det här är signalen som möter en
   i historiken i stället. */
.new-badge {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.32rem;
  border-radius: 999px;
  background: var(--green-500);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 0.08em;
}

.history-item-new {
  border-color: var(--green-500);
}

/* Räknare på Historik-fliken, så man ser att något väntar utan att öppna den. */
.nav-count {
  display: inline-block;
  min-width: 1.15rem;
  margin-left: 0.35rem;
  padding: 0.02rem 0.3rem;
  border-radius: 999px;
  background: var(--green-500);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

/* Amber-varianten: "facit väntar på dig" (orättade lappar) väger tyngre än
   den gröna "ny lapp delad med dig" och ska inte kunna förväxlas med den –
   --gold-500 är redan appens amber (jackpot, Topptipsets rubrikfärg). Vinner
   över den gröna färgen när båda gäller samtidigt (se updateNewCountBadge,
   David 2026-09-22: vill se PÅ FLIKEN vad som väntar, inte bara komma ihåg
   var det brukar ligga). */
.nav-count-alert {
  background: var(--gold-500);
}

/* Prick på Live-rättning-fliken: minst en lapp har BEKRÄFTAD matchstatus
   "pågår" just nu (se checkAnyEntryLive, 05-sharing.js – ingen tidsgissning
   längre). Grön och blinkande, till skillnad från de lugna gula
   badge/presence-prickarna: den ska se ut som "något händer nu", eftersom
   det bara tänds när det faktiskt gör det (David 2026-09-22). */
.nav-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: var(--green-500);
  vertical-align: 0.1em;
  animation: nav-dot-blink 1.6s ease-in-out infinite;
}

/* .nav-dot display:inline-block har samma CSS-specificitet som webbläsarens
   inbyggda [hidden] { display: none } och står senare i cascade-ordningen,
   så den vann över hidden-attributet – pricken syntes/blinkade grönt trots
   att JS satt hidden=true (samma bugg som .history-subtabs[hidden] ovan,
   David 2026-09-22). !important tvingar dolningen att alltid vinna. */
.nav-dot[hidden] {
  display: none !important;
}

@keyframes nav-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Lottade matcher i rättningsvyn (se renderDrawnMatchNotes). Amber, samma
   familj som Topptipsets rubrikfärg – ett upplysande påpekande, inte en
   varning: raden förklarar varför en inställd match ändå gav rätt. */
.drawn-matches {
  margin: 0.6rem 0 0.9rem;
  padding: 0.6rem 0.75rem;
  background: rgba(207, 148, 31, 0.12);
  border: 1px solid rgba(207, 148, 31, 0.35);
  border-radius: var(--radius-md);
}

.drawn-matches-heading {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.drawn-matches-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drawn-matches-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.drawn-match-label {
  color: var(--ink);
}

/* Det lottade tecknet – samma bricka som facit visas med i tabellerna, så
   ögat känner igen det som ett utfall och inte som löptext. */
.drawn-match-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0.05rem 0.3rem;
  background: rgba(207, 148, 31, 0.3);
  border-radius: 5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Svenska Spels egen kommentar, inklusive fördelningssiffrorna. Bryts till
   egen rad på smala skärmar i stället för att trängas med matchnamnet. */
.drawn-match-comment {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* --- PWA: appen körd från hemskärmen --------------------------------------- */

/* display-mode: standalone är sant bara när sidan startats från hemskärmens
   ikon – aldrig i en vanlig webbläsarflik. Reglerna nedan gäller alltså bara
   "app-läget", och webbvyn ser precis ut som förut.

   Utan adressfält och flikrad ritas sidan ända ut i skärmens kanter, och på
   telefoner med hål/skåra i skärmen hamnar headern under statusraden och
   footern under hemindikatorn. env(safe-area-inset-*) är webbläsarens mått på
   hur mycket som är skymt åt varje håll; på skärmar utan sådana hinder är de
   0 och reglerna kostar ingenting. */
@media (display-mode: standalone) {
  /* + 0.9rem (2026-09-25): iOS 26 lägger en suddig glasyta över
     statusfältet som tonar ut en bit NEDANFÖR den skymda zonen. Utan
     extra luft hamnade loggans och namnknappens överkant i den tonen och
     blev suddiga. Går inte att stänga av, så innehållet flyttas undan. */
  header {
    padding-top: calc(clamp(0.55rem, 1.8vw, 0.8rem) + env(safe-area-inset-top) + 0.9rem);
  }

  /* Namnknappen sitter absolut i headerns hörn och följer inte med
     paddingen – flyttas ner lika mycket som loggan. */
  .user-badge {
    top: calc(0.85rem + env(safe-area-inset-top) + 0.9rem);
  }

  footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  /* Sidoinsatsen slår till i liggande läge, där skåran ligger på kortsidan. */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Splashen täcker hela skärmen inklusive de skymda zonerna – därför ingen
     safe-area-padding här, bara samma botten hela vägen ut. */
}

/* Gästraden överst i Live och Sparade lappar (renderGuestNotice,
   2026-09-30): diskret – liten text på en mjuk yta, "Logga in" som länk
   och ett × för att dölja den för gott. */
.guest-notice {
  position: relative;
  margin: 0 0 1rem;
  padding: 0.55rem 2rem 0.55rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
}
.guest-notice-login {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--blue-600);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.guest-notice-close {
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  padding: 0.1rem 0.4rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}
.guest-notice-close:hover {
  color: var(--ink);
}

/* Ligger HÄR och inte i 04-coupon-reduction.css: mobilregeln för .match-stats
   längre upp i den här filen laddas senare och hade annars vunnit. */
/* De allra smalaste telefonerna (320 px): radnamn som "Öppningsodds (SvS)"
   och celler som "27 % ▲15" ryms inte i 40/20/20/20 med vanlig text. Lite
   mindre text och luft, och en bredare namnkolumn. */
@media (max-width: 340px) {
  .match-stats th,
  .match-stats td {
    padding: 0.25rem 0.15rem;
    font-size: 0.7rem;
  }

  .match-stats th {
    width: 43%;
  }

  .match-stats td {
    width: 19%;
  }
}