.mast .brand-mark{color:var(--joud-green)}.mast .history-actions{margin:0;gap:4px;display:flex}.mast .history-actions button{width:44px;height:44px;min-height:44px;padding:6px;background:transparent;color:var(--ui-text);border:0}.mast #saveCanvas{display:flex;align-items:center;justify-content:center;gap:9px}.mast .tabs [aria-current=true]{box-shadow:inset 0 -3px var(--joud-yellow)}
.tool-rail{display:flex;flex-direction:column;gap:5px;padding:22px 6px;background:var(--ui-surface);border-right:1px solid var(--ui-border);align-self:stretch}.tool-rail button{font:500 11px/1.4 var(--ui-font);color:var(--ui-muted);background:none;border:0;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-height:60px;padding:6px 3px;border-radius:8px}.tool-rail .pocket-icon{font-size:18px}.tool-rail button:hover,.tool-rail button:focus-visible{background:var(--ui-soft);color:var(--ui-action)}.tool-rail [data-tool=nfc]{margin-top:12px;border-top:1px solid var(--ui-border);border-radius:0;color:var(--ui-action)}body[data-editor-mode=design] .tool-rail [data-tool=design],body[data-editor-mode=details] .tool-rail [data-tool=details],body[data-editor-mode=elements] .tool-rail [data-tool=elements]{background:var(--ui-soft);color:var(--ui-action);box-shadow:inset 3px 0 var(--joud-yellow)}
body:not([data-workspace-mode=edit]) .tool-rail{display:none}.canvas-board{border:0;background:var(--ui-canvas);border-radius:12px}.canvas-workspace .kicker,.editor-sidebar .kicker{color:var(--ui-action);letter-spacing:.12em}.canvas-board .card{border:1px solid #0c45431a}.preset-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-sidebar .editor-tabs button[aria-pressed=true]{border-bottom-color:var(--joud-yellow)}.editor-sidebar{scroll-margin-top:75px}.image-width{display:none}#elementPanel[data-selected-type=image] .image-width{display:block}.image-width input{width:100%;accent-color:var(--ui-action);min-height:36px}.canvas-workspace .welcome{background:transparent;border:0;border-inline-start:3px solid var(--joud-yellow);border-radius:0;padding:3px 12px}.canvas-workspace .welcome p{margin:2px 0}.canvas-workspace .welcome h2{margin:0}
.tap-panel{margin:0 0 16px;padding:18px;border:1px solid var(--ui-border);border-top:3px solid var(--joud-yellow);border-radius:12px;background:var(--ui-surface);scroll-margin-top:90px}.tap-title{display:flex;gap:12px;align-items:center}.tap-title>span{width:44px;height:44px;display:grid;place-items:center;background:var(--ui-soft);color:var(--ui-action);border-radius:10px;font-size:20px}.tap-title h3{font-size:19px;margin:0}.tap-title small{font:10px var(--latin);letter-spacing:.12em;color:var(--ui-muted)}.tap-capabilities{display:grid;gap:0;margin-top:12px}.tap-capabilities div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--ui-border);font-size:12px}.tap-capabilities span,.tap-guide{color:var(--ui-muted)}.tap-capabilities b{font-weight:600;text-align:end}.tap-guide{font-size:12px;line-height:1.85;margin:10px 0}.tap-panel .radio-block{padding:12px;background:var(--ui-soft);color:var(--ui-text);border:0}.radio-block .radio-label{display:none}.tap-panel button{font-size:12px}#tapFallback button{display:inline-flex;align-items:center;gap:8px;text-align:start}.tap-panel details{margin:10px 0}.tap-panel .action-list{grid-template-columns:1fr}.tap-panel .tools summary{font-weight:600}.tap-panel #radio,.tap-panel #destination{color:var(--ui-text)}.tap-panel #tapToggle{background:var(--ui-action);color:var(--ui-on-action)}
@media(min-width:801px){body[data-workspace-mode=edit] .studio-workspace{grid-template-columns:78px minmax(0,1fr) clamp(300px,28vw,405px)}body[data-workspace-mode=edit] .canvas-workspace{padding:24px clamp(18px,2.8vw,48px);background:var(--ui-canvas);min-height:calc(100dvh - 76px)}body[data-workspace-mode=edit] .canvas-board{min-height:clamp(265px,48vh,540px);padding:16px 2px}body[data-workspace-mode=edit] .stage-title{margin-bottom:10px}.tool-rail{position:sticky;top:76px;align-self:start;height:calc(100dvh - 76px);overflow-y:auto}.editor-sidebar>.panel{padding-inline:22px}.editor-tabs{margin-inline:-22px}.stage-title{flex-wrap:wrap;gap:8px}.stage-actions button{min-height:42px}.mast{gap:10px}}
@media(max-width:800px){.mast .history-actions{display:none}.tool-rail{flex-direction:row;order:0;justify-content:space-around;gap:2px;overflow-x:auto;padding:4px;border:0;border-bottom:1px solid var(--ui-border)}.tool-rail button{font-size:10px;min-width:38px;min-height:46px;gap:3px;padding:3px}.tool-rail .pocket-icon{font-size:14px}.tool-rail [data-tool=nfc]{margin:0;border:0}.tool-rail [data-tool=text],.tool-rail [data-tool=elements]{display:none}.canvas-workspace{padding-block:12px}.canvas-board{padding:9px 0;background:none}.editor-sidebar{position:relative;scroll-margin-top:68px}.editor-sidebar::before{content:'';display:block;width:35px;height:4px;background:var(--ui-input-border);border-radius:8px;margin:7px auto}.editor-tabs{position:static}.stage-title{margin-bottom:4px}.stage-title .kicker,.canvas-help,.stage-subtitle{display:none}.canvas-toolbar{margin-top:4px;align-items:center}.canvas-toolbar #layoutReset{flex-basis:auto}.stage-actions button{min-height:44px}.save-state{margin-top:4px}.canvas-toolbar .history-actions{display:flex;gap:3px;margin-inline-start:auto}.canvas-toolbar .history-actions button{min-width:44px;padding:6px}.editor-sidebar .preset-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.tap-panel{padding:14px}.tap-panel .tap-capabilities div{font-size:11px}}
.mobile-history{display:none}@media(max-width:800px){.mobile-history{display:flex;gap:2px;margin-inline-start:auto}.canvas-toolbar .mobile-history button{min-width:40px;min-height:44px;background:transparent;border:0}.canvas-toolbar #layoutReset{font-size:10px}}
body.inspecting-image #elementPanel{display:flex;flex-direction:column}body.inspecting-image #selectionInspector{order:-2}body.inspecting-image #elementPanel>.hint,body.inspecting-image #elementPanel>.inspector-heading{display:none}
#elementPanel[data-selected-type=image] #selectionInspector{display:flex;flex-direction:column}#elementPanel[data-selected-type=image] .selection-heading{order:-6;padding-top:0}#elementPanel[data-selected-type=image] .geometry-grid{order:-5}#elementPanel[data-selected-type=image] .image-width{order:-4;margin:10px 0 2px}#elementPanel[data-selected-type=image] #replaceImage{order:-3}#elementPanel[data-selected-type=image] .align-tools{order:-2}.image-width span{display:flex;justify-content:space-between;align-items:center}.image-width #widthReadout{font:12px var(--latin);color:var(--ui-action)}.image-width input[type=range]{appearance:auto;padding:0;border:0;box-shadow:none;background:transparent}.selection-heading h3{color:var(--ui-action)}#selectionInspector[hidden],#elementPanel[hidden]{display:none!important}
@media(max-width:800px) and (min-height:590px){body.inspecting-image[data-workspace-mode=edit] .studio-workspace{height:calc(100vh - 139px - env(safe-area-inset-bottom));height:calc(100dvh - 139px - env(safe-area-inset-bottom));min-height:0}body.inspecting-image[data-workspace-mode=edit] .canvas-workspace{flex:none;padding:4px 12px}body.inspecting-image[data-workspace-mode=edit] .stage-title,body.inspecting-image[data-workspace-mode=edit] .save-state{display:none}body.inspecting-image[data-workspace-mode=edit] .canvas-board{padding-block:4px}body.inspecting-image[data-workspace-mode=edit] .canvas-board .stage{max-width:min(100%,42vh)}body.inspecting-image[data-workspace-mode=edit] .editor-sidebar{min-height:0;flex:1;overflow-y:auto}body.inspecting-image .geometry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}body.inspecting-image .geometry-grid label{margin:4px 0}body.inspecting-image .geometry-grid input{margin:3px 0;padding:6px;min-height:38px}body.inspecting-image .editor-tabs button{min-height:44px}body.inspecting-image .editor-tabs{margin-bottom:12px}body.inspecting-image .canvas-toolbar{justify-content:space-between}.tool-rail button{min-width:44px}}
.image-precision{display:none}#elementPanel[data-selected-type=image] .image-precision{display:block;margin:12px 0}#elementPanel[data-selected-type=image] #selectionInspector>.geometry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#elementPanel[data-selected-type=image] #selectionInspector>.geometry-grid label:has([data-prop=w]),#elementPanel[data-selected-type=image] #selectionInspector>.geometry-grid label:has([data-prop=h]),#elementPanel[data-selected-type=image] #selectionInspector>.geometry-grid label:has([data-prop=rotation]){display:none}.selection-box{border-style:dashed;box-shadow:0 0 0 1px white}body.inspecting-image .tool-rail [data-tool=elements]{background:none;box-shadow:none;color:var(--ui-muted)}body.inspecting-image .tool-rail [data-tool=logo]{background:var(--ui-soft);color:var(--ui-action);box-shadow:inset 3px 0 var(--joud-yellow)}

/* Face navigation stays beside the canvas on both tablet and phone. */
.card-sides{display:flex;gap:4px;align-self:flex-start;width:max-content;max-width:100%;padding:3px;margin:4px 0 10px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface)}
.card-sides button{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:42px;padding:6px 15px;border:0;border-radius:10px;background:transparent;color:var(--ui-muted);font:600 12px/1.35 var(--ui-font)}
.card-sides button[aria-pressed=true]{background:var(--ui-action);color:var(--ui-on-action)}
.side-swatch{display:inline-block;width:18px;height:12px;border:1px solid currentColor;border-radius:2px;background:linear-gradient(110deg,transparent 40%,currentColor 41% 51%,transparent 52%)}
.side-swatch.reverse{background:linear-gradient(0deg,transparent 21%,currentColor 22% 31%,transparent 32% 49%,currentColor 50% 59%,transparent 60%);background-size:70% 100%;background-position:center;background-repeat:no-repeat}
body[data-card-side=back] .legacy-gallery{display:none}
.icon-library h3{font-size:14px;margin:16px 0 8px}
#cardIconPicker{display:grid;grid-template-columns:repeat(auto-fit,minmax(63px,1fr));gap:5px}
.icon-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:55px;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:9px}
.icon-choice .contact-glyph,.tool-rail .contact-glyph{width:19px;height:19px;color:var(--ui-action)}
.icon-choice>span:last-child{font:500 10px/1.2 var(--ui-font)}
.icon-choice:hover,.icon-choice:focus-visible{background:var(--ui-soft);border-color:var(--ui-action)}
#elementPanel[data-selected-type=icon] .text-options,#elementPanel[data-selected-type=icon] label:has([data-prop=size]),#elementPanel[data-selected-type=icon] label:has([data-prop=align]),#elementPanel[data-selected-type=icon] label:has([data-prop=shape]){display:none}
.preset-button{padding:0!important;overflow:hidden;text-align:start}
.preset-button>span{display:block;padding:6px 9px;color:var(--ui-text);font:600 12px/1.4 var(--ui-font)}
.preset-button:focus-visible,.card-sides button:focus-visible,#cardIconPicker button:focus-visible{outline:3px solid var(--ui-action);outline-offset:2px}
.legacy-gallery{margin-block:14px}
@media(max-width:800px){
 .card-sides{margin:5px auto 2px}
 .card-sides button{min-height:42px;padding-inline:13px}
 .editor-sidebar .preset-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .tool-rail{justify-content:space-evenly}
 .tool-rail button{flex:1;min-width:44px}
 .canvas-board .stage{width:100%;max-width:430px}
 .icon-choice{min-height:56px}
}
@media(max-width:375px){.card-sides button{font-size:11px}.tool-rail button{min-width:42px}}

