/* Physical corrections and richer configuration presentation layered on the core atlas. */
.half{height:calc(var(--u)*5.35)}
.half-board{clip-path:polygon(2% 20%,29% 1%,71% 7%,96% 16%,100% 67%,91% 82%,80% 94%,69% 100%,49% 91%,24% 100%,0 67%)}

/* Canonical Ferris Sweep physical geometry in normalized key units. The Halcyon
 * matrix numbering is reversed across each alpha row compared with the upstream
 * Sweep matrix, so c4 is the outermost key and c0 the innermost. Keeping these
 * positions in one half and mirroring the parent preserves exact symmetry. */
.slot-c4-r0{left:calc(var(--u)*0);top:calc(var(--u)*.93)}
.slot-c4-r1{left:calc(var(--u)*0);top:calc(var(--u)*1.93)}
.slot-c4-r2{left:calc(var(--u)*0);top:calc(var(--u)*2.93)}
.slot-c3-r0{left:calc(var(--u)*1);top:calc(var(--u)*.31)}
.slot-c3-r1{left:calc(var(--u)*1);top:calc(var(--u)*1.31)}
.slot-c3-r2{left:calc(var(--u)*1);top:calc(var(--u)*2.31)}
.slot-c2-r0{left:calc(var(--u)*2);top:0}
.slot-c2-r1{left:calc(var(--u)*2);top:calc(var(--u)*1)}
.slot-c2-r2{left:calc(var(--u)*2);top:calc(var(--u)*2)}
.slot-c1-r0{left:calc(var(--u)*3);top:calc(var(--u)*.28)}
.slot-c1-r1{left:calc(var(--u)*3);top:calc(var(--u)*1.28)}
.slot-c1-r2{left:calc(var(--u)*3);top:calc(var(--u)*2.28)}
.slot-c0-r0{left:calc(var(--u)*4);top:calc(var(--u)*.42)}
.slot-c0-r1{left:calc(var(--u)*4);top:calc(var(--u)*1.42)}
.slot-c0-r2{left:calc(var(--u)*4);top:calc(var(--u)*2.42)}

/* Ferris thumb centers are below the alpha matrix at x=3.5/y=3.75 and
 * x=4.5/y=4.0. The Halcyon Vial definition adds the physical 15°/30° angles.
 * With 0.9u keycaps these polygons have positive clearance from the alpha row
 * and from each other; no keycap overlap is permitted. */
.slot-thumb-outer{left:calc(var(--u)*3.5);top:calc(var(--u)*3.75);transform:rotate(15deg)}
.slot-thumb-inner{left:calc(var(--u)*4.5);top:calc(var(--u)*4);transform:rotate(30deg)}
.right .slot-thumb-outer{transform:rotate(15deg)}
.right .slot-thumb-inner{transform:rotate(30deg)}

