/* Graph dynamics applet — styled to sit inside the RTD docs page.
   Palette from custom.css: Crimson (#8B0037) masthead, black stage,
   light gray (#E6E6E6) text; a lightened crimson (#C25E7E) for accents
   that must read on black, and one off-palette slate blue (#00548B) as
   the second hue of the cyclic phase map (drawn on canvas, not here).
   The simulation fills the card below the header; the controls and the
   meters float over it as translucent panels. */

#gd-app {
    --gd-crimson: #8B0037;
    --gd-rose: #C25E7E;
    --gd-gray: #E6E6E6;
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    overflow: hidden;
    margin: 1.5em 0;
    background: #000000;
}

#gd-head {
    background: var(--gd-crimson);
    color: #fff;
    font-family: 'Roboto Slab', Georgia, serif;
    font-weight: 700;
    font-size: 0.92em;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#gd-head .gd-title { flex: 1; }

#gd-head select {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 3px 6px;
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
}

#gd-head select option { color: #000000; background: #fcfcfc; }

.gd-hbtn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 3px 12px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.gd-hbtn:hover { background: rgba(255, 255, 255, 0.3); }

/* The canvas fills the card; the graph is vector-drawn, so no pixelated
   rendering here. */
#gd-stage {
    position: relative;
    background: #000000;
    line-height: 0;
}

#gd-canvas {
    display: block;
    width: 100%;
    height: 420px;
}

/* Translucent panels floating on the simulation. */
.gd-ov {
    position: absolute;
    background: rgba(10, 10, 12, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    color: #d8d8d8;
    font-size: 14px;
    line-height: 1.35;
    padding: 6px 8px;
}

/* Controls, bottom left: shown and hidden by the mode selector. */
#gd-controls {
    bottom: 8px;
    left: 8px;
    width: 230px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gd-ctl label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 1px;
    color: #b9b9b9;
}

.gd-ctl label .val {
    font-weight: 700;
    color: var(--gd-rose);
    font-variant-numeric: tabular-nums;
}

.gd-ctl input[type=range] {
    display: block;
    width: 100%;
    height: 13px;
    margin: 0;
    accent-color: var(--gd-rose);
}

/* The meters, top right: for looking at, not touching. */
#gd-meters {
    top: 8px;
    right: 8px;
    pointer-events: none;
    line-height: 1.2;
}

#gd-trace, #gd-rose {
    display: block;
    width: 160px;
}

#gd-trace { height: 72px; }
#gd-rose  { height: 160px; }

.gd-cap {
    color: #b9b9b9;
    font-size: 13px;
    text-align: center;
    margin: 2px 0 6px;
}

/* MathJax renders into its own container; keep it inline, at our size, and
   in the panel's colour rather than the page's body colour. */
.gd-ov mjx-container {
    display: inline !important;
    margin: 0 !important;
    font-size: 105% !important;
    color: inherit;
}

@media (max-width: 640px) {
    #gd-canvas { height: 300px; }
    #gd-meters { display: none; }
    #gd-controls { width: 170px; }
}