/* ==========================================================================
   DAGLINGS — Daglabs (daglabs.html)
   Linked by daglabs.html ONLY, straight after css/site.css and before anything else.
   Every rule here was cut out of site.css, which every page loads, because no
   other page can ever match it.

   IT IS STILL site.css, IN site.css's ORDER. These rules keep the relative
   order they had there, and each section's share of the late MOBILE PASS came
   with it, still last. What changed is that everything here now comes after
   EVERYTHING left in site.css — which is only the same cascade because no rule
   left there ties with a rule here, on specificity, for the same element and
   property. That was checked rule by rule when the file was cut; see
   docs/private/ops/REPORT_SITE_CSS_SPLIT.md. So, when editing:
     - a rule that another page can match belongs in site.css, not here;
     - a rule in site.css may be overridden from here at EQUAL specificity only
       on purpose: this file wins every tie now, where the old order might not;
     - an override of a rule here goes below it, here.
   ========================================================================== */

/* ==========================================================================
   DAGLABS — YOUR STANDING — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

.titles__h {
  margin: 0;
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.titles__count {
  margin: 8px 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.titles__types {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.titles__type {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
/* A completed type is marked, not celebrated — a teal hairline and nothing
   else. */
.titles__type.is-complete {
  border-color: rgba(73, 224, 192, 0.45);
  color: var(--ink);
}
.titles__type-name {
  font-family: "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.titles__type-count {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.titles__type.is-complete .titles__type-count { color: var(--kaspa-teal, #49e0c0); }

.titles__sub {
  margin: 22px 0 0;
  font: 600 11px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.titles__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.titles__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.titles__name {
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.titles__why { font-size: 12.5px; color: var(--faint); }

/* The binder share. A plain control rather than a primary button: sharing is a
   thing to offer, not a thing to push. */
.titles__share {
  margin: 22px 0 0;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: 600 12px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.titles__share:hover { background: rgba(255, 255, 255, 0.1); }
.titles__share:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 768px), (pointer: coarse) {
  .titles__share {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 768px) { .titles__share { font-size: 13px; } }
.titles__none { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }

/* The "this is worth nothing" sentence. Quiet but at body size — it is a
   statement of fact a reader should be able to read, not a disclaimer. */
.titles__note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  max-width: 64ch;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 768px) {
  .titles__why,
  .titles__type,
  .titles__type-count,
  .titles__note,
  .titles__count { font-size: 14px; }
}
.filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.filters__label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  width: 68px;
  flex: none;
}

/* Daglabs' search. It sits in the filters' column and takes the row's width. */
.labfind {
  flex: 1 1 220px;
  max-width: 420px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.labfind:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.labfind__note { font-size: 12px; color: var(--faint); }
.tabs__note {
  max-width: 68ch;
  margin: 0 0 clamp(26px, 3.5vw, 40px);
  font-size: 14px;
  color: var(--faint);
}

/* ==========================================================================
   Daglabs — the catalogue — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

.labcount {
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.labcell { display: flex; flex-direction: column; gap: 10px; }
.labcell .tilt-scene { max-width: 400px; }

/* NO filter on a dark cell. The silhouette is produced by a filter plus a
   mix-blend-mode INSIDE the card (see .dc-card--silhouette in card.css), and
   a filter on an ancestor creates a containing block that changes what that
   blend composites against — the shape washes out or disappears entirely.
   The silhouette is already colourless; it needs no help sitting back. */
.labcell__hint {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--faint);
}
/* A provisional species' cell says so under the card, in the tag's amber. */
.labcell__prov {
  margin: 0;
  font: 600 11.5px/1.3 "Chakra Petch", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffb23f;
}

/* --- finishes held ------------------------------------------------------- */

.labchips { display: flex; flex-wrap: wrap; gap: 6px; }
.labchip {
  --c: 5px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  clip-path: polygon(
    var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)
  );
}
/* Held chips carry the finish's own colour. Red and gold are chain colours
   here in the sense CLAUDE.md protects — they name the red/gold FINISHES,
   which is exactly what that reservation is for. */
.labchip.is-held { color: var(--ink); border-color: currentColor; }
.labchip--plain.is-held { color: #6ab6ff; background: rgba(106, 182, 255, 0.12); }
.labchip--holo.is-held { color: #7fe9d6; background: rgba(127, 233, 214, 0.12); }
.labchip--red.is-held { color: var(--chain-red); background: rgba(255, 90, 90, 0.12); }
.labchip--gold.is-held { color: #f2c94c; background: rgba(242, 201, 76, 0.13); }

/* --- widths held --------------------------------------------------------
   The same 1–16 scale the footer draws, at cell scale. Bars are sized by
   level so the shape of the scale is the same object in both places. */

.labscale {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
}
.labscale__n {
  flex: 1;
  height: var(--h);
  min-width: 3px;
  background: rgba(238, 243, 251, 0.07);
  border: 1px solid rgba(238, 243, 251, 0.1);
}
/* Outside the species' band: not "not yet", but "never". Drawn as a floor
   mark so the gap is visible without reading as something still to collect. */
.labscale__n.is-out {
  height: 12%;
  background: none;
  border-color: rgba(238, 243, 251, 0.06);
}
.labscale__n.is-held {
  background: rgba(73, 224, 192, 0.55);
  border-color: var(--teal);
  box-shadow: 0 0 6px rgba(73, 224, 192, 0.4);
}

/* --- connect prompt ------------------------------------------------------
   Sits above a grid that is already full of silhouettes, so it explains
   rather than apologises: the page is working, nothing is lit yet. */

.labprompt { max-width: 640px; margin: 0 0 clamp(22px, 3vw, 34px); }
.labprompt .framed__in { --pad-y: clamp(20px, 3vw, 30px); --pad-x: clamp(20px, 3vw, 30px); }
.labprompt h3 { margin: 0 0 8px; font-size: clamp(18px, 2.2vw, 22px); }
.labprompt p { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; }

/* --- the reveal ----------------------------------------------------------
   The card's own bloom is dc-surface, in card.css — the component owns its
   art. These are the flecks coming off it: the same square block, teal and
   glowing, as the pack opening's embers (css/open.css), falling away instead
   of rising. Same vocabulary, opposite direction. */

.labreveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}
.labcell { position: relative; }
.labreveal i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: #9ffbe6;
  box-shadow: 0 0 6px rgba(73, 224, 192, 0.9);
  animation: labs-fleck var(--dur) ease-out var(--delay) both;
}
@keyframes labs-fleck {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .labreveal { display: none; }
}

/* ==========================================================================
   MOBILE PASS — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

/* --- type floor ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prose: 14px floor. */
  .labcell__hint,
  .tabs__note { font-size: max(14px, 1em); }
  /* Labels: 12px floor, and they keep their tracking. */
  .filters__label { font-size: max(12px, 1em); }
}