/* The side rail, matching frontend/components/StudentNav.tsx.
 *
 * Idle 56px, expanded 240px. It OVERLAYS the page rather than pushing it —
 * that is what lets it expand on hover without reflowing a table underneath —
 * so the page keeps a permanent 56px inset and nothing moves when it opens.
 */
:root { --rail-w: 56px; --rail-full: 240px; }

.rail {
  position: fixed; left: 0; top: 0; z-index: 40;
  height: 100vh; width: var(--rail-w);
  display: flex; flex-direction: column; overflow: hidden;
  /* Solid rather than the app's translucent card. The rail overlays the page
     when it expands, and at 96% the blur buys nothing while text underneath
     can still ghost through it. */
  background: #fff;
  border-right: 1px solid var(--line);
  transition: width .2s ease-out;
}
/* focus-within, not just hover: tabbing into the rail has to open it too, or
   the labels are unreachable by keyboard. */
.rail:hover, .rail:focus-within, .rail.pinned { width: var(--rail-full); }

.rail-brand {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 12px; border-bottom: 1px solid rgba(236,230,222,.6);
  color: #1B1815; text-decoration: none;
}
.rail-logo { width: 32px; height: 32px; flex: 0 0 auto; display: block; color: currentColor; }
.rail-logo svg { width: 100%; height: 100%; }
.rail-word {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
  opacity: 0; transition: opacity .15s;
}
.rail-word span { color: #8a8177; }
.rail:hover .rail-word, .rail:focus-within .rail-word, .rail.pinned .rail-word { opacity: 1; }

/* Fixed-width inner columns so the labels do not reflow while the rail
   animates — the same trick the app's rail uses. */
.rail-nav { width: var(--rail-full); flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.rail-nav a {
  display: flex; align-items: center; gap: 8px;
  width: 40px; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; color: #6b6b6b; text-decoration: none; white-space: nowrap;
  transition: background .12s, color .12s, width .2s ease-out;
}
.rail-nav a svg { width: 17px; height: 17px; flex: 0 0 auto; }
.rail-nav a:hover { background: var(--gold-bg); color: #1B1815; }
/* The current page is the filled pill from the app, not an underline. */
.rail-nav a.on { background: #1B1815; color: #fff; font-weight: 550; }
.rail:hover .rail-nav a, .rail:focus-within .rail-nav a, .rail.pinned .rail-nav a { width: 100%; }
.rail-label { opacity: 0; transition: opacity .15s; }
.rail:hover .rail-label, .rail:focus-within .rail-label, .rail.pinned .rail-label { opacity: 1; }

.rail-foot { width: var(--rail-full); padding: 8px; border-top: 1px solid rgba(236,230,222,.6); position: relative; }
.rail-me {
  display: flex; align-items: center; gap: 8px; width: 40px; padding: 4px;
  background: none; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12px; color: #6b6b6b; white-space: nowrap;
  transition: width .2s ease-out, background .12s;
}
.rail-me:hover { background: var(--gold-bg); }
.rail:hover .rail-me, .rail:focus-within .rail-me, .rail.pinned .rail-me { width: 100%; padding: 4px 8px; }
.ava {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  background: var(--gold-bg); color: var(--gold-dark);
  border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
}

/* On <body>, positioned against the viewport: inside the rail it was clipped
   to a sliver by the rail's own overflow. */
.rail-pop {
  display: none; position: fixed; left: 10px; bottom: 56px; width: 216px; z-index: 45;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px -22px rgba(27,24,21,.5); padding: 6px; z-index: 2;
}
.rail-pop.open { display: block; }
.rail-pop-who { padding: 8px 10px 6px; font-size: 12px; color: #8a8177; word-break: break-all; border-bottom: 1px solid #F4F0EA; margin-bottom: 4px; }
.rail-pop a, .rail-pop button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 13px;
  color: #4a443d; text-decoration: none; cursor: pointer;
}
.rail-pop a:hover, .rail-pop button:hover { background: var(--gold-bg); color: var(--gold-dark); }

/* The page sits clear of the idle rail.
   The offset goes on the REGION, not on the content box. Padding the centred
   container instead pushed its contents right while its right edge stayed put,
   so the gutters came out uneven (108px one side, 128px the other) — the
   content has to be centred in what is left after the rail, not in the whole
   window and then shoved. */
#appView { padding-left: var(--rail-w); }
.railbar, .railscrim { display: none; }

/* A page title, so a screen opens with its name rather than straight into a
   toolbar. Also gives the top of the page the same rhythm on all three. */
.pagehead { margin: 2px 0 20px; }
.pagehead h1 { margin: 0; font-size: 22px; font-weight: 640; letter-spacing: -.02em; color: #1B1815; }
.pagehead p { margin: 4px 0 0; font-size: 13px; color: #8a8177; max-width: 70ch; line-height: 1.55; }

/* Wide tables scroll inside their card instead of being clipped by it. The
   card keeps overflow:hidden for its rounded corners, so the scrolling has to
   happen on a wrapper inside it. */
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scrollx > table { min-width: 100%; }

@media (max-width: 900px) {
  /* Off-canvas, with a top bar to bring it in — the rail is a pointer idea and
     there is no pointer here. */
  .rail { transform: translateX(-100%); width: var(--rail-full); transition: transform .2s ease-out; }
  .rail .rail-word, .rail .rail-label { opacity: 1; }
  .rail .rail-nav a, .rail .rail-me { width: 100%; }
  body.rail-open .rail { transform: none; }
  body.rail-open .railscrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(27,24,21,.35); }
  .railbar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff;
    position: sticky; top: 0; z-index: 20;
  }
  .railbar .rail-logo { width: 24px; height: 24px; color: var(--gold-dark); }
  .railbar b { font-size: 14px; }
  .railburger { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px; cursor: pointer; color: #4a443d; }
  .railburger svg { width: 18px; height: 18px; display: block; }
  #appView { padding-left: 0; }
  .pagehead { margin: 0 0 14px; }
  .pagehead h1 { font-size: 19px; }
}