/*
 * Operate release-log print stylesheet for WeasyPrint.
 *
 * Tokens and component rules are lifted from the FieldTwin frontend design
 * system in field-activity-planner/common/assets/css:
 *   - theme/light-theme.css      (palette + --ftw-* semantic tokens)
 *   - size/size-variable.css     (radii, border widths)
 *   - browser-override.css       (font stack, base size)
 *   - ftw.css                    (heading scale, .alert, link colour)
 *   - ftw/ftw-card.css           (.ftw-card)
 *   - ftw/ftw-table.css          (.ftw-table)
 *   - ftw/ftw-kbd-keys.css       (.ftw-kbd-keys)
 *
 * The app defaults to dark-theme; the light theme is used here because the
 * output is printed. Only rules that make sense on paper are kept: no hover,
 * sticky, scroll, or transition rules.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Palettes (light-theme.css) */
  --gray-accent-one     : rgb(244, 247, 250);
  --gray-accent-two     : rgb(255, 255, 255);
  --gray-accent-three   : rgb(214, 221, 229);
  --gray-accent-six     : rgb(239, 244, 248);
  --gray-accent-seven   : rgb(223, 229, 235);
  --gray-accent-nine    : rgb(157, 168, 180);
  --gray-accent-ten     : rgb(234, 239, 244);
  --gray-accent-eleven  : rgb(217, 224, 231);
  --gray-accent-twelve  : rgb(248, 250, 252);
  --gray-accent-thirteen: rgb(120, 134, 148);

  --transparent-accent-one: rgba(15, 23, 42, 0.08);
  --transparent-accent-two: rgba(15, 23, 42, 0.16);

  --text-accent-one  : rgb(31, 42, 55);
  --text-accent-three: rgb(184, 108, 0);

  --primary-color          : #52e973;
  --primary-color-dark     : #2f8e45;
  --primary-alt-color-light: #5bc0de;
  --primary-alt-color-dark : #2f6ebb;
  --warning-color-dark     : #b43f3f;
  --old-school-fap         : #459685;

  --kbd-white       : rgb(247, 247, 247);
  --kbd-border-white: rgb(214, 221, 229);

  /* Semantic tokens (light-theme.css) */
  --ftw-text-accent-one         : var(--text-accent-one);
  --ftw-text-title              : var(--primary-alt-color-dark);
  --ftw-background-accent-one   : var(--gray-accent-one);
  --ftw-background-accent-two   : var(--gray-accent-two);
  --ftw-background-accent-four  : var(--gray-accent-twelve);
  --ftw-border-color-accent-one : var(--gray-accent-three);
  --ftw-primary-color           : var(--primary-alt-color-dark);
  --ftw-success-color           : var(--primary-color-dark);
  --ftw-warning-color           : var(--text-accent-three);
  --ftw-danger-color            : var(--warning-color-dark);
  --ftw-info-color              : var(--primary-alt-color-light);

  --ftw-input-background-color  : var(--gray-accent-two);
  --ftw-input-border-color      : var(--gray-accent-three);
  --ftw-input-background-hover-color: var(--gray-accent-six);

  --ftw-button-danger-color : #a53f3f;
  --ftw-button-warning-color: #c0871b;
  --ftw-button-success-color: var(--primary-color-dark);

  --ftw-card-text            : var(--ftw-text-accent-one);
  --ftw-card-background-color: var(--gray-accent-two);
  --ftw-card-box-shadow      : rgba(15, 23, 42, 0.08);

  --ftw-modal-background-color       : var(--gray-accent-two);
  --ftw-modal-header-background-color: var(--gray-accent-ten);
  --ftw-table-row-alternate-color    : rgb(248, 249, 252);

  --ftw-list-view-text-secondary: var(--gray-accent-thirteen);

  --ftw-kbd-keys-color               : #1d1d1d;
  --ftw-kbd-keys-background          : var(--kbd-white);
  --ftw-kbd-keys-border              : var(--kbd-border-white);
  --ftw-kbd-keys-box-shadow-primary  : rgba(0, 0, 0, 0.12);
  --ftw-kbd-keys-box-shadow-secondary: white;

  /* Sizes (size-variable.css) */
  --ftw-input-border-radius: 2px;
  --ftw-input-border-width : 1px;
  --ftw-input-font-size    : 14px;

  /* Typography (browser-override.css) */
  --ftw-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ftw-font-family-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
}

