/*
 * InnClocky — page frame: the navy rail, the canvas, the page header.
 *
 * A full-height rail on the left holds the whole map of the application in one
 * glance, split into what you do with your own time and what an administrator
 * does with everyone's. The rail is the only place the brand navy covers any
 * area; everything to the right of it is paper on canvas.
 *
 * Below 960px the rail unfolds into a bar across the top with the sections in a
 * horizontal strip. No JavaScript is involved in either state.
 */

.app-shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- The rail ------------------------------------------------------------- */

.app-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--navy);
  color: var(--on-navy);
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
  color: var(--on-navy);
  text-decoration: none;
}

.rail__brand:hover {
  color: var(--on-navy);
  text-decoration: none;
}

.brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--green-lift);
}

/* The mark and the name, side by side. The gap belongs here and never on
   .wordmark itself: in a flex container the bare run "Inn" is a flex item of
   its own, so a gap there opens a space inside the name. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.wordmark {
  font-size: var(--text-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}

.wordmark:hover {
  color: inherit;
  text-decoration: none;
}

/* Two words, one emphasis: the second half is the part that ticks. */
.wordmark b {
  font-weight: 800;
  color: var(--blue);
}

.app-rail .wordmark {
  color: var(--on-navy-soft);
}

.app-rail .wordmark b {
  color: var(--on-navy);
}

/* Blue disappears against the navy, so the rail focuses in green. */
.app-rail :focus-visible {
  outline-color: var(--green-lift);
}

/* --- Rail navigation ------------------------------------------------------ */

.app-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--s2) var(--s3) var(--s5);
}

.app-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail__group + .rail__group {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--on-navy-line);
}

.rail__group-label {
  display: block;
  margin: 0 0 var(--s2);
  padding: 0 var(--s3);
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--on-navy-soft);
}

.app-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--on-navy-soft);
  font-size: var(--text-dense);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.app-nav a:hover {
  background: var(--on-navy-hover);
  color: var(--on-navy);
  text-decoration: none;
}

.app-nav a[aria-current="page"] {
  background: var(--on-navy-active);
  color: var(--on-navy);
}

/* The spine marks where you are. It is the one olive thing on the rail. */
.app-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--s3) * -1 + 2px);
  width: 3px;
  height: 18px;
  margin-top: -9px;
  border-radius: var(--r-full);
  background: var(--green-lift);
}

.nav-icon {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

.app-nav a[aria-current="page"] .nav-icon {
  opacity: 1;
  color: var(--green-lift);
}

.nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Who is signed in ----------------------------------------------------- */

.rail__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--on-navy-line);
}

.rail__foot form {
  flex: none;
}

.rail__identity {
  flex: 1 1 auto;
  min-width: 0;
}

.rail__name {
  display: block;
  font-size: var(--text-dense);
  font-weight: 700;
  color: var(--on-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail__role {
  display: block;
  font-size: var(--text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--on-navy-soft);
}

/* --- The canvas ----------------------------------------------------------- */

.app-main {
  min-width: 0;
  padding: var(--s8) var(--s8) var(--s16);
}

.app-main > * {
  max-width: var(--page-max);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.page-header h1 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.page-header p {
  max-width: 62ch;
  margin: var(--s2) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-dense);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.section {
  margin-bottom: var(--s8);
}

.section > h2 {
  margin-bottom: var(--s4);
}

/* --- Centred column for signing in and setting a password ----------------- */

.narrow {
  max-width: 400px;
  margin: 0 auto;
  padding: var(--s16) var(--s5) var(--s12);
}

.narrow .brand {
  margin-bottom: var(--s8);
}

.narrow .wordmark {
  font-size: var(--text-title);
  color: var(--ink);
}

.narrow .brand-mark {
  width: 32px;
  height: 32px;
  color: var(--green);
}

.narrow h1 {
  margin-bottom: var(--s5);
  font-size: var(--text-heading);
}

.narrow .form {
  padding: var(--s6);
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* --- Folded rail ---------------------------------------------------------- */

@media (max-width: 959px) {
  .app-shell {
    display: block;
  }

  .app-rail {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s3);
    padding-right: var(--s4);
  }

  .rail__brand {
    padding: var(--s4) var(--s4);
  }

  .app-nav {
    order: 3;
    flex: 1 1 100%;
    padding: 0 var(--s3) var(--s2);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .app-nav ul {
    display: flex;
    gap: var(--s1);
  }

  .rail__group {
    display: flex;
  }

  .rail__group + .rail__group {
    margin: 0 0 0 var(--s3);
    padding: 0 0 0 var(--s3);
    border-top: 0;
    border-left: 1px solid var(--on-navy-line);
  }

  .rail__group-label {
    display: none;
  }

  .app-nav a {
    margin-bottom: 0;
    white-space: nowrap;
  }

  .app-nav a[aria-current="page"]::before {
    top: auto;
    bottom: 0;
    left: var(--s3);
    right: var(--s3);
    width: auto;
    height: 2px;
    margin: 0;
  }

  .rail__foot {
    margin-left: auto;
    padding: var(--s4) 0;
    border-top: 0;
  }

  .app-main {
    padding: var(--s6) var(--s5) var(--s12);
  }
}

@media (max-width: 560px) {
  .rail__identity {
    display: none;
  }

  .app-main {
    padding: var(--s5) var(--s4) var(--s10);
  }

  .narrow {
    padding-top: var(--s10);
  }

  .narrow .form {
    padding: var(--s5);
  }
}