/* v0.9 Work rework (W13 — skeleton ESQUELETO_REWORK_WORK rev 46, §C "Space"; meeting with the product lead 06-oct).
   On a computer with a mouse the side menu is a 72px rail — shop logo, section icons, clock, profile — that opens
   to 236px OVER the page on hover or keyboard focus, so the board gets the width back. A pin keeps it open; then the
   page makes room for it (body.rail-pinned, remembered on this device by sidebar-rail.js). Phones, tablets and
   touch-first laptops keep today's menu (style.css). Every rule lives inside this one media query.
   Tests: test/sidebar-rail.test.mjs, test/sidebar-rail-browser.spec.mjs. */
@media (min-width:901px) and (hover:hover) and (pointer:fine) {
  .shell { grid-template-columns:72px minmax(0,1fr); }
  .sidebar { width:72px; z-index:60; overflow:hidden; white-space:nowrap;
    transition:width .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease; }
  .sidebar:hover, .sidebar:focus-within { width:236px; box-shadow:14px 0 34px -14px rgba(23,26,31,.55); }
  .sidebar .nav { overflow-x:hidden; }

  /* pinned open: the page makes room (no overlay, no shadow) */
  body.rail-pinned .shell { grid-template-columns:236px minmax(0,1fr); }
  body.rail-pinned .sidebar { width:236px; box-shadow:none; }

  /* the pin: top-right corner of the open menu */
  .sidebar .rail-pin { display:grid; place-items:center; position:absolute; top:12px; right:10px; z-index:2; width:28px; height:28px;
    border-radius:8px; border:1px solid rgba(255,255,255,.14); background:rgba(25,29,35,.55); color:rgba(255,255,255,.7); cursor:pointer;
    opacity:0; pointer-events:none; transition:opacity .16s ease, background .16s ease; }
  .sidebar:hover .rail-pin, .sidebar:focus-within .rail-pin, body.rail-pinned .sidebar .rail-pin { opacity:1; pointer-events:auto; }
  .sidebar .rail-pin:hover { background:rgba(25,29,35,.85); color:#fff; }
  body.rail-pinned .sidebar .rail-pin { background:var(--amber); border-color:var(--amber); color:var(--amber-ink); }
  .sidebar .rail-pin svg { width:15px; height:15px; }

  /* open: the shop name and the clock line may take two lines — text is never cut */
  .sidebar:hover .brand .name, .sidebar:focus-within .brand .name, body.rail-pinned .sidebar .brand .name,
  .sidebar:hover .clock-widget .cw-on, .sidebar:focus-within .clock-widget .cw-on, body.rail-pinned .sidebar .clock-widget .cw-on { white-space:normal; }
  .sidebar:hover .brand .name, .sidebar:focus-within .brand .name, body.rail-pinned .sidebar .brand .name { padding-right:30px; }

  /* closed: everything is centred on the 72px rail and stays inside its own box; only the words go */
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .brand { padding:16px 0 14px; display:flex; justify-content:center; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .brand .logo { width:48px; padding:3px; justify-content:center; gap:0; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .brand .name { position:absolute; opacity:0; pointer-events:none; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .nav { padding-left:10px; padding-right:10px; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .nav .group-label { opacity:0; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .nav button { justify-content:center; gap:0; padding-left:0; padding-right:0; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .nav button > span:not(.count) { position:absolute; opacity:0; pointer-events:none; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .nav button .count { position:absolute; top:4px; left:calc(50% + 4px); margin:0;
    min-width:16px; height:16px; padding:0 4px; font-size:10px; line-height:16px; }
  .sidebar .nav button svg { width:21px; height:21px; flex:none; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .side-foot { display:none !important; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget { padding:8px 10px; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget .cw-card { padding:8px 0; display:flex; justify-content:center; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget .cw-top { flex-direction:column; align-items:center; gap:3px; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget .cw-time { font-size:15px; margin:0; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget .cw-state,
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget .cw-on,
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget .cw-actions { display:none; }
  /* off the clock: the "Clock in" button shrinks to its clock icon (the words stay for screen readers) */
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget > .btn.primary:only-child { font-size:0; gap:0; padding:0; min-height:44px; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .clock-widget > .btn.primary:only-child svg { width:20px; height:20px; flex:none; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .who { padding-left:0; padding-right:0; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .who .who-btn { justify-content:center; gap:0; padding-left:0; padding-right:0; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .who .meta,
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .who .who-chev { position:absolute; opacity:0; pointer-events:none; }
  /* words fade in when the menu opens, and go at once when it closes (never drawn over the icons) */
  .sidebar .brand .name, .sidebar .nav .group-label, .sidebar .nav button > span:not(.count),
  .sidebar .who .meta, .sidebar .who .who-chev { transition:opacity .16s ease .06s; }
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .brand .name,
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .nav .group-label,
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .nav button > span:not(.count),
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .who .meta,
  body:not(.rail-pinned) .sidebar:not(:hover):not(:focus-within) .who .who-chev { transition:none; }
}
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce) {
  .sidebar, .sidebar * { transition:none !important; }
}