/* ---------- THE PROJECTS ROOM AND THE DRAWER ----------
   WORLD-PROJECT-WORKS.md lane 4. rooms/projects.js is the room and
   lib/drawer.js is the file machinery the Keep mounts too (lane 5), so the
   `.dr-` half of this sheet is deliberately not keyed to `.pj-`: the same
   markup has to look the same inside a floating window as it does on the
   canvas.

   MARK'S RULING FOR A PANEL OF ROWS (2026-09-02), kept here in full: no mono
   type, no pills on a row, no filled blue. The house body face at the house
   sizes, muted tones, and the accent on exactly the open thing. The two view
   pills and the four kind pills are switches rather than badges on rows, which
   is the distinction that ruling draws.

   EVERY SIZE COMES OFF THE --t-* SCALE and every colour off the theme's own
   tokens, which is the theme law (CLAUDE.md): nothing here is a number chosen
   on the spot, and there is not one inline style in either JS file. */

.pj{display:flex;flex-direction:column;gap:14px;min-height:0;padding:16px 20px 24px}

/* ---------- THE THREE PILLS ----------
   The Keep's own face row: a track with the on segment lit, and the segments
   carry the same weight so the pill and the colour say which is on. */
.pj-tabs{display:flex;align-self:center;gap:2px;flex:none;padding:3px;
  background:var(--chrome);border:var(--bd) solid var(--edge);border-radius:var(--r-pill)}
.pj-tab{padding:6px 16px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink4);
  font:inherit;font-size:var(--t-tiny);font-weight:var(--w-med);letter-spacing:var(--ls-label);cursor:pointer}
.pj-tab:hover{color:var(--text)}
.pj-tab.on{background:var(--sel);color:var(--text)}

.pj-empty{margin:0;padding:18px 2px;color:var(--muted);font-size:var(--t-small);line-height:var(--lh-body)}

/* ---------- MINE ---------- */
.pj-mine{display:grid;gap:18px;max-width:720px;width:100%;align-self:center}
.pj-group{display:grid;gap:6px}
/* The world's title is a LABEL, not a control, so it takes no press affordance
   and reads a step quieter than the rows under it. */
.pj-group-name{margin:0;padding:0 2px;color:var(--muted);font-size:var(--t-sub);font-weight:var(--w-semi)}
.pj-rows{display:grid;gap:1px}
.pj-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:var(--r-sm)}
.pj-row:hover{background:var(--sel)}
.pj-row.sel{background:var(--sel)}
.pj-go{flex:1;min-width:0;display:grid;gap:1px;padding:0;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer}
.pj-name{overflow:hidden;color:var(--ink2);font-size:var(--t-body);text-overflow:ellipsis;white-space:nowrap}
.pj-sub{color:var(--muted);font-size:var(--t-tiny)}
.pj-row:hover .pj-name{color:var(--text)}
/* THE ACCENT ON THE OPEN THING ALONE. It is the ink that moves, never a filled
   ground: a row painted blue is a row shouting, and ten of them is a panel
   where nothing is lit. */
.pj-row.on .pj-name{color:var(--accent);font-weight:var(--w-med)}
.pj-row.on .pj-sub{color:var(--accent-line)}
/* THE HOVER CROSS, the comic shelf's own: there only under the pointer or a
   keyboard focus, because a list wearing a permanent cross on every row is a
   list that looks like it is asking to be emptied. */
.pj-x{flex:none;padding:2px 7px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);
  font-size:var(--t-body);line-height:1;cursor:pointer;opacity:0}
.pj-row:hover .pj-x,.pj-row:focus-within .pj-x,.dr-folder:hover .dr-x,.dr-folder:focus-within .dr-x,
.dr-row:hover .dr-x,.dr-row:focus-within .dr-x{opacity:1}
.pj-x:hover,.dr-x:hover{background:var(--sel);color:var(--danger)}
.pj-rename{flex:1;min-width:0;padding:4px 6px;border:var(--bd) solid var(--accent-line);border-radius:var(--r-sm);
  background:var(--inset);color:var(--text);font:inherit;font-size:var(--t-body);outline:none}
.pj-rename:focus{border-color:var(--accent)}
.pj-row-gone .pj-name{color:var(--muted)}
.pj-archived{margin-top:4px}
.pj-archived-head{padding:4px 2px;color:var(--muted);font-size:var(--t-tiny);cursor:pointer}

