/* The frame: top bar, sidebar, main column. */

.topbar { position: sticky; top: 0; z-index: 40; display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    height: 60px; background: var(--surface); border-bottom: 1px solid var(--line);
    transition: grid-template-columns .24s cubic-bezier(.4, 0, .2, 1); }
  /* Which organisation you are in. Sits with the page's own controls rather than under the
     avatar, because switching is navigation, not an account setting. The name truncates: an
     organisation called after a client can be long, and the bar cannot grow. */
  .org-switch { display: flex; align-items: center; gap: 7px; max-width: 15rem;
    padding: 6px 9px 6px 8px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--raised); color: var(--ink); font: inherit; font-size: 13.5px;
    cursor: pointer; }
  .org-switch:hover { background: var(--surface); }
  .org-switch svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .org-switch .chev { width: 13px; height: 13px; color: var(--muted); }
  .org-switch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 760px) { .org-switch span, .org-switch .chev { display: none; }
    .org-switch { max-width: none; padding: 6px 8px; } }

  /* the brand block is the top of the rail: it widens with it and the two read as one panel */
  body.nav-open:not(.no-rail) .topbar { grid-template-columns: var(--rail-open) minmax(0, 1fr); }
  .topbar-brand { display: flex; align-items: center; gap: 10px; padding: 0 0 0 17px;
                  border-right: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
  /* A link now, so it goes home — but it is a wordmark, not a piece of prose, and the browser's
     underline reads as a mistake under a logo. */
  .topbar-brand .mark { display: flex; align-items: center; gap: 10px; text-decoration: none;
                        color: inherit;
                        font-family: var(--display); font-weight: 800; font-size: 17px; }
  .topbar-brand .mark:hover .wordmark b { color: var(--accent); }
  /* the wordmark carries its line, the same pairing as the site's masthead */
  .topbar-brand .wordmark {
    display: grid; gap: 1px; line-height: 1.05;
    opacity: 0; transform: translateX(-6px);
    transition: opacity .18s ease, transform .24s cubic-bezier(.4, 0, .2, 1);
  }
  .topbar-brand .wordmark b { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
  .topbar-brand .wordmark em {
    font-style: normal; font-family: var(--mono); font-size: 9.5px;
    letter-spacing: .06em; color: var(--muted); font-weight: 400;
  }
  body.nav-open .topbar-brand .wordmark { opacity: 1; transform: none; }
  /* starts where the content starts, so the title sits exactly above the cards */
  .topbar-main { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0 26px; min-width: 0; }
  .topbar-page { display: grid; gap: 1px; min-width: 0; }
  .topbar-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: calc(100vh - 60px); }
  /* signed out, or part-way through setup: there is nothing to navigate, so the frame goes too */
  /* the rail is fixed, so it occupies no grid cell — the content has to be placed by hand or it
     falls into the rail's column and renders 62px wide */
  .shell > .content { grid-column: 2; }
  .shell.solo { grid-template-columns: minmax(0, 1fr); }
  .shell.solo > .content { grid-column: 1; }
  .shell.solo .side { display: none; }

  /* ---------- the rail ----------
   *
   * Icons at rest, labels on approach. The column in the grid stays at rail width and the panel
   * floats over the content, so hovering the nav never reflows the page behind it. Collapsing is
   * delayed: a cursor crossing the rail on its way somewhere else shouldn't trigger anything.
   */
  :root { --rail: 62px; --rail-open: 236px; }

  /* One class drives the whole thing — the rail, the brand block above it, and the labels — so
     everything starts and finishes together. The pause before collapsing is a timer in JS, not a
     transition-delay, which is what stopped the text vanishing half a second before the panel. */
  .side {
    position: fixed; top: 60px; bottom: 0; left: 0; width: var(--rail); z-index: 35;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border-right: 1px solid var(--line);
    transition: width .24s cubic-bezier(.4, 0, .2, 1), box-shadow .24s ease;
  }
  body.nav-open .side {
    width: var(--rail-open); box-shadow: 14px 0 34px rgba(0, 0, 0, .34);
  }

  /* ---------- pinned ----------
   *
   * Hovering floats the panel over the page, which is right for a glance and wrong for staying:
   * a permanent overlay would sit on top of the cards it is meant to sit beside. So pinning gives
   * the rail a real column — the grid widens, the content moves over — and drops the shadow,
   * because a panel in the layout isn't hovering above anything.
   */
  /* Signed out, or part-way through setup, there is no rail — so neither of its states may lay
     out the page. Without this the pinned column survives into the sign-in screen and squeezes
     the form into a 236px strip beside a rail that isn't rendered. */
  body.nav-pinned:not(.no-rail) .shell,
  body.nav-pinned:not(.no-rail) .topbar { grid-template-columns: var(--rail-open) minmax(0, 1fr); }
  body.nav-pinned:not(.no-rail) .side { width: var(--rail-open); box-shadow: none; }

  body.no-rail .topbar { grid-template-columns: auto minmax(0, 1fr); }
  body.no-rail .topbar-brand { border-right: 0; }

  /* Last thing in the rail, under the account block: it is a control for the panel itself,
     not another place to go, so it sits apart from the things that navigate. */
  /* flush with the bottom edge: the rail keeps 18px of padding from an older layout and the
     tools group another 12px, and together they left the pin floating above the floor. */
  .side { padding-bottom: 0; }
  /* One rule closes the rail, above Sign out — the three below it are one group and don't need
     dividing from each other. */
  .side-tools .pin-side { padding: 9px 10px; border-radius: 7px; }
  .side-tools .side-foot { padding: 10px 10px 14px; margin-top: 0; }
  /* the arrow says what the click does: push the content over, or give the space back */
  .pin-side .pin-in { display: none; }
  body.nav-pinned .pin-side .pin-out { display: none; }
  body.nav-pinned .pin-side .pin-in { display: inline; }
  body.nav-pinned .pin-side { color: var(--ink); }
  body.nav-pinned .pin-side svg { color: var(--accent); opacity: 1; }
  .side-nav { display: grid; gap: 2px; padding: 10px 11px; overflow-y: auto; }

  /* ---------- the collapsed rail ----------
   *
   * Three paddings stack before an icon is reached: the rail's 14, the nav's 11 and the button's
   * 10. In a 62px rail that puts an 18px icon at 35, with 9px to its right — jammed against the
   * edge and reading as though it had been cut off. Centred would be 22.
   *
   * The rail gives back its own 14 while collapsed, which leaves 11 + 10 = 21. That is one pixel
   * off centre and needs nothing else: the buttons keep flex-start, so every icon lands in the
   * same place, and the labels keep being laid out and faded exactly as before. Centring the
   * button's content instead would centre icon + gap + label — a block wider than the rail — and
   * put each icon at a different negative offset depending on how long its label is.
   */
  body:not(.nav-open):not(.nav-pinned) .side { padding-left: 0; padding-right: 0; }
  .side-tools { display: grid; gap: 2px; padding: 8px 11px 0; margin-top: auto;
                border-top: 1px solid var(--line-soft); }

  .side-nav button, .side-tools button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 7px; background: transparent;
    color: var(--muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
    white-space: nowrap; overflow: hidden;
  }
  .side-nav button:hover, .side-tools button:hover { color: var(--ink); background: var(--raised); }
  .side-nav button[aria-current="true"] { color: var(--ink); background: var(--raised); font-weight: 600; }
  .side-nav svg, .side-tools svg {
    width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9;
  }
  .side-nav button[aria-current="true"] svg { color: var(--accent); opacity: 1; }

  /* The label is what collapses; the icon never moves, so nothing jumps. It rides a few pixels
     in and out with the panel rather than blinking. */
  .side-nav button > span, .side-tools button > span, .side-group span, .side-foot {
    opacity: 0; transform: translateX(-6px);
    transition: opacity .18s ease, transform .24s cubic-bezier(.4, 0, .2, 1);
  }
  body.nav-open .side-nav button > span, body.nav-open .side-tools button > span,
  body.nav-open .side-group span, body.nav-open .side-foot {
    opacity: 1; transform: none;
  }

  /* collapsed, a section heading is a rule; open, it is its name */
  .side-group { height: 26px; display: flex; align-items: flex-end; padding: 0 10px 5px; position: relative; }
  .side-group::before {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 11px;
    height: 1px; background: var(--line); opacity: 1; transition: opacity .18s ease;
  }
  body.nav-open .side-group::before { opacity: 0; }

  .side-foot { display: grid; gap: 2px; padding: 12px 10px 2px; }
  .side-foot b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-nav button { position: relative; transition: background .12s ease, color .12s ease; }
  .side-nav button[aria-current="true"] { color: var(--ink); background: var(--raised); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-soft); }
  .side-nav button[aria-current="true"]::before {
    content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--accent);
  }
  .side-nav button[aria-current="true"] svg { color: var(--accent); opacity: 1; }
  .who { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-btn); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 13px; flex: none; }
  .who span { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header.topbar { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
  .mark { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 18px; }
  .mark svg { width: 24px; height: 24px; flex: none; color: var(--ink); }