/* NAMES-2 · app names in site tables and lists wrap, never cut (BRAND v9 §8c, §8a.4). Designer spec specs/names-2 (names-2.css),
   approved by Luke Oct 26, 2026. Loaded last on every page (after styles.css, seo.css, movers.css and any page CSS) by build.mjs layout(). */

/* 1. App names: wrap at word boundaries, up to 2 lines; break inside a word only as the last resort (overflow-wrap:anywhere
      is safe here: every table below is table-layout:fixed, and every flex/grid parent already gives the name min-width:0 or a
      definite width; do NOT add min-width:0 to .btable a.name, it would undo the phone grid's min-width:100%). */
.btable .nm a.name,
.ctable .nm .name, .rtable .nm .name,
.cty .nm a.name, .cix .nm a.name,
.sx-nl a,
.sx-app-nm,
.sx-pr-id span,
.gx-n,
.related .rn,
.sp-n {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;      /* CJK: never start a line with closing punctuation */
  hyphens: manual;
  line-height: 1.25;
}
/* the phone header clamp (seo.css:165) becomes a plain 2-line block; its min-height keeps both cards the same height */
@media (max-width: 480px) {
  .sx-app-nm { display: block; -webkit-line-clamp: none; line-clamp: none; min-height: 2.5em; }
  .btable .nm a.name { white-space: normal; text-overflow: clip; overflow: visible; }
}

/* 2. Secondary lines under a name (developer): wrap the same way, never cut (BRAND v9 §8c). Only the developer text itself
      (.d), not the whole .sx-dev line, so the store pills and the YEAR-1 'best rank' line keep their own rules. */
.btable .nm .dev,
.ctable .nm .dev, .rtable .nm .dev,
.cty .nm .dev, .cix .nm .dev,
.sx-dev .d, .sx-app-dev .d,
.related .rd {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* 2b. Phone list rows (/best, year): seo.css:268 makes .sx-dev a one-line flex row (store pills, then the developer), which
       squeezes a long developer into a narrow column (5 lines at 320). Let it wrap as a flex row: the developer stays on
       one line beside the pills when it fits there whole, otherwise it moves under them at full width and wraps, e.g. "[Android]" / "CLOUD WHALE INTERACTIVE TECHNOLOGY LLC." */
@media (max-width: 600px) {
  .sx-t .sx-dev:not(.sx-yb) { flex-wrap: wrap; row-gap: 2px; white-space: normal; overflow: visible; text-overflow: clip; }
  .sx-t .sx-dev .d { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
  .sx-t .sx-dev .ph-st { order: -1; }
}

/* 3. Rows: the cell's fixed height becomes a minimum, so a row grows by exactly the extra line(s) and never jumps otherwise;
      the rank, icon and numbers stay vertically centred. */
.ctable td, .rtable td { white-space: normal; }
.ctable td.r, .rtable td.r, .ctable td.pos, .rtable td.pos { white-space: nowrap; }
.btable td.app .ac, .ctable td .ac, .rtable td .ac { align-items: center; }

/* 4. Short-label step for the two side-by-side compare headers (BRAND v9 §8c step 3). The build splits each name at the
      shortName() separator: <h2 class="sx-app-nm" title="Facetune: Photo & Video Editor">Facetune<span class="nm-tag">: Photo &amp; Video Editor</span></h2>.
      At ≤ 360 px (two ~120 px cards) full store names need 3+ lines, so the tagline hides and the short label shows, still ≤ 2 lines.
      A name with no separator has no .nm-tag and wraps whole (overflow-wrap:anywhere keeps it inside the card). */
@media (max-width: 360px) { .sx-app-nm .nm-tag { display: none; } }

/* 5. Engineer addition (not in the Designer's names-2.css; same rule as block 1): the /new/ boards' name links
      (styles.css:80 `.card .btable .nm a.name{white-space:nowrap;…ellipsis}`) out-rank block 1's selector, so they still
      ellipsized at 320–390. Same wrap rule at the same specificity. Needs the Designer's OK. */
.card .btable .nm a.name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  hyphens: manual;
  line-height: 1.25;
}

/* 6. Engineer addition (not in the Designer's names-2.css): the app page H1 (styles.css:874 one-line ellipsis, :956 phone
      line-clamp 2) cut long store names, e.g. /app/ai-gpt/ "チャッピー：AI会話・GPT日本語チ…" at 320. It wraps whole instead;
      a very long name can take 3 lines on a phone. Needs the Designer's OK. */
.uhead h1 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: normal; line-break: strict; }
@media (max-width: 480px) { .uhead h1 { display: block; -webkit-line-clamp: none; line-clamp: none; } }

/* 7. /new/ names (Designer, Oct 26): at most 2 lines at line-height 1.15. When the full name needs more, the inline fit script in
      build.mjs (NEW_NM_FIT, same mechanism as /best/) swaps in its shortName() label (data-short) when one exists; a name with no
      short label wraps whole and may take 3 lines. Never ellipsized. */
.boards.new2 .card .btable .nm a.name { line-height: 1.15; }
/* 7b. Main board names (home .blended table only; Designer, Oct 26, BRAND §8c): the same 1.15 name block as /new/. A name
       with no short form may take a 3rd line. Only the name's line-height: row padding and the lines under it are unchanged. */
.blended .btable .nm a.name { line-height: 1.15; }

/* 8. /new/ context line under the name (styles.css:88 was one line with an ellipsis): same muted 12px style, never cut. Three
      chunks, each nowrap: flag + country + chart, category, date. The line wraps only between chunks; each separator ends the chunk
      before it ("&nbsp;· " in the markup), so a line may end with "·" but never starts with it. Squeezed columns only (fit script
      in build.mjs NEW_NM_FIT): .ms drops "Top"; .mx lets a chunk still wider than the column wrap at its spaces; .my, only for a
      single word wider than the column, breaks inside it. Never cut. */
.boards.new2 .card .btable .nm .meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
.boards.new2 .card .btable .nm .meta .nobr { white-space: nowrap; }
.boards.new2 .card .btable .nm .meta.ms .tp { display: none; }
.boards.new2 .card .btable .nm .meta.mx .nobr { white-space: normal; } /* a chunk wider than the column breaks at its own spaces */
.boards.new2 .card .btable .nm .meta.my .nobr { overflow-wrap: anywhere; } /* a single word wider than the column: break inside it, never cut */
.boards.new2 .card .btable .nm .meta .sp { white-space: nowrap; } /* the separator stays on the end of its chunk, even in .mx */
/* 8b. Below 360 px (LABEL-1's max-width:359px breakpoint) the chart chunk shows the board's short form by default, "🇧🇷 BR Grossing";
       at 360 and up it keeps "Top Grossing" / "Top Free". */
@media (max-width: 359px) { .boards.new2 .card .btable .nm .meta .tp { display: none; } }