/**
 * Colour, Theme and Font, as three controls that name what they set and what
 * they are set to, each opening only its own choices.
 *
 * The builder grew these first (.ne-look-pill and friends in new-event.html)
 * and this is the same design lifted out for the pages an attendee sees: the
 * Appearance page and the prompt that offers it on a first visit. Kept as its
 * own stylesheet rather than copied into each: two copies of a popover drift,
 * and the drift shows up as one screen with rounded tiles and one without.
 *
 * .lk-, not .ne-, and not shared with the builder's block: those class names
 * are load-bearing in a 7000-line file that ships its own <style>, and moving
 * them to prove a point is a change with no user on the other end of it.
 */

/* flex-start, not the default stretch: the open panel is a child of one
   control, and on any layout where it is not taken out of flow the other two
   grow to its height. */
.lk-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:flex-start;}
.lk-ctl{position:relative;flex:1 1 150px;min-width:0;display:flex;}

.lk-pill{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;
  background:var(--ot-surface);border:1px solid var(--ot-border-strong);
  border-radius:12px;padding:9px 12px;cursor:pointer;font-family:inherit;
  min-height:50px;color:var(--ot-text);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.lk-pill:hover{border-color:var(--ot-accent);}
.lk-pill:focus-visible{outline:2px solid var(--ot-link);outline-offset:2px;}
.lk-pill.is-open{border-color:var(--ot-accent);box-shadow:0 0 0 2px var(--ot-accent-soft);}
.lk-pill-label{font-size:14px;font-weight:700;white-space:nowrap;}
/* The value, pushed right the way a native picker does it, and the first thing
   to give up room when three controls share a narrow row. */
.lk-pill-value{
  margin-left:auto;font-size:13.5px;font-weight:600;color:var(--ot-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.lk-pill-chev{flex:none;display:grid;place-items:center;color:var(--ot-faint);}
.lk-pill-chev svg{width:15px;height:15px;display:block;}

/* Three previews, each showing what its own control sets. The page is already
   painted in the scheme being chosen, so the first two read the same tokens it
   does and follow along. */
.lk-dot{
  width:22px;height:22px;flex:none;border-radius:999px;
  background:var(--ot-accent);border:1px solid var(--ot-border-strong);
}
.lk-ground{
  width:22px;height:22px;flex:none;border-radius:7px;
  border:1px solid var(--ot-border-strong);
  background-color:var(--ot-bg);
  /* The wash as well as the colour, squeezed so a 22px chip shows the part of
     it that has anything in it. Without this, Gradient drew as a plain white
     square - identical to White, which is the one thing it is not. */
  background-image:var(--ot-bg-image, none);
  background-repeat:no-repeat;
  background-size:100% 340px;
}
.lk-ag{
  width:26px;flex:none;font-size:17px;line-height:1;font-weight:700;
  text-align:center;color:var(--ot-text);
}

.lk-pop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:300px;max-width:min(380px, calc(100vw - 40px));
  background:var(--ot-surface-2);border:1px solid var(--ot-border-strong);
  border-radius:14px;padding:12px;box-shadow:var(--ot-shadow);
  animation:lk-pop-in .14s ease-out both;
}
.lk-pop-wide{min-width:340px;}
.lk-pop-fonts{min-width:400px;max-width:min(430px, calc(100vw - 40px));}
@keyframes lk-pop-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
/* Right-anchored once the button is far enough across that a left-anchored
   panel would run off the screen. */
.lk-ctl:last-of-type .lk-pop{left:auto;right:0;}
.lk-pop-hint{font-size:11.5px;color:var(--ot-faint);font-weight:500;margin:8px 0 0;line-height:1.4;}
.lk-pop-back{position:fixed;inset:0;z-index:59;}

/* Ground: three across, one line. */
.lk-seg{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:3px;border-radius:10px;
  background:var(--ot-bg);border:1px solid var(--ot-border-strong);
}
.lk-seg button{
  appearance:none;border:none;background:transparent;color:var(--ot-muted);font:inherit;font-weight:700;
  font-size:13px;padding:10px 12px;border-radius:8px;cursor:pointer;min-height:40px;
}
.lk-seg button.is-on{background:var(--ot-cta);color:var(--ot-cta-ink);}

/* Accents: ten, five across. */
.lk-schemes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
/* Any colour: a swatch that opens the device's picker, and the hex beside it. */
.lk-cc{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;border:1px solid var(--ot-border-strong);
  border-radius:12px;background:var(--ot-surface-2);}
.lk-cc.is-on{border-color:var(--ot-accent);box-shadow:0 0 0 1px var(--ot-accent);}
.lk-cc-swatch{position:relative;flex:0 0 auto;width:32px;height:32px;border-radius:999px;cursor:pointer;overflow:hidden;
  background:conic-gradient(from 0deg,#f43f5e,#f59e0b,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#f43f5e);}
.lk-cc.is-on .lk-cc-swatch{background:var(--cc);box-shadow:inset 0 0 0 2px rgba(255,255,255,0.6);}
.lk-cc-swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;}
.lk-cc-k{flex:1 1 auto;font-size:14px;font-weight:600;color:var(--ot-text);}
.lk-cc-hex{flex:0 0 7.5rem;width:7.5rem;height:32px;padding:0 10px;font-size:14px;text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ot-text);background:var(--ot-input-bg);
  border:1px solid var(--ot-field-border, var(--ot-border-strong));border-radius:8px;}
.lk-cc-hex:focus{outline:2px solid var(--ot-accent);outline-offset:-1px;}
.lk-cc-note{font-size:12px;color:var(--ot-faint);font-weight:500;margin:8px 0 0;line-height:1.4;}
.lk-scheme{
  appearance:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 4px 8px;border-radius:11px;min-height:66px;
  background:var(--lk-swatch-bg, var(--ot-surface));
  border:1px solid var(--ot-border-strong);color:var(--ot-text);
}
.lk-scheme:hover{border-color:var(--ot-accent);}
.lk-scheme:focus-visible{outline:2px solid var(--ot-link);outline-offset:2px;}
.lk-scheme.is-on{border-color:var(--lk-swatch-accent, var(--ot-accent));box-shadow:0 0 0 2px var(--ot-accent-soft);}
.lk-scheme-dot{
  width:20px;height:20px;border-radius:999px;
  background:var(--lk-swatch-accent, var(--ot-accent));border:1px solid rgba(0,0,0,0.12);
}
.lk-scheme-label{font-size:11px;font-weight:700;color:var(--ot-muted);line-height:1.15;text-align:center;}
.lk-scheme.is-on .lk-scheme-label{color:var(--ot-text);}

/* Faces: twelve, six across - two rows rather than three, so the panel does
   not run past the bottom of a phone. */
.lk-fonts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
.lk-font{
  appearance:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px 6px;border-radius:10px;min-height:52px;
  background:var(--ot-surface);border:1px solid var(--ot-border-strong);color:var(--ot-text);
}
.lk-font:hover{border-color:var(--ot-accent);}
.lk-font:focus-visible{outline:2px solid var(--ot-link);outline-offset:2px;}
.lk-font.is-on{border-color:var(--ot-accent);box-shadow:0 0 0 2px var(--ot-accent-soft);}
.lk-font-sample{font-size:19px;line-height:1;font-weight:700;}
.lk-font-name{font-size:10px;font-weight:700;color:var(--ot-muted);line-height:1.15;text-align:center;white-space:nowrap;}
.lk-font.is-on .lk-font-name{color:var(--ot-text);}

@media (prefers-reduced-motion: reduce){ .lk-pop{animation:none;} }

/* On a phone every panel is a sheet. Anchored under a pill a third of the row
   wide, a 300-400px grid hangs off both edges of the screen and the first and
   last tiles cannot be reached. */
@media (max-width:768px){
  .lk-pop,
  .lk-ctl:last-of-type .lk-pop{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:auto;min-width:0;max-width:none;z-index:10041;
    border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;
    max-height:min(76vh, 560px);overflow:auto;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    animation:lk-sheet-up .26s cubic-bezier(.22,1,.36,1) both;
  }
  .lk-pop-back{background:rgba(4,8,20,0.55);z-index:10040;}
  .lk-fonts{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .lk-font{min-height:64px;padding:10px 6px 8px;gap:5px;}
  .lk-font-sample{font-size:23px;}
  .lk-font-name{font-size:11px;}
  .lk-schemes{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@keyframes lk-sheet-up{from{transform:translateY(14px);opacity:0;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion: reduce){ .lk-pop{animation:none !important;} }