/* ==============================================================================================
   THE ORIGINAL DUCK TRACKER — SITE-WIDE VISUAL SYSTEM

   OWNER DESIGN DECISION. This file intentionally changes and supersedes the fundamental
   original/day-one visual conception of the Duck Tracker website. It is a deliberate product-design
   transition, not accidental visual drift. The accepted Human Hatch implementation is the protected
   reference from which this design system propagates OUTWARD; Hatch is the floor, not raw material,
   and nothing here is permitted to reach back and change it.

   ----------------------------------------------------------------------------------------------
   WHY THIS IS ONE LINKED FILE AND NOT FIVE COPIES OF A PALETTE.

   Every page in this product carries its own inline <style>, and the build runs a PAIRWISE
   HEAD-CSS GATE over all sixteen admitted surfaces: a persistent swap replaces the body region and
   leaves the SOURCE document's head alive, so a class the destination styles must also exist in the
   head it arrives into or the build fails. A palette pasted into some pages and not others would
   therefore be a build failure, not merely a duplication. One stylesheet, linked by every admitted
   surface, is the only shape that satisfies that gate - and it is what §16 asks for anyway.

   Linking it into a page does not change that page's appearance. Only the pages that USE these
   classes look different.

   ----------------------------------------------------------------------------------------------
   TWO MEANINGS THAT MUST NOT BE CONFLATED, AND ONE OF THEM DOES NOT LIVE HERE.

   Inside the Human Hatch workflow, PURPLE means "this step is complete" and the PULSE means "this
   is what to do next". Both of those are sequencing semantics and they belong to Hatch alone.

   Out here - Registry, Pond, Journeys, ordinary navigation - purple is simply the second member of
   a five-colour palette and means nothing at all. There is deliberately no pulse, no active state
   and no completion state in this file. A list of ducks is not a workflow, and colouring it as if
   it were would teach the guest something untrue.
   ============================================================================================== */

:root{
  /* THE CANONICAL FIVE. These are the Human Hatch stage colours, lifted verbatim from
     HATCH_STAGES in assets/hatch-runtime.js so the reference implementation and the system that
     grew out of it cannot drift apart. */
  --dt-1:#ec4899;   /* rose    */
  --dt-2:#a855f7;   /* purple  */
  --dt-3:#6366f1;   /* indigo  */
  --dt-4:#22d3ee;   /* cyan    */
  --dt-5:#f4c430;   /* gold - the product's original accent, kept as a full member */
}

/* Each tone sets --dtc for everything beneath it, so one attribute on a card drives its border,
   its wash, its title and anything else that asks. */
[data-dt="1"]{--dtc:var(--dt-1)}
[data-dt="2"]{--dtc:var(--dt-2)}
[data-dt="3"]{--dtc:var(--dt-3)}
[data-dt="4"]{--dtc:var(--dt-4)}
[data-dt="5"]{--dtc:var(--dt-5)}

/* ---------------------------------------------------------------------------------------------
   THE CARD / PILL FAMILY.

   This is the Hatch pill's shape and weight without the Hatch pill's behaviour: same radius, same
   two-pixel edge, same tinted wash, same serif title over a quiet sans description. No animation,
   no active state, no completion state - see the note above.
   --------------------------------------------------------------------------------------------- */
.dt-card{
  position:relative;display:block;width:100%;text-align:left;
  border-radius:15px;border:2px solid color-mix(in srgb, var(--dtc, var(--dt-5)) 38%, transparent);
  background:color-mix(in srgb, var(--dtc, var(--dt-5)) 9%, rgba(255,255,255,0.02));
  color:#fff;text-decoration:none;
  transition:border-color .22s, background .22s, transform .12s;
}
.dt-card:hover{
  border-color:color-mix(in srgb, var(--dtc, var(--dt-5)) 62%, transparent);
  background:color-mix(in srgb, var(--dtc, var(--dt-5)) 15%, rgba(255,255,255,0.02));
}
.dt-card:active{transform:scale(0.995)}

/* THE TYPOGRAPHY IS HATCH'S, and it is already on the device. Palatino is a humanist serif drawn
   from a calligrapher's hand - warm, elegant, readable at a glance - and Georgia, which the
   certificate already uses, is the fallback. No web font is imported anywhere in this system. */
.dt-title{
  display:block;
  font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,'Times New Roman',serif;
  font-size:19px;font-weight:600;letter-spacing:.2px;line-height:1.22;color:#fff;
}
.dt-sub{
  display:block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12.5px;font-weight:400;letter-spacing:.1px;line-height:1.45;
  color:rgba(255,255,255,0.58);margin-top:5px;
  white-space:normal;overflow-wrap:break-word;
}
@media (max-width:360px){
  .dt-title{font-size:17px}
}

/* ---------------------------------------------------------------------------------------------
   THE PAGE SUBHEADER.

   The Hatch subheader's language, generalised: a duck on the left, an expressive page name, a
   quiet line under it, and the faded starfield behind. Each page supplies its own words and its own
   palette tone; nothing here is Hatch-specific, and Hatch keeps its own copy of these rules so this
   file can never reach back and restyle it.
   --------------------------------------------------------------------------------------------- */
/* THE SUBHEADER IS OFTEN AN <h1>, AND AN h1 BRINGS ITS OWN WEIGHT AND SIZE WITH IT. A page that
   wraps these classes around its existing heading was handing the descriptor 800-weight and the
   heading's font-size through inheritance, which is why the first page to try it rendered a small
   italic line as a large bold block. Every text property these classes depend on is therefore
   stated outright rather than assumed. */
