/* 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;
}
* { 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: #00000008; }

.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: #00000006; }

.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: #fff; cursor: pointer; }
.vbtn.ghost { background: none; color: var(--accent); border: 1px solid var(--beat-rule); }
.vbtn.danger { background: none; color: #a23; border: 1px solid #e0c4c4; margin-left: auto; }

.efield { white-space: pre-wrap; outline: none; padding: .35rem .5rem; border-radius: 6px; margin: 0 0 .3rem; }
.efield:focus { background: #fff; 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: #fff; 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); }