/* ═══════════════════════════════════════════════════════════════════
   THE PIECES — pieces.css · how a room whose pieces are chosen looks

   Its buttons down the left, each a symbol, its name said while the hand
   is over it; the lines between its pieces and each piece's name; the
   words; the light's marks a piece adds (a first difference's rise, a
   row's name); the equation's back and next and the bracket over a
   step's columns; the coordinates' ground; and the room as wide as the
   window, its handles down the right behind a pull. Loaded after the
   function machine's machine.css (what that machine's rooms share stays
   there: the tags, the arcs, the light's edges, the dropdown the calm room
   has too), by every machine's room whose pieces are chosen
   ═══════════════════════════════════════════════════════════════════ */

/* a room whose pieces are chosen: a button for each, filled while it's shown */
.mc-chips button{padding:7px 17px 8px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--muted);
                 font-family:var(--serif);font-size:15px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.mc-chips button:hover{border-color:var(--faint);color:var(--ink)}
.mc-chips button.on{border-color:var(--machine);background:var(--machine);color:var(--surface)}
.mc-chips .mc-chip-all{margin-left:10px}
/* …and the two that show everything or the pattern alone, a row of their own under the pieces while the buttons are a row (pieces/rail.js) */
.mc-chip-pair{flex-basis:100%;display:flex;justify-content:center;gap:8px}
.mc-chips .mc-chip-pair .mc-chip-all{margin-left:0}
/* …and with them, a little apart, the one that makes the room the whole screen (pieces/rail.js); the whole screen the room's own paper, even in a frame */
.mc-chips .mc-chip-full{margin-left:10px}
html.mc-full,html.mc-full body{background:var(--room)}
/* in another page's frame, nothing of it ever reaches past the frame's sides, a button's name unsaid included, so the frame can't be pushed sideways on a phone */
html.mc-framed.mc-wide .sh-page{overflow-x:clip}
/* stretched over a phone's page, room to breathe at the screen's edges (pieces/rail.js) */
@media (max-width:899.98px){ html.mc-full.mc-framed .sh-page{padding:14px 14px 22px} }
/* …more than six (a room with a piece of its own too), a little smaller where
   they're a row, so all of them fit a phone's frame, 300 across (rail.js) */
@media (max-width:899px){
  .mc-chips.mc-chips-many{gap:6px}
  .mc-chips.mc-chips-many button.mc-ico{width:36px;height:36px;border-radius:11px}
}
/* …and the lines on its stage between the pattern and the rest, and the rest and the graph */
.mc-divider{stroke:var(--line);stroke-width:1}
/* …and each piece's name, small, over it */
.mc-sec{fill:var(--faint);font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;pointer-events:none}

