/* Notebook paper, cyan controls and navy type shared with the drawing tools. */
.color-history-dock { --wing-width:224px; --palette-blue:#008fda; --palette-ink:var(--ink,#24334b); --palette-line:#b5c8df; --palette-paper:#f7fbff; position:absolute; left:calc(100% + 5px); bottom:-5px; z-index:6; width:0; }
.color-history-dock.is-open { width:var(--wing-width); }
.color-history-tab { position:absolute; left:100%; bottom:8px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; width:34px; padding:10px 5px 7px; border:1px solid #058bd1; border-left:0; border-radius:0 9px 9px 0; background:linear-gradient(#2ed6f9,#00a6ed); color:white; box-shadow:inset -2px 0 0 #83e6ff,0 3px 2px #1273a54a; font:inherit; font-size:14px; font-weight:800; }
.color-history-tab > span:first-child { writing-mode:vertical-rl; letter-spacing:2px; }
.color-history-tab-arrow { display:grid; place-items:center; width:26px; height:27px; border-top:1px solid #ffffff80; }
.color-history-tab-arrow svg { width:23px; height:23px; stroke-width:2; }
.color-history-tab[aria-expanded=true] .color-history-tab-arrow svg { transform:scaleX(-1); }
.color-history-tab:not(:disabled):hover { transform:none; filter:brightness(1.06); }
.color-history-tab:not(:disabled):active { transform:none; box-shadow:inset 0 2px 4px #12649340; }
.color-history-dock[hidden],body:not([data-phase=drawing]) .color-history-dock { display:none; }
.color-history-panel { container-type:inline-size; display:flex; flex-direction:column; width:100%; height:var(--wing-height,auto); overflow:auto; padding:10px 11px 12px; border:3px solid #d7f1ff; border-left-width:2px; border-radius:0 14px 14px 0; background:linear-gradient(120deg,#fff,#f0f5fa 80%,#fefefe); color:var(--palette-ink); box-shadow:0 0 0 2px var(--palette-blue),0 0 0 4px #55d0ff,0 6px 0 3px #2095cc40,0 10px 18px #2a638b26; }
.color-history-panel[hidden] { display:none; }
.color-history-panel:focus { outline:none; }
.color-history-panel > .color-picker { flex:none; }
.color-history-panel > .color-popover-head { flex:none; margin:0 0 8px; }
.color-history-panel .color-popover-head h2 { color:var(--palette-ink); font:inherit; font-size:clamp(12px,7cqw,15px); font-weight:800; letter-spacing:1px; }
.color-history-panel .close-color-picker { display:none; }
.color-history-panel .common-color-picker { gap:8px; }
.color-history-panel .color-adjustments { padding:0 3%; }
.color-history-panel .color-readout { justify-content:flex-start; align-items:end; gap:7px; }
.color-history-panel .selected-color { width:clamp(18px,11cqw,24px); height:auto; aspect-ratio:1; border:2px solid white; border-radius:5px; box-shadow:0 0 0 1px var(--palette-line); margin-bottom:2px; }
.color-history-panel .color-readout label { flex:1; color:#526d84; font-size:10px; font-weight:700; }
#history-color-hex { display:block; width:100%; min-width:0; height:24px; margin-top:3px; padding:3px 5px; border:1px solid var(--palette-line); border-radius:5px; background:white; color:var(--palette-ink); font:11px monospace; box-shadow:inset 0 1px 2px #183b6809; }
#history-color-hex[aria-invalid=true] { border-color:#b5304c; }
.color-history-panel .color-wheel { width:min(92%,var(--wheel-size,100%)); height:auto; aspect-ratio:1; flex:none; }
.color-history-panel .hue-ring { background:conic-gradient(from -45deg,#ff595e,#ffdf59,#a4cf5a,#6cd5c1,#9280df,#ed48b1,#ff595e); box-shadow:0 0 0 1px #b5c8df50,inset 0 2px 3px #ffffff88; }
.color-history-panel .hue-ring::before { inset:16%; background:var(--palette-paper); box-shadow:inset 0 0 0 1px #172d4a15; }
.color-history-panel .color-square { width:47%; height:47%; top:26.5%; left:26.5%; border-radius:2px; }
.color-history-panel .hue-marker,.color-history-panel .sv-marker { width:10px; height:10px; border-width:2px; }
.color-history-panel .opacity-label { gap:6px; padding:7px 0; margin:8px 0 10px; border-top:1px dashed #d6e3ef; border-bottom:1px dashed #d6e3ef; width:100%; }
.color-history-panel .opacity-label .control-caption { color:var(--palette-ink); font-size:10px; font-weight:800; letter-spacing:1px; }
.color-history-panel .opacity-control { gap:4px; }
.color-history-panel .opacity-control input { appearance:none; width:100%; height:6px; border-radius:8px; background:linear-gradient(to right,#08bce0 var(--opacity-progress,100%),#d6e3ef var(--opacity-progress,100%)); cursor:pointer; }
.color-history-panel .opacity-control input::-webkit-slider-thumb { appearance:none; width:14px; height:14px; border:0; border-radius:50%; background:#08bce0; }
.color-history-panel .opacity-control input::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#08bce0; }
.color-history-panel .opacity-control output { width:28px; color:#526d84; font-size:9px; }
.color-history-heading,.color-history-note { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.color-history-grid { display:grid; flex:none; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; width:94%; margin:0 auto; padding:4px; border:1px solid #d6e3ef; border-radius:6px; background:#ffffffc9; box-shadow:inset 0 1px 3px #183b6809; }
.color-history-cell { width:100%; height:auto; aspect-ratio:1; min-width:0; padding:0; border:1px solid var(--palette-line); border-radius:2px; background:var(--history-color); box-shadow:inset 0 1px 1px #ffffff88; }
.color-history-cell:disabled { opacity:1; cursor:default; }
.color-history-cell[data-color=""] { background:linear-gradient(#fff,#f3f7fb); border-color:#d6e3ef; }
.color-history-cell:not(:disabled):hover { transform:none; border-color:#279df0; filter:brightness(1.04); }
.color-history-cell:not(:disabled):active { transform:none; }
.color-history-cell[aria-pressed=true] { outline:2px solid #279df0; outline-offset:-2px; position:relative; z-index:1; }
.color-history-cell:focus-visible,.color-history-tab:focus-visible { outline:3px solid #e39200; outline-offset:2px; }
@media (max-width:820px) {
  .color-history-dock { display:none; }
}
/* Tuck the wing underneath the notebook, including its rounded bottom corner. */
@media (min-width:821px) {
  .studio { position:relative; isolation:isolate; }
  .studio > .sketchbook { z-index:1; }
  .color-history-dock {
    --wing-overlap:24px;
    left:var(--wing-left);
    bottom:var(--wing-bottom);
    z-index:0;
  }
  .color-history-dock.is-open {
    left:calc(var(--wing-left) - var(--wing-overlap));
    width:calc(var(--wing-width) + var(--wing-overlap));
  }
  .color-history-panel {
    padding-left:calc(11px + var(--wing-overlap));
    border-width:5px;
    border-radius:17px;
    background:#f7f9fc;
    box-shadow:0 0 0 2px #008fda,0 0 0 5px #55d0ff,0 9px 0 4px #2095cc55,0 15px 28px #2a638b3b;
  }
}