/* Drops the centre hairline `.seo-topic-page` paints, here only: this is the
   page that puts a three-column form on it, and the line cuts between fields
   two and three, reading as a defect. Only the gradient layer goes, the paper
   colour stays; two classes so it outranks app.css whatever the load order. */
.seo-page.ticket-timing-page {
  background-image: none;
}

.timing-monitor-copy {
  display: grid;
  gap: 22px;
}

.timing-hero-actions {
  gap: 18px;
}

.timing-explainer-link {
  border-radius: 4px;
}

/* Sibling dark cards: hero sales window and the calculator result. Keep the
   shared look here so protection and shadow cannot drift apart again.
   Bare grid tracks floor at min-content and overflowed 320px. */
.timing-window,
.sales-calculator-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 4px;
  padding: 28px;
  color: #fff;
  background: var(--trainys-ticket);
  box-shadow: 28px 34px 0 rgba(255, 116, 79, .16), var(--trainys-shadow);
}

.timing-window > *,
.sales-calculator-panel > *,
.sales-calculator-result > * {
  min-width: 0;
}

.timing-window {
  position: relative;
  min-height: 440px;
  align-content: space-between;
  overflow: hidden;
  transform: rotate(2deg);
}

/* One voice for every small caption on the page: the ticket card head, the
   field labels and the label inside the result card. */
.timing-window-head,
.sales-calculator-field label,
.sales-calculator-result-label {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.timing-window-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  padding-bottom: 18px;
}

.timing-window-head strong,
.timing-window-number span,
.timing-telegram-message small,
.sales-calculator-result-label {
  color: var(--trainys-coral);
}

.timing-window-number {
  display: flex;
  align-items: end;
  gap: 14px;
  padding-top: 24px;
}

.timing-window-number strong {
  font-size: clamp(58px, 6vw, 76px);
  letter-spacing: -.09em;
  line-height: .68;
  white-space: nowrap;
}

.timing-window-number span {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Two classes and an explicit size: the shared `.seo-hero p` matches this
   paragraph too, and a tie between the sheets resolves differently in dev. */
.seo-hero .timing-window > p {
  max-width: 320px;
  margin: 26px 0;
  color: #d9d8d2;
  font-size: 16px;
  line-height: 1.5;
}

.timing-window-track,
.timing-window-labels {
  display: none;
}

.timing-direct-answer {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) 1fr;
  width: min(1180px, calc(100% - 40px));
  gap: 40px;
  margin: auto;
  border-block: 1px solid var(--trainys-line);
  padding-block: clamp(42px, 6vw, 72px);
}

.timing-direct-answer > span,
.timing-section-heading > span,
.timing-monitor-copy > span,
.sales-calculator-kicker {
  color: var(--trainys-coral-text);
  font: 800 12px ui-monospace, monospace;
  text-transform: uppercase;
}

.timing-direct-answer h2,
.timing-section-heading h2,
.timing-monitor h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 76px);
  letter-spacing: -.06em;
  line-height: .9;
}

.timing-direct-answer p {
  max-width: 840px;
  margin: 24px 0 0;
  color: var(--trainys-text-body);
  font-size: 20px;
  line-height: 1.55;
}

.ticket-timing-page .seo-section {
  padding-block: clamp(76px, 10vw, 128px);
}

.timing-section-heading {
  display: grid;
  max-width: 850px;
  gap: 16px;
}

.timing-moment-list {
  margin: clamp(46px, 7vw, 76px) 0 0;
  padding: 0;
  border-top: 1px solid var(--trainys-line);
  list-style: none;
}

.timing-moment-list li {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 28px;
  border-bottom: 1px solid var(--trainys-line);
  padding-block: 28px;
}

.timing-moment-list h3 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1;
}

.timing-moment-list p {
  max-width: 700px;
  margin: 0;
  color: var(--trainys-text-body);
  font-size: 17px;
  line-height: 1.55;
}

