:root {
    color-scheme: light;
    font-family: Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.concept-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.concept-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.concept-nav a[aria-current="page"] { pointer-events: none; }

.app-header {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 20px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: block; width: 34px; height: 34px; object-fit: contain; border-radius: 4px; }
.brand h1 { margin: 0; font-size: 18px; line-height: 1; text-transform: uppercase; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.primary-action, .secondary-action, #logo-toggle-btn {
    min-height: 38px;
    border: 0;
    padding: 0 15px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.settings-wrap { position: relative; }
.settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid currentColor;
    padding: 0 13px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.settings-button svg, .icon-button svg { width: 16px; height: 16px; }
.settings-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 100;
    width: min(310px, calc(100vw - 24px));
    padding: 14px;
    background: #fff;
    color: #172126;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    box-shadow: 0 18px 48px rgba(24, 34, 39, .2);
}
.settings-popover[hidden] { display: none; }
.settings-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.settings-heading strong, .settings-heading span { display: block; }
.settings-heading strong { font-size: 13px; }
.settings-heading span { margin-top: 3px; color: #68777d; font-size: 11px; }
.icon-button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: transparent; color: inherit; }
.theme-options { display: grid; gap: 7px; }
.theme-option {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 62px;
    padding: 8px;
    border: 1px solid #d8dfe2;
    border-radius: 4px;
    background: #fff;
    color: #172126;
    text-align: left;
}
.theme-option:hover { border-color: #8a989e; }
.theme-option[aria-pressed="true"] { border: 2px solid #d83227; padding: 7px; }
.theme-option strong, .theme-option small { display: block; }
.theme-option strong { font-size: 12px; }
.theme-option small { margin-top: 3px; color: #6b797f; font-size: 10px; }
.theme-check { width: 16px; height: 16px; opacity: 0; }
.theme-option[aria-pressed="true"] .theme-check { opacity: 1; color: #d83227; }
.theme-swatch { display: grid; grid-template-columns: 15px 1fr 13px; width: 54px; height: 42px; overflow: hidden; border: 1px solid #9ca7ab; border-radius: 2px; }
.studio-swatch span:nth-child(1), .studio-swatch span:nth-child(3) { background: #fff; }
.studio-swatch span:nth-child(2) { background: #e9edef; }
.workbench-swatch span:nth-child(1), .workbench-swatch span:nth-child(3) { background: #e4e7df; }
.workbench-swatch span:nth-child(2) { background: #f2c500; }
.catalogue-swatch span:nth-child(1) { background: #fff; }
.catalogue-swatch span:nth-child(2) { background: #e7e3d8; }
.catalogue-swatch span:nth-child(3) { background: #f2f0e9; }

.field-label {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.count-pill { padding: 4px 7px; font-size: 10px; font-weight: 800; }

/* Shown only when JavaScript is off. The descriptive copy that used to live
   here is now a real section further down the page, which is static HTML and
   so is readable with or without scripts — this is just the notice. */
.noscript-fallback {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    line-height: 1.6;
}

.search-wrap { position: relative; padding: 12px; }
.search-wrap::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    opacity: .55;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
}

#sign-search {
    width: 100%;
    height: 42px;
    border: 0;
    padding: 0 12px 0 38px;
    outline: none;
    font-size: 12px;
    font-weight: 700;
}

.library-panel, .editor-panel, .preview-panel { min-width: 0; min-height: 0; overflow: hidden; }
.library-panel { display: flex; flex-direction: column; }
#category-list { flex: 1; overflow: auto; }

.preview-panel { position: relative; display: flex; flex-direction: column; }
.preview-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; padding: 28px; }
.preview-meta { position: absolute; top: 14px; left: 16px; z-index: 2; font-size: 10px; font-weight: 800; text-transform: uppercase; }

#capture-area.paper-preview {
    width: min(34vw, calc(68vh * .707));
    max-width: 430px;
    aspect-ratio: 1 / 1.414;
    flex: none;
    overflow: hidden;
    background: #fff;
}

#capture-area.paper-preview.landscape {
    width: min(48vw, calc(64vh * 1.414));
    max-width: 700px;
    aspect-ratio: 1.414 / 1;
}

#sign-svg-container, #sign-svg-container svg, #category-list svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

#sign-text-display {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: pre-wrap;
    /* `break-word`, never `anywhere`: the latter splits a word at any
       character, which put "IM / PLANTS" across two lines of a printed sign.
       This only breaks a word that cannot fit a line by itself, and the
       auto-fit shrinks the type until that barely happens. */
    overflow-wrap: break-word;
}

/* The caption text lives in its own block rather than as a bare text node in a
   flex container. html2canvas does not reproduce flex vertical centring when it
   paints loose text, which pushed the caption down and let the colour bar slice
   the last line off in the exported PDF. Given a real element it uses the box
   the browser already laid out, so print matches preview. */
#sign-text-inner {
    display: block;
    width: 100%;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.editor-panel { display: flex; flex-direction: column; overflow-y: auto; }
.editor-section { padding: 18px; }
.field-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.clear-btn { width: 30px; height: 30px; border: 0; background: transparent; font-size: 18px; }

#sign-text-input {
    width: 100%;
    min-height: 102px;
    resize: vertical;
    padding: 12px;
    outline: none;
    font-weight: 650;
    line-height: 1.4;
}

.field-foot { display: flex; justify-content: flex-end; margin-top: 6px; font-size: 10px; font-weight: 700; }
#alignment-buttons { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.align-btn { display: grid; place-items: center; min-height: 38px; border: 0; }
.align-btn svg { width: 17px; height: 17px; }
.logo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-export { margin-top: auto; padding: 18px; }
#generate-pdf-btn { width: 100%; min-height: 50px; border: 0; font-weight: 850; text-transform: uppercase; }

/* ---- Library tiles: favourite stars ---- */

.sign-tile { position: relative; }
.sign-tile .sign-picker-button { width: 100%; }

.fav-toggle {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    line-height: 1;
    font-size: 13px;
    color: #9aa3a7;
    background: transparent;
    cursor: pointer;
    /* Unfavourited stars stay out of the way until the tile is approached. */
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}
.sign-tile:hover .fav-toggle,
.fav-toggle:focus-visible { opacity: 1; }
.fav-toggle.is-fav { opacity: 1; color: #e0a300; }
.fav-toggle:hover { color: #e0a300; }

.category-header { background: #f6f7f8; }

/* ---- Sheet branding ---- */

.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.switch input { width: 15px; height: 15px; accent-color: #d83227; cursor: pointer; }

.logo-slot { flex: 0 0 auto; display: block; width: 40px; height: 40px; }
.logo-preview,
.logo-empty {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 4px;
    background: #fff;
}
.logo-preview { display: block; object-fit: contain; }
/* Shown once the logo is removed, so the slot stays visible and it is obvious
   that a logo can go there. */
.logo-empty {
    display: grid;
    place-items: center;
    border-style: dashed;
    background: transparent;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    opacity: 0.5;
}
.logo-preview[hidden], .logo-empty[hidden] { display: none; }

.brand-fields { display: grid; gap: 10px; }

.logo-swatches { display: grid; gap: 6px; }
.swatch-caption { font-size: 10px; font-weight: 700; text-transform: uppercase; opacity: 0.6; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    /* Neutral grey so the outline shows against both a dark swatch and a
       dark theme background. */
    border: 1px solid rgba(128, 128, 128, 0.55);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active { box-shadow: 0 0 0 2px currentColor; }
.colour-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.colour-row input[type="color"] { width: 52px; height: 30px; padding: 2px; border: 1px solid currentColor; background: none; cursor: pointer; }
#brand-name { width: 100%; padding: 9px 10px; font-weight: 650; outline: none; }

/* The bar is part of the captured sheet, so its sizing is in page-relative
   units — it has to scale with the preview and rasterise at any capture scale. */
.brand-bar {
    flex: 0 0 auto;
    width: 100%;
    min-height: 6.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35em 0.6em;
    font-size: clamp(7px, 3.1cqw, 20px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
}
#capture-area.paper-preview { container-type: inline-size; }
.brand-bar[hidden] { display: none !important; }
/* Prompt text, not content: dimmed so it reads as a hint, and dropped from the
   export in pdf.js. */
.brand-bar.is-placeholder > span { opacity: 0.6; font-weight: 600; }

/* ---- Batch ---- */

/* The editor panel is a scrolling flex column. Without this its sections
   shrink to fit instead of overflowing, and the batch controls collapse on
   top of each other on short viewports. */
.editor-panel > * { flex-shrink: 0; }
.batch-section { display: flex; flex-direction: column; }
.batch-add { width: 100%; min-height: 38px; border: 1px solid currentColor; background: transparent; font-size: 11px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.batch-add:hover { background: rgba(0, 0, 0, 0.06); }
.batch-empty { margin: 10px 0 0; font-size: 11px; line-height: 1.45; opacity: 0.65; }
.batch-empty[hidden] { display: none; }

.batch-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; max-height: 190px; overflow-y: auto; }
.batch-row { display: flex; align-items: stretch; gap: 4px; }
.batch-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.batch-row-main:hover { border-color: currentColor; }
.batch-index { flex: 0 0 auto; width: 17px; font-size: 10px; font-weight: 800; opacity: 0.6; }
.batch-labels { min-width: 0; display: grid; }
.batch-labels strong { font-size: 11px; font-weight: 800; }
.batch-labels small,
.batch-labels strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-labels small { font-size: 10px; opacity: 0.6; }
.batch-row-remove { flex: 0 0 auto; width: 26px; border: 1px solid rgba(128, 128, 128, 0.4); background: transparent; font-size: 15px; line-height: 1; cursor: pointer; }
.batch-row-remove:hover { border-color: #d83227; color: #d83227; }

.editor-export { display: grid; gap: 8px; }
#generate-pdf-btn, #batch-export-btn { width: 100%; min-height: 50px; border: 0; font-weight: 850; text-transform: uppercase; }
#batch-export-btn { min-height: 42px; border: 1px solid currentColor; background: transparent; font-size: 11px; }
#batch-export-btn:disabled, #batch-clear-btn:disabled, #generate-pdf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#batch-clear-btn { width: auto; padding: 0 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
#logo-toggle-btn.is-active { background: #111; color: #fff; }

/* Theme tints for the new controls. */
.workbench .category-header { background: #e6e9e1; }
.workbench .batch-add:hover, .workbench .batch-row-main:hover { background: #eaece5; }
.workbench #brand-name, .workbench .batch-row-main { color: #23271f; }
.workbench #batch-export-btn { color: #7a6600; border-color: #c9a600; }
.studio .category-header { background: #f7f9f9; }
.studio #batch-export-btn { color: #d83227; border-color: #d83227; }
.catalogue .category-header { background: #f2c500; }
.catalogue #batch-export-btn { color: #176a4d; border-color: #176a4d; }

/* ---- The join between the tool and the written content --------------------
   The workspace fills the whole first screen, so without this there is nothing
   to say the page continues. It is a link rather than a decoration: clicking it
   jumps to the first section. */

.content-cue {
    display: block;
    padding: 30px 24px 26px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: currentColor;
}

.content-cue span {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
}

.content-cue-chevron {
    display: block;
    width: 15px;
    height: 15px;
    margin: 10px auto 0;
    border-right: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(45deg);
    animation: cue-nudge 2.4s ease-in-out infinite;
}

@keyframes cue-nudge {
    0%, 62%, 100% { transform: rotate(45deg) translate(0, 0); }
    76%           { transform: rotate(45deg) translate(3px, 3px); }
}

@media (prefers-reduced-motion: reduce) {
    .content-cue-chevron { animation: none; }
}

/* Theme trim. Each sets its own surface, rules and chevron accent. */
.studio .content-cue { background: #f7f9f9; border-color: #e4e9eb; color: #6c7b82; }
.studio .content-cue:hover { background: #f1f5f6; color: #b8291f; }
.studio .content-cue-chevron { color: #d83227; }

.workbench .content-cue { background: #e9ece4; border-color: #cfd4c9; color: #5c6357; }
.workbench .content-cue:hover { background: #e1e5da; color: #7a6600; }
.workbench .content-cue-chevron { color: #c9a600; }

.catalogue .content-cue { background: #f2f0e9; border-width: 2px; border-color: #161616; color: #161616; }
.catalogue .content-cue:hover { background: #f2c500; }
.catalogue .content-cue-chevron { color: #176a4d; }

/* ---- Written content below the tool ---------------------------------------
   The app fills the first screen; this sits under it. It exists for readers
   who want to know what the tool does, and it is the only substantial text on
   the page for search engines to index. The sticky rail gives the section
   in-page anchors, which Google can surface as sitelinks. */

.site-content {
    max-width: 1040px;
    margin: 0 auto;
    padding: 56px 24px 72px;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.toc { position: sticky; top: 24px; display: grid; gap: 2px; }
.toc strong {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    opacity: .55;
    margin-bottom: 8px;
}
.toc a {
    display: block;
    padding: 7px 10px;
    border-radius: 5px;
    border-left: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}
.toc a:hover, .toc a:focus-visible { border-left-color: currentColor; }

.content-body section { margin-bottom: 42px; }
.content-body section + section { padding-top: 38px; }
/* Anchor targets clear the top of the viewport when jumped to. */
.content-body section { scroll-margin-top: 24px; }

.content-body h2 { font-size: 26px; margin: 0 0 14px; letter-spacing: -.01em; }
.content-body h3 { font-size: 15px; margin: 18px 0 6px; }
.content-body p { margin: 0 0 14px; line-height: 1.65; max-width: 68ch; }
.content-body .lede { font-size: 19px; font-weight: 600; }

.sign-classes { margin: 0 0 16px; }
.sign-classes dt {
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 12px;
}
.sign-classes dd { margin: 3px 0 0; line-height: 1.6; max-width: 68ch; }

.site-foot { padding: 26px 24px 34px; text-align: center; font-size: 12px; opacity: .7; }
.site-foot p { margin: 0; }

@media (max-width: 860px) {
    .site-content { grid-template-columns: 1fr; gap: 22px; padding-top: 44px; }
    .toc { position: static; }
    .content-body h2 { font-size: 22px; }
}

/* Per-theme trim: dividers and the accent used by the rail on hover. */
.studio .content-body section + section { border-top: 1px solid #e4e9eb; }
.studio .toc a:hover, .studio .toc a:focus-visible { background: #f7f9f9; color: #b8291f; }
.studio .site-foot { border-top: 1px solid #e4e9eb; }

.workbench .site-content, .workbench .site-foot { background: #f1f2ee; }
.workbench .content-body section + section { border-top: 1px solid #d9ddd4; }
.workbench .toc a:hover, .workbench .toc a:focus-visible { background: #e6e9e1; color: #7a6600; }
.workbench .site-foot { border-top: 1px solid #cfd4c9; }

.catalogue .content-body section + section { border-top: 2px solid #161616; }
.catalogue .toc a:hover, .catalogue .toc a:focus-visible { background: #f2c500; color: #161616; }
.catalogue .site-foot { border-top: 2px solid #161616; }

/* Concept 1: rugged site workstation */
.workbench { background: #e8eae6; color: #23271f; }
.workbench .app-header { height: 72px; background: #f4f5f2; border-bottom: 1px solid #cfd4c9; }
.workbench .concept-nav { background: #e0e3da; padding: 4px; }
.workbench .concept-nav a { color: #5c6357; }
.workbench .concept-nav a[aria-current="page"] { background: #f2c500; color: #111310; }
.workbench .primary-action { background: #f2c500; color: #111310; }
.workbench .workspace { height: calc(100vh - 72px); display: grid; grid-template-columns: 310px minmax(430px, 1fr) 310px; }
.workbench .library-panel { background: #f1f2ee; border-right: 1px solid #cfd4c9; }
.workbench .editor-panel { background: #f7f8f5; border-left: 1px solid #cfd4c9; }
.workbench .editor-section { border-bottom: 1px solid #d9ddd4; }
.workbench .count-pill { background: #e0e3da; color: #4d5348; }
.workbench #sign-search, .workbench #sign-text-input, .workbench #brand-name { background: #fff; color: #23271f; border: 1px solid #c3c9bc; }
.workbench #sign-search:focus, .workbench #sign-text-input:focus, .workbench #brand-name:focus { border-color: #c9a600; }
.workbench #category-list > div.sticky { background: #e6e9e1 !important; color: #3f4539; border-color: #cfd4c9 !important; box-shadow: none; }
.workbench .sign-picker-button { border: 1px solid #c3c9bc !important; background: #fff !important; }
.workbench .sign-picker-button:hover { border-color: #c9a600 !important; transform: none !important; }
.workbench .sign-picker-button.ring-2 { outline: 3px solid #c9a600; background: #fff !important; }
.workbench .preview-panel { background: #dfe2dc; background-image: linear-gradient(#d2d6cb 1px, transparent 1px), linear-gradient(90deg, #d2d6cb 1px, transparent 1px); background-size: 24px 24px; }
.workbench .preview-meta { color: #6b7266; }
.workbench #capture-area { box-shadow: 0 14px 38px rgba(35, 39, 31, .18); }
.workbench .field-label { color: #4d5348; }
.workbench .align-btn { background: #fff; color: #2a2e27; border-right: 1px solid #d9ddd4; }
.workbench .align-btn.bg-terracotta { background: #f2c500 !important; color: #111310; }
.workbench #logo-toggle-btn { background: #fff; color: #2a2e27; border: 1px solid #c3c9bc; }
.workbench #generate-pdf-btn { background: #f2c500; color: #111310; }

/* Concept 2: clean technical studio */
.studio { background: #f3f5f6; color: #172126; }
.studio .app-header { height: 76px; background: #fff; border-bottom: 1px solid #d8dfe2; }
.studio .concept-nav a { color: #607078; border-bottom: 2px solid transparent; }
.studio .concept-nav a[aria-current="page"] { color: #172126; border-color: #d83227; }
.studio .primary-action { background: #d83227; color: #fff; border-radius: 4px; }
.studio .workspace { height: calc(100vh - 76px); display: grid; grid-template-columns: 310px minmax(440px, 1fr) 320px; grid-template-areas: "library preview editor"; }
.studio .library-panel { grid-area: library; background: #fff; border-right: 1px solid #d8dfe2; }
.studio .editor-panel { grid-area: editor; background: #fff; border-left: 1px solid #d8dfe2; }
.studio .editor-export { padding-top: 12px; }
.studio .preview-panel { grid-area: preview; background: #e9edef; }
.studio .count-pill { background: #edf1f2; color: #526168; border-radius: 3px; }
.studio #sign-search { background: #f3f5f6; border: 1px solid #d8dfe2; border-radius: 4px; }
.studio #category-list > div.sticky { background: #f7f9f9 !important; border-color: #d8dfe2 !important; box-shadow: none; }
.studio #category-list > .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.studio .sign-picker-button { border: 1px solid #d8dfe2 !important; border-radius: 3px; }
.studio .sign-picker-button:hover { border-color: #d83227 !important; transform: none !important; }
.studio .sign-picker-button.ring-2 { outline: 2px solid #d83227; box-shadow: none !important; background: #fff !important; }
.studio .preview-meta { color: #6a777d; }
.studio #capture-area { box-shadow: 0 16px 45px rgba(30,42,48,.16); }
.studio .editor-section { border-bottom: 1px solid #e4e9eb; }
.studio #sign-text-input, .studio #brand-name { border: 1px solid #ccd5d9; border-radius: 4px; }
.studio .align-btn { background: #f2f5f6; color: #243238; border-right: 1px solid #d7dfe2; }
.studio .align-btn.bg-terracotta { background: #d83227 !important; color: #fff; }
.studio #logo-toggle-btn { background: #fff; color: #243238; border: 1px solid #ccd5d9; border-radius: 4px; }
.studio #generate-pdf-btn { background: #172126; color: #fff; border-radius: 4px; }

/* Concept 3: visual sign catalogue */
.catalogue { background: #f2f0e9; color: #161616; }
.catalogue .app-header { height: 66px; background: #f2f0e9; border-bottom: 3px solid #161616; }
.catalogue .concept-nav { border: 2px solid #161616; }
.catalogue .concept-nav a + a { border-left: 2px solid #161616; }
.catalogue .concept-nav a[aria-current="page"] { background: #176a4d; color: #fff; }
.catalogue .primary-action { background: #161616; color: #fff; border: 2px solid #161616; }
.catalogue .workspace { height: calc(100vh - 66px); display: grid; grid-template-columns: 280px minmax(520px, 1fr) 360px; grid-template-areas: "editor library preview"; }
.catalogue .editor-panel { grid-area: editor; background: #f2f0e9; border-right: 2px solid #161616; }
.catalogue .library-panel { grid-area: library; background: #fff; border-right: 2px solid #161616; }
.catalogue .preview-panel { grid-area: preview; background: #e7e3d8; }
.catalogue .editor-section { border-bottom: 2px solid #161616; }
.catalogue .count-pill { background: #f2c500; border: 1px solid #161616; }
.catalogue #sign-search { background: #fff; border: 2px solid #161616; }
.catalogue #category-list > div.sticky { background: #f2c500 !important; border-color: #161616 !important; box-shadow: none; }
.catalogue #category-list > .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.catalogue .sign-picker-button { border: 2px solid #161616 !important; background: #fff !important; padding: 6px !important; }
.catalogue .sign-picker-button:hover { background: #f2f0e9 !important; transform: translateY(-2px) !important; }
.catalogue .sign-picker-button.ring-2 { outline: 4px solid #176a4d; box-shadow: none !important; }
.catalogue .preview-meta { background: #161616; color: #fff; padding: 5px 8px; }
.catalogue .preview-stage { padding: 48px 24px 24px; }
.catalogue #capture-area.paper-preview { width: min(100%, 310px); }
.catalogue #capture-area.paper-preview.landscape { width: min(100%, 320px); }
.catalogue #capture-area { box-shadow: 8px 8px 0 #161616; border: 2px solid #161616; }
.catalogue #sign-text-input, .catalogue #brand-name { border: 2px solid #161616; background: #fff; }
.catalogue .align-btn { background: #fff; border: 2px solid #161616; border-right: 0; }
.catalogue .align-btn:last-child { border-right: 2px solid #161616; }
.catalogue .align-btn.bg-terracotta { background: #176a4d !important; color: #fff; }
.catalogue #logo-toggle-btn { background: #fff; border: 2px solid #161616; color: #161616; }
.catalogue #generate-pdf-btn { background: #176a4d; color: #fff; border: 2px solid #161616; }

/* The production app keeps the Technical Studio workspace arrangement for every theme. */
.theme-shell .workspace {
    grid-template-columns: 310px minmax(440px, 1fr) 320px;
    grid-template-areas: "library preview editor";
}
.theme-shell .library-panel { grid-area: library; }
.theme-shell .preview-panel { grid-area: preview; }
.theme-shell .editor-panel { grid-area: editor; }
.theme-shell.catalogue .library-panel { border-right: 2px solid #161616; }
.theme-shell.catalogue .editor-panel { border-right: 0; border-left: 2px solid #161616; }
.theme-shell.catalogue #category-list > .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.theme-shell.catalogue .preview-stage { padding: 28px; }
.theme-shell.catalogue #capture-area.paper-preview {
    width: min(34vw, calc(68vh * .707));
    max-width: 430px;
}
.theme-shell.catalogue #capture-area.paper-preview.landscape {
    width: min(48vw, calc(64vh * 1.414));
    max-width: 700px;
}
.workbench .settings-button { color: #2a2e27; border-color: #c3c9bc; }
.workbench .settings-popover { border-color: #d9ddd4; }
.catalogue .settings-button { border: 2px solid #161616; background: #fff; color: #161616; }
.catalogue .settings-popover { border: 2px solid #161616; border-radius: 0; box-shadow: 6px 6px 0 #161616; }
.catalogue .theme-option { border: 2px solid #161616; border-radius: 0; }
.catalogue .theme-option[aria-pressed="true"] { border-color: #176a4d; outline: 2px solid #176a4d; }
.catalogue .theme-option[aria-pressed="true"] .theme-check { color: #176a4d; }

@media (max-width: 1000px) {
    .app-header { flex-wrap: wrap; gap: 8px; padding-block: 10px; }
    /* The themes pin the header to a fixed height. Once the actions wrap to a
       second row that height no longer fits them, so it has to give here —
       where the wrapping starts — not at the narrower breakpoint below. */
    .workbench .app-header, .studio .app-header, .catalogue .app-header { height: auto; }
    .header-actions { width: 100%; justify-content: space-between; }
    .workbench .workspace, .catalogue .workspace, .studio .workspace {
        height: auto;
        min-height: calc(100vh - 110px);
        display: flex;
        flex-direction: column;
    }
    .preview-panel { min-height: 620px; order: -1; }
    .library-panel { min-height: 520px; }
    .editor-panel { min-height: 420px; }
    .studio .editor-panel { display: flex; }
    #capture-area.paper-preview { width: min(80vw, 390px); }
}

@media (max-width: 600px) {
    .app-header { align-items: flex-start; }
    .brand { width: 100%; }
    .header-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .concept-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .concept-nav a { justify-content: center; min-width: 0; padding: 0 4px; font-size: 9px; }
    .header-actions .primary-action { width: 100%; }
    .settings-wrap, .settings-button { width: 100%; }
    .settings-popover { position: fixed; top: 12px; right: 12px; }
    .preview-panel { min-height: 570px; }
    .preview-stage { padding-inline: 16px; }
    .catalogue #capture-area.paper-preview { width: min(78vw, 300px); }
}