/* Components are scoped to player sites and editor canvases. */
.web-layout-modular { container-type: inline-size; font-size:14px; }
.web-layout-modular p { line-height:1.65; }
.web-layout-modular .web-site-frame { display:block; max-width:1200px; margin:auto; }
.web-layout-modular .web-site-header, .web-layout-modular .web-site-content { max-width:none; width:100%; }
.web-layout-modular .web-site-sections { display:flex; flex-direction:column; gap:18px; }
.site-row { --row-accent:var(--site-accent,#87d6ee); --row-color:#0d1b19; --row-color2:#182a3e; min-width:0; text-align:left; color:inherit; padding:24px; }
.site-row-columns,.builder-columns { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.row-two>.site-row-columns,.builder-layout-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.row-three>.site-row-columns,.builder-layout-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.row-wide-left>.site-row-columns,.builder-layout-wide-left { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.row-wide-right>.site-row-columns,.builder-layout-wide-right { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.row-sidebar>.site-row-columns,.builder-layout-sidebar { grid-template-columns:minmax(0,1fr) minmax(0,3fr); }
.row-narrow>.site-row-columns,.builder-layout-narrow { max-width:640px; margin-inline:auto; }
.site-row-column { min-width:0; display:flex; flex-direction:column; gap:16px; }
.site-row.row-background-solid { background:var(--row-color); }
.site-row.row-background-gradient { background:linear-gradient(125deg,var(--row-color),var(--row-color2)); }
.site-row.row-align-center { text-align:center; }.site-row.row-align-right { text-align:right; }
.site-row.row-padding-compact { padding:12px; }.site-row.row-padding-large { padding:48px; }
.site-row.row-border-thin { border:1px solid var(--row-accent); }.site-row.row-border-boxed { border:2px solid var(--row-accent); box-shadow:5px 5px 0 color-mix(in srgb,var(--row-accent) 20%,transparent); }
.site-row .site-row-title { margin:0 0 22px; color:var(--row-accent); font-size:1.4em; }
.row-titleStyle-banner>.site-row-title { padding:12px; background:var(--row-accent); color:#06100d; }
.row-titleStyle-eyebrow>.site-row-title { font-size:.8em; letter-spacing:.2em; text-transform:uppercase; }
.row-titleStyle-underline>.site-row-title { padding-bottom:10px; border-bottom:2px solid var(--row-accent); }
.site-component { min-width:0; overflow-wrap:anywhere; font-size:1em; }
.site-component :is(h2,h3,p,figure,blockquote,ul) { margin:0; }
.site-component p { white-space:pre-wrap; }.site-component :is(h2,h3) { color:var(--row-accent); margin-bottom:10px; }
.site-component h2 { font-size:2.4em; line-height:1.15; }.site-component h3 { font-size:1.35em; }
.site-component.block-align-left { text-align:left; }.site-component.block-align-center { text-align:center; }.site-component.block-align-right { text-align:right; }
.site-component.block-size-small { font-size:.8em; }.site-component.block-size-large { font-size:1.25em; }
.site-component.block-emphasis-muted { opacity:.7; }.site-component.block-emphasis-accent { color:var(--row-accent); }
.site-component.block-style-outline { padding:18px; border:1px solid var(--row-accent); }
.site-component.block-style-filled { padding:18px; background:color-mix(in srgb,var(--row-accent) 12%,#07100e); }
.component-hero { padding-block:24px; }.component-card,.component-link-card { padding:20px; background:#07100e66; border-radius:5px; }
.component-callout { border-left:4px solid var(--row-accent); padding:18px; background:#07100e66; }
.component-quote { border-left:2px solid var(--row-accent); padding-left:18px; font-style:italic; }.component-quote cite { display:block; margin-top:12px; font-size:.85em; }
.site-component .site-component-link { cursor:pointer; min-height:34px; max-width:100%; white-space:normal; overflow-wrap:anywhere; color:var(--row-accent); background:transparent; border:0; font:inherit; text-decoration:underline; padding:5px 0; }
.component-button .site-component-link { padding:12px 22px; border:1px solid var(--row-accent); text-decoration:none; }
.component-button.block-style-filled .site-component-link { background:var(--row-accent); color:#06100d; }
.component-navigation nav { display:flex; gap:18px; flex-wrap:wrap; }.component-navigation.block-align-center nav { justify-content:center; }.component-navigation.block-align-right nav { justify-content:flex-end; }
.site-stat-value { display:block; font-size:2.6em; color:var(--row-accent); line-height:1.2; }.site-stat-label { display:block; letter-spacing:.12em; text-transform:uppercase; }
.component-spacer { height:32px; }.component-spacer.block-size-small { height:12px; }.component-spacer.block-size-large { height:72px; }
.site-component hr { border:0; border-top:1px solid var(--row-accent); }
.site-graphic { height:180px; display:flex; align-items:center; justify-content:center; gap:7px; background:radial-gradient(ellipse,color-mix(in srgb,var(--row-accent) 15%,transparent),transparent); overflow:hidden; color:var(--row-accent); }
.site-vector-graphic {display:block;width:100%;height:100%;max-width:600px;flex-shrink:1;}
.component-graphic.block-size-small .site-graphic {height:110px;}
.component-graphic.block-size-large .site-graphic {height:260px;}
.component-graphic.block-align-left .site-graphic {justify-content:flex-start;}
.component-graphic.block-align-right .site-graphic {justify-content:flex-end;}
.site-component figcaption { font-size:.8em; padding-top:8px; }
/* The composition canvas shows column proportions; inspectors stay collapsed. */
.site-builder { container-type:inline-size; margin-top:24px; }
.builder-section { border:1px solid #476154; border-radius:6px; background:#08130f; padding:16px; margin:18px 0; }
.builder-section-bar,.builder-block-tools,.builder-add { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.builder-section-bar strong { margin-right:auto; }.builder-section-bar button,.builder-block-tools button { padding:5px 10px; }
.builder-columns { gap:12px; align-items:start; }
.builder-column { min-width:0; padding:10px; border:1px dashed #466052; background:#050b08; }
.builder-column-label { font-size:.75em; color:#94b2a1; margin-bottom:12px; }
.builder-empty { padding:18px 6px; text-align:center; color:#80998b; }
.builder-block { border:1px solid #344b3f; border-radius:4px; padding:10px; margin-bottom:12px; min-width:0; }
.builder-block-summary { overflow-wrap:anywhere; white-space:pre-wrap; padding:8px; background:#14251d; color:#d5e7dc; }
.builder-block summary,.builder-section summary { cursor:pointer; padding:8px 0; color:#a8d9bc; }
.builder-inspector { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:12px; padding:12px 0; }
.builder-block :is(input,select,textarea),.builder-inspector :is(input,select,textarea) { min-width:0; max-width:100%; width:100%; box-sizing:border-box; }
.builder-inspector input[type=color] { height:36px; }
.builder-move { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-top:8px; }
.builder-move label { flex:1; min-width:100px; }
.site-builder button:focus-visible,.site-builder summary:focus-visible { outline:2px solid #ffc368; outline-offset:3px; }
@container (max-width:650px) {
    .site-row>.site-row-columns,.builder-columns { grid-template-columns:minmax(0,1fr); }
    .site-row.row-padding-large { padding:24px; }
}

.web-layout-modular .web-page-title { margin:24px 0; font-size:.72rem; font-weight:normal; color:var(--skin-8baa9e,#8baa9e); }

/* Named thumbnails replace the graphic dropdown; selection stays in context. */
.site-graphic-picker {margin:12px 0;min-width:0;}
.site-graphic-picker > p {font-size:12px;color:var(--green-bright,#d9ffeb);}
.site-graphic-gallery {max-height:480px;overflow:auto;padding:4px;overscroll-behavior:contain;}
.site-graphic-gallery fieldset {min-width:0;margin:0 0 16px;padding:10px;border:1px solid #476154;}
.site-graphic-gallery legend {font-size:12px;color:var(--amber,#ffa449);}
.site-graphic-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(118px,100%),1fr));gap:8px;}
.site-graphic-picker .site-graphic-choice {display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid #476154;background:#050b08;color:#d9ffeb;font:inherit;font-size:12px;cursor:pointer;white-space:normal;}
.site-graphic-thumbnail {display:flex;align-items:center;justify-content:center;width:100%;height:76px;pointer-events:none;}
.site-graphic-thumbnail .as0-emblem {width:48px;height:48px;}
.site-graphic-choice[aria-pressed="true"] {outline:2px solid var(--green,#62ffad);outline-offset:-2px;background:#173126;}
.site-graphic-choice:hover {border-color:var(--green,#62ffad);}
.site-graphic-choice:focus-visible {outline:2px solid var(--amber,#ffa449);outline-offset:1px;}