/* ---------------------------------------------------------------------------
   International Student Visa — Figma 421:276 "Desktop - 16".

   The frame is a 1440×1944 two-column board: a full-width header card, a wide
   left column (738px) and a narrow right rail (394px). Both columns are
   converted to fr proportions here so the page fills whatever content area the
   canonical 217px sidebar leaves it.

   Everything that already exists in base.css is reused — .panel, .btn, .check,
   .divider, .eyebrow, .link, .mascot and the --accent / --panel / --green /
   --amber / --font-hand tokens. Only two inks are page-local: the frame draws
   its body copy a good deal lighter than --ink / --ink-2 do, and dropping to
   the darker global inks would make the whole board read heavier than drawn.
   --------------------------------------------------------------------------- */

.page-visa {
  --vs-ink:    #4d4038;   /* row titles + values   (frame; --ink is darker)   */
  --vs-ink-2:  #73665c;   /* sub-lines + eyebrows  (between --ink-2/--ink-3)  */
  --vs-track:  #ebe0d4;   /* progress-bar trough                              */
  --vs-box:    #bfb2a6;   /* unticked checkbox outline                        */
  --vs-quote:  #8c8073;   /* the planner-warning card's outline               */

  --vs-pad:    50px;      /* left-column card padding                          */
  --vs-pad-r:  28px;      /* right-rail card padding                           */
}

/* --- shell ----------------------------------------------------------------- */

/* The frame sets every text box at roughly 1.2× its size; base.css's 1.45 body
   leading would stretch the whole board by ~300px, so the board takes the
   frame's leading and the sidebar keeps the site's. */
.vs-board { display: flex; flex-direction: column; gap: 24px; line-height: 1.25; }

.vs-cols {
  display: grid;
  grid-template-columns: minmax(0, 738fr) minmax(0, 394fr);
  gap: 24px;
  align-items: start;
}

.vs-col { display: flex; flex-direction: column; min-width: 0; }
.vs-col--main { gap: 30px; }   /* frame: 30px between the wide cards          */
.vs-col--rail { gap: 8px; }    /* frame: the rail cards sit almost flush      */

/* Cards. .panel supplies the surface; the frame draws them borderless at 18px. */
.vs-card {
  border-color: transparent;
  border-radius: 18px;
  padding: 24px var(--vs-pad) 30px;
  min-width: 0;
}
.vs-card--rail { padding: 22px var(--vs-pad-r) 26px; }
.vs-card--accent { background: var(--accent-soft); }

/* --- shared type ----------------------------------------------------------- */

.page-visa .eyebrow { color: var(--vs-ink-2); letter-spacing: 1px; }
.eyebrow--xs { font-size: 10px; }

.vs-title {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--accent);
  font-size: 30px;
  line-height: 1.05;
}
.vs-title--sm { font-size: 28px; }

.vs-lede { margin-top: 13px; font-size: 13px; color: var(--vs-ink-2); }
.vs-note { font-size: 12px; color: var(--vs-ink-2); }

.vs-row-title { font-size: 15px; font-weight: 500; color: var(--vs-ink); }
.vs-row-sub   { margin-top: 4px; font-size: 12.5px; color: var(--vs-ink-2); }

.page-visa .divider { background: var(--divider-warm); }

/* --- header ----------------------------------------------------------------
   The 152px avatar card became one line: the page is about deadlines, not about
   who the student is, so the height goes to the alert strip instead. */

.vs-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; padding: 4px 4px 0; }
.vs-head__title {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  color: var(--accent);
}
.vs-head__meta { font-size: 13px; color: var(--vs-ink-2); }
.vs-head__meta strong { color: var(--green); font-weight: 600; }

/* --- 1. needs your attention ------------------------------------------------
   The only part of the page drawn loud: a tinted strip with a heavier title and
   one card per open action, most urgent first. Colours keep one meaning across
   the page: accent = act now / can end your visa, amber = soon / check first,
   green = fine / allowed. */