/* ---------- NEW PROJECT ---------- */
.pj-new{justify-self:start;padding:6px 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);
  font:inherit;font-size:var(--t-small);cursor:pointer}
.pj-new:hover{background:var(--sel);color:var(--text)}
.pj-new-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 2px}
.pj-kinds{display:flex;gap:2px;padding:2px;background:var(--chrome);border:var(--bd) solid var(--edge);border-radius:var(--r-pill)}
.pj-kind{padding:4px 10px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink4);
  font:inherit;font-size:var(--t-tiny);cursor:pointer}
.pj-kind:hover{color:var(--text)}
.pj-kind.on{background:var(--sel);color:var(--text)}
.pj-field{min-width:0;flex:1;padding:6px 9px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);
  background:var(--inset);color:var(--text);font:inherit;font-size:var(--t-small);outline:none}
.pj-field:focus{border-color:var(--accent)}
.pj-worlds{flex:none;max-width:180px}
.pj-ok{flex:none;padding:6px 10px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:none;
  color:var(--text);font:inherit;font-size:var(--t-small);cursor:pointer}
.pj-ok:hover:not(:disabled){background:var(--sel)}
.pj-ok:disabled{opacity:.45;cursor:default}
.pj-new-line .pj-x{opacity:1}

/* ---------- THE FILES FACE: canvas on the left, the drawer's map on the right ---------- */
.pj-files{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;min-height:0;flex:1}
.pj-files-main{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.pj-files-canvas{position:relative;flex:1;min-height:0;overflow:auto}
.pj-files-rail{min-width:0;overflow:auto;border-left:var(--bd) solid var(--edge);padding-left:12px}
/* A narrow canvas drops the rail rather than squeezing it: a map you cannot
   read the names on is not a map. */
@media (max-width:900px){
  .pj-files{grid-template-columns:minmax(0,1fr)}
  .pj-files-rail{display:none}
}

/* ---------- THE TOOLBAR ---------- */
.dr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:none}
.dr-quiet{padding:5px 9px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);
  font:inherit;font-size:var(--t-small);cursor:pointer}
.dr-quiet:hover,.dr-quiet.on{background:var(--sel);color:var(--text)}
.dr-pick{cursor:pointer}
.dr-field{min-width:0;padding:6px 9px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);
  background:var(--inset);color:var(--text);font:inherit;font-size:var(--t-small);outline:none}
.dr-field:focus{border-color:var(--accent)}
.dr-find{flex:1;min-width:140px}
.dr-new{display:flex;align-items:center;gap:4px}
.dr-ok{padding:5px 9px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:none;
  color:var(--text);font:inherit;font-size:var(--t-small);cursor:pointer}
.dr-ok:hover{background:var(--sel)}
.dr-x{flex:none;padding:2px 7px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);
  font-size:var(--t-body);line-height:1;cursor:pointer;opacity:0}
.dr-new .dr-x,.dr-dup-group .dr-x{opacity:1}
/* THE TWO VIEW PILLS, and they are a switch rather than a badge on a row. */
.dr-views{display:flex;gap:2px;padding:2px;background:var(--chrome);border:var(--bd) solid var(--edge);border-radius:var(--r-pill)}
.dr-view{padding:4px 10px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink4);
  font:inherit;font-size:var(--t-tiny);cursor:pointer}
.dr-view:hover{color:var(--text)}
.dr-view.on{background:var(--sel);color:var(--text)}
.dr-gear{display:grid;place-items:center;padding:5px;border:0;border-radius:var(--r-sm);background:none;
  color:var(--muted);cursor:pointer}
.dr-gear:hover,.dr-gear.on{background:var(--sel);color:var(--text)}

/* ---------- THE BREADCRUMB, and every link a drop target ---------- */
.dr-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px;flex:none}
.dr-crumb-b{padding:3px 6px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);
  font:inherit;font-size:var(--t-small);cursor:pointer}
.dr-crumb-b:hover{background:var(--sel);color:var(--text)}
.dr-crumb-b.on{color:var(--text)}
.dr-crumb-sep{color:var(--ink4);font-size:var(--t-small)}

/* ---------- THE GEAR CARD ---------- */
.dr-gear-card{display:grid;gap:8px;flex:none;padding:12px;border:var(--bd) solid var(--edge);
  border-radius:var(--r-md);background:var(--panel)}
