/* ==========================================================================
   Pixel, N46m v2 (11-11-2026), rulings OS and OS3: the mobile Directory overlay as a 4 icon grid after the iPhone 11 home screen.
   FILE: TEMPLATE - N46m mobile directory v2, CSS for Nick (11-11-2026).css
   LOAD ORDER: last, after n46l.css (so after n46i-mobile-nav.css, which holds the MK5 v2 rules this file refines).
   Phone only: everything is inside @media (max-width:768px), the same query as the MK5 v2 overlay. Desktop and the markup are untouched.
   No new token, no new font, no hex colour, no priority override. Colours, icons and the current-rubrique frame are the MK5 v2 ones.
   Raw lengths, all from the brief: tile 60 px, corner radius 13 px, label 11 px, icon 30 px (half the tile). Row pitch 96 px is Pixel's call, see below.

   Grid: four equal columns inside a 26 px side margin (--space-11), no column gap, each tile centred in its column, so the space
   between tiles is 30.5 px at 414 wide, 24.5 px at 390 and 20.8 px at 375 (the iPhone itself spreads its icons the same way).
   Row pitch: 96 px = 4 px top inset + 60 px tile + 4 px + two label lines of 12 px + 4 px bottom inset. The brief said about 88 px, which only
   holds when every label is on one line; 6 to 9 of the 12 labels take two lines in FR, EN and RU, and at 88 px a two line label touches
   the tile of the next row. To get 88 px back, change grid-auto-rows below and accept that two line labels sit tight.
   Label: 11 px (below the site floor --size-floor of 14 px, as the brief asks), one line where it fits, two at most, then an ellipsis.
   Weight: the site loads its fonts in 400 and 700 only, so "medium" is not available without a new font file; the label keeps
   the token --weight-bold of MK5 v2. If Brain wants the regular weight, replace it by var(--weight-regular) in the one rule marked below.
   v2 (OS3): the 1 px light ring around each tile (box-shadow of MK5 v2) is removed; the tile keeps its colour and radius, and has no shadow.
   Touch target: the whole cell is the link, about 80 to 90 px wide by 86 px high; the tile alone is 60 px.
   ========================================================================== */
@media (max-width:768px){

  /* Side margin of the sheet: 26 px, the margin the iPhone home screen keeps. */
  body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__sheet{
    padding-left:var(--space-11);
    padding-right:var(--space-11);
  }

  /* Four columns, rows of 96 px. */
  body .gpcf-mobile-nav.dir-dark .cats{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:96px;
    gap:0;
    align-items:start;
  }

  /* The cell: tile on top, label under it, 4 px inset (the frame of the current rubrique hugs the cell). */
  body .gpcf-mobile-nav.dir-dark .cats .cat{
    min-height:0;
    gap:var(--space-1);
    padding:var(--space-1);
    border-radius:var(--radius-md);
  }

  /* The tile: 60 by 60 px, the iOS corner radius. Colour and ring are MK5 v2. */
  body .gpcf-mobile-nav.dir-dark .cats .cat .badge,
  body .gpcf-mobile-nav.dir-dark .cats .cat:hover .badge{
    width:60px;
    height:60px;
    border-radius:13px;
    box-shadow:none;
  }
  body .gpcf-mobile-nav.dir-dark .cats .cat .badge svg{
    width:30px;
    height:30px;
  }

  /* The label: 11 px, centred, two lines at most, then an ellipsis. */
  body .gpcf-mobile-nav.dir-dark .cats .cat b,
  body .gpcf-mobile-nav.dir-dark .cats .cat:hover b,
  body .gpcf-mobile-nav.dir-dark .cats .cat:visited b{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    max-width:100%;
    overflow:hidden;
    font-weight:var(--weight-bold);   /* weight knob: var(--weight-regular) for a lighter label */
    font-size:11px;
    line-height:1.1;
    text-wrap:auto;
  }
}