/* Web chevron compositor — a browser port of the in-CAD z2_3 diagram view.
   The marking is drawn by the same engine (capcad.core) server-side; this file
   only styles the SVG stage, the measurement callouts and the control panel. */

.cc-wrap { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap;
           max-width: 1180px; margin: 0 auto; padding: 0 1rem 3rem; }
.cc-controls { flex: 0 0 260px; display: flex; flex-direction: column; gap: .6rem; }
.cc-stagebox { flex: 1 1 620px; min-width: 320px; position: relative; }

/* the drawing surface — canvas colour matches the in-CAD asphalt */
.cc-stage { width: 100%; height: 520px; display: block; border-radius: 10px;
            background: #3f3f3f; touch-action: none; cursor: grab; }
.cc-stage.cc-panning { cursor: grabbing; }

/* fixed label chips floating over the stage; leaders connect them to the rings */
.cc-label { position: absolute; transform: translate(-50%, -50%);
            background: #3f3f3f; color: #eaf4ff; border: 1px solid #6aa7ff;
            border-radius: 7px; padding: .18rem .5rem; font-size: .8rem;
            white-space: nowrap; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cc-label b { color: #fff; }

.cc-row { display: flex; align-items: center; gap: .5rem; }
.cc-row label { flex: 1 1 auto; color: #444; font-size: .9rem; }
.cc-row input[type=number], .cc-row select {
    width: 92px; padding: .32rem .45rem; border: 1px solid #c9cad7; border-radius: 6px; }
.cc-row select.cc-presets { width: 100%; }
.cc-row.cc-check label { flex: none; }
.cc-hint { font-size: .8rem; color: #777; font-style: italic; }
.cc-issue { color: #b3421a; font-size: .82rem; min-height: 1em; }
.cc-legend { font-size: .78rem; color: #888; margin-top: .3rem; }
.cc-btn { padding: .3rem .6rem; border: 1px solid #c9cad7; background: #f6f6fa;
          border-radius: 6px; cursor: pointer; font-size: .82rem; }