/* Hype: shared presentation for browser and installed web app.
   Local assets and system fonts only; existing routes and actions remain intact. */
:root {
  --tabs: 76px;
  --r: 18px;
  --bg: #faf9f7;
  --bg2: #efeeeb;
  --bg3: #e2e0dc;
  --ink: #242320;
  --ink2: #62605b;
  --line: #dedbd5;
  --shadow: 0 12px 36px rgba(34,30,23,.09);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151513; --bg2: #22221f; --bg3: #343430;
    --ink: #f4f2ed; --ink2: #b8b5ad; --line: #3c3b35;
    --shadow: 0 12px 36px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151513; --bg2: #22221f; --bg3: #343430;
  --ink: #f4f2ed; --ink2: #b8b5ad; --line: #3c3b35;
  --shadow: 0 12px 36px rgba(0,0,0,.25);
  color-scheme: dark;
}
html { scroll-padding-top: 92px }
body { line-height: 1.55 }
button, a, input, select, textarea { touch-action: manipulation }
button, input, select, textarea { max-width: 100% }
a, p, h1, h2, h3, td { overflow-wrap: anywhere }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px }
.btn, .btn.sm, .chip, .chip.sm, .mini, .seg a,
.nav-i, .foot-links a { min-height: 44px }
.btn, .mini { white-space: normal; text-align: center }
.btn { padding: 10px 18px; line-height: 1.35 }
.btn.sm { padding: 9px 14px }
.btn.big { min-height: 52px }
.btn.ghost { box-shadow: inset 0 0 0 1px var(--line) }
.btn:disabled { opacity: 1; background: var(--bg3); color: var(--ink2) }
.icw { width: 24px; height: 24px; align-items: center; justify-content: center }
.icw > .ic { position: absolute; inset: 0; width: 24px; height: 24px }
.icw .ic-fill { display: none }
.nav-i.on .icw .ic-line, .tab.on .icw .ic-line { display: none }
.nav-i.on .icw .ic-fill, .tab.on .icw .ic-fill { display: block }
.skip { opacity: 0; pointer-events: none }
.skip:focus { opacity: 1; pointer-events: auto; box-shadow: var(--shadow) }

/* A quiet, stable frame lets the covers supply the colour. */
.top { gap: 12px; border-bottom: 1px solid var(--line); height: calc(72px + env(safe-area-inset-top, 0px)); --top: 72px }
:root { --top: 72px; --rail: 224px }
/* 11-02 · the owner took the pink chevron mark out of the top bar: the word alone is the home link, never narrower than a 44 px tap */
.logo { letter-spacing: -.035em; font-size: 20px; min-width: 44px }
.top-search { max-width: 560px }
#top .top-search input { width: auto; height: 44px; background: var(--bg2); border-color: transparent; font-size: 14px }
.top-search .icon-btn { height: 44px; width: 52px; background: var(--bg2); border-color: transparent }
.top-r { gap: 6px }
.rail { padding-top: 18px; border-right: 1px solid var(--line) }
.rail-sec { padding: 10px 0; border-bottom: 0 }
.nav-i { gap: 14px; margin-bottom: 4px; padding: 10px 12px; font-weight: 500 }
.nav-i.on { background: var(--bg2); box-shadow: inset 3px 0 var(--ink) }
.rail-h { font-size: 13px; color: var(--ink2); padding-top: 18px }
main { padding: 12px 32px 48px; width: 100%; max-width: 1560px; margin-inline: auto }
.chips { margin: -12px -32px 24px; padding: 16px 32px; gap: 8px; border-bottom: 1px solid var(--line) }
.chip { border-radius: 999px; padding: 10px 16px; line-height: 1.35; white-space: nowrap; background: transparent; box-shadow: inset 0 0 0 1px var(--line) }
.chip.on { box-shadow: none }
.seg { padding: 4px; border: 1px solid var(--line); background: transparent }
.seg a { padding: 8px 16px; line-height: 1.35 }
.seg a.on { background: var(--bg2); box-shadow: none }
.page-h { padding: 24px 0 }
.page-h h1, .comm-t h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: -.04em }
.page-h p { margin-top: 10px; line-height: 1.6 }

