/* Walty's website: the app's soft "islands" look. No web fonts, no trackers, no scripts. */
:root {
  --ground: #f4f5f9;
  --island: #ffffff;
  --text: #111827;
  --muted: #5b6474;
  --line: #e5e7eb;
  --blue: #dce6ff; --blue-ink: #172554; --blue-strong: #3056d3;
  --lavender: #ece6ff; --lavender-ink: #33206e; --lavender-strong: #6a46db;
  --mint: #d5f2e3; --mint-ink: #0e4d30;
  --peach: #ffe3d4; --peach-ink: #6a2a10;
  --butter: #fff0c2; --butter-ink: #533d00;
  --radius: 28px;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f1117; --island: #1c1c1e; --text: #f5f5f7; --muted: #a1a1aa; --line: #2c2c2e;
    --blue: #1d2a4d; --blue-ink: #dbe4ff; --blue-strong: #8ea8ff;
    --lavender: #261f45; --lavender-ink: #e4dcff; --lavender-strong: #a68cff;
    --mint: #173326; --mint-ink: #c8f0dc;
    --peach: #3a2418; --peach-ink: #ffd9c6;
    --butter: #33290f; --butter-ink: #ffe9a8;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 500 17px/1.6 var(--sans);
}
a { color: var(--blue-strong); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lavender-strong); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font: 800 22px/1 var(--rounded); }
.brand:hover { text-decoration: none; }
.mark { width: 38px; height: 38px; border-radius: 13px; background: var(--lavender-strong); display: grid; place-items: center; }
.mark svg { width: 20px; height: 20px; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav a { padding: 8px 12px; border-radius: 12px; background: var(--island); color: var(--text); font-size: 14px; }
.nav a[aria-current="page"] { background: var(--lavender); color: var(--lavender-ink); }

/* Islands */
.island { background: var(--island); border-radius: var(--radius); padding: 22px; margin: 0 0 14px; }
.island.blue { background: var(--blue); color: var(--blue-ink); }
.island.lavender { background: var(--lavender); color: var(--lavender-ink); }
.island.mint { background: var(--mint); color: var(--mint-ink); }
.island.peach { background: var(--peach); color: var(--peach-ink); }
.island.butter { background: var(--butter); color: var(--butter-ink); }

h1 { font: 800 clamp(32px, 7vw, 46px)/1.1 var(--rounded); letter-spacing: -0.02em; margin: 6px 0 12px; }
h2 { font: 800 21px/1.3 var(--rounded); margin: 0 0 8px; }
h3 { font-size: 17px; margin: 18px 0 4px; }
p { margin: 0 0 10px; }
ul { margin: 0 0 10px; padding-inline-start: 22px; }
li { margin: 4px 0; }
.lead { font-size: 19px; color: var(--muted); max-width: 34em; }
.small { font-size: 14px; color: var(--muted); }

/* Home */
.hero { padding: 34px 26px; }
.hero .lead { color: inherit; opacity: 0.85; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.grid .island { margin: 0; }
.badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 18px; border-radius: 16px; background: var(--text); color: var(--ground); font-weight: 800; }
.badge:hover { text-decoration: none; }
.soon { opacity: 0.7; cursor: default; }

/* Long text pages */
.doc h2 { margin-top: 4px; }
.doc .island p:last-child, .doc .island ul:last-child { margin-bottom: 0; }
.updated { font-size: 14px; color: var(--muted); margin: -4px 0 18px; }

/* Arabic */
[dir="rtl"] body, body[dir="rtl"] { font-family: var(--sans); }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; }

@media (max-width: 560px) {
  .nav { width: 100%; }
  .nav a { flex: 1; text-align: center; padding: 9px 6px; }
  .island { padding: 20px 18px; }
  .hero { padding: 26px 20px; }
}

footer { padding: 18px 0 40px; font-size: 14px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
footer a { color: var(--muted); font-weight: 600; }