/* ---------- WORLD FORGE ----------
   WORLD-PROJECT-WORKS.md lane 7b. rooms/forge-world.js is the room and
   actions/forge-world.js is its behaviour; this is the whole of its look.

   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, which in this
   room is the open WORLD and nothing else.

   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.

   THE `.pj-` SHEET IS NOT REACHED FOR. The row anatomy here is deliberately
   its own, even though it reads like the Projects room's: that sheet belongs
   to a room with a drawer in it and to the drawer the Keep mounts, and a rule
   shared between two rooms that merely look alike is a rule that gets bent for
   whichever of them changes first. The one thing genuinely shared is the
   PEOPLE GRID, and that is shared as CODE (rooms/crew.js crewGrid on
   styles/home.css's own classes), never as a copied rule. */

.forge-world{display:flex;flex-direction:column;gap:16px;min-height:0;padding:16px 20px 24px}
/* THE WRITING FACE FILLS THE WINDOW. `.house-stage` gives its child no
   height, so `min-height:0` alone left the canvas below sized by its content
   and its own `flex:1` had nothing to resolve against. `height:100%` is the
   same answer the Novel manuscript's `.fw-desk` already carries, asked for
   only while the open document is on screen. */
.forge-world-writing{height:100%}

/* THE BAND WEARS THE OPEN WORLD'S NAME, because a room showing one world
   should say which. It is the room title's own class, so the size and weight
   are the house's rather than this sheet's. */
.fw-head-band{display:grid;gap:6px;max-width:820px}
.fw-title{margin:0}
/* THE HEADING IS A PRESS THAT RENAMES THE OPEN WORLD, and it must not look
   like a button (Mark's ruling for panels of rows: no pills, no filled blue).
   So the element is a button for the keyboard, the focus ring and the pointer,
   and every drawn edge of one is taken off: it reads as the heading it is
   until the pointer is on it, when the name goes to the accent, which is the
   same hint the world rows give. */
button.fw-title-go{appearance:none;background:none;border:0;padding:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;justify-self:start}
button.fw-title-go:hover{color:var(--accent)}
.fw-title-edit{min-width:0;width:min(100%,620px);padding:2px 6px;border:var(--bd) solid var(--accent-line);
  border-radius:var(--r-sm);background:var(--inset);color:var(--text);font:inherit;outline:none}
.fw-title-edit:focus{border-color:var(--accent)}
.fw-lede{color:var(--muted);font-size:var(--t-small);line-height:var(--lh-body)}

/* ---------- THE THREE COLUMNS, AND THE FOLD ----------
   The middle column is widest because it holds cards and the flanks hold
   rows. Under 1100px the grid becomes one column and the three sections stack
   in reading order: worlds, people, places and rules. Nothing is hidden and
   there is no switch to find, which is the whole reason the fold is a media
   query rather than a mode with state behind it. */
.fw-cols{display:grid;grid-template-columns:230px minmax(0,1fr) 260px;gap:22px;align-items:start;min-height:0}
@media (max-width:1100px){.fw-cols{grid-template-columns:minmax(0,1fr)}}

.fw-col{display:grid;gap:8px;min-width:0}
.fw-col-wide{min-width:0}

/* A SECTION LABEL IS NOT A CONTROL, so it takes no press affordance and reads
   a step quieter than the rows under it. */
.fw-head{margin:0;padding:0 2px;color:var(--muted);font-size:var(--t-sub);font-weight:var(--w-semi);
  letter-spacing:var(--ls-label)}
.fw-head-second{margin-top:14px}

.fw-empty{margin:0;padding:14px 2px;color:var(--muted);font-size:var(--t-small);line-height:var(--lh-body)}
.fw-note{margin:0;padding:6px 2px 0;color:var(--muted);font-size:var(--t-tiny);line-height:var(--lh-body)}

/* ---------- A ROW ----------
   A world, a place or a rule. One anatomy, because they are the same thing on
   the page: a name, a quiet second line where there is one, and a cross that
   is only there under the pointer. */