/* ------------------------------------------------------------------ page */
@page {
  size: A4;
  margin: 22mm 18mm 20mm 18mm;
  background: var(--ftw-background-accent-one);

  @top-left {
    content: element(running-header);
  }
  @bottom-left {
    content: string(doc-title);
    font-family: var(--ftw-font-family-primary);
    font-size: 8.5pt;
    color: var(--ftw-list-view-text-secondary);
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-family: var(--ftw-font-family-primary);
    font-size: 8.5pt;
    color: var(--ftw-list-view-text-secondary);
  }
}

@page :first {
  @top-left { content: none; }
}

.running-header {
  position: running(running-header);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6pt;
  font-size: 8.5pt;
  color: var(--ftw-list-view-text-secondary);
  border-bottom: 1px solid var(--ftw-border-color-accent-one);
  padding-bottom: 4pt;
  width: 100%;
}
.running-header img {
  height: 11pt;
  width: auto;
}

/* ------------------------------------------------------------------ base */
html {
  font-size: 10.5pt;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--ftw-font-family-primary);
  line-height: 1.5;
  color: var(--ftw-text-accent-one);
  background-color: var(--ftw-background-accent-one);
  hyphens: auto;
}

/* Headings — ftw.css [class*="ftw-title"] + scale */
h1, h2, h3, h4, h5, h6 {
  color: var(--ftw-text-title);
  font-weight: bold;
  line-height: 1.2;
  margin: 1.4em 0 0.5em;
  page-break-after: avoid;
  break-after: avoid;
}
h1 { font-size: 2.5rem;  margin-top: 0; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; text-transform: uppercase; letter-spacing: 0.04em; }
h6 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ftw-list-view-text-secondary); }

p { margin: 0 0 0.75em; orphans: 3; widows: 3; }

/* Links — ftw.css uses --primary-color (#52e973); too light on white paper,
   so the dark primary token is used instead. */
a, a:link, a:visited {
  color: var(--ftw-primary-color);
  text-decoration: none;
}
a[href^="http"]::after {
  content: "";
}

strong { font-weight: 700; }
em { font-style: italic; }

hr {
  border: 0;
  border-top: 1px solid var(--ftw-border-color-accent-one);
  margin: 1.5em 0;
}

ul, ol { margin: 0 0 0.9em; padding-left: 1.6em; }
li { margin: 0.2em 0; }
li > ul, li > ol { margin-bottom: 0; }
li::marker { color: var(--ftw-list-view-text-secondary); }

/* ----------------------------------------------------------- title block */
.title-block {
  display: flex;
  align-items: center;
  gap: 18pt;
  padding: 1em 1.25em;
  margin: 0 0 1.5em;
  background: var(--ftw-card-background-color);
  box-shadow: 0 0.25em 0.5em 0 var(--ftw-card-box-shadow);
  border-left: 4px solid var(--old-school-fap);
}
.title-block .logo {
  height: 56pt;
  width: auto;
  flex: 0 0 auto;
}
.title-block .title-text { flex: 1 1 auto; min-width: 0; }
.title-block h1 {
  margin: 0;
  font-size: 2.2rem;
  string-set: doc-title content();
}
.title-block .subtitle {
  margin: 0.15em 0 0;
  font-size: 1.1rem;
  color: var(--ftw-list-view-text-secondary);
  font-weight: normal;
}
.title-block .meta {
  margin: 0.5em 0 0;
  font-size: 0.85rem;
  color: var(--ftw-list-view-text-secondary);
}
.title-block .meta span + span::before {
  content: "\00B7";
  margin: 0 0.5em;
}

