/* Theme — the shared design system.
 *
 * Cel-shaded and airy rather than dark and arcade: a teal sky, warm paper and
 * stone surfaces, vermilion and yellow accents, and near-black ink for type
 * and outlines. Everything is flat colour with a drawn edge — no gradients,
 * no glow, no gloss.
 */

:root {
    /* Sky */
    --jg-bg: #3c4142;
    --jg-sky-hi: #4a5051;
    --jg-sky-lo: #343839;
    --jg-grid: rgba(255, 255, 255, 0.14);
    --jg-grid-step: 34px;

    /* Ink — type and outlines are near-black, never pure black */
    --jg-ink: #2a2e2b;
    --jg-muted: #55605a;
    --jg-dim: #7f8c86;

    /* Surfaces: cream paper and warm stone */
    --jg-paper: #f2efe4;
    --jg-stone: #ded9c8;
    --jg-sage: #9bb08a;
    --jg-bar: #ded9c8;
    --jg-bar-dark: #c8c2ae;
    --jg-frame: #f2efe4;
    --jg-frame-hi: #2a2e2b;
    --jg-panel: #f7f5ec;
    --jg-line: rgba(42, 46, 43, 0.22);

    /* Accents — no red anywhere; warm amber leads, green and slate support */
    --jg-accent: #e8a33d;
    --jg-yellow: #f0c060;
    --jg-green: #6e9b57;
    --jg-blue: #6b8ca3;
    --jg-brown: #8a7a63;

    /* ---------- glass ----------
       A DARK film, not a light one. The panels used to be white at 0.12,
       which worked only while the thing behind them was the bare #3C4142
       ground. Now the board shows through everywhere, and white type on a
       white film over a cream card measures 1.00:1 — invisible. The same
       panel has to survive both backdrops, and only a dark film does.

       It has to be a DEEP film, not a slight one. At 0.55 the panel came out
       rgb(40,44,45) against a rgb(60,65,66) ground — 1.36:1, a panel you have
       to look for. At 0.78 it is rgb(27,30,31) and the brighter edges carry
       the rest. White type reads 15:1 over the ground, 10:1 over a cream
       card. The blur and the light edges are what still make it glass. */
    --glass:        rgba(18, 21, 22, 0.78);
    --glass-strong: rgba(18, 21, 22, 0.86);
    --glass-solid:  rgba(18, 21, 22, 0.93);
    --glass-edge:   rgba(255, 255, 255, 0.28);
    --glass-edge-soft: rgba(255, 255, 255, 0.16);
    --glass-blur:   saturate(180%) blur(22px);
    --glass-lift:   0 12px 34px rgba(0, 0, 0, 0.42);
    --glass-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.16);

    /* Type on glass — white. Worst case is a panel over a cream board card:
       10:1 at full weight, 7.6:1 at the soft weight. */
    --on-glass:       #f4f6f6;
    --on-glass-soft:  rgba(244, 246, 246, 0.78);
    --on-glass-faint: rgba(244, 246, 246, 0.55);

    /* A flat dark ground. The faint lift keeps it from reading as dead paint
       and gives the frosting a little to work with. */
    --desk: #3c4142;
    --ground:
        radial-gradient(60% 44% at 50% 40%, rgba(255, 255, 255, 0.055), transparent 72%),
        linear-gradient(180deg, #434849 0%, #3c4142 55%, #343839 100%);

    /* One folder colour for all five, so the glyph is what distinguishes
       them. Amber against the teal ground. */
    /* Fallback only — each folder carries its own hex and derives these three
       from it in desktop.js. */
    --fold-back:    #d98f28;
    --fold-front:   #f3b44a;
    --fold-front-2: #e79a2c;
    --r-lg: 26px;
    --r-md: 18px;
    --r-sm: 12px;
    --r-pill: 999px;

    --jg-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --jg-display: 'Space Grotesk', 'Inter', sans-serif;
    --jg-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --jg-pixel: var(--jg-display);
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body.jg {
    margin: 0;
    min-height: 100%;
    background-color: var(--jg-bg);
    /* Soft painted cloud streaks across the sky, plus a faint grid. */
    background-image:
        linear-gradient(168deg, transparent 0 18%, var(--jg-sky-hi) 18% 22%, transparent 22% 40%,
                                var(--jg-sky-hi) 40% 43%, transparent 43% 66%,
                                var(--jg-sky-hi) 66% 71%, transparent 71%),
        linear-gradient(var(--jg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--jg-grid) 1px, transparent 1px);
    background-size: 100% 100%, var(--jg-grid-step) var(--jg-grid-step), var(--jg-grid-step) var(--jg-grid-step);
    background-attachment: fixed;
    color: var(--jg-ink);
    font-family: var(--jg-sans);
    -webkit-font-smoothing: antialiased;
}

/* ---------- confetti ---------- */

.jg-confetti {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.jg-confetti i { position: absolute; display: block; }

/* ---------- logomark ---------- */

.jg-logo {
    display: inline-block;
    padding: 0.32rem 0.55rem 0.24rem;
    background: var(--jg-paper);
    border: 2px solid var(--jg-ink);
    font-family: var(--jg-display);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--jg-ink);
    text-decoration: none;
}

.jg-logo .a-r { color: var(--jg-green); }

/* ---------- left rail ---------- */

.jg-side {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    width: 13.5rem;
    height: 100%;
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    /* A hairline that separates the rail from the content field. */
    border-right: 2px solid var(--jg-ink);
    background: rgba(242, 239, 228, 0.9);
}

.jg-side-name {
    margin: 0;
    font-family: var(--jg-mono);
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--jg-muted);
}

