/* ===== Simple layout (js/simple-mode.js) =====
   Only applies with body.simple, which the router sets when this device has
   picked the simple layout. Four tabs, bigger text and buttons. */

/* Bigger text and buttons: the pages are drawn in pixels, so the page area is
   zoomed as a whole. Three steps, picked on the Me tab. */
body.simple .content{zoom:1.08}
body.simple.simple-l .content{zoom:1.18}
body.simple.simple-xl .content{zoom:1.3}

/* The menu: four tabs, labelled large enough to read at a glance. */
body.simple .nav-item{font-size:16px;min-height:54px}
body.simple .nav-item .em svg{width:22px;height:22px}
body.simple .mobile-nav a{font-size:12.5px}
body.simple .mobile-nav a .em svg{width:25px;height:25px}

/* Back, on a page that isn't one of the tabs. */
.simple-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-8px;border-radius:12px;
  color:var(--ink);flex-shrink:0}
.simple-back:hover{background:var(--line-2)}
.simple-back .ic{width:24px;height:24px}
body.simple .topbar-title{display:flex;align-items:center;gap:6px}

/* Me */
.simple-who{display:flex;align-items:center;gap:14px;margin:4px 2px 18px}
.simple-who h2{margin:0;font-size:22px}
.simple-ava{width:56px;height:56px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:20px}
.simple-count{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--red);color:#fff;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;flex-shrink:0}
.simple-who + .set-index{margin-top:0}
@media (max-width:720px){
  body.simple .set-row .viewswitch button{padding:0 11px}
}
.simple-display{margin-top:22px}
.simple-display .set-name{white-space:nowrap}