/* /start3 — the installed app's home screen.
 *
 * Dark on purpose, and separate from course-home.css: the website is where
 * someone reads and decides, so it went light; this is where someone who
 * already paid comes back to practise, often at night, often one-handed.
 * The palette is the same dark set the player uses, so opening a course from
 * here does not flash white.
 */
:root {
  --page: #112226;
  --panel: #1b383f;
  --card: rgba(255, 248, 238, 0.07);
  --card-lift: rgba(255, 248, 238, 0.11);
  --line: rgba(255, 248, 238, 0.15);
  --text: #fff8ee;
  --muted: rgba(255, 248, 238, 0.66);
  --gold: #e1ad55;
  --teal: #34b8c9;
  --amber: #e0a33c;
}

* { box-sizing: border-box; }

/* This stylesheet is loaded by the app home and nothing else, so the root size
   is a dial for this one screen. 17px rather than the browser's 16: everything
   here is in rem, so one number moves the whole screen together and the padding,
   which is in px, holds the layout still. */
:root { font-size: 17px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app-home {
  max-width: 560px;
  margin: 0 auto;
  /* Bottom padding clears the iOS home indicator in standalone mode. */
  padding: 20px 20px calc(32px + env(safe-area-inset-bottom));
  /* Tall enough to reach the bottom of the screen even when the list is short,
     so the language switch sits on the bottom edge the way the Gym's does
     rather than floating under the last card with a gap beneath it. dvh, not
     vh: on a phone browser vh counts the space the address bar is covering. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── header ─────────────────────────────────────────────────────────── */

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
}

.app-brand img { width: 26px; height: 26px; }

.app-account {
  color: var(--muted);
  text-decoration: none;
  font-size: .85rem;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.app-greet {
  margin: 0 0 22px;
  font-size: 1.35rem;
  font-weight: 600;
}

.app-label {
  margin: 0 0 10px;
  /* see `.rows + .app-label` below: a label right under a row needs air */
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── the continue card: the one thing this screen exists for ─────────── */

.resume {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(140deg, rgba(52, 184, 201, .16), rgba(255, 248, 238, .05));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 30px;
}

.resume__icon { font-size: 2rem; line-height: 1; }

.resume__title {
  margin: 12px 0 4px;
  font-size: 1.3rem;
  font-weight: 600;
}

.resume__where { margin: 0; color: var(--muted); font-size: .9rem; }

.resume__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.resume__go { color: var(--teal); font-weight: 600; }

/* ── progress dots ──────────────────────────────────────────────────── */

.dots { display: flex; gap: 5px; margin: 14px 0 0; }

.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

.dots i.on { background: var(--teal); }

/* ── the rest of what they own ──────────────────────────────────────── */

.mine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 30px;
}

.mine a {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.mine strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.35; }
/* The icon is its own box so a wrapping title lines up under itself rather
   than tucking under the emoji. */
.mine strong i { display: block; font-style: normal; margin-bottom: 6px; font-size: 1.15rem; }
.mine small { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }

.days { font-size: .78rem; color: var(--muted); }
.days.soon { color: var(--amber); }
/* Expired, not broken. Amber like "剩 3 天" — it is the same conversation one
   step later — while the card itself dims so it never competes with a course
   that is still open. */
.days.lapsed { color: var(--amber); }
.mine--lapsed a { opacity: .78; }

.see-all {
  display: block;
  margin: -18px 0 30px;
  color: var(--teal);
  font-size: .88rem;
  font-weight: 600;
  text-align: right;
  text-decoration: none;
}

/* ── the empty state, and the ways out ──────────────────────────────── */

.offer {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 16px;
}

.offer h2 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 600; }
.offer p { margin: 0 0 16px; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: #112226;
}

.btn--quiet {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.rows { display: grid; gap: 10px; }
/* A section label sitting straight on the row above it reads as that row's
   caption rather than as the next section's heading. */
.rows + .app-label { margin-top: 26px; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  font-size: .95rem;
}

.row > span:last-child { color: var(--muted); font-size: .85rem; }
/* A row that is not a door yet: same shape, no pointer, no hover. */
.row--soon { opacity: .55; cursor: default; }
.row__soon { border: 1px dashed var(--line); border-radius: 999px;
             padding: 3px 10px; color: var(--muted); font-size: .78rem; }
.row__what { display: flex; align-items: center; gap: 10px; }
.row__what i { font-style: normal; }

/* ── signed out ─────────────────────────────────────────────────────── */

/* Ends on the one language question this screen can answer: which language the
   app speaks. Which language a course explains meanings in is asked inside the
   course, where there is a meaning to explain. */
/* Tester-only, so it sits quietly: a pair of pills, not a control anyone
   else has to read past. */
.view-switch { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.view-switch a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
                 color: var(--muted); font-size: .78rem; text-decoration: none; }
.view-switch a.on { background: var(--card-lift); color: var(--text); }
/* One fold per language in "my courses". Same row height and border as the
   plain rows above it, so opening one does not change the page's rhythm. */
.lang-fold { margin-bottom: 8px; }
.lang-fold > summary { display: flex; align-items: center; justify-content: space-between;
                       padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px;
                       background: var(--card); cursor: pointer; list-style: none; }
.lang-fold > summary::-webkit-details-marker { display: none; }
.lang-fold > summary::after { content: "›"; color: var(--muted); transform: rotate(90deg); }
.lang-fold[open] > summary::after { transform: rotate(-90deg); }
.lang-fold__what { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.lang-fold__what i { font-style: normal; }
.lang-fold__count { color: var(--muted); font-size: .85rem; margin-left: auto; margin-right: 10px; }
.lang-fold .mine { margin-top: 8px; }
.app-foot-gap { flex: 1 0 34px; }
.app-foot { padding-top: 18px; border-top: 1px solid var(--line); text-align: center;
            display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.app-foot a { color: var(--muted); font-size: .84rem; text-decoration: none; }
.app-foot a:hover { color: var(--text); }


@media (hover: hover) {
  .resume:hover, .mine a:hover, .row:hover { background-color: var(--card-lift); }
}