/* desk object */
.stage .paint { --object-width:min(19vw,188px); --object-tilt:-6deg; left:3%; top:68%; }

/* The dialog becomes a 1998 Paint window: era-appropriate chrome around the
   artifact's own studio, wall and brush drawer. */
.object-dialog[data-room="paint"] { width:min(1000px,calc(100vw - 28px)); border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; overflow:auto; max-height:calc(100dvh - 24px); }
[data-room="paint"] .dialog-inner { padding:0; }
[data-room="paint"] .dialog-head { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

.paint-window { position:relative; display:flex; flex-direction:column; border:2px solid; border-color:#dfdfdf #4b4b4b #4b4b4b #dfdfdf; background:#c0c0c0; box-shadow:0 24px 44px -18px #0b201d9c; color:#000; font:12px var(--ui); }
.paint-titlebar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; padding:2px 3px 2px 6px; background:linear-gradient(90deg,#080c75,#176baa); color:#fff; font-size:12px; font-weight:bold; }
.paint-titlebar-close { width:20px; height:19px; min-height:0; padding:0; border:1px solid; border-color:#dfdfdf #4b4b4b #4b4b4b #dfdfdf; background:#c0c0c0; color:#000; font:11px var(--ui); line-height:1; cursor:pointer; }
.paint-titlebar-close:active { border-color:#4b4b4b #dfdfdf #dfdfdf #4b4b4b; }

.paint-menubar { display:flex; align-items:center; gap:12px; padding:3px 6px; border-bottom:1px solid #9a9a9a; background:#c0c0c0; }
.paint-menu-group { display:flex; gap:3px; }
.paint-menu-group button { min-height:0; padding:3px 11px; border:2px solid; border-color:#dfdfdf #4b4b4b #4b4b4b #dfdfdf; background:#c0c0c0; color:#000; font:11px var(--ui); cursor:pointer; }
.paint-menu-group button[aria-pressed="true"] { border-color:#4b4b4b #dfdfdf #dfdfdf #4b4b4b; background:#b0b0b0; }
.paint-menu-group button b { font-variant-numeric:tabular-nums; opacity:.7; }
.paint-menu-note { margin-left:auto; color:#3f3f3f; font-size:10px; }

.paint-views { display:flex; min-height:0; }
.paint-studio,.paint-wall-view,.paint-studies-view { flex:1; min-width:0; }
.paint-studio { display:grid; grid-template-columns:186px minmax(0,1fr); height:min(62vh,528px); }
.paint-studio[hidden],.paint-wall-view[hidden],.paint-studies-view[hidden],.paint-toolbar[hidden],.paint-drawer[hidden] { display:none; }

/* toolbox */
.paint-toolbox { display:flex; flex-direction:column; min-height:0; border-right:1px solid #9a9a9a; background:#c0c0c0; }
.paint-toolbox-head { margin:0; padding:6px 8px 5px; border-bottom:1px solid #9a9a9a; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:#3f3f3f; }
.paint-toolbox-head b { float:right; color:#000; }
.paint-tools { flex:1; min-height:0; overflow-y:auto; padding:4px; }
.paint-tool { display:grid; grid-template-columns:minmax(0,1fr) 62px; align-items:center; gap:7px; width:100%; min-height:0; margin-bottom:3px; padding:4px 5px; border:2px solid; border-color:#dfdfdf #4b4b4b #4b4b4b #dfdfdf; background:#c0c0c0; color:#000; text-align:left; font:11px var(--ui); cursor:pointer; }
.paint-tool:hover { background:#cacaca; }
.paint-tool[aria-pressed="true"] { border-color:#4b4b4b #dfdfdf #dfdfdf #4b4b4b; background:#adadad; }
.paint-tool-text { display:block; min-width:0; }
.paint-tool-name { display:flex; align-items:baseline; gap:5px; }
.paint-tool-index { color:#4d4d4d; font-size:9px; font-variant-numeric:tabular-nums; }
.paint-tool-kind { display:block; margin-top:2px; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.paint-kind-copy { color:#4d4d4d; }
.paint-kind-new { color:#7a1f0c; }
.paint-swatch { width:62px; height:28px; border:1px solid #7d7d7d; background:#f2f1ec center/cover; }

/* easel */
.paint-easel { display:flex; flex-direction:column; min-width:0; min-height:0; padding:8px; background:#8a8a8a; }
.paint-stage { position:relative; display:flex; flex:1; align-items:center; justify-content:center; min-height:0; border:2px solid; border-color:#4b4b4b #dfdfdf #dfdfdf #4b4b4b; background:#f2f1ec; overflow:hidden; }
.paint-stage canvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.paint-stage-message { margin:0; padding:0 20px; text-align:center; color:#3f3f3f; font-size:11px; }
.paint-status { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:6px 0 0; color:#f0f0f0; font-size:10px; }
.paint-status-name { text-transform:uppercase; letter-spacing:.09em; color:#fff; font-weight:bold; }
.paint-status-pigment { display:flex; align-items:center; gap:5px; padding-left:9px; border-left:1px solid #6d6d6d; text-transform:uppercase; letter-spacing:.07em; }
.paint-dot { width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 1px #0006; }
.paint-status-note { flex:1; min-width:150px; color:#dcdcdc; text-transform:none; letter-spacing:0; font-size:11px; }

/* toolbar */
.paint-toolbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:6px 8px; border-top:1px solid #9a9a9a; background:#c0c0c0; }
.paint-control { display:flex; align-items:center; gap:7px; min-width:0; max-width:100%; flex-wrap:wrap; }
.paint-control-label { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#3f3f3f; }
.paint-pigments { display:flex; flex-wrap:wrap; max-width:100%; gap:4px; padding:3px; border:2px solid; border-color:#4b4b4b #dfdfdf #dfdfdf #4b4b4b; background:#a8a8a8; }
.object-dialog[data-room="paint"] .paint-pigment { flex:0 0 24px; width:24px; height:24px; min-height:24px; padding:0; border:1px solid #4b4b4b; cursor:pointer; }
.paint-pigment[aria-pressed="true"] { outline:2px solid #000080; outline-offset:1px; }
.paint-toolbar input[type=range] { width:72px; accent-color:#000080; }
.paint-value { min-width:2.4ch; font-size:10px; font-variant-numeric:tabular-nums; text-align:right; }
.paint-buttons { display:flex; gap:4px; }
.paint-buttons button,.paint-work-tools button { min-height:0; padding:4px 12px; border:2px solid; border-color:#dfdfdf #4b4b4b #4b4b4b #dfdfdf; background:#c0c0c0; color:#000; font:11px var(--ui); cursor:pointer; }
.paint-buttons button:active,.paint-work-tools button:active { border-color:#4b4b4b #dfdfdf #dfdfdf #4b4b4b; }
.paint-hint { margin:0 0 0 auto; color:#4d4d4d; font-size:10px; }

/* the wall */
.paint-wall-view { display:flex; flex-direction:column; min-height:0; height:min(62vh,528px); background:#8a8a8a; }
.paint-wall-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:9px 12px; border-bottom:1px solid #6d6d6d; }
.paint-wall-head h3 { margin:0; color:#fff; font:bold 13px var(--ui); }
.paint-wall-note { margin-left:auto; color:#dcdcdc; font-size:10px; }
.paint-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:20px 16px; align-items:start; flex:1; min-height:0; padding:16px 14px 22px; overflow-y:auto; }
.paint-work { display:flex; flex-direction:column; align-items:center; min-width:0; margin:0; }
.paint-frame { position:relative; width:100%; padding:6px; background:linear-gradient(152deg,#5c5347 0%,#332d25 52%,#4c443a 100%); box-shadow:inset 0 1px 0 #ffffff1a,0 12px 20px -12px #000000e6; }
.paint-frame img { display:block; width:100%; height:auto; background:#f2f1ec; box-shadow:0 0 0 1px #2b2a2629; }
.paint-plate { display:block; width:100%; min-height:0; padding:0; border:0; background:none; cursor:zoom-in; }
.paint-work-tools { position:absolute; top:7px; right:7px; display:flex; gap:4px; opacity:0; transition:opacity .14s ease; }
.paint-work:hover .paint-work-tools,.paint-work:focus-within .paint-work-tools { opacity:1; }
.paint-work-tools button { padding:2px 7px; font-size:10px; }
.paint-work-tools .paint-danger { background:#a82a1c; border-color:#d98d84 #4b1109 #4b1109 #d98d84; color:#fff; }
.paint-label { display:grid; gap:3px; max-width:30ch; margin-top:9px; padding:0 3px; text-align:center; }
.paint-title { padding:1px 3px; color:#fff; font:13px 'Times New Roman',serif; }
.paint-title:hover { background:#ffffff1f; }
.paint-title:focus { background:#ffffff2b; outline:1px solid #000080; }
.paint-media,.paint-meta { color:#dcdcdc; font-size:9.5px; line-height:1.5; }
.paint-media em { font-style:normal; color:#fff; }
.paint-meta { color:#c4c4c4; font-variant-numeric:tabular-nums; }
.paint-empty,.paint-notice { grid-column:1/-1; margin:6px 0; color:#f0f0f0; font-size:11px; line-height:1.7; }
.paint-notice { padding:9px 11px; border:1px solid #d0b45a; background:#f3c6141a; color:#ffeaa7; }

/* studies: the worked examples shelf */
.paint-studies-view { display:flex; flex-direction:column; min-height:0; height:min(62vh,528px); background:#8a8a8a; }
.paint-studies-kind { grid-column:1/-1; margin:2px 0 -6px; color:#dcdcdc; font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.paint-study .paint-plate { cursor:pointer; }
.paint-study .paint-frame { transition:transform .16s ease; }
.paint-study:hover .paint-frame,.paint-study:focus-within .paint-frame { transform:translateY(-3px); }
@media(max-width:820px) {
  .paint-studies-view { height:auto; }
  .paint-studies-view .paint-wall { flex:none; height:min(52vh,360px); }
}
@media(prefers-reduced-motion:reduce) {
  .paint-study .paint-frame { transition:none; }
}

/* one picture, full size */
.paint-lightbox { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:22px; background:#0a0907e8; }
.paint-lightbox-window { width:min(560px,100%); max-height:100%; }
.paint-lightbox-body { padding:12px; overflow-y:auto; background:#8a8a8a; }
.paint-lightbox-body .paint-frame { width:auto; }
.paint-lightbox-body img { max-height:52dvh; width:auto; max-width:100%; }
.paint-lightbox-body .paint-meta { margin:10px 0 0; text-align:center; }

/* brush drawer */
.paint-drawer { border-top:1px solid #9a9a9a; background:#c0c0c0; }
.paint-drawer > summary { padding:6px 9px; cursor:pointer; list-style:none; font-size:11px; }
.paint-drawer > summary::-webkit-details-marker { display:none; }
.paint-drawer > summary::before { content:'+ '; color:#000080; font-weight:bold; }
.paint-drawer[open] > summary::before { content:'– '; }
.paint-drawer > summary:hover { background:#cacaca; }
.paint-drawer-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:16px; align-items:start; max-height:32dvh; padding:0 10px 12px; overflow-y:auto; }
.paint-drawer-body p { max-width:62ch; margin:0 0 8px; font-size:11.5px; line-height:1.6; }
.paint-drawer-body code { background:#b3b3b3; font:11px var(--digital); }
.paint-drawer-body pre { margin:0; padding:9px; overflow-x:auto; border:2px solid; border-color:#4b4b4b #dfdfdf #dfdfdf #4b4b4b; background:#fff; font:10.5px/1.65 var(--digital); }
.paint-comment { color:#166534; }
.paint-api { width:100%; border-collapse:collapse; font-size:11px; }
.paint-api th { padding:0 0 4px; border-bottom:1px solid #8a8a8a; text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:#3f3f3f; }
.paint-api td { padding:3px 9px 3px 0; border-bottom:1px solid #b0b0b0; vertical-align:top; }
.paint-api td:first-child { white-space:nowrap; font:10.5px var(--digital); color:#7a1f0c; }
.paint-api td:last-child { padding-right:0; }

@media(max-width:820px) {
  .paint-studio { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; height:auto; }
  .paint-toolbox { order:2; flex-direction:row; align-items:center; border-right:0; border-top:1px solid #9a9a9a; }
  .paint-toolbox-head { display:none; }
  .paint-tools { display:flex; gap:5px; padding:6px; overflow-x:auto; overflow-y:hidden; }
  .paint-tool { grid-template-columns:62px; width:auto; flex:0 0 auto; margin:0; }
  .paint-tool .paint-swatch { order:-1; }
  .paint-tool-kind { display:none; }
  .paint-easel { order:1; }
  .paint-stage { flex:none; height:min(46vh,330px); }
  .paint-wall-view { height:auto; }
  .paint-wall { flex:none; height:min(52vh,360px); }
  .paint-drawer-body { grid-template-columns:minmax(0,1fr); max-height:40dvh; }
  .paint-hint { display:none; }
}
@media(max-width:650px) {
  .stage .paint { --object-width:25vw; left:62%; top:30%; }
  .object-dialog[data-room="paint"] { width:calc(100vw - 18px); }
  .paint-menu-note { display:none; }
  .paint-toolbar { gap:10px; }
  .paint-control:has(.paint-pigments) { width:100%; }
  .paint-pigments { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; }
  .object-dialog[data-room="paint"] .paint-pigment { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .paint-work-tools { transition:none; }
}

@media (max-height:500px) and (min-width:651px) {
  .paint-studio { height:180px; }
  .paint-status-note,.paint-drawer,.paint-hint { display:none; }
  .paint-toolbar { gap:6px 12px; }
}
@media(max-width:650px) { body:not(.room-view) .stage .paint { left:45%; top:56%; --object-width:25vw; } }
.paint-menu-note,.paint-tool-kind { display:none; }

#paint-stage { box-shadow:inset 0 0 0 1px #ac9f8988,1px 3px 0 #d0c5b1,3px 12px 24px #0005; }


@media (hover:hover) and (pointer:fine) {
  .desk-object.paint,
  .object-dialog[data-room="paint"] .paint-stage canvas { cursor:url('../../assets/cursors/brush.png') 4 28,crosshair; }
}