/* ============================================================
   GP Team Hub - shell.css

   The frame every page sits inside: the rail down the left, the bar
   across the top, the crumbs, the search, the stuck row and the
   account panel. base.css holds the tokens these rules read and the
   page furniture inside the frame.

   Loaded by the css/base.css set in includes/manifest.php.

   Doc: docs/notes/new/css/shell.css.md
   ============================================================ */

/* ---------------- Sidebar ---------------- */
.sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--shell-bg);
  border-right:1px solid var(--shell-line);
  display:flex;
  flex-direction:column;
  z-index:60;
  transform:translateX(-100%);
  transition:transform .2s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* Scrolls, never shows a bar: a track down the edge of the chrome
     reads as a seam in the layout. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sidebar::-webkit-scrollbar{display:none;width:0;height:0;}
.sidebar.open{transform:translateX(0);box-shadow:var(--shadow-drawer);}

.side-brand{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;}
/* The trophy ends the title line. */
.side-trophy{
  margin-left:auto;
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-faint);
  font-size:.86rem;
  flex-shrink:0;
}
.side-trophy:hover{background:var(--shell-raised);color:var(--shell-ink);text-decoration:none;}
.side-logo svg{width:28px;height:28px;}
.side-title{font-weight:700;font-size:.98rem;letter-spacing:.2px;color:var(--shell-ink);white-space:nowrap;}

.side-nav{display:flex;flex-direction:column;gap:1px;padding:4px 8px;}

/* Grouping the nav by moment of need is the point of the whole
   ordering, so the group labels have to be legible. */
.side-group{
  font-size:.66rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--shell-ink-faint);
  padding:14px 11px 5px;
}
.side-group:first-child{padding-top:4px;}
.side-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-faint);
  font-size:.92rem;
  font-weight:500;
  transition:background .12s,color .12s;
}
.side-item:hover{background:var(--shell-raised);color:var(--shell-ink);text-decoration:none;}

/* The active item is filled, so the current page is readable at a
   glance from across a phone screen. */
.side-item.active{background:var(--accent-strong);color:var(--ink-inverse);font-weight:600;}
.side-item.active:hover{background:var(--accent-hover);color:var(--ink-inverse);}
.side-item.active .side-ic{color:var(--ink-inverse);}
.side-ic{width:18px;height:18px;flex-shrink:0;}

.side-foot{
  margin-top:auto;
  padding:14px;
  color:var(--shell-ink-faint);
  font-size:.73rem;
  line-height:1.5;
  border-top:1px solid var(--shell-line);
}

.backdrop{position:fixed;inset:0;background:var(--scrim);z-index:55;}

/* ---------------- Top bar ---------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:8px;
  height:var(--topbar-h);
  padding:0 10px;
  background:var(--shell-veil);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--shell-line);
}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-soft);
  flex-shrink:0;
}
.icon-btn:hover{background:var(--shell-raised);color:var(--shell-ink);}
.icon-btn svg{width:21px;height:21px;}

/* ---------------- Breadcrumbs ----------------
   The slot under the top bar says where you are, which is what it was
   always for. Switching sections is the chip row inside the page, so
   this carries no navigation of its own beyond the step back to the
   whole page. */
.crumbs{
  position:sticky;
  top:var(--topbar-h);
  z-index:45;
  display:flex;
  gap:8px;
  align-items:center;
  min-height:38px;
  padding:0 16px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  background:var(--shell-veil);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--shell-line);
  font-size:.82rem;
}
.crumbs::-webkit-scrollbar{display:none;}
.crumb{
  flex:0 0 auto;
  color:var(--shell-ink-faint);
  white-space:nowrap;
}
a.crumb:hover{color:var(--shell-ink);text-decoration:none;}
.crumb-now{color:var(--shell-ink);font-weight:600;}
.crumb-sep{
  flex:0 0 auto;
  color:var(--shell-ink-faint);
  font-size:.68rem;
  opacity:.7;
}

@media (min-width:1080px){
  .crumbs{padding:0 22px;}
}

/* ---- Today's chips, in the sticky slot ---- Same row, carrying chips
   instead of a trail. The chips wear the shell palette, because the
   slot sits on the dark bar's surface on every theme. */
