/* ==========================================================================
   The Projects page

   `.page` in `pages.css` already gives this the area below the header, its own
   scroll and the `display: none` that makes `hidden` mean it. Everything here
   is what goes inside that area, and every selector stays under `.projects` so
   this surface can move without touching the session list.

   **The page has one loud thing on it and it is `delivered`.** The four other
   outcomes are `<details>` in the ordinary panel type; the delivered block gets
   the accent border, the big count and the open list — the same weight the
   Portfolio gives its primary KPI, for the same reason. If a later change makes
   a second block on this page shout, that block is competing with the number
   this page was built to show.

   No entrance animation, on purpose and for the third time in this app: a
   `translateX` sits at its first keyframe for as long as the animation is
   `running`, and a renderer that throttles animations leaves the thing on
   screen and off the edge of it. See the note in `pages.css`.
   ========================================================================== */
.projects {
    padding: clamp(16px, 3vw, 34px);
    color: var(--ink);
    background:
        radial-gradient(circle at 8% -10%, rgba(217, 119, 87, .13), transparent 31rem),
        var(--bg);
}
.projects button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}
/* The heading takes focus on arrival and on the way back from a Project, so it needs a ring of
   its own — a focus target with no visible focus is a keyboard landing somewhere it cannot see. */
.projects h1:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 4px; }

.projects-shell { width: min(980px, 100%); margin: 0 auto; padding-bottom: 48px; }
.projects-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.projects-heading h1 { margin: 2px 0 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.04; letter-spacing: -.04em; }
.projects-lede { max-width: 560px; margin: 10px 0 0; color: var(--dim); font-size: 14px; }
.projects-path { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--faint); font: 12px/1.4 var(--mono); }
.projects-stat { color: var(--faint); font: 680 22px/1 var(--mono); letter-spacing: -.04em; }
.projects-status { min-height: 20px; margin: 12px 2px; color: var(--dim); font-size: 13px; }

/* ---- the list ------------------------------------------------------------ */

.projects-rows { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.project-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* A thumb's worth. This is the whole navigation of the page on a phone. */
    min-height: 56px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    background: var(--card);
    text-align: left;
}
.project-row:hover { border-color: var(--accent-ed); background: var(--card-hi); }
.project-row-mark { flex: none; width: 32px; height: 16px; image-rendering: pixelated; }
/* A Project with no mark keeps the same indent as one that has it: a list whose rows start in
   two different places reads as two lists. `drawIcon` draws nothing rather than a substitute. */
.project-row-mark.none { background: var(--line); border-radius: 4px; }
.project-row-text { display: grid; gap: 2px; min-width: 0; }
.project-row-name { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.project-row-path { overflow: hidden; color: var(--faint); font: 11px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }

/* ---- one Project --------------------------------------------------------- */

.projects-back {
    min-height: 40px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    background: rgba(22, 22, 26, .84);
    color: var(--ink);
}
.projects-back:hover { border-color: var(--accent-ed); background: var(--card-hi); }
/* `.projects-heading` pushes its two halves apart, which is what the list's count needs and the
   opposite of what an identity is: the mark and the name are one thing and belong together at the
   left edge. Seen in a browser and nowhere else — a stand-in document has no layout to be wrong. */
.project-identity { justify-content: flex-start; align-items: center; gap: 14px; }
.project-mark { flex: none; width: 40px; height: 20px; image-rendering: pixelated; }
.project-mark.none { background: var(--line); border-radius: 4px; }

.projects-warning {
    margin: 12px 0;
    border: 1px solid rgba(176, 138, 74, .65);
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(176, 138, 74, .1);
    color: #e4c58e;
    font-size: 13px;
}

/* The block this page is for. */
.project-delivered {
    margin: 18px 0;
    border: 1px solid var(--accent-ed);
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(217, 119, 87, .15), rgba(24, 20, 20, .95));
}
.project-delivered-head { display: flex; align-items: baseline; gap: 16px; }
.project-delivered-count { font: 680 clamp(34px, 6vw, 52px)/1 var(--mono); letter-spacing: -.05em; color: var(--accent); }
.project-delivered h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.project-delivered-say { margin: 6px 0 0; max-width: 620px; color: var(--dim); font-size: 13px; }
/* Nothing waiting is worth its own sentence rather than an absence: an empty screen where a
   count used to be reads as a page that failed to load. */
.project-good { margin: 18px 0; border-left: 2px solid var(--ok); padding: 6px 0 6px 12px; color: var(--dim); font-size: 13px; }
.project-none { margin: 18px 0; border-left: 2px solid var(--line); padding: 6px 0 6px 12px; color: var(--dim); font-size: 13px; }

/* ---- the other four rungs ------------------------------------------------ */

.project-groups { display: grid; gap: 8px; margin: 18px 0; }
.project-group { border: 1px solid var(--line); border-radius: 14px; background: rgba(22, 22, 26, .88); }
.project-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px;
    cursor: pointer;
    list-style: none;
}
.project-group > summary::-webkit-details-marker { display: none; }
.project-group > summary:hover { color: var(--ink); }
.project-group-name { font-size: 15px; font-weight: 600; }
.project-group-count { color: var(--faint); font: 680 16px/1 var(--mono); }
.project-group-say { margin: 0 16px 10px; color: var(--faint); font-size: 12px; }
.project-group[open] > summary { border-bottom: 1px solid var(--line); }

/* ---- a worktree ---------------------------------------------------------- */

.project-worktrees { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.project-group .project-worktrees { margin: 0; padding: 0 16px 16px; }
.project-worktree {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(14, 14, 17, .55);
}
.project-worktree-features { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.project-worktree-id { display: inline-block; margin-top: 4px; color: var(--faint); font: 11px/1.4 var(--mono); }
.project-facts { display: grid; gap: 4px; margin-top: 10px; }
.project-fact { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.project-fact-key { flex: none; color: var(--faint); font-size: 11px; }
.project-fact-value { min-width: 0; overflow-wrap: anywhere; text-align: right; font-size: 12px; font-weight: 500; }
/* The branch is the only thing on this screen somebody can act on, so it is the one value drawn
   as something typed rather than as prose. It is a convention and the label beside it says so. */
.project-fact-branch .project-fact-value { color: var(--accent); font-family: var(--mono); }

/* ---- what is not this Project's, and what was not read ------------------- */

.project-note { margin: 14px 0; color: var(--faint); font-size: 12px; }
.project-unattributed { margin: 18px 0; border: 1px dashed var(--line); border-radius: 14px; padding: 14px 16px; }
.project-unattributed h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.project-unattributed p { margin: 6px 0 0; max-width: 620px; color: var(--dim); font-size: 12px; }
/* The receipt. Quiet, present whenever the route answered, and the whole of what tells an empty
   answer from one that never arrived — so it is never styled away to nothing. */
.project-read { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--faint); font: 11px/1.5 var(--mono); }

@media (max-width: 620px) {
    .projects-heading { flex-direction: column; gap: 8px; }
    .project-identity { flex-direction: row; align-items: center; }
    .project-delivered-head { flex-direction: column; gap: 6px; }
    .project-fact { flex-direction: column; gap: 1px; }
    .project-fact-value { text-align: left; }
}