@import url("/color-lab-tokens.css");
.cl-main{--cl-surface:#f6f2eb;--cl-ink:#201d20;--cl-muted:#514b51;--cl-line:#c9c1bb;width:var(--content-rail);margin:auto;padding:145px 0 80px;color:var(--cl-ink);position:relative;z-index:1}
.cl-heading h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:400;letter-spacing:-.03em;line-height:1.1;margin:22px 0 12px}
.cl-heading p{color:var(--cl-muted);margin:0 0 18px}
.cl-title{display:flex;align-items:center;gap:20px}
.cl-tabs{display:flex;gap:8px;border-bottom:1px solid var(--cl-line);margin-top:30px;padding-bottom:12px;flex-wrap:wrap}
.cl-main button,.cl-upload{border:1px solid var(--cl-line);background:var(--cl-surface);color:var(--cl-ink);border-radius:8px;font:inherit;padding:11px 15px;min-height:44px;cursor:pointer}
.cl-main button:hover,.cl-upload:hover{border-color:var(--cl-ink)}
.cl-main button:disabled{opacity:.45;cursor:not-allowed}
.cl-main button[aria-pressed=true],.cl-main .cl-primary{background:var(--cl-ink);color:var(--cl-surface);border-color:var(--cl-ink)}
.cl-status{min-height:26px;color:var(--cl-muted);margin:18px 0 26px;line-height:1.6}
.cl-status.is-error{color:#a12813}
.cl-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px}
.cl-main h2{font-size:1.5rem;font-weight:400;letter-spacing:-.02em;margin:0 0 20px;line-height:1.3}
.cl-main label{display:flex;flex-direction:column;gap:8px;font-size:.9rem;min-width:0}
.cl-main input:not([type=file]),.cl-main select{min-width:0;max-width:100%;border:1px solid var(--cl-line);border-radius:8px;background:var(--cl-surface);color:var(--cl-ink);font:inherit;font-size:16px;padding:11px 12px;min-height:44px;caret-color:#bf3a08}
.cl-main input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.cl-upload{position:relative;justify-content:center!important}
.cl-upload:focus-within{outline:2px solid #bf3a08;outline-offset:4px}
.cl-row,.cl-image-tools{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:18px 0}
.cl-image-tools{margin-top:0}
.cl-stage{height:470px;overflow:auto;position:relative;background-color:var(--cl-surface);border:1px solid var(--cl-line);border-radius:12px;background-image:conic-gradient(#a8a29b 25%,transparent 0 50%,#a8a29b 0 75%,transparent 0);background-size:20px 20px}
.cl-stage.is-dragging{outline:3px solid #bf3a08}
.cl-stage:has(#cl-empty:not([hidden])){background-image:none}
#cl-empty{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px}
#cl-empty h2{font-size:clamp(1.8rem,3vw,2.5rem)}
#cl-empty p{color:var(--cl-muted);line-height:1.7}
#cl-image-wrap{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center}
#cl-canvas{display:block;cursor:crosshair;touch-action:none;flex-shrink:0}
#cl-loupe{position:absolute;pointer-events:none;border:2px solid #fff;outline:1px solid #201d20;border-radius:8px;background:var(--cl-surface);z-index:2;image-rendering:pixelated}
.cl-help{color:var(--cl-muted);font-size:.85rem;line-height:1.6;margin:14px 0 24px}
.cl-inspector{border-top:1px solid var(--cl-line);padding-top:18px}
.cl-color-preview{height:96px;border:1px solid var(--cl-line);border-radius:10px;margin-bottom:18px}
.cl-value{display:flex;gap:8px;align-items:center;margin:8px 0}
.cl-value code{overflow-wrap:anywhere;flex:1;font-size:.8rem;line-height:1.5}
.cl-value button{font-size:.8rem;padding:6px 10px}
.cl-main details{border-top:1px solid var(--cl-line);padding-top:16px}
.cl-main summary{cursor:pointer;min-height:44px}
.cl-palette{border-top:1px solid var(--cl-line);margin-top:36px;padding-top:28px}
.cl-section-title{display:flex;justify-content:space-between;gap:16px}
.cl-palette-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:14px;margin:22px 0}
.cl-swatch{min-width:0}
.cl-swatch>button:first-child{width:100%;height:90px;display:flex;align-items:end;justify-content:start;font-family:monospace;border:1px solid var(--cl-line)}
.cl-swatch-tools{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.cl-swatch-tools button{font-size:.75rem;padding:6px 8px}
.cl-swatch label{margin-top:8px}
.cl-swatch input{width:100%}
.cl-swatches{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.cl-swatches button{min-width:64px;min-height:64px;font-family:monospace}
.cl-two{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.cl-two label{margin-bottom:14px}
#cl-contrast-preview{padding:36px;border-radius:12px;margin-bottom:24px;border:1px solid var(--cl-line)}
#cl-contrast-preview p{line-height:1.7}
.cl-preview-button{display:inline-block;padding:12px 18px;border:1px solid currentColor;border-radius:8px;margin-top:18px}
#cl-ratio{font-size:3rem;font-weight:400;font-variant-numeric:tabular-nums}
#cl-results p{display:flex;justify-content:space-between;border-bottom:1px solid var(--cl-line);padding:12px 0;gap:12px}
#cl-coordinates,#cl-alpha{font-size:.85rem;color:var(--cl-muted);font-variant-numeric:tabular-nums}
.cl-main [hidden]{display:none!important}
.cl-main :focus-visible{outline:2px solid #bf3a08;outline-offset:4px}
.cl-main ::selection{background:#eed0c3;color:#201d20}
.cl-main *{scrollbar-color:#82776d var(--cl-surface);scrollbar-width:thin}
html[data-theme=dark] .cl-main{--cl-surface:#211e27;--cl-ink:#f4f0f6;--cl-muted:#c5bdca;--cl-line:#514956}
html[data-theme=dark] .cl-status.is-error{color:#ffad98}
html[data-theme=dark] .cl-main :focus-visible{outline-color:#f0a181}
@media(max-width:1024px){.cl-workspace,.cl-two{grid-template-columns:1fr;gap:24px}
.cl-inspector{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.cl-inspector h2,.cl-inspector .cl-row{grid-column:1/-1}
.cl-stage{height:420px}
.cl-main{padding-top:115px}}
@media(max-width:620px){.cl-inspector{display:block}
.cl-stage{height:330px}
.cl-tabs{gap:6px}
.cl-tabs button{flex:1;padding:10px 8px;font-size:.88rem}
.cl-row>label{flex:1;min-width:140px}
.cl-main{padding-bottom:50px}
.cl-palette-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
.cl-two{gap:24px}
#cl-contrast-preview{padding:24px}}


.cl-heading .tool-back{color:var(--cl-muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.cl-heading .tool-back:hover{text-decoration:underline;text-underline-offset:4px}
.cl-workspace>div,.cl-inspector,.cl-two>div,.cl-value code{min-width:0}
@media(max-width:1024px){.cl-workspace,.cl-two{grid-template-columns:minmax(0,1fr)}}

/* Group by task, using the scoped Apple spacing and typography scale. */
.cl-main { font-optical-sizing: auto; }
.cl-workspace { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); align-items: start; }
.cl-main label { gap: var(--space-3); line-height: var(--leading-relaxed); }
.cl-main input:not([type=file]), .cl-main select { width: 100%; line-height: var(--leading-normal); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); }
.cl-main button, .cl-upload { line-height: var(--leading-normal); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); }
.cl-main button:active:not(:disabled) { opacity: .8; }
.cl-inspector { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding: var(--space-7); border: 1px solid var(--cl-line); border-radius: var(--radius-lg); background: var(--cl-surface); }
.cl-inspector h2 { margin: 0; font-size: var(--text-title-2); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
.cl-selected-summary { min-width: 0; }
.cl-color-preview { height: 104px; border-radius: var(--radius-md); margin: 0 0 var(--space-6); }
#cl-alpha { margin: var(--space-3) 0 0; line-height: var(--leading-relaxed); }
#cl-values { min-width: 0; }
.cl-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--cl-line); }
.cl-value:first-child { padding-top: 0; }
.cl-value-data { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cl-format-label { font-size: var(--text-caption-1); line-height: var(--leading-normal); letter-spacing: var(--tracking-wide); color: var(--cl-muted); }
.cl-value code { font-family: var(--font-mono); font-size: var(--text-footnote); line-height: var(--leading-relaxed); overflow-wrap: anywhere; }
.cl-value button { min-height: 44px; padding: var(--space-3) var(--space-4); font-size: var(--text-footnote); }
.cl-sampling-group { min-width: 0; }
.cl-inspector .cl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: var(--space-3); margin: var(--space-7) 0 0; }
.cl-inspector .cl-row button { padding-inline: var(--space-3); font-size: var(--text-subhead); }
#cl-coordinates { margin: var(--space-4) 0 0; min-height: 0; line-height: var(--leading-relaxed); }
#cl-coordinates:empty { display: none; }
.cl-row, .cl-image-tools { gap: var(--space-4); margin-block: var(--space-7); }
.cl-image-tools { margin-top: 0; }
.cl-main details .cl-row { margin-block: var(--space-5); }
.cl-palette { margin-top: var(--space-10); padding-top: var(--space-8); }
.cl-palette-colors { gap: var(--space-5); margin-block: var(--space-7); }
.cl-swatch label { margin-top: var(--space-4); }
.cl-swatch-tools { gap: var(--space-3); margin-top: var(--space-4); }
.cl-section-title { align-items: baseline; }
.cl-section-title h2 { margin-bottom: var(--space-5); }
.cl-tabs { gap: var(--space-3); padding-bottom: var(--space-5); }
.cl-two { align-items: start; }
.cl-two label { margin-bottom: var(--space-6); }
@media (max-width: 1024px) {
  .cl-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .cl-inspector { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7) var(--space-8); }
  .cl-inspector h2, .cl-sampling-group { grid-column: 1 / -1; }
  .cl-inspector .cl-sampling-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-8); align-items: end; }
  .cl-inspector .cl-row { grid-column: auto; margin: 0; }
  #cl-coordinates { grid-column: 1 / -1; margin: 0; }
}
@media (max-width: 620px) {
  .cl-inspector { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); gap: var(--space-7); }
  .cl-inspector .cl-sampling-group { display: block; }
  .cl-inspector .cl-row { margin-top: var(--space-7); }
  #cl-coordinates:not(:empty) { margin-top: var(--space-4); }
  .cl-tabs { gap: var(--space-2); }
  .cl-tabs button { padding: var(--space-4) var(--space-3); }
  .cl-section-title { gap: var(--space-4); }
}
@media (prefers-contrast: more) { .cl-inspector, .cl-main button, .cl-main input:not([type=file]), .cl-main select { border-color: var(--cl-ink); } }

/* A palette is a color collection; editing controls belong to one selection. */
.cl-palette-colors { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--space-4); }
.cl-swatch > button:first-child { height: 84px; padding: var(--space-4); position: relative; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--space-2); font-size: var(--text-footnote); }
.cl-swatch > button[aria-pressed=true] { outline: 2px solid var(--cl-ink); outline-offset: 3px; }
.cl-lock-label { font-family: alcyone, sans-serif; font-size: var(--text-caption-1); }
#cl-palette-editor { margin: var(--space-7) 0; padding-block: var(--space-5); border-block: 1px solid var(--cl-line); }
.cl-palette-edit-row { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; }
.cl-palette-edit-row label { flex: 1; min-width: 150px; }
#cl-palette-editor details { border: 0; padding-top: var(--space-4); }
#cl-palette-editor summary { color: var(--cl-muted); font-size: var(--text-subhead); }
.cl-palette-add { border-top: 0!important; padding-top: 0!important; }
#cl-storage, #cl-export-options { margin-top: var(--space-4); }
#cl-storage summary, #cl-export-options summary { display: list-item; padding-block: var(--space-3); }
@media(max-width:620px) { .cl-palette-colors { grid-template-columns: repeat(3, minmax(0,1fr)); } .cl-swatch > button:first-child { padding: var(--space-3); height: 76px; font-size: var(--text-caption-1); } }

/* Stable work areas: no automatic scroll, animated geometry or per-pixel reflow. */
html[data-tool=color-lab] { scroll-behavior: auto; }
html[data-tool=color-lab] .glass-navbar { transition: none; animation: none; }
.cl-tabs { position: relative; top: auto; z-index: 1; background: var(--cl-surface); padding: var(--space-3); border: 1px solid var(--cl-line); border-radius: var(--radius-md); }
.cl-tabs button { flex: 1; }
.cl-status { min-height: 3.2em; margin-bottom: var(--space-5); }
#cl-palette { margin-top: 0; border-top: 0; padding-top: 0; }
.cl-value code { min-height: 3em; }
@media(max-width:620px) { .cl-tabs { top: auto; } .cl-tabs button { font-size: var(--text-footnote); padding-inline: var(--space-2); } }

/* Panel changes must not re-anchor the viewport to content or the footer. */
html[data-tool=color-lab], html[data-tool=color-lab] body { overflow-anchor: none; }

/* Feedback moves only the control, never the surrounding layout. */
@media(prefers-reduced-motion:no-preference){
 .cl-main button:not(:disabled){transition:transform 100ms cubic-bezier(.16,1,.3,1),opacity 100ms ease-out;}
 .cl-main button:active:not(:disabled){transform:scale(.98);}
}
.cl-value button[data-success=true]{border-color:var(--cl-ink);color:var(--cl-ink);}

/* Give the colors the space; show editing tools only for the selected swatch. */
.cl-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.cl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.cl-main .cl-icon-button{width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.cl-section-title{margin-bottom:16px;}
.cl-section-title h2{margin:0;}
#cl-palette-count{color:var(--cl-muted);font-size:14px;}
.cl-palette-colors{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;margin:24px 0 32px;}
.cl-swatch>button:first-child{display:flex;width:100%;height:auto;padding:0;gap:0;overflow:hidden;border:1px solid var(--cl-line);border-radius:12px;background:var(--cl-surface);color:var(--cl-ink);}
.cl-swatch-paint{display:flex;align-items:flex-start;justify-content:flex-end;width:100%;height:132px;padding:12px;box-sizing:border-box;background-image:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%);}
.cl-swatch-caption{display:block;width:100%;box-sizing:border-box;padding:14px 12px;text-align:left;font-size:13px;}
#cl-palette-editor{padding:20px;margin:0 0 32px;background:var(--cl-surface);border:1px solid var(--cl-line);border-radius:12px;}
.cl-palette-edit-row{gap:12px;align-items:center;}
.cl-editor-preview{width:52px;height:52px;border-radius:8px;border:1px solid var(--cl-line);flex:none;}
.cl-palette-edit-row label{min-width:160px;}
.cl-palette-utilities{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:24px;border-top:1px solid var(--cl-line);}
#cl-storage,#cl-export-options{margin:0;border:1px solid var(--cl-line);border-radius:12px;padding:16px 20px;background:var(--cl-surface);align-self:start;}
.cl-palette-add summary,#cl-storage summary,#cl-export-options summary{display:flex;align-items:center;gap:12px;padding:0;min-height:44px;list-style:none;}
.cl-palette-add summary::-webkit-details-marker,#cl-storage summary::-webkit-details-marker,#cl-export-options summary::-webkit-details-marker{display:none;}
.cl-palette-add summary::after,#cl-storage summary::after,#cl-export-options summary::after{content:'›';margin-left:auto;font-size:24px;transform:rotate(90deg);}
.cl-palette-add[open] summary::after,#cl-storage[open] summary::after,#cl-export-options[open] summary::after{transform:rotate(-90deg);}
.cl-palette-add{max-width:420px;}
.cl-main details .cl-row{gap:16px;margin-top:20px;margin-bottom:0;}
.cl-palette-utilities .cl-row{display:grid;grid-template-columns:1fr;}
.cl-value .cl-icon-button{border-color:transparent;background:transparent;}
@media(max-width:620px){
 .cl-palette-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .cl-swatch>button:first-child{height:auto;padding:0;}
 .cl-swatch-paint{height:108px;}
 .cl-swatch-caption{padding:12px;font-size:13px;}
 .cl-palette-utilities{grid-template-columns:1fr;gap:12px;}
 #cl-palette-editor{padding:16px;}
 .cl-palette-edit-row label{flex-basis:calc(100% - 76px);min-width:0;}
}

/* Saving is one action; the library appears only when it has content. */
.cl-save-form{margin-top:20px;}
.cl-save-row{display:flex;gap:12px;align-items:center;margin-top:8px;}
.cl-save-row input{flex:1;min-width:0;}
.cl-save-row button{flex:none;white-space:nowrap;}
.cl-help{font-size:var(--text-footnote);color:var(--cl-muted);line-height:1.5;margin:12px 0 0;}
#cl-saved-library{margin-top:24px;padding-top:20px;border-top:1px solid var(--cl-line);}
#cl-saved-library select{margin-top:8px;min-height:44px;padding:10px 12px;}
.cl-library-actions{display:flex;gap:12px;margin-top:12px;}
#cl-delete{margin-left:auto;color:var(--cl-muted);background:transparent;border-color:transparent;}
@media(max-width:620px){.cl-save-row{flex-wrap:wrap;}.cl-save-row input{flex-basis:100%;}.cl-save-row button{width:auto;}}

.cl-main select{box-sizing:border-box;min-height:44px;padding:10px 12px;font-size:16px;line-height:1.4;}
.cl-two label{display:grid;gap:8px;}
.cl-two .cl-row{gap:12px;align-items:center;}