.crumbchips{gap:6px;min-height:42px;}
.crumbchips a{
  flex:0 0 auto;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--shell-line);
  color:var(--shell-ink-soft);
  font-size:.8rem;
  font-weight:600;
  white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s;
}
.crumbchips a:hover{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
  text-decoration:none;
}
.crumbchips a.accent{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.crumbchips a.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

/* ---------------- Search ---------------- Search is the fastest
   route to any fact on this site, so it takes the whole middle of
   the bar. */
.topbar-search{position:relative;flex:1;min-width:0;}
/* Where the search is not offered, its width still belongs to the bar,
   so the controls on the right stay where they are on every page. */
.topbar-gap{flex:1;min-width:0;}
.search-ic{
  position:absolute;
  left:10px;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  color:var(--shell-ink-faint);
  pointer-events:none;
}
#searchInput{
  width:100%;
  background:var(--shell-raised);
  border:1px solid var(--shell-line);
  border-radius:var(--radius);
  color:var(--shell-ink);
  padding:8px 12px 8px 33px;
  font-size:.91rem;
  outline:none;
}
#searchInput::placeholder{color:var(--shell-ink-faint);}
#searchInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

.search-results{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  max-height:min(64vh,440px);
  overflow-y:auto;
  box-shadow:var(--shadow-overlay);
}
.sr-group{
  padding:9px 12px 3px;
  font-size:.67rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--ink-faint);
}
.sr-item{display:block;padding:9px 12px;color:var(--ink);font-size:.9rem;}
.sr-item .sr-d{
  color:var(--ink-faint);
  font-size:.78rem;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sr-item:hover,.sr-item.sel{background:var(--surface-hover);text-decoration:none;}
.sr-empty{padding:14px 12px;color:var(--ink-faint);font-size:.88rem;}

/* ---------------- Theme toggle ---------------- */
/* ---------------- Stuck ----------------
   The job holds more facets than working memory can carry, and when it
   overflows the result is freeze. Freezing is not solved by better
   organized information, because the effort of going to look is the
   thing that has run out. So this is one tap from every screen, it
   never asks the reader to categorize their problem before helping,
   and it always ends in a phone number or two clicks. */
.stuck-btn{
  display:flex;align-items:center;gap:7px;
  flex-shrink:0;
  padding:7px 12px;
  border-radius:var(--radius);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.88rem;
  font-weight:700;
}
.stuck-btn:hover{background:var(--accent-hover);}
.stuck-btn i{font-size:.9rem;}

.stuck-sheet{
  position:fixed;inset:0;
  z-index:80;
  background:var(--scrim);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* An author display rule beats the browser's [hidden]{display:none},
   so without this the panel renders open and nothing can shut it. Any
   element that is both hidden by attribute and given a display value
   needs its own [hidden] rule. */
.stuck-sheet[hidden]{display:none;}

body.stuck-open{overflow:hidden;}

.stuck-panel{
  width:100%;
  max-width:620px;
  margin-top:6vh;
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:15px;
}
.stuck-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.stuck-title{font-size:1.12rem;font-weight:700;flex:1;}

.stuck-search{position:relative;}
.stuck-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:.92rem;pointer-events:none;
}
#stuckInput{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--ink);
  padding:12px 13px 12px 37px;
  font-size:1rem;
  outline:none;
}
#stuckInput::placeholder{color:var(--ink-faint);}
#stuckInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* Offered before any typing, because picking from six is cheaper than
   composing a search when your head is already full. */
.stuck-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.stuck-quick[hidden]{display:none;}
.stuck-chip{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  padding:7px 13px;
  font-size:.83rem;
  font-weight:600;
  color:var(--ink);
  background:var(--surface-raised);
}
.stuck-chip:hover{border-color:var(--line-strong);background:var(--surface-hover);}

.stuck-list{display:flex;flex-direction:column;gap:7px;margin-top:12px;}

/* The floor of the panel. When nothing fits or the choice itself is the
   blocker, doors are the answer, because they need no decision and they
   are the activity that makes every other one possible. */
