/* ==========================================================================
   Components — flat fills, ink strokes, no shadows anywhere
   ========================================================================== */

/* ---- Type helpers -------------------------------------------------------- */

.display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.h2 {
  font-size: var(--t-h2);
}

.h3 {
  font-size: var(--t-h3);
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--on-paper-mute);
  font-weight: 500;
}

.room .lead {
  color: var(--on-ink-mute);
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--on-paper-mute);
}

.room .label {
  color: var(--on-ink-mute);
}

.label__rule {
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Section heading block — full shell width so the serif can actually breathe. */
.s-head {
  max-width: none;
}

.s-head .h2 {
  margin-top: 16px;
  max-width: 22em;
}

.s-head--wide .h2 {
  max-width: 28em;
}

.s-head__lead {
  margin-top: 20px;
  max-width: 46rem;
}

.s-head--center {
  text-align: center;
}

.s-head--center .h2,
.s-head--center .s-head__lead {
  margin-inline: auto;
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  --btn-h: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding-inline: 24px;
  border: var(--stroke);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--ls-sans);
  white-space: nowrap;
  transition: background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out);
}

.btn__icon {
  transition: transform var(--d-base) var(--e-out);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

.btn--sm {
  --btn-h: 40px;
  padding-inline: 17px;
  font-size: var(--t-xs);
}

.btn--lg {
  --btn-h: 58px;
  padding-inline: 30px;
  font-size: var(--t-body);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--primary {
  background: var(--periwinkle);
}

.btn--primary:hover {
  background: var(--periwinkle-deep);
}

.btn--outline:hover {
  background: var(--paper-raised);
}

.btn--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.btn--ink:hover {
  background: var(--ink-raised);
}

/* Inside a dark room the polarity flips */
.room .btn {
  border-color: rgba(243, 239, 226, 0.32);
  color: var(--on-ink);
}

.room .btn--primary {
  border-color: var(--periwinkle);
  background: var(--periwinkle);
  color: var(--ink);
}

.room .btn--primary:hover {
  border-color: var(--periwinkle-deep);
  background: var(--periwinkle-deep);
}

.room .btn--outline:hover {
  background: rgba(243, 239, 226, 0.08);
}

/* ---- Tags and pills ------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
  background: transparent;
}

.tag--live {
  border-color: var(--live-line);
  background: var(--live-bg);
  color: var(--live-fg);
}

.tag--match {
  border-color: var(--match-line);
  background: var(--match-bg);
  color: var(--match-fg);
}

.tag--count {
  font-variant-numeric: tabular-nums;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.dot--pulse {
  animation: dotPulse 2.4s var(--e-in-out) infinite;
}

@keyframes dotPulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* ---- Chips --------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-2xs);
  font-weight: 550;
  color: var(--fg-mute);
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out);
}

.chip .icon {
  width: 0.9em;
  height: 0.9em;
  stroke-width: 2;
}

.chip--btn {
  cursor: pointer;
}

.chip--btn:hover {
  border-color: var(--line-strong);
  color: var(--fg);
}

.chip--on,
.chip--btn[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-bg);
  color: var(--accent-fg);
}

.chip--neg[aria-pressed="true"] {
  border-color: var(--neg-line);
  background: var(--neg-bg);
  color: var(--neg-fg);
}

.chip--off {
  border-color: var(--neg-line);
  color: var(--neg-fg);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.chip--match {
  border-color: var(--match-line);
  background: var(--match-bg);
  color: var(--match-fg);
}

/* ---- Segmented control --------------------------------------------------- */

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: var(--hairline);
  border-radius: var(--r-pill);
}

.seg button {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--on-paper-mute);
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}

.seg button:hover {
  color: var(--ink);
}

.seg button[aria-checked="true"] {
  background: var(--ink);
  color: var(--paper-raised);
}

/* ---- Switch -------------------------------------------------------------- */

.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: var(--t-xs);
  color: var(--on-paper-mute);
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch__track {
  position: relative;
  width: 42px;
  height: 24px;
  flex: none;
  border: var(--hairline);
  border-radius: var(--r-pill);
  transition: background-color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}

.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--on-paper-fog);
  transition: transform var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}

.switch input:checked + .switch__track {
  border-color: var(--ink);
  background: var(--ink);
}

.switch input:checked + .switch__track .switch__knob {
  transform: translateX(18px);
  background: var(--paper-raised);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---- Cards --------------------------------------------------------------- */

.card {
  border: var(--stroke);
  border-radius: var(--r-card);
  background: var(--paper-raised);
}

.card--pad {
  padding: clamp(24px, 2.6vw, 38px);
}

.card--sunk {
  background: var(--paper-sunk);
}

.card--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.room .card {
  border-color: rgba(243, 239, 226, 0.22);
  background: var(--ink-raised);
  color: var(--on-ink);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-tight);
  font-size: 20px;
  color: var(--fg);
}

/* ---- Product panel (the dark app surface on paper) ---------------------- */

.panel {
  position: relative;
  border: var(--stroke-strong);
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}

.room .panel {
  border-color: rgba(243, 239, 226, 0.22);
  background: var(--ink-raised);
}

.panel--paper {
  background: var(--paper-raised);
  color: var(--on-paper);
}

