/* apps.exordix.com — site & app-page styles. No external requests: system fonts only. */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f8f6;
  --text: #14161a;
  --text-muted: #5b6169;
  --border: #e6e8e3;
  --accent: #c8ff3d;
  --accent-text: #14161a;
  --card-bg: #ffffff;
  --shadow: 0 1px 2px rgba(20, 22, 26, 0.03), 0 8px 20px -14px rgba(20, 22, 26, 0.10);
  --shadow-hover: 0 2px 6px rgba(20, 22, 26, 0.05), 0 14px 28px -16px rgba(20, 22, 26, 0.16);
  --radius: 16px;
  --max-width: 960px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101114;
    --bg-soft: #17181c;
    --text: #f2f3f0;
    --text-muted: #9a9fa6;
    --border: #2a2c31;
    --accent: #c8ff3d;
    --accent-text: #101114;
    --card-bg: #17181c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 20px -14px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 28px -16px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg: #101114;
  --bg-soft: #17181c;
  --text: #f2f3f0;
  --text-muted: #9a9fa6;
  --border: #2a2c31;
  --accent: #c8ff3d;
  --accent-text: #101114;
  --card-bg: #17181c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 20px -14px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 28px -16px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

header.site { padding: 28px 0 8px; border-bottom: 1px solid var(--border); }

header.site .top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  font-size: 13px;
}

.lang-switch a {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lang-switch a.active { background: var(--accent); color: var(--accent-text); }
.lang-switch a:not(.active):hover { color: var(--text); }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
}

.brand .mark { position: relative; }
.brand .mark::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: -2px;
  height: 4px; border-radius: 2px;
  background: var(--accent);
}

.breadcrumbs { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }

main { padding: 48px 0 80px; position: relative; }

h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
h2 { font-size: 22px; font-weight: 600; margin: 40px 0 16px; }
h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
p { margin: 0 0 16px; color: var(--text); }

.lede { font-size: 18px; color: var(--text-muted); max-width: 60ch; }

/* ---- app icon marks ---- */
/* The apps' real store tiles, drawn edge to edge: no inset and no ground of
   ours behind them, or the visitor stops recognising the icon they tapped in
   the store. The hairline is inset so it rides on top of the artwork —
   Caloryzor's tile is white and would otherwise bleed into the page. */
.app-icon {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border-radius: 22.5%; /* the iOS tile ratio: holds at 40px and at 68px alike */
  box-shadow: inset 0 0 0 1px var(--border);
}
.app-icon img { display: block; width: 100%; height: 100%; }
.app-icon--sm { width: 40px; height: 40px; }
.app-icon--lg {
  width: 68px; height: 68px;
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.card h3 { margin: 2px 0 0; font-size: 20px; }
.card p { margin: 0; color: var(--text-muted); font-size: 15px; }
.card .arrow {
  margin-top: auto;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card .arrow-glyph { transition: transform 0.18s ease; display: inline-block; }
.card:hover .arrow-glyph { transform: translateX(3px); }

/* ---- app page hero ---- */
.app-hero { display: flex; align-items: flex-start; gap: 18px; }
.app-hero-text { min-width: 0; }
.app-hero h1 { margin-bottom: 6px; }

.panel {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 4px;
  margin-top: 32px;
}
.panel h2 { margin-top: 0; }

.doc-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.doc-list li {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.doc-list li:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.doc-list a { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; text-decoration: none; color: var(--text); font-weight: 500; gap: 12px; }
.doc-list a:hover { color: var(--accent-text); }
.doc-row-label { display: inline-flex; align-items: center; gap: 12px; }
.doc-icon { display: inline-flex; color: var(--text-muted); flex: none; }
.doc-list a:hover .doc-icon { color: var(--accent-text); }
.doc-list a .go { color: var(--text-muted); font-weight: 400; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; flex: none; }
.doc-list a:hover .go .arrow-glyph { transform: translateX(3px); }
.doc-list.archive-list a { justify-content: flex-start; gap: 10px; font-weight: 400; color: var(--text-muted); }

.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.pill {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-primary .arrow-glyph { transition: transform 0.18s ease; }
.btn-primary:hover .arrow-glyph { transform: translateX(3px); }

.placeholder-note {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.placeholder-note strong { color: var(--text); }

footer.site { border-top: 1px solid var(--border); padding: 32px 0 40px; color: var(--text-muted); font-size: 14px; }
footer.site a { color: var(--text-muted); }