/* Flashing Maker, standalone app layout */

:root {
  --fm-panel:    #111111;
  --fm-panel-2:  #1a1a1a;
  --fm-stroke:   #2a2a2a;
  --fm-accent:   var(--accent, #34d399);
  --fm-ink:      var(--fg, #F5F0E8);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg, #0A0A0A);
  color: var(--fm-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}

body.flashing-maker {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "left   canvas right";
  height: 100vh;
}

/* Top bar */
.fm-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--fm-panel);
  border-bottom: 1px solid var(--fm-stroke);
}

.fm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fm-brand img {
  height: 22px;
}

.fm-brand-title {
  font-size: 15px;
}

.fm-brand-sub {
  font-size: 12px;
  color: var(--fm-accent);
  font-weight: 500;
}

.fm-topbar-spacer { flex: 1; }

.fm-back {
  color: var(--fm-ink);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--fm-stroke);
}

.fm-back:hover {
  border-color: var(--fm-accent);
}

/* Left pane */
.fm-left {
  grid-area: left;
  background: var(--fm-panel);
  border-right: 1px solid var(--fm-stroke);
  overflow-y: auto;
  padding: 16px 12px;
}

.fm-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fm-accent);
  margin: 0 4px 10px;
}

.template-list {
  display: grid;
  gap: 10px;
}

