/* PlotVisionAI authenticated design workspace.

   The app's Tailwind stylesheet is pre-built, so utilities that were not
   already compiled into it cannot be generated at runtime. The workspace
   layout is therefore expressed as its own semantic classes rather than as
   utility soup — that also keeps the canvas/tools relationship in one place
   instead of spread across a dozen responsive class strings.

   Sizing contract: the page shell (Ut) supplies `max-w-7xl` plus `px-5`
   (20px) on phones and `sm:px-8` (32px) from 640px up. The workspace fills
   that box completely — it deliberately does NOT re-cap itself the way the
   old layout did with max-w-4xl / max-w-5xl, which is what made the canvas
   feel small.

   Two places now go further and step outside the shell's box, because the
   photo is the work and the shell was built for prose. Both are computed
   from the exact padding they are cancelling, so the element lands flush
   with the viewport edge and never one pixel past it — see .pv-ws-bleed and
   the 1440px rule below. */

.pv-ws {
  width: 100%;
}

/* Above 1440px the shell's 1280px cap leaves the canvas floating in a sea of
   background while the tools column eats a fifth of it. Reclaim the margins:
   96vw keeps a gutter, and the 1720px ceiling stops the canvas turning into a
   billboard on an ultrawide. `100%` is the shell's content width, so the
   negative margin is exactly half the difference and stays centred. */
@media (min-width: 1440px) {
  .pv-ws {
    width: min(96vw, 1720px);
    margin-inline: calc((min(96vw, 1720px) - 100%) / -2);
  }
}


/* ---------------------------------------------------------------- step rail */

/* Horizontally scrollable on phones so five steps never wrap or squash. The
   scrollbar is hidden but the rail stays swipeable and keyboard reachable. */
.pv-ws-rail {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
  margin-bottom: 1.25rem;
}

.pv-ws-rail::-webkit-scrollbar {
  display: none;
}

.pv-ws-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(0 0 0 / 0.28);
  color: #cbd5e1;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.pv-ws-step:disabled {
  opacity: 0.45;
}

.pv-ws-step:not(:disabled):hover {
  border-color: rgb(45 212 191 / 0.4);
  color: #fff;
}

.pv-ws-step[aria-current="step"] {
  border-color: rgb(45 212 191 / 0.7);
  background: rgb(45 212 191 / 0.14);
  color: #fff;
}

.pv-ws-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.4rem;
  width: 1.4rem;
  flex: none;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pv-ws-step[aria-current="step"] .pv-ws-step-n {
  background: #2dd4bf;
  color: #04110f;
}

.pv-ws-step[data-done="1"] .pv-ws-step-n {
  background: rgb(45 212 191 / 0.35);
  color: #ccfbf1;
}

/* ------------------------------------------------------- canvas + tools grid */

/* One column on phones and tablets: the canvas comes first and the tools sit
   directly under the image, where a thumb can reach them. From 1024px the
   tools move beside the canvas and stick while the canvas scrolls. */
.pv-ws-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1024px) {
  .pv-ws-grid {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .pv-ws-grid {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1.5rem;
  }
}

/* Single-column steps (design type, style & features) still want the full
   width rather than a 1fr/20rem split. */
.pv-ws-wide {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------- the canvas */

/* The dominant element. No nested card padding: the border IS the frame, so
   the photo starts at the container edge and gets the whole content width. */
.pv-ws-canvas {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(0 0 0 / 0.35);
  min-width: 0;
}

/* Natural aspect ratio — the old view force-cropped every render to 16/9,
   which threw away the top and bottom of a portrait yard photo. The cap stops
   a tall portrait shot from pushing the tools off the first screen.

   `object-fit: contain` is the load-bearing part, not the sizing: you cannot
   simultaneously fill the column, cap the height and keep the element box at
   the source ratio, so the element box gives and `contain` guarantees the
   *picture* is never cropped or stretched — which is the thing the old
   `aspect-[16/9]` + `object-cover` pair got wrong. `width: 100%` keeps a
   small render filling its column instead of sitting tiny in the corner. */
.pv-ws-canvas > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .pv-ws-canvas > img {
    max-height: 86vh;
  }
}

.pv-ws-canvas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.25rem;
  min-height: 15rem;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .pv-ws-canvas-empty {
    min-height: 22rem;
  }
}

/* Drop target highlight while a file is dragged over the canvas. */
.pv-ws-canvas[data-drop="1"] {
  border-color: rgb(45 212 191 / 0.7);
  background: rgb(45 212 191 / 0.1);
}

/* Corner badge naming what is on screen (Result / Original / Base). */
.pv-ws-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 2;
  border-radius: 999px;
  background: rgb(4 17 15 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.14);
  padding: 0.25rem 0.7rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5eead4;
  backdrop-filter: blur(4px);
}

/* ------------------------------------------------------- the markup editor */

/* The editor takes the canvas's place in the grid, so it is sized like the
   canvas rather than like a card: no padding of its own, the drawing surface
   running the full width of the frame, and each control row carrying its own
   gutter instead. That is worth roughly 24px of drawing width on a phone on
   top of what .pv-ws-bleed already recovers. */
.pv-ws-editor {
  border-radius: 1rem;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.pv-ws-gutter {
  padding-inline: 0.75rem;
}

@media (min-width: 1024px) {
  .pv-ws-gutter {
    padding-inline: 0.9rem;
  }
}

/* --------------------------------------------------------- the colour key */

/* One row per ink actually on the canvas: swatch, then the note explaining
   what that colour means. Hand-written because the app's Tailwind build is
   pre-compiled — `flex-none`, `border-white/30` and `underline-offset-2` were
   never generated into it, so as class names they would do nothing at all. */
.pv-ws-swatch {
  height: 1rem;
  width: 1rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.3);
}

.pv-ws-linkbtn {
  font-size: 0.75rem;
  font-weight: 500;
  color: #5eead4;
  text-underline-offset: 2px;
}

.pv-ws-linkbtn:hover {
  text-decoration: underline;
}

/* The surface itself must not scroll under a fingertip mid-stroke; the canvas
   overlay sets touch-action none, this stops the frame around it bouncing. */
.pv-ws-markup {
  overscroll-behavior: contain;
}

.pv-ws-markup > img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------- the brand stamp */

/* Every dimension is set inline from pvStampBox(), so the overlay and the
   exported bitmap come out of one calculation. This rule carries only what
   does not scale: the plate, the ink, and the fact that the stamp must never
   intercept a pointer aimed at the design underneath it. */
.pv-stamp {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  background: rgb(4 17 15 / 0.72);
  backdrop-filter: blur(3px);
}

.pv-stamp-row {
  display: flex;
  align-items: center;
}

.pv-stamp-mark,
.pv-stamp-word {
  display: block;
  flex: none;
}

/* The descriptor's font-size is set inline from a measured fit, so the plate
   never clips it and the exported bitmap can reuse the same number. */
.pv-stamp-desc {
  display: block;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #ccfbf1;
}

/* The switch that removes it. A real button rather than a checkbox so the
   pressed state is what conveys the setting, the same as the view switch. */
.pv-ws-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(0 0 0 / 0.3);
  color: #cbd5e1;
  font-size: 0.78125rem;
  font-weight: 600;
  text-align: left;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.pv-ws-toggle[aria-pressed="true"] {
  border-color: rgb(45 212 191 / 0.7);
  background: rgb(45 212 191 / 0.16);
  color: #ccfbf1;
}

.pv-ws-toggle-dot {
  height: 0.6rem;
  width: 0.6rem;
  flex: none;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.25);
}

.pv-ws-toggle[aria-pressed="true"] .pv-ws-toggle-dot {
  background: #2dd4bf;
}

/* ---------------------------------------------------------- the tools panel */

.pv-ws-tools {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

@media (min-width: 1024px) {
  .pv-ws-tools {
    position: sticky;
    /* Below the sticky site header (69px), not underneath it. */
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* A tools group is a flat bordered block, not a Card inside a Card inside a
   Card. One border, one padding step. */
.pv-ws-panel {
  border-radius: 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.03);
  padding: 0.9rem;
}

.pv-ws-panel-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5eead4;
  margin: 0 0 0.6rem;
}

/* ------------------------------------------------------------- action chips */

.pv-ws-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* 44px on phones so a thumb hits it; slightly tighter once there is a mouse. */
.pv-ws-chip {
  min-height: 44px;
  border-radius: 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(0 0 0 / 0.3);
  color: #cbd5e1;
  font-size: 0.78125rem;
  font-weight: 500;
  padding: 0 0.75rem;
  text-align: left;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.pv-ws-chip:hover {
  border-color: rgb(45 212 191 / 0.45);
  color: #fff;
}

.pv-ws-chip[aria-pressed="true"] {
  border-color: rgb(45 212 191 / 0.7);
  background: rgb(45 212 191 / 0.16);
  color: #ccfbf1;
}

@media (min-width: 1024px) {
  .pv-ws-chip {
    min-height: 38px;
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------- view switch */

/* Replaces the drag-to-compare slider inside the workspace. A slider is a
   storytelling device for the marketing page; while you are working you want
   to name the thing you are looking at and switch to it in one tap. */
.pv-ws-switch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(0 0 0 / 0.3);
}

.pv-ws-switch > button {
  min-height: 40px;
  padding: 0 0.85rem;
  border-radius: 0.6rem;
  font-size: 0.78125rem;
  font-weight: 600;
  color: #94a3b8;
  transition: background-color 0.15s, color 0.15s;
}

.pv-ws-switch > button[aria-pressed="true"] {
  background: rgb(45 212 191 / 0.18);
  color: #ccfbf1;
}

.pv-ws-switch > button:not([aria-pressed="true"]):hover {
  color: #fff;
}

/* ------------------------------------------------------------ step footer */

/* Back / Next. Full width and stacked on phones, inline from 640px. */
.pv-ws-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

@media (min-width: 640px) {
  .pv-ws-nav {
    flex-direction: row;
    align-items: center;
  }

  .pv-ws-nav-spacer {
    flex: 1 1 auto;
  }
}

/* Keep long plant/cost tables from widening the grid on a phone. */
.pv-ws-grid,
.pv-ws-wide,
.pv-ws-tools,
.pv-ws-canvas {
  max-width: 100%;
}

/* --------------------------------------------------------- phone full bleed */

/* The shell's px-5 is right for text and wrong for a photo you are about to
   draw on with a fingertip: cancelling it returns 40px — an eighth of a 320px
   screen — to the image. Side borders and corner radii go with it, since a
   rounded edge sitting against the screen edge reads as a mistake.

   This has to come after the max-width guard above, not before it: same
   specificity, and a `max-width: 100%` left in force would resolve the width
   back to the shell's while the negative margins still shifted the box left,
   hanging it 20px off the side of the screen. Releasing the cap is what makes
   the extra width real. */
@media (max-width: 639.98px) {
  .pv-ws-bleed,
  .pv-ws-canvas,
  .pv-ws-editor {
    margin-inline: -1.25rem;
    max-width: none;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
  }
}

/* ------------------------------------------------- clearing the site header */

/* The site header is `position: sticky; top: 0` and 69px tall on a phone. Now
   that the canvas is full width, anything that scrolls itself into view lands
   with its top strip underneath that header — and because the header wins on
   z-index, touches in that strip hit the brand lockup instead of the drawing
   surface. Scroll margin keeps the whole canvas below the header. */
.pv-ws-canvas,
.pv-ws-markup {
  scroll-margin-top: 5.5rem;
}