/*
 * SyncSilver Apps portal (apps.syncsilver.com). Same tokens as the SyncSilver login theme in corporate-apps/authentication
 * (theme/syncsilver/login/resources/css/syncsilver.css), which come from the ssp/base mockups: light by default,
 * dark when the device prefers dark, and high contrast when the device asks for more contrast.
 * Typeface: Atkinson Hyperlegible (SIL Open Font License, OFL.txt).
 */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens: light theme */
:root {
  --ss-bg: #eef1f5;
  --ss-surface: #fbfcfd;
  --ss-border: #b9c2ce;
  --ss-text: #141a22;
  --ss-text-muted: #333d4a;
  --ss-accent: #084c9e;
  --ss-accent-hover: #063d82;
  --ss-on-accent: #ffffff;
  --ss-accent-soft: #dbe9fa;
  --ss-focus: #0b3fd6;
  --ss-focus-inner: #ffffff;
  --ss-brand-band: #0e2841;
  --ss-shadow: 0 6px 20px rgb(20 30 50 / 0.14);
  --ss-border-width: 1px;
  --ss-focus-width: 3px;
  --ss-logo: url("syncsilver-logo-light.svg");
  --ss-font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light dark;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --ss-bg: #0f1318;
    --ss-surface: #161b22;
    --ss-border: #3a4452;
    --ss-text: #e8ecf2;
    --ss-text-muted: #c0c8d3;
    --ss-accent: #7cc4ff;
    --ss-accent-hover: #a2d5ff;
    --ss-on-accent: #04121f;
    --ss-accent-soft: #15324a;
    --ss-focus: #ffdf4d;
    --ss-focus-inner: #0f1318;
    --ss-brand-band: #7cc4ff;
    --ss-shadow: 0 6px 24px rgb(0 0 0 / 0.35);
    --ss-logo: url("syncsilver-logo-dark.svg");
  }
}

/* High contrast: pure black or white, thicker borders and focus ring */
@media (prefers-contrast: more) {
  :root {
    --ss-bg: #ffffff;
    --ss-surface: #ffffff;
    --ss-border: #000000;
    --ss-text: #000000;
    --ss-text-muted: #000000;
    --ss-accent: #003a8c;
    --ss-accent-hover: #002a66;
    --ss-focus: #0000cc;
    --ss-brand-band: #000000;
    --ss-shadow: none;
    --ss-border-width: 2px;
    --ss-focus-width: 4px;
    --ss-logo: url("syncsilver-logo-mono-black.svg");
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --ss-bg: #000000;
    --ss-surface: #0a0a0a;
    --ss-border: #9a9a9a;
    --ss-text: #ffffff;
    --ss-text-muted: #f0f0f0;
    --ss-accent: #8fd3ff;
    --ss-accent-hover: #c2e7ff;
    --ss-on-accent: #000000;
    --ss-focus: #ffff00;
    --ss-focus-inner: #000000;
    --ss-brand-band: #ffffff;
    --ss-logo: url("syncsilver-logo-mono-white.svg");
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ss-bg);
  color: var(--ss-text);
  font-family: var(--ss-font);
  font-size: 1.125rem;
  line-height: 1.5;
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 3rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Logo as in the login theme; the name stays readable for screen readers */
.logo {
  background: var(--ss-logo) no-repeat center / contain;
  width: min(300px, 80vw);
  height: 62px;
  margin: 0 auto 1rem;
}

.lead {
  margin: 0 0 2rem;
  text-align: center;
  color: var(--ss-text-muted);
}

.apps {
  display: grid;
  gap: 1rem;
}

/* Large targets, as in the mockups (at least 44 px) */
.app {
  display: block;
  min-height: 44px;
  padding: 1.25rem 1.5rem;
  border: var(--ss-border-width) solid var(--ss-border);
  border-top: 6px solid var(--ss-brand-band);
  border-radius: 14px;
  background: var(--ss-surface);
  box-shadow: var(--ss-shadow);
  color: var(--ss-text);
  text-decoration: none;
}
.app:hover {
  background: var(--ss-accent-soft);
}
.app.primary {
  background: var(--ss-accent);
  border-color: var(--ss-accent);
  color: var(--ss-on-accent);
}
.app.primary:hover {
  background: var(--ss-accent-hover);
}
.app-title {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
}
.app-text {
  display: block;
  margin-top: 0.25rem;
}
.app:not(.primary) .app-text {
  color: var(--ss-text-muted);
}

.help {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border: var(--ss-border-width) solid var(--ss-border);
  border-radius: 14px;
  background: var(--ss-surface);
}
.help h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}
.help ol {
  padding-left: 1.5rem;
}
.help li + li {
  margin-top: 0.5rem;
}

/* A highly visible focus ring */
a:focus-visible {
  outline: var(--ss-focus-width) solid var(--ss-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ss-focus-inner);
}