/* plica — release hardening
   dark ground is the road; the sheet is the only lit thing on it. */

/* these are only the values before the first sheet exists — every one of them
   is overwritten by makePalette() on load and again on every reset. there is no
   light mode or dark mode, only this paper's mode. */
:root {
  --ground: #0d0c0b;
  --vignette: rgba(0, 0, 0, .72);
  --paper: #d9cdb4;
  --crease: #6b5f4a;
  --ghost: #211e1a;
  --ghost-edge: #574d3e;
  --reset-face: #cabd9f;
  --reset-edge: #4a4032;
  --ink: #2b241a;
  --faded: #6d6047;
  --tell: #4a4237;
  --collapse: 0;
  --font-leaf: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--ground);
  overflow: hidden;
  overscroll-behavior: none;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* the road closes in at the edges — which way it closes depends on the sheet */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(120vmax 90vmax at 50% 46%, transparent 34%, var(--vignette) 100%);
}

#sheet {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  --squeeze: calc(1 - var(--collapse) * 0.82);
}

/* the collapse gesture creases every panel shut about its own centre */
.cell {
  transform-box: fill-box;
  transform-origin: center;
  scale: var(--squeeze);
}

.cell .content { pointer-events: none; }
.cell .edge { fill: none; pointer-events: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---- open folds ---- */

.cell.open .face { fill: var(--paper); }
.cell.open .edge { stroke: var(--crease); stroke-width: 1.1; }
.cell.drawn .edge { stroke: var(--reset-edge); stroke-width: 1.6; }

.cell.reset .face { fill: var(--reset-face); }
.cell.reset .edge { stroke: var(--reset-edge); stroke-width: 1.3; stroke-dasharray: 7 5; }
.cell.reset { cursor: grab; }
.cell.open.has-effect { cursor: pointer; }
.cell.open.has-effect:hover .edge { stroke-width: 1.8; }

.leaf-img { pointer-events: none; }
.leaf-shape { pointer-events: none; }

.leaf-text {
  font-family: var(--font-leaf);
  font-style: italic;
  fill: var(--ink);
  paint-order: stroke fill;
  stroke: var(--paper);
  stroke-opacity: .85;
  stroke-width: 2.2;
  stroke-linejoin: round;
}

/* type-as-image. the quiet setting keeps a paper-coloured edge — not for
   legibility, which the sheet no longer promises, but because a cutting carries
   a rim of the page it was cut from. the expressive treatments sit directly on
   the picture and are allowed to overrun the fold and be torn off at the crease. */
.type { pointer-events: none; }
.type-plain {
  font-style: italic;
  paint-order: stroke fill;
  stroke: var(--paper);
  stroke-opacity: .8;
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.leaf-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 4; opacity: .6; }
.leaf-glyph { fill: var(--ink); font-family: var(--font-leaf); opacity: .85; }
.leaf-gloss {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 7px;
  fill: var(--faded);
  letter-spacing: .02em;
}
.leaf-pending { fill: var(--faded); opacity: .5; }
.leaf-pending { animation: breathe 1.6s ease-in-out infinite; }

@keyframes breathe { 0%, 100% { opacity: .18 } 50% { opacity: .55 } }

/* ---- ghosts ---- */

/* colour is free everywhere else, but a ghost must never be mistakable for an
   open fold — that distinction is the click affordance, not decoration. it is
   carried by the dashed stroke and the translucency, so it survives whatever
   hues the sheet happens to draw. */
.cell.ghost .face { fill: var(--ghost); }
.cell.ghost .edge { stroke: var(--ghost-edge); stroke-width: .9; stroke-dasharray: 3 6; }
.cell.ghost { cursor: pointer; opacity: .66; transition: opacity .18s ease; }
.cell.ghost:hover { opacity: 1; }
.cell.ghost:hover .edge { stroke-dasharray: none; stroke-width: 1.3; }

/* tells — a shadow through paper, never a number */
.tell-blot { fill: var(--tell); opacity: .5; }
.tell-rule { stroke: var(--tell); stroke-width: 1.4; opacity: .55; }
.tell-halo { fill: none; stroke: var(--tell); stroke-width: 1.6; opacity: .5; }

.cell.enter { opacity: 0; }
.cell { transition: opacity .5s ease; }

/* The introduction is the one document in plica. Its colours are fixed so its
   instructions remain readable independently of the generated sheet palette. */
#intro {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  margin: auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid #6d6455;
  border-radius: 2px;
  color: #1b1915;
  background: #f2ecdf;
  box-shadow: 0 1.5rem 6rem rgba(0, 0, 0, .48);
}

#intro:focus { outline: none; }

#intro::backdrop {
  background: rgba(10, 9, 8, .72);
  backdrop-filter: blur(3px);
}

/* A fixed little collage before the generated one. Each letter is its own
   cutting; the c takes its fill from a local public-domain marbled-paper scan. */
