/* The signed-in shell: a top bar, a foldable sidebar, and the region pages fill.
   Loaded only by templates/shell.html, so the sign-in and sign-up pages carry
   none of it.

   Layout is one grid and nothing more clever. The sidebar is a column beside the
   content at desktop width and slides over it below --shell-break, which is the
   only place the two behave differently. */
:root {
  --nav-w: 15rem;
  --bar-h: 3.25rem;
}

/* The width the sidebar stops being a column and starts being a drawer is 52rem,
   written literally in the media query below and NOT as a custom property.
   A `var()` cannot be used in a media condition - it would silently never
   match - so a `--shell-break` here would look adjustable while doing nothing.
   Change the number in the one place it appears. */

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: var(--bar-h);
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.appbrand {
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  /* Pushes the account menu to the far end without a spacer element. */
  margin-right: auto;
}

/* Three bars, drawn rather than typed: a hamburger glyph in text is read aloud
   as its Unicode name. The button carries the accessible name instead. */
.navtoggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.navtoggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
}

.acct { position: relative; }

.avatarbtn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.acctdrop {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 10rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  /* Above the sticky bar's own stacking context. */
  z-index: 30;
}

.acctdrop a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  color: var(--fg);
  font-size: 0.9rem;
  text-decoration: none;
}

.acctdrop a:hover { background: var(--line); }

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  align-items: start;
}

.sidebar {
  position: sticky;
  /* Below the bar, not under it. */
  top: var(--bar-h);
  height: calc(100vh - var(--bar-h));
  overflow-y: auto;
  padding: 0.75rem 0.5rem 2rem;
  border-right: 1px solid var(--line);
}

/* minmax(0, 1fr) above and min-width here: without both, a wide child - a table
   of tokens, a <pre> of JSON - sets the column's floor and pushes the page
   sideways instead of scrolling inside its own box. */
.main { min-width: 0; padding: 1.5rem 1.25rem 4rem; }

/* .card is sized for a centred auth form. Inside the shell it is a panel in a
   column that already has its own width, so it stops being centred. */
.main .card { max-width: 44rem; margin: 0 0 1.25rem; }

.navsec { padding: 0.6rem 0.35rem 0.15rem; }

.navsec .h {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.navsec .h:hover { background: var(--line); }

.navsec-tw {
  width: 14px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  /* Larger than the heading it sits in: the glyph is the only thing showing
     whether a section is open, and at the heading's 0.7rem it reads as a
     speck. */
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s;
}

.navsec-tw:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Folded is a class on the section, so one toggle rotates the glyph and hides
   the body - no second piece of state to keep in step. */
.navsec.folded .navsec-tw { transform: rotate(-90deg); }
.navsec.folded .navsec-b { display: none; }

.navsec-b { padding: 0.15rem 0 0; }

.navitem {
  display: block;
  padding: 0.35rem 0.55rem 0.35rem 1.35rem;
  border-radius: 6px;
  color: var(--fg);
  font-size: 0.9rem;
  text-decoration: none;
}

.navitem:hover { background: var(--line); }

/* The page you are on. Marked with aria-current in the template as well, so it
   is announced and not only coloured. */
.navitem.here { background: var(--line); font-weight: 600; }

.scrim { display: none; }

@media (max-width: 52rem) {
  .navtoggle { display: flex; }

  /* One column: the sidebar leaves the flow and slides over the content. */
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    left: 0;
    top: var(--bar-h);
    z-index: 25;
    width: var(--nav-w);
    background: var(--bg);
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
  }

  .sidebar.open { transform: none; }

  .scrim {
    display: block;
    position: fixed;
    inset: var(--bar-h) 0 0 0;
    z-index: 24;
    background: rgb(0 0 0 / 35%);
  }

  /* After the rule above, not before it. `[hidden]` outranks the bare class on
     specificity so either order works today - but relying on that means the
     scrim reappears the moment somebody adds a second class to it. */
  .scrim[hidden] { display: none; }
}

/* Respect a reduced-motion preference: the slide is decoration, and the panel
   still arrives. */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* --- the tree: categories and what is filed under them --------------------- */

.navsec-add {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  /* Pushed to the far end of the heading. */
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.navsec-add:hover { background: var(--line); color: var(--fg); }

.navcat { margin: 0.1rem 0; }

.navcat-h {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.4rem 0.28rem 0.3rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.navcat-h:hover { background: var(--line); }

.navcat-tw {
  width: 14px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s;
}

.navcat-tw:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.navcat.folded .navcat-tw { transform: rotate(-90deg); }
.navcat.folded .navcat-b { display: none; }

/* The name takes the space; the count sits at the end and never wraps. */
.navcat-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navcat-nm.loose { color: var(--muted); font-style: italic; }

.navcat-n {
  flex: none;
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--line);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: center;
}

/* Ungrouped has no twisty of its own - it is not foldable, because it is not a
   category. The empty span keeps its name aligned with the others. */
.navcat-fixed .navcat-h { cursor: default; }
.navcat-fixed .navcat-h:hover { background: none; }
.navcat-fixed .navcat-tw { display: inline-block; }

/* Leaves sit one level in from their category's NAME, not from its row - the
   name already starts past the twisty, so matching the row's indent makes the
   two levels look like one list. */
.navcat-b .navleaf { padding-left: 2.4rem; }

.navcat-empty {
  margin: 0.1rem 0 0.4rem 2.4rem;
  color: var(--muted);
  font-size: 0.8rem;
}