.jg-nav { display: flex; flex-direction: column; gap: 0.3rem; }

.jg-nav a {
    position: relative;
    color: var(--jg-muted);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    padding-left: 0.85rem;
    transition: color 0.1s linear;
}

/* A small square marker rather than the reference's plain bolding. */
.jg-nav a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 7px;
    height: 7px;
    background: var(--jg-ink);
    opacity: 0.35;
    transition: background 0.1s linear;
}

.jg-nav a:hover { color: var(--jg-ink); }
.jg-nav a:hover::before { opacity: 0.7; }
.jg-nav a.is-current { color: var(--jg-ink); }
.jg-nav a.is-current::before { background: var(--jg-accent); opacity: 1; }

.jg-side-label {
    margin: 0 0 0.45rem;
    font-family: var(--jg-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jg-dim);
}

.jg-side-foot { margin-top: auto; }

/* ---------- section bar ---------- */

.jg-secbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem 0.8rem 1.4rem;
    background: var(--jg-paper);
    border: 2px solid var(--jg-ink);
    border-left: 8px solid var(--jg-accent);
    color: var(--jg-ink);
}

.jg-secbar-num {
    font-family: var(--jg-mono);
    font-size: 0.68rem;
    color: var(--jg-muted);
}

.jg-secbar-title {
    font-family: var(--jg-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------- buttons ---------- */

.jg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    min-width: 16rem;
    padding: 1rem 1.3rem;
    background: var(--jg-paper);
    border: 2px solid var(--jg-ink);
    box-shadow: 4px 4px 0 var(--jg-ink);
    color: var(--jg-ink);
    font-family: var(--jg-display);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s linear, border-color 0.12s linear;
}

.jg-btn:hover { background: var(--jg-yellow); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--jg-ink); }
.jg-btn .jg-btn-arrow { font-size: 1rem; color: var(--jg-accent); }

/* ---------- document column ---------- */

.jg-doc {
    position: relative;
    z-index: 10;
    margin-left: 13.5rem;
    padding: 1.5rem clamp(1rem, 4vw, 3rem) 6rem;
    max-width: 62rem;
}

@media (max-width: 860px) {
    .jg-side {
        position: static;
        width: auto;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--jg-line);
        padding: 1.25rem 1rem;
    }
    .jg-side-foot { margin-top: 1rem; }
    .jg-doc { margin-left: 0; padding-top: 0; }
}


/* The board and desktop paint their own ground, so the page-level sky — the
   cloud streaks and the screen-space grid — must not show through the plane
   underneath them. */
body.board-page {
    background-image: none;
    background-color: var(--jg-bg);
}


/* ---------- glass primitives ----------
   Shared by the desktop, the menubar and the windows so the whole chrome
   speaks one language. */

.glass {
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge-soft);
    box-shadow: var(--glass-lift), var(--glass-inset);
    border-radius: var(--r-lg);
}

/* Where a panel carries reading text it needs more body, or the words sit on
   whatever happens to be behind them. */
.glass-strong {
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-lift), var(--glass-inset);
    border-radius: var(--r-lg);
}

/* Safari and Firefox without backdrop-filter get a solid fill instead of an
   unreadable transparent panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: rgba(18, 21, 22, 0.9); }
    .glass-strong { background: rgba(18, 21, 22, 0.95); }
}