/* Chapter 1 cube explorations (v13): faces, shape versus connections, volume. Prefix cube-. Apache-2.0.
   Gap styles follow the paper's Figure 1(b): the line style (and colour) names the gap that changes along an edge. */
.cube-lab .ex-object svg.cube-picture{max-width:440px}
.cube-lab details svg.cube-picture{display:block;width:100%;height:auto;max-width:420px;margin:4px auto}
.cube-rule{display:flex;flex-direction:column;gap:6px}
.cube-rule p{margin:0}
.cube-rule .cube-rule-note{font-size:14.5px;color:var(--muted)}
.cube-key{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14.5px;color:var(--muted);margin:6px 0 0}
.cube-key span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cube-lab .ex-legend{margin:6px 0 0}
/* Keyboard focus on a segmented switch: .seg-options clips with overflow:hidden (style.css), so an outside ring
   shows as a sliver. Draw it inside the button instead: focus ring at the edge, a white band inside it (visible on
   the white and on the wine pressed state). */
.cube-lab .seg-options .btn:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;box-shadow:inset 0 0 0 6px #fff}
/* table rows are buttons: full 44 px tap targets */
.cube-lab .cube-enum-table td .btn,.cube-lab .cube-order-table td .btn{min-height:44px}
.cube-row-note{display:block;font-size:12.5px;color:var(--wine);font-weight:400;line-height:1.3}
.cube-row-note:focus{outline:none}
td#faces-row-result:focus,td#volume-row-result:focus{outline:3px solid var(--focus);outline-offset:-3px}

