/* YOUR ACCOUNT (render/learn-pages.ts, assets/account.js). The dashboard spec of 2026-10-19: one primary action on the
   screen, cards in one quiet frame, the site's own tokens. Row 1: Continue working, full width. Row 2: My learning,
   My projects, Saved (1.25fr / 1fr / 0.8fr), equal height; under 64rem learning spans and the other two pair up; under
   40rem, one column. One screen at 1440x900 and 1280x800; no horizontal overflow at any width. */
.ya { --ya-gap: var(--s4); }
/* hidden means hidden: several cards set display, which would otherwise outrank the attribute. */
.ya [hidden] { display: none !important; }
.ya-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s5); margin: 0 0 var(--s4); }
/* The page title on the display scale's large step: the dashboard is a tool, not an essay, so it shares the first row
   with who is signed in (spec: h1 left, email + Sign out + Account settings right). */
.ya .ya-head .ya-h1 { margin: 0; font-size: var(--t-display-lg); }
.ya-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.ya-who p { margin: 0; overflow-wrap: anywhere; }
.ya-who b { color: var(--ink); }

.ya-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 var(--s4); cursor: pointer; background: transparent; white-space: nowrap; }
/* ya-kicker, ya-meta and ya-note use --ink-2: --ink-3 on a card's fill measured 4.37:1 (axe, 2026-10-19). */
/* (learn.css makes non-primary <button>.btn transparent; this outranks it for ours.) */
.ya .ya-btn--primary, .ya a.ya-btn--primary, .ya button.btn.ya-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.ya .ya-btn--primary:hover, .ya a.ya-btn--primary:hover, .ya button.btn.ya-btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ya a.ya-btn:not(.ya-btn--primary) { color: var(--ink); }
.ya-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--brand); font: 500 var(--t-sm)/1.3 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ya .ya-link { color: var(--brand); }
.ya a:focus-visible, .ya button:focus-visible, .ya summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.ya-grid { display: grid; grid-template-columns: 1.25fr 1fr 0.8fr; gap: var(--ya-gap); }
.ya-card { border: 1px solid var(--rule-firm); border-radius: var(--r-soft); background: var(--paper-3); padding: var(--s5); min-width: 0; }
.ya-card--quiet { background: none; }
.ya-kicker { margin: 0 0 var(--s1); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
.ya-h2 { margin: 0 0 var(--s2); font: 650 var(--t-display-md)/1.05 var(--display); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.ya-h2--card { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s3); font: 650 var(--t-lg)/1.2 var(--display); }
.ya-h2__link { font-weight: 500; min-height: 0; white-space: nowrap; }
.ya-h3 { margin: 0; font: 650 var(--t-md)/1.25 var(--display); color: var(--ink); }
.ya-meta { margin: 0 0 var(--s4); font: var(--t-xs)/1.5 var(--mono); color: var(--ink-2); }
.ya-strong { margin: 0 0 var(--s1); font-weight: 650; color: var(--ink); }
.ya-big { margin: 0 0 var(--s1); font: 650 var(--t-lg)/1.2 var(--display); color: var(--ink); }
.ya-card p { margin-top: 0; }
.ya-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: var(--s4) 0 0; }
/* A row of actions wraps button by button first; a label only wraps once its button is alone on the line and still
   wider than the card (breakfinder, settings at 344px and below, 2026-10-19). */
.ya-actions .ya-btn { max-width: 100%; white-space: normal; text-align: center; }

/* Row 1: Continue working. Text and actions first; the picture beside them, about a quarter shorter than before. */
.ya-continue { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s5); align-items: center; }
.ya-next { margin: 0 0 var(--s2); padding: var(--s3) var(--s4); border-left: 2px solid var(--brand); background: var(--brand-wash); }
.ya-next p:last-child { margin: 0; font: 600 var(--t-md)/1.35 var(--ui); color: var(--ink); }
.ya-pic { display: grid; place-items: center; text-decoration: none; aspect-ratio: 16 / 9; max-height: max(10rem, calc(100dvh - 33rem)); justify-self: end; width: 100%; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-deep); }
.ya-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Row 2 */
.ya-lesson { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.ya-lesson > div { min-width: 0; flex: 1 1 12rem; }
.ya-bar { height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.ya-bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .3s ease; }
.ya-barline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s2) 0 0; font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.ya-note { margin: var(--s2) 0 0; font: var(--t-xs)/1.5 var(--ui); color: var(--ink-2); }
.ya-plist { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.ya-plist li { border-top: 1px solid var(--rule); }
.ya-plist li > a, .ya-plist--page li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; min-height: 2.75rem; color: inherit; text-decoration: none; }
.ya-plist b { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ya-plist span:not(.ya-th):not(.ya-tile) { min-width: 0; }
.ya-plist .ya-meta { margin: 0; }
.ya-th { flex: none; width: 56px; height: 35px; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; display: grid; place-items: center; background: var(--paper-deep); }
.ya-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ya-tile { display: grid; place-items: center; width: 100%; height: 100%; font: 650 var(--t-sm)/1 var(--mono); color: var(--ink-2); }
.ya-tile--big { font-size: var(--t-display-md); color: var(--ink-3); }

/* A brand-new account */
.ya-welcome { margin: 0; }
.ya-ways { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ya-gap); margin: var(--s4) 0 0; padding: 0; }
.ya-way a { display: flex; flex-direction: column; gap: var(--s2); height: 100%; padding: var(--s4); border: 1px solid var(--rule-firm); border-radius: var(--r); color: var(--ink-2); text-decoration: none; }
.ya-way a:hover { border-color: var(--brand); }
.ya-way--lead a { border-color: var(--ink); }
.ya-way b { font: 650 var(--t-md)/1.25 var(--display); color: var(--ink); }
.ya-way em { margin-top: auto; font: 600 var(--t-sm)/1.3 var(--ui); font-style: normal; color: var(--brand); }
.ya-foot { margin: var(--s3) 0 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-3); }
.ya-notice { margin: 0 0 var(--s4); padding: var(--s4); border: 1px solid var(--brand); border-radius: var(--r-soft); background: var(--brand-wash); }
.ya-notice p { margin: 0; }
.ya-save { margin: var(--s3) 0 0; }
/* "Saved" already shows in My learning's note; under the grid it only repeats it. Kept for screen readers (it's the
   live region), shown to everyone the moment there is something to act on (paused, offline, error, ended). */