.vs-alerts {
  border-radius: 18px;
  padding: 20px 24px 22px;
  background: var(--accent-soft);
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.vs-alerts__head { display: flex; align-items: center; gap: 12px; }
.vs-alerts__title {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  color: var(--accent);
}
.vs-alerts__count {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 12px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
}
.vs-alerts__count.is-clear { background: var(--green); }

.vs-alerts__grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.vs-alert {
  display: flex; flex-direction: column;
  background: var(--panel);
  border-radius: 14px;
  padding: 14px 16px 16px;
  border-top: 4px solid var(--amber);
  box-shadow: var(--sh-1);
  transition: opacity .2s ease;
}
.vs-alert--urgent { border-top-color: var(--accent); }
.vs-alert__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.vs-alert__done {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 12px; color: var(--vs-ink-2); cursor: pointer;
}
.vs-alert__title { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--vs-ink); }
.vs-alert__sub { margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--vs-ink-2); }
.vs-alert__sub strong { color: var(--vs-ink); font-weight: 600; }
.vs-alert__cta { margin-top: auto; padding-top: 12px; font-size: 13px; }

/* ticked: fold to the title, struck through, so what is left stays loud */
.vs-alert.is-done { opacity: .6; border-top-color: var(--green); box-shadow: none; }
.vs-alert.is-done .vs-alert__title { text-decoration: line-through; }
.vs-alert.is-done .vs-alert__sub,
.vs-alert.is-done .vs-alert__cta,
.vs-alert.is-done .vs-pill { display: none; }

.vs-check--sm { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px; }
.vs-check--sm:checked::after { left: 4.5px; top: 1.5px; width: 4px; height: 8px; }

/* --- My Visa Status -------------------------------------------------------- */

.vs-status {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.vs-status__head { display: flex; align-items: center; gap: 8px; }
.vs-status__value { margin-top: 9px; font-size: 14px; color: var(--vs-ink); }

.vs-dot {
  flex: 0 0 10px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
}
.vs-dot--amber  { background: var(--amber); }
.vs-dot--accent { background: var(--accent); }
.vs-dot--muted  { background: var(--vs-box); }

/* work timeline */

.vs-timeline { margin-top: 26px; }
.vs-timeline__track {
  position: relative;
  height: 6px;
  margin: 0;
  border-radius: 3px;
  background: var(--vs-track);
}
.vs-timeline__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  background: var(--green);
}
.vs-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px #fff;
}
.vs-mark--amber  { background: var(--amber); }
.vs-mark--accent { background: var(--accent); }
.vs-mark__label {
  position: absolute;
  left: 50%; top: 20px;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
}
.vs-mark--above .vs-mark__label { top: auto; bottom: 20px; }
.vs-mark--start .vs-mark__label { left: -6px; transform: none; text-align: left; }
.vs-mark--end   .vs-mark__label { left: auto; right: -6px; transform: none; text-align: right; }
.vs-mark__when {
  display: block;
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-ink-2);
}
.vs-mark__what { display: block; font-size: 12px; color: var(--vs-ink); }

.vs-mark--now { background: var(--vs-ink); }
/* the one real deadline on the track reads first */
.vs-mark--deadline {
  width: 18px; height: 18px;
  background: var(--accent);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent);
}
.vs-mark--deadline .vs-mark__label { top: 24px; }
.vs-mark--deadline .vs-mark__when { color: var(--accent); }
.vs-mark--deadline .vs-mark__what { font-weight: 600; }

/* captions sit above and below the track, so it reserves room on both sides */
.vs-timeline .eyebrow { margin-bottom: 48px; }
.vs-timeline__foot { margin-top: 52px; font-size: 12px; color: var(--vs-ink-2); }

.vs-dates { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--divider-warm); }
.vs-dates__row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 10px; }
.vs-dates .vs-remind__what { font-size: 13px; line-height: 1.4; }

/* --- Visa Roadmap ---------------------------------------------------------- */

.vs-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--vs-track);
  overflow: hidden;
}
.vs-bar__fill { height: 100%; border-radius: 3px; background: var(--green); }