.dr-dial{display:flex;align-items:center;gap:8px;font-size:var(--t-small);color:var(--text)}
.dr-dial-name{color:var(--text)}
.dr-dial-note{margin:0;color:var(--muted);font-size:var(--t-tiny);line-height:var(--lh-body)}
.dr-gear-card .dr-quiet{justify-self:start}
.dr-swatches{display:flex;gap:6px}
.dr-swatch{width:18px;height:18px;padding:0;border:var(--bd) solid var(--edge);border-radius:var(--r-round);cursor:pointer}
.dr-swatch.on{box-shadow:0 0 0 2px var(--accent-soft);border-color:var(--accent)}

/* THE SEVEN COLOURS, one class for the swatch, the tile, the row and the tree,
   so a folder wears the same colour on all four surfaces from one rule. */
.dr-c-none{--dr-c:var(--edge)}
.dr-c-blue{--dr-c:var(--dr-c-blue)}
.dr-c-green{--dr-c:var(--dr-c-green)}
.dr-c-amber{--dr-c:var(--dr-c-amber)}
.dr-c-red{--dr-c:var(--dr-c-red)}
.dr-c-purple{--dr-c:var(--dr-c-purple)}
.dr-c-gray{--dr-c:var(--dr-c-gray)}
.dr-swatch{background:var(--dr-c)}
.dr-folder .dr-folder-shape,.dr-row-folder .dr-folder-shape,.dr-tree-folder .dr-folder-shape{color:var(--dr-c)}

/* ---------- THE SELECTION BAR ---------- */
.dr-sel-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none;padding:6px 10px;
  border:var(--bd) solid var(--accent-line);border-radius:var(--r-md);background:var(--accent-soft)}
.dr-sel-n{color:var(--text);font-size:var(--t-small);font-weight:var(--w-med)}
.dr-sel-hint{color:var(--muted);font-size:var(--t-tiny)}

/* ---------- THE CANVAS ---------- */
.dr-groups{display:grid;gap:18px}
.dr-group{display:grid;gap:6px}
/* A project's name over its shelf is a LABEL, the same voice the world labels
   wear over Mine, so the two faces read as one room. */
.dr-group-name{margin:0;padding:0 2px;color:var(--muted);font-size:var(--t-sub);font-weight:var(--w-semi)}
.dr-canvas{position:relative;min-height:120px}
.dr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px 10px}
.dr-list{display:grid;gap:1px}

/* A FOLDER TILE IS A TABBED FOLDER, never a file card wearing a folder's name. */
.dr-folder{position:relative;display:grid;gap:2px;min-width:0;padding:6px;border-radius:var(--r-sm)}
.dr-folder:hover{background:var(--sel)}
.dr-folder-go{display:grid;justify-items:center;gap:2px;padding:0;border:0;background:none;color:inherit;
  font:inherit;text-align:center;cursor:pointer;min-width:0}
.dr-folder-shape{width:46px;height:36px}
.dr-folder-name{overflow:hidden;max-width:100%;color:var(--ink2);font-size:var(--t-small);
  text-overflow:ellipsis;white-space:nowrap}
.dr-folder:hover .dr-folder-name{color:var(--text)}
.dr-folder-line{color:var(--muted);font-size:var(--t-label)}
/* The librarian's line is cut at two lines: a face is a glance, not a page. */
.dr-folder-face{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--muted);font-size:var(--t-label);line-height:var(--lh-tight)}
.dr-folder .dr-x{position:absolute;top:2px;right:2px;background:var(--panel)}

/* A FILE TILE IS A PREVIEW AND A NAME BAR, and everything else is in the card. */
.dr-tile{position:relative;display:grid;gap:3px;min-width:0;padding:4px;border-radius:var(--r-sm);cursor:grab}
.dr-tile:active{cursor:grabbing}
.dr-tile:hover{background:var(--sel)}
.dr-tile.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.dr-tile-face{display:grid;place-items:center;overflow:hidden;aspect-ratio:1;border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm);background:var(--inset)}
.dr-tile-pic{width:100%;height:100%;object-fit:cover}
.dr-tile-glyph{width:26px;height:26px;color:var(--muted)}
.dr-tile-bar{display:flex;align-items:center;gap:4px;min-width:0}
.dr-tile-name{flex:1;min-width:0;overflow:hidden;color:var(--ink2);font-size:var(--t-label);
  text-overflow:ellipsis;white-space:nowrap}