/* Posting stays compact until the visitor enters the form. */
.composer { padding: 16px; gap: 12px; border: 1px solid var(--line); background: var(--bg); border-radius: 18px; margin-bottom: 30px }
.composer input[name=title] { border: 0; background: var(--bg2); border-radius: 12px; padding: 12px 16px }
.composer .q-more { padding-top: 12px; border-top: 1px solid var(--line) }
.composer:not(:focus-within) .q-more { display: none }
.q-kinds .chip-r span { min-height: 44px; border: 1px solid var(--line) }
.q-when { flex-wrap: wrap; min-width: 0; max-width: 100% }
.q-when input { min-width: 0; max-width: 100%; min-height: 44px !important }
.yours { margin: 0 0 20px; gap: 10px }
.yours a { min-height: 44px }

/* Time groups and event cards: visible dates, readable names, restrained chrome. */
.band { margin-top: 28px }
.band-h { font-size: 23px; line-height: 1.4; letter-spacing: -.025em; margin: 0 0 20px; flex-wrap: wrap }
.band-h > span:last-child { min-width: 30px; text-align: center; padding: 3px 10px }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); gap: 30px 24px; margin-bottom: 36px }
.card { gap: 14px; min-width: 0 }
.thumb { aspect-ratio: auto; min-height: 210px; border: 1px solid var(--line); border-radius: 18px; isolation: isolate }
.thumb > .art { position: relative; inset: auto; width: 100%; height: auto; min-height: 210px; padding: 62px 22px 54px; align-content: center; overflow: visible }
.thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.thumb .art-t { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: clamp(20px, 7cqi, 30px); line-height: 1.2; letter-spacing: -.035em; padding-bottom: .12em; text-wrap: pretty }
.thumb .art.look-poster .art-t { font-size: clamp(20px, 7cqi, 30px); letter-spacing: -.015em }
.thumb .art:not(.look-poster):not(.look-minimal):not(.look-neon) .art-t { background: #171714; color: #fff; padding: 8px 10px; border-radius: 8px; text-shadow: none }
.thumb .art-c { display: none }
.kind, .sample, .tb { font-size: 13px; line-height: 1.45; padding: 5px 9px; border-radius: 7px }
.kind { top: 12px; left: 12px; max-width: calc(100% - 110px); white-space: normal; overflow: visible }
.sample { top: 12px; right: 12px }
.tb { bottom: 12px; right: 12px }
.meta { gap: 12px; align-items: flex-start }
.dt { width: 48px; min-height: 58px; padding: 8px 4px; border: 1px solid var(--line); background: var(--bg2); border-radius: 12px }
.dt.live { border-color: var(--live); background: var(--live) }
.dt b { font-size: 23px }
.txt h3 { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: 17px; line-height: 1.4; margin: 0 0 2px; letter-spacing: -.015em }
.txt h3 a { display: flex; align-items: center; min-height: 44px; padding: 0 }
.sub { gap: 0 6px; line-height: 1.5 }
.sub a, .c-meta a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 6px 2px }
.sub a:hover, .sub a:focus-visible { color: var(--link); text-decoration: underline }
.c-acts { margin-top: 0; gap: 2px }
.hy { border: 1px solid var(--line); border-radius: 12px }
.c-acts .icon-btn { border-radius: 12px }
.shelf { margin-top: 32px; margin-bottom: 32px }
.shelf h2 { letter-spacing: -.025em }
.row-scroll { grid-auto-columns: minmax(260px, 320px); gap: 20px }
.comm-chip { border: 1px solid var(--line); background: transparent; padding: 8px 14px 8px 10px; gap: 10px; height: auto; flex-wrap: wrap }
.comm-chips { gap: 10px }
.comm-card { background: var(--bg); border: 1px solid var(--line); padding: 18px; border-radius: 16px; flex-wrap: wrap }
.comm-card .comm-t { flex-basis: 140px }
.comm-card .comm-t > a, .leaders a, .ranked a, .dir a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px }

