/* The project pages — the tree, the overlay, the parked pages.
   The editor surface itself lives in editor.css. */

:root {
    --doc-row: 1;   /* no wordmark on these pages */
}

/* Columns are held by fixed measures rather than padded spaces, so a row
   stays aligned whatever the font does with its glyph widths, and so JS can
   replace one cell without rewriting the line around it. */
.doc .col {
    display: inline-block;
    vertical-align: top;
}

/* ---- the tree ----------------------------------------------------- */

/* Every line of a project opens with its own drawn prefix -- the spine, then
   the staircase of the cascade. The glyphs are written out as they appear, so
   the runs of spaces inside them have to survive a row that is otherwise
   nowrap, and monospace does the rest of the aligning. */
.tp { white-space: pre; }

/* The state sits in a fixed column well to the right of a short name, so a
   faint leader carries the eye across rather than leaving it stranded. The
   dots are longer than any gap and the column clips them. */
.pname {
    width: 41ch;
    overflow: hidden;
    color: rgb(226, 220, 214);
}

.pname::after {
    content: '  ·······························································';
    color: var(--comment);
    opacity: 0.5;
}

.pstate { width: 8ch; text-align: right; }

/* A project that is resting reads quieter than one that is moving. */
.doc .rest .pname { color: var(--comment); }

/* ---- the activity chart -------------------------------------------- */

/* The activity strip. It declares no width and nothing is aligned to its
   right: a ch is the advance of the digit zero, and these block glyphs are
   wider than that in most monospace faces, so a box measured in ch would
   not hold them. */
.chart {
    display: inline-block;
    white-space: pre;
    letter-spacing: 0.5px;
}

/* ---- kestrel's overlay -------------------------------------------- */

.mn { width: 12ch; }

/* The figure is right-aligned against its unit, and keeps a character of
   air so the two never read as one word: 7.04 ms, not 7.04ms. */
.mv { width: 7ch; padding-right: 1ch; box-sizing: border-box;
      text-align: right; font-variant-numeric: tabular-nums; color: rgb(226, 220, 214); }
.mu { width: 4ch; }
.mg { letter-spacing: 0.5px; }

/* A value that could not be measured. Kestrel prints a dash rather than a
   plausible zero; so does the page about it. */
.mv.none { color: rgb(226, 220, 214); }

.rv { width: 9ch; }
.rd { width: 14ch; }
.tc { width: 8ch; white-space: pre; }

/* ---- the figure column --------------------------------------------- */

/* The document holds a measure of about sixty characters, which leaves the
   right of a wide window empty. The captures live out there instead of
   interrupting the text, and they stay put while it scrolls, so there is
   something to look at the whole way down.

   They sit outside .prose on purpose: they are not lines of the document,
   so the gutter neither numbers them nor loses its count over them. */
.split {
    display: flex;
    align-items: flex-start;
    gap: 6ch;
    padding-right: 6ch;
}

/* Both captures are portrait, so they stand side by side and the panel takes
   whatever width is left: a band across the page rather than a column with a
   gap beside it. */
.figures {
    position: sticky;
    top: calc(var(--gutter-top) + var(--lh) * 2);
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    gap: 3ch;
    font-family: ui-monospace, "Consolas", "DejaVu Sans Mono", monospace;
}

.fig {
    flex: 0 0 auto;
    margin: 0;
}

.cap {
    color: var(--comment);
    font-size: 11px;
    line-height: var(--lh);
    margin-top: 6px;
}

/* Drop a file at the path the frame names and it appears; until then the
   frame says what belongs there. The box is sized by the picture, never the
   other way round, so a capture is shown at its own resolution and is never
   smeared by being stretched into a shape it does not have. */
.shot {
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid var(--comment);
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24ch;
    min-height: calc(var(--lh) * 7);
}

/* The column has to fit the viewport: a sticky element taller than its
   scrollport stops sticking and drifts off with the text. */
.shot img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 56vh;
}

.shot-note {
    color: var(--comment);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    padding: 0 10px;
}

/* ---- the panel beside the captures ---------------------------------- */

.panel {
    flex: 1 1 auto;
    min-width: 24ch;
    padding-top: calc(var(--lh) / 2);
    border-top: 1px solid var(--comment);
    font-size: 13px;
    line-height: var(--lh);
    color: var(--fg);
}

.panel-h { color: var(--string); }
.panel-s { color: var(--comment); font-size: 11px; margin-bottom: 4px; }
.panel-f { color: var(--comment); font-size: 11px; margin-top: 10px; }

/* Narrower than the two columns need, the captures rejoin the document and
   sit under it rather than squeezing the measure. */
@media (max-width: 1240px) {
    .split { display: block; padding-right: 0; }

    .figures {
        position: static;
        flex-wrap: wrap;
        margin-top: calc(var(--lh) * 2);
    }
}

/* ---- shared ------------------------------------------------------- */

.doc a { font-size: inherit; opacity: 1; color: var(--rail); }
.doc a:hover { color: var(--fg); }

.spark { color: var(--keyword); }
.spark.low { color: var(--comment); }
.spark.warm { color: var(--string); }

/* ---- narrow ------------------------------------------------------- */

/* These pages are columns of aligned figures. Wrapping them the way prose
   wraps would destroy the alignment that carries the meaning, so they keep
   their lines whole and scroll sideways instead. */
@media (max-width: 640px) {
    .prose {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .row {
        white-space: nowrap;
        height: var(--lh);
        min-height: 0;
    }

    /* The name column only exists to push the state to a fixed column; on a
       narrow screen that is dead space the reader has to scroll past. */
    .pname { width: auto; padding-right: 2ch; }
}