/* The portal's pages, on index.css's tokens and parts.
   1. Home   2. Browse, page heads   3. A course, programs   4. The course home   5. The player   6. My learning,
   certificates   7. Jobs, hiring   8. Profiles   9. Sheets   10. Phone, print */

/* ------------------------------------------------------------ 1. home */

.hero { min-height: 46svh; display: grid; place-items: center; padding: 56px var(--gutter) 24px; }
.hero-in { width: min(820px, 100%); text-align: center; display: grid; gap: 22px; justify-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); font-weight: 750; line-height: 1.04; letter-spacing: -0.045em; }
.hero h1 span {
  display: block; background: linear-gradient(92deg, #fff 0%, color-mix(in oklab, var(--s1) 70%, #fff) 45%, color-mix(in oklab, var(--s2) 75%, #fff) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.search.big { width: 100%; padding: 8px; border-radius: 999px; background: rgba(12, 11, 28, 0.66); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 30px 80px -30px color-mix(in oklab, var(--s1) 60%, transparent); border: 1px solid var(--ds-line-2); }
.search.big input { background: transparent; border: 0; box-shadow: none; font-size: 1.08rem; padding: 12px 12px 12px 46px; }
.search.big ion-icon { left: 22px; }
.search.big button { flex: none; }
.chips.center { justify-content: center; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how .panel { display: grid; gap: 8px; align-content: start; }
.how .step { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ds-display); background: linear-gradient(135deg, var(--s1), var(--s2)); box-shadow: 0 8px 20px -6px var(--s1); }
.how h3 { font-size: 1.1rem; }
.grid.continue { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.continue-card { display: grid; grid-template-columns: 120px 1fr; }
.continue-card .cover.small { aspect-ratio: auto; height: 100%; min-height: 150px; }
.continue-card .cover.small .mono { font-size: 1.6rem; }
.continue-card .meta { gap: 8px; }
.continue-card .meta a.primary { justify-self: start; }
.continue-card .next { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-card .meter { margin-top: 6px; }
.feed { display: grid; gap: 4px; }
.feed-line { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--ds-line); font-size: 0.92rem; }
.feed-line:last-child { border-bottom: 0; }
.feed-line a:hover { text-decoration: underline; text-underline-offset: 3px; }
.feed-line .faint { font-size: 0.8rem; white-space: nowrap; }

/* ------------------------------------------------------------ 2. browse, page heads */

.page-head { padding-top: clamp(28px, 5vw, 52px); padding-bottom: 22px; display: grid; gap: 14px; }
.page-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); font-weight: 750; letter-spacing: -0.04em; }
.page-head .eyebrow { margin-bottom: 0; }
.page-head.center { text-align: center; justify-items: center; padding-top: 14vh; }
.page-head.center p:not(.eyebrow) { max-width: 30rem; }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters select.in, .filters input.in { width: auto; min-width: 150px; border-radius: 999px; padding: 9px 14px; }
.filters .search { flex: 1 1 260px; }
.crumbs { color: var(--ds-text-2); font-size: 0.86rem; }
.crumbs a:hover { color: var(--ds-text); }
.line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ds-text-2); font-size: 0.9rem; }
.by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ds-text-2); }
.by a:hover { color: var(--ds-text); text-decoration: underline; text-underline-offset: 3px; }
.note { color: var(--ds-text-3); font-size: 0.82rem; display: flex; gap: 6px; align-items: flex-start; line-height: 1.45; }
.label { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ds-text-3); font-weight: 650; margin: 14px 0 8px; }

/* ------------------------------------------------------------ 3. a course, programs */

.cover-hero { padding: clamp(28px, 5vw, 56px) 0 clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--ds-line);
  background: radial-gradient(60rem 30rem at 15% 0%, color-mix(in oklab, var(--g1) 26%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--g3) 70%, transparent), transparent); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.hero-grid > div:first-child { display: grid; gap: 14px; justify-items: start; }
