/* Radar de Rolês. Tokens and rules from docs/identity.md: colour exists only as
   paper; everything around the posters is black on white; square corners;
   rules are 3px (section) and 2px (list items). */

@font-face {
  font-family: "League Gothic";
  src: url("/static/fonts/LeagueGothic.ttf") format("truetype");
  font-display: block;   /* the posters' line sizes come from this font's metrics */
}

:root {
  --page: #FFFFFF;
  --ink: #141414;
  --muted: #4A4A46;
  --concrete: #9A9A94;
  --rule-light: #D9D9D4;
  --hover: #F2F2EF;
  --pink: #FF5FA2;
  --yellow: #FFE14D;
  --orange: #FF8A2B;
  --green: #5BE38F;
  --offwhite: #F4F4F2;
  --gutter: 16px;
  --col: 560px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 16px/1.45 Archivo, system-ui, sans-serif;
}
a { color: var(--ink); text-underline-offset: 4px; }
a:hover { color: #000; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gothic { font-family: "League Gothic", Impact, sans-serif; font-weight: 400; line-height: .92; }

/* header and frame */
.top { height: 56px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top .mark { font-family: "League Gothic", Impact, sans-serif; font-size: 26px; line-height: 1; text-decoration: none; }
.top .aside { font-size: 14px; font-weight: 600; color: var(--muted); }
.top a.aside { color: var(--ink); font-size: 15px; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.top .nav { display: flex; gap: 18px; }
.top .nav a, .top .nav span { font-size: 15px; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.top .nav span { color: var(--muted); }   /* the page you're on */
.steps { margin: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.steps i { height: 4px; background: var(--rule-light); }
.steps i.on { background: var(--ink); }
.col { width: 100%; max-width: var(--col); margin: 0 auto; }
main.flow { padding: 24px var(--gutter) 32px; }
.title { margin: 0; font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -0.02em; }
.lede { margin: 8px 0 0; color: var(--muted); }
.note { font-size: 14px; color: var(--muted); }
footer.foot { margin: 48px var(--gutter) 0; border-top: 3px solid var(--ink); padding: 24px 0 32px; display: flex; flex-direction: column; gap: 8px; }
footer.foot .mark { font-family: "League Gothic", Impact, sans-serif; font-size: 30px; line-height: 1; }
footer.foot span, footer.foot a { font-size: 15px; color: var(--muted); }
footer.foot .who button { font: inherit; font-size: 15px; color: var(--muted); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* the one kind of button: ink */
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 24px;
  border: 0; background: var(--ink); color: #FFFFFF; font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer;
}
.btn:hover { color: #FFFFFF; background: #000; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.line { background: var(--page); color: var(--ink); border: 2px solid var(--ink); }
.btn.line:hover { background: var(--hover); color: var(--ink); }
.btn.google { gap: 12px; }   /* Google's "G" keeps its own colours: their branding rules, the one exception to colour as paper */
.dock { position: sticky; bottom: 0; padding: 16px var(--gutter); background: var(--page); }
.error { margin: 12px 0 0; font-weight: 700; }

/* fields */
label.field { display: block; margin-top: 20px; font-size: 14px; font-weight: 700; }
label.field .opt { font-weight: 400; color: var(--muted); }
.input, textarea.input {
  display: block; width: 100%; margin-top: 6px; min-height: 52px; padding: 0 14px;
  border: 2px solid var(--ink); border-radius: 0; background: var(--page); font-size: 17px; font-weight: 500;
}
textarea.input { padding: 10px 14px; min-height: 76px; resize: vertical; font-size: 16px; font-weight: 400; line-height: 1.4; }
.input:focus { outline: 3px solid var(--pink); outline-offset: 0; }

/* posters: container units, so the sizes the server computed (cqw) scale with the poster */
.poster { container-type: inline-size; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; }
.poster .in { height: 100%; padding: 5cqw; display: flex; flex-direction: column; justify-content: space-between; }
.poster .grp { display: flex; flex-direction: column; align-items: center; }
.poster span { display: block; font-family: "League Gothic", Impact, sans-serif; line-height: .92; }
.poster.center .in { justify-content: center; }
.paper-pink { background: var(--pink); }
.paper-yellow { background: var(--yellow); }
.paper-orange { background: var(--orange); }
.paper-green { background: var(--green); }
.paper-offwhite { background: var(--offwhite); }
.tarja {
  position: absolute; z-index: 2; background: #FFFFFF; padding: .28em .4em .18em; white-space: nowrap;
  font-family: "League Gothic", Impact, sans-serif; line-height: .92; color: var(--ink);
}

/* the wall: posters glued side by side on concrete, no two alike */
.wall { background: var(--concrete); overflow: hidden; padding: 14px 0; }
.wall .row { --base: 128px; display: flex; align-items: center; width: max-content; margin-left: 50%; transform: translateX(-50%); }
/* sizes, turns and overlaps vary slot by slot (radar.web.pages.WALL_LOOK), as on a street wall */
.wall .slot { position: relative; flex: none; container-type: inline-size; width: calc(var(--base) * var(--w, 1)); margin-left: calc(-1 * var(--under, 0px) / 2); }
.wall .slot:nth-child(even) { z-index: 1; }
.wall .slot .poster { aspect-ratio: var(--a, 186 / 480); transform: rotate(var(--turn, 0deg)); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
/* the tarja sits in the band the server kept free above the date (radar.web.pages.wall_tarja), flush with
   one edge of its poster, running a little past it and turned, differently each time (TARJA_SPILL) */
.wall .slot.tarjado { z-index: 2; }
.wall .tarja { left: var(--tarja-left, auto); right: var(--tarja-right, auto); padding: 2.2cqw 3cqw 1.8cqw;
  text-align: center; transform: translateY(50%) rotate(var(--tarja-turn, -3deg)); }
.wall .tarja span { display: block; }
@media (min-width: 700px) {
  /* short enough that the pitch under the wall is on the first screen: the tallest poster is 2.84 times a
     plain one's width, the header and the pitch take ~290px */
  .wall .row { --base: clamp(140px, min((100vw - 40px) / 6.6, (100vh - 290px) * .35), 260px); }
  .wall .slot { margin-left: calc(-1 * var(--under, 0px)); }
}

/* landing */
.pitch { padding: 28px var(--gutter) 32px; display: flex; flex-direction: column; gap: 20px; }
.pitch h1 { margin: 0; font-weight: 400; font-size: 20px; line-height: 1.4; }
.sect { margin: 0 var(--gutter); border-top: 3px solid var(--ink); padding: 32px 0 40px; display: grid; gap: 14px; }
.sect h2 { margin: 0; font-weight: 800; font-size: 32px; line-height: 1.06; letter-spacing: -0.02em; }
.sect p { margin: 0; color: var(--muted); }
.sect .copy { display: flex; flex-direction: column; gap: 14px; }
.stage { background: var(--concrete); padding: 20px 0; display: flex; align-items: center; justify-content: center; }
.phone { width: 330px; max-width: calc(100% - 24px); border: 3px solid var(--ink); border-radius: 28px; overflow: hidden; background: var(--page); padding: 0 12px 12px; }
.phone .mark { height: 44px; display: flex; align-items: center; font-family: "League Gothic", Impact, sans-serif; font-size: 20px; }
.phone h3 { margin: 14px 0 8px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.phone .show { grid-template-columns: 44px 1fr; gap: 10px; padding: 12px 0; }
.phone .show h2 { font-size: 15px; }
.phone .show .when { font-size: 12px; }
.phone .show p { font-size: 13px; }
.alertwall { position: relative; background: var(--concrete); padding: 46px 10px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.alertwall .slot { position: relative; }
.sect.small h2 { font-size: 26px; }
.sect.small .alertwall { max-width: 440px; }
.alertwall .poster { aspect-ratio: 165 / 320; }
.alertwall .slot:nth-child(odd) .poster { transform: rotate(-.5deg); }
.alertwall .slot:nth-child(even) .poster { transform: rotate(.4deg); }
.alertwall .tarja { top: -40px; left: -4px; font-size: 27px; transform: rotate(-4deg); }
.alertwall .slot:nth-child(even) .tarja { left: auto; right: -4px; transform: rotate(3deg); }
.how { margin: 6px 0 0; padding: 0; list-style: none; }
.how li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 0 20px; border-top: 2px solid var(--ink); }
.how .n { font-family: "League Gothic", Impact, sans-serif; font-size: 72px; line-height: .8; }
.how b { display: block; font-size: 19px; }
.how span { display: block; margin-top: 4px; color: var(--muted); }
@media (min-width: 900px) {
  .top { height: 72px; padding: 0 64px; }
  .top .mark { font-size: 36px; }
  .pitch { padding: 48px 64px; flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .pitch h1 { font-size: 26px; max-width: 660px; }
  .pitch .btn { width: auto; flex: none; min-height: 64px; padding: 0 36px; font-size: 20px; }
  .sect { margin: 0 64px; padding: 56px 0 64px; grid-template-columns: 400px 1fr; gap: 80px; align-items: start; }
  .sect h2 { font-size: 46px; line-height: 1.04; letter-spacing: -0.025em; }
  .sect p { font-size: 18px; }
  .sect .copy .btn { width: auto; align-self: flex-start; margin-top: 12px; }
  .sect.small { padding: 40px 0 48px; align-items: center; }
  .sect.small h2 { font-size: 32px; }
  .how li { grid-template-columns: 90px 1fr; gap: 24px; }
  .how .n { font-size: 110px; }
  .how b { font-size: 24px; }
  .how span { font-size: 18px; }
  footer.foot { margin: 48px 64px 0; flex-direction: row; justify-content: space-between; align-items: center; }
  footer.foot .mark { font-size: 36px; }
}
@media (max-width: 899px) { .sect .copy .btn.desk { display: none; } }
@media (min-width: 900px) { .sect .btn.phone-only { display: none; } }

/* artists */
.suggest { margin: 0; padding: 0; list-style: none; border: 2px solid var(--ink); border-top: 0; }
.suggest li { min-height: 48px; padding: 6px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; border-top: 1px solid var(--rule-light); }
.suggest li:first-child { border-top: 0; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--hover); }
.suggest b { font-weight: 700; }
.suggest span { font-size: 13px; color: var(--muted); text-align: right; }
fieldset.city { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.city legend { padding: 0; }
.cities { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }   /* the agenda's .opt, at the game's size */
.cities .opt span { width: 100%; min-height: 56px; justify-content: center; padding: 0 8px; text-align: center; font-size: 17px; }
.chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; border: 2px solid var(--ink); display: inline-flex; align-items: center; padding-left: 12px; font-weight: 700; font-size: 15px; }
.chip button { width: 36px; height: 40px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }

/* game */
.round-n { font-size: 14px; font-weight: 700; }
.cards { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { display: flex; flex-direction: column; gap: 8px; }
.card .poster { position: relative; aspect-ratio: 1; }
.card .poster .in { justify-content: center; }
.card.playing .poster { outline: 3px solid var(--ink); outline-offset: 3px; }
.card .play { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.card .bar { position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: var(--ink); }
.card b { font-size: 15px; }
.card small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.answers { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.answers button { min-height: 56px; border: 2px solid var(--ink); background: var(--page); font-weight: 700; font-size: 17px; cursor: pointer; }
.answers button:hover { background: var(--hover); }
.answers button.a, .answers button.b { border: 0; }
.answers button.a { background: var(--pink); }
.answers button.b { background: var(--yellow); }
.answers button.a:hover, .answers button.b:hover { filter: brightness(.95); }
.skip { display: flex; justify-content: center; padding: 16px; }
.skip button { min-height: 44px; border: 0; background: none; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* waiting */
.wait-poster { padding: 5cqw; }
.stages { margin: 26px 0 0; padding: 0; list-style: none; }
.stages li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 2px solid var(--ink); }
.stages li:last-child { border-bottom: 2px solid var(--ink); }
.stages .box { width: 14px; height: 14px; margin-top: 4px; border: 2px solid var(--ink); }
.stages .done .box { background: var(--ink); }
.stages .running .box { animation: blink 1.2s steps(2, jump-none) infinite; }
.stages .todo b { color: var(--muted); }
.stages b { display: block; font-size: 16px; }
.stages span { display: block; font-size: 14px; color: var(--muted); }
@keyframes blink { from { background: var(--page); } to { background: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .stages .running .box { animation: none; background: linear-gradient(90deg, var(--ink) 50%, var(--page) 50%); } }

/* result */
.portrait { margin-top: 8px; padding: 16px 20px 18px; }
.portrait .who { font-weight: 700; font-size: 13px; text-align: left; margin-bottom: 10px; white-space: normal; }
.portrait .grp { gap: 0; }
.taste { margin-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.taste span { color: var(--muted); font-size: 15px; }
.taste a { flex: none; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
h2.shows { margin: 26px 0 0; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.shows-sub { margin-top: 4px; color: var(--muted); font-size: 15px; }
.list { margin-top: 12px; }
.show { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 0; border-top: 2px solid var(--ink); }
.show:last-child { border-bottom: 2px solid var(--ink); }
.date { height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "League Gothic", Impact, sans-serif; line-height: .9; }
.date .d { font-size: 30px; }
.date .m { font-size: 16px; }
.show .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { align-self: flex-start; background: var(--ink); color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 2px 7px; }
.show h2 { margin: 0; font-weight: 800; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.show .when { font-size: 14px; color: var(--muted); }
.show p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }
.show .acts { margin-top: 8px; display: flex; gap: 8px; }
.show .acts a, .show .acts button {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--ink); background: var(--page); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
}
.show .acts a.ticket { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.legend { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#more { margin-top: 20px; }
#more-list { margin-top: 0; }
.later { margin-top: 32px; }
.later h3 { margin: 0 0 4px; font-weight: 800; font-size: 18px; }
.later .dates b { color: var(--ink); font-weight: 700; margin-right: 4px; }
/* an artist with several dates: one line per date, each with its own ticket */
.dates { margin: 6px 0 0; padding: 0; list-style: none; }
.dates li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 2px solid var(--rule-light); font-size: 14px; color: var(--muted); }
.dates li:last-child { border-bottom: 2px solid var(--rule-light); }
.dates a.ticket { flex: none; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; background: var(--ink); color: #FFFFFF; font-weight: 700; font-size: 14px; text-decoration: none; }
.signup { margin-top: 36px; border-top: 3px solid var(--ink); padding-top: 28px; }
.signup h2 { margin: 0; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.signup p { margin: 8px 0 0; color: var(--muted); }
.signup .btn { margin-top: 12px; }
.signup p.how-to { color: var(--ink); font-weight: 600; }
.floating { position: sticky; bottom: 0; padding: 12px 0; background: var(--page); }

/* adjust */
.lines { margin: 8px 0 0; padding: 0; list-style: none; }
.lines li { display: grid; grid-template-columns: 1fr 44px 44px; align-items: center; gap: 4px; padding: 8px 0; border-bottom: 2px solid var(--ink); }
.lines li.off b, .lines li.off .w { text-decoration: line-through; color: var(--muted); }
.lines b { display: block; font-size: 16px; }
.lines small { display: block; font-size: 13px; color: var(--muted); }
.lines .w { font-family: "League Gothic", Impact, sans-serif; font-size: 30px; text-align: right; }
.lines button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
input[type=range] { width: 100%; height: 28px; margin-top: 10px; accent-color: var(--ink); }
.range-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* shared show */
.shared .poster { aspect-ratio: 358 / 460; }
.shared h1 { margin: 26px 0 0; font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.shared p.why { margin: 8px 0 0; font-size: 17px; }
.shared .btn { margin-top: 18px; }
.yours { margin-top: 36px; border-top: 3px solid var(--ink); padding-top: 28px; }
.yours h2 { margin: 0; font-weight: 800; font-size: 26px; }
.yours p { margin: 8px 0 16px; color: var(--muted); }

.prose { max-width: 640px; }
.prose h2 { margin: 28px 0 0; font-size: 20px; font-weight: 800; }
.prose p, .prose li { color: var(--ink); }

.check { margin-top: 10px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.check b { display: block; font-size: 16px; }
.check small { display: block; font-size: 14px; color: var(--muted); }

/* agenda: every show, day by day. Each day opens with a paper strip, the date fitted to its width;
   the paper says the day (Friday orange, Saturday pink, Sunday yellow, weekdays off-white). */
.filters { margin-top: 20px; display: grid; gap: 10px; }
.filters .input { margin-top: 0; }
.filters fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.more-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt span { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; border: 2px solid var(--ink); background: var(--page); font-weight: 700; font-size: 15px; }
.opt input:hover + span { background: var(--hover); }
.opt input:checked + span { background: var(--ink); color: #FFFFFF; }
.opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.sel { flex: 1 1 220px; display: flex; }
.sel select {
  width: 100%; min-height: 44px; padding: 0 38px 0 12px; border: 2px solid var(--ink); border-radius: 0; font-weight: 700; font-size: 15px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23141414' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.count { margin: 24px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--muted); }
.count span { font-weight: 700; color: var(--ink); }
.count a { flex: none; font-weight: 700; }
.empty { margin: 12px 0 0; }
.day { margin-top: 18px; }
.strip-wrap { position: relative; }
h2.strip { margin: 0; font-weight: 400; }
.strip .in { padding: 2.6cqw 5cqw 2cqw; }
.day.tarjado { margin-top: 30px; }
/* pasted across the strip's top edge, clear of the date it would otherwise hide */
.strip-wrap .tarja { top: 0; right: 10px; font-size: 22px; transform: translateY(-72%) rotate(-3deg); }
.gigs { margin: 0; padding: 0; list-style: none; }
.gig { position: relative; display: grid; grid-template-columns: 50px 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 2px solid var(--ink); }
.gig:first-child { border-top: 0; }
.gig:hover { background: var(--hover); }
.gig:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.gig .hr { font-family: "League Gothic", Impact, sans-serif; font-size: 26px; line-height: 1; padding-top: 1px; }
.gig .what { min-width: 0; }
.gig a { font-weight: 800; font-size: 17px; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.gig a::after { content: ""; position: absolute; inset: 0; }
.gig a:focus-visible { outline: none; }
.gig .sub { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.gig .where { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.gig .styles { display: block; font-size: 13px; color: var(--muted); }
.gig .price { font-size: 14px; font-weight: 700; white-space: nowrap; text-align: right; padding-top: 2px; }
.gig.out a, .gig.out .sub { color: var(--muted); }
#next { margin-top: 20px; }
.agenda .yours .btn { width: 100%; }
@media (min-width: 700px) {
  .strip-wrap .tarja { font-size: 28px; right: 16px; }
  .gig { grid-template-columns: 60px 1fr auto; }
  .gig .hr { font-size: 30px; }
}