.ya-save[data-state="saved"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Settings and projects */
.ya-plist--page li > a[aria-current="true"] b { color: var(--brand); }
.ya-plist--page li > a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; min-height: 2.75rem; color: inherit; text-decoration: none; }
.ya-archived { margin: var(--s3) 0 var(--ya-gap); }
.ya-archived summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font: 500 var(--t-sm)/1.3 var(--ui); }
/* One project: details beside its picture; progress and checks below. */
.ya-detail { max-width: 64rem; }
.ya-detail__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); align-items: start; margin: var(--s4) 0 0; }
.ya-pic--edit { justify-self: stretch; max-height: none; margin: 0 0 var(--s3); }
.ya-file { display: block; max-width: 100%; margin: var(--s2) 0; font: var(--t-sm)/1.4 var(--ui); }
.ya-sub { margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--rule); }
.ya-phase { border-top: 1px solid var(--rule); }
.ya-phase summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font: 600 var(--t-sm)/1.3 var(--ui); color: var(--ink); }
.ya-tasks { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.ya-tasks li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4); min-height: 2.75rem; }
.ya-tasks label { display: flex; align-items: center; gap: var(--s2); min-height: 2.75rem; cursor: pointer; }
.ya-tasks input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); flex: none; }
.ya-checks { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.ya-checks li { padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.ya-checks p { margin: 0 0 var(--s1); }
.ya-source { border: 0; margin: 0 0 var(--s4); padding: 0; }
.ya-source label { display: block; margin: var(--s2) 0 0; padding: var(--s3); border: 1px solid var(--rule-firm); border-radius: var(--r); cursor: pointer; color: var(--ink-2); }
.ya-source label:has(input:checked) { border-color: var(--brand); }
.ya-source input { accent-color: var(--brand); }
.ya-source b { color: var(--ink); }
.ya-set { max-width: 46rem; margin: 0 0 var(--ya-gap); }
.ya-form { max-width: 34rem; }
/* Several fields in one form: a label belongs to the field under it. .lw-form's grid gap (--s2) already separates a label
   from its input, so the label's own margin moves above it: --s2 to its field, --s2 + --s3 from the field before. */
.ya-form .ti-label { margin: var(--s3) 0 0; }
.ya-form > .ti-label:first-child { margin-top: 0; }

/* Dialogs: the house drawer. Esc and × close; focus returns to the trigger (account.js). */
.ya-dlg { width: min(30rem, calc(100vw - 2rem)); max-height: min(40rem, calc(100dvh - 2rem)); padding: var(--s5); border: 1px solid var(--rule-firm); border-radius: var(--r-soft); background: var(--paper); color: var(--ink); }
.ya-dlg::backdrop { background: rgb(0 0 0 / 0.45); }
.ya-dlg__head { display: flex; align-items: start; justify-content: space-between; gap: var(--s3); }
.ya-x { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: none; color: var(--ink-2); font-size: 1.5rem; cursor: pointer; }
.ya-stages { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.ya-stages li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 2.75rem; border-top: 1px solid var(--rule); }
.ya-stages a { color: var(--ink); }
.ya-stages__n { font: var(--t-sm)/1 var(--mono); color: var(--ink-2); }
.ya-stages li.is-done .ya-stages__n { color: var(--brand); }
.ya-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: var(--s3) 0; }
.ya-dl dt { color: var(--ink-3); font: var(--t-sm)/1.5 var(--ui); }
.ya-dl dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 64rem) {
  .ya-grid { grid-template-columns: 1fr 1fr; }
  .ya-learn { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .ya-head { align-items: start; }
  .ya-grid, .ya-ways { grid-template-columns: 1fr; }
  .ya-continue { grid-template-columns: 1fr; }
  .ya-pic { order: -1; justify-self: stretch; max-height: none; }
  /* A first-letter tile stands in for a picture the project doesn't have yet; on a phone it would only push the
     next step down, so it gives way. A real picture (the no-project drawing) stays. */
  .ya-pic:not(:has(img)) { display: none; }
  .ya-detail__grid { grid-template-columns: 1fr; }
  .ya-pic--edit:not(:has(img)) { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .ya-bar i { transition: none; } }

/* PUBLIC SIGN-UP (lane R2, 2026-11-01). The Terms + 18+ step is one card in the dashboard's own frame, shown once per
   account before anything is saved; two plain checkboxes, each label the whole row (44px target). The link landing's
   account-switch warning takes Continue working's next-step bar: one ruled, washed line that has to be read before the
   button. */
.ya-terms { max-width: 40rem; margin: 0 0 var(--ya-gap); }
.ya-checks-form { display: grid; gap: var(--s2); margin: var(--s3) 0 0; }
.ya-check { display: flex; align-items: center; gap: var(--s3); min-height: 2.75rem; font: var(--t-md)/1.4 var(--ui); color: var(--ink); cursor: pointer; }
.ya-check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--brand); }
.ya-check a { color: var(--brand); text-underline-offset: 3px; }
.ya-switch { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-left: 2px solid var(--brand); background: var(--brand-wash); font: var(--t-sm)/1.5 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
/* The link landing isn't inside .ya, so its buttons' display outranked [hidden] and a spent link still showed Continue
   (found by the R2 journey, A1). Hidden means hidden there too. */
[data-learn-page="confirm"] [hidden] { display: none !important; }

/* "Just look around first" under Email me a link (RM for AllWeb, 2026-11-04): a plain, visible way out of sign-up. */
.ya-look { margin: var(--s3) 0 0; }

/* PROJECTS (lane PJ, 2026-11-04; brief ~/Aesthetary Audits/projects-redesign-2026-11-04/BRIEF.md). Level 1 is a gallery of
   the house card (lifecycle.css .lc-card's ground and rule) on the real content width; level 2 is one project's view at
   #p-<id>; one phase's tasks and a new project open in the Work drawer (.pc-dlg). Site tokens and the --s scale only.
   The motif is the phase strip: eight segments, one per phase, each filled by that phase's real done/total. It is the
   page's only data graphic. Purple means progress made (the strip, a finished phase in Outputs' "made" treatment) and the
   one next step; the current project is marked in words and a dot, not in colour. */
.pj { margin-top: var(--s2); }
.pj-note { margin: var(--s2) 0 0; max-width: 62ch; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.pj-loading { margin: 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.pj-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s5) 0 0; }
.pj-acts .wg-cta, .pj-acts .wg-btn { white-space: normal; text-align: start; }
.ia .pj a.wg-cta, .ia .pj a.wg-cta:visited, .ia .pj a.wg-btn--go, .ia .pj a.wg-btn--go:visited { color: var(--paper); text-decoration: none; }
.ia .pj a.wg-btn:not(.wg-btn--go) { color: var(--ink); text-decoration: none; }
/* What just happened ("Added …", "Picture saved", "Saving…") has one reserved slot under the page head (RM review of
   d39ac564: a sticky line sat on top of the Progress heading). It is in the flow, one line tall even when empty, so a
   message never covers content and never shifts it. Every action that says something either sits near the top of the
   view or changes what it acts on visibly (Archive's own label, the picture, Delete's move to the gallery). */
.pj-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-height: 2.5rem; margin: 0 0 var(--s4); }
.pj-status p { margin: 0; padding: var(--s1) var(--s3); font: 500 var(--t-sm)/1.4 var(--ui); color: var(--ink); background: var(--paper-3); border-left: 3px solid var(--ink-2); }
.pj-status p:empty, .pj-status .pj-save[data-state="saved"] { min-height: 0; padding: 0; border: 0; }

