/* Page chrome (local scaffold) */
:root {
    --color-cornflower-pale: #84b6d9;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    margin: 20px;
    color: #222;
    background: #fff;
}
h1 { font-size: 1.4em; margin: 0 0 8px; }

/* Frame around the app; hugs the 920px diagram instead of stretching to the window */
.card {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    padding: 16px 20px 0;
    border: 3px solid var(--color-cornflower-pale);
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

/* Mode toggle: one rounded box, active mode filled in */
.mode-toggle {
    display: inline-flex;
    border: 2px solid var(--color-cornflower-pale);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}
.mode-toggle label {
    padding: 6px 18px;
    cursor: pointer;
    user-select: none;
}
.mode-toggle label + label { border-left: 2px solid var(--color-cornflower-pale); }
.mode-toggle label.active { background: var(--color-cornflower-pale); color: #000; }
.mode-toggle label:not(.active):hover { background: #eef5fb; }
/* radios stay in the page for keyboard use (arrow keys), just not visible */
.mode-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.mode-toggle label:has(input:focus-visible) { outline: 2px solid #1f5fbf; outline-offset: -4px; }
.help { color: #555; font-size: 0.9em; margin: 0 0 12px; max-width: 920px; }
.help-box { display: grid; }
.help-box .help { grid-area: 1 / 1; }
.help-box .help.inactive { visibility: hidden; }
#svg-container { overflow: auto; }
/* #svg-container svg { cursor: crosshair; } */

/* Everything below follows the original EGR 1010 lab 2 stylesheet, except where marked "local". */

/* grid */
.grid-line line {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    stroke-opacity: 0.3;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
}
path.domain {
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-opacity: 0.5;
}
/* local: the original left label sizes to the old site's fonts */
.axis text { font-size: 10px; }
.circle-ticks text { font-size: 12px; }

/* central circles */
.outer-circle {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    stroke-opacity: 0.5;
    vector-effect: non-scaling-stroke;
}
path.inner-circle,
path.link-compass {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    stroke-opacity: 0.7;
    vector-effect: non-scaling-stroke;
}
.circle-ticks line,
.link-compass line {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    stroke-opacity: 0.8;
    vector-effect: non-scaling-stroke;
}

/* links (local: first link blue, second red; original had both red) */
.link {
    stroke: #c0392b;
}
line.link {
    fill: none;
    stroke-width: 2;
}
.link.point {
    fill: #c0392b;
}
line.link.first { stroke: #1f5fbf; }
.link.point:not(.second) { fill: #1f5fbf; stroke: #1f5fbf; }  /* origin dot + first endpoint */

/* second-link compass (local: blue, the color of the link it measures from) */
.link-compass.outer-circle,
.link-compass line {
    stroke: #000;
    stroke-opacity: 0.8;
}
.link-compass text {
    font-size: 11.5px;
    fill: #000;
}