/* Search: the field, the result rows and their add button, and the sheets’ action rows. */
.ax-field { height: 44px; border-radius: 12px; background: var(--ax-container); display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--ax-text-2); }
.ax-q { flex: 1; min-width: 0; color: var(--ax-text); font-size: 16px; line-height: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.ax-ph { color: var(--ax-text-3); }
.ax-caret.sm { height: 20px; width: 2px; vertical-align: -4px; margin-left: 1px; }
.ax-findrow { height: 52px; border-radius: 12px; background: var(--ax-card); border: 1px solid var(--ax-line); display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.ax-srow { display: flex; align-items: center; gap: 14px; padding: 8px 16px; }
.ax-addbtn { width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--ax-line-strong); display: grid; place-items: center; color: var(--ax-text); flex: none; transition: transform 160ms, background-color 160ms; }
.ax-addbtn.press { transform: scale(0.88); background: var(--ax-container); }
.ax-actrow { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 6px 16px; color: var(--ax-text); transition: background-color 160ms; }
.ax-actrow > .ax-i { color: var(--ax-text-2); }
.ax-actrow.press { background: var(--ax-container); }

/* Fiction and nonfiction piles on the Stats screen. */
.ax-piles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 16px 0; }
.ax-piles > div { display: flex; align-items: flex-end; gap: 14px; }
.ax-pile { display: flex; flex-direction: column-reverse; align-items: center; gap: 1.5px; width: 92px; height: 112px; flex: none; }
.ax-pile i { display: block; height: 3px; border-radius: 1px; flex: none; }