:root {
    --cw-brand: #19462b;
    --cw-brand-dark: #12351f;
    --cw-brand-deep: #19462b;
    --cw-accent: #edf4ef;
    --cw-bg: #f5f8fa;
    --cw-surface: #ffffff;
    --cw-soft: #f1f5f7;
    --cw-soft-2: #edf4ef;
    --cw-text: #1d2721;
    --cw-muted: #63727d;
    --cw-border: #d9e2e7;
    --cw-shadow: 0 12px 30px rgba(20, 54, 70, .09);
    --cw-radius: 14px;
    --cw-max: 1320px;
}

html { box-sizing: border-box; background: var(--cw-bg); }
*, *::before, *::after { box-sizing: inherit; }
body.cw-shell-body { margin:0 !important; padding:0 !important; background:var(--cw-bg) !important; color:var(--cw-text) !important; font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size:16px; line-height:1.55; }
body.cw-shell-body a { text-decoration:none; }
body.cw-shell-body img { max-width:100%; }
body.cw-shell-body #wpadminbar { position:fixed; }

.cw-shell { min-height:100vh; display:flex; flex-direction:column; }
.cw-shell-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--cw-border); backdrop-filter:blur(10px); }
.admin-bar .cw-shell-header { top:32px; }
.cw-shell-header__inner { width:min(var(--cw-max), calc(100% - 48px)); min-height:72px; margin:0 auto; display:flex; align-items:center; gap:32px; }
.cw-shell-brand { display:flex; align-items:center; flex:0 0 auto; color:var(--cw-brand-deep); font-size:22px; font-weight:800; letter-spacing:-.03em; }
.cw-shell-brand img { display:block; max-width:220px; max-height:48px; width:auto; }
.cw-shell-nav { margin-left:auto; display:flex; align-items:center; gap:8px; }
.cw-shell-nav a { padding:10px 12px; border-radius:9px; color:#43535e; font-size:14px; font-weight:650; white-space:nowrap; transition:background .15s ease,color .15s ease; }
.cw-shell-nav a:hover, .cw-shell-nav a.is-active { color:var(--cw-brand-dark); background:var(--cw-accent); }
.cw-shell-nav a.cw-shell-nav__button { margin-left:6px; padding:10px 15px; background:var(--cw-brand); color:#fff; }
.cw-shell-nav a.cw-shell-nav__button:hover { background:var(--cw-brand-dark); color:#fff; }
.cw-mobile-nav-toggle { display:none; margin-left:auto; padding:9px 13px; border:1px solid var(--cw-border); border-radius:9px; background:#fff; color:var(--cw-text); font:inherit; font-weight:700; }

.cw-shell-main { width:min(var(--cw-max), calc(100% - 48px)); flex:1; margin:0 auto; padding:42px 0 70px; }
.cw-portal { width:100%; margin:0; color:var(--cw-text); }
.cw-portal h1,.cw-portal h2,.cw-portal h3,.cw-content-article h1,.cw-content-article h2,.cw-content-article h3 { font-family:inherit; color:var(--cw-text); letter-spacing:-.025em; }
.cw-portal p,.cw-content-article p { font-family:inherit; }

/* v0.2 shortcode navigation is intentionally hidden; v0.3 owns the entire shell. */
.cw-portal-nav { display:none !important; }

.cw-hero { max-width:940px; margin:18px auto 42px; text-align:center; padding:36px 20px 10px; }
.cw-eyebrow { margin:0 0 8px !important; color:var(--cw-brand-dark) !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.14em !important; text-transform:uppercase; }
.cw-hero h1,.cw-page-header h1 { margin:0; font-size:clamp(36px,5vw,56px); font-weight:700; line-height:1.08; }
.cw-lead,.cw-page-header > p { color:var(--cw-muted) !important; font-size:18px; }
.cw-hero .cw-lead { max-width:720px; margin:12px auto 24px; }

.cw-portal-search { width:min(760px,100%); margin:24px auto 0; display:flex; align-items:stretch; border:1px solid #c7d5dc; border-radius:12px; background:#fff; box-shadow:0 7px 22px rgba(20,54,70,.07); overflow:hidden; }
.cw-portal-search input { min-width:0; flex:1; height:52px; margin:0 !important; padding:0 18px !important; border:0 !important; outline:0 !important; background:#fff !important; color:var(--cw-text) !important; font:inherit !important; box-shadow:none !important; }
.cw-portal-search button { margin:0; min-width:112px; padding:0 22px; border:0; background:var(--cw-brand); color:#fff; font:inherit; font-weight:750; cursor:pointer; }
.cw-portal-search button:hover { background:var(--cw-brand-dark); }

.cw-card-grid { display:grid; gap:20px; margin:0 0 24px; }
.cw-card-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cw-card-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cw-nav-card,.cw-panel,.cw-topic-card,.cw-article-card,.cw-update-card,.cw-release-card { background:var(--cw-surface); border:1px solid var(--cw-border); border-radius:var(--cw-radius); }
.cw-nav-card { min-height:210px; padding:30px; display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(20,54,70,.03); transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }
.cw-nav-card:hover { transform:translateY(-2px); border-color:#bdd0d9; box-shadow:var(--cw-shadow); }
.cw-nav-card h2 { margin:0 0 10px; font-size:25px; }
.cw-nav-card p { margin:0 0 24px; color:var(--cw-muted); }
.cw-card-link { margin-top:auto; color:var(--cw-brand-dark) !important; font-size:14px; font-weight:800; }

.cw-home-columns { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:20px; margin:20px 0; }
.cw-panel { padding:26px; }
.cw-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.cw-section-heading h2 { margin:0; font-size:22px; }
.cw-section-heading > a { color:var(--cw-brand-dark); font-size:13px; font-weight:800; }
.cw-link-list { list-style:none !important; margin:0 !important; padding:0 !important; }
.cw-link-list li { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 !important; padding:13px 2px !important; border-bottom:1px solid var(--cw-border); }
.cw-link-list li:last-child { border-bottom:0; }
.cw-link-list a { color:var(--cw-text) !important; font-weight:650; }
.cw-link-list a:hover { color:var(--cw-brand) !important; }
.cw-link-list span { flex:0 0 auto; color:var(--cw-muted); font-size:12px; }

.cw-quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:20px 0 0; }
.cw-quick-links a { display:flex; min-height:92px; flex-direction:column; justify-content:center; gap:3px; padding:20px 24px; background:var(--cw-soft); border:1px solid transparent; border-radius:12px; color:var(--cw-text); }
.cw-quick-links a:hover { border-color:var(--cw-border); background:#fff; }
.cw-quick-links span { color:var(--cw-muted); font-size:14px; }

.cw-page-header { max-width:900px; margin:8px auto 36px; text-align:center; padding:25px 20px 5px; }
.cw-page-header h1 { font-size:clamp(34px,4vw,48px); }
.cw-page-header > p { margin:10px auto 20px; max-width:720px; }

.cw-topic-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.cw-topic-card { min-height:116px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:22px; color:var(--cw-text) !important; transition:transform .15s ease,box-shadow .15s ease; }
.cw-topic-card:hover { transform:translateY(-2px); box-shadow:var(--cw-shadow); }
.cw-topic-card strong { font-size:17px; }
.cw-topic-card span { color:var(--cw-muted); font-size:13px; }

.cw-article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cw-article-card { min-height:220px; padding:24px; display:flex; flex-direction:column; }
.cw-article-card h3 { margin:10px 0 8px; font-size:20px; line-height:1.3; }
.cw-article-card h3 a { color:var(--cw-text) !important; }
.cw-article-card p { margin:0 0 18px; color:var(--cw-muted); }
.cw-article-card__meta { display:flex; justify-content:space-between; gap:12px; color:var(--cw-muted); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

.cw-update-list,.cw-release-list { display:grid; gap:16px; max-width:980px; margin:0 auto; }
.cw-update-card,.cw-release-card { padding:28px 30px; }
.cw-update-card h2,.cw-release-card h2 { margin:10px 0 8px; font-size:24px; }
.cw-update-card h2 a,.cw-release-card h2 a { color:var(--cw-text) !important; }
.cw-update-card p,.cw-release-card p { color:var(--cw-muted); }
.cw-update-meta,.cw-release-card > div { display:flex; align-items:center; gap:12px; color:var(--cw-muted); font-size:13px; }
.cw-meta-pill { display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:var(--cw-soft-2); color:var(--cw-brand-dark); font-size:12px; font-weight:750; }
.cw-empty { padding:32px; border:1px dashed #c8d4da; background:var(--cw-soft); border-radius:12px; text-align:center; color:var(--cw-muted); }
.cw-empty strong { color:var(--cw-text); font-size:17px; }
.cw-empty p { margin:5px 0 0; }

/* Individual portal content */
.cw-content-article { width:min(920px,100%); margin:0 auto; }
.cw-breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 25px; color:var(--cw-muted); font-size:13px; }
.cw-breadcrumbs a { color:var(--cw-brand-dark); font-weight:700; }
.cw-content-header { padding:0 0 24px; border-bottom:1px solid var(--cw-border); }
.cw-content-header h1 { max-width:850px; margin:0; font-size:clamp(34px,4.6vw,52px); line-height:1.1; }
.cw-content-body { padding:28px 0 0; font-size:17px; }
.cw-content-body > p,.cw-content-body > ul,.cw-content-body > ol,.cw-content-body > h2,.cw-content-body > h3,.cw-content-body > blockquote { max-width:780px; }
.cw-content-body h2 { margin:34px 0 12px; font-size:28px; }
.cw-content-body h3 { margin:28px 0 10px; font-size:22px; }
.cw-content-body a { color:var(--cw-brand-dark); font-weight:650; }
.cw-content-body ul,.cw-content-body ol { padding-left:24px; }
.cw-content-body li { margin:7px 0; }
.cw-article-intro { margin:0 0 28px; }
.cw-article-intro .cw-lead { max-width:780px; margin:0 0 14px; font-size:20px; }
.cw-article-meta { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0; }
.cw-last-reviewed { margin-top:34px; color:var(--cw-muted); font-size:13px; }
.cw-related { margin-top:40px; padding:26px; background:var(--cw-soft); border:1px solid var(--cw-border); border-radius:12px; }
.cw-related h2 { margin:0 0 10px; font-size:22px; }

.cw-learning-steps { list-style:none !important; counter-reset:cwstep; padding:0 !important; margin:26px 0 !important; }
.cw-learning-steps li { counter-increment:cwstep; margin:0 0 10px !important; }
.cw-learning-steps li a { display:flex; align-items:center; gap:14px; padding:17px 18px; border:1px solid var(--cw-border); border-radius:10px; background:#fff; color:var(--cw-text) !important; }
.cw-learning-steps li a:hover { box-shadow:0 5px 16px rgba(20,54,70,.07); }
.cw-learning-steps li a::before { content:counter(cwstep); flex:0 0 32px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--cw-soft-2); color:var(--cw-brand-dark); font-weight:800; }
.cw-learning-steps li span { margin-left:auto; color:var(--cw-muted); font-size:13px; }

.cw-supademo { width:min(1080px,calc(100vw - 64px)); margin:32px 50% 34px; transform:translateX(-50%); }
.cw-supademo__heading { margin:0 0 12px; color:var(--cw-text); font-size:17px; font-weight:800; }
.cw-supademo__frame { position:relative; width:100%; padding-top:56.25%; overflow:hidden; border:1px solid var(--cw-border); border-radius:14px; background:#111; box-shadow:var(--cw-shadow); }
.cw-supademo__frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.cw-shell-footer { margin-top:auto; border-top:1px solid var(--cw-border); background:#fff; }
.cw-shell-footer__inner { width:min(var(--cw-max),calc(100% - 48px)); min-height:104px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:30px; color:var(--cw-muted); font-size:13px; }
.cw-shell-footer__inner > div:first-child { display:flex; flex-direction:column; gap:2px; }
.cw-shell-footer__inner strong { color:var(--cw-text); font-size:15px; }
.cw-shell-footer__links { display:flex; flex-wrap:wrap; gap:20px; }
.cw-shell-footer__links a { color:var(--cw-muted); font-weight:650; }
.cw-shell-footer__links a:hover { color:var(--cw-brand-dark); }

@media (max-width: 1080px) {
    .cw-shell-header__inner,.cw-shell-main,.cw-shell-footer__inner { width:min(100% - 32px,var(--cw-max)); }
    .cw-topic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .cw-article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cw-shell-nav { gap:2px; }
    .cw-shell-nav a { padding:9px 8px; font-size:13px; }
}

@media (max-width: 860px) {
    .admin-bar .cw-shell-header { top:46px; }
    .cw-mobile-nav-toggle { display:block; }
    .cw-shell-header__inner { min-height:66px; position:relative; }
    .cw-shell-nav { display:none; position:absolute; top:calc(100% + 1px); left:0; right:0; margin:0; padding:12px; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--cw-border); border-radius:0 0 12px 12px; box-shadow:var(--cw-shadow); }
    .cw-shell-nav.is-open { display:flex; }
    .cw-shell-nav a,.cw-shell-nav a.cw-shell-nav__button { margin:0; padding:11px 12px; }
    .cw-card-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cw-home-columns { grid-template-columns:1fr; }
    .cw-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
    .cw-shell-header__inner,.cw-shell-main,.cw-shell-footer__inner { width:calc(100% - 24px); }
    .cw-shell-main { padding-top:24px; padding-bottom:46px; }
    .cw-shell-brand img { max-width:180px; max-height:42px; }
    .cw-card-grid--3,.cw-card-grid--2,.cw-topic-grid,.cw-article-grid,.cw-quick-links { grid-template-columns:1fr; }
    .cw-hero { margin-top:0; padding-left:0; padding-right:0; }
    .cw-hero h1,.cw-page-header h1 { font-size:36px; }
    .cw-portal-search { flex-direction:column; border-radius:10px; }
    .cw-portal-search button { min-height:46px; }
    .cw-nav-card { min-height:0; padding:24px; }
    .cw-panel { padding:20px; }
    .cw-content-header h1 { font-size:36px; }
    .cw-content-body { font-size:16px; }
    .cw-supademo { width:calc(100vw - 24px); }
    .cw-shell-footer__inner { padding:24px 0; flex-direction:column; align-items:flex-start; }
}

/* v0.3.1 polish */
.screen-reader-text {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}
.screen-reader-text:focus {
    position:fixed !important;
    top:8px !important;
    left:8px !important;
    z-index:100000 !important;
    width:auto !important;
    height:auto !important;
    padding:10px 14px !important;
    margin:0 !important;
    clip:auto !important;
    background:#fff !important;
    color:var(--cw-text) !important;
    border:1px solid var(--cw-border) !important;
    border-radius:8px !important;
}
.cw-shell-header__inner { min-height:76px; }
.cw-shell-brand img { max-width:238px; max-height:52px; }
.cw-shell-account { margin-left:6px; display:flex; align-items:center; gap:7px; padding:8px 10px; border-left:1px solid var(--cw-border); color:var(--cw-muted); font-size:13px; font-weight:650; white-space:nowrap; }
.cw-shell-account__icon { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--cw-soft-2); color:var(--cw-brand-dark); font-size:9px; }
.cw-shell-account__label { max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.cw-quick-links a.cw-quick-link { min-height:104px; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; padding:20px 22px; }
.cw-quick-link__icon { flex:0 0 38px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--cw-border); color:var(--cw-brand-dark); font-size:20px; font-weight:800; }
.cw-quick-link__copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.cw-quick-link__copy strong { color:var(--cw-text); font-size:15px; }
.cw-quick-link__copy span { color:var(--cw-muted); font-size:14px; }
.cw-quick-link__arrow { margin-left:auto; color:var(--cw-brand-dark); font-size:20px; font-weight:800; }
.cw-shell-footer__copyright { margin-top:4px; color:var(--cw-muted); font-size:12px; }
@media (max-width:1080px) {
    .cw-shell-account__label { display:none; }
    .cw-shell-account { padding-right:4px; }
}
@media (max-width:860px) {
    .cw-shell-header__inner { min-height:70px; }
    .cw-shell-account { width:100%; margin:4px 0 0; padding:10px 12px; border-left:0; border-top:1px solid var(--cw-border); }
    .cw-shell-account__label { display:inline; max-width:none; }
}
@media (max-width:620px) {
    .cw-shell-brand img { max-width:190px; max-height:44px; }
    .cw-quick-links a.cw-quick-link { min-height:0; }
}