.stuck-floor{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.stuck-floor-label{
  font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink-faint);
}
.stuck-floor-text{color:var(--ink-soft);font-size:.88rem;line-height:1.55;margin-top:5px;}
.stuck-floor-go{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:10px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.92rem;
  padding:11px 15px;
  border-radius:var(--radius-sm);
}
.stuck-floor-go:hover{background:var(--accent-hover);text-decoration:none;}

@media (max-width:520px){
  .stuck-btn-text{display:none;}
  .stuck-btn{padding:7px 10px;}
  .stuck-panel{margin-top:0;}
}

/* ---------------- Account panel ---------------- */
.auth-area{position:relative;flex-shrink:0;}
.auth-btn{
  display:flex;align-items:center;gap:7px;
  padding:7px 10px;
  border-radius:var(--radius);
  border:1px solid var(--shell-line);
  color:var(--shell-ink);
  font-size:.89rem;
  max-width:190px;
}
.auth-btn:hover{background:var(--shell-raised);}
.auth-btn .side-ic{color:var(--shell-ink-faint);}
.auth-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chev{width:13px;height:13px;color:var(--shell-ink-faint);flex-shrink:0;}

.auth-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(280px,calc(100vw - 24px));
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:9px;
  box-shadow:var(--shadow-overlay);
  z-index:70;
}
.pop-link{
  display:block;
  width:100%;
  text-align:left;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:.9rem;
}
.pop-link:hover{background:var(--surface-hover);text-decoration:none;}
.pop-danger{color:var(--danger);}
.pop-form{display:flex;flex-direction:column;gap:5px;padding:4px 4px 8px;}
.pop-label{font-size:.73rem;color:var(--ink-faint);margin-top:4px;}
.pop-input{
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:8px 10px;
  font-size:.91rem;
  outline:none;
}
.pop-input:focus{border-color:var(--accent);}
.pop-foot{
  padding:8px 4px 2px;
  color:var(--ink-faint);
  font-size:.77rem;
  text-align:center;
  border-top:1px solid var(--line);
  margin-top:4px;
  line-height:1.7;
}


/* ---------------- Tablet ---------------- */
@media (min-width:640px){
  .topbar{padding:0 16px;gap:10px;}
  .topbar-search{max-width:460px;margin-right:auto;}
}

/* ---------------- Desktop ---------------- */
@media (min-width:900px){
  .sidebar{transform:none;box-shadow:none;}
  .content{margin-left:var(--sidebar-w);}
  .burger{display:none;}
  .backdrop{display:none !important;}
  .topbar{padding:0 22px;}
  .topbar-search{max-width:520px;}
}

/* ---------------- Small phones ---------------- */
@media (max-width:400px){
  .auth-name{display:none;}
  .auth-btn{padding:7px;}
  .chev{display:none;}
}

/* ---------------- The rail, collapsed ---------------- The names come
   off the rows and the rail keeps only the marks, which is roughly a
   third of the width handed back to the page. Two things deliberately
   do not collapse with it. The site's own name stays readable, because
   a mark alone in the corner of a screen says which product this is to
   nobody who has not already learnt it, so the brand lifts into the top
   band at its own width and reads as the left end of that bar. And the
   group headings stay as the spacing they were creating: a hairline
   where the words were, so the rail still reads as three parts of the
   job.

   Only above 900px, because below it the rail is a drawer that is
   either open at full width or not there at all. */
/* The switch hangs off the bottom edge of the brand row. Expanded,
   the first group heading is three short words at the left of its
   line, so the switch takes the empty right-hand end of that same
   line and the rail loses no height to it. Anchored to a zero-height
   box, so it still lands there if the brand row above it ever changes
   height. */
.side-rail{position:relative;height:0;}
.side-rail-btn{
  position:absolute;
  top:2px;right:6px;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border-radius:var(--radius-sm);
  border:0;
  background:transparent;
  color:var(--shell-ink-faint);
  font-size:.72rem;
  cursor:pointer;
}
.side-rail-btn:hover{background:var(--shell-raised);color:var(--shell-ink);}
.side-rail-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.rail-out{display:none;}
:root[data-rail="on"] .rail-in{display:none;}
:root[data-rail="on"] .rail-out{display:inline-flex;}

