/* Page layer for the dark site. Reads tokens only. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--space) * 9); }
body { font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; }
/* Japanese breaks only at the <wbr> phrase boundaries inserted by scripts/build.py */
body { word-break: keep-all; }
:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }

/* Dark header: components.css paints it with --ink, which is light in the dark set */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); color: var(--ink); }
.site-header .inner { min-height: calc(var(--space) * 8); padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
.site-header .brand { color: var(--ink); letter-spacing: .02em; }
.site-header .brand span { color: var(--primary); }
.site-nav a { color: var(--ink); opacity: .7; }
.site-header .btn { padding: var(--space) calc(var(--space) * 2); font-size: var(--fs-sm); }

/* Dark hero */
.hero { color: var(--ink); border-bottom: 1px solid var(--border); overflow: hidden; isolation: isolate;
  padding: calc(var(--space) * 14) calc(var(--space) * 3) calc(var(--space) * 12);
  background:
    radial-gradient(640px 400px at 100% 0, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(640px 400px at 0 100%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
    var(--surface); }
.hero .inner { position: relative; z-index: 1; }
.hero h1 { font-size: 32px; line-height: 48px; font-weight: 700; letter-spacing: .01em; color: var(--ink);
  font-feature-settings: normal; margin-bottom: calc(var(--space) * 3); }
.shift-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space) calc(var(--space) * 2); margin-bottom: calc(var(--space) * 3); }
.shift-line .from { color: var(--muted); font-size: var(--fs-md); }
.hero .subtitle { margin: 0; opacity: 1; background: var(--primary); color: var(--primary-ink); font-weight: 700;
  font-size: var(--fs-lg); line-height: calc(var(--space) * 5); padding: 0 calc(var(--space) * 2);
  border-radius: var(--radius); box-shadow: 0 0 24px var(--glow); }
.hero .lead { max-width: 30em; color: var(--muted); margin-bottom: calc(var(--space) * 4); }
.hero .actions { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2); }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space); margin-top: calc(var(--space) * 5); }
.hero-facts li { display: flex; align-items: center; gap: var(--space); height: calc(var(--space) * 4); padding: 0 calc(var(--space) * 1.5);
  font-size: var(--fs-sm); border: 1px solid var(--border); border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(8px); }
.hero-facts b { color: var(--primary); font-weight: 700; }

/* Hero illustration: an agent graph (fan-out, review, human approval) */
.hero-art { position: absolute; z-index: 0; right: max(0px, calc((100% - var(--content-max)) / 2 - 24px)); top: 50%;
  width: 560px; transform: translateY(-50%); opacity: .9; pointer-events: none; }
.g-edge path { fill: none; stroke: var(--border); stroke-width: 2; }
.g-flow path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 18; animation: flow 2.4s linear infinite; opacity: .8; }
@keyframes flow { to { stroke-dashoffset: -96; } }
.g-retry { fill: none; stroke: var(--warn); stroke-width: 2; stroke-dasharray: 4 6; opacity: .6; }
.g-node { fill: var(--card); stroke: var(--accent); stroke-width: 3; }
.g-node.core { fill: var(--accent); stroke: none; filter: drop-shadow(0 0 12px var(--accent)); }
.g-human { fill: var(--card); stroke: var(--primary); stroke-width: 3; filter: drop-shadow(0 0 12px var(--glow)); }
.g-human-mark { fill: var(--primary); }
.g-human-mark-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; }

.btn { padding: calc(var(--space) * 1.5) calc(var(--space) * 3); border-radius: var(--radius); color: var(--primary-ink); box-shadow: 0 0 16px var(--glow); }
.btn.ghost { box-shadow: none; }
/* Sections */
.container { padding-top: calc(var(--space) * 6); padding-bottom: calc(var(--space) * 6); }
.section, .card { border: 1px solid var(--border); box-shadow: none; }
.section { margin-bottom: calc(var(--space) * 3); padding: calc(var(--space) * 4); }
.section h2 { font-size: var(--fs-lg); line-height: calc(var(--space) * 4); border-bottom-color: var(--border); }
.section > p.intro { color: var(--muted); max-width: 40em; margin-top: 0; }
.grid { gap: calc(var(--space) * 2); margin-top: calc(var(--space) * 3); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* History timeline */
.history { list-style: none; margin: calc(var(--space) * 3) 0 0 !important; position: relative; }
.history::before { content: ""; position: absolute; left: 7px; top: calc(var(--space) * 2); bottom: calc(var(--space) * 2); width: 2px;
  background: linear-gradient(var(--border), var(--accent)); }
.history li { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr) 112px; gap: calc(var(--space) * 3);
  align-items: start; padding: calc(var(--space) * 2) 0 calc(var(--space) * 2) calc(var(--space) * 4); margin: 0 !important; border-bottom: 1px solid var(--border); }
.history li:last-child { border-bottom: 0; }
.history li::before { content: ""; position: absolute; left: 0; top: calc(var(--space) * 2.5); width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--accent); }
.history li.now::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 12px var(--glow); }
.history .era { margin: 0 !important; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; line-height: calc(var(--space) * 4); }
.history li.now .era { color: var(--primary); }
.history h4 { background: none !important; padding: 0 !important; margin: 0 0 var(--space) !important; font-size: var(--fs-md); line-height: calc(var(--space) * 4); color: var(--ink); border-radius: 0; }
.history li.now h4 { color: var(--primary); }
.history div p { margin: 0 !important; color: var(--muted); font-size: var(--fs-sm); line-height: calc(var(--space) * 3); }
.history .used-in { margin: 0 !important; justify-self: end; font-size: var(--fs-xs); line-height: calc(var(--space) * 3); padding: 0 var(--space); margin-top: var(--space) !important;
  border: 1px solid var(--border); border-radius: 4px; color: var(--accent); white-space: nowrap; }