.cover-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 780; letter-spacing: -0.045em; line-height: 1.02; }
.cover-hero .sub { font-size: 1.15rem; color: color-mix(in oklab, var(--ds-text) 85%, transparent); max-width: 40rem; line-height: 1.5; }
.offer { display: grid; gap: 10px; }
.offer h3 { font-size: 1.2rem; }
.offer button { flex-direction: column; gap: 2px; }
.offer button small { font-weight: 500; font-size: 0.76rem; opacity: 0.75; }
.offer button.link { text-decoration: underline; text-underline-offset: 3px; }
.detail { display: grid; grid-template-columns: minmax(0, 880px); gap: 40px; padding-top: 18px; align-items: start; }
.detail-main { grid-column: 1; min-width: 0; }
.detail-main > h2 { font-size: 1.2rem; margin: 34px 0 14px; }
.about { font-size: 1.04rem; line-height: 1.7; color: color-mix(in oklab, var(--ds-text) 86%, transparent); max-width: 46rem; display: grid; gap: 12px; }
.outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 24px; }
.outcomes li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.outcomes ion-icon { color: var(--ds-green); flex: none; margin-top: 3px; }
.jobs-hint { display: flex; gap: 14px; align-items: center; margin-top: 22px; transition: background 0.2s; }
.jobs-hint:hover { background: var(--ds-glass-hover); }
.jobs-hint > ion-icon:first-child { font-size: 1.6rem; color: var(--g1); }
.jobs-hint div { flex: 1; }
.syllabus, .weeks, .program-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.syllabus header, .week header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.week .week, .syllabus .week { font-family: var(--ds-display); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in oklab, var(--g1) 70%, #fff); }
.syllabus h3, .week h3 { font-size: 1.08rem; flex: 1; }
.syllabus > li > p { margin: 6px 0 10px; }
.syllabus ul, .items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.syllabus ul li { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 4px; font-size: 0.92rem; color: var(--ds-text-2); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.person-chip { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--ds-glass); border: 1px solid var(--ds-line); text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; box-sizing: border-box; transition: background 0.2s; }
.person-chip:hover { background: var(--ds-glass-hover); }
.person-chip.on { border-color: var(--s1); }
.person-chip span { display: grid; min-width: 0; }
.person-chip small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
aside .person-chip + .person-chip { margin-top: 8px; }
.reviews { display: grid; gap: 14px; }
.review { display: flex; gap: 12px; }
.review p { line-height: 1.5; }
.program-courses li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
.program-courses .n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ds-display); background: var(--ds-glass-2); }
.program-courses .n.done { background: var(--ds-green); color: #062814; }
.program-courses .course-card { display: grid; grid-template-columns: 180px 1fr; }
.program-courses .course-card .cover { aspect-ratio: auto; min-height: 110px; }

/* ------------------------------------------------------------ 4. the course home */

.course-head .ring { --p: 0; }
.course-head > a.primary { justify-self: start; }
.course-home { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.course-home > div > h2 { font-size: 1.2rem; margin: 26px 0 12px; }
.course-home aside { display: grid; gap: 16px; }
.course-home aside h3 { margin-bottom: 10px; }
.course-home aside p.muted { font-size: 0.88rem; margin-top: 8px; }
.panel.banner { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.panel.banner > ion-icon:first-child { font-size: 1.5rem; flex: none; color: var(--ds-text-2); }
.panel.banner > div { flex: 1; display: grid; gap: 2px; }
.panel.banner.earned { border-color: color-mix(in oklab, var(--ds-green) 40%, transparent); }
.panel.banner.earned > ion-icon:first-child { color: var(--ds-green); }
.panel.banner.warn > ion-icon:first-child { color: var(--ds-orange); }
.items li a { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 12px; font-size: 0.94rem; transition: background 0.15s; }
.items li a:hover { background: var(--ds-glass); }
.items li.done a > ion-icon { color: var(--ds-green); }
.items .faint { font-size: 0.8rem; }
table.grades td { padding: 8px 6px; }
.star-pick { display: flex; gap: 2px; margin-bottom: 8px; }
.star-pick button { font-size: 1.6rem; background: none; border: 0; color: var(--ds-text-3); cursor: pointer; padding: 0 2px; }
.star-pick button.on { color: #ffd166; }
form.panel { display: grid; gap: 10px; }
.actions-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ 5. the player */

.player { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100svh - 60px); }
.outline { position: sticky; top: 0; align-self: start; max-height: calc(100svh - 60px); overflow: auto; padding: 20px 16px 40px; border-right: 1px solid var(--ds-line); background: rgba(8, 7, 20, 0.35); display: grid; gap: 10px; align-content: start; }
.outline .back { display: inline-flex; gap: 6px; align-items: center; color: var(--ds-text-2); font-size: 0.88rem; }
.outline .back:hover { color: var(--ds-text); }
.outline .om h3 { font-size: 0.95rem; margin-bottom: 6px; }
.outline .label { margin: 10px 0 2px; }
.outline ul { list-style: none; margin: 0; padding: 0; }
.outline li a { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 0.88rem; color: var(--ds-text-2); }
.outline li a:hover { background: var(--ds-glass); color: var(--ds-text); }
.outline li.on a { background: var(--ds-glass-2); color: var(--ds-text); box-shadow: inset 3px 0 0 var(--g1); }
.outline li.done a > ion-icon { color: var(--ds-green); }
.stage { padding: clamp(20px, 3vw, 36px) clamp(16px, 4vw, 48px) 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; min-width: 0; max-width: 1040px; }
.item-head { display: grid; gap: 8px; }
.item-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 750; letter-spacing: -0.035em; }
.item-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.item-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--ds-line); flex-wrap: wrap; }
.item-bar a.primary { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.done-mark { display: inline-flex; gap: 6px; align-items: center; color: var(--ds-green); font-weight: 600; }
.panel.locked, .link-item { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.panel.locked > ion-icon, .link-item > ion-icon { font-size: 2rem; color: var(--g1); }
.panel.locked > div, .link-item > div { flex: 1; display: grid; gap: 4px; min-width: 220px; }
.media video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ds-radius); background: #000; box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--g1) 50%, transparent), var(--ds-raised); display: block; }
.media video::cue { background: rgba(8, 7, 20, 0.78); font-family: var(--ds-font); }
.audio-card { display: grid; justify-items: center; gap: 18px; padding: 36px 20px; border-radius: 24px; background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--g1) 30%, transparent), transparent 60%), var(--ds-panel); border: 1px solid var(--ds-line); }
.audio-card .orb { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; background: radial-gradient(circle at 35% 30%, #fff, var(--g1) 45%, var(--g2)); box-shadow: 0 0 60px -6px var(--g1); color: #0b0a1c; }
.audio-card audio { width: min(520px, 100%); }
.speed { display: flex; gap: 6px; margin-top: 10px; }
.speed .chip { padding: 4px 10px; font-size: 0.78rem; }
.media-missing { display: grid; gap: 10px; }
.slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.slide { aspect-ratio: 16 / 9; padding: 18px; border-radius: 16px; display: grid; align-content: start; gap: 8px; background: radial-gradient(circle at 20% 10%, color-mix(in oklab, var(--g1) 30%, transparent), transparent 60%), linear-gradient(145deg, var(--g3), #07060f); border: 1px solid var(--ds-line); }
.slide ul { margin: 0; padding-left: 18px; color: var(--ds-text-2); font-size: 0.86rem; }
.transcript header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
#cues { max-height: 260px; overflow: auto; line-height: 1.75; color: var(--ds-text-2); font-size: 0.98rem; }
.cue[data-at] { cursor: pointer; border-radius: 4px; transition: background 0.2s, color 0.2s; }
.cue[data-at]:hover { color: var(--ds-text); background: var(--ds-glass); }
.cue.now { color: var(--ds-text); background: color-mix(in oklab, var(--g1) 22%, transparent); }
details.notes summary { cursor: pointer; font-weight: 650; }
details.notes ul { color: var(--ds-text-2); }
/* Long reading: a serif column on a calm panel. */
.reading {
  font-family: var(--ds-read); font-size: 1.14rem; line-height: 1.75; color: color-mix(in oklab, var(--ds-text) 90%, transparent);
  max-width: 44rem; padding: clamp(20px, 4vw, 44px); border-radius: 24px; background: rgba(12, 10, 28, 0.55); border: 1px solid var(--ds-line);
}
.reading h2, .reading h3, .reading h4 { font-family: var(--ds-font); letter-spacing: -0.02em; margin: 1.6em 0 0.5em; line-height: 1.25; }
.reading h2:first-child, .reading h3:first-child { margin-top: 0; }
.reading h2 { font-size: 1.45rem; }
.reading h3 { font-size: 1.18rem; }
.reading p, .reading ul, .reading ol, .reading table, .reading blockquote { margin: 0 0 1em; }
.reading li { margin-bottom: 0.35em; }
.reading strong { color: var(--ds-text); }
.reading a { color: color-mix(in oklab, var(--g1) 60%, #fff); text-decoration: underline; text-underline-offset: 3px; }
.reading blockquote { border-left: 3px solid var(--g1); padding: 4px 0 4px 18px; color: var(--ds-text-2); font-style: italic; }
.reading table { width: 100%; border-collapse: collapse; font-family: var(--ds-font); font-size: 0.92rem; display: block; overflow-x: auto; }
.reading th, .reading td { padding: 8px 10px; border-bottom: 1px solid var(--ds-line); text-align: left; vertical-align: top; }
.reading th { color: var(--ds-text-2); font-weight: 650; }
.reading img { max-width: 100%; border-radius: 12px; }
/* Quizzes. */
.quiz-intro { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.quiz-intro > div:first-child { display: grid; gap: 4px; }
.best { display: grid; justify-items: end; }
.best b { font-size: 1.8rem; letter-spacing: -0.03em; }
.questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.q { border: 1px solid var(--ds-line); border-radius: 20px; padding: 18px 20px; margin: 0; background: var(--ds-glass); display: grid; gap: 8px; }
.q legend { display: contents; }
fieldset.q > legend { font-weight: 650; font-size: 1.02rem; line-height: 1.45; display: flex; gap: 12px; padding: 0; margin-bottom: 6px; float: left; width: 100%; }
fieldset.q > legend + * { clear: both; }
.q .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; background: var(--ds-glass-2); }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; line-height: 1.45; }
.choice:hover { background: var(--ds-glass); }
.choice:has(input:checked) { border-color: color-mix(in oklab, var(--g1) 60%, transparent); background: color-mix(in oklab, var(--g1) 12%, transparent); }
.choice input { margin-top: 4px; accent-color: var(--g1); }
.submit-row { display: flex; justify-content: flex-end; }
.result { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.result > div:nth-child(2) { flex: 1; min-width: 200px; display: grid; gap: 4px; }
.result.pass { border-color: color-mix(in oklab, var(--ds-green) 45%, transparent); }
.result.pass .ring { background: radial-gradient(closest-side, #120f2a 78%, transparent 80% 100%), conic-gradient(var(--ds-green) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0); }
.result.fail .ring { background: radial-gradient(closest-side, #120f2a 78%, transparent 80% 100%), conic-gradient(var(--ds-orange) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0); }
.reviewed .q .prompt { font-weight: 650; display: flex; gap: 8px; align-items: flex-start; }
.reviewed .q.right .prompt ion-icon { color: var(--ds-green); flex: none; margin-top: 3px; }
.reviewed .q.wrong .prompt ion-icon { color: var(--ds-red); flex: none; margin-top: 3px; }
.reviewed .yours { color: var(--ds-text-2); font-size: 0.92rem; }
.reviewed .feedback { font-size: 0.92rem; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); color: var(--ds-text-2); line-height: 1.5; }

/* ------------------------------------------------------------ 6. my learning, certificates */

.cred-card { display: grid; grid-template-columns: 76px 1fr; align-items: center; }
.cred-seal { width: 52px; height: 52px; margin: 12px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #0b0a1c; background: radial-gradient(circle at 35% 30%, #fff, #ffd166 45%, #f0803c); box-shadow: 0 0 30px -6px #ffd166; }
.verify { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding-top: 36px; align-items: start; }
.verify aside { display: grid; gap: 14px; }
.certificate {
  position: relative; aspect-ratio: 1.414; padding: clamp(24px, 5vw, 56px); border-radius: 18px; display: grid; align-content: center; gap: 10px; text-align: center; overflow: hidden;
  background: radial-gradient(50rem 30rem at 0% 0%, color-mix(in oklab, var(--g1) 22%, transparent), transparent 60%), radial-gradient(40rem 30rem at 100% 100%, color-mix(in oklab, var(--g2) 20%, transparent), transparent 60%), linear-gradient(160deg, #15123a, #0a0918);
  border: 1px solid rgba(255, 215, 130, 0.35); box-shadow: inset 0 0 0 8px rgba(10, 9, 24, 0.6), inset 0 0 0 9px rgba(255, 215, 130, 0.25), 0 40px 100px -40px rgba(0, 0, 0, 0.8);
}
.cert-top { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cert-top .uni { font-family: var(--ds-display); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ds-text-2); padding-left: 10px; border-left: 1px solid var(--ds-line-2); }
.cert-top .with { display: inline-flex; gap: 6px; align-items: center; color: var(--ds-text-2); font-size: 0.85rem; }
.certificate h1 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 750; letter-spacing: -0.03em; }
.certificate h2 { font-family: var(--ds-read); font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: #ffe2a8; }
.certificate .awarded { color: var(--ds-text-3); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.18em; }
.certificate > .muted { max-width: 34rem; margin: 0 auto; }
.cert-foot { display: flex; justify-content: space-between; align-items: end; margin-top: 18px; gap: 16px; text-align: left; }
.cert-foot div { display: grid; }
.cert-foot small { color: var(--ds-text-3); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; }
.cert-foot .seal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #0b0a1c; background: radial-gradient(circle at 35% 30%, #fff, #ffd166 45%, #f0803c); box-shadow: 0 0 40px -6px #ffd166; }

/* ------------------------------------------------------------ 7. jobs, hiring */

.jobs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.jobs-layout aside { display: grid; gap: 16px; }
.job-list { display: grid; gap: 12px; }
.job-card { padding: 16px 18px; display: grid; gap: 8px; }
.job-top { display: flex; gap: 12px; align-items: center; }
.job-top .logo { width: 44px; height: 44px; border-radius: 12px; font-size: 0.9rem; }
.job-top h3 { font-size: 1.05rem; }
.standing { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 650; color: var(--ds-text-2); }
.standing .meter { flex: 1; max-width: 200px; }
.standing span { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.standing.top { color: var(--ds-green); }
.standing.top .meter i { background: linear-gradient(90deg, #2bb673, var(--ds-green)); }
.standing.good { color: var(--ds-blue); }
.standing.good .meter i { background: linear-gradient(90deg, #3b82f6, var(--ds-blue)); }
.standing.fair .meter i { background: linear-gradient(90deg, #6b7280, var(--ds-gray)); box-shadow: none; }
.job-head { display: flex; gap: 18px; align-items: flex-start; }
.job-head > div { display: grid; gap: 6px; }
.job-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 750; letter-spacing: -0.04em; }
.reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reqs li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--ds-glass); border: 1px solid var(--ds-line); }
.reqs li span { display: grid; }
.reqs li ion-icon { font-size: 1.2rem; color: var(--ds-text-3); flex: none; }
.reqs li.ok ion-icon { color: var(--ds-green); }
.reqs li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.book { position: sticky; top: 84px; display: grid; gap: 12px; }
.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.88rem; }
.parts li { display: flex; justify-content: space-between; color: var(--ds-text-2); }
.gaps { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--ds-line); }
.gap { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--ds-glass); font-size: 0.9rem; }
.gap:hover { background: var(--ds-glass-hover); }
.hiring { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.hiring > div { display: grid; gap: 12px; }
.job-pick { display: grid; gap: 4px; padding: 10px; position: sticky; top: 84px; }
.job-pick a { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; }
.job-pick a:hover { background: var(--ds-glass); }
.job-pick a.on { background: var(--ds-glass-2); box-shadow: inset 3px 0 0 var(--s1); }
.job-pick a span { display: flex; gap: 6px; align-items: center; font-size: 0.82rem; }
.applicant { display: grid; gap: 12px; }
.applicant.is-verified { border-color: color-mix(in oklab, var(--ds-green) 35%, transparent); }
.app-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.app-head > div:nth-child(3) { flex: 1; min-width: 180px; }
.app-head .rank { font-family: var(--ds-display); color: var(--ds-text-3); width: 22px; }
.app-head .standing { min-width: 220px; }
.app-body { display: grid; gap: 10px; padding-left: 34px; }
.chip .faint, .chip.faint { opacity: 0.55; }

/* ------------------------------------------------------------ 8. profiles */

.profile { padding-top: 28px; display: grid; gap: 18px; }
.profile-card { padding: 0; overflow: hidden; }
.profile-card .banner { height: clamp(90px, 16vw, 160px); background: radial-gradient(circle at 20% 0%, hsl(var(--h) 80% 60% / 0.7), transparent 60%), radial-gradient(circle at 90% 100%, hsl(calc(var(--h) + 60) 80% 55% / 0.6), transparent 60%), linear-gradient(135deg, #15123a, #0a0918); }
.profile-head { display: flex; gap: 20px; padding: 0 clamp(16px, 3vw, 28px) 22px; align-items: flex-end; flex-wrap: wrap; margin-top: -48px; }
.profile-head .logo.big { border: 4px solid #0b0a1c; width: 96px; height: 96px; border-radius: 24px; font-size: 1.8rem; }
.profile-head .who { flex: 1; min-width: 240px; display: grid; gap: 4px; padding-top: 52px; }
.profile-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 750; letter-spacing: -0.035em; }
.profile-actions { display: flex; gap: 8px; }
.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.profile-body > div, .profile-body aside { display: grid; gap: 18px; }
.profile-body h2 { font-size: 1.15rem; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
.profile-body h2 ion-icon { color: var(--ds-green); }
.creds { display: grid; gap: 10px; }
.cred { display: flex; gap: 4px; align-items: center; border-radius: 16px; background: var(--ds-glass); border: 1px solid var(--ds-line); padding-right: 14px; transition: background 0.2s; }
.cred:hover { background: var(--ds-glass-hover); }
.cred .cred-seal { width: 42px; height: 42px; font-size: 1.2rem; margin: 10px; flex: none; }
.cred div:last-child { display: grid; gap: 2px; }
.exp { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.exp li { display: flex; gap: 12px; align-items: flex-start; }
.exp .logo { width: 40px; height: 40px; border-radius: 10px; font-size: 0.8rem; }

/* ------------------------------------------------------------ 9. sheets */

.stack { display: grid; gap: 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; color: var(--ds-text-2); cursor: pointer; }
.check input { accent-color: var(--s1); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; max-height: 180px; overflow: auto; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--ds-line); }
.who-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.card-box { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--ds-line); }
dl.total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 12px 0; border-top: 1px solid var(--ds-line); }
dl.total dt { color: var(--ds-text-2); }
dl.total dd { margin: 0; font-size: 1.6rem; font-weight: 750; letter-spacing: -0.03em; }
.sheet form.aid { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ds-line); }

/* ------------------------------------------------------------ 10. phone, print */

@media (max-width: 1000px) {
  .hero-grid, .detail, .course-home, .jobs-layout, .verify, .profile-body, .hiring { grid-template-columns: 1fr; }
  .book, .job-pick { position: static; }
  .player { grid-template-columns: minmax(0, 1fr); }
  .outline { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--ds-line); }
  .player .outline .om { display: none; }
  .player .outline .om:has(li.on) { display: block; }
}
@media (max-width: 720px) {
  #nav span:not(.avatar) { display: none; }
  #nav a, #nav button.who { padding: 10px; }
  #nav ion-icon { font-size: 1.3rem; }
  .brand .uni { display: none; }
  .how { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
  .grid.continue, .grid.two { grid-template-columns: 1fr; }
  .continue-card { grid-template-columns: 1fr; }
  .continue-card .cover.small { min-height: 0; aspect-ratio: 16 / 6; }
  .search.big { padding: 6px; }
  .search.big button { padding: 10px 14px; }
  .program-courses .course-card { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .app-body { padding-left: 0; }
  .cert-foot { flex-wrap: wrap; }
  .certificate { aspect-ratio: auto; }
  .item-bar { flex-direction: column-reverse; align-items: stretch; }
  .item-bar > * { justify-content: center; }
  .filters select.in, .filters input.in { flex: 1 1 140px; min-width: 0; }
  .foot nav { margin-left: 0; }
  .reading { font-size: 1.04rem; padding: 18px; }
  .stage { padding-inline: 16px; }
}
@media print {
  ion-header, .foot, .verify aside, #layer { display: none !important; }
  body, ion-app { background: #fff !important; }
  .verify { grid-template-columns: 1fr; padding: 0; }
  .certificate { box-shadow: none; }
}
.detail.job-detail { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 1000px) { .detail.job-detail { grid-template-columns: 1fr; } }