/* K&K Wedding Quilt — warm, handmade, pattern-card feel */

:root {
  --linen: #faf6f0;
  --wool: #ffffff;
  --ink: #3d3833;
  --faded: #8b8177;
  --rose: #b95d7c;
  --rose-deep: #a34a68;
  --stitch: #e6dccf;      /* running-stitch borders */
  --shadow: 0 1px 2px rgba(61, 56, 51, 0.06), 0 8px 24px rgba(61, 56, 51, 0.07);
  --radius: 20px;
  --display: "Fraunces", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--linen);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.view {
  max-width: 540px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 6px;
}

.title {
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1.04;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--faded);
  margin: 18px 0 24px;
}

.fineprint {
  font-size: 12.5px;
  color: var(--faded);
  text-align: center;
  margin: 14px 0 0;
}

/* ---------- entry & done ---------- */

.entry-card {
  text-align: center;
  padding-top: 4vh;
}

#view-entry {
  position: relative;
  z-index: 0;
  min-height: 100dvh;
  isolation: isolate;
}

#view-entry .entry-card { position: relative; z-index: 1; }

.heart-rain {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.heart-rain span {
  --heart-size: 14px;
  --heart-color: #e7a5b8;
  --heart-opacity: 0.16;
  --heart-drift: 24px;
  --heart-drift-back: -12px;
  position: absolute;
  top: -12vh;
  left: 10%;
  width: var(--heart-size);
  height: var(--heart-size);
  border-radius: 2px;
  background: var(--heart-color);
  opacity: 0;
  transform: rotate(45deg);
  animation: heart-drift-down 22s linear infinite;
  will-change: transform, opacity;
}

.heart-rain span::before,
.heart-rain span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
}

.heart-rain span::before { top: -50%; left: 0; }
.heart-rain span::after { top: 0; left: -50%; }

.heart-rain span:nth-child(1)  { left: 4%;  --heart-size: 10px; --heart-opacity: .12; --heart-drift: 30px;  --heart-drift-back: 8px;   animation-duration: 24s; animation-delay: -7s;  }
.heart-rain span:nth-child(2)  { left: 11%; --heart-size: 22px; --heart-color: #d77b99; --heart-opacity: .13; --heart-drift: -18px; --heart-drift-back: 14px;  animation-duration: 29s; animation-delay: -22s; }
.heart-rain span:nth-child(3)  { left: 18%; --heart-size: 14px; --heart-color: #f0bccb; --heart-opacity: .22; --heart-drift: 22px;  --heart-drift-back: -7px;  animation-duration: 19s; animation-delay: -2s;  }
.heart-rain span:nth-child(4)  { left: 27%; --heart-size: 8px;  --heart-color: #b95d7c; --heart-opacity: .09; --heart-drift: -13px; --heart-drift-back: 10px;  animation-duration: 25s; animation-delay: -16s; }
.heart-rain span:nth-child(5)  { left: 36%; --heart-size: 17px; --heart-opacity: .08; --heart-drift: 15px;  --heart-drift-back: -12px; animation-duration: 28s; animation-delay: -11s; }
.heart-rain span:nth-child(6)  { left: 46%; --heart-size: 11px; --heart-color: #cf6f8e; --heart-opacity: .10; --heart-drift: -25px; --heart-drift-back: 6px;   animation-duration: 21s; animation-delay: -18s; }
.heart-rain span:nth-child(7)  { left: 56%; --heart-size: 7px;  --heart-color: #f2c6d2; --heart-opacity: .18; --heart-drift: 18px;  --heart-drift-back: -5px;  animation-duration: 18s; animation-delay: -5s;  }
.heart-rain span:nth-child(8)  { left: 65%; --heart-size: 15px; --heart-opacity: .08; --heart-drift: -12px; --heart-drift-back: 16px;  animation-duration: 27s; animation-delay: -24s; }
.heart-rain span:nth-child(9)  { left: 75%; --heart-size: 9px;  --heart-color: #c95f80; --heart-opacity: .14; --heart-drift: 24px;  --heart-drift-back: -10px; animation-duration: 20s; animation-delay: -13s; }
.heart-rain span:nth-child(10) { left: 84%; --heart-size: 20px; --heart-color: #ecb0c1; --heart-opacity: .18; --heart-drift: -27px; --heart-drift-back: 9px;   animation-duration: 26s; animation-delay: -4s;  }
.heart-rain span:nth-child(11) { left: 94%; --heart-size: 12px; --heart-color: #b95d7c; --heart-opacity: .16; --heart-drift: -32px; --heart-drift-back: -8px;  animation-duration: 23s; animation-delay: -20s; }
.heart-rain span:nth-child(12) { left: 7%;  --heart-size: 6px;  --heart-color: #f4ccd7; --heart-opacity: .24; --heart-drift: 14px;  --heart-drift-back: -14px; animation-duration: 17s; animation-delay: -14s; }
.heart-rain span:nth-child(13) { left: 22%; --heart-size: 18px; --heart-color: #c86786; --heart-opacity: .11; --heart-drift: -20px; --heart-drift-back: 12px;  animation-duration: 31s; animation-delay: -27s; }
.heart-rain span:nth-child(14) { left: 42%; --heart-size: 9px;  --heart-opacity: .11; --heart-drift: 28px;  --heart-drift-back: -4px;  animation-duration: 22s; animation-delay: -9s;  }
.heart-rain span:nth-child(15) { left: 61%; --heart-size: 13px; --heart-color: #efb8c7; --heart-opacity: .15; --heart-drift: -17px; --heart-drift-back: 18px;  animation-duration: 24s; animation-delay: -19s; }
.heart-rain span:nth-child(16) { left: 79%; --heart-size: 7px;  --heart-color: #b95d7c; --heart-opacity: .20; --heart-drift: 19px;  --heart-drift-back: -13px; animation-duration: 16s; animation-delay: -1s;  }
.heart-rain span:nth-child(17) { left: 89%; --heart-size: 16px; --heart-color: #db8da5; --heart-opacity: .12; --heart-drift: -22px; --heart-drift-back: 7px;   animation-duration: 30s; animation-delay: -25s; }
.heart-rain span:nth-child(18) { left: 52%; --heart-size: 24px; --heart-color: #f0c1ce; --heart-opacity: .07; --heart-drift: 12px;  --heart-drift-back: -16px; animation-duration: 32s; animation-delay: -15s; }
.heart-rain span:nth-child(19) { left: 30%; --heart-size: 13px; --heart-color: #bd5b7b; --heart-opacity: .26; --heart-drift: 22px;  --heart-drift-back: -9px;  animation-duration: 18s; animation-delay: -12s; }
.heart-rain span:nth-child(20) { left: 43%; --heart-size: 21px; --heart-color: #e59ab0; --heart-opacity: .22; --heart-drift: -16px; --heart-drift-back: 13px;  animation-duration: 24s; animation-delay: -6s;  }
.heart-rain span:nth-child(21) { left: 50%; --heart-size: 10px; --heart-color: #cb6c8b; --heart-opacity: .30; --heart-drift: 26px;  --heart-drift-back: -15px; animation-duration: 17s; animation-delay: -15s; }
.heart-rain span:nth-child(22) { left: 58%; --heart-size: 26px; --heart-color: #efb6c6; --heart-opacity: .20; --heart-drift: -20px; --heart-drift-back: 8px;   animation-duration: 29s; animation-delay: -21s; }
.heart-rain span:nth-child(23) { left: 70%; --heart-size: 15px; --heart-color: #b95d7c; --heart-opacity: .25; --heart-drift: 17px;  --heart-drift-back: -11px; animation-duration: 20s; animation-delay: -3s;  }
.heart-rain span:nth-child(24) { left: 86%; --heart-size: 11px; --heart-color: #e8a2b7; --heart-opacity: .28; --heart-drift: -24px; --heart-drift-back: 15px;  animation-duration: 22s; animation-delay: -17s; }

/* The extra six hearts and stronger opacity are phone-only. Narrow screens no
   longer reserve the center for content; the hearts can pass behind anything. */
.heart-rain span:nth-child(n + 19) { display: none; }

@media (max-width: 600px) {
  .heart-rain span:nth-child(n + 19) { display: block; }
  .heart-rain span:nth-child(3n + 1) { --heart-opacity: .22; }
  .heart-rain span:nth-child(3n + 2) { --heart-opacity: .30; }
  .heart-rain span:nth-child(3n) { --heart-opacity: .26; }
}

@keyframes heart-drift-down {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(45deg);
  }
  8% { opacity: var(--heart-opacity); }
  38% { transform: translate3d(var(--heart-drift), 38vh, 0) rotate(51deg); }
  70% { transform: translate3d(var(--heart-drift-back), 78vh, 0) rotate(40deg); }
  92% { opacity: var(--heart-opacity); }
  100% {
    opacity: 0;
    transform: translate3d(0, 114vh, 0) rotate(48deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heart-rain { display: none; }
}

.entry-square {
  width: min(58vw, 240px);
  margin: 8px auto 0;
}

.entry-square svg { display: block; width: 100%; height: auto; }

/* clusters knit in round by round on load */
@media (prefers-reduced-motion: no-preference) {
  .knit-in .layer { opacity: 0; animation: knit 0.7s ease-out forwards; }
  .knit-in .layer:nth-child(2) { animation-delay: 0.1s; }
  .knit-in .layer:nth-child(3) { animation-delay: 0.35s; }
  .knit-in .layer:nth-child(4) { animation-delay: 0.6s; }
  .knit-in .layer:nth-child(5) { animation-delay: 0.85s; }
  @keyframes knit {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* The entry square previews the actual interaction: its four crochet rounds
   fade into distinct yarn plans in sequence, then keep exploring combinations. */
#entry-granny.color-demo .layer {
  animation-duration: 28s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: color;
}

#entry-granny.color-demo .layer[data-layer="center"] { animation-name: demo-center-colors; }
#entry-granny.color-demo .layer[data-layer="round2"] { animation-name: demo-round2-colors; }
#entry-granny.color-demo .layer[data-layer="round3"] { animation-name: demo-round3-colors; }
#entry-granny.color-demo .layer[data-layer="border"] { animation-name: demo-border-colors; }

@keyframes demo-center-colors {
  0% { color: #6e6e6e; }
  7%, 25% { color: #b95d7c; }
  33%, 51% { color: #e7a5b8; }
  59%, 77% { color: #9db29a; }
  85%, 93% { color: #51515a; }
  100% { color: #6e6e6e; }
}

@keyframes demo-round2-colors {
  0%, 5% { color: #9f9f9f; }
  12%, 30% { color: #e7a5b8; }
  38%, 56% { color: #9db29a; }
  64%, 82% { color: #51515a; }
  90%, 93% { color: #b95d7c; }
  100% { color: #9f9f9f; }
}

@keyframes demo-round3-colors {
  0%, 10% { color: #848484; }
  17%, 35% { color: #9db29a; }
  43%, 61% { color: #51515a; }
  69%, 87% { color: #b95d7c; }
  94%, 96% { color: #e7a5b8; }
  100% { color: #848484; }
}

@keyframes demo-border-colors {
  0%, 15% { color: #c9c9c9; }
  22%, 40% { color: #51515a; }
  48%, 66% { color: #b95d7c; }
  74%, 92% { color: #e7a5b8; }
  100% { color: #c9c9c9; }
}

@media (prefers-reduced-motion: reduce) {
  #entry-granny.color-demo .layer { animation: none; }
}

#name-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: -6px;
}

#name-input {
  font-family: var(--body);
  font-size: 17px;
  padding: 14px 16px;
  border: 1.5px solid var(--stitch);
  border-radius: 14px;
  background: var(--wool);
  color: var(--ink);
  width: 100%;
}

#name-input:focus {
  outline: 2px solid var(--rose);
  outline-offset: 1px;
  border-color: transparent;
}

#name-input::placeholder { color: #bdb3a7; }

/* ---------- buttons ---------- */

.btn {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, opacity 0.15s ease;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--rose);
  color: #fff;
}

.btn-primary:hover { background: var(--rose-deep); }

.btn-primary:disabled {
  background: #d9cfc3;
  cursor: default;
}

.btn-ghost {
  background: transparent;
  color: var(--faded);
  border: 1.5px dashed var(--stitch);
}

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- designer ---------- */

.design-header { text-align: center; margin-bottom: 4px; }

.design-title {
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(24px, 6vw, 30px);
  margin: 0 0 4px;
}

.hint {
  font-size: 13.5px;
  color: var(--faded);
  margin: 0;
  min-height: 1.4em;
}

.square-stage {
  width: min(88vw, 380px);
  margin: auto;
}

.square-stage svg { display: block; width: 100%; height: auto; }

.square-stage .layer { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .square-stage .layer { transition: filter 0.2s ease, opacity 0.2s ease; }
}

.square-stage.has-selection .layer:not(.selected) { opacity: 0.45; }

.square-stage .layer.selected {
  filter: drop-shadow(0 0 6px rgba(185, 93, 124, 0.8));
}

/* ---------- round chips ---------- */

.rounds-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 6px 0 14px;
}

.round-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 9px;
  background: var(--wool);
  border: 1.5px solid var(--stitch);
  border-radius: 14px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--faded);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.round-chip .dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(61, 56, 51, 0.12);
}

.round-chip[aria-checked="true"] {
  border-color: var(--rose);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--rose);
}

.round-chip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- palette ---------- */

.palette-card {
  background: var(--wool);
  border: 1.5px dashed var(--stitch);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  box-shadow: var(--shadow);
}

.palette-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faded);
  text-align: center;
  margin: 0 0 12px;
}

.palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.yarn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--faded);
  border-radius: 12px;
}

.yarn svg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.yarn:active svg { transform: scale(0.92); }

/* yarn names stay readable regardless of the yarn's color (looking at you, Ivory) */
.yarn .name { color: var(--faded); }
.yarn.used .name { color: var(--ink); }

.yarn.used svg { box-shadow: 0 0 0 2px var(--linen), 0 0 0 4px currentColor; }

.yarn.used .tag {
  color: var(--ink);
}

.yarn .tag {
  font-size: 9.5px;
  font-weight: 500;
  color: transparent;
  min-height: 1.2em;
}

.yarn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- actions ---------- */

.actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.actions .btn-ghost { flex: 1; }
.actions .btn-primary { flex: 2; }

/* ---------- confirm dialog ---------- */

#confirm-dialog {
  border: none;
  border-radius: var(--radius);
  padding: 24px 22px 20px;
  max-width: 340px;
  width: calc(100vw - 48px);
  background: var(--wool);
  color: var(--ink);
  box-shadow: 0 12px 48px rgba(61, 56, 51, 0.25);
}

#confirm-dialog::backdrop {
  background: rgba(61, 56, 51, 0.35);
}

.confirm-title {
  font-family: var(--display);
  font-weight: 560;
  font-size: 22px;
  margin: 0 0 14px;
  text-align: center;
}

.confirm-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.confirm-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  font-size: 14.5px;
  border-bottom: 1px dashed var(--stitch);
}

.confirm-list li:last-child { border-bottom: none; }

.confirm-list .swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(61, 56, 51, 0.15);
  flex: none;
}

.confirm-list .round-name { color: var(--faded); flex: 1; }

.confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.confirm-actions .btn { flex: 1; padding: 12px 10px; font-size: 15px; }

/* ---------- done ---------- */

.done-square { margin-top: 4px; }

#done-title {
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#done-title:focus-visible { outline: 2px solid var(--rose); outline-offset: 5px; }

#done-title.is-reset-holding::after {
  content: "";
  display: block;
  width: min(150px, 45%);
  height: 3px;
  margin: 9px auto 0;
  border-radius: 999px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  animation: test-reset-hold 5s linear forwards;
}

#done-title.is-reset-complete { color: var(--sage); }

@keyframes test-reset-hold {
  to { transform: scaleX(1); }
}

/* ---------- phone-width designer ----------
   Fit the complete pattern card to the usable viewport rather than guessing
   from a phone user-agent. Every phone-width screen gets the compact controls;
   `dvh` then sizes the square around the actual browser chrome. The second
   query also handles wider phones turned landscape. */

@media (max-width: 600px),
       (max-width: 900px) and (max-height: 500px) {
  #view-design {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-rows: repeat(6, auto);
    align-content: center;
    gap: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .design-header { margin: 0; }
  .design-header .eyebrow { display: none; }

  .design-title {
    font-size: clamp(22px, 6vw, 27px);
    margin-bottom: 2px;
  }

  .hint {
    min-height: 1.25em;
    font-size: 12px;
    line-height: 1.25;
  }

  .square-stage {
    width: clamp(180px, min(76vw, calc(100dvh - 320px)), 330px);
    margin: 0 auto;
  }

  .rounds-row {
    gap: 5px;
    margin: 0;
  }

  .round-chip {
    min-height: 42px;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    border-radius: 12px;
    font-size: 10.5px;
    line-height: 1;
  }

  .round-chip .dot { width: 17px; height: 17px; }

  .palette-card {
    padding: 8px 9px 7px;
    border-radius: 15px;
  }

  .palette-label {
    margin-bottom: 5px;
    font-size: 9.5px;
  }

  .palette { gap: 3px; }

  .yarn {
    gap: 2px;
    padding: 1px 0;
    font-size: 9px;
  }

  .yarn svg { width: 32px; height: 32px; }
  .yarn .tag { min-height: 1em; font-size: 8px; }

  .actions { gap: 7px; margin-top: 1px; }

  .actions .btn {
    min-height: 44px;
    padding: 9px 14px;
    font-size: 14px;
  }

  #view-design > .fineprint {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.2;
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #view-design {
    max-width: 900px;
    grid-template-columns: minmax(180px, 0.8fr) minmax(280px, 1.2fr);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "header rounds"
      "square palette"
      "square actions"
      "square note";
    align-content: stretch;
    column-gap: 14px;
    row-gap: 5px;
  }

  .design-header { grid-area: header; align-self: end; }

  .square-stage {
    grid-area: square;
    width: min(62dvh, 250px);
    align-self: center;
  }

  .rounds-row { grid-area: rounds; }
  .palette-card { grid-area: palette; align-self: center; }
  .actions { grid-area: actions; }
  #view-design > .fineprint { grid-area: note; }
}