/* dailyalpha v0: single style sheet, with no external fonts or resources.
   Visual idea: each opportunity is a ticket. The stub shows the type and the date;
   a perforated line separates it from the summary. Color always has a meaning:
   blue = waitlist, ochre = farming, red = security alert,
   dashed violet = paid content (referral and sponsorship). */

:root {
  --ground: #E6EBF1;
  --paper: #FFFFFF;
  --ink: #17202B;
  --ink-2: #4E5B6B;
  --rule: #C3CCD8;
  --queue: #2448B8;
  --queue-tint: #EAF0FF;
  --harvest: #8F5D00;
  --harvest-tint: #FFF3D6;
  --signal: #B42318;
  --signal-ink: #B42318;
  --paid: #5B3CC4;
  --paid-tint: #F1EDFF;
  --radius: 10px;
  --font-display: "DIN Condensed", Bahnschrift, "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "DejaVu Sans Condensed", "Liberation Sans Narrow", sans-serif;
  --font-ui: "DIN Alternate", Bahnschrift, Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-text: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, "Noto Serif", "DejaVu Serif", serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F151D;
    --paper: #18212C;
    --ink: #E7ECF2;
    --ink-2: #A5B1C0;
    --rule: #303C4B;
    --queue: #9DB2FF;
    --queue-tint: #1D2747;
    --harvest: #E8B54F;
    --harvest-tint: #33280F;
    --signal-ink: #FF9B8F;
    --paid: #B7A4FF;
    --paid-tint: #251E42;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-text);
}

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--queue); }
:focus-visible { outline: 3px solid var(--queue); outline-offset: 2px; }

.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.muted { color: var(--ink-2); }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .5rem 1rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font: 700 1rem/1.2 var(--font-ui);
}
.skip:focus { top: 1rem; }

/* Header */

.masthead { border-bottom: 3px solid var(--ink); }
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.1rem .8rem;
}
.wordmark {
  font: 700 2.125rem/1 var(--font-display);
  font-stretch: 75%;
  text-decoration: none;
}
.wordmark span { color: var(--ink-2); font-size: .6em; }
.wordmark:hover { color: inherit; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font: 700 1rem/1.2 var(--font-ui); }
.nav a { padding-block: .25rem; text-decoration: none; }
.nav a:hover { text-decoration: underline; }

/* Opening: title and security alerts */

.hero { display: grid; gap: 2rem; padding-block: 2.5rem 2rem; }
@media (min-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
}
.edition { margin-bottom: .75rem; font: 700 1.125rem/1.2 var(--font-ui); color: var(--ink-2); }
.hero h1 {
  font: 700 clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem)/.98 var(--font-display);
  font-stretch: 75%;
  text-wrap: balance;
}
.lede { max-width: 34rem; margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.5; }
.tally { margin-top: 1rem; font: 600 1rem/1.4 var(--font-ui); color: var(--ink-2); }

.alerts { overflow: hidden; border: 2px solid var(--signal); border-radius: var(--radius); background: var(--paper); }
.alerts__title {
  padding: .7rem 1.25rem .55rem;
  background: var(--signal);
  color: #FFFFFF;
  font: 700 1.5rem/1.1 var(--font-display);
  font-stretch: 75%;
}
.alerts__meta { margin: .9rem 1.25rem 0; font: 600 .875rem/1.3 var(--font-ui); color: var(--ink-2); }
.alerts__list { margin: 0; padding: .25rem 1.25rem 1rem; list-style: none; }
.alerts__list li { padding-block: .8rem; border-top: 1px solid var(--rule); font-size: 1rem; line-height: 1.5; }
.alerts__list li:first-child { border-top: 0; }
.alerts__empty { padding: .75rem 1.25rem 1.25rem; }
.alerts strong, .digest__col strong { font-family: var(--font-ui); }

/* Paid content: dashed violet band on the left */

.sponsor__box::before, .ref::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: repeating-linear-gradient(135deg, var(--paid) 0 3px, transparent 3px 7px);
}
.sponsor { padding-block: .5rem 1rem; }
.sponsor__box {
  position: relative;
  padding: 1.25rem 1.5rem 1.4rem 2.25rem;
  border-radius: var(--radius);
  background: var(--paid-tint);
}
.sponsor__label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.sponsor__sample { font: 600 .875rem/1.3 var(--font-ui); color: var(--ink-2); }
.sponsor__title { margin: .6rem 0 .35rem; font: 700 1.625rem/1.1 var(--font-display); font-stretch: 75%; }
.sponsor__box p + p { margin-top: .9rem; }
.sponsor__box p { max-width: 46rem; }

