/* layout
   The page shell: main column, page head, section blocks.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- layout ---------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  margin: 6px 0 0;
  font: 500 25px/1.15 var(--ui);
  letter-spacing: -0.025em;
}
.page-head .sub { color: var(--ink-3); font-size: 14px; margin-top: 6px; }
.head-actions { display: flex; gap: 8px; flex-shrink: 0; }

.editor { display: grid; grid-template-columns: minmax(0,1fr) 316px; gap: 24px; align-items: start; }

/* A grid item defaults to min-width:auto — the width of its CONTENT — so a
   wide table inside one refuses to shrink and pushes the whole page sideways
   instead of scrolling within itself. Measured at 390px: the price levels page
   ran to 517. Pair it with .table-scroll on anything that then needs to
   scroll, or the section clips it. */
.editor > * { min-width: 0; }

@media (max-width: 900px) {
  .editor { grid-template-columns: 1fr; }
  .app-main { padding: 20px 16px 80px; }
}

/* A page whose main column carries the widest table in the app drops its rail
   sooner. Measured on a work order at 1024 — the shop's tablet — the units
   and their steps had 385px inside a scrolling box while the readouts beside
   them had 316. The rail is what you consult; the table is what you work. */
@media (max-width: 1180px) {
  .editor-wide { grid-template-columns: 1fr; }
}

/* Two buttons with real labels on them are 300px, and flex-shrink:0 means the
   page grows to fit rather than the buttons dropping under the heading.
   Measured at 390px: a grid's page ran to 477. */
@media (max-width: 720px) {
  .page-head { flex-wrap: wrap; }
  .head-actions { flex-wrap: wrap; }
}

/* ---------------- section blocks ---------------- */
.section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  overflow: hidden;
}
.section-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.section-head h2 {
  margin: 0;
  font: 500 15px var(--ui);
  letter-spacing: -0.01em;
}
.section-head .hint { margin: 3px 0 0; color: var(--ink-3); font-size: 13px; max-width: 62ch; }
.section-body { padding: 18px; }
.section-body > :last-child { margin-bottom: 0; }