/* ═══════════════════════════════════════════════════════════
   Components — the Fenibs UI kit v5 as the CRM draws it

   One set of rules for every control, so no two behave differently:
   - Height: 40px; --sm 32px; --lg 48px. Header controls share --control-h.
   - Corners on the Fenibs scale, the same on all four: 40–48px controls and fields 14
     (--r-control), a 32px button and a button inside a field 10, tags and chips a capsule.
     A field with its button is one control — .field-action below.
   - Neutral control: a white fill or none, an outline, --text-secondary; hover lifts the
     text to --text and the outline a step. Primary: the teal-into-blue fill.
   - Hover only where there is one — @media (hover: hover): on a touch screen a tap left
     the hover on.
   - Disabled by colour, not by opacity; a submit is never disabled, a busy one only stops
     taking clicks.
   - Under 48px a control gets a 48px hit area on a touch screen, invisibly.
   ═══════════════════════════════════════════════════════════ */

/* ── Icons (IconHelper#icon): Lucide geometry, a 1px line at every size ── */
.icon { flex-shrink: 0; }
/* stroke-width 1 stays one screen pixel however the SVG is scaled. Not inherited, so it
   goes on the shapes themselves. */
.icon :is(path, circle, rect, line, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--lh-20);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn .icon { width: 16px; height: 16px; }
.btn--primary {
  background: var(--primary-fill);
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: var(--sh-primary);
}
.btn--primary:active { transform: scale(0.98); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
@media (hover: hover) {
  .btn--primary:hover { filter: brightness(1.08); box-shadow: var(--sh-primary-hover); }
  .btn--secondary:hover { border-color: var(--border-accent); color: var(--accent-ink); }
  .btn--ghost:hover { background: var(--surface); color: var(--text); }
}
.btn--sm { height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-sm); font-size: var(--text-xs); line-height: var(--lh-16); }
.btn--lg { height: 48px; padding: 0 var(--sp-6); font-size: var(--text-base); line-height: var(--lh-24); border-radius: var(--r-control-l); }
.btn:disabled, .btn[aria-disabled="true"] {
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
form[aria-busy="true"] [type="submit"] { pointer-events: none; cursor: progress; }

/* ── Square icon button: 40×40, the control corners ── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .icon-btn:hover { color: var(--accent-ink); background: var(--surface); border-color: var(--border-accent); }
}
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn--sm { width: 36px; height: 36px; border-radius: var(--r-sm); }

/* Touch: a 48px hit area round a smaller icon control, the look unchanged. */
@media (pointer: coarse) {
  /* (the header's cross keeps its own position: absolute from layout.css, loaded later) */
  /* (the bookmark on a picture is absolute already — a containing block for its ::after) */
  :is(.icon-btn--sm, .header-search__close, .search-field__clear) { position: relative; }
  :is(.icon-btn--sm, .bookmark--icon, .header-search__close, .search-field__clear)::after {
    content: "";
    position: absolute;
    inset: calc(50% - 24px);
  }
  /* The other controls under 48 — text buttons of 32, chips and choices of 36, tags of 24,
     the slider's bars, pages, the header's 36 on a phone: grown to 48 on each axis where
     they are smaller, never shrunk. (Not the header's search button: its icons are placed
     from an ancestor, a position here would move them.) */
  :is(.btn--sm, .chip, .hero__step, .pagination__link, .header-platform) { position: relative; }
  :is(.btn--sm, .chip, .choice, .tag, .hero__step, .pagination__link, .header-platform)::after {
    content: "";
    position: absolute;
    inset: min(0px, calc(50% - 24px));
  }
}

/* ── Field with an action: one field and its one button make one control ──
   A single field with its submit button (the newsletter, the search page) is one shell
   with the button inside, rather than a field beside a button. The shell is a 48px
   control with the 14px corners, and the 40px button sits 4px in with 10 — the same
   curve, 4px in, on all four corners. */
.field-action {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  height: 48px;
  padding: 3px; /* + the 1px border: the button stands 4px in, 14 − 4 = its 10 */
  padding-inline-start: 0;
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--r-field);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .field-action:hover { border-color: var(--text-secondary); }
}
.field-action:has(.field-action__input:focus) { border-color: var(--accent-ink); box-shadow: var(--ring); }
.field-action__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--sp-2);
  padding-inline-start: var(--sp-4);
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  font-size: var(--text-base);
}
.field-action__input::placeholder { color: var(--text-tertiary); }
.field-action__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}
/* A leading icon (the search page's magnifier) takes the text's 16px start. */
.field-action > .icon:first-child {
  width: 20px;
  height: 20px;
  margin-inline-start: var(--sp-4);
  color: var(--text-tertiary);
  pointer-events: none;
}
.field-action > .icon:first-child ~ .field-action__input { padding-inline-start: var(--sp-3); }
.field-action > .btn { flex-shrink: 0; border-radius: var(--r-sm); }

