/* Shared mobile-SPA styles for dymokomi apps (atlas, memory). App-specific rules
   live in each page's own <style>. */
:root {
  --ink: #1a1a1a; --muted: #6b6b6b; --faint: #b8b8b8;
  --bg: #fbfaf8; --panel: #fffdf9; --rule: #e7e4df; --accent: #2f5d50;
  --beat: #eef3f0; --beat-rule: #cfe0d8;
  --field: #fff; --on-accent: #fff; --press: rgba(0,0,0,.04); --code-bg: rgba(0,0,0,.05);
  --danger: #a23; --danger-rule: #e0c4c4;
}
:root[data-theme="dark"] {
  --ink: #e9e6df; --muted: #9a958a; --faint: #5d594f;
  --bg: #14130f; --panel: #1c1a15; --rule: #2d2a23; --accent: #7fb8a6;
  --beat: #1f2b26; --beat-rule: #36534b;
  --field: #1c1a15; --on-accent: #10211c; --press: rgba(255,255,255,.06); --code-bg: rgba(255,255,255,.07);
  --danger: #e08c8c; --danger-rule: #5a3a3a;
}
html { color-scheme: light dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 17px/1.6 ui-serif, Georgia, "Times New Roman", serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
#stack { position: fixed; inset: 0; }

.screen { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,.0,.2,1); box-shadow: -8px 0 24px rgba(0,0,0,.06); }
.screen.in { transform: translateX(0); }
.screen.out { transform: translateX(100%); }
.screen.root { transform: translateX(0); box-shadow: none; }

.bar { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; padding: max(env(safe-area-inset-top), .6rem) 1rem .6rem;
  background: var(--panel); border-bottom: 1px solid var(--rule); }
.back { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1.5rem; line-height: 1; color: var(--accent);
  background: none; border: 0; padding: 0 .4rem 0 0; cursor: pointer; }
.bar .title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .kicker { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.menu-btn { margin-left: auto; font-size: 1.25rem; line-height: 1; background: none; border: 0; color: var(--accent);
  cursor: pointer; padding: .2rem .3rem; font-family: ui-sans-serif, system-ui, sans-serif; }
.menu { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 3rem); right: .8rem; background: var(--panel);
  border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); overflow: hidden; z-index: 40; min-width: 10rem; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: .75rem 1rem; font: inherit; color: var(--ink); cursor: pointer; }
.menu-item:last-child { border-bottom: 0; }
.menu-item.current { color: var(--accent); font-weight: 600; }
.menu-item:active { background: var(--press); }

.content { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .5rem 0 4rem; }
.wrap { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }

.row { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: 1rem .25rem; cursor: pointer; font: inherit; color: inherit; }
.row .name { display: block; font-size: 1.12rem; letter-spacing: -.01em; }
.row .sub { display: block; color: var(--muted); font-size: .98rem; margin-top: .25rem; }
.row .chev { float: right; color: var(--faint); font-family: ui-sans-serif, system-ui, sans-serif; }
.row:active { background: var(--press); }

.vlabel { display: block; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin: 1.2rem .15rem .4rem; }
.vactions { display: flex; gap: .6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.vbtn { font: inherit; font-family: ui-sans-serif, system-ui, sans-serif; padding: .6rem 1.1rem; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); cursor: pointer; }
.vbtn.ghost { background: none; color: var(--accent); border: 1px solid var(--beat-rule); }
.vbtn.danger { background: none; color: var(--danger); border: 1px solid var(--danger-rule); margin-left: auto; }

.efield { white-space: pre-wrap; outline: none; padding: .35rem .5rem; border-radius: 6px; margin: 0 0 .3rem; }
.efield:focus { background: var(--field); box-shadow: 0 0 0 2px var(--beat-rule); }
.efield:empty::before { content: attr(data-ph); color: var(--faint); }
.efield.ename { font-size: 1.4rem; letter-spacing: -.01em; }
.efield.esum { color: var(--muted); }

.empty { color: var(--faint); font-style: italic; padding: 2rem .25rem; }
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(2rem); opacity: 0;
  background: var(--ink); color: var(--bg); font-family: ui-sans-serif, system-ui, sans-serif; font-size: .8rem;
  padding: .5rem .9rem; border-radius: 999px; transition: all .2s; pointer-events: none; z-index: 50; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: .94; }
.signin { max-width: 30rem; margin: 18vh auto; text-align: center; padding: 0 1.5rem; }
.signin a { color: var(--accent); }