/* ============================================================
   Design Minis — application shell
   Layout, panels, canvas chrome. Load after tokens.css and
   components.css. Tool-specific rules go in a separate file.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  height: 100%; margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-plain-font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app {
  height: 100%;
  display: grid;
  grid-template-rows: 64px 1fr;
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr) 340px;
  gap: 12px;
  padding: 12px;
  background: var(--md-sys-color-surface);
}

/* ---------- Panels ---------- */
.panel {
  min-height: 0;
  display: flex; flex-direction: column;
  border-radius: var(--md-sys-shape-corner-l);
  background: var(--md-sys-color-surface-container-low);
  overflow: hidden;
}
.panel > header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 8px 10px 16px; flex: none;
}
.panel > header h2 {
  flex: 1 1 auto; margin: 0;
  font: 500 16px/24px var(--md-sys-typescale-plain-font); letter-spacing: 0.15px;
}
.panel > header .count {
  font: 500 11px/16px var(--md-sys-typescale-plain-font);
  padding: 2px 8px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}
.panel .scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}
.panel .scroll::-webkit-scrollbar { width: 8px; }
.panel .scroll::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box;
}
.panel > footer { flex: none; padding: 12px; }
.panel > footer .md-fab { width: 100%; }

.empty-state {
  margin: 24px 8px; padding: 24px 16px; text-align: center;
  border-radius: var(--md-sys-shape-corner-m);
  border: 1px dashed var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.empty-state svg { width: 32px; height: 32px; opacity: 0.6; }
.empty-state p { margin: 8px 0 0; font: 400 14px/20px var(--md-sys-typescale-plain-font); }

/* ---------- Canvas / viewport ---------- */
.viewport {
  position: relative; min-width: 0; min-height: 0;
  border-radius: var(--md-sys-shape-corner-l);
  overflow: hidden;
  background: linear-gradient(180deg, var(--app-studio-top), var(--app-studio-bottom));
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  touch-action: none;
}
.viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Bottom-centre dock: modes plus actions. */
.viewport-dock {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--app-hairline);
  z-index: 5;
}
.viewport-dock .sep { width: 1px; height: 24px; margin: 0 4px; background: var(--md-sys-color-outline-variant); }

/* Top-left hint: icon only until clicked. Equal padding both sides when
   collapsed, or the icon looks off-centre in its own circle. */
.viewport-hint {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 9px; border: none; cursor: pointer;
  border-radius: var(--md-sys-shape-corner-full);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 82%, transparent);
  backdrop-filter: blur(12px);
  color: var(--md-sys-color-on-surface-variant);
  font: 500 12px/16px var(--md-sys-typescale-plain-font);
  box-shadow: var(--app-hairline);
  overflow: hidden;
  transition: padding var(--md-sys-motion-duration-medium) var(--md-sys-motion-emphasized),
              background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-standard);
}
.viewport-hint:hover { background: var(--md-sys-color-surface-container-high); }
.viewport-hint .icon { display: grid; place-items: center; flex: none; }
.viewport-hint .icon svg { width: 18px; height: 18px; }
.viewport-hint .text {
  display: block; max-width: 0; margin-left: 0; opacity: 0;
  white-space: nowrap; overflow: hidden;
  transition: max-width var(--md-sys-motion-duration-medium) var(--md-sys-motion-emphasized),
              margin-left var(--md-sys-motion-duration-medium) var(--md-sys-motion-emphasized),
              opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-standard);
}
.viewport-hint[aria-expanded="true"] { padding: 0 14px 0 9px; }
.viewport-hint[aria-expanded="true"] .text { max-width: 60ch; margin-left: 8px; opacity: 1; }

.drop-overlay {
  position: absolute; inset: 12px; z-index: 10; display: none;
  place-items: center; text-align: center;
  border-radius: var(--md-sys-shape-corner-l);
  border: 2px dashed var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 70%, transparent);
  color: var(--md-sys-color-on-primary-container);
  font: 500 16px/24px var(--md-sys-typescale-plain-font);
  backdrop-filter: blur(4px);
}
.drop-overlay[data-active="true"] { display: grid; }
.drop-overlay svg { width: 40px; height: 40px; display: block; margin: 0 auto 8px; }

/* ---------- Inspector groups ---------- */
.group { padding: 4px 0 8px; }
.group + .group { border-top: 1px solid var(--md-sys-color-outline-variant); }
.group > .group-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 4px; border: none; background: none; cursor: pointer;
  color: var(--md-sys-color-on-surface);
  font: 500 14px/20px var(--md-sys-typescale-plain-font); letter-spacing: 0.1px;
  border-radius: var(--md-sys-shape-corner-s);
}
.group > .group-head svg.lead { width: 20px; height: 20px; fill: var(--md-sys-color-primary); flex: none; }
.group > .group-head .grow { flex: 1 1 auto; text-align: left; }
.group > .group-head svg.chev {
  width: 20px; height: 20px; fill: var(--md-sys-color-on-surface-variant); flex: none;
  transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-emphasized);
}
.group[data-open="false"] > .group-head svg.chev { transform: rotate(-90deg); }
.group[data-open="false"] > .group-body { display: none; }
.group > .group-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 12px; }

