/* Copyright (c) Pawan Nayar . LLOS.ai . 2026 - Original pedagogy and tool design by Pawan Nayar - all rights reserved. */
/* [2026-08-20] Standalone so ANY page can link it - shell.css is not loaded by every page (TextStock
   injects only header/footer chrome), and a shared pattern nobody can reach is not shared. The same
   block also sits in shell.css for pages already on that stylesheet. Link with:
     <link rel="stylesheet" href="../../assets/shell/pillrail.css">  */

/* ============================================================================================
   [2026-08-20] .pillrail — SHARED PATTERN, added for TextStock and meant for every page with chips.
   Pawan: "we need a better strategy for mobile so that these pills know how to spell differently and
   short in mobile and are never rows on rows but pill carousel" + "absolute yes ... one class, one
   behaviour, reused — so it gets solved once."

   PURELY ADDITIVE: no existing selector in this file is touched, so none of the pages already on
   shell.css can shift. A page opts in by adding the class; nothing is swept.

   THE RULE: below 640px a pill group becomes ONE horizontally scrolling row, never stacked rows.
   Rows on rows read as a form; one rail with a half-pill showing at the edge reads as a carousel and
   tells a thumb there is more.

   SHORT LABELS ARE AUTHORED, NEVER TRUNCATED. A pill may carry both spellings:
     <span class="pill"><b class="pl-long">Silhouette · chosen by meaning</b><b class="pl-short">Shape</b></span>
   Both live in the markup so the copy stays with the content and a screen reader gets whichever is
   rendered. Ellipsis truncation is banned here — it turns a label into a guess.

   ORDER IS EDITORIAL: at rest only two or three pills are visible, so the first two ARE the message.
   Put the pill that matters first and downloads last.
   ============================================================================================ */
.pillrail{display:flex;flex-wrap:wrap;gap:.5rem}
.pillrail .pl-short{display:none}
@media(max-width:640px){
  .pillrail{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    /* the fade at the right edge is the affordance - no arrows on mobile */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%);
    padding-right:34px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .pillrail::-webkit-scrollbar{display:none}
  .pillrail>*{flex:0 0 auto;scroll-snap-align:start}
  .pillrail .pl-long{display:none}
  .pillrail .pl-short{display:inline}
}
/* a rail of BUTTONS: the primary keeps its own full-width line, the quiet ones share the rail below
   it. Three equal full-width slabs make nothing look primary. */
@media(max-width:640px){
  .pillrail-cta{flex-wrap:nowrap}
  .pillrail-cta>.is-primary{display:none}
}