/* ============================================================
   Shatter — 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) 320px;
    /* 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 a tall image would quietly push the page 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) 292px; }
}

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

.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 strip held open for the dock. The dock floats
     over the canvas, the way it does in every tool here. */
  padding: 28px;
  min-height: 0;
  min-width: 0;
}

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

.viewport canvas#stage {
  display: block;
  /* Width and height are written on by the renderer; these are the 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);
  /* Nearest, because this is the one tool where the pixels are the point: a
     sorted run smoothed by the browser is a sorted run you cannot see. */
  /* Auto, not pixelated: on a high-density screen the canvas is drawn bigger
     than it is shown, and nearest-neighbour on a downscale is aliasing rather
     than crispness. */
  image-rendering: auto;
}

/* While a break is being rebuilt. Not a spinner over the picture — the frame on
   screen is still the last real one, and covering it would hide the thing you
   are trying to judge. A thin line at the top of the stage says work is
   happening and takes nothing away. */
.stage-wrap::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -4px; height: 2px;
  border-radius: 2px;
  background: var(--md-sys-color-primary);
  opacity: 0;
  transform: scaleX(0.2);
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-standard);
}
body[data-sorting="true"] .stage-wrap::after {
  opacity: 0.9;
  animation: sorting 900ms var(--md-sys-motion-standard) infinite;
}
@keyframes sorting {
  0% { transform: scaleX(0.15); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  100% { transform: scaleX(0.15); transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-sorting="true"] .stage-wrap::after { animation: none; transform: scaleX(1); }
}

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

.panel--inspector .controls {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 4px 12px;
}

/* Headings, not disclosures. Nine sliders want grouping; none of them wants
   hiding, and a group you can fold away is a place for a control to get lost. */
.group-title {
  margin: 10px 0 -4px;
  font: 500 11px/16px var(--md-sys-typescale-plain-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.group-title:first-child { margin-top: 0; }

.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: 14px 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; }
.export-row .md-button { flex: 1 1 auto; justify-content: center; font-variant-numeric: tabular-nums; }

.dialog-heading {
  margin: 26px 0 6px;
  font: 500 14px/20px var(--md-sys-typescale-plain-font);
  letter-spacing: 0.1px;
}
#export-progress { margin-top: 12px; }

/* The export dialog carries two lists now, which is taller than the house
   dialog was drawn for. On a short window the list scrolls and the Close button
   stays put, rather than the whole thing running off the bottom of the screen.
   Only when it is open: a closed dialog is display:none by the browser's own
   rule, and setting display on the element itself overrides that and lays the
   whole thing out in the page. */
#dlg-export {
  flex-direction: column;
  max-height: calc(100dvh - 48px);
}
#dlg-export[open] { display: flex; }
#dlg-export .content { min-height: 0; overflow-y: auto; }

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

@media (max-width: 960px) {
  /* How tall the picture is, written once: the shell sizes both the grid row
     and the viewport's own minimum, and setting only one of them makes the
     viewport overflow its row and print the panel over its own canvas. */
  .workspace {
    --picture: max(320px, 44dvh);
    grid-template-rows: var(--picture) auto;
    gap: 20px;
  }
  .viewport { padding: 12px; min-height: var(--picture); }
}

@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); }
}

/* A bar of five buttons and a title does not fit across a phone, and a bar that
   overflows widens the page under it rather than scrolling — which cuts off the
   canvas, the panel and the badge at the right. Everything with a word on it
   loses the word. */
@media (max-width: 620px) {
  .md-top-app-bar { gap: 2px; padding: 0 6px 0 10px; }
  .md-top-app-bar .brand { display: none; }
  /* The shortcuts list is no use without a keyboard, and this is the width
     where there is unlikely to be one. */
  .md-top-app-bar #btn-shortcuts { display: none; }
  .md-top-app-bar .md-button.has-icon {
    width: 40px; padding: 0; gap: 0; font-size: 0;
  }
  .md-top-app-bar .md-button.has-icon svg { width: 20px; height: 20px; }
}

/* ---------- "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; } }

/* ---------------- hitting the picture ---------------- */

/* The canvas is the impact target, so it says so. Bound to the canvas rather
   than to its wrapper: pointer capture on a container swallows clicks on every
   floating control above it, and the dock and the hint chip both live there. */
.viewport canvas#stage { cursor: crosshair; }

/* Where the blow landed, drawn over the canvas rather than into it, so an
   export never contains it. */
.impact-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 1.5px solid var(--md-sys-color-on-surface);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 3;
}
.impact-marker::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--md-sys-color-on-surface);
}
.impact-marker[data-quiet="true"] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .impact-marker { transition: none; }
}

/* ---------------- the dock on a phone ---------------- */

/* Five looks and three buttons come to about 460px, which is wider than a
   phone. Centred with `translateX(-50%)` and overflowing, the first look sits
   off the left edge of the screen and there is no way to reach it: the dock
   does not scroll, and the page does not scroll sideways either. So below the
   width where it stops fitting the dock stops being centred, spans the frame,
   and scrolls on its own. */
@media (max-width: 640px) {
  .viewport-dock {
    left: 12px;
    right: 12px;
    transform: none;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .viewport-dock::-webkit-scrollbar { display: none; }
  /* Nothing inside is allowed to squash to make room — a look whose name has
     been squeezed to three letters is no more reachable than one off-screen. */
  .viewport-dock > *,
  .viewport-dock .md-segmented button { flex: 0 0 auto; }
}

/* The break style, at the head of its own group. Full width, because in the
   panel it is a choice about everything below it rather than one more button
   on a row. */
.panel-style {
  display: flex;
  width: 100%;
  margin: 0 0 4px;
}
.panel-style button { flex: 1 1 0; min-width: 0; }