.history li.now .used-in { border-color: var(--primary); color: var(--primary); }
.sources { margin-top: calc(var(--space) * 3) !important; font-size: var(--fs-xs); line-height: calc(var(--space) * 3); color: var(--muted); }
.sources a { color: var(--muted); text-decoration: underline; }
.card.now { border-color: var(--primary); }
.card .when-label { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.card.now .when-label { color: var(--primary); }
.grid-outside { margin-bottom: calc(var(--space) * 3); }

/* Course sequence: chevrons + day cards on a shared subgrid so every row lines up */
.seq, .days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(var(--space) * 2); }
.seq { margin-top: calc(var(--space) * 3); list-style: none; }
.chev { display: flex; align-items: center; height: calc(var(--space) * 5); padding: 0 calc(var(--space) * 3) 0 calc(var(--space) * 4);
  margin-right: calc(var(--space) * -2.5); background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: var(--fs-sm);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); }
.chev:first-child { padding-left: calc(var(--space) * 2); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.chev:last-child { margin-right: 0; }
.chev .theme { color: var(--ink); font-weight: 600; margin-left: var(--space); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.days { margin-top: calc(var(--space) * 2); list-style: none; row-gap: 0; }
.day { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: calc(var(--space) * 2);
  background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: var(--radius);
  padding: calc(var(--space) * 3); margin: 0; }
.day > * { margin: 0 !important; }
.day h3 { border: 0; padding: 0; color: var(--ink); font-size: var(--fs-lg); line-height: calc(var(--space) * 4); }
.day .when { font-size: var(--fs-sm); line-height: calc(var(--space) * 3); color: var(--primary); }
.day .when.tbd { color: var(--warn); }
.day .goal { align-self: start; font-size: var(--fs-sm); line-height: calc(var(--space) * 3); padding: var(--space) calc(var(--space) * 2);
  background: var(--accent-bg); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.day .goal b { color: var(--accent); margin-right: var(--space); }
.day .desc { font-size: var(--fs-sm); line-height: calc(var(--space) * 3); color: var(--muted); }
.kw { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space); list-style: none; }
.kw li { display: flex; align-items: center; height: calc(var(--space) * 3); padding: 0 var(--space); font-size: var(--fs-xs);
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); margin: 0 !important; }

/* Session format table */
td.min { white-space: nowrap; color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
th { color: var(--muted); border-bottom-color: var(--border); }
td { border-bottom-color: var(--border); }

/* Tools */
.tools { display: flex; flex-wrap: wrap; gap: var(--space); list-style: none; margin: calc(var(--space) * 2) 0 0 !important; }
.tools li { margin: 0 !important; padding: 0 calc(var(--space) * 2); line-height: calc(var(--space) * 4); border: 1px solid var(--primary); color: var(--primary); border-radius: var(--radius); font-weight: 600; font-size: var(--fs-sm); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: calc(var(--space) * 2) calc(var(--space) * 5) calc(var(--space) * 2) 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--space); top: calc(var(--space) * 1.5); color: var(--primary); font-size: var(--fs-lg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 calc(var(--space) * 2) !important; color: var(--muted); }

/* Join */
.join { text-align: center; border-color: var(--primary);
  background: radial-gradient(480px 240px at 50% 0, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%), var(--card); }
.join h2 { border: 0 !important; padding: 0 !important; }
.join p { color: var(--muted); max-width: 32em; margin: var(--space) auto calc(var(--space) * 3) !important; }

.contributors { list-style: none; padding: 0 !important; margin: calc(var(--space) * 3) 0 0 !important;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--space) * 2); }
.contributors li { margin: 0 !important; padding: calc(var(--space) * 2); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: calc(var(--space) / 2); }
.contributors .ja { font-weight: 600; font-size: var(--fs-md); }
.contributors .en { color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 961px) { .contributors { grid-template-columns: repeat(4, 1fr); } }

.callout { color: var(--warn); font-size: var(--fs-sm); }
.site-footer { color: var(--muted); border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space);
  max-width: var(--content-max); margin: 0 auto; }

@media (min-width: 961px) {
  .hero h1 { font-size: 56px; line-height: 72px; }
  .hero .inner > *:not(h1) { max-width: 600px; }
  .hero h1 span { white-space: nowrap; }
}

/* Narrow: single column, plain stacking */
@media (max-width: 960px) {
  .site-nav { display: none; }
  .days { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--space) * 2); }
  .day { grid-row: auto; grid-template-rows: none; }
  .chev .theme { display: none; }
  .chev { padding-right: calc(var(--space) * 2); padding-left: calc(var(--space) * 3); }
  .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
  .history li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 calc(var(--space) * 2); }
  .history li > div { grid-column: 1 / -1; grid-row: 2; }
  .history .used-in { margin-top: var(--space) !important; }
}
@media (max-width: 960px) {
  .hero-art { width: 420px; right: -120px; top: calc(var(--space) * 2); transform: none; opacity: .35; }
}
@media (max-width: 640px) {
  .hero { padding: calc(var(--space) * 12) calc(var(--space) * 2) calc(var(--space) * 8); }
  .hero-art { width: 360px; right: -140px; top: calc(var(--space) * 6); opacity: .3; }
  .section { padding: calc(var(--space) * 3) calc(var(--space) * 2); }
  .chev { font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }