/* e9 layout. Named classes own where boxes sit; Tachyons (linked before
   this file) owns skin inside the box. Visual design is a later pass. */

.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.page {
  max-width: 48rem;
  margin: 0 auto;
}

/* A stacked form: one field per row, full width on a phone. */
.stacked-form {
  display: grid;
  gap: 1rem;
  max-width: 24rem;
}

.stacked-form input {
  width: 100%;
  box-sizing: border-box;
}


/* ------------------------------------------------------------ lesson ---
   Layout for the lesson frame (e9.web.layout/lesson-page). Easy to throw
   away: it is all structure, and Tachyons does the skin. */

/* The tick that marks a lesson to revisit is a button: give it a tap target
   of at least 44 by 44 px (a phone finger), however small the mark is. */
.tick-form .tick {
  min-width: 44px;
  min-height: 44px;
}

/* A submitted reflection keeps its line breaks. (An inline style would be
   refused by the Content-Security-Policy.) */
.keep-lines {
  white-space: pre-wrap;
}

/* The pinned header: name, nav button, account link, and under them the
   progress strip across the full width. Pinned so the strip and the button
   are always in reach. It is opaque, and above the slide-out. */
.lesson-body .site-header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
}

/* The strip: one equal segment per lesson. */
.strip {
  grid-column: 1 / -1;
  display: flex;
  gap: 2px;
}

.strip .seg {
  flex: 1 1 0;
  min-width: 0;
  height: 0.5rem;
  background: #d8d8d8;
}

.strip .seg.done {
  background: #19a974;
}

.strip .seg.current {
  outline: 2px solid #357edd;
  outline-offset: 1px;
}

/* A draft segment is grey like a draft row, with a dashed edge. */
.strip .seg.is-draft {
  background: #e8e8e8;
  outline: 1px dashed #777;
  outline-offset: -1px;
}

/* A draft row, which only an owner or admin sees, is grey across the whole
   row so it cannot be overlooked (spec :1927-1933). */
.is-draft {
  background: #e8e8e8;
}

.lesson-layout {
  position: relative;
}

/* ----------------------------------------------------- phone (default) ---
   The nav is a slide-out from the left: off-canvas, and visibility:hidden
   so it is also out of the tab order and the accessibility tree until
   app.js gives it .is-open. Without JavaScript it stays closed; the series
   link above the lesson title reaches the lessons. The header (z-index 40)
   covers the top of the panel, hence the top padding. */
#lesson-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(20rem, 80vw);
  box-sizing: border-box;
  padding: 6rem 1rem 1rem;
  overflow-y: auto;
  z-index: 30;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  visibility: hidden;
  /* Closing: slide out, then hide. */
  transition: transform 0.2s, visibility 0s 0.2s;
}

/* Opening: visible at once (a hidden element cannot take the focus app.js
   gives it), then slide in. */
#lesson-nav.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.2s;
}

/* While the phone nav is open, app.js puts .nav-open on the body. iOS
   WebKit does not reliably fire `click` for a tap on a non-interactive
   element, which is what app.js's tap-outside-to-close listens for; an
   element with cursor: pointer (inherited down from the body) does get
   it. The nav itself keeps the normal cursor. Not tested on WebKit: the
   e2e suite runs Chromium only. */
.nav-open {
  cursor: pointer;
}

.nav-open #lesson-nav {
  cursor: auto;
}

#lesson-nav .lessons {
  margin: 0;
}

#lesson-nav .nav-item.current a {
  font-weight: bold;
}

/* ------------------------------------------------------------- wide ---
   From 48rem the same nav markup is a sidebar beside the lesson, always
   visible, and the button is gone. */
@media (min-width: 48rem) {
  #nav-toggle {
    display: none;
  }

  .lesson-body .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lesson-layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }

  #lesson-nav {
    position: static;
    width: auto;
    padding: 1rem;
    transform: none;
    visibility: visible;
    transition: none;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
  }

  .lesson-layout .page {
    margin: 0;
  }
}