/* Event detail: the registration card remains the clearest action. */
.watch { gap: 32px; grid-template-columns: minmax(0, 1fr) 340px; padding-top: 20px }
.hero { border-radius: 22px; border: 1px solid var(--line) }
.hero > .art { padding-top: 64px }
.hero .art-t { line-height: 1.2 }
.w-title { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -.04em; margin: 24px 0 18px }
.w-host { gap: 16px; margin-bottom: 20px }
.acts { gap: 8px; margin-bottom: 24px }
.box { border: 1px solid var(--line); border-radius: 18px; background: var(--bg); padding: 22px; margin-bottom: 20px }
.box h2 { font-size: 18px; letter-spacing: -.02em }
.going-card { gap: 18px; background: var(--bg2); padding: 24px }
.going-card .btn.big { width: 100%; min-height: 52px }
.going-card .gc-left, .going-card p { margin: 0 }
.gc-hosts { padding-top: 18px }
.gc-hosts .who { min-height: 44px }
.gc-faces { flex-wrap: wrap; row-gap: 10px }
.facts .fact { min-height: 44px; gap: 12px; align-items: center }
.facts .body { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; line-height: 1.75 }
.facts .body p { margin: 10px 0 }
.tags { margin-top: 20px }
.nx-list { gap: 18px }
.nx { grid-template-columns: 120px minmax(0, 1fr); gap: 12px }
.nx-t { min-height: 100px; aspect-ratio: auto; border-radius: 12px }
.nx-t > .art { min-height: 100px; padding: 10px 10px 38px }
.nx-t .art-t { font-size: 14px; line-height: 1.3 }
.nx-x b, .nx-t .art-t { display: block; overflow: visible; -webkit-line-clamp: unset }
.nx-x span { line-height: 1.6 }
.faces a { width: 44px; height: 44px; display: inline-grid; place-items: center }
.comments { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 24px }
.panel, .sign { padding: 20px; border-radius: 16px }
.check { min-height: 44px; align-items: center }
.check input { width: 22px; height: 22px }
.sign-row .fine a, .foot .fine a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; line-height: 1.5 }
.foot { margin-top: 40px; padding-top: 24px }
.create-wrap { gap: 32px }
.create { gap: 20px }
.create details { border: 1px solid var(--line); background: transparent }
.create input, .create select, .create textarea { border-radius: 12px }
.preview { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg2) }
.tile, .statrow div { border: 1px solid var(--line); background: var(--bg); padding: 18px; border-radius: 16px }
.tbl td, .tbl th { padding: 14px 12px }
.tbl td.row { display: table-cell }
.tbl td.row .btn { margin: 3px }