.timing-monitor {
  display: grid;
  grid-template-columns: 1fr minmax(340px, .72fr);
  gap: clamp(48px, 9vw, 130px);
  align-items: center;
  padding: clamp(78px, 10vw, 138px) max(20px, calc((100vw - 1180px) / 2));
  color: #fff;
  background: var(--trainys-ink);
}

.timing-monitor-copy > span {
  color: var(--trainys-coral);
}

.timing-monitor h2 {
  color: #fff;
}

.timing-monitor-copy > p {
  margin: 0;
  color: #d9d8d2;
  font-size: 19px;
  line-height: 1.55;
}

.timing-monitor-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.timing-monitor-action .landing-cta {
  min-height: 58px;
  border-radius: 999px;
}

.timing-monitor-action small {
  color: #bdb9ae;
}

.timing-telegram {
  display: grid;
  gap: 18px;
  border: 8px solid #131319;
  border-radius: 34px;
  padding: 20px;
  color: var(--trainys-ink);
  background: #f8f7ef;
  box-shadow: 28px 30px rgba(255, 116, 79, .18);
  transform: rotate(-2deg);
}

.timing-telegram-bar,
.timing-telegram-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}

.timing-telegram-bar i {
  display: none;
}

.timing-telegram-bar strong,
.timing-telegram-status b {
  color: var(--trainys-coral-text);
  text-align: right;
}

.timing-telegram-message {
  display: grid;
  gap: 8px;
  border-radius: 22px 22px 22px 4px;
  padding: 22px;
  color: #fff;
  background: var(--trainys-ticket);
}

.timing-telegram-message strong {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 1.05;
}

.timing-telegram-message span {
  color: #d9d8d2;
}

.timing-telegram-status {
  color: var(--trainys-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.timing-plan {
  display: grid;
  grid-template-columns: minmax(0, .8fr) 1fr;
  gap: clamp(42px, 8vw, 100px);
}

.timing-plan .seo-step-list li {
  display: grid;
  gap: 6px;
}

.sales-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 36px);
}

/* The page's one interactive block is also its longest, so it ships collapsed:
   the article reads as text and the calculation opens on request. Native
   <details>, so it toggles without script and a crawler still reads the markup.
   One big control, carrying the coral edge of the fields inside it. */
.sales-calculator-disclosure {
  position: relative;
  border: 1px solid var(--trainys-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 3px 0 var(--trainys-coral);
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Fragment target of the hero link, deliberately inside the collapsed part: a
   browser reveals the ancestors of the target, and neither the <details> nor
   its <summary> is one, so pointing at either opens nothing in Chromium,
   Firefox or WebKit. Out of flow on the block's top edge, so the scroll still
   stops at the heading and the panel grid keeps its rows; the margin clears the
   top border that a flush landing would shave. */
.sales-calculator-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  scroll-margin-top: 24px;
}

/* Three stacked lines and a chevron. Kicker and invitation are spans, not an
   <hgroup> around the heading: Chromium gives a <summary> that wraps heading
   content in a group no accessible name at all. */
.sales-calculator-summary {
  position: relative;
  display: grid;
  gap: 10px;
  padding: clamp(20px, 3vw, 32px);
  padding-right: calc(clamp(20px, 3vw, 32px) + 30px);
  cursor: pointer;
  list-style: none;
}

/* display:grid already drops the marker in Chrome and Firefox; Safari paints
   it through a pseudo-element of its own. */
.sales-calculator-summary::-webkit-details-marker {
  display: none;
}

/* Quieter than the section titles around it: this one names a control. */
.sales-calculator-summary h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -.04em;
  line-height: 1.05;
}

.sales-calculator-invite {
  color: var(--trainys-text-body);
  font-size: 16px;
  line-height: 1.5;
}

/* Centred on the whole control, the way the field triggers place their glyphs. */
.sales-calculator-summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(20px, 3vw, 32px);
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: solid var(--trainys-coral);
  border-width: 0 2px 2px 0;
  transform: translateY(-30%) rotate(45deg);
}

