/* EASEL'S OWN PARTS (2026-10-31): the canvas on the screen, the brushes' and layers' panels, the
   looks, the curve, the colours. Everything the tools share - the bar, the rail and its panels, the
   floating AI, sheets, menus, the home menu - is /tool-shell.css; this file only adds Easel's (es-). */

.es-root{--es-stage:#1a1c21;--es-stage2:#15171b}
:root[data-theme="light"] .es-root{--es-stage:#e6e6e9;--es-stage2:#dcdce0}

/* the picture: a neutral ground, so colours are judged against grey and not the tool's colour */
.es-root .st-stage{display:block;padding:0;background:radial-gradient(80% 70% at 50% 40%,var(--es-stage),var(--es-stage2))}
.es-view,.es-over{position:absolute;inset:0;width:100%;height:100%;display:block}
.es-over{touch-action:none;z-index:2}
.es-pill{position:absolute;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:7px;max-width:min(320px,60%);min-height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line2);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);font:700 13px var(--body);cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.es-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-pill:hover{border-color:color-mix(in srgb,var(--tc) 70%,var(--line2))}
.es-busy{position:absolute;left:50%;top:58px;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line2);font:700 13.5px var(--body);box-shadow:0 14px 30px -16px rgba(0,0,0,.7)}
.es-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font:600 15px var(--body);z-index:1}
.es-loading .st-msg{max-width:440px;text-align:center}
.es-root .st-toast{top:58px}
.es-root.es-dropping .st-stage,.es-root.es-dropping .th{outline:3px dashed color-mix(in srgb,var(--tc) 70%,transparent);outline-offset:-10px}
.es-embed .st-home{display:none}

/* the bar */
.es-zoom button{min-width:30px}
.es-zoom #es-zval{min-width:56px;font-variant-numeric:tabular-nums}
.es-bar .st-chip small{margin-left:6px}

/* the rail: ten tools, so a little tighter than the studios' four */
.es-rail button{padding:8px 2px;gap:4px}
.es-rail button.es-on{color:var(--ink)}
.es-rail button.es-on::before{content:"";position:absolute;left:0;width:3px;height:26px;border-radius:0 3px 3px 0;background:var(--tc)}
.es-rail button{position:relative}

/* the panels */
.es-drawer{padding-bottom:40px}
.es-drawer .dr-head .icon-btn{width:34px;height:34px}
.es-seg{display:flex;flex-wrap:wrap;width:100%;margin:2px 0 6px}
.es-seg button{flex:1 1 auto;padding:7px 9px;font-size:13.5px}
.es-tabs{margin-bottom:12px}
.es-sl{margin-top:12px}
.es-sl output{font-variant-numeric:tabular-nums}
.es-mid input[type=range]{background:none}
.es-drawer .dr-check{margin-top:10px;font-size:14px}
.es-drawer .dr-chips{margin-top:10px}
.es-drawer .dr-chips button[aria-pressed="true"],.es-modes button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--soft))}
.es-drawer .dr-chips button[disabled]{opacity:.45;cursor:default}
.es-drawer .dr-grid{margin-top:4px}
.es-drawer .dr-tile svg{color:var(--tc)}
.es-drawer .dr-form{flex-wrap:wrap}
.es-drawer .dr-form .btn{min-height:40px;padding:0 16px;font-size:14.5px}
.es-drawer .dr-note b{color:var(--ink)}
.es-masknote{padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,#ff4060 45%,var(--line));background:color-mix(in srgb,#ff4060 8%,var(--soft))}
.es-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-top:10px}
.es-nums label{display:grid;gap:4px;font:700 12.5px var(--body);color:var(--muted)}
.es-nums input{font:500 15px var(--body);color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0;width:100%}
.es-words{width:100%;min-height:76px;resize:vertical;font:600 16px/1.4 var(--body);color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.es-words:focus,.es-nums input:focus{outline:none;border-color:var(--gold)}
.es-drawer .dr-field select{margin-top:2px}
.es-drawer .dr-colour{margin-top:10px}

/* colours */
.es-colours{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.es-swatch{position:relative;width:42px;height:42px;border-radius:12px;border:2px solid var(--line2);background:var(--c);overflow:hidden;padding:0;cursor:pointer;flex:none;box-shadow:inset 0 0 0 2px var(--surface)}
.es-swatch input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);opacity:0;cursor:pointer;border:0;padding:0}
.es-bgs{width:32px;height:32px;margin-left:-16px;margin-top:20px;border-radius:9px}
.es-pal{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 100%}
.es-pal button{width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);background:var(--c);cursor:pointer;padding:0}
.es-pal button:hover{transform:scale(1.12)}

/* adjustments */
.es-sec{border-top:1px solid var(--line);margin-top:14px}
.es-sec>summary{list-style:none;cursor:pointer;padding:14px 0 4px;font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:8px}
.es-sec>summary::-webkit-details-marker{display:none}
.es-sec>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.es-sec[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.es-sec>summary:hover{color:var(--ink)}
.es-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.es-look{display:flex;flex-direction:column;gap:5px;padding:4px 4px 7px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);cursor:pointer;font:700 12px var(--body);text-align:center}
.es-look:hover{border-color:color-mix(in srgb,var(--tc) 65%,var(--line))}
.es-look-pic{display:block;aspect-ratio:4/3;border-radius:8px;background:var(--line) center/cover no-repeat}
.es-curve{display:block;width:100%;aspect-ratio:1;margin-top:10px;border-radius:12px;background:var(--soft);border:1px solid var(--line);touch-action:none;cursor:crosshair}
.es-band{border-left:4px solid var(--b);padding-left:10px;margin-top:6px}
.es-band .es-sl{margin-top:6px}

