/* Hypha · JV partner · document: the purchase order, in the generic look of a ruled business form: PO number and
   date, Vendor and Ship to, an item table, a total, the authorisation line. Every field flat grey and empty until
   somebody actually fills it. Also here, from the same family of commercial forms: the order confirmation (page 01,
   the visitor's own promise to their customer) and the equipment sheet (page 02).

   <article class="doc po">
     <header class="po-top"><span class="po-logo" aria-hidden="true"></span><div class="po-tt"><h3>Purchase order</h3>
       <dl class="po-meta"><div><dt>PO number</dt><dd><i class="fld"></i></dd></div><div><dt>Date</dt><dd><i class="fld"></i></dd></div></dl></div></header>
     <div class="po-parties"><section class="po-p"><h4>Vendor</h4><i class="fld fld--block"></i></section>
       <section class="po-p"><h4>Ship to</h4><i class="fld fld--block"></i></section></div>
     <table class="po-items"><thead><tr><th>Item</th><th>Description</th><th class="n">Qty</th><th class="n">Price</th><th class="n">Total</th></tr></thead>
       <tbody><tr><td><i class="fld"></i></td>…</tr></tbody></table>
     <div class="po-sum"><span>Total</span><i class="fld"></i></div>
     <div class="po-auth"><div class="po-a"><span class="po-ak">Authorised by</span><span class="po-line"><i class="fld fld--sig"></i></span></div>
       <div class="po-a po-a--d"><span class="po-ak">Date</span><i class="fld"></i></div></div>
   </article>
   .po-focus on a field's box: a plain dark ring while the copy talks about it (never light: nothing is agreed). */

.po {
  --w: 500px;
  width: var(--w);
  padding: 22px 24px 24px;
  font-family: var(--f-sheet);
  font-size: 13px;
  color: #1a1a1a;
  border-radius: 4px;
}
.po-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.po-logo { flex: none; width: 92px; height: 34px; border-radius: 4px; background: var(--field); }
.po-tt { text-align: right; }
.po-tt h3 { font-size: 21px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #111; }
.po-meta { display: grid; grid-template-columns: auto 7.5em; gap: 6px 10px; margin-top: 10px; justify-content: end; align-items: center; }
.po-meta div { display: contents; }
.po-meta dt { color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.po-meta dd .fld { width: 100%; }
.po-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.po-p h4, .po-ak { display: block; margin-bottom: 6px; padding: 4px 8px; background: #e9eef4; color: #22303f; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.po-p .fld--block { height: 3.6em; }
.po-items { width: 100%; margin-top: 18px; border-collapse: collapse; table-layout: fixed; }
.po-items th { padding: 6px 7px; background: #e9eef4; color: #22303f; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; border: 1px solid #cfd6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-items td { height: 30px; padding: 0 7px; border: 1px solid #d9dee4; }
.po-items .n { width: 17%; text-align: right; }
.po-items th:first-child { width: 14%; }
.po-items td .fld { width: 100%; height: 12px; vertical-align: middle; }
.po-sum { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.po-sum .fld { width: 7.5em; }
.po-auth { display: grid; grid-template-columns: 1fr 9em; gap: 18px; margin-top: 22px; align-items: end; }
.po-line { display: block; padding: 0 4px 0; }
.po-a--d .fld { width: 100%; }
.po-focus { position: relative; }
.po-focus::after { content: ""; position: absolute; inset: -6px; border-radius: 6px; box-shadow: 0 0 0 2px rgb(60 64 67 / calc(var(--f, 0) * 0.85)); pointer-events: none; }
@media (max-width: 899px) {
  .po { --w: min(344px, calc(100vw - 36px)); padding: 14px 14px 16px; font-size: 12px; }
  .po-logo { width: 64px; height: 26px; }
  .po-tt h3 { font-size: 16px; letter-spacing: 0.1em; }
  .po-meta { grid-template-columns: auto 5.6em; gap: 5px 8px; margin-top: 8px; }
  .po-meta dt { font-size: 12px; }
  .po-parties { gap: 10px; margin-top: 14px; }
  .po-p h4, .po-ak { font-size: 12px; padding: 3px 6px; }
  .po-p .fld--block { height: 2.8em; }
  .po-items { margin-top: 12px; }
  .po-items th { font-size: 12px; padding: 5px 4px; letter-spacing: 0.04em; }
  .po-items td { height: 24px; padding: 0 4px; }
  .po-items .c-x { display: none; }
  .po-auth { grid-template-columns: 1fr 6.5em; gap: 12px; margin-top: 16px; }
}

/* ---------- the order confirmation: the visitor's own word to their own customer ---------- */
.order { width: 300px; padding: 0 0 16px; font-family: var(--f-sheet); color: #1a1a1a; border-radius: 6px; }
.or-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 3px solid #2c3e50; }
.or-top .po-logo { width: 54px; height: 22px; }
.or-top .po-logo.mk-you { width: 92px; }
.or-top b { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.or-f { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; padding: 14px 18px 0; font-size: 14px; }
.or-f div { display: contents; }
.or-f dt { color: #666; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
.or-f dd { font-weight: 700; white-space: nowrap; }
@media (max-width: 899px) {
  .order { width: 236px; }
  .or-top { padding: 10px 14px; }
  .or-top b { font-size: 14px; }
  .or-f { padding: 10px 14px 0; gap: 7px 10px; font-size: 13px; }
  .or-f dt { font-size: 12px; }
}

/* ---------- the equipment sheet: the visitor's own product, the kind of thing those locations use ---------- */
.spec { width: 320px; font-family: var(--f-sheet); color: #1a1a1a; border-radius: 6px; padding-bottom: 16px; }
.sp-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid #e3e6e9; }
.sp-top .po-logo { width: 54px; height: 22px; }
.sp-top b { flex: 1; font-size: 16px; font-weight: 700; }
.sp-k { color: #666; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.sp-img { height: 110px; margin: 14px 18px 0; border-radius: 6px; background: var(--field); }
.sp-rows { padding: 12px 18px 0; }
.sp-rows li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid #eef0f2; font-size: 13.5px; color: #444; }
.sp-rows .fld { width: 6.5em; }
@media (max-width: 899px) {
  .spec { width: 240px; padding-bottom: 12px; }
  .sp-top { padding: 10px 14px; }
  .sp-top b { font-size: 14px; }
  .sp-img { height: 70px; margin: 10px 14px 0; }
  .sp-rows { padding: 8px 14px 0; }
  .sp-rows li { font-size: 12.5px; padding: 5px 0; }
}