/* 挿せる？電源タップ — stylesheet
 * signature: 実寸の机上配線図。差込口をSVG上の実寸座標に配置し、
 * アダプターを挿すたびに占有帯とその場の判定記号が書き換わる。
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(191, 232, 245, 0.05), transparent),
    radial-gradient(ellipse 60% 50% at 100% 110%, rgba(255, 107, 95, 0.04), transparent);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: var(--z-skip);
  background: var(--color-btn);
  color: var(--color-btn-ink);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
}
.skip:focus {
  left: var(--space-md);
  top: var(--space-md);
}

a { color: var(--color-link); }

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

.pr {
  margin: 0;
  background: var(--color-pr);
  color: var(--color-pr-ink);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-2xs) var(--space-md);
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  max-width: var(--stage-max);
  margin: 0 auto;
}

.hero__name {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, var(--text-display));
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.hero__name-sub {
  display: block;
  color: var(--color-cyan);
  font-size: 0.62em;
  font-weight: 500;
  margin-top: 0.2em;
}

.hero__lede {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  max-width: 30em;
}

.hero__path {
  margin: var(--space-sm) 0 0;
  color: var(--color-ink-faint);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 34em;
}

.hero__diagram {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-lg);
}
.hero__svg {
  width: 100%;
  max-width: 26rem;
  height: auto;
  display: block;
}
.hero__rail { stroke: var(--color-line); stroke-width: 1.4; }
.hero__mark {
  fill: none;
  stroke-width: 1.6;
}
.hero__mark--clear { stroke: var(--color-chalk); }
.hero__mark--blocked { stroke: var(--color-coral); opacity: 0; }
.hero__mark--marginal { stroke: var(--color-pink); }
.hero__adapter {
  fill: var(--color-cyan-fill);
  stroke: var(--color-cyan);
  stroke-width: 1;
}

/* ---------- shared: search / facets / tally ---------- */

main { max-width: var(--stage-max); margin: 0 auto; padding: 0 var(--space-md) var(--space-3xl); }

section > h2, section > h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 0 0 var(--space-md);
  color: var(--color-ink);
}

.picker { padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.picker > h2:has(+ .picker__hint) { margin-bottom: var(--space-2xs); }
.picker__hint {
  margin: 0 0 var(--space-md);
  color: var(--color-ink-faint);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  max-width: 34em;
}

.search__label { display: block; font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-2xs); }
.search__input {
  width: 100%;
  max-width: 24rem;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-ink);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-body);
  font-family: var(--font-body);
}
.search__input::placeholder { color: var(--color-ink-faint); }

.picker__controls { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.picker__controls--compact { margin-top: var(--space-md); }

.picker__facets { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xs); }
.facet-group__label { display: block; font-size: var(--text-xs); color: var(--color-ink-faint); margin-bottom: var(--space-2xs); text-transform: uppercase; letter-spacing: 0.04em; }
.facet-group__row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.opt {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  border-radius: 999px;
  padding: 0.3em 0.85em;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.opt:hover { border-color: var(--color-cyan); color: var(--color-ink); }
.opt[aria-pressed="true"] {
  background: var(--color-cyan-fill-strong);
  border-color: var(--color-cyan);
  color: var(--color-ink);
}

.tally { color: var(--color-ink-faint); font-size: var(--text-sm); font-family: var(--font-mono); margin: var(--space-xs) 0 0; }

.act {
  background: var(--color-btn);
  color: var(--color-btn-ink);
  border: none;
  border-radius: var(--radius);
  padding: 0.55em 1.1em;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
}
.act:hover { filter: brightness(1.08); }
.act--quiet {
  background: transparent;
  color: var(--color-cyan);
  border: 1px solid var(--color-line);
}
.act--quiet:hover { border-color: var(--color-cyan); }
.act:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- strip grid ---------- */

.strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-sm);
}

