/* The trade-up and tool pages' shared styles (release v2026.09.30.3, stream
   S4): linked by those pages alone (headExtra, S4_CSS in server/src/seo/
   s4rows.ts), so a list or an item page never downloads them and
   public.css stays under its ceiling. The rules sit in the public sheet's
   own layers; tokens and utilities come from public.css. */
@layer components {
  /* --- a page and its sections (L7 rhythm) ------------------------------- */
  .s4-page { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
  .s4-page > .page-head + .g-stats { margin-top: -8px; }
  .s4-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
  .s4-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .s4-h { margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--pt-ink); overflow-wrap: anywhere; hyphens: auto; }
  @media (min-width: 1024px) { .s4-h { font-size: 26px; } }
  .s4-sub { margin: 0; max-width: 72ch; font-size: 13px; line-height: 1.5; color: var(--pt-faint); text-wrap: pretty; }
  .s4-lead-line { margin: 0; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--pt-soft); text-wrap: pretty; }
  .s4-lead-line a, .s4-sub a { color: var(--pt-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pt-ink) 35%, transparent); text-underline-offset: 3px; }
  .s4-lead-line a:hover, .s4-sub a:hover { color: var(--pt-copper-bright); }

  /* The work area and its 340px aside (.g-work splits from 1280, V2); the
     aside stacks under the work below that and rides along from 1280. */
  .s4-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  @media (min-width: 1280px) { .s4-aside { position: sticky; top: calc(var(--header-h) + 20px); } }
  @media (min-width: 640px) and (max-width: 1279px) {
    .s4-aside { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); align-items: start; }
  }
  .s4-aside-plate > div:last-child { display: flex; flex-direction: column; gap: 12px; }

  /* --- rows (ui.ts rows()) on S4 pages ------------------------------------ */
  /* The sub line under a name that only a phone needs (its wear and range,
     which the wide row shows in their own columns). */
  .s4-rows .rows-sub:has(> .s4-ph:only-child) { display: none; }
  @media (max-width: 639px) { .s4-rows .rows-sub:has(> .s4-ph:only-child) { display: block; } }
  .s4-wear { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--pt-hairline-strong); font-family: var(--font-pill); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-soft); }
  .s4-rows tr.s4-current { background: color-mix(in srgb, var(--pt-copper) 7%, transparent); }
  .s4-rows tr.s4-current strong { font-weight: 500; color: var(--pt-ink); }
  /* The star: the follow (signed out) or the watch (signed in) as the Rows
     view's last column, 36px, 44px on touch. */
  .s4-star { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--pt-faint); cursor: pointer; transition: color 160ms var(--ease-soft), background-color 160ms var(--ease-soft), border-color 160ms var(--ease-soft); }
  .s4-star:hover { color: var(--pt-ink); background: var(--pt-wash); border-color: var(--pt-hairline); }
  @media (hover: none) and (pointer: coarse) { .s4-star { width: 44px; height: 44px; } }
  /* Set (public-watch.js adds .is-on and aria-pressed once the watch saves):
     the star fills in copper, the one mark a reader needs. */
  .s4-star.is-on, .s4-star[aria-pressed="true"] { color: var(--pt-copper-bright); background: color-mix(in srgb, var(--pt-copper) 12%, transparent); border-color: color-mix(in srgb, var(--pt-copper) 40%, transparent); }
  .s4-star.is-on svg, .s4-star[aria-pressed="true"] svg { fill: currentColor; }

  /* The wall on a rows() table: the gated row group stays in the HTML for
     crawlers and opens rows four to ten on a handset (html.handset, as the
     old tables do); signed in there is no gated group at all. */
  .s4-walled table.rows > tbody.gated { display: none; }
  html.handset .s4-walled table.rows > tbody.gated:has(> tr[data-phone-open]) { display: contents; }
  html.handset .s4-walled table.rows > tbody.gated > tr:not([data-phone-open]) { display: none; }
  .s4-plate > .rows-wrap + .gate { border-top: 1px solid var(--pt-hairline); }

  /* Links inside a row's sub line (the Covert, "Build this one") sit above
     the row's own link, which covers the row. */
  .s4-rows .rows-sub a { position: relative; z-index: 1; color: var(--pt-soft); text-decoration: none; }
  .s4-rows .rows-sub a:hover { color: var(--pt-ink); }
  /* Ink, never copper: the copper ink tier is for nav, focus and selection. */
  .s4-rows .rows-sub a.s4-build { color: var(--pt-ink); }
  .s4-rows .rows-sub a.s4-build:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (hover: none) and (pointer: coarse) { .s4-rows .rows-sub a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; } }

  /* --- the knife hub ----------------------------------------------------------- */
  /* The rows come first in the markup (a phone's answer), the builder after;
     from sm the builder rises under the head. */
  @media (min-width: 640px) {
    .s4-hub > .page-head { order: -2; }
    .s4-hub > .s4-builder { order: -1; }
  }
  .s4-hub .s4-rows .rows-sub { white-space: normal; }

  /* --- the case trade-up page (W33) ---------------------------------------- */
  .s4-build-fb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; }
  @media (max-width: 639px) {
    /* A phone's first screen: the head with its one action, the ticket, and
       the Covert inputs as phone rows; the other plates are in the prose and
       the FAQ, and in the HTML for a crawler. */
    .s4-case .g-stats > :not(.stat-lead) { display: none; }
    .s4-case .s4-main > .s4-inputs { order: -1; }
  }
}