/* layers and history */
.es-layers{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.es-layer{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.es-layer.on{border-color:color-mix(in srgb,var(--tc) 70%,var(--line));background:color-mix(in srgb,var(--tc) 9%,var(--soft))}
.es-layer.es-dragging{opacity:.5}
.es-lthumb{width:46px;height:46px;flex:none;display:grid;place-items:center;padding:0;border-radius:9px;border:2px solid transparent;cursor:pointer;color:var(--muted);font-size:20px;
  background:repeating-conic-gradient(#c9ccd3 0 25%,#eef0f3 0 50%) 0 0/12px 12px}
.es-lthumb canvas{width:40px;height:40px;display:block}
.es-lthumb.on{border-color:var(--gold)}
.es-mthumb.off{opacity:.45}
.es-lname{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 6px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.es-lname b{font-size:14.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-lname small{color:var(--muted);font-size:12px}
.es-lock{color:var(--faint);padding:0 6px}
.es-lbtns{display:flex;justify-content:space-between;gap:2px;margin-top:8px;padding:4px;border:1px solid var(--line);border-radius:12px}
.es-hist{list-style:none;margin:0;padding:0;display:grid;gap:3px;counter-reset:h}
.es-hist button{width:100%;text-align:left;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--ink);font:600 14px var(--body);cursor:pointer}
.es-hist button[aria-current="true"]{border-color:var(--gold);color:var(--gold)}
.es-hist .es-future button{color:var(--faint);border-style:dashed}

/* the AI bar's extras */
.es-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.es-chips:empty{display:none}
.es-chips button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 13px;font:700 13px var(--body);cursor:pointer;box-shadow:0 10px 24px -16px rgba(0,0,0,.7)}
.es-chips button svg{color:var(--tc)}
.es-chips button:hover{border-color:color-mix(in srgb,var(--tc) 70%,var(--line2))}
.es-refs{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.es-refs small{color:var(--muted);font-size:12.5px}
.es-ref{position:relative;width:40px;height:40px;border-radius:8px;overflow:hidden;flex:none}
.es-ref img{width:100%;height:100%;object-fit:cover}
.es-ref button{position:absolute;top:0;right:0;width:18px;height:18px;border:0;border-radius:0 0 0 6px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.es-reply{position:relative;padding-right:40px}
.es-reply .es-x{position:absolute;top:8px;right:8px;width:28px;height:28px}
.es-reply .txt b{color:var(--ink)}
.es-root .st-float{width:min(680px,calc(100% - 140px))}

/* the home menu's picture cards: the picture fills the thumb, a menu in the corner */
.es-card{cursor:default}
.es-card-open{display:flex;flex-direction:column;align-items:stretch;flex:1;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.es-thumb{background:repeating-conic-gradient(#c9ccd3 0 25%,#eef0f3 0 50%) 0 0/16px 16px}
.es-card-more{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:10px;background:rgba(5,8,18,.55);color:#fff;font:800 18px/1 var(--body)}
.es-card-more:hover{background:rgba(5,8,18,.8);color:#fff}
.es-fine{margin-top:14px}

/* new picture */
.es-new .es-open-btn{width:100%;min-height:54px;font-size:16.5px}
.es-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px}
.es-size{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:var(--soft);color:var(--ink);cursor:pointer;font:inherit}
.es-size:hover{border-color:color-mix(in srgb,var(--tc) 65%,var(--line))}
.es-size i{display:block;border:2px solid var(--muted);border-radius:3px;margin:4px 0 6px}
.es-size b{font-size:14px}
.es-size small{color:var(--muted);font-size:12px}
.es-custom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:16px}
.es-custom label{display:grid;gap:4px;font:700 12.5px var(--body);color:var(--muted)}
.es-custom input,.es-custom select{font:500 15px var(--body);color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px 10px;width:110px}
.es-custom select{width:auto}
.es-custom span{padding-bottom:10px;color:var(--muted)}
.es-export select{font:500 15px var(--body);color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.es-export .go{display:flex;flex-wrap:wrap;gap:10px}
.es-keys{width:100%;border-collapse:collapse;font-size:14.5px}
.es-keys td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
.es-keys kbd{font:700 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:nowrap}
.es-menu{z-index:80}
.es-wide{width:min(980px,100%)!important}

/* phones and narrow windows: the tools are a strip along the foot, the panels slide up over it */
@media(max-width:1000px){
  .es-root .st-rail{display:flex;flex-direction:row;position:absolute;left:0;right:0;bottom:0;top:auto;height:66px;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));gap:2px;overflow-x:auto;overflow-y:hidden;border-right:0;border-top:1px solid var(--line);z-index:26;scrollbar-width:none}
  .es-root .st-rail::-webkit-scrollbar{display:none}
  .es-root .st-rail button{flex:0 0 64px;padding:6px 2px}
  .es-rail button.es-on::before{left:50%;top:0;width:24px;height:3px;transform:translateX(-50%);border-radius:0 0 3px 3px}
  .es-root .st-stage{grid-column:1;bottom:66px;position:absolute;inset:0 0 66px 0}
  .es-root .st-float{bottom:76px}
  .es-root .st-ai-pill{bottom:76px}
  .es-root .st-drawer{bottom:66px;max-height:62dvh}
  .es-pill{top:8px;right:8px}
  .es-looks{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:560px){
  .es-zoom{display:none}
  .es-bar #es-redo{display:none}
  .es-chips button{padding:6px 10px;font-size:12.5px}
  .es-looks{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* a panel open on a computer: the AI bar sits in the space beside it */
@media(min-width:1001px){
  .es-root.es-drawer-open .st-float{left:calc(50% + 38px + 180px);width:min(680px,calc(100% - 76px - 360px - 48px))}
}