/* =====================================================================
   Bushwick Daily · the paywall as the New York Times' sign-in sheet, at every width (gate_design overlay)

   Spec: docs/paywall/overlay-sheet-2026-11-09/SPEC.md. Linked on the pages that print a gate, at every width (hl/bootstrap.php;
   exempt from the 600px scoping of the wider layout's sheets, as bd-membership.css is): owner, 2026-11-09, "the paywall update
   should be applied to desktop as well as mobile please. we want this consistent across all screensizes". Every rule acts only
   under the classes hl.js sheet() sets on <html> or on .bd-cut--overlay / .bd-gate--overlay, which only the overlay prints.
   Until 2026-11-09 this was section 4 of hl-pay.css, phones only.
   ===================================================================== */

/* ---------- 4. gate_design overlay: the New York Times' sign-in sheet on a phone. The spec, with the owner's words and the
   measurements of the NYT recording: docs/paywall/overlay-sheet-2026-11-09/SPEC.md. hl.js sheet() runs the sequence and sets the
   classes on <html>:
     hl--sheet-wait   landing: an open story. No card, no wash; the reader scrolls the story. Until the reader has scrolled the
                      trigger distance or 5 seconds have passed.
     hl--sheet-on     the reset: the page is back at its top, it no longer scrolls, the wash is over it; the cut (div.bd-cut--overlay:
                      the card; bd-membership api.php bd_membership_cut_html) is a sheet fixed under the masthead.
     hl--sheet-in     the tile shows at the bottom of the screen (6% of it), empty: grey bars where its text will be.
     hl--sheet-up     the tile rises at an even speed to its place; at 66% of the way its text appears, all at once.
     hl--sheet-ready  the sheet scrolls (the story still does not): the tile rises to the foot of the dek's first line, and what
                      is still below then slides up under that line (the sheet is masked above it).
   Measured by hl.js on <html>: --bd-sheet-m (the masthead's bottom), --bd-sheet-top (the tile's place: 72px into the photo, at
   most 62% of the screen), --bd-sheet-stop (the foot of the dek's first line), --bd-sheet-from (how far below its place the tile
   starts). The tile's least height comes from the sheet's own box (4d), not from a measured screen height. Without JavaScript none of the classes is
   set: the card stays in the story, as the card design shows it. A known member never sees any of it (html.bd-is-member); an
   unlock replaces the cut and hl.js removes the classes. ---------- */

/* 4a. Tokens. Colour: Paper & Ink (the colour study of 2026-11-09, scratchpad colors/REPORT.md direction 2; the owner's pick): on the
   light theme a white tile, ink text and an ink Continue, a 2px ink rule on the tile's top edge, a grey wash; on the dark theme a
   warm paper tile, ink Continue, and a wash that dims the story. Yellow only in the marker under "Bushwick Daily." */