/* ui.ts pageHead() with a thumb: its column carries the utility flex-col,
   which outranks 14-public-desk.css's row (utilities beat components), so
   the thumb stood on its own line at the right. On S4 pages the thumb sits
   left of the title from sm up, as PageHead draws it (integrator: the same
   fix belongs in 14-public-desk.css for every family). */
@layer utilities {
  @media (min-width: 640px) {
    .s4-page .page-head-col { flex-direction: row; align-items: flex-end; }
  }
  @media (max-width: 639px) {
    .s4-page .page-head-col { align-items: flex-start; }
  }
}

/* The trade check's own rules live in web/public/trade-check.css, linked by
   that page alone (tradefair.ts), so public.css stays under its ceiling. */

/* The gen codes page's own rules live in web/public/gen-codes.css, linked
   by that page alone (its static HTML). */

/* --- a shared trade-up (W34): grouped inputs on the strip grid, the stat
   plates, the outcomes as Rows beside the odds; no nested cards. */
@layer components {
  .tu-inputs { grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr)); }
  @media (max-width: 639px) { .tu-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .tu-in { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; min-width: 0; }
  .tu-in:hover { border-color: var(--pt-hairline-strong); }
  .tu-in-art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--pt-raise) 60%, transparent); }
  .tu-in-art img { max-width: 80%; max-height: 78%; height: auto; object-fit: contain; }
  .tu-in-n { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 999px; background: var(--pt-surface); border: 1px solid var(--pt-hairline-strong); font-family: var(--font-pill); font-size: 11px; color: var(--pt-ink); }
  .tu-in-b { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
  .tu-in-name { font-size: 13.5px; font-weight: 500; color: var(--pt-ink); line-height: 1.35; overflow-wrap: anywhere; }
  .tu-in-r { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--pt-faint); }
  .tu-in-r b { font-weight: 400; font-size: 13px; color: var(--pt-ink); white-space: nowrap; }
  .tu-split > * { min-width: 0; }
  .tu-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 18px; margin-top: 14px; }
  .tu-band { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .tu-band-v { font-size: 22px; line-height: 1; color: var(--pt-ink); }
  .tu-band-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-faint); overflow-wrap: anywhere; }
  .tu-odds-note { margin-top: 14px; }
  .s4-share .maker { margin: 0; }
}
@layer components { .s4-share .pool-odds { padding: 0; } }