/* edges, vertices, labels */
.cube-ln{fill:none;stroke-linecap:round}
.cube-g1{stroke:var(--blue)}
.cube-g2{stroke:var(--ochre);stroke-dasharray:9 6}
.cube-g3{stroke:var(--teal);stroke-dasharray:2 5 10 5}
.cube-g4{stroke:var(--slate);stroke-dasharray:2 4}
.cube-ln.is-kept{stroke-width:5}
.cube-ln.is-other{stroke-width:2;opacity:.55}
.cube-ln.is-faint{stroke-width:1.4;opacity:.4}
.cube-key .cube-ln{stroke-width:3;opacity:1}
.cube-grid{stroke:#e3e6e8;stroke-width:1}
svg .cube-tick{font-size:13px;fill:var(--muted)}
svg .cube-axis-name{font-style:italic;font-size:15px}
.cube-vtx.is-kept{fill:var(--wine)}
.cube-vtx.is-other{fill:#fff;stroke:#7f8a92;stroke-width:1.8}
/* d = 4 with a shaded 2-face: a vertex off the face keeps a faded hollow dot (the marker carries "not kept"); its
   label stays readable (≥ 4.5:1 on white), only lighter and thinner than the kept labels */
.cube-vtx.is-faded{opacity:.5}
svg .cube-vlabel.is-faded{fill:#6b7280;font-weight:400}
.cube-ring{fill:none;stroke:var(--wine);stroke-width:2.5}
.cube-face-fill{fill:var(--wine);fill-opacity:.1;stroke:none}
svg .cube-vlabel{font-size:14.5px;fill:var(--ink);font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
svg .cube-vlabel.is-muted{fill:var(--muted);font-weight:400}
svg .cube-vsub{font-size:13.5px;font-weight:400;font-family:var(--mono)}
.cube-badge circle{fill:#fff;stroke:#7f8a92;stroke-width:1.5}
svg .cube-badge text{font-size:13px;font-weight:700;fill:var(--ink)}

/* faces: controls, result table, enumeration */
.cube-lab .ex-controls .seg-options .btn{font-size:15px;padding:8px 10px}
.cube-d-seg .seg-options{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}
.cube-gap-seg .seg-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}
.cube-gap-seg .seg-options .btn{white-space:nowrap}
.cube-sig{font-family:var(--mono);letter-spacing:.06em;white-space:pre}
.cube-result p{margin:6px 0}
.cube-result-head{border-radius:4px}
.cube-result-head:focus{outline:3px solid var(--focus);outline-offset:3px}
.cube-tight-table th small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.cube-tight-table thead th.is-fixed{color:var(--wine)}
.cube-tight-table td.is-free{background:var(--panel)}
.cube-tight-table th[scope=row] small{display:block;font-family:var(--mono);color:var(--muted);font-size:13.5px}
.cube-tight-table th,.cube-tight-table td{padding:5px 4px}
.cube-tight-table .cube-tight .katex{font-size:1.08em}
/* d = 4 in the narrow result column: let a long equality wrap after "=" rather than be cut at the panel edge */
.cube-tight-table .cube-tight{white-space:normal}
.cube-tight{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;white-space:nowrap}
.cube-tight b{font-size:15px}
.cube-tight.is-b b{color:var(--wine)}
.cube-tight.is-a b{color:var(--teal)}
.cube-result .ex-table{background:#fff}
.cube-tight-list{display:none;list-style:none;margin:6px 0;padding:0;flex-direction:column;gap:6px}
.cube-tight-list li{background:#fff;border:1px solid var(--soft-line);border-radius:6px;padding:6px 8px;font-size:15px}
.cube-tight-list li>small{font-family:var(--mono);color:var(--muted)}
.cube-tight-item{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:3px;padding-left:8px;border-left:3px solid var(--soft-line)}
.cube-tight-item.is-fixed{border-left-color:var(--wine)}
.cube-tight-item>small{color:var(--muted);font-size:12.5px;white-space:nowrap}
.cube-tight-list .cube-tight{flex-direction:row;align-items:baseline;gap:6px}
.cube-chip{display:inline-block;border:1px solid var(--soft-line);border-radius:5px;padding:0 6px;margin:2px 4px 2px 0;font-size:14.5px;background:#fff;white-space:nowrap}
.cube-chip small{font-family:var(--mono);color:var(--muted);font-size:13px}
.ex-table tr.cube-group th{background:var(--panel);font-size:15px;font-weight:700;padding-top:10px}
.ex-table tr.cube-group th small{font-weight:400;color:var(--muted)}
.ex-table tr.cube-block-start td{border-top:2px solid var(--line)}
.cube-order-table thead th small{display:block;font-weight:400}
.cube-enum-table td .btn{min-width:84px}
.cube-kept-list{line-height:1.7}
.ex-table tr.cube-subtotal th,.ex-table tr.cube-subtotal td{color:var(--muted);font-weight:400;font-size:14.5px}

/* shape versus connections */
.cube-wide-seg .seg-options{display:flex!important;flex-wrap:wrap}
.cube-pair-seg .seg-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
.cube-wide-seg .seg-options .btn{flex:1 1 210px}
.cube-ah-e{fill:var(--wine)}
.cube-ah-f{fill:var(--teal)}
.cube-e{stroke:var(--wine);stroke-width:5;stroke-linecap:round;fill:none}
.cube-f{stroke:var(--teal);stroke-width:5;stroke-dasharray:10 6;fill:none}
.cube-e.is-thin,.cube-f.is-thin{stroke-width:3}
.cube-e.is-inset,.cube-f.is-inset{stroke-width:3.5}
.cube-plain-edge{stroke:#9aa3aa;stroke-width:2}
svg .cube-edge-name{font-size:18px;font-weight:700;font-style:italic;paint-order:stroke;stroke:#fff;stroke-width:4px}
svg .cube-e-name{fill:var(--wine)}
svg .cube-f-name{fill:var(--teal)}
.cube-inset-box{fill:#fff;stroke:var(--line);stroke-width:1}
svg .cube-inset-title{font-size:12.5px;fill:var(--muted)}
svg .cube-inset-label{font-size:13px;fill:var(--ink);font-family:var(--mono)}
.cube-inset-fill{fill:var(--wine-tint);stroke:#c4a9b0;stroke-width:1.2}
.cube-map-before{fill:#7f8a92;fill-opacity:.08;stroke:#7f8a92;stroke-width:2;stroke-dasharray:5 4}
.cube-map-after{fill:var(--wine);fill-opacity:.08;stroke:var(--wine);stroke-width:2}
svg .cube-panel-title{font-size:15px;font-weight:700;fill:var(--muted)}
.cube-panel-rule{stroke:var(--soft-line);stroke-width:1}
svg .cube-map-label{font-size:15px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
svg .cube-edge-name.is-small{font-size:15px}
.cube-origin{fill:var(--ink)}
.cube-residual{stroke:var(--ochre);stroke-width:3;stroke-dasharray:2 5;stroke-linecap:round;fill:none}
svg .cube-residual-name{fill:var(--ochre);font-size:14px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:4px}
.cube-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.cube-lab .ex-entry input[type=text]{width:13em}
.cube-lab .ex-entry .ex-note{margin:0;font-size:14px}
.cube-lambda-controls{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-start}
.cube-lambda-controls .ex-chips{padding-top:26px}
.cube-lab .ex-object svg.cube-map-picture,.cube-lab .ex-object svg.cube-lambda-picture{max-width:340px}
.cube-order-table td .btn{white-space:nowrap}
.cube-lambda-table tr.is-on td,.cube-lambda-table tr.is-on th{background:var(--ochre-tint)}

/* volume */
.cube-gap-row .seg-label{display:block;margin-bottom:6px}
.cube-gap-buttons{display:flex;flex-wrap:wrap;gap:6px}
.cube-gap{min-width:76px;flex-direction:column;gap:0;line-height:1.15}
.cube-gap small{font-size:12.5px}
.cube-gap[aria-pressed=false] small{color:var(--muted)}
.cube-gap[aria-disabled=true]{cursor:default}
.cube-gap.is-used{opacity:.6}
.cube-gap-status{margin:6px 0 0;font-size:15px;color:var(--ink)}
.cube-mat-table{width:auto;min-width:min(100%,460px)}
.cube-mat-table th small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.cube-mat-table td.is-diag{background:var(--teal-tint);font-weight:700}
.cube-mat-table td.is-zero{color:var(--muted)}
.cube-clear{margin-left:auto}
.cube-clear[aria-disabled=true]{opacity:.55;cursor:default}
.cube-ruler{display:block;width:100%;height:auto;max-width:420px;margin:2px 0 6px}
.cube-cell{fill:#fff;stroke:#b9c0c6;stroke-width:1.2}
svg .cube-cell-value{font-size:19px;font-weight:700;fill:var(--ink)}
.cube-cutbar{stroke:var(--wine);stroke-width:4;stroke-linecap:round}
.cube-endbar{stroke:var(--ink);stroke-width:2}
.cube-split{fill:#efe6e8;stroke:var(--wine-line);stroke-width:1}
.cube-split.is-new{fill:var(--teal-tint);stroke:var(--teal);stroke-width:1.5}
.cube-split-cut{stroke:var(--wine);stroke-width:3}
svg .cube-split-label{font-size:14.5px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-opacity:.7}
.cube-steps{margin:4px 0;padding-left:22px;font-size:15.5px}
.cube-steps li{margin:2px 0}
.cube-volume-line{font-size:16.5px}
.cube-chain-line{line-height:1.8}
.cube-tri{fill:transparent;stroke:none}
.cube-tri.is-on{fill:var(--teal);fill-opacity:.18}
.cube-diagonal{stroke:var(--wine);stroke-width:1.8;stroke-dasharray:5 4;fill:none}
.cube-chain{stroke:var(--wine);stroke-width:5;stroke-linecap:round;opacity:.85;fill:none}
svg .cube-tri-label{font-size:13.5px;fill:var(--muted);paint-order:stroke;stroke:#fff;stroke-width:4px}
.cube-leader{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
svg .cube-chain-name{font-size:15px;font-weight:700;fill:var(--wine);paint-order:stroke;stroke:#fff;stroke-width:4px}
.cube-tet{fill:var(--teal);fill-opacity:.12;stroke:var(--teal);stroke-opacity:.3;stroke-width:1}
.cube-node{fill:#fff;stroke:#b9c0c6;stroke-width:1.2}
.cube-node.is-on{fill:var(--wine);stroke:var(--wine)}
svg .cube-node-text{font-size:14px;font-family:var(--mono);fill:var(--ink)}
svg .cube-node-text.is-on{fill:#fff;font-weight:700}

@media(max-width:760px){
 /* phone: picture, then the switches, then the result, then legend and rule, so a tap's visual consequence
    (highlighted vertices, arrows, chain) stays in view next to the switch */
 .cube-lab .cube-main{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 .cube-lab .cube-main>.ex-object,.cube-lab .cube-main>.ex-controls{display:contents}
 .cube-main>.ex-object>svg{order:1}
 .cube-main .cube-ctl{order:2}
 .cube-main .cube-out{order:3}
 .cube-main .cube-notes{order:4}
 .cube-main .cube-legend{order:5}   /* the rule (about the controls above) before the picture's legend */
 .cube-result-first>.ex-object{order:2}
 .cube-forms{grid-template-columns:minmax(0,1fr)}
 .cube-lambda-controls .ex-chips{padding-top:0}
}
@media(max-width:640px){
 .cube-tight-wide{display:none}
 .cube-tight-list{display:flex}
 /* SVG labels: the drawings scale to about 0.8 of their user units at 390 px, so these sizes render at 14 px or
    more (Latin Modern has a small x-height); the second line of a vertex label is spaced in em (vlabel) */
 svg .cube-vlabel{font-size:17.5px}
 svg .cube-vsub{font-size:17px}
 svg .cube-tick{font-size:17px}
 svg .cube-tick.cube-axis-name{font-size:18.5px}
 svg .cube-badge text{font-size:16.5px}
 svg .cube-tri-label,svg .cube-chain-name,svg .cube-node-text{font-size:17px}
 svg .cube-residual-name{font-size:15.5px}
 svg .cube-edge-name.is-small{font-size:16.5px}
 .cube-lab .ex-object svg.cube-picture{max-width:100%}
 .cube-lab .ex-controls .seg-options .btn{font-size:14.5px;padding:8px 6px}
 .cube-gap-seg .seg-options .btn{white-space:normal}
 .cube-tight b{font-size:14px}
 .cube-tight-table th,.cube-tight-table td{padding:5px 4px}
 .cube-chip{font-size:14px}
 svg .cube-split-label{font-size:16px}
 svg .cube-inset-title{font-size:17px}
 svg .cube-inset-label{font-size:17px}
 svg .cube-map-label{font-size:16.5px}
 svg .cube-panel-title{font-size:16.5px}
 svg .cube-cell-value{font-size:21px}
 .cube-order-table td .btn{font-size:14.5px;padding:4px 8px}
 .cube-lab .ex-entry input[type=text]{width:100%}
 .cube-lab .ex-entry .ex-entry-row{flex-wrap:nowrap}
 .cube-lab .ex-entry label{flex:1;min-width:0}
}
@media(forced-colors:active){.cube-vtx.is-kept,.cube-node.is-on{forced-color-adjust:none}}