/* Shared surface tokens for the standard Mentorlink previews. Brand colors live in index.html.
   Dark applies with the system setting unless data-theme on <html> forces light or dark (see preview-theme.js). */
:root{
  color-scheme:light;
  --ui-bg:#F7F9FC;
  --ui-surface:#FFFFFF;
  --ui-surface-muted:#EEF3F9;
  --ui-text:#0D1B3B;
  --ui-muted:#67728A;
  --ui-border:#DFE5EF;
  --ui-link:#0B6BDB;
  --ui-soft-blue:#E9F2FF;
  --ui-soft-blue-text:#075BD0;
  --ui-button-border:#C7D2E3;
  --ui-shadow:0 12px 36px rgba(13,27,59,.08);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ui-bg:#08152D;
    --ui-surface:#122443;
    --ui-surface-muted:#1A3153;
    --ui-text:#E2E9F5;
    --ui-muted:#B9C7DF;
    --ui-border:#354968;
    --ui-link:#80BEFF;
    --ui-soft-blue:#173B68;
    --ui-soft-blue-text:#BBDFFF;
    --ui-button-border:#4A607D;
    --ui-shadow:0 16px 44px rgba(0,0,0,.18);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ui-bg:#08152D;
  --ui-surface:#122443;
  --ui-surface-muted:#1A3153;
  --ui-text:#E2E9F5;
  --ui-muted:#B9C7DF;
  --ui-border:#354968;
  --ui-link:#80BEFF;
  --ui-soft-blue:#173B68;
  --ui-soft-blue-text:#BBDFFF;
  --ui-button-border:#4A607D;
  --ui-shadow:0 16px 44px rgba(0,0,0,.18);
}
/* Dark mode: body text is softened (#E2E9F5, ~12:1 on cards) to avoid glare; page headings keep the brighter white.
   Zero specificity, so any component that sets its own heading colour still wins. */
@media(prefers-color-scheme:dark){
  :where(:root:not([data-theme="light"]) .content) :where(h1,h2,h3){color:#F4F8FF}
}
:where(:root[data-theme="dark"] .content) :where(h1,h2,h3){color:#F4F8FF}
/* Headings: semibold (600) instead of the browser's bold (700); Plus Jakarta Sans reads heavy at display sizes.
   Zero specificity, so small uppercase labels and other headings that set their own weight keep it. */
:where(h1,h2,h3){font-weight:600}
/* Placeholders: the text colour at 60% (translucent white in dark mode, translucent navy in light), never a separate grey */
:root{--ui-placeholder:color-mix(in srgb,var(--ui-text) 60%,transparent)}
:where(input,textarea)::placeholder{color:var(--ui-placeholder);opacity:1}
/* Phones: iOS Safari zooms into any field with text under 16px, which makes the page wider than the screen.
   Keep fields at 16px, and clip anything (like the closed off-screen menu) past the right edge. */
@media(max-width:850px){
  input,textarea,select{font-size:16px!important}
  html,body{overflow-x:clip}
}
/* Back link: one style on every page that has one. Text link with a left arrow, naming its destination ("Back to …"). */
.back-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;margin:-10px 0 6px -2px;padding:0 2px;color:var(--ui-muted);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none}
.back-link:hover{color:var(--ui-text)}
.back-link:focus-visible{outline:3px solid var(--brand-azure);outline-offset:2px;border-radius:6px}
.back-link svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}