/* Home — Figma 388:1275 (dashboard).
   The 388:1454 intake modal that used to be styled here is gone: js/app.js's
   build-B onboarding quiz replaced it and injects its own styles. */

/* --- semester card --------------------------------------------------------- */

.semester {
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--sh-2);
  padding: 17px 31px 22px 25px;
  margin-bottom: 15px;
}

.semester__head { display: flex; align-items: center; gap: 25px; }
.semester__avatar { width: 128px; height: 128px; border-radius: 50%; background: var(--placeholder); flex: 0 0 128px; }
.semester__hello { font-family: var(--font-hand); font-size: 48px; font-weight: 400; line-height: 1.05; }
.semester__meta { font-size: 16px; color: var(--ink-2); margin-top: 8px; }

/* Flush with the head row and the schedule below it — every other `.eyebrow`
   on the site sits on its container's content edge, and the 26px indent this
   one carried was the only thing in the column that did not line up. */
.semester__eyebrow { margin: 14px 0 18px; letter-spacing: .96px; font-size: 12px; }

/* --- lower row ------------------------------------------------------------- */

/* Frame 388:1275 drew this pair as 714px + 398px inside a 1163px content area,
   i.e. roughly 1.8 : 1 — kept as a proportion so the row fills any width. */
.home-lower {
  display: grid;
  /* B's own split, and the 51px gap went with the reserved mascot column. */
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 20px;
  /* `start` let each card size to its own content, so their bottom edges landed
     23px apart. Stretching makes the taller one set the row height and both
     bottoms line up; each card pins its own footer with margin-top:auto so the
     slack lands above the footer rather than below it. */
  align-items: stretch;
}

/* Build B draws this as a card, not a bare column: same fill, hairline and
   14px radius as the visa card below it, and the whole thing routes to Career. */
.pipeline {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 24px;
  cursor: pointer;      /* js/home.js routes a click on the card body */
}
.pipeline__eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.pipeline__title {
  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}
.pipeline__title a { color: inherit; }

.appl { margin-bottom: 20px; }
.appl:last-of-type { margin-bottom: 0; }

.appl__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.appl__title { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.appl__meta { font-size: 12px; color: var(--ink-3); margin-bottom: 9px; }

/* B's status chip: mono 8px, and only SAVED carries a border — the other two
   are legible on their own fill. */
.appl__tag {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  border-radius: 10px;
  padding: 3px 9px;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--ink);
}
.appl__tag--interview { background: var(--green-tint); }
.appl__tag--applied   { background: var(--accent-tint); }
.appl__tag--saved     { background: var(--panel); border-color: var(--border); }

/* Four equal segments spanning the card. The old rail was four fixed 90px
   blocks with the note beside it, which left the row's width unrelated to the
   card's and stranded space on the right. */
.stages { display: flex; gap: 6px; align-items: center; }
.stage { flex: 1; }
.stage__bar { height: 3px; border-radius: 2px; background: var(--border-soft); }
.stage__label {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .06em;
  color: var(--dim);
}
.stage.is-done .stage__bar   { background: var(--green); }
.stage.is-done .stage__label { color: var(--green); }

.appl__note { font-size: 11px; color: var(--ink-3); margin-top: 7px; }
.appl__note--alert { color: var(--accent); }
.appl__note--warn  { color: var(--amber); }

.pipeline__more {
  display: inline-block;
  margin-top: auto;
  padding-top: 20px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent-b);
}

.stages-row { display: flex; align-items: flex-start; flex-wrap: wrap; }

/* Same box as .pipeline and the visa card — in B all three are one treatment,
   and the 495px min-height it used to carry forced a 268px void under its own
   buttons whenever the student had only a few goals. */
.goals-panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 24px;
  min-height: 0;
}
.goals-panel__title {
  font-family: var(--font-hand); font-size: 32px; font-weight: 400;
  letter-spacing: 1.92px; color: var(--ink-3);
  line-height: 1.15;
}
.goals-panel .divider { margin: 24px 0 20px; }
.goal-row { display: flex; align-items: center; gap: 10px; height: 48px; }
.goal-row .check { width: 18px; height: 18px; flex-basis: 18px; border-color: var(--green); border-radius: 5px; background: var(--panel); }
.goal-row .check:checked { background: var(--green); }
.goal-row.is-done .goal-row__label { color: var(--ink-3); text-decoration: line-through; }
.goal-row__label { font-size: 14px; }

