/* site-ui.css: the shared ian.lu look (extracted from the home page redesign).

   USAGE
   - Link it AFTER style.css:  <link rel="stylesheet" href="site-ui.css?v=N">
   - Put class "ui" on <body>. That turns on the tokens below, the soft accent glow and a fine
     grain behind the page. Everything is plain CSS custom properties, so the theme system
     (theme.js: light/dark + accent) keeps working. Never hard-code colours: use --text, --muted,
     --accent, --accent-text, --card, --card-opaque, --border.
   - Components are opt-in "ui-*" classes (BEM-ish: ui-tile, ui-tile__ico, ui-tiles--big):
       ui-header + ui-brand          flat top bar aligned to the page column
       ui-page                       centred column (max 1040px), padded for iPad and phone
       ui-title                      section title (rounded display font, large)
       ui-card / ui-card--accent     soft panel / accent-tinted panel (calls to action)
       ui-tiles > ui-tile            launcher grid; tile = ui-tile__ico + ui-tile__name + ui-tile__sub
                                     (+ ui-tile__badge for a corner mark). Tint a tile with
                                     style="--h:#4fc37a" (defaults to the accent).
                                     ui-tiles--big makes a 2/4-column grid of big icon-on-top tiles.
       ui-btn + ui-btn--primary|ghost   buttons, 46px tall (>= 44px tap target), pill-less rounded
       ui-input                      text field / select / textarea, 16px so iOS never zooms
   - Tokens you may use anywhere inside .ui: --font-display, --r-tile, --r-chip, --r-panel,
     --ink (shadow tint as "r g b", use rgb(var(--ink)/.3)), --tile-edge, --ease.
   - Motion respects prefers-reduced-motion; prefers-contrast:more swaps shadows for a 2px outline.
   - Not applied to any page except index.html yet. The home-only bits (hero, clock, app groups,
     footer) stay in index.html. */

/* ---- tokens + page backdrop ---- */
.ui {
  --font-display: ui-rounded, "SF Pro Rounded", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-tile: 20px;
  --r-chip: 14px;
  --r-panel: 28px;
  --ink: 20 24 70; /* shadow tint (navy), never pure black */
  --tile-edge: color-mix(in srgb, var(--text) 9%, transparent);
  --ease: cubic-bezier(.2, .8, .2, 1);
  background:
    radial-gradient(58rem 30rem at 6% -8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
    var(--bg);
}
/* fixed + pointer-events none, so the grain never repaints on scroll */
.ui::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
html[data-theme="light"] .ui::before { opacity: .04; mix-blend-mode: multiply; }

/* ---- page header + column ---- */
/* html body.ui: must outrank mobile.css's `body > header.bar` padding on phones */
html body.ui .ui-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 28px 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ui-brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
}
.ui .ui-page {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px 72px;
}
@media (max-width: 620px) {
  html body.ui .ui-header { padding: 12px 16px 0; }
  .ui .ui-page { padding: 0 16px 56px; }
}

/* ---- section title ---- */
.ui-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--text);
}

/* ---- cards ---- */
.ui-card {
  padding: clamp(18px, 3vw, 26px);
  border: 0;
  border-radius: var(--r-panel);
  background: var(--card);
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--tile-edge);
}
.ui-card--accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--card-opaque)), color-mix(in srgb, var(--accent) 6%, var(--card-opaque)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ---- tiles ---- */
.ui-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 12px;
  width: 100%;
  max-width: none;
}
.ui-tiles--big {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 700px) {
  .ui-tiles--big { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ui-tile {
  --h: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico name" "ico sub";
  align-items: center;
  column-gap: 14px;
  row-gap: 1px;
  min-height: 84px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-tile);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--tile-edge), 0 1px 2px rgb(var(--ink)/.05), 0 14px 30px -18px rgb(var(--ink)/.35);
  transition: transform .35s var(--ease), background-color .2s, box-shadow .35s var(--ease);
}
.ui-tile:hover {
  transform: translateY(-3px);
  background: var(--card-opaque);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 48%, transparent), 0 18px 34px -18px rgb(var(--ink)/.5);
}
.ui-tile:active { transform: scale(.985); transition-duration: .08s; }
.ui-tile .ui-tile__ico {
  grid-area: ico;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-chip);
  font-size: 27px;
  line-height: 1;
  background: color-mix(in srgb, var(--h) 20%, var(--card-opaque));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 30%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  transition: transform .45s var(--ease);
}
.ui-tile:hover .ui-tile__ico { transform: rotate(-5deg) scale(1.08); }
.ui-tile .ui-tile__name {
  grid-area: name;
  align-self: end;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--text);
}
.ui-tile .ui-tile__sub {
  grid-area: sub;
  align-self: start;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
.ui-tile .ui-tile__badge { position: absolute; top: 12px; right: 14px; font-size: 12px; line-height: 1; opacity: .55; }
/* big tiles (home-screen style): icon on top */
.ui-tiles--big > .ui-tile {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "ico" "name" "sub";
  align-content: start;
  row-gap: 3px;
  min-height: 158px;
  padding: 18px;
}
.ui-tiles--big > .ui-tile .ui-tile__ico { width: 60px; height: 60px; margin-bottom: 16px; border-radius: 18px; font-size: 32px; }
.ui-tiles--big > .ui-tile .ui-tile__name { align-self: start; font-size: 17px; }

/* ---- buttons ---- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), filter .2s, background-color .2s, border-color .2s;
}
.ui-btn:hover { transform: translateY(-2px); }
.ui-btn:active { transform: scale(.98); }
.ui-btn--primary {
  border: 0;
  background: var(--accent);
  color: var(--accent-foreground);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}
.ui-btn--primary:hover { filter: brightness(1.06); }
.ui-btn--ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent-border); }

/* ---- inputs ---- */
.ui-input {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--r-chip);
  background: var(--card-opaque);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow .2s;
}
.ui-input::placeholder { color: var(--muted); opacity: 1; }
.ui-input:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ui-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
textarea.ui-input { min-height: 96px; resize: vertical; line-height: 1.45; }

/* ---- keyboard focus, motion, contrast ---- */
.ui-tile:focus-visible, .ui-btn:focus-visible, .ui-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ui-tile, .ui-tile .ui-tile__ico, .ui-btn, .ui-input { transition: none; }
}
@media (prefers-contrast: more) {
  .ui-tile, .ui-card { box-shadow: 0 0 0 2px var(--text); }
}