/* Hallmark · Ink · app screen · brand: xuefa orange · flat paper and ruled directories */
@font-face {
  font-family: "Epilogue";
  src: url("../assets/fonts/Epilogue-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-ui: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-display: var(--font-ui);
  --ink-paper: #fff;
  --ink-ground: #fafaf9;
  --ink-well: #f4f4f2;
  --ink-rule: #dedfdb;
  --ink-strong-rule: #a4a8a3;
  --ink-text: #202421;
  --ink-muted: #59625d;
  --ink-accent: #a84608;
  --ink-accent-soft: #fff1e7;
  --portal-page: var(--ink-ground);
  --portal-surface: var(--ink-paper);
  --portal-surface-soft: var(--ink-well);
  --portal-line: var(--ink-rule);
  --portal-ink: var(--ink-text);
  --portal-muted: var(--ink-muted);
  --portal-accent: var(--ink-accent);
  --portal-accent-soft: var(--ink-accent-soft);
}
.portal-topbar { background: var(--ink-paper); backdrop-filter: none; border-bottom: 1px solid var(--ink-rule); }
.portal-brand__copy strong { font-size: 15px; font-weight: 650; }
.portal-brand__copy small { letter-spacing: 0; }
.portal-topnav .portal-nav-item { color: var(--ink-muted); }
.portal-topnav .portal-nav-item.active { color: var(--ink-text); border-bottom-color: var(--ink-accent); }
.portal-content { padding-bottom: 20px; }
.portal-page__title, .catalog__header h1, .portal-skills-page__title { letter-spacing: -.025em; }
.portal-page__note, .catalog__header { border-bottom-color: var(--ink-strong-rule); }
.portal-eyebrow, .landing__eyebrow, .portal-access-item__index, .landing-destination__top span { letter-spacing: 0; text-transform: none; }
.landing__hero { padding: clamp(36px, 5vw, 68px) 0; border-bottom: 1px solid var(--ink-strong-rule); }
.landing__title { margin: 16px 0; letter-spacing: -.035em; }
.landing__eyebrow { color: var(--ink-muted); }
.landing__destinations { display: block; border-bottom: 0; }
.landing-destination, .landing-destination:first-child, .landing-destination:last-child {
  display: grid; grid-template-columns: minmax(130px, .55fr) minmax(0, 2fr) auto;
  align-items: start; gap: 24px; min-height: 0; padding: 24px 0; border-bottom: 1px solid var(--ink-rule);
}
.landing-destination + .landing-destination { border-left: 0; }
.landing-destination__top { justify-content: flex-start; gap: 10px; color: var(--ink-muted); }
.landing-destination__top span { font-size: 13px; font-weight: 600; }
.landing-destination h2 { margin: 0 0 7px; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.02em; }
.landing-destination p { max-width: 680px; font-size: 14px; }
.landing-destination button { margin: 0; align-self: center; }
.landing-preview { margin-top: 24px; background: var(--ink-well); box-shadow: none; }
.landing-preview__tile, .landing-preview__tile:hover { box-shadow: none; }
.portal-access-list { display: block; border-top: 1px solid var(--ink-strong-rule); }
.portal-access-item { gap: 32px; padding: 28px 0; border: 0; border-bottom: 1px solid var(--ink-rule); border-radius: 0; background: transparent; box-shadow: none; }
.portal-access-item--deferred { background: transparent; }
.portal-access-item__icon { border: 1px solid var(--ink-rule); background: var(--ink-well); color: var(--ink-accent); }
.portal-access-item__name { letter-spacing: -.015em; }
.portal-access-item__lead { margin: 14px 0 18px; font-size: 15px; }
.portal-access-item__details { margin: 18px 0; }
.portal-access-item__process { color: var(--ink-muted); }
.portal-access-item__side { padding-left: 24px; }
.portal-access-item__action { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--portal-motion-control) var(--portal-motion-smooth), text-decoration-color var(--portal-motion-control) var(--portal-motion-smooth); }
.portal-access-item__action:hover { text-decoration-color: currentColor; }
.portal-button:focus-visible, .portal-nav-item:focus-visible, .landing-destination button:focus-visible, .portal-access-item__action:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 3px; }
@media (max-width: 767px) {
  .landing-destination, .landing-destination:first-child, .landing-destination:last-child { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 21px 0; }
  .landing-destination button { margin-top: 1px; }
  .portal-access-item { display: block; padding: 24px 0; }
  .portal-access-item__side { margin-top: 18px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--ink-rule); }
  .portal-access-item__details { grid-template-columns: 1fr; gap: 18px; }
  .portal-access-item__lead { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .portal-access-item__action { transition: none; } }

