/* Shared UI contract. Layouts own structure; modes own colors, type and shapes. */
:root{
 /* Sampled from the dominant blue pixels in mass-care-logo.jpg. */
 --masscare-blue:#52a9ff;--masscare-on-blue:#092d4f;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
 --page-gutter:32px;--content-width:1220px;--card-padding:24px;--section-gap:48px;--field-gap:16px;
 --control-height:44px;--control-radius:12px;--button-radius:12px;--card-radius:16px;--dialog-radius:20px;--pill-radius:999px;
 --body-size:16px;--support-size:14px;--article-size:18px;
}
html[data-mode=light]{
 --ui-paper:#f7fbff;--ui-surface:#fff;--ui-secondary:#eaf4ff;--ui-ink:#14314b;--ui-muted:#4b647b;--ui-line:#c6def3;
 --ui-action:var(--masscare-blue);--ui-action-text:var(--masscare-on-blue);--ui-link:#1763b1;--ui-heading:#134f88;--ui-soft:#d7eaff;
 --ui-dark:#154e83;--ui-on-dark:#fff;--ui-heading-text:#fff;--ui-shadow:0 6px 22px #1763b10c;color-scheme:light;
}
html[data-mode=dark]{
 --ui-paper:#101d28;--ui-surface:#1a2b38;--ui-secondary:#223949;--ui-ink:#f1f5fb;--ui-muted:#b5cddc;--ui-line:#3e596b;
 --ui-action:var(--masscare-blue);--ui-action-text:var(--masscare-on-blue);--ui-link:#a8d4ff;--ui-heading:#a8d4ff;--ui-soft:#23435f;
 --ui-dark:#101d28;--ui-on-dark:#f1f5fb;--ui-heading-text:#092d4f;--ui-shadow:none;color-scheme:dark;
}
html[data-mode=girly]{
 --ui-paper:#fff4f9;--ui-surface:#fffafd;--ui-secondary:#ffe1ed;--ui-ink:#481b32;--ui-muted:#78445d;--ui-line:#edb2cc;
 --ui-action:#b71862;--ui-action-text:#fff;--ui-link:#b71862;--ui-heading:#8e2458;--ui-soft:#ffcadd;
 --ui-dark:#8e2458;--ui-on-dark:#fff;--ui-heading-text:#fff;--ui-shadow:0 6px 22px #a5235910;
 --button-radius:999px;--card-radius:24px;color-scheme:light;
}
/* Orange is a complete fourth mode across every template and workspace. */
html[data-mode=orange]{
 --ui-paper:#fff8f1;--ui-surface:#fffdf9;--ui-secondary:#ffead5;--ui-ink:#3f281a;--ui-muted:#755441;--ui-line:#e7c7ac;
 --ui-action:#ff9b42;--ui-action-text:#4a220c;--ui-link:#a43f0c;--ui-heading:#79320f;--ui-soft:#ffdbb8;
 --ui-dark:#ff9b42;--ui-on-dark:#4a220c;--ui-heading-text:#fff;--ui-shadow:0 6px 22px #a43f0c0c;color-scheme:light;
}
/* Six template palettes and shapes are the base; advanced options override individual settings. */
html[data-mode=light][data-layout=editorial]{--ui-paper:#fbf9f0;--ui-surface:#fffef8;--ui-secondary:#eee9da;--ui-ink:#202a28;--ui-muted:#5d6159;--ui-line:#d6d3c5;--ui-action:#8e3c22;--ui-link:#8e3c22;--ui-heading:#193f35;--ui-soft:#eadbd0;--ui-dark:#193f35;--ui-action-text:#fff;--ui-heading-text:#fff;--ui-on-dark:#fff;}
html[data-mode=light][data-layout=civic]{--ui-paper:#f7fbfd;--ui-surface:#ffffff;--ui-secondary:#e9f1f6;--ui-ink:#17323a;--ui-muted:#526d77;--ui-line:#c8d9e1;--ui-action:#126c77;--ui-link:#126c77;--ui-heading:#103e59;--ui-soft:#d7edf0;--ui-dark:#103e59;--ui-action-text:#fff;--ui-heading-text:#fff;--ui-on-dark:#fff;}
html[data-mode=light][data-layout=community]{--ui-paper:#fffaf0;--ui-surface:#fffdf6;--ui-secondary:#f3e9d5;--ui-ink:#372d25;--ui-muted:#736553;--ui-line:#ddd1b9;--ui-action:#a14724;--ui-link:#a14724;--ui-heading:#3b4230;--ui-soft:#f0d5bc;--ui-dark:#3b4230;--ui-action-text:#fff;--ui-heading-text:#fff;--ui-on-dark:#fff;}
html[data-mode=light][data-layout=bold]{--ui-paper:#f7f7ee;--ui-surface:#ffffff;--ui-secondary:#e8eddd;--ui-ink:#222722;--ui-muted:#576357;--ui-line:#bdc6b8;--ui-action:#a43712;--ui-link:#a43712;--ui-heading:#202b29;--ui-soft:#f3c9a9;--ui-dark:#202b29;--ui-action-text:#fff;--ui-heading-text:#fff;--ui-on-dark:#fff;}
html[data-mode=light][data-layout=bloom]{--ui-paper:#fcf9ff;--ui-surface:#ffffff;--ui-secondary:#f0eaf7;--ui-ink:#3d3050;--ui-muted:#776581;--ui-line:#e0d3e9;--ui-action:#9a356b;--ui-link:#9a356b;--ui-heading:#57395d;--ui-soft:#eed6e7;--ui-dark:#57395d;--ui-action-text:#fff;--ui-heading-text:#fff;--ui-on-dark:#fff;}
html[data-mode=dark][data-layout=editorial]{--ui-paper:#151c18;--ui-surface:#1e2a23;--ui-secondary:#28352c;--ui-ink:#f1eef3;--ui-muted:#bacbbb;--ui-line:#425447;--ui-action:#ffc69e;--ui-link:#ffc69e;--ui-heading:#dbe9cc;--ui-soft:#553c2d;--ui-dark:#0e1510;--ui-action-text:#152116;--ui-heading-text:#152116;--ui-on-dark:#f1eef3;}
html[data-mode=dark][data-layout=civic]{--ui-paper:#101d28;--ui-surface:#1a2b38;--ui-secondary:#223949;--ui-ink:#f1eef3;--ui-muted:#b5cddc;--ui-line:#3e596b;--ui-action:#7de5db;--ui-link:#7de5db;--ui-heading:#bee3ff;--ui-soft:#234d56;--ui-dark:#091520;--ui-action-text:#102c36;--ui-heading-text:#102c36;--ui-on-dark:#f1eef3;}
html[data-mode=dark][data-layout=community]{--ui-paper:#1e1a13;--ui-surface:#2a251c;--ui-secondary:#383123;--ui-ink:#f1eef3;--ui-muted:#d1c7b4;--ui-line:#5b5140;--ui-action:#ffc29b;--ui-link:#ffc29b;--ui-heading:#e7eabf;--ui-soft:#58402e;--ui-dark:#15120c;--ui-action-text:#302416;--ui-heading-text:#302416;--ui-on-dark:#f1eef3;}
html[data-mode=dark][data-layout=bold]{--ui-paper:#121b16;--ui-surface:#1d2b22;--ui-secondary:#283c2d;--ui-ink:#f1eef3;--ui-muted:#b9d0bc;--ui-line:#49664a;--ui-action:#ffbb8b;--ui-link:#ffbb8b;--ui-heading:#e6f2d0;--ui-soft:#543929;--ui-dark:#0b120e;--ui-action-text:#202d19;--ui-heading-text:#202d19;--ui-on-dark:#f1eef3;}
html[data-mode=dark][data-layout=bloom]{--ui-paper:#201628;--ui-surface:#2c1e37;--ui-secondary:#3b2b47;--ui-ink:#f1eef3;--ui-muted:#d5bbdf;--ui-line:#624571;--ui-action:#ffaad6;--ui-link:#ffaad6;--ui-heading:#ead4ff;--ui-soft:#633250;--ui-dark:#150c1c;--ui-action-text:#32122a;--ui-heading-text:#32122a;--ui-on-dark:#f1eef3;}
html[data-mode=girly][data-layout=editorial]{--ui-paper:#fff5f7;--ui-surface:#fffafb;--ui-secondary:#ffe0e5;--ui-soft:#ffd0d9;--ui-line:#edb2cc;}
html[data-mode=girly][data-layout=civic]{--ui-paper:#fff5fa;--ui-surface:#fffaff;--ui-secondary:#ffe0f1;--ui-soft:#ffd0e9;--ui-line:#edb2cc;}
html[data-mode=girly][data-layout=community]{--ui-paper:#fff4f5;--ui-surface:#fffaf9;--ui-secondary:#ffdedf;--ui-soft:#ffc9d1;--ui-line:#edb2cc;}
html[data-mode=girly][data-layout=bold]{--ui-paper:#fff0f7;--ui-surface:#fffafd;--ui-secondary:#ffd4e7;--ui-soft:#ffbfdc;--ui-line:#e996bc;}
html[data-mode=girly][data-layout=bloom]{--ui-paper:#fff3fa;--ui-surface:#fffafd;--ui-secondary:#ffdfef;--ui-soft:#ffcde2;--ui-line:#edb2cc;}
html[data-layout=classic]{--card-radius:16px;--button-radius:12px;}
html[data-layout=editorial]{--card-radius:3px;--button-radius:0px;}
html[data-layout=civic]{--card-radius:10px;--button-radius:8px;}
html[data-layout=community]{--card-radius:28px;--button-radius:16px;}
html[data-layout=bold]{--card-radius:0px;--button-radius:0px;}
html[data-layout=bloom]{--card-radius:32px;--button-radius:30px;}
html[data-mode=girly]:is([data-layout=classic],[data-layout=community],[data-layout=bloom]){--button-radius:999px}
/* Standard light templates share the logo blue. Keep their layout, typography
   and neutral surfaces; darker blue is reserved for readable text and focus. */
html[data-mode=light][data-layout]:is([data-appearance=template],[data-palette=layout]){
 --ui-action:var(--masscare-blue);--ui-action-text:var(--masscare-on-blue);
 --ui-link:#1763b1;--ui-heading:#134f88;--ui-soft:#d7eaff;
 --ui-dark:var(--masscare-blue);--ui-on-dark:var(--masscare-on-blue);--ui-heading-text:#fff;
}
/* Custom palettes change accents deliberately, without replacing mode surfaces. */
html[data-appearance=advanced][data-palette=ocean]:not([data-mode=dark]){--ui-action:#125e70;--ui-action-text:#fff;--ui-link:#125e70;--ui-heading:#123e59}
html[data-appearance=advanced][data-palette=forest]:not([data-mode=dark]){--ui-action:#386327;--ui-action-text:#fff;--ui-link:#386327;--ui-heading:#193f35}
html[data-appearance=advanced][data-palette=rose]:not([data-mode=dark]){--ui-action:#9e315c;--ui-action-text:#fff;--ui-link:#9e315c;--ui-heading:#683556}
html[data-appearance=advanced][data-palette=terracotta]:not([data-mode=dark]){--ui-action:#8d391c;--ui-action-text:#fff;--ui-link:#8d391c;--ui-heading:#743719}
html[data-appearance=advanced][data-palette=indigo]:not([data-mode=dark]){--ui-action:#66379c;--ui-action-text:#fff;--ui-link:#66379c;--ui-heading:#37366f}
html[data-appearance=advanced][data-mode=dark][data-palette=ocean]{--ui-action:#7de5db;--ui-action-text:#102c36;--ui-link:#7de5db;--ui-heading:#bee3ff}
html[data-appearance=advanced][data-mode=dark][data-palette=forest]{--ui-action:#b9e899;--ui-action-text:#152116;--ui-link:#b9e899;--ui-heading:#dbe9cc}
html[data-appearance=advanced][data-mode=dark][data-palette=rose]{--ui-action:#ffaad6;--ui-action-text:#32122a;--ui-link:#ffaad6;--ui-heading:#ead4ff}
html[data-appearance=advanced][data-mode=dark][data-palette=terracotta]{--ui-action:#ffc29b;--ui-action-text:#302416;--ui-link:#ffc29b;--ui-heading:#ffe0ca}
html[data-appearance=advanced][data-mode=dark][data-palette=indigo]{--ui-action:#ddc1ff;--ui-action-text:#222043;--ui-link:#ddc1ff;--ui-heading:#d3d2ff}
html[data-contrast=high]{--ui-muted:var(--ui-ink);--ui-line:var(--ui-ink);--ui-shadow:none}
html[data-mode][data-layout],html[data-mode][data-layout] body:not([data-page]){
 --paper:var(--ui-paper);--surface:var(--ui-surface);--cream:var(--ui-secondary);--surface-2:var(--ui-secondary);
 --ink:var(--ui-ink);--muted:var(--ui-muted);--line:var(--ui-line);--border:var(--ui-line);
 --red:var(--ui-link);--blue:var(--ui-link);--plum:var(--ui-heading);--soft-accent:var(--ui-soft);
 --rose:var(--ui-soft);--sage:var(--ui-secondary);--positive:var(--ui-secondary);--sea:var(--ui-secondary);
 --dark-surface:var(--ui-dark);--on-dark:var(--ui-on-dark);--on-accent:var(--ui-heading-text);--shadow:var(--ui-shadow);
}
/* User-selected card shape and density are independent of the chosen layout. */
html[data-corners=square]{--card-radius:0px}html[data-corners=soft]{--card-radius:12px}html[data-corners=round]{--card-radius:24px}
html[data-density=compact]{--card-padding:20px;--section-gap:32px}
html[data-text-size=large]{--body-size:18px;--article-size:20px;--support-size:16px}
html[data-text-size=larger]{--body-size:20px;--article-size:22px;--support-size:18px}
html[data-width=wide]{--content-width:1400px}

html[data-mode] body{font:400 var(--body-size)/1.65 var(--body-font);background:var(--ui-paper);color:var(--ui-ink)}
html[data-mode] :is(button,input,select,textarea,legend,nav,.appearance-strip,.mode-controls){font-family:var(--body-font)!important}
html[data-mode] :is(.calc-headline strong,.metric>strong,.metric-value,.calc-stat-grid strong,.workspace-summary strong){font-family:var(--body-font)!important;font-variant-numeric:tabular-nums}
html[data-mode] :is(.hero-copy>p,.campaign-card p,.script-section p,.story-submit p,.hub-detail p,.story-text){font-size:var(--body-size)!important;line-height:1.65}
html[data-mode] :is(small,.tool-note,.calc-help,.calc-mode,.calc-private,.calc-field small,.resource-card p,.reading-meta,.metric p,.heading p,.panel-heading p,.form-help,.font-preview p,.home-shortcuts span,.resource-shortcuts span,.share-explanation,.studio-note,#resultStatus){font-size:var(--support-size)!important;line-height:1.5}
html[data-mode] :is(.field label,.campaign-card label,.calc-field label,.tool-form-grid label){font-size:var(--body-size);line-height:1.4}
html[data-mode] :is(.article-body,.cms-prose){font-size:var(--article-size)!important;line-height:1.8!important}
html[data-mode] .article-body :is(p,li){font-size:inherit!important;line-height:inherit!important}
html[data-mode] :is(.utility,.site-footer) :is(a,p){font-size:var(--support-size)!important}
html[data-mode] :is(.eyebrow,.workspace,.host-tag,.account-kicker){font-size:var(--support-size)!important}
html[data-mode] :is(.eyebrow,.host-tag){color:var(--ui-link)}
html[data-mode] :is(.workspace,.account-kicker,.tab:not(.active)){color:var(--ui-muted)}
html[data-mode] :is(.device-mode,.interest-options label,.compare-sync){min-height:44px;align-items:center}

/* Active controls are at least 44px; passive labels can be smaller. */
html[data-mode] :is(button,.button,.header-support a,.menu-button,.tool-nav a,.site-nav a,.site-header nav>a,summary){
 min-height:var(--control-height)!important;line-height:1.25;touch-action:manipulation;
}
html[data-mode] :is(button,.button,.header-support a){
 display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--support-size)!important;
 border-radius:var(--button-radius)!important;padding:10px 16px;text-align:center;vertical-align:middle;
}
html[data-mode] :is(.button.primary,.support-donate),html[data-mode] body:not([data-page]) .primary{
 background:var(--ui-action)!important;color:var(--ui-action-text)!important;border-color:var(--ui-action)!important;
}
html[data-mode] :is(.button.secondary,.support-shop){background:var(--ui-surface);color:var(--ui-link);border-color:var(--ui-action)}
html[data-mode] :is(.button.primary,.support-donate,.primary):hover{filter:brightness(.97)}
html[data-mode] .button.primary:disabled{filter:none}
html[data-mode] :is(.quick-modes,.mode-controls,.calc-period,.view-switch,.tool-tabs,.tabs){gap:var(--space-1);border-radius:var(--pill-radius)!important}
html[data-mode] :is(.quick-modes button,.mode-controls button,.calc-period button,.view-switch button,.tool-tabs button,.tab,.calc-pay-frequency button){border-radius:var(--pill-radius)!important}
html[data-mode] :is(.quick-modes button,.mode-controls button,.calc-period button,.tool-tabs button,.cms-tabs button,.workspace-tabs button)[aria-pressed=true],html[data-mode] :is(.view-switch button.selected,.tab.active){background:var(--ui-action)!important;color:var(--ui-action-text)!important;box-shadow:inset 0 0 0 1px var(--ui-link)}
html[data-mode] :is(.status-pill,.status-badge,.platform-badge,.workspace-badge,.placeholder-tag,.event-state){
 display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--pill-radius)!important;padding:4px 12px;min-height:28px;font-size:var(--support-size)!important;line-height:1.3;
}
html[data-mode] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]),select,textarea){
 min-height:var(--control-height)!important;font-size:var(--body-size)!important;line-height:1.4;border-radius:var(--control-radius)!important;padding:10px 12px;background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line);
}
html[data-mode] .calc-input-wrap{border-radius:var(--control-radius)!important}
html[data-mode] :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--ui-link);outline-offset:3px}
html[data-mode] :is(.icon-button,.studio-close,.small-button,.back-to-top){min-width:44px!important;min-height:44px!important;padding:8px}
html[data-mode] .calc-submit{justify-content:space-between}

/* Cards share padding and corners while keeping their layout's placement/borders. */
html[data-mode] :is(.campaign-card,.resource-card,.calc-selector,.calc-input-panel,.calc-result-panel,.graphic-preview,.hub-detail,.hub-controls,.story-card,.learning-glossary dl>div,.comparison-column,.design-gallery article,.integration-placeholder,.contact-grid article,.workspace-card,.workspace-record,.workspace-summary>div,.metric){
 padding:var(--card-padding)!important;border-radius:var(--card-radius)!important;
}
html[data-mode] :is(.panel,.article-aside,.action-options,.font-preview,.article-contents,.resource-shortcuts a,.home-shortcuts a,.workspace-card){border-radius:var(--card-radius)!important}
html[data-mode] :is(dialog,.studio-dialog,.appearance-dialog,.event-dialog){border-radius:var(--dialog-radius)!important}
html[data-mode] :is(.studio-inner,.event-dialog){padding:var(--card-padding)!important}
html[data-mode] :is(.wrap,.home-hero,.calc-intro,.page-hero,.tool-hero){width:min(var(--content-width),calc(100% - var(--page-gutter)*2));max-width:calc(100% - var(--page-gutter)*2)}
html[data-mode] body:not([data-page]) main{max-width:calc(var(--content-width) + var(--page-gutter)*2);padding:24px var(--page-gutter);margin-inline:auto}
html[data-mode] body:not([data-page]) :is(.topbar,.site-nav){padding-inline:var(--page-gutter)}
html[data-mode] :is(.card-grid,.campaign-split,.graphics-layout,.hub-map-layout,.compare-pair,.detail-grid){gap:var(--space-6)}
html[data-mode] :is(.mission-section,.ways-section,.news-section,.campaign-section){padding-block:var(--section-gap)}
html[data-mode] :is(.campaign-split,.graphics-layout,.hub-map-layout){margin-bottom:var(--section-gap)}
html[data-mode] :is(.hero-actions,.tool-button-row,.calc-report-actions){gap:var(--space-2)}
html[data-mode] :is(.calc-field,.campaign-card label,.script-section label,.story-submit label){margin-bottom:var(--field-gap)}
html[data-mode] :is(.calc-field label,.campaign-card label,.script-section label,.story-submit label){gap:6px}
html[data-mode] .calc-field label{margin-bottom:6px}
html[data-mode] .calc-field small{margin-top:6px}
/* Admin list content stays inset even when the panel itself has no padding. */
html[data-mode] .content-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px var(--card-padding)}
.content-row>div{min-width:0;overflow-wrap:anywhere}
.content-row h3{line-height:1.4}
.content-row small{display:block}
html[data-mode] #contentList>p{margin:0;padding:16px var(--card-padding)}
html[data-mode] .cms-tabs button{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line)}
html[data-mode] #contentManager>.panel>.panel-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px);gap:16px;padding:16px var(--card-padding);align-items:end}
html[data-mode] #contentManager .panel-heading label{display:grid;gap:6px;font-size:var(--body-size)}
#contentManager .panel-heading :is(input,select){width:100%;min-width:0;margin:0;height:max(var(--control-height),calc(var(--body-size) * 1.4 + 22px))}
html[data-mode] :is(.calc-actions,.calc-pay-frequency,.interest-options){gap:var(--space-2)}
html[data-mode] .header-support{gap:var(--space-2)}
.site-identity,.workspace-identity{display:flex;align-items:center;gap:12px;min-width:0}
.home-link{flex-shrink:0;white-space:nowrap;text-decoration:none}
html[data-mode] .home-link{padding:10px 12px;gap:6px;border:1px solid var(--ui-line);background:var(--ui-secondary);color:var(--ui-link)}
.home-link svg{flex-shrink:0}
html[data-layout=editorial] .site-identity{grid-column:2;grid-row:1}
.login-home{margin-bottom:16px}
html[data-mode] .menu-button{display:none!important}
html[data-mode] .site-header nav>a{display:flex;align-items:center}
html[data-mode] .site-header nav>details>summary{display:flex;align-items:center}
@media(max-width:930px){html[data-mode] .menu-button{display:inline-flex!important}}
html[data-mode] :is(.home-shortcuts strong,.resource-shortcuts strong){font-size:var(--support-size)!important;line-height:1.4}
html[data-mode] .calc-entry-help{margin:8px 0 16px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:var(--card-radius);background:var(--ui-secondary)}
html[data-mode] .calc-entry-help summary{font-size:var(--support-size);font-weight:700;display:flex;align-items:center;cursor:pointer}
html[data-mode] .calc-entry-help summary:after{content:'+';margin-left:auto;font-size:22px}.calc-entry-help[open] summary:after{content:'−'}
html[data-mode] .calc-entry-help p{margin:8px 0}

/* Campaign photographs are content, never decorative crops. Layouts may frame
   or reposition them, but cannot hide faces, the banner, or the mobile image. */
html[data-layout] body[data-page=home] .home-hero{margin-inline:auto}
html[data-layout] body[data-page=home] .hero-art{
 display:flex;flex-direction:column;justify-content:center;gap:12px;
 height:auto;min-height:0;min-width:0;max-width:100%;align-self:center;
}
html[data-layout] body[data-page=home] .hero-photo{
 position:relative;inset:auto;width:100%;height:auto;min-height:0;
 aspect-ratio:auto;border-radius:0;overflow:visible;transform:none;
}
html[data-layout] body[data-page=home] .hero-photo img{
 display:block;width:100%;height:auto;max-height:none;object-fit:contain;
 border-radius:0;
}
html[data-layout] body[data-page=home] .hero-label{
 position:static;inset:auto;transform:none;max-width:100%;box-shadow:none;
 background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);
}
html[data-layout] body[data-page=home] .hero-label small{color:var(--ui-muted)}
html[data-layout=editorial] body[data-page=home] .hero-art{width:min(100%,900px);margin:22px auto 0}
html[data-layout=bloom] body[data-page=home] .hero-art{
 max-width:720px;padding:16px;background:var(--ui-secondary);border:1px solid var(--ui-line);border-radius:28px;
}
html[data-layout=bloom] body[data-page=home] .hero-photo{box-shadow:none}
html[data-mode] body[data-page] :is(.article-body img,.cms-content-image){
 display:block;max-width:100%;height:auto;max-height:none;object-fit:contain;
}

/* The Appearance panel explains the current applied specification. */
.ui-theme-reference{padding:16px;margin-top:24px;border:1px solid var(--ui-line);border-radius:var(--card-radius);background:var(--ui-secondary)}
.ui-theme-reference h3{font-size:20px;margin:0 0 12px}.ui-theme-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ui-theme-swatches>div{display:flex;flex-direction:column;gap:4px;font-size:14px;min-width:0}.ui-theme-swatches i{height:24px;width:100%;border:1px solid var(--ui-line);border-radius:6px;display:block}.ui-theme-swatches code{font:12px var(--body-font)}
.ui-theme-reference p{font-size:14px;line-height:1.6;margin:12px 0 0}

@media(max-width:1100px){:root{--page-gutter:24px}}
@media(max-width:760px){
 :root{--page-gutter:16px;--card-padding:16px;--section-gap:24px;--article-size:17px}
 html[data-density=compact]{--card-padding:12px;--section-gap:16px}
 html[data-text-size=large]{--article-size:20px}html[data-text-size=larger]{--article-size:22px}
 html[data-mode] .utility{gap:8px;padding:8px 16px!important}
 html[data-mode] .utility .appearance-strip{gap:8px}
 html[data-mode] .utility .content-editor-link{display:none}
 html[data-mode] .utility>a{flex:0 0 auto;margin-left:auto;max-width:none}
 html[data-mode] .appearance-strip button{padding:8px 10px}
 html[data-mode] .utility .language-select select{font-size:14px!important;max-width:130px;padding:8px}
 html[data-mode] .site-header{position:relative;top:auto;padding:8px 16px!important;gap:8px}
 .site-identity{flex:1 1 0;gap:8px}
 .workspace-identity{flex:1 1 auto;gap:8px}
 .site-identity .site-brand,.workspace-identity .brand{min-width:0}
 .workspace-identity .brand{flex:0 1 auto}
 html[data-mode] body:not([data-page]) .workspace-identity .brand img{width:155px}
 html[data-mode] :is(.site-identity .site-brand img,.workspace-identity .brand img){max-width:100%;height:auto}
 html[data-mode] .home-link{padding:8px 10px}
 html[data-mode] .site-header .menu-button{padding:8px 10px}
 html[data-mode] .header-support a{min-height:44px!important;padding:8px 12px}
 html[data-mode] .tool-nav{position:static;top:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px 12px;align-items:stretch}
 html[data-mode] .tool-nav a{font-size:14px!important;white-space:normal;overflow-wrap:normal;min-width:0;padding:4px 2px;text-transform:none}
 html[data-mode] .tool-short{display:inline}.tool-full{display:none}
 html[data-mode] .calc-private{max-width:100px;text-align:right}
 html[data-mode] .calc-selector{margin-bottom:12px}
 html[data-mode] .calc-selector label{font-size:16px;margin-bottom:6px}
 html[data-mode] .calc-selector p{font-size:14px;line-height:1.5;margin-top:6px}
 html[data-mode] .calc-panel-heading{align-items:center;gap:8px}
 html[data-mode] .calc-panel-heading h2{font-size:24px;line-height:1.25;margin-bottom:4px}
 html[data-mode] .calc-input-panel fieldset{padding-top:8px}
 html[data-mode] .calc-actions{margin-bottom:8px}
 html[data-mode] .calc-mode{padding:6px 8px}
 html[data-mode] .home-shortcuts{gap:8px;margin:16px 0}
 html[data-mode] .home-shortcuts a{padding:10px 8px}
 html[data-mode] .hero-copy h1{font-size:32px!important;margin-bottom:12px}
 html[data-mode] .hero-copy>p{margin:16px 0}
 html[data-layout] body[data-page=home] .hero-art{display:flex!important;width:100%;margin:20px 0 0;order:0!important}
 html[data-mode] .graphic-preview-toolbar{gap:8px}
 html[data-mode] .graphic-preview canvas{max-height:145px}
 html[data-mode] .graphic-preview.preview-expanded canvas{max-height:65dvh}
 html[data-mode] :is(.card-grid,.campaign-split,.graphics-layout,.hub-map-layout,.compare-pair,.detail-grid){gap:16px}
 html[data-mode] .calc-pay-frequency{display:grid;grid-template-columns:1fr 1fr}
 html[data-mode] .calc-pay-frequency button{padding:8px}
 html[data-mode] .calendar-subscribe{gap:8px}
 html[data-mode] #contentManager>.panel>.panel-heading{grid-template-columns:1fr}
 html[data-mode] .compare-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-width:0}
 html[data-mode] .compare-controls label{min-width:0}
 html[data-mode] .compare-controls select{width:100%;min-width:0}
 html[data-mode] body:not([data-page]) .site-nav a{font-size:14px!important;min-height:44px!important}
 .ui-theme-swatches{grid-template-columns:1fr 1fr}
}
@media(max-width:360px){html[data-mode] .tool-nav{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media print{
 html[data-mode]{--ui-paper:#fff;--ui-surface:#fff;--ui-secondary:#f5f5f5;--ui-ink:#111;--ui-muted:#333;--ui-line:#ccc;--ui-action:#eee;--ui-action-text:#111;--ui-link:#111;--ui-heading:#111;--ui-dark:#fff;--ui-on-dark:#111}
 .ui-theme-reference{display:none!important}
}

/* Six templates first; advanced controls stay collapsed until requested. */
.layout-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.layout-choice{background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);cursor:pointer}
.layout-choice[aria-pressed=true]{outline:3px solid var(--ui-action);outline-offset:2px}
html[data-mode] .layout-choice{display:flex;flex-direction:column;align-items:stretch;text-align:left;justify-content:flex-start;gap:8px;min-width:0}
.layout-choice strong{margin:0}.layout-choice small{overflow-wrap:anywhere}.layout-choice .layout-diagram{width:100%;height:72px;padding:8px;gap:4px;grid-template-rows:6px 1fr 10px;flex-shrink:0}
.layout-choice .layout-diagram.editorial{grid-template-rows:6px 8px 1fr}.layout-choice .layout-diagram.bloom{grid-template-rows:6px 8px 1fr 8px}
.appearance-template-status{margin:16px 0 8px;font-size:14px;color:var(--ui-muted)}
.appearance-advanced{margin:20px 0;padding:12px 16px;border:1px solid var(--ui-line);border-radius:var(--card-radius)}
.appearance-advanced>summary,.compare-advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;cursor:pointer}
.appearance-advanced>summary:after,.compare-advanced>summary:after{content:"+";font-size:22px}.appearance-advanced[open]>summary:after,.compare-advanced[open]>summary:after{content:"−"}
.appearance-advanced>summary span{font-size:14px;font-weight:400;color:var(--ui-muted)}
.compare-main-options{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.compare-main-options label{min-width:0}
.compare-advanced{grid-column:1/-1;border-top:1px solid var(--ui-line);padding-top:8px}
.compare-advanced-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:12px}
.compare-advanced-fields>label:first-child{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:8px}
.compare-advanced input[type=checkbox]{width:20px;flex-shrink:0}
@media(max-width:760px){.compare-advanced-fields{grid-template-columns:1fr}.appearance-advanced>summary span{display:none}.layout-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Labels on the brand-blue bands use the same readable navy as their body text. */
html[data-mode=light][data-layout]:is([data-appearance=template],[data-palette=layout]) :is(.utility,.site-footer,.join-strip) .eyebrow{color:var(--ui-on-dark)}

html[data-mode=light][data-layout]:is([data-appearance=template],[data-palette=layout]) :is(.funding-bill.proposed,.funding-reasons article,.funding-principle){border-color:var(--ui-action)}

html[data-mode=orange] :is(.utility,.site-footer,.join-strip) .eyebrow{color:var(--ui-on-dark)}
html[data-mode=orange] :is(.funding-bill.proposed,.funding-reasons article,.funding-principle){border-color:var(--ui-action)}
/* Four mode choices wrap at small phone widths instead of shrinking targets. */
@media(max-width:600px){
 html[data-mode] .appearance-strip{align-items:flex-start}
 html[data-mode] .quick-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;min-width:0}
 html[data-mode] .quick-modes button{min-width:0;padding-inline:6px!important;white-space:nowrap}
 html[data-mode] .appearance-strip .appearance-open{margin-left:auto}
}