.template-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px;
  background: var(--fm-panel-2);
  border: 1px solid var(--fm-stroke);
  border-radius: 6px;
  color: var(--fm-ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.template-card:hover {
  border-color: var(--fm-accent);
}

.template-card.active {
  border-color: var(--fm-accent);
  box-shadow: 0 0 0 1px var(--fm-accent) inset;
}

.template-preview {
  width: 80px;
  height: 60px;
  background: #000;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-preview svg {
  width: 100%;
  height: 100%;
}

.template-meta {
  min-width: 0;
}

.template-name {
  font-weight: 700;
  font-size: 14px;
}

.template-description {
  font-size: 12px;
  color: var(--fm-accent);
  margin-top: 2px;
}

/* Canvas pane */
.fm-canvas-wrap {
  grid-area: canvas;
  position: relative;
  background: radial-gradient(1200px 800px at 50% 40%, #1b1b1b 0%, #0a0a0a 65%);
  overflow: hidden;
}

.fm-canvas {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  cursor: default;
}

.fm-canvas text,
.fm-canvas tspan {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* Labels need to be clickable. The <g> wrapper has no paint, so we let
   the <text> itself capture pointer events and rely on event bubbling. */
.fm-canvas [data-role-label] { pointer-events: auto; }
.fm-canvas [data-role-label] text { pointer-events: auto; }

/* Grid background. Minor line every 10mm, major every 50mm. Strokes are
   non-scaling so the grid reads the same at any zoom level. */
.fm-canvas .fm-grid { fill: url(#fm-grid-major); }
.fm-canvas .fm-grid-minor-line {
  stroke: rgba(245, 240, 232, 0.06);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.fm-canvas .fm-grid-major-line {
  stroke: rgba(245, 240, 232, 0.14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Paint widget hover hints. The glyphs live inside the widget group and
   are hidden until the user hovers their matching hit target. We use
   sibling selectors so the hints only need to know which handle they pair
   with, not each handle's state. Both handles precede the hint nodes in
   DOM order so the sibling combinator can reach them. */
.fm-canvas [data-role="painted-side"] .paint-hint {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.fm-canvas [data-role="painted-side"] [data-paint-handle="move"]:hover ~ .paint-hint-move,
.fm-canvas [data-role="painted-side"] [data-paint-handle="rotate"]:hover ~ .paint-hint-rotate {
  opacity: 1;
}

/* Mode-based cursors on the canvas wrap */
.fm-canvas-wrap.mode-draw  .fm-canvas { cursor: crosshair; }
.fm-canvas-wrap.mode-empty .fm-canvas { cursor: crosshair; }
.fm-canvas-wrap.mode-edit  .fm-canvas { cursor: default; }
.fm-canvas-wrap.mode-pan   .fm-canvas { cursor: grab; }
.fm-canvas-wrap.mode-pan.panning .fm-canvas,
.fm-canvas-wrap.panning    .fm-canvas { cursor: grabbing !important; }
/* Pan mode disables label/segment/vertex interaction so drags don't get hijacked */
.fm-canvas-wrap.mode-pan .fm-canvas [data-role-label],
.fm-canvas-wrap.mode-pan .fm-canvas path[data-seg],
.fm-canvas-wrap.mode-pan .fm-canvas .vertex-handle { cursor: inherit; pointer-events: none; }

/* Fold handles / labels override the mode cursor */
.fm-canvas .vertex-handle { cursor: grab; }
.fm-canvas .vertex-handle.dragging,
.fm-canvas-wrap .vertex-handle:active { cursor: grabbing; }
/* Pencil cursor on dimension labels — obvious "click to edit" affordance.
   Larger (32px) and high-contrast neon green so it pops on any background. */
.fm-canvas [data-role-label] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 4l6 6-14 14-6 1 1-6z'/><path d='M19 7l6 6'/></g><g fill='none' stroke='%2300ff88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 4l6 6-14 14-6 1 1-6z'/><path d='M19 7l6 6'/></g></svg>") 4 28, text;
}
/* Plus-in-circle cursor on segments — "click to add a fold here". */
.fm-canvas path[data-seg] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='11' fill='rgba(0,0,0,0.55)' stroke='%2300ff88' stroke-width='2.5'/><path d='M10 16h12M16 10v12' stroke='%2300ff88' stroke-width='3' stroke-linecap='round' fill='none'/></svg>") 16 16, copy;
}

.fm-canvas-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--fm-accent);
  background: rgba(0,0,0,0.5);
  padding: 6px 12px;
  border-radius: 20px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.fm-empty-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.fm-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fm-ink);
  margin-bottom: 6px;
}

.fm-empty-sub {
  font-size: 12px;
  color: var(--fm-accent);
}

/* Toolbar floats in top-right of canvas */
.fm-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(17, 17, 17, 0.85);
  border: 1px solid var(--fm-stroke);
  border-radius: 6px;
  padding: 4px;
  backdrop-filter: blur(6px);
}

.fm-tool {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fm-ink);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

.fm-tool:hover:not(:disabled) {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
}

.fm-tool.active {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  background: rgba(52, 211, 153, 0.08);
}

.fm-tool:disabled {
  color: #555;
  cursor: not-allowed;
}

.fm-tool svg {
  width: 18px;
  height: 18px;
}

#tool-finish,
.fm-tool-text {
  width: auto;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fm-tool-text {
  border-color: var(--fm-stroke);
}

.fm-tool-text:not(:disabled):hover {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
}

.fm-tool-sep {
  width: 1px;
  height: 20px;
  background: var(--fm-stroke);
  margin: 0 2px;
}

/* Dimension labels. Stroke halo is set inline by engine.js so it scales
   with the profile bbox (see fontUnit). */

/* Fold handles. Transparent hit target — the visible dot is a separate
   non-interactive circle rendered by the engine. Dot only grows during drag,
   never on hover. */
.vertex-handle { fill: transparent; stroke: none; }
.vertex-dot {
  pointer-events: none;
  transition: r 120ms ease-out, fill 120ms ease-out;
}
/* Selected / dragging fold pulses outward with a halo ring so the active
   fold is unmistakable during edits. */
.vertex-dot.active {
  fill: var(--fm-accent);
  stroke: var(--fm-accent);
  stroke-width: 2;
  stroke-opacity: 0.9;
  vector-effect: non-scaling-stroke;
  animation: fm-fold-pulse 1s ease-out infinite;
}
@keyframes fm-fold-pulse {
  0%   { stroke-width: 2;  stroke-opacity: 0.85; }
  80%  { stroke-width: 18; stroke-opacity: 0;    }
  100% { stroke-width: 18; stroke-opacity: 0;    }
}

/* Right pane */
.fm-right {
  grid-area: right;
  background: var(--fm-panel);
  border-left: 1px solid var(--fm-stroke);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fm-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fm-accent);
}

.fm-field input,
.fm-field select {
  background: var(--fm-panel-2);
  border: 1px solid var(--fm-stroke);
  color: var(--fm-ink);
  padding: 8px 10px;
  border-radius: 4px;
  font: inherit;
}

.fm-field input:focus,
.fm-field select:focus {
  outline: none;
  border-color: var(--fm-accent);
}

.thickness-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fm-accent);
}

.colour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
}

