/* Shared component contract. Theme values come from Site settings.
   Layout, permissions, rank colours, editor formatting and media remain owned by their modules. */
@media screen {
html body.gm-refined {
 --ux-radius:var(--gm-radius,3px);
 --ux-control:42px;
 --ux-padding:24px;
 --ux-gap:16px;
 --ux-title:36px;
 --ux-section:26px;
 --ux-card-title:22px;
 --ux-copy:calc(13px * var(--gm-text-scale,1));
 --ux-caption:calc(11px * var(--gm-text-scale,1));
 --ux-input:color-mix(in srgb,var(--ui-bg) 80%,var(--ui-surface));
 --ux-hover:color-mix(in srgb,var(--ui-red) 7%,var(--ui-surface));
 --radius:var(--ux-radius);
 --radius-sm:var(--ux-radius);
 --radius-md:var(--ux-radius);
 --ui-radius-sm:var(--ux-radius);
 --ui-radius-md:var(--ux-radius);
 --r-sm:var(--ux-radius);
 --r-md:var(--ux-radius);
 --r-lg:var(--ux-radius);
 --card:var(--ui-surface);
 --paper:var(--ui-surface);
 --ink:var(--ui-text);
 --dim:var(--ui-muted);
 --line:var(--ui-border);
 --accent:var(--ui-red);
 font-family:var(--ui-body);
 color:var(--ui-text);
 line-height:1.75;
}

/* One page heading, on public pages and in management screens. */
html body.gm-refined #gm-main-content .pg-head {
 display:block;
 padding:var(--ux-padding);
 margin:0 0 28px;
 border:1px solid var(--ui-border);
 border-top:2px solid var(--ui-red);
 border-radius:var(--ux-radius);
 background:var(--ui-surface);
 box-shadow:none;
}
html body.gm-refined #gm-main-content .pg-head::after {display:none}
html body.gm-refined #gm-main-content .pg-head-row {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px;min-height:0;padding:0}
html body.gm-refined #gm-main-content .pg-head-main {display:block;flex:1 1 240px;min-width:0;min-height:0}
html body.gm-refined #gm-main-content .pg-head .pg-title {font-family:var(--ui-head);font-size:var(--ux-title)!important;font-weight:600;line-height:1.2!important;letter-spacing:.015em;text-transform:uppercase;margin:0!important;overflow-wrap:anywhere}
html body.gm-refined #gm-main-content .pg-kicker {font:700 10px/1.5 var(--ui-body);letter-spacing:.14em;color:var(--ui-red);margin:0 0 8px;text-transform:uppercase}
html body.gm-refined #gm-main-content .pg-lead {max-width:76ch;font:400 var(--ux-copy)/1.8 var(--ui-body);color:var(--ui-muted);margin:10px 0 0}
html body.gm-refined #gm-main-content .pg-head-actions {display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0}
html body.gm-refined #gm-main-content .gm-page-symbol {width:40px;height:40px;flex:0 0 40px;font-size:19px;border:1px solid color-mix(in srgb,var(--ui-red) 30%,var(--ui-border));border-radius:var(--ux-radius);background:color-mix(in srgb,var(--ui-red) 6%,var(--ui-surface));color:var(--ui-red)}

/* Sections and card titles. Intentionally exclude user-authored rich text and profile nicknames. */
html body.gm-refined #gm-main-content :is(.pg-sec h2,.ph-h2,.gm-home-section-head h2,.gm-home-summary-head h2,.evp-section-head h2,.personal-heading h2) {font:600 var(--ux-section)/1.25 var(--ui-head);letter-spacing:.02em;text-transform:uppercase;color:var(--ui-text);margin:0}
html body.gm-refined #gm-main-content .pg-sec {margin:32px 0 16px}
html body.gm-refined #gm-main-content :is(.set-t,.portal-card h3,.sh-panel>h2,.evp-settings h2,.evp-info-card h3,.nws-title,.doc-card-title,.ev-title,.sh-product h2,.sh-product h2 a,.personal-heading h2) {font-family:var(--ui-head);font-size:var(--ux-card-title);font-weight:600;line-height:1.3;letter-spacing:.015em;text-transform:uppercase}

