/* ==========================================================================
   lims.css — styles for the pages that talk to the laboratory system:
   the booking tracker and the report list on report.html.

   A separate file rather than more lines in style.css, because style.css is
   the template's shared stylesheet and is edited often. Keeping the LIMS
   styles apart means a change to either cannot silently drop the other, and
   the whole integration can be lifted into another tenant by copying two
   files and a config line.

   build.js links this after brand.css, so tenant tokens are already defined.
   ========================================================================== */

/* ---------- booking tracker ----------
   Four steps, readable at arm's length on a phone in daylight. Stage is
   carried by weight and a filled marker as well as colour, so it still reads
   when the screen is washed out or the eye is not good at greens. */
ol.track { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0; padding:0;
           counter-reset:step; }
ol.track li { counter-increment:step; flex:1 1 8rem; min-width:8rem;
              padding:.6rem .7rem .6rem 2.2rem; position:relative; border-radius:6px;
              font-size:.88rem; background:var(--tint2); color:var(--dim);
              border:1px solid var(--line); }
ol.track li::before { content:counter(step); position:absolute; left:.6rem; top:50%;
                      transform:translateY(-50%); width:1.25rem; height:1.25rem;
                      border-radius:50%; display:grid; place-items:center;
                      font-size:.72rem; font-weight:700;
                      background:var(--line); color:var(--mid); }
ol.track li.done { color:var(--mid); }
ol.track li.done::before { content:"\2713"; background:var(--ok); color:#fff; }
ol.track li.now { background:var(--tint); color:var(--deep); font-weight:700;
                  border-color:var(--cta); box-shadow:0 0 0 2px var(--cta) inset; }
ol.track li.now::before { background:var(--cta); color:#fff; }

/* ---------- released reports ---------- */
ul.reports { list-style:none; padding:0; margin:.6rem 0 0; }
ul.reports li { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
                padding:.7rem 0; border-bottom:1px solid var(--line); }
ul.reports li .sub { margin:0; }
ul.reports li .btn { margin-left:auto; }

@media (max-width:40rem) {
  /* On a narrow screen four side-by-side steps become four unreadable
     slivers. Stacked, each one keeps its label. */
  ol.track { flex-direction:column; }
  ol.track li { flex:1 1 auto; }
  ul.reports li .btn { margin-left:0; width:100%; }
}