/* ═══════════════════════════════════════════════════════════════════════════
   DATUM LAYOUT BLOCKS  (public/css/blocks.css)

   The permanent fix for the mobile layout. A small set of phone-first building
   blocks that each adapt to THE SPACE THEY SIT IN (container queries), not to a
   guessed screen width — so the same block works in a page, a modal or a module.

   Rules of the road (enforced by the parity gate):
     · No !important. If a block loses to old CSS, raise specificity or retire the
       old rule — never add !important.
     · No [style*=] hacks. Layout lives here, in classes, not in inline strings.
     · Desktop is pinned: adopting a block on a screen must not move a 1920 pixel
       unless Dale has approved that screen's desktop change.

   HOW TO USE
     1. Give the screen (or modal/module root) a container context by adding the
        dz-scope class (it sets container-type to inline-size):
          <div class="dz-scope"> ... </div>
     2. Compose blocks inside it. They read the scope's width, so a two-up form
        grid becomes one column inside a narrow modal automatically.

   Tokens come from tokens.css + part-01.css :root (--s-*, --t-*, --surface,
   --border, --text/2/3, --r, --sm, --font-mono, --fw-*, --lh-*).
   ═══════════════════════════════════════════════════════════════════════════ */

.dz-scope{container-type:inline-size}

/* 1 · STACK — vertical rhythm, full width, never lets a child force overflow */
.dz-stack{display:flex;flex-direction:column;gap:var(--s-6);min-width:0}
.dz-stack.dz-tight{gap:var(--s-4)}
.dz-stack.dz-loose{gap:var(--s-9)}

/* 2 · CARD */
.dz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s-8);box-shadow:var(--sm);min-width:0}
.dz-card-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);
  margin:0 0 var(--s-6)}
.dz-card-title{font-size:var(--t-16);font-weight:var(--fw-bold);color:var(--text);margin:0;
  line-height:var(--lh-tight)}

/* 3 · ROW — a tappable list row: title (clamped to 2 lines) + right-side meta/action.
   Whole row is ≥44px so it's a real touch target. Works as <button>, <a> or <div>. */
.dz-row{display:flex;align-items:center;gap:var(--s-6);width:100%;min-width:0;min-height:44px;
  padding:var(--s-5) 0;border:0;border-bottom:1px solid var(--border);background:none;
  text-align:left;color:inherit;font:inherit;cursor:pointer}
.dz-row:last-child{border-bottom:0}
.dz-row-main{min-width:0;flex:1}
.dz-row-title{font-size:var(--t-14);font-weight:var(--fw-semi);color:var(--text);
  line-height:var(--lh-snug);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.dz-row-sub{font-size:var(--t-12);color:var(--text3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-row-end{flex-shrink:0;margin-left:auto;text-align:right;white-space:nowrap;
  font-size:var(--t-12);color:var(--text3)}
/* one-line variant (no clamp, ellipsis instead) */
.dz-row.dz-1line .dz-row-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 4 · KEY / VALUE — LABEL left, value right; stacks when the container is very narrow */
.dz-kv{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-6);
  padding:var(--s-5) 0;border-bottom:1px solid var(--border);min-width:0}
.dz-kv:last-child{border-bottom:0}
.dz-kv-k{font-size:var(--t-11);font-weight:var(--fw-semi);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text3);flex-shrink:0}
.dz-kv-v{font-size:var(--t-14);color:var(--text);text-align:right;min-width:0;overflow-wrap:anywhere}
@container (max-width:320px){
  .dz-kv{flex-direction:column;gap:2px}
  .dz-kv-v{text-align:left}
}

/* 5 · CHIPROW — one horizontally scrolling row of chips/buttons; never wraps; edge fade */
.dz-chiprow{display:flex;gap:var(--s-4);overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
  -webkit-overflow-scrolling:touch;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.dz-chiprow::-webkit-scrollbar{display:none}
.dz-chiprow>*{flex:0 0 auto}

/* 6 · FORM GRID — one column on a narrow container, two when there's room.
   Adapts to the CONTAINER, so it is one column inside a phone-width modal even on a
   desktop screen. Add .dz-wide to a field to make it span both columns. */
.dz-formgrid{display:grid;grid-template-columns:1fr;gap:var(--s-6);min-width:0}
.dz-field{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.dz-field-label{font-size:var(--t-11);font-weight:var(--fw-semi);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text3)}
@container (min-width:430px){
  .dz-formgrid{grid-template-columns:1fr 1fr}
  .dz-field.dz-wide{grid-column:1 / -1}
}

/* 7 · TILES — stat tiles that never crush below a legible width */
.dz-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-6)}
.dz-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s-8);min-width:0;box-shadow:var(--tile)}
.dz-tile-num{font-family:var(--font-mono);font-size:var(--t-24);font-weight:var(--fw-bold);
  color:var(--text);line-height:1}
.dz-tile-label{font-size:var(--t-10);font-weight:var(--fw-semi);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);margin-top:var(--s-3)}

/* 8 · TABLE → CARDS — a table on a wide container, stacked cards on a narrow one.
   Markup stays a normal table; give each <td> a data-label="Column name" and below the
   breakpoint each row becomes a card with the label shown beside each value. */
.dz-table{width:100%;border-collapse:collapse;min-width:0}
.dz-table th,.dz-table td{text-align:left;padding:var(--s-5) var(--s-6);vertical-align:top;
  border-bottom:1px solid var(--border);font-size:var(--t-13)}
.dz-table th{font-size:var(--t-11);text-transform:uppercase;letter-spacing:.04em;color:var(--text3);
  font-weight:var(--fw-semi)}
@container (max-width:560px){
  .dz-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0)}
  .dz-table tr{display:block;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-6);box-shadow:var(--sm)}
  .dz-table td{display:flex;justify-content:space-between;gap:var(--s-6);border:0;padding:var(--s-3) 0}
  .dz-table td::before{content:attr(data-label);font-size:var(--t-11);text-transform:uppercase;
    letter-spacing:.04em;color:var(--text3);font-weight:var(--fw-semi);flex-shrink:0}
}