/* Motion, one site: the home, the docs and the Hub share this. Its colours are a scheme from
   tools/schemes.json (tools/xtask.sh scheme writes it below): a ground, and one colour for what you
   act on and what you've chosen; Motion's green-to-violet wave only in the mark. Amber still
   means playing or live, red danger, blue information, green what worked. The shell is here too (the top bar, the Hub's own bar under
   it, the footer), with m- names so neither side's own classes clash with it.

   Light and dark follow the system unless data-theme on <html> says otherwise; the choice is
   kept in localStorage as "motion-theme", by the site and the Hub alike. */

/* what doesn't change with the scheme: the type, Motion's wave, the shell's sizes */
:root {
    --wave: linear-gradient(90deg, #4fd08c, #3fb8d6 50%, #8f7cff);
    --head: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Red Hat Mono", ui-monospace, Menlo, monospace;
    /* the shell's sides, the same on every page */
    --m-pad: max(20px, env(safe-area-inset-left, 0px), calc((100vw - 1400px) / 2));
    --m-top: 64px; --m-sub: 52px;
}

/* --- the scheme: written by tools/xtask.sh scheme from tools/schemes.json (mono: Mono, like Studio) --- */
:root {
    /* the dark look's colours by name, for what always sits on a picture */
    --dark-bg: #0c0c0d;
    --dark-bg-2: #111113;
    --dark-panel: #141416;
    --dark-raised: #1a1a1d;
    --dark-hover: #222226;
    --dark-sunk: #0f0f11;
    --dark-line: #2a2a2e;
    --dark-line-strong: #3a3a3f;
    --dark-text: #ededee;
    --dark-text-body: #d4d4d8;
    --dark-text-2: #a9a9ae;
    --dark-text-3: #8a8a90;
    --dark-accent: #ededee;
    --dark-accent-hi: #ffffff;
    --dark-on-accent: #111113;
    --dark-accent-dim: #2c2c31;
    --dark-accent-ink: #ffffff;
    --over: rgba(12, 12, 13, 0.72); --over-ink: #ededee;
    --bg: #0c0c0d;
    --bg-2: #111113;
    --panel: #141416;
    --raised: #1a1a1d;
    --hover: #222226;
    --sunk: #0f0f11;
    --line: #2a2a2e;
    --line-strong: #3a3a3f;
    --text: #ededee;
    --text-body: #d4d4d8;
    --text-2: #a9a9ae;
    --text-3: #8a8a90;
    --accent: #ededee;
    --accent-hi: #ffffff;
    --on-accent: #111113;
    --accent-dim: #2c2c31;
    --accent-ink: #ffffff;
    --rose: #c9c9cd;
    --glass: rgba(12, 12, 13, 0.8); --scrim: rgba(12, 12, 13, 0.7);
    --glow: radial-gradient(55% 80% at 0% 0%, rgba(237, 237, 238, 0.09), transparent), radial-gradient(45% 70% at 100% 0%, rgba(201, 201, 205, 0.06), transparent);
    --violet: #b9a6ff; --violet-dim: #221d38;
    --ok: #7fd6a0; --ok-dim: #15281c; --mint: #7fd6a0; --mint-dim: #15281c;
    --key: #f5b14c; --key-dim: #3a2c14;
    --info: #8ab8ff; --info-dim: #15213a; --info-line: #26395a; --info-soft: #0f1726; --info-ink: #d6e5ff;
    --danger: #f0566e; --danger-dim: #3d1219; --danger-line: #5e2230; --danger-soft: #1f0d11; --danger-ink: #fbd3da;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.55); --shadow-s: 0 12px 32px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #f5f5f6;
        --bg-2: #ececee;
        --panel: #ffffff;
        --raised: #f8f8f9;
        --hover: #ededef;
        --sunk: #f0f0f2;
        --line: #e2e2e5;
        --line-strong: #d0d0d4;
        --text: #161618;
        --text-body: #2b2b30;
        --text-2: #55555b;
        --text-3: #636369;
        --accent: #18181b;
        --accent-hi: #000000;
        --on-accent: #ffffff;
        --accent-dim: #e6e6e9;
        --accent-ink: #18181b;
        --rose: #3a3a3f;
        --glass: rgba(245, 245, 246, 0.84); --scrim: rgba(22, 22, 24, 0.32);
        --glow: radial-gradient(55% 80% at 0% 0%, rgba(24, 24, 27, 0.06), transparent), radial-gradient(45% 70% at 100% 0%, rgba(58, 58, 63, 0.04), transparent);
        --violet: #5b3fd6; --violet-dim: #ece7ff;
        --ok: #1d7a45; --ok-dim: #e1f2e7; --mint: #1d7a45; --mint-dim: #e1f2e7;
        --key: #a96400; --key-dim: #fdefd9;
        --info: #2160b0; --info-dim: #e3efff; --info-line: #c9ddf6; --info-soft: #eef5ff; --info-ink: #23466e;
        --danger: #b42335; --danger-dim: #fbe3e6; --danger-line: #f1c4ca; --danger-soft: #fff0f2; --danger-ink: #7a1d2a;
        --shadow: 0 30px 80px rgba(40, 32, 28, 0.16); --shadow-s: 0 12px 32px rgba(40, 32, 28, 0.1);
        color-scheme: light;
    }
}
:root[data-theme="light"] {
    --bg: #f5f5f6;
    --bg-2: #ececee;
    --panel: #ffffff;
    --raised: #f8f8f9;
    --hover: #ededef;
    --sunk: #f0f0f2;
    --line: #e2e2e5;
    --line-strong: #d0d0d4;
    --text: #161618;
    --text-body: #2b2b30;
    --text-2: #55555b;
    --text-3: #636369;
    --accent: #18181b;
    --accent-hi: #000000;
    --on-accent: #ffffff;
    --accent-dim: #e6e6e9;
    --accent-ink: #18181b;
    --rose: #3a3a3f;
    --glass: rgba(245, 245, 246, 0.84); --scrim: rgba(22, 22, 24, 0.32);
    --glow: radial-gradient(55% 80% at 0% 0%, rgba(24, 24, 27, 0.06), transparent), radial-gradient(45% 70% at 100% 0%, rgba(58, 58, 63, 0.04), transparent);
    --violet: #5b3fd6; --violet-dim: #ece7ff;
    --ok: #1d7a45; --ok-dim: #e1f2e7; --mint: #1d7a45; --mint-dim: #e1f2e7;
    --key: #a96400; --key-dim: #fdefd9;
    --info: #2160b0; --info-dim: #e3efff; --info-line: #c9ddf6; --info-soft: #eef5ff; --info-ink: #23466e;
    --danger: #b42335; --danger-dim: #fbe3e6; --danger-line: #f1c4ca; --danger-soft: #fff0f2; --danger-ink: #7a1d2a;
    --shadow: 0 30px 80px rgba(40, 32, 28, 0.16); --shadow-s: 0 12px 32px rgba(40, 32, 28, 0.1);
    color-scheme: light;
}
/* --- end of the scheme --- */

