/* Course Map Ruler — the course creator panel (creator-ui.js; research/course-creator/02-design.md §2.7): colours and
 * buttons come from app.css, the workspace and forms from layout.css.
 * Laptop: the palette on the left, the ring in the middle, the inspector on the right [GEN: Inkscape, Beginners'
 * Guide "The Interface"]. Tablet (a coarse pointer): the palette as a bar under the ring, the inspector sliding over
 * from the right, Undo and Redo at the ring's bottom left (§2.2, §2.7) [OURS: design]. Phone: the palette keeps the Select
 * and Number tools and hides the kinds, since a phone views and fixes numbers and directions but does not place
 * [USER: U4] (M7). */
.crow { display: grid; grid-template-columns: 112px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }

/* the palette: a kind's drawing, its name, used / in the kit */
.cpalette { display: grid; gap: 6px; align-content: start; }
.ckind, .ctube, .ctool { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 26px auto; align-items: center; gap: 2px 6px; padding: 6px 8px;
                 min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left;
                 font: 500 13px/1.15 var(--body); }
.ckind img, .ctube img { grid-column: 1 / -1; width: 100%; height: 26px; object-fit: contain; background: #fff; border-radius: 4px; }
.ckind small, .ctube small { font: 500 11.5px var(--mono); color: var(--muted); }
.ckind small.over, .ctube small.over { color: var(--bad); font-weight: 700; }
.ctool { display: block; text-align: center; font-weight: 600; }
.ckind[aria-pressed="true"], .ctube[aria-pressed="true"], .ctool[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ckind:focus-visible, .ctube:focus-visible, .ctool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.csep { height: 4px; }

/* the ring */
.cstage { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cstage svg { display: block; width: 100%; height: min(68vh, 640px); min-height: 320px; touch-action: none; user-select: none; -webkit-user-select: none;
              -webkit-touch-callout: none; cursor: default; }
.cstage svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cstage svg.placing { cursor: crosshair; }
.cstage svg.over-body { cursor: grab; }
.cstage svg.over-handle { cursor: pointer; }
.cstage svg.dragging { cursor: grabbing; }
/* the obstacles while a tool that does not edit them is on (Handler, Field): faded a little, still clearly read, so a press
   plainly goes to the tool and not to them; was 0.45, under which a jump's thin bars were nearly lost [USER: 2026-10-06,
   "the obstacles are so light colored that it is hard to see them"] [OURS: design pick, the 0.75] (design-notes/2026-10-06-c1.md N7) */
#crPieces.cfaint { opacity: .75; }
.creadout { position: absolute; pointer-events: none; transform: translate(-50%, -100%); padding: 3px 8px; border-radius: 6px; white-space: nowrap;
            background: rgba(20, 32, 44, .88); color: #fff; font: 600 13px var(--mono); }
.cmode { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 270px); pointer-events: none; padding: 4px 9px; border-radius: 6px;
         background: rgba(234, 241, 252, .94); border: 1px solid #1461cc; color: #1461cc; font: 600 12.5px var(--body); }
.cundo { position: absolute; left: 10px; bottom: 10px; z-index: 7; display: flex; gap: 6px; }   /* (over the field sheet when it runs down to them: a3 N11) */
.cviewbtns { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
#crSideBtn { display: none; }
.cundo .btn, .cviewbtns .btn { min-height: 44px; min-width: 44px; justify-content: center; background: rgba(255, 255, 255, .92); color: #14202c; }

/* the ring and, under it, the numberings and the running order (§2.7, §5.3, §5.4; M7) */
.cmid { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cnums { display: grid; gap: 6px; }
.ctabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: end; }
.ctab { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 8px 8px 0 0; background: var(--surface); }
.ctab > button { min-height: 36px; padding: 4px 10px; border: 0; background: none; color: var(--ink); font: 500 13px var(--body); cursor: pointer; }
.ctab[aria-selected="true"], .ctab.on { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.ctab.on > button { color: var(--accent); font-weight: 600; }
.ctab .cdots { padding: 4px 8px; font-weight: 700; }
.ctab .cred { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 11px/18px var(--body); text-align: center; }
.ctabadd { min-height: 36px; min-width: 36px; border: 1px dashed var(--line); border-radius: 8px 8px 0 0; background: none; color: var(--ink); font: 600 16px var(--body); cursor: pointer; }
.cmenu { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
/* Show with (A4; design-notes/2026-10-06-a2.md): a box per other numbering, its colour's square beside its name */
.cshow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.cshow[hidden] { display: none; }
.cshow label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); cursor: pointer; }
.cshow .cswatch { display: inline-block; width: 12px; height: 12px; border: 2.5px solid var(--c); border-radius: 3px; background: #fff; }
.cshow .cswatch.t-circle { border-radius: 50%; }
.cshow .cswatch.t-square { border-radius: 0; }
.cshow .cswatch.t-plain { width: auto; height: auto; border: 0; background: none; color: var(--c); font-weight: 700; }
@media (pointer: coarse) { .cshow label { min-height: 44px; } .cshow input { width: 20px; height: 20px; } }
.cmenu[hidden] { display: none; }
.cmenurow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; }
.cmenurow label { display: inline-flex; align-items: center; gap: 6px; }
.cmenurow input[type="text"], .cmenurow select { font: 500 13px var(--body); padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
/* the order strip: a chip per performance, a gap between chips; the gaps take the Number tool's caret, or a chosen
   obstacle's "+" (§5.3); chips and gaps at least 44 px high for a finger (§2.2), and on a coarse pointer 44 px wide
   where they act (below). A vertical swipe over it scrolls the page; a finger lifts a chip by holding it (creator-ui.js,
   §13 row 86) */
.cstrip { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; min-height: 48px; padding: 2px 0; touch-action: pan-y; }
.cstrip .cempty { align-self: center; color: var(--muted); font-size: 13px; padding: 0 6px; }
.cchip { position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 4px; min-height: 44px; min-width: 44px;
         padding: 3px 6px 3px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: grab; user-select: none; -webkit-user-select: none;
         -webkit-touch-callout: none; }
/* (the number and name in a body of their own beside ×, which takes a press itself, so a browser that moves a finger's
   tap to the nearest target on the page does not move a tap on the chip to its ×) */
.cchip .cbody { display: grid; grid-column: 1; grid-row: 1 / span 2; align-content: center; }
.cchip .cbody:active { opacity: .8; }
.cchip b { font: 700 16px var(--mono); }
.cchip small { font: 500 10.5px var(--body); color: var(--muted); white-space: nowrap; }
.cchip .cdel { grid-row: 1 / span 2; grid-column: 2; min-width: 24px; min-height: 24px; border: 0; background: none; color: var(--muted); font: 600 14px var(--body); cursor: pointer; border-radius: 4px; }
.cchip .cdel:hover { color: var(--bad); }
.cchip.unset { border-style: dashed; }                                /* its direction not set, as the dashed arrow (§2.3) */
.cchip.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cchip.dragging { opacity: .5; cursor: grabbing; }
.cchip.lifted { box-shadow: 0 4px 14px rgba(0, 0, 0, .28); border-color: var(--accent); }
.cgap { position: relative; min-width: 14px; min-height: 44px; border: 0; padding: 0; background: none; cursor: pointer; }
.cgap.plus { min-width: 28px; }
.cgap.plus::after { content: "+"; position: absolute; inset: 8px 2px; display: grid; place-items: center; border: 1px dashed var(--accent); border-radius: 6px; color: var(--accent); font: 700 14px var(--body); }
.cgap.caret::before { content: ""; position: absolute; left: calc(50% - 1.5px); top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--accent); }
.cgap.drop::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--ink); }
.cflags { margin: 0; color: var(--bad); font-size: 13px; font-weight: 600; }
/* the flag list (creator-checks.js, M10; §7.1): a row per flag, its level in a word and a colour at its left (red, amber,
   blue for a Reading, grey for information); the set-up's flags, then the numbering in view's */
.kchk { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.kchkhead { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.kchkhead h4 { margin: 0; font: 600 14px var(--body); }
.kchkhead label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* the Rules switch: the profiles' chips joined in one row, the pressed one's border over its neighbours' (§13 row 433) */
.kchkrules { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.kchkseg { display: inline-flex; }
.kchkseg .chip { border-radius: 0; }
.kchkseg .chip + .chip { margin-left: -1px; }
.kchkseg .chip:first-child { border-radius: 999px 0 0 999px; }
.kchkseg .chip:last-child { border-radius: 0 999px 999px 0; }
.kchkseg .chip[aria-pressed="true"], .kchkseg .chip:focus-visible { position: relative; z-index: 1; }
.kchksum { font: 500 12.5px var(--mono); color: var(--muted); }
.kchk h5 { margin: 2px 0 0; font: 600 12.5px var(--body); color: var(--muted); }
.kchk .note { margin: 0; font-size: 12.5px; }
.kchklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kchkrow { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; padding: 4px 6px; border-left: 4px solid var(--muted);
           border-radius: 4px; background: var(--surface); }
.kchk-red { border-left-color: var(--bad); } .kchk-amber { border-left-color: var(--warn); } .kchk-blue { border-left-color: var(--accent); }
.kchklev { padding-top: 2px; font: 700 11px var(--mono); text-transform: uppercase; color: var(--muted); }
.kchk-red .kchklev { color: var(--bad); } .kchk-amber .kchklev { color: var(--warn); } .kchk-blue .kchklev { color: var(--accent); }
.kchkgo { min-height: 24px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 13px/1.35 var(--body); text-align: left; cursor: pointer; }
.kchkgo small { display: block; color: var(--muted); font-size: 12px; }
.kchkgo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kchkrow.noted .kchkgo { color: var(--muted); }
.kchknote { grid-column: 2 / -1; font: 500 13px var(--body); padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.kchknone { color: var(--muted); font-size: 12.5px; }
@media (pointer: coarse) { .kchkgo, .kchknb, #crCheckLine, #crRules .chip { min-height: 44px; } .kchkoff input { width: 22px; height: 22px; } }
.cnumnote { display: none; margin: 0; font-size: 13.5px; color: var(--ink); }   /* the side's note shows it on a fine pointer */
.cchanges summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.cchanges ol { margin: 4px 0 0; padding-left: 20px; font-size: 13px; columns: 2; column-gap: 24px; }
.cnumsin { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.cnumsin input { width: 110px; font: 500 14px var(--mono); padding: 7px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }

/* the side: inspector, snaps, ring, kit, files */
.cside { display: grid; gap: 12px; align-content: start; }
.cinspect { display: grid; gap: 6px; }
.cinspect h3 { margin: 0; }
.cxy { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.cxy label { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.cxy input { width: 76px; font: 500 14px var(--mono); padding: 7px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: right; }
.cinspect small { color: var(--muted); font-size: 12.5px; }
/* the chosen obstacle's own sizes (b1 N7): a row per size, FCI's beside it, one not FCI's marked */
.csizes summary { cursor: pointer; font-size: 14px; }
.csizes .csize { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: 14px; }
.csizes .csize input { width: 76px; font: 500 14px var(--mono); padding: 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: right; }
.csizes .csize select { font-size: 14px; padding: 5px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.csizes .csize small.notfci { color: #b42318; }
.ckit summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ckitgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 8px 0; }
.ckitgrid label, .ckittubes { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13.5px; }
.ckitgrid input { width: 54px; font: 500 13px var(--mono); padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: right; }
.ckittubes input { flex: 1; min-width: 0; font: 500 13px var(--mono); padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ckit small { display: block; color: var(--muted); font-size: 12px; margin: 4px 0 8px; }

/* the tunnel tool (creator-tunnel.js, M9): the kit's tube list under the length chip (a class of its own: .cmenu is the
   numberings' menus under the strip, M7); the tunnel's info and commands */
.ctubes { position: absolute; z-index: 5; transform: translateX(-50%); display: grid; gap: 2px; min-width: 150px; padding: 4px; border-radius: 8px;
          background: var(--surface); border: 1px solid #1461cc; box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.ctubes button { display: flex; justify-content: space-between; gap: 10px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 6px; background: none;
                 color: var(--ink); font: 600 13.5px var(--body); text-align: left; cursor: pointer; }
.ctubes button:hover, .ctubes button:focus-visible { background: var(--accent-soft); outline: none; }
.ctubes button[aria-current="true"] { color: #1461cc; }
.ctubes small { color: var(--muted); font-weight: 500; }
.ctubes p { margin: 6px 8px; font-size: 13px; color: var(--muted); }
/* View from here (creator-pov.js, V1 N1): its one row, what it stands as under the words */
.cpovmenu button { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.ctunnel { display: grid; gap: 6px; }
.ctunnel .cinfo { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
.ctunnel .clen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; }
.ctunnel .clen input { width: 76px; font: 500 14px var(--mono); padding: 7px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: right; }
.ctunnel .clen small { color: var(--muted); font-size: 12px; }
/* the last stop's words on the ring, for a finger whose note lies in the closed Inspector (a coarse pointer only) */
.csay { display: none; position: absolute; left: 10px; bottom: 62px; max-width: calc(100% - 20px); pointer-events: none; padding: 4px 9px; border-radius: 6px;
        background: rgba(20, 32, 44, .88); color: #fff; font: 600 13px var(--body); }
@media (pointer: coarse) { .csay.on { display: block; } }

/* a narrower laptop: the side goes under */
@media (max-width: 1100px) and (pointer: fine) { .crow { grid-template-columns: 112px minmax(0, 1fr); } .cside { grid-column: 1 / -1; } }

/* a tablet: the palette as a bottom bar, the inspector over the ring from the right */
@media (pointer: coarse) {
  /* (the inspector slid away is clipped, not laid beside the page, which would widen it and a browser zoom it out to
     fit, shrinking every target; clip keeps the palette sticky) [OURS: M6 layout, fixed in the M7 review] */
  .crow { grid-template-columns: minmax(0, 1fr); position: relative; overflow-x: clip; }
  .cmid { order: 1; }
  .cpalette { order: 2; position: sticky; bottom: 0; z-index: 3; grid-auto-flow: column; grid-auto-columns: minmax(88px, 1fr); overflow-x: auto; padding: 6px;
              background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
  .csep { display: none; }
  .cside { order: 3; position: absolute; top: 0; right: 0; width: min(320px, 86%); max-height: min(68vh, 640px); overflow: auto; z-index: 4; padding: 12px;
           background: var(--surface); border: 1px solid var(--line); border-radius: 8px 0 0 8px; box-shadow: -6px 0 18px rgba(0, 0, 0, .12);
           transform: translateX(105%); visibility: hidden; }
  .cside.open { transform: none; visibility: visible; }
  #crSideBtn { display: inline-flex; }
  /* the numberings on a finger (§5.3, §5.4; M7): tabs, ⋯ and "+" and the strip's acting gaps at least 44 px across
     [GEN: Apple HIG 44 pt minimum target]; × only on the chosen chip, 44 px, so a tap meant for a chip or a gap never
     deletes [OURS: M7 pick; §13 row 86]; the numbering's words under the strip, since the side slides away (§13 row 85) */
  .ctab > button, .ctab .cdots, .ctabadd { min-height: 44px; min-width: 44px; }
  .cgap.plus, .cgap.tool { min-width: 44px; }
  .cchip .cdel { display: none; }
  .cchip.chosen .cdel { display: block; min-width: 44px; min-height: 44px; }
  .cnumnote:not([hidden]) { display: block; }
}
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) { .cside { transition: transform .2s, visibility .2s; } }
/* a phone: no placing [USER: U4]; the Select and Number tools stay, since a phone fixes numbers and directions (§2.7)
   [USER: U4] (M7) */
@media (max-width: 599px) { .cpalette .ckind, .cpalette .ctube, .cpalette .csep { display: none; } }
/* the line's bar under the ring (creator-ui.js lineBar): the class the line, its legs and its course length are for,
   drawn as the menus' selects are, the course length, and the colour code as a strip of the ten speed bands
   [USER: 2026-09-28] [OURS: §13 rows 280-282] [GEN: Apple HIG 44 pt minimum target on touch] */
.cline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 13.5px; }
.cline[hidden] { display: none; }
.clinecls { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#crLineClass { min-height: 32px; font: 600 13px var(--body); padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.clinelen { font-weight: 600; color: var(--ink); }
.clinekey { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); }
.clinekey i { display: inline-block; width: 14px; height: 9px; }
.clinekey span:first-child { margin-right: 6px; } .clinekey span:last-child { margin-left: 6px; }
/* the line's colour and the helpers' switches (creator-helpers.js) */
.clinehelp { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.chelpers { flex-wrap: wrap; }
.chelpchips { display: inline-flex; flex-wrap: wrap; gap: 4px; font-weight: 400; }
.chelpall { color: var(--muted); }
.chelpkey { flex-basis: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 12px; color: var(--muted); }
.chelpkey:empty { display: none; }
.chelpkey span { display: inline-flex; align-items: center; gap: 6px; max-width: 72ch; }
.chelpkey svg { width: 26px; height: 12px; flex: none; }
/* the refusal areas' bar and the Inspector's approach at each entry (R1, creator-refusal.js) */
.crefbar { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }
.crefbar[hidden], .crefpick[hidden] { display: none; }
.creffactor input { width: 5em; margin-left: 4px; }
#crRefSizes { max-width: 100%; min-width: 0; }
.creftab { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 12px; margin: 4px 0; }
.creftab th, .creftab td { padding: 2px 6px; text-align: left; font-weight: 500; white-space: nowrap; }
.creftab input { width: 5em; }
.crefzero, .crefprov { color: var(--muted); }
.crefpick p { margin: 4px 0; font-size: 13px; }
.crefpick .kchkseg { margin-left: 4px; }
.clinenote { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
/* the planner's notes under the line (round 3, §13 row 716): what the line leaves out, in the checks' red, a line each */
.clinewarn { flex-basis: 100%; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--bad); white-space: pre-line; }
.clinewarn[hidden] { display: none; }
/* Turns' scale under the Line colour switch (creator-turns.js; design-notes/2026-10-05-batch8.md N2): a bar on log radius,
   20 m on the left to 0.3 m on the right, two handles, two typed limits and Reset */
.cturns { flex-basis: 100%; display: grid; gap: 2px; max-width: 560px; font-weight: 400; }
.cturns[hidden] { display: none; }
.cturnbar { position: relative; height: 30px; margin-inline: 12px; touch-action: none; }
.cturnscale { position: absolute; left: 0; right: 0; top: 9px; height: 12px; border-radius: 3px; }
.cturnh { position: absolute; top: 50%; width: 22px; height: 30px; padding: 0; border-radius: 6px; transform: translate(-50%, -50%);
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--ink); cursor: ew-resize; touch-action: none; }
#crTurnBlue { background: #7cbbe8; } #crTurnRed { background: #8b1c1c; }
.cturnh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cturnticks { position: relative; height: 16px; margin-inline: 12px; font: 11.5px var(--mono); color: var(--muted); }
.cturnticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cturnticks span:first-child { transform: none; } .cturnticks span:last-child { transform: translateX(-100%); }
.cturns.narrow .cturnticks .minor { display: none; }
.cturnlims { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; }
.cturnlims label { display: inline-flex; gap: 6px; align-items: center; }
.cturnlims input { width: 64px; font-family: var(--mono); text-align: right; }
/* the speed graph under the ring (creator-graph.js; batch8 N4-N6): one series, the grid recessive, the page's tokens */
.cgraph { margin: 8px 0 0; }
.cgraph[hidden] { display: none; }
.cgraphhead { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cgraphsum { font-weight: 400; color: var(--muted); }
.cgraphbox { position: relative; }
.cgraphbox svg { display: block; width: 100%; height: 210px; touch-action: pan-y; font: 11px var(--mono); }   /* (its height set, not from a drawing) */
.cgraphbox text { fill: var(--muted); }
.cgnum text { font: 600 11.5px var(--body); }
.cgaxlab { font: 11.5px var(--body); }
.cgrule { stroke: var(--line); stroke-width: 1; }
.cgaxis { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.cgband { fill: var(--muted); opacity: .13; }
.cgcap { fill: var(--muted); opacity: .55; }
.cgtick { stroke: var(--muted); stroke-width: 1; opacity: .4; }
.cgline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.cgarea { fill: var(--accent); opacity: .08; }
.cgcross { stroke: var(--ink); stroke-width: 1; opacity: .5; }
.cgdot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.cgraphtip { position: absolute; top: 4px; padding: 5px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  font-size: 12.5px; color: var(--ink); pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); white-space: nowrap; }
.cgraphtip[hidden] { display: none; }
.cgtnum { font-family: var(--mono); font-weight: 600; }
.cgraphnote { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
/* a locked obstacle's line in the Inspector (round 3, §13 row 702) */
.clocknote { margin: 4px 0 0; }
@media (pointer: coarse) { #crLineClass { min-height: 44px; } }
/* the view that stays put (creator-view.js; §2.2 "The view", §13 rows 232, 234): − and + on a fine pointer only, since a
   touch screen has the pinch at hand and its ring then keeps its size at Fit (no band for them) [OURS: design]; on a
   narrow screen the mode chip stands under the view's buttons, which would cover its words [OURS: design] */
@media (pointer: coarse) { #crZoomOut, #crZoomIn { display: none; } }
@media (max-width: 599px) { .cmode { top: 62px; max-width: calc(100% - 20px); } }
/* a tunnel under a contact (creator-under.js, §4.10): while the readout carries the words that say why a tube does or
   does not fit, they take a line of their own and the box wraps within the stage, which creator-under.js keeps it
   inside; its padding counted in its width, so however long the words it leaves 8 px a side [OURS: design §4.10, §13
   rows 273, 405] */
.creadout.cunderwrap { white-space: normal; width: max-content; max-width: calc(100% - 16px); box-sizing: border-box; }
.creadout .cunderwords { display: block; }
/* Select all obstacles and Clear the field (creator-clear.js; §2.4, §13 rows 410-425): commands, not tools, so no
   pressed state; greyed with no obstacles, as the side's buttons are when they cannot act (layout.css .btn:disabled);
   their words on the ring where a tunnel's stand (.csay): Select all's for a finger, whose note lies in the closed
   Inspector, Clear the field's on every device, since they say Undo brings the obstacles back [OURS: design; §13 rows
   417, 424]. On a tablet the bar's buttons are 80 px, so Select all, Select and Number lie in a 1180 px bar with the
   ten kinds, and Clear the field and New course are 44 px high and apart [GEN: Apple HIG 44 pt minimum target]
   [OURS: design; §13 rows 422, 425] */
.cClrCmd:disabled { opacity: .45; cursor: default; }
.cClrSay { display: none; position: absolute; left: 10px; bottom: 62px; max-width: calc(100% - 20px); pointer-events: none; padding: 4px 9px; border-radius: 6px;
           background: rgba(20, 32, 44, .88); color: #fff; font: 600 13px var(--body); }
.cClrSay.on.cClrWent { display: block; }
@media (pointer: coarse) {
  .cClrSay.on { display: block; }
  .cpalette { grid-auto-columns: minmax(80px, 1fr); }
  #crNew, #crClrField { min-height: 44px; }
  #crClrField { margin-left: 16px; }
}
/* closing the gaps a delete leaves in the numbers (creator-gaps.js, §5.3; track S, §13 row 306): under the creator's
   note, Close the gaps and the preference's box; 44 px for a finger [GEN: Apple HIG 44 pt minimum target]. The line's
   note above the ring's size keeps room for two lines, the most its words take in the side, so its words rewritten after
   a Delete ("Planning the L line…", then what the line shows) no longer move the offer below it (cc-r2, §13 row 308) */
#crLiveNote { min-height: 3em; min-height: 2lh; }
.csgaps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; font-size: 13.5px; }
.csgaps[hidden] { display: none; }
.csgapsauto { display: inline-flex; align-items: center; gap: 6px; }
.csgapssay { flex-basis: 100%; color: var(--muted); }
.csgapssay[hidden] { display: none; }
@media (pointer: coarse) { #crSGapsClose, #crSNbGaps, .csgapsauto { min-height: 44px; } .csgapsauto input { width: 22px; height: 22px; } }

/* groups (track G, §2.4; creator-group.js): the chip that says a group is entered, at the ring's bottom right, clear of
   Undo, Redo, Copy and Paste at its bottom left; dashed, as the group's frame on the ring */
.cgrpmode { position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 250px); pointer-events: none; padding: 4px 9px; border-radius: 6px;
            background: rgba(234, 241, 252, .94); border: 1px dashed #1461cc; color: #1461cc; font: 600 12.5px var(--body); }
@media (max-width: 599px) { .cgrpmode { bottom: 62px; max-width: calc(100% - 20px); } }
/* on a tablet the Inspector, open, lies over the ring's right part (its width, its 12 px padding each side and its
   border): the chip then stands 10 px left of it, clear of Undo, Redo, Copy and Paste at the left (cc-r2, §13 row 344) */
@media (pointer: coarse) and (min-width: 600px) { .crow:has(#crSide.open) .cgrpmode { right: calc(min(320px, 86%) + 36px); max-width: calc(100% - min(320px, 86%) - 286px); } }
/* the field (creator-field.js; §3.6, track F): the palette's four kinds after the Field button, drawn as the obstacles'
   buttons are, with a glyph for a drawing [OURS: design, §13 row 371]; the inspector of a chosen thing; the Field panel
   beside the kit with its name, note and margin, its files and the fields kept in this browser. On a phone the kinds are
   hidden, as the obstacles' are, since a phone does not place [USER: U4] */
.cfdkind { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; padding: 6px 8px; min-height: 44px; border: 1px solid var(--line);
           border-radius: 8px; background: var(--surface); color: #4e4238; cursor: pointer; text-align: left; font: 500 13px/1.15 var(--body); }
.cfdkind span { color: var(--ink); }
.cfdkind[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cfdkind[aria-pressed="true"] span { color: var(--accent); }
.cfdkind:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfdinspect { display: grid; gap: 6px; }
.cfdinspect[hidden], .cfdinspect .cxy[hidden], .cfdinspect label[hidden] { display: none; }
.cfdinspect h3 { margin: 0; }
.cfdinspect small { color: var(--muted); font-size: 12.5px; }
.cfdrow { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.cfdrow input { flex: 1; min-width: 0; font: 500 14px var(--body); padding: 7px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.cfdbox summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.cfdnote { margin: 6px 0; color: var(--muted); font-size: 12.5px; }
.cfdform { margin: 6px 0; grid-template-columns: auto minmax(0, 1fr); }
.cfdform textarea { width: 100%; font: 13px var(--body); padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; }
.cfdmargin { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cfdmargin input { width: 64px; }
.cfdlist { display: grid; gap: 4px; margin: 8px 0 4px; font-size: 13px; }
.cfdlist select { width: 100%; min-height: 32px; }
@media (pointer: coarse) { .cfdlist select { min-height: 44px; } }
@media (max-width: 599px) { .cpalette .cfdkind, #crFdMode { display: none; } }
/* the handler figures (creator-people.js, 02-design.md §3.7; cc-people): the inspector in Handler mode, as the field's;
   on a phone the Handler button goes with Field's */
.cpplinspect { display: grid; gap: 6px; }
.cpplinspect[hidden], .cpplinspect small[hidden] { display: none; }
.cpplinspect h3 { margin: 0; }
.cpplinspect small { color: var(--muted); font-size: 12.5px; }
.cpplrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; }
.cpplrow select, .cpplrow input { font: 500 14px var(--body); padding: 7px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-width: 0; }
.cpplrow select { flex: 1; }
.cpplrow input[type="number"] { font-family: var(--mono); width: 70px; text-align: right; }
@media (max-width: 599px) { #crPplMode { display: none; } }
/* the course as it was before a fit or a resize, drawn faint over the course (creator-original.js; §6.6, §13 rows
   740-745): its chip at the ring's bottom right, clear of Undo and Redo at the bottom left, and over a group's chip when
   one is entered [OURS: design pick] */
.corig { position: absolute; right: 10px; bottom: 10px; }
.corig .chip { min-height: 36px; }
.corig .chip[aria-pressed="false"] { background: rgba(255, 255, 255, .92); }
.cstage:has(#crGrpMode:not([hidden])) .corig { bottom: 48px; }
@media (pointer: coarse) { .corig .chip { min-height: 44px; } .cstage:has(#crGrpMode:not([hidden])) .corig { bottom: 56px; } }
@media (max-width: 599px) { .cstage:has(#crGrpMode:not([hidden])) .corig { bottom: 104px; } }
/* on a tablet with the Inspector open over the ring's right part, the chip stands left of it, as a group's chip does */
@media (pointer: coarse) and (min-width: 600px) { .crow:has(#crSide.open) .corig { right: calc(min(320px, 86%) + 36px); } }
/* the 3D view in the creator (creator-3d.js; §9.5, §13 rows 750-755): the page's 3D panel moved into the creator's row.
   At 1200 px and wider the ring and the 3D side by side, each about 570 px in the page's 1280 px: with a fine pointer
   the palette on the left and the Inspector under the two, as on a narrower laptop; with a finger the palette as its
   bar under them, the Inspector over the ring as before. Narrower, one at a time: the 3D in the ring's place, the
   palette and the order strip away with the ring, and Edit in 2D on its stage brings them back [USER: 2026-09-29]
   [OURS: design pick]. The 3D stage as high as the ring, so the two read side by side */
#view3dPanel.cdock { padding-top: 0; border-top: 0; gap: 8px; align-content: start; min-width: 0; }
#view3dPanel.cdock .wshead .note { display: none; }
#view3dPanel.cdock .v3stage { aspect-ratio: auto; height: min(68vh, 640px); min-height: 320px; max-height: none; }
/* its bar kept to two rows from above and three standing, with the Footing select beside the classes' chips (the final
   check of cc-view3d, §13 row 758): Close beside the heading, the words "Dog's line" left out (the chips' group keeps
   them as its name), the chips a little narrower */
#view3dPanel.cdock .wshead { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: none; }
#view3dPanel.cdock .wshead h2 { min-width: 0; overflow-wrap: anywhere; }
#view3dPanel.cdock #v3Close { flex: none; }
#view3dPanel.cdock .v3bar { column-gap: 4px; }   /* (A0 K4: two rows from above at 1440 px with the 188 px rail) */
#view3dPanel.cdock .v3lineslbl { display: none; }
#view3dPanel.cdock .v3lines { gap: 4px; }
#view3dPanel.cdock .v3lines .chip { padding: 8px 8px; min-width: 40px; gap: 5px; }
/* the Inspector under the 3D, in its column, so the ring's controls stay in reach beside the ring (the final check of
   cc-view3d, §13 row 758) */
@media (min-width: 1200px) and (pointer: fine) {
  .crow.with3d { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 8px; }
  .crow.with3d > .cpalette { grid-column: 1; grid-row: 1 / -1; }
  .crow.with3d > .cmid { grid-column: 2; grid-row: 1 / -1; }
  .crow.with3d > #view3dPanel { grid-column: 3; grid-row: 1; }
  .crow.with3d > .cside { grid-column: 3; grid-row: 2; }
}
@media (min-width: 1200px) and (pointer: coarse) {
  .crow.with3d { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .crow.with3d > .cmid { grid-column: 1; grid-row: 1; }
  .crow.with3d > #view3dPanel { grid-column: 2; grid-row: 1; }
  .crow.with3d > .cpalette { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1199.98px) {
  .crow.with3d:not(.face3d) > #view3dPanel { display: none; }
  .crow.with3d.face3d { grid-template-columns: minmax(0, 1fr); }
  .crow.with3d.face3d > .cmid, .crow.with3d.face3d > .cpalette { display: none; }
  .crow.with3d.face3d > #view3dPanel { grid-column: 1; grid-row: 1; }
  .crow.with3d.face3d .v3to2d { display: block; }
}
@media (max-width: 1199.98px) and (pointer: fine) { .crow.with3d.face3d > .cside { grid-column: 1; grid-row: 2; } }
/* the Inspector under the 3D is never the page's scroll anchor: when the 3D's caption gains or loses a line ("Planning the
   dog's line…" comes and goes), the Inspector moves with it and the browser scrolled the page 19 px to keep it in place,
   moving the 3D view under a still pointer, so a press landed on another floor point (check-edit3d M4; design-notes/
   2026-09-30-swap N17) [GEN: W3C CSS Scroll Anchoring Module Level 1, overflow-anchor] */
.crow.with3d > .cside { overflow-anchor: none; }
/* a tablet: the Inspector's drawer starts under the 3D's bar (creator-3d.js sets --v3top); side by side it lies over the
   3D, not the ring, so the ring's chips stay where they are */
@media (pointer: coarse) { .crow.with3d > .cside { top: var(--v3top, 0px); } }
@media (pointer: coarse) and (min-width: 1200px) {
  .crow.with3d:has(#crSide.open) .cgrpmode { right: 10px; max-width: calc(100% - 250px); }
  .crow.with3d:has(#crSide.open) .corig { right: 10px; }
}
/* the dog's line dragged (creator-linedit.js, §6.7; cc-linedit): the cursor over the line or an edit's handle, which a drag
   takes, as over an obstacle, and over a circle's rim, which sizes it [GEN: drag to move]; the Drag style, Reach and Classes
   in the line's bar under the ring, as the Pace switch; the edits' count, and their readings in the readings' blue (§6.3)
   [OURS: design; cc-pins' row] */
.cstage svg.cleover:not(.dragging):not(.placing) { cursor: grab; }
.cstage svg.clerim:not(.dragging):not(.placing) { cursor: ew-resize; }
.clebar { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--muted); }
.clebar select { min-height: 32px; font: 600 13px var(--body); padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.clebar .btn[hidden] { display: none; }
.clecount { color: var(--muted); }
.cleread { flex-basis: 100%; margin: 0; font-size: 12.5px; color: #1461cc; }
.cleread:empty { display: none; }
@media (pointer: coarse) { .clebar .btn, .clebar select, .clebar .chip { min-height: 44px; } }

/* Alternative lines (creator-alts.js; design-notes/2026-10-06-a1.md N7): a bar of its own under the line's bar, the
   stretch, the table of the planned stretch and its alternatives beside a small speed chart; the prototype's look
   (prototypes/2026-10-04/03-alt-paths.html) [OURS: prototype] */
.calts { font-size: 13px; }
.calts select { min-height: 32px; font: 600 13px var(--body); padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.calts .btn[hidden] { display: none; }
.caltbox { flex-basis: 100%; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .caltbox { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); } }
.calttab { border-collapse: collapse; width: 100%; font-size: 13px; }
.calttab th { text-align: left; font: 500 11.5px var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.calttab td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.calttab .r { text-align: right; }
.calttab input[type="text"] { font: 600 13px var(--body); width: 9ch; border: 1px solid transparent; background: transparent; color: var(--ink); padding: 3px 5px; border-radius: 4px; }
.calttab input[type="text"]:hover, .calttab input[type="text"]:focus { border-color: var(--line); background: var(--surface); }
.calttab .caltsub td { color: var(--muted); }
.calttab .caltopen td { background: var(--accent-soft); }
.caltacts { display: flex; gap: 4px; }
.caltacts .btn { padding: 5px 8px; font-size: 12.5px; }
.caltsw { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.caltsw.dash { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px); }
.caltfast { color: var(--ok, #1b7a43); } .caltslow { color: var(--bad, #d32f2f); }
.caltdl, .caltwhy { color: var(--muted); font-size: 12px; }
.caltchart { width: 100%; height: auto; display: block; }
.caltnote { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
@media (pointer: coarse) { .calts .btn, .calts select, .calts .chip { min-height: 44px; } }

/* the Path tool (creator-path.js; design-notes/2026-09-30-path.md N1): the path's line and ends take the press while it is on;
   while drawing, the ring is a place to put points */
.cstage svg.over-path:not(.dragging) { cursor: grab; }
.cpathbar input[type="number"], .cnumbar input[type="number"] { width: 4.6em; min-height: 32px; font: 600 13px var(--body); padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.cpathbar .btn[hidden] { display: none; }
.cmsbar .cmsedit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }   /* the Tape's rulers and circles (batch10) */
.cmsbar .cmsedit[hidden] { display: none; }
.cmsbar input[type="number"] { width: 4.6em; min-height: 32px; font: 600 13px var(--body); padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.cpathbar .btn[aria-busy="true"] { cursor: progress; }   /* a proposal walking (swap N16) */

/* ---------------------------------------------------------------- the site and the creator's layout (creator-layout.js;
   design-notes/2026-10-02-layout.md; the user's picks on the Creator Layouts page) */
.siteviews { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.siteviews .chip { font-weight: 600; }
body[data-view="create"] main.grid, body[data-view="create"] #layoutPanel, body[data-view="create"] .wrap > #view3dPanel,
body[data-view="read"] #creatorPanel, body[data-view="read"] #layoutPanel,
body[data-view="layout"] main.grid, body[data-view="layout"] #creatorPanel { display: none !important; }
/* field setup: the chip over the ring and its sheet */
.cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.csetchip { font-variant-numeric: tabular-nums; }
.cbar .cfiles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.cbar .cfiles .btn { padding: 5px 10px; font-size: 13px; }
.csheet { position: absolute; top: 8px; left: 8px; z-index: 6; width: min(380px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: auto; display: grid; gap: 10px;
          padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.csheet[hidden] { display: none; }
.csheethead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.csheethead h3 { margin: 0; font-size: 16px; }
/* tunnels: a button per length */
.cpaltubes { display: contents; }
/* a finger: the four lengths share one cell of the palette's bar, so the bar keeps its tools in view */
@media (pointer: coarse) {
  .cpaltubes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  .cpaltubes .ctube { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 3px 4px; min-height: 36px; justify-items: center; }
  .cpaltubes .ctube img { display: none; }
  .cpaltubes .ctube small { font-size: 10px; }
}
.ckind.ctunall[hidden] { display: none; }
.ctube img { object-position: left center; justify-self: start; }
/* the strip under the ring: the course in a line, the drag's readout and the note */
.cdockstrip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-height: 22px; font-size: 13px; }
.cdocklen { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.cnewlayout .crow > *, .cmid > *, .cline > *, .clinehelp > * { min-width: 0; }
.clinehelp .clinecls { flex-wrap: wrap; }
.cdocksay { flex: 1 1 320px; min-width: 0; color: var(--muted); }
.cdocksay #crNote { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdocksay .creadout { position: static !important; transform: none !important; left: auto !important; top: auto !important; display: inline; padding: 0; border-radius: 0;
                      background: none; color: var(--ink); box-shadow: none; white-space: normal; font: 500 13px var(--mono); }
.cdocksay .creadout[hidden] { display: none; }
.cdocksay:has(.creadout:not([hidden])) #crNote { display: none; }
.cdockstrip #crSGaps { flex-basis: 100%; }
/* with a mouse: the left rail of groups, three a row with names (so Select, Number and the first tools stand in a
   1366 × 768 window: J1 [USER: 2026-10-05, "we could make the left rail 3 button wide"]); the Inspector a row of four
   folding sections under all */
@media (pointer: fine) {
  .cnewlayout { --crail: 188px; }
  .cnewlayout .crow { grid-template-columns: var(--crail) minmax(0, 1fr); }
  /* (the wider ring box fits most rings by their height: a little more height keeps room above and below the ring for
     the marks that stand outside it, as a tunnel's length chip near the bottom edge) */
  .cnewlayout .crow:not(.with3d) .cstage svg { height: min(72vh, 700px); }   /* (the 3D beside it: both as before, half the width leaves room round the ring) */
  /* (the Inspector under the ring starts right of the rail, which spans both rows and stays in reach beside it, never
     over it) [USER: 2026-10-02, "the inspector menu is overriding the tools. lets move it to the right by the width of the sidebar"] */
  .cnewlayout .crow > .cpalette { grid-column: 1; grid-row: 1 / span 2; }
  .cnewlayout .crow > .cside { grid-column: 2 / -1; grid-row: 2; display: block; }
  .cnewlayout .cpalette { display: grid; gap: 8px; align-content: start; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }   /* (in reach beside the ring as the page scrolls) */
  .cnewlayout .cgroup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .cnewlayout .cgroup[hidden] { display: none; }
  .cnewlayout .cgrouph { grid-column: 1 / -1; font: 600 11px var(--sans, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .cnewlayout .cgroup > * { min-width: 0; }
  .cnewlayout .cgroup .ckind, .cnewlayout .cgroup .ctube { grid-template-columns: minmax(0, 1fr); grid-template-rows: 20px auto auto; justify-items: center; text-align: center; padding: 4px 3px; gap: 1px; font-size: 11.5px; }
  .cnewlayout .cgroup .ckind img, .cnewlayout .cgroup .ctube img { height: 20px; }
  .cnewlayout .cgroup .ctube img { justify-self: start; }
  .cnewlayout .cgroup .ckind span, .cnewlayout .cgroup .ctube span { line-height: 1.1; hyphens: auto; }
  .cnewlayout .cgroup .ckind small, .cnewlayout .cgroup .ctube small { font-size: 10.5px; }
  .cnewlayout .cgroup .ctool, .cnewlayout .cgroup button { padding: 5px 3px; font-size: 11.5px; line-height: 1.15; }
  .cnewlayout .crulesg .kchkseg { display: contents; }
  .cnewlayout .crulesoff { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.2; color: var(--muted); }
  .cnewlayout .crow.with3d { grid-template-columns: var(--crail) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .cnewlayout .crow.with3d > #view3dPanel { grid-row: 1; }
  .cnewlayout .crow.with3d > .cside { grid-column: 2 / -1; grid-row: 2; }
  .cinsp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 18px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); align-items: start; }
  .cinsphead { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .cinspsum { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
  .cisec { display: grid; gap: 8px; align-content: start; min-width: 0; }
  .cisech { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; font: 600 14px inherit; color: var(--ink); cursor: pointer; }
  .cisech::before { content: '▸'; color: var(--muted); }
  .cisec.open > .cisech::before { content: '▾'; }
  .cisech:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .cisec:not(.open) > .cisecb { display: none; }
  .cisecb { display: grid; gap: 10px; align-content: start; min-width: 0; contain: layout; }   /* (a section's change lays out that section alone) */
  .cnewlayout #crStrip { contain: layout; }
  .cinsp.folded > .cisec { display: none; }
  /* Course notes (batch1 N4): a fifth section across the row, under the four */
  .cisec[data-sec="notes"] { grid-column: 1 / -1; margin-top: 4px; }
  .cisec[data-sec="notes"] > .cisech { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .cisec[data-sec="notes"] > .cisech::before { margin-right: 6px; }
}
/* the course's notes (batch1 N4) */
.cnotes { display: grid; gap: 4px; }
.cnotes textarea { width: 100%; box-sizing: border-box; min-height: 4.5em; resize: vertical; font: inherit; font-size: 13px; line-height: 1.35; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.cvh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a page switched to a finger keeps the rail's buttons, but as the palette's one bar again (no groups, no headings) */
@media (pointer: coarse) { .cpalette .cgroup { display: contents; } .cpalette .cgrouph { display: none; } }
@media (max-width: 1100px) { .cinsp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* the Rules switch's copy in Field setup, and the Checks' line of the rules in use (creator-layout.js) */
.csheetrules { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.kchkwith { font-size: 12px; color: var(--muted); }
/* Appearance in Field setup (design-notes/2026-10-06-b2.md): the scheme, a colour per part, the ring, the numbers */
.clook { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; }
.clook summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.clookgrid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; margin-top: 8px; }
.clookparts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
.clookpart, .clookrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.clookpart small { color: var(--muted); font-size: 11.5px; }
.clook input[type="color"] { width: 34px; height: 26px; padding: 1px 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.clookwarn { margin: 8px 0 0; color: var(--warn); font-size: 12.5px; }

/* the palette's Weaves menu (D3, design-notes/2026-10-06-c2.md N12): a right click or a long press on Weaves */
.cweavemenu { position: fixed; z-index: 40; display: grid; gap: 8px; padding: 10px 12px; max-width: calc(100vw - 16px);
              background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.cweavemenu[hidden] { display: none; }
.cweavemenu .cwmhead { font-weight: 600; font-size: 14px; }
.cweavemenu .cwmgrid { display: grid; grid-template-columns: auto auto; gap: 6px; }
.cweavemenu small { color: var(--muted); }
#crPalette .ckind[data-set="own"] small::after { content: " •"; }

/* the Overlay (F1, F2; design-notes/2026-10-06-c4.md): other courses under this one, and what moves between runs */
.covbar { flex-basis: 100%; }
.covlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; flex-basis: 100%; }
.covlist li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.covlist label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.covlist small, .covmoves small, .covinout small { color: var(--muted); }
.covlist .covwarn { color: #b91c1c; }
.covlist .covnone { color: var(--muted); }
.covsw { width: 14px; height: 14px; border-radius: 3px; opacity: .8; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.covadd { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.covbar input[type="number"] { width: 4.6em; min-height: 32px; font: 600 13px var(--body); padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.covcmp { flex-basis: 100%; min-width: 0; }
.covcmp p { margin: 2px 0; }
.covsum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.covcount { display: inline-flex; align-items: center; gap: 4px; }
.covk { flex: none; vertical-align: -3px; }
.covmoves { margin: 4px 0 0; padding-left: 1.6em; columns: 2 20em; column-gap: 2em; font-size: 13px; }
.covinout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
#crOvOpen.on { box-shadow: inset 0 0 0 2px var(--accent); }