@media (max-width: 1199px) and (min-width: 760px) {
  .rail .nav-i { padding: 12px 4px; gap: 8px; min-height: 80px }
  main { padding-inline: 24px }
  .chips { margin-inline: -24px; padding-inline: 24px }
}
@media (max-width: 1099px) {
  .watch { grid-template-columns: minmax(0, 1fr) }
  .create-wrap { grid-template-columns: minmax(0, 1fr) }
  .preview { position: static }
}
@media (min-width: 1200px) {
  .going-card.only-wide { position: sticky; top: 96px }
  body.rail-mini .rail .nav-i { gap: 8px; min-height: 80px }
}
@media (max-width: 759px) {
  :root { --top: 64px }
  html { scroll-padding-top: 80px }
  .top { height: calc(64px + env(safe-area-inset-top, 0px)); gap: 4px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)) }
  .top-r { gap: 0 }
  .top .logo { padding-right: 0 }
  .top .logo span { font-size: 17px }
  .top .streak, .top #install { display: none }
  .top-search, #top .create-btn { display: none }
  .rail { display: none }
  .shell { grid-template-columns: minmax(0, 1fr) }
  main { padding: 12px 18px calc(var(--tabs) + env(safe-area-inset-bottom, 0px) + 28px) }
  .chips { margin: -12px -18px 20px; padding: 12px 18px }
  .chip { padding-inline: 15px }
  .tabs { display: flex; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.06) }
  .tab { min-height: 72px; gap: 6px; font-size: 13px; line-height: 1.2; padding: 8px 2px }
  .tab-create .icw { width: 44px; height: 32px }
  .tab-create .icw > .ic { width: 44px; height: 32px; padding: 5px 12px }
  .composer { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; margin-bottom: 26px }
  .composer > .av { display: none }
  .composer input[name=title] { padding-inline: 12px; font-size: 16px }
  .composer > .btn { padding-inline: 14px }
  .band { margin-top: 24px }
  .band-h { font-size: 22px; margin-bottom: 16px }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 28px }
  .thumb, .thumb > .art { min-height: 220px }
  .thumb > .art { padding-inline: 24px }
  .thumb .art-t, .thumb .art.look-poster .art-t { font-size: clamp(23px, 7cqi, 30px) }
  .txt h3 { font-size: 17px }
  .meta { gap: 10px }
  .page-h { padding-top: 18px }
  .box { padding: 18px }
  .watch { padding-top: 6px; gap: 24px }
  .hero { aspect-ratio: auto; min-height: 300px }
  .hero > .art { position: relative; min-height: 300px; height: auto; padding: 64px 22px 110px }
  .hero > .art .art-t { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: 30px }
  .hero-over { padding: 30px 18px 18px }
  .w-title { margin-top: 20px; font-size: 30px }
  .acts { display: flex; flex-wrap: wrap; gap: 8px }
  .acts .btn { min-width: 44px; padding: 10px 14px }
  .acts .btn span { overflow: visible; text-overflow: clip }
  .going-card { padding: 20px }
  .preview { padding: 16px }
  .sync { position: fixed; top: calc(var(--top) + env(safe-area-inset-top, 0px)); right: 8px; max-width: calc(100vw - 16px); white-space: normal; box-shadow: var(--shadow) }
}
@media (max-width: 380px) {
  main { padding-inline: 14px }
  .chips { margin-inline: -14px; padding-inline: 14px }
  .acts .hype-btn span, .acts .btn[data-act="share"] span { display: inline }
  .meta { gap: 8px }
  .dt { width: 44px }
  .nx { grid-template-columns: 108px minmax(0, 1fr) }
  .comm-t, .prof-t { min-width: 0; flex-basis: 100% }
}
@media (prefers-contrast: more) {
  :root { --ink2: #45433e; --line: #817e76 }
  :root[data-theme="dark"] { --ink2: #dedbd3; --line: #858278 }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink2: #dedbd3; --line: #858278 }
}
@media (forced-colors: active) {
  .thumb, .hy, .btn, .chip, .box, .dt { border: 1px solid ButtonText }
}
@media print {
  main { max-width: none; padding: 0 }
  .poster { border: 0 }
}
/* 10-30 · Build's eye read every route (402x874 and 1440x900); the last faults, each fixed where it starts */
/* Directory: the date line goes under its title; beside a 44 px link it flowed underneath it and the two boxes overlapped */
.dir li > .fine { display: block }
/* Create and Import: the picture picker is a 44 px control, its button in Hype's own shape */
input[type=file] { min-height: 44px }
input[type=file]::file-selector-button { min-height: 44px; margin-right: 12px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--bg2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer }
input[type=file]::file-selector-button:hover { background: var(--bg3) }
/* the event page: the Map link fills its 44 px fact row */
.facts .fact .link { display: inline-flex; align-items: center; min-height: 44px }
/* Data: a link alone in a table cell gets a 25 px tap box; the padding does not move the row */
.tbl td a:not(.btn) { padding-block: 3px }
/* the Create tab keeps its "+" when it is the open tab: app.css's own Create rule (3 classes) always lost to the active-tab swap (4 classes),
   which showed the filled icon, whose plus is drawn in the circle's own colour: a blank dot on the Create page */
.tab.tab-create .icw .ic-line, .nav-i.tab-create .icw .ic-line { display: block }
.tab.tab-create .icw .ic-fill, .nav-i.tab-create .icw .ic-fill { display: none }
/* 10-31 · the census's 44 px count (Apple's 44 pt, kept outside its fault total) read 2 on phones and 1 on desktop: short labels narrower than their tap box */
/* "AI" among the category chips: 43 px wide at the phone's 15 px padding; "Data" in the footer: 27 px */
.chip, .foot-links a { min-width: 44px; justify-content: center }
/* a card without a date leads with its host's face: the link was the 36 px avatar, now a 48 px box in the date tile's column */
.meta > .av-l { display: grid; place-items: center; min-width: 48px; min-height: 48px }
/* My lines and the people lists: a name over one fine line came to about 40 px */
.lines a, .people a { min-height: 44px; align-content: center }
@media (max-width: 380px) { .meta > .av-l { min-width: 44px } }