html.hl{--bd-sheet-m:calc(env(safe-area-inset-top,0px) + 52px);--bd-sheet-top:55vh;--bd-sheet-stop:30vh;--bd-sheet-from:0px;--bd-sheet-slide:800ms;--bd-sheet-under:240px;
  --bd-wash:linear-gradient(rgba(20,20,20,.04),rgba(20,20,20,.24));--pw-tile:#fff;--pw-rule:linear-gradient(#141414,#141414) top/100% 2px no-repeat;
  --pw-title:#141414;--pw-hi:linear-gradient(transparent 52%,#ffe135 52%,#ffe135 92%,transparent 92%);--pw-hi-fg:#141414;--pw-lede:#141414;--pw-soft:#5c5c5c;--pw-link:#141414;
  --pw-field-bg:#fff;--pw-field-line:#767676;--pw-field-fg:#141414;--pw-btn-bg:#141414;--pw-btn-fg:#fff;--pw-btn-hover:#2e2e2e;--pw-div:#e2e2e2;--pw-focus:#141414;
  --pw-error:#b3261e;--pw-panel:#f4f4f2;--pw-skel:#ececec}
@supports (height:1svh){html.hl{--bd-sheet-top:55svh;--bd-sheet-stop:30svh}}
html.hl[data-theme="dark"]{--bd-wash:linear-gradient(rgba(14,13,11,.40),rgba(14,13,11,.72));--pw-tile:#e8e4dc;--pw-rule:linear-gradient(transparent,transparent);
  --pw-title:#0e0d0b;--pw-lede:#0e0d0b;--pw-soft:#4a463e;--pw-link:#0e0d0b;--pw-field-bg:#f7f5f0;--pw-field-line:#6f6a60;--pw-field-fg:#0e0d0b;--pw-btn-bg:#0e0d0b;
  --pw-btn-fg:#f5f2eb;--pw-btn-hover:#2c2a25;--pw-div:#d3cec3;--pw-focus:#0e0d0b;--pw-error:#7f1f17;--pw-panel:#dcd7cc;--pw-skel:#d9d4ca}
@media (prefers-color-scheme:dark){html.hl:not([data-theme="light"]){--bd-wash:linear-gradient(rgba(14,13,11,.40),rgba(14,13,11,.72));--pw-tile:#e8e4dc;--pw-rule:linear-gradient(transparent,transparent);
  --pw-title:#0e0d0b;--pw-lede:#0e0d0b;--pw-soft:#4a463e;--pw-link:#0e0d0b;--pw-field-bg:#f7f5f0;--pw-field-line:#6f6a60;--pw-field-fg:#0e0d0b;--pw-btn-bg:#0e0d0b;
  --pw-btn-fg:#f5f2eb;--pw-btn-hover:#2c2a25;--pw-div:#d3cec3;--pw-focus:#0e0d0b;--pw-error:#7f1f17;--pw-panel:#dcd7cc;--pw-skel:#d9d4ca}}

/* 4b. Landing: an open story. The card and the end links are not on the page; the story's text fades as it does above the card. */
html.hl--sheet-wait .bd-cut.bd-cut--overlay > :is(.bd-gate,.bd-cut__end){display:none!important}   /* over the tile's own display at every width (4f) */

/* 4c. The sheet, from the reset on */
html.hl--gated.hl--sheet-on:not(.bd-is-member),html.hl--gated.hl--sheet-on:not(.bd-is-member) body{overflow:hidden}
/* the wash over the story, fixed to the screen from the masthead down; the tile slides over it (owner: "the gradient is not
   relative to the paywall tile but is consistent and sits below it") */
html.hl--gated.hl--sheet-on:not(.bd-is-member) body::after{content:"";position:fixed;top:var(--bd-sheet-m);right:0;bottom:-240px;left:0;z-index:8;pointer-events:none;background:var(--bd-wash)}

/* The sheet reaches --bd-sheet-under (240px) below the screen's fixed bottom edge: iOS 26 Safari draws the page under its floating
   toolbar while bottom:0 ends at the toolbar's top, and the story showed there below the tile (owner's iPhone, 2026-11-09: "the
   tile starts with its skirt hiked up"). The tile's bottom padding keeps its text above that edge. */
html.hl--gated.hl--sheet-on:not(.bd-is-member) .bd-cut.bd-cut--overlay{position:fixed;top:var(--bd-sheet-m);right:0;bottom:calc(-1 * var(--bd-sheet-under));left:0;z-index:9;
  overflow:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch;padding:calc(var(--bd-sheet-top) - var(--bd-sheet-m)) 0 0;background:none;
  -webkit-mask-image:linear-gradient(transparent calc(var(--bd-sheet-stop) - var(--bd-sheet-m)),#000 0);mask-image:linear-gradient(transparent calc(var(--bd-sheet-stop) - var(--bd-sheet-m)),#000 0)}
/* the reader has the scroll again once the text is on the tile; it moves the sheet */
html.hl--gated.hl--sheet-ready:not(.bd-is-member) .bd-cut.bd-cut--overlay{overflow-x:hidden;overflow-y:auto}
/* The billboard banner above the story (.bd-bb: bd-ads' article_billboard zone) goes when the sheet is up: on a 768px-tall screen it
   took the room above the tile, where the headline belongs (owner, 2026-11-09: "yes hide it once the sheet is up"). It shows on
   landing as before; hl.js measures the page after the reset, so the tile is placed against the headline without it. */
html.hl--gated.hl--sheet-on:not(.bd-is-member) .bd-bb{display:none!important}
/* the story's text and the end links stay out of the sheet: the agreement under Continue links the terms and the privacy policy */
html.hl--gated.hl--sheet-on:not(.bd-is-member) .bd-cut.bd-cut--overlay > :is(.bd-teaser,.bd-cut__end){display:none}
/* the rise: the tile starts --bd-sheet-from below its place, hidden; shows at the bottom of the screen; rises at an even speed */
html.hl--gated.hl--sheet-on:not(.bd-is-member) .bd-cut.bd-cut--overlay > .bd-gate{transform:translateY(var(--bd-sheet-from));visibility:hidden}
html.hl--gated.hl--sheet-in:not(.bd-is-member) .bd-cut.bd-cut--overlay > .bd-gate{visibility:visible}
html.hl--gated.hl--sheet-up:not(.bd-is-member) .bd-cut.bd-cut--overlay > .bd-gate{transform:none;transition:transform var(--bd-sheet-slide) linear}
/* empty until the text appears: grey bars where the title, the line, the label, the field, Continue and the small print will be */
html.hl--sheet-on:not(.hl--sheet-text) .bd-gate--overlay :is(.bd-gate__title,.bd-gate__lede,.bd-field__label,.bd-field__input,#bd-gate-continue,.bd-gate__agree,.bd-gate__options){color:transparent!important;background:var(--pw-skel)!important;border-color:transparent!important;box-shadow:none!important;border-radius:3px;text-decoration:none}
html.hl--sheet-on:not(.hl--sheet-text) .bd-gate--overlay :is(.bd-gate__title,.bd-gate__lede,.bd-field__label,#bd-gate-continue,.bd-gate__agree,.bd-gate__options) *{visibility:hidden}

/* 4d. The tile: Paper & Ink, the screen's full width, down to the bottom of the screen. The card's type: the 31px title, the 52px
   field and the 54px Continue (the owner tried the NYT's smaller scale on 2026-11-09 and kept the card's: "the bold font worked
   better with the bigger fields and took up more room"). */
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay{
  --bdm-text:var(--pw-title);--bdm-soft:var(--pw-soft);--bdm-field:var(--pw-field-bg);--bdm-line:var(--pw-field-line);--bdm-rule:var(--pw-div);
  --bdm-accent:var(--pw-btn-bg);--bdm-accent-hover:var(--pw-btn-hover);--bdm-on-accent:var(--pw-btn-fg);--bdm-danger:var(--pw-error);--bdm-danger-line:var(--pw-error);
  /* At the end of the scroll the tile's top is exactly the stop: its least height is the sheet's own height below the stop
     (100% here is the sheet's box below the tile's place, whatever height the phone reports), so the title never slides under
     the stop line where the tile's text fits (owner's iPhone, 2026-11-09: "scrolling up too far cuts off the top of the thanks for
     reading text"). */
  min-height:calc(100% + var(--bd-sheet-top) - var(--bd-sheet-stop));margin:0;
  padding:26px var(--gutter) calc(32px + var(--bd-sheet-under) + env(safe-area-inset-bottom,0px));
  background:var(--pw-rule),var(--pw-tile);border:0;border-radius:0;color:var(--pw-lede);
  /* the tile's colour below it (two copies, 45 and 90 screen-heights down; a shadow is not scrollable): iOS Safari's rubber band
     pulled the sheet past its end and showed the story under it (owner's phone, 2026-11-09) */
  box-shadow:0 45vh 0 var(--pw-tile),0 90vh 0 var(--pw-tile)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__title{color:var(--pw-title)}
/* the paid card's signed-in title shares the grid cell: only the one shown takes space */
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__title[data-bd-title-on='start'] > [data-bd-title='member'],html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__title[data-bd-title-on='member'] > [data-bd-title='start']{display:none}
/* the highlight as a marker stroke through the lower part of the letters, inside the line, so it never reaches the line above */
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__title em{color:var(--pw-hi-fg);background:var(--pw-hi);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__lede{color:var(--pw-lede)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay :is(.bd-gate__lede strong,.bd-gate__more strong,.bd-field__label){color:var(--pw-title)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-field__input{background:var(--pw-field-bg);color:var(--pw-field-fg);border-color:var(--pw-field-line)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-field__input:focus-visible{border-color:var(--pw-focus);box-shadow:0 0 0 1px var(--pw-focus)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay :is(.bd-btn--primary,#bd-gate-continue){background:var(--pw-btn-bg);border-color:var(--pw-btn-bg);color:var(--pw-btn-fg)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay :is(.bd-btn--primary,#bd-gate-continue):is(:hover,:active){background:var(--pw-btn-hover);border-color:var(--pw-btn-hover)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay :is(.bd-btn--primary,a,.bd-link,.bd-gate__keep-btn,button):focus-visible{outline:2px solid var(--pw-focus);outline-offset:3px}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay :is(.bd-gate__agree,.bd-gate__newsletter,.bd-gate__member-line,.bd-gate__memberline,.bd-gate__more){color:var(--pw-soft)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__options{color:var(--pw-lede);border-top-color:var(--pw-div)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay :is(.bd-gate__agree a,.bd-gate__options a,.bd-link,.bd-gate__keep-btn){color:var(--pw-link);text-decoration-color:var(--pw-link)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-error:not(:empty):not(.bd-error--hint){color:var(--pw-error)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-error--hint{color:var(--pw-title)!important}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__panel{background:var(--pw-panel);border-color:var(--pw-div);color:var(--pw-title)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__panel button{color:var(--pw-title);border-color:var(--pw-soft)}
/* Shorter screens (an iPhone's Safari page area is about 720px): the gaps between the tile's lines tighten so its text fits
   between the stop and the bottom edge and the title stays whole at the end of the scroll; the type, the 52px field and the 54px
   Continue keep their sizes (owner, 2026-11-09). */
@media (max-height:800px){
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay{padding-top:22px;padding-bottom:calc(14px + var(--bd-sheet-under) + env(safe-area-inset-bottom,0px))}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__title{margin-bottom:8px}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__lede{margin-bottom:12px}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay #bd-gate-continue{margin-top:12px}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__agree{margin-top:10px}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__options{margin-top:14px}
}

/* 4e. The payment step in the tile (a reader signed in without a membership: bd-membership.js showInlinePlans puts the
   membership sheet's paywall in the card and marks it .is-pw-inline). The paywall is the dark paywall of every width (the plans,
   the values, the agreement, Stripe's fields, which bd-membership.js styles dark): on the paper tile its light text could not be
   read (owner's iPhone, 2026-11-09: "the color of the payment paywall is all messed up and impossible to read"). While it is
   there the tile takes the card's dark palette, with the yellow rule on its edge; the sign-in tile stays Paper & Ink. */
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay.is-pw-inline{
  --pw-tile:#141414;--pw-rule:linear-gradient(#ffe135,#ffe135) top/100% 4px no-repeat;--pw-title:#fff;--pw-hi-fg:#141414;--pw-lede:#d6d6d6;--pw-soft:#a0a0a0;
  --pw-link:#fff;--pw-field-bg:#1a1a1a;--pw-field-line:#707070;--pw-field-fg:#fff;--pw-btn-bg:#ffe135;--pw-btn-fg:#0a0a0a;--pw-btn-hover:#ffd700;--pw-div:#2a2a2a;
  --pw-focus:#ffe135;--pw-error:#ffb3ac;--pw-panel:#141414}

/* The field and Continue at id strength (the wider card's rules name them by id) */
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay #bd-gate-email{background:var(--pw-field-bg);color:var(--pw-field-fg);border-color:var(--pw-field-line)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay #bd-gate-email:focus,html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay #bd-gate-email:focus-visible{border-color:var(--pw-focus);box-shadow:0 0 0 1px var(--pw-focus);outline:0}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay #bd-gate-continue{background:var(--pw-btn-bg);border-color:var(--pw-btn-bg);color:var(--pw-btn-fg)}
html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay #bd-gate-continue:is(:hover,:active){background:var(--pw-btn-hover);border-color:var(--pw-btn-hover)}

/* 4f. Wider screens: the same tile, its content in a centred column. The wider layout's card rules (bd-membership.css: the
   two-column card from 768px, Direction A's band from 1024px: a 56px title, the address and Continue side by side, a 100vmax
   border-image) are undone inside the sheet, so the tile reads as it does on a phone. */
@media (min-width:600px){
  html.hl--gated.hl--sheet-on:not(.bd-is-member) .bd-cut.bd-cut--overlay{margin:0}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay{display:block;border-image:none;padding-top:40px;padding-right:max(24px,calc((100% - 560px) / 2));padding-left:max(24px,calc((100% - 560px) / 2))}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay::before{display:none}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay > :is(.bd-gate__head,.bd-gate__body){max-width:none;min-width:0;margin:0;grid-column:auto}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__title{width:auto;margin:0 0 14px;font-size:34px;line-height:.95;letter-spacing:-.02em}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__lede{max-width:none;margin:0 0 18px;font-size:17px;line-height:1.5}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__start{display:block;max-width:none;margin:0}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-gate__signup{display:grid;gap:.5rem;max-width:none}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay :is(.bd-field__label,.bd-gate__signup .bd-error,.bd-gate__keep,.bd-gate__agree,.bd-gate__newsletter){grid-column:auto;grid-row:auto}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay .bd-field__label{margin:0;font-size:13px;line-height:1.4}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay #bd-gate-email{grid-column:auto;grid-row:auto;width:100%;height:auto;min-height:52px;margin:0;padding:.75rem 1rem;font-size:16px;border-radius:2px}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay #bd-gate-continue{grid-column:auto;grid-row:auto;width:100%;height:auto;min-height:54px;margin:16px 0 0}
  html.hl .bd-cut.bd-cut--overlay > .bd-gate.bd-gate--story.bd-gate--overlay :is(.bd-gate__agree,.bd-gate__options){max-width:none}
}