/*
  Design system taken from Groselhas Assassinas (groselhas-astro).

  The site carries no design document -- it runs the stock Astro starter with
  Bear Blog's CSS -- so the system here is derived from what is actually the
  team's: the logo and background art, and the typographic choices the starter
  does make.

  Brand palette, sampled from public/logo.png and public/bg_groselhas.png:
    purple  #3c0078 / #240054   ground and chrome
    red     #cc1824 / #d81824   the skull, and here the primary action
    gold    #e4b400 / #b48400   highlight
    ink     #000000            outlines

  Links take the purple and buttons the red, so brand red never has to compete
  with the red that means a failing mana source.

  Typography is Atkinson Hyperlegible, the face the site loads, drawn by the
  Braille Institute for legibility -- a good fit for a page that is mostly
  numbers. Line heights follow Bear Blog: 1.7 for prose, 1.2 for headings.
*/

@font-face {
  font-family: "Atkinson";
  src: url("/static/fonts/atkinson-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("/static/fonts/atkinson-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand */
  --brand-purple: #3c0078;
  --brand-purple-deep: #240054;
  --brand-red: #cc1824;
  --brand-red-bright: #d81824;
  --brand-lilac: #7b52c8;
  --brand-lilac-light: #a98cf0;
  --brand-gold: #e4b400;
  --brand-gold-deep: #b48400;

  /* light theme */
  --bg: #f7f5fa;
  --panel: #ffffff;
  --ink: #14101f;
  --muted: #5d5570;
  --line: #e4dfec;
  --accent: var(--brand-purple);
  --primary: var(--brand-purple);
  --primary-ink: #ffffff;
  --rule: var(--brand-lilac);
  --focus: var(--brand-gold);
  /* The brand art sits behind everything; the veil keeps the page legible over it. */
  --veil: rgba(247, 245, 250, .90);

  --good: #1f7a4d;
  --close: var(--brand-gold-deep);
  --poor: #a33232;
  --good-bg: #e9f4ee;
  --close-bg: #fbf3dc;
  --poor-bg: #fbeaea;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(36, 0, 84, .06), 0 8px 24px rgba(36, 0, 84, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #150a24;
    --panel: #1f1033;
    --ink: #ece8f4;
    --muted: #a79cbd;
    --line: #33234b;
    --accent: #b79bf0;
    --primary: var(--brand-lilac-light);
    --primary-ink: #1a0f2e;
    --rule: var(--brand-lilac);
    --focus: var(--brand-gold);
    --veil: rgba(21, 10, 36, .72);

    --good: #6ecb98;
    --close: var(--brand-gold);
    --poor: #ef8b8b;
    --good-bg: #14301f;
    --close-bg: #33280f;
    --poor-bg: #35191c;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    linear-gradient(var(--veil), var(--veil)),
    url("/static/brand/background.jpg") center / cover no-repeat,
    var(--bg);
  background-attachment: fixed, fixed, fixed;
  color: var(--ink);
  font-family: "Atkinson", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* header */
.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  align-items: center;
  padding: .7rem 1.5rem;
  background: var(--panel);
  border-bottom: 3px solid var(--rule);
}

.wordmark { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.wordmark img { height: 34px; width: auto; }
.wordmark span { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
nav a {
  color: var(--muted);
  text-decoration: none;
  padding: .2rem 0;
  border-bottom: 3px solid transparent;
}
nav a:hover { color: var(--accent); border-bottom-color: var(--brand-gold); }
nav .icon { color: currentColor; margin-right: .25rem; }

main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

main a, footer a { color: var(--accent); text-decoration: none; }
main a:hover, footer a:hover { text-decoration: underline; }
td a { font-weight: 700; }

/* panels and headings */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: 1.7rem; margin: 0 0 .4rem; }
h2 { font-size: 1.25rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 1.4rem 0 .5rem; color: var(--muted); }

.lede { color: var(--muted); margin: 0 0 1rem; }
.headline { margin: 0 0 .4rem; }
.band { color: var(--muted); }

.verdict { margin: 0 0 1rem; font-weight: 700; }
.verdict.ok { color: var(--good); }
.verdict.warn { color: var(--close); }

.error {
  background: var(--poor-bg);
  border-left: 4px solid var(--poor);
  color: var(--poor);
  padding: .7rem .9rem;
  border-radius: 4px;
}

/* forms */
textarea, input {
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .5rem .6rem;
  width: 100%;
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; line-height: 1.5; }

button {
  font: inherit;
  font-weight: 700;
  margin-top: .85rem;
  padding: .55rem 1.1rem;
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.secondary {
  background: none;
  color: var(--muted);
  border: 1px solid var(--line);
}
button.secondary:hover { color: var(--accent); border-color: var(--accent); }

.fields, .calc-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .9rem;
}
.calc-form button { grid-column: 1 / -1; justify-self: start; }
label { display: block; font-size: .85rem; color: var(--muted); }
label small { display: block; margin-top: .3rem; font-size: .75rem; }
label.checkbox { display: flex; align-items: center; gap: .45rem; }
label.checkbox input { width: auto; }

.stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: .5rem 0 1rem; }
.stats dt { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.stats dd { margin: .1rem 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }

/* tables */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .42rem .5rem; border-bottom: 1px solid var(--line); }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.grid { display: block; overflow-x: auto; white-space: nowrap; }

tr.rating-good td, tr.rating-good th { background: var(--good-bg); }
tr.rating-close td, tr.rating-close th { background: var(--close-bg); }
tr.rating-poor td, tr.rating-poor th { background: var(--poor-bg); }
tr.warning-row td { color: var(--close); font-size: .85rem; background: none; }

/* chart */
.curve-chart { width: 100%; height: auto; max-width: 34rem; }
.bar { fill: var(--brand-purple); }
.bar-value { fill: var(--ink); font-size: 12px; }
.bar-label, .chart-empty { fill: var(--muted); font-size: 12px; }
.axis { stroke: var(--line); stroke-width: 1; }

@media (prefers-color-scheme: dark) {
  .bar { fill: #7b52c8; }
}

.share code { font-size: .82rem; color: var(--muted); word-break: break-all; }
.decklist { overflow-x: auto; font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* pending cards */
.pending { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.pending h2 { font-size: 1.05rem; }
.pending fieldset { border: 0; padding: 0; margin: 0 0 .9rem; }
.pending legend { font-size: .8rem; color: var(--muted); padding: 0 0 .35rem; }
.choice { display: flex; align-items: baseline; gap: .5rem; padding: .25rem 0; color: var(--ink); }
.choice input { width: auto; }
.choice small { color: var(--muted); }

/* lands */
.lands th[scope="row"] { font-weight: 400; }
.lands th[scope="row"] small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.45; }
/* The colour columns are narrow and centred, header and checkbox alike, so a
   symbol always sits over the box it labels. */
.lands th:not(:first-child), .lands td { width: 3rem; text-align: center; }
.lands input[type="checkbox"] { width: auto; }
tr.needs-confirmation th, tr.needs-confirmation td { background: var(--close-bg); }
tr.confirmed th, tr.confirmed td { background: var(--good-bg); }
.other-lands { margin-top: 1rem; }
.other-lands summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.actions { display: flex; gap: .6rem; align-items: center; }

/* collapsible sections */
.section > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  margin: -.2rem 0 0;
  padding: .2rem 0;
  border-radius: 4px;
}
.section > summary::-webkit-details-marker { display: none; }
.section > summary > .summary-text { flex: 1; min-width: 0; }
.section > summary h1, .section > summary h2 { margin: 0; }
.section-hint {
  margin: .1rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.section[open] .section-hint { display: none; }
.section > summary::after {
  content: "";
  flex: none;
  width: .55rem;
  height: .55rem;
  margin-right: .35rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.section[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.section > summary:hover::after { border-color: var(--accent); }
.section > summary:hover h1, .section > summary:hover h2 { color: var(--accent); }
.section-body { padding-top: .7rem; }

.info-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin: 0;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
}
.info-button .icon { width: 1.15rem; height: 1.15rem; color: currentColor; margin: 0; }
.info-button:hover { color: var(--accent); background: var(--bg); filter: none; }

dialog.help {
  width: min(44rem, calc(100vw - 2rem));
  max-height: 85vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}
dialog.help::backdrop { background: rgba(21, 10, 36, .6); }
dialog.help article { padding: 1.3rem 1.5rem 1.5rem; }
dialog.help h2 { margin-bottom: .8rem; }
dialog.help h3 { margin: 1.2rem 0 .3rem; color: var(--ink); font-size: .95rem; }
dialog.help p, dialog.help li { font-size: .92rem; }
dialog.help p { margin: 0 0 .7rem; }
dialog.help ul { margin: 0 0 .7rem; padding-left: 1.1rem; }
dialog.help li { margin-bottom: .3rem; }
dialog.help code {
  font-size: .85em;
  background: var(--bg);
  padding: .1rem .3rem;
  border-radius: 3px;
}
dialog.help .formula {
  display: block;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  padding: .6rem .8rem;
  margin: 0 0 .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
dialog.help form { text-align: right; }
.section:not([open]) + .panel { margin-top: 0; }

/* icons and mana symbols */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.1em; height: 1.1em; vertical-align: -0.16em; color: var(--accent); flex: none; }
h1 .icon, h2 .icon { margin-right: .4rem; }

.mana { width: 1.05em; height: 1.05em; vertical-align: -0.14em; margin-right: .12rem; }
.mana:last-child { margin-right: 0; }
.mana-or { color: var(--muted); font-size: .8em; margin: 0 .1rem; }
.pips { white-space: nowrap; }
.lands thead .mana { width: 1.2em; height: 1.2em; margin: 0; }

/* banner */
.banner {
  margin: 0 0 1.25rem;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--panel);
}
.banner img {
  display: block;
  width: 100%;
  height: clamp(120px, 22vw, 220px);
  object-fit: cover;
  object-position: center 32%;
}
.banner figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem .9rem .5rem;
  color: #fff;
  font-size: .82rem;
  background: linear-gradient(to top, rgba(36, 0, 84, .85), transparent);
}

.timestamp { margin: -.2rem 0 .9rem; color: var(--muted); font-size: .82rem; }
.print-button { margin: 0 0 1rem; }
.print-button .icon { color: currentColor; }

/* footer */
footer {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  color: var(--muted);
  font-size: .82rem;
}
footer { text-align: center; }
footer p { margin: 0 0 .45rem; }
.versions { font-variant-numeric: tabular-nums; font-size: .78rem; }
.versions .separator { margin: 0 .4rem; opacity: .6; }
.made-with { font-size: .78rem; }
.made-with .heart, .made-with .orange { font-style: normal; }

@media (max-width: 720px) {
  body { font-size: 15px; }
  main { padding: 1rem .9rem 2rem; }
  .panel { padding: 1rem; }
  .stats { gap: 1.1rem; }
}

.print-only { display: none; }

/* Saving as PDF goes through the browser's own print dialog, so the print
   stylesheet is what the PDF looks like. Controls that cannot be used on paper
   are dropped, and the palette is forced light so it does not print a dark page. */
@media print {
  :root {
    --bg: #ffffff; --panel: #ffffff; --ink: #111111; --muted: #4a4a4a;
    --line: #cccccc; --accent: #3c0078;
    --good-bg: #eef7f1; --close-bg: #fbf5e6; --poor-bg: #fbeeee;
    --shadow: none;
  }

  body { background: #fff !important; color: #111; font-size: 11pt; }

  .site-header nav,
  .print-button,
  .info-button,
  dialog.help,
  .overrides,
  form[action$="/lands"] { display: none !important; }

  .site-header { border-bottom: 2px solid #7b52c8; padding: 0 0 .5rem; }
  .section > summary::after { display: none; }
  .section > summary { cursor: auto; }

  /* Checkboxes are controls, not information, so the printed page states what
     each land was settled on instead. */
  .print-only { display: block !important; }
  .land-summary { list-style: none; padding: 0; margin: .3rem 0 0; columns: 2; }
  .land-summary li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .16rem 0; break-inside: avoid;
  }
  .land-summary .land-colors { white-space: nowrap; }

  main { max-width: none; padding: 0; }

  .panel {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .7rem .8rem;
    margin-bottom: .7rem;
    box-shadow: none;
    break-inside: avoid;
  }

  .banner img { height: 120px; }
  .decklist { white-space: pre-wrap; }
  a { color: inherit; text-decoration: none; }
  .share code { word-break: break-all; }

  tr.rating-good td, tr.rating-good th,
  tr.rating-close td, tr.rating-close th,
  tr.rating-poor td, tr.rating-poor th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bar { fill: #3c0078; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  @page { margin: 14mm; }
}

/* banner art picker */
.banner-picker {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  border-bottom: 1px dotted rgba(255, 255, 255, .55);
}
.banner-picker:hover { filter: none; border-bottom-style: solid; }

.banner-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .6rem;
  margin: 0 0 1rem;
}
.banner-choice {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  font-weight: 400;
}
.banner-choice img { display: block; width: 100%; height: 4.2rem; object-fit: cover; }
.banner-choice span {
  display: block;
  padding: .3rem .45rem;
  font-size: .75rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner-choice:hover { border-color: var(--accent); filter: none; }
.banner-choice.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.dialog-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
}
.dialog-actions form { margin: 0; }
.dialog-actions button { margin-top: 0; }