/* public/src/css/clipping.css
   The first clipping on THE FRONT PAGE.

   Clipping is a snapshot: data the station has committed to print. It may be
   RE-ISSUED when the reader files something, and it may never tick
   (DECISIONS D17). If an element here ever needs to update on a clock, it is
   the wrong material - put it on glass.

   Every colour here is one of the semantic aliases from tokens.css (--ink,
   --panel, --edge, --signal), never a raw hex - test/theme.test.js enforces
   that with a no-hex-literal guard, and test/contrast.js measures the real
   hexes those aliases resolve to.

   One deliberate exception, and it is named rather than hidden: the card's
   drop shadow below uses a bare rgb(). A shadow is depth, not information -
   nothing is read against it and no ratio applies - so it has no pair to
   assert. Every other colour in this file is a var(). */

.badge-card{
  position:relative;
  /* Explicit and redundant with page.css's universal border-box reset,
     left in on purpose. This card's width (near 100% of its container)
     plus its own padding is exactly the shape that turns a lost reset into
     a visible bug: at 390px it measured 35px wider than the viewport
     (offsetWidth 378px against a specified width of 343px) for the whole
     time that reset was silently failing to parse (a stray comment-closing
     pair inside page.css's own header comment, fixed there now - Task 8's
     fix report has the full story). One local, explicit declaration here
     costs nothing and does not depend on that comment never breaking the
     same way again. */
  box-sizing:border-box;
  background:var(--panel);
  color:var(--ink);
  font-family:var(--f-data);
  font-size:var(--step--1);
  width:min(22rem,100%);
  padding:1rem 1.1rem 1.4rem;
  /* Cut cleanly along the top and sides (scissors), torn along the bottom
     (see .badge-card::after below) - a card sliced from a bigger sheet, not
     a rounded card floating on its own. The torn strip is drawn outside the
     box (bottom:-12px on the pseudo-element, absolutely positioned so it
     takes no flow space of its own) - margin-bottom reserves that same
     12px so whatever sits after the card in normal flow (the reissue
     button on the Case File page) clears the teeth instead of the button
     sitting on top of them. */
  border-radius:2px 2px 0 0;
  margin-bottom:1rem;
  transform:rotate(-.7deg);
  box-shadow:0 2px 10px rgb(0 0 0 / .45);
}

/* The torn bottom edge. A row of small triangles reads as a rough tear
   rather than a printed border - it is the one edge left un-cut when the
   rest of the clipping was scissored out.

   This is drawn in --edge-strong, NOT the card's own --panel fill, and that
   departure is deliberate - it is the fix for a recorded incident, not an
   oversight. --panel measures 1.16:1 against --void (cards.css's own
   comment: "a card is NOT distinguishable from the page by colour alone").
   Painting the teeth in the card's own ground colour, as an earlier dark
   theme did, means the "gaps" between teeth (transparent, showing --void)
   and the "teeth" themselves (--panel) sit almost exactly on top of each
   other in luminance - the whole strip reads as a flat bar again, the same
   failure this file's history already recorded once. --edge-strong is
   meaningfully lighter than both --panel and --void, so the zigzag is
   legible against either. Still no contrast row needed - nothing is read
   against it, it is a graphic edge rather than text or a UI-state boundary
   - but it must still be SEEN, which is the property painting it in --panel
   silently failed to deliver. */
/* The height MUST match background-size. At 6px the box only ever exposed
   the solid top half of each 12px tile, so this painted a flat bar and no
   tooth ever appeared - invisible at any contrast, in both editions, while
   getComputedStyle still reported the gradients as set. */
.badge-card::after{
  content:'';position:absolute;left:0;right:0;bottom:-12px;height:12px;
  background:
    linear-gradient(-45deg, var(--edge-strong) 6px, transparent 0) 0 6px,
    linear-gradient(45deg, var(--edge-strong) 6px, transparent 0) 0 6px;
  background-repeat:repeat-x;
  background-size:12px 12px;
}

.badge-card .auth{
  font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--edge);
  padding-bottom:.45rem;margin-bottom:.6rem;
}
.badge-card .desig,
.badge-card .clr{display:flex;justify-content:space-between;gap:1rem;margin:.2rem 0}
.badge-card .desig span,
.badge-card .clr span{letter-spacing:.16em;color:var(--ink)}
.badge-card .desig b{font-size:1.15rem;font-weight:400}
.badge-card .clr b{font-weight:400;letter-spacing:.06em}

.badge-card .tally{
  display:flex;gap:1.1rem;margin:.7rem 0 .4rem;padding-top:.55rem;
  border-top:1px solid var(--edge);
}
.badge-card .tally dt{font-size:var(--step--1);letter-spacing:.14em;color:var(--ink)}
.badge-card .tally dd{margin:0;font-size:1.05rem}
.badge-card .issued{font-size:var(--step--1);letter-spacing:.14em;color:var(--ink)}

/* Means nothing. That is the point. A graphic, so 3:1 is its floor - which
   is why this is --ink-dim (6.80 on --panel), not --edge (--edge is
   decorative and carries no floor at all, measured at only 1.77 on --panel
   in tokens.css - it would fail the very floor this comment sets). */
.badge-card .bars{display:flex;gap:1px;align-items:flex-end;height:1.6rem;margin:.7rem 0 .2rem}
.badge-card .bars i{background:var(--ink-dim);height:100%}
.badge-card .bars .b1{width:1px}
.badge-card .bars .b2{width:2px}
.badge-card .bars .b3{width:3px}

/* Handwriting, on the card. --signal on --panel - "accent text in a card"
   in test/contrast.js, measured. */
.badge-card .tapenote{
  display:block;background:none;transform:none;padding:.5rem 0 0;
  font-family:var(--f-hand);font-size:1.05rem;line-height:1.25;
  color:var(--signal);
}

@media (prefers-reduced-motion:reduce){
  .badge-card{transform:none}
}