/* Appearance, part two: the paint stack's layers and the compact platform editor. Part one, imported first so every
   rule keeps its place in the cascade, is skins-editor.css: the workspace, the Website look frame, the editor's
   bars and controls, and the logo layer (docs/SEAMS.md). */
@import url("./skins-editor.css");
@import url("./surface-controls.css");
@import url("./style-tab.css");

/* Paint-stack order stays vertical at every width. Controls form rows within each layer. */
.skin-editor .skin-layer-grid{display:flex;flex-direction:column;gap:20px}
.skin-editor .skin-layer{width:100%;max-width:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;border:0}
.skin-editor .skin-layer+.skin-layer{border-top:1px solid var(--edge);padding-top:20px}
.skin-editor .skin-layer>header,.skin-editor .skin-layer>.skin-note,.skin-editor .skin-pattern-row,.skin-editor .skin-background-drop,.skin-editor .skin-background-pending{grid-column:1/-1}
.skin-editor .skin-layer>.skin-note{font-size:var(--t-small);min-height:0;margin:0}
.skin-editor .skin-layer h3{font-size:var(--t-head)}.skin-editor .skin-layer .skin-range>span,.skin-editor .skin-layer .skin-color>span{font-size:var(--t-small)}
.skin-editor .skin-choice,.skin-editor .skin-pattern{font-size:var(--t-small)!important;padding:10px 16px;min-height:42px}
.skin-editor .skin-segment{flex-wrap:wrap;border-radius:var(--r-22)}
.skin-editor .skin-background-pending img,.skin-editor .skin-background-pending video{width:100%;max-height:250px;object-fit:contain;border-radius:var(--r-10)}
.skin-editor .skin-background-pending{grid-column:1/-1}.skin-editor .skin-background-drop{padding:22px;font-size:var(--t-small)}
.skin-editor .skin-theme-actions button{min-height:42px;font-size:var(--t-small)!important}
.skin-editor .skin-theme-heading p{font-size:var(--t-small)}.skin-editor .skin-accent{width:360px}
[data-appearance-page].glass-drop{outline:3px dashed var(--accent);outline-offset:-5px}
@container(max-width:620px){.skin-editor .skin-layer{grid-template-columns:1fr}.skin-editor .skin-choice,.skin-editor .skin-pattern{padding:9px 12px}.skin-editor .skin-finishing{flex-direction:column}}

.skin-editor .skin-media-item>button:first-child{height:auto;aspect-ratio:16/9}.skin-editor .skin-media-item img,.skin-editor .skin-media-item video{object-fit:contain}

.skin-accent .skin-swatches{justify-content:flex-start;margin:12px 0}.skin-logo-controls .skin-logo-drop{margin:10px 0;padding:16px;font-size:var(--t-tiny)}

/* Compact platform appearance shares the resource editor's shell and controls. A window, not a page (Mark, October 25,
   2026: "it's huge"): at most 960 wide on screen, 32px clear of every edge, in the middle, on the top layer
   (lib/top-layer.js). The body scrolls; the header and the footer stay. Every resource window is drawn at 1.2 times
   (studio-dialog.css), so its own sizes are the screen's divided by 1.2. */