.tag {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font: 700 .8125rem/1.3 var(--font-ui);
  vertical-align: .05em;
}
.tag--paid { background: var(--paid); color: var(--paper); }
/* Text not yet translated (preview builds with --allow-missing only) */
.tag--pending { border: 1px dashed var(--signal-ink); color: var(--signal-ink); }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .55rem 1rem .5rem;
  border: 2px solid transparent;
  border-radius: 6px;
  font: 700 .9375rem/1 var(--font-ui);
  text-decoration: none;
}
.btn--official { background: var(--ink); color: var(--paper); }
.btn--official:hover { background: var(--queue); color: var(--paper); }
.btn--paid { background: var(--paid); color: var(--paper); }
.btn--paid:hover { color: var(--paper); text-decoration: underline; }
.btn--disabled { border-color: var(--rule); background: transparent; color: var(--ink-2); cursor: not-allowed; }

/* Board */

.panel { padding-block: 2rem 1rem; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.panel__head h2, .digest h2, .subscribe h2, .legal h1 {
  font: 700 2.375rem/1 var(--font-display);
  font-stretch: 75%;
}
.panel__intro { color: var(--ink-2); font-size: 1rem; }
.geo-notice {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border: 2px dashed var(--paid);
  border-radius: 8px;
  background: var(--paper);
  font: 600 .9375rem/1.4 var(--font-ui);
}

.filters { display: grid; gap: 1rem 1.75rem; margin-top: 1.25rem; }
@media (min-width: 60rem) {
  .filters { grid-template-columns: auto auto minmax(14rem, 1fr); align-items: end; }
  .filters__count { grid-column: 1 / -1; }
}
.filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.filters legend, .filters__search label {
  display: block;
  margin-bottom: .4rem;
  padding: 0;
  font: 700 .875rem/1.2 var(--font-ui);
  color: var(--ink-2);
}
.seg { position: relative; display: flex; flex-wrap: wrap; gap: .3rem; }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label {
  padding: .5rem .85rem .45rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font: 700 .9375rem/1 var(--font-ui);
  cursor: pointer;
}
.seg input:checked + label { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.seg input:focus-visible + label { outline: 3px solid var(--queue); outline-offset: 2px; }
.filters__search input {
  width: 100%;
  min-height: 2.5rem;
  padding: .5rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.3 var(--font-text);
}
.filters__count { font: 600 .9375rem/1.3 var(--font-ui); color: var(--ink-2); }
.empty { margin-top: 1.5rem; font-size: 1.0625rem; }

.day { margin-top: 2.25rem; }
.day__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font: 700 1.5rem/1.1 var(--font-display);
  font-stretch: 75%;
}
.day__title::after { content: ""; flex: 1; border-top: 2px solid var(--rule); }

/* Tickets */

.tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticket {
  --stub: 7.25rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--stub) minmax(0, 1fr);
  border-radius: var(--radius);
  background: var(--paper);
}
/* The two notches at the ends of the perforated line */
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  left: calc(var(--stub) - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ground);
}
.ticket::before { top: -10px; }
.ticket::after { bottom: -10px; }
.ticket__stub {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem .9rem;
  border-right: 2px dashed var(--rule);
  border-radius: var(--radius) 0 0 var(--radius);
}
.ticket--waitlist .ticket__stub { background: var(--queue-tint); }
.ticket--farming .ticket__stub { background: var(--harvest-tint); }
.ticket__type { font: 700 1.25rem/1 var(--font-display); font-stretch: 75%; }
.ticket--waitlist .ticket__type { color: var(--queue); }
.ticket--farming .ticket__type { color: var(--harvest); }
.ticket__stub time { font: 600 .875rem/1.2 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* Announcement date: the board features only entries announced in the last 7 days. */
.ticket__when { font: 600 .8125rem/1.25 var(--font-ui); color: var(--ink-2); }
.ticket__when time { display: block; }
.ticket__when--review { font-style: italic; }
.ticket__body { padding: 1rem 1.25rem 1.2rem; }
.ticket__name { font: 700 1.3125rem/1.15 var(--font-ui); overflow-wrap: anywhere; }
.ticket__pending { margin-top: .35rem; }
.ticket__cat { margin-top: .25rem; font: 600 .875rem/1.3 var(--font-ui); color: var(--ink-2); }
.ticket__text { margin-top: .6rem; }
.ticket__links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .9rem; }
.ticket__source { font: 600 .875rem/1.3 var(--font-ui); color: var(--ink-2); }

