/* Crest and logo tools: "Tidy with AI" (Before and After) and the crest picker on the start-a-club form.
   Used by Club settings (js/screens/club-logo-ui.js) and the start-a-club form (start.html). Tokens only, phone first, 44px targets. */

/* ---- Tidy with AI ---- */
.tidy { display: grid; gap: var(--sp-3, 12px); min-width: 0; margin-top: var(--sp-3, 12px); }
.tidy[hidden], .tidy__result[hidden], .tidy__colours[hidden], .tidy__err[hidden] { display: none; }
.tidy__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2, 8px) var(--sp-3, 12px); }
.tidy__go { min-height: 44px; gap: 8px; }
.tidy__go svg { flex: none; color: var(--club-c, var(--primary)); }
.tidy__go[aria-busy="true"] svg { animation: tidy-spin 1.1s linear infinite; }
.tidy__left { margin: 0; font-size: var(--fs-sm, .875rem); color: var(--text-2); }
.tidy__hint { margin: 0; }
.tidy__result { display: grid; gap: var(--sp-3, 12px); padding: var(--sp-4, 16px); min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); box-shadow: var(--shadow-1); }
.tidy__result { scroll-margin-top: 84px; }
.tidy__result.is-in { animation: tidy-in .35s ease-out both; }
.tidy__compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2, 8px); }
.tidy__pane { margin: 0; display: grid; gap: 6px; justify-items: center; min-width: 0; }
.tidy__pane figcaption { font-size: var(--fs-sm, .875rem); font-weight: 600; color: var(--text-2); }
.tidy__pane--after figcaption { color: var(--text); }
.tidy__tile { width: 100%; max-width: 168px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); --chk-a: color-mix(in srgb, var(--text) 5%, var(--card)); --chk-b: color-mix(in srgb, var(--text) 11%, var(--card));
  background: conic-gradient(var(--chk-a) 25%, var(--chk-b) 0 50%, var(--chk-a) 0 75%, var(--chk-b) 0) 0 0 / 16px 16px; }
.tidy__tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tidy__pane--after .tidy__tile { border-color: color-mix(in srgb, var(--club-c, var(--primary)) 55%, var(--line));
  box-shadow: 0 0 22px color-mix(in srgb, var(--club-c, var(--primary)) 35%, transparent); }
.tidy__arrow { color: var(--text-3); display: grid; }
.tidy__note { margin: 0; color: var(--text-2); font-size: var(--fs-sm, .875rem); overflow-wrap: anywhere; }
.tidy__colours { display: grid; gap: 6px; }
.tidy__colours .label { margin: 0; }
.tidy__swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
.tidy__swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--raised, var(--card)); color: var(--text); font: inherit; font-size: var(--fs-sm, .875rem); font-weight: 600;
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.tidy__swatch:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--sw) 60%, var(--line)); }
.tidy__swatch[aria-pressed="true"] { border-color: var(--sw); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 45%, transparent); }
.tidy__swatch:focus-visible { outline: 2px solid var(--focus, var(--primary)); outline-offset: 2px; }
.tidy__swatch-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); border: 2px solid color-mix(in srgb, var(--text) 25%, transparent); flex: none; }
.tidy__swatch-hex { font-weight: 600; } /* the palette colour's name */
.tidy__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
.tidy__actions .btn { flex: 1 1 9rem; min-height: 44px; }
@keyframes tidy-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tidy-spin { to { transform: rotate(360deg); } }
@media (max-width: 380px) { .tidy__compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tidy__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .tidy__result.is-in, .tidy__go[aria-busy="true"] svg { animation: none; } .tidy__swatch { transition: none; } }
html[data-paused="true"] .tidy__go svg { animation-play-state: paused; }

/* ---- club colours and crest on the start-a-club form (the colour swatches and the logo section of Club settings are in components.css) ---- */
.crest-q { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-2, 8px); min-width: 0; }
.crest-q__panel { display: grid; gap: var(--sp-4, 16px); padding: var(--sp-4, 16px); border: 1px solid var(--hair, var(--line)); border-radius: var(--card-r, 16px); min-width: 0; }
.crest-q__panel[hidden] { display: none; }
.crest-q__group { display: grid; gap: 6px; min-width: 0; }
.crest-q__group .label { margin: 0; }
.crest-q__preview { display: flex; align-items: center; gap: var(--sp-3, 12px); min-width: 0; }
.crest-q__preview-name { min-width: 0; font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.1rem; overflow-wrap: anywhere; }
.crest-q__preview-sub { display: block; font-family: var(--font-body, inherit); font-weight: 500; font-size: var(--fs-sm, .875rem); color: var(--text-2); }
.crest-q__file { max-width: 100%; min-width: 0; color: var(--text-2); font: inherit; font-size: var(--fs-sm, .875rem); }
.crest-q__file::file-selector-button { min-height: 44px; margin-right: 12px; padding: 0 16px; border-radius: var(--r-md, 12px); border: 1px solid var(--line);
  background: var(--raised, var(--card)); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.crest-q__file::file-selector-button:hover { border-color: color-mix(in srgb, var(--club-c, var(--primary)) 55%, var(--line)); }
.crest-q__loaded { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2, 8px) var(--sp-3, 12px); }
.crest-q__loaded[hidden] { display: none; }