/* =====================================================================
   layout-side.css: the site's LAYOUT: what base.css and app.css draw as
   a bar across the top (.side-nav, the one column every page shares)
   becomes a narrow column down the left-hand side of every page (the
   homepage, sign-in, legal and Journal pages, and the app), so the page
   beside it (and the board on the game review screen)
   gets the window's full height.

   Loaded LAST by every page, and always on. (The rules start with ":root"
   only so they outweigh the same rules in the files loaded before it.)
   It works in light and dark, because it only moves things: the colors
   and the obi strip under the bar come from style-montsuki.css, and are
   simply turned to run down the column's right edge instead. On phones
   the top bar stays where it is: a side column would leave too little
   room for the page.
   ===================================================================== */
@media (min-width:761px){
  :root:root{--rail:184px;}   /* the column's width */
  /* By day the column is a shade DARKER than the page, not lighter. A
     tall light strip down the side glares; this reads as a quiet frame and
     keeps the black-ink name easy to read. (At night the bar is already
     a shade off the page.) Mixed from the page color, so it follows any
     change to it. */
  :root:root:not([data-theme="dark"]){
    --bar:color-mix(in srgb, var(--page) 91%, #000);
  }
  :root body{padding-left:var(--rail);}

  /* The bar (.side-nav, base.css) becomes a fixed column on the left: the
     logo on top, the links stacked under it, and at the bottom the logo
     mark (signed out) or Upload game and your initial and name. */
  :root .side-nav{
    position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:20;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:40px;
    min-height:0;padding:30px 24px 28px;
  }
  :root .side-nav .nav-links{flex-direction:column;align-items:flex-start;gap:14px;}
  :root .side-nav .nav-end{
    margin-left:0;margin-top:auto;width:100%;
    flex-direction:column;align-items:flex-start;gap:18px;
  }

  /* Your name's small menu (Profile, Plans, …) opens to the right of the
     button instead of below it, which would be off the bottom of the window. */
  :root .profile-menu{top:auto;bottom:0;right:auto;left:calc(100% + 12px);}

  /* The obi strip under the bar runs down the column's right edge: the
     same strip, turned a quarter turn. */
  :root .side-nav::after{
    left:100%;right:auto;top:0;bottom:auto;width:100vh;
    transform-origin:top left;transform:rotate(90deg);
  }
}