/* MYARA — product page: blueprint "work in progress" screen. */

body[data-page="product"] {
  --bp-sew: #bfcfd6;
  --bp-cut: rgba(233, 238, 240, 0.3);
  --bp-mark: rgba(191, 207, 214, 0.62);
  --bp-hi: #f2f5f6;
  --bp-fill: rgba(191, 207, 214, 0.035);
  --bp-text: rgba(214, 224, 228, 0.78);
  --bp-ease: cubic-bezier(0.65, 0, 0.35, 1);
  background: var(--blueprint);
}

.bp {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* ---------- stage: grid + pieces fill the viewport ---------- */

.bp-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bp-grid,
.bp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.bp-grid {
  pointer-events: none;
  opacity: 0;
  animation: bp-fade 1.6s var(--bp-ease) 0.2s forwards;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 58% 50%, #000 28%, rgba(0, 0, 0, 0.5) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 58% 50%, #000 28%, rgba(0, 0, 0, 0.5) 62%, transparent 100%);
}

.bp-grid .minor { stroke: rgba(191, 207, 214, 0.055); stroke-width: 1; fill: none; }
.bp-grid .major { stroke: rgba(191, 207, 214, 0.11); stroke-width: 1; fill: none; }
.bp-grid .axis  { stroke: rgba(191, 207, 214, 0.16); stroke-width: 1; fill: none; }

.bp-svg {
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.bp-svg.is-dragging { cursor: grabbing; }
.bp-svg:focus { outline: none; }

@keyframes bp-fade { to { opacity: 1; } }

/* ---------- pieces ---------- */

.bp-svg .piece { outline: none; transition: opacity 0.9s var(--bp-ease); }
.bp-svg .piece-inner { will-change: opacity; }

.bp-svg .sew,
.bp-svg .cut,
.bp-svg .marks,
.bp-svg .scan-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.6s var(--bp-ease);
}

.bp-svg .sew   { stroke: var(--bp-sew); stroke-width: 1; }
.bp-svg .cut   { stroke: var(--bp-cut); stroke-width: 1; }
.bp-svg .marks { stroke: var(--bp-mark); stroke-width: 1; }
.bp-svg .fold  { stroke-dasharray: none; }

.bp-svg .fill {
  fill: var(--bp-fill);
  stroke: none;
  pointer-events: all;
  transition: fill 0.6s var(--bp-ease);
}

.bp-svg .lbl {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  fill: var(--bp-text);
  stroke: var(--blueprint);
  paint-order: stroke;
  stroke-linejoin: round;
  pointer-events: none;
  transition: fill 0.6s var(--bp-ease);
}
.bp-svg .lbl .sub { fill: rgba(125, 138, 144, 0.95); }
.bp-svg .lbl .st  { fill: rgba(125, 138, 144, 0.75); }

.bp-svg .labels { transition: opacity 0.6s var(--bp-ease); }
.bp-svg.labels-off .labels { opacity: 0; }
/* a piece label too small to read at this zoom (main.js); the P0n tag stays */
.bp-svg .lbl.is-tiny:not(.coord) { visibility: hidden; }

.bp-svg .scan-band { pointer-events: none; }
.bp-svg .scan-line { stroke: rgba(233, 238, 240, 0.7); stroke-width: 1; }

/* hover: outline brightens */
@media (hover: hover) {
  .bp-svg .piece:hover .sew,
  .bp-svg .piece:hover .cut { stroke: var(--bp-hi); }
  .bp-svg .piece:hover .lbl { fill: var(--bp-hi); }
}
.bp-svg .piece:focus-visible .sew,
.bp-svg .piece:focus-visible .cut { stroke: var(--bp-hi); }
.bp-svg .piece:focus-visible .lbl { fill: var(--bp-hi); }
.bp-svg .piece:focus-visible .fill { fill: rgba(242, 245, 246, 0.06); }
.bp-svg .piece:focus-visible .piece-inner {
  filter: drop-shadow(0 0 2px rgba(242, 245, 246, 0.75)) drop-shadow(0 0 9px rgba(242, 245, 246, 0.22));
}

/* selection: turquoise lines with soft glow, others dim */
.bp-svg.has-selection .piece:not(.is-selected) { opacity: 0.4; }
.bp-svg .piece.is-selected .sew,
.bp-svg .piece.is-selected .marks { stroke: var(--accent); }
.bp-svg .piece.is-selected .cut { stroke: rgba(54, 209, 196, 0.55); }
.bp-svg .piece.is-selected .fill { fill: rgba(54, 209, 196, 0.022); }
.bp-svg .piece.is-selected .lbl { fill: var(--accent); }
.bp-svg .piece.is-selected .piece-inner {
  filter: drop-shadow(0 0 3px rgba(54, 209, 196, 0.55)) drop-shadow(0 0 10px rgba(54, 209, 196, 0.18));
}

/* ---------- WIP layer ---------- */

/* head + panel share one flex column, so they can never collide: the head hangs from the top,
   the panel sits on the bottom, and a minimum gap keeps them apart when the screen is short. */
.bp-wip {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: calc(var(--nav-h) + clamp(24px, 7vh, 88px));
  bottom: 64px;
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  pointer-events: none;
}

.bp-head,
.bp-panel {
  position: relative;
  flex: none;
  pointer-events: none;
}

.bp-head { width: 100%; }

.bp-kicker { margin: 0 0 22px; font-size: 10px; letter-spacing: 0.18em; color: var(--fg-dim); }

/* quiet heading scale, as on the home page */
.bp-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 40px); /* same as the home Method heading */
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: rgba(233, 238, 240, 0.92);
}

.bp-lede {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(214, 224, 228, 0.72);
}

.bp-build {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: rgba(214, 224, 228, 0.86);
}
.bp-build li {
  display: flex;
  gap: 14px;
  padding: 7px 0 6px;
  border-bottom: 1px solid var(--line);
}
.bp-build li span { flex: none; color: var(--fg-dim); }

.bp-research {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--fg-dim);
}
.bp-research a {
  color: rgba(214, 224, 228, 0.86);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(191, 207, 214, 0.35);
  transition: color 0.4s var(--bp-ease), text-decoration-color 0.4s var(--bp-ease);
}
.bp-research a:hover,
.bp-research a:focus-visible { color: var(--accent); text-decoration-color: var(--accent); outline: none; }
.bp-research > span {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px 0;
  border: 1px solid rgba(191, 207, 214, 0.3);
  color: rgba(214, 224, 228, 0.86);
}

.bp-cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 9px 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--fg);
  border-bottom: 1px solid rgba(191, 207, 214, 0.3);
  transition: border-color 0.6s var(--bp-ease), color 0.6s var(--bp-ease), gap 0.6s var(--bp-ease);
}
.bp-cta:hover,
.bp-cta:focus-visible { border-color: var(--accent); color: var(--accent); gap: 22px; outline: none; }

.bp-panel {
  width: min(340px, 100%);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: var(--fg-dim);
}

.bp-meta { display: flex; gap: 18px; flex-wrap: wrap; opacity: 0.8; }

.bp-status {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  color: var(--fg);
  letter-spacing: 0.14em;
}
#bp-pct { font-variant-numeric: tabular-nums; }

.bp-bar {
  position: relative;
  height: 1px;
  margin: 8px 0 14px;
  background: rgba(191, 207, 214, 0.14);
  overflow: hidden;
}
.bp-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--bp-sew);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.bp-log {
  list-style: none;
  margin: 0;
  padding: 0;
  height: calc(1.75em * 6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-transform: none;
  letter-spacing: 0.04em;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
}
.bp-log li {
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: bp-line 0.9s var(--bp-ease) both;
}
.bp-log li .t { opacity: 0.5; margin-right: 1.2em; }
.bp-log li.ok { color: rgba(191, 207, 214, 0.9); }
@keyframes bp-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bp-file { margin-top: 14px; }
.bp-file span, .bp-sel { color: rgba(214, 224, 228, 0.82); }
.bp-sel { transition: color 0.6s var(--bp-ease); }
.bp-sel.is-on { color: var(--accent); }
.bp-hint { margin-top: 14px; opacity: 0.55; }

/* ---------- stacked layout (phones, tablets, tall screens) ---------- */

@media (max-width: 959px), (max-aspect-ratio: 11/10) {
  .bp-wip {
    top: calc(var(--nav-h) + 12px);
    bottom: 46px;
    width: calc(100vw - 2 * var(--gutter));
    max-width: 560px;
    gap: 14px;
  }
  .bp-kicker { margin-bottom: 10px; }
  .bp-lede { margin-top: 10px; font-size: 13px; line-height: 1.55; max-width: 52ch; }
  .bp-build { margin-top: 12px; border-top: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 9px; letter-spacing: 0.08em; }
  .bp-build li { padding: 0; border: 0; gap: 6px; }
  .bp-research { margin-top: 10px; font-size: 9px; max-width: 64ch; }
  .bp-cta { margin-top: 10px; padding-top: 4px; }
  .bp-panel { width: 100%; }
  .bp-status { margin-top: 8px; }
  .bp-bar { margin: 6px 0 8px; }
  .bp-log { height: calc(1.75em * 3); }
  .bp-file { margin-top: 8px; }
  .bp-hint { display: none; }
}

@media (max-width: 640px) {
  .bp-kicker { line-height: 1.6; }
  .bp-lede { font-size: 12.5px; }
  .bp-meta { gap: 12px; }
  .bp-log { display: none; }
  .bp-file { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the readout panel runs to the bottom edge here: give it the room the shell's footer readout used */
  body[data-page="product"] .mx-readout--br { display: none; }
}

@media (max-height: 700px) and (max-width: 959px) {
  .bp-lede, .bp-log, .bp-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-grid { animation: none; opacity: 1; }
  .bp-log li { animation: none; }
}

@media (min-width: 960px) and (min-aspect-ratio: 11/10) and (max-height: 960px) {
  .bp-wip { top: calc(var(--nav-h) + clamp(16px, 4vh, 48px)); }
  .bp-kicker { margin-bottom: 14px; }
  .bp-lede { margin-top: 12px; }
  .bp-build { margin-top: 14px; }
  .bp-log { height: calc(1.75em * 3); }
  .bp-hint { display: none; }
}

@media (min-width: 960px) and (min-aspect-ratio: 11/10) and (max-height: 820px) {
  .bp-wip { top: calc(var(--nav-h) + 8px); bottom: 52px; gap: 18px; }
  .bp-kicker { margin-bottom: 10px; }
  .bp-lede { font-size: 13px; line-height: 1.55; }
  .bp-build { margin-top: 12px; }
  .bp-build li { padding: 5px 0 4px; }
  .bp-research { margin-top: 10px; }
  .bp-cta { margin-top: 12px; }
  .bp-log, .bp-meta { display: none; }
  /* short screens: the readout panel reaches the bottom-left shell readout, so that one steps aside */
  body[data-page="product"] .mx-readout--bl { display: none; }
}