/* =========================================================================
   QR create/edit styling — restored 2026-08-26.

   When the personal line was forked from the business install and stripped,
   the QR "new code" chooser and the live designer lost their stylesheet, so
   qr.php's markup (identical to the business side) rendered as a wall of
   unstyled text. This file restores it, ported verbatim from the business
   install's app9.css (designer) + app10.css (chooser, dynamic/fixed picker,
   collapsible groups, repeatable rows).

   THEME BRIDGE: the business CSS uses --accent/--accenttint/--card/--muted,
   which this line names differently. These aliases map them onto the personal
   line's own tokens, so everything picks up the CLAY accent automatically and
   no business green leaks through the fallbacks.
   ========================================================================= */
:root {
  --accent:     var(--brand);
  --accenttint: var(--brand-wash);
  --card:       var(--surface);
  --muted:      var(--ink-3);
}

/* ========================== designer (was app9.css) ====================== */

.designer {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 22px;
  align-items: start;
  margin: 14px 0 8px;
}
@media (max-width: 860px) {
  .designer { grid-template-columns: 1fr; gap: 14px; }
}

.dpane {
  position: sticky;
  top: 16px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e4e4de);
  border-radius: 14px;
  padding: 16px;
}
@media (max-width: 860px) {
  .dpane { position: sticky; top: 0; z-index: 5; padding: 12px;
           display: grid; grid-template-columns: 118px 1fr; gap: 12px;
           align-items: center; }
}

.dpreview {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  transition: opacity .12s ease;
}
.dpreview svg { width: 100%; height: auto; display: block; }
.dpreview.busy { opacity: .55; }

.dpreview::after {
  content: "";
  position: absolute;
  inset: auto 8px 8px auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, #125a50);
  opacity: 0;
  transition: opacity .12s ease;
}
.dpreview.busy::after { opacity: .6; }

.dcaption {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted, #6b6b64);
  line-height: 1.45;
}
@media (max-width: 860px) { .dcaption { margin: 0; } }

.dnote {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--warnbg, #fdf6e3);
  border: 1px solid var(--warnline, #e8d9a8);
  color: var(--warnink, #6b5618);
  font-size: 12.5px;
  line-height: 1.5;
}
.dnote:empty { display: none; }

.dfail {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--bad, #a2361f);
}
.dfail:empty { display: none; }

.dgroup { border-top: 1px solid var(--line, #e4e4de); padding-top: 16px; margin-top: 18px; }
.dgroup:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.dgroup > h3 {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: .01em;
}
.dgroup > .help { margin-top: 0; margin-bottom: 12px; }

.dstyles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.dstyle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border: 1.5px solid var(--line, #e4e4de);
  border-radius: 11px;
  background: var(--card, #fff);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s ease, background .12s ease;
}
.dstyle:hover { border-color: var(--accent, #125a50); }
.dstyle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dstyle svg { display: block; }
.dstyle .nm { font-size: 11.5px; color: var(--muted, #6b6b64); line-height: 1.25; }

.dstyle:has(input:checked) {
  border-color: var(--accent, #125a50);
  background: var(--accenttint, #eef4f2);
}
.dstyle:has(input:checked) .nm { color: var(--ink, #1c1c19); font-weight: 600; }
.dstyle:has(input:focus-visible) { outline: 2px solid var(--accent, #125a50); outline-offset: 2px; }

.dcolor { display: flex; align-items: center; gap: 8px; }
.dcolor input[type=color] {
  width: 44px; height: 34px; padding: 2px;
  border: 1px solid var(--line, #e4e4de);
  border-radius: 8px; background: var(--card, #fff); cursor: pointer;
}
.dcolor input[type=text] {
  width: 8.5em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  text-transform: lowercase;
}

.dpal { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.dpalbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 8px;
  border: 1.5px solid var(--line, #e4e4de);
  border-radius: 999px;
  background: var(--card, #fff);
  font: inherit; font-size: 12.5px;
  color: var(--ink, #1c1c19);
  cursor: pointer;
}
.dpalbtn:hover { border-color: var(--accent, #125a50); }
.dpalbtn i {
  width: 13px; height: 13px; border-radius: 4px;
  border: 1px solid rgba(128, 128, 128, .35);
  display: inline-block;
}

.dsave {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0 4px;
  margin-top: 18px;
  background: linear-gradient(to bottom, transparent, var(--bg, #f5f5f2) 30%);
}

/* ==================== chooser + rows (was app10.css) ===================== */

.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; }

.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);
}

.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; }

.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 group headers, made clickable (collapsible sections) */
.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; }

.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; }

.qrow:has(input:placeholder-shown):has(input:not(:focus)) { opacity: .82; }
.qrow:focus-within { opacity: 1; }