/* public/src/css/cards.css
   THE CARD. Every block on this site is one of these.

   Material: Furniture. A card is a container - it never carries data of its
   own, and anything Reported inside it is marked as such by its own class.

   IMPORTANT, and measured: --panel against --void is 1.16, so a card is NOT
   distinguishable from the page by colour alone. The outline, the radius, the
   padding and the shadow together are what make it read as an object. Do not
   remove any of them thinking the ground is doing the work. It is not. */

.card{
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:1.15rem 1.25rem 1.35rem;
  box-shadow:0 1px 0 rgb(255 255 255 / .03), 0 10px 30px rgb(0 0 0 / .35);
}
.card + .card{margin-top:1.25rem}

.card-hd{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-data);font-size:var(--step--1);
  letter-spacing:.18em;text-transform:uppercase;color:var(--signal);
  border-bottom:1px solid var(--edge);
  padding-bottom:.6rem;margin:0 0 .9rem;
}
.card-hd .hd-icon{width:1.15rem;height:1.15rem;flex:0 0 auto}
.card-hd .hd-action{margin-left:auto;font-size:var(--step--1);color:var(--ink-dim)}
.card-hd .hd-action:hover{color:var(--ink)}

.card-body{color:var(--ink)}
.card-body p{margin:0 0 .75rem;max-width:var(--measure)}

/* Reported material only. Never put this on a card whose contents are
   Furniture or Marginalia - a live dot is a claim that something is ticking.
   The word itself is never set here: it is a <span class="live-badge"> the
   panel's own markup function emits (front.js's abovePanelMarkup(), text
   from voice.js's SITE.live) - a CSS content: value was the one place on
   the site a reader-visible string could hide from voice.js, and
   test/theme.test.js now guards against it reappearing. */
.card--live .card-hd .live-badge{
  margin-left:auto;
  color:var(--signal);letter-spacing:.14em;
}
.card--live .card-hd .hd-action{margin-left:0}

/* Raised state. Also only 1.16 against --panel, so it is paired with a
   brighter border rather than relying on the fill. */
.card--lift{background:var(--panel-lift);border-color:var(--edge-strong)}

/* State boundaries are gated at 3:1 (--edge-strong), decoration is not. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;
}