[open] > .sales-calculator-summary::after {
  transform: translateY(20%) rotate(-135deg);
}

.sales-calculator-panel {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  padding: 0 clamp(20px, 3vw, 32px) clamp(24px, 3vw, 32px);
}

.sales-calculator-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

/* Equal thirds waste half the date column and truncate both option labels, so
   once there is room the date gives its surplus to the two selects. */
@media (min-width: 960px) {
  .sales-calculator-form {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
  }
}

/* Bare auto track floors at the widest child's max-content, and the combobox
   button — unlike the select it replaces — reports its whole label there, so
   the field used to spill over the column next to it. */
.sales-calculator-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.sales-calculator-field label {
  color: var(--trainys-text-body);
  font-weight: 800;
  letter-spacing: .08em;
}

/* Controls carry the coral edge of the waves list below them. Inset shadow, not
   a border, so the bar cannot change the box height; 16px blocks iOS zoom. */
.sales-calculator-field input,
.sales-calculator-field select,
.combobox-trigger,
.datepicker-trigger {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--trainys-line);
  border-radius: 4px;
  padding: 13px 16px 13px 18px;
  color: var(--trainys-ink);
  font: inherit;
  font-size: 16px;
  background: #fff;
  box-shadow: inset 3px 0 var(--trainys-coral);
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Own chevron. appearance:none drops only the painted widget — it stays a
   select for keyboard and screen readers. Ellipsis cuts long labels short of it. */
.sales-calculator-field select {
  padding-right: 42px;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ff744f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
}

/* One calendar glyph, two places: the native indicator on a JS-less page and the
   widget's own trigger once the script has swapped the field. */
.sales-calculator-field input[type="date"]::-webkit-calendar-picker-indicator,
.datepicker-trigger::after {
  width: 18px;
  height: 18px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff744f' stroke-width='1.6'%3E%3Cpath d='M1.8 3.8h12.4v10.4H1.8zM1.8 7h12.4M5.2 1.6v2.6M10.8 1.6v2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.datepicker-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -9px;
}

/* Pointer and open-popup state: the offset coral shadow of the result card,
   scaled down to a control. */
.sales-calculator-field input:hover,
.sales-calculator-field select:hover,
.sales-calculator-field input:focus,
.sales-calculator-field select:focus,
.combobox-trigger:hover,
.combobox-trigger:focus,
.combobox-trigger[aria-expanded="true"],
.datepicker-trigger:hover,
.datepicker-trigger:focus,
.datepicker-trigger[aria-expanded="true"],
.sales-calculator-disclosure:hover,
.sales-calculator-disclosure[open] {
  border-color: var(--trainys-ink);
  box-shadow: inset 3px 0 var(--trainys-coral), 5px 6px rgba(255, 116, 79, .22);
}

/* Keyboard focus stays the loudest state of the three. */
.sales-calculator-field input:focus-visible,
.sales-calculator-field select:focus-visible,
.combobox-trigger:focus-visible,
.datepicker-trigger:focus-visible,
.datepicker-day:focus-visible,
.sales-calculator-summary:focus-visible {
  outline: 3px solid var(--trainys-coral);
  outline-offset: 2px;
}

/* Inside a 2px-gapped grid an outset ring would cross the neighbouring days. */
.datepicker-day:focus-visible {
  outline-offset: -2px;
}

/* Own dropdown and own calendar. The OS paints a native select's list and a date
   field's calendar, and no stylesheet reaches either, so both are rebuilt here;
   the native controls stay in the markup as the state holders and are hidden
   only once the script has swapped them, which keeps a JS-less page on working
   controls. The filter counter is clipped the same way: it is a live region, so
   display:none or aria-hidden would mute it. */
.sales-calculator-field select[data-combobox-ready],
.sales-calculator-field input[data-datepicker-ready],
.combobox-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.combobox,
.datepicker {
  position: relative;
}

.combobox-trigger,
.datepicker-trigger {
  position: relative;
  padding-right: 42px;
  text-align: left;
  cursor: pointer;
}