.intro-wordmark {
  display: flex;
  align-items: center;
  width: max-content;
  height: clamp(4.8rem, 14vw, 5.8rem);
  margin: -.45rem 0 .35rem;
  padding: .25rem .35rem .1rem .2rem;
  isolation: isolate;
  user-select: none;
}

.intro-letter {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  line-height: .78;
  transform-origin: center;
}

.intro-letter::before {
  content: "";
  position: absolute;
  z-index: -1;
  box-shadow: 0 .18rem .35rem rgba(46, 37, 26, .22);
}

.intro-letter-p {
  z-index: 5;
  width: .78em;
  color: #b92f39;
  font: italic 700 clamp(4.2rem, 13vw, 5.35rem)/.78 Georgia, "Times New Roman", serif;
  transform: rotate(-8deg) translateY(.05em);
  text-shadow: .035em .035em 0 #f6eedc;
}

.intro-letter-p::before {
  inset: .12em -.05em .02em -.12em;
  background: #bdd8ce;
  clip-path: polygon(5% 8%, 92% 0, 100% 86%, 11% 100%, 0 31%);
  transform: rotate(5deg);
}

.intro-letter-l {
  z-index: 3;
  width: .68em;
  margin-left: -.05em;
  color: #171612;
  font: 900 clamp(3.8rem, 12vw, 4.85rem)/.8 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  transform: rotate(3deg) translateY(-.03em);
}

.intro-letter-l::before {
  inset: -.03em -.12em -.04em -.1em;
  background: #e7bd3e;
  clip-path: polygon(9% 0, 100% 7%, 88% 94%, 0 100%);
  transform: rotate(-2deg);
}

.intro-letter-i {
  z-index: 6;
  width: .48em;
  margin-left: -.02em;
  color: #f4eee1;
  font: 800 clamp(3.8rem, 12vw, 4.85rem)/.8 "Trebuchet MS", Arial, sans-serif;
  transform: rotate(-4deg) translateY(.04em);
  text-shadow: .035em .035em 0 #4d315d;
}

.intro-letter-i::before {
  inset: -.08em -.08em -.03em -.1em;
  background: #684977;
  clip-path: polygon(13% 3%, 88% 0, 100% 93%, 0 100%);
}

.intro-letter-c {
  z-index: 4;
  display: block;
  width: .8em;
  margin-left: -.03em;
  font: 900 clamp(4.1rem, 13vw, 5.2rem)/.78 "Arial Black", Arial, sans-serif;
  transform: rotate(7deg) translateY(.03em);
}

.intro-letter-c::before {
  inset: .04em -.03em -.01em -.06em;
  background: #dfd4bf;
  clip-path: polygon(7% 0, 95% 8%, 100% 82%, 84% 100%, 0 91%, 5% 27%);
  transform: rotate(-4deg);
}

.intro-letter-c svg {
  display: block;
  width: 100%;
  height: .92em;
  overflow: visible;
}

.intro-letter-c text {
  fill: url("#intro-marble-pattern");
  stroke: #1b1915;
  stroke-width: 1.5px;
  paint-order: stroke fill;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 90px;
  font-weight: 900;
}

.intro-letter-a {
  z-index: 2;
  width: .86em;
  margin-left: -.08em;
  color: #d8e4c8;
  font: italic 700 clamp(4rem, 12.5vw, 5rem)/.78 Georgia, "Times New Roman", serif;
  transform: rotate(-5deg) translateY(.03em);
}

.intro-letter-a::before {
  inset: .04em -.12em .01em -.08em;
  background: #29594f;
  clip-path: polygon(0 14%, 83% 0, 100% 77%, 72% 100%, 8% 91%);
  transform: rotate(2deg);
}

#intro h1 {
  margin: 0;
  font-family: var(--font-leaf);
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
}

#intro-summary {
  max-width: 46ch;
  margin: 1rem 0 1.4rem;
  font: 1rem/1.5 var(--font-leaf);
}

#intro-actions {
  display: grid;
  gap: .7rem;
  margin: 0 0 1.6rem;
}

#intro-actions div {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: .75rem;
  padding-top: .7rem;
  border-top: 1px solid #c9c0ae;
}

#intro-actions dt { font-weight: 700; }
#intro-actions dd { margin: 0; line-height: 1.35; }

#intro-dismiss {
  width: 100%;
  min-height: 2.9rem;
  border: 1px solid #1b1915;
  border-radius: 0;
  color: #f2ecdf;
  background: #1b1915;
  font: inherit;
  cursor: pointer;
}

#intro-dismiss:hover { background: #363127; }
#intro-dismiss:focus-visible { outline: 3px solid #b24f89; outline-offset: 3px; }

#debug {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: .5rem .8rem;
  z-index: 3;
  font-size: 11px;
  color: #7d715c;
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cell { transition: none; }
  .leaf-pending { animation: none; }
}

@media (max-width: 30rem) {
  #intro-actions div { grid-template-columns: 1fr; gap: .2rem; }
}