/* The panel's two closing actions share one line and wrap as a pair, so the
   16px that used to sit on `.goals-panel__add` is now the flex parent's. */
/* `auto` pins the row to the card's bottom edge so it lines up with
   .pipeline__more opposite it; the old 16px gap is kept as padding, since a
   second margin-top in the same rule would simply cancel the auto. */
.goals-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 16px;
}
.goals-panel__add { display: inline-block; margin-top: 0; font-size: 14px; font-weight: 500; color: var(--accent); }
/* Secondary to "+ Add a goal": same row, quieter ink, underlined so it still
   reads as a control, and it warms to the accent on hover/focus. */
.goals-panel__quiz {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.goals-panel__quiz:hover,
.goals-panel__quiz:focus-visible { color: var(--accent); }

/* --- visa panel ------------------------------------------------------------ */

.visa-panel {
  /* B separates this from the row above with a 20px spacer div; a margin does
     the same job and matches .home-lower's own 20px gap, so the three cards sit
     on one rhythm instead of the visa strip butting straight into them. */
  margin-top: 20px;
  background: var(--visa-bg);
  border: 1px solid var(--visa-line);
  border-radius: 14px;
  padding: 22px 24px;
  cursor: pointer;      /* js/home.js routes a click on the card body */
}
.visa-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .13em;
  color: var(--accent-b);
}
/* B sets this at 23px in ink, not 36px in accent — it is a card heading sitting
   under the goals panel, not a page title, and the accent is spent on the dots
   and the link instead. */
.visa-panel__title {
  font-family: var(--font-hand);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 14px;
}
.visa-panel__title a { color: inherit; }

.visa-cols { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.visa-col { min-width: 112px; flex: 1; }
.visa-col__head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.visa-col__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.visa-col__dot--ok    { background: var(--green); }
.visa-col__dot--alert { background: var(--dot-alert); }
.visa-col__dot--warn  { background: var(--dot-warn); }
.visa-col__label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .13em;
  color: var(--ink-3);
  white-space: nowrap;
}
.visa-col__value { font-size: 12.5px; color: var(--ink-warm); line-height: 1.35; text-wrap: pretty; }

.visa-panel__link { display: inline-block; font-size: 12.5px; font-weight: 500; color: var(--accent-b); }

/* The five shortcuts. Each is the answer to "why would I open the visa page",
   so each carries its own state — 2 of 7 lessons, one renewal due, 4 of 12
   months of CPT used. */
.visa-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.visa-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--ink-warm);
  transition: border-color .15s ease;
}
.visa-chip:hover { border-color: var(--visa-line); }
.visa-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.visa-chip__dot--ok   { background: var(--green); }
.visa-chip__dot--warn { background: var(--dot-warn); }
.visa-chip__dot--rule { background: var(--accent); }

/* --- narrow viewports ------------------------------------------------------ */

@media (max-width: 1100px) {
  .home-lower { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .goals-panel { min-height: 0; }
}

/* --- mascot ----------------------------------------------------------------
   The pigeon used to get a reserved 200px column so it could never overlap the
   goals panel. That column was dead space on every screen wide enough to show
   it, so the content now runs full width and the bird simply floats over the
   top — it is `pointer-events: none`, so nothing underneath becomes unclickable
   and no click is ever swallowed.

   Its speech bubble is gone with the column; the quiz is still one tap away
   from "Set these with the pigeon" in the goals panel. */

.page-home .mascot { width: var(--mascot-sm); right: 8px; bottom: 0; }

@media (max-width: 1100px) {
  .page-home .main { padding-bottom: calc(var(--mascot-sm) * 1.47 + 30px); }   /* clears the bird and the top of its moon at any size */
}

/* --- phones ----------------------------------------------------------------- */
@media (max-width: 600px) {
  .semester { padding: 16px 14px 18px; border-radius: 16px; }
  .semester__head { gap: 14px; }
  .semester__avatar.avatar { width: 64px; height: 64px; flex: 0 0 64px; font-size: 24px; }
  .semester__hello { font-size: 30px; }
  .semester__meta { font-size: 13px; margin-top: 4px; }
  .semester__eyebrow { margin: 16px 0 12px; font-size: 11px; }
  .home-lower { gap: 16px; }
  .pipeline, .goals-panel, .visa-panel { padding-left: 16px; padding-right: 16px; }
  .visa-col { min-width: 0; flex: 1 1 40%; }
}