/* ------------------------------------------------------------------
   A place with its own places in it.

   A column of tabs beside a body of work on a desktop, and a drawer in from
   the left on a phone. The hub was the first of these; The Score is the
   second, and Seth's reason for asking for it is the whole justification
   for this file: *"tabs of its own that operate just like the Hub does
   across desktop and mobile, makes it easy for you to replicate as well."*

   ⚠️ SO THERE IS ONE SET OF RULES AND TWO NAMES FOR IT. `.deck` is the name
   going forward; `.hub` is listed alongside every selector because the hub's
   markup already says `hub` in a dozen admin templates and renaming it would
   be churn for nothing. They are aliases, not copies -- change a measurement
   here and both places change. That is the entire point: the shelf rail, the
   nav order and the fitter have all been copies that drifted, and a drawer
   is exactly the sort of thing that would drift next.

   The button is driven by core.js, which is already generic -- it reads the
   menu from `aria-controls` and the dimming layer from `data-scrim`, so a
   second one of these needed no script at all.

   What is NOT here: the hub's travel animation. Moving between hub pages is
   a real navigation between two documents; The Score's tabs are panels in
   one document and nothing travels, because a page load would stop the
   music. That animation stays in admin.css where it belongs.
   ------------------------------------------------------------------ */

.deck, .hub {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

/* ⚠️⚠️ `1fr` IS `minmax(auto, 1fr)`, AND auto MEANS "NEVER NARROWER THAN MY
   CONTENTS". One wide table in the right-hand column pushed the whole hub
   wider than the phone and took the heading, the tiles and the menu out with
   it -- the Overview, Accounts and Assets all ran off the screen for this one
   reason. minmax(0, …) lets the column be narrower than what is in it, which
   is the whole reason a `.scroller` inside it can work. */
@media (max-width: 880px) {
  .deck, .hub { grid-template-columns: minmax(0, 1fr); }
  .deckbody, .hubbody { min-width: 0; }
}

.decknav, .hubnav {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: sticky;
  top: 5rem;
}

/* The button and the dimmed page exist only where the menu is a drawer. */
.deckburger, .hubburger { display: none; }
.deckscrim, .hubscrim { display: none; }

.decknav a, .decknav button, .hubnav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  padding: .55rem .75rem;
  font-family: var(--font-hud);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-1);
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  transition: color var(--t-state) var(--ease-out),
              background var(--t-state) var(--ease-out),
              border-color var(--t-state) var(--ease-out);
}
.decknav a:hover, .decknav button:hover, .hubnav a:hover {
  color: var(--text-0);
  background: var(--accent-faint);
}
.decknav a[aria-current="page"],
.decknav button[aria-current="true"],
.hubnav a[aria-current="page"] {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-faint);
}
.decknav i, .hubnav a i { font-style: normal; font-size: .62rem; color: var(--text-2); }
.decknav hr, .hubnav hr { margin: .6rem 0; }

.deckhead, .hubhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.deckhead h1, .hubhead h1 {
  font-family: var(--font-paper);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--text-0);
}
.deckhead p, .hubhead p { font-size: .92rem; color: var(--text-1); margin-top: .3rem; }

/* ------------------------------------------------------ the menu, on a phone */
/*
   A drawer in from the left, and the places stay in a column.

   They used to wrap into rows of pills above the page: a third of the screen
   on every page, read across instead of down, and it grew every time a place
   was added. A drawer costs one button and gives the page back.
*/
@media (max-width: 880px) {
  /* Just the icon, at the top left of the page. It was a full-width bar
     reading MENU, because a grid item stretches to its track unless it is
     told not to -- `align-self` is the block axis and does nothing about it;
     `justify-self` is the one that matters here. */
  .deckburger, .hubburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    align-self: start;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    transition: border-color var(--t-state) var(--ease-out),
                background var(--t-state) var(--ease-out);
  }
  .deckburger:hover, .hubburger:hover { border-color: var(--accent); background: var(--accent-faint); }
  .deckburger b, .hubburger b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .deckburger__bars, .hubburger__bars { display: inline-flex; flex-direction: column; gap: 3px; }
  .deckburger__bars span, .hubburger__bars span {
    display: block;
    width: 1rem;
    height: 1px;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
  }

  /* Both of these begin under the bar rather than at the top of the window.
     The bar is how you leave, and a menu that covers the way out is a menu
     you can only escape from by using it. */
  .deckscrim, .hubscrim {
    display: block;
    position: fixed;
    top: var(--barh);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    background: rgba(2, 4, 6, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--t-swap) var(--ease-out),
      visibility 0s linear var(--t-swap);
  }
  .deckscrim.is-open, .hubscrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

  .decknav, .hubnav {
    position: fixed;
    top: var(--barh);
    left: 0;
    bottom: 0;
    z-index: 61;
    border-top: 1px solid var(--line);
    width: min(17rem, 82vw);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: .15rem;
    padding: 1.1rem .7rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, rgba(7, 12, 18, .99), rgba(3, 6, 9, .99));
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 44px rgba(0, 0, 0, .6);
    transform: translateX(-100%);
    transition: transform var(--t-swap) var(--ease-out);
  }
  .decknav.is-open, .hubnav.is-open { transform: none; }

  /* Room enough for a thumb, now that there is room to give. */
  .decknav a, .decknav button, .hubnav a { padding: .8rem .85rem; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .decknav, .deckscrim, .hubnav, .hubscrim { transition: none; }
}