/* Account, workstation and community. Shared colors come from the hub theme. */
.account [hidden], .workstation-page [hidden], .community [hidden] { display: none !important; }

/* Account: room for complete names, laboratory names and email addresses. */
.page.account { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 30px 36px; align-items: start; }
.account-heading { grid-column: 1 / -1; display: grid; gap: 10px; }
.account-heading p { max-width: 65ch; }
.account .acc-nav { width: auto; min-width: 0; top: 96px; gap: 5px; }
.account .acc-nav a { padding: 11px 13px; border: 1px solid transparent; border-radius: 7px; }
.account .acc-nav a.on { color: var(--blue, #276789); background: var(--blue-soft, rgba(39, 103, 137, .08)); border-color: transparent; }
.account .acc-main { width: 100%; min-width: 0; gap: 24px; }
.account .card { padding: 26px; border-radius: 12px; gap: 20px; box-shadow: none; }
.account .card h2, .account .card h3 { font-size: 20px; line-height: 1.3; }
.account .card[id] { scroll-margin-top: 94px; }
.account .profile { flex-direction: column; align-items: stretch; }
.account .avatar-edit { display: flex; flex-direction: row; align-items: center; gap: 18px; }
.account .avatar-edit .avatar { flex-shrink: 0; }
.account .avatar-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.account .profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 760px; }
.account .profile-wide { grid-column: 1 / -1; }
.account label { font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text2); min-width: 0; }
.account label input { height: 46px; font-size: 16px; min-width: 0; background: var(--bg); border-radius: 7px; }
.account label.chk { font-size: 13px; align-items: flex-start; }
.account label.chk input { width: 18px; height: 18px; flex-shrink: 0; }
.account .profile-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 4px; max-width: 760px; }
.account .account-sections { display: flex; flex-direction: column; gap: 24px; }
.account .account-security { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.account #configuration > .row-between { align-items: flex-start; flex-wrap: wrap; }
.account #configuration > .row-between > div { flex: 1; min-width: 220px; }
.account #configuration > .row-between p { margin-top: 7px; }
.account-config-summary { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.account-config-summary > div { padding: 17px 0; border-top: 1px solid var(--line); min-width: 0; }
.account-config-summary dt { color: var(--text2); font-size: 12px; margin-bottom: 7px; }
.account-config-summary dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
.account-config-summary dd.small { font-weight: 400; margin-top: 5px; }
.account-config-summary .config-software { grid-column: 1 / -1; }
/* The two heights of Flex under the Kit line (owner, 2026-10-22). */
.account-config-summary dd.kit-heights { margin-top: 12px; font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.account-config-summary dd.kit-heights p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text2); }
.account-config-summary dd.kit-note { font-weight: 400; }
.account-config-summary dd.kit-note p { margin: 8px 0 0; }
.account-cads { display: flex; flex-wrap: wrap; gap: 7px; }
.account-cads > span { color: var(--blue, #276789); background: var(--blue-soft, rgba(39, 103, 137, .08)); border-radius: 5px; padding: 5px 9px; font-size: 13px; }
.account #pw-box { display: flex; flex-direction: column; gap: 18px; }
.account #pw-box .grid2 { grid-template-columns: 1fr; }
.account #pw-box button { align-self: flex-start; }
.account #security > .row-between:last-child { align-items: flex-start; }
.account .row-between > div { min-width: 0; }
.account .row-between > div > b, .account .line .mono { overflow-wrap: anywhere; }
.account .row-between > button, .account .row-between > .seg { flex-shrink: 0; }
.account .acc-main .row-between > div > .mono { font-family: var(--font); font-size: 12px; line-height: 1.5; text-transform: none; letter-spacing: 0; margin-top: 5px; }
.account .account-invite { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.account .account-invite > label { flex: 1; min-width: 200px; }
.account #acc-claim { border-top: 1px solid var(--line); padding-top: 18px; }
.account #acc-claim > span { flex-basis: 100%; }
.account #acc-claim > input { flex: 1; width: auto; min-width: 160px; }

/* Workstation: grouped controls and a preview that keeps all selected CADs. */
.workstation-page .onboard-hdr { gap: 24px; }
.workstation-page .quiz-header-title { color: var(--text2); font-size: 14px; }
.workstation-page .onboard-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; padding: 40px 32px 80px; }
.workstation-page .quiz > div, .workstation-page .onboard-side { min-width: 0; }
.workstation-page .onboard-body h1 { font-size: 32px; line-height: 1.2; max-width: 24ch; }
.workstation-page .lead { max-width: 65ch; font-size: 15px; }
.workstation-page .qgrid { gap: 20px; margin-top: 28px; }
.workstation-page .qgrid .card { padding: 24px; gap: 14px; border-radius: 12px; }
.workstation-page .qgrid h2 { font-size: 21px; }
.workstation-page .qgrid h3 { font-size: 17px; line-height: 1.35; }
.workstation-page .quiz-install, .workstation-page .quiz-cads { grid-column: 1 / -1; }
.workstation-page .quiz-install > .opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.workstation-page .quiz-method { display: grid; gap: 12px; margin-top: 5px; padding-top: 18px; border-top: 1px solid var(--line); }
.workstation-page .opt { position: relative; background: var(--bg); border-radius: 8px; padding: 15px 12px; min-height: 92px; gap: 7px; }
.workstation-page .opt b { font-size: 14px; padding-right: 20px; }
.workstation-page .opt .mono { font-family: var(--font); font-size: 11px; letter-spacing: 0; text-transform: none; line-height: 1.4; }
.workstation-page .opt.on { border-color: var(--blue, #276789); background: var(--blue-soft, rgba(39, 103, 137, .08)); }
.workstation-page .quiz-choice-check { position: absolute; top: 14px; right: 10px; width: 17px; height: 17px; border: 1px solid var(--line); border-radius: 4px; }
.workstation-page .opt.on .quiz-choice-check { background: var(--blue, #276789); color: var(--surface); border-color: transparent; }
.workstation-page .quiz-choice-check svg { width: 15px; height: 15px; }
.workstation-page .quiz-selection { font-size: 13px; color: var(--text2); }
.workstation-page .quiz-selection strong { color: var(--text); font-weight: 500; }
.workstation-page label { font-family: var(--font); font-size: 12px; letter-spacing: 0; color: var(--text2); }
.workstation-page label input { background: var(--bg); border-radius: 7px; min-width: 0; }
.workstation-page .qgrid > .card > .grid2:not(.opts) { grid-template-columns: 1fr; }
.workstation-page .onboard-side { padding-top: 0; position: sticky; top: 24px; align-self: start; }
.workstation-page .path-card { border-color: var(--line); padding: 24px; gap: 20px; border-radius: 12px; }
.workstation-page .path-card h2 { font-size: 24px; }
.workstation-page .path-list { gap: 15px; }
.workstation-page .path-list li { font-size: 13px; align-items: flex-start; }
.workstation-page .path-list li i { background: var(--bg); }
.workstation-page .quiz-cad-preview { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.workstation-page .quiz-cad-preview h3 { font-size: 16px; }
.workstation-page .quiz-cad-preview a { color: var(--blue, #276789); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; }
.workstation-page .onboard-side > .mono { font-family: var(--font); letter-spacing: 0; text-transform: none; line-height: 1.6; }
.workstation-page .path-card > .btn { width: 100%; white-space: normal; min-height: 46px; height: auto; padding: 12px; }

/* Community: real cases and useful answers lead the page. */
.community { gap: 38px; }
.community-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.community-heading > div { display: grid; gap: 10px; max-width: 680px; }
.community-heading > .btn { flex-shrink: 0; }
.community .community-workbench { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 36px; align-items: start; }
.community-section-heading { display: grid; gap: 8px; margin-bottom: 20px; }
.community .community-section-heading h2 { font-size: 23px; }
.community-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.community-case { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.community-case:first-child { grid-column: 1 / -1; }
.community-case > summary { cursor: pointer; list-style: none; }
.community-case > summary::-webkit-details-marker { display: none; }
.community-case > summary > img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--deep); }
.community-case:first-child > summary > img { aspect-ratio: 16 / 10; max-height: 390px; }
.community-case .case-heading { display: grid; gap: 5px; padding: 16px 18px; }
.community-case .case-heading strong { font-family: var(--display); font-size: 17px; line-height: 1.35; }
.community-case .case-open { display: flex; align-items: center; justify-content: space-between; color: var(--blue, #276789); font-size: 13px; font-weight: 500; margin-top: 6px; }
.community-case .case-open svg { transition: transform .18s ease; }
.community-case[open] .case-open svg { transform: rotate(90deg); }
.community-case[open] { grid-column: 1 / -1; }
.community-case[open] > summary > img { max-height: 250px; }
.community .case-detail { display: grid; gap: 18px; padding: 20px; border-top: 1px solid var(--line); }
.community .case-detail > p { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.community .case-detail .chip { font-size: 12px; height: auto; min-height: 30px; white-space: normal; }
.community .case-gallery { display: grid; gap: 18px; }
.community .case-gallery figure { margin: 0; }
.community .case-gallery img { width: 100%; max-height: 640px; object-fit: contain; background: var(--deep); border-radius: 6px; }
.community .case-gallery figcaption { color: var(--text2); font-size: 12px; margin-top: 7px; }
.community .community-review-note { margin-top: 18px; }
.community .community-questions { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 25px; }
.community-question { border-top: 1px solid var(--line); }
.community-question > summary { position: relative; display: grid; gap: 6px; cursor: pointer; list-style: none; padding: 19px 26px 19px 0; }
.community-question > summary::-webkit-details-marker { display: none; }
.community-question > summary strong { font-size: 16px; line-height: 1.45; font-weight: 600; }
.community-question > summary > svg { position: absolute; right: 0; top: 32px; color: var(--blue, #276789); transform: rotate(90deg); transition: transform .18s ease; }
.community-question[open] > summary > svg { transform: rotate(-90deg); }
.community-question > div { display: grid; gap: 13px; padding-bottom: 20px; }
.community-question > div p { font-size: 14px; line-height: 1.7; color: var(--text2); }
.community-question .lnk { color: var(--blue, #276789); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.community .community-ask { display: grid; gap: 12px; padding-top: 23px; margin-top: 2px; border-top: 1px solid var(--line); font-size: 14px; }
.community .community-ask .btn { justify-self: start; }
.community .fb-wall { border-top: 1px solid var(--line); padding-top: 32px; gap: 22px; }
.community .fb-wall h2 { font-size: 23px; margin-bottom: 7px; }
.community .fb-card { border-radius: 10px; padding: 22px; gap: 13px; }
.community .fb-card.featured { border-color: var(--line); }
.community .fb-card .chip { font-family: var(--font); font-size: 11px; letter-spacing: 0; text-transform: none; height: auto; padding: 5px 8px; }
.community .fb-card header .mono, .community .fb-orig { font-family: var(--font); font-size: 11px; letter-spacing: 0; text-transform: none; }
.community .community-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; border-top: 1px solid var(--line); padding-top: 30px; }
.community .community-extras h2 { font-size: 21px; }
.community .community-events { display: grid; gap: 14px; }
.community .community-events .event { padding: 18px 0; gap: 9px; }
.community .community-social { display: flex; flex-direction: column; gap: 16px; }
.community .social { gap: 10px; }
.community .social .chip { border-radius: 7px; height: auto; padding: 10px 12px; }
.community-empty, .community-status { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text2); }

@media (max-width: 1100px) {
  .account .account-security { grid-template-columns: 1fr; }
  .workstation-page .onboard-body { grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; }
  .workstation-page .quiz-install > .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workstation-page .qgrid { grid-template-columns: 1fr; }
  .workstation-page .quiz-install, .workstation-page .quiz-cads { grid-column: auto; }
  .workstation-page .qgrid > .card > .grid2:not(.opts) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community .community-workbench { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(290px, .8fr); }
  .community .community-questions { padding: 20px; }
}
@media (max-width: 960px) {
  .page.account { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .account .acc-nav { position: static; flex-direction: row; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; width: 100%; }
  .account .acc-nav a { flex-shrink: 0; }
  .workstation-page .onboard-body { grid-template-columns: 1fr; max-width: 820px; }
  .workstation-page .onboard-side { position: static; }
  .workstation-page .quiz-install > .opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .community .community-workbench { grid-template-columns: 1fr; }
  .community-case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .community-case:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .account .card { padding: 20px; }
  .account .profile-fields { grid-template-columns: 1fr; gap: 18px; }
  .account .profile-wide { grid-column: auto; }
  .account-config-summary { grid-template-columns: 1fr; }
  .account .profile-actions, .account #devices > .row-between, .account #privacy > .row-between { flex-wrap: wrap; }
  .account .card[id] { scroll-margin-top: 76px; }
  .account .avatar-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .workstation-page .onboard-hdr { padding: 14px 18px; height: auto; min-height: 68px; flex-wrap: wrap; gap: 12px; }
  .workstation-page .quiz-header-title { display: none; }
  .workstation-page .onboard-hdr > .lnk { margin-left: auto; font-size: 12px; }
  .workstation-page .onboard-body { padding: 26px 16px 50px; gap: 22px; }
  .workstation-page .onboard-body h1 { font-size: 28px; }
  .workstation-page .qgrid .card, .workstation-page .path-card { padding: 20px; }
  .workstation-page .quiz-install > .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workstation-page .opts.grid3 { grid-template-columns: 1fr; }
  .workstation-page .quiz-cads .opt { min-height: 76px; }
  .workstation-page .qgrid > .card > .grid2:not(.opts) { grid-template-columns: 1fr; }
  .workstation-page label input { font-size: 16px; }
  .community { gap: 30px; }
  .community-heading { flex-direction: column; gap: 20px; }
  .community-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .community-case .case-heading { padding: 13px; }
  .community-case .case-heading strong { font-size: 15px; }
  .community .community-questions, .community .case-detail { padding: 20px; }
  .community .community-extras { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .community-case .case-open svg, .community-question > summary > svg { transition: none; }
}

/* The referral programme (views/referral.js, owner 2026-10-08) and its card
   on the account page. Theme tokens only: light and dark follow the theme. */
.account .referral-card { gap: 14px; }
.account .referral-card > .tag, .account .referral-card > .btn { align-self: flex-start; }
.account .referral-card > .tag.ref-neutral { color: var(--text2); border: 1px solid var(--line); }
.account .referral-card h2 + p { margin-top: 7px; }
.referral { gap: 28px; }
.referral-heading { display: grid; gap: 10px; max-width: 760px; }
.referral-heading .lead { max-width: 68ch; }
.referral-back { justify-self: start; font-size: 13px; }
.referral-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: 'main side'; gap: 28px; align-items: start; }
.referral-main { grid-area: main; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.referral .card { border-radius: 12px; padding: 24px; gap: 14px; box-shadow: none; min-width: 0; }
.referral .card > .btn, .referral .card > .tag, .referral .card > .lnk { align-self: flex-start; }
.referral .card h2, .referral-form h2 { font-size: 20px; line-height: 1.3; }
.referral .card h3, .referral-form h3 { font-size: 17px; line-height: 1.35; }
.referral-how { grid-area: side; position: sticky; top: 96px; }
.referral-how h3 { margin-top: 6px; }
.referral-steps, .referral-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.referral-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--text2); }
.referral-steps li > i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font); font-style: normal; color: var(--text2); background: var(--bg); }
.referral-steps li.on > i { background: var(--blue); border-color: var(--blue); color: var(--surface); }
.referral-steps li.done > i { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.referral-steps b, .referral-levels b { color: var(--text); font-weight: 600; }
.referral-levels li { font-size: 14px; line-height: 1.5; color: var(--text2); padding-top: 12px; border-top: 1px solid var(--line); }
.referral-status > p { font-size: 15px; line-height: 1.6; }
.referral-status > p.small { font-size: 13px; }
.referral-status h2:focus { outline: none; }
.referral-notice { padding: 14px 16px; border: 1px solid var(--blue-line); background: var(--blue-soft); border-radius: 10px; font-size: 14px; line-height: 1.55; color: var(--text); }
.referral-notice:focus { outline: none; }
/* The candidature and the enrolment */
.referral-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ref-section { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
details.ref-section { display: block; }
.ref-section-body { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.ref-educator > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text); }
.ref-educator > summary::-webkit-details-marker { display: none; }
.ref-educator > summary svg, .ref-rules-card > summary svg { color: var(--blue); transform: rotate(90deg); transition: transform .18s ease; }
.ref-educator[open] > summary svg, .ref-rules-card[open] > summary svg { transform: rotate(-90deg); }
.referral .q { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.referral .q-title { display: block; font-family: var(--font); font-size: 14.5px; font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--text); }
.referral .q-title > .q-opt { display: inline; font-size: 12.5px; font-weight: 400; color: var(--text2); margin-left: 4px; }
.referral .q-desc { margin-top: -3px; font-size: 13px; line-height: 1.5; color: var(--text2); }
.referral .q-title .req { color: var(--red); font-style: normal; font-weight: 700; }
.referral .q input[type="text"], .referral .q input[type="email"], .referral .q input[type="tel"], .referral .q select, .referral .q textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: 400 16px/1.45 var(--font); color: var(--text); outline: none; }
.referral .q textarea { resize: vertical; min-height: 84px; }
.referral .q input:focus, .referral .q select:focus, .referral .q textarea:focus { border-color: var(--blue); }
.referral .q.err > .q-title { color: var(--red); }
.referral .q.err > input, .referral .q.err > select, .referral .q.err > textarea, .referral .q.err > .ref-choices .ref-choice, .referral .q.err > .drop { border-color: var(--red-line); }
.ref-fault { color: var(--red); font-size: 13px; font-weight: 600; line-height: 1.5; }
.ref-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.referral .ref-choice { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: 500 14px/1.35 var(--font); letter-spacing: 0; color: var(--text); cursor: pointer; }
.referral .ref-choice input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--blue); }
.referral .ref-choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.referral .ref-choice:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.referral label.chk { font-size: 13.5px; line-height: 1.5; }
.referral label.chk input { width: 18px; height: 18px; flex-shrink: 0; }
.ref-branch { display: flex; flex-direction: column; gap: 16px; padding-left: 16px; border-left: 2px solid var(--line); }
.referral .drop { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; text-align: left; }
.referral .drop > b { white-space: nowrap; }
.referral .drop > span { color: var(--text2); }
.ref-previews { grid-template-columns: repeat(3, minmax(0, 120px)); }
.ref-video { margin-top: 4px; }
.ref-video > .q-title { font-weight: 500; }
.ref-me { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.ref-me > div { min-width: 0; }
.ref-me dt { font-size: 12px; color: var(--text2); }
.ref-me dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.ref-me + .lnk { align-self: flex-start; margin-top: -8px; font-size: 13px; }
.ref-note { line-height: 1.6; }
.ref-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ref-onboard { gap: 20px; }
.ref-rules { display: flex; flex-direction: column; gap: 10px; }
.ref-rules-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.ref-rules-box { max-height: 340px; overflow-y: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.ref-rules-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; }
.ref-rules-list li { font-size: 14px; line-height: 1.6; color: var(--text2); }
.ref-rules-list li::marker { color: var(--text); font-weight: 600; }
.ref-rules-list b { display: block; margin-bottom: 3px; color: var(--text); }
details.ref-rules-card { display: block; }
.ref-rules-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 600; color: var(--text); }
.ref-rules-card > summary::-webkit-details-marker { display: none; }
.ref-rules-card > summary .small { font-weight: 400; margin-left: 6px; }
.ref-rules-card[open] > .ref-rules-list { margin-top: 16px; }
/* The state of a candidature */
.referral-summary dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.referral-summary dl > div { padding: 13px 0; border-top: 1px solid var(--line); min-width: 0; }
.referral-summary dl > .wide { grid-column: 1 / -1; }
.referral-summary dt { font-size: 12px; color: var(--text2); margin-bottom: 5px; }
.referral-summary dd { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.ref-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ref-thumbs img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--deep); }
.ref-withdraw { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ref-confirm { align-self: stretch; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--red-line); background: var(--red-soft); border-radius: 10px; font-size: 14px; line-height: 1.5; }
.ref-copy-field { display: flex; flex-direction: column; gap: 8px; }
.ref-copy { display: flex; gap: 8px; align-items: stretch; }
.ref-copy input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: 500 14px var(--font); color: var(--text); }
.ref-copy .btn { flex-shrink: 0; }
.ref-portal { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 960px) {
  .referral-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .referral-main, .referral-how { grid-area: auto; }
  .referral-how { position: static; }
}
@media (max-width: 600px) {
  .referral .card, .ref-section { padding: 18px; }
  .ref-me, .referral-summary dl { grid-template-columns: minmax(0, 1fr); }
  .referral-summary dl > .wide { grid-column: auto; }
  .ref-branch { padding-left: 12px; }
  .ref-copy { flex-direction: column; }
  .ref-copy .btn { align-self: flex-start; }
  .ref-educator > summary { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-educator > summary svg, .ref-rules-card > summary svg { transition: none; }
}

/* The orders of the lab on the account page (js/orders.js, owner 2026-10-08).
   Theme tokens only: light and dark follow the theme. */
.account .orders { gap: 18px; }
.account .orders h2 + p { margin-top: 7px; }
.account .orders h2:focus { outline: none; }
.orders .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.orders-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.orders-list { display: flex; flex-direction: column; gap: 12px; }
.order { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-width: 0; }
.order-media { width: 88px; height: 88px; border-radius: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.order-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text3); background: var(--deep); }
.order-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.order-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
/* The status follows the h3 in the page (a heading reads the order first) and is drawn above it. */
.order-status { order: -1; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 10px 6px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
.order-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.order-status.s-in_progress { background: var(--accent-soft); color: var(--accent); }
.order-status.s-delivered { background: var(--green-soft); color: var(--green); }
.order-status.s-cancelled, .order-status.s-refunded { background: transparent; color: var(--text2); box-shadow: inset 0 0 0 1px var(--line); }
.account .orders .order-line { font-family: var(--font); font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--text2); overflow-wrap: anywhere; }
.order-name { color: var(--text); font-weight: 700; }
.order-sep { margin: 0 3px; color: var(--text3); }
.order-meta time { white-space: nowrap; }
.order-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.order-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14px; line-height: 1.45; min-width: 0; }
.order-item { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.order-variant, .order-qty { color: var(--text2); font-size: 13px; }
.order-variant { overflow-wrap: anywhere; }
.order-qty { font-variant-numeric: tabular-nums; }
.order-items .order-more { color: var(--text2); font-size: 13px; }
.order-ships { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.order-ship { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--blue); }
.order-ship > svg { margin-top: 2px; }
.order-ship.s-delivered { color: var(--green); }
.order-ship.s-attempted, .order-ship.s-failure { color: var(--red); }
.order-ship-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.order-ship-body > b { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text); }
.order-ship-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--text2); min-width: 0; }
.order-ship-no { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--text); overflow-wrap: anywhere; }
.account .orders .order-track { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--blue); }
.account .orders .order-track:hover { color: var(--text); }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.order-actions .btn { gap: 7px; }
.orders-note { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; line-height: 1.55; }
.orders-note > p { margin: 0; }
.orders-loading { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.orders-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: orders-pulse 1.2s ease-in-out infinite; }
.order-skeleton .order-media { border-color: transparent; background: var(--deep); }
.order-skeleton .sk { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.order-skeleton .sk i { display: block; height: 11px; border-radius: 6px; background: var(--deep); animation: orders-pulse 1.2s ease-in-out infinite; }
.order-skeleton .sk i:nth-child(1) { width: 32%; }
.order-skeleton .sk i:nth-child(2) { width: 58%; }
.order-skeleton .sk i:nth-child(3) { width: 44%; }
@keyframes orders-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 600px) {
  /* The picture beside the status and the line; the rest takes the full width. */
  .order { grid-template-columns: 56px minmax(0, 1fr); gap: 12px 14px; padding: 14px; }
  .order-main { display: contents; }
  .order-media { width: 56px; height: 56px; grid-row: 1; }
  .order-head { grid-column: 2; grid-row: 1; align-self: center; gap: 6px; }
  /* "30 de septiembre de 2026" is wider than the column at 320px: the day wraps here. */
  .order-meta time { white-space: normal; }
  .order-items, .order-ships, .order-actions { grid-column: 1 / -1; }
  .order-ph svg { width: 22px; height: 22px; }
  .order-actions { flex-direction: column; align-items: stretch; }
  .order-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .orders-dot, .order-skeleton .sk i { animation: none; }
}