:root {
  --ak-tongue: #1dd3cd65;
  --ak-groove: #3c3c3c4a;
}

.info-circle-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #0009);
}

.account-state-card .info-circle-icon { width: 16px; height: 16px; }

.plank-live-preview {
  overflow: visible;
  isolation: isolate;
}

.piece-opacity-control {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 8px 0;
  --piece-opacity-track: linear-gradient(to right, #fff 0%, #fff calc(var(--piece-opacity, 1) * 100%),
    #2b2b2b calc(var(--piece-opacity, 1) * 100%), #2b2b2b 100%);
}
.piece-opacity-control[for="planks-fill-opacity"] { --piece-opacity: var(--planks-fill-opacity, 1); }
.piece-opacity-control[for="tiles-fill-opacity"] { --piece-opacity: var(--tiles-fill-opacity, 1); }
.piece-opacity-control > img { flex: 0 0 24px; width: 24px; height: 24px; }
.piece-opacity-control input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 40px; width: 0; height: 28px; margin: 0; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.piece-opacity-control input[type="range"]::-webkit-slider-runnable-track {
  box-sizing: border-box; height: 14px; border: 1.25px solid #2b2b2b; border-radius: 999px;
  background: var(--piece-opacity-track);
}
.piece-opacity-control input[type="range"]::-moz-range-track {
  box-sizing: border-box; height: 14px; border: 1.25px solid #2b2b2b; border-radius: 999px;
  background: var(--piece-opacity-track);
}
.piece-opacity-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; width: 14px; height: 14px; margin-top: -1.25px;
  border: 1.25px solid #2b2b2b; border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px 2px #0008;
}
.piece-opacity-control input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; width: 14px; height: 14px;
  border: 1.25px solid #2b2b2b; border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px 2px #0008;
}
.piece-opacity-control input[type="range"]:focus-visible {
  outline: 2px solid var(--ak-accent2, #03747f); outline-offset: 3px; border-radius: 999px;
}
#shape-editor #planks-texture-layer .board { fill-opacity: var(--planks-fill-opacity, 1); }
#shape-editor #tiles-texture-layer .tile-fill { fill-opacity: var(--tiles-fill-opacity, 1); }
.plank-preview-fill { opacity: var(--planks-fill-opacity, 1); }
/* Fade only offcut fills; preserve their existing tint and solid cut outlines. */
#shape-editor #planks-loss-layer polygon[stroke="none"][fill-opacity] { opacity: var(--planks-fill-opacity, 1); }
#shape-editor #tiles-loss-layer polygon[stroke="none"][fill-opacity] { opacity: var(--tiles-fill-opacity, 1); }
html[data-mode="planks"] #shape-editor #cutreuse-room-fill { fill-opacity: var(--planks-fill-opacity, 1); }
html[data-mode="tiles"] #shape-editor #cutreuse-room-fill { fill-opacity: var(--tiles-fill-opacity, 1); }

.plank-live-preview::before,
.plank-live-preview::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}

.plank-live-preview::before {
  inset: -5px 0 0 -5px;
  border-top: 5px solid var(--ak-tongue);
  border-left: 5px solid var(--ak-tongue);
}

.plank-live-preview::after {
  inset: 0;
  z-index: 1;
  border-right: 5px solid var(--ak-groove);
  border-bottom: 5px solid var(--ak-groove);
  mix-blend-mode: multiply;
}

.plank-live-preview > .plank-color-control::after {
  right: auto;
  left: 0;
  bottom: calc(var(--s4-p-) / 2);
  /* The artwork sits in the SVG's lower-right corner; move its canvas, keeping its size. */
  transform: translateX(-50%);
}

.plank-profile-info {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #3c3c3c;
  background: transparent;
  cursor: help;
}

.plank-profile-info:hover { color: #111; }
.plank-profile-info:focus-visible,
.plank-color-control:focus-visible { outline: 2px solid #00665e; outline-offset: 2px; }
.plank-profile-info .info-circle-icon { width: 16px; height: 16px; }

.plank-profile-tooltip {
  font-family: inherit;
  font-size: var(--app_font_tooltip-size-ui);
  font-weight: var(--ak--font-weight_400);
  letter-spacing: var(--app_font_tooltip-letter-spacing);
  line-height: normal;
}

.plank-profile-tooltip p { margin: 8px 0 0; }
.plank-profile-illustration { position: relative; }
.plank-profile-illustration img { display: block; width: 100%; height: auto; }
.plank-profile-tongue {
  position: absolute;
  top: 6%;
  left: 11%;
  right: 2%;
  color: #00665e;
  text-align: left;
}
.plank-profile-groove {
  position: absolute;
  bottom: 9%;
  left: 11%;
  right: 11%;
  color: #161616;
  text-align: right;
}

/* Piece details share the material preview's profile colors and help control. */
.pd-profile-tongue { fill: var(--ak-tongue); }
.pd-profile-groove { fill: var(--ak-groove); mix-blend-mode: multiply; }
#piecedetail-profile-info { top: 6px; right: 6px; }
#piecedetail-wrap.detail-panel {
  --ak-glass-bg: #f4f4f4e6;
  --pd-kept: #fff;
  --pd-offcut: #bdbdbd;
}
#piecedetail-base,
#piecedetail-base-hex {
  fill: var(--pd-offcut);
  stroke: #555;
  stroke-width: .75px;
  vector-effect: non-scaling-stroke;
}
#piecedetail-kept-poly,
#piecedetail-kept-hex {
  fill: var(--pd-kept);
  stroke: none;
}
#piecedetail-svg text { font-family: inherit; font-size: 12px; }

#cutreuse-room-fill { display: none; pointer-events: none; }
html[data-step="2"][data-loss="visible"] #cutreuse-room-fill { display: inline; }
.ak-piece-target { cursor: pointer; }
.ak-piece-hit { fill: transparent; stroke: none; pointer-events: all; }
.ak-piece-target .ak-piece-hl {
  fill: var(--ak-shape-accenta, #2ac6c1);
  fill-opacity: 1;
}
.ak-piece-target:hover .ak-piece-hl,
.ak-piece-target.ak-piece-active .ak-piece-hl { opacity: 1; }