/* The page (Reggie16_Web.md §2): contents | card | machine. */

html, body { margin: 0; height: 100%; }
body {
    background: #f4f2ee;
    color: #222;
    font: 14px "Segoe UI", system-ui, sans-serif;
}
.starting { padding: 2em; }

.page {
    display: grid;
    grid-template-columns: 210px 1fr auto;
    height: 100vh;
}

/* The contents */
.contents {
    overflow-y: auto;
    padding: 12px 10px;
    background: #2b2f36;
    color: #d8dce2;
}
.contents h1 { font-size: 16px; margin: 0 0 8px; color: #fff; }
.contents h2 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    margin: 16px 0 4px; color: #8c96a3;
}
.contents a {
    display: block; padding: 4px 8px; border-radius: 4px;
    cursor: pointer; color: inherit; text-decoration: none;
}
.contents a:hover { background: #3a404a; }
.contents a.chosen { background: #4a6fa5; color: #fff; }

/* The card */
.card { overflow: auto; padding: 10px 14px; }
.zoom { margin-bottom: 8px; }
.zoom button, .controls button {
    font: inherit; padding: 3px 10px; margin-right: 4px;
    border: 1px solid #b8b4ac; border-radius: 4px; background: #fff; cursor: pointer;
}
.zoom button.chosen, .controls button.chosen { background: #4a6fa5; border-color: #4a6fa5; color: #fff; }
.zoom .fullsize { margin-left: 10px; color: #4a6fa5; text-decoration: none; }
.zoom .fullsize:hover { text-decoration: underline; }
.frame { overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.25); background: #fff; }
.frame iframe { border: 0; transform-origin: 0 0; display: block; }

/* A card alone (?card=), scaled to fit the window: tan(atan2(a, b)) is
   a / b as a plain number, which scale() takes where a division of two
   lengths it would not. */
.viewer {
    position: fixed; inset: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #2b2f36;
}
.viewer iframe {
    flex: none; border: 0; background: #fff;
    transform: scale(min(tan(atan2(100vw, var(--card-width))), tan(atan2(100vh, var(--card-height)))));
}

/* The machine */
.machine {
    overflow-y: auto;
    padding: 10px 14px;
    background: #1f2227;
    color: #d8dce2;
}
.controls { margin-bottom: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.controls .cardname { margin-left: 6px; color: #8c96a3; }
.controls .load { margin-left: auto; font-size: 12px; color: #8c96a3; }
.controls .load input { width: 180px; color: #8c96a3; }

/* Files to and from the machine */
.transfers { margin-bottom: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; }
.transfers button, .transfers label.button {
    font: inherit; padding: 3px 10px; margin-right: 4px; color: #222;
    border: 1px solid #b8b4ac; border-radius: 4px; background: #fff; cursor: pointer;
}
.transfers label.button input { display: none; }
.transfers .status { margin-left: 6px; color: #8c96a3; }
.transfers .save { margin-left: 8px; color: #8ab4ff; }
.problem { color: #ff8a80; margin-bottom: 8px; }
.nocard { max-width: 420px; line-height: 1.5; }

.terminal {
    font: 13px/1.25 Consolas, "Cascadia Mono", "Courier New", monospace;
    background: #0a0f0a;
    padding: 6px;
    border-radius: 4px;
    outline: 2px solid transparent;
    white-space: pre;
    cursor: text;
    caret-color: transparent;   /* the browser's caret; Ken draws its own */
}
.terminal:focus { outline-color: #4a6fa5; }
.terminal .row { height: 1.25em; }

/* The monitor panel */
.monitor { margin-top: 10px; font-size: 13px; }
.monitor .speed { display: flex; gap: 18px; margin-bottom: 8px; }
.monitor .speed b { color: #fff; }
.monitor table { border-collapse: collapse; }
.monitor .counts td { padding: 1px 12px 1px 0; }
.monitor .counts td:last-child { font-family: Consolas, monospace; text-align: right; }
.monitor .status, .monitor .flags { margin: 8px 0; display: flex; gap: 10px; }
.monitor .status span, .monitor .flags i {
    padding: 1px 6px; border-radius: 3px; background: #2e333b; color: #6f7883; font-style: normal;
}
.monitor .status span.on, .monitor .flags i.on { background: #4a6fa5; color: #fff; }
.monitor .flags .bank { opacity: 0.55; }
.monitor .flags .bank.selected { opacity: 1; }
.monitor .registers td { padding: 1px 6px 1px 0; font-family: Consolas, monospace; }
.monitor .registers td.name { color: #8c96a3; }
.monitor .registers td.value { padding-right: 16px; }
.monitor .registers td.changed { color: #ffd54f; }

/* The LED board: blue LEDs, OLED hex */
.ledboard {
    margin-top: 10px; padding: 8px 10px 10px;
    background: #12161c; border: 1px solid #2e333b; border-radius: 4px;
}
.ledhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.ledtitle { color: #d8dce2; }
.ledport { color: #6f7883; font-family: Consolas, monospace; margin-right: auto; }
.oled {
    font: bold 20px/1 Consolas, monospace; letter-spacing: 2px;
    padding: 4px 8px; background: #000; color: #bfe6ff; border-radius: 3px;
    text-shadow: 0 0 6px rgba(120, 200, 255, 0.8);
}
.ledrow { display: flex; gap: 6px; }
.led {
    width: 16px; height: 16px; border-radius: 50%;
    background: #10203a; border: 1px solid #22345a;
}
.led.gap { margin-left: 8px; }
.led.lit {
    background: radial-gradient(circle at 40% 35%, #d6ecff, #3a8dff 55%, #1456d6);
    border-color: #5aa8ff;
    box-shadow: 0 0 8px 2px rgba(58, 141, 255, 0.75);
}