.swatch {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--fm-stroke);
  border-radius: 4px;
  background-color: var(--swatch-hex, #888);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}

.swatch:hover { border-color: var(--fm-accent); }
.swatch.active { border-color: var(--fm-accent); box-shadow: 0 0 0 2px var(--fm-accent) inset; }

.swatch-label {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 9px;
  padding: 2px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fm-divider {
  border-top: 1px solid var(--fm-stroke);
  margin: 4px 0;
}

.fm-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12px;
}

.fm-summary .k {
  color: var(--fm-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}

.fm-summary .v {
  color: var(--fm-ink);
  font-weight: 600;
  font-size: 14px;
}

.fm-flip-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.fm-flip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--fm-panel-2);
  color: var(--fm-ink);
  border: 1px solid var(--fm-stroke);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.fm-flip:hover {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
}

.fm-flip svg {
  width: 22px;
  height: 22px;
}

.fm-cta {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.fm-cta:hover {
  border-color: var(--fm-accent);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.4);
}

/* Dimension editing modal */
.dim-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dim-modal[hidden] { display: none; }

.dim-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.dim-modal-card {
  position: relative;
  min-width: 280px;
  max-width: 90vw;
  background: var(--fm-panel);
  border: 1px solid var(--fm-accent);
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(52, 211, 153, 0.18);
  padding: 18px 18px 14px;
  color: var(--fm-ink);
}

.dim-modal-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fm-accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Stacked field rows for the combined length + angle editor. */
.dim-modal-field {
  margin-bottom: 10px;
}
.dim-modal-field[hidden] { display: none; }
.dim-modal-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--emerald-light, #a7f3d0);
  margin-bottom: 4px;
}

.dim-modal-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  background: var(--fm-panel-2);
  border: 1px solid var(--fm-stroke);
  border-radius: 6px;
  margin-bottom: 14px;
}

.dim-modal-row:focus-within {
  border-color: var(--fm-accent);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2);
}

#dim-modal-input,
#dim-modal-angle-input,
#dim-modal-pitch-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fm-ink);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0;
}

.dim-modal-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--fm-accent);
}

.dim-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.dim-modal-actions .fm-flip {
  padding: 8px 14px;
}

.dim-modal-ok {
  padding: 8px 18px;
}

/* Radial menu */
.radial-menu {
  position: fixed;
  width: 220px;
  height: 220px;
  margin-left: -110px;
  margin-top: -110px;
  z-index: 1000;
  pointer-events: none;
}

