/* ============================================================
   YIZZOO - The Scavenger Hunt Builder
   Two stylesheets in one file: the tool on screen, and the sheets
   it prints. They share nothing, which is the point - at the bottom
   of this file the whole site disappears and only the cards remain.
   ============================================================ */

/* ============================================================
   ON SCREEN
   ============================================================ */

.yz-hb__head{ padding-block: var(--sp-8) var(--sp-6); }

.yz-hb__grid{
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: var(--sp-8);
  align-items: start;
  padding-block: var(--sp-8);
}
@media (max-width: 900px){
  .yz-hb__grid{ grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---- the panel ---------------------------------------------- */

.yz-hb__panel{
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: var(--sp-4);
}
@media (max-width: 900px){ .yz-hb__panel{ position: static; } }

.yz-hb__group + .yz-hb__group{
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

.yz-hb__h{
  font-size: var(--fs-h5);
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}
.yz-hb__sub,
.yz-hb__note{
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-soft-ink);
  margin: var(--sp-2) 0 0;
}
.yz-hb__sub{ margin: calc(var(--sp-2) * -1) 0 var(--sp-3); }

/* ---- the two games ----------------------------------------- */

.yz-hb__group--first{ margin-top: calc(var(--sp-2) * -1); }

.yz-hb__modes{ display: grid; gap: var(--sp-2); }

.yz-hb__mode{
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-parchment);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-ink);
  transition: background .12s, border-color .12s;
}
.yz-hb__mode:hover{ border-color: var(--color-teal); }
.yz-hb__mode[aria-checked="true"]{
  background: var(--color-midnight);
  border-color: var(--color-midnight);
  color: var(--color-parchment);
}
.yz-hb__mode-name{ display: block; font-weight: 700; font-size: 0.98rem; }
.yz-hb__mode-sub{
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  margin-top: 1px;
  opacity: .72;
}

/* ---- where a list hunt happens ----------------------------- */

.yz-hb__wheres{ display: flex; flex-direction: column; gap: var(--sp-2); }

.yz-hb__where{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px var(--sp-3) 9px 10px;
  background: var(--color-paper);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-soft-ink);
  text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.yz-hb__where:hover{ border-color: var(--color-teal); }
.yz-hb__where.is-on{
  background: var(--color-teal-08);
  border-color: var(--color-teal);
  color: var(--color-ink);
}
.yz-hb__where.is-on .yz-hb__tick{ background: var(--color-teal); color: #fff; }

/* ---- ages: three cards, one chosen ------------------------- */

.yz-hb__ages{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.yz-hb__age{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--color-parchment);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: var(--color-ink);
  transition: background .12s, border-color .12s, transform .12s;
}
.yz-hb__age:hover{ border-color: var(--color-teal); transform: translateY(-1px); }
.yz-hb__age[aria-checked="true"]{
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-parchment);
}
.yz-hb__age-name{ font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.yz-hb__age-range{ font-size: 0.76rem; opacity: .75; }

/* ---- rooms: toggles that say what they hold ---------------- */

.yz-hb__rooms{ display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.yz-hb__room{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px var(--sp-3) 7px 9px;
  background: var(--color-paper);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.87rem;
  color: var(--color-soft-ink);
  transition: background .12s, border-color .12s, color .12s;
}
.yz-hb__room:hover{ border-color: var(--color-teal); }
.yz-hb__room.is-on{
  background: var(--color-teal-08);
  border-color: var(--color-teal);
  color: var(--color-ink);
}
.yz-hb__tick{
  display: inline-flex;
  width: 17px; height: 17px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-border);
  color: transparent;
  flex: none;
  transition: background .12s, color .12s;
}
.yz-hb__room.is-on .yz-hb__tick{ background: var(--color-teal); color: #fff; }
.yz-hb__room-n{
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

/* ---- the length slider ------------------------------------- */

.yz-hb__slider{ display: block; }
.yz-hb__slider input[type="range"]{
  width: 100%;
  margin: 0 0 var(--sp-2);
  accent-color: var(--color-teal);
}
.yz-hb__slider-out{ font-size: 0.92rem; color: var(--color-soft-ink); }
.yz-hb__slider-out strong{ color: var(--color-ink); font-size: 1.05rem; }
.yz-hb__slider-time{ display: block; font-size: 0.82rem; opacity: .8; }

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

/* Stacked. Side by side, the two labels do not fit a panel this
   narrow, and .yz-btn is white-space: nowrap with min-width: auto,
   so they could not shrink and ran out past the panel edge instead. */
.yz-hb__actions{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}
.yz-hb__note--print{ margin-top: var(--sp-3); }

/* ---- the trail ---------------------------------------------- */

.yz-hb__previewhead{ margin-bottom: var(--sp-4); }
.yz-hb__previewhead .yz-hb__h{ margin-bottom: 2px; }

/* The printed sheets' own mark, on screen. An <img> cannot take this
   document's colour, so the SVG draws in its own black; opacity is
   what tones it down to sit with the parchment. */
.yz-hb__flourish{
  display: block;
  width: 58px; height: auto;
  margin: 4px 0 6px;
  opacity: .42;
}

.yz-hb__trail{ list-style: none; margin: 0; padding: 0; }

.yz-hb__stop{
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-2);
}
/* The stop the prize is at: still a clue, but the one that ends it. */
.yz-hb__stop--prize{ border-color: var(--color-gold); }

/* The winner's card. Not a stop, so it carries the star. */
.yz-hb__stop--last{
  background: var(--color-gold-12);
  border-color: var(--color-gold);
  grid-template-columns: 42px 1fr;
}

.yz-hb__stop-n{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-parchment);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.yz-hb__stop--last .yz-hb__stop-n{ background: var(--color-gold); color: var(--color-midnight); }

.yz-hb__clue{
  margin: 0 0 6px;
  font-size: 1.02rem;
  line-height: 1.45;
}
.yz-hb__answer{
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-soft-ink);
}
.yz-hb__answer-k{
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-teal);
}
.yz-hb__room-tag{
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-parchment-deep);
  font-size: 0.72rem;
}

