/*
 * 202ch shared token and article presentation, version 3.9.15.
 * Only .darts-* elements receive presentation rules. Theme hooks declare
 * namespaced custom properties; they never recolor the host page itself.
 * A nearer data-theme="light" or data-theme="dark" overrides its ancestor.
 */

:root,
[data-theme="light"] {
  --darts-color-scheme: light;
  --darts-s-background: #e8f1ec;
  --darts-s-foreground: #315d4e;
  --darts-s-border: #bdcec4;
  --darts-d-background: #e8eff4;
  --darts-d-foreground: #34576d;
  --darts-d-border: #bdcdd7;
  --darts-t-background: #f4e6e9;
  --darts-t-foreground: #804956;
  --darts-t-border: #d8bfc8;
  --darts-b-background: #f1ecdc;
  --darts-b-foreground: #6d5b32;
  --darts-b-border: #d3c9ac;
  --darts-article-background: #ffffff;
  --darts-article-foreground: #33434d;
  --darts-article-muted: #566670;
  --darts-article-border: #d6dfe3;
  --darts-article-inset: #f4f7f8;
  --darts-link: #365f7a;
  --darts-link-hover: #254b65;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --darts-color-scheme: dark;
    --darts-s-background: #253e34;
    --darts-s-foreground: #cce0d5;
    --darts-s-border: #617a6e;
    --darts-d-background: #293e4c;
    --darts-d-foreground: #cedfeb;
    --darts-d-border: #647d8d;
    --darts-t-background: #472e38;
    --darts-t-foreground: #efd0db;
    --darts-t-border: #916e7d;
    --darts-b-background: #403c2c;
    --darts-b-foreground: #e4d8b8;
    --darts-b-border: #827b5f;
    --darts-article-background: #171e24;
    --darts-article-foreground: #e1e7eb;
    --darts-article-muted: #aebbc5;
    --darts-article-border: #3d4a54;
    --darts-article-inset: #202a32;
    --darts-link: #afcde3;
    --darts-link-hover: #d1e4f2;
  }
}

[data-theme="dark"] {
  --darts-color-scheme: dark;
  --darts-s-background: #253e34;
  --darts-s-foreground: #cce0d5;
  --darts-s-border: #617a6e;
  --darts-d-background: #293e4c;
  --darts-d-foreground: #cedfeb;
  --darts-d-border: #647d8d;
  --darts-t-background: #472e38;
  --darts-t-foreground: #efd0db;
  --darts-t-border: #916e7d;
  --darts-b-background: #403c2c;
  --darts-b-foreground: #e4d8b8;
  --darts-b-border: #827b5f;
  --darts-article-background: #171e24;
  --darts-article-foreground: #e1e7eb;
  --darts-article-muted: #aebbc5;
  --darts-article-border: #3d4a54;
  --darts-article-inset: #202a32;
  --darts-link: #afcde3;
  --darts-link-hover: #d1e4f2;
}

/* Explicit light must also win when data-theme is on a dark-preference :root. */
:root[data-theme="light"] {
  --darts-color-scheme: light;
  --darts-s-background: #e8f1ec;
  --darts-s-foreground: #315d4e;
  --darts-s-border: #bdcec4;
  --darts-d-background: #e8eff4;
  --darts-d-foreground: #34576d;
  --darts-d-border: #bdcdd7;
  --darts-t-background: #f4e6e9;
  --darts-t-foreground: #804956;
  --darts-t-border: #d8bfc8;
  --darts-b-background: #f1ecdc;
  --darts-b-foreground: #6d5b32;
  --darts-b-border: #d3c9ac;
  --darts-article-background: #ffffff;
  --darts-article-foreground: #33434d;
  --darts-article-muted: #566670;
  --darts-article-border: #d6dfe3;
  --darts-article-inset: #f4f7f8;
  --darts-link: #365f7a;
  --darts-link-hover: #254b65;
}

.darts-term,
.darts-arrangement-note.darts-arrangement-note .darts-term {
  display: inline-block;
  white-space: nowrap;
  color: inherit;
  font-size: inherit;
  line-height: 1.7;
  vertical-align: baseline;
}

