/* Movement designer. Palette from the bench: rhodium-plated plate, ink, gilt wheels, blued steel, ruby. */
:root {
  --rhodium: #dfe2e4;     /* drawing sheets */
  --sheet: #eef0f1;
  --panel: #f7f8f8;
  --ink: #1d2733;
  --ink-2: #5a6672;
  --rule: #c3c9ce;
  --gilt: #b4862c;        /* wheels */
  --gilt-soft: #e7d3a4;
  --blued: #2a4f9c;       /* selection, actions */
  --ruby: #a8192e;        /* confirmed failures, jewels */
  --pass: #2f6e45;
  --data: #8a6a12;
  --shadow: 0 1px 0 rgba(29, 39, 51, .08);
  font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--rhodium); }
body { display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
button { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: 3px 9px; cursor: pointer; }
button:hover { border-color: var(--blued); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blued); outline-offset: 1px; }
button[aria-pressed="true"], button[aria-selected="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
button:disabled { opacity: .45; cursor: default; }
h2 { font: 600 14px/1.2 'IBM Plex Sans Condensed', sans-serif; margin: 0; }

/* bar */
.bar { display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: var(--ink); color: var(--sheet); }
.bar button { background: transparent; color: var(--sheet); border-color: #3b4756; }
.bar button:hover { border-color: var(--gilt); }
.bar .actions a { color: inherit; border: 1px solid #3b4756; border-radius: 3px; padding: 3px 9px; text-decoration: none; }
.bar .actions a:hover { border-color: var(--gilt); }
.bar .actions a:focus-visible { outline: 2px solid var(--gilt); outline-offset: 1px; }
.title { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; overflow: hidden; }
.name { font: italic 400 20px 'IBM Plex Serif', serif; background: transparent; border: 0; color: #fff; min-width: 6ch; width: 100%; text-overflow: ellipsis; max-width: 420px; padding: 0; }
.kind { color: var(--gilt-soft); font-size: 12px; white-space: nowrap; }
.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sep { width: 1px; height: 18px; background: #3b4756; margin: 0 4px; }
.tally { display: flex; gap: 10px; font-size: 13px; white-space: nowrap; }
.tally b { font-weight: 600; }
.tally .f { color: #ff9aa6; } .tally .p { color: #9fd8b1; } .tally .d { color: #e6cf8a; }

/* layout */
.grid { flex: 1; min-height: 0; display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr) 360px;
  grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas: "left plan three right" "left side side right"; }
.left { grid-area: left; } .plan { grid-area: plan; } .three { grid-area: three; } .side { grid-area: side; } .right { grid-area: right; }
.left, .right { background: var(--panel); overflow: auto; min-height: 0; }
.view { background: var(--sheet); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.view > header, .checks > header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.view > header button, .view select { padding: 1px 7px; font-size: 13px; }
.hint { color: var(--ink-2); font-size: 12px; flex: 1; }
.tog { font-size: 13px; color: var(--ink-2); display: flex; gap: 4px; align-items: center; }
.badge { font-size: 12px; padding: 1px 7px; border-radius: 9px; background: var(--gilt-soft); color: #5b4511; flex: 0 0 auto; }
.three .badge { margin-right: auto; }
svg#plan, svg#side { flex: 1; width: 100%; min-height: 0; display: block; user-select: none; }
.view svg#assembly-plan, .view svg#assembly-side, [data-assembly-only] { display: none; }
.reference-assembly .view svg#plan, .reference-assembly .view svg#side,
.reference-assembly [data-plan-legacy], .reference-assembly .plan .layers,
.reference-assembly #stemPos, .reference-assembly .plan label:has(#showTeeth) { display: none; }
.reference-assembly [data-assembly-only] { display: inline; }
.reference-assembly .view svg#assembly-plan, .reference-assembly .view svg#assembly-side {
  display: block; flex: 1; width: 100%; min-height: 0; user-select: none; touch-action: none;
}
[data-assembly-part] { cursor: grab; }
.assembly-axis { fill: none; stroke: var(--rule); stroke-width: .07; stroke-dasharray: .35 .25; }
.assembly-dimension { fill: var(--blued); font-size: .72px; text-anchor: middle; pointer-events: none; }
.assembly-parts { list-style: none; padding: 0; margin: 4px 0 10px; }
.assembly-part-button { width: 100%; text-align: left; margin-block: 2px; }
.assembly-part-button small { float: right; opacity: .8; margin-left: 6px; }
.assembly-path { padding-left: 20px; }
.assembly-path li { margin-block: 5px; }
#explode { width: 84px; vertical-align: middle; }
#three { flex: 1; min-height: 0; position: relative; }
.explode3d { position: absolute; bottom: 6px; left: 6px; z-index: 2; padding: 3px 6px; align-items: center; background: rgba(255, 255, 255, .94); border: 1px solid var(--rule); border-radius: 4px; }
.explode3d button { padding: 1px 7px; font-size: 13px; }
.opts3d { position: absolute; top: 6px; right: 6px; z-index: 2; background: rgba(255, 255, 255, .94); border: 1px solid var(--rule); border-radius: 4px; font-size: 12px; max-width: calc(100% - 12px); }
.opts3d summary { cursor: pointer; padding: 3px 8px; color: var(--ink-2); }
.opts3d-body { display: grid; gap: 6px; padding: 4px 8px 8px; }
.opts3d-body .tog { justify-content: space-between; gap: 8px; }
.opts3d select { padding: 1px 4px; font-size: 12px; }
.seg { display: inline-flex; gap: 2px; }
.view.three.enlarged { position: fixed; inset: 10px; z-index: 60; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); border: 1px solid var(--rule); }
body.has-enlarged::after { content: ''; position: fixed; inset: 0; background: rgba(20, 22, 26, .45); z-index: 59; }
#three canvas { display: block; }

/* tabs & panes */
.tabs { display: flex; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.tabs button { flex: 1; border: 0; border-radius: 0; padding: 7px 2px; font-size: 13px; background: transparent; }
.tabs button[aria-selected="true"] { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--gilt); }
.pane { padding: 10px 12px 24px; }
.pane h3 { font: 500 15px 'IBM Plex Serif', serif; margin: 16px 0 6px; }
.pane h3:first-child { margin-top: 2px; }
.pane p { color: var(--ink-2); margin: 4px 0 8px; line-height: 1.45; font-size: 13px; }

/* fields */
.field { display: grid; grid-template-columns: 1fr 92px 14px; gap: 6px; align-items: center; padding: 2px 0; }
.field label { font-size: 13px; }
.field input, .field select { width: 100%; padding: 2px 5px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; text-align: right; }
.field select { text-align: left; }
.field input.bad { border-color: var(--ruby); background: #fbecee; }
.field .ferr { grid-column: 1 / -1; color: var(--ruby); font-size: 11px; line-height: 1.3; }
.field input[readonly] { background: var(--sheet); color: var(--ink-2); }
.prov { width: 10px; height: 10px; border-radius: 50%; display: inline-block; cursor: help; }
.prov.published { background: var(--blued); }
.prov.measured { background: var(--pass); }
.prov.illustrative { background: transparent; border: 1.5px dashed var(--gilt); }
.prov.design { background: transparent; border: 1.5px solid var(--ink-2); }
.legend { display: grid; grid-template-columns: 14px 1fr; gap: 3px 6px; font-size: 12px; color: var(--ink-2); align-items: center; margin: 6px 0; }

/* train table */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 3px 4px; text-align: right; border-bottom: 1px solid var(--rule); }
th:first-child, td:first-child { text-align: left; }
th { font-weight: 500; color: var(--ink-2); font-size: 12px; }
td input { width: 48px; text-align: right; border: 1px solid var(--rule); border-radius: 3px; padding: 1px 3px; }
tr.sel td { background: #e3eaf6; }
tr { cursor: pointer; }
.cw { color: var(--pass); } .ccw { color: var(--ruby); }
.steps { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.steps li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.steps .what { font-weight: 600; }
.steps .expr { color: var(--ink-2); display: block; }
.steps .val { display: block; }
.steps .src { color: var(--ink-2); font-size: 11.5px; }

/* inspector */
.inspector { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.inspector h2 { font: 500 17px 'IBM Plex Serif', serif; margin-bottom: 6px; }
.empty { color: var(--ink-2); font-size: 13px; }
.ins-group { margin: 8px 0 4px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.constraint { font-size: 13px; padding: 4px 6px; margin: 4px 0; border-left: 3px solid var(--rule); background: #fff; }
.constraint.fail { border-left-color: var(--ruby); }
.constraint.pass { border-left-color: var(--pass); }
.constraint.data { border-left-color: var(--data, #b07a18); }
.constraint .m { color: var(--ink-2); display: block; font-size: 12px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.row-actions button.primary { background: var(--blued); color: #fff; border-color: var(--blued); }

/* checks */
.checks > header { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.filters { display: flex; gap: 3px; margin-left: auto; }
.filters button { font-size: 12px; padding: 1px 6px; }
#checks { list-style: none; margin: 0; padding: 0 0 20px; }
#checks li { padding: 6px 12px 7px 26px; border-bottom: 1px solid var(--rule); position: relative; font-size: 13px; cursor: pointer; }
#checks li:hover { background: #fff; }
#checks li::before { content: ''; position: absolute; left: 10px; top: 10px; width: 9px; height: 9px; border-radius: 50%; }
#checks li.fail::before { background: var(--ruby); }
#checks li.pass::before { background: transparent; border: 2px solid var(--pass); width: 5px; height: 5px; }
#checks li.data::before { background: transparent; border: 1.5px dashed var(--data); }
#checks .t { font-weight: 600; }
#checks .k { font-size: 11.5px; color: var(--ink-2); margin-left: 4px; }
#checks .d { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
#checks .d b { color: var(--ink); font-weight: 500; }

/* svg drawing */
.dim { stroke: var(--ink-2); stroke-width: .5; fill: none; vector-effect: non-scaling-stroke; }
.dimtxt { fill: var(--ink); font-family: 'IBM Plex Sans Condensed', sans-serif; }
.outline { fill: #e4e7e9; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rimline { fill: none; stroke: var(--ink-2); stroke-dasharray: 4 3; stroke-width: .8; vector-effect: non-scaling-stroke; }
.gear { fill: rgba(180, 134, 44, .22); stroke: #8c6516; stroke-width: .8; vector-effect: non-scaling-stroke; }
.gear.pin { fill: rgba(90, 102, 114, .35); stroke: var(--ink); }
.gear.esc { fill: rgba(42, 79, 156, .16); stroke: var(--blued); }
.gear.drum { fill: rgba(180, 134, 44, .10); stroke: #8c6516; stroke-dasharray: 3 2; }
.pitch { fill: none; stroke: var(--ink-2); stroke-width: .5; stroke-dasharray: 5 2 1 2; vector-effect: non-scaling-stroke; }
.arb { fill: var(--ink); cursor: grab; }
.arb.locked { fill: var(--ink-2); cursor: not-allowed; }
.arbhit { fill: transparent; cursor: grab; }
.sel .gear, .sel .gear.pin { stroke: var(--blued); stroke-width: 2; }
.hl .gear { stroke: var(--ruby); stroke-width: 2; }
.cdline { stroke: var(--pass); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cdline.bad { stroke: var(--ruby); stroke-width: 2; }
.lbl { font-family: "IBM Plex Sans Condensed", sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--sheet); stroke-width: .16; stroke-linejoin: round; }
#side .lbl { stroke-width: .06; }
.lbl.bad { fill: var(--ruby); }
.axis { stroke: #8a949d; stroke-width: .6; vector-effect: non-scaling-stroke; }
.stem { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.secmark { fill: none; stroke: var(--blued); stroke-dasharray: 2 2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.band { fill: #cfd4d8; stroke: var(--ink-2); stroke-width: .6; vector-effect: non-scaling-stroke; }
.band.bridge { fill: #d8d0bd; }
.sidepart { stroke: var(--ink); stroke-width: .7; vector-effect: non-scaling-stroke; cursor: pointer; }
.sidepart.wheel { fill: var(--gilt-soft); } .sidepart.pinion { fill: #9aa4ad; } .sidepart.shaft { fill: #bfc6cc; } .sidepart.drum { fill: rgba(231, 211, 164, .45); } .sidepart.escape { fill: #b9c8e6; }
.sidepart.bad { stroke: var(--ruby); stroke-width: 2; }
.g.sel .sidepart { stroke: var(--blued); stroke-width: 1.8; }
.datum { stroke: var(--blued); stroke-width: 1; vector-effect: non-scaling-stroke; }
.target { stroke: var(--ruby); stroke-dasharray: 6 3; stroke-width: .8; vector-effect: non-scaling-stroke; }

/* milestone 2: motion works, keyless, hands */
.gear.aux { fill: rgba(42, 79, 156, .10); stroke: #4d6aa6; }
.grp-motion .gear.aux { fill: rgba(180, 134, 44, .16); stroke: #9a7425; }
.gear.core { fill: rgba(42, 79, 156, .25); stroke: var(--blued); }
.pipe { fill: rgba(90, 102, 114, .25); stroke: var(--ink); stroke-width: .6; vector-effect: non-scaling-stroke; }
.stempart { fill: rgba(90, 102, 114, .30); stroke: var(--ink); stroke-width: .7; vector-effect: non-scaling-stroke; cursor: pointer; }
.stempart.stem { fill: rgba(191, 198, 204, .6); }
.stempart.bad { stroke: var(--ruby); stroke-width: 1.6; }
.cdline.kl { stroke-dasharray: 4 2; }
.band.dial { fill: rgba(255, 255, 255, .7); stroke: var(--ink-2); }
.recess { stroke: var(--ink-2); stroke-dasharray: 3 2; stroke-width: .6; vector-effect: non-scaling-stroke; }
.hand { fill: #1f3d7a; stroke: none; cursor: pointer; }
.hand.bad { fill: var(--ruby); }
.sidepart.pipe, .sidepart.ext { fill: #aab3bb; } .sidepart.core { fill: rgba(42, 79, 156, .35); }
.layers { display: flex; gap: 8px; align-items: center; }

/* milestone 3: bridges, screws, jewels, levers */
.bridgefill { fill: rgba(150, 160, 170, .16); pointer-events: none; }
.bridgeedge { fill: none; stroke: #59636d; stroke-width: 1.2; stroke-dasharray: 6 2; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: stroke; }
.bridge.sel .bridgeedge { stroke: var(--blued); stroke-width: 2.4; stroke-dasharray: none; }
.bridge.bad .bridgeedge { stroke: var(--ruby); }
.blbl { fill: #59636d; font-style: italic; pointer-events: none; }
.pillar { fill: none; stroke: #59636d; stroke-dasharray: 2 2; stroke-width: .6; vector-effect: non-scaling-stroke; pointer-events: none; }
.screw { fill: rgba(42, 63, 143, .55); stroke: #1c2a62; stroke-width: .8; vector-effect: non-scaling-stroke; cursor: move; }
.screw.bad { fill: rgba(168, 25, 46, .55); }
.slot { stroke: #e9eef7; stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.jewel { fill: rgba(179, 18, 46, .55); stroke: #7d0c1f; stroke-width: .6; vector-effect: non-scaling-stroke; pointer-events: none; }
.leverbody { stroke: rgba(90, 102, 114, .55); stroke-linecap: round; cursor: pointer; }
.lever.sel .leverbody { stroke: rgba(42, 79, 156, .6); }
.lever.bad .leverbody { stroke: rgba(168, 25, 46, .6); }
.leverpt { fill: #fff; stroke: var(--ink); stroke-width: .8; vector-effect: non-scaling-stroke; cursor: move; }

/* milestone 4: escapement and balance */
.stone { fill: rgba(179, 18, 46, .75); stroke: #6d0a1b; stroke-width: .6; vector-effect: non-scaling-stroke; cursor: pointer; }
.guardpin { fill: var(--ink); }
.balrim { fill: rgba(180, 134, 44, .30); stroke: #8c6516; stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; }
.balarm { stroke: rgba(180, 134, 44, .55); stroke-linecap: round; cursor: pointer; }
.hairspring { fill: none; stroke: #2a3f8f; stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: none; }
.roller { fill: rgba(90, 102, 114, .35); stroke: var(--ink); stroke-width: .6; vector-effect: non-scaling-stroke; cursor: pointer; }
.escp.sel .leverbody, .escb.sel .balrim { stroke: rgba(42, 79, 156, .8); }
.escp.hl .leverbody, .escb.hl .balrim { stroke: rgba(168, 25, 46, .8); }

/* milestone 5: build tab */
table.bom td, table.bom th { font-size: 12px; padding: 2px 3px; text-align: left; }
table.bom td.pass { color: var(--pass); } table.bom td.fail { color: var(--ruby); font-weight: 600; } table.bom td.data { color: var(--data); }
table.bom tr { cursor: default; }
table.proto select { width: 92px; font-size: 12px; }

.gear.donor { fill: rgba(47, 110, 69, .14); stroke: var(--pass); stroke-width: 1.2; stroke-dasharray: 5 3; }

#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--sheet); padding: 8px 14px; border-radius: 4px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 80vw; }
#toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

@media (max-width: 1200px) {
  .grid { grid-template-columns: 280px minmax(0, 1fr) 320px; grid-template-rows: minmax(360px, 1fr) minmax(300px, 1fr) minmax(220px, .8fr); grid-template-areas: "left plan right" "left three right" "left side right"; height: auto; }
}
@media (max-width: 760px) {
  body { height: auto; }
  .grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "plan" "three" "side" "right" "left"; }
  .view { min-height: 340px; }
  .bar { flex-wrap: wrap; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }