/* Chrome styled after the desktop SDL GUI: dark slate panels (#1a1a22 header, #101018 content),
   teal accent (#66ddcc - the GUI's pinned-target colour), minimal text. The app is a fixed
   full-viewport layout like a native window: no page scroll, no overscroll bounce, no text
   selection dragging the document around while interacting with the canvas. */
:root {
    color-scheme: dark;
    --bg: #101018;
    --chrome: #1a1a22;
    --border: #26263a;
    --text: #dddddd;
    --dim: #9a9aab;
    --accent: #66ddcc;
}

/* The SAME font file the canvas glyph atlas rasterizes (fetched by LoadFontAsync), exposed as a
   web font so the CanvasTextLayer's selectable DOM spans match the canvas-drawn text. The browser
   reuses the HTTP-cached bytes — no second download. */
@font-face {
    font-family: "DejaVu Sans";
    src: url("../Fonts/DejaVuSans.ttf") format("truetype");
    font-display: swap;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;            /* the app IS the window - never scroll the document */
    overscroll-behavior: none;   /* no rubber-band bounce when drags hit the edge */
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}

#app { height: 100%; }

.app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Title bar - mirrors the desktop window chrome. */
.titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
    padding: 8px 14px;
    flex: none;
}

.titlebar .title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.titlebar .subtitle {
    color: var(--accent);
    font-size: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 8px;
}

.titlebar .spacer { flex: 1; }

/* Back to the project site. The mark's copper is its own on any ground, so it stays literal; the
   sharp takes the app's accent, which is the same teal the site header uses. flex:none keeps it
   whole while the status text beside it is the part allowed to ellipsise. */
.titlebar .home {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}

.titlebar .home:hover,
.titlebar .home:focus-visible { text-decoration: underline; }

.titlebar .home .mark-sharp { fill: var(--accent); }

/* Narrow windows keep the mark and drop the word: the moon is the recognisable half. */
@media (max-width: 620px) {
    .titlebar .home-text { display: none; }
}

.titlebar .status {
    color: var(--dim);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toolbar - site entry + recompute, styled like a GUI panel row. */
.toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
    padding: 6px 14px;
    flex: none;
}

.toolbar label {
    color: var(--dim);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar input {
    width: 6.5rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.85rem;
}

.toolbar button {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}

.toolbar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.toolbar button:disabled { opacity: 0.5; cursor: default; }

/* View-switcher chips in the titlebar (Planner / Sky Map). */
button.chip {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px 10px;
    cursor: pointer;
}

button.chip.active {
    border-color: var(--accent, #66ddcc);
}

button.chip:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Catalog-load hint beside the view chips (the chips themselves never block - both views
   wait on the same catalog, and the atlas draws sky + planets before the stars land). */
.catalog-loading {
    color: var(--dim);
    font-size: 0.8rem;
    white-space: nowrap;
    animation: chip-pulse 1.6s ease-in-out infinite;
}

/* Atlas build-up overlay: sits over the canvas while the star catalog is fetched, decompressed
   and flattened. Centred near the top rather than the middle so it never covers the object the
   user is looking at, and pointer-events:none so it cannot swallow a click even though canvas
   navigation is gated in the handlers while it is up. */
.atlas-loading {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(12, 16, 28, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--fg, #e6e9f0);
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    animation: chip-pulse 1.6s ease-in-out infinite;
}

@keyframes chip-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* The planner surface fills everything below the chrome. The canvas element is sized by CSS;
   the drawing buffer is set to element-size x devicePixelRatio from the app (hi-dpi crisp).
   position:relative anchors the CanvasTextOverlay input, which is absolutely positioned over
   the active canvas text widget's rect. */
.canvas-host {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* The CanvasTextOverlay input - a real focusable <input> covering the active canvas text
   widget (native IME / clipboard / mobile keyboard). Styled to sit flush with the dark canvas
   chrome; mechanics (absolute positioning, show/hide) are inline in the component. */
.canvas-text-input {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: 2px;
    padding: 0 6px;
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
    outline: none;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bg);
    user-select: none;        /* a list-drag must never start a document text selection */
    touch-action: none;       /* pointer gestures belong to the app, not the browser */
    outline: none;            /* focus ring off - the canvas is the whole workspace */
}

/* Boot splash shown until Blazor mounts the app. */
.boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 16px;
    color: var(--dim);
}

.boot-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: #7a1f1f;
    color: #fff;
}