/* the words: what's seen, said; each part of them can be touched, and lit with what it's the same as */
.mc-words{fill:var(--ink);font-family:var(--serif);font-size:19px}
.mc-words-part{cursor:pointer}
.mc-words-on{font-weight:600}
/* (a term of the equation, touched, lights its part everywhere) */
.mc-eq tspan{cursor:pointer}
/* a first difference lit: its step on the graph; a row's name lit, in the table */
.mc-rise{fill:none;stroke:var(--machine);stroke-width:1.8;stroke-dasharray:5 4}
/* (its rise, and the table's first differences, in the 3 more each step's colour; its run stays ink) */
.mc-rise-x{stroke:var(--bag-deep)}
.mc-arc-x{stroke:color-mix(in srgb,var(--bag-deep) 70%,var(--surface))}
/* (and where it takes away, in the red of what's taken away) */
.mc-rise-neg{stroke:var(--balloon-deep)}
.mc-arc-neg{stroke:color-mix(in srgb,var(--balloon-deep) 70%,var(--surface))}
.mc-th-on{fill:var(--ink);font-weight:600}
/* x or y lit at one step, its number on its axis: ink, and edged in the paper's white over the grid */
.mc-tick.mc-tick-lit{fill:var(--ink);font-size:12.5px;font-weight:600;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
/* the equation's back and next */
.mc-eqnav{fill:var(--muted);font-family:var(--serif);font-size:15px;cursor:pointer}
.mc-eqnav:hover{fill:var(--ink)}
.mc-eqnav-off{cursor:default}
.mc-eqnav-off:hover{fill:var(--muted)}
/* how many columns, over them */
.mc-bracket{fill:none;stroke:var(--ink);stroke-width:1.3}
/* the vocabulary: each word in a pill, filled with its term's colour while what it names is lit */
.mc-vocab-pill{fill:var(--surface);stroke:var(--line);stroke-width:1.2;cursor:pointer;transition:stroke .2s}
.mc-vocab-pill:hover{stroke:var(--faint)}
.mc-vocab-word{fill:var(--ink);font-family:var(--serif);font-size:16px;cursor:pointer}
.mc-vocab-on{font-weight:600}
.mc-vocab-fill{pointer-events:none}
.mc-vocab-fill.mc-t-one{fill:color-mix(in srgb,var(--block) 18%,var(--surface))}
.mc-vocab-fill.mc-t-neg{fill:color-mix(in srgb,var(--balloon) 16%,var(--surface))}
.mc-vocab-fill.mc-t-x{fill:color-mix(in srgb,var(--bag) 20%,var(--surface))}
.mc-vocab-fill.mc-t-sq{fill:color-mix(in srgb,var(--field) 20%,var(--surface))}
.mc-vocab-fill.mc-t-cube{fill:color-mix(in srgb,var(--field) 26%,var(--surface))}
.mc-vocab-fill.mc-vocab-ink{fill:color-mix(in srgb,var(--ink) 9%,var(--surface))}
/* …and the word written beside what it names, in each piece, coloured as its term is */
.mc-vocab-name{font-family:var(--serif);font-style:italic;font-size:14.5px;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.mc-vocab-name.mc-vocab-ink{fill:var(--ink)}
.mc-vocab-under{font-size:12.5px}
/* …and y = mx + b, over the equation, each letter over what it is */
.mc-vocab-form{fill:var(--ink);font-family:var(--serif);font-style:italic;font-size:17px;pointer-events:none}
/* …and what the word lit means, said under its row, its own numbers in it */
.mc-vocab-says{fill:var(--ink);font-family:var(--serif);font-size:15.5px;pointer-events:none}
.mc-vocab-says tspan.mc-vocab-says-word{font-weight:600}

/* a room as wide as the window (ROOM.wide; Jae, 2026-10-22: "all the
   handles are like a side bar... like handles on an instrument... i want
   the widest canvas for all the representations"): its name small, in a
   line at the top, with the button that puts the handles away, a symbol
   the way a side panel opens; the pieces down the left, each a symbol, its
   name said while the hand is over it; the handles down the right, narrow,
   the step a throw standing up ("for changing the step... skinnier"), then
   what's shown; the stage everything between. A pull on the stage's edge
   beside the handles puts them away, a drawer's handle ("more natural...
   better for a handle thing"): they slide off to the right, the stage grows
   into their room, and the pull stays at its edge to bring them back.
   Narrow, it's the page it was */
.mc-pull{display:none}
.mc-chips button.mc-ico{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px}
.mc-chips button.mc-ico svg{width:20px;height:20px;display:block}
.mc-chips button.mc-ico::after,.mc-pull::after{content:attr(data-tip);position:absolute;z-index:40;padding:4px 10px 5px;border-radius:7px;
  background:var(--ink);color:var(--surface);font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;line-height:1.3;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.mc-chips button.mc-ico::after{left:50%;top:calc(100% + 8px);transform:translate(-50%,-3px)}
.mc-chips button.mc-ico:hover::after,.mc-chips button.mc-ico:focus-visible::after{opacity:1;transform:translate(-50%,0)}
/* (a button at a narrow row's end: its name lined up with its outer edge, so it stays on the page; pieces/rail.js) */
.mc-chips button.mc-ico.mc-tip-l::after{left:0;transform:translate(0,-3px)}
.mc-chips button.mc-ico.mc-tip-r::after{left:auto;right:0;transform:translate(0,-3px)}
.mc-chips button.mc-ico.mc-tip-l:hover::after,.mc-chips button.mc-ico.mc-tip-l:focus-visible::after,
.mc-chips button.mc-ico.mc-tip-r:hover::after,.mc-chips button.mc-ico.mc-tip-r:focus-visible::after{transform:translate(0,0)}
/* (touched, a name only a moment after its tap, never left up by the "hover" a phone keeps after it: pieces/rail.js) */
.mc-chips button.mc-ico.mc-tip-on::after,.mc-pull.mc-tip-on::after{opacity:1}
html.mc-tip-touch .mc-chips button.mc-ico:not(.mc-tip-on)::after,html.mc-tip-touch .mc-pull:not(.mc-tip-on)::after{opacity:0!important}
@media (min-width:900px){
  .mc-wide body{overflow:hidden}
  html.mc-wide .sh-page{max-width:none;height:100vh;height:100dvh;padding:10px 16px 16px;gap:10px 0;
                        display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr)}
  .mc-wide .sh-head{grid-column:1 / -1;align-items:center;justify-content:flex-start;min-height:34px;padding:0 4px;border:none}
  .sh-has-back.mc-wide .sh-head{padding-left:88px}
  .mc-wide .sh-head > div{display:flex;align-items:baseline;gap:16px;min-width:0}
  .mc-wide .sh-head h1{font-size:19px;white-space:nowrap}
  .mc-wide .sh-head p{margin:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mc-wide .sh-mark{margin-left:auto}
  /* (no title of its own: the vocabulary names it, at the end; Jae, 2026-10-22: "i don't want to call it this: Visual Pattern... or instead we just put this Someta · Instruments on the left?") */
  .mc-wide .sh-head > .sh-mark:first-child{margin-left:0}
  /* (in another page's frame, it fills the frame as it fills the window, and
     asks the page for a height of its own: handles.js, mcRoomWants) */
  /* the pull: half on the stage, half off, its arrow the way it goes */
  .mc-wide .mc-pull{grid-column:2;grid-row:2;justify-self:end;align-self:center;position:relative;z-index:6;display:grid;place-items:center;
                    width:18px;height:64px;margin-right:-9px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--surface);
                    color:var(--faint);cursor:pointer;box-shadow:0 1px 4px rgba(38,38,43,.08);transition:color .2s,border-color .2s,box-shadow .2s}
  .mc-wide .mc-pull svg{width:10px;height:20px;display:block;transition:transform .45s ease}
  .mc-wide.mc-handles-off .mc-pull svg{transform:scaleX(-1)}
  .mc-wide .mc-pull:hover{color:var(--ink);border-color:var(--faint);box-shadow:0 1px 6px rgba(38,38,43,.14)}
  .mc-wide .mc-pull::after{right:calc(100% + 8px);top:50%;transform:translate(3px,-50%)}
  .mc-wide .mc-pull:hover::after,.mc-wide .mc-pull:focus-visible::after{opacity:1;transform:translate(0,-50%)}
  /* the pieces */
  .mc-wide .mc-chips{grid-column:1;grid-row:2;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;
                     gap:8px;margin:0 14px 0 0;padding-top:2px}
  .mc-wide .mc-chips .mc-chip-all{margin:8px 0 0}
  .mc-wide .mc-chip-pair{flex-basis:auto;flex-direction:column;align-items:center}
  .mc-wide .mc-chips .mc-chip-full{margin:8px 0 0}
  .mc-wide .mc-chips button.mc-ico::after{left:calc(100% + 10px);top:50%;transform:translate(-3px,-50%)}
  .mc-wide .mc-chips button.mc-ico:hover::after,.mc-wide .mc-chips button.mc-ico:focus-visible::after{transform:translate(0,-50%)}
  /* the stage */
  .mc-wide .mc-card{grid-column:2;grid-row:2;min-height:0;padding:0}
  .mc-wide #mc-stage{position:absolute;left:12px;top:12px;width:calc(100% - 24px);height:calc(100% - 24px);max-width:none;max-height:none;margin:0}
  /* the handles: each the width it always is, so going, they slide and don't squeeze */
  .mc-wide .mc-panel{--hw:178px;grid-column:3;grid-row:2;width:var(--hw);margin-left:16px;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;
                     align-items:flex-start;gap:18px;padding:2px 0 0;overflow-x:hidden;overflow-y:auto;
                     transition:width .45s ease,margin-left .45s ease,opacity .35s ease}
  .mc-wide .mc-panel > *{flex:none;width:var(--hw);max-width:none}
  .mc-wide .mc-panel-sliders{align-items:flex-start;gap:12px}
  .mc-wide .mc-panel .mc-row{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;align-self:stretch}
  .mc-wide .mc-panel .mc-throw{width:auto!important;max-width:none;margin:0 4px}
  .mc-wide .mc-panel .mc-stop{font-size:13.5px}
  .mc-wide .mc-change{align-self:center;margin:-4px 0 -2px}
  .mc-wide .mc-panel-toggles{min-width:0;gap:13px;padding:16px 0 0 2px;border-top:1px solid var(--line)}
  .mc-wide .mc-panel .sh-tog{font-size:15px}
  .mc-wide .mc-choice{flex-wrap:wrap;row-gap:7px}
  .mc-wide .mc-choice-name{flex-basis:100%;margin:0;font-size:15px}
  .mc-wide .mc-choice-b{font-size:13.5px;padding:3px 9px 4px}
  /* the step, standing up: its first step at its foot, each step's number beside its notch */
  /* (the step and its numbers in the middle of the column, as one, the way the pattern's own sliders are under it: Jae, 2026-10-23, "do you think we can center it because it's like to the left and it looks awkward") */
  .mc-wide .mc-throw.mc-vert{--fh:min(300px,36vh);align-self:center;width:60px!important;margin:0}
  .mc-wide .mc-vert input[type=range]{writing-mode:vertical-lr;direction:rtl;width:26px;height:var(--fh)}
  .mc-wide .mc-vert input[type=range]::-webkit-slider-runnable-track{width:3px;height:100%}
  .mc-wide .mc-vert input[type=range]::-webkit-slider-thumb{margin:0 0 0 -8px}
  .mc-wide .mc-vert .mc-notch{left:13px;right:auto;top:9.5px;width:0;height:calc(var(--fh) - 19px);flex-direction:column}
  .mc-wide .mc-vert .mc-stops{position:absolute;left:0;top:0;width:60px;height:var(--fh);margin:0;pointer-events:none}
  .mc-wide .mc-vert .mc-stop{left:34px;top:auto;bottom:calc(9.5px + (100% - 19px) * var(--i) / var(--n));transform:translateY(50%);padding:0 3px;pointer-events:auto}
  .mc-wide .mc-vert .mc-cap{text-align:center;white-space:nowrap;margin:8px -50px 0}
  .mc-wide.mc-handles-off .mc-panel{width:0;margin-left:0;opacity:0;pointer-events:none}
}
@media (min-width:900px) and (prefers-reduced-motion:reduce){ .mc-wide .mc-panel{transition:none} }
/* the differences' key, in the colour the first differences are drawn in here */
.mc-wide .mc-sw-g{background:var(--bag-deep)}