/* =========================================================================
   PRESS — Direction B
   press-app.css — the chrome shared by the four application sheets
   (B-03 home · B-04 catalog · B-05 specification · B-06 practitioner account)

   Everything here composes from the seven ink tokens in press.css. Nothing
   introduces a hue, a radius, a shadow or a gradient. The screen furniture is
   modelled on a printed document, not on a website: a masthead plate, a
   contents block, running heads, folios and marginal notes.
   ========================================================================= */

/* ---- the mark primitive -------------------------------------------------
   One square of solid ink with lines removed from it. `currentColor` is the
   ink, `--mkg` is whatever the cut reveals — the stock on a white sheet, the
   orange field when the mark is knocked out of one.

   The block is sized explicitly. An SVG left at width:auto claims its 300 px
   intrinsic width as its flex base and squeezes the name beside it, which is
   how a long name (HALSTEAD BIOSCIENCE, the widest string in the set) runs
   out of its cell.                                                          */
.mk { --mkg: var(--ground); display: block; flex: none; color: var(--strong);
      align-self: flex-start; }
.mk rect.blk { fill: currentColor; }
.mk .cut      { fill: var(--mkg); }
.mk .cutline  { fill: none; stroke: var(--mkg); }

/* ---- the lockup ---------------------------------------------------------
   Every cell is laid out to hold HALSTEAD BIOSCIENCE first; the shorter
   settings are then set into that same cell, never the other way round.     */
.wm { display: flex; align-items: stretch; gap: 9px; color: var(--strong); max-width: 100%; }
.wm__t { display: flex; flex-direction: column; justify-content: flex-start; }
.wm__n { font-family: var(--disp); font-weight: 700; text-transform: uppercase;
         line-height: .80; letter-spacing: -0.006em; display: block; }
.wm__r { display: block; border-top-style: solid; border-top-color: currentColor; }
.wm__d { font-family: var(--data); font-weight: 500; text-transform: uppercase;
         line-height: 1; display: block; white-space: nowrap; }

.wm--xl { gap: 20px; }
.wm--xl .mk { width: 104px; height: 104px; }
.wm--xl .wm__n { font-size: 82px; }
.wm--xl .wm__r { border-top-width: 3px; margin: 9px 0 8px; }
.wm--xl .wm__d { font-size: 17px; letter-spacing: .30em; }

.wm--lg { gap: 15px; }
.wm--lg .mk { width: 74px; height: 74px; }
.wm--lg .wm__n { font-size: 58px; }
.wm--lg .wm__r { border-top-width: 2px; margin: 7px 0 6px; }
.wm--lg .wm__d { font-size: 13px; letter-spacing: .30em; }

.wm--md { gap: 9px; }
.wm--md .mk { width: 43px; height: 43px; }
.wm--md .wm__n { font-size: 32px; }
.wm--md .wm__r { border-top-width: 1px; margin: 4px 0 4px; }
.wm--md .wm__d { font-size: 8.6px; letter-spacing: .26em; }

.wm--24 { gap: 6px; }
.wm--24 .mk { align-self: center; width: 24px; height: 24px; }
.wm--24 .wm__t { justify-content: center; }
.wm--24 .wm__n { font-size: 18px; }
.wm--24 .wm__r { border-top-width: 1px; margin: 2px 0 2px; }
.wm--24 .wm__d { font-size: 7px; letter-spacing: .19em; }

/* at 16 px the descriptor is dropped. It is the system rule, not a compromise. */
.wm--16 { gap: 5px; align-items: center; }
.wm--16 .mk { align-self: center; width: 16px; height: 16px; }
.wm--16 .wm__t { justify-content: center; }
.wm--16 .wm__n { font-size: 13px; }
.wm--16 .wm__r, .wm--16 .wm__d { display: none; }

/* knocked out of an orange field */
.on-field .wm { color: var(--stock); }
.on-field .mk { --mkg: var(--orange); }

/* ---- masthead plate -----------------------------------------------------
   The top of the sheet, not a hero. A flat orange field carrying the lockup,
   the document control block and one line of type at poster scale.          */
.mast { padding: var(--s7) 0 var(--s7); }
.mast__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gut); }
.mast__ctl { text-align: right; font-family: var(--data); font-size: 11px; letter-spacing: .12em;
             text-transform: uppercase; line-height: 1.9; flex: none; }
