/* The Screens builder (Board 2's Main, Builder drop and Motion boards): the component tiles,
   the device on the stage, the selection, the floating settings card, the editing-layer bar and
   the marks of a drag. The drop has five beats (hover, pick up, over the screen, drop,
   settled); with reduced motion each is a short fade. */

/* Tile drawings: one set of shapes, coloured by the skin */
.tile-art { display: block; flex: none; stroke: var(--ic-ink); }
.tile-art.s-strong, .tile-art .s-strong { stroke: var(--ic-strong); }
.tile-art .s-strong-line { stroke: var(--ic-strong-line); }
.tile-art .s-on { stroke: var(--ic-on-strong); }
.tile-art .s-track { stroke: var(--ic-track); }
.tile-art .s-white { stroke: #ffffff; }
.tile-art .f-soft { fill: var(--ic-soft); }
.tile-art .f-ink { fill: var(--ic-ink); }
.tile-art .f-strong { fill: var(--ic-strong); }
.tile-art .f-white { fill: #ffffff; }

/* Palette */
.palette .panel-section { gap: 8px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile {
  position: relative;
  min-width: 0;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  font-family: var(--ui);
  font-size: var(--tile-size);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: var(--surface);
  border: var(--bwc) solid var(--line);
  border-radius: var(--tile-r);
  box-shadow: var(--shadow-c);
  cursor: grab;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 #271813; }
:root[data-skin="clean"] .tile:hover { box-shadow: 0 8px 18px -10px rgba(28, 34, 48, 0.4); }
.tile:active { transform: translateY(0); }
.tile.is-taken { color: var(--muted); background: var(--surface2); border: 2px dashed var(--line); box-shadow: none; transform: none; cursor: grabbing; }
:root[data-skin="clean"] .tile.is-taken { border: 1.5px dashed var(--accent); }
.tile.is-taken .tile-art { opacity: 0.35; }
.tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-touch { height: 84px; font-size: 12px; cursor: pointer; }
.moves {
  position: absolute;
  right: 4px;
  top: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  font-family: var(--ui);
  font-size: 7.5px;
  line-height: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #271813;
  background: #ff5f1f;
  border: 1.5px solid #271813;
  border-radius: 0;
}
:root[data-skin="clean"] .moves { font-size: 9px; line-height: 14px; letter-spacing: 0; text-transform: none; color: var(--accent-ink); background: var(--tint); border: 0; border-radius: 999px; }
.palette-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; font-size: 12.5px; font-weight: 600; background: var(--tint); border: 2px solid var(--line); }
:root[data-skin="clean"] .palette-note { color: var(--accent-ink); border: 0; border-radius: var(--rc); }

/* The device on the stage */
.stage-title { position: absolute; z-index: 2; height: 22px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.dev { position: absolute; z-index: 1; }
.view-screens .dev, .view-screens .stage-title { transition: left 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.dev-zoom { transform-origin: 0 0; }
.dev .frame { outline: 5px solid transparent; outline-offset: 10px; transition: outline-color 200ms ease; }
.dev.is-drop .frame { outline-color: var(--sel); }
.dev .wf { -webkit-user-select: none; user-select: none; }
.dev .wf-part { cursor: default; }
.view-screens .dev .wf { cursor: default; }

/* Selection (in screen pixels, so it scales with the zoom) */
.sel-box { position: absolute; z-index: 30; pointer-events: none; outline: 2.5px solid var(--sel); outline-offset: 3px; }
:root[data-skin="clean"] .sel-box { outline-width: 2px; }
.sel-label {
  position: absolute;
  left: -4px;
  top: -31px;
  padding: 3px 7px;
  white-space: nowrap;
  font-family: var(--ui);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #271813;
  background: #ff5f1f;
  border: 2px solid #271813;
  border-radius: 0;
}
:root[data-skin="clean"] .sel-label { letter-spacing: 0; text-transform: none; color: #ffffff; background: #9a3412; border: 0; border-radius: 6px; }
.sel-box.label-below .sel-label { top: auto; bottom: -31px; }
.sel-h { position: absolute; width: 10px; height: 10px; background: #ffffff; border: 2px solid #271813; }
:root[data-skin="clean"] .sel-h { border-color: #9a3412; }
.sel-nw { left: -8px; top: -8px; }
.sel-ne { right: -8px; top: -8px; }
.sel-se { right: -8px; bottom: -8px; }
.sel-sw { left: -8px; bottom: -8px; }
.sel-n { left: 50%; top: -8px; margin-left: -5px; }
.sel-s { left: 50%; bottom: -8px; margin-left: -5px; }
.sel-e { right: -8px; top: 50%; margin-top: -5px; }
.sel-w { left: -8px; top: 50%; margin-top: -5px; }
.sel-box.is-free .sel-h { pointer-events: auto; touch-action: none; }
.sel-box.is-free .sel-nw, .sel-box.is-free .sel-se { cursor: nwse-resize; }
.sel-box.is-free .sel-ne, .sel-box.is-free .sel-sw { cursor: nesw-resize; }
.sel-box.is-free .sel-n, .sel-box.is-free .sel-s { cursor: ns-resize; }
.sel-box.is-free .sel-e, .sel-box.is-free .sel-w { cursor: ew-resize; }
.dev .wf-free > .wf-part { cursor: move; }

/* Beat 5, settled: the outline draws in, the handles pop one by one */
.sel-box.is-new { animation: sel-draw 240ms 260ms ease-out both; }
.sel-box.is-new .sel-label { animation: fade-in 200ms 360ms ease both; }
.sel-box.is-new .sel-h { animation: handle-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.5) both; }
@keyframes sel-draw { from { outline-color: transparent; outline-offset: 14px; } }
@keyframes handle-pop { from { transform: scale(0); } }

/* Beat 4, drop: the new part squashes and a ring ripples out */
.dev .wf-landed { animation: part-land 460ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.dev .wf-landed::after {
  content: "";
  position: absolute;
  inset: -4px 12px;
  z-index: 5;
  pointer-events: none;
  border: 3px solid var(--sel);
  border-radius: 14px;
  animation: part-ring 560ms 160ms ease-out both;
}
@keyframes part-land {
  0% { opacity: 0; transform: translateY(-6px) scale(0.96); }
  45% { opacity: 1; transform: translateY(0) scale(1.01); }
  65% { transform: scale(1, 0.94); }
  100% { transform: none; }
}
@keyframes part-ring { from { opacity: 0.9; transform: scale(0.97); } to { opacity: 0; transform: scale(1.08); } }

/* Beat 3, over the screen: the rows part and a drop line grows from the middle */
.wf-slot {
  position: relative;
  flex: none;
  width: calc(100% - 32px);
  max-width: calc(var(--wf-max-w) - 32px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: var(--tint);
  border: 2px dashed var(--sel);
  border-radius: 12px;
  animation: slot-open 200ms ease-out both;
}
.wf-slot::before { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; height: 3px; background: var(--sel); animation: line-grow 200ms ease-out both; }
.wf-slot-label { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
:root[data-skin="clean"] .wf-slot-label { letter-spacing: 0; text-transform: none; }
.wf-slot-label::before, .wf-slot-label::after { content: ""; position: absolute; top: -12px; width: 11px; height: 11px; background: #ffffff; border: 3px solid var(--sel); border-radius: 50%; animation: fade-in 200ms 120ms ease both; }
.wf-slot-label::before { left: -10px; }
.wf-slot-label::after { right: -10px; }
.wf-region.is-empty > .wf-slot { margin: 8px auto; }
@keyframes slot-open { from { height: 0; opacity: 0; } }
@keyframes line-grow { from { transform: scaleX(0); } }

/* Free placement and guides while dragging */
.drop-free { position: absolute; z-index: 25; pointer-events: none; background: var(--tint); border: 2px dashed var(--sel); }
:root[data-skin="clean"] .drop-free { border-radius: 8px; }
.guide { position: absolute; z-index: 26; pointer-events: none; background: var(--measure); }
.guide-x { top: 0; bottom: 0; width: 1px; }
.guide-y { left: 0; right: 0; height: 1px; }
.grid-lines {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 95, 31, 0.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 95, 31, 0.16) 1px, transparent 1px);
  background-size: 8px 8px;
}
:root[data-skin="clean"] .grid-lines { background-image: linear-gradient(to right, rgba(154, 52, 18, 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(154, 52, 18, 0.12) 1px, transparent 1px); }

/* "Snaps into Content" beside the screen */
.drop-hint { position: absolute; z-index: 7; display: flex; align-items: center; pointer-events: none; animation: fade-in 160ms ease both; }
.drop-hint-line { width: 26px; height: 0; flex: none; border-top: 3px dashed #271813; }
:root[data-skin="clean"] .drop-hint-line { border-top: 2px dashed #9a3412; }
.drop-chip { display: flex; align-items: center; gap: 8px; margin-left: 10px; padding: 7px 10px; color: #271813; background: #ff5f1f; border: 2px solid #271813; box-shadow: 3px 3px 0 #271813; white-space: nowrap; }
:root[data-skin="clean"] .drop-chip { color: #ffffff; background: #9a3412; border: 0; border-radius: 12px; box-shadow: 0 10px 22px -10px rgba(154, 52, 18, 0.7); }
.drop-chip b { font-size: var(--lsz); font-weight: 700; letter-spacing: var(--ls); text-transform: var(--lt); }
.drop-chip b + span { font-size: 11.5px; }

/* "Release to drop · Esc cancels" at the top of the canvas */
.drag-chip {
  position: absolute;
  left: 50%;
  top: 16px;
  z-index: 8;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  pointer-events: none;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
  background: var(--dark);
  border-radius: 0;
  box-shadow: var(--dark-shadow);
  animation: fade-in 160ms ease both;
}
:root[data-skin="clean"] .drag-chip { font-size: 13px; letter-spacing: 0; text-transform: none; border-radius: 12px; }
.drag-chip i { width: 4px; height: 4px; flex: none; background: #ff5f1f; border-radius: 50%; }
:root[data-skin="clean"] .drag-chip i { background: #f1e9d8; }
.drag-chip i + span { font-weight: 500; }

/* Beat 2, pick up: the card under the pointer tilts and grows */
.drag-ghost {
  --ghost-at: translate(calc(-100% + 8px), calc(-100% + 6px));
  position: fixed;
  z-index: 95;
  width: 156px;
  height: 102px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  font-family: var(--display);
  font-size: var(--card-title);
  font-weight: var(--hw);
  letter-spacing: var(--hs);
  text-transform: var(--ht);
  color: var(--ink);
  background: #ffffff;
  border: 3px solid #271813;
  box-shadow: 9px 9px 0 rgba(39, 24, 19, 0.9);
  transform: var(--ghost-at) rotate(-4deg) scale(1.06);
  transition: transform 200ms ease;
  animation: ghost-lift 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
:root[data-skin="clean"] .drag-ghost { background: #fffdf8; border: 1px solid #e6dccb; border-radius: 14px; box-shadow: 0 24px 40px -16px rgba(28, 34, 48, 0.45); }
.drag-ghost.is-over { transform: var(--ghost-at) rotate(-2deg) scale(0.92); }
.drag-ghost.is-still { transform: var(--ghost-at); transition: none; animation: fade-in 120ms ease both; }
@keyframes ghost-lift { from { transform: var(--ghost-at) rotate(0deg) scale(1); } }
.fly-layer { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.app.is-dragging, .app.is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* Editing layer: Screen, its overlays, + */
.layer-bar { position: absolute; left: 16px; top: 16px; z-index: 6; display: flex; align-items: stretch; background: #ffffff; border: 2px solid #271813; box-shadow: 3px 3px 0 #271813; }
:root[data-skin="clean"] .layer-bar { align-items: center; gap: 4px; padding: 4px; background: #fffdf8; border: 1px solid #e6dccb; border-radius: 12px; box-shadow: 0 1px 2px rgba(28, 34, 48, 0.05), 0 10px 28px -12px rgba(28, 34, 48, 0.18); }
.app:not(.has-panel) .layer-bar { left: 64px; }
.layer-label { display: flex; align-items: center; padding: 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5b4138; }
:root[data-skin="clean"] .layer-label { padding: 0 8px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #474e5f; }
.layer-btn { height: 32px; max-width: 180px; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #271813; background: #ffffff; border: 0; border-left: 2px solid #271813; border-radius: 0; }
.layer-btn.is-on { background: #ff5f1f; }
.layer-btn:hover:not(.is-on) { background: #ffe9e3; }
:root[data-skin="clean"] .layer-btn { height: 30px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #1c2230; background: transparent; border: 0; border-radius: 8px; }
:root[data-skin="clean"] .layer-btn.is-on { font-weight: 700; color: #9a3412; background: rgba(154, 52, 18, 0.1); }
:root[data-skin="clean"] .layer-btn:hover:not(.is-on) { background: #f1e9d8; }
.layer-bar .anchor { display: flex; }
.layer-add { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; color: #271813; background: #ffffff; border: 0; border-left: 2px solid #271813; border-radius: 0; }
.layer-add:hover, .layer-add.is-on { background: #ffe9e3; }
:root[data-skin="clean"] .layer-add { width: 30px; height: 30px; color: #1c2230; background: transparent; border: 1px dashed #d3c6ad; border-radius: 8px; }
:root[data-skin="clean"] .layer-add:hover, :root[data-skin="clean"] .layer-add.is-on { background: #f1e9d8; }

/* The floating settings card */
.set-card { position: absolute; z-index: 5; width: 300px; display: flex; flex-direction: column; }
.set-card > .set-head, .set-card > .set-foot { flex: none; }
.set-line { position: absolute; left: calc(-34px - var(--bw)); width: 32px; height: 0; border-top: 3px dashed #ff5f1f; pointer-events: none; }
.set-line::before { content: ""; position: absolute; left: -5px; top: -8px; width: 12px; height: 12px; background: var(--sel); border: 2px solid #271813; border-radius: 50%; }
:root[data-skin="clean"] .set-line { border-top: 2px dashed #9a3412; }
:root[data-skin="clean"] .set-line::before { top: -7px; border: 0; }
.set-head { display: flex; align-items: center; gap: 9px; padding: 10px 10px 10px 12px; }
:root[data-skin="clean"] .set-head { border-radius: 13px 13px 0 0; }
.set-icon { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 2px solid #271813; border-radius: var(--rs); }
:root[data-skin="clean"] .set-icon { background: #f1e9d8; border: 0; }
.set-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.set-name .card-title, .set-name .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.set-card > .set-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.set-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; }
.set-row > .switch { justify-self: start; }
.set-block { display: flex; flex-direction: column; gap: 6px; }
.set-block .label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.set-hint { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--muted); }
.set-lines { font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre; overflow-x: auto; }
.set-more { display: block; }
.set-more > summary { display: flex; align-items: center; gap: 6px; padding: 2px 0; list-style: none; cursor: pointer; font-family: var(--ui); font-size: var(--lsz); font-weight: var(--lw); letter-spacing: var(--ls); text-transform: var(--lt); color: var(--ink); }
.set-more > summary::-webkit-details-marker { display: none; }
.set-more > summary .i { transition: transform 140ms ease; }
.set-more[open] > summary .i { transform: rotate(90deg); }
.set-more > .set-block { margin-top: 10px; }
.set-ix { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.set-ix-head { display: flex; align-items: center; gap: 8px; }
.ix { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface2); border: var(--bwc) solid var(--line); border-radius: var(--rc); }
.ix-top { display: flex; gap: 6px; }
.ix-top .select.has-icon > .i:first-child { color: var(--accent-ink); }
.ix-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ix-one { display: grid; }
.ix .field-sm { width: 100%; }
.ix-built-in { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ix-built-in li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.set-tabs { display: flex; flex-direction: column; gap: 6px; }
.set-tabs .set-row .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
:root[data-skin="clean"] .set-foot { border-radius: 0 0 13px 13px; }
.set-foot .btn-danger { height: 30px; }
.set-foot [aria-disabled="true"] { opacity: 0.45; cursor: default; }
.set-card.is-new { animation: card-slide 240ms 320ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes card-slide { from { opacity: 0; transform: translateX(-12px); } }

/* The outline of the device you just left (Device tool) */
.size-ghost { position: absolute; z-index: 3; pointer-events: none; border: 3px dashed #ff5f1f; border-radius: 40px; animation: ghost-fade 4s ease forwards; }
:root[data-skin="clean"] .size-ghost { border: 2px dashed rgba(154, 52, 18, 0.55); }
.size-ghost > span { position: absolute; left: 0; top: -25px; white-space: nowrap; }
@keyframes ghost-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile:hover { transition: none; transform: none; }
  .wf-slot, .wf-slot::before, .wf-slot-label::before, .wf-slot-label::after, .drop-hint, .drag-chip, .sel-box.is-new, .sel-box.is-new .sel-label, .sel-box.is-new .sel-h, .set-card.is-new, .dev .wf-landed { animation: fade-in 120ms ease both; }
  .dev .wf-landed::after { display: none; }
  .drag-ghost { transform: var(--ghost-at); transition: none; animation: fade-in 120ms ease both; }
  .dev .frame, .view-screens .dev, .view-screens .stage-title { transition: none; }
}