/* Noktura polish layer. Loaded after every other stylesheet. It changes no layout or visual
   language on desktop; it fixes touch-device behaviour, overflow and performance, and adds
   brand details that were missing. Each block is independent and can be removed on its own. */

/* 0. True SemiBold and Bold cuts of Archivo (same v2.001 family as the bundled Medium). Without them the
      browser fakes bold by smearing the Medium outlines; labels, buttons and titles now render crisply. */
@font-face{font-family:Archivo;src:url('archivo-semibold.woff2') format('woff2');font-display:swap;font-weight:550 650}
@font-face{font-family:Archivo;src:url('archivo-bold.woff2') format('woff2');font-display:swap;font-weight:651 900}

/* 1. iOS Safari zooms the page when a focused field is under 16px. Keep fields at 16px on iOS only. */
@supports (-webkit-touch-callout:none){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{font-size:16px!important}
}

/* 2. Touch screens keep :hover after a tap, which left buttons inverted until the next tap.
      On devices without hover, a tapped control returns to its resting look. */
@media (hover:none){
  :is(.btn:not(.primary),.icon-btn,.header-account,.map-area-btn,.story-tile):hover:not(:focus-visible){background-color:transparent;color:var(--ink)}
  .row-btn:not(.saved):hover{background-color:transparent;color:var(--ink)}
  .btn.primary:hover{opacity:1}
  .event-row:hover,.map-row:hover:not(.selected),.chat-row:hover:not(.active),.feed-post-actions button:hover{background-color:transparent}
  html[data-mode=accent] :is(.btn,.icon-btn):not(.primary):hover:not(:focus-visible){background-color:transparent;color:var(--ink);border-color:var(--line)}
  html[data-mode=accent] :is(.btn,.icon-btn):not(.primary):hover:not(:focus-visible) :is(svg,span){color:inherit}
  /* Pressed state: an immediate, quiet acknowledgement under the finger. */
  :is(.btn,.icon-btn,.row-btn,.header-account,.chip,.text-link,.map-row,.agenda-event,.cal-day,.seq-cell,.detail-tools button,#mobile-nav a,footer .links>*):active{opacity:.55}
}

/* 3. Larger touch targets for small text links, without moving anything: an invisible hit area. */
:is(.text-link,.scope-clear,footer .links>*){position:relative}
:is(.text-link,.scope-clear,footer .links>*)::after{content:"";position:absolute;inset:-10px -6px}
.header-tools .icon-btn{position:relative}
.header-tools .icon-btn::after{content:"";position:absolute;inset:-4px}

/* 4. Map clusters: counts of 1,000 and more used to spill out of the 32 px circle. The badge now
      grows into a pill around its centre, so the anchor point and the look of small counts stay put. */
.leaflet-marker-icon>.pin-cluster{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;min-width:32px;height:32px;padding:0 8px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 5. Next events on Discover scrolls inside its card. A soft fade now says there is more below
      (polish.js toggles the classes; without it nothing changes). */
.cal-agenda.has-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}

/* 6. Long lists: the Events page renders up to two thousand rows. Rows outside the screen skip
      layout and paint until they approach the viewport. Same pixels, far less work on phones. */
.events-list .event-row{content-visibility:auto;contain-intrinsic-size:auto 160px}
@media (max-width:760px){.events-list .event-row{contain-intrinsic-size:auto 230px}}

/* 7. Map page on phones: the four actions sit in a tidy two-by-two grid instead of a ragged wrap. */
@media (max-width:760px){
  .map-heading{flex-wrap:wrap}
  .map-heading .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .map-heading .actions .btn{width:100%;justify-content:flex-start;gap:12px;padding:10px 14px;min-height:44px}
}

/* 8. Brand details. */
::selection{background:var(--accent);color:var(--accent-ink)}
:root{text-size-adjust:100%;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){.loading .logo-mark{animation:none}}