/* Shared website typography and alignment, loaded after page-specific styles. */
body{--site-title:#fff;--site-copy:#bcb8c5;--site-label:var(--accent,var(--primary,#8b8dff))}
body #main-content h1{
 color:var(--site-title)!important;font-family:inherit;font-size:clamp(28px,3.6vw,40px)!important;
 font-weight:750!important;line-height:1.2!important;letter-spacing:-.035em!important;
 margin:10px 0 14px;text-wrap:pretty;overflow-wrap:anywhere
}
body #main-content h1 :is(span,strong,em){color:inherit!important;background:none;-webkit-text-fill-color:currentColor!important}
body #main-content :is(.eyebrow,.status-kicker,.os-kicker,.home-eyebrow){
 display:block;color:var(--site-label)!important;font-family:inherit;font-size:11px;font-weight:650;
 line-height:1.6;letter-spacing:.15em;text-transform:uppercase;margin:0 0 12px
}
body #main-content :is(.page-heading,.profile-heading,.brand-heading,.editor-heading,.docs-heading,.reviews-title,.status-heading,.catalog-heading,.os-store-heading,.commands-heading){min-width:0;gap:20px;margin-bottom:28px;text-align:left}
body #main-content :is(.page-heading,.profile-heading,.brand-heading,.editor-heading,.docs-heading,.reviews-title,.status-heading,.catalog-heading,.os-store-heading,.commands-heading) p:not(.eyebrow):not(.status-kicker){
 color:var(--site-copy);font-family:inherit;font-size:14px;font-weight:400;
 line-height:1.7;letter-spacing:normal;max-width:70ch;margin:0
}
/* Match SVGs and supplied artwork, including the first line of wrapped titles. */
body #main-content :is(h1,h2,h3):has(>.button-icon){display:flex;align-items:flex-start;gap:.3em;min-width:0}
body #main-content h1>.button-icon{
 display:block;width:.8em;height:.8em;min-width:.8em;flex:0 0 .8em;
 margin:.2em 0 0;object-fit:contain;vertical-align:initial;align-self:flex-start
}
body #main-content :is(h2,h3)>.button-icon{display:block;width:1em;height:1em;min-width:1em;flex:0 0 1em;margin:.18em 0 0;object-fit:contain;align-self:flex-start}
body #main-content :is(.dashboard-card-heading,.xp-card-heading,.brand-section-heading,.settings-section-title,.config-feature-top) h2{color:var(--site-title);line-height:1.4;letter-spacing:-.02em}
body #main-content :is(.dashboard-card-heading,.xp-card-heading,.brand-section-heading){align-items:flex-start;gap:12px}
body #main-content :is(.dashboard-card-heading,.xp-card-heading,.brand-section-heading)>.button-icon{display:block;width:22px;height:22px;min-width:22px;flex:0 0 22px;margin:2px 0 0;object-fit:contain}
body #main-content .settings-section-title{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:start;padding-left:0}
body #main-content .settings-section-title>span{position:static;grid-column:1;grid-row:1/3;width:32px;height:32px}
body #main-content .settings-section-title>:is(h2,p){grid-column:2;min-width:0}
/* Existing icons and icons added by action-controls share one text baseline. */
body :is(.quiet,.action-button,.brand-primary,.brand-secondary,.editor-button,.home-button,.text-back,.brand-back){display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.4;vertical-align:middle}
body :is(.button,.quiet,.action-button,.brand-primary,.brand-secondary,.editor-button,.home-button,.text-back,.brand-back)>.button-icon{
 display:block;width:17px;height:17px;min-width:17px;flex:0 0 17px;margin:0;align-self:center;object-fit:contain
}
body :is(.text-back,.brand-back){justify-content:flex-start}
body :is(.icon-action,.icon-control,.tool-icon,.review-icon){display:inline-grid;place-items:center;line-height:1;padding:8px}
body :is(.icon-action,.icon-control,.tool-icon,.review-icon)>.button-icon{display:block;flex:none;margin:0;object-fit:contain}
body #main-content :is(.config-connection,.review-server-role):has(>.button-icon){display:inline-flex;align-items:center;gap:7px;line-height:1.5}
body #main-content :is(.dashboard-metric strong,.overview-metrics>div>span,.ticket-stat-label,.config-connection,.review-server-role)>.button-icon{display:block;flex:none;margin:0;object-fit:contain}
/* A wrapped label must not move its input below a neighboring field. */
body #main-content .tool-grid{align-items:stretch}
body #main-content .tool-grid>label:not(:has(input[type=checkbox],input[type=radio])){display:flex;flex-direction:column;gap:8px;min-width:0;margin-top:0;line-height:1.6}
body #main-content .tool-grid>label:not(:has(input[type=checkbox],input[type=radio]))>:is(input,select,textarea,.multi-select){margin-top:auto;margin-bottom:0}
body #main-content :is(.tool-check,.embed-check,.event-check)>input:is([type=checkbox],[type=radio]){flex-shrink:0;margin:0}
@media(max-width:600px){body #main-content :is(.page-heading,.profile-heading,.brand-heading,.editor-heading,.docs-heading,.reviews-title,.status-heading,.catalog-heading,.os-store-heading,.commands-heading){margin-bottom:24px}}

body #main-content :is(.brand-back,.editor-heading>div>a,.catalog-heading>div>a){display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;margin-bottom:16px}
body #main-content :is(.editor-heading>div>a,.catalog-heading>div>a)>.button-icon{display:block;width:17px;height:17px;flex:0 0 17px;margin:0;object-fit:contain}
body #main-content h1>span{min-width:0}

body #main-content .os-store-heading{max-width:none;margin-inline:0}
body #main-content .os-store-heading h1{justify-content:flex-start}
body #main-content h1>svg.button-icon{color:var(--accent)}


/* Dashboard controls keep their edges aligned even when a field label wraps. */
body.dashboard-site #main-content .tool-grid{align-items:stretch}
body.dashboard-site #main-content .tool-grid>label:not(:has(input[type=checkbox],input[type=radio])){align-self:stretch}
body.dashboard-site #main-content :is(.tool-form,.timestamp-settings) input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]),
body.dashboard-site #main-content :is(.tool-form,.timestamp-settings) select:not([multiple]){height:48px;min-height:48px;box-sizing:border-box;padding-block:10px}
body.dashboard-site #main-content .tool-grid>label:not(:has(input[type=checkbox],input[type=radio]))>:is(input,select,textarea,.multi-select){margin-top:auto}
body.dashboard-site #main-content .tool-form .multi-select{margin-bottom:0}
body.dashboard-site #main-content .tool-form .multi-select>summary{min-height:46px;box-sizing:border-box;align-items:center}
body.dashboard-site #main-content .tool-form input[type=color]{padding:6px;cursor:pointer}
body.dashboard-site #main-content .ticket-panel-actions .ticket-delete{height:44px;min-height:44px}
body.dashboard-site #main-content .ticket-panel-actions>.button,body.dashboard-site #main-content .ticket-panel-actions>details>summary{min-height:44px}
body.dashboard-site #main-content .ticket-question .icon-action{width:40px;height:40px;min-width:40px;min-height:40px}
body.dashboard-site #main-content .ticket-type-list .tool-actions{align-items:center}
body.dashboard-site #main-content .ticket-type-list .tool-actions form{display:flex;align-items:center}
body.dashboard-site #main-content .ticket-type-list .icon-action{width:44px;height:44px;min-width:44px;min-height:44px;margin:0}
body.dashboard-site #main-content .dashboard-advanced>summary.action-control{display:flex;justify-content:flex-start;text-align:left;width:100%;min-height:32px;padding:0;background:none;border:0;box-shadow:none}
body.dashboard-site #main-content .dashboard-advanced>summary.action-control::after{content:''!important;display:block;width:7px;height:7px;flex:none;margin-left:auto;margin-right:3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
body.dashboard-site #main-content .dashboard-advanced[open]>summary.action-control::after{transform:rotate(225deg)}
@media(max-width:600px){
 body.dashboard-site #main-content .ticket-page-toolbar form{flex-wrap:wrap;max-width:100%}
 body.dashboard-site #main-content .ticket-page-toolbar form>label{flex:1;min-width:0}
 body.dashboard-site #main-content .ticket-page-toolbar select{width:100%;min-width:0}
 body.dashboard-site #main-content .ticket-type-list .tool-actions{width:100%;justify-content:flex-end}
 body.dashboard-site #main-content .ticket-question .icon-action{width:44px;height:44px;min-width:44px;min-height:44px}
 body.dashboard-site #main-content :is(.ticket-intake-aside,.ticket-message-preview)>.preview-heading{flex-wrap:wrap;gap:8px}
}

body.dashboard-site #main-content .tool-grid>.multi-select-field{display:flex;flex-direction:column;gap:8px;min-width:0}
body.dashboard-site #main-content .tool-grid>.multi-select-field>label{margin:0;font-size:13px;line-height:1.6}
body.dashboard-site #main-content .tool-grid>.multi-select-field>.multi-select{margin-top:auto;margin-bottom:0}
body.dashboard-site #main-content .tool-grid>:is(label,.multi-select-field){margin-block:0}

body.dashboard-site #main-content .giveaway-page .tool-grid>label>input{margin-top:0}

/* Metric labels remain full rows; icon alignment must never merge label/value text. */
body #main-content :is(.dashboard-metric strong,.overview-metrics>div>span,.ticket-stat-label){display:flex;align-items:center;gap:8px;min-width:0;line-height:1.5}
body #main-content .overview-metrics>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
body #main-content .overview-metrics>div>span{margin:0;width:100%}
body #main-content .overview-metrics>div>strong{display:block;min-width:0;max-width:100%;line-height:1.5;text-transform:none;overflow-wrap:anywhere}
body #main-content :is(.dashboard-metric,.ticket-stat){min-width:0}
body #main-content :is(.dashboard-metric,.ticket-stat)>:is(strong,span,p){max-width:100%;overflow-wrap:anywhere}
body #main-content :is(.network-summary,.server-result-metrics,.shard-card) dd{min-width:0;max-width:100%;overflow-wrap:anywhere;line-height:1.5}
@media(max-width:500px){body #main-content .overview-metrics>div:last-child{grid-column:1/-1}}

/* Give title artwork the same visible box as its SVG counterparts. */
body #main-content h1>img.button-icon{width:.85em;height:.85em;min-width:.85em;flex-basis:.85em;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
body #main-content .status-heading h1{display:flex;align-items:center;gap:10px}
body #main-content .status-heading h1>.button-icon{margin:0;align-self:center}