.vs-roadmap__bar { margin-top: 12px; }

.vs-lessons { margin-top: 16px; }

.vs-lesson {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 9px 0;
}
.vs-lesson > span { display: block; min-width: 0; }
.vs-lesson__title { display: block; font-size: 15px; font-weight: 500; color: var(--vs-ink); }
.vs-lesson__sub   { display: block; margin-top: 4px; font-size: 12.5px; color: var(--vs-ink-2); }
.vs-lesson.is-done .vs-lesson__title { color: var(--vs-ink-2); }

/* the frame's 22px ticked box — .check keeps the shared focus + persistence */
.vs-check {
  width: 22px; height: 22px; flex: 0 0 22px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid var(--vs-box);
  background: #fff;
}
.vs-check:checked { background: var(--green); border-color: var(--green); }
.vs-check:checked::after {
  left: 7.5px; top: 3px;
  width: 5px; height: 10px;
  border-width: 0 2px 2px 0;
}

.vs-continue { display: inline-block; margin-top: 30px; font-size: 14px; font-weight: 500; }

/* a lesson pointed at from the right rail */
.vs-lesson.is-flagged {
  background: var(--accent-soft);
  border-radius: 10px;
  box-shadow: 0 0 0 6px var(--accent-soft);
}

/* --- My Documents / Know the Rules ----------------------------------------- */

.vs-rows { margin-top: 18px; }

.vs-doc {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
}

.vs-rule { padding: 9px 0; }
.vs-rule__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.vs-rule__q { font-size: 14.5px; font-weight: 500; color: var(--vs-ink); }
.vs-rule__a { margin-top: 3px; font-size: 12.5px; color: var(--vs-ink-2); }

/* Can I...? groups: the status-ending rules come first and carry a rail */
.vs-group { margin-top: 22px; }
.vs-group + .vs-rows { margin-top: 6px; }
.vs-rule--danger { padding-left: 12px; border-left: 3px solid var(--accent); }
.vs-rule--danger .vs-rule__q { font-weight: 600; }

.vs-pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 12px;
  border-radius: 12px;
  background: var(--green); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap;
}
.vs-pill--amber  { background: var(--amber); }
.vs-pill--accent { background: var(--accent); }
.vs-pill--sm { height: 22px; border-radius: 11px; }
/* the frame floats the verdict pill over the question's line box rather than
   letting it set the row height, so it is pulled back to the text's leading */
.vs-rule__head .vs-pill { margin: -2px 0; }

/* --- right rail: Office of International Education ------------------------- */

.vs-oie__where {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.vs-oie__name {
  margin-top: 9px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.06;
  color: var(--accent);
}
.vs-oie__mail { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--vs-ink); }
.vs-oie__line { margin-top: 5px; font-size: 13px; color: var(--vs-ink-2); }
.vs-oie__qs { margin-top: 22px; }