.combobox-value,
.datepicker-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An empty field must not read as a chosen date. */
.datepicker[data-empty="true"] .datepicker-value {
  color: var(--trainys-muted);
}

/* Same coral chevron the select carries, drawn from borders so it can turn on
   open without a second data URI. */
.combobox-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border: solid var(--trainys-coral);
  border-width: 0 2px 2px 0;
  transform: translateY(-70%) rotate(45deg);
}

.combobox-trigger[aria-expanded="true"]::after {
  transform: translateY(-20%) rotate(-135deg);
}

.combobox-popup,
.datepicker-popup {
  position: absolute;
  z-index: var(--trainys-z-popup, 1100);
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  border: 1px solid var(--trainys-ink);
  border-radius: 4px;
  padding: 8px;
  background: #fff;
  box-shadow: 5px 6px rgba(255, 116, 79, .22), var(--trainys-shadow);
}

/* Seven touch targets need more room than the date field gets in the desktop
   three-column form, and less than a phone screen; the columns take the slack. */
.datepicker-popup {
  right: auto;
  min-width: min(304px, calc(100vw - 40px));
}

/* Near the foot of the viewport a 75-row list or a six-week grid has nowhere to
   go downwards. */
.combobox[data-drop="up"] .combobox-popup,
.datepicker[data-drop="up"] .datepicker-popup {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Focused, the search box paints 5px past its border and drops a 6px shadow, so
   a 6px gap left the ring on the coral edge of the row below. 14px keeps 8px. */
.combobox-search {
  margin-bottom: 14px;
}

/* Rows are spaced, not stacked: a highlighted row and its neighbour used to sit
   edge to edge and their two outlines read as one dirty box. */
.combobox-list {
  display: grid;
  gap: 4px;
  max-height: min(46vh, 316px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

/* Rows are grid, so the UA rule for [hidden] loses on specificity and filtered
   options would stay on screen. */
.combobox-option[hidden] {
  display: none;
}

.combobox-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  gap: 2px 12px;
  align-items: center;
  min-height: 44px;
  border-radius: 4px;
  padding: 8px 10px 8px 13px;
  line-height: 1.3;
  cursor: pointer;
}

.combobox-option-meta {
  grid-column: 2;
  color: var(--trainys-text-body);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  white-space: nowrap;
}

/* Selection is never colour alone: a tick and a heavier weight carry it. */
.combobox-option::after {
  content: "";
  grid-column: 3;
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border: solid var(--trainys-coral);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg);
}

.combobox-option[aria-selected="true"] {
  font-weight: 800;
}

.combobox-option[aria-selected="true"]::after {
  opacity: 1;
}

/* One row is filled at a time, and the pointer moves that same row (see
   selectCombobox.js): a hover fill of its own would paint an identical twin next
   door, with no way to tell which one Enter takes. The selected row is told
   apart by its tick and weight instead. */
.combobox-option[data-active="true"] {
  background: rgba(255, 116, 79, .12);
  box-shadow: inset 3px 0 var(--trainys-coral);
}

.datepicker-head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  margin-bottom: 4px;
}

.datepicker-month {
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.datepicker-nav,
.datepicker-day {
  display: grid;
  place-content: center;
  gap: 3px;
  border-radius: 4px;
}

.datepicker-nav {
  min-height: 34px;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Month arrows drawn from borders, like the trigger chevron: no extra data URI. */
.datepicker-nav::before {
  content: "";
  width: 8px;
  height: 8px;
  border: solid var(--trainys-coral);
  border-width: 2px 0 0 2px;
  transform: rotate(-45deg);
}

.datepicker-nav[data-direction="next"]::before {
  transform: rotate(135deg);
}

.datepicker-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.datepicker-weekdays {
  color: var(--trainys-text-body);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}

/* 44px holds the touch target on a phone and clears the desktop floor, so the
   grid needs no pointer query. Days outside the month are empty cells: they take
   no `data-iso`, and with it none of the states below. */
.datepicker-day {
  min-height: 44px;
  font-size: 15px;
}

.datepicker-day[data-iso] {
  cursor: pointer;
}

/* Today is a dot, so the mark is not colour alone; coral reads on the paper of
   an ordinary day and on the selected day's dark fill alike. */
.datepicker-day[aria-current="date"]::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--trainys-coral);
}

