/* /tasks: the map's legend. Loaded only by tasks.html, on top of site.css (tokens, nav, footer, pills, board).
   The opener is the street plate with one pin per category; each pin opens its layer below: a full-width block in
   the category's own colour, the same streets running under it, its clay on its pin, every item in real text. */

/* ---------- opener: the legend on the map ---------- */
.t-open { position: relative; min-height: max(100vh, 760px); min-height: max(100svh, 760px); background: var(--map); --halo: var(--map); overflow: hidden; overflow: clip; }
.t-open-in { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 72px)); padding-bottom: 40px; pointer-events: none; }
.t-open-in > * { pointer-events: auto; }
.t-open .crumb { margin-bottom: clamp(14px, 2.4vh, 24px); }
.t-open .pg-h1 { width: max-content; max-width: 100%; }
.t-lead { margin-top: clamp(20px, 3vh, 32px); max-width: 32ch; font: 600 var(--fs-lead)/1.4 var(--text); text-shadow: 0 0 .2em #fff, 0 0 .4em #fff, 0 0 .7em #fff; }

.legend { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lp { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); translate: -50% -50%; display: grid; justify-items: center; gap: 10px; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lp-t { --d: clamp(76px, 7vw, 104px); position: relative; display: block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--c); border: 3px solid var(--ink); box-shadow: 0 10px 22px -10px rgba(18,18,18,.5); }
.lp-t img { position: absolute; left: 50%; bottom: 6%; width: 120%; max-width: none; height: auto; translate: -50% 0; transition: transform .25s var(--out); transform-origin: 50% 100%; }
.lp-n { font: 600 14px/1 var(--text); background: var(--ink); color: #fff; border-radius: 8px; padding: 8px 11px 7px; white-space: nowrap; rotate: 2deg; transition: background-color .25s var(--out), color .25s var(--out); }
.lp:nth-child(even) .lp-n { rotate: -2deg; }
@media (hover: hover) {
  .lp:hover .lp-t img { transform: translateY(-8px) rotate(-5deg); }
  .lp:hover .lp-n { background: var(--y); color: var(--ink); }
}
.lp:active { scale: .97; transition: scale .1s; }
html.motion .lp { animation: pin-drop .55s var(--out) both; animation-delay: calc(.3s + var(--k, 0) * .07s); }
html.motion .legend:focus-within .lp { animation: none; } /* keyboard focus never waits for a drop */

/* ---------- the destination board: the things people say in one line ---------- */
.t-board { margin-top: 0; }
.board-row .board-set { display: flex; padding: 0; font: inherit; }
.board-row .board-set::after { content: none; }

/* ---------- the layers: one colour block per category ---------- */
.blk { --fg: var(--ink); position: relative; background: var(--c); color: var(--fg); overflow: hidden; overflow: clip; scroll-margin-top: var(--nav-h); }
.blk.fg-w { --fg: #fff; }
/* the same street plate, in the block's colour, fading out under the type */
.blk-map { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15); opacity: .55;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 78%); mask-image: linear-gradient(to left, #000 20%, transparent 78%); }
.flip .blk-map { -webkit-mask-image: linear-gradient(to right, #000 20%, transparent 78%); mask-image: linear-gradient(to right, #000 20%, transparent 78%); }
.fg-w .blk-map { mix-blend-mode: normal; filter: none; opacity: .1; }

.blk-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); grid-template-areas: "head pin" "items items"; gap: clamp(36px, 4vw, 64px) clamp(32px, 5vw, 96px); padding-top: clamp(80px, 9vw, 136px); padding-bottom: clamp(56px, 6vw, 96px); }
.flip .blk-in { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); grid-template-areas: "pin head" "items items"; }
.blk-head { grid-area: head; display: grid; justify-items: start; align-content: end; gap: 16px; }
.blk .cat-tag { font: 600 13px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px 7px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px currentColor; }
.blk-h { font: 800 clamp(52px, 6.7vw, 96px)/.9 var(--display); letter-spacing: -.035em; margin-top: 8px; }
.blk-xl .blk-h { font-size: clamp(56px, 8.9vw, 128px); letter-spacing: -.04em; }
.blk-line { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; max-width: 28ch; }
.blk .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.blk .chips span { font: 600 14px/1 var(--text); padding: 9px 12px 8px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.blk .arrow-link { margin-top: 2px; }

/* price bands where one exists: the app's pill, linking to its row on /prices */
.bands { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.bands a { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 5px 18px 5px 5px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 10%, transparent); font: 600 15px/1.2 var(--text); touch-action: manipulation; transition: transform .25s var(--out), background-color .25s var(--out); }
.bands .pill { font-size: clamp(22px, 1.9vw, 28px); }
.on-yb .bands .pill { background: var(--ink); color: var(--y); }
@media (hover: hover) { .bands a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--fg) 18%, transparent); } }
.bands a:active { transform: scale(.97); transition-duration: .1s; }

/* the category's pin: a disc in its own colour, outlined like the app's pins, the clay standing on it */
.blk-pin { grid-area: pin; position: relative; justify-self: center; align-self: center; width: min(320px, 24vw); aspect-ratio: 1; }
.blk-pin::before { content: ""; position: absolute; left: 9%; right: 9%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--c) 80%, #121212); border: 3px solid var(--ink); }
.fg-w .blk-pin::before { background: color-mix(in srgb, var(--c) 82%, #fff); }
.blk-pin img { position: absolute; left: 0; bottom: 12%; width: 100%; height: auto; transition: transform .5s var(--out); }
@media (hover: hover) { .blk:hover .blk-pin { transform: translateY(-6px) rotate(-2deg); } }
.blk-pin { transition: transform .5s var(--out); }
/* scale-settle: the clay lands on its pin as the layer comes in */
html.motion .blk-pin img[data-fade] { opacity: 0; transform: scale(1.12) translateY(24px); transition: opacity .8s var(--out), transform 1s var(--out); }
html.motion .blk-pin img[data-fade].is-in { opacity: 1; transform: none; }

/* every item, in real text, on hairlines */
.items { grid-area: items; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); border-top: 2.5px solid currentColor; counter-reset: it; }
.items li { counter-increment: it; padding: 16px 0 20px; border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent); font: 800 clamp(22px, 2vw, 30px)/1.06 var(--display); letter-spacing: -.015em; }
.items li::before { content: "/ " counter(it, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 12px/1 var(--text); letter-spacing: .08em; opacity: .66; }
.rules-else { grid-area: items; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); border-top: 2.5px solid currentColor; padding-top: 22px; }
.rules-else p { font: 800 clamp(24px, 2.4vw, 36px)/1.08 var(--display); letter-spacing: -.015em; max-width: 24ch; }
.rules-else .rules-not { grid-column: 1 / -1; font: 400 clamp(17px, 1.3vw, 20px)/1.45 var(--text); letter-spacing: 0; max-width: 62ch; }
.items-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blk-xl .blk-in { padding-top: clamp(96px, 11vw, 168px); padding-bottom: clamp(64px, 7vw, 112px); }
.blk-xl .blk-pin { width: min(320px, 26vw); }
.blk-xl .items li { font-size: clamp(24px, 2.3vw, 34px); }
.t-board + .end-band { border-top: 0; }

@media (max-width: 959px) {
  .t-open { min-height: 0; }
  .t-open-in { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 20px; }
  .t-open .pg-h1 { width: auto; }
  .t-lead { font-size: 17px; }
  .legend { position: relative; inset: auto; display: flex; flex-wrap: wrap; gap: 10px 8px; padding: 8px var(--gutter) 44px; pointer-events: auto; }
  .lp { position: static; translate: none; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 14px 4px 4px; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); }
  .lp-t { --d: 44px; border-width: 2px; box-shadow: none; }
  .lp-t img { width: 112%; bottom: 4%; }
  .lp-n, .lp:nth-child(even) .lp-n { background: none; color: var(--ink); padding: 0; rotate: none; font-size: 15px; }
  .blk-in, .flip .blk-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pin" "head" "items"; gap: 24px; padding-top: 48px; padding-bottom: 44px; }
  .blk-pin, .blk-xl .blk-pin { width: min(200px, 52vw); justify-self: end; margin-bottom: -8px; }
  .blk-map, .flip .blk-map { -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 55%); mask-image: linear-gradient(to bottom, #000 10%, transparent 55%); }
  .blk-h, .blk-xl .blk-h { font-size: clamp(44px, 13.4vw, 64px); }
  .blk-line { font-size: 18px; }
  .bands a { font-size: 14px; min-height: 48px; }
  .items, .items-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .items li, .blk-xl .items li { font-size: 20px; padding: 12px 0 14px; }
  .items li::before { margin-bottom: 8px; }
  .rules-else { grid-template-columns: 1fr; }
  .rules-else p { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .board-row .board-set { flex-wrap: wrap; row-gap: 8px; }
  .board-row .board-set[aria-hidden] { display: none; }
}
@media (prefers-contrast: more) {
  .items li { border-bottom-color: color-mix(in srgb, currentColor 50%, transparent); }
  .blk-map { display: none; }
}