/* Standalone project chrome, aligned with the worktable below. */
.wrap {
  width: min(1480px, calc(100% - 64px));
  margin-inline: auto;
}
.site-header.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}
.site-name span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.site-header nav a,
.site-footer > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fine paper carries a quiet grain; the words and cords stay crisp. */
body.pi-paper {
  background-image: none;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--pi-paper-tex);
  background-size: 256px;
  opacity: 0.12;
  pointer-events: none;
}
.site-header,
.machine-wrap,
.site-footer {
  position: relative;
}

/* Heading: the title and the preset's one prompt. Everything else is a control. */
.machine-wrap {
  width: min(1480px, calc(100% - 64px));
  margin: 0 auto;
  padding: 40px 0 48px;
}
.machine-heading {
  margin-bottom: 24px;
}
.machine-heading h1 {
  font-size: 44px;
  margin-bottom: 12px;
}
.first-try {
  max-width: 72ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

/* Toolbar: presets on the left, playback settings on the right. */
.machine-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-bottom: 24px;
}
.preset-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.preset-picker > span {
  margin-right: 8px;
  color: var(--ink-muted);
}
.preset-picker .pi-btn {
  min-height: 60px;
}
.preset-picker button[aria-pressed='true'] {
  background: var(--green-soft);
  border-color: var(--green-deep);
}
.playback-settings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.playback-settings .pi-toggle {
  min-height: 60px;
  gap: 12px;
  font-size: 16px;
}
.pace {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
}
.pace-label {
  display: flex;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
#pace-name {
  font-weight: 400;
  color: var(--ink-muted);
}
#pace {
  width: 150px;
  height: 60px;
}

/* Worktable: the board holds the left column; the desk stays in view beside it;
   the dock stays pinned to the bottom edge while the board is on screen. */
.worktable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    'board desk'
    'dock desk'
    'words desk';
  gap: 24px;
  align-items: start;
}
.weaving {
  grid-area: board;
  min-width: 0;
}
.desk {
  grid-area: desk;
  position: sticky;
  top: 24px;
  min-width: 0;
  padding: 20px;
  border-radius: 30px;
  background: var(--paper-sunk);
}
.dock {
  grid-area: dock;
  position: sticky;
  bottom: 16px;
  z-index: 5;
  min-width: 0;
  padding: 20px 24px;
}
.word-box {
  grid-area: words;
}

