/* Operations (#operations) — docs/design/Atlas_Experience_Redesign.md §7.4.
 * Module layout only: rows, progress, checks and the temperature table come
 * from atlas-components.css (rows, pills, progress, tables, dialogs, tabs).
 * Replaces operations.css (Alpha 0.4), operations-checkpoint-a.css,
 * operations-checkpoint-a-layout.css and their legacy fragments. */
@layer atlas.modules {
.ops-body { margin-top: var(--s-5); }
.ops-body > * + * { margin-top: var(--s-4); }

/* Today: one row per checklist (name, meta, 120 px progress, status, action). */
/* The row is a row link (.atlas-row__link); names read 15/22. */
.ops-row__open { font: 500 15px/22px var(--font-sans); }
.ops-progress { display: block; width: 120px; flex: none; }
.ops-row__status { flex: none; width: 104px; }
.ops-foot { margin: var(--s-3) 0 0; font: var(--type-caption); color: var(--text-2); }
.ops-muted { color: var(--text-3); }
.ops-skel-title { width: 40%; }
.ops-skel-meta { width: 60%; margin-top: var(--s-2); }

/* Checklist detail: reading column, 52 px check rows. */
.ops-detail { max-width: var(--reading-max); }
.ops-back { margin-left: calc(-1 * var(--s-2)); }
.ops-detail__head { margin-top: var(--s-3); }
.ops-detail__title { margin: 0; font: var(--type-section); letter-spacing: var(--track-section); color: var(--text); }
.ops-detail__title:focus { outline: none; }
.ops-detail__meta { margin: var(--s-1) 0 var(--s-3); font: var(--type-meta); color: var(--text-2); }
.ops-detail__head .ops-progress { width: 100%; }
.ops-detail__readonly { margin: var(--s-3) 0 0; font: var(--type-meta); color: var(--text-2); }
.ops-detail__section { margin: var(--s-6) 0 var(--s-2); font: var(--type-heading); color: var(--text); }
.ops-checks { margin: var(--s-4) 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ops-check { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--line-subtle); }
.ops-check:first-child { border-top: 0; }
.ops-check__toggle {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 0;
  background: transparent;
  color: var(--text);
  font: var(--type-body);
  text-align: left;
  cursor: pointer;
}
.ops-check__toggle:hover:not(:disabled) { background: var(--bg-hover); }
.ops-check__toggle:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.ops-check__toggle:disabled { cursor: default; }
.ops-check__box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--surface);
}
.ops-check__box > svg { width: 14px; height: 14px; stroke-width: 2.5; }
.is-done > .ops-check__toggle .ops-check__box { border-color: var(--positive); background: var(--positive); }
.is-done > .ops-check__toggle .ops-check__label { color: var(--text-2); }
.is-pending > .ops-check__toggle { opacity: .6; }
.ops-check__optional { margin-left: var(--s-2); font: var(--type-caption); color: var(--text-2); }
.ops-check__who { font: var(--type-caption); color: var(--text-2); white-space: nowrap; }
.ops-check__note-btn { margin-right: var(--s-2); }
.ops-check__note,
.ops-check__error { grid-column: 1 / -1; display: flex; gap: var(--s-2); margin: 0; padding: 0 var(--s-4) var(--s-3) 48px; font: var(--type-meta); color: var(--text-2); }
.ops-check__note > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ops-check__error { color: var(--danger); }
.ops-detail__foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-3) 0; background: var(--bg); }

/* Temperature table. */
.ops-temp__actions { display: flex; justify-content: flex-end; gap: var(--s-2); }
.ops-points { flex-wrap: wrap; height: auto; }
.ops-days .atlas-chips { gap: var(--s-3); }

@media (max-width: 1023px) {
  .ops-progress { width: 80px; }
}
/* Touch: small buttons in Operations grow to 44 px (spec §6; the design system's .atlas-btn--sm is 40 px). */
@media (max-width: 767px) {
  /* Phone: icon | name, meta and status | chevron, the same on every row. */
  .ops-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: var(--s-2); }
  .ops-row .ops-progress { display: none; }
  .ops-row > .atlas-row__icon { grid-row: 1 / span 2; }
  .ops-row > .atlas-row__body, .ops-row > .ops-row__status { grid-column: 2; }
  .ops-row > .atlas-row__end { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .ops-row__status { width: auto; }
  .ops-check__toggle { grid-template-columns: 22px minmax(0, 1fr); min-height: 56px; }
  .ops-check__who { grid-column: 2; white-space: normal; }
  .ops-check__note-btn { grid-column: 1 / -1; justify-self: start; margin: 0 0 var(--s-2) 44px; }
  .ops-check__note, .ops-check__error { padding-left: 50px; }
  .ops-detail__foot { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: var(--s-3) 0; }
  .ops-detail__foot > .atlas-btn { flex: 1 1 0; }
  .ops-temp-list__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
}
}