/* Selection is the filled cell and the weight; the hovered day is the coral tint
   of the list rows. The two never collide: hover excludes the selected day, so a
   white numeral cannot land on a pale fill. */
.datepicker-day[aria-selected="true"] {
  color: #fff;
  font-weight: 900;
  background: var(--trainys-ink);
}

.datepicker-nav:hover,
.datepicker-day[aria-selected="false"]:hover {
  background: rgba(255, 116, 79, .12);
}

@media (prefers-reduced-motion: no-preference) {
  .combobox-trigger::after,
  .sales-calculator-summary::after {
    transition: transform .18s ease;
  }

  .combobox-popup,
  .datepicker-popup {
    animation: combobox-open .16s ease;
  }

  @keyframes combobox-open {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}

/* Inherits the look above; no rotation on purpose — a tilted form reads worse
   and two tilted objects fight. */
.sales-calculator-result {
  gap: 10px;
}

.sales-calculator-result-date {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 950;
  letter-spacing: -.05em;
  line-height: .95;
  overflow-wrap: break-word;
}

.sales-calculator-result-time {
  color: #d9d8d2;
  font-size: 16px;
  line-height: 1.45;
}

.sales-calculator-waves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.sales-calculator-waves li {
  display: grid;
  gap: 4px;
  border-left: 2px solid var(--trainys-coral);
  padding-left: 14px;
}

.sales-calculator-waves strong {
  font-size: 20px;
  font-weight: 900;
}

/* Two classes because the shared `.seo-section p` outranks one: otherwise the
   footnote takes 18px and zero margin and sits flush against its neighbour. */
.sales-calculator-waves span,
.sales-calculator-facts .sales-calculator-note {
  color: var(--trainys-text-body);
  font-size: 15px;
  line-height: 1.5;
}

.sales-calculator-facts h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .timing-monitor,
  .timing-plan,
  .timing-direct-answer {
    grid-template-columns: 1fr;
  }

  .timing-window,
  .timing-telegram {
    box-sizing: border-box;
    width: min(100%, 520px);
  }
}

/* 10px uppercase is below the readable floor on a touch screen. */
@media (max-width: 900px) {
  .timing-telegram-status {
    font-size: 12px;
  }
}

@media (max-width: 620px) {
  .timing-direct-answer {
    width: calc(100% - 24px);
  }

  .timing-hero-actions,
  .timing-hero-actions .landing-cta,
  .timing-explainer-link,
  .timing-monitor-action,
  .timing-monitor-action .landing-cta {
    width: 100%;
  }

  .timing-window,
  .timing-telegram {
    padding: 18px;
    transform: none;
  }

  /* 440 is a desktop proportion; `space-between` spent it on air, above a form. */
  .timing-window {
    min-height: 0;
  }

  .timing-window,
  .sales-calculator-result {
    box-shadow: 14px 18px rgba(255, 116, 79, .16);
  }

  .timing-window-number strong {
    font-size: clamp(40px, 13vw, 76px);
  }

  .timing-direct-answer h2,
  .timing-section-heading h2,
  .timing-monitor h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .timing-moment-list li {
    grid-template-columns: 42px 1fr;
    gap: 14px;
  }

  .timing-moment-list li > strong {
    grid-column: 2;
  }

  .timing-monitor {
    padding-inline: 12px;
  }

  .sales-calculator-result {
    padding: 22px;
  }

  /* Ceiling matches the 38px base so this only shrinks, never steps up. */
  .sales-calculator-result-date {
    font-size: clamp(30px, 9.6vw, 38px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-timing-page * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}