/* Shared surfaces, including recently added features and older staff panels. */
html body.gm-refined #gm-main-content :is(.pane,.panel,.card,.set-card,.portal-card,.portal-work-panel,.sh-panel,.sh-product,.sh-empty,.doc-card,.doc-read,.rules-cat,.ev-form,.ev-mng-card,.evp-announcement,.evp-calendar,.evp-info-card,.evp-settings section,.personal-about,.personal-showcase,.profile-card,.profile-about,.srv-card,.stat-srv,.mapdonut-srv,.nws-card,.ph-feat,.gm-summary,.gm-summary-metric,.gm-home-news-card,.ticket-card,.ticket-box,.kb-edit,.news-form,.doc-edit-block,.block-edit) {
 border-color:var(--ui-border);
 border-radius:var(--ux-radius);
 background:var(--ui-surface);
 box-shadow:none;
}
html body.gm-refined #gm-main-content :is(.pane,.panel,.card,.set-card,.portal-card,.sh-panel,.sh-empty,.doc-read,.rules-cat,.ev-form,.ev-mng-card,.evp-announcement,.evp-calendar,.evp-info-card,.evp-settings section,.personal-about,.personal-showcase,.profile-about) {padding:var(--ux-padding)}
html body.gm-refined #gm-main-content :is(.evp-announcement,.gm-summary) {border-top:2px solid var(--ui-red)}
html body.gm-refined #gm-main-content :is(.set-card,.portal-card,.nws-card,.doc-card,.sh-product,.gm-home-news-card,.ph-feat):hover {background:var(--ui-surface-2);border-color:var(--ui-border-strong);box-shadow:none;transform:none}
html body.gm-refined #gm-main-content :is(.evp-info-grid,.personal-profile,.sh-grid,.set-grid,.ev-list) {gap:var(--ux-gap)}
html body.gm-refined #gm-main-content :is(.evp-info-card p,.evp-announcement>p,.personal-bio,.personal-empty,.personal-favorites dd,.sh-product-desc,.sh-muted,.sh-how p,.set-d,.portal-card p,.pg-lead,.ev-text,.pa-text) {font-size:var(--ux-copy);line-height:1.8}
html body.gm-refined #gm-main-content :is(.evp-info-card p,.evp-announcement>p,.personal-empty,.sh-product-desc,.sh-muted,.sh-how p,.set-d,.portal-card p,.ev-text) {color:var(--ui-muted)}