/* ---------------------------------------------------- release sections */
/* pandoc --section-divs wraps each ## release in <section class="level2">.
   Each release becomes a .ftw-card (ftw-card.css). */
section.level2 {
  display: block;
  padding: 1em 1.25em;
  margin: 0 0 1.25em;
  color: var(--ftw-card-text);
  background-color: var(--ftw-card-background-color);
  box-shadow: 0 0.25em 0.5em 0 var(--ftw-card-box-shadow);
  page-break-inside: auto;
}
section.level2 > h2 {
  margin-top: 0;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--ftw-border-color-accent-one);
  font-size: 1.6rem;
}
section.level2 > h2 code {
  font-size: 0.8em;
  vertical-align: middle;
}

/* A `---` rule between releases is redundant once each release is a card */
section.level2 hr:last-child { display: none; }
/* Avoid trailing margins pushing an empty card fragment onto the next page */
section.level2 > :last-child,
section.level2 > section:last-child > :last-child { margin-bottom: 0; }

/* ### sub-headings inside a card follow .ftw-card label styling */
section.level3 > h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ftw-card-text);
  margin: 1.2em 0 0.4em;
}
section.level3 > h3::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.5em;
  border-radius: 1px;
  background: var(--ftw-primary-color);
  vertical-align: 0.05em;
}
section.level4 > h4 {
  font-size: 1rem;
  color: var(--ftw-text-accent-one);
}

/* Semantic tints for common release-note sections (matched on pandoc ids) */
section[id^="features"]     > h3::before,
section[id^="added"]        > h3::before,
section[id^="highlights"]   > h3::before { background: var(--ftw-success-color); }
section[id^="fix"]          > h3::before,
section[id^="bug"]          > h3::before { background: var(--ftw-info-color); }
section[id^="breaking"]     > h3::before,
section[id^="removed"]      > h3::before { background: var(--ftw-danger-color); }
section[id^="deprecat"]     > h3::before,
section[id^="known"]        > h3::before { background: var(--ftw-warning-color); }

/* -------------------------------------------------------------- tables */
/* ftw-table.css — alternating rows, 6px cell padding, no borders */
table {
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.75em 0 1em;
  font-size: 0.92em;
  page-break-inside: auto;
  background: var(--ftw-background-accent-two);
  box-shadow: 0 0 0 1px var(--ftw-border-color-accent-one);
  border-radius: var(--ftw-input-border-radius);
}
thead tr {
  background-color: var(--ftw-modal-header-background-color);
  white-space: nowrap;
}
thead th {
  border: 0;
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  color: var(--ftw-text-accent-one);
  border-bottom: 1px solid var(--ftw-border-color-accent-one);
}
tbody td {
  border: 0;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
tbody tr:nth-child(even) { background-color: var(--ftw-background-accent-one); }
tbody tr:nth-child(odd)  { background-color: var(--ftw-background-accent-two); }
tr { page-break-inside: avoid; }
th[align="center"], td[align="center"] { text-align: center; }
th[align="right"],  td[align="right"]  { text-align: right; }
table code { font-size: 0.95em; }

/* ---------------------------------------------------------------- code */
code, pre, kbd, samp {
  font-family: var(--ftw-font-family-mono);
}
code {
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: var(--ftw-input-border-radius);
  background: var(--ftw-input-background-hover-color);
  border: var(--ftw-input-border-width) solid var(--ftw-input-border-color);
  color: var(--ftw-text-accent-one);
  white-space: nowrap;
}
pre {
  margin: 0.75em 0 1em;
  padding: 0.75em 1em;
  overflow: hidden;
  border-radius: var(--ftw-input-border-radius);
  background: var(--ftw-background-accent-four);
  border: var(--ftw-input-border-width) solid var(--ftw-input-border-color);
  border-left: 3px solid var(--ftw-primary-color);
  font-size: 0.85em;
  line-height: 1.45;
  page-break-inside: avoid;
}
pre code {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* <kbd> — ftw-kbd-keys.css */
kbd {
  color: var(--ftw-kbd-keys-color);
  display: inline-block;
  border: 1px solid var(--ftw-kbd-keys-border);
  font-weight: bold;
  font-size: 0.8em;
  line-height: 1.3;
  border-radius: 4px;
  padding: 0.1em 0.5em;
  margin: 0 0.2em;
  box-shadow:
    0 1px 0 var(--ftw-kbd-keys-box-shadow-primary),
    0 0 0 2px var(--ftw-kbd-keys-box-shadow-secondary) inset;
  background-color: var(--ftw-kbd-keys-background);
}

/* ---------------------------------------------------------- blockquote */
/* Styled after ftw.css .alert: a bordered, tinted block */
blockquote {
  margin: 0.75em 0 1em;
  padding: 0.6em 1em;
  border: 1px solid var(--ftw-border-color-accent-one);
  border-left: 4px solid var(--ftw-warning-color);
  background: var(--ftw-background-accent-four);
  color: var(--ftw-text-accent-one);
  page-break-inside: avoid;
}
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child  { margin-bottom: 0; }

/* .alert-* utility classes from ftw.css, usable via pandoc fenced divs:
   ::: {.alert .alert-danger}  ...  ::: */
.alert {
  padding: 6px 10px;
  margin: 0.75em 0 1em;
  border: 1px solid var(--ftw-border-color-accent-one);
  width: 100%;
  box-sizing: border-box;
  color: var(--ftw-text-accent-one);
  background: var(--ftw-background-accent-four);
}
.alert-danger  { background: var(--ftw-button-danger-color);  border-color: var(--ftw-button-danger-color);  color: #fff7f7; }
.alert-success { background: var(--ftw-button-success-color); border-color: var(--ftw-button-success-color); color: #f8fbff; }
.alert-warning { background: var(--ftw-button-warning-color); border-color: var(--ftw-button-warning-color); color: #1f2a37; }
.alert-info    { background: var(--ftw-info-color);           border-color: var(--ftw-info-color);           color: #1f2a37; }
.alert > :first-child { margin-top: 0; }
.alert > :last-child  { margin-bottom: 0; }
.alert a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------- misc */
img { max-width: 100%; height: auto; }
figure { margin: 1em 0; text-align: center; }
figcaption { font-size: 0.85em; color: var(--ftw-list-view-text-secondary); margin-top: 0.4em; }

dl dt { text-transform: uppercase; font-weight: bold; padding-bottom: 0.25em; font-size: 0.85em; }
dl dd { margin-inline-start: 0; margin-bottom: 0.6em; }

/* Text colour helpers from class.css */
.f-text-danger  { color: var(--ftw-danger-color); }
.f-text-warning { color: var(--ftw-warning-color); }
.locked-color   { color: var(--ftw-danger-color) !important; }

/* Pandoc: hide auto-generated header-only title if the template renders it */
header#title-block-header { display: none; }

/* --------------------------------------------------------- admonitions */
/* MkDocs `!!! type "Title"` blocks (assets/filters/mkdocs.lua). Same shape
   as blockquote / .alert; left border colour follows the ftw status tokens. */
.admonition {
  margin: 0.75em 0 1em;
  padding: 0.6em 1em 0.7em;
  border: 1px solid var(--ftw-border-color-accent-one);
  border-left: 4px solid var(--ftw-primary-color);
  background: var(--ftw-background-accent-four);
  page-break-inside: avoid;
}
.admonition-title {
  font-weight: bold;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ftw-text-accent-one);
  margin: 0 0 0.4em;
}
.admonition-title p { margin: 0; }
.admonition > :last-child { margin-bottom: 0; }
.admonition ul, .admonition ol { margin-bottom: 0.4em; }

.admonition.tip, .admonition.success, .admonition.hint  { border-left-color: var(--ftw-success-color); }
.admonition.tip .admonition-title,
.admonition.success .admonition-title,
.admonition.hint .admonition-title                     { color: var(--ftw-success-color); }

.admonition.note, .admonition.info, .admonition.abstract, .admonition.example { border-left-color: var(--ftw-primary-color); }
.admonition.note .admonition-title,
.admonition.info .admonition-title,
.admonition.abstract .admonition-title,
.admonition.example .admonition-title                  { color: var(--ftw-primary-color); }

.admonition.warning, .admonition.caution, .admonition.question { border-left-color: var(--ftw-warning-color); }
.admonition.warning .admonition-title,
.admonition.caution .admonition-title,
.admonition.question .admonition-title                 { color: var(--ftw-warning-color); }

.admonition.danger, .admonition.failure, .admonition.bug, .admonition.error { border-left-color: var(--ftw-danger-color); }
.admonition.danger .admonition-title,
.admonition.failure .admonition-title,
.admonition.bug .admonition-title,
.admonition.error .admonition-title                    { color: var(--ftw-danger-color); }

/* ---------------------------------------------------------------- video */
/* `![type:video](url)`: iframe on screen, a link on paper */
.video {
  margin: 0.75em 0 1em;
  padding: 0.6em 1em;
  border: 1px solid var(--ftw-border-color-accent-one);
  border-radius: var(--ftw-input-border-radius);
  background: var(--ftw-background-accent-two);
  page-break-inside: avoid;
}
.video p { margin: 0; }
.video-icon { color: var(--ftw-primary-color); font-weight: bold; }
.video-url { color: var(--ftw-list-view-text-secondary); font-size: 0.85em; word-break: break-all; }
.video-frame { display: none; }
@media screen {
  .video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; margin-bottom: 0.6em; }
  .video-url { display: none; }
}

/* ---------------------------------------------------------------- web */
/* The same HTML is hosted on S3 and used for the PDF. Browsers ignore @page
   and running() elements, so on screen the document becomes a responsive
   page with the same cards, colours and type. Print/PDF is unaffected. */
.pdf-link { display: none; }

@media screen {
  html {
    background: var(--ftw-background-accent-one);
    font-size: 16px;
  }
  body {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    box-sizing: border-box;
    hyphens: manual;
  }
  .running-header { display: none; }

  .title-block {
    flex-wrap: wrap;
    align-items: center;
  }
  .title-block .title-text { flex: 1 1 240px; }
  .title-block h1 { font-size: 2rem; }

  /* Download button, after ftw-button.css primary variant.
     :link/:visited included so this outranks the generic a:link rule. */
  .pdf-link,
  .pdf-link:link,
  .pdf-link:visited {
    display: inline-flex;
    align-items: center;
    height: var(--ftw-button-height, 32px);
    padding: 0 14px;
    margin-left: auto;
    border: var(--ftw-button-border-width, 1px) solid var(--ftw-button-primary-color, #255ea8);
    border-radius: var(--ftw-button-border-radius, 2px);
    background: var(--ftw-button-primary-color, #255ea8);
    color: var(--ftw-button-primary-text-color, #f8fbff);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .pdf-link:hover { border-color: var(--ftw-button-primary-hover-border-color, #1f4f8e); background: var(--ftw-button-primary-hover-border-color, #1f4f8e); }

  section.level2 { padding: 1.25em 1.5em; }
  pre { overflow-x: auto; }
  pre code { white-space: pre; }
  table { display: block; overflow-x: auto; }

  /* Phone widths. Nested on purpose: WeasyPrint skips the whole screen
     block for print and so never sees (and never warns about) this query. */
  @media (max-width: 600px) {
    html { font-size: 15px; }
    body { padding: 16px 16px 32px; }
    .title-block { gap: 12pt; padding: 1em; }
    .title-block .logo { height: 40pt; }
    .title-block h1 { font-size: 1.5rem; }
    .pdf-link { margin-left: 0; width: 100%; justify-content: center; }
    section.level2 { padding: 1em; }
    h2 { font-size: 1.5rem; }
  }
}