.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.panel__id {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-xs);
  font-weight: 650;
}

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-micro);
  color: var(--fg-fog);
}

.panel__foot-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--amber);
}

/* ---- Order card ---------------------------------------------------------- */

.feed {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.ocard {
  padding: 14px 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-inner);
  background: rgba(243, 239, 226, 0.07);
}

.ocard__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ocard__time {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--fg-fog);
}

.ocard__price {
  margin-left: auto;
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ocard__title {
  /* Always two lines tall: the feed swaps cards on a timer, and a title that
     wrapped differently would resize the whole panel on every tick. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: calc(2em * 1.28);
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.28;
  letter-spacing: 0;
}

.ocard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* Source stamp: a letter tile plus the platform name in mono caps */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.stamp__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--fg);
}

.stamp__mark .icon {
  width: 11px;
  height: 11px;
}

/* ---- Phone / chat mockup (light Telegram) ------------------------------- */

.phone {
  max-width: 336px;
  margin-inline: auto;
  padding: 10px;
  border: var(--stroke-w-strong) solid var(--line-strong);
  border-radius: 42px;
  background: var(--paper-sunk);
  color: var(--on-paper);
}

.phone__screen {
  border-radius: 34px;
  background: var(--paper-raised);
  color: var(--on-paper);
  overflow: hidden;
}

.chat {
  display: grid;
  gap: 10px;
  padding: 16px 14px;
}

.chat__bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 13px;
  border-bottom: var(--hairline);
}

.chat__bar b {
  display: block;
  font-size: var(--t-xs);
  font-weight: 650;
}

.chat__bar em {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-paper-fog);
}

.chat__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: var(--stroke);
  border-radius: 50%;
  background: var(--periwinkle);
  font-size: 17px;
}

.chat__msg {
  max-width: 94%;
  padding: 12px 14px;
  border: var(--hairline);
  border-radius: 18px 18px 18px 6px;
  background: var(--paper);
  font-size: var(--t-2xs);
  line-height: 1.55;
  color: var(--on-paper-mute);
}

.chat__msg b {
  color: var(--on-paper);
  font-weight: 650;
}

.chat__msg--out {
  margin-left: auto;
  border-radius: 18px 18px 6px 18px;
  border-color: rgba(23, 23, 15, 0.22);
  background: var(--periwinkle);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
}

.chat__msg--card {
  max-width: 100%;
  background: var(--paper-raised);
}

.chat__card-head {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 8px;
}

.chat__card-title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--on-paper);
}

.chat__msg blockquote {
  margin: 9px 0;
  padding-left: 11px;
  border-left: 2px solid var(--periwinkle-deep);
  font-size: var(--t-micro);
  line-height: 1.55;
}

.chat__card-price {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--on-paper);
}

.chat__kb {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.chat__kb span {
  padding: 9px 11px;
  border: var(--hairline);
  border-radius: var(--r-tight);
  text-align: center;
  font-size: var(--t-micro);
  font-weight: 550;
  color: var(--on-paper-mute);
}

.chat__kb-primary {
  border-color: var(--ink) !important;
  background: var(--periwinkle);
  color: var(--ink) !important;
}

/* ---- Telegram notification ---------------------------------------------- */

.toast {
  width: min(292px, 78vw);
  padding: 15px 16px;
  border: var(--stroke-strong);
  border-radius: var(--r-inner);
  background: var(--paper-raised);
  color: var(--on-paper);
}

.toast__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.toast__app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toast__time {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--on-paper-fog);
}

.toast__search {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 148px;
}

.toast.is-search .toast__search {
  display: flex;
}

.toast.is-search .toast__found {
  display: none;
}

.toast__search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast__spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: toastSpin 0.55s linear infinite;
}

.toast__search-label {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--ls-sans);
  color: var(--on-paper);
}

.toast__bar {
  display: block;
  height: 2px;
  overflow: hidden;
  background: var(--paper-sunk);
}

.toast__bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  animation: toastScan 720ms var(--e-out) 1.2s both;
}

@keyframes toastSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes toastScan {
  to {
    transform: scaleX(1);
  }
}

.toast__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.3;
}

.toast__text {
  margin-top: 6px;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--on-paper-mute);
}

.toast__btns {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.toast__btn {
  padding: 8px 10px;
  border: var(--hairline);
  border-radius: var(--r-tight);
  text-align: center;
  font-size: var(--t-micro);
  font-weight: 550;
  color: var(--on-paper-mute);
}

/* ---- Lists --------------------------------------------------------------- */

.ticks {
  display: grid;
  gap: 13px;
}

.ticks li {
  display: flex;
  gap: 11px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--fg-mute);
}

.ticks .icon {
  margin-top: 3px;
  font-size: 16px;
  stroke-width: 2;
  color: var(--match-fg);
}

.ticks__off,
.ticks__off .icon {
  color: var(--fg-fog);
}

.cmds {
  display: grid;
  gap: 1px;
  border-top: var(--hairline);
}

.cmds li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 2px;
  border-bottom: var(--hairline);
  font-size: var(--t-xs);
  color: var(--on-paper-mute);
}

.cmds code {
  min-width: 104px;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink);
}

/* ---- Reveal -------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

html[data-motion="calm"] [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}