/* Hallmark · macrostructure: Workbench · tone: technical · anchor hue: magenta 331
 * signature: watt rails — output as length on a shared 300W ruler
 */

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

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

html {
  font-size: 16px;
  background: var(--color-paper);
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  background-color: var(--color-paper);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 11px,
      var(--color-tick) 11px 12px
    ),
    repeating-linear-gradient(
      0deg,
      var(--color-paper) 0 3.25rem,
      var(--color-paper-2) 3.25rem 3.3125rem
    );
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

h2 {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xl);
  background: var(--color-rail);
  color: var(--color-rail-ink);
}

p {
  margin: 0 0 var(--space-sm);
}

button,
input {
  font: inherit;
}

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

a:hover {
  text-decoration-thickness: 3px;
}

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

.skip {
  position: absolute;
  left: var(--space-sm);
  top: -4.5rem;
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-btn);
  color: var(--color-btn-ink);
}

.skip:focus {
  top: var(--space-sm);
}

.pr {
  margin: 0;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-pr);
  color: var(--color-pr-ink);
  font-size: var(--text-sm);
}

.mast,
.cutter,
.deck,
.notes,
.foot,
.census-sec {
  padding: var(--space-xl) clamp(var(--space-md), 4vw, var(--space-2xl));
}

.mast {
  background-image:
    linear-gradient(90deg, var(--color-watt) 0 8px, transparent 8px),
    repeating-linear-gradient(
      90deg,
      transparent 0 23px,
      var(--color-tick) 23px 24px
    );
}

.mast__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.mast__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mast__task {
  margin: 0 0 var(--space-sm);
}

.mast__lede,
.mast__task,
.sec-lead,
.notes p,
.census-caption,
.foot p {
  max-width: var(--measure);
}

.plate {
  display: inline-block;
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-rail);
  color: var(--color-rail-ink);
}

.census-caption.plate,
.sec-lead.plate,
.mast__lede.plate,
.mast__task.plate {
  display: block;
}

.count {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm) var(--space-lg);
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  background: var(--color-rail);
  color: var(--color-rail-ink);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 11px,
    var(--color-tick) 11px 12px
  );
}

.count__pair {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.count__n {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.count__label {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.count__arrow {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1;
  color: var(--color-watt);
}

.census-sec {
  background: var(--color-paper-2);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 11px,
      var(--color-tick) 11px 12px
    );
}

.watt-census {
  display: grid;
  gap: var(--tick-gap);
  margin-top: var(--space-md);
}

.census-fold {
  margin-top: var(--space-md);
}

/* Author display on .watt-census / .census-caption.plate otherwise wins the
   cascade over the UA rule that hides closed <details> children, so the 30
   rails still lay out and push the caption past .census-sec. */
.census-fold:not([open]) > *:not(summary) {
  display: none;
}

.census-fold__sum {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  border: 3px solid var(--color-ink);
  background: var(--color-rail);
  color: var(--color-rail-ink);
  font-weight: 700;
  cursor: pointer;
}

.census-fold[open] .census-fold__sum {
  margin-bottom: var(--space-sm);
}

.census-fold[open] .census-fold__sum::after {
  content: "（開）";
  font-weight: 400;
  margin-left: var(--space-xs);
}

.census-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.census-row--cut .watt-fill {
  background-image: linear-gradient(
    90deg,
    var(--color-tick),
    var(--color-cut)
  );
}

.census-row__n {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 0 var(--space-2xs);
  background: var(--color-rail);
  color: var(--color-rail-ink);
}

.watt-rail {
  position: relative;
  height: var(--rail-h);
  min-width: 0;
  background: var(--color-cut);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 11px,
    var(--color-tick) 11px 12px
  );
}

.watt-rail--census {
  height: 1.25rem;
}

.watt-fill {
  display: block;
  width: var(--watt-pct, 10%);
  height: 100%;
  background-color: var(--color-watt);
  background-image: linear-gradient(
    90deg,
    var(--color-watt),
    var(--color-port)
  );
}

.watt-fill--mini {
  display: inline-block;
  width: 2.5rem;
  height: 0.65rem;
  margin-right: var(--space-2xs);
  vertical-align: middle;
}

.cutter,
.deck,
.notes {
  background: transparent;
}

.search {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md);
  background: var(--color-rail);
  color: var(--color-rail-ink);
}

