/* ══════════════════════════════════════════════════════════════════════════
   FUNNEL — the two pieces of the creation funnel that no other sheet carries.

   Ported from the 45 mockups' shared 964-line stylesheet, same as base.css:

     09  GameType介绍   → `.howit-wrap` / `.howit-trigger` / `.howit-overlay` /
                          `.howit-modal` / `.howit-step`, the 「❔ How does this
                          work?」 disclosure and its sheet
     06  Creator仪表盘  → the coming-soon badge on a `.cat-strip` chip. NEITHER
                          mockup draws this badge — mockup 07's card is drawn
                          disabled and unexplained, and `creator.css` had already
                          answered that with `.dg-cat-card__badge`; this is the
                          same answer for mockup 06's chip

   MOBILE-FIRST, like base.css: the mockups' `@container (max-width:700px)`
   branch is the BASE here (the sheet slides up from the bottom edge) and
   `@media (min-width:701px)` adds the centred-modal layout back.

   ── WHY THIS FILE IS LINKED, NOT @import-ED ───────────────────────────────
   `web/styles.tw.css` compiles base/play/home/creator/workbench/ads/report/
   legal into `/styles.css` through Tailwind, and that build is run centrally.
   This sheet is loaded by the two pages that need it, with a `<link>` emitted
   from `Document.head` — so it is live the moment the file is saved, with no
   build step and no edit to a stylesheet another agent owns.

   TODO(P5.x / lead): fold this into `web/css/creator.css` (or add the
   `@import "./css/funnel.css";` line to `web/styles.tw.css`) at the next
   central rebuild, and drop the two `dgFunnelStylesheet()` calls with it. If
   BOTH happen the rules are simply declared twice — identical text, no cascade
   surprise — but there is no reason to keep both.

   NO DARK BLOCK. All 45 mockups are light-only.

   NO RAW COLOUR that a token can express: the scrim is the ink token mixed
   with transparency rather than the mockups' `rgba(20,10,60,.5)`, which is the
   same colour to the eye and cannot drift away from the palette.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — a disclosure driven by one clipped checkbox, no JavaScript.

   Mockup 09 opens this with `onclick="openHowIt()"`. There is no script on
   these screens to hang that on, so the browser owns the state:

     * `.dg-howit__state` is a checkbox, clipped to a pixel rather than
       `display:none` — clipping keeps it in the tab order, which is the whole
       reason the sheet is keyboard-operable at all. Space opens it, Space
       closes it. `home.css` documents the same mechanism for the hero's pager;
     * the trigger, the ✕ and the click-away scrim are three `<label for>`s
       naming that one input, so a pointer gets every affordance the mockup
       draws;
     * `:checked ~ .dg-howit__overlay` is what shows the sheet. The combinator
       only looks forward, which is why the input is the wrapper's first child.

   The two mechanisms that were tried first, so nobody re-tries them:

     * an `@client` island needs a `build_runner` pass to register, and an
       unregistered island renders markup with no handler — a control that looks
       live and does nothing;
     * `:target` (`<a href="#dg-howit">` + `.dg-howit__overlay:target`) is
       defeated by the `<base href="/">` the server document carries: a bare
       fragment resolves against the BASE, so the trigger navigated to the front
       door. Verified in Chrome, not reasoned about.
   ══════════════════════════════════════════════════════════════════════════ */

/* The state. Hidden by clipping, never by `display:none`. */
.dg-howit__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* `.howit-wrap` — the strip under the Create button. */
.dg-howit {
  padding-top: 16px;
  text-align: center;
}

/* `.howit-trigger`. A pill, not a link-coloured phrase: the mockup gives it the
   brand tint so it reads as a control. `--dg-tap` is the accessibility floor
   this product builds to; the mockup's own padding computes to ~35px. */
.dg-howit__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--dg-tap);
  padding: 8px 15px;
  border: none;
  border-radius: 100px;
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.dg-howit__trigger:hover {
  color: var(--color-brand);
}

/* The input is a pixel wide, so its focus ring has to be drawn on the label the
   keyboard is really on. Same ring base.css gives every other control. */
.dg-howit__state:focus-visible + .dg-howit__trigger {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}

