/* SportsBracket Calendar
   ===========================================================================

   TWO MODES, one stylesheet.

   `inherit` (the default) — every colour derives from `currentColor`, so the
   list takes on whatever the host theme already decided. A designed site gets a
   calendar that looks like it belongs, with nothing to configure. This is how
   every site behaved before 0.6.5, and it stays the default so that an upgrade
   never restyles a live club.

   `standalone` — the plugin brings its own palette and its own card. For a
   plain WordPress site with no opinions of its own, where inheriting from the
   theme means inheriting nothing and the list reads as unstyled text.

   THE CLASS NAMES ARE A PUBLIC CONTRACT. `sbcal-item`, `sbcal-badge--soft`,
   `sbcal-own-group` and the rest are what a styled site targets to restyle the
   list, and what a port to another platform reuses verbatim. Add names, never
   rename them.

   Every rule below paints through a token. A site that wants a third look
   overrides tokens on `.sbcal` and touches nothing in this file.
   =========================================================================== */

.sbcal {
  /* --- surface and text ------------------------------------------------- */
  --sbcal-ink: currentColor;
  --sbcal-muted: color-mix(in oklab, currentColor 62%, transparent);
  --sbcal-rule: color-mix(in oklab, currentColor 14%, transparent);

  /* --- the seven badge states -------------------------------------------
     Enumerated from badge_for() in both renderers. A palette covering six of
     seven looks half-designed on whichever row hits the seventh. */
  --sbcal-open-bg: #c25e00;  --sbcal-open-ink: #fff;    --sbcal-open-edge: transparent;
  --sbcal-live-bg: #157f4a;  --sbcal-live-ink: #fff;    --sbcal-live-edge: transparent;
  --sbcal-pick-bg: #2f5fd0;  --sbcal-pick-ink: #fff;    --sbcal-pick-edge: transparent;
  --sbcal-yes-bg:  #e6f4ec;  --sbcal-yes-ink:  #0f5c36; --sbcal-yes-edge:  #157f4a;
  --sbcal-wait-bg: #fdf1e4;  --sbcal-wait-ink: #8a4300; --sbcal-wait-edge: #c25e00;
  --sbcal-no-bg:   rgba(0,0,0,.05); --sbcal-no-ink:   #555; --sbcal-no-edge:   rgba(0,0,0,.15);
  --sbcal-soft-bg: rgba(0,0,0,.05); --sbcal-soft-ink: #555; --sbcal-soft-edge: rgba(0,0,0,.15);
  --sbcal-next-ink: currentColor; --sbcal-next-edge: color-mix(in oklab, currentColor 35%, transparent);

  /* --- geometry ---------------------------------------------------------- */
  --sbcal-radius: 8px;
  --sbcal-row-pad: 0.85rem;
  --sbcal-date-col: 8.5rem;
  --sbcal-daybox-col: 92px;
  /* Fylld datumruta, inte konturerad. Referensen ar IK Sodras rad, som
     Roger godkant: rutan ar en yta, inte en ram. */
  --sbcal-fill: color-mix(in oklab, currentColor 7%, transparent);
  --sbcal-extlink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E");
}

/* Standalone brings a palette instead of borrowing one, and sits on its own
   card so the list reads as a component rather than as loose text. */
.sbcal--standalone {
  --sbcal-surface: #ffffff;
  --sbcal-ink: #18181b;
  --sbcal-muted: #6b6b76;
  --sbcal-rule: #e4e4e9;
  --sbcal-fill: #f4f4f6;

  background: var(--sbcal-surface);
  color: var(--sbcal-ink);
}

/* The standalone palette is the plugin's own, so it owns its dark variant too.
   `inherit` mode deliberately has none: there the host theme already decided,
   and second-guessing it is how a plugin ends up with white text on white. */
@media (prefers-color-scheme: dark) {
  .sbcal--standalone {
    --sbcal-surface: #1b1b20;
    --sbcal-ink: #f2f2f4;
    --sbcal-muted: #9a9aa4;
    --sbcal-rule: #33333b;
    --sbcal-no-bg:   rgba(255,255,255,.07); --sbcal-no-ink:   #b9b9c2; --sbcal-no-edge:   rgba(255,255,255,.16);
    --sbcal-soft-bg: rgba(255,255,255,.07); --sbcal-soft-ink: #b9b9c2; --sbcal-soft-edge: rgba(255,255,255,.16);
    --sbcal-yes-bg:  #0e2a1c; --sbcal-yes-ink:  #7ee0aa; --sbcal-yes-edge:  #1d7a4d;
    --sbcal-wait-bg: #2c1d0c; --sbcal-wait-ink: #f0b968; --sbcal-wait-edge: #a35400;
  }
}

/* Listan ar ett kort, raderna delas av linjer inuti det. Samma form som
   IK Sodras godkanda rad: en avgransad yta, inte losa rader pa sidan. */
.sbcal-list,
.sbcal-own-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sbcal-rule);
  border-radius: calc(var(--sbcal-radius) + 2px);
  overflow: hidden;
}

/*
 * Kalenderraden. Placeringen är uttrycklig av samma skäl som i egna tävlingar:
 * `.sbcal-place`/`.sbcal-deadline` tvingas till kolumn 2, och med automatisk
 * placering hamnade badgen och knapparna på egna rader längst till vänster,
 * under datumet. Raden blev fyra våningar hög och statusen såg ut som en
 * uppmaning liggande under tävlingen i stället för bredvid den.
 */
.sbcal-item {
  display: grid;
  grid-template-columns: var(--sbcal-daybox-col) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 2px;
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--sbcal-rule);
}

.sbcal-item:first-child { border-top: 0; }

.sbcal-item .sbcal-daybox   { grid-column: 1; grid-row: 1 / span 2; }
.sbcal-item .sbcal-name     { grid-column: 2; grid-row: 1; }
.sbcal-item .sbcal-place    { grid-column: 2; grid-row: 2; }
.sbcal-item .sbcal-badge    { grid-column: 3; grid-row: 1; justify-self: end; }
.sbcal-item .sbcal-actions  { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }

.sbcal-date {
  font-variant-numeric: tabular-nums;
  color: var(--sbcal-muted);
  white-space: nowrap;
}

.sbcal-name {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sbcal-place,
.sbcal-deadline {
  grid-column: 2;
  color: var(--sbcal-muted);
  font-size: 0.92em;
}

.sbcal-more {
  margin: 1rem 0 0;
  font-size: 0.92em;
}

.sbcal-empty {
  padding: 1.25rem 0;
}

.sbcal-empty-hint {
  color: var(--sbcal-muted);
  font-size: 0.92em;
}

@media (max-width: 32rem) {
  .sbcal-item {
    grid-template-columns: var(--sbcal-daybox-col) minmax(0, 1fr);
  }
  .sbcal-item .sbcal-badge   { grid-column: 2; grid-row: 4; justify-self: start; }
  .sbcal-item .sbcal-actions { grid-column: 2; grid-row: 5; justify-self: start; }
}

/* ── The ticker ─────────────────────────────────────────────────────────── */

.sbcal-ticker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
  padding: 0.45rem 0.75rem;
  background: var(--sbcal-ticker-bg, #241f18);
  color: var(--sbcal-ticker-ink, #f6f1e6);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sbcal-ticker-track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  animation: sbcal-scroll 42s linear infinite;
}

.sbcal-ticker.is-paused .sbcal-ticker-track {
  animation-play-state: paused;
}

.sbcal-ticker-run {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-right: 0.75rem;
}

.sbcal-ticker-sep {
  opacity: 0.45;
}

.sbcal-ticker-pause {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-size: 0.62rem;
  padding: 2px 9px;
  cursor: pointer;
}

.sbcal-ticker-pause:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@keyframes sbcal-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* A visitor who has asked for less motion gets a static strip, not a slower
   one. The duplicate copy is hidden so the text does not read twice. */
@media (prefers-reduced-motion: reduce) {
  .sbcal-ticker-track {
    animation: none;
    overflow: hidden;
  }
  .sbcal-ticker-run + .sbcal-ticker-run {
    display: none;
  }
  .sbcal-ticker-pause {
    display: none;
  }
}

.sbcal-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Medlemsläget. Ritas bara när sajtägaren slagit på det.

   Färgerna ärvs från klubbens tema via currentColor och neutrala
   toner, med undantag för de fyra tillståndsfärgerna. De är
   semantiska och ska betyda samma sak på varje klubbsajt: grönt =
   pågår eller ja, blått = du är berörd, grått = avslutat eller nej.
   --------------------------------------------------------------- */

.sbcal-connect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
}
.sbcal-connect-text { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.4; }
.sbcal-connect-text strong { font-weight: 700; }
.sbcal-connect-text span { font-size: 0.88em; opacity: 0.72; }

.sbcal-form { display: inline; margin: 0; }

.sbcal-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.88em;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.sbcal-btn:hover { background: rgba(0, 0, 0, 0.05); }
.sbcal-btn--sm { padding: 0.3rem 0.7rem; font-size: 0.82em; }
.sbcal-btn--quiet { opacity: 0.7; font-weight: 600; }

/* Alla lägen lika breda, så raden inte hoppar i sidled när de växlar.
   ⚠ Sedan 0.6.5 har ALLA lägen en ram, genomskinlig där färgen är fylld.
   Tidigare hade open/live/pick ingen, och var därför 2 px lägre än de andra
   i samma lista. Att de nu är lika höga är just det kommentaren ovan säger
   att de ska vara. */
.sbcal-badge {
  display: inline-block;
  min-width: 7.2rem;
  text-align: center;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76em;
  font-weight: 700;
  white-space: nowrap;
}
.sbcal-badge--open { background: var(--sbcal-open-bg); color: var(--sbcal-open-ink); border: 1px solid var(--sbcal-open-edge); }
.sbcal-badge--live { background: var(--sbcal-live-bg); color: var(--sbcal-live-ink); border: 1px solid var(--sbcal-live-edge); }
.sbcal-badge--pick { background: var(--sbcal-pick-bg); color: var(--sbcal-pick-ink); border: 1px solid var(--sbcal-pick-edge); }
.sbcal-badge--yes  { background: var(--sbcal-yes-bg);  color: var(--sbcal-yes-ink);  border: 1px solid var(--sbcal-yes-edge); }
.sbcal-badge--no   { background: var(--sbcal-no-bg);   color: var(--sbcal-no-ink);   border: 1px solid var(--sbcal-no-edge); }
.sbcal-badge--wait { background: var(--sbcal-wait-bg); color: var(--sbcal-wait-ink); border: 1px solid var(--sbcal-wait-edge); }
.sbcal-badge--soft { background: var(--sbcal-soft-bg); color: var(--sbcal-soft-ink); border: 1px solid var(--sbcal-soft-edge); }
/* Egen kommande tävling: inte samma sak som "anmälan öppen", och ska inte
   skrika som en uppmaning. Konturerad i stället för fylld. */
.sbcal-badge--next { background: transparent; color: var(--sbcal-next-ink); border: 1px solid var(--sbcal-next-edge); }

.sbcal-actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }

/* --- Klubbens egna tävlingar ------------------------------------------------
   Samma radgeometri som kalendern, men grupperad per serie. En serie är en
   säsong, så grupphuvudet bär namnet och raderna är dess upplagor i
   kronologisk ordning. Genomförda upplagor tonas ned utan att döljas: att en
   klubb ARRANGERAT fyra tävlingar i år är själva poängen med listan. */

/* Kortkoden landar direkt under sidans egen rubrik. Utan luft här klistrar
   det första serienamnet i rubriken och läser som en underrubrik till den. */
.sbcal-own {
  margin-top: 1.5rem;
}

.sbcal-own-group {
  margin: 0 0 2.25rem;
}

/* Serienamnet är en rubrik som råkar länka, inte en länk som råkar stå först.
   Storleken och avståndet gör den till en rubrik även när temat färgar och
   stryker under alla länkar på sidan, vilket är precis vad de flesta gör. */
.sbcal-own-name {
  margin: 0 0 0.5rem;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/*
 * Datum, titel och läge på EN rad, orten under titeln.
 *
 * Placeringen är uttrycklig av ett skäl: den delade regeln
 * `.sbcal-place { grid-column: 2 }` tvingar orten till andra kolumnen, så med
 * automatisk placering hamnade badgen ensam på en tredje rad längst till
 * vänster, under datumet. Varje upplaga blev tre rader hög och listan såg
 * sönderslagen ut.
 */
.sbcal-own-item {
  display: grid;
  grid-template-columns: var(--sbcal-daybox-col) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 2px;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--sbcal-rule);
  /* ⚠ Radavståndet måste sättas här, annars ärvs temats.
     Ett tema sätter `line-height` för brödtext, ofta 1.6 och uppåt, och det är
     rätt för stycken man läser men fel för en lista man skannar. Varje rad har
     fyra korta textbitar staplade på varandra, och 1.65 gav dem var för sig en
     halv extra radhöjd luft. Raden blev nästan tre gånger datumrutans höjd och
     listan såg gles ut fastän ingenting var glest.
     Sätts i em så en klubb som förstorar texten får proportionerna med sig. */
  line-height: 1.35;
}

.sbcal-own-item:first-child { border-top: 0; }

.sbcal-own-item .sbcal-daybox { grid-column: 1; grid-row: 1 / span 2; align-self: start; }

/* Datumrutan, samma idé som i klubbtemats kalender: siffran bär datumet och
   månaden står under, så ögat hittar rätt rad utan att läsa den. */
.sbcal-daybox {
  display: block;
  text-align: center;
  background: var(--sbcal-fill);
  border-radius: var(--sbcal-radius);
  padding: 0.45rem 0.2rem;
  line-height: 1.15;
}

.sbcal-day {
  display: block;
  font-size: 1.4em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sbcal-mon {
  display: block;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sbcal-muted);
}
.sbcal-own-item .sbcal-name  { grid-column: 2; grid-row: 1; }
.sbcal-own-item .sbcal-place { grid-column: 2; grid-row: 2; }
.sbcal-own-item .sbcal-badge { grid-column: 3; grid-row: 1; justify-self: end; }

/* Anmälningsknappen står under badgen, samma cell som kalenderradens knappar.
   Status överst, handling under: ögat läser vad som gäller innan det erbjuds
   att göra något åt det. */
.sbcal-own-item .sbcal-actions {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  /* Radens row-gap är 2px, vilket räcker mellan två textrader men inte mellan
     en etikett och en kontroll. Tävlingar utan plats saknar dessutom innehåll
     i rad två, och utan det här klistrar knappen upp i badgen. */
  margin-top: 0.25rem;
}

/* `.sbcal-btn` har `font: inherit`, och den kortformen tar med sig temats
   `line-height` in i knappen. Med 1.65 blev knappen en halv radhöjd högre än
   den behövde vara, och eftersom knappen är radens högsta element växte hela
   raden med den. En kontroll ska vara så hög som sin text plus sin padding. */
.sbcal-own-item .sbcal-btn { line-height: 1.25; }

/* ⚠ Status och handling får inte se lika ut, och gjorde det.
   Badgen var ett konturerat piller och knappen en konturerad rektangel av
   nästan samma bredd, staplade på varandra. Två lika tunga former ovanför
   varandra säger inte vilken av dem som går att trycka på, och ögat måste
   läsa texten för att förstå vad som är vad.
   Badgen kliver därför tillbaka till vad den faktiskt är: en etikett. Ingen
   ram, ingen yta, bara ord i lägets egen färg. Då är knappen radens enda
   konturerade form, vilket är hela dess poäng.
   `align-self: start` lyfter etiketten upp i linje med tävlingens namn, så
   den läses tillsammans med namnet i stället för att sväva mitt i raden. */
.sbcal-own-item .sbcal-badge {
  align-self: start;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Badgen på en egen tävling är ren information och byts aldrig på plats, så
   den behöver inte kalenderns fasta bredd. Där finns den för att raden inte
   ska hoppa i sidled när ett läge växlar till ett annat. */
.sbcal-own .sbcal-badge {
  min-width: 0;
  font-weight: 600;
}

.sbcal-own-item--past {
  opacity: 0.62;
}

.sbcal-own-dash {
  color: var(--sbcal-muted);
}

@media (max-width: 32rem) {
  .sbcal-own-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sbcal-own-item .sbcal-daybox { grid-column: 1; grid-row: 1; }
  .sbcal-own-item .sbcal-badge  { grid-column: 2; grid-row: 1; justify-self: end; }
  .sbcal-own-item .sbcal-name  { grid-column: 1 / -1; grid-row: 2; }
  .sbcal-own-item .sbcal-place { grid-column: 1 / -1; grid-row: 3; }
  .sbcal-own-item .sbcal-actions { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
}

/* Länkar som lämnar sajten säger det själva.
   Pilen är en mask i currentColor, inte ett tecken: ett tecken kan falla
   tillbaka på en emoji-font och bli färgat och feljusterat, samma fälla som
   flaggorna gick i. */
.sbcal a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.28em;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: var(--sbcal-extlink) center / contain no-repeat;
  mask: var(--sbcal-extlink) center / contain no-repeat;
}

.sbcal a[target="_blank"]:hover::after { opacity: 0.9; }