/* Fonts (copied from ../report) */

@font-face {
  font-family: 'Fira Sans';
  font-weight: 300;
  src: url(FiraSans-Light.ttf);
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 300;
  src: url(FiraSans-LightItalic.ttf);
}
@font-face {
  font-family: 'Fira Sans';
  font-weight: 400;
  src: url(FiraSans-Regular.ttf);
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  src: url(FiraSans-Italic.ttf);
}
@font-face {
  font-family: 'Fira Sans';
  font-weight: 700;
  src: url(FiraSans-Bold.ttf);
}


/* Variables */

:root {
  --ink: #2d2d3a;
  --muted: #6b6b78;

  --intro-bg:      #fff4cc;
  --intro-ink:     #c8941e;

  --stories-bg:    #ece9fb;
  --stories-ink:   #6259c4;

  --facts-bg:      #fde8d4;
  --facts-ink:     #e08a3c;

  --questions-bg:  #fde6ec;
  --questions-ink: #d65a82;

  --watchouts-bg:  #dde8fb;
  --watchouts-ink: #4a72c4;
}


/* Page rules */

@page {
  size: A4 landscape;
  margin: 1cm 1.2cm;
}


/* Base */

html {
  color: var(--ink);
  font-family: 'Fira Sans';
  font-size: 10pt;
  font-weight: 300;
  line-height: 1.45;
}

body {
  margin: 0;
}


/* Round (one per page) */

.round {
  break-after: page;
  height: 19cm;             /* A4 landscape inner height (21cm - 2 * 1cm margin) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  &:last-of-type {
    break-after: auto;
  }
}

.round-header {
  text-align: center;
  margin: 0 0 0.5cm;

  h1 {
    font-size: 19pt;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
  }

  .subtitle {
    color: var(--muted);
    font-size: 11pt;
    margin: 0.1cm 0 0;
  }
}


/* 2-column layout — left: Intro + Stories; right: Facts + Questions + Watch-outs */

.grid {
  display: flex;
  gap: 0.4cm;
  flex: 1;
  min-height: 0;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 0.4cm;
  min-height: 0;
}

.col-left  { flex: 1.15; }
.col-right { flex: 1; }

.card-intro     { flex: 1; }   /* ~1/3 of left column   */
.card-stories   { flex: 2; }   /* ~2/3 of left column   */
.card-facts     { flex: 1; }   /* 1/3 of right column   */
.card-questions { flex: 1; }
.card-watchouts { flex: 1; }


/* Card shell — pastel body + white tab header */

.card {
  border-radius: 10pt;
  padding: 0.25cm 0.5cm 0.45cm;
  overflow: hidden;
  break-inside: avoid;
  min-height: 0;

  .card-tab {
    background: white;
    border-radius: 7pt;
    margin: 0.05cm -0.15cm 0.3cm;
    padding: 0.15cm 0.4cm;
    text-align: center;

    h2 {
      margin: 0;
      font-size: 12pt;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
  }

  ul {
    margin: 0;
    padding-left: 0.5cm;
    list-style: disc;

    li {
      margin: 0.1cm 0;
      padding-left: 0.05cm;
    }
  }

  strong {
    font-weight: 700;
    color: var(--ink);
  }
}

.card-intro {
  background: var(--intro-bg);

  .card-tab h2 { color: var(--intro-ink); }
  li::marker { color: var(--intro-ink); }
}

.card-stories {
  background: var(--stories-bg);

  .card-tab h2 { color: var(--stories-ink); }
  li::marker { color: var(--stories-ink); }
}

.card-facts {
  background: var(--facts-bg);

  .card-tab h2 { color: var(--facts-ink); }
  li::marker { color: var(--facts-ink); }
}

.card-questions {
  background: var(--questions-bg);

  .card-tab h2 { color: var(--questions-ink); }
  li::marker { color: var(--questions-ink); }
}

.card-watchouts {
  background: var(--watchouts-bg);

  .card-tab h2 { color: var(--watchouts-ink); }
  li::marker { color: var(--watchouts-ink); }
}
