/* Shared chip-colour picker widget styles.
 *
 * Used across tools with DIFFERENT token names (hpi.css: --color-accent /
 * --color-text / --glass-border; chip-planner.css: --accent / --ink /
 * --border), so each property resolves through a fallback chain ending in a
 * literal that works on the HPI red felt. Self-contained — link this sheet
 * wherever the picker is used. */

.cpick {
  position: relative;
  display: block;
  --cpick-accent: var(--color-accent, var(--accent, #ffcc00));
  --cpick-text:   var(--color-text, var(--ink, #f0e8e8));
  --cpick-muted:  var(--color-text-muted, var(--ink-muted, rgba(240, 232, 232, 0.62)));
  --cpick-border: var(--glass-border, var(--border, rgba(255, 255, 255, 0.22)));
}

.cpick-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
  color: var(--cpick-text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--cpick-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
}
.cpick-trigger:focus-visible { outline: 2px solid var(--cpick-accent); outline-offset: 1px; }
.cpick-trigger[aria-expanded="true"] { border-color: var(--cpick-accent); }

.cpick-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
}
.cpick-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpick-name.cpick-empty { color: var(--cpick-muted); }
.cpick-caret {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--cpick-muted);
}

.cpick-pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-width: min(280px, 86vw);
  padding: 10px;
  /* Opaque enough that busy content behind doesn't bleed through; the frosted
     "glass" read comes from the blur + light border + shadow, not low alpha. */
  background: rgba(46, 18, 18, 0.95);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--cpick-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Inline mode: the palette expands in normal flow (pushing content / growing
   the card) instead of floating over it — avoids any overlap/bleed on busy
   backgrounds. Used where the layout grows cleanly (e.g. Easy Chip Calc cards). */
.cpick-inline .cpick-pop {
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.cpick-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cpick-sw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px;
}
.cpick-sw:hover, .cpick-sw:focus-visible { border-color: var(--cpick-accent); outline: none; }
.cpick-sw.is-selected { border-color: var(--cpick-accent); box-shadow: 0 0 0 1px var(--cpick-accent); }
.cpick-sw .cpick-dot { width: 26px; height: 26px; }
.cpick-dot-none { border-style: dashed; }

.cpick-custom {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cpick-border);
}
.cpick-custom-lbl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cpick-muted);
}
.cpick-custom-input {
  padding: 6px 8px;
  border: 1px solid var(--cpick-border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--cpick-text);
  font: inherit;
  font-size: 0.9rem;
}
.cpick-custom-input:focus-visible { outline: 2px solid var(--cpick-accent); outline-offset: 1px; }
.cpick-custom-apply {
  padding: 6px 12px;
  border: 1px solid var(--cpick-accent);
  border-radius: 6px;
  background: var(--cpick-accent);
  color: #1a0800;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media print {
  .cpick-pop { display: none !important; }
  .cpick-trigger { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; }
  .cpick-caret { border-top-color: #000; }
}