.dt-sub-head{
  display:flex;align-items:center;gap:13px;padding:11px 14px;margin:0 0 10px;
  font-size:16px;font-weight:400;letter-spacing:normal;line-height:normal;
  border-radius:16px;border:1px solid rgba(255,255,255,0.08);
  background-image:
    radial-gradient(2.4px 2.4px at 22% 24%,rgba(255,255,255,.95),transparent),
    radial-gradient(2.6px 2.6px at 63% 14%,rgba(255,236,180,1),transparent),
    radial-gradient(2.2px 2.2px at 86% 38%,rgba(255,255,255,.9),transparent),
    radial-gradient(2px 2px at 47% 60%,rgba(255,236,180,.95),transparent),
    radial-gradient(1.8px 1.8px at 8% 66%,rgba(255,255,255,.8),transparent),
    radial-gradient(2.2px 2.2px at 74% 68%,rgba(255,236,180,.85),transparent),
    radial-gradient(120% 100% at 18% 8%,color-mix(in srgb, var(--dtc, var(--dt-2)) 34%, transparent),transparent 62%),
    radial-gradient(110% 96% at 88% 24%,rgba(56,189,248,.22),transparent 60%),
    linear-gradient(168deg,#170d33,#0d0a24 60%,#0a1024);
}
.dt-sub-duck{
  width:70px;height:80px;object-fit:contain;object-position:50% 100%;flex:none;
  background:transparent;border:none;padding:0;
  filter:drop-shadow(0 0 11px color-mix(in srgb, var(--dtc, var(--dt-5)) 55%, transparent))
         drop-shadow(0 4px 7px rgba(0,0,0,.55));
}
.dt-sub-words{flex:1;min-width:0}
.dt-sub-name{
  font-family:'Brush Script MT','Segoe Script','Bradley Hand','Lucida Handwriting',cursive;
  font-size:38px;line-height:1.04;font-weight:400;color:#fff;letter-spacing:.4px;
  text-shadow:0 0 14px color-mix(in srgb, var(--dtc, var(--dt-2)) 72%, transparent),
              0 2px 5px rgba(0,0,0,.65);
}
.dt-sub-tag{
  display:block;
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;
  font-size:13.5px;line-height:1.35;letter-spacing:normal;
  color:rgba(255,255,255,0.74);margin-top:3px;
}
.dt-sub-copy{
  font-size:13px;line-height:1.55;color:rgba(255,255,255,0.72);margin:0 2px 14px;
}
/* A PHONE GETS A SMALLER NAME SO IT STAYS ON ONE LINE, AND EVERY NUMBER HERE WAS MEASURED.

   The duck and the gap take about 75px of a 390px screen before the words start. Chrome was asked,
   for every page that uses this subheader, the largest size at which that page's own name still
   fits on ONE line:

                      Duck Tracker   Duck Journeys   The Registry     smallest -> used
       320px              24px            23px           27px             23  ->  22
       360px              29px            27px           32px             27  ->  27
       390px              31px            29px           35px             29  ->  29
      1280px              46px            42px           50px             42  ->  42

   The size used in each band is the SMALLEST of that row, so the promise holds for every page
   rather than for the shortest name - "Duck Journeys" sets all four. At the 32px and 44px that
   shipped first, two of the three names wrapped at 390 and one wrapped on the desktop.

   IF A LONGER PAGE NAME IS ADDED LATER, RE-MEASURE. tests/persistence/design-system-geometry
   checks this in a real browser at ten widths, so a name that no longer fits fails a test rather
   than shipping quietly. A name that does not fit wraps rather than breaking anything, but the
   composition is built on one line with the tagline beneath it. */
@media (max-width:430px){
  .dt-sub-name{font-size:29px}
  .dt-sub-tag{font-size:12.5px}
  .dt-sub-duck{width:62px;height:72px}
}
@media (max-width:360px){
  .dt-sub-head{gap:11px;padding:11px 12px}
  .dt-sub-duck{width:56px;height:66px}
  .dt-sub-name{font-size:27px}
  .dt-sub-tag{font-size:12px}
}
/* THE SMALLEST SCREENS STILL IN USE, AND THE SAME MEASUREMENT DECIDED THIS ONE. At 320px the words
   column is about 180-195px, and at the 27px above two of the three names wrapped. The table in the
   block above gives 23px as the largest size that fits every name here; 22px is used, one pixel
   under, because 23 was exact to the pixel on the longest name and a rounding difference in another
   engine's text shaping would wrap it.

   Below this there is no further breakpoint: a name would wrap rather than overflow, which is
   degradation and not breakage. */
@media (max-width:340px){
  .dt-sub-head{gap:9px;padding:10px 11px}
  .dt-sub-duck{width:50px;height:60px}
  .dt-sub-name{font-size:22px}
}
/* DESKTOP KEEPS THE COMPOSITION AND REFUSES TO BECOME A BANNER, exactly as Hatch's does: the card
   is capped well inside the column and the extra width becomes margin. */
@media (min-width:620px){
  .dt-sub-head{max-width:470px;padding:12px 16px}
  .dt-sub-duck{width:78px;height:92px}
  /* 42 AND NOT 44, FOR THE SAME MEASURED REASON AS THE PHONE SIZES ABOVE. The card is capped at
     470px here, so the extra width becomes margin rather than a banner, and that leaves about 347px
     for the name once the duck and the padding are taken. "Duck Journeys" needs 362px at 44px and
     wrapped; 42px is the largest that fits it. See the table above. */
  .dt-sub-name{font-size:42px}
  .dt-sub-tag{font-size:14px}
  .dt-sub-copy{max-width:560px}
}