@media (max-width:899px){
  .side-rail{display:none;}
}

@media (min-width:900px){
  /* One token, and the rail, the content margin and the breadcrumb row
     that sits inside it all move together. */
  :root[data-rail="on"]{--sidebar-w:var(--rail-icons);}

  /* The brand keeps its own width and pins into the top band, so the
     name of the site never has to fit inside an icon. Same height and
     same veil as the bar beside it, which is what makes the two read
     as one strip. */
  :root[data-rail="on"] .sidebar{padding-top:var(--topbar-h);}
  :root[data-rail="on"] .side-brand{
    position:fixed;top:0;left:0;
    width:var(--rail-full);height:var(--topbar-h);
    padding:0 8px;
    background:var(--shell-veil);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--shell-line);
    z-index:61;
  }
  /* The bar starts where the brand ends. It is already inset by the
     collapsed rail, so this is the difference between the two. */
  :root[data-rail="on"] .topbar{
    padding-left:calc(var(--rail-full) - var(--rail-icons) + 14px);
  }

  /* The heading becomes the line it was drawing. Neutral, and the same
     hairline the foot of the rail already uses. */
  :root[data-rail="on"] .side-group{
    height:0;
    padding:0;
    margin:10px 14px;
    font-size:0;
    letter-spacing:0;
    border-top:1px solid var(--shell-line);
  }
  /* Nothing above the first one to separate it from. */
  :root[data-rail="on"] .side-group:first-child{margin-top:4px;border-top:0;}

  /* Collapsed there is no heading text to share a line with, and the
     marks below need the clearance, so here the switch does take its
     own height. Still hard against the rail's right edge, which is the
     edge the page was pushed off and the one a hand comes back to. */
  :root[data-rail="on"] .side-rail{height:30px;}
  :root[data-rail="on"] .side-nav{padding:4px 8px;}
  :root[data-rail="on"] .side-item{justify-content:center;gap:0;padding:11px 0;}
  :root[data-rail="on"] .side-item span,
  :root[data-rail="on"] .side-lock,
  :root[data-rail="on"] .side-foot{display:none;}
  /* No room for a caret beside a mark, so the pair is picked from the
     page's own tab row while the rail is collapsed. */
  :root[data-rail="on"] .side-swap .side-item{padding-right:0;}
  :root[data-rail="on"] .side-swap-btn,
  :root[data-rail="on"] .side-swap-menu{display:none;}
}

/* ---- A rail row that carries a pair of pages ----
   The row is an ordinary rail item. The caret sits inside its right-hand
   end and opens the other name in the pair. */
.side-swap{position:relative;}
.side-swap .side-item{padding-right:34px;}
/* A row whose set came to one page has no caret to leave room for, so
   its label gets the width back. Lead lists are granted one account at
   a time, which is what makes a set shrink. */
.side-swap-one .side-item{padding-right:11px;}
.side-swap-btn{
  position:absolute;
  top:50%;right:4px;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;
  border-radius:var(--radius-sm);
  color:var(--shell-ink);
  font-size:.66rem;
  background:transparent;
  border:0;
}
.side-swap-btn:hover{background:var(--shell-high);}
.side-swap-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.side-swap-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;right:0;
  z-index:70;
  padding:5px;
  background:var(--shell-raised);
  border:1px solid var(--shell-line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-overlay);
}
.side-swap-menu[hidden]{display:none;}
.side-swap-pick{
  display:block;width:100%;
  text-align:left;
  padding:8px 10px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--shell-ink-soft);
  font-size:.9rem;
  font-weight:500;
}
.side-swap-pick:hover{background:var(--shell-high);color:var(--shell-ink);}
.side-swap-pick[hidden]{display:none;}

/* A nav entry that leads to the sign-in wall says so. */
.side-item{position:relative;}
.side-lock{
  margin-left:auto;
  font-size:.62rem;
  color:var(--shell-ink-faint);
  flex-shrink:0;
}
.side-locked{color:var(--shell-ink-faint);}
.side-locked:hover .side-lock{color:var(--shell-ink-soft);}