/* Desk: transport above the sheet the poem is written on. */
.transport {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.transport .pi-btn {
  min-height: 60px;
  font-size: 16px;
  white-space: nowrap;
  padding-inline: 18px;
}
.transport #run {
  min-width: 108px;
}
.poem-sheet {
  position: relative;
  background: var(--paper-raised);
  padding: 28px 20px 20px;
  border: 1px solid var(--birch-edge);
  border-radius: 18px;
  box-shadow: var(--edge-2);
}
.poem-sheet.pi-grain::after {
  opacity: 0.12;
}
#poem-lines {
  position: relative;
  z-index: 1;
  min-height: 216px;
}
.poem-line {
  min-height: 64px;
  margin-bottom: 8px;
}
.poem-line > span {
  display: block;
  font-size: 20px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.poem-line small {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.poem-line.active small {
  color: var(--green-deep);
}
.poem-line .new-word {
  animation: word-arrive 500ms ease-out both;
  display: inline-block;
  background: var(--word-tint);
  box-shadow: 0 2px 0 var(--word-deep);
  border-radius: 6px;
}
@keyframes word-arrive {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.poem-line .line-placeholder {
  color: var(--ink-faint);
}
.rhythm {
  font-size: 14px;
  color: var(--ink-muted);
  min-height: 22px;
  margin: 14px 0 0;
}

/* Board */
.paper-scroll {
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  background: var(--paper-raised);
  box-shadow: var(--edge-2);
}
.paper-board {
  height: 520px;
  min-width: 900px;
  position: relative;
  touch-action: pan-x pan-y;
}
.paper-board::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--pi-paper-tex);
  background-size: 256px;
  opacity: 0.14;
  pointer-events: none;
}
#strings,
#cards {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#cards {
  pointer-events: none;
}
.scroll-hint {
  display: none;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.cord-edge,
.cord {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cord-fiber {
  fill: none;
  stroke: var(--ink-faint);
  stroke-linecap: round;
  opacity: 0.5;
  stroke-dasharray: 1 4;
}
/* Line beginnings are short lead-ins; a dashed fiber tells them from strings. */
.start-thread .cord-fiber {
  stroke-dasharray: 2 3;
  opacity: 0.8;
}
.thread-hit {
  stroke: transparent;
  fill: none;
  stroke-width: 24;
  cursor: pointer;
}
.thread-hit:focus-visible {
  outline: none;
}
.thread-group:has(.thread-hit:focus-visible) .cord-edge,
.thread-group.selected .cord-edge {
  stroke: var(--green-deep);
  stroke-width: calc(var(--thread-width) + 4px);
  opacity: 1;
}
.thread-group:has(.thread-hit:focus-visible) .cord-edge {
  stroke-width: calc(var(--thread-width) + 6px);
}
/* Enamel fills each followed thread. The deep edge keeps it visible on paper. */
.thread-dye-edge,
.thread-dye {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  visibility: hidden;
  pointer-events: none;
}
.thread-group.chosen .thread-dye-edge,
.thread-group.chosen .thread-dye,
.thread-group.traversed .thread-dye-edge,
.thread-group.traversed .thread-dye {
  visibility: visible;
}
.thread-dye-edge {
  stroke: var(--thread-deep);
}
.thread-dye {
  stroke: var(--thread-paint);
}
#loose-thread {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
  pointer-events: none;
}
#thread-bead {
  fill: var(--sunflower);
  stroke: var(--ink);
  stroke-width: 2;
  pointer-events: none;
}
.word-card {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 11%;
  height: 76px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-raised);
  box-shadow: 0 3px 0 var(--birch-edge);
  padding: 8px 10px;
  color: var(--ink);
  font: 600 17px var(--font-sans);
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.word-card > span {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.word-card.wide-word {
  font-size: 15px;
}
.word-card.long-word > span {
  line-height: 1.1;
}
.word-card.long-word {
  font-size: 10px;
  gap: 4px;
}
.word-card:active {
  cursor: grabbing;
}
.word-card small {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 400;
}
.word-card.selected {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.word-card.current {
  background: var(--green-soft);
  border-color: var(--green-deep);
}
.word-card.tying {
  outline: 3px solid var(--green-deep);
  outline-offset: 4px;
}
.word-card.start::before {
  content: attr(data-start-label);
  position: absolute;
  right: calc(100% + 11px);
  top: 50%;
  transform: translateY(calc(-100% - 3px));
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}
.card-loop {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
}
.card-loop::after {
  content: '';
  position: absolute;
  inset: 22px;
  border: 2px solid var(--loop-deep, var(--ink-muted));
  border-radius: 50%;
  background: var(--loop-paint, var(--birch));
}
.card-loop:hover::after,
.card-loop.tying::after {
  background: var(--green);
  border-color: var(--green-deep);
}

/* Dock: whatever is selected, laid out in one or two rows. */
.dock h3 {
  font: 600 18px var(--font-sans);
  margin: 0;
  white-space: nowrap;
}
.dock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.dock-note {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0;
}
.dock-row + .dock-note,
.dock-row + .connection-list {
  margin-top: 14px;
}
.weave-message {
  font-size: 14px;
  color: var(--green-deep);
  margin: 12px 0 0;
}
.weave-message:empty {
  display: none;
}
.selection-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.selection-actions .pi-btn {
  min-height: 60px;
  height: auto;
  white-space: nowrap;
  font-size: 14px;
  padding: 12px 16px;
}
.weight-control {
  flex: 1 1 240px;
  max-width: 420px;
  display: grid;
  gap: 2px;
}
.weight-label {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}
#string-weight {
  width: 100%;
  height: 60px;
}
.dock [data-cut] {
  min-height: 60px;
}
.connection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.connection-list button {
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  border-radius: 18px;
  padding: 10px 16px;
  min-height: 60px;
  font: 14px var(--font-sans);
  cursor: pointer;
  color: var(--ink);
}
.connection-list svg {
  width: 44px;
  height: 16px;
  display: block;
  margin-bottom: 4px;
}

/* Word box: the collection and the custom-word form, kept out of the way. */
.word-box {
  padding: 0 24px;
  border-radius: 30px;
  background: var(--birch);
  position: relative;
  overflow: hidden;
  box-shadow: var(--edge-2);
  border: 1px solid var(--birch-edge);
}
.word-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--pi-birch-tex);
  background-size: 512px 128px;
  opacity: 0.24;
  pointer-events: none;
}
.word-box > * {
  position: relative;
}
.word-box > summary {
  min-height: 60px;
  padding-block: 18px;
  font-weight: 600;
  cursor: pointer;
}
.word-box[open] {
  padding-bottom: 24px;
}
.word-box > p {
  font-size: 14px;
  color: var(--ink-muted);
}
.word-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 4px 8px;
}
.tray-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 68px;
  min-height: 60px;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  background: var(--paper-raised);
  box-shadow: var(--edge-1);
  font: 600 16px var(--font-sans);
  cursor: pointer;
  transition: transform 140ms ease-out;
}
.tray-card:hover {
  transform: translateY(-2px);
}
.tray-card small {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
}
.tray-card[aria-pressed='true'] {
  background: var(--paper-sunk);
  box-shadow: none;
  border-style: dashed;
}
#blank-weave {
  margin-top: 12px;
  min-height: 60px;
}
.custom-word {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.custom-word summary {
  min-height: 60px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}
.custom-word form {
  display: grid;
  gap: 8px;
}
.custom-word .pi-input {
  width: 100%;
}
.custom-word .pi-btn {
  white-space: normal;
  height: auto;
  min-height: 60px;
  padding: 12px;
  margin-top: 8px;
  font-size: 14px;
}
.custom-word p {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 16px 0 0;
}

/* Collected haiku */
.session-thread {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 32px;
}
.session-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.session-heading h2 {
  font-size: 32px;
}
.session-heading p,
#empty-thread {
  color: var(--ink-muted);
  font-size: 16px;
  margin-bottom: 0;
}
.session-heading .pi-btn {
  flex: none;
}
#save-thread {
  min-height: 60px;
  height: auto;
  white-space: normal;
}
.poem-thread {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.saved-poem {
  position: relative;
  padding: 28px;
  border-radius: 18px;
  background: var(--paper-raised);
  border: 1px solid var(--birch-edge);
  box-shadow: var(--edge-1);
  animation: word-arrive 500ms ease-out both;
}
.saved-poem::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 6px;
  top: -4px;
  left: 24px;
  border: 2px solid var(--poem-binding-edge, var(--line-strong));
  background: var(--poem-binding, var(--birch));
  border-radius: 999px;
}
.saved-poem h3 {
  font: 600 13px var(--font-sans);
  color: var(--ink-muted);
  margin: 0 0 20px;
}
.saved-poem p {
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.8;
  margin: 0;
}
.how-it-works {
  margin-top: 32px;
  max-width: 900px;
}
.how-it-works summary {
  font-size: 16px;
  min-height: 60px;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
}
.how-it-works p {
  font-size: 16px;
  color: var(--ink-muted);
}