.radial-menu .radial-item {
  --radius: 84px;
  --start-angle: -90deg;
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: auto;
  background: var(--fm-panel);
  color: var(--fm-ink);
  border: 1px solid var(--fm-accent);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  transform: translate(-50%, -50%)
             rotate(calc(var(--start-angle) + (360deg / var(--n)) * var(--i)))
             translate(var(--radius))
             rotate(calc(-1 * (var(--start-angle) + (360deg / var(--n)) * var(--i))));
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.radial-menu .radial-item:hover,
.radial-menu .radial-item:focus-visible {
  background: var(--fm-accent);
  color: #0a0a0a;
  outline: none;
}

.radial-menu .radial-icon-item {
  padding: 6px 8px;
  width: 56px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.radial-menu .radial-icon {
  width: 40px;
  height: 32px;
  display: block;
}

/* Word-only buttons (Flip, Remove, Delete fold). */
.radial-menu .radial-word-item {
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.radial-tooltip {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 14px);
  background: var(--fm-panel);
  color: var(--fm-ink);
  border: 1px solid var(--fm-accent);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 260px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 1001;
}

.hint { color: var(--fm-accent); font-size: 12px; margin: 0; }
.hint.over-limit { color: #e5484d; font-weight: 600; }

/* Manufacturing-cap flags. Shown on the girth summary value and the
   length-per-piece input whenever the user has pushed past what the folder
   can physically handle. */
#summary-girth.over-limit {
  color: #e5484d;
}
#length-per-piece.over-limit {
  border-color: #e5484d;
  outline: 1px solid rgba(229, 72, 77, 0.35);
}

.painted-controls {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.painted-controls .fm-flip {
  flex: 1;
  padding: 8px 6px;
}

/* Segmented Off / Inside / Outside toggle */
.paint-segmented {
  gap: 0;
  border: 1px solid var(--fm-stroke);
  border-radius: 6px;
  overflow: hidden;
}

.paint-segmented .fm-flip {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--fm-stroke);
  background: transparent;
  color: var(--fm-ink);
}

.paint-segmented .fm-flip:last-child { border-right: 0; }

.paint-segmented .fm-flip.active {
  background: var(--fm-accent);
  color: #0a0a0a;
}

.paint-segmented .fm-flip:not(.active):hover {
  background: rgba(52, 211, 153, 0.1);
  color: var(--fm-accent);
}

.painted-required {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fm-accent);
  margin-left: 6px;
  text-transform: uppercase;
}

.painted-required.satisfied { color: var(--fm-ink); opacity: 0.6; }
.painted-required.satisfied::before { content: '✓ '; }

/* Mobile, single-pane with drawers */
@media (max-width: 900px) {
  body.flashing-maker {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr auto;
    grid-template-areas:
      "topbar"
      "canvas"
      "right";
  }

  .fm-left {
    position: absolute;
    z-index: 10;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .fm-left.open {
    transform: translateX(0);
  }

  .fm-right {
    max-height: 45vh;
    border-left: none;
    border-top: 1px solid var(--fm-stroke);
  }
}

/* Help button in the topbar that re-opens the tutorial */
.fm-help-btn {
  background: transparent;
  color: var(--fm-ink);
  border: 1px solid var(--fm-stroke);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.fm-help-btn:hover,
.fm-help-btn:focus-visible {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  outline: none;
}

.fm-help-btn svg {
  width: 20px;
  height: 20px;
}

/* First-run tutorial popup */
.fm-tutorial {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* display:flex above would override the UA default [hidden]{display:none}
   because both have the same specificity but the class rule comes later.
   Re-assert display:none for the hidden state. */
.fm-tutorial[hidden] {
  display: none;
}

.fm-tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.fm-tutorial-card {
  position: relative;
  background: var(--fm-panel);
  color: var(--fm-ink);
  border: 1px solid var(--fm-accent);
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.fm-tutorial-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--fm-ink);
}

.fm-tutorial-intro {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fm-accent);
}

.fm-tutorial-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fm-tutorial-steps li {
  padding-left: 20px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fm-ink);
}

.fm-tutorial-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fm-accent);
}

.fm-tutorial-step-title {
  display: block;
  font-weight: 600;
  color: var(--fm-accent);
  margin-bottom: 2px;
  font-size: 14px;
}

.fm-tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fm-tutorial-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fm-accent);
  cursor: pointer;
  user-select: none;
}