@media (max-width: 30rem) {
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket__stub {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
    padding: 0 1.1rem;
    border-right: 0;
    border-bottom: 2px dashed var(--rule);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .ticket::before, .ticket::after { top: calc(3rem - 11px); bottom: auto; }
  .ticket::before { left: -10px; }
  .ticket::after { left: auto; right: -10px; }
  .ticket__when time { display: inline; }
}

/* Still open: older entries and entries without a confirmed date. Not featured. */
.archive__box { margin-top: 1.25rem; }
.archive__box > summary { cursor: pointer; font: 700 1rem/1.3 var(--font-ui); }
.archive__box .day__title { margin-top: 1.75rem; }
.archive__note { margin-bottom: 1rem; color: var(--ink-2); font-size: .9375rem; }

.ref {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-top: .9rem;
  padding: .7rem .9rem .7rem 1.35rem;
  border-radius: 8px;
  background: var(--paid-tint);
}
.ref::before { width: 7px; border-radius: 8px 0 0 8px; }
.ref__note { flex: 1 1 13rem; font: 600 .875rem/1.4 var(--font-ui); }

/* Telegram digest */

.digest { padding-block: 2.75rem 1rem; }
.digest__meta { margin-top: .6rem; font: 600 .9375rem/1.4 var(--font-ui); color: var(--ink-2); }
.digest__cols { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 62rem) { .digest__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }
.digest__col h3 {
  padding-top: .6rem;
  border-top: 4px solid var(--ink);
  font: 700 1.5rem/1.15 var(--font-display);
  font-stretch: 75%;
}
.digest__col--opportunities h3 { border-top-color: var(--harvest); }
.digest__col ul { margin: .75rem 0 0; padding-left: 1.1rem; }
.digest__col li { max-width: 38rem; margin-block: .7rem; }
.digest__note, .digest__empty { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-2); }

/* Newsletter and Telegram channel (coming soon) */

.subscribe {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.75rem;
  padding-block: 2rem 3rem;
  border-top: 3px solid var(--ink);
}
@media (min-width: 62rem) { .subscribe { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; } }
.subscribe h2 { margin-bottom: .6rem; }
.subscribe p + p { margin-top: .9rem; }
.soon {
  display: inline-block;
  margin-left: .4rem;
  padding: .2rem .55rem .15rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 700 .875rem/1.2 var(--font-ui);
  color: var(--ink-2);
  vertical-align: middle;
}
.subscribe__form > label[for] { display: block; margin: 1.1rem 0 .4rem; font: 700 .875rem/1.2 var(--font-ui); color: var(--ink-2); }
.subscribe__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.subscribe__row input {
  flex: 1 1 14rem;
  min-height: 2.75rem;
  padding: .5rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.3 var(--font-text);
}
.subscribe__row .btn { min-height: 2.75rem; }
.subscribe input:disabled { cursor: not-allowed; opacity: .75; }
.check { display: flex; align-items: flex-start; gap: .6rem; margin-top: .9rem; font-size: .9375rem; }
.check input { margin-top: .3rem; }
.subscribe__form .muted { margin-top: .9rem; font-size: .9375rem; }

/* Footer */

.footer { padding-block: 1.75rem 2.5rem; border-top: 1px solid var(--rule); font-size: .9375rem; }
.footer__inner p { max-width: 50rem; }
.footer__inner p + p { margin-top: .7rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font: 700 .9375rem/1.3 var(--font-ui); }

/* Disclaimer page */

.legal { max-width: 46rem; padding-block: 2.5rem 3rem; }
.legal h1 { margin-bottom: .5rem; }
.legal h2 { margin-top: 2rem; font: 700 1.625rem/1.15 var(--font-display); font-stretch: 75%; }
.legal h2 + p, .legal h2 + ul { margin-top: .6rem; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: .45rem; }
.draft {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: .4rem .8rem .35rem;
  border: 2px dashed var(--signal-ink);
  border-radius: 6px;
  color: var(--signal-ink);
  font: 700 .9375rem/1.3 var(--font-ui);
}