/* the edge of what you type in or tick (fields, boxes, switches): 3:1 against every ground the
   pages use, light and dark (WCAG 1.4.11), where --line and --line-strong only divide */
:root { --control: #727279; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --control: #86868e; } }
:root[data-theme="light"] { --control: #86868e; }

/* --- the top bar: the mark, Motion's sections, then the page's own tools ----------------------- */
.m-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; height: var(--m-top); padding: 0 var(--m-pad);
         background: var(--glass); backdrop-filter: saturate(1.3) blur(16px); -webkit-backdrop-filter: saturate(1.3) blur(16px); border-bottom: 1px solid var(--line); }
.m-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font: 600 19px/1 var(--head); letter-spacing: -0.01em; color: var(--text); text-decoration: none; white-space: nowrap; border-radius: 8px; }
.m-brand:hover { color: var(--text); }
.m-brand svg { width: 28px; height: 28px; flex: none; }
.m-nav { display: flex; align-items: center; gap: 2px; }
.m-nav a { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; color: var(--text-2); font: 500 14.5px/1 var(--ui); text-decoration: none; white-space: nowrap; }
.m-nav a:hover { color: var(--text); background: var(--hover); }
.m-nav a[aria-current], .m-nav a.on { color: var(--accent-ink); background: var(--accent-dim); }
.m-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-icon { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; text-decoration: none; }
.m-icon:hover { color: var(--text); background: var(--hover); }
.m-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m-icon .m-count { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: 700 11px/16px var(--mono); text-align: center; }
/* the theme switch shows the moon in light, the sun in dark */
.m-theme .m-sun { display: none; }
:root[data-theme="dark"] .m-theme .m-sun { display: block; }
:root[data-theme="dark"] .m-theme .m-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-theme .m-sun { display: block; } :root:not([data-theme="light"]) .m-theme .m-moon { display: none; } }
.m-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong);
         background: var(--raised); color: var(--text); font: 600 14px/1 var(--ui); text-decoration: none; white-space: nowrap; cursor: pointer; }