.search__label,
.facet__lab {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 700;
}

.search__input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  border: 3px solid var(--color-ink);
  background: var(--color-rail);
  color: var(--color-rail-ink);
}

.search__input::placeholder {
  color: var(--color-ink-soft);
  opacity: 1;
}

.facets {
  display: grid;
  gap: var(--space-lg);
}

.facet,
.sort {
  padding: var(--space-md);
  background: var(--color-rail);
  color: var(--color-rail-ink);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    var(--color-tick) 23px 24px
  );
}

.facet__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip-btn,
.act,
.chip-off,
.buy {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  border: 3px solid var(--color-ink);
  background: var(--color-btn-quiet);
  color: var(--color-rail-ink);
  text-decoration: none;
  cursor: pointer;
}

.chip-btn[aria-pressed="true"],
.act:not(.act--quiet),
.buy {
  background: var(--color-btn);
  color: var(--color-btn-ink);
}

.chip-btn[aria-pressed="true"] {
  border-width: 5px;
  font-weight: 700;
}

.chip-btn[aria-pressed="true"]::before {
  content: "✓";
  font-weight: 800;
}

.chip-btn:hover,
.act:hover,
.chip-off:hover,
.buy:hover {
  transform: translateY(1px);
}

.chip-btn:active,
.act:active,
.chip-off:active,
.buy:active {
  transform: translateY(2px);
}

.chip-btn__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.chip-off {
  background: var(--color-port);
  color: var(--color-port-ink);
  border-color: var(--color-ink);
}

.act--quiet {
  background: var(--color-btn-quiet);
  color: var(--color-rail-ink);
}

#reset-btn {
  margin-top: var(--space-sm);
}

.deck__head {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.rails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 17.5rem));
  justify-content: start;
  gap: var(--space-md);
}

.card {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-rail);
  color: var(--color-rail-ink);
  border-left: 8px solid var(--color-watt);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 11px,
    var(--color-tick) 11px 12px
  );
}

.card__who {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
}

.card__brand {
  font-weight: 700;
}

.card__model {
  font-family: var(--font-mono);
}

.card__watt {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.port-map {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.port-map__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
}

.port {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
}

.port--c {
  background: var(--color-port);
  color: var(--color-port-ink);
  clip-path: circle(50%);
}

.port--a {
  background: var(--color-watt);
  color: var(--color-watt-hi);
}

.port-map__none {
  font-size: var(--text-sm);
}

.card__meta {
  margin: 0;
  font-size: var(--text-sm);
}

.card__foot {
  min-width: 0;
}

.mass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
}

.mass__bar {
  height: 0.75rem;
  width: var(--mass-pct, 10%);
  background-image: linear-gradient(
    90deg,
    var(--color-ink),
    var(--color-watt)
  );
}

.mass__n {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.buy {
  justify-content: space-between;
  width: 100%;
}

.buy__pr {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

.empty {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-rail);
  color: var(--color-rail-ink);
}

.notes {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 11px,
    var(--color-tick) 11px 12px
  );
}

.notes p {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-rail);
  color: var(--color-rail-ink);
}

.foot {
  background: var(--color-pr);
  color: var(--color-pr-ink);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    var(--color-tick) 23px 24px
  );
}

@media (max-width: 500px) {
  .rails {
    grid-template-columns: 1fr;
  }

  .chip-btn,
  .act {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip-btn,
  .act,
  .chip-off,
  .buy {
    transform: none;
  }
}