.appearance-cell{display:flex;align-items:center;min-width:0}
.grid .appearance-cell>span[data-no-translate]{flex:1;min-width:0;overflow-wrap:anywhere;padding-right:8px}
.grid .appearance-cell>button[data-edit]{margin-left:auto}
.grid td.readonly:has(>.appearance-cell){padding:0}
.grid td.readonly>.appearance-cell>span[data-no-translate]{padding-left:9px;padding-top:9px;padding-bottom:9px}
.grid .appearance-cell input{flex:1;width:0}
.catalog-appearance-preview{display:inline-block;vertical-align:middle;flex:0 0 28px;max-width:28px;height:24px;fill:var(--catalog-preview-fill,#fff)}
.grid .appearance-cell>.catalog-appearance-value{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
.catalog-appearance-value>span{min-width:0;overflow-wrap:anywhere;white-space:normal}
html[data-theme=dark] .catalog-appearance-preview{--catalog-preview-fill:#203442}
.appearance-cell button{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:5px;margin-right:6px;border-color:transparent;background:transparent}
.appearance-cell button:hover,.appearance-cell button:focus-visible{border-color:var(--scs-accent-line);background:var(--scs-bg)}
.color-override{display:inline-flex;flex:none;width:16px;height:16px;color:#805a1c}.color-override[hidden]{display:none}.color-override svg{width:100%;height:100%}
.appearance-cell .catalog-color-reset{width:26px;margin-right:4px;font-size:18px;border-color:var(--line);background:color-mix(in srgb,var(--teal) 9%,transparent)}
html[data-theme=dark] .color-override{color:#ffd081}
.color-swatch{display:inline-block;flex-shrink:0;width:22px;height:22px;border:1px solid #0002;border-radius:6px;vertical-align:middle}
.appearance-controls{border:1px solid var(--line);border-radius:8px;padding:16px;margin:18px 0 0;min-width:0}
.appearance-controls:disabled{opacity:.45}
.appearance-controls legend{font-size:12px;padding:0 7px;color:#50687a}
.inherit-choice{display:flex;align-items:center;gap:7px;font-size:13px}
.color-palette{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.color-palette button{display:flex;align-items:center;gap:7px;font-size:12px;padding:7px 10px}
.color-inputs{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;align-items:start}
#dialog-body input[type=color]{height:42px;width:85px;padding:4px;cursor:pointer}
.domain-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.domain-options label{display:flex;align-items:center;gap:8px;padding:8px;border-radius:5px;font-size:12px;overflow-wrap:anywhere}
.domain-options label:hover{background:#f3f8fa}
.domain-options .color-swatch{width:15px;height:15px;border-radius:50%}
.domain-catalog{padding:24px}
.domain-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(355px,1fr));gap:14px;margin-top:24px}
.domain-card{display:flex;align-items:center;gap:14px;padding:19px;border:1px solid var(--line);border-radius:9px;min-width:0}
.domain-card>.color-swatch{width:32px;height:32px;border-radius:50%}
.domain-card>div{flex:1;min-width:0}
.domain-card strong{font-size:12px;overflow-wrap:anywhere}
.domain-card small{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.domain-card button{font-size:11px;padding:7px 9px}
@media(max-width:750px){.domain-catalog{padding:14px}.domain-cards{grid-template-columns:1fr}.domain-card{gap:8px;padding:12px}.color-inputs{grid-template-columns:85px minmax(0,1fr);gap:10px}}

.chain-import{background:transparent;color:var(--scs-nav-ink-2);border-color:var(--scs-nav-3);text-align:left;font-size:11px;padding:8px 10px;margin-top:10px}

.interface-sample{width:82px;min-width:82px;height:24px}.interface-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.interface-example{padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--scs-surface-2)}.interface-example .interface-sample{width:200px;height:50px}.interface-card{flex-wrap:wrap}.interface-card>div{min-width:140px}.function-example{padding:20px;margin:16px 0;border-radius:8px;color:var(--scs-ink);font-size:13px}
#dialog-body .interface-classification-fields{margin-bottom:16px}
.interface-color-list{display:grid;gap:8px;margin-top:12px}
.interface-group-title{grid-column:1/-1;margin:10px 0 0;font-size:1rem}.interface-group-title small{color:var(--muted);font-weight:500}.interface-color-pin{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:.85rem;cursor:pointer}.interface-color-pinned{font-weight:600}
.interface-group-edit{margin-left:6px;padding:0 6px;min-height:0;font-size:.85rem;line-height:1.6;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer}.interface-group-edit:hover,.interface-group-edit:focus-visible{border-color:var(--line,#ccd);color:inherit}
.link-group-choices{display:grid;gap:4px;margin:6px 0}.link-group-choices small{color:var(--muted)}
#interface-color-proposals>.move-choice{border-color:var(--line)}
.interface-color-row{display:grid;grid-template-columns:minmax(140px,1fr) auto auto;gap:16px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.interface-color-name{display:flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere}
.interface-color-name input{flex:none}
.interface-color-scope{display:block;font-size:11px;color:var(--muted);font-weight:normal;margin-top:3px}
.interface-color-swatch{display:grid;gap:3px;justify-items:center;min-width:100px}
.interface-color-swatch .interface-visual{background:#fff}
.interface-color-swatch code{font-size:12px;color:var(--muted)}
.interface-color-swatch small{color:var(--muted)}
@media(max-width:600px){.interface-color-row{grid-template-columns:1fr 1fr;gap:8px}.interface-color-name{grid-column:1/-1}}

.software-version{margin-top:14px;color:var(--scs-ink-disabled);font-size:10px}.sidebar .copyright{margin-top:5px}

.catalog-section{margin-top:16px;border-top:1px solid var(--scs-nav-line);padding-top:8px;flex-shrink:0}
.catalog-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 5px;border:0;background:transparent;color:var(--scs-nav-ink-2);text-align:left;font-size:11px;white-space:normal}
.catalog-toggle:hover{background:var(--scs-nav-3)}.catalog-chevron{font-size:18px;transition:transform .15s}.catalog-toggle[aria-expanded=false] .catalog-chevron{transform:rotate(-90deg)}
.catalog-section .catalog-nav{border:0;margin:0;padding-top:3px}.catalogs-collapsed #chain-list{max-height:none}.sidebar-bottom{flex-shrink:0}
.interface-visual{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:82px;flex-shrink:0}.interface-symbol{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:28px}
.interface-symbol>span{display:inline-block;width:28px;height:28px;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
.interface-symbol>span+span{width:17px;height:17px}.interface-example .interface-symbol{height:36px}.interface-example .interface-symbol>span{width:36px;height:36px}.interface-example .interface-symbol>span+span{width:21px;height:21px}
.compact-select{position:relative;width:100%;height:48px}/* 6.12: html:root keeps the value hidden behind the short label; components.css colours every select (6.7). */
html:root .grid .compact-select select{appearance:none;color:transparent;caret-color:transparent;padding-right:25px}
.grid .compact-select option{color:var(--scs-ink);background:var(--scs-surface)}.compact-select-value{position:absolute;inset:0 25px 0 8px;display:flex;align-items:center;color:var(--scs-ink);pointer-events:none;white-space:nowrap;overflow:hidden}
.compact-select:after{content:'';position:absolute;right:11px;top:20px;width:6px;height:6px;border-right:1.5px solid #50687a;border-bottom:1.5px solid #50687a;transform:rotate(45deg);pointer-events:none}
@media(forced-colors:active){.compact-select-value,.compact-select:after{display:none}html:root .grid .compact-select select{appearance:auto;color:CanvasText}}

#interface-diagram-list{overflow:auto;max-height:23vh;flex-shrink:1;min-height:24px}
#interface-diagram-list button{display:block;width:100%;border:0;background:transparent;color:var(--scs-nav-ink);text-align:left;white-space:normal;padding:11px 10px;margin:3px 0;border-radius:7px;font-size:12px;line-height:1.5}
#interface-diagram-list button.active{background:var(--scs-nav-3);box-shadow:inset 3px 0 #73c4cd}#interface-diagram-list button:hover{background:var(--scs-nav-3)}
#interface-diagram-list small{display:block;font-size:10px;color:var(--scs-ink-disabled)}.diagram-empty{display:block;padding:5px 9px;font-size:10px;color:var(--scs-ink-disabled)}
.template-gallery{display:grid;gap:12px;margin:14px 0 22px}.template-choice{display:flex;gap:12px;padding:16px;border:1px solid var(--scs-line);border-radius:8px;cursor:pointer}.template-choice:has(input:checked){border-color:var(--scs-accent);background:var(--scs-surface-3)}.template-choice small{display:block;color:var(--scs-ink-3);font-size:12px;margin-top:6px}.template-choice input{flex-shrink:0}.template-choice strong{font-size:14px}
#heading-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.diagram-notes{padding:24px}.diagram-notes textarea{min-height:350px;line-height:1.8;font:14px/1.8 inherit}.diagram-notes p{font-size:12px;line-height:1.7;color:var(--scs-ink-3)}

.metadata-edit{width:100%;margin-bottom:22px}.metadata-icon-preview{display:flex;gap:16px;align-items:center;margin-bottom:22px}.metadata-icon-preview strong{font-size:14px}#icon-tags{min-height:150px;line-height:1.7}

.brand-logo{width:38px;height:38px;flex-shrink:0}.brand-name{font-size:16px;letter-spacing:.1px}

#settings{font-size:21px;line-height:1}.settings-brand{display:flex;gap:15px;align-items:center;margin-bottom:25px}.settings-brand strong{font-size:20px}.settings-brand small{display:block;color:#8293a1;margin-top:5px}

#flowchart-list{overflow:auto;max-height:23vh;flex-shrink:1;min-height:24px}
#flowchart-list button{display:block;width:100%;border:0;background:transparent;color:var(--scs-nav-ink);text-align:left;white-space:normal;padding:11px 10px;margin:3px 0;border-radius:7px;font-size:12px;line-height:1.5}
#flowchart-list button.active{background:var(--scs-nav-3);box-shadow:inset 3px 0 #73c4cd}#flowchart-list button:hover{background:var(--scs-nav-3)}
#flowchart-list small{display:block;font-size:10px;color:var(--scs-ink-disabled)}.diagram-empty{display:block;padding:5px 9px;font-size:10px;color:var(--scs-ink-disabled)}

#chain-list{min-height:60px}#interface-diagram-list,#flowchart-list{max-height:16vh}.sidebar .nav-heading{flex-shrink:0}
@media(max-height:950px){.sidebar{padding:16px 16px 12px;overflow-y:auto}.sidebar .brand{padding-bottom:14px}.sidebar .project-picker{padding-bottom:12px}.sidebar .nav-heading{margin:12px 5px 5px}.sidebar .catalog-section{margin-top:8px;padding-top:4px}.sidebar .catalog-nav button{padding:7px 8px}.sidebar .sidebar-bottom{margin-top:12px}.sidebar .software-version{margin-top:8px}}
.catalog-filter{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--scs-ink-2);padding:6px;white-space:nowrap}
.table-toolbar,.table-toolbar #table-actions{flex-wrap:wrap;gap:6px}
.scope-selection{max-height:40vh;overflow:auto;border:1px solid var(--scs-line);border-radius:10px;padding:12px;margin:12px 0}
.scope-project{padding:10px 4px;border-bottom:1px solid var(--scs-line-2)}.scope-project:last-child{border:0}
.scope-project label,.scope-diagrams label{display:flex;align-items:center;gap:9px;line-height:1.5}
.scope-diagrams{margin:8px 0 0 28px;display:grid;gap:7px}.scope-diagrams label:has(input:disabled){opacity:.5}
.move-choice{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--scs-line-2)}.move-choice small{margin-left:auto;color:var(--scs-ink-3)}
.scoped-icon{display:flex;flex-direction:column;gap:5px;min-width:0}.scoped-icon>.icon-card{flex:1;width:100%}.scoped-icon>[data-scope-kind]{font-size:11px;color:var(--scs-ink-2);padding:5px}
.domain-card{flex-wrap:wrap}.domain-card>[data-scope-kind]{font-size:11px}
.merge-list{max-height:27vh;overflow:auto;margin:8px 0;padding:0;list-style:none}.merge-list li{padding:9px;border-bottom:1px solid var(--scs-line-2)}.merge-list small{display:block;overflow-wrap:anywhere;margin-top:4px;color:var(--scs-ink-3)}

/* Library tools, glossary selection and adjustable navigation. */
.terminology-cards{display:grid;gap:12px;margin-top:18px}.terminology-card{display:flex;gap:18px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:9px;padding:18px}.terminology-card>div:first-child{min-width:0}.terminology-card strong{font-size:15px}.terminology-card p{white-space:pre-wrap;overflow-wrap:anywhere;margin:7px 0 0;line-height:1.6;font-size:13px}.terminology-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.terminology-actions button{font-size:11px}.legend-settings{padding:22px}.legend-toggle{display:flex;align-items:center;gap:9px;margin-bottom:15px;font-weight:600;font-size:13px}.legend-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.legend-actions button{font-size:12px}.term-choices{display:grid;gap:8px}.term-choice{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:8px;padding:14px;cursor:pointer}.term-choice>input{flex-shrink:0}.term-choice>span{flex:1;min-width:0}.term-choice strong,.term-choice>span>span{display:block;overflow-wrap:anywhere;white-space:pre-wrap;font-size:12px;line-height:1.6}.term-choice small{font-size:10px;color:var(--muted);max-width:100px}.missing-term{border-color:#cf8c59}.icon-actions{display:flex;gap:5px}.icon-actions button{flex:1;font-size:11px;padding:6px}.catalog-filter select{max-width:200px;padding:5px;font-size:11px}.grid .system-icon-link{padding:5px;margin-left:3px;border:0;background:transparent;flex-shrink:0}.grid .system-icon-link img{margin:0;display:block}.grid .system-icon-link:hover{background:var(--scs-accent-soft)}.grid .catalog-target-row td{background:var(--scs-surface-3);border-top:1px solid var(--scs-accent-line);border-bottom:1px solid var(--scs-accent-line)}
#app .sidebar{width:var(--sidebar-width,250px);flex:0 0 var(--sidebar-width,250px);padding:10px 12px 16px;overflow:hidden;min-width:0}.sidebar-toolbar{display:flex;gap:10px;align-items:center;flex-shrink:0;margin-bottom:12px}.sidebar-toolbar span{font-size:11px;color:var(--scs-nav-ink-2)}.sidebar-toolbar button{padding:5px 8px;background:transparent;color:var(--scs-nav-ink);border-color:var(--scs-nav-3);font-size:18px;line-height:1.2}#sidebar-content{display:flex;flex:1;flex-direction:column;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#678595 transparent;padding-right:3px}.sidebar #chain-list{flex:none;max-height:32vh;min-height:45px}.sidebar .brand{flex-shrink:0}.sidebar .catalog-toggle,.sidebar .catalog-nav button{white-space:normal}.sidebar #interface-diagram-list,.sidebar #flowchart-list{flex-shrink:0}.sidebar-collapsed #sidebar-content,.sidebar-collapsed .sidebar-toolbar span{display:none!important}#app.sidebar-collapsed .sidebar{padding:10px 4px}.sidebar-collapsed .sidebar-toolbar{margin:0}.sidebar-collapsed .sidebar-toolbar button{padding:5px 7px}#sidebar-resizer{width:6px;flex:0 0 6px;background:#dce5eb;cursor:col-resize;touch-action:none;position:relative;z-index:5}#sidebar-resizer:hover,#sidebar-resizer:focus-visible,.sidebar-resizing #sidebar-resizer{background:#3394a2;outline:none}.sidebar-resizing{user-select:none;cursor:col-resize}.sidebar-resizing iframe{pointer-events:none}
@media(max-width:800px){.terminology-card{align-items:flex-start;flex-direction:column}.terminology-actions{justify-content:flex-start}.term-choice small{display:none}}

/* Distinct section headers retain the restrained navy/teal palette. */
.sidebar .nav-heading{margin:18px 0 7px;padding:9px 10px;background:var(--scs-nav-3);color:var(--scs-nav-ink);font-size:11px;font-weight:700;letter-spacing:1px;border-radius:6px;border-left:3px solid #68c5c8}.sidebar .nav-heading button:not(.section-link){color:var(--scs-nav-ink);font-size:20px}.sidebar .catalog-section{margin-top:20px;padding:8px 5px 5px;border:1px solid #52758a;border-radius:9px;background:var(--scs-nav-2)}.sidebar .catalog-toggle{padding:9px 6px 11px;color:var(--scs-nav-ink);font-size:13px;font-weight:650;letter-spacing:.2px}.sidebar .catalog-toggle>span:first-child{border-left:3px solid #68c5c8;padding-left:8px}.sidebar .catalog-nav button{border-radius:5px;margin:3px 0}.sidebar #chain-list button,.sidebar #interface-diagram-list button,.sidebar #flowchart-list button{border-radius:6px}.sidebar .catalog-nav button:hover{background:var(--scs-nav-3)}.sidebar .catalog-toggle:hover{background:var(--scs-nav-3)}.sidebar .catalog-section .catalog-nav{padding-top:5px;border-top:1px solid var(--scs-nav-3)}

.sidebar-toolbar #navigation-sort{margin-left:auto;font-size:18px}.sidebar-collapsed #navigation-sort{display:none}.sort-control select{max-width:210px}.sort-hint{font-size:10px;color:var(--scs-ink-3);flex-basis:100%;padding:4px 2px}.grid th{padding:0}.grid th.row-control{padding:11px 8px}.grid-sort{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:11px 8px;border:0;border-radius:0;background:transparent;font:inherit;color:inherit;text-align:left}.grid-sort:hover{background:var(--scs-accent-soft)}.grid-sort:focus-visible{outline:2px solid var(--scs-focus);outline-offset:-2px}.grid-sort b{font-weight:normal;color:var(--scs-ink-3)}.grid th[aria-sort=ascending],.grid th[aria-sort=descending]{background:var(--scs-accent-soft);color:var(--scs-accent)}.sort-date{display:block;color:var(--scs-ink-3);font-size:10px;padding:3px 8px}.terminology-actions .sort-date{flex-basis:100%;text-align:right}

.icon-color-mode{font-size:10px;color:var(--scs-ink-3);background:var(--scs-surface-3);border-radius:4px;padding:3px 7px}.field small{line-height:1.5}

/* Compact library lists share the same hierarchy in both color themes. */
.compact-catalog{padding:14px 20px}.catalog-summary{display:flex;align-items:start;gap:20px;justify-content:space-between;margin-bottom:12px;font-size:13px;color:var(--muted)}
.catalog-help{max-width:620px}.catalog-help summary{cursor:pointer;text-align:right;color:var(--ink)}.catalog-help p{line-height:1.6;margin:8px 0 0}
.catalog-table-scroll{overflow:auto;border:1px solid var(--line);border-radius:9px}.catalog-list{width:100%;border-collapse:collapse;text-align:left;font-size:13px;line-height:1.45;min-width:650px}
.catalog-list th,.catalog-list td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}.catalog-list thead th{font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--teal) 7%,transparent);white-space:nowrap}
.catalog-list tbody th{font-weight:600}.catalog-list tbody tr:last-child>*{border-bottom:0}.catalog-list tbody tr:hover{background:color-mix(in srgb,var(--teal) 5%,transparent)}
.terminology-list th:first-child{width:15%;min-width:100px;overflow-wrap:anywhere}.term-meaning{white-space:pre-wrap;overflow-wrap:anywhere;width:100%;min-width:210px}
.catalog-list .catalog-scope{min-width:140px;max-width:220px}.catalog-scope>button{font-size:12px;padding:5px 8px;white-space:normal;text-align:left}
.catalog-row-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}.catalog-row-actions button{font-size:12px;padding:6px 10px;min-height:32px}.catalog-action-heading{text-align:right}
.catalog-list .sort-date{font-weight:400;padding:3px 0 0}.catalog-icon-name{min-width:160px;overflow-wrap:anywhere}.catalog-icon-name small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:2px}
.catalog-list .catalog-icon-preview{display:flex;align-items:center;justify-content:center;width:66px;height:40px;padding:5px;background:var(--scs-surface-2);border-color:var(--scs-line-strong);color:var(--scs-ink-2)}.catalog-icon-preview .icon-symbol{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;width:auto;height:28px}.catalog-icon-preview .icon-symbol img{width:24px;height:24px;object-fit:contain;margin:0}.catalog-icon-preview .icon-symbol img+img{width:12px;height:12px}
.catalog-list .icon-color-mode{display:inline-block;white-space:nowrap}.catalog-view-switch{display:flex;gap:5px;margin-left:auto}.catalog-view-switch button{font-size:12px;padding:6px 12px;min-height:32px}
@media(max-width:800px){.compact-catalog{padding:12px}.catalog-summary{flex-wrap:wrap;gap:8px}.catalog-help summary{text-align:left}.catalog-list th,.catalog-list td{padding:8px}}

.dashboard-group-heading{grid-column:1/-1;margin:8px 0 0}.sidebar .diagram-group>summary{padding:9px 8px;color:var(--scs-nav-ink);font-weight:600;cursor:pointer}.sidebar .diagram-group>button{padding-left:20px}

#legend-config{border:1px solid var(--border);border-radius:8px;padding:12px;margin:12px 0}#legend-custom{display:grid;gap:8px;margin-bottom:10px}.legend-custom-row{display:grid;grid-template-columns:minmax(120px,1fr) 90px 140px 42px 32px;gap:6px;align-items:center}.legend-custom-row input,.legend-custom-row select{min-width:0;width:100%}.legend-custom-row button{min-width:0;padding:4px}@media(max-width:600px){.legend-custom-row{grid-template-columns:minmax(100px,1fr) 80px 32px}.legend-custom-row select[data-legend=line]{grid-column:1}.legend-custom-row [data-legend-remove]{grid-column:3;grid-row:1}}

.legend-config-toggles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}#legend-config .legend-toggle{margin:0;padding:4px;min-height:0}#legend-config .legend-custom-row input{box-sizing:border-box;min-width:0}#legend-config input[type=color]{width:42px;min-width:0!important;height:34px;padding:3px}#legend-config [data-legend-remove]{position:static;min-width:0;width:32px;height:32px}#legend-config .legend-custom-row{padding-right:0}

/* Product photos (4.13.0) */
.grid .appearance-cell>.product-photo-value{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.product-photo-value img{width:34px;height:24px;object-fit:contain;border:1px solid var(--line,#d5dde5);border-radius:3px;background:#fff;flex:none}
.product-photo-value>span{min-width:0;overflow-wrap:anywhere;white-space:normal}
.product-photo-editor{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:start;margin:8px 0 12px}
.product-photo-preview{width:160px;height:120px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line,#c8d2dc);border-radius:6px;background:var(--surface,#fff);color:var(--muted,#64748b);font-size:12px}
.product-photo-preview img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:640px){.product-photo-editor{grid-template-columns:1fr}}
/* Diagram groups: rename from the menu, the dashboard and the group dialog (4.13.x). */
.diagram-group-edit{border:0;background:transparent;color:inherit;opacity:.65;min-height:0;padding:0 6px;margin-left:6px;font-size:.9em;line-height:1.4;cursor:pointer;border-radius:4px}
.diagram-group-edit:hover,.diagram-group-edit:focus-visible{opacity:1;background:var(--scs-hover,rgba(127,127,127,.15))}
.sidebar .diagram-group>summary .diagram-group-edit{opacity:0}
.sidebar .diagram-group>summary:hover .diagram-group-edit,.sidebar .diagram-group>summary .diagram-group-edit:focus-visible{opacity:.7}
.diagram-group-table{width:100%;border-collapse:collapse;margin:4px 0}.diagram-group-table th,.diagram-group-table td{padding:4px 6px;text-align:left}.diagram-group-table td:nth-child(2){width:80px}.diagram-group-table td:last-child{width:1%;white-space:nowrap}.diagram-group-table input{width:100%}
/* Product photo editing (5.4.0): crop frame, result on a checkerboard for transparency. */
.product-photo-workbench{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(280px,1fr);gap:20px;align-items:start;margin:8px 0 12px}
.product-photo-column{display:grid;gap:8px;min-width:0}.product-photo-column>small{color:var(--muted,#64748b)}
.product-photo-stage{min-height:200px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line,#c8d2dc);border-radius:6px;background:var(--surface,#fff);color:var(--muted,#64748b);font-size:12px;padding:8px}
.product-photo-canvas{position:relative;display:inline-block;line-height:0;max-width:100%;touch-action:none;user-select:none}
.product-photo-canvas>img{max-width:100%;max-height:300px;display:block}
.product-photo-crop{position:absolute;box-sizing:border-box;border:2px solid #fff;outline:1px solid rgba(0,0,0,.55);box-shadow:0 0 0 9999px rgba(15,23,42,.45);cursor:move}
.product-photo-crop:focus-visible{outline:2px solid var(--accent,#1b6f86)}
.product-photo-crop>span{position:absolute;width:12px;height:12px;background:#fff;border:1px solid #334155;border-radius:2px}
.product-photo-crop>[data-corner=nw]{left:-7px;top:-7px;cursor:nwse-resize}.product-photo-crop>[data-corner=ne]{right:-7px;top:-7px;cursor:nesw-resize}
.product-photo-crop>[data-corner=sw]{left:-7px;bottom:-7px;cursor:nesw-resize}.product-photo-crop>[data-corner=se]{right:-7px;bottom:-7px;cursor:nwse-resize}
.product-photo-canvas{overflow:hidden}
.product-photo-crop-tools{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.product-photo-result-wrap{display:grid;gap:4px;font-size:12px;color:var(--muted,#64748b)}
.product-photo-result{max-width:100%;max-height:160px;justify-self:start;border:1px solid var(--line,#d5dde5);border-radius:4px;background:repeating-conic-gradient(#e2e8f0 0 25%,#fff 0 50%) 0 0/14px 14px}
.product-photo-controls{display:grid;gap:12px;min-width:0}.product-photo-controls .field{display:grid;gap:4px;min-width:0}.product-photo-controls input:not([type=checkbox]):not([type=range]),.product-photo-controls select{width:100%;box-sizing:border-box}.product-photo-controls input[type=range]{width:100%}
.product-photo-group legend label{display:inline-flex;gap:6px;align-items:center}
.product-photo-group{border:1px solid var(--line,#d5dde5);border-radius:6px;padding:8px 10px;margin:0;display:grid;gap:6px;min-width:0}
.product-photo-group legend{padding:0 4px;font-weight:600}.product-photo-group small{color:var(--muted,#64748b)}
.product-photo-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:760px){.product-photo-workbench,.product-photo-row{grid-template-columns:1fr}}
/* 5.5: duplicate interface colors */
.interface-color-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.interface-color-duplicate{display:block;font-size:11px;font-weight:600;color:var(--scs-warn);margin-top:3px}
span.interface-color-duplicate{display:inline}
.interface-color-row.is-duplicate{border-color:var(--scs-warn)}
.interface-color-summary{margin:8px 0;font-weight:600;color:var(--scs-warn)}.interface-color-summary.is-ok{color:var(--muted);font-weight:normal}
.interface-duplicate-notice .interface-duplicate-line{flex:1 1 100%}
.interface-duplicate-notice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--scs-warn-line);border-radius:8px;background:var(--scs-warn-soft)}
.interface-color-clash{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0;color:var(--scs-warn);font-size:.9rem}
.interface-color-symbol{font-size:11px;color:var(--muted)}
/* 6.1: colour of an interface group in diagrams that show interfaces as their group. */
.interface-group-color{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:500;color:var(--muted);vertical-align:middle}
.interface-group-color i{width:22px;height:3px;border-radius:2px}
.group-color{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:.85rem}
.group-color input[type=color]{width:44px;height:28px;padding:0;border:1px solid var(--line);border-radius:4px;background:none}
/* 6.1.1: own interface groups as subgroups inside their classification. */
.interface-subgroup-title{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:4px 0 0 14px;padding-left:10px;border-left:2px solid var(--line);font-size:.92rem;font-weight:600}
.interface-subgroup-title small{color:var(--muted);font-weight:500}
/* 6.9: abbreviation suggestions in the Legend tab (web/terminology.js). A found abbreviation is
   highlighted inside the name it came from, so the user sees why it is offered. */
.term-suggest-mode{max-width:280px;margin:0 0 16px}
.term-suggest{margin:4px 0 18px;padding:14px 16px 12px;border:1px solid var(--scs-accent-line);border-left:3px solid var(--scs-accent);border-radius:8px;background:var(--scs-accent-soft)}
.term-suggest.is-empty{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;border:1px dashed var(--scs-line);border-left-width:1px;background:transparent}
.term-suggest.is-empty p{margin:0;font-size:12px}
.term-suggest>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.term-suggest h4{margin:0;font-size:13px;display:flex;align-items:center;gap:8px}
.term-suggest header p{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--scs-ink-2);max-width:62ch}
.term-suggest-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--scs-accent);color:var(--scs-accent-ink);font-size:11px;line-height:20px;text-align:center}
.term-suggest-list{list-style:none;margin:12px 0 4px;padding:0;display:grid;gap:1px;border:1px solid var(--scs-line);border-radius:6px;overflow:hidden;background:var(--scs-line)}
.term-suggest-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 8px 8px 12px;background:var(--scs-bg)}
.term-suggest-text{min-width:0;display:grid;gap:3px}
.term-suggest-term{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.term-suggest-term strong{font-size:13px;letter-spacing:.02em}
.term-suggest-term>span{font-size:12px;color:var(--scs-ink-2);overflow-wrap:anywhere}
.term-suggest-ambiguous{font-style:normal;font-size:10px;padding:1px 6px;border-radius:9px;border:1px solid var(--scs-line-strong);color:var(--scs-ink-2)}
.term-suggest-where{min-width:0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.term-suggest-where small{color:var(--scs-ink-3);font-size:11px}
.term-suggest-where q{quotes:none;display:inline-block;margin:0 4px 0 0;padding:0 6px;border:1px solid var(--scs-line);border-radius:4px;background:var(--scs-paper);color:var(--scs-paper-ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.term-suggest-where mark{background:none;color:inherit;font-weight:700;box-shadow:inset 0 -2px 0 var(--scs-accent)}
.term-suggest-actions{display:flex;gap:2px;align-items:center;justify-content:flex-end}
.term-suggest-actions .term-suggest-dismiss{width:28px;padding:0;font-size:16px;line-height:1;color:var(--scs-ink-3)}
.term-suggest-actions button,.term-suggest>header button,.term-suggest-reset{font-size:12px;white-space:nowrap}
.term-suggest .form-note{margin:8px 0 0}
.term-suggest-reset{margin-top:8px}
.tab-suggest-count{display:inline-block;min-width:16px;height:16px;margin-left:4px;padding:0 5px;border-radius:8px;background:var(--scs-accent);color:var(--scs-accent-ink);font-size:10px;line-height:16px;text-align:center;font-weight:600;vertical-align:1px}
.tab-suggest-count[hidden]{display:none}
.term-suggest>header{flex-wrap:wrap}
@media(prefers-reduced-motion:no-preference){.term-suggest-row{transition:background-color .15s}}
/* Counts on tabs give way in narrow panes; the suggestion count stays, because it asks for a decision. */
#app #tabs [role='tab'] span.tab-suggest-count.tab-suggest-count:not([hidden]){display:inline-block;margin-left:5px;padding:0 5px;min-width:16px;border-radius:8px;background:var(--scs-accent);color:var(--scs-accent-ink);font-size:10px;line-height:16px;font-weight:600}
/* 6.12: empty Domänen page offers fixed lists as templates instead of a hard-coded catalog. */
.domain-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:16px auto 0;max-width:880px;text-align:left}
.domain-templates .domain-template{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;min-height:92px;height:auto;white-space:normal;text-align:left;border:1px solid var(--scs-line);border-top:3px solid var(--scs-line-strong,var(--scs-line));border-radius:8px;background:var(--scs-surface);cursor:pointer}
.domain-templates .domain-template.recommended{border-top-color:var(--scs-accent)}
.domain-templates .domain-template:hover{border-color:var(--scs-accent-line)}
.domain-templates .domain-template small,.domain-template-option small{font-size:12px;color:var(--scs-ink-3);font-weight:400;white-space:normal}
.domain-template-dots{display:flex;flex-wrap:wrap;gap:4px}
.domain-template-dots i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.domain-empty-own{margin-top:14px!important}
.domain-template-option{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:4px;align-items:center;padding:8px 0}
.domain-template-option>:is(.domain-template-dots,small){grid-column:2}
/* 7.0.1: an editor button without a value of its own (no colour, no icons) shows a quiet pencil
   like the description column; the value stays as text beside it. */
html:root .grid .appearance-cell>button.grid-editor-icon{flex:0 0 28px;width:28px;min-width:28px;height:30px;padding:3px;margin-right:6px;border:1px solid transparent;background:transparent;color:var(--teal);border-radius:5px}
html:root .grid .appearance-cell>button.grid-editor-icon:is(:hover,:focus-visible){background:var(--scs-accent-soft);border-color:var(--teal)}
html:root .grid .appearance-cell>button.grid-editor-icon .grid-editor-content{display:grid;place-items:center}