/* THE DUPLICATE MARK IS A WORD, NOT A PILL: no filled ground, no border, just
   the danger ink at the label size, so a row keeps reading as a row. */
.dr-dup{flex:none;color:var(--danger);font-size:var(--t-label)}

/* THE HOVER CARD, opened by :hover and by :focus-within so a keyboard reaches
   every press in it. It is the one place the details, the description and the
   band live in the icons view. */
.dr-card{position:absolute;left:0;right:0;top:100%;z-index:4;display:none;gap:3px;padding:8px;
  border:var(--bd) solid var(--edge);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--shad)}
.dr-tile:hover .dr-card,.dr-tile:focus-within .dr-card{display:grid}
.dr-card-name{color:var(--text);font-size:var(--t-small)}
.dr-card-line,.dr-card-desc{color:var(--muted);font-size:var(--t-label);line-height:var(--lh-body)}

/* ---------- A LIST ROW ---------- */
.dr-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--r-sm);cursor:grab}
.dr-row:active{cursor:grabbing}
.dr-row:hover{background:var(--sel)}
.dr-row.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.dr-row-go{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:inherit}
.dr-row-icon{flex:none;display:grid;place-items:center;width:22px;color:var(--muted)}
.dr-row-icon .dr-folder-shape{width:20px;height:16px}
.dr-row-glyph{width:16px;height:16px}
.dr-row-name{flex:none;max-width:46%;overflow:hidden;color:var(--ink2);font-size:var(--t-small);
  text-overflow:ellipsis;white-space:nowrap}
.dr-row:hover .dr-row-name{color:var(--text)}
.dr-row-sub{flex:1;min-width:0;overflow:hidden;color:var(--muted);font-size:var(--t-label);
  text-overflow:ellipsis;white-space:nowrap}

/* THE ACTION BAND: icons only, the words in the titles and the aria labels. */
.dr-band{flex:none;display:flex;align-items:center;gap:1px;opacity:0}
.dr-row:hover .dr-band,.dr-row:focus-within .dr-band,.dr-card .dr-band{opacity:1}
.dr-band-b{display:grid;place-items:center;padding:4px;border:0;border-radius:var(--r-sm);background:none;
  color:var(--muted);cursor:pointer}
.dr-band-b:hover{background:var(--sel);color:var(--text)}
.dr-band-danger:hover{color:var(--danger)}

/* ---------- A SEARCH HIT WEARS WHERE IT LIVES ---------- */
.dr-hit{display:grid;gap:1px;min-width:0}
.dr-hit-where{padding:0 6px;color:var(--muted);font-size:var(--t-label)}

/* ---------- THE DUPLICATE FACE ---------- */
.dr-dups{display:grid;gap:14px}
.dr-dup-note{margin:0;color:var(--muted);font-size:var(--t-small)}
.dr-dup-group{display:grid;gap:4px}
.dr-dup-head{margin:0;color:var(--text);font-size:var(--t-small);font-weight:var(--w-med)}

/* ---------- THE TREE ---------- */
.dr-tree{display:grid;gap:2px;align-content:start;font-size:var(--t-small)}
.dr-tree-head{margin:0 0 4px;color:var(--muted);font-size:var(--t-tiny);font-weight:var(--w-semi);
  letter-spacing:var(--ls-label);text-transform:uppercase}
.dr-tree-root{justify-self:start;padding:3px 6px;border:0;border-radius:var(--r-sm);background:none;
  color:var(--muted);font:inherit;font-size:var(--t-small);cursor:pointer}
.dr-tree-root:hover{background:var(--sel);color:var(--text)}
.dr-tree-root.on{color:var(--accent)}
.dr-tree-branch{min-width:0}
.dr-tree-folder{display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:var(--r-sm);
  list-style:none;cursor:pointer}
.dr-tree-folder::-webkit-details-marker{display:none}
.dr-tree-folder:hover{background:var(--sel)}
/* THE CARET is drawn rather than typed, so it turns with the branch and never
   borrows a glyph from a font the theme did not choose. */
.dr-tree-caret{flex:none;width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;color:var(--ink4);
  transition:transform .12s ease}