.skin-editor.skin-compact{position:fixed;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);z-index:90;margin:0;padding:0;width:min(800px,calc((100vw - 64px)/1.2));height:auto;display:flex;flex-direction:column;overflow:hidden;container-type:normal;background:var(--panel);--line:var(--edge)}
.skin-compact .resource-dialog-header svg{width:19px;height:19px;color:var(--accent)}
.skin-compact .skin-context{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 16px;font-size:var(--t-label);color:var(--muted)}
.skin-context details{position:relative}.skin-context summary{cursor:pointer}.skin-context details>div{position:absolute;right:0;top:100%;z-index:5;min-width:270px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-10);padding:12px;display:grid;gap:10px;box-shadow:0 8px 25px #0003}
dialog.resource-dialog.skin-compact{max-width:calc((100vw - 64px)/1.2)!important;max-height:calc((100dvh - 64px)/1.2)!important}
.skin-compact .skin-live-preview{position:sticky;top:0;align-self:start}.skin-compact .skin-live-preview .rd-note{margin-top:10px}
/* The tab row: the four tabs, and on Style, Mode and the accent at its right end (lib/appearance-style.js styleTopControls). */
.skin-compact .skin-tab-row{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;padding-right:16px;border-bottom:1px solid var(--line,#3c3d39);flex:none}
.skin-compact .skin-tab-row>.resource-dialog-tabs{border-bottom:0;padding-right:0}
/* The preview's own caption (Live preview · All pages) sits inside the picture, bottom right, quiet; its line is freed.
   An app's look keeps the caption row under the preview for its accent dots. */
.skin-compact .surface-preview-caption:not(:has(.surface-accents)){position:relative;z-index:1;height:0;margin:0;pointer-events:none}
.skin-compact .surface-preview-caption:not(:has(.surface-accents))>.rd-note{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--panel) 74%,transparent);color:var(--muted);backdrop-filter:blur(6px);white-space:nowrap}
.skin-compact .skin-preview-card{background:var(--preview-container);backdrop-filter:blur(var(--preview-container-blur))}
.skin-compact .skin-background-drop{padding:20px 12px;font-size:var(--t-tiny)}.skin-compact .skin-theme-heading{display:none}.skin-compact .skin-theme-scope{padding:8px 0;border:0}.skin-compact .skin-choice{font-size:var(--t-label)!important;padding:6px 9px;min-height:30px}.skin-compact .skin-library-label{display:block}.skin-compact .skin-saved-grid{flex-wrap:wrap;margin-top:8px}.skin-compact .skin-logo-controls{margin-bottom:12px}
.skin-compact .skin-logo-sliders{grid-template-columns:1fr}.skin-compact .skin-logo-drop{padding:12px}.skin-compact .rd-details:first-child{margin-top:0;border-top:0}.skin-compact .rd-segments{flex-wrap:wrap}
.skin-compact .resource-dialog-body{flex:1 1 auto;min-height:0;overflow:auto}.skin-compact .skin-theme-scope .skin-builtins{gap:6px}
.house-effects{position:absolute;inset:0;pointer-events:none;background:var(--skin-background-effects);z-index:0}
.house-wall :is(img,video){filter:brightness(var(--wall-light,1)) blur(var(--skin-media-blur,0px))}
@media(max-width:560px){.skin-editor.skin-compact,dialog.resource-dialog.skin-compact{width:calc((100vw - 24px)/1.2);max-width:calc((100vw - 24px)/1.2)!important}.skin-compact .skin-live-preview{position:relative}.skin-compact .skin-preview{max-height:170px;aspect-ratio:1.8}.skin-compact .rd-columns{gap:12px}.skin-compact .resource-dialog-footer .rd-status{display:none}}
/* Mark, September 25: "I should not have to scroll." On a short laptop screen the preview is wider than tall and the
   drop area shorter, so every section fits without scrolling. */
@media(min-width:561px) and (max-height:860px){dialog.resource-dialog.skin-compact{zoom:1.05;width:min(914px,calc((100vw - 64px)/1.05));max-width:calc((100vw - 64px)/1.05)!important;max-height:calc((100dvh - 64px)/1.05)!important}.skin-compact .skin-preview{max-height:190px;aspect-ratio:2}.skin-compact label.skin-media-drop{min-height:92px;margin-top:10px}.skin-compact .rd-details{margin-top:4px}.skin-compact .rd-details>summary{padding:6px 0}.skin-compact .skin-empty-media{padding:8px 9px}.skin-compact .surface-preview-caption{max-width:380px}}

:root[data-skin="active"] .house-shell .house-wall{filter:brightness(var(--wall-light,1)) blur(var(--skin-media-blur,0px))}