.strip-card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  cursor: pointer;
  color: var(--color-ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.strip-card:hover { border-color: var(--color-cyan); transform: translateY(-1px); }
.strip-card.is-selected { border-color: var(--color-cyan); background: var(--color-bg-3); }
.strip-card--unsupported { border-style: dashed; }
.strip-card--unsupported:hover,
.strip-card--unsupported.is-selected { border-color: var(--color-pink); }

.strip-card__mfr { font-size: var(--text-xs); color: var(--color-ink-faint); }
.strip-card__model { font-size: var(--text-body); font-weight: 500; }

.strip-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-2xs); }

.strip-card__dots { display: flex; gap: 3px; align-items: center; }
.strip-card__dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-ink-faint);
}

.badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.15em 0.5em;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.badge--known { border-color: var(--color-cyan); color: var(--color-cyan); }
.badge--unknown { color: var(--color-ink-faint); }
.badge--assumed { border-color: var(--color-pink); color: var(--color-pink); }
.badge--measured { border-color: var(--color-cyan); color: var(--color-cyan); }
.badge--unsupported {
  border-color: var(--color-pink);
  color: var(--color-pink);
  white-space: normal;
  line-height: 1.3;
}

/* ---------- stage section ---------- */

.stage-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}

.stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.stage-head__mfr { margin: 0; font-size: var(--text-sm); color: var(--color-ink-faint); }
.stage-head__model { margin: 0.1em 0 0; font-size: var(--text-xl); font-family: var(--font-display); font-weight: 700; }

.unsupported {
  background: var(--color-panel);
  border: 1px solid var(--color-pink);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  max-width: var(--measure);
}
.unsupported__kicker {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-pink);
}
.unsupported__body {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-ink);
  line-height: 1.7;
}
.unsupported__link-wrap { margin: var(--space-md) 0 0; }
.unsupported__link {
  color: var(--color-link);
  font-size: var(--text-sm);
}

.pitch-panel { margin-bottom: var(--space-md); }
.pitch-panel__status { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0 0 var(--space-2xs); }
.pitch-panel__measure {
  background: var(--color-pink-fill);
  border: 1px solid var(--color-pink);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}
.pitch-panel__measure label { display: block; font-size: var(--text-sm); margin-bottom: 0; }
.pitch-panel__measure label + .pitch-panel__hint { margin-top: 0.15em; margin-bottom: var(--space-2xs); }
.pitch-panel__row { display: flex; gap: var(--space-2xs); }
.pitch-panel__row input {
  width: 8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-family: var(--font-mono);
  padding: 0.4em 0.6em;
}
.pitch-panel__hint { font-size: var(--text-xs); color: var(--color-ink-soft); margin: var(--space-2xs) 0 0; }

.stage {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  position: relative;
}
.stage__tally {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  text-align: right;
  font-family: var(--font-mono);
}
.stage__tally-num { font-size: var(--text-xl); color: var(--color-cyan); font-weight: 600; }
.stage__tally-label { display: block; font-size: var(--text-xs); color: var(--color-ink-faint); }
.stage__tally.is-awaiting-pitch { max-width: 12rem; }
.stage__tally.is-awaiting-pitch .stage__tally-num { font-size: var(--text-sm); font-weight: 500; line-height: 1.35; }
.stage__approx-note {
  display: block;
  max-width: 14rem;
  margin: 0.35em 0 0 auto;
  font-size: 0.65rem;
  line-height: 1.4;
  color: var(--color-ink-faint);
  font-family: var(--font-body);
  font-weight: 400;
}
.stage__approx-note[hidden] { display: none; }

.stage__svg-wrap { padding: var(--space-2xl) var(--space-sm) var(--space-md); overflow-x: auto; }
.stage__svg { width: 100%; height: auto; display: block; min-width: 20rem; }

.rail-line { stroke: var(--color-line); stroke-width: 0.8; }

