/*
 * mathzetta.com's theme, loaded after shioh-style.css (the Shioh base, copied unchanged: updating the
 * look is replacing that one file). Every page, demos included, loads this file; the main pages load
 * site.css after it for their own pieces.
 *
 * MathZetta keeps the Shioh defaults (the pastels, navy, a black background, the wordmark).
 */

/* Raspberry is the darkest cell: small muted text there is drawn in the ink (the style's own rule). */
.ss-p5 { --ss-muted: var(--ss-ink); }

* { box-sizing: border-box; }

/* ---------- The frame's pieces (shell.js) ---------- */
/* links in a cell take the ink (the family's site.css colours links; the base's own rule is weaker) */
.ss-cell a:not(.ss-btn):not(.ss-logo) { color: inherit; }
/* the sidebar's second cell, and the footer cell that repeats its essentials on phones (not .mz-foot:
   that is the family's footer, styled by mathzetta-sites' site.css) */
.mz-links p { margin: 4px 0; font-size: 14px; }
.mz-family { display: flex; flex-wrap: wrap; gap: 6px; }
.mz-family a, .ss-nav a { text-decoration: none !important; }
.mz-family a {
	background: var(--ss-panel);
	border: var(--ss-chip-border);
	border-radius: var(--ss-chip-radius);
	padding: 2px 10px;
	font-size: 13.5px;
}
.mz-family a:hover { background: var(--ss-panel-strong); }
.mz-phonefoot .mz-family { margin: 0; }
/* last in <main> even when a page adds its sections after the frame is mounted (api.html) */
.mz-phonefoot { order: 99; }
/* the skip link */
.mz-skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: #fff; color: var(--ss-ink); padding: 8px 12px; border-radius: var(--ss-radius-sm); border: 1px solid #222; }
.mz-skip:focus { left: 8px; }

/* ---------- Phones ---------- */
@media (max-width: 860px) {
	/* chips and the nav: tap-sized */
	.mz-family a { padding: 6px 12px; font-size: 14px; }
	.ss-nav a { padding: 0.6rem 0.7rem; }
	/* checkboxes and radios big enough to tap */
	.ss-cell input[type=checkbox], .ss-cell input[type=radio] { width: 18px; height: 18px; flex-shrink: 0; }
	/* a page title a phone can hold */
	.ss-title { font-size: 1.35rem; }
}