@layer components {
  .s4-prose { display: flex; flex-direction: column; gap: 10px; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--pt-soft); }
  .s4-prose > * { margin: 0; }
  .s4-prose a { color: var(--pt-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pt-ink) 35%, transparent); text-underline-offset: 3px; }
  .s4-step { align-items: start; }
  /* Two up from 1280 (integration): at 1024 a half-width plate cannot hold
     a name and three figures. */
  @media (min-width: 1280px) { .s4-step { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* Two step tables side by side (integration): the desk's value tracks
     (minmax(96px, 160px) each) grew to their max before the name got any
     room, so at 1280 to 1600 the name column was about 12px wide. Here the
     name keeps 9rem and the figures take what they need. */
  @media (min-width: 1280px) {
    .s4-step table.rows tr { grid-template-columns: 56px minmax(9rem, 1fr) repeat(var(--rows-n, 1), minmax(56px, max-content)); }
    .s4-step table.rows tr:has(> .rows-act) { grid-template-columns: 56px minmax(9rem, 1fr) repeat(var(--rows-n, 1), minmax(56px, max-content)) 44px; }
  }
}

@layer components {
  /* Souvenir trade-ups: Valve's rule quoted on a wash, never a coloured edge. */
  .sv-rule blockquote { margin: 0; padding: 12px 16px; border-radius: var(--radius-ctl); background: var(--pt-wash); border: 1px solid var(--pt-hairline); color: var(--pt-ink); }
  .sv-rule blockquote p { margin: 0; }
  .sv-rule ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
  .sv-rule.s4-prose { max-width: none; display: grid; gap: 14px 32px; align-items: start; }
  .sv-rule-q { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .sv-rule-q > * { margin: 0; }
  @media (min-width: 1024px) { .sv-rule.s4-prose { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .sv-rule li b { color: var(--pt-ink); font-weight: 500; }
  .hist .sv-base { stroke: var(--pt-hairline-strong); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
  .hist .sv-mark { stroke: var(--pt-steel); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .s4-table th[scope="row"] { color: var(--pt-ink); }
}

/* --- the inventory lookup (W44): one search well first, the answer under
   it, skin cards with the cash in ink, the one skin search in the aside. */
@layer components {
  .il { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .il-form { display: flex; flex-direction: column; gap: 8px; }
  .il-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
  .il-well { flex: 1 1 280px; min-width: 0; min-height: 48px; }
  .il-well input { font-size: 15px; }
  .il-go { min-height: 48px; padding-inline: 24px; font-size: 15px; }
  .il-msg { margin: 0; font-size: 13px; color: var(--pt-soft); max-width: 72ch; }
  .il-msg.il-err { color: var(--pt-crit-bright); }
  .il-out:empty { display: none; }
  .il-out:focus { outline: none; }
  .il-out { scroll-margin-top: calc(var(--header-h) + 12px); }
  .il-out:not(:empty) ~ .il-example { display: none; }
  .il-example { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px dashed var(--pt-hairline-strong); border-radius: var(--radius-card); }
  .il-example-h { display: flex; flex-direction: column; gap: 6px; }
  .il-example-h p { font-size: 13px; color: var(--pt-soft); max-width: 72ch; text-wrap: pretty; }
  .il-example .skin-card-wrap { opacity: 0.85; }
  .il-state { margin: 0; padding: 14px 16px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); font-size: 14px; color: var(--pt-soft); }
  .il-state.il-err { color: var(--pt-crit-bright); border-color: color-mix(in srgb, var(--pt-crit-bright) 40%, transparent); }
  .il-res { display: flex; flex-direction: column; gap: 14px; }
  .il-res.stale { opacity: 0.55; }
  .il-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 16px 20px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); box-shadow: var(--shadow-1); }
  .il-tot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .il-tot b { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; font-size: clamp(22px, 5vw, 30px); line-height: 1; color: var(--pt-ink); overflow-wrap: anywhere; }
  .il-count { grid-column: 1 / -1; margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--pt-faint); }
  .il-notes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
  .il-notes p { margin: 0; font-size: 13px; color: var(--pt-soft); max-width: 72ch; }
  .il-warn { color: var(--pt-high); }
  .il-none { font-family: var(--font-sans); font-size: 12.5px; color: var(--pt-faint); }
  .il-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .il-tools p { margin: 0; font-size: 12px; color: var(--pt-faint); }
  .il-sort { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-faint); }
  .il-sort select { min-height: 44px; appearance: none; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; text-transform: none; padding: 6px 32px 6px 12px; border: 1px solid var(--pt-hairline); border-radius: 999px; background: color-mix(in srgb, var(--pt-steel) 7%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f98' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--pt-soft); }
  .il-cards { list-style: none; margin: 0; padding: 0; }
  .il-cards > li { min-width: 0; }
  .il-card .skin-card-wrap .s4-star { background: color-mix(in srgb, var(--pt-canvas) 70%, transparent); }
  .il-phase .skin-card-wrap > a { border-color: color-mix(in srgb, var(--pt-high) 40%, transparent); }
  .il-h { margin: 6px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pt-faint); }
  .il-more { margin: 0; font-size: 13px; color: var(--pt-faint); }
  .il-other summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; color: var(--pt-soft); }
  .il-other[open] summary { margin-bottom: 8px; }
  .il-next { display: flex; flex-wrap: wrap; gap: 12px; }
  .il-save, .il-pc { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius-card); }
  .il-save { border: 1px dashed var(--pt-hairline-strong); background: color-mix(in srgb, var(--pt-wash) 70%, transparent); }
  .il-save b { font-size: 15px; font-weight: 500; color: var(--pt-ink); }
  .il-save p, .il-pc p { margin: 0; font-size: 13px; color: var(--pt-soft); max-width: 60ch; }
  .il-save-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
  .il-pc { display: none; border: 1px solid var(--pt-hairline); background: var(--pt-surface); }
  @media (pointer: coarse) and (max-width: 820px) { .il-pc { display: flex; } .il-save-out .il-save-a, .il-save-out .steam-line { display: none; } }
  .il-price { display: flex; flex-direction: column; gap: 10px; }
  .il-price .search-well-form { display: flex; gap: 8px; align-items: stretch; }
  .il-price .search-well-form > label { flex: 1 1 auto; min-width: 0; }
  .s4-aside-plate h2.eyebrow { font-weight: inherit; }
  .il-fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
  .il-fees div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-wash); }
  .il-fees b { color: var(--pt-ink); font-weight: 500; }
  .il-fees span { font-size: 13px; color: var(--pt-soft); }
  .il-fees em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pt-faint); margin-right: 6px; }
  .il-privacy { margin: 0; font-size: 12px; color: var(--pt-faint); max-width: 72ch; }
  @media (max-width: 639px) {
    .s4-lookup .title-xl { font-size: 38px; }
    .s4-lookup .status-line { display: none; }
    .s4-lookup > .g-work { order: 0; }
    .s4-lookup > .s4-tc-lede { order: 1; }
    .s4-lookup > :not(.page-head):not(.g-work):not(.s4-tc-lede) { order: 2; }
    .il-go { flex: 1 1 100%; }
  }
}

