/* 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,
#reduce-result 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,
#reduce-result 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 {
  margin-top: 0.75rem;
}

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

.notice {
  background: #fdf6e3;
  border-left: 3px solid #c8801f;
  color: #6b5320;
  padding: 0.65rem 0.85rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 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: #fdf6e3;
  border-left: 3px solid #c8801f;
  color: #6b5320;
  padding: 0.65rem 0.85rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  justify-content: space-between;
  animation: rise-in 0.4s var(--ease-out) 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: linear-gradient(155deg, var(--blue-600), var(--navy-700));
  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;
  opacity: 0.7;
}

.own-save-dismiss:hover {
  opacity: 1;
  color: var(--red-500) !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;
}

.signature {
  margin: 0;
  font-size: 0.75rem;
  color: #a0a3a8;
}

/* --- 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;
  }

  /* 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;
  }

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

  /* 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);
}

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

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

.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(-1px);
}

.user-picker-button-active {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-sm);
}

/* Gästen (2026-08-23) står utanför The Big 5 och får därför en dämpad,
   streckad ram i stället för de namngivnas heldragna – samma knapp och samma
   funktion, men tydligt en annan sorts val. */
.user-picker-button-guest {
  color: var(--ink-faint);
  border-style: dashed;
}

.user-picker-button-guest.user-picker-button-active {
  color: var(--ink);
}

/* 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. */
.history-item-draw-sub {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.85em;
}

.history-item-shared {
  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);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  cursor: pointer;
}

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

/* 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.4s var(--ease-out) 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);
}

/* "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;
}

/* 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;
}

/* 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;
}

/* 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;
}

.drawn-matches-hint {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
}

/* --- 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) {
  header {
    padding-top: calc(clamp(0.55rem, 1.8vw, 0.8rem) + env(safe-area-inset-top));
  }

  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. */
}