/* Information architecture and navigation. */
.skip-link{position:fixed;left:12px;top:12px;z-index:1000;padding:9px 12px;border:1px solid var(--accent);border-radius:9px;background:var(--panel3);color:var(--text);font-weight:760;transform:translateY(-180%);transition:transform .12s ease}
.skip-link:focus{transform:translateY(0)}
.section-kicker,.control-label{font-size:.64rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:760}
.control-deck{margin-bottom:14px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(13,17,22,.78)}
.control-deck-head,.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px}
.control-deck-head h2,.section-heading h2{margin:3px 0 0;font-size:1rem;letter-spacing:-.015em}
.control-deck-head p,.section-heading p{margin:0;max-width:58ch;color:var(--muted);font-size:.76rem;line-height:1.45}
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:14px;align-items:start;margin:0}
.layer-nav{min-width:0}
.family{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.layer-family{min-width:0;padding:9px;border:1px solid var(--line);border-radius:12px;background:#101419}
.layer-family.has-active{border-color:#40536a;background:#111923}
.layer-family-name{display:block;margin-bottom:7px;color:var(--muted);font-size:.62rem;font-weight:760;letter-spacing:.1em;text-transform:uppercase}
.layer-family .layer-button{min-height:36px;margin:2px 3px 2px 0;padding:7px 9px;font-size:.76rem}
.layer-button:focus-visible,.switch:focus-within,.rgb-connect:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toolbar-actions{display:grid;gap:8px}
.switches,.device-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:7px;padding:9px;border:1px solid var(--line);border-radius:12px;background:#101419}
.switches .control-label,.device-actions .control-label{width:100%}
.switch{min-height:36px;background:#151a20}
.switch input:disabled{cursor:progress}
.switch:has(input:disabled){opacity:.58}
.rgb-connect{min-height:36px;justify-content:center;cursor:pointer;color:var(--text)}
.rgb-connect[data-state="connected"]{border-color:var(--rgb-connected,#7ce5b3);box-shadow:0 0 0 1px rgba(124,229,179,.13) inset}
.rgb-connect[data-state="error"]{border-color:var(--danger)}
.rgb-connect[data-state="unsupported"]{opacity:.62;cursor:not-allowed}

/* The stage is the primary visualization; supporting material is progressively disclosed. */
.stage-head{align-items:flex-end;margin-bottom:4px}
.geometry-note,.legend-disclosure{margin-top:10px;border-top:1px solid var(--line)}
.geometry-note summary,.legend-disclosure summary{display:inline-flex;align-items:center;min-height:34px;padding:8px 0;color:var(--muted);font-size:.72rem;font-weight:720;cursor:pointer}
.geometry-note p{margin:0 0 8px;color:var(--muted);font-size:.7rem;line-height:1.5;max-width:88ch}
.hardware-block{margin-top:12px;padding-top:13px;border-top:1px solid var(--line)}
.hardware-strip{margin-top:0}
.legend{margin:0 0 6px}
.status{min-height:1.2em;margin-top:8px}
.detail{grid-template-columns:minmax(0,1.25fr) minmax(240px,.55fr);scroll-margin-top:16px}
.selection-card{border-color:#3b4a5b;background:linear-gradient(180deg,rgba(24,31,39,.96),rgba(17,21,26,.94))}
.card .section-kicker{margin-bottom:4px}
.card h2{margin-bottom:9px}

/* Inherited keys remain intentionally subordinate but are still readable and selectable. */
.key.transparent{opacity:.46;border-style:dashed}
.key.transparent:hover,.key.transparent:focus-visible{opacity:.82}
.key.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(157,196,255,.18),0 calc(var(--u)*.05) calc(var(--u)*.11) rgba(0,0,0,.28);z-index:8}
.encoder-map .key.is-selected{box-shadow:0 0 0 2px rgba(157,196,255,.18)}

.key-face{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.key.semantic-tap-dance{border-style:double}
.key.semantic-tap-dance .secondary{line-height:1.15}
.combo-badge{position:absolute;top:-.3em;right:-.35em;display:grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .26em;border-radius:999px;background:#111923;border:1px solid var(--accent);color:var(--accent);font:800 .52rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* Saved RGB profiles are whole-matrix mode/HSV/brightness/speed states. The
 * atlas renders the exact stored HSV/brightness as a key-face glow; it does
 * not pretend to spatially reproduce every QMK RGB Matrix animation mode. */
.key.rgb-lit:not(.disabled){
  border-color:rgb(var(--rgb) / calc(.45 + var(--rgb-strength)*.45));
  background:
    linear-gradient(180deg,
      rgb(var(--rgb) / calc(.14 + var(--rgb-strength)*.34)),
      rgb(var(--rgb) / calc(.06 + var(--rgb-strength)*.2))),
    linear-gradient(180deg,var(--key2),var(--key));
  box-shadow:
    0 calc(var(--u)*.05) calc(var(--u)*.11) rgba(0,0,0,.28),
    0 0 calc(5px + 15px*var(--rgb-strength)) rgb(var(--rgb) / calc(.08 + var(--rgb-strength)*.3)),
    inset 0 0 10px rgb(var(--rgb) / calc(.05 + var(--rgb-strength)*.15));
}
.key.transparent.rgb-lit{opacity:calc(.44 + var(--rgb-strength)*.34)}

.behavior-panel{margin-top:14px;border:1px solid var(--line);border-radius:18px;background:rgba(17,21,26,.9);overflow:hidden}
.behavior-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:16px 17px;border-bottom:1px solid var(--line)}
.behavior-head h2{margin:3px 0 0;font-size:1rem;letter-spacing:-.02em}
.behavior-head p{margin:4px 0 0;color:var(--muted);font-size:.78rem;line-height:1.45;max-width:72ch}
.behavior-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(260px,.85fr)}
.behavior-card{min-width:0;padding:15px 16px;border-right:1px solid var(--line)}
.behavior-card:last-child{border-right:0}
.behavior-card h3{margin:0 0 10px;font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.behavior-empty{color:var(--muted);font-size:.78rem;line-height:1.45}
.behavior-list{display:grid;gap:8px}
.behavior-item{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#101419;font-size:.76rem;line-height:1.38}
.behavior-item.is-current{border-color:#4b6078;background:#121a23}
.behavior-title{display:flex;align-items:center;gap:7px;font-weight:760;color:var(--text)}
.behavior-meta{margin-top:4px;color:var(--muted)}
.behavior-sequence{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--accent)}
.behavior-arrow{color:var(--muted);padding:0 .2em}
.behavior-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.62rem;margin-left:auto;white-space:nowrap}
.other-combos{margin-top:10px;border-top:1px solid var(--line)}
.other-combos summary{min-height:34px;padding:8px 0;color:var(--muted);font-size:.72rem;font-weight:720;cursor:pointer}
.other-combos .behavior-list{padding-top:2px}
.rgb-swatch{display:inline-block;width:.72rem;height:.72rem;border-radius:50%;background:rgb(var(--swatch-rgb,120 130 140));box-shadow:0 0 8px rgb(var(--swatch-rgb,120 130 140)/.45);vertical-align:-.08rem;margin-right:.35rem}
.rgb-profile-line{display:flex;gap:10px;align-items:flex-start}
.rgb-profile-line+.rgb-profile-line{margin-top:9px}
.rgb-profile-copy strong{display:block;font-size:.78rem}.rgb-profile-copy span{display:block;color:var(--muted);font-size:.68rem;margin-top:2px;line-height:1.35}
.rgb-note{margin-top:10px;color:var(--muted);font-size:.68rem;line-height:1.4}

@media(max-width:1100px){
  .family{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .toolbar{grid-template-columns:1fr}
  .toolbar-actions{grid-template-columns:1fr 1fr}
  .behavior-grid{grid-template-columns:1fr 1fr}
  .behavior-card:nth-child(2){border-right:0}
  .behavior-card:last-child{grid-column:1/-1;border-top:1px solid var(--line)}
}
@media(max-width:700px){
  .half{height:calc(var(--u)*5.35)}
  .control-deck{padding:11px;border-radius:14px}
  .control-deck-head,.section-heading{display:block}
  .control-deck-head p,.section-heading p{margin-top:5px}
  .family{grid-template-columns:1fr}
  .toolbar-actions{grid-template-columns:1fr}
  .layer-family{padding:8px}
  .layer-family .layer-button{min-height:40px}
  .switch,.rgb-connect{min-height:40px}
  .detail{grid-template-columns:1fr}
  .behavior-head{display:block}
  .behavior-grid{grid-template-columns:1fr}
  .behavior-card,.behavior-card:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}
  .behavior-card:last-child{grid-column:auto;border-top:0;border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .skip-link{transition:none}
}