/* A quieter sign-in surface; account forms keep their existing states. */
.portal-auth, .portal-auth__visual { background: var(--ink-ground); }
.portal-auth__visual::after { background: none; }
.portal-auth__side { border-left-color: var(--ink-rule); background: var(--ink-paper); box-shadow: none; }
.portal-auth__panel { border-color: var(--ink-rule); border-radius: 12px; box-shadow: none; }
.portal-auth__security { letter-spacing: 0; }

/* The typed word ends its line so changing its length never moves the next line. */
.landing__typed { display: inline-block; width: auto; white-space: nowrap; vertical-align: baseline; }

/* Secondary navigation and a short, replayable introduction. */
.portal-more { position: relative; display: flex; align-items: center; align-self: stretch; }
.portal-topnav .portal-more__trigger { gap: 5px; }
.portal-more__panel { position: absolute; z-index: 120; top: calc(100% - 7px); right: 0; min-width: 160px; padding: 6px; border: 1px solid var(--portal-line); border-radius: 12px; background: var(--portal-surface); box-shadow: var(--portal-shadow); }
.portal-more__panel button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 7px; color: var(--portal-ink); font: inherit; font-size: 14px; text-align: left; transition: background-color var(--portal-motion-control) var(--portal-motion-smooth), color var(--portal-motion-control) var(--portal-motion-smooth); }
.portal-more__panel button:hover { background: var(--portal-surface-soft); color: var(--portal-accent); }
.portal-more__panel button:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: -2px; }
.portal-more--mobile { display: block; }
.portal-more--mobile .portal-more__trigger { justify-content: space-between; }
.portal-more--mobile .portal-more__panel { position: static; margin: 0 0 6px 12px; border: 0; border-left: 1px solid var(--portal-line); border-radius: 0; background: transparent; box-shadow: none; }
.portal-guide { padding: 28px; overflow: auto; max-height: min(680px, calc(100dvh - 40px)); }
.portal-guide__top { display: flex; justify-content: space-between; color: var(--portal-muted); font-size: 13px; }
.portal-guide__body { min-height: 210px; padding: 32px 0 24px; }
.portal-guide__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border: 1px solid var(--portal-line); border-radius: 12px; color: var(--portal-accent); background: var(--portal-surface-soft); }
.portal-guide__body h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.3; }
.portal-guide__body p { margin: 0; color: var(--portal-muted); font-size: 15px; line-height: 1.7; }
.portal-guide__progress { display: flex; gap: 6px; margin-bottom: 22px; }
.portal-guide__progress span { width: 24px; height: 3px; border-radius: 3px; background: var(--portal-line); }
.portal-guide__progress span.is-active { background: var(--portal-accent); }
.portal-guide__actions, .portal-guide__actions > div { display: flex; align-items: center; gap: 10px; }
.portal-guide__actions { justify-content: space-between; }
.portal-guide__skip { min-height: 44px; padding: 0 8px; color: var(--portal-muted); font: inherit; font-size: 14px; }
.portal-guide__skip:hover { color: var(--portal-accent); }
.portal-guide button:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 2px; }
@media (max-width: 767px) { .portal-guide { padding: 22px; } .portal-guide__body { min-height: 200px; } }

/* Ink directory: short entries first, with optional detail below each one. */
.portal-access-item { grid-template-columns: minmax(0, 1fr) minmax(130px, 180px); align-items: start; gap: 28px; padding: 24px 0; }
.portal-access-item__heading { gap: 12px; }
.portal-access-item__icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 10px; }
.portal-access-item__icon svg { width: 20px; height: 20px; }
.portal-access-item__index { margin-bottom: 1px; color: var(--portal-muted); font-size: 11px; font-weight: 500; }
.portal-access-item__name { font-size: 19px; font-weight: 650; }
.portal-access-item__lead { max-width: 72ch; margin: 12px 0 4px; font-size: 14px; line-height: 1.65; }
.portal-access-item__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; color: var(--portal-muted); background: transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color var(--portal-motion-control) var(--portal-motion-smooth); }
.portal-access-item__toggle:hover { color: var(--portal-accent); }
.portal-access-item__toggle:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 3px; }
.portal-access-item__toggle svg { transition: transform var(--portal-motion-control) var(--portal-motion-smooth); }
.portal-access-item__toggle svg.is-open { transform: rotate(180deg); }
.portal-access-item__expanded { max-width: 920px; }
.portal-access-item__details { margin: 12px 0 18px; gap: 20px 40px; }
.portal-access-item__process { padding-top: 14px; }
.portal-access-item__side { align-items: flex-end; justify-content: flex-start; gap: 4px; padding: 4px 0 0; border: 0; text-align: right; }
.portal-access-item__action { min-height: 40px; }
.landing__title { white-space: nowrap; }
@media (max-width: 767px) {
  .landing__title { font-size: clamp(19px, 6.5vw, 32px); white-space: nowrap; }
  .portal-access-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 20px 0; }
  .portal-access-item__main { grid-column: 1 / -1; }
  .portal-access-item__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; padding: 0; border: 0; text-align: left; }
  .portal-access-item__details { grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .portal-access-item__toggle, .portal-access-item__toggle svg { transition: none; } }

