/* ---------- Downloads page specific ----------

   Mobile first, like site.css: the rules outside a media query are the phone
   layout and the min-width queries add to them. */

  /* Only what differs from .page-hero p in site.css — colour, size and leading
     already come from there. Three sibling stylesheets still restate all five;
     this one doesn't add a fourth. */
  .page-hero p.lede{
    margin-top:22px;
    max-width:66ch;
  }

  /* Tighter than site.css's 56px either side of the hero's rule, on this page
     only, as 404.css also does. The section is named rather than matched as
     "the one after the hero": a positional selector would stop matching the
     day something is put between them, and stop silently — the spacing check
     asserts a 24px minimum, so too much padding still passes. */
  .page-hero{ padding-bottom:40px; }
  .downloads-access{ padding-top:40px; }

  /* ---------- Choosing a way in ----------

     The same hairline-gap grid as .intent-grid on /contact: one column on a
     phone, side by side once there is room.

     This pattern is now in nine places — .gen-stat-grid in site.css, plus
     .intent-grid, .value-grid, .trust-row, .resource-list, .board-list,
     .next-grid, .notfound-links and this one. Four of them hardcode rgba(22,32,43,0.12)
     for the hairline instead of --gen-navy-line, so those grids are already
     painting a different grey from this one. It wants hoisting into site.css
     next to .gen-stat-grid; that is a seven-file change and its own PR. */

  .access-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--gen-navy-line);
    border:1px solid var(--gen-navy-line);
  }
  /* Column, so the action can be pushed to the bottom edge — the two cards
     hold different amounts of text and buttons at different heights read as a
     misalignment rather than as two equal choices. */
  .access-card{
    display:flex;
    flex-direction:column;
    padding:30px 26px;
    background:var(--gen-white);
  }
  .access-card h2{
    margin:12px 0 10px;
    font-size:1.25rem;
  }
  .access-card .tag{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gen-teal-text);
  }
  .access-card p{
    margin:0 0 24px;
    font-size:14.5px;
    line-height:1.7;
    color:var(--gen-text-dim);
  }
  /* auto pushes the button down; flex-start stops it stretching the full
     width of the card, which would make both cards read as one banner.

     The two actions also resolved 7px apart in height, which side by side
     reads as two different sizes of button. Two causes, both fixed here:

       - a <button> defaults to line-height `normal`, an <a> inherits body's
         1.5, so the line box differed by ~4px. Stated below rather than
         inherited. inline-flex so both agree on the box model too.
       - .gen-btn-secondary carries a 1.5px border and .gen-btn-primary has
         none, for the remaining 3px. A transparent border on the primary
         makes the two variants the same size without changing how it looks.

     Both are really site.css's to fix, since any page pairing a primary with
     a secondary hits them. Scoped here rather than changed site-wide from a
     tracer page. */
  .access-card .gen-btn{
    display:inline-flex;
    align-items:center;
    line-height:1.2;
    margin-top:auto;
    align-self:flex-start;
  }
  .access-card .gen-btn-primary{ border:1.5px solid transparent; }

  /* Same two states, and the same reasoning, as .contact-form-status: the
     left border tells them apart and the sentence inside says which is which.
     The palette has no error colour and inventing one here would be a brand
     decision rather than a CSS one. */
  .downloads-status{
    margin:18px 0 0;
    padding:12px 14px;
    font-size:14px;
    color:var(--gen-navy);
    background:var(--gen-white);
    border-left:3px solid var(--gen-teal);
  }
  .downloads-status.is-error{ border-left-color:var(--gen-gold); }

  /* ---------- Waiting ----------

     Signing in costs two round trips — the token exchange, then the API call —
     and the page sat empty through both. */

  .downloads-loading{
    display:flex;
    align-items:center;
    gap:10px;
    margin:22px 0 0;
    font-size:14.5px;
    color:var(--gen-text-dim);
  }
  /* Any author `display` beats the browser's own `[hidden]{display:none}`, so
     without this the spinner is on screen from first paint and never leaves.
     Every other element the script toggles is a plain block and needs no such
     rule, which is exactly why this one is easy to miss. */
  .downloads-loading[hidden]{ display:none; }
  /* A pseudo-element, so the sentence the script writes is the whole of the
     element's text and the ring cannot be announced or wiped by it.

     The words are the message and the ring is decoration on top of them:
     site.css stops animation outright under prefers-reduced-motion, so this
     becomes a static ring for anyone who asked for that, which is fine because
     it was never the thing doing the telling.

     flex:none because a spinner that squashes into an ellipse while the
     sentence beside it wraps is worse than no spinner. */
  .downloads-loading::before{
    content:"";
    flex:none;
    width:18px;
    height:18px;
    border:2px solid var(--gen-navy-line);
    border-top-color:var(--gen-teal);
    border-radius:50%;
    animation:downloadsSpin 0.8s linear infinite;
  }
  @keyframes downloadsSpin{
    to{ transform:rotate(360deg); }
  }

  /* The two states the script reveals both offer a way out, and an inline link
     left at the browser default is the tell that markup arrived without its
     CSS. Same treatment as .thanks-next a in site.css: the gold underline is
     what distinguishes it, so the link is not signalled by colour alone. */
  #downloads-none,
  #downloads-error {
    font-size:14.5px;
    line-height:1.7;
    color:var(--gen-text-dim);
  }
  #downloads-none a,
  #downloads-error a{
    color:var(--gen-navy);
    text-decoration:none;
    border-bottom:1px solid var(--gen-gold);
  }
  #downloads-none a:hover,
  #downloads-none a:focus,
  #downloads-error a:hover,
  #downloads-error a:focus{ border-bottom-color:var(--gen-navy); }

  /* ---------- Signed in ----------

     No panel around this: each download is a .gen-card in its own right, and
     boxing a set of boxes just adds a frame nobody reads. */

  .downloads-whoami{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin:0;
    font-size:14px;
    color:var(--gen-text-dim);
  }
  /* A real button, styled down to look like a link: signing out is an action,
     not a destination, so it must not be an <a href="#">. */
  .downloads-signout{
    padding:0 4px;
    min-height:44px;
    font-family:var(--gen-font);
    font-size:13.5px;
    color:var(--gen-navy);
    background:none;
    border:none;
    border-bottom:1px solid var(--gen-gold);
    cursor:pointer;
  }
  .downloads-signout:hover{ color:var(--gen-teal-text); }

  /* ---------- The list of them ----------

     No column count is written down: auto-fit finds one per phone, tablet and
     laptop on its own. Still mobile-first — min(320px,100%) is what makes it
     so, shrinking the track with the container below 320px rather than
     overflowing, which a bare minmax(320px,1fr) does.

     Capping the track to stop a lone card taking the whole row doesn't work:
     auto-fit counts tracks by the maximum, so minmax(320px,560px) gives one
     560px column at every width. */
  #downloads-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap:20px;
    margin-top:22px;
  }

  /* ---------- A single download ---------- */

  /* Background, border and radius come from .gen-card in site.css. Tighter
     than it was: padding that read as generous across the page reads as slack
     in a 360px column. */
  .download-card{
    padding:20px 18px;
  }
  .download-card-head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }
  .download-card h2{
    margin:0;
    font-size:1.1rem;
  }
  .download-card > p{
    margin:6px 0 0;
    font-size:14px;
    color:var(--gen-text-dim);
  }
  /* Says "this is not a real release" in a way that survives being screenshotted
     out of context. Not colour alone — it carries the word too. */
  .download-badge{
    padding:4px 10px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gen-navy);
    background:var(--gen-gold-dim);
    border-radius:2px;
  }

  /* A SHA is one unbroken 64-character token, which is exactly what forces a
     phone to scroll sideways if it is left to its own devices. */
  /* Compared against a file, not read, so it is the smallest type here. It
     cannot also be lighter: --gen-text-dim is 4.87:1 on frost-2 and the next
     step down the alpha, 0.64, is 4.59:1 — anything visibly paler fails AA at
     this size. break-all because one unbroken 64-character token is what makes
     a phone scroll sideways. */
  .download-sha{
    margin-bottom:6px;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:11px;
    color:var(--gen-text-dim);
    word-break:break-all;
  }

  /* Qualified with the tag, because `.download-card > p` above also matches
     this element and is more specific — unqualified, only font-style landed
     and the margin and size here did nothing at all. */
  .download-card > p.download-note{
    margin:12px 0 0;
    font-size:13px;
    font-style:italic;
    color:var(--gen-text-dim);
  }

  /* Always a column, never the button beside its filename: a card is one grid
     track wide, so there is no width at which that reads well. */
  .download-row{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--gen-navy-line);
  }
  /* Narrower than the site button, not shorter: 44px stays the tap target and
     min-height in site.css keeps it. */
  .download-row .gen-btn{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    padding:12px 18px;
    line-height:1.2;
  }
  .download-row-meta{
    font-size:13px;
    color:var(--gen-text-dim);
  }
  .download-notes{
    margin:8px 0 0;
    font-size:14px;
    color:var(--gen-text-dim);
  }

  /* ---------- The two disclosures ----------

     A card folds away the checksum of the build it leads with, and the builds
     that aren't this visitor's. One treatment for both, so a chevron means the
     same thing wherever it turns up. */
  .download-more summary,
  .download-verify summary{
    display:flex;
    align-items:center;
    gap:8px;
    /* A summary gets no box from the browser, so the tap target is ours. */
    min-height:44px;
    font-weight:700;
    color:var(--gen-navy);
    cursor:pointer;
    /* Safari ignores this and draws its own marker, hence the next rule. */
    list-style:none;
  }
  .download-more summary::-webkit-details-marker,
  .download-verify summary::-webkit-details-marker{ display:none; }
  /* Shape rather than colour, so it reads for anyone who cannot tell the teal
     from the navy. Reduced motion loses the animation, not the turn. */
  .download-more summary::before,
  .download-verify summary::before{
    content:"";
    flex:none;
    width:7px;
    height:7px;
    border-right:2px solid var(--gen-teal);
    border-bottom:2px solid var(--gen-teal);
    transform:rotate(-45deg);
    transition:transform 0.15s ease;
  }
  .download-more[open] summary::before,
  .download-verify[open] summary::before{ transform:rotate(45deg); }
  .download-more summary:hover,
  .download-verify summary:hover{ color:var(--gen-teal-text); }

  /* The hairline the folded row used to draw, so a closed panel reads as the
     foot of the card rather than as something missing. */
  .download-more{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--gen-navy-line);
  }
  .download-more summary{ font-size:13px; }
  /* The summary is the divider above the first row in here, so that row
     doesn't draw a second one. (A :first-of-type rule never did this: in a
     card the first div is the head, not a row.) */
  .download-more summary + .download-row{
    border-top:none;
    padding-top:0;
  }

  /* A block rather than something tucked beside the filename: open, it has to
     give the hash the card's full width, and 64 characters in a column beside
     the filename wraps eight times. Measured at +5px per card against the two
     lines of hex it replaces — this buys a quiet card, not a shorter one. */
  .download-verify summary{
    /* Two identical bold controls stacked read as one repeated thing, and of
       the two this is the minor one. */
    font-weight:400;
    font-size:12px;
    letter-spacing:0.03em;
  }

  @media (min-width:700px){
    .access-grid{ grid-template-columns:repeat(2,1fr); }
    .access-card{ padding:36px 32px; }
  }