/* Mondi August 2025, pp. 7–17, 44. Arial is the local proof fallback. */
:root{font-family:Arial,sans-serif;color:#000;background:#fff;--accent:#EC6607;--line:#dfe3e9;--muted:#55616e}
button,input,select,textarea{font:inherit}button{border-radius:5px}button:hover{background:#f2f5f9}button.primary{background:#EC6607;color:#000;border-color:#EC6607;font-weight:bold}button.primary:hover{background:#EC6607;box-shadow:inset 0 0 0 2px #0002}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #0055A4;outline-offset:3px}
.mondi-brand-logo{width:108px;height:auto;display:block;margin:14px 18px 14px 0;object-fit:contain}.brand{gap:12px;min-width:290px}.brand b{font-weight:700;font-size:21px;letter-spacing:-.4px}.brand small{letter-spacing:.3px;font-size:10px}.local{letter-spacing:.5px;color:#0055A4}.local i{background:#EC6607}.eyebrow{letter-spacing:.8px;color:#0055A4}h1,h2,h3{font-weight:700;letter-spacing:-.4px}h1{font-size:clamp(25px,3vw,43px)}h2{font-size:20px}nav button.active{color:#0055A4;border-color:#EC6607;font-weight:bold}aside{background:#f8f9fb}.panel h3{font-size:13px;color:#0055A4}.hint,.check,.select-control,.numeric-control,.color-control{font-size:12px}.panel{padding:20px 22px}.material-tile img{background:#f2f4f7}.material-tile>span:last-child{font-size:12px}.material-tile.selected{box-shadow:0 0 0 1px #EC6607}.canvas-footer{background:#fffef5eb;border-color:var(--line);color:#445362}.view-tools{box-shadow:0 5px 25px #0055a410;border-color:var(--line)}.view-tools button{background:#fffef5ed}.dimension-diagram path{stroke:#0055A4;fill:#0055a405}.dimension-diagram .measure{stroke:#EC6607}.dimension-diagram text{fill:#0055A4}.size-steps button{background:#f8f9fb;color:#0055A4}.size-steps button:hover{background:#EC6607;color:#000}.logo-overlay polygon{stroke:#0055A4}.logo-handle{border-color:#0055A4}.logo-overlay>span{background:#fff;color:#0055A4}.side-switch{display:flex;gap:7px;margin:8px 0 17px}.side-switch button{flex:1;padding:10px 6px}.art-add-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0}.art-add-tools button{text-align:left;min-height:39px}.art-history{display:flex;gap:5px;margin:14px 0}.art-history button{font-size:11px;padding:7px 10px}.art-history button:last-child{margin-left:auto}.art-settings{padding-top:5px;border-top:1px solid var(--line)}.art-settings h4,.art-layers h4{font-size:12px;margin:13px 0;color:#0055A4}.art-field{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:12px 0;font-size:12px}.art-field input{width:95px;border:1px solid var(--line);padding:8px;border-radius:4px}.art-field:has(textarea){display:block}.art-field textarea{display:block;width:100%;resize:vertical;padding:9px;border:1px solid var(--line);border-radius:4px;margin-top:7px}.brand-swatches{display:flex;gap:7px;margin:15px 0;flex-wrap:wrap}.brand-swatches button{width:25px;height:25px;min-width:25px;padding:0;border:1px solid #0002;border-radius:50%}.brand-swatches button[aria-pressed=true]{outline:2px solid #0055A4;outline-offset:3px}.layer-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.layer-actions button{font-size:10px;padding:8px 3px}.art-layers{border-top:1px solid var(--line);margin-top:18px}.layer-row{display:flex;gap:5px;margin:5px 0}.layer-row button:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:11px;max-width:260px}.layer-row .selected{border-color:#0055A4;background:#eaf1fa}.layer-row button:last-child{font-size:10px;padding:6px 9px}.brand-check{font-size:11px;line-height:1.5;background:#fff;border-left:3px solid #EC6607;padding:12px 14px;margin-top:18px;color:#475467}.brand-check b{color:#0055A4}.brand-check p{margin:7px 0 0}.brush-dialog{width:min(880px,92vw);max-height:88vh;border:1px solid var(--line);padding:24px}.library-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-head h2{margin:0}.brush-dialog input{width:100%;margin:18px 0;padding:10px;border:1px solid var(--line)}.brush-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.brush-choice{padding:8px;text-align:left}.brush-choice img{width:100%;height:100px;object-fit:contain;display:block;background:white}.brush-choice span{display:block;font-size:11px;margin:8px 0 0}.brush-choice[hidden]{display:none}.backdrop-thumb{display:block;width:100%;height:110px;object-fit:contain;background:#fff;margin:10px 0}#artboards{position:absolute;left:20px;top:150px;bottom:85px;width:calc(50% - 35px);z-index:3;border:1px solid var(--line);border-radius:7px;background:#fff;box-shadow:0 5px 25px #0055a40c;display:flex;flex-direction:column;padding:12px}#artboards[hidden]{display:none}.artboard-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#0055A4;gap:5px}.artboard-head button{font-size:10px;padding:6px}.artboard-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:10px;background:#f2f5f9}.artboard-sheet{background:#c6ad96 url('/assets/paper-basecolor.jpg') center/cover;box-shadow:0 2px 12px #0001}.artboard-sheet[hidden]{display:none}.artboard-sheet canvas{touch-action:none}.editing-flat #viewport{left:50%}.editing-flat .canvas-title{max-width:45%}.editing-flat .view-tools{left:75%}#artboards>.hint{font-size:10px;text-align:center;margin-top:9px}.brush-dialog::backdrop{background:#00356877}
@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 405px}}@media(max-width:950px){.brand{min-width:235px}.mondi-brand-logo{width:85px;margin-right:7px}.brand b{font-size:18px}.panel{padding-left:18px;padding-right:18px}.side-switch button{font-size:11px}.art-history{flex-wrap:wrap}.art-history button:last-child{margin-left:0}.brush-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){header{padding:0 12px}.brand{min-width:0}.brand>div{display:none}.mondi-brand-logo{width:92px;margin:12px 10px 12px 0}.editing-flat #viewport{left:0}.editing-flat #viewport canvas{visibility:hidden}#artboards{inset:12px 12px 42px;width:auto}.editing-flat .canvas-title,.editing-flat .view-tools{display:none}.brush-grid{grid-template-columns:repeat(2,1fr)}.brush-choice img{height:80px}.art-history button:last-child{margin-left:auto}}

.material-grid:has(.selected){grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.material-grid:has(.selected) .material-tile img{height:44px;padding:4px;object-fit:contain}.material-grid:has(.selected) .material-tile>span:last-child{font-size:10px;padding:7px 4px;text-align:center}.material-grid:has(.selected) .material-tile:nth-child(4)>span:last-child{font-size:9px}
/* v4.1: local Google Fonts substitutes, selected by Tony. */
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope[wght].ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat Brush';src:url('/assets/fonts/CaveatBrush-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{font-family:Manrope,Arial,sans-serif}.brand b{font-size:20px}.art-field select{max-width:195px;padding:9px;border:1px solid var(--line);border-radius:5px;background:#fff}.art-settings:empty{display:none}
.layer-row{display:grid;grid-template-columns:22px minmax(0,1fr) 30px 28px;align-items:center;gap:3px;border:1px solid #dde3eb;border-radius:6px;background:white;padding:4px;min-height:48px;margin:7px 0}.layer-row.is-selected{border-color:#0055A4;background:#edf3fa}.layer-row.dragging{opacity:.65;box-shadow:0 3px 10px #0055a42a}.layer-row button{border:0;background:transparent;margin:0;min-width:0;padding:4px;box-shadow:none}.layer-row button:first-child{flex:none;max-width:none;text-align:center;font-size:20px;cursor:grab;touch-action:none}.layer-row .layer-pick{display:flex;align-items:center;gap:8px;text-align:left;overflow:hidden;font-size:11px}.layer-pick>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-thumb{display:flex;align-items:center;justify-content:center;width:30px;height:32px;flex:0 0 30px;background:white;border:1px solid #e3e7ed;border-radius:3px;font-size:19px}.layer-thumb img{width:100%;height:100%;object-fit:contain}.layer-eye svg{width:20px;height:20px;stroke:#0055A4;stroke-width:1.5;fill:none}.layer-eye.is-hidden{opacity:.35}.layer-eye.is-hidden:after{content:'';position:absolute;width:22px;height:1px;background:#0055A4;transform:translate(-21px,9px) rotate(-45deg)}.layer-row .layer-delete{font-size:22px;color:#5b6875;padding:1px}.layer-row .layer-delete:hover{background:#fff0e7;color:#a13400}.layer-grip:focus-visible{outline-offset:0}.art-add-tools{gap:6px}.art-add-tools button{font-size:12px}.art-history{margin-bottom:12px}.art-layers{margin-top:12px}.rotate-handle{border-radius:50%;width:25px;height:25px;cursor:grab;font-size:16px;line-height:20px;color:#0055A4}.rotate-handle[hidden]{display:none}
.background-actions{margin:6px 0 15px}.background-actions .wide{margin-top:8px}.remove-background{background:#fff2e9;border:1px solid #EC6607;color:#733000;font-weight:700;font-size:11px}.remove-background:hover{background:#ffe5d3}.background-crop{display:block;width:100%;height:auto;max-height:250px;object-fit:contain;border:1px solid #a5b3c5;border-radius:5px;cursor:move;touch-action:none;background:white}.background-presets{margin:12px 0}.background-presets button{font-size:12px}.side-switch button{font-weight:650}.panel:has(.side-switch):first-child{padding-bottom:4px}
@media(max-width:950px){.brand b{font-size:16px}.brand{min-width:235px}.layer-row{grid-template-columns:20px minmax(0,1fr) 28px 25px}}

body{height:100dvh;overflow:hidden}main,aside,#inspector{min-height:0}.canvas-title h1{font-size:27px;max-width:430px;letter-spacing:-.7px}.canvas-title{top:20px}.layer-row button.layer-delete{font-size:23px;padding:0;line-height:30px}.layer-row.drop-before{border-top:3px solid #EC6607}.layer-row.drop-after{border-bottom:3px solid #EC6607}@media(max-width:650px){.canvas-title h1{font-size:23px;max-width:310px}}

html{height:100%;overflow:hidden}
@media(max-width:650px){.brand{min-width:0;flex-shrink:0}.project-tools{gap:5px}.project-tools button{white-space:nowrap;font-size:10px;padding:8px 7px}header{gap:8px}.mondi-brand-logo{margin-right:0}}

/* Dedicated artwork workspace, with compact labelled icon tools. */
.inspector-top nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.inspector-top nav button{font-size:12px;padding:0 0 13px;min-width:0;white-space:nowrap}
.material-grid,.material-grid:has(.selected){grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.art-icon-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:16px 0 12px}
.art-icon-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:68px;padding:10px 3px;color:#0055A4;background:#fff}
.art-icon-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.art-icon-button img{width:48px;height:24px;object-fit:contain}
.art-icon-button span{font-size:10px;font-weight:650;line-height:1.2;margin:0}
.art-icon-button[aria-pressed=true]{background:#fff0e4;border-color:#EC6607;color:#0055A4;box-shadow:inset 0 -2px #EC6607}
.art-view-tools{display:flex;gap:7px;margin:8px 0 14px}
.art-view-tools .art-icon-button{flex:1;flex-direction:row;min-height:40px;gap:7px;padding:8px}
.art-view-tools svg{width:19px;height:19px}.art-view-tools span{font-size:11px}
@media(max-width:650px){.inspector-top nav{gap:8px}.art-icon-tools{gap:7px}}

.inspector-footer{flex-wrap:wrap;gap:8px}.inspector-footer #reset{color:#0055A4;font-weight:650}.inspector-footer #undo-default{font-size:11px}

/* v4.2: independent artwork stack keeps the editing controls in place. */
.tutorial-link{display:flex;align-items:center;border:1px solid var(--line);border-radius:5px;padding:9px 13px;color:#0055A4;text-decoration:none;font-size:12px;white-space:nowrap}.tutorial-link:hover{background:#f2f5fa}
main.has-layers{grid-template-columns:minmax(0,1fr) 240px 370px}
#layer-sidebar{min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff;border-left:1px solid var(--line);overflow:hidden}#layer-sidebar[hidden]{display:none}
.layers-heading{padding:26px 16px 18px;border-bottom:1px solid var(--line)}.layers-heading h2{margin:7px 0 12px}.layers-heading p{font-size:11px;color:var(--muted);margin:0}
#artwork-layers{overflow-y:auto;flex:1;min-height:0;padding:9px 10px;scrollbar-width:thin}.layers-tip{padding:12px;margin:0;border-top:1px solid var(--line);font-size:10px;line-height:1.7;color:var(--muted)}
.text-alignment{display:flex;gap:5px;margin:16px 0}.text-alignment button{flex:1;padding:8px;font-size:11px}.text-alignment button[aria-pressed=true]{border-color:#EC6607;background:#fff0e4;color:#0055A4}
.art-history{gap:7px}.art-history button:last-child{margin-left:0}.art-settings{min-height:30px}
@media(min-width:1500px){main.has-layers{grid-template-columns:minmax(0,1fr) 260px 405px}}
@media(max-width:1100px) and (min-width:651px){main.has-layers{grid-template-columns:minmax(0,1fr) 190px 320px}.has-layers .canvas-title h1{font-size:21px}.has-layers .canvas-title{left:18px}.layers-heading{padding-left:12px}.project-tools{gap:5px}header{gap:10px}.local{display:none}.layer-row{grid-template-columns:18px minmax(0,1fr) 24px 22px}.layer-thumb{width:22px;flex-basis:22px}}
@media(max-width:650px){.tutorial-link{font-size:10px;padding:8px 7px}.project-tools{flex-wrap:wrap;justify-content:flex-end}.has-layers{display:grid;grid-template-columns:145px minmax(0,1fr)!important;grid-template-rows:45% minmax(0,1fr)}.has-layers #workspace{grid-column:1/-1;height:auto;min-height:0}.has-layers aside{min-width:0}.has-layers .inspector-top{padding-left:8px;padding-right:8px}.has-layers .inspector-top nav{gap:2px}.has-layers .inspector-top nav button{font-size:9px}.has-layers .panel{padding:12px 8px}.has-layers .art-icon-tools{grid-template-columns:repeat(3,1fr)}.layers-heading{padding:14px 8px 10px}.layers-heading .eyebrow{font-size:7px}.layers-heading h2{font-size:16px;margin:3px 0 7px}#artwork-layers{padding:5px}.layer-row{grid-template-columns:16px minmax(0,1fr) 22px 18px;gap:0;padding:2px}.layer-thumb{display:none}.layer-row .layer-pick{font-size:9px}.layers-tip{font-size:9px;padding:8px}.has-layers .inspector-footer>span{display:none}}

/* Primary help link replaces the redundant header export shortcut. */
.project-tools .tutorial-link.primary{background:#EC6607;border-color:#EC6607;color:#111;font-weight:650}.project-tools .tutorial-link.primary:hover{background:#d85c06;border-color:#d85c06}.tutorial-link:focus-visible{outline:3px solid #0055A4;outline-offset:3px}