/* Choosing a kind of code, and saying what goes in it.
   ------------------------------------------------------------------
   Twenty kinds of code is too many to put on a screen at once, so they
   are grouped and the groups stay shut until somebody opens one. The
   exclusive behaviour comes from the details name attribute, which the
   browser does on its own; nothing here depends on script.

   The pages a scan LANDS on are not styled here. They carry their own
   CSS inline, in qr_pages.php, so that scanning a sticker fetches no
   stylesheet at all. */

.tchooser { margin: 10px 0 4px; }

.tsearch { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tsearch input {
  flex: 1 1 auto;
  min-width: 0;
}
.tcount { font-size: 12.5px; color: var(--muted, #6b6b64); white-space: nowrap; }
.tcount:empty { display: none; }

.tgroup {
  border: 1px solid var(--line, #e4e4de);
  border-radius: 12px;
  background: var(--card, #fff);
  margin-bottom: 8px;
  overflow: hidden;
}
.tgroup > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  list-style: none;
  user-select: none;
}
.tgroup > summary::-webkit-details-marker { display: none; }
.tgroup > summary::marker { content: ""; }
.tgroup > summary:hover { background: var(--accenttint, #eef4f2); }
.tgroup > summary:focus-visible { outline: 2px solid var(--accent, #125a50); outline-offset: -2px; }

/* The arrow is drawn rather than borrowed from the browser, so it turns
   the same way in every one of them. */
.tgroup > summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted, #6b6b64);
  border-bottom: 2px solid var(--muted, #6b6b64);
  transform: rotate(-45deg);
  margin-left: 2px;
  transition: transform .15s ease;
}
.tgroup[open] > summary::before { transform: rotate(45deg); }
.tgroup[open] > summary { border-bottom: 1px solid var(--line, #e4e4de); }

.gname { flex: 1 1 auto; }
.gcount {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, #6b6b64);
  background: var(--bg, #f5f5f2);
  border-radius: 999px;
  padding: 2px 9px;
}

.tcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  padding: 12px;
}

.tcard {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: start;
  gap: 11px;
  padding: 12px;
  border: 1.5px solid var(--line, #e4e4de);
  border-radius: 11px;
  background: var(--card, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.tcard:hover { border-color: var(--accent, #125a50); background: var(--accenttint, #eef4f2); }
.tcard:focus-visible { outline: 2px solid var(--accent, #125a50); outline-offset: 2px; }
.tcard[hidden] { display: none; }

.tico {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--bg, #f5f5f2);
}
.tico svg { width: 18px; height: 18px; }

.tbody { display: block; min-width: 0; }
.tbody b { display: block; font-size: 14px; line-height: 1.3; }
.tblurb {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #6b6b64);
}

/* The badge. It says what a code IS, so the same class is used on the
   chooser, in the list and on the code's own page and they cannot end up
   describing the same thing two different ways. */
.tbadge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tbadge.dyn { background: var(--accenttint, #eef4f2); color: var(--accent, #125a50); }
.tbadge.fix { background: var(--bg, #f5f5f2); color: var(--muted, #6b6b64); }

.tnone { color: var(--muted, #6b6b64); font-size: 13px; padding: 6px 2px; }

/* ------------------------------------------------------------------
   Dynamic or fixed. Two cards side by side, both saying what they cost
   you, rather than a switch labelled with a word nobody outside this
   industry uses. */

.qsub { margin: 22px 0 8px; font-size: 14px; }

.qmode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.qmodeopt {
  position: relative;
  display: block;
  padding: 13px 14px;
  border: 1.5px solid var(--line, #e4e4de);
  border-radius: 11px;
  background: var(--card, #fff);
  cursor: pointer;
}
.qmodeopt:hover { border-color: var(--accent, #125a50); }
.qmodeopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qmodeopt b { display: block; font-size: 14px; margin-bottom: 4px; }
.qmodeopt span { display: block; font-size: 12px; line-height: 1.5; color: var(--muted, #6b6b64); }
.qmodeopt:has(input:checked) {
  border-color: var(--accent, #125a50);
  background: var(--accenttint, #eef4f2);
}
.qmodeopt:has(input:focus-visible) { outline: 2px solid var(--accent, #125a50); outline-offset: 2px; }
.qmodeopt.off { opacity: .55; cursor: not-allowed; }
.qmodeopt.off:hover { border-color: var(--line, #e4e4de); }

/* ------------------------------------------------------------------
   The designer, in sections that open one at a time. Same boxes as
   before; only the heading became something you can click. */

.dgroup > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}
.dgroup > summary::-webkit-details-marker { display: none; }
.dgroup > summary::marker { content: ""; }
.dgroup > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted, #6b6b64);
  border-bottom: 2px solid var(--muted, #6b6b64);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.dgroup[open] > summary::after { transform: rotate(45deg); }
.dgroup > summary:focus-visible { outline: 2px solid var(--accent, #125a50); outline-offset: 2px; }
.dgroup > summary h3 { margin: 0; font-size: 14px; letter-spacing: .01em; }
.dgroup > summary:hover h3 { color: var(--accent, #125a50); }
.dgroup > .help:first-of-type { margin-top: 10px; }

/* ------------------------------------------------------------------
   Repeatable rows: the links on a card, the buttons on an event page.
   Three blank ones are always offered, so the common case needs no
   button at all, and the button is there for the uncommon one. */

.qrows { display: grid; gap: 7px; margin-bottom: 9px; }

.qrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 7px;
}
@media (max-width: 560px) {
  .qrow { grid-template-columns: 1fr; }
}
.qrow input { width: 100%; min-width: 0; }

/* Only ever fades a row that is already empty, so nothing a customer typed
   can be dimmed by a rule about layout. */
.qrow:has(input:placeholder-shown):has(input:not(:focus)) { opacity: .82; }
.qrow:focus-within { opacity: 1; }