.fm-tutorial-skip input {
  accent-color: var(--fm-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .fm-tutorial-card {
    padding: 20px 22px;
  }
  .fm-tutorial-card h2 {
    font-size: 19px;
  }
}

/* Quote badge + Review&Send button in the topbar */
.fm-quote-badge {
  background: transparent;
  color: var(--fm-ink);
  border: 1px solid var(--fm-stroke);
  border-radius: 8px;
  height: 34px;
  padding: 0 10px 0 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.fm-quote-badge:hover,
.fm-quote-badge:focus-visible {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  outline: none;
}

.fm-quote-badge svg {
  width: 18px;
  height: 18px;
}

.fm-quote-badge-count {
  background: var(--fm-accent);
  color: #0a0a0a;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.fm-quote-send {
  background: var(--fm-accent);
  color: #0a0a0a;
  border: 1px solid var(--fm-accent);
  border-radius: 8px;
  height: 34px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: filter 0.12s ease;
}

.fm-quote-send:hover,
.fm-quote-send:focus-visible {
  filter: brightness(1.1);
  outline: none;
}

/* Quote drawer (slide-in panel listing designs added so far) */
.fm-quote-drawer {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: flex;
  justify-content: flex-end;
}

.fm-quote-drawer[hidden] {
  display: none;
}

.fm-quote-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.fm-quote-drawer-panel {
  position: relative;
  width: min(440px, 92vw);
  height: 100vh;
  background: var(--fm-panel);
  border-left: 1px solid var(--fm-stroke);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
}

.fm-quote-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--fm-stroke);
}

.fm-quote-drawer-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--fm-ink);
}

.fm-quote-drawer-close {
  background: transparent;
  color: var(--fm-ink);
  border: 1px solid var(--fm-stroke);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.fm-quote-drawer-close:hover,
.fm-quote-drawer-close:focus-visible {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  outline: none;
}

.fm-quote-drawer-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fm-quote-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--fm-stroke);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.fm-quote-item-thumb {
  width: 80px;
  height: 80px;
  border: 1px solid var(--fm-stroke);
  border-radius: 8px;
  background: #0a0a0a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fm-quote-item-thumb svg {
  width: 100%;
  height: 100%;
}

.fm-quote-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fm-quote-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-quote-item-meta {
  font-size: 12px;
  color: var(--emerald-light, #7fe3b8);
}

.fm-quote-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.fm-quote-item-btn {
  background: transparent;
  color: var(--fm-ink);
  border: 1px solid var(--fm-stroke);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.fm-quote-item-btn:hover,
.fm-quote-item-btn:focus-visible {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  outline: none;
}

.fm-quote-drawer-empty {
  color: var(--emerald-light, #7fe3b8);
  padding: 24px 4px;
  text-align: center;
  font-size: 14px;
}

.fm-quote-drawer-foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--fm-stroke);
}

.fm-quote-drawer-foot > button {
  flex: 1 1 auto;
}

/* Lightweight toast used for "Added to quote" confirmations */
.fm-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fm-panel);
  color: var(--fm-ink);
  border: 1px solid var(--fm-accent);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  z-index: 2100;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.fm-toast[hidden] {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Guided Draw — floating directional pad + its segment prompt
   ───────────────────────────────────────────────────────────────────────── */

.fm-guided-pad {
  position: absolute;
  top: 60px;
  left: 16px;
  z-index: 950;
  width: 216px;
  background: rgba(17, 17, 17, 0.92);
  border: 1px solid var(--fm-accent);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(52, 211, 153, 0.14);
  backdrop-filter: blur(6px);
  color: var(--fm-ink);
  user-select: none;
  touch-action: none;
}

.fm-guided-pad[hidden] { display: none; }

.fm-guided-pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--fm-stroke);
  cursor: grab;
}

.fm-guided-pad-head:active { cursor: grabbing; }

.fm-guided-pad-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fm-accent);
}

.fm-guided-pad-x {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--fm-ink);
  cursor: pointer;
  padding: 0;
}

.fm-guided-pad-x:hover {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
}

.fm-guided-pad-x svg {
  width: 14px;
  height: 14px;
}

.fm-guided-pad-compass {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px;
}

.fm-guided-pad-dir {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fm-panel-2);
  border: 1px solid var(--fm-stroke);
  border-radius: 8px;
  color: var(--fm-ink);
  cursor: pointer;
  padding: 0;
  min-height: 52px;
  transition: border-color 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.fm-guided-pad-dir:hover:not(:disabled) {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  background: rgba(52, 211, 153, 0.08);
}

