/* The layout section's own chrome: toolbar, canvas host, panel and the visually hidden
   accessibility tree. Colours come from tokens.css. */

/* The layout uses the whole window width: main drops its reading-width cap and padding here, and
   the toolbar becomes a full-width bar directly under the section nav. */
main:has(.layout) { max-width: none; padding: 0; }

.layout { display: flex; flex-direction: column; gap: var(--space-2); position: relative; }
.layout > .layout-body, .layout > .form-error, .layout > p:not(.layout-status) { margin-inline: var(--space-2); }

.layout-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.layout-toolbar button { min-width: 2.75rem; min-height: 2.75rem; } /* touch target */
.layout-toolbar button[hidden] { display: none; }
.layout-toolbar-sep { align-self: stretch; width: 1px; margin: var(--space-1) var(--space-1); background: var(--border); }
/* The palette toggle reads as on while the palette is open. */
.layout-toolbar button[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.layout-date { display: inline-flex; align-items: center; gap: var(--space-1); }
.layout-zoom-info { font-variant-numeric: tabular-nums; white-space: nowrap; }
.layout-date-text, .tb-glyph { display: none; }

/* Phones: one row, no wrapping. Zoom -/+ go (pinch does it), Today goes (clearing the date
   returns to today), the date becomes a chip over the invisible native input, Undo/Redo shrink
   to glyphs and the zoom readout goes. */
@media (max-width: 40rem) {
  .layout-toolbar { flex-wrap: nowrap; gap: var(--space-1); padding-inline: var(--space-2); overflow-x: auto; }
  .layout-toolbar > * { flex: none; }
  .layout-toolbar [data-ref="zoom-in"], .layout-toolbar [data-ref="zoom-out"],
  .layout-toolbar [data-ref="today"], .layout-zoom-info, .layout-date-label, .tb-word { display: none; }
  .tb-glyph { display: inline; font-size: 1.25rem; }
  .layout-toolbar-sep { margin-inline: 0; }
  .layout-date {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.75rem; padding-inline: var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .layout-date-text { display: inline; white-space: nowrap; }
  .layout-date[data-active="true"] { background: var(--accent); color: var(--bg); }
  .layout-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
}

.layout-body { display: flex; gap: var(--space-3); align-items: stretch; }

.layout-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 60vh;
  height: calc(100dvh - 12rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.layout-canvas:focus-visible { outline: 2px solid var(--map-selection); }

.layout-panel {
  flex: 0 0 18rem; max-width: 40%;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
}
.layout-panel[hidden] { display: none; }
.layout-panel header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.layout-panel h2 { margin: 0; font-size: var(--text-lg); }
.layout-panel dl { margin: var(--space-2) 0 0; }
.layout-panel dt { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-2); }
.layout-panel dd { margin: 0; }
/* An editable field in the panel: label over a full-width input. */
.layout-panel-field { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.layout-panel-field[hidden] { display: none; }
.layout-panel-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.layout-panel-actions [hidden] { display: none; }
.layout-panel-buttons { display: flex; gap: var(--space-2); }
.layout-panel-actions .danger { color: var(--error); }
.layout-panel-field label, .layout-panel-label { font-size: var(--text-sm); color: var(--muted); }
/* Plant / Row / Area: three joined buttons, one checked. */
.layout-segmented { display: flex; }
.layout-segmented button {
  flex: 1; min-height: 2.75rem; border-radius: 0; margin: 0;
  background: transparent; color: inherit; border: 1px solid var(--border);
}
.layout-segmented button + button { margin-left: -1px; }
.layout-segmented button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.layout-segmented button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.layout-segmented button[aria-checked="true"] { background: var(--map-selection); color: #fff; border-color: var(--map-selection); }
.layout-segmented button:disabled { opacity: 0.6; }
.layout-panel-field input, .layout-panel-field select { width: 100%; box-sizing: border-box; min-height: 2.75rem; }

@media (max-width: 40rem) {
  .layout-body { flex-direction: column; }
  .layout-panel { flex: 0 0 auto; max-width: none; }
  .layout-canvas { height: 60dvh; }
}

/* The crop palette: a fixed column whose list scrolls vertically; a horizontal drag-out of an
   item starts the drag (touch-action pan-y keeps vertical scrolling on touch). */
.layout-palette {
  flex: 0 0 11rem; width: 11rem; display: flex; flex-direction: column; gap: var(--space-2);
  max-height: calc(100dvh - 12rem);
}
.layout-palette[hidden] { display: none; }
.layout-palette input { width: 100%; box-sizing: border-box; }
.layout-palette ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-1); overflow-y: auto; min-height: 0;
}
.palette-item {
  display: flex; align-items: center; gap: var(--space-1); width: 100%; min-height: 2.75rem;
  text-align: left; touch-action: pan-y; user-select: none; white-space: nowrap;
}
.palette-icon { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; fill: currentColor; }

/* The drag ghost lives in document.body, centred on the pointer. */
.palette-ghost {
  position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 1000;
  display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1);
  background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius); opacity: 0.9;
}
.palette-ghost .palette-icon { width: 2rem; height: 2rem; fill: currentColor; }
.palette-ghost.is-cancel { opacity: 0.5; filter: grayscale(1); }
.palette-ghost-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-sizing: border-box; border: 2px solid var(--error); border-radius: 50%; pointer-events: none;
}
.palette-ghost-x { font-weight: bold; }

/* Visually hidden but focusable (E6): a keyboard user tabs through it; the canvas shows the
   selection outline for whatever has focus. */
.layout-tree {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  list-style: none;
}
.layout-tree button { all: unset; }
.layout-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.layout-conflict-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.layout-conflict-actions button { min-height: 2.75rem; }

@media (max-width: 40rem) {
  .layout-palette { flex: 0 0 auto; width: auto; max-height: none; }
  .layout-palette ul { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  /* The strip sits above the canvas: a sideways swipe scrolls it, a downward drag-out is ours
     (pan-y would hand that drag to a page scroll, which cancels it). */
  .palette-item { touch-action: pan-x; }
}