/* The calm redesign (Oct 16, 2026): Equipment (equipment/equipment.js). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css. */

/* The hero: the open problems, the most urgent first. Its lines sit on the hero's own colour with thin dividers. */
.eq-screen .eq-hero { gap: 4px; }
.eq-hero-list { display: flex; flex-direction: column; margin-top: 8px; }
.eq-screen .eq-hero .eq-rows { gap: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.eq-screen .eq-hero .eq-prob { align-items: flex-start; padding: 14px 0; border-radius: 0; background: transparent; color: var(--on-hero); }
.eq-screen .eq-hero .eq-prob + .eq-prob, .eq-screen .eq-hero .eq-rows > li:first-child { border-top: 1px solid var(--hero-line); }
.eq-screen .eq-hero .eq-tile { background: transparent; border: 1px solid var(--hero-line); color: var(--on-hero-2); }
.eq-screen .eq-hero .eq-tile.urgent { background: transparent; color: var(--on-hero); }
.eq-screen .eq-hero .eq-row-t, .eq-screen .eq-hero .eq-what { color: var(--on-hero); }
.eq-screen .eq-hero .eq-row-s, .eq-screen .eq-hero .eq-det { color: var(--on-hero-2); }
.eq-screen .eq-hero .eq-just .eq-row-t, .eq-screen .eq-hero .eq-just .eq-tile { color: var(--on-hero-2); }
.eq-screen .eq-hero .eq-prob .btn.small.eq-fix { border: 1px solid var(--hero-line); background: transparent; color: var(--on-hero); }
.eq-screen .eq-hero .eq-prob .btn.small.eq-fix:hover { background: var(--rt-shine); }
.eq-screen .eq-hero .eq-prob .btn.small.eq-fix.primary { border-color: transparent; background: var(--hero-btn); color: var(--on-hero-btn); }
.eq-screen .eq-hero .eq-prob .btn.small.eq-fix.primary:hover { background: var(--hero-btn-hover); }
.eq-screen .eq-hero .more { border-top: 1px solid var(--hero-line); }
.eq-screen .eq-hero .more-s, .eq-screen .eq-hero .more-n { color: var(--on-hero-2); }
.eq-screen .eq-hero .more-b { padding: 0; }

/* One problem: the machine in bold, what is wrong under it; a tap on the words opens who and when. */
.eq-toggle { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; justify-content: center; margin: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.eq-what { font: 400 1rem/1.4 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.eq-det { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.eq-det[hidden] { display: none; }
.eq-row-w .dot-before { display: block; }

/* Everywhere else the lines are one soft card with hairlines between them, not a stack of grey boxes. */
.eq-screen .eq-rows { gap: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.eq-screen .eq-rows > li + li { border-top: 1px solid var(--border); }
.eq-screen .eq-prob, .eq-screen .eq-row { padding: 14px 16px; border-radius: 0; background: transparent; }

.eq-screen button.eq-row:hover { background: var(--rt-hover); }
.eq-row-t { font: 600 1rem/1.35 var(--rt-body); }
.eq-row-s { font: 400 .8125rem/1.4 var(--rt-body); color: var(--text-2); }
.eq-due { font: 600 .875rem/1.3 var(--rt-body); }
.eq-h { font: 700 1.125rem/1.3 var(--rt-body); }
.eq-sec { gap: 10px; }
.eq-sec-h { min-height: 44px; }

/* Report a problem: quiet outline under the hero; the hero already is the one loud thing. */
.eq-screen .btn.eq-report { min-height: 48px; border: 1px solid var(--btn-line); border-radius: var(--r-pill); background: transparent; color: var(--ink-strong);
  font: 600 1rem/1 var(--rt-body); letter-spacing: 0; text-transform: none; }
.eq-screen .btn.eq-report:hover { background: var(--rt-hover); }

/* Details on a tap: Fixed, last 30 days and No longer have. */
.eq-screen .more.eq-fold { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); padding: 0 12px; }
.eq-screen .more.eq-fold .more-b { padding: 0 0 12px; }
.eq-screen .more.eq-fold .list.flat { margin: 0; }

/* A machine's sheet: Add reminder and Update on the left, the two icons at the right. */
.eq-acts { align-items: center; gap: 8px; }
.eq-acts-end { display: inline-flex; gap: 6px; margin-left: auto; }
.eq-acts .btn.small .ic { width: 16px; height: 16px; }
.eq-svc-acts { align-items: center; }

/* A problem just fixed: its words keep the whole width, "Add what was done" sits under them. */
.eq-screen .eq-just { flex-wrap: wrap; }
.eq-screen .eq-just .eq-row-w { flex: 1 1 calc(100% - 56px); }
.eq-screen .eq-just .btn { margin-left: 56px; }
.eq-screen .more.eq-fold .li { min-height: 0; padding: 12px 0; }
.eq-screen .more.eq-fold .li:last-child { border-bottom: 0; }