.band {
  fill: var(--color-cyan-fill);
  stroke: var(--color-cyan);
  stroke-width: 0.5;
}
.band-hatch { fill: url(#hatch); pointer-events: none; }

.outlet-hit { fill: transparent; cursor: pointer; }
.outlet-mark {
  fill: none;
  stroke: var(--color-chalk);
  stroke-width: 1.1;
  transition: stroke var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.outlet-mark.is-lowconf { stroke: var(--color-cyan); stroke-dasharray: 2 1.4; }
.outlet-mark.is-uncertain { stroke: var(--color-pink); stroke-dasharray: 1.6 1.2; }
.outlet-mark.is-blocked-likely { stroke: var(--color-coral); opacity: 0.35; }
.outlet-mark.is-blocked { stroke: var(--color-coral); opacity: 0.3; }
.outlet-mark.is-placed { stroke: var(--color-cyan); stroke-width: 1.4; }
.outlet-mark.is-faded { stroke: var(--color-ink-faint); opacity: 0.45; }

.outlet-x {
  stroke: var(--color-coral);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.outlet-x.is-shown { opacity: 0.9; }

/* Signature marks reused in the hero miniature and notes key.
   Keep stroke weight readable at those smaller viewBoxes, and hide the
   blocked circle so the coral × is the mark — same transformation as the stage. */
.hero__svg .band {
  fill: var(--color-cyan-fill);
  stroke: var(--color-cyan);
  stroke-width: 1;
}
.hero__svg .outlet-mark {
  stroke-width: 1.6;
}
.hero__svg .outlet-mark.hero__mark--clear { stroke: var(--color-chalk); }
.hero__svg .outlet-mark.hero__mark--blocked { opacity: 0; }
.hero__svg .outlet-mark.hero__mark--marginal { stroke: var(--color-pink); }
.hero__svg .outlet-x.is-shown { stroke-width: 1.8; }

.notes-key .outlet-mark { stroke-width: 1.8; }
.notes-key .outlet-mark.is-blocked { opacity: 0; }
.notes-key .outlet-x.is-shown { stroke-width: 2; }

.outlet-label {
  font-family: var(--font-mono);
  font-size: 3.6px;
  fill: var(--color-ink-faint);
}
.outlet-hit:hover ~ .outlet-mark,
.outlet-group:hover .outlet-mark { stroke: var(--color-ink); }

@keyframes outlet-hint-pulse {
  0%, 100% { stroke: var(--color-chalk); }
  45% { stroke: var(--color-cyan); }
}
.outlet-mark.is-hint {
  animation: outlet-hint-pulse var(--dur-short) var(--ease-in-out);
}

/* ---------- legend ---------- */

.legend { margin: var(--space-md) 0 var(--space-xl); }
.legend__title { font-size: var(--text-xs); color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-xs); }
.legend__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-soft); }
.legend__list li { display: flex; align-items: center; gap: 0.5em; }
.legend__mark { width: 0.85em; height: 0.85em; border-radius: 50%; border: 1.5px solid var(--color-chalk); display: inline-block; }
.legend__mark--clear { border-color: var(--color-chalk); }
.legend__mark--midconf { border-color: var(--color-cyan); border-style: dashed; }
.legend__mark--uncertain { border-color: var(--color-pink); border-style: dashed; }
.legend__mark--blocked-likely { border-color: var(--color-coral); opacity: 0.5; }
.legend__mark--blocked { border-color: var(--color-coral); background: var(--color-coral-fill); }

/* ---------- adapter picker ---------- */

.adapter-picker { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.adapter-picker__hint { color: var(--color-ink-soft); font-size: var(--text-sm); max-width: 34em; }
.adapter-picker__hint.is-nudge { color: var(--color-cyan); }

.adapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.adapter-card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.adapter-card.is-armed { border-color: var(--color-cyan); box-shadow: 0 0 0 1px var(--color-cyan) inset; }
.adapter-card__brand { font-size: var(--text-xs); color: var(--color-ink-faint); }
.adapter-card__model { font-size: var(--text-sm); font-weight: 500; }
.adapter-card__width { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--color-cyan); margin: var(--space-2xs) 0; }
.adapter-card__watts { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-soft); }
.adapter-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; }
.cite {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}
.cite:hover { color: var(--color-cyan); }
.cite__date {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-family: var(--font-mono);
}

