/* ============================================================
   Refract — tool-specific styling.
   Loaded after tokens, components and the app shell.
   ============================================================ */

/* Two columns, not three: there is no list here, and a panel filled with
   padding is worse than a panel that does not exist.

   Held inside a min-width query on purpose. The shell stacks its panels under
   960px from a media block of its own, and this file loads after it, so an
   unconditional rule wins on source order alone and the phone layout silently
   goes back to columns. */
@media (min-width: 961px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) 340px;
    /* A row that cannot exceed the height it was given. Left at auto, a grid
       row grows to fit its content, and the content here is a canvas sized
       from the row — so an image taller than the panel quietly pushes the
       whole thing open instead of being scaled down into it. */
    grid-template-rows: minmax(0, 1fr);
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------- the stage ---------- */

/* One row that takes the height going, so the stage below has something
   definite to fill. Centring the row instead would size it to its content, and
   its content is a canvas that sizes itself to its own bitmap — which is a
   circle: the picture stays small because the box is small because the picture
   is small, and the sharp render never has anywhere to grow into. */
.viewport {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  /* Even on all four sides, so the picture sits in the middle of the panel
     rather than pushed up by a bottom margin held open for the dock. The dock
     floats over the canvas the way it does in every tool here; on a landscape
     picture it lands in the space beside it anyway, and on a portrait one it
     sits over the bottom of the glass, which is the house pattern. */
  padding: 28px;
  /* A grid item will not shrink below its content unless told it may. */
  min-height: 0;
  min-width: 0;
}

.stage-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

/* Laid out from its own bitmap and held inside the box by the two maximums,
   so the element is always exactly the picture and the corner radius sits on
   the picture rather than around a letterbox. The render size is measured off
   the container rather than off this, or the two would chase each other. */
#stage {
  display: block;
  /* Width and height are written on by the renderer. These stay as a backstop
     for the frame before the first measurement lands. */
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--app-hairline);
  /* The bitmap is often smaller than the box while a slider is moving, so let
     the browser filter it. Nearest-neighbour would show the warp's own
     sampling grid every time the draft pass is on screen. */
  image-rendering: auto;
}

/* ---------- inspector fields ---------- */

.md-field { display: flex; flex-direction: column; gap: 4px; }
.md-field-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font: 400 14px/20px var(--md-sys-typescale-plain-font);
}
.md-field-input:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -1px;
  border-color: transparent;
}

.md-button.full { width: 100%; justify-content: center; }

/* Two or three options each, so they share the width evenly. Anything longer
   than that is a chip set instead. */
.md-segmented button { flex: 1 1 auto; min-width: 44px; }

/* ---------- the export dialog ---------- */

.md-dialog { max-width: 420px; }
.dialog-note {
  margin: 0 0 18px;
  font: 400 13px/19px var(--md-sys-typescale-plain-font);
  color: var(--md-sys-color-on-surface-variant);
}
.dialog-meta {
  margin: 16px 0 0;
  font: 400 12px/17px var(--md-sys-typescale-plain-font);
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.export-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.export-row .md-button { min-width: 56px; justify-content: center; }
#export-sizes .md-button { padding-inline: 20px; }

/* ---------- narrow ---------- */

@media (max-width: 960px) {
  /* Stacked, the dock sits below the picture rather than over it, so the room
     it was holding open goes back to the image. */
  .viewport { padding: 12px; min-height: max(320px, 44dvh); }
}

@media (max-width: 720px) {
  /* Expanded, the hint has to cross the credit badge, so it goes over it. */
  .viewport-hint[aria-expanded="true"] { z-index: 6; }
  .viewport-hint[aria-expanded="true"] .text { max-width: calc(100vw - 108px); }
}

/* No hover on a touch screen, so anything that appears on hover has to be
   there all the time — and then big enough to hit. */
@media (pointer: coarse) {
  .md-segmented button { min-height: 44px; }
  .md-field-input { height: 44px; }
}

/* ---------- the credit badge ---------- */

/* ---------- "Powered by" credit ----------
   Lives in the DOM on top of the canvas, never inside it, so it is present
   while you work and absent from every export. */
.viewport-credit {
  /* One number controls the whole badge: the artwork is 100x32 at scale 1. */
  --credit-scale: 2;
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: block; padding: 0; line-height: 0;
  border-radius: calc(9px * var(--credit-scale)); overflow: hidden;
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 82%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--app-hairline);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-standard);
}
.viewport-credit:hover { background: var(--md-sys-color-surface-container-high); }
.viewport-credit svg {
  display: block;
  width: calc(100px * var(--credit-scale));
  height: calc(32px * var(--credit-scale));
}
.viewport-credit .credit-label { fill: var(--md-sys-color-on-surface-variant); }
.viewport-credit .credit-name,
.viewport-credit .credit-mark { fill: var(--md-sys-color-on-surface); }

/* Step it back on narrow viewports so it cannot run into the hint chip. */
@media (max-width: 1180px) { .viewport-credit { --credit-scale: 1.5; } }
@media (max-width: 960px)  { .viewport-credit { --credit-scale: 1.25; } }
.stage-error { padding: 24px; max-width: 34ch; text-align: center; font: 400 14px/20px var(--md-sys-typescale-plain-font); color: var(--md-sys-color-on-surface-variant); }

/* ---------- the pattern dock ---------- */

/* Ten patterns is more than a narrow screen can show at once, so the pill
   scrolls sideways rather than wrapping into a shape that is no longer a pill.
   The scrollbar is hidden because the dock is 44px tall and a scrollbar inside
   it would eat a third of the target. */
.viewport-dock { max-width: calc(100% - 24px); }
#pattern-group {
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
#pattern-group::-webkit-scrollbar { display: none; }
#pattern-group button { flex: 0 0 auto; }