/* ActionForge — the shell the tool sits in.
 *
 * Everything the app itself looks like lives in library.css. This file is only
 * what a page needs before that: the design tokens, a reset, and the bar across
 * the top.
 *
 * ── why the tokens are copied and not imported ──────────────────────────────
 *
 * library.css reads eleven custom properties that used to come from the
 * portfolio's main.css, 1242 lines of site chrome for a tool that renders a
 * viewport and some panels. Those eleven are reproduced here so the tool keeps
 * its look with none of the rest, and so this site can diverge visually from
 * cgstuff.xyz without either one dragging the other.
 */

:root {
    --primary-color: #09c5cc;
    --secondary-color: #7d0093;
    --accent-color: #001b87;

    --bg-dark: #0a0a0a;
    --bg-medium: #111;
    --bg-light: #1a1a1a;

    --text-primary: #fff;
    --text-secondary: #ccc;
    --text-muted: #999;
    --border-color: #333;

    --font-primary: 'Rajdhani', 'Arial', sans-serif;
    --font-heading: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

    --transition-fast: 0.1s ease;
    --transition-medium: 0.3s ease;

    /* THE NUMBER THAT MATTERS. library.css sizes the app as
       `calc(100vh - 60px)` with a matching `margin-top`, so the bar has to be
       exactly this tall. Changing it here without changing it there leaves
       either a gap under the bar or a scrollbar with dead space below the
       timeline. */
    --bar-h: 60px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-primary);
    /* The app owns the viewport. Nothing here should ever scroll the page;
       panels scroll inside themselves. */
    overflow: hidden;
}

/* ── the bar ─────────────────────────────────────────────────────────────
   Fixed, because .lib reserves its height with margin-top rather than sitting
   in flow beneath it. A previous attempt at a masthead put a fixed header
   above a zero-height placeholder and the margin collapsed straight through
   it, which is why this is a real element with a real height. */
.af-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    background: var(--bg-medium);
    border-bottom: 1px solid var(--border-color);
    z-index: 40;
}

.af-mark {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
}
.af-mark b { color: var(--primary-color); font-weight: 700; }

.af-tag {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.af-spacer { flex: 1 1 auto; }

.af-links { display: flex; gap: 14px; align-items: center; }

.af-links a {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
}
.af-links a:hover { color: var(--primary-color); }

/* Narrow screens: the tool needs the width more than the strapline does. */
@media (max-width: 720px) {
    .af-tag { display: none; }
}