.adapter-card__arm {
  margin-top: var(--space-2xs);
  background: transparent;
  border: 1px solid var(--color-cyan);
  color: var(--color-cyan);
  border-radius: var(--radius);
  padding: 0.4em 0.7em;
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: var(--font-body);
}
.adapter-card__arm[aria-pressed="true"] { background: var(--color-cyan-fill-strong); color: var(--color-ink); }
.adapter-card__arm:disabled { opacity: 0.35; cursor: not-allowed; }

.adapter-card__measure {
  margin-top: var(--space-2xs);
  border-top: 1px dashed var(--color-line);
  padding-top: var(--space-2xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
}
.adapter-card__measure label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); color: var(--color-ink-soft); }
.adapter-card__measure input {
  width: 4.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-family: var(--font-mono);
  padding: 0.25em 0.4em;
}
.adapter-card__precise-toggle {
  background: none;
  border: none;
  color: var(--color-ink-faint);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--text-xs);
  padding: 0;
  text-align: left;
}
.adapter-card__precise-fields { display: none; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.adapter-card__precise-fields.is-open { display: flex; flex-wrap: wrap; }
.adapter-card__precise-fields label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}
.adapter-card__precise-fields input {
  width: 4.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-family: var(--font-mono);
  padding: 0.25em 0.4em;
}
.adapter-card__precise-hint { flex: 1 0 100%; font-size: var(--text-xs); color: var(--color-ink-faint); margin: 0; }

/* ---------- detail panel ---------- */

.detail-panel {
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background: var(--color-bg-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.detail-panel:empty { display: none; }
.detail-panel__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--space-2xs); }
.detail-panel__specs { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-soft); margin: var(--space-xs) 0; }
.detail-panel__specs dt { color: var(--color-ink-faint); display: inline; }
.detail-panel__specs dd { display: inline; margin: 0 0 0 0.3em; font-family: var(--font-mono); color: var(--color-ink); }
.detail-panel__specs .cite,
.detail-panel__specs .cite__date { font-size: 0.85em; }
.detail-panel__cta {
  display: inline-block;
  margin-top: var(--space-sm);
  background: var(--color-btn);
  color: var(--color-btn-ink);
  border-radius: var(--radius);
  padding: 0.55em 1.2em;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
}
.detail-panel__cta[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---------- provenance ---------- */

.provenance { margin-top: var(--space-xl); }
.provenance__title { font-size: var(--text-xs); color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-xs); }
.provenance__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-xs) var(--space-lg); margin: 0; font-size: var(--text-xs); }
.provenance__list dt { font-family: var(--font-mono); color: var(--color-cyan); }
.provenance__list dd { margin: 0; color: var(--color-ink-faint); }

/* ---------- notes / footer ---------- */

.notes { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.notes p { color: var(--color-ink-soft); max-width: var(--measure); font-size: var(--text-sm); }

.notes-key { margin-top: var(--space-lg); }
.notes-key__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.notes-key__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
}
.notes-key__list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}
.notes-key__list svg {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.foot { text-align: center; padding: var(--space-xl) var(--space-md) var(--space-2xl); color: var(--color-ink-faint); font-size: var(--text-sm); }

/* ---------- responsive ---------- */

@media (min-width: 40rem) {
  .hero { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .hero__diagram { border-top: none; padding-top: 0; border-left: 1px solid var(--color-line); padding-left: var(--space-lg); }
  .picker__controls { flex-direction: row; align-items: flex-end; gap: var(--space-lg); flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; }
}