.field-label {
  display: block; margin-bottom: 6px;
  font: 500 12px/16px var(--md-sys-typescale-plain-font); letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant);
}
.hint {
  margin: 0; font: 400 12px/16px var(--md-sys-typescale-plain-font);
  color: var(--md-sys-color-on-surface-variant);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.inspector-empty { padding: 40px 20px; text-align: center; color: var(--md-sys-color-on-surface-variant); }
.inspector-empty svg { width: 40px; height: 40px; opacity: 0.5; }
.inspector-empty p { font: 400 14px/20px var(--md-sys-typescale-plain-font); }

/* ---------- Colour swatches ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
}
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low), 0 0 0 4px var(--md-sys-color-primary);
}
input[type="color"].swatch { -webkit-appearance: none; appearance: none; background: none; }
input[type="color"].swatch::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].swatch::-webkit-color-swatch { border: none; border-radius: 50%; }

/* ---------- Progress (long running work) ---------- */
.md-progress {
  height: 4px; border-radius: 99px; overflow: hidden;
  background: var(--md-sys-color-secondary-container);
}
.md-progress .bar {
  height: 100%; width: 0%;
  background: var(--md-sys-color-primary);
  border-radius: 99px;
  transition: width 120ms linear;
}

/* ---------- Icons ----------
   Material Symbols are filled shapes drawn to look outlined - one style for
   every icon, so nothing in the interface mixes stroke and fill. */
svg.md-icon { fill: currentColor; stroke: none; }
[data-icon] { display: inline-grid; place-items: center; }

kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px; text-align: center;
  border-radius: 4px; background: var(--md-sys-color-surface-container-highest);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font: 500 11px/16px var(--md-sys-typescale-plain-font);
  color: var(--md-sys-color-on-surface);
}
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; }
.shortcuts span { font: 400 14px/20px var(--md-sys-typescale-plain-font); }

/* ---------- Responsive ---------- */
/* The app bar is a nowrap row, so its min-content width is the sum of
   everything in it - and a grid item that wide drags the whole page out with
   it. Left alone it demanded 758px, which a phone answers by widening its
   layout viewport and scaling the entire interface to about half size. So the
   bar sheds what it can, in order of how little it is missed. */

/* The tagline first: it is the one thing here that is decoration. Its
   min-content is the whole string, since it is nowrap, so no amount of
   min-width or ellipsis will shrink it - it has to go. */
@media (max-width: 860px) { .md-top-app-bar .title span { display: none; } }

@media (max-width: 620px) {
  .md-top-app-bar { gap: 4px; padding: 0 8px 0 12px; }
  .md-top-app-bar .title h1 { font-size: 19px; }
  /* Export keeps its icon and loses its word. */
  .md-top-app-bar .md-button.has-icon .label { display: none; }
  .md-top-app-bar .md-button.has-icon { padding: 0 12px; gap: 0; }
}

/* A keyboard-shortcuts button on a device with no keyboard. It is the only
   control here that cannot do anything at all for the person looking at it. */
@media (pointer: coarse) and (hover: none) {
  #btn-shortcuts { display: none; }
}

@media (max-width: 1180px) { .workspace { grid-template-columns: 240px minmax(0, 1fr) 300px; } }
@media (max-width: 960px) {
  /* Stacked, the page becomes the scroller.
     Held to one viewport height, three panels have to share it, and the third
     gets whatever is left - which was 74px for a list needing 212, so the shape
     list showed a twelve-pixel sliver of itself. Panels stand as tall as their
     contents and the document scrolls, the way a page does. */
  html, body { height: auto; min-height: 100%; }
  #app { height: auto; min-height: 100%; grid-template-rows: 64px auto; }

  /* The bar stays put, so undo and export are always a thumb away. */
  .md-top-app-bar { position: sticky; top: 0; z-index: 10; }

  /* The picture gets a share of the screen rather than a fixed strip: a flat
     300px is most of a small phone and a quarter of a tablet, and the canvas is
     what anyone came here to look at. dvh, so it does not jump when a mobile
     browser hides its own address bar. */
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max(300px, 40dvh) auto auto;
  }
  .viewport { order: 1; min-height: max(300px, 40dvh); }

  /* No longer little windows with scrollbars of their own. Two nested
     scrollers on a touch screen means half your flicks go to the wrong one. */
  .panel { overflow: visible; }
  .panel > .scroll { overflow: visible; min-height: 0; }
}

/* Collapsed it is a circle, so it needs the width as well as the height - 44
   tall and 36 wide is still a target you miss. */
@media (pointer: coarse) {
  .viewport-hint { height: 44px; }
  .viewport-hint[aria-expanded="false"] { width: 44px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}