/* The News section rail: the FEW rules that are News-only.
   ===========================================================================
   Everything that makes this look and behave like the rail on /music/,
   /games/, /posters/ and /shop/ comes from three files this one does not
   duplicate a line of:

     assets/kc-music-engine.css   the --mus-* tokens, light and dark
     music-versions/v17/v17.css   .am-layout / .am-side / .am-main, the panel,
                                  the rows, the off-canvas drawer under 900px
     assets/kc-rail-toggle.css    the collapse toggle, the icon strip, the
                                  hover labels, the reduced-motion block

   The rows themselves come from lib/news-rail.js. What is left, and all that
   is in here, is the count badge, the mobile Browse control, and reconciling
   the article/magazine reading column with .am-main.

   Kaʻo, 2026-08-25: "make it follow the same exact functionality and style of
   all the other left navs." Every rule below is a join between two existing
   things, never a restatement of one of them. If you find yourself copying a
   declaration out of v17.css into this file, the fix is in v17.css. */

/* ---------- the count on a row ----------
   Identical treatment to .kcshop-n, deliberately: two sibling rails should not
   render the same idea two ways. tabular-nums so a column of counts lines up
   on the digit rather than wandering. Fades with the labels when the rail
   collapses, because a bare number in a 72px icon strip means nothing. */
.kcnews-n {
  margin-inline-start: auto; font-weight: 400; color: var(--mus-ink-quiet);
  font-variant-numeric: tabular-nums; font-size: 13px;
  transition: opacity 110ms ease;
}
html.kc-rail-collapsed .kcnews-n { opacity: 0; }

/* ---------- long labels end in an ellipsis, not mid-word ----------
   Found on production 2026-08-25, German: "Kennenlernen und neue Liebe"
   (Dating & New Love) rendered as "Kennenlernen und neue Li" and simply
   stopped. v17.css gives every rail row `overflow: hidden` and the label
   `white-space: nowrap`, so anything wider than the 260px rail is cut at
   whatever pixel it reaches, with no ellipsis to say so.

   NOWRAP IS NOT THE BUG AND MUST NOT BE REMOVED. kc-rail-toggle.css is built
   around Kaʻo's rule that "nothing should shift up and down" between the
   expanded and collapsed states, and it keeps labels in flow while the rail
   narrows to 72px so they are clipped rather than reflowed. Let them wrap and
   every row in the collapsed strip grows to four or five lines, which is the
   exact reflow that rule exists to prevent.

   So the line stays one line and gains a proper truncation. min-width:0 is
   required: the row is flex, and a flex item will not shrink below its
   content's min-content width without it, so the ellipsis would never engage.

   News is the only rail this reaches. The other four have short labels; these
   are 27 section names in 36 languages, and German, Tamil and Zulu all run
   long. Scoped to .kcnews-side so nothing else changes.

   THE TRADE-OFF, stated honestly: a truncated label is still a label the eye
   cannot fully read. Every one of these sections is also in the header
   mega-menu at full length on this same page, and the row's accessible name is
   the complete text, so nothing is unreachable or unannounced. A wider rail
   would be the other answer, and --am-side-w is shared by five sections. */
.kcnews-side .am-side__lab {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- the reading column ----------
   .wt-shell--musicwide takes the page full-bleed so the rail can sit on the
   left EDGE (Kaʻo, 2026-08-25: "make sure the left nav stays anchored to the
   left"). The article must not follow it out there: .wt-article already caps
   itself at 1200px and centres, and .mag-main at 1200px, so both are handled
   the moment they are inside a block that lets them be. .am-main brings its
   own 32px start padding from v17.css, which is the gutter between the rail
   and the words; mag.css's own 22px side padding would double it, so the
   magazine gives its start padding up to .am-main and keeps the end one. */
.kcnews-main { min-width: 0; }
/* flow-root CONTAINS THE LOCKUP'S NEGATIVE MARGIN. .am-lockup carries
   margin-top:-10px, and .mag-main has no top padding of its own, so without a
   flow root that margin collapses out through the wrapper and drags the whole
   magazine up with the heading. Measured 2026-08-25: .mag-main lands at y=82,
   the top of .am-main's content box, which is where it belongs.

   IT DOES NOT make the lockup land on the same pixel as /games/, and it was
   not meant to. Games renders its h1 inside .am-hdrow, a flex row shared with
   its "+ Create a Game" button, and that row absorbs part of the -10px; its
   word sits at y=83.9 against 75.8 here. News has no second thing to put on
   that row, so it has no such row, and inventing one to chase eight pixels
   would be building structure to match a number. Posters differs again. */
.kcnews-main > .mag-main { padding-inline-start: 0; display: flow-root; }

/* The crown + word lockup, which is what every other section landing page
   opens with. v17.css already draws it (.am-h1 / .am-lockup / .am-crownglyph)
   and this must not touch its TOP margin: .am-lockup carries margin-top:-10px,
   which is what lands the word's cap height on the same line the rail's first
   module starts on. Setting margin-block here overrode that and pushed "News"
   to y=90 while /posters/ sat at y=85: five pixels, on the one alignment
   Kaʻo has asked to have fixed twice. Bottom margin only. */
.mag-lockup { margin-bottom: 18px; }

/* ---------- mobile ----------
   Under 900px v17.css turns .am-side into an off-canvas drawer that a control
   has to open. /shop/ ships a "Browse" button for exactly this; News gets the
   same one rather than a second idea of what that button is.

   NOT display:none on the rail, which is what the games detail pages do. That
   is right for a game (one board, no sections) and wrong for a magazine: the
   section list is the main reason to have this rail at all, and a phone reader
   is precisely the person who cannot see the header mega-menu's five columns. */
.kcnews-bar { display: none; }

@media (max-width: 900px) {
  .kcnews-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    position: sticky; inset-block-start: 0; z-index: 6;
    background: var(--wt-page-bg); border-block-end: 1px solid var(--wt-rule);
  }
  .kcnews-browse {
    display: inline-flex; align-items: center; gap: 8px;
    font: 700 15px var(--wt-font-ui); padding: 10px 18px; min-height: 44px;
    border-radius: 999px; cursor: pointer;
    background: none; color: var(--wt-link); border: 1px solid var(--wt-rule-strong);
  }
  .kcnews-browse:hover { background: var(--wt-chip-bg); }
  .kcnews-browse:focus-visible { outline: 3px solid var(--wt-accent); outline-offset: 2px; }
  .kcnews-browse svg { width: 18px; height: 18px; }
  /* The drawer sits over the page, so it needs to clear the phone's home
     indicator and give the last row somewhere to be. */
  .kcnews-app .am-side { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* Above 900px the rail is in flow and the button has nothing to open. Hiding
   it in CSS alone would leave a keyboard user a tab stop that does nothing, so
   assets/js/kc-news-rail.js also sets [hidden] on it at these widths. */
@media (min-width: 901px) {
  .kcnews-bar { display: none; }
}