/* The desktop navigation needs more room than a narrow tablet provides. */
@media (min-width: 768px) and (max-width: 920px) {
  .portal-topnav { display: none; }
  .portal-topbar__account, .portal-topbar__admin, .portal-topbar__logout { display: none; }
  .portal-topbar__mobile-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 7px; color: var(--portal-ink); }
}

/* Guided tour: the real navigation remains visible through the spotlight. */
.portal-tour { position: fixed; inset: 0; z-index: 9996; }
.portal-tour__shade { position: fixed; background: rgba(25, 33, 35, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.portal-tour__spot { position: fixed; border: 2px solid var(--portal-surface); border-radius: 12px; pointer-events: auto; box-shadow: 0 0 0 2px var(--portal-accent); }
.portal-tour__card { position: fixed; top: 88px; left: 16px; width: min(364px, calc(100% - 32px)); box-sizing: border-box; padding: 22px; border: 1px solid var(--portal-line); border-radius: 12px; background: var(--portal-surface); box-shadow: 0 16px 48px rgba(25,33,35,.18); }
.portal-tour__card .portal-guide__body { min-height: 0; padding: 20px 0; }
.portal-tour__card .portal-guide__body h2 { font-size: 19px; }
.portal-tour__card .portal-guide__body p { font-size: 14px; }
.portal-tour__card .portal-guide__progress { margin-bottom: 18px; }
.portal-tour__mobile-hint { display: none; }
@media (max-width: 920px) { .portal-tour__mobile-hint { display: block; margin-top: 8px; } }
@media (max-width: 440px) { .portal-tour__card { left: 16px !important; } }
@media (prefers-reduced-motion: reduce) { .portal-tour * { transition: none !important; } }

/* Keep directory descriptions readable and remove inherited bottom padding. */
.portal-access-item__lead { font-weight: 400; }
.landing-destination p { margin: 0; font-weight: 400; }
.portal-page:has(.portal-access-list) { padding-bottom: 28px; }
.landing { padding-bottom: 8px; }
@media (max-width: 767px) {
  .portal-page:has(.portal-access-list) { padding-bottom: 20px; }
}

/* Short public pages end at their content; do not push their footer below the viewport. */
#root:has(.landing), #root:has(.portal-access-list),
.portal-shell:has(.landing), .portal-shell:has(.portal-access-list),
.portal-main:has(.landing), .portal-main:has(.portal-access-list) { min-height: 0; }

/* Ink catalogue states: one quiet label and a separate, legible action. */
.portal-access-item__status {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px;
  border: 1px solid var(--ink-rule); border-radius: 999px;
  color: var(--ink-muted); background: transparent; font-size: 12px; font-weight: 400; line-height: 1.4;
}
.portal-access-item__status > svg { display: none; }
.portal-access-item__status--granted {
  border-color: transparent; color: var(--ink-accent); background: var(--ink-accent-soft);
}
.portal-access-item__availability { color: var(--ink-muted); }
.portal-access-item__action, .portal-access-item__action--primary {
  color: var(--ink-text); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--ink-rule); text-underline-offset: 4px;
}
.portal-access-item__action:hover, .portal-access-item__action--primary:hover {
  color: var(--ink-accent); text-decoration-color: var(--ink-accent);
}
.portal-access-item__action:disabled { color: var(--ink-muted); text-decoration: none; opacity: 1; }

/* Share spare viewport height across real homepage sections instead of leaving a blank tail. */
.landing { display: flex; flex-direction: column; min-height: calc(100svh - 151px); }
.landing__hero { display: flex; align-items: center; flex: 1 0 auto; }
.landing__destinations { display: flex; flex: 1 0 auto; flex-direction: column; }
.landing-destination, .landing-destination:first-child, .landing-destination:last-child { flex: 1 0 auto; align-content: center; }
@media (max-width: 767px) {
  .landing { min-height: calc(100svh - 137px); }
}