.fm-guided-pad-dir:active:not(:disabled) {
  background: rgba(52, 211, 153, 0.18);
}

.fm-guided-pad-dir:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.fm-guided-pad-dir svg {
  width: 22px;
  height: 22px;
}

.fm-guided-pad-dir-centre {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fm-guided-pad-dir-centre::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fm-accent);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}

.fm-guided-pad-row {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
}

.fm-guided-pad-btn {
  flex: 1 1 0;
  min-height: 36px;
  padding: 0 10px;
  background: var(--fm-panel-2);
  border: 1px solid var(--fm-stroke);
  border-radius: 6px;
  color: var(--fm-ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fm-guided-pad-btn:hover:not(:disabled) {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
}

.fm-guided-pad-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.fm-guided-pad-finish {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px;
  padding: 10px 12px;
  background: var(--fm-accent);
  color: #061509;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fm-guided-pad-finish:hover {
  filter: brightness(1.08);
}

.fm-guided-pad-finish:disabled {
  cursor: not-allowed;
  filter: saturate(0.4) brightness(0.8);
}

.fm-guided-pad-hint {
  margin: 10px 12px 12px;
  padding: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--emerald-light, #a7f3d0);
}

/* Active toolbar state when Guided Draw is open. */
#tool-guided.active {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  background: rgba(52, 211, 153, 0.08);
}

/* Segment prompt modal reuses .dim-modal skin + card; add extras only. */
.guided-modal-direction {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--emerald-light, #a7f3d0);
}

.guided-modal-hint {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--emerald-light, #a7f3d0);
}

#guided-modal-length,
#guided-modal-angle {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fm-ink);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0;
}

/* Pad chips showing current Start / End attachments. */
.fm-guided-pad-chips {
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
  flex-wrap: wrap;
}

.fm-guided-pad-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--fm-panel-2);
  border: 1px solid var(--fm-stroke);
  border-radius: 999px;
  color: var(--fm-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1.2;
}

.fm-guided-pad-chip[hidden] { display: none; }

.fm-guided-pad-chip:hover {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
}

.fm-guided-pad-chip-k {
  color: var(--emerald-light, #a7f3d0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}

.fm-guided-pad-chip-v {
  font-size: 12px;
  font-weight: 700;
}

/* Attachment modal reuses .dim-modal skin + wider card. */
.attachment-modal-card {
  min-width: 320px;
  max-width: 420px;
}

.attachment-modal-sub {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--emerald-light, #a7f3d0);
}

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.attachment-grid-flip {
  grid-template-columns: repeat(2, 1fr);
}

.attachment-grid-text {
  grid-template-columns: repeat(2, 1fr);
}

.attachment-grid[hidden] { display: none; }

.attachment-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  min-height: 76px;
  background: var(--fm-panel-2);
  border: 1px solid var(--fm-stroke);
  border-radius: 8px;
  color: var(--fm-ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

.attachment-opt:hover {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  background: rgba(52, 211, 153, 0.08);
}

.attachment-opt.active {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  background: rgba(52, 211, 153, 0.14);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35);
}

.attachment-opt svg {
  width: 40px;
  height: 32px;
}

.attachment-opt-text {
  padding: 14px 10px;
  background: var(--fm-panel-2);
  border: 1px solid var(--fm-stroke);
  border-radius: 8px;
  color: var(--fm-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 48px;
}

.attachment-opt-text:hover {
  border-color: var(--fm-accent);
  color: var(--fm-accent);
  background: rgba(52, 211, 153, 0.08);
}

.attachment-modal-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--emerald-light, #a7f3d0);
  background: rgba(52, 211, 153, 0.08);
  border-left: 2px solid var(--fm-accent);
  border-radius: 4px;
}

.attachment-modal-hint[hidden] { display: none; }

.attachment-modal-actions {
  justify-content: space-between;
}

.attachment-modal-actions .fm-flip {
  padding: 8px 14px;
}