.m-btn:hover { background: var(--hover); color: var(--text); }
.m-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.m-btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--on-accent); }
.m-btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.m-btn.ghost:hover { background: var(--hover); color: var(--text); }
.m-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* who's signed in: their letter, or Sign in */
.m-account { display: inline-flex; align-items: center; min-height: 40px; }
.m-account:empty { display: none; }
.m-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-dim); color: var(--accent-ink); font: 600 15px/1 var(--head); text-decoration: none; overflow: hidden; }
.m-avatar img { width: 100%; height: 100%; object-fit: cover; }
.m-menu { display: none; }

/* --- the Hub's own bar, under the top bar --------------------------------------------------------- */
.m-sub { position: sticky; top: var(--m-top); z-index: 35; display: flex; align-items: center; gap: 16px; height: var(--m-sub); padding: 0 var(--m-pad);
         background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
/* the links scroll sideways when they don't all fit beside the search (a tablet, or the two more a
   signed-in person has): without that they pushed the search past the window's edge and the whole
   page scrolled sideways. The 6px above and below keep each link's 44px touch area inside the box. */
.m-sub nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-block: 6px; }
.m-sub nav::-webkit-scrollbar { display: none; }
.m-sub nav a { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--text-2); font: 500 14px/1 var(--ui); text-decoration: none; white-space: nowrap; }
.m-sub nav a:hover { color: var(--text); background: var(--hover); }
.m-sub nav a.active, .m-sub nav a[aria-current] { color: var(--text); background: var(--hover); box-shadow: inset 0 0 0 1px var(--line-strong); }
.m-sub .m-sub-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

/* --- the footer ----------------------------------------------------------------------------------- */
.m-foot { display: grid; grid-template-columns: 1.5fr; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; padding: 52px var(--m-pad) max(44px, env(safe-area-inset-bottom, 0px));
          border-top: 1px solid var(--line); background: var(--bg-2); color: var(--text-3); font: 400 14px/1.5 var(--ui); }
.m-foot p { margin: 12px 0 0; max-width: 24em; }
.m-foot h4 { font: 500 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 6px 0 12px; }
.m-foot nav { display: grid; }
.m-foot nav a { color: var(--text-2); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-self: start; }
.m-foot nav a:hover { color: var(--accent); }

/* --- narrower: the sections fold into a menu ---------------------------------------------------- */
@media (max-width: 860px) {
    .m-top { gap: 8px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
    .m-nav { display: none; position: absolute; top: var(--m-top); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 16px;
             background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-s); }
    .m-top.open .m-nav { display: flex; }
    .m-nav a { min-height: 44px; font-size: 16px; padding: 0 14px; }
    .m-menu { display: inline-grid; }
    .m-top .m-wide { display: none; }
    .m-foot { grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 24px; }
    .m-foot > div:first-child { grid-column: span 2; }
}
@media (max-width: 720px) { .m-sub { display: none; } }

/* --- touch targets: a control smaller than a fingertip still answers across 44 by 44 px, around its middle */
.m-brand { position: relative; }
.m-brand::after, .m-icon::after, .m-btn::after, .m-nav a::after, .m-sub nav a::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }