/* ============================================================
   Informationsblad i A4 – att sätta upp i sovsalen.
   Allt är satt i millimeter så att utskriften blir förutsägbar.
   CSP tillåter inga inline-stilar, så allt bor här.
   ============================================================ */

:root{
  --navy:#0d2340;
  --blue:#1a4e8f;
  --ink:#10131a;
  --gold:#f5c518;
  --paper:#ffffff;
  --mist:#d9dde6;
  --slate:#59627a;
  --green:#2f7d4a;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}
body{background:#e9ebf0;font-family:var(--font-body);color:var(--ink);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}

/* -------------------- Verktygsrad (bara skärm) -------------------- */
.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:210mm;margin:18px auto 14px;padding:0 6mm}
.toolbar-back{font-size:.9rem;font-weight:600;color:var(--navy);text-decoration:none}
.toolbar-back:hover{text-decoration:underline}
.toolbar-text{flex:1;min-width:230px;margin:0;font-size:.82rem;color:var(--slate);line-height:1.5}
.toolbar-btn{border:0;border-radius:9px;background:var(--navy);color:var(--gold);
  font-family:var(--font-body);font-size:.9rem;font-weight:700;padding:11px 22px;cursor:pointer}
.toolbar-btn:hover{background:var(--blue);color:#fff}

/* -------------------- Själva bladet -------------------- */
.sheet{width:210mm;min-height:297mm;margin:0 auto 24px;padding:9mm 11mm;
  background:var(--paper);display:flex;flex-direction:column;gap:3.1mm;
  box-shadow:0 6px 26px rgba(13,35,64,.17)}

/* -------------------- Huvud -------------------- */
.head{display:flex;align-items:center;gap:4mm;
  background:var(--navy);color:#fff;border-radius:3mm;padding:4mm 5mm}
.head-mark{flex:0 0 auto;color:var(--gold);display:flex}
.head-mark svg{width:11mm;height:11mm}
.head-text{flex:1;min-width:0}
.head-club{margin:0;font-family:var(--font-mono);font-size:3.4mm;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.head-club b{font-weight:700}
.head-title{margin:.8mm 0 0;font-family:var(--font-display);font-weight:900;
  font-size:8.4mm;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.head-meta{margin:0;text-align:right;font-family:var(--font-mono);font-size:3.1mm;
  line-height:1.55;color:#cfd8e6;white-space:nowrap}

/* -------------------- Block -------------------- */
.block-title{margin:0 0 1.8mm;font-family:var(--font-mono);font-size:3.4mm;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  border-bottom:.6mm solid var(--gold);padding-bottom:1.1mm}

/* -------------------- Matcher -------------------- */
.matches{width:100%;border-collapse:collapse;table-layout:fixed}
.matches td{padding:1.7mm 1mm;border-bottom:.3mm solid var(--mist);vertical-align:baseline}
.matches tr:last-child td{border-bottom:0}
.m-day{width:19mm;font-family:var(--font-mono);font-size:3.6mm;font-weight:700;
  text-transform:uppercase;color:var(--slate)}
.m-time{width:22mm;font-family:var(--font-mono);font-size:6.2mm;font-weight:700;
  color:var(--navy);font-variant-numeric:tabular-nums}
.m-foe{font-size:4.1mm;font-weight:600;line-height:1.2}
.m-foe span{display:block;font-family:var(--font-mono);font-size:2.7mm;font-weight:500;
  color:var(--slate);text-transform:uppercase;letter-spacing:.08em}
.m-hall{width:34mm;text-align:right;font-size:3.1mm;color:var(--slate);line-height:1.3}
.m-empty{font-size:4mm;color:var(--slate)}

.playoff{margin:2.2mm 0 0;padding:2.3mm 3.4mm;border-radius:2mm;background:#fff8dd;
  border-left:1.2mm solid var(--gold);font-size:3.2mm;line-height:1.4}

/* -------------------- Två spalter -------------------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:6mm;align-items:start}

/* -------------------- Mat -------------------- */
.meals{width:100%;border-collapse:collapse;table-layout:fixed}
.meals td{padding:1.5mm 0;border-bottom:.3mm solid var(--mist);vertical-align:baseline}
.meals tr:last-child td{border-bottom:0}
.meal-when{width:28mm;font-family:var(--font-mono);font-size:2.9mm;font-weight:600;
  color:var(--navy);line-height:1.3}
.meal-when span{display:block;font-weight:500;color:var(--slate)}
.meal-what{font-size:3.4mm;line-height:1.3}
.meal-what b{display:block;font-weight:600}

/* -------------------- Platser -------------------- */
.places{list-style:none;margin:0;padding:0}
.places li{padding:1.9mm 0;border-bottom:.3mm solid var(--mist)}
.places li:last-child{border-bottom:0}
.place-tag{display:inline-block;font-family:var(--font-mono);font-size:2.6mm;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding:.7mm 1.8mm;border-radius:1.4mm;margin-bottom:1.1mm}
.place-tag--base{background:var(--green)}
.place-tag--hall{background:var(--navy)}
.places b{display:block;font-size:4mm;font-weight:700;line-height:1.2}
.place-addr{display:block;font-family:var(--font-mono);font-size:2.9mm;color:var(--slate);
  margin-top:.7mm}

.note{margin:2mm 0 0;font-size:3mm;line-height:1.45;color:var(--slate)}

/* -------------------- Tänk på -------------------- */
.reminders{list-style:none;margin:0;padding:0;
  columns:2;column-gap:7mm}
.reminders li{break-inside:avoid;position:relative;padding:0 0 1.1mm 4.6mm;
  font-size:3.2mm;line-height:1.35}
.reminders li::before{content:"";position:absolute;left:1mm;top:1.3mm;
  width:1.8mm;height:1.8mm;border-radius:50%;background:var(--gold)}

/* -------------------- Ledare -------------------- */
.block--leaders .block-title{margin-bottom:2mm}
.leaders{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:3mm}
.leaders li{background:#f3f5f9;border-radius:2.2mm;padding:2.1mm 2.6mm;text-align:center}
.leaders b{display:block;font-size:3.2mm;font-weight:600;line-height:1.25}
.leaders span{display:block;margin-top:.8mm;font-family:var(--font-mono);font-size:3.5mm;
  font-weight:700;color:var(--navy);white-space:nowrap}

/* -------------------- Fot -------------------- */
.foot{margin-top:auto;display:flex;align-items:center;gap:5mm;
  background:var(--navy);color:#fff;border-radius:3mm;padding:3.4mm 5mm}
.foot-qr{flex:0 0 auto;width:23mm;height:23mm;background:#fff;border-radius:1.5mm;padding:1.5mm}
.foot-text{min-width:0}
.foot-lead{margin:0;font-family:var(--font-mono);font-size:3.2mm;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.foot-url{margin:1mm 0 0;font-family:var(--font-display);font-weight:700;
  font-size:6.8mm;line-height:1;letter-spacing:-.01em;word-break:break-all}
.foot-fine{margin:1.6mm 0 0;font-size:2.8mm;line-height:1.4;color:#b9c4d6}

/* -------------------- Utskrift -------------------- */
@page{size:A4 portrait;margin:0}

@media print{
  body{background:#fff}
  .toolbar{display:none}
  /* overflow:hidden hindrar att en tom extra sida smiter ut på avrundning */
  .sheet{width:auto;min-height:auto;height:297mm;margin:0;box-shadow:none;overflow:hidden;
    page-break-after:avoid;break-after:avoid}
  .block,.cols,.foot,.head{break-inside:avoid}
}

/* -------------------- Liten skärm -------------------- */
@media screen and (max-width:230mm){
  .sheet{width:100%;min-height:0;padding:7mm}
  .cols{grid-template-columns:1fr;gap:5mm}
  .reminders{columns:1}
  .leaders{grid-template-columns:repeat(2,1fr)}
  .foot{flex-direction:column;text-align:center}
}