.mast__ctl b { font-weight: 600; }
.mast__line { margin-top: var(--s6); }
.mast__sub { max-width: 54ch; margin-top: var(--s5); font-size: 18px; line-height: 1.5; }

/* ---- contents block -----------------------------------------------------
   This replaces the navigation bar. A technical document opens with a
   numbered table of contents, so this one does too.                         */
.toc { border-top: var(--w-slug) solid var(--strong); padding-top: var(--s4); }
.toc__h { display: flex; justify-content: space-between; align-items: baseline;
          font-family: var(--data); font-size: 10.5px; letter-spacing: .14em;
          text-transform: uppercase; color: var(--quiet); margin-bottom: var(--s4); }
.toc__l { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gut); }
.toc a {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: var(--w-hair) solid var(--hair-soft);
  text-decoration: none; color: var(--strong);
  transition: background 110ms linear;
}
.toc a:hover { background: var(--ground-alt); }
.toc a .n { font-family: var(--data); font-size: 11px; color: var(--field-deep); font-weight: 600; letter-spacing: .04em; }
.toc a .t { font-size: 15.5px; }
.toc a .p { font-family: var(--data); font-size: 11px; color: var(--quiet); }
.on-field .toc { border-top-color: var(--black); }
.on-field .toc a { color: var(--black); border-bottom-color: color-mix(in srgb, var(--black) 22%, var(--orange)); }
.on-field .toc a:hover { background: color-mix(in srgb, var(--black) 9%, var(--orange)); }
.on-field .toc a .n,
.on-field .toc a .p,
.on-field .toc__h { color: color-mix(in srgb, var(--black) 58%, var(--orange)); }

/* ---- a numbered step, set as a register entry ---------------------------- */
.steps { border-top: var(--w-rule) solid var(--strong); counter-reset: st; }
/* Four columns, the way a printed procedure table is set: the gate number, the gate,
   what is actually done, and what it is checked against. A three-column version left
   the prose capped at 60ch inside a 780 px cell, which reads as a hole, not a margin. */
.step { display: grid; grid-template-columns: 52px 300px minmax(0,1fr) 200px; gap: var(--s5);
        padding: var(--s4) 0; border-bottom: var(--w-hair) solid var(--hair-soft); align-items: start; }
@media (max-width: 1100px) {
  .step { grid-template-columns: 52px minmax(0,1fr) 200px; }
  .step__n { grid-area: 1 / 1 / 3 / 2; }
  .step h3 { grid-area: 1 / 2 / 2 / 3; }
  .step p  { grid-area: 2 / 2 / 3 / 3; margin-top: 6px; }
  .step__o { grid-area: 1 / 3 / 3 / 4; }
}
@media (max-width: 760px) {
  .step { grid-template-columns: 40px minmax(0,1fr); }
  .step__n { grid-area: 1 / 1 / 4 / 2; }
  .step h3 { grid-area: 1 / 2 / 2 / 3; }
  .step p  { grid-area: 2 / 2 / 3 / 3; }
  .step__o { grid-area: 3 / 2 / 4 / 3; padding-top: 12px; }
}
.step__n { font-family: var(--data); font-size: 11px; font-weight: 600; letter-spacing: .1em;
           color: var(--field-deep); padding-top: 5px; }
.step h3 { font-size: 21px; margin-bottom: 6px; line-height: 1.06; }
.step p { font-size: 15px; line-height: 1.55; margin: 0; max-width: 64ch; }
.step__o { font-family: var(--data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
           color: var(--quiet); padding-top: 6px; line-height: 1.7; }

/* ---- a slab of type used as a section divider --------------------------- */
.slab { border-top: var(--w-slug) solid var(--strong); border-bottom: var(--w-bar) solid var(--strong);
        padding: var(--s5) 0; display: flex; justify-content: space-between; align-items: baseline;
        gap: var(--gut); flex-wrap: wrap; }

/* ---- catalog register --------------------------------------------------- */
.grp { margin-top: var(--s7); }
.grp__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
          border-bottom: var(--w-bar) solid var(--strong); padding-bottom: 7px; margin-bottom: 2px; }
.grp__h h3 { font-size: 24px; }
.grp__h .ct { font-family: var(--data); font-size: 10.5px; letter-spacing: .13em;
              text-transform: uppercase; color: var(--quiet); }