.vs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vs-chip {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  border-radius: 14px;
  background: #fff;
  font-size: 12px; font-weight: 500; color: var(--vs-ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  user-select: none;
}
.vs-chip:hover { background: var(--accent-tint); }
.vs-chip:has(:checked) { background: var(--accent); color: #fff; }
.vs-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.vs-send {
  margin-top: 19px;
  width: 200px; max-width: 100%;
  height: 34px;
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
}

/* --- right rail: What I can do right now ----------------------------------- */

.vs-do { margin-top: 24px; display: grid; gap: 27px; }
.vs-do__item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; }
.vs-do__item .vs-dot { margin-top: 6px; }
.vs-do__title { font-size: 14.5px; font-weight: 500; color: var(--vs-ink); }
.vs-do__sub { margin-top: 2px; font-size: 12px; color: var(--vs-ink-2); }

.vs-remind { margin-top: 22px; }
.vs-remind__list { margin-top: 12px; display: grid; gap: 16px; }
.vs-remind__item { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
.vs-remind__when {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px; font-weight: 600;
}
.vs-remind__what { font-size: 12px; color: var(--vs-ink); }

/* on the tinted cards the pills need the paler surface to stay legible */
.vs-card--accent .vs-remind__when { background: #fff; }

/* --- right rail: Getting your SSN ------------------------------------------ */

.vs-steps { margin-top: 20px; display: grid; gap: 20px; }
.vs-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.vs-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600;
}
.vs-step__title { font-size: 14px; font-weight: 500; color: var(--vs-ink); }
.vs-step__sub { margin-top: 3px; font-size: 11.5px; color: var(--vs-ink-2); }
.vs-step__cta { margin-top: 6px; display: inline-block; font-size: 11.5px; }

/* --- folded sections (roadmap, SSN) ---------------------------------------- */

.vs-fold { padding-bottom: 24px; }
.vs-fold__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer;
}
.vs-fold__sum::-webkit-details-marker { display: none; }
.vs-fold__sum > span:first-child { display: block; min-width: 0; }
.vs-fold__sum .vs-title { display: block; }
.vs-fold__lede { display: block; margin-top: 8px; }
.vs-fold__right { display: flex; align-items: center; gap: 14px; flex: none; }
.vs-fold__bar { display: block; width: 120px; }
.vs-fold__bar .vs-bar__fill { display: block; }
.vs-fold__chev {
  flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--vs-ink-2); border-bottom: 2px solid var(--vs-ink-2);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.vs-fold[open] .vs-fold__chev { transform: rotate(-135deg); }
.vs-fold__sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }

/* the help card follows you down the page */
.vs-col--rail { position: sticky; top: 24px; gap: 16px; }

.vs-oie__mail { display: inline-block; }
.vs-oie__mail:hover { text-decoration: underline; }
.vs-oie__line a { color: inherit; }
.vs-oie__hint { margin-top: 4px; font-size: 12px; color: var(--vs-ink-2); }

/* The visa page is dense; the smaller corner bird covers less of the rail. */
.page-visa .mascot { width: var(--mascot-sm); }

/* --- fluidity -------------------------------------------------------------- */

/* Below ~1240px the 394px rail stops being readable and the work timeline runs
   out of room for its captions, so the board folds into one column. */
@media (max-width: 1240px) {
  .vs-cols { grid-template-columns: minmax(0, 1fr); }
  .vs-col--rail { gap: 24px; position: static; }
  .vs-alerts__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .page-visa { --vs-pad: 26px; --vs-pad-r: 22px; }
  .vs-fold__bar { display: none; }
  .vs-status { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-chip, .vs-alert, .vs-fold__chev { transition: none; }
}

/* --- phones ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .page-visa { --vs-pad: 16px; --vs-pad-r: 16px; }
  .vs-board { gap: 16px; }
  .vs-head__title { font-size: 34px; }
  .vs-alerts { padding: 14px 12px; border-radius: 16px; }
  .vs-alerts__title { font-size: 24px; }
  .vs-alerts__count { white-space: nowrap; flex: none; }
  .vs-alerts__grid { gap: 10px; }
  .vs-alert { padding: 12px 14px 14px; }
  .vs-cols, .vs-col--main { gap: 16px; }
  .vs-card { padding: 18px var(--vs-pad) 20px; border-radius: 16px; }
  .vs-title { font-size: 26px; }

  /* the timeline keeps its real spacing; its captions shrink to fit 300px */
  .vs-timeline { padding: 0 4px; }
  .vs-mark__when { font-size: 8.5px; letter-spacing: .4px; }
  .vs-mark__what { font-size: 10px; white-space: normal; width: 72px; }
  .vs-mark--start .vs-mark__what, .vs-mark--end .vs-mark__what { width: 64px; }
  .vs-timeline .eyebrow { margin-bottom: 76px; }
  .vs-timeline__foot { margin-top: 58px; }

  .vs-rule__head, .vs-doc { gap: 12px; }
  .vs-fold__sum { align-items: flex-start; }
  .vs-send { width: 100%; }
}