/* css/certificates.css — the certificate list (CIT-8).
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   THE CERTIFICATE LIST — CIT-8
   ==========================================================================
   The shape is docs/mockups/cit8-certificates.html, walked and approved. A list
   of files, not a file field: the unit is a ROW — what it is, how big it is, and
   one way to take it off again.

   NO NEW COLOURS AND NO NEW RADII. Every value below is an existing token. The
   palette is LOCKED and a list of attachments is not the place to open it.

   THE BOX DOES NOT COME AND GO. `.cert-empty` is a sentence INSIDE the same
   bordered box the rows live in, so attaching the first file and deleting the
   last one do not move everything under them. A field that changes height as
   she works is a field she has to re-find, and on a phone it is a field that
   scrolls out from under her thumb mid-tap.
   ========================================================================== */
.cert-list{
  list-style:none;margin:.4rem 0 0;padding:0;max-width:56ch;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--field);
}
.cert{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem}
/* A rule BETWEEN rows and not around each one, so three files read as one list
   rather than three cards. */
.cert + .cert{border-top:1px solid var(--rule)}

/* The type, as letters. --rule-strong rather than --rule on the border: this
   carries meaning, and 1.4.11 wants 3:1 on anything that does. The same reason
   --rule is never used on an input. */
.cert-icon{
  flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-xs);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--data);font-size:.5625rem;letter-spacing:.02em;
  background:var(--paper);border:1px solid var(--rule-strong);color:var(--ink-soft);
}

/* `min-width:0` IS THE WHOLE OF THE TRUNCATION and it is not optional. A flex
   item's default min-width is auto, which means "at least as wide as my
   content" — so the name would push the Delete button off the row instead of
   ellipsing, exactly the way the shared table's cells did before CIT-3 fixed
   them the same way. */
.cert-body{flex:1 1 0;min-width:0}
.cert-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cert-meta{display:block;font-size:.8125rem;color:var(--ink-soft)}

/* flex:0 0 auto, so Delete keeps its width whatever the filename does. A
   destructive control that changes size as the row beside it changes is a
   control a hand travelling towards it can miss. */
.cert-drop{flex:0 0 auto}

.cert-empty{display:block;padding:.75rem;color:var(--ink-soft);font-size:.9375rem}
.cert-add{margin-top:.5rem}

/* 640, WITH THE REST OF THE NARROW LAYOUT, and not a breakpoint of its own.
   There was a second one at 600 for the old stacked-table treatment; it went
   with that treatment, and test/run.js asserts there is still only one —
   a design that reflows twice on the way down to a phone is two designs. */
@media (max-width:640px){
  /* The name and the badge stay on one line; Delete drops to its own, full
     width. A 26px badge, a filename and a button do not fit across 390px, and
     squeezing them makes the tap target smaller than the 24px minimum on the
     one control here that cannot be undone. */
  .cert{flex-wrap:wrap}
  .cert-body{flex:1 1 60%}
  .cert-drop{flex:1 0 100%}
  .cert-drop .btn{width:100%;text-align:center}
}