.skin-mode-icons{display:flex;gap:3px;margin-left:auto;background:var(--rd-inset);padding:3px;border-radius:var(--r-20)}
.skin-mode-icons button{border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.skin-mode-icons button[aria-pressed=true]{background:var(--panel);color:var(--accent);box-shadow:0 1px 3px #0001}
.house-banner [data-header-mode]{background:transparent;box-shadow:none;}
.skin-compact .skin-close{margin-left:4px}.skin-compact label.skin-media-drop{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:124px;margin-top:16px;padding:16px;border:1px dashed var(--accent);border-radius:var(--r-10);background:var(--rd-inset);text-align:center;cursor:pointer}
.skin-media-drop>svg{width:28px;height:28px;color:var(--muted)}.skin-media-drop strong{font-size:var(--t-small);font-weight:500;color:var(--text)}.skin-media-drop>span{font-size:var(--t-label)}
.skin-compact .skin-media-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0}
.skin-media-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
/* The well answers a drag (actions/background.js armDrop puts glass-drop on it). The well's own rest rule above is
   .skin-compact label.skin-media-drop, which outranked a plain .skin-media-drop.glass-drop, so the well never lit (the
   skeptic's finding, October 22): this names the same parts and one more, so the drag wins in Day and Night. */
.skin-compact label.skin-media-drop.glass-drop{background:color-mix(in srgb,var(--accent) 22%,var(--panel));border-style:solid;box-shadow:inset 0 0 0 1px var(--accent)}
.skin-compact label.skin-media-drop.glass-drop>svg{color:var(--accent)}
@media(max-width:560px){.skin-compact label.skin-media-drop{min-height:100px;margin-top:10px}}
/* One quiet line under the well while the person has Clipboard samples (lib/appearance-compact.js): muted words, and
   "sample videos" a text button in the window's accent that brings the Clipboard into the right panel. */
.skin-compact .skin-sample-hint{margin:8px 4px 0;font-size:var(--t-label);line-height:1.45;color:var(--muted);text-align:center}
.skin-sample-hint .skin-sample-link{display:inline;min-height:0;padding:0;border:0;border-radius:3px;background:none;color:var(--accent);font:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.skin-sample-hint .skin-sample-link:hover{text-decoration-thickness:2px}.skin-sample-hint .skin-sample-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Where the window stays over the right panel, or on a touch screen, the button opens the samples here instead: the
   person's posters in the well's own inset and edge, each a button that tries that sample on the wall, and the one the
   well shows now in the accent. With a mouse all six sit on one line, so a laptop's window still needs no scrolling
   (Mark, September 25); a finger gets three to a line, each wide enough to tap. */
.skin-compact .skin-sample-row:not([hidden]){--per:6;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 0}
@media(max-width:560px),(pointer:coarse){.skin-compact .skin-sample-row:not([hidden]){--per:3}}
.skin-sample-row .skin-sample{position:relative;flex:0 0 calc((100% - (var(--per) - 1)*6px)/var(--per));min-width:0;min-height:0;aspect-ratio:16/9;padding:0;border:1px solid var(--edge);border-radius:var(--r-6);overflow:hidden;background:var(--rd-inset);cursor:pointer}
.skin-sample-row .skin-sample img{display:block;width:100%;height:100%;object-fit:cover}
.skin-sample-row .skin-sample:hover,.skin-sample-row .skin-sample[aria-current=true]{border-color:var(--accent)}/* The ring sits on a layer above the poster: an inset shadow on the button itself is painted under the picture, which
   fills the button, so the sample on the wall looked like every other one (browser skeptic, October 23). */
.skin-sample-row .skin-sample[aria-current=true]::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 0 3px rgba(0,0,0,.35);pointer-events:none}
.skin-sample-row .skin-sample:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.skin-sample-row .skin-sample[aria-disabled=true]{opacity:.55;cursor:progress}
/* A finger needs more than an 11 px word: the line reads larger, and the button's padding makes what a tap can hit
   44 px tall, the house's touch size, while its equal negative margin keeps every letter where it was (a button lays
   out as an inline block). */
@media(pointer:coarse){.skin-compact .skin-sample-hint{font-size:var(--t-small)}.skin-sample-hint .skin-sample-link{padding:13px 6px;margin:-13px -6px}}

.skin-preset-icons{display:inline-flex;align-items:center;gap:2px}.skin-preset-icons button{width:28px;height:28px;padding:5px;border-radius:50%}.skin-preset-icons svg{width:18px;height:18px}.skin-preset-icons [aria-pressed="true"]{background:var(--sel);color:var(--accent);box-shadow:inset 0 0 0 1px var(--edge)}

.skin-compact .resource-dialog-header .skin-preset-icons{margin-left:auto;justify-content:flex-end}.house-banner>.skin-mode-icons{margin-left:0}