/* ============================================================
   look-pickers.css — the LOOK controls: palettes, typefaces, and the
   make-your-own maker behind them.

   Alex, 2026-08-01: "Maybe the colour picker, I want to reproduce. I want
   them to be familiar with our UI so they're not having to learn a new UI
   every time… There should be no learning curve if you moved from one product
   to the other product, from the course builder to the website builder."

   These rules ARE the website builder's Look step. They were written for
   #page-launch-look and had exactly one consumer, so rather than copy them for
   the course they were moved here verbatim and the page opted in with a class.
   Two consumers now, one definition — a coach who has picked a palette for
   their website picks one for their course with the same control, because it
   IS the same control.

   The only edit made in the move was the selector prefix.

   Scoped to `.lk-pickers`, and added to the launch Look page in
   showLaunchLook(). Regression-proofed by
   tests/browser/look-pickers-css.browser.js, which A/Bs computed styles
   against the stylesheet as it was before the move.
   ============================================================ */

.lk-pickers .lk-rail { display: flex; flex-direction: column; gap: 14px; }
.lk-pickers .lk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.lk-pickers .card-h { padding: 15px 18px 11px; border-bottom: 1px solid var(--border-soft); }
.lk-pickers .card-h h3 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.lk-pickers .card-h h3 .n { width: 21px; height: 21px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: "JetBrains Mono", monospace; }
.lk-pickers .card-h .hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.lk-pickers .card-b { padding: 14px 16px 16px; }
.lk-pickers .lk-palgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lk-pickers .lk-pal { border: 1.5px solid var(--border); background: var(--surface); border-radius: 11px; padding: 10px; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .12s, transform .1s; }
.lk-pickers .lk-pal:hover { border-color: var(--accent); transform: translateY(-1px); }
.lk-pickers .lk-pal.on { border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 4px var(--accent-soft); padding: 9px; }
.lk-pickers .lk-pal.recommended .pt { color: var(--accent); font-weight: 600; }
.lk-pickers .lk-brandhint { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; padding: 9px 11px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep, var(--accent)); font-size: 12.5px; line-height: 1.45; }
.lk-pickers .lk-brandhint svg { width: 15px; height: 15px; flex-shrink: 0; }
.lk-pickers .lk-pal .sw { display: flex; gap: 3px; height: 28px; margin-bottom: 7px; }
.lk-pickers .lk-pal .sw span { flex: 1; border-radius: 4px; }
.lk-pickers .lk-pal .sw span:first-child { flex: 1.5; }
.lk-pickers .lk-pal .pn { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 12px; }
.lk-pickers .lk-pal .pt { font-size: 10px; color: var(--text-3); margin-top: 1px; }
.lk-pickers .lk-pal.on .pn { color: var(--accent-deep); }
.lk-pickers .lk-pal.saved .pn::after { content: " · yours"; color: var(--text-4); font-weight: 500; font-size: 10px; }
.lk-pickers .lk-fontgrid { display: flex; flex-direction: column; gap: 7px; }
.lk-pickers .lk-fcard { border: 1.5px solid var(--border); background: var(--surface); border-radius: 11px; padding: 11px 13px; cursor: pointer; text-align: left; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-family: inherit; transition: border-color .12s; }
.lk-pickers .lk-fcard:hover { border-color: var(--accent); }
.lk-pickers .lk-fcard.on { border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 4px var(--accent-soft); padding: 10px 12px; }
.lk-pickers .lk-fcard .sp .h { font-size: 20px; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 2px; font-weight: 600; }
.lk-pickers .lk-fcard .sp .b { font-size: 11px; color: var(--text-3); }
.lk-pickers .lk-fcard .fn { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.lk-pickers .lk-fcard.on .fn { color: var(--accent-deep); }
.lk-pickers .lk-diytoggle { width: 100%; margin-top: 10px; background: transparent; border: 1px dashed var(--border-strong); color: var(--text-2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }
.lk-pickers .lk-diytoggle:hover { color: var(--accent-deep); border-color: var(--accent-2, var(--accent)); background: var(--accent-softer, var(--accent-soft)); }
.lk-pickers .lk-diytoggle svg { width: 13px; height: 13px; }
.lk-pickers .lk-diy { margin-top: 10px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-2); padding: 12px; }
.lk-pickers .lk-diy[hidden] { display: none; }
.lk-pickers .diy-hint { font-size: 11.5px; color: var(--text-3); margin: 0 2px 10px; line-height: 1.4; }
.lk-pickers .roles { display: flex; flex-direction: column; gap: 8px; }
.lk-pickers .role { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }
.lk-pickers .role .pick { width: 36px; height: 36px; border-radius: 9px; border: 1.5px solid var(--border-strong); padding: 0; overflow: hidden; cursor: pointer; background: none; position: relative; }
.lk-pickers .role .pick input { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; cursor: pointer; background: none; }
.lk-pickers .role .rn { font-size: 13px; font-weight: 600; color: var(--text); }
.lk-pickers .role .rd { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.lk-pickers .role .hex { width: 86px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text); text-transform: uppercase; outline: none; }
.lk-pickers .role .hex:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }