body.logo-editor-open{overflow:hidden}
.logo-library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.logo-library-grid .logo-style-tile{text-align:center}.logo-library-grid .logo-style-tile>span:last-of-type{font-size:10px;line-height:1.3}
@media(max-width:760px){.logo-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-library-grid .logo-style-tile{min-height:86px}}
.logo-dialog{width:min(1020px,calc(100% - 40px));max-width:1020px;height:min(900px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff}
.logo-dialog[open]{display:flex;flex-direction:column}
.logo-heading{display:flex;flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 28px 20px;border-bottom:1px solid var(--line)}
.logo-heading .eyebrow{margin:0 0 7px;font-size:9px}.logo-heading h2{font-size:26px;letter-spacing:-.8px}.logo-heading p:last-child{font-size:12px;color:var(--muted);margin-top:7px}.logo-heading .icon-button{flex-shrink:0}
.logo-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
.logo-preview-panel{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:25px 22px;background:#f7f9f8;min-height:0;overflow:hidden}
.logo-preview{min-height:min(260px,32dvh);flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:1px solid #e1e8e4;border-radius:17px;background:#fff;padding:22px 12px}
#logo-art{width:clamp(80px,17dvh,164px);height:clamp(80px,17dvh,164px);flex-shrink:0}#logo-art svg{display:block;width:100%;height:100%}#logo-name{font-size:20px;line-height:1.3;font-weight:750;color:var(--navy);text-align:center;overflow-wrap:anywhere;max-width:100%}
.logo-preview-actions{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.logo-preview[data-background=dark]{background:#172b3a}.logo-preview[data-background=dark] #logo-name{color:#fff}
.logo-preview[data-background=check]{background-color:#fff;background-image:linear-gradient(45deg,#edf0ee 25%,transparent 25%),linear-gradient(-45deg,#edf0ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf0ee 75%),linear-gradient(-45deg,transparent 75%,#edf0ee 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.logo-background{border:0;padding:0;margin:0;display:flex;gap:6px;justify-content:center}.logo-background legend{font-size:10px;text-align:center;color:var(--muted);margin-bottom:7px}.logo-background label{display:flex;align-items:center;gap:4px;margin:0;font-size:10px;font-weight:500}.logo-background input{width:13px;height:13px;margin:0;accent-color:var(--green)}
.logo-preview-panel .button{justify-content:center;width:100%;font-size:12px;min-height:40px;flex-shrink:0}.logo-tip{font-size:11px;line-height:1.5;color:var(--muted);margin:7px 0 0}.logo-preview-actions>.logo-tip{text-align:center;margin:-5px 0 3px}.logo-preview-note{font-size:10px;line-height:1.65;color:var(--muted)}.logo-mobile-export{display:none}
.logo-settings{padding:24px 28px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.logo-section{border:0;margin:0 0 24px;padding:0}.logo-section legend,.logo-section>label{font-size:13px;font-weight:700;color:var(--navy);margin:0 0 10px}.logo-section>select{margin:0;font-size:12px}
.logo-section .logo-suggested{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;min-height:30px;margin:0 0 10px;color:var(--muted)}.logo-suggested input{width:14px;height:14px;margin:0;accent-color:var(--green)}.logo-suggested small{margin-left:auto;font-size:9px;background:var(--soft-green);color:var(--green);padding:3px 7px;border-radius:20px}
.logo-style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.logo-choice{display:block;position:relative;margin:0;cursor:pointer;min-width:0}.logo-style-tile,.logo-palette-tile{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:11px;position:relative;background:white;transition:border-color .15s,background .15s}.logo-style-tile{padding:10px 4px 9px;min-height:91px}.logo-style-tile>span:last-of-type,.logo-palette-tile>span{font-size:10px;color:var(--navy);font-weight:600}.logo-style-tile svg{width:48px;height:48px;display:block}.logo-choice i{display:none;position:absolute;right:5px;top:4px;font-size:9px;font-style:normal;background:var(--green);color:#fff;border-radius:50%;width:14px;height:14px;line-height:14px;text-align:center}.logo-choice input:checked+span{border-color:var(--green);background:#eff8f2;box-shadow:0 0 0 1px var(--green)}.logo-choice input:checked+span i{display:block}.logo-choice:hover>span{border-color:#76a68d}.logo-choice input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}
.logo-palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.logo-palette-tile{padding:8px 6px;gap:6px}.logo-palette-tile svg{width:100%;height:20px;border-radius:5px;display:block}.logo-palette-tile>span{font-size:9px}
.logo-palette-tile>span{text-align:center;line-height:1.35}.logo-more-palettes{display:block;width:100%;min-height:38px;margin-top:12px;border:1px solid var(--line);border-radius:9px;background:#f7faf8;color:var(--green);font-size:11px;font-weight:650}.logo-more-palettes:hover{background:var(--soft-green)}.logo-palette-group{margin-top:22px}.logo-palette-lead{margin-top:6px}.logo-palette-group h3{font-size:12px}.logo-palette-group>p{font-size:10px;color:var(--muted);line-height:1.5;margin:5px 0 10px}
.logo-palette-hint{margin-top:7px;font-size:10px;line-height:1.5;color:var(--muted)}
.logo-details{border-top:1px solid var(--line);padding-top:17px}.logo-details summary{font-size:12px;font-weight:700;color:var(--navy);cursor:pointer}.logo-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:16px}.logo-detail-grid label{margin:0;font-size:11px}.logo-detail-grid select{font-size:12px;margin-top:7px}.logo-size output{float:right;color:var(--muted);font-weight:400}.logo-size input{width:100%;margin-top:17px;accent-color:var(--green)}
.logo-footer{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:16px;padding:17px 28px;border-top:1px solid var(--line);background:white}.logo-footer>div:first-child{max-width:280px;font-size:11px;line-height:1.5;color:var(--muted)}#logo-feedback{color:#a23c30;margin-top:5px}.logo-footer-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.logo-footer-actions .button{font-size:12px;min-height:40px;white-space:nowrap}.logo-footer-actions .text-button{margin-right:7px;font-size:11px;white-space:nowrap}
@media(max-width:760px){
  .logo-dialog{width:calc(100% - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);border-radius:16px}
  .logo-heading{padding:14px 16px 12px}.logo-heading h2{font-size:21px}.logo-heading p:last-child{font-size:11px}.logo-heading .eyebrow{margin-bottom:4px}
  .logo-workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .logo-preview-panel{padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:12px;border-bottom:1px solid var(--line)}
  .logo-preview{min-height:135px;padding:10px 7px;gap:6px;border-radius:12px}#logo-art{width:82px;height:82px}#logo-name{font-size:14px;line-height:1.25}
  .logo-preview-actions{gap:7px;justify-content:center;overflow:visible}.logo-background{flex-wrap:wrap;gap:5px}.logo-background legend{font-size:9px;margin-bottom:4px}.logo-background label{font-size:9px;gap:3px}
  .logo-preview-actions>.logo-tip,.logo-preview-note{display:none}.logo-preview-panel .button{font-size:10px;min-height:34px;padding:7px 5px}
  .logo-settings{padding:18px 14px}.logo-style-grid{gap:7px}.logo-style-tile{min-height:78px}.logo-style-tile svg{width:38px;height:38px}.logo-style-tile>span:last-of-type{font-size:9px}
  .logo-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.logo-palette-tile{padding:8px 5px;min-height:58px}.logo-palette-tile>span{font-size:9px}
  .logo-mobile-export{display:block;margin-top:22px;font-size:10px;line-height:1.6;color:var(--muted)}
  .logo-footer{flex-direction:column;align-items:stretch;padding:10px 14px;gap:8px}.logo-footer>div:first-child{max-width:none;font-size:10px}.logo-footer-actions{justify-content:space-between;gap:7px}.logo-footer-actions .button{padding:10px 12px}.logo-footer-actions .text-button{margin-right:auto;font-size:10px}
}
@media(max-height:520px){.logo-heading{padding-top:10px;padding-bottom:10px}.logo-heading .eyebrow,.logo-heading p:last-child{display:none}.logo-heading h2{font-size:20px}.logo-preview-panel{padding:10px 14px}.logo-preview{padding:10px;gap:8px}.logo-footer{padding-top:9px;padding-bottom:9px}}

/* Symbol picker: a button that shows the symbol in use, and a dialog of pictures to choose from. */
.logo-field-label{font-size:13px;font-weight:700;color:var(--navy);margin:0 0 10px}
.logo-picker-button{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:7px 14px 7px 8px;background:white;border:1px solid var(--line);border-radius:11px;font-size:12px;color:var(--navy);text-align:left}
.logo-picker-button:hover{background:#eff8f2;border-color:#76a68d}
.logo-picker-art{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px}
.logo-picker-art svg,.symbol-option-art svg{display:block;width:100%;height:100%}
.logo-picker-text{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.logo-picker-cue{flex-shrink:0;font-size:11px;font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.symbol-picker{max-width:780px;width:calc(100% - 24px);max-height:min(780px,calc(100dvh - 32px));padding:0;overflow:hidden;background:white}
.symbol-picker[open]{display:flex;flex-direction:column}
.symbol-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px 0;flex-shrink:0}
.symbol-picker-heading h2{font-size:22px;letter-spacing:-.5px}
.symbol-picker-search{padding:12px 22px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.symbol-picker-search input{width:100%;margin:0;font-size:16px}
.symbol-picker-search p{margin:7px 0 0;font-size:11px;color:var(--muted)}
.symbol-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));align-content:start;gap:8px;padding:16px 22px 22px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.symbol-option{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:11px 6px 9px;background:white;border:1px solid var(--line);border-radius:11px;font-size:10px;font-weight:600;line-height:1.3;color:var(--navy);text-align:center}
.symbol-option:hover{background:#eff8f2;border-color:#76a68d}
.symbol-option[aria-pressed=true]{border-color:var(--green);background:#eff8f2;box-shadow:0 0 0 1px var(--green)}
.symbol-option-art{display:grid;place-items:center;width:48px;height:48px}
.symbol-option-label{max-width:100%;overflow-wrap:anywhere}
.logo-section.logo-size{margin-bottom:8px}
@media(max-width:760px){
  .symbol-picker{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
  .symbol-picker-heading{padding:14px 14px 0}.symbol-picker-search{padding:10px 14px 12px}
  .symbol-picker-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:7px;padding:12px 14px 16px}
  .symbol-option-art{width:42px;height:42px}
}