.dr-tree-branch[open]>.dr-tree-folder .dr-tree-caret{transform:rotate(90deg)}
.dr-tree-folder .dr-folder-shape{flex:none;width:16px;height:13px}
.dr-tree-name{flex:1;min-width:0;overflow:hidden;padding:0;border:0;background:none;color:var(--ink2);
  font:inherit;font-size:var(--t-small);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.dr-tree-n{flex:none;color:var(--muted);font-size:var(--t-label);font-variant-numeric:tabular-nums}
/* THE TWO LIT STATES: the folder stood in, and the file open or selected. */
.dr-tree-folder.on .dr-tree-name{color:var(--accent);font-weight:var(--w-med)}
.dr-tree-kids{padding-left:12px;border-left:var(--bd) solid var(--edge);margin-left:6px}
.dr-tree-file{display:flex;align-items:center;padding:2px 4px;border-radius:var(--r-sm);cursor:grab}
.dr-tree-file:active{cursor:grabbing}
.dr-tree-file:hover{background:var(--sel)}
.dr-tree-file.on .dr-tree-name{color:var(--accent)}
.dr-tree-more{margin-left:4px}
.dr-tree-more-head{padding:2px 4px;color:var(--muted);font-size:var(--t-label);list-style:none;cursor:pointer}
.dr-tree-more-head::-webkit-details-marker{display:none}

/* ---------- DRAGGING ---------- */
.dr-dragging{opacity:.45}
/* A TARGET THAT LIGHTS IS A TARGET THAT WILL TAKE IT. Into-itself never gets
   this class, because the dragover refuses before it is added. */
.dr-over{box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--r-sm)}
.dr-marquee{position:absolute;z-index:3;pointer-events:none;border:1px solid var(--accent);
  background:var(--accent-soft);opacity:.5;border-radius:2px}
.dr-veil{position:absolute;inset:0;z-index:5;display:grid;place-items:center;border-radius:var(--r-md);
  border:2px dashed var(--accent);background:var(--accent-soft);color:var(--text);font-size:var(--t-lead)}
.dr-busy{position:absolute;inset:0;z-index:6;display:grid;place-items:center;align-content:center;gap:10px;
  border-radius:var(--r-md);background:var(--panel);opacity:.94}
.dr-busy-line{color:var(--text);font-size:var(--t-small)}
.dr-busy-ring{width:22px;height:22px;border:2px solid var(--edge);border-top-color:var(--accent);
  border-radius:var(--r-round);animation:dr-spin .8s linear infinite}
@keyframes dr-spin{to{transform:rotate(360deg)}}

/* ---------- THE PAPER WINDOW ----------
   A PDF or a text clip read beside the work, in a house floating window: the
   scrim passes pointers through, the window carries data-drag, and the cross
   is the only way out (the modal law, CLAUDE.md). */
.dr-paper{width:min(760px,92vw);height:min(78vh,860px)}
.dr-paper-head{display:flex;align-items:center;gap:8px;flex:none;padding:10px 12px;
  border-bottom:var(--bd) solid var(--edge)}
.dr-paper-name{flex:1;min-width:0;overflow:hidden;color:var(--text);font-size:var(--t-small);
  text-overflow:ellipsis;white-space:nowrap}
/* A DOCUMENT IS OFFERED AS A LINK, NOT FRAMED. seal() in src/http.mjs puts
   x-frame-options DENY and frame-ancestors 'none' on every route answer, so
   the app cannot frame its own file door even same-origin: an iframe here
   could only ever render blank. The press is the house's own quiet button
   shape rather than a bare blue link. */
.dr-paper-away{flex:1;min-height:0;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:10px;padding:20px 22px}
.dr-paper-open{padding:8px 14px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);
  background:none;color:var(--ink2);font:inherit;font-size:var(--t-small);text-decoration:none}
.dr-paper-open:hover{background:var(--sel);color:var(--text);border-color:var(--accent-line)}
.dr-paper-note{margin:0;color:var(--muted);font-size:var(--t-tiny);line-height:var(--lh-body)}
.dr-paper-words{flex:1;min-height:0;margin:0;overflow:auto;padding:14px 16px;
  color:var(--text);font-family:var(--font-ui);font-size:var(--t-small);line-height:var(--lh-read);
  white-space:pre-wrap;word-break:break-word}

/* ---------- THE DOOR LEFT OF THE MENU PILL ----------
   It sits in the tabs row and OUT of the segmented track: every .house-tab
   takes an equal share of the pill, so an icon on that footing would take a
   third of the row and read as a third tab. */
