/* The Apps launcher: the Planner's look (web/planner/app.css tokens, copied), two big tiles. Dark mode inverts. */

:root {
  --page: #f2f2f5;
  --paper: #ffffff;
  --ink: #0b0b0c;
  --ink-2: #3a3a3f;
  --mute: #86868c;
  --faint: #c9c9ce;
  --hair: #e6e6ea;
  --soft: #f0f0f3;
  --on-ink: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .06);
  --safe-t: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --page: #000000;
  --paper: #161618;
  --ink: #f5f5f7;
  --ink-2: #d4d4d8;
  --mute: #8e8e94;
  --faint: #4a4a4e;
  --hair: #2a2a2d;
  --soft: #232326;
  --on-ink: #000000;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #000000;
    --paper: #161618;
    --ink: #f5f5f7;
    --ink-2: #d4d4d8;
    --mute: #8e8e94;
    --faint: #4a4a4e;
    --hair: #2a2a2d;
    --soft: #232326;
    --on-ink: #000000;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 17px/1.35 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden; min-height: 100vh; padding-bottom: calc(var(--safe-b) + 28px);
  user-select: none; -webkit-user-select: none;
}
body.dev { padding-top: 22px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#view { max-width: 600px; margin: 0 auto; padding: 0 16px; }

#dev-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 22px;
  padding: 3px 12px; font: 11px/16px var(--mono);
  background: var(--ink); color: var(--on-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; opacity: .9;
}

/* small UPPERCASE mono labels, as in the Finance app */
.label { display: block; font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

.hd { padding: calc(var(--safe-t) + 18px) 4px 18px; }
.hd h1 { margin: 4px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }

.tiles { display: flex; flex-direction: column; gap: 14px; }
.tile {
  display: flex; align-items: center; gap: 16px; min-height: 128px; padding: 22px 18px 22px 20px;
  border-radius: 22px; background: var(--paper); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow), 0 0 0 .5px var(--hair);
  transition: transform .12s ease;
  animation: rise .35s cubic-bezier(.2, .8, .2, 1) both;
}
.tile + .tile { animation-delay: .05s; }
.tile:active { transform: scale(.98); }
.tile-ic {
  flex: none; width: 56px; height: 56px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--on-ink);
}
.tile-ic svg { display: block; }
.tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.tile-line { min-height: 20px; font-size: 15px; line-height: 1.3; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-line:empty { visibility: hidden; }
.tile-line.loading { visibility: visible; width: 60%; border-radius: 6px; background: var(--soft); animation: pulse 1.2s ease-in-out infinite; }
.tile-line .baht { font-size: .72em; vertical-align: .38em; margin-right: 1px; font-weight: 600; }
.tile-line b { font-weight: 750; color: var(--ink); }
.tile-go { flex: none; color: var(--faint); }

.fine { font-size: 13px; line-height: 1.4; color: var(--mute); margin: 0; }
.fine.pad { padding: 16px; }

@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile-line.loading { animation: none; }
  .tile { transition: none; }
}