/* the strip */
.pj-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; height: 6px; }
.pj-strip i { display: block; overflow: hidden; background: var(--rule-firm); border-radius: 1px; }
.pj-strip b { display: block; height: 100%; background: var(--brand); }
.pj-strip--wide { height: 10px; margin: var(--s3) 0 0; gap: 3px; }

/* ---- level 1: what's next, the gallery, archived ---- */
.pj-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s1) var(--s5); margin: 0 0 var(--s7);
  padding: var(--s4) var(--s5); border-left: 3px solid var(--brand); background: var(--brand-wash); }
.pj-next__k { grid-column: 1; margin: 0; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.pj-next__t { grid-column: 1; margin: 0; font: 650 var(--t-md)/1.3 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.pj-next .wg-btn { grid-column: 2; grid-row: 1 / span 2; }
.pj-sec__h { margin: 0 0 var(--s4); }
.pj-gal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.pj-gal--small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--s4); margin-top: var(--s4); }
.pj-card { min-width: 0; }
.pj-card__hit { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; transition: border-color .16s ease; }
.ia .pj a.pj-card__hit, .ia .pj a.pj-card__hit:visited { color: var(--ink); text-decoration: none; }
.pj-card__hit:hover { border-color: var(--ink-3); }
.pj-card__hit:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pj-card.is-current .pj-card__hit { border-color: var(--ink-3); }
.pj-card__body { display: flex; flex-direction: column; gap: var(--s2); flex: 1; padding: var(--s4); min-width: 0; }
.pj-card__k { display: flex; align-items: center; gap: var(--s2); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-2); }
.pj-card.is-current .pj-card__k { color: var(--ink); }
.pj-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink); }
.pj-card__t { font: 650 var(--t-md)/1.15 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.pj-card__u { margin-top: calc(-1 * var(--s1)); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-card .pj-strip { margin-top: var(--s1); }
.pj-card__s { font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.pj-card__s--quiet { color: var(--ink-2); }
.pj-card__go { margin-top: auto; padding-top: var(--s2); font: 600 var(--t-sm)/1 var(--ui); color: var(--ink); }
.pj-card__hit:is(:hover, :focus-visible) .pj-card__go { text-decoration: underline; text-underline-offset: .2em; }
.pj-gal--small .pj-card__body { padding: var(--s3); }
.pj-archived { margin: var(--s8) 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule); }
.pj-archived summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; font: 650 var(--t-md)/1.2 var(--ui); color: var(--ink); }
.pj-archived summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* a cover: the learner's own picture, or the project's name set as a wordmark */
.pj-cover { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); border-bottom: 1px solid var(--rule); }
.pj-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pj-cover__word { position: absolute; inset: 0; overflow: hidden; }
.pj-cover__word b { position: absolute; left: -.04em; bottom: -.3em; font: 800 clamp(8rem, 14vw, 11rem)/1 var(--display); letter-spacing: -.05em; color: var(--rule-firm); }
.pj-gal--small .pj-cover__word b { font-size: 7rem; }
.pj-cover--big { border: 1px solid var(--rule); border-radius: var(--r-soft); }
.pj-cover--big .pj-cover__word b { font-size: clamp(12rem, 24vw, 20rem); }

