:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
}

body {
  margin: 0;
  padding: 1rem;
}

h1 {
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

/* Canvas view (#10). The stage's size is set from Rust (canvas/arrange.rs,
   #69) through the CSSOM, to hug the image; there is no style attribute in
   the markup (the CSP is style-src 'self'). touch-action: none hands touch
   and pen drags to Pointer Events instead of scrolling the page. */
.canvas-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.canvas-panel[hidden] {
  display: none;
}

.stage {
  display: block;
  box-sizing: content-box;
  padding: 0;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, Canvas 92%, CanvasText);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.stage.cursor-crosshair {
  cursor: crosshair;
}

.stage.cursor-move {
  cursor: move;
}

.stage.cursor-resize {
  cursor: nwse-resize;
}

.stage.cursor-rotate {
  cursor: grab;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.toolbar button[aria-pressed="true"] {
  background: Highlight;
  color: HighlightText;
}

.hint-input {
  font: inherit;
  padding: 0.3rem 0.5rem;
  min-width: 14rem;
  flex: 1 1 14rem;
}

/* The name field and, under it, why the last name typed was rejected. */
.name-field {
  display: inline-flex;
  flex-direction: column;
  flex: 0 1 12rem;
  min-width: 9rem;
}

.name-input {
  font: inherit;
  padding: 0.3rem 0.5rem;
}

.name-input[aria-invalid="true"] {
  outline: 2px solid #de1923;
  outline-offset: 1px;
}

.name-error {
  color: #de1923;
  font-size: 0.85em;
}

.name-error:empty {
  display: none;
}

.canvas-status {
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* The stage, the instructions box and the history panel (#11). Side: the
   instructions and, under them, the panel in a column beside the stage,
   which keeps the full height (#73). Below: all three stacked, for wide
   images and phones. The canvas picks whichever shows the image larger
   (canvas/arrange.rs, #69). The DOM is the same in both; only the grid
   areas change, so the textarea is never remounted and keeps its focus.
   The pixel sizes here are Chrome::DEFAULT in arrange.rs (row gap
   stack_gap, column gap gap, panel min-width panel_side_w): keep them in
   step. */
.workspace {
  display: grid;
  gap: 8px 16px;
  align-items: start;
}

.workspace-main {
  grid-area: main;
}

.workspace.side .workspace-main {
  min-width: 20rem;
}

.workspace > .instructions {
  grid-area: instr;
}

.workspace > .history-panel {
  grid-area: panel;
}

/* The stage's column is exactly as wide as the stage (arrange.rs leaves
   room for the side column); the side column takes the rest, up to 28rem.
   The second row takes whatever height the stage needs beyond the
   instructions box, so the panel sits right under the instructions. */
.workspace.side {
  grid-template-columns: max-content minmax(300px, 28rem);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "main instr"
    "main panel";
  justify-content: start;
}

.workspace.below {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "instr"
    "panel";
}

/* 16px from the instructions box (the 8px row gap plus this), the gap
   the panel had under the canvas column before #73. */
.workspace.below .history-panel {
  max-width: none;
  margin-top: 8px;
}

.instructions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* One line at any width, so the box is the same height in both
   arrangements (arrange.rs measures it once for both). */
.instructions-label {
  font-size: 0.9rem;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.instructions-input {
  font: inherit;
  padding: 0.4rem 0.5rem;
  resize: vertical;
  min-height: 3.5rem;
}

.history-panel {
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.history-header h2 {
  font-size: 1rem;
  margin: 0;
}

.history-undo {
  display: flex;
  gap: 0.25rem;
}

/* Sits next to the undo group, which can bring the edits back. */
.history-clear {
  margin-left: auto;
}

.history-empty {
  margin: 0;
  opacity: 0.7;
}

.history-empty[hidden] {
  display: none;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.history-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 6px;
  padding: 0.15rem;
  background: Canvas;
}

/* Selection is a neutral ring, never a palette color (canvas/colors.rs). */
.history-row.selected {
  border-color: CanvasText;
  box-shadow: inset 0 0 0 1px CanvasText;
}

.history-row.dragging {
  opacity: 0.7;
  box-shadow: 0 2px 8px color-mix(in srgb, CanvasText 30%, transparent);
}

/* touch-action: none hands the grip's touch drags to Pointer Events. */
.history-grip {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  padding: 0 0.25rem;
  opacity: 0.6;
}

.history-row.dragging .history-grip {
  cursor: grabbing;
}

.history-select {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.25rem 0.4rem;
}

.history-select[aria-pressed="true"] {
  background: color-mix(in srgb, Highlight 20%, transparent);
}

.history-op {
  font-weight: 600;
}

.history-name {
  font-weight: 600;
  white-space: nowrap;
}

.history-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}

.history-action {
  padding: 0.2rem 0.5rem;
}

/* Each edit's badge takes its color from a .mark-N class below, never an
   inline style (the CSP is style-src 'self'). */
.badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #de1923;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Edit colors: one class per entry of core's PALETTE (mark_color), in order,
   matching the canvas and the export. Copy any palette change here by hand;
   the tests in canvas/colors.rs fail until these match it. */
.badge.mark-1 { background: #de1923; }
.badge.mark-2 { background: #005ae1; }
.badge.mark-3 { background: #c4009e; }
.badge.mark-4 { background: #c85200; }
.badge.mark-5 { background: #00873e; }
.badge.mark-6 { background: #7030c8; }
.badge.mark-7 { background: #007a8a; }

/* The selected row's badge keeps its color and gains a neutral ring. */
.history-row.selected .badge {
  box-shadow: 0 0 0 2px Canvas, 0 0 0 4px CanvasText;
}

/* Header: the title with Open and Start over, then .header-actions (the
   export toolbar and Shortcuts). Everything wraps, so the header never
   scrolls the page sideways (#71); on a phone the actions take a row of
   their own, with short labels and 44px touch targets (below). */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

header h1 {
  margin: 0;
}

header button {
  white-space: nowrap;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* A header button's full label, or the short one narrow screens show
   instead. The button's aria-label is always the full name. */
.label-short {
  display: none;
}

/* Sized so each row fits a 320px phone (288px inside the page padding). */
@media (max-width: 40rem) {
  header,
  .header-actions,
  .export-toolbar {
    gap: 0.4rem;
  }

  header h1 {
    flex: 1 1 auto;
    font-size: 1.05rem;
  }

  .header-actions {
    flex: 1 1 100%;
    margin-left: 0;
  }

  header button {
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem;
  }

  header .label-full {
    display: none;
  }

  header .label-short {
    display: inline;
  }
}

button {
  font: inherit;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}

button.primary {
  font-size: 1.05rem;
  padding: 0.5rem 1.4rem;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 50vh;
  border: 2px dashed currentColor;
  border-radius: 12px;
  opacity: 0.85;
  text-align: center;
  padding: 1rem;
}

.empty-title {
  font-size: 1.4rem;
  margin: 0;
}

.empty-hint {
  margin: 0;
  opacity: 0.7;
}

.image-info {
  margin: 0 0 0.5rem;
}

.notice:empty {
  display: none;
}

/* Covers the window while files are dragged over it. pointer-events: none
   keeps it from generating its own dragenter/dragleave events. */
.drop-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: color-mix(in srgb, Canvas 75%, transparent);
  border: 4px dashed Highlight;
  font-size: 1.5rem;
  z-index: 10;
}

.drop-overlay.visible {
  display: flex;
}

.export-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.export-busy {
  opacity: 0.7;
}

/* Export status and failures (e.g. "Download the PNG instead?"). */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 20;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: CanvasText;
  color: Canvas;
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
}

.toast-close {
  padding: 0 0.4rem;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
}

/* The `?` shortcut sheet (#13), generated from the keymap. */
.shortcut-sheet {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, CanvasText 35%, transparent);
  z-index: 30;
}

.shortcut-sheet[hidden] {
  display: none;
}

.shortcut-sheet-panel {
  width: min(40rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: Canvas;
  color: CanvasText;
  box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
}

.shortcut-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shortcut-sheet-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.shortcut-sheet-note {
  margin: 0.25rem 0 0.75rem;
  opacity: 0.75;
  font-size: 0.9rem;
}

.shortcut-sheet-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.5rem 1.5rem;
}

.shortcut-sheet h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.shortcut-sheet table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

.shortcut-sheet td {
  padding: 0.2rem 0;
  vertical-align: top;
}

.shortcut-keys {
  white-space: nowrap;
  padding-right: 0.75rem;
}

kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.05rem 0.35rem;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85em;
  text-align: center;
}