/* Action sizes and typography. Brand/auth buttons, badges, icon-only and editor controls are separate roles. */
html body.gm-refined :is(#gm-main-content,.modal-box) :is(a.primary,button.primary,.pane-cta,.btn-ghost,.btn-edit,.btn-del,.modal-cancel,.evp-button,.gm-home-btn) {
 box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:var(--ux-control);height:auto;padding:10px 16px;
 border:1px solid var(--ui-border-strong);border-radius:var(--ux-radius);
 font:700 11px/1.5 var(--ui-body);letter-spacing:.045em;text-transform:uppercase;text-decoration:none;
 white-space:normal;text-align:center;vertical-align:middle;
 box-shadow:none;cursor:pointer;transition:background .16s,border-color .16s,color .16s;
}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(a.primary,button.primary,.pane-cta) {background:var(--ui-red);border-color:var(--ui-red);color:#fff}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(.btn-ghost,.btn-edit,.modal-cancel,.evp-button) {background:transparent;border-color:var(--ui-border-strong);color:var(--ui-text)}
html body.gm-refined :is(#gm-main-content,.modal-box) .btn-del {background:transparent;color:var(--ui-red);border-color:color-mix(in srgb,var(--ui-red) 65%,var(--ui-border))}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(a.primary,button.primary,.pane-cta):hover {background:color-mix(in srgb,var(--ui-red) 85%,#000);border-color:var(--ui-red);color:#fff;transform:none}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(.btn-ghost,.btn-edit,.modal-cancel,.evp-button):hover {background:var(--ux-hover);border-color:var(--ui-red);color:var(--ui-text);transform:none}
html body.gm-refined :is(#gm-main-content,.modal-box) .btn-del:hover {background:var(--ui-red);color:#fff}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(.btn-ghost.active,.btn-ghost[aria-pressed=true],.btn-ghost[aria-current=page]) {background:var(--ux-hover);border-color:var(--ui-red);color:var(--ui-text)}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(button:disabled,[aria-disabled=true]) {cursor:not-allowed;opacity:.45;box-shadow:none}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(.btn-ghost.sm,.btn-edit.sm,.btn-del.sm,button.primary.sm,a.primary.sm) {min-height:34px;padding:7px 11px;font-size:10px}

/* Form controls: same base height, borders and focus state on every screen. */
html body.gm-refined :is(#gm-main-content,.modal-box) :is(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=image]),select,textarea) {
 box-sizing:border-box;max-width:100%;border:1px solid var(--ui-border-strong);border-radius:var(--ux-radius);
 background:var(--ux-input);color:var(--ui-text);font:500 var(--ux-copy)/1.5 var(--ui-body);box-shadow:none;
}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=image]),select:not([multiple]):not([size])) {min-height:var(--ux-control);padding:9px 12px}
html body.gm-refined :is(#gm-main-content,.modal-box) textarea {min-height:116px;padding:12px;line-height:1.75;resize:vertical}
html body.gm-refined :is(#gm-main-content,.modal-box) select[multiple] {padding:8px;min-height:160px}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(input,select,textarea)::placeholder {color:var(--ui-muted);opacity:.8}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(input,select,textarea):focus {border-color:var(--ui-red);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-red) 12%,transparent)}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(input[type=checkbox],input[type=radio]) {accent-color:var(--ui-red)}
html body.gm-refined :is(#gm-main-content,.modal-box) form label {font-family:var(--ui-body);font-size:12px;line-height:1.6;color:var(--ui-muted)}
html body.gm-refined :is(#gm-main-content,.modal-box) :is(a,button,input,select,textarea,summary):focus-visible {outline:2px solid var(--ui-red);outline-offset:3px}

/* Tables, filters and navigation use the same borders and type scale. */
html body.gm-refined #gm-main-content :is(.tbl-wrap,.table-wrap) {overflow:auto;max-width:100%;padding:0;border:1px solid var(--ui-border);border-radius:var(--ux-radius);background:var(--ui-surface);box-shadow:none}
html body.gm-refined #gm-main-content .tbl {background:transparent;color:var(--ui-text)}
html body.gm-refined #gm-main-content .tbl th {padding:13px 16px;background:var(--ui-surface-2);color:var(--ui-muted);font:700 10px/1.5 var(--ui-body);letter-spacing:.07em;text-transform:uppercase;border-color:var(--ui-border)}
html body.gm-refined #gm-main-content .tbl td {padding:15px 16px;font-size:var(--ux-copy);line-height:1.65;border-color:var(--ui-border)}
html body.gm-refined #gm-main-content .tbl tr:hover {background:color-mix(in srgb,var(--ui-text) 3%,transparent)}
html body.gm-refined #gm-main-content :is(.pg-toolbar,.sh-catalog-bar) {padding:16px;border:1px solid var(--ui-border);border-radius:var(--ux-radius);background:var(--ui-surface);margin-bottom:20px}
html body.gm-refined #gm-main-content :is(.gm-section-links,.sh-tabs,.sh-categories) {gap:6px}
html body.gm-refined #gm-main-content :is(.gm-section-links a,.sh-tabs a,.sh-categories a,.evp-month-nav a,.pg-num,.pg-btn) {border-radius:var(--ux-radius);font-family:var(--ui-body);font-size:11px;line-height:1.5;box-sizing:border-box}
html body.gm-refined #gm-main-content :is(.gm-section-links a,.sh-tabs a,.sh-categories a) {padding:8px 12px;border:1px solid transparent;color:var(--ui-muted);background:transparent;text-decoration:none}
html body.gm-refined #gm-main-content :is(.gm-section-links a.is-current,.sh-tabs a[aria-current],.sh-categories a[aria-current]) {border-color:color-mix(in srgb,var(--ui-red) 35%,var(--ui-border));background:var(--ux-hover);color:var(--ui-text)}

/* Functional empty states and reading panels stay visually related. */
html body.gm-refined #gm-main-content :is(.empty-state,.sh-empty,.gm-home-news-empty) {padding:32px 24px;border:1px dashed var(--ui-border-strong);border-radius:var(--ux-radius);background:var(--ui-surface);color:var(--ui-muted);box-shadow:none;font:400 var(--ux-copy)/1.8 var(--ui-body)}
html body.gm-refined #gm-main-content .empty-state>.fi {color:var(--ui-red);border-color:var(--ui-border);border-radius:var(--ux-radius)}
html body.gm-refined #gm-main-content .doc-read-body {line-height:1.85}
html body.gm-refined #gm-main-content :is(.evcal,.personal-award,.gm-cookie-choice,.sh-how>div) {background:var(--ux-input);border-color:var(--ui-border);border-radius:var(--ux-radius)}
html body.gm-refined #gm-main-content :is(.evp-announcement-icon,.evp-card-icon,.set-ic,.personal-count) {border-radius:var(--ux-radius);border-color:var(--ui-border);box-shadow:none}
html body.gm-refined #gm-main-content :is(.evp-announcement-icon,.evp-card-icon,.set-ic) {background:color-mix(in srgb,var(--ui-red) 5%,var(--ui-surface));color:var(--ui-red)}
html body.gm-refined #gm-main-content .evp-announcement h2 {font:600 var(--ux-section)/1.3 var(--ui-head);color:var(--ui-text)}
html body.gm-refined #gm-main-content .evp-status {background:transparent;border-color:var(--ui-border);border-radius:var(--ux-radius);color:var(--ui-muted);font-family:var(--ui-body)}

/* Dialogs and popovers are also shared with settings and staff workflows. */
html body.gm-refined .modal-box {padding:var(--ux-padding);border:1px solid var(--ui-border-strong);border-top:2px solid var(--ui-red);border-radius:var(--ux-radius);background:var(--ui-surface);color:var(--ui-text);box-shadow:0 24px 70px #0007;font-family:var(--ui-body)}
html body.gm-refined .modal-box :is(h3,.modal-title) {font:600 var(--ux-section)/1.25 var(--ui-head);letter-spacing:.02em;text-transform:uppercase;color:var(--ui-text)}
html body.gm-refined .modal-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;border-color:var(--ui-border);padding-top:18px;margin-top:22px}
html body.gm-refined :is(.gms-menu,.dd-menu,.hint-tip) {border-color:var(--ui-border-strong);border-radius:var(--ux-radius);background:var(--ui-surface);color:var(--ui-text);font-family:var(--ui-body)}
html body.gm-refined .gms-menu {box-shadow:0 16px 36px #0005}
html body.gm-refined #gm-main-content .gm-cookie-page {border-radius:var(--ux-radius);border-color:var(--ui-border);border-top-color:var(--ui-red);background:var(--ui-surface);padding:32px}
html body.gm-refined #gm-main-content .gm-cookie-page h1 {font:600 var(--ux-title)/1.2 var(--ui-head)}
html body.gm-refined #gm-main-content .gm-cookie-page :is(.gm-cookie-intro,.gm-cookie-small,.gm-cookie-choice>p) {font-size:var(--ux-copy);line-height:1.8}
}

@media screen and (max-width:760px) {
 html body.gm-refined {--ux-padding:18px;--ux-title:28px;--ux-section:23px;--ux-card-title:21px;--ux-gap:14px}
 html body.gm-refined #gm-main-content .pg-head {margin-bottom:22px}
 html body.gm-refined #gm-main-content .pg-head-main {flex-basis:180px}
 html body.gm-refined #gm-main-content .pg-head-actions {width:100%;justify-content:flex-start}
 html body.gm-refined #gm-main-content .pg-sec {margin:26px 0 14px}
 html body.gm-refined #gm-main-content .tbl :is(th,td) {padding:12px}
 html body.gm-refined #gm-main-content .pg-toolbar {padding:12px}
 html body.gm-refined #gm-main-content .gm-cookie-page {padding:22px 18px}
}
@media screen and (max-width:480px) {
 html body.gm-refined {--ux-padding:16px;--ux-section:22px}
 html body.gm-refined #gm-main-content .gm-page-symbol {width:34px;height:34px;flex-basis:34px;font-size:17px}
 html body.gm-refined #gm-main-content .pg-head-row {gap:12px}
 html body.gm-refined #gm-main-content .pg-head-main {flex-basis:160px}
 html body.gm-refined #gm-main-content .pg-toolbar {gap:10px}
 html body.gm-refined #gm-main-content :is(.empty-state,.sh-empty) {padding:26px 18px}
}
@media screen and (prefers-reduced-motion:reduce) {
 html body.gm-refined :is(#gm-main-content,.modal-box) :is(a,button,input,select,textarea) {transition:none}
}