/* --- trade posts (W46, W53): the picture beside the items, the head's
   More pill holding the copy and delete controls. */
@layer components {
  .tp-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
  @media (min-width: 1024px) { .tp-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
  .tp-pic img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); border: 1px solid var(--pt-hairline); }
  .tp-line { margin: 4px 0 0; font-size: 16px; color: var(--pt-ink); max-width: 60ch; overflow-wrap: anywhere; }
  .tp-line span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pt-faint); margin-bottom: 2px; }
  .tp-warn { color: var(--pt-high); }
  .tp-foot { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--pt-hairline); font-size: 13px; color: var(--pt-soft); }
  .tp-more { position: relative; }
  .tp-more > summary { list-style: none; }
  .tp-more > summary::-webkit-details-marker { display: none; }
  .tp-more-m { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 220px; padding: 6px; border: 1px solid var(--pt-hairline-strong); border-radius: var(--radius-card); background: var(--pt-surface); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.9); }
  .tp-more-m > * { justify-content: flex-start; }
  .tp-more-m > [hidden] { display: none; }
  @media (max-width: 639px) { .tp-more-m { left: 0; right: auto; } }
  /* The rows reuse the trade check's line (trade-check.css). */
}

/* --- trade lock and reversal (C3) --------------------------------------------- */
@layer components {
  .tl-cta { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--pt-soft); }
  .tl-table td, .tl-table tbody th { vertical-align: top; }
  .tl-table td { color: var(--pt-soft); }
  @media (max-width: 639px) {
    .tl-table thead { display: none; }
    .tl-table tr, .tl-table th, .tl-table td { display: block; }
    .tl-table tr { padding: 10px 0; border-bottom: 1px solid var(--pt-hairline); }
    .tl-table th, .tl-table td { border: 0; padding: 4px 16px; }
    .tl-table td::before { content: attr(data-l); display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-faint); }
  }
}