@media (max-width: 1150px) {
  .worktable {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'desk'
      'board'
      'dock'
      'words';
  }
  .desk {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 24px;
    align-items: start;
  }
  .desk .transport {
    flex-direction: column;
    margin-bottom: 0;
  }
  .desk .transport .pi-btn {
    width: 100%;
  }
  .desk .poem-sheet {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
  .desk .rhythm {
    margin-top: 0;
    align-self: end;
  }
  .scroll-hint {
    display: block;
  }
}
@media (max-width: 760px) {
  .wrap {
    width: calc(100% - 32px);
  }
  .site-header.wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-block: 16px;
  }
  .machine-wrap {
    width: calc(100% - 32px);
    padding-top: 24px;
  }
  .machine-heading {
    margin-bottom: 16px;
  }
  .machine-heading h1 {
    font-size: 36px;
    margin-bottom: 8px;
  }
  .first-try {
    font-size: 16px;
  }
  .preset-picker > span {
    display: none;
  }
  .preset-picker .pi-btn,
  .transport .pi-btn {
    padding-inline: 14px;
  }
  .playback-settings {
    gap: 8px 20px;
  }
  .worktable {
    gap: 20px;
  }
  .desk {
    display: block;
    padding: 20px;
  }
  .desk .transport {
    flex-direction: row;
    margin-bottom: 16px;
  }
  .desk .transport .pi-btn {
    width: auto;
  }
  .desk .rhythm {
    margin-top: 12px;
  }
  .poem-sheet {
    padding: 24px 20px 16px;
  }
  .dock {
    padding: 16px;
    max-height: 46vh;
    overflow-y: auto;
  }
  .dock h3 {
    white-space: normal;
  }
  .selection-actions,
  .connection-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .connection-list button {
    flex: none;
  }
  .word-card {
    padding: 8px 5px;
  }
  .word-card.wide-word {
    font-size: 14px;
    letter-spacing: -0.01em;
  }
  .word-box {
    padding-inline: 20px;
  }
  .session-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .session-heading h2 {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .poem-line .new-word,
  .saved-poem {
    animation: none;
  }
}