/* The Flowchart (Board 2's Flowchart board): the side panel's legend and screen list, and the
   canvas of screen cards, start dots and elbowed lines. Sizes match core/flowmap.js, which
   works out where every row sits, so heights here are fixed. */

/* Side panel */
.panel-body.fc-panel { gap: 16px; padding: 14px 16px 24px; }
.fc-legend { display: flex; flex-direction: column; gap: 9px; padding: 12px; background: var(--surface2); border: var(--bwc) solid #271813; border-radius: var(--rc); }
:root[data-skin="clean"] .fc-legend { border-color: #e6dccb; }
.fc-legend-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.35; }
.fc-legend-icon { width: 40px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.fc-legend-line { position: relative; width: 40px; height: 12px; flex: none; }
.fc-legend-line .fc-dot { left: 0; top: 1px; }
.fc-legend-arrow { position: absolute; left: 10px; top: 0; fill: none; stroke: #271813; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-skin="clean"] .fc-legend-arrow { stroke: #474e5f; }
.fc-legend-plan { width: 28px; height: 16px; border: 2px dashed #271813; border-radius: var(--rs); }
:root[data-skin="clean"] .fc-legend-plan { border: 1.5px dashed #b9ab92; }

.fc-outline { display: flex; flex-direction: column; }
.fc-outline > .eyebrow { margin-bottom: 6px; }
.fc-orow { height: 34px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; font-family: var(--ui); font-size: 14px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(39, 24, 19, 0.2); border-radius: 0; }
.fc-orow:last-child { border-bottom: 0; }
.fc-orow:hover:not(.is-on) { background: var(--surface2); }
.fc-orow.is-on { background: #ffe9e3; border: 2px solid #271813; }
:root[data-skin="clean"] .fc-orow { border-bottom-color: #e6dccb; }
:root[data-skin="clean"] .fc-orow:hover:not(.is-on) { background: #f7f1e3; }
:root[data-skin="clean"] .fc-orow.is-on { background: rgba(154, 52, 18, 0.08); border: 0; border-radius: 9px; }
.fc-orow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fc-orow.is-on .fc-orow-name { font-weight: 700; }
.fc-orow.is-planned .fc-orow-name { color: var(--muted); }
.fc-orow .mono, .fc-orow .tag-dash { flex: none; }
.fc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Pills: "1" for one control, "Multiple" for a repeated one */
.fc-pill { height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1; border-radius: 0; }
.fc-one { min-width: 18px; padding: 0 4px; color: #271813; background: #ff5f1f; border: 2px solid #271813; }
.fc-many { padding: 0 5px; font-size: 9.5px; color: #ffffff; background: #271813; border: 2px solid #271813; }
:root[data-skin="clean"] .fc-pill { border-radius: 999px; }
:root[data-skin="clean"] .fc-one { padding: 0 5px; color: #1c2230; background: #f1e9d8; border: 0; }
:root[data-skin="clean"] .fc-many { padding: 0 6px; background: #9a3412; border: 0; }

/* Canvas */
.fc-scroll.has-grid {
  background-image: linear-gradient(rgba(39, 24, 19, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 24, 19, 0.12) 1px, transparent 1px);
  background-position: 10.5px 10.5px;
}
:root[data-skin="clean"] .fc-scroll.has-grid { background-image: linear-gradient(rgba(28, 34, 48, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 34, 48, 0.08) 1px, transparent 1px); }
.fc-stage { position: relative; }
.fc-zoom { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fc-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fc-line { fill: none; stroke: #271813; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.fc-line.is-planned { stroke-dasharray: 6 6; }
.fc-line.is-hot { stroke: #ff5f1f; stroke-width: 3px; }
.fc-arrow path { fill: #271813; }
.fc-arrow.is-hot path { fill: #ff5f1f; }
:root[data-skin="clean"] .fc-line { stroke: #474e5f; stroke-width: 1.75px; }
:root[data-skin="clean"] .fc-line.is-hot { stroke: #9a3412; stroke-width: 2.25px; }
:root[data-skin="clean"] .fc-arrow path { fill: #474e5f; }
:root[data-skin="clean"] .fc-arrow.is-hot path { fill: #9a3412; }
.fc-dot { position: absolute; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #ff5f1f; border: 2px solid #271813; pointer-events: none; }
:root[data-skin="clean"] .fc-dot { background: #9a3412; border-color: #fffdf8; box-shadow: 0 0 0 1px #9a3412; }

/* Screen cards */
.fc-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(3px - var(--bw));
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.fc-card.is-hot, .fc-planned.is-hot { outline: 3px solid #ff5f1f; outline-offset: 4px; }
:root[data-skin="clean"] .fc-card.is-hot, :root[data-skin="clean"] .fc-planned.is-hot { outline: 2px solid #9a3412; }
.fc-card.is-moving, .fc-planned.is-moving { z-index: 2; cursor: grabbing; }
.fc-card.is-moving { box-shadow: 9px 9px 0 #271813; }
:root[data-skin="clean"] .fc-card.is-moving { box-shadow: 0 2px 6px rgba(28, 34, 48, 0.12), 0 24px 44px -18px rgba(28, 34, 48, 0.45); }
.fc-stage.is-moving { cursor: grabbing; }
.fc-head { height: 38px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; background: var(--head); border-bottom: 2px solid #271813; cursor: grab; }
:root[data-skin="clean"] .fc-head { border-bottom: 1px solid #e6dccb; }
.fc-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-family: var(--display);
  font-size: var(--card-title);
  font-weight: var(--hw);
  letter-spacing: var(--hs);
  text-transform: var(--ht);
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: inherit;
}
button.fc-name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fc-head .tag-accent { flex: none; }
.fc-open.icon-sm { width: 26px; height: 26px; }
.fc-picture { flex: none; display: flex; flex-direction: column; }
.fc-picture.is-open { height: 110px; }
.fc-toggle { height: 26px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-family: var(--ui); font-size: 11.5px; font-weight: 600; text-align: left; color: var(--muted); background: transparent; border: 0; }
button.fc-toggle:hover { color: var(--ink); }
.fc-peek { position: relative; display: block; flex: none; height: 76px; margin: 0 10px; overflow: hidden; background: #fbf8f1; border: var(--bwc) solid var(--line); border-radius: var(--rs); pointer-events: none; }
.fc-peek-zoom { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fc-label { height: 20px; flex: none; display: flex; align-items: center; margin-top: 8px; padding: 0 10px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
:root[data-skin="clean"] .fc-label { font-family: var(--ui); font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.fc-label.is-goes { border-top: 1px dashed #271813; }
:root[data-skin="clean"] .fc-label.is-goes { border-top-color: #d3c6ad; }
.fc-row { width: 100%; height: 24px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; font-family: var(--ui); font-size: 12.5px; text-align: left; white-space: nowrap; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
.fc-row-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fc-row .i, .fc-ov-row .i, .fc-ov-title .i { color: var(--ink); }
.fc .i .fill-accent { fill: currentColor; }
.i .fill-play { fill: #ff5f1f; stroke: #271813; }
:root[data-skin="clean"] .i .fill-play { fill: #9a3412; stroke: #9a3412; }
button.fc-row:hover, button.fc-ov-row:hover { background: rgba(255, 95, 31, 0.1); }
:root[data-skin="clean"] button.fc-row:hover, :root[data-skin="clean"] button.fc-ov-row:hover { background: rgba(154, 52, 18, 0.05); }
.fc-row.is-hot { font-weight: 700; background: #ffe9e3; }
:root[data-skin="clean"] .fc-row.is-hot { background: rgba(154, 52, 18, 0.08); }
.fc-row.is-back, .fc-ov-row.is-back { color: var(--muted); }
.fc-row.is-empty { margin-top: 8px; color: var(--muted); }
.fc-back { width: 14px; flex: none; font-size: 13px; font-weight: 700; text-align: center; }
.fc-dest { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.fc-dest.is-planned { color: var(--muted); text-decoration: underline dashed; text-underline-offset: 3px; }
.fc-row.is-back .fc-dest { color: var(--ink); }

/* Overlays inside a card */
.fc-ov { flex: none; display: flex; flex-direction: column; margin: 8px 10px 0; padding: 0 8px; background: #ffe9e3; border: 2px dashed #271813; border-radius: var(--rs); }
:root[data-skin="clean"] .fc-ov { background: rgba(154, 52, 18, 0.06); border: 1.5px dashed #c9a58f; }
.fc-ov-title { height: 22px; flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.fc-ov-title .fc-row-text { flex: 0 1 auto; }
.fc-ov-title .tag { padding: 0 5px; font-size: 9.5px; }
.fc-ov-row { width: 100%; height: 20px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0; font-family: var(--ui); font-size: 12px; text-align: left; white-space: nowrap; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
.fc-ov-row.is-hot { font-weight: 700; }

/* Planned screens */
.fc-planned { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 12px; background: rgba(255, 255, 255, 0.55); border: 3px dashed #271813; border-radius: var(--r); cursor: grab; }
:root[data-skin="clean"] .fc-planned { background: rgba(255, 253, 248, 0.6); border: 1.5px dashed #b9ab92; }
.fc-planned-top { display: flex; align-items: center; gap: 8px; }
.fc-planned-top .fc-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.fc-planned-top .tag-dash { flex: none; }
.fc-planned-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* The planned-card dialog */
.dlg-form { display: flex; flex-direction: column; gap: 12px; }
.dlg-field { gap: 6px; }

/* The flowchart on the print sheet */
.fc-print { position: relative; }