.house-tab-door{flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px;border:0;
  border-radius:var(--r-pill);background:none;color:var(--ink4);cursor:pointer}
.house-tab-door:hover{color:var(--text)}
.house-tab-door.on{background:var(--sel);color:var(--accent)}
.house-tab-door-wide{max-width:60%}
.house-tab-door-said{display:grid;min-width:0;text-align:left}
.house-tab-door-name{overflow:hidden;color:var(--text);font-size:var(--t-tiny);
  text-overflow:ellipsis;white-space:nowrap}
.house-tab-door-word{color:var(--muted);font-size:var(--t-label)}

/* THE RENAME FIELD, in a folder tile, a list row or a file tile. It takes the
   row's own width and nothing else in the row answers while it stands, which
   is the comic shelf's own rename said for these three shapes. */
.dr-rename{flex:1;min-width:0;width:100%;padding:3px 6px;border:var(--bd) solid var(--accent-line);
  border-radius:var(--r-sm);background:var(--inset);color:var(--text);font:inherit;
  font-size:var(--t-small);outline:none}
.dr-rename:focus{border-color:var(--accent)}

/* ---------- PUBLISH AND TAKE BACK, ON A ROW (lane 6) ----------
   A word rather than a pill, and it shows on hover the way the archive cross
   does: no pills on a row, and a control that is always lit is furniture. */
.pj-word{flex:none;padding:2px 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);
  font:inherit;font-size:var(--t-label);cursor:pointer;opacity:0}
.pj-row:hover .pj-word,.pj-row:focus-within .pj-word{opacity:1}
.pj-word:hover{background:var(--sel);color:var(--text)}
.pj-word:focus-visible{opacity:1}

/* ---------- THE PUBLISHED WALL ----------
   Cards in one column at the room's own width, each a press. The face is a
   disc or the owner's picture through the Community's own door, and the kind,
   the owner and the date share one muted line: no badges, no filled blue. */
.pj-wall{display:grid;gap:2px;max-width:720px;width:100%;align-self:center}
.pj-card{display:flex;align-items:center;gap:10px;width:100%;padding:8px 8px;border:0;
  border-radius:var(--r-sm);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pj-card:hover{background:var(--sel)}
.pj-card-face,.pj-card-disc{flex:none;width:30px;height:30px;border-radius:var(--r-round);
  background:var(--inset);object-fit:cover}
.pj-card-disc{display:grid;place-items:center;color:var(--muted);font-size:var(--t-label);
  font-weight:var(--w-semi)}
.pj-card-said{display:grid;min-width:0;gap:1px}
.pj-card-name{overflow:hidden;color:var(--text);font-size:var(--t-small);
  text-overflow:ellipsis;white-space:nowrap}
.pj-card-sub{overflow:hidden;color:var(--muted);font-size:var(--t-label);
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- A PUBLISHED PROJECT, VIEWED ----------
   READ ONLY, and it reads that way: type on a page, not controls on a panel.
   The two presses are Back to the wall and Read it, and there is nothing else
   on this page to press. */
.pj-view{display:grid;gap:16px;max-width:720px;width:100%;align-self:center;padding-bottom:8px}
.pj-back{justify-self:start;padding:4px 10px;border:0;border-radius:var(--r-sm);background:none;
  color:var(--muted);font:inherit;font-size:var(--t-label);cursor:pointer}
.pj-back:hover{background:var(--sel);color:var(--text)}
.pj-view-top{display:grid;gap:3px}
.pj-view-title{margin:0;color:var(--text);font-size:var(--t-h2);font-weight:var(--w-semi)}
.pj-view-by{margin:0;color:var(--muted);font-size:var(--t-label)}
.pj-view-about{margin:0;color:var(--text);font-size:var(--t-small);line-height:var(--lh-read)}
.pj-view-part{display:grid;gap:6px}
.pj-view-head{margin:0;color:var(--muted);font-size:var(--t-sub);font-weight:var(--w-semi)}
.pj-view-list{display:grid;gap:2px;margin:0;padding:0 0 0 2px;list-style:none}
.pj-view-item{display:flex;align-items:baseline;gap:8px;padding:3px 4px;border-radius:var(--r-sm);
  color:var(--text);font-size:var(--t-small);line-height:var(--lh-body)}
.pj-view-row{display:flex;align-items:center;gap:10px;padding:4px 4px;border-radius:var(--r-sm)}
.pj-view-read{justify-self:start}