/*
 * Lux Survey Grid — tool styles. Loaded after tools/bs7671/suite.css, which
 * supplies the cc- vocabulary and the print block.
 *
 * `lg-` = lux grid. Every colour is a site custom property: the page has three
 * full themes (dark / light / slate) and a literal hex passes review on one of
 * them and fails on the others.
 */

.lg-wide { max-width: 1360px; margin: 0 auto; }

.lg-main {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1000px) {
  .lg-main { grid-template-columns: 1fr; }
}

.lg-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.lg-card h4 { margin: 1rem 0 .4rem; font-size: .85rem; color: var(--text-muted); }
.lg-card h4:first-of-type { margin-top: .6rem; }

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

.lg-stage {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
@media (max-width: 1000px) { .lg-stage { position: static; } }

.lg-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.lg-canvas {
  display: block;
  width: 100%;
  height: min(72vh, 780px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  touch-action: none;              /* the viewer owns pan and pinch */
  cursor: grab;
  outline: none;
}
.lg-canvas:focus-visible { border-color: var(--accent); }

.lg-hint {
  margin: 0;
  min-height: 2.4em;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.lg-btn--on {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
}

.lg-seg { flex-wrap: wrap; justify-self: start; }

/* ---------- upload ---------- */

.lg-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.lg-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: 1.4rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.lg-drop:hover, .lg-drop--over { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.lg-drop strong { font-size: .95rem; }
.lg-drop span { font-size: .82rem; color: var(--text-muted); }

/* ---------- lists ---------- */

.lg-list { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; }

.lg-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.lg-row--on { border-color: var(--accent); }
.lg-row small { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }

.lg-row__main {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: .2rem .1rem;
  color: var(--text-primary);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-row__main:disabled { cursor: default; opacity: .7; }

.lg-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .85rem;
  padding: .2rem .35rem;
}

/* ---------- readouts ----------
 * Hairline `label … value` rows, not stat tiles — the site's design vocabulary.
 */

.lg-readout { margin-top: .6rem; }
.lg-readout > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .28rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.lg-readout > div:last-child { border-bottom: 0; }
.lg-readout span { color: var(--text-muted); }
.lg-readout b { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; }

/* ---------- print ---------- */

.lg-print { display: none; }

@media print {
  .lg-print__area { break-inside: avoid; page-break-inside: avoid; }
  .lg-print__area + .lg-print__area { break-before: page; page-break-before: always; }
  .lg-print__plan {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 8mm;
    border: 1px solid #ccc;
  }
  /* False-colour fills and the grid itself are the point of the page — browsers
     drop backgrounds when printing unless told not to. */
  .cc-print__doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}