.darts-chip,
.darts-arrangement-note.darts-arrangement-note .darts-chip {
  display: inline-block;
  padding: 0.1em 0.42em;
  border: 1px solid var(--darts-chip-border, currentColor);
  border-radius: 0.38em;
  background: var(--darts-chip-background, #e8eff4);
  color: var(--darts-chip-foreground, #34576d);
  font-family: inherit;
  font-size: 0.94em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.4;
  vertical-align: baseline;
}

.darts-chip-s {
  --darts-chip-background: var(--darts-s-background);
  --darts-chip-foreground: var(--darts-s-foreground);
  --darts-chip-border: var(--darts-s-border);
}

.darts-chip-d {
  --darts-chip-background: var(--darts-d-background);
  --darts-chip-foreground: var(--darts-d-foreground);
  --darts-chip-border: var(--darts-d-border);
}

.darts-chip-t {
  --darts-chip-background: var(--darts-t-background);
  --darts-chip-foreground: var(--darts-t-foreground);
  --darts-chip-border: var(--darts-t-border);
}

.darts-chip-b {
  --darts-chip-background: var(--darts-b-background);
  --darts-chip-foreground: var(--darts-b-foreground);
  --darts-chip-border: var(--darts-b-border);
}

/* Prose uses bold color without adding a box or changing the sentence rhythm. */
.darts-emphasis,
.darts-arrangement-note.darts-arrangement-note .darts-emphasis {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--darts-emphasis-foreground, currentColor);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: inherit;
  vertical-align: baseline;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.darts-emphasis-s {
  --darts-emphasis-foreground: var(--darts-s-foreground);
}

.darts-emphasis-d {
  --darts-emphasis-foreground: var(--darts-d-foreground);
}

.darts-emphasis-t {
  --darts-emphasis-foreground: var(--darts-t-foreground);
}

.darts-emphasis-b {
  --darts-emphasis-foreground: var(--darts-b-foreground);
}

/* Legacy v1 markup keeps its explicit score sibling; CSS adds no score content. */
.darts-term > .darts-points {
  color: inherit;
  font-size: inherit;
  white-space: nowrap;
}

/* Old exported articles: one pastel outer pill, including the existing score.
 * Only this exact v1 sibling structure can override its old inline styles.
 * CSS preserves the old score text; re-exporting changes it to ASCII T18(54).
 */
.darts-term:has(> .darts-chip + .darts-points) {
  padding: 0.1em 0.42em;
  border: 1px solid var(--darts-chip-border, currentColor);
  border-radius: 0.38em;
  background: var(--darts-chip-background, #e8eff4);
  color: var(--darts-chip-foreground, #34576d);
  font-size: 0.94em;
  font-weight: 650;
  line-height: 1.4 !important;
}

.darts-term:has(> .darts-chip-s + .darts-points) {
  --darts-chip-background: var(--darts-s-background);
  --darts-chip-foreground: var(--darts-s-foreground);
  --darts-chip-border: var(--darts-s-border);
}

.darts-term:has(> .darts-chip-d + .darts-points) {
  --darts-chip-background: var(--darts-d-background);
  --darts-chip-foreground: var(--darts-d-foreground);
  --darts-chip-border: var(--darts-d-border);
}

.darts-term:has(> .darts-chip-t + .darts-points) {
  --darts-chip-background: var(--darts-t-background);
  --darts-chip-foreground: var(--darts-t-foreground);
  --darts-chip-border: var(--darts-t-border);
}

.darts-term:has(> .darts-chip-b + .darts-points) {
  --darts-chip-background: var(--darts-b-background);
  --darts-chip-foreground: var(--darts-b-foreground);
  --darts-chip-border: var(--darts-b-border);
}

.darts-term:has(> .darts-chip + .darts-points) > .darts-chip {
  display: inline !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  vertical-align: baseline !important;
}

.darts-arrangement-note.darts-arrangement-note {
  box-sizing: border-box;
  padding: 1em;
  padding: clamp(1em, 3vw, 1.6em);
  border: 1px solid var(--darts-article-border);
  border-radius: 0.7em;
  background: var(--darts-article-background);
  color: var(--darts-article-foreground);
  color-scheme: var(--darts-color-scheme);
  font-family: inherit;
  font-size: 16px;
  font-size: max(16px, 1em);
  line-height: 1.85;
  overflow-wrap: anywhere;
  container-name: darts-note-article;
  container-type: inline-size;
}

/* Repeating the scope deliberately wins over older shared CSS and theme rules.
 * All sizes below follow the article, including themes with a 10px root size.
 */
.darts-arrangement-note.darts-arrangement-note :where(p, ul, ol, li, blockquote, figure) {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.darts-arrangement-note.darts-arrangement-note :where(strong, b) {
  color: inherit;
  font-size: inherit;
  font-weight: 700;
}

.darts-arrangement-note.darts-arrangement-note h1 {
  font-size: 1.6em;
}

.darts-arrangement-note.darts-arrangement-note h2 {
  font-size: 1.4em;
}

.darts-arrangement-note.darts-arrangement-note h3 {
  font-size: 1.2em;
}

.darts-arrangement-note.darts-arrangement-note h4 {
  font-size: 1.05em;
}

.darts-arrangement-note.darts-arrangement-note :where(p, ul, ol, blockquote, figure, table) {
  margin-block: 0 1.2em;
}

.darts-arrangement-note.darts-arrangement-note :where(h1, h2, h3, h4) {
  margin-block: 1.6em 0.65em;
  color: var(--darts-article-foreground);
  font-family: inherit;
  line-height: 1.5;
}

.darts-arrangement-note.darts-arrangement-note > :first-child {
  margin-top: 0;
}

.darts-arrangement-note.darts-arrangement-note > :last-child {
  margin-bottom: 0;
}

.darts-arrangement-note.darts-arrangement-note a {
  color: var(--darts-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.darts-arrangement-note.darts-arrangement-note a:hover {
  color: var(--darts-link-hover);
}

.darts-arrangement-note.darts-arrangement-note a:focus-visible {
  outline: 2px solid var(--darts-link);
  outline-offset: 3px;
  border-radius: 0.15em;
}

.darts-arrangement-note.darts-arrangement-note figure {
  margin-inline: 0;
}

.darts-arrangement-note.darts-arrangement-note .wp-block-image img,
.darts-arrangement-note.darts-arrangement-note figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

.darts-arrangement-note.darts-arrangement-note figcaption {
  margin-top: 0.65em;
  color: var(--darts-article-muted);
  font-size: 0.95em;
  line-height: 1.75;
}

.darts-arrangement-note.darts-arrangement-note table {
  width: 100%;
  border-collapse: collapse;
  color: var(--darts-article-foreground);
  font: inherit;
  font-size: 0.94em;
}

.darts-arrangement-note.darts-arrangement-note :where(th, td) {
  padding: 0.55em 0.7em;
  border: 1px solid var(--darts-article-border);
  text-align: start;
  vertical-align: top;
}

.darts-arrangement-note.darts-arrangement-note th {
  background: var(--darts-article-inset);
  font-weight: 650;
}

.darts-arrangement-note.darts-arrangement-note .darts-zone-legend {
  padding: 0.85em 1em;
  border: 1px solid var(--darts-article-border);
  border-radius: 0.45em;
  background: var(--darts-article-inset);
  color: var(--darts-article-foreground);
  font-size: 0.94em;
}

/* v3.9: the board image stays transparent; its meaning remains readable HTML. */
.darts-arrangement-note.darts-arrangement-note .darts-note-figure {
  padding: 0.75em;
  padding: clamp(0.75em, 2.5vw, 1.2em);
  border: 1px solid var(--darts-article-border);
  border-radius: 0.6em;
  background: var(--darts-article-background);
  color: var(--darts-article-foreground);
}

.darts-arrangement-note.darts-arrangement-note .darts-figure-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 1em;
  margin-bottom: 0.85em;
}

.darts-arrangement-note.darts-arrangement-note .darts-figure-title {
  margin: 0;
  color: var(--darts-article-foreground);
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.6;
}

.darts-arrangement-note.darts-arrangement-note .darts-figure-context {
  margin: 0;
  color: var(--darts-article-muted);
  font-size: 0.95em;
}

.darts-arrangement-note.darts-arrangement-note .darts-note-figure > img {
  width: 100%;
  max-width: 42em;
  height: auto;
  margin-inline: auto;
  background: transparent;
}

.darts-arrangement-note.darts-arrangement-note .darts-note-figure > figcaption {
  color: var(--darts-article-foreground);
  font-size: 0.95em;
  line-height: 1.8;
}

.darts-arrangement-note.darts-arrangement-note .darts-figure-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.2em;
  margin: 0 0 0.8em;
  padding: 0;
  list-style: none;
  color: var(--darts-article-muted);
  font-size: 1em;
}

.darts-arrangement-note.darts-arrangement-note .darts-figure-legend > li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  padding: 0;
}

.darts-arrangement-note.darts-arrangement-note .darts-zone-key {
  display: inline-block;
  flex: 0 0 1.5em;
  width: 1.5em;
  height: 0;
  border-top: 3px solid #347ab0;
}

.darts-arrangement-note.darts-arrangement-note .darts-zone-key-yellow {
  border-top-width: 6px;
  border-top-color: #f4c400;
  box-shadow: 0 0 0 1px #907b30;
}

.darts-arrangement-note.darts-arrangement-note .darts-figure-description > :last-child,
.darts-arrangement-note.darts-arrangement-note figcaption > :last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .darts-arrangement-note.darts-arrangement-note {
    padding: 1em;
  }

  .darts-arrangement-note.darts-arrangement-note :where(th, td) {
    padding: 0.45em;
  }
}

/* A printed page keeps dark ink even when the screen or an ancestor is dark. */
@media print {
  .darts-arrangement-note.darts-arrangement-note,
  .darts-term,
  .darts-chip,
  .darts-emphasis {
    --darts-color-scheme: light;
    --darts-s-background: #e8f1ec;
    --darts-s-foreground: #315d4e;
    --darts-s-border: #bdcec4;
    --darts-d-background: #e8eff4;
    --darts-d-foreground: #34576d;
    --darts-d-border: #bdcdd7;
    --darts-t-background: #f4e6e9;
    --darts-t-foreground: #804956;
    --darts-t-border: #d8bfc8;
    --darts-b-background: #f1ecdc;
    --darts-b-foreground: #6d5b32;
    --darts-b-border: #d3c9ac;
    --darts-article-background: #ffffff;
    --darts-article-foreground: #33434d;
    --darts-article-muted: #566670;
    --darts-article-border: #d6dfe3;
    --darts-article-inset: #f4f7f8;
    --darts-link: #365f7a;
    --darts-link-hover: #254b65;
  }
}

/* Keep each short rule/score label together while the sentence wraps. */
.darts-arrangement-note.darts-arrangement-note .darts-note-condition-unit {
  display: inline-block;
  color: inherit;
  font-size: inherit;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* The short route lead remains legible on narrow screens. */
.darts-arrangement-note.darts-arrangement-note .darts-note-conditions {
  font-size: 1em;
  line-height: 1.9;
  padding: 0.75em;
  border-radius: 0.4em;
  background: var(--darts-article-inset);
}

.darts-arrangement-note.darts-arrangement-note .darts-note-master-reason {
  padding: 1em;
  border-inline-start: 0.25em solid var(--darts-d-border);
  background: var(--darts-article-inset);
}

/* Use the actual article width, so a sidebar cannot squeeze the explanation.
 * Older browsers keep the readable, vertical figure layout above.
 */
@container darts-note-article (min-width: 680px) {
  .darts-arrangement-note.darts-arrangement-note .darts-note-figure {
    display: grid;
    grid-template-columns: minmax(0, min(42%, 420px)) minmax(0, 1fr);
    align-items: start;
    gap: 0.85em 1.25em;
  }

  .darts-arrangement-note.darts-arrangement-note .darts-figure-heading {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .darts-arrangement-note.darts-arrangement-note .darts-note-figure > img {
    grid-column: 1;
    width: 100%;
    max-width: 420px;
    min-width: 0;
    margin: 0;
  }

  .darts-arrangement-note.darts-arrangement-note .darts-note-figure > figcaption {
    grid-column: 2;
    min-width: 0;
    margin-top: 0;
  }
}