/* The two inks share one area; only the active picker takes up vertical space. */
#colors { margin-block: 12px; }
#colors .ink-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
#colors .ink-tab {
  appearance:none; min-width:0; width:100%; border:1px solid #38434a; border-radius:7px; cursor:pointer;
  background:#191e23; color:#e0e7e8; padding:8px; display:flex; align-items:center; gap:7px; text-align:left;
  transition:background .15s,border-color .15s;
}
#colors .ink-tab:hover,#colors .ink-tab[aria-expanded=true] { background:#202b2d; border-color:#68b9b0; }
#colors .ink-tab i { flex:none; width:21px; height:25px; border:1px solid #ffffff50; border-radius:4px; }
#colors .ink-tab span { min-width:0; font:500 11px/1.35 "Segoe UI",sans-serif; }
#colors .ink-tab code { display:block; color:#a5b2b5; font:10px/1.5 Consolas,monospace; }
#colors .ink-tab b { margin-left:auto; color:#a6b1b6; font-size:12px; }
#colors .ink-panel { border:1px solid #364146; border-radius:8px; background:#161b20; margin-top:7px; padding:12px; }
#colors .ink-panel[hidden] { display:none; }
#colors .ink-plane,#colors .ink-spectrum { position:relative; touch-action:none; user-select:none; border-radius:4px; cursor:crosshair; }
#colors .ink-plane {
  height:138px; background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,white,transparent),hsl(var(--ink-hue) 100% 50%);
  box-shadow:inset 0 0 0 1px #ffffff21;
}
#colors .ink-plane i,#colors .ink-spectrum i {
  position:absolute; display:block; pointer-events:none; transform:translate(-50%,-50%); box-sizing:border-box;
  box-shadow:0 0 0 1px #0009,0 1px 3px #0007; border:2px solid white;
}
#colors .ink-plane i { border-radius:50%; width:13px; height:13px; left:var(--ink-x); top:var(--ink-y); background:var(--ink-color); }
#colors .ink-spectrum { height:26px; margin:5px 2px; cursor:pointer; display:grid; align-items:center; }
#colors .ink-spectrum::before { content:""; height:10px; border-radius:8px; background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red); }
#colors .ink-spectrum i { height:17px; width:8px; border-radius:3px; top:50%; left:var(--ink-spectrum-x); background:hsl(var(--ink-hue) 100% 50%); }
#colors .ink-entry { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#colors .ink-entry label { color:#afbbbe; font:10px/1.3 Consolas,monospace; letter-spacing:.1em; margin:0; }
#colors .ink-entry input { width:96px; max-width:80%; padding:5px 8px; border:1px solid #455258; border-radius:4px; color:#e4eeee; background:#11161a; font:12px/1.45 Consolas,monospace; }
#colors .ink-entry input[aria-invalid=true] { border-color:#e48980; }
#colors .ink-panel small { display:block; margin-top:8px; color:#a0adb3; font:11px/1.4 "Segoe UI",sans-serif; text-transform:none; letter-spacing:0; }
#colors :focus-visible { outline:2px solid #90d6d0; outline-offset:3px; }
@media(prefers-reduced-motion:reduce){ #colors .ink-tab{transition:none} }