/* The public diamond-system pages (/systems/, /<lang>/systems/), written by server/scripts/build-system-pages.py. */
.sys { padding-block: 28px 56px; }
.sys-wrap { max-width: 920px; }
.sys-crumbs { font: 600 .82rem/1.4 var(--display); color: var(--ink-soft); margin-bottom: 14px; }
.sys-crumbs a { color: var(--link); text-decoration: none; }
.sys-head h1 { font-size: clamp(30px, 4.4vw, 44px); margin: 4px 0 12px; }
.sys-eyebrow { font: 700 .74rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0; }
.sys-lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 68ch; margin: 0 0 16px; }
.sys-formula { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 6px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.sys-formula span { font: 700 .72rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.sys-formula code { font: 700 1.05rem/1.3 var(--display); color: var(--ink); white-space: normal; }

.sys-figure { margin: 22px 0; }
/* On a phone the drawing keeps a size its numbers can be read at, and scrolls sideways instead of shrinking. */
.sys-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
@media (max-width: 640px) { .sys-scroll .sys-diagram { width: 600px; max-width: none; } }
.sys-diagram { display: block; width: 100%; height: auto; border-radius: 14px; background: #0b1220;
  font: 600 13px var(--display); }
.sys-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0;
  font: 600 .84rem/1.2 var(--display); color: var(--ink-soft); }
.sys-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }

.sys-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  margin: 8px 0 26px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); }
.sys-cta h2 { font-size: 1.15rem; margin-bottom: 4px; }
.sys-cta p { margin: 0; color: var(--ink-soft); max-width: 52ch; }

.sys-body { display: grid; gap: 22px; }
.sys-sec h2, .sys-more h2 { font-size: 1.25rem; margin-bottom: 10px; }
.sys-sec p { margin: 0 0 10px; max-width: 72ch; }
.sys-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; max-width: 72ch; }
.role { font: 700 .78rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  margin-right: 6px; background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.role--start { box-shadow: inset 3px 0 0 #e9b44c; }
.role--aim { box-shadow: inset 3px 0 0 #9aa7b8; }
.role--arrival, .role--finish { box-shadow: inset 3px 0 0 #3fd8c6; }
.role--space { box-shadow: inset 3px 0 0 #c79bff; }
.sys-more { padding: 18px 20px; border-radius: 14px; border: 1px dashed var(--line); background: var(--surface); }
.sys-more p { margin: 0 0 14px; color: var(--ink-soft); max-width: 68ch; }

.sys-others { margin-top: 36px; }
.sys-others h2 { font-size: 1.15rem; margin-bottom: 12px; }
.sys-others ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sys-others li a { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); text-decoration: none; font: 600 .86rem/1.2 var(--display); }
.sys-others li a:hover { border-color: var(--accent); }
.sys-others p a, .sys-note a { color: var(--link); }

.sys-group { margin-top: 34px; }
.sys-group h2 { font-size: 1.4rem; }
.sys-note { color: var(--ink-soft); margin: 6px 0 14px; }
.sys-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sys-card { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); text-decoration: none; }
.sys-card:hover { border-color: var(--accent); }
.sys-card h3 { font-size: 1rem; margin-bottom: 6px; }
.sys-card code { display: block; font: 600 .84rem/1.35 var(--display); color: var(--accent); margin-bottom: 6px; white-space: normal; }
.sys-card p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* Six languages in the switch on these pages: a little tighter, so it still fits beside the theme button on a phone. */
.lang--six a, .lang--six span { padding-inline: 9px; }
@media (max-width: 420px) { .lang--six a, .lang--six span { padding-inline: 7px; } }

/* Japanese headings break between phrases, not inside a word ("1クッショ / ン"), where the browser can tell. */
:lang(ja) .sys h1, :lang(ja) .sys h2, :lang(ja) .sys-card h3 { word-break: auto-phrase; }