/* `.howit-overlay`. Hidden until the checkbox is checked. `position:fixed` is
   safe from inside `.dg-play`: that element is `overflow:hidden` but carries no
   transform, filter or containment, so it does not become a containing block. */
.dg-howit__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: flex-end;
  justify-content: center;
  /* Fixed, so it escapes the horizontal safe-area padding base.css puts on
     <body> — and unlike the share sheet its panel is full-bleed
     (`max-width: 100%`), so in landscape it really would run under a notch. */
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
}

.dg-howit__state:checked ~ .dg-howit__overlay {
  display: flex;
}

/* The click-away close. Covers the whole overlay BEHIND the sheet, and is
   hidden from assistive tech: it is a duplicate of the ✕, and a full-screen
   unlabelled control is noise to anything reading the page. */
.dg-howit__scrim {
  position: absolute;
  inset: 0;
  display: block;
}

/* `.howit-modal`, in its phone shape: a bottom sheet the full width of the
   screen with the top two corners rounded. */
.dg-howit__modal {
  position: relative;
  /* `.dg-howit` centres its trigger; the sheet is prose and sets its own. */
  text-align: left;
  width: 100%;
  max-width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  /* A bottom sheet on a phone, so its last row needs the home-indicator inset
     the creator and workbench bars already take. It was the one bottom-anchored
     panel in the product without it. 0 on everything but a notched device. */
  padding: 14px 22px calc(30px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: var(--color-card);
  box-shadow: var(--dg-shadow-card);
}

/* `.howit-handle` — the grab bar a bottom sheet has. Decoration; the sheet is
   not draggable, and it is hidden from assistive tech for that reason. */
.dg-howit__handle {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 100px;
  background: var(--color-line);
}

.dg-howit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.dg-howit__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink);
}

/* `.howit-close`. The mockup draws a 30px disc; this is the tap floor with the
   disc centred inside it, so the target is reachable with a thumb. */
.dg-howit__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dg-tap);
  height: var(--dg-tap);
  border: none;
  border-radius: 50%;
  background: var(--color-page);
  color: var(--color-ink-soft);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.dg-howit__close:hover {
  color: var(--color-ink);
}

/* The steps. An ordered list, because they happen in order — the mockup's
   `.howit-step` rows are divs and lose that. */
.dg-howit__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-howit__step {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.dg-howit__step:last-child {
  margin-bottom: 0;
}

/* `.howit-step .n`. The number is decoration — the title beside it carries the
   meaning — so the markup hides it from assistive tech and the list element
   supplies the ordering instead. */
.dg-howit__ordinal {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
  font-family: var(--font-display);
  font-weight: 800;
}

.dg-howit__step-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
}

.dg-howit__step-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

@media (min-width: 701px) {
  /* The wide branch is the mockup's default: a centred modal, not a sheet. */
  .dg-howit__overlay {
    align-items: center;
    padding: 20px;
  }

  .dg-howit__modal {
    max-width: 420px;
    max-height: none;
    padding: 26px 26px 28px;
    border-radius: 24px;
  }

  .dg-howit__handle {
    display: none;
  }
}

/* A person who has asked for less motion still gets the sheet; nothing here
   animates, which is the point — a checkbox disclosure has no transition to
   suppress. Kept as a note so the next hand does not add one without checking. */

/* ══════════════════════════════════════════════════════════════════════════
   COMING-SOON BADGE on mockup 06's `.cat-strip` chip.

   `creator.css`'s `.dg-cat-card__badge` already says 「Coming soon」 in words on
   mockup 07's card. The dashboard chip for the same Game Category said it only
   through `aria-disabled` and 55% opacity, which on a strip of five look-alike
   chips reads as "greyed out for no reason" and clicks as nothing at all. Same
   badge, same block-scoped class name — a `dg-cat-card__badge` sitting on a
   `dg-cat-chip` would be a class lying about which block it belongs to.
   ══════════════════════════════════════════════════════════════════════════ */
.dg-cat-chip__badge {
  /* `.dg-cat-chip` is a stretch column, so an inline-block would still fill the
     width. `align-self` is what keeps the pill the width of its own words —
     mockup 07's card gets that for free from its `align-items: center`. */
  align-self: flex-start;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--color-card);
  color: var(--color-ink-soft);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}