/* ─────────────────────────────────────────────────────────────
   CaliPath — screen layouts

   Section screens and Home are locked to the viewport: they never
   scroll, and shrink to fit instead. Content pages further in will
   opt into scrolling with .screen--doc.
   ───────────────────────────────────────────────────────────── */

.screen{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  overflow:hidden;
  padding:var(--pad-top) var(--pad-x) var(--pad-bottom);
}

/* Deeper content pages are long-form and do scroll. */
.screen--doc{
  overflow-y:auto;
  overflow-x:hidden;
}

/* ════════ Home ════════ */

/* §7.1 — phone: greeting centred, cards below.
   Desktop: greeting left, cards right. */
.home{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

@media (min-width:900px){
  .home{
    display:grid;
    grid-template-columns:1fr auto;
    gap:88px;
    /* The design sets align-items:start — greeting and cards both hang
       from the top of the content area. Centring them vertically (which
       is what this used to do) pushed the greeting down the screen. */
    align-items:start;
  }
}

.home__greetblock{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  flex:0 0 auto;
  /* Sits a little below the top of the content area rather than hard
     against it. On desktop this costs the cards nothing, since they
     are in their own column. */
  margin-top:var(--greet-offset);
}

@media (min-width:900px){
  .home__greetblock{ align-items:flex-start; }
}

/* §7.2 — the reference scale is a website hero headline, not a UI
   label. Grey, so the orange line below it stays dominant. */
.home__greeting{
  margin:0;
  font-size:var(--greet);
  font-weight:700;
  line-height:var(--greet-lh);
  letter-spacing:-.015em;
  text-align:center;
  color:var(--grey);
}

@media (min-width:900px){
  .home__greeting{ text-align:left; padding-left:26px; }
}

/* §7.3 — the rotating expression. A fixed-height window so the
   sliding lines are clipped rather than pushing the page around. */
.home__expr{
  position:relative;
  width:100%;
  height:var(--expr-box);
  margin-top:var(--expr-mt);
  overflow:hidden;
}

.home__expr p{
  position:absolute;
  left:0;
  right:0;
  top:0;
  margin:0;
  text-align:center;
  font-size:var(--greet);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.015em;
  color:var(--accent);
  transform:translateY(0);
}

@media (min-width:900px){
  .home__expr p{ left:26px; text-align:left; line-height:.95; }
}

/* Slide in from below / out through the top (§7.3). The movement is
   the gesture; opacity rides along with it, so a line is at full
   strength only when it is centred and at rest, and has faded out by
   the time it reaches either edge of the window. That keeps the two
   phrases from ever reading as equally present at once.

   The travel distance is the WINDOW's height (--expr-box), not a
   percentage. A percentage resolves against each line's own height,
   which differs between one-line and two-line phrases — so a short
   phrase moved only half as far and never actually left the window,
   which is what made the two lines overlap.

   Both directions are animations, deliberately. Mixing an animation
   with a transition on one element broke this twice: a filled
   animation outranks a transition, so a line that had animated in
   could never transition out again. Swapping the class here swaps
   animation-name, which simply replaces the running animation — and
   an animation needs no reflow trick to pick up its start state. */
.home__expr p.is-enter{ animation:expr-in  850ms var(--ease) both; }
.home__expr p.is-out  { animation:expr-out 850ms var(--ease) both; }

@keyframes expr-in{
  from{ transform:translateY(var(--expr-box));            opacity:0; }
  to  { transform:translateY(0);                          opacity:1; }
}

@keyframes expr-out{
  from{ transform:translateY(0);                          opacity:1; }
  to  { transform:translateY(calc(-1 * var(--expr-box))); opacity:0; }
}

.home__stats{
  width:100%;
  margin-top:var(--stats-mt);
  min-height:0;
  flex:1;
  display:flex;
}

@media (min-width:900px){
  .home__stats{
    width:auto;
    flex:0 0 auto;
    align-items:flex-start;
    /* The design runs the cards flush to the right margin; this pulls
       them back in towards the greeting. */
    margin-right:var(--stats-inset);
  }
}

/* ════════ Section screens ════════ */

.section{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* The section tagline — "Push Your Limit", "Be Healthy", … */
.section__heading{
  flex:0 0 auto;
  font-size:var(--heading);
  font-weight:700;
  line-height:var(--heading-lh);
  letter-spacing:-.015em;
  text-align:center;
  margin:0 0 var(--heading-mb);
  color:var(--grey);
}

/* The tile grid takes whatever height is left and centres in it. */
.section > [class^="tiles--"]{
  flex:1;
  min-height:0;
}

/* ════════ Placeholder ════════
   For the drawer entries the design shows but that have no content
   yet. They stay in the menu rather than being dropped, and say so. */
.placeholder{
  margin:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--page-body);
  line-height:1.55;
  color:var(--grey);
  text-align:center;
}

/* ════════ Profile and Welcome ════════

   The design fits the Profile frame inside its viewport at both
   sizes, so this screen does not normally scroll either. It is
   allowed to, though: a short window clipping half a form is worse
   than a scrollbar. Welcome carries a greeting on top of the same
   contents and does scroll on a phone.

   Padding lives on the bar and on .form rather than on .screen, so
   the bar can run edge to edge with its border like the design's. */

.screen--form{
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
}

.form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--form-gap);
  padding:var(--form-pad);
}

/* Desktop: the artboard's 340px photo column beside the field grid.

   Two rows, so "Start over" can sit right under the photo while the
   fields run the full height beside them. The first row is
   max-content and the second takes the rest — with two auto rows the
   taller fields column would stretch both, and the button would drift
   halfway down the screen instead of sitting under the avatar. The
   gap is set on the columns only for the same reason.

   1440px is the design's own frame width, so at that size the layout
   is exactly the artboard; the cap only bites on wider monitors. */
@media (min-width:900px){
  .form{
    display:grid;
    grid-template-columns:var(--form-side) minmax(0,1fr);
    grid-template-rows:max-content 1fr;
    gap:0 var(--form-gap);
    align-items:start;
    width:100%;
    max-width:1440px;
    margin:0 auto;
  }

  .form__side{ grid-column:1; grid-row:1; }
  .form__main{ grid-column:2; grid-row:1 / span 2; }

  .form .reset{
    grid-column:1;
    grid-row:2;
    align-self:start;
    margin-top:14px;
  }
}

.form__side{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.form__main{
  display:flex;
  flex-direction:column;
  gap:var(--field-gap);
  width:100%;
  min-width:0;
}

/* On phone the order is the artboard's: photo, fields, then the
   button under the avatar — which flex gives for free, since .reset
   is the last child. */
.reset{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.reset__confirm{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.reset__pair{ display:flex; gap:10px; }

/* One grey line, used for the two things that can go wrong: a blank
   field, and a picture that could not be read or stored. */
.form__msg{
  margin:0;
  font-size:var(--page-body);
  font-weight:600;
  line-height:1.4;
  color:var(--grey);
  text-align:center;
}

@media (min-width:900px){
  .form__main > .form__msg{ text-align:left; }
}

/* Welcome's heading — Home's grey line and orange line, at page-title
   size rather than hero size, so the form below stays the subject. */
.welcome__greet{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px var(--pad-x) 0;
}

@media (min-width:900px){
  .welcome__greet{
    align-items:flex-start;
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:34px 80px 0;
  }
}

.welcome__hello{
  margin:0;
  font-size:var(--page-title);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.015em;
  color:var(--grey);
}

.welcome__line{
  margin:2px 0 0;
  font-size:var(--page-title);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.015em;
  color:var(--accent);
}