.yz-hb__swap{
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-soft-ink);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.yz-hb__swap:hover{
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-midnight);
}

/* ---- the checklist, on screen ------------------------------- */

.yz-hb__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2);
}

.yz-hb__find{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
/* Empty on screen too. It is a box somebody ticks on paper, and a
   pre-ticked one on screen would be a lie about what prints. */
.yz-hb__findbox{
  width: 19px; height: 19px;
  border: 1.5px solid var(--color-teal);
  border-radius: 4px;
  flex: none;
}
.yz-hb__findtext{ font-size: 0.97rem; line-height: 1.35; }

/* ---- typing over the generated words ------------------------
   Every line of text is directly editable. It has to LOOK
   editable without shouting: a dotted underline that firms up on
   hover, and a proper field once the caret is in it. */

.yz-hb__edit{
  display: block;
  border-radius: 5px;
  padding: 2px 5px;
  margin: -2px -5px;
  border-bottom: 1px dashed transparent;
  outline: none;
  cursor: text;
  transition: background .12s, border-color .12s;
}
.yz-hb__stop:hover .yz-hb__edit,
.yz-hb__find:hover .yz-hb__edit{ border-bottom-color: var(--color-border); }

.yz-hb__edit:hover{ background: var(--color-parchment); }
.yz-hb__edit:focus{
  background: var(--color-paper);
  border-bottom-color: var(--color-teal);
  box-shadow: 0 0 0 2px var(--color-teal-14);
}
/* An empty line says what it is for rather than sitting blank. */
.yz-hb__edit:empty::before{
  content: attr(data-hint);
  color: var(--color-soft-ink);
  opacity: .6;
}

/* The destination sits inline in "Leads to ___", so it must not
   take the whole row the way the clue above it does. */
.yz-hb__place{
  display: inline;
  font-weight: 600;
  color: var(--color-ink);
}

/* A row somebody wrote themselves. Marked, because the grown-up's
   sheet cannot tell them how to hide something we have never seen. */
.yz-hb__find.is-mine,
.yz-hb__stop.is-mine{ border-color: var(--color-gold); }

.yz-hb__rowtools{ display: flex; gap: 4px; align-items: center; }

.yz-hb__drop{
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--color-soft-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.yz-hb__stop:hover .yz-hb__drop,
.yz-hb__find:hover .yz-hb__drop,
.yz-hb__drop:focus-visible{ opacity: 1; }
.yz-hb__drop:hover{ background: var(--color-coral); color: #fff; }

/* Add your own, at the foot of whichever list is running. The
   checklist is a two column grid, so it has to be told to run the
   whole way across or it sits in the left column looking like an
   item. */
.yz-hb__add{ list-style: none; margin-top: var(--sp-2); grid-column: 1 / -1; }
.yz-hb__add button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: var(--sp-3);
  background: transparent;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-soft-ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.yz-hb__add button:hover{
  border-color: var(--color-teal);
  color: var(--color-teal);
  background: var(--color-teal-08);
}

.yz-hb__empty{
  padding: var(--sp-8);
  text-align: center;
  color: var(--color-soft-ink);
  background: var(--color-parchment-deep);
  border-radius: var(--radius-md);
}

/* ---- the words underneath ----------------------------------- */

.yz-hb__words{
  max-width: var(--reading-max);
  margin: 0 auto;
  padding-block: var(--sp-8) var(--sp-10);
  border-top: 1px solid var(--color-border);
}
.yz-hb__words h2{
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: var(--sp-7) 0 var(--sp-3);
}
.yz-hb__words h2:first-child{ margin-top: 0; }
.yz-hb__words p{ margin: 0 0 var(--sp-4); line-height: var(--lh-body); }

/* The print block never shows on screen. */
.yz-print{ display: none; }

/* ============================================================
   ON PAPER
   ------------------------------------------------------------
   The rules are tools/printables/_print.css's, because the output
   of this tool has to be indistinguishable from a printable that
   was made by hand: no full bleed, almost no solid fill, readable
   in grayscale, and cut lines PALE so a wandering cut leaves
   nothing anybody notices.
   ============================================================ */

@media print{

  @page{ size: letter portrait; margin: 0.5in; }

  /* Everything that is not the cards, gone. The page content sits
     inside <main>, so it takes two rules: drop everything beside
     main, then everything inside it except the print block. Written
     as a not() rather than a list of class names so a new piece of
     site furniture cannot quietly start printing. */
  body > *:not(main){ display: none !important; }
  main > *:not(.yz-print){ display: none !important; }
  main{ display: block !important; padding: 0 !important; margin: 0 !important; }
  .yz-print{ display: block !important; }

  html, body{
    background: #fff !important;
    color: #1a1a1a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11.5pt;
    line-height: 1.5;
    margin: 0;
  }
  *, *::before, *::after{ box-sizing: border-box; }
  html{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .yz-print[hidden]{ display: block !important; }

  /* One .yz-pp per printed sheet. The last must not force a blank one. */
  .yz-pp{
    page-break-after: always;
    break-after: page;
    position: relative;
    min-height: 9.6in;
    padding-bottom: 0.35in;
  }
  .yz-pp:last-child{ page-break-after: auto; break-after: auto; }

  /* ---- the clue cards, six to a sheet ---------------------- */

  .yz-pp__cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 3.1in;
    gap: 0;
  }

  .yz-pp__card{
    border: 0.75pt dashed #aaa;     /* --cut. Scissors wander; this forgives it. */
    margin: -0.375pt;               /* shared edges, so no double-thick line */
    padding: 0.17in;
    break-inside: avoid;
  }

  /* THE DECORATION SITS INSIDE THE CUT LINE, never on it. The dashed
     line is for scissors and stays pale; this rule is what the card
     actually looks like once it is cut out, and it is inset far
     enough that a cut wandering a millimetre never touches it.

     Straight rules are CSS and curves are SVG, which is the split the
     printables' own theme uses: a rule has to stretch to the card,
     and an SVG that stretches distorts its own corners. */
  .yz-pp__frame{
    position: relative;
    height: 100%;
    border: 0.5pt solid #444;
    padding: 0.2in 0.22in;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  /* One file, four rotations. It is drawn symmetric about its own
     diagonal for exactly this. Pulled out over the rule so the
     ornament sits ON the corner rather than beside it.

     No colour set here on purpose: an SVG behind an <img> cannot see
     this document's colour, so its currentColor resolves to its own
     black. That is what these are drawn for, and it is what the paid
     printables use them as. */
  /* The winner's card is the one they keep. A heavier rule, and that
     is all: a solid fill here would cost real ink on the one card
     somebody is most likely to stick on a fridge. */
  .yz-pp__frame--win{ border-width: 1.5pt; }

  .yz-pp__corner{
    position: absolute;
    width: 0.42in; height: 0.42in;
  }
  .yz-pp__corner--tl{ top: -0.5pt;    left: -0.5pt;  }
  .yz-pp__corner--tr{ top: -0.5pt;    right: -0.5pt; transform: rotate(90deg); }
  .yz-pp__corner--br{ bottom: -0.5pt; right: -0.5pt; transform: rotate(180deg); }
  .yz-pp__corner--bl{ bottom: -0.5pt; left: -0.5pt;  transform: rotate(270deg); }

  /* The small mark under the clue number. Fixed width so it never
     stretches, and centred by auto margins. */
  .yz-pp__mini{
    width: 0.52in;
    height: auto;
    margin: 0.06in auto 0;
  }

  .yz-pp__card-n{
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
    font-size: 8.5pt;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 0;
  }
  /* The clue sits in the middle of its card, whatever its length.
     Without the flex the foot's auto margin wins and every clue
     hugs the top of the card with an inch of nothing beneath it. */
  .yz-pp__card-text{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 13pt;
    line-height: 1.45;
  }
  .yz-pp__card-foot{
    margin-top: auto;
    padding-top: 0.14in;
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
    font-size: 7pt;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #999;
  }

  /* ---- the grown-up's sheet -------------------------------- */

  .yz-pp--host{ padding-top: 0.1in; }

  .yz-pp__h1{
    font-size: 21pt;
    line-height: 1.15;
    margin: 0;
    text-align: center;
  }
  /* Under the title, at a fixed width so the engraved rule keeps its
     taper. Stretched, a swelled rule stops looking cut and starts
     looking like a mistake. */
  .yz-pp__divider{
    display: block;
    width: 2.4in;
    height: auto;
    margin: 0.07in auto 0.16in;
  }
  .yz-pp__lead{
    margin: 0 0 0.14in;
    font-size: 10.5pt;
    color: #333;
  }

  /* Where the prize goes, said once and said first. It is the only
     thing that has to be in place before a single card is hidden. */
  .yz-pp__prize{
    margin: 0 0 0.2in;
    padding: 0.1in 0.14in;
    border: 0.75pt solid #444;
    border-left-width: 3pt;
    font-size: 10.5pt;
  }

  /* The prize row closes the table, so it reads as the end. */
  .yz-pp__winrow td{ border-top: 1pt solid #222; border-bottom: 0; }

  .yz-pp__table{
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
  }
  .yz-pp__table th{
    text-align: left;
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
    font-size: 8pt;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #555;
    border-bottom: 1pt solid #222;
    padding: 0 0.1in 4pt 0;
  }
  .yz-pp__table td{
    vertical-align: top;
    padding: 7pt 0.1in 7pt 0;
    border-bottom: 0.5pt solid #ddd;
  }
  .yz-pp__table td:first-child{
    width: 0.9in;
    font-variant-numeric: tabular-nums;
    color: #555;
  }
  .yz-pp__table td:nth-child(2){ width: 2.3in; }
  .yz-pp__room{
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #777;
    display: block;
  }

  .yz-pp__tip{
    margin-top: 0.22in;
    padding: 0.14in 0.16in;
    border: 0.75pt solid #bbb;
    font-size: 10pt;
  }

  /* ---- the checklist sheet ---------------------------------
     One per copy, so each child or team gets their own. Framed
     like a clue card, because it is the same product. */

  .yz-pp__findframe{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 9.55in;
    border: 0.5pt solid #444;
    padding: 0.34in 0.42in 0.46in;
    text-align: center;
  }
  /* The slug belongs INSIDE the frame's padding. At the frame's own
     edge it printed straight through the corner ornaments. */
  .yz-pp--find .yz-pp__slug{
    left: 0.42in; right: 0.42in; bottom: 0.17in;
  }
  .yz-pp--find .yz-pp__h1{ font-size: 24pt; }

  /* THE NAME LINE ARRIVES EMPTY. A box somebody writes in is blank,
     and what it is for is said BELOW it, never printed inside it. */
  .yz-pp__nameline{ margin: 0.1in auto 0.24in; width: 3.2in; }
  .yz-pp__rule{
    display: block;
    height: 0;
    border-bottom: 0.75pt solid #444;
  }
  .yz-pp__namelabel{
    display: block;
    margin-top: 3pt;
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
    font-size: 8pt;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #777;
  }

  .yz-pp__findlead{
    margin: 0 auto 0.26in;
    max-width: 4.6in;
    font-size: 10.5pt;
    color: #333;
  }

  /* A GRID, not columns, and it grows to fill the sheet.
     With `columns` a twelve item list stopped a third of the way down
     and left two thirds of the page blank, which reads as unfinished.
     A grid inside flex:1 with align-content: space-between spreads the
     rows down whatever height is left, so a short list and a long one
     both fill the page. Rows are generous either way: a child ticks
     these with a fat pencil. */
  .yz-pp__finds{
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: space-between;
    column-gap: 0.42in;
    font-size: 12pt;
  }
  .yz-pp__finds li{
    display: flex;
    align-items: flex-start;
    gap: 9pt;
    padding: 7pt 0;
    border-bottom: 0.5pt solid #ddd;
    break-inside: avoid;
    line-height: 1.3;
  }
  /* Empty, and big enough to tick without aiming. */
  .yz-pp__tickbox{
    flex: none;
    width: 15pt; height: 15pt;
    margin-top: 1pt;
    border: 1pt solid #444;
  }

  /* ---- the slug along the foot of every sheet -------------- */

  .yz-pp__slug{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-between;
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
    font-size: 7.5pt;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #999;
    border-top: 0.5pt solid #ddd;
    padding-top: 5pt;
  }
}