/* Background colours (app/js/ui/bg-colour.js) and the shared colour wheel's hex field, eyedropper and swatches. */
.wheelbox div.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.wheelbox div.field > span:first-child { color: var(--ink); font-weight: 600; font-size: 13px; }
.wheel-hexrow { display: flex; gap: 6px; align-items: center; min-width: 0; }
.wheel-swatch { flex: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.hexin { flex: 1 1 auto; min-width: 0; max-width: 150px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font: 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; } /* 16px: no zoom on a phone */
.hexin[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.hexmsg { color: var(--bad); } .hexmsg:empty { display: none; }
.btn.eyedrop { flex: 0 0 auto; width: 40px; min-height: 40px; padding: 0; display: grid; place-items: center; }
.wheel-extra { grid-column: 1 / -1; display: grid; gap: 8px; }
.wsw-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wsw-row > .tiny { flex: 0 0 100%; }
.wsw { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); padding: 0; cursor: pointer; }
.wsw:focus-visible, .stopbtn:focus-visible, .cbtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hexcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* the wheel inside a panel or the picker: stacked, never wider than its box */
.bgwheel .wheelbox, .cbcustom .wheelbox { grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; }
.bgwheel .wheel, .cbcustom .wheel { width: min(240px, 100%); height: auto; aspect-ratio: 1; }
.bgwheel { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); min-width: 0; }
.bgwheel .stack { width: 100%; }

/* the editor in the Background panel */
.bgedit { min-width: 0; }
.bgstops { gap: 8px; }
.stopbtn { display: grid; justify-items: center; gap: 4px; min-width: 70px; min-height: 48px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.stopbtn .sw { width: 30px; height: 30px; }
.stopbtn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.chip .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, .18); }
.groundline { line-height: 1.4; }

/* Colour and gradients: tiles by group */
.cbwrap { gap: 26px; }
.cbsec { display: grid; gap: 10px; min-width: 0; }
.cbhead { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.cbhead h4 { margin: 0; font-size: 14px; font-weight: 650; }
.cbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.cbtile { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; min-width: 0; }
.cbfill { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .12); overflow: hidden; transition: transform .2s; }
.cbtile:hover .cbfill { transform: translateY(-2px); }
.cbtile[aria-pressed="true"] .cbfill { outline: 3px solid var(--accent); outline-offset: 2px; }
.cbname { font-size: 12.5px; line-height: 1.3; }
.cbswatch { display: inline-block; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .15); }
.cbcustom { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
/* texture tiles: a CSS sketch of the canvas texture (the render paints the real one) */
.cbtex { position: absolute; inset: 0; }
.cbtex.dots { background-image: radial-gradient(rgba(20, 19, 17, .2) 1.1px, transparent 1.4px); background-size: 8px 8px; }
.cbtex.grid { background-image: linear-gradient(rgba(20, 19, 17, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 19, 17, .1) 1px, transparent 1px); background-size: 14px 14px; }
.cbtex.linen { background-image: repeating-linear-gradient(0deg, rgba(20, 19, 17, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(20, 19, 17, .05) 0 1px, transparent 1px 3px); }
.cbtex.vignette { background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(0, 0, 0, .55)); }
.cbtex.paper, .cbtex.film { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.cbtex.paper { mix-blend-mode: multiply; opacity: .5; } .cbtex.film { mix-blend-mode: screen; opacity: .35; }
@media (max-width: 760px) {
  .cbgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .hexin { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .cbfill { transition: none; } }
/* Make's settings column on a phone: the column never grows past the screen (a long card label wraps instead).
   Before this, the Colour card's button held the column at 411 px on a 375 px screen. */
@media (max-width: 980px) {
  .make > .controls, .controls > * { min-width: 0; }
  .pickcard > .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 130px; }
}