.fw-rows{display:grid;gap:1px}
.fw-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:var(--r-sm)}
.fw-row:hover{background:var(--sel)}
.fw-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}
.fw-name{overflow:hidden;color:var(--ink2);font-size:var(--t-body);text-overflow:ellipsis;white-space:nowrap}
.fw-sub{overflow:hidden;color:var(--muted);font-size:var(--t-tiny);text-overflow:ellipsis;white-space:nowrap}
.fw-row:hover .fw-name{color:var(--text)}

/* THE ACCENT ON THE OPEN WORLD ALONE. It is the ink that moves, never a
   filled ground: a row painted blue is a row shouting, and a column of them
   is a column where nothing is lit. */
.fw-row.on .fw-name{color:var(--accent);font-weight:var(--w-med)}
.fw-row.on .fw-sub{color:var(--accent-line)}

/* THE HOVER CROSS, the comic shelf's and the Projects room'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. */
.fw-cut{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}
.fw-row:hover .fw-cut,.fw-row:focus-within .fw-cut,
.home-card-wrap:hover .fw-cut,.home-card-wrap:focus-within .fw-cut{opacity:1}
.fw-cut:hover{background:var(--sel);color:var(--danger)}

.fw-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}
.fw-rename:focus{border-color:var(--accent)}

/* ---------- THE ABOUT LINE ----------
   The open world's own description, under the list rather than on a row: a
   column of paragraphs would stop being a list. It writes on blur. */
.fw-about{display:grid;gap:4px;margin-top:10px;padding:0 2px}
.fw-about-label{color:var(--muted);font-size:var(--t-tiny)}
.fw-about-area{width:100%;padding:7px 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);line-height:var(--lh-body);
  resize:vertical;outline:none}
.fw-about-area:focus{border-color:var(--accent)}

/* ---------- ADDING SOMETHING ----------
   One quiet doorway row at the foot of each list, which opens into the fields
   in place. The doorway wears the comic shelf's plus rather than a button
   that shouts, because adding a place is not the room's main verb. */
.fw-add{display:flex;align-items:center;gap:8px;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}
.fw-add:hover{background:var(--sel);color:var(--text)}
.fw-add-plus{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border:var(--bd) solid var(--edge);border-radius:var(--r-sm);font-size:var(--t-small);line-height:1}
.fw-add-lines{display:grid;gap:1px;text-align:left}
.fw-add-name{color:inherit;font-size:var(--t-small)}
.fw-add-sub{color:var(--muted);font-size:var(--t-tiny)}

.fw-new{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 2px}
.fw-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}
.fw-field:focus{border-color:var(--accent)}
.fw-field-name{flex:1 1 140px}
.fw-word{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}
.fw-word:hover:not(:disabled){background:var(--sel)}
.fw-word:disabled{opacity:.45;cursor:default}
.fw-word-quiet{border-color:transparent;color:var(--muted)}
.fw-word-quiet:hover{color:var(--text)}

/* ---------- THE CARD'S CROSS ----------
   The people grid is home.css's and is not restyled here: the one thing this
   room adds is the wrapper that lets a cross sit over a card. The wrapper is
   drawn by rooms/crew.js for every mount of the grid, so the position rule
   lives here and the card itself keeps its own sheet's look. */
.home-card-wrap{position:relative;min-width:0}
.home-card-wrap .fw-cut{position:absolute;top:6px;left:6px;z-index:1;
  background:var(--chrome);border:var(--bd) solid var(--edge)}

/* ---------- WHAT THE PROJECTS SAY ----------
   The facts section on a person's profile page (rooms/modals/character.js).
   It is drawn inside the editor rather than in this room, and its look lives
   here because it is World Forge's own idea: a person's facts are the world's
   record of them and this sheet is the world's. Newest first, each line with
   the project that said it in muted text under it. */
.fw-facts{display:grid;gap:6px;margin-top:4px}
.fw-fact{display:grid;gap:2px;padding:6px 8px;border-radius:var(--r-sm);background:var(--inset)}
.fw-fact-text{color:var(--ink2);font-size:var(--t-small);line-height:var(--lh-body)}
.fw-fact-from{color:var(--muted);font-size:var(--t-tiny)}
.fw-fact-none{margin:0;color:var(--muted);font-size:var(--t-small);line-height:var(--lh-body)}
.fw-fact-new{display:flex;align-items:center;gap:6px;margin-top:2px}

/* ---------- THE IMPORT PRESS AND ITS REVIEW (lane 8) ----------
   MARK'S RULING FOR A PANEL OF ROWS HOLDS HERE TOO: no mono, no pills, no
   filled blue. The pane is a long column of plain rows and the only accent in
   it is on the two presses at the foot, which is where the decision is.

   THE PRESS IS A LABEL WRAPPING A FILE INPUT, so the input itself is taken out
   of the layout entirely rather than hidden with display:none, which some
   browsers refuse to open from a label. */
.fw-import-row{display:flex;align-items:center;gap:8px;justify-self:start;margin-top:10px;padding:6px 8px;
  border-radius:var(--r-sm);color:var(--muted);cursor:pointer}
.fw-import-row:hover{background:var(--sel);color:var(--text)}
.fw-import-row .fw-import-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* THE PANE STANDS WHERE THE PEOPLE WERE and scrolls on its own, because a
   bible is forty people, twenty places and forty chapters and the three
   columns beside it must not scroll away while somebody reads it. */
.fw-review{gap:6px;max-height:calc(100vh - 200px);overflow-y:auto;padding-right:6px}
.fw-rev-about{margin:0;padding:0 2px;color:var(--ink2);font-size:var(--t-small);line-height:var(--lh-body)}
.fw-rev-counts{margin:0;padding:4px 2px 8px;color:var(--muted);font-size:var(--t-tiny);line-height:var(--lh-body)}
.fw-rev-clash{margin:0;padding:4px 2px;color:var(--danger);font-size:var(--t-small);line-height:var(--lh-body)}
.fw-rev-head{margin:12px 0 2px;padding:0 2px;color:var(--muted);font-size:var(--t-sub);
  font-weight:var(--w-semi);letter-spacing:var(--ls-label)}
.fw-rev-group{margin:8px 0 1px;padding:0 2px;color:var(--ink2);font-size:var(--t-tiny);font-weight:var(--w-med)}
.fw-rev-rows{display:grid;gap:1px}

/* A ROW IS A PRESS AND THE PRESS IS THE STRIKE. A struck row keeps its place
   and reads through the line, because a person who strikes the wrong row has
   to be able to see it to put it back. */
.fw-rev-row{display:grid;gap:1px;padding:4px 6px;border:0;border-radius:var(--r-sm);background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.fw-rev-row:hover{background:var(--sel)}
.fw-rev-name{overflow:hidden;color:var(--ink2);font-size:var(--t-small);text-overflow:ellipsis;white-space:nowrap}
.fw-rev-sub{overflow:hidden;color:var(--muted);font-size:var(--t-tiny);text-overflow:ellipsis;white-space:nowrap}
.fw-rev-row.out .fw-rev-name{color:var(--muted);text-decoration:line-through}
.fw-rev-row.out .fw-rev-sub{opacity:.5;text-decoration:line-through}

.fw-rev-fold{margin-top:10px;justify-self:start;padding:4px 6px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--muted);font:inherit;font-size:var(--t-tiny);cursor:pointer}
.fw-rev-fold:hover{background:var(--sel);color:var(--text)}
.fw-rev-skip{margin:0;padding:2px 6px;color:var(--muted);font-size:var(--t-tiny)}
.fw-rev-foot{display:flex;gap:6px;margin-top:16px;padding:10px 2px 2px;border-top:var(--bd) solid var(--edge)}