/* Invalid (field_validation_controller): the whole control turns red — and shakes on a
   refused submit, the button with it: it is one control. The message stands in the slot
   under it. The error stays through focus, until the next check. Under reduced motion
   base.css cuts the shake, the colour stays. */
.field-action.is-invalid,
.field-action.is-invalid:has(:focus) {
  border-color: var(--error);
  box-shadow: var(--error-ring);
}
.field-action.is-shaking { animation: field-shake var(--dur-3) cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes field-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.field-action__error { margin-top: var(--sp-2); font-size: var(--text-sm); line-height: var(--lh-20); color: var(--error); }
.field-action__error:empty { display: none; }

/* ── Tag: the category label, a teal capsule (the kit's badge) ── */
.tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--lh-16);
  color: var(--accent-ink);
  background: var(--tint);
  border: 1px solid var(--border-accent);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  width: fit-content;
}
@media (hover: hover) {
  a.tag:hover { color: var(--accent-ink-hover); background: var(--accent-subtle); border-color: var(--accent-ink); }
}

/* ── Chips: the article's tags ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .chip:hover { color: var(--accent-ink); border-color: var(--border-accent); background: var(--tint); }
}

/* ── Segmented switch for any number of segments of any width. One thumb slides under the
   current segment (segmented_controller measures it); before the controller runs the
   current segment paints its own background, so nothing jumps when the thumb takes
   over. Hover changes the text only. ── */
.segmented { position: relative; min-width: 0; }
.segmented__scroller { overflow-x: auto; scrollbar-width: none; border-radius: inherit; }
.segmented__scroller::-webkit-scrollbar { display: none; }

/* ── Scroll edge: content that scrolls never stops at an invisible line. Where the
   background is the same on both sides of the edge, the edge with more content past it
   fades out over 32px; edge_fades.js marks which (both in the middle, none when it all
   fits). Used by the category row, the filter dialog and the header search list. A
   container with its own visible border clips on its rounded border instead; content
   passing under the feed bar gets the progressive blur. ── */
.edge-fade { --fade: 32px; --fade-dir: to right; }
.edge-fade--y { --fade-dir: to bottom; }
.edge-fade[data-fade-end] {
  -webkit-mask-image: linear-gradient(var(--fade-dir), #000 calc(100% - var(--fade)), #0000);
  mask-image: linear-gradient(var(--fade-dir), #000 calc(100% - var(--fade)), #0000);
}
.edge-fade[data-fade-start] {
  -webkit-mask-image: linear-gradient(var(--fade-dir), #0000, #000 var(--fade));
  mask-image: linear-gradient(var(--fade-dir), #0000, #000 var(--fade));
}
.edge-fade[data-fade-start][data-fade-end] {
  -webkit-mask-image: linear-gradient(var(--fade-dir), #0000, #000 var(--fade), #000 calc(100% - var(--fade)), #0000);
  mask-image: linear-gradient(var(--fade-dir), #0000, #000 var(--fade), #000 calc(100% - var(--fade)), #0000);
}
.segmented__track { position: relative; display: flex; gap: var(--sp-1); width: max-content; }
.segmented__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--surface-raised);
  border-radius: var(--r-full);
  pointer-events: none;
  transition: transform var(--dur-3) var(--ease-morph), width var(--dur-3) var(--ease-morph);
}
.segmented:not(.is-ready) .segmented__thumb { display: none; }
.segmented__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--lh-20);
  white-space: nowrap;
  color: var(--text-tertiary);
  transition: color var(--dur-2) var(--ease);
}
.segmented__item[aria-current="page"] { color: var(--text); }
.segmented:not(.is-ready) .segmented__item[aria-current="page"] { background: var(--surface-raised); }
/* While the thumb travels, the text colour travels with it. */
.segmented.is-moving .segmented__item[aria-current="page"] { color: var(--text-tertiary); }
.segmented.is-moving .segmented__item.is-target { color: var(--text); }
@media (hover: hover) {
  .segmented__item:not([aria-current="page"]):hover { color: var(--text); }
}
/* Inside: the scroller clips an outer ring. */
.segmented__item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
/* Part of a several-category selection: no thumb then, a dot marks each chosen one. */
.segmented__item.is-selected { color: var(--text); }
.segmented__item.is-selected::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-inline-end: var(--sp-2);
  border-radius: 50%;
  background: var(--accent);
}

/* ── Count badge: a small number on a control's corner (active filters, saved articles). ── */
.count-badge {
  position: absolute;
  top: var(--sp-1);
  inset-inline-end: var(--sp-1);
  min-width: 16px;
  height: 16px;
  padding: 0 var(--sp-1);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: var(--lh-16);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
}

.count-badge--neutral { color: var(--text); background: var(--surface-raised); }

/* ── Bookmark («Избранное»): an outline bookmark that turns into bookmark-check and the
   accent colour once saved — both icons stay 1px outlines. Above a stretched row link. ── */
.bookmark { position: relative; z-index: 1; }
.bookmark__icon--on, .bookmark__label--on { display: none; }
.bookmark[aria-pressed="true"] { color: var(--accent-ink); }
.bookmark[aria-pressed="true"] .bookmark__icon--off,
.bookmark[aria-pressed="true"] .bookmark__label--off { display: none; }
.bookmark[aria-pressed="true"] .bookmark__icon--on,
.bookmark[aria-pressed="true"] .bookmark__label--on { display: inline; }
.bookmark .icon { width: 16px; height: 16px; }
/* In a feed row: on the picture's top-right corner, opposite the category tag — 28px like
   the tag on a picture (one line, one height), 12px in, the same opaque white (no glass in
   a list). */
.bookmark--icon {
  position: absolute;
  top: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border-color: transparent;
  background: var(--surface);
  box-shadow: var(--sh-xs);
}
@media (hover: hover) {
  .bookmark--icon:hover { background: var(--surface); border-color: var(--border-accent); }
}
.bookmark--labeled { gap: var(--sp-2); margin-inline-start: auto; }

/* ── Choice: a radio or a checkbox drawn as a chip (the filter dialog). ── */
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { position: relative; display: inline-flex; cursor: pointer; }
.choice > span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .choice:hover > span { color: var(--text); border-color: var(--border-hover); }
}
.choice:has(:checked) > span { color: var(--accent-ink); background: var(--tint); border-color: var(--border-accent); }
.choice:has(:focus-visible) > span { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ── Page & section headings ── */
.page-header { padding: var(--sp-12) 0 0; }
.page-title {
  display: inline-block;
  max-width: 100%;
  font-size: var(--text-6xl);
  line-height: var(--lh-56);
  letter-spacing: -0.03em;
  /* One gradient title per page: ink into navy into deep teal (every stop ≥ 4.5:1). */
  background: var(--heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-subtitle {
  margin-top: var(--sp-4);
  max-width: 720px;
  font-size: var(--text-lg);
  line-height: var(--lh-28);
  color: var(--text-secondary);
}
.section { margin-top: var(--sp-16); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.section-title { font-size: var(--text-2xl); line-height: var(--lh-32); }
@media (max-width: 1024px) {
  .page-title { font-size: var(--text-5xl); line-height: var(--lh-48); }
}
@media (max-width: 768px) {
  .page-header { padding-top: var(--sp-8); }
  .page-title { font-size: var(--text-4xl); line-height: var(--lh-40); }
  .page-subtitle { font-size: var(--text-base); line-height: var(--lh-24); }
  .section { margin-top: var(--sp-12); }
  .section-title { font-size: var(--text-xl); line-height: var(--lh-28); }
}

/* ── Article card ── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-sunken);
  border-radius: var(--r-media-top);
}
/* A category tag on a picture's top-left corner (the read-also cards, the slider's cover,
   a feed row), 12px in. An opaque white capsule — no glass in a list. A block, so a name
   too long for a small picture ends in an ellipsis instead of running under the bookmark. */
.tag--on-media {
  position: absolute;
  top: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 2;
  display: block;
  max-width: calc(100% - 2 * var(--sp-3));
  padding-block: 5px; /* 28px tall, as the bookmark beside it */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: transparent;
  background: var(--surface);
  box-shadow: var(--sh-xs);
}
/* White on hover too: a.tag:hover outweighs the rule above and left the 12 % tint over the photo. */
@media (hover: hover) {
  a.tag.tag--on-media:hover { background: var(--surface); border-color: var(--border-accent); }
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}
.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}
.card__title {
  font-size: var(--text-xl);
  line-height: var(--lh-28);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-1) var(--ease);
}
/* The whole card is the link; the category tag stays clickable on top. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-1);
  font-size: var(--text-xs);
  line-height: var(--lh-16);
  color: var(--text-tertiary);
}
.card__meta-item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.card__meta-item .icon { width: 16px; height: 16px; }
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: var(--sh-card-hover); }
  .card:hover .card__media img { transform: scale(1.03); }
  .card:hover .card__title { color: var(--accent-ink); }
}

/* ── Missing cover: the brand's spots over a fine 40px grid (no name on it: the category
   tag on the picture says it). Fills a positioned 16:9 media box. ── */
.cover-fallback {
  position: absolute;
  inset: 0;
  background: var(--cover-placeholder);
}

/* ── Pagination: 40px touch targets, numbers in mono. Numbers only — no Previous/Next: the
   neighbouring numbers are the same links, and rel=prev/next live in <head>. ── */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-12);
}
.pagination__link, .pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.pagination__gap { color: var(--text-tertiary); }
@media (hover: hover) {
  .pagination__link:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
}
.pagination__link[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--tint);
  border-color: var(--border-accent);
}

