/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
.cb{--status-pending-bg:#fef08a;--status-pending-fg:#854d0e;display:flex;flex-direction:column;gap:var(--space-m);width:100%}@media (prefers-color-scheme:dark){.cb{--status-pending-bg:#422006;--status-pending-fg:#fef08a}}.cb__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:54ch;margin-block-end:var(--space-s);text-align:center;align-self:center}.cb__view{width:100%;display:flex;flex-direction:column;gap:var(--space-m)}.cb__view[hidden]{display:none!important}.cb__view--intro{align-items:center;justify-content:center;text-align:center;min-block-size:20rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-l)}.cb__instructions{display:flex;flex-direction:column;gap:var(--space-xs);align-items:center;text-align:center}@media (min-width:36rem){.cb__instructions{flex-direction:row;justify-content:space-between;text-align:start}}.cb__instructions p{font-size:var(--step-0);font-weight:600;color:var(--ink);margin:0}.cb__stats{display:flex;gap:var(--space-xs)}.cb__stat-badge{font-size:var(--step--1);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:var(--space-3xs) var(--space-xs);color:var(--muted)}.cb__stat-badge strong{color:var(--ink);font-family:var(--font-display)}.cb__layout-wrapper{display:flex;flex-direction:column;gap:var(--space-m);width:100%}.cb__mockup-container{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-l);min-height:24rem;overflow:hidden;display:flex}.cb__mask{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--paper);z-index:10;pointer-events:none}.cb__mockup{display:flex;width:100%;height:100%;user-select:none}.cb__sidebar{width:9.5rem;background:var(--surface);border-right:1.5px solid var(--line);padding:var(--space-m) var(--space-s);display:none;flex-direction:column;gap:var(--space-m)}@media (min-width:48rem){.cb__sidebar{display:flex}}.cb__logo{font-family:var(--font-display);font-weight:700;font-size:var(--step-0);color:var(--accent-strong)}.cb__nav{display:flex;flex-direction:column;gap:var(--space-3xs)}.cb__nav-item{font-size:var(--step--2);font-weight:600;padding:var(--space-3xs) var(--space-2xs);border-radius:var(--radius-s);color:var(--muted)}.cb__nav-item--active{background:var(--accent-soft);color:var(--accent-strong)}.cb__body{flex:1;display:flex;flex-direction:column;padding:var(--space-m);gap:var(--space-m);background:var(--paper)}.cb__header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-block-end:var(--space-xs)}.cb__header-title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--ink)}.cb__user-info{display:flex;align-items:center;gap:var(--space-s)}.cb__bell{color:var(--muted);display:flex;align-items:center}.cb__avatar{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--line)}.cb__cards{display:grid;grid-template-columns:1fr;gap:var(--space-s)}@media (min-width:36rem){.cb__cards{grid-template-columns:repeat(3,1fr)}}.cb__card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-m);padding:var(--space-s);display:flex;flex-direction:column;gap:var(--space-3xs)}.cb__card-lbl{font-size:var(--step--2);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.cb__card-val{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--ink)}.cb__table-container{border:1.5px solid var(--line);border-radius:var(--radius-m);overflow-x:auto}.cb__table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--step--1)}.cb__table td,.cb__table th{padding:var(--space-xs) var(--space-s);white-space:nowrap}.cb__table th{background:var(--surface);font-weight:600;color:var(--muted);border-bottom:1.5px solid var(--line)}.cb__table td{color:var(--ink);border-bottom:1px solid var(--line);vertical-align:middle}.cb__table tr:last-child td{border-bottom:none}.cb__badge{display:inline-block;padding:.15rem .5rem;border-radius:9999px;font-size:var(--step--2);font-weight:600;text-transform:uppercase;letter-spacing:.02em}.cb__badge--success{background:var(--status-supported-bg);color:var(--status-supported-fg);content:"Online"}.cb__badge-btn{background:0 0;border:none;padding:0;cursor:pointer;display:flex;align-items:center;outline:0;border-radius:9999px}.cb__badge-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.cb__badge--changing{min-width:5.5rem;text-align:center;transition:none}.cb__mockup--state-a .cb__badge--changing{background:var(--status-pending-bg);color:var(--status-pending-fg)}.cb__mockup--state-a .cb__badge--changing::after{content:"Pending"}.cb__mockup--state-b .cb__badge--changing{background:var(--status-supported-bg);color:var(--status-supported-fg)}.cb__mockup--state-b .cb__badge--changing::after{content:"Success"}.cb__controls{display:flex;flex-direction:column;gap:var(--space-3xs);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--space-s)}.cb__checkbox-label{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--step--1);font-weight:600;color:var(--ink);cursor:pointer}.cb__checkbox-label input{margin:0;accent-color:var(--accent);cursor:pointer}.cb__control-help{font-size:var(--step--1);color:var(--muted);line-height:var(--leading-body);margin:0}.cb__view--results{max-width:34rem;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:var(--space-m);text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-l)}.cb__results-title{font-family:var(--font-display);font-size:var(--step-2);font-weight:700;color:var(--ink)}.cb__results-stats{display:flex;gap:var(--space-s);justify-content:center;margin-block:var(--space-xs)}.cb__result-pill{background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:var(--radius-m);padding:var(--space-xs) var(--space-s);font-family:var(--font-display);color:var(--accent-strong);font-size:var(--step-1);font-weight:700;min-width:7rem}.cb__verdict{font-size:var(--step-0);line-height:var(--leading-body);color:var(--muted);text-align:start}.cb__results-actions{display:flex;gap:var(--space-s);justify-content:center;margin-block-start:var(--space-s)}.cb__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.cb__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.cb__alt[open] summary{margin-block-end:var(--space-s)}