/* what a project is: the empty gallery and the signed-out page */
.pj-intro { display: grid; gap: var(--s6) var(--s8); align-items: start; padding: var(--s6) 0 0; border-top: 1px solid var(--rule); }
.pj-intro__h { margin: 0; max-width: 18ch; font: 800 var(--t-display-md)/1.02 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.pj-intro__p { margin: var(--s4) 0 0; max-width: 56ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.pj-intro__p b { color: var(--ink); font-weight: 600; }
.pj-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0 var(--s5); }
.pj-route li { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); font: 650 var(--t-md)/1.2 var(--display); color: var(--ink); }
.pj-route__n { flex: none; width: 1.5rem; font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
@media (min-width: 60rem) { .pj-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.pj-out-note { margin: var(--s6) 0 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.ia .pj-out-note a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.pj-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s5); margin: var(--s8) 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule); font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.pj-who b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pj-who .ya-link { font-size: var(--t-sm); }

/* ---- level 2: one project ---- */
.pj-back { margin: 0 0 var(--s5); }
.ia .pj-back a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 var(--t-sm)/1 var(--ui); color: var(--ink-2); text-decoration: underline; text-underline-offset: .25em; }
.ia .pj-back a:hover { color: var(--ink); }
.pj-hero { display: grid; gap: var(--s6) var(--s7); align-items: start; }
.pj-hero__text { order: -1; } /* the name and what it's for first, at every width; the picture beside it, or under it */
@media (min-width: 56rem) { .pj-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.pj-kind { margin: 0 0 var(--s2); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
.pj-h { margin: 0; font: 800 clamp(2.25rem, 4.6vw, 3.75rem)/.98 var(--display); letter-spacing: -.035em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.pj-h:focus { outline: none; }
.pj-url { margin: var(--s3) 0 0; font: var(--t-sm)/1.4 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.ia .pj-url a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.pj-facts { margin: var(--s5) 0 0; display: grid; gap: var(--s4); }
.pj-facts dt { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
.pj-facts dd { margin: var(--s1) 0 0; max-width: 52ch; font: var(--t-md)/1.45 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.pj-facts__none dd { font-size: var(--t-base); color: var(--ink-2); }
.pj-meta { margin: var(--s4) 0 0; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
.pj-meta:empty { display: none; }
.pj-pic-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s3) 0 0; }
.pj-pic-acts .wg-btn { cursor: pointer; }
.pj-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pj-file:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 3px; }
.pj-hero__pic .pj-note { font-size: var(--t-xs); }

.pj-sub { margin: var(--s8) 0 0; padding-top: var(--s5); border-top: 1px solid var(--rule); }
.pj-sub__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); }
.pj-sub__h { margin: 0; font: 700 var(--t-lg)/1.15 var(--display); letter-spacing: -.015em; color: var(--ink); }
.pj-sum { margin: 0; font: var(--t-sm)/1.4 var(--mono); color: var(--ink); }
.pj-phases { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .pj-phases { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 4 + 4: the eight phases as two rows, never 5 + 3 */
.pj-ph__b { display: grid; gap: var(--s1); width: 100%; height: 100%; padding: var(--s3) var(--s4) var(--s4); text-align: start; color: var(--ink); background: none;
  border: 1px solid var(--rule-firm); border-radius: var(--r-soft); cursor: pointer; font: inherit; }
.pj-ph__b:hover { background: var(--paper-3); }
.pj-ph__b:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pj-ph__n { font: 650 var(--t-md)/1.2 var(--display); }
.pj-ph__c { font: var(--t-sm)/1.3 var(--mono); color: var(--ink-2); }
.pj-ph__s { font: var(--t-xs)/1.3 var(--ui); color: var(--ink-2); }
.pj-ph.is-now .pj-ph__b { border-color: var(--ink-2); }
/* a finished phase takes Outputs' "made" treatment (LU, 0869412e): the violet edge and a ✓ line */
.pj-ph.is-done .pj-ph__b { border: 2px solid var(--brand); padding: calc(var(--s3) - 1px) calc(var(--s4) - 1px) calc(var(--s4) - 1px); }
.pj-ph.is-now .pj-ph__s { color: var(--ink); font-weight: 600; }
.pj-bar { display: block; height: 4px; margin: var(--s1) 0; background: var(--rule-firm); border-radius: 2px; overflow: hidden; }
.pj-bar i { display: block; height: 100%; background: var(--brand); }
.pj-outside { margin: var(--s7) 0 0; padding: var(--s4); max-width: 62ch; border: 1px dashed var(--rule-firm); font: var(--t-base)/1.5 var(--ui); color: var(--ink-2); }
.pj-manage__grid { display: grid; gap: var(--s4); margin: var(--s4) 0 0; }
@media (min-width: 48rem) { .pj-manage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pj-manage__i { padding: var(--s4); border: 1px solid var(--rule); border-radius: var(--r-soft); }
.pj-manage__p { margin: 0 0 var(--s3); max-width: 48ch; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.pj-manage__p b { color: var(--ink); font-weight: 650; }
.pj-confirm { margin: var(--s3) 0 0; padding: var(--s3) var(--s4); border-left: 3px solid var(--ink); background: var(--paper-3); }
.pj-confirm__q { margin: 0; font: 600 var(--t-sm)/1.5 var(--ui); color: var(--ink); }
.pj-confirm__q:focus { outline: none; }
.pj-confirm .pj-acts { margin-top: var(--s3); }

/* the forms: Edit details, and a new project's drawer */
.pj-form { max-width: 36rem; }
.pj-field { display: grid; gap: var(--s2); margin: var(--s4) 0 0; }
.pj-field:first-child, .pj-kinds + .pj-field { margin-top: var(--s5); }
.pj-form > .pj-field:first-child { margin-top: 0; }
.pj-hint { margin: calc(-1 * var(--s1)) 0 0; font: var(--t-xs)/1.4 var(--ui); color: var(--ink-2); }
.pj-err { margin: var(--s3) 0 0; min-height: 1.4em; font: 600 var(--t-sm)/1.4 var(--ui); color: var(--ink); }
.pj-form .lw-input[aria-invalid="true"] { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px; }
.pj-kinds { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s2); }
.pj-kinds legend { margin-bottom: var(--s2); }
.pj-kindopt { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4); border: 1px solid var(--rule-firm); border-radius: var(--r-soft); cursor: pointer; }
.pj-kindopt:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.pj-kindopt input { flex: none; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--brand); }
.pj-kindopt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.pj-kindopt b { display: block; font: 650 var(--t-md)/1.25 var(--display); color: var(--ink); }
.pj-kindopt > span > span { display: block; margin-top: var(--s1); font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }

/* one phase's tasks, in the drawer */
.pj-tasks { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.pj-tasks li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4); padding: var(--s1) 0; border-top: 1px solid var(--rule); }
.pj-tasks li:last-child { border-bottom: 1px solid var(--rule); }
.pj-task { display: flex; align-items: center; gap: var(--s3); flex: 1 1 16rem; min-width: 0; min-height: 2.75rem; cursor: pointer; font: var(--t-base)/1.35 var(--ui); color: var(--ink); }
.pj-task input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--brand); }
.pj-task > span { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; }
.pj-task__n { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.ia .pj-task__go, .pj-task__go { display: inline-flex; align-items: center; min-height: 2.75rem; font: var(--t-sm)/1 var(--ui); color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) { .pj-card__hit { transition: none; } }
@media (max-width: 40rem) {
  .pj-gal:not(.pj-gal--small) .pj-cover { aspect-ratio: 2 / 1; } /* a phone shows more projects per screen; the picture keeps its top */
  .pj-next { grid-template-columns: 1fr; }
  .pj-next .wg-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s2); }
  .pj-route { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

.wk .lw-msg:empty { min-height: 0; margin: 0; padding: 0; } /* rendered, so a screen reader hears what it says next, but no room taken */
/* "Saved to your account" is the normal state: kept for screen readers (it's the live region), shown when there is
   something to act on, as on Your account. */
.pj-save[data-state="saved"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pj-is-detail [data-pj-phases] { display: none; }