/* Keep the artwork in view while the lower inspector scrolls independently. */
@media(max-width:800px) and (min-height:650px){
 body[data-workspace-mode=edit] .studio-workspace{height:calc(100vh - 136px - env(safe-area-inset-bottom));height:calc(100dvh - 136px - env(safe-area-inset-bottom));min-height:0;display:flex;flex-direction:column}
 body[data-workspace-mode=edit] .tool-rail{flex:none}
 body[data-workspace-mode=edit] .canvas-workspace{position:static;flex:none;align-self:stretch;padding:6px 14px 5px}
 body[data-workspace-mode=edit] .stage-title{margin:0}
 body[data-workspace-mode=edit] .stage-title h1{font-size:17px}
 body[data-workspace-mode=edit] .stage-actions button{padding:5px 8px;min-height:36px;font-size:11px}
 body[data-workspace-mode=edit] .canvas-board{padding:5px 0;min-height:0}
 body[data-workspace-mode=edit] .canvas-board .stage{max-width:min(100%,44dvh)}
 body[data-workspace-mode=edit] .card-sides{margin:2px auto 0}
 body[data-workspace-mode=edit] .canvas-toolbar{margin:1px 0;justify-content:space-between}
 body[data-workspace-mode=edit] .save-state{margin:0;line-height:1.3}
 body[data-workspace-mode=edit] .editor-sidebar{position:relative;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scroll-padding-top:54px}
 body[data-workspace-mode=edit] .editor-tabs{position:sticky;top:0;z-index:4}
}
@media(max-width:800px) and (min-height:650px) and (max-height:760px){
 body[data-workspace-mode=edit] .canvas-board .stage{max-width:min(100%,37dvh)}
 body[data-workspace-mode=edit] .save-state{display:none}
}
body[data-inspector-tool=icons] #elementPanel>.inspector-heading,
body[data-inspector-tool=icons] #elementPanel>.hint,
body[data-inspector-tool=icons] #insertGroup>summary,
body[data-inspector-tool=icons] #insertGroup>.add-elements,
body[data-inspector-tool=icons] #insertGroup>label,
body[data-inspector-tool=icons] #layerGroup,
body[data-inspector-tool=icons] #elementPanel>.check-label{display:none}
body[data-inspector-tool=icons] #insertGroup{margin:0;border:0}
body[data-inspector-tool=icons] .icon-library h3{margin-top:0}
body[data-inspector-tool=icons] .tool-rail [data-tool=icons]{color:var(--ui-action);background:var(--ui-soft)}
/* Small icons need a distinct move target inside and a full-size resize target outside. */
.selection-box.compact .resize-handle{right:-34px;bottom:-34px}
.selection-box.compact .resize-handle::after{inset:4px auto auto 4px;width:14px;height:14px}