/* Round one's fixes: a sub line holding links wraps rather than run past a
   phone's edge; the More menu sits in the flow on a phone; a fold group of
   one spans the row instead of leaving half of it empty. */
@layer components {
  .s4-rows .rows-sub:has(a) { white-space: normal; }
  @media (max-width: 639px) {
    .tp-more { flex-basis: 100%; }
    .tp-more-m { position: static; margin-top: 6px; min-width: 0; box-shadow: none; }
  }
  .s4-page .folds-grid > .fold:only-child { grid-column: 1 / -1; }
}
@layer components { .s4-aside .tc-line-n small { display: block; } }

/* The answer region takes focus after a lookup (tabindex -1, for screen
   readers); it is a region, not a control, so it never draws the copper
   focus ring. Unlayered, like the focus block it answers to. */
.il-out[tabindex="-1"]:focus, .il-out[tabindex="-1"]:focus-visible { outline: none; }

/* A fold's Show is the only way into its text: 44px on touch, and while
   the fold is closed the whole plate (its heading too) is the summary's
   target, through a pseudo element over the section. */
@layer components {
  .s4-page .fold { position: relative; }
  .s4-page .fold-d:not([open]) > .fold-s::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  @media (pointer: coarse) { .s4-page .fold-s { min-height: 44px; } }
}

/* A table's reading notes folded under it (s4rows.ts moreNote): the
   summary in the fold's own mono voice, the text in the HTML. */
@layer components {
  .s4-more { min-width: 0; }
  .s4-more > summary { list-style: none; gap: 8px; }
  .s4-more > summary::-webkit-details-marker { display: none; }
  .s4-more > summary::after { content: "+"; font-size: 13px; }
  .s4-more[open] > summary::after { content: "\2212"; }
  @media (pointer: coarse) { .s4-more > summary { min-height: 44px; } }
  .s4-more-b { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
  .s4-more-b > p, .s4-more-b .s4-prose { margin: 0; }

  /* Stat plates on a phone: the lead spans both columns, so an even count
     leaves the last plate alone in a half row; it spans the row instead. */
  @media (max-width: 639px) { .s4-page .g-stats > :last-child:nth-child(even):not(.stat-lead) { grid-column: 1 / -1; } }
  /* The trade lock example plate: its note ("Example") is the one word that
     says these rows are not the reader's, so it wraps rather than truncates. */
  .s4-tl .s4-aside .bg-wash { flex-wrap: wrap; }
  .s4-tl .s4-aside .bg-wash > .truncate { white-space: normal; overflow: visible; text-overflow: clip; }
}