/* ── Flash banner ── */
.flash-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--text-md);
  line-height: var(--lh-20);
}
.flash-banner .icon { width: 20px; height: 20px; }
.flash-banner--notice { color: var(--accent-ink); background: var(--tint); border-color: var(--border-accent); }
.page-flash { padding-top: var(--sp-6); }
.flash-banner--alert { color: var(--error); background: var(--error-subtle); border-color: var(--error-border); }

/* ── Empty state ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-16) var(--sp-4);
  text-align: center;
}
.empty-state__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-5);
  color: var(--accent-ink);
  background: var(--surface);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-teal);
}
.empty-state__icon .icon { width: 32px; height: 32px; }
.empty-state__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; line-height: var(--lh-28); letter-spacing: var(--tracking-tight); }
.empty-state__text { max-width: 448px; margin-top: var(--sp-2); font-size: var(--text-sm); line-height: var(--lh-20); color: var(--text-secondary); }
/* The way on: one button or a row of them (the 410 page: home and the category). */
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }

/* ── Breadcrumbs ── */
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); line-height: var(--lh-20); color: var(--text-tertiary); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--text-tertiary); }
.breadcrumbs a { color: var(--text-secondary); transition: color var(--dur-1) var(--ease); }
@media (hover: hover) {
  .breadcrumbs a:hover { color: var(--accent-ink); }
}
.breadcrumbs [aria-current="page"] {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}