/* HEX & RGB Studio: the colour parts on top of the Media Engine layout (engine.css). */
.hx { --hx: #a855f7; }
/* Colour tools work before a picture is open */
.mx.hx:not(.has-pic) .mx-ctx { opacity: 1; pointer-events: auto; }
.mx.hx:not(.has-pic) .mx-ctx .hx-seg { opacity: .38; pointer-events: none; }
.hx .mx-stage.hand, .hx .mx-stage.panning { cursor: grab; }
.hx .mx-stage.panning:active { cursor: grabbing; }
.hx[data-tool="pick"] .mx-board { cursor: crosshair; }
.hx .mx-board canvas#mx-view { image-rendering: pixelated; }

/* Top bar: the colour right now */
.hx-now { display: flex; align-items: center; gap: 4px; height: 40px; padding: 3px 4px 3px 4px; border-radius: 12px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.hx-now i { flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--hx); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.hx-code { height: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: none; color: #e4e4e7; font: 700 13px ui-monospace, "JetBrains Mono", Consolas, monospace; cursor: pointer; white-space: nowrap; transition: background .2s; }
.hx-code b { color: #fff; font-weight: 800; }
.hx-code:hover { background: rgba(255,255,255,.08); }
.hx-seg { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--soft); }
.hx-seg span { padding: 0 8px; color: #8a8d9b; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hx-seg button { height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: #a1a1aa; font: 700 12px Inter, system-ui, sans-serif; cursor: pointer; }
.hx-seg button[aria-pressed="true"] { background: rgba(255,255,255,.1); color: #fff; }

/* Magnifier */
.hx-loupe { position: fixed; z-index: 50; display: grid; justify-items: center; gap: 6px; pointer-events: none; transform: translate(-50%, -100%); }
.hx-loupe canvas { width: 132px; height: 132px; border-radius: 50%; image-rendering: pixelated; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hx), 0 18px 40px rgba(0,0,0,.6); background: #000; }
.hx-loupe b { padding: 4px 9px; border-radius: 8px; background: rgba(8,8,12,.92); color: #fff; font: 800 12px ui-monospace, Consolas, monospace; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* Colour pane */
.hx-big { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 120px; margin-bottom: 14px; padding: 14px 16px; border-radius: 16px; background: var(--hx); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px -22px var(--hx); color: var(--hx-ink, #fff); transition: background .2s; }
.hx-big b { font: 800 24px ui-monospace, "JetBrains Mono", Consolas, monospace; letter-spacing: .02em; }
.hx-big span { font-size: 13px; font-weight: 700; opacity: .8; }
.hx-field { display: grid; grid-template-columns: 38px minmax(0, 1fr) 36px; align-items: center; gap: 8px; margin-bottom: 8px; }
.hx-field > span { color: #8a8d9b; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.hx-in { display: flex; align-items: center; height: 40px; padding: 0 10px; border-radius: 11px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
.hx-in em { color: #71717a; font-style: normal; font-weight: 800; }
.hx-in input, .hx-rgb input { width: 100%; min-width: 0; border: 0; background: none; color: #fff; font: 700 14px ui-monospace, Consolas, monospace; outline: none; text-transform: uppercase; }
.hx-rgb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hx-rgb input { height: 40px; padding: 0 8px; border-radius: 11px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); -moz-appearance: textfield; }
.hx-rgb input::-webkit-inner-spin-button { display: none; }
.hx-in:focus-within, .hx-rgb input:focus { box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.hx-copy { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: #a1a1aa; cursor: pointer; }
.hx-copy:hover { background: rgba(255,255,255,.08); color: #fff; }
.hx-wheel { width: 100%; height: 38px; margin-top: 6px; padding: 0; border: 0; border-radius: 11px; background: none; cursor: pointer; }
.hx-wheel::-webkit-color-swatch-wrapper { padding: 0; }
.hx-wheel::-webkit-color-swatch { border: 0; border-radius: 11px; }
.hx-formats { display: grid; gap: 4px; }
.hx-formats button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255,255,255,.03); color: #e4e4e7; font: 600 13px ui-monospace, Consolas, monospace; text-align: right; cursor: pointer; transition: background .2s; }
.hx-formats button small { color: #8a8d9b; font: 800 10.5px Inter, system-ui, sans-serif; letter-spacing: .1em; }
.hx-formats button:hover { background: rgba(255,255,255,.08); color: #fff; }
.hx-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hx-contrast div { padding: 12px; border-radius: 12px; background: var(--hx); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.hx-contrast b { display: block; font-size: 20px; font-weight: 800; }
.hx-contrast small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; opacity: .85; }

/* Swatches */
.hx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.hx-sw { position: relative; aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: transform .15s; }
.hx-sw:hover { transform: translateY(-2px) scale(1.04); z-index: 1; }
.hx-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px #06060a, 0 0 0 4px #fff; }
.hx-picks { display: grid; gap: 6px; }
.hx-pick { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border-radius: 12px; background: rgba(255,255,255,.03); }
.hx-pick i { width: 34px; height: 34px; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); cursor: pointer; }
.hx-pick b { overflow: hidden; color: #fff; font: 700 13px ui-monospace, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.hx-pick b small { display: block; color: #8a8d9b; font: 600 11px ui-monospace, Consolas, monospace; }
.hx-pick button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: #8a8d9b; cursor: pointer; }
.hx-pick button:hover { background: rgba(255,255,255,.08); color: #fff; }
.hx-pick svg { width: 15px; height: 15px; }
.hx-empty { margin: 0; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.03); color: #8a8d9b; font-size: 13px; line-height: 1.55; text-align: center; }
.hx-ramp { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); overflow: hidden; border-radius: 12px; }
.hx-ramp .hx-sw { aspect-ratio: auto; height: 54px; border-radius: 0; box-shadow: none; }
.hx-ramp .hx-sw[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff; transform: none; }
.hx-harm { margin-bottom: 14px; }
.hx-harm h4 { margin: 0 0 7px; color: #a1a1aa; font-size: 12px; font-weight: 700; }
.hx-harm .hx-grid { grid-template-columns: repeat(5, 1fr); }
.hx-spec { display: block; width: 100%; height: 150px; border-radius: 12px; cursor: crosshair; touch-action: none; }

@media (max-width: 760px) {
  .hx-now { height: 36px; }
  .hx-now i { width: 28px; height: 28px; }
  .hx-code { height: 28px; padding: 0 7px; font-size: 12px; }
  .hx-seg button { height: 28px; }
  .hx-big { height: 84px; margin-bottom: 10px; }
  .hx-big b { font-size: 20px; }
  .hx-loupe canvas { width: 112px; height: 112px; }
}

/* Help tab */
.hx-help h2 { margin: 0 0 8px; color: #fff; font-size: 16px; font-weight: 800; }
.hx-help > p { margin: 0 0 12px; color: #a1a1aa; font-size: 13px; line-height: 1.6; }
.hx-help code { padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.07); color: #e4e4e7; font-size: 12px; }
.hx-help details { border-bottom: 1px solid var(--line); }
.hx-help summary { padding: 12px 2px; color: #f4f4f5; font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
.hx-help summary::-webkit-details-marker { display: none; }
.hx-help summary::after { content: "+"; float: right; color: #8a8d9b; }
.hx-help details[open] summary::after { content: "–"; }
.hx-help details p { margin: 0 2px 12px; color: #a1a1aa; font-size: 13px; line-height: 1.6; }
.hx-help a { color: #22d3ee; }