table.reg a { color: var(--strong); text-decoration: none; border-bottom: 1px solid var(--hair); }
table.reg a:hover { border-bottom-color: var(--field-deep); color: var(--field-deep); }
.form-cell { font-family: var(--data); font-size: 11.5px; letter-spacing: .06em; color: var(--body); }

/* ---- specification sheet header ----------------------------------------- */
.idblock { display: grid; grid-template-columns: 1fr 320px; gap: var(--gut); align-items: end; }
.idblock__ids { font-family: var(--data); font-size: 12px; line-height: 2; letter-spacing: .04em; }
.idblock__ids span { color: color-mix(in srgb, var(--black) 58%, var(--orange)); display: inline-block; width: 118px; }

/* ---- account / portal --------------------------------------------------- */
.acct { display: flex; align-items: center; justify-content: space-between; gap: var(--gut);
        border-top: var(--w-bar) solid var(--strong); border-bottom: var(--w-bar) solid var(--strong);
        padding: var(--s4) 0; }
.acct__id { font-family: var(--data); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
            color: var(--quiet); line-height: 1.9; }
.acct__id b { color: var(--strong); font-weight: 600; }
.panel { border: var(--w-rule) solid var(--strong); padding: var(--s5) var(--s5) var(--s5); }
.panel__h { font-family: var(--data); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
            color: var(--quiet); border-bottom: var(--w-hair) solid var(--hair); padding-bottom: 8px;
            margin-bottom: var(--s4); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }
.fgrid .span2 { grid-column: 1 / -1; }
.btnrow { display: flex; gap: var(--s4); align-items: center; margin-top: var(--s5); flex-wrap: wrap; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .42; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--strong); border-color: var(--strong); color: var(--ground); }
input.f[aria-invalid="true"] { border-color: var(--field-deep); box-shadow: inset 0 -3px 0 var(--field-deep); }

/* a skeleton row, ruled like the table it will become */
.skel { height: 13px; background: var(--hair); animation: skel 1200ms linear infinite alternate; }
@keyframes skel { from { opacity: .5 } to { opacity: 1 } }

/* ---- footer colophon ---------------------------------------------------- */
.colo { border-top: var(--w-rule) solid var(--strong); padding-top: var(--s5); margin-top: var(--s8);
        display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gut); }
.colo h4 { font-size: 15px; margin-bottom: 10px; }
.colo p, .colo li { font-size: 13.5px; line-height: 1.55; color: var(--body); }
.colo ul { list-style: none; margin: 0; padding: 0; }
.colo li { padding: 5px 0; border-bottom: var(--w-hair) solid var(--hair-soft); }
.colo a { color: var(--body); text-decoration: none; }
.colo a:hover { color: var(--field-deep); }

@media (max-width: 900px) {
  .toc__l { grid-template-columns: 1fr; }
  /* ⛔ Restate the WHOLE placement, never just the column. Overriding only
     `grid-column` here left .step__o on row 1 — the row the 1100px block gave
     it — which is the row .step h3 occupies, so the two printed on top of each
     other at every width from 761 to 900. Measured 2026-08-31: 80 overlapping
     rows across about/quality/compliance. A partial override of a `grid-area`
     shorthand keeps the rows it did not mention. */
  .step { grid-template-columns: 40px 1fr; }
  .step__n { grid-area: 1 / 1 / 4 / 2; }
  .step h3 { grid-area: 1 / 2 / 2 / 3; }
  .step p  { grid-area: 2 / 2 / 3 / 3; margin-top: 6px; }
  .step__o { grid-area: 3 / 2 / 4 / 3; padding-top: 12px; }
  .idblock, .colo, .fgrid { grid-template-columns: 1fr; }
  .mast__top { display: block; }
  .mast__ctl { display: block; text-align: left; margin-top: var(--s4); }
  .wm--xl .mk { width: 62px; height: 62px; }
  .wm--xl .wm__n { font-size: 48px; }
  .wm--xl .wm__d { font-size: 12px; }
}

/* Two-column deck under a masthead headline. One narrow column of prose against a
   poster-scale field leaves a hole where the field should be doing the work. */
.mast__deck { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gut);
              margin-top: var(--s5); max-width: 1020px; }
@media (max-width: 860px) { .mast__deck { grid-template-columns: 1fr; gap: var(--s4); } }