/* The Council: persistent advisors, paired with the models you choose.

   The room's own layout, onto the kit (STYLES-PLAN.md, Step 5). It carries 326
   inline styles, the most in the app by a wide margin, so it converts in
   SLICES with a commit each rather than one heroic pass:

     1. the shell — header, tabs, the canvas column, the project panel   DONE
     2. the assistant console and the seat rows                          DONE
     3. the four modals, their thirteen pages, and the voice controls    DONE
     4. the scene plate, the gallery and the room-image settings        DONE
     5. the room's own content — the four tab canvases, the clipboard and
        tools, the project rows — and with it the Council's two style-string
        selectors in base.css, deleted here                              DONE

   THE ROOM FLATTENED ON 2026-08-31 (Mark: "the whole quick council bs that has
   to go"; "i want to land and talk"). It lost its gate, its Case tab, its
   settings modal and its Library tab; what those rules dressed is deleted
   below rather than left behind, because a rule with no markup is a rule the
   next reader has to disprove. The expert library became the right panel's
   (.council-xp-*, at the foot of this sheet).

   The room's COLOURS are already done and are not here: the reading lift lives
   in tokens.css as --c-* (CLAUDE.md, the theme law), because a room that wants
   to read differently from the house is asking for a theme decision.

   Type sizes are not here either, and the reason has changed. This room used
   to own a second type scale, a band larger than the rest of the app, and that
   is what made slice one shrink four things in the header: the moment they
   became classes they dropped onto the house scale. There is ONE scale now
   (tokens.css), applied to every page from the foot of components.css, and it
   is the middle of the two that used to exist. So a class written here reads
   at the same size as the markup it replaced, which is the whole reason a
   conversion can now be trusted to be a conversion.

   A size therefore belongs in a class here only when it is a ROLE — a room
   title, a caption. Never a number. */

.council{display:flex; flex-direction:column; gap:var(--s8); padding:var(--s4) var(--s7) 0;}
.council-enter{animation:fadeUp .3s ease both;}

/* THE HEAD HOLDS THE ARTWORK (Mark, 2026-08-31: "below the main art works is
   an always open quick chat. which hwne you type the art work turns into a
   small rectangel across from your council"). One grid, two states: quiet, the
   plate takes the full second row under the title; .council-min on the room
   root (a live conversation, typing, or a work tab) sits it small in the
   title's own row, across from the words. */
.council-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s6) var(--s7); align-items:start;}
.council-head .council-stage{grid-column:1 / -1; grid-row:2; min-width:0;}
.council-min .council-head .council-stage{grid-column:2; grid-row:1;}
.council-min .council-head [data-council-scene]{width:min(300px,36vw); aspect-ratio:16/7; min-height:96px;}
.council-min .council-head .council-scene-chrome{display:none;}
.council-title{font-size:var(--t-room); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
.council-sub{margin-top:var(--s2); max-width:51ch; font-size:var(--t-body); line-height:var(--lh-body); color:var(--muted);}

/* the tabs. The bar keeps its own class because base.css already hooks
   [data-council-tabs] for the mobile wrap. */
.council-tabs{display:flex; flex-wrap:wrap; gap:var(--s2); padding:var(--s2);
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--panel); align-self:flex-start;}
.council-tab{padding:var(--s4) var(--s6);}
/* the chosen tab is a tint and an accent label, and NOT an accent border: it
   never had one, and btn-on would have given it one. */
.council-tab-on{color:var(--accent);}

.council-main{min-width:0; display:flex; flex-direction:column; gap:var(--s8);}

/* the here-card in the left panel; the old expandable project button's rules
   (btn, caret, list) died with it, and the seat rows' with the side column */
.council-project{padding:0; overflow:hidden;}
.council-project-lines{min-width:0; flex:1;}
.council-project-name{margin-top:2px; font-size:var(--t-small); font-weight:var(--w-semi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.council-project-empty{padding:var(--s4); color:var(--muted); font-size:var(--t-tiny); line-height:var(--lh-body);}

/* ---------- slice two: the assistant console, and the seat rows ----------

   The console is the rail the creative assistant lives in: a contained
   conversation whose history scrolls behind a composer docked below it. Its
   ARRANGEMENT is not here and must not move — base.css orders the four
   children by type and position (`>div:first-child`, `>[data-assistant-log]`,
   `>textarea`, `>textarea+div`), so the markup keeps its shape and only loses
   its style attributes.

   Three values are left as plain numbers on purpose: gap 7, gap 11 and the
   2px shim. Spacing is the one kit dimension NOT yet standardised, because the
   scale is even-only while the app's real clusters are odd, and snapping ~143
   sites on a coin-flip would move layout with no argument to settle it. They
   are numbers in a stylesheet now rather than numbers in an attribute, which
   is this slice's job; picking their step is a later decision. */
/* the card is .panel .panel-col .panel-raised, so the column and its gap come
   from the kit; the rail is narrow and wants the tighter padding. */
.council-bench{padding:var(--s6);}
.council-bench-head{display:flex; align-items:center; gap:var(--s4);}
.council-bench-lines{min-width:0; flex:1;}
.council-bench-name{font-size:var(--t-lead); font-weight:var(--w-semi);}
.council-bench-role{margin-top:2px; font-size:var(--t-tiny); color:var(--muted);}
/* the composer. .field gives it the house input; the size is the room's, and
   it is the step the markup already rendered at rather than the house body. */
.council-ask{font-size:var(--t-tiny); line-height:var(--lh-tight); resize:none;}
.council-bench-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);}
.council-bench-tools{display:flex; align-items:center; gap:7px;}
/* the mic while it is listening. The button is a house icon button wearing
   btn-on; this is only the heartbeat. */
.council-mic-live{animation:pulse 1.1s ease-in-out infinite;}

/* the history. Newest under the composer, the same feed law as the Lounge. */
.council-log{display:flex; flex-direction:column; gap:11px;}
.council-log-you{align-self:flex-end; padding:var(--s3) var(--s4); border-radius:var(--r-md);
  background:var(--inset); font-size:var(--t-tiny); line-height:var(--lh-tight);}
.council-log-reply{font-size:var(--t-tiny); line-height:var(--lh-body);}
.council-log-who{color:var(--accent); font-weight:var(--w-semi);}
.council-thinking{animation:pulse 1.2s ease-in-out infinite;}

/* the assistant's face. Size and shape are the only things that vary across
   its four call sites, so they are modifiers rather than four style strings:
   the console and the mobile drawer show a circle, the roster a soft square,
   the modal header a plain one. */
.a-face{flex:none; border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  object-fit:cover; object-position:50% 28%;}
.a-face-round{border-radius:var(--r-round);}
.a-face-soft{border-radius:var(--r-lg);}
.a-face-38{width:38px; height:38px;}
.a-face-48{width:48px; height:48px;}
.a-face-64{width:64px; height:64px;}
/* and the same box drawn as an initial when a profile has no portrait yet */
.a-face-init{display:flex; align-items:center; justify-content:center;
  background:var(--inset); color:var(--muted); font-size:var(--t-sub);}
.a-face-64.a-face-init{font-size:var(--t-head);}

/* the mobile drawer's toggle, which only exists under 900px */
.council-mobile-name{display:block; font-size:var(--t-body);}
.council-mobile-role{font-size:var(--t-tiny); color:var(--muted);}

/* ---------- the seat rows ----------
   Who is at the table, and which model performs each of them. It is the last
   thing in the rail and the only part of the room the harness could not see
   until this slice put a seated Council in the walk. */
.council-seat-model{max-width:112px; padding:var(--s2); border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm); background:var(--inset);}

/* An expert's face, three sizes, all circles. The DIAMETER is the size of a
   thing and stays exactly what it was; only the letter inside it rides the
   type scale. */
.face{flex:none; border-radius:var(--r-round); overflow:hidden; display:flex;
  align-items:center; justify-content:center; font-weight:var(--w-semi);
  color:var(--ink4); border:var(--bd-thick) solid var(--edge);}
.face-34{width:34px; height:34px; font-size:var(--t-tiny);}
.face-38{width:38px; height:38px; font-size:var(--t-small);}
.face-42{width:42px; height:42px; font-size:var(--t-body);}

/* ---------- slice three: the four modals, their pages, and the voice --------

   The biggest block in the room: 157 style attributes, of which the voice
   controls alone were 38.

   THE FINDING THAT SHAPED THIS SLICE. The expert modal and the assistant modal
   are not two things. They draw the SAME eleven page shapes with different
   data — a title, a note, a stack of labelled fields, a grid of model cards, a
   portrait beside a brief — so nearly every class below is written once and
   worn by both. That is why 157 attributes come out as roughly fifty rules
   rather than a hundred.

   WHAT WAS MEASURED FIRST, and it changed the plan twice.

   `.btn` is NOT worn by anything here, and that is deliberate. A probe read
   computed style off all 1,018 elements in these thirteen pages first, and
   every one of the ~200 buttons renders at 15px with the room's 1.5 line
   height. `.btn` is --t-small (14px) on `line-height:1`, which would have
   taken a pixel off every label and about seven off every button's height —
   silently, and on screens that had no photograph until this slice gave them
   one. That is slice one's bug exactly, so the buttons keep the room's own
   shapes and `.btn` stays where it already fits: the icon squares, which have
   no text to shrink. Worth knowing WHY the kit disagrees — its button was
   surveyed before the one type scale landed, and inside this room the two
   have drifted a step apart. That is a kit question, not a Council one.

   `.field` IS worn, because its border, fill, radius, width and placeholder
   are exactly these inputs. Three of its declarations are put back by the
   room: the size (`.field-lg`, since these render at 16px), the padding (the
   Council's inputs are roomier than the house's) and the colour (they inherit
   their label's, and .field would have re-coloured every one).

   SPACING IS STILL NOT SNAPPED — the gaps below are plain numbers for the same
   reason slice two left gap 7 and gap 11 alone: the scale is even-only, the
   room's real clusters are odd, and there is no correctness argument to settle
   a tie. They are numbers in a stylesheet now rather than numbers in an
   attribute, which is this slice's job. The same goes for `line-height:1.6`,
   which sits exactly halfway between --lh-body and --lh-read and is the app's
   third-largest line-height cluster; picking its step is a decision, not a
   conversion. */

/* ---------- the four scrims ----------
   `.modal-scrim` in components.css carries the shared shape. Three things are
   the Council's own and live here: a wider gutter, the backdrop blur that only
   this room's modals have, and NO fade — the house dialog rises on open and
   these four have never done so. Cancelling the kit's animation is a stopgap:
   the fade is per-modal (seven of the app's thirteen scrims have it, six do
   not) and belongs in a `.modal-scrim-fade` modifier, which is an edit to the
   dialog's markup and therefore to a screen outside this slice.

   THE Z-ORDER IS KEPT EXACTLY AS FOUND, one class each. Nothing makes the four
   mutually exclusive — they are four independent flags on the save — so which
   sits above which is real behaviour, and a conversion does not get to
   redesign it. */
.council-scrim{padding:var(--s8); animation:none;}
.council-scrim-expert{z-index:97;}
.council-scrim-assistant{z-index:96;}
/* 94 was the settings modal's, between the assistant and the project. The gear
   that opened it and the modal itself are gone (2026-08-31); the room's
   settings are a tab. The gap in the ladder is left as it is: these numbers
   say which modal sits over which, and renumbering the survivors would
   restate a relationship that has not changed. */
.council-scrim-project{z-index:90;}

/* ---------- the panel inside it ----------
   .panel .panel-lg .panel-float, plus the one thing no panel variant has: this
   room's modals sit on --bg rather than --panel, so they read as a hole cut in
   the room rather than a card laid on it. TWO sites now, not the four this
   line used to claim: the settings modal went on 2026-08-31 and the room's own
   count had already gone stale. The new-project modal is this file's; the
   character editor is rooms/modals/character.js and borrows the look. */
.council-modal{background:var(--bg); max-height:90vh; overflow-y:auto;}
/* -wide is the character editor's (rooms/modals/character.js). -mid was the
   settings modal's only width and went with it. */
.council-modal-wide{width:min(900px,calc(100vw - 44px)); max-width:calc(100vw - 44px);}
/* the new-project modal: smaller, accent-edged, and a column rather than a
   scroller, so it takes neither the height cap nor the overflow */
.council-modal-small{width:min(460px,100%); max-height:none; overflow-y:visible;
  gap:15px; border-color:var(--accent);}

.council-modal-head{display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:20px;}
.council-modal-who{display:flex; align-items:center; gap:12px;}
.council-modal-title{margin-top:2px; font-size:var(--t-title); font-weight:var(--w-semi);}
/* the small modal's head needs no margin — it is a flex column and the gap
   already spaces it — and its title is a step down */
.council-modal-small .council-modal-head{margin-bottom:0;}
.council-modal-small .council-modal-title{margin-top:4px; font-size:var(--t-head);}
.council-modal-note{font-size:var(--t-tiny); line-height:var(--lh-body); color:var(--muted);}
/* the close cross. The three bordered ones are .btn .btn-icon .btn-lg to the
   pixel; only the GLYPH is not the kit's, because a cross is the size of a
   thing and .btn's label step would have shrunk it from 18 to 15. */
.council-modal-close{font-size:var(--t-sub); color:var(--muted);}
/* the expert's picture in the modal's own header */
.council-modal-face{width:64px; height:64px; overflow:hidden;
  border-radius:var(--r-lg); background:var(--inset);}
/* the new-project modal's two controls. The select does NOT wear .field: base
   .css gives `font:inherit` to input and textarea and not to select, so every
   select in the app renders at the browser's own 13.3px, and .field's step
   would have grown this one to 15. Same reasoning as the seat row's model
   picker in slice two. */
.council-modal-field{padding:13px; line-height:inherit; color:inherit;}
.council-modal-select{padding:12px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset); color:var(--text);}
.council-modal-create{align-self:flex-end; padding:11px 17px;
  border-radius:var(--r-md); background:var(--accent);}

/* ---------- a settings page ----------
   Worn by all eleven: the expert's five and the assistant's six. */
.settings-page{display:flex; flex-direction:column; gap:16px;}
.settings-title{font-size:var(--t-head); font-weight:var(--w-semi);}
.settings-note{margin-top:5px; font-size:var(--t-body); line-height:1.6; color:var(--muted);}
.settings-note-measure{max-width:62ch;}
/* the roster's note is the page's own opening line rather than a note under a
   heading, so it carries the measure and drops the heading's offset */
.settings-note-narrow{margin-top:0; max-width:58ch;}
/* a labelled field: the label is the muted small print, the control below it */
.settings-field{display:flex; flex-direction:column; gap:7px;
  font-size:var(--t-small); color:var(--muted);}
/* the controls, on .field. `color:inherit` is what keeps a field reading in
   its label's colour rather than the kit's --ink2. */
.settings-input{padding:12px; line-height:inherit; color:inherit;}
.settings-area{padding:13px; line-height:var(--lh-read); color:inherit;}
.settings-area-look{padding:14px; line-height:1.6; color:inherit;}
.settings-area-note{padding:12px; line-height:1.6; color:inherit;}
/* the row of plain actions at the foot of a page */
.settings-actions{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.settings-actions-tight{gap:8px;}
.settings-btn{padding:10px 13px; border:var(--bd) solid var(--edge); border-radius:var(--r-md);}
.settings-btn-quiet{color:var(--muted);}
/* the one button on these pages that makes something rather than changing it,
   so it sits on the panel fill rather than on nothing */
.settings-new{align-self:flex-start; padding:10px 14px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--panel);}
.settings-stack{display:flex; flex-direction:column; gap:9px;}
.settings-stack-tight{gap:8px;}
/* the one destructive action on these pages, and the only button here that is
   smaller than the rest */
.settings-clear{align-self:flex-start; padding:9px 12px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm); color:var(--muted);}

/* the portrait page: a picture on the left, its brief on the right */
.settings-portrait{display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr);
  gap:20px; align-items:start;}
.settings-portrait-frame{aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--r-xl); background:var(--inset);}
.settings-portrait-frame-edge{border:var(--bd) solid var(--edge);}
.settings-portrait-img{width:100%; height:100%; object-fit:cover; object-position:50% 25%;}
.settings-portrait-col{display:flex; flex-direction:column; gap:13px;}
.settings-paint{align-self:flex-end; padding:11px 16px; border-radius:var(--r-md);
  background:var(--accent); color:var(--onAccent);}

/* the mind page: every model that could perform this reading */
.settings-minds{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px;}
.settings-mind{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px; text-align:left; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset);}
.settings-mind-on{border-color:var(--accent); background:var(--glow);}
.settings-mind-name{display:block; font-size:var(--t-body);}

/* ---------- the character editor's own rows ----------
   The five pages are the Council's (Story System/THE-CELLAR.md §8: one
   editor, everywhere), and these are the controls the two newer kinds of
   subject brought with them — a Cellar seat and a crew member. */
.char-pres,.char-minds{display:flex; gap:7px; flex-wrap:wrap;}
.char-pill{padding:8px 14px; border-radius:var(--r-pill); font-size:var(--t-label);
  letter-spacing:.06em;}
/* two floors, one record: the house mind upstairs, a hand-made mind below */
.char-floor{display:flex; flex-direction:column; gap:9px; padding:14px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--inset);}
.char-floor-off{background:transparent; border-style:dashed;}
.char-floor-head{display:flex; flex-direction:column; gap:3px;}
.char-floor-name{font-size:var(--t-body); font-weight:var(--w-semi);}
.char-floor-note{font-size:var(--t-small); line-height:var(--lh-body); color:var(--muted);}
.char-noface{display:grid; place-items:center; padding:18px; text-align:center;
  font-size:var(--t-small); line-height:var(--lh-body); color:var(--muted);}
.char-link{color:var(--accent); background:transparent; padding:0; font-size:inherit;
  text-decoration:underline;}

/* the memory page: what a mind is allowed to carry, and from where */
.settings-card{padding:14px; border:var(--bd) solid var(--edge); border-radius:var(--r-md);}
.settings-card-inset{background:var(--inset);}
.settings-card-name{font-size:var(--t-body); font-weight:var(--w-semi);}
.settings-card-note{margin-top:4px; font-size:var(--t-tiny); line-height:var(--lh-body); color:var(--muted);}
.settings-card-body{margin-top:6px; font-size:var(--t-small); line-height:1.6; color:var(--muted);}
.settings-toggle{display:flex; align-items:center; gap:12px; padding:13px; text-align:left;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--inset);}
.settings-toggle-on{border-color:var(--accent); background:var(--glow);}
.settings-toggle[disabled]{opacity:.5; cursor:default;}
.settings-toggle-name{display:block; font-size:var(--t-body); font-weight:var(--w-semi);}
.settings-toggle-note{display:block; margin-top:2px; font-size:var(--t-tiny);
  line-height:var(--lh-tight); color:var(--muted);}
/* the switch itself: a track that pushes its knob to one end. The 38x22 track
   and the 16px knob are the size of a thing, not steps of a rhythm. */
.settings-switch{display:flex; justify-content:flex-start; width:38px; height:22px;
  padding:3px; border-radius:var(--r-pill); background:var(--edge);}
.settings-switch-on{justify-content:flex-end; background:var(--accent);}
.settings-switch-knob{width:16px; height:16px; border-radius:var(--r-round); background:var(--muted);}
.settings-switch-on .settings-switch-knob{background:var(--onAccent);}

/* the roster page: which assistant is working beside you */
.assistant-card-open{display:flex; align-items:center; gap:12px; min-width:0; flex:1; text-align:left;}
.assistant-card-lines{min-width:0;}
.assistant-card-name{font-size:var(--t-lead); font-weight:var(--w-semi);}
.assistant-card-role{margin-top:2px; font-size:var(--t-tiny); color:var(--muted);}
.assistant-card-actions{display:flex; align-items:center; justify-content:flex-end;
  gap:7px; flex-wrap:wrap;}
.assistant-card-use{padding:9px 11px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm); color:var(--text);}
/* the same pill in a page rather than a card, where it stands beside buttons
   and has to match their height */
.assistant-status-lg{padding:9px 11px;}

/* ---------- the voice controls ----------
   One function, both modals, and the largest single block of inline style the
   room had. Four layers: who is speaking (gender), what performs it (tier),
   which voice, and how it is dialled. */
.voice{display:flex; flex-direction:column; gap:18px;}
.voice-genders{display:flex; gap:4px; padding:4px; align-self:flex-start;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--inset);}
.voice-gender{min-width:92px; padding:9px 18px; border-radius:var(--r-sm);
  background:transparent; color:var(--muted); font-size:var(--t-body);}
.voice-gender-on{background:var(--sel); color:var(--accent);}

.voice-tiers{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px;}
.voice-tier{padding:11px 9px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset); color:var(--muted);}
.voice-tier-on{border-color:var(--accent); background:var(--glow); color:var(--accent);}
.voice-tier-name{display:block; font-size:var(--t-tiny); font-weight:var(--w-semi);}
.voice-tier-engine{display:block; margin-top:4px; font-size:var(--t-label);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.voice-group{display:flex; flex-direction:column; gap:8px;}
/* A folded shelf: the whole header is the press, the chevron only says which way. */
.voice-fold{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border:var(--bd) solid var(--edge); border-radius:var(--r-sm);
  background:none; color:inherit; cursor:pointer; text-align:left;}
.voice-fold:hover{border-color:var(--accent);}
.voice-chevron{display:inline-flex; color:var(--muted); transition:transform .15s ease;}
.voice-chevron-open{transform:rotate(180deg);}
.voice-group-spaced{padding-top:3px;}
.voice-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:7px;}
.voice-card{min-width:0; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:11px 12px; text-align:left; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset); color:var(--text);}
.voice-card-on{border-color:var(--accent); background:var(--glow); color:var(--accent);}
.voice-card-lines{min-width:0;}
.voice-card-name{display:block; font-size:var(--t-body); font-weight:var(--w-semi);}
.voice-card-desc{display:block; margin-top:2px; font-size:var(--t-tiny); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* the two badges a voice can wear. mono() draws the label; these are the box
   around it, and the premium badge's 5px corner stays 5px — it is one of the
   four radii below the kit's 7px floor, named in components.css. */
.voice-badge{flex:none;}
.voice-badge-premium{flex:none; padding:4px 6px; border:var(--bd) solid var(--accent); border-radius:5px;}

.voice-dials{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px;}
.voice-dial{display:flex; flex-direction:column; gap:7px;}
.voice-dial-name{font-size:var(--t-small); font-weight:var(--w-semi);}
.voice-dial-head{display:flex; justify-content:space-between; font-size:var(--t-small); font-weight:var(--w-semi);}
.voice-dial-ends{display:flex; justify-content:space-between; font-size:var(--t-tiny); color:var(--muted);}
.voice-range{width:100%; accent-color:var(--accent);}
/* PERFORMANCE takes direction from the text instead of from sliders, so its
   stability is three named choices rather than a dial */
.voice-stability{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;}
.voice-choice{padding:10px; text-align:left; border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm); background:var(--inset); color:var(--text);}
.voice-choice-on{border-color:var(--accent); background:var(--glow); color:var(--accent);}
.voice-choice-name{display:block; font-size:var(--t-small); font-weight:var(--w-semi);}
.voice-choice-note{display:block; margin-top:2px; font-size:var(--t-tiny); color:var(--muted);}
.voice-hint{font-size:var(--t-tiny); line-height:var(--lh-tight); color:var(--muted);}

.voice-foot{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:18px; padding-top:14px; border-top:var(--bd) solid var(--edge);}
/* THE METER (Mark, 2026-08-23: "we need a sound meter on voice"). Tokens
   only, the house's quiet grammar — a simple filling bar and a thin peak
   marker, both positioned by actions/character.js's own JS .style writes
   (live audio, never a value a stylesheet could hold). */
.voice-vol{display:flex; flex-direction:column; gap:7px;}
.voice-meter{position:relative; height:5px; border-radius:var(--r-pill);
  background:var(--inset); border:var(--bd) solid var(--edge); overflow:hidden;}
.voice-meter-fill{position:absolute; left:0; top:0; bottom:0; width:0%;
  background:var(--accent); border-radius:var(--r-pill);}
.voice-meter-peak{position:absolute; top:0; bottom:0; width:2px; left:0%;
  background:var(--accent); opacity:.6;}
/* THE BASELINE AND THE CLIP MARK (M-1, Mark: "it need to show like when
   cliping with a base line so all the voices are same standard volume").
   Same grammar, same restraint, tokens only.

   THE BASELINE IS NOT THE ACCENT. The fill and the peak are already accent
   and the line has to read THROUGH the fill when a voice lands on it,
   which is the exact moment it means something; a third accent element
   would vanish into the bar at the one reading worth seeing. It is the
   text colour held back, so it reads as a printed mark on the scale rather
   than as another moving part.

   THE CLIP MARK IS A LAMP AT THE END OF THE BAR, dark until it lights, so
   the meter says nothing at all in the ordinary case. --danger is the
   house's one refusal colour and this is the only thing on this bar that
   is a refusal. Its LEFT position is never written: it is pinned to the
   right end, because "over" is one place on a scale and not a reading. */
.voice-meter-base{position:absolute; top:0; bottom:0; width:1px; left:0%;
  background:var(--text); opacity:.5;}
.voice-meter-clip{position:absolute; top:0; bottom:0; right:0; width:4px;
  background:var(--edge);}
.voice-meter-clip-on{background:var(--danger);}

/* ---------- slice four: the painted room, and the panel that drives it ------

   The scene plate is the picture the Council sits in front of: two stacked
   images that dissolve into one another, a dimmer over them, and the expert's
   name printed on the bottom. Its LAYOUT has lived in base.css since before
   this sheet existed ([data-council-scene] and .council-scene-chrome) and is
   left there; what moves here is the three things the markup was still
   spelling out by hand.

   THE TWO RAW COLOURS BELOW ARE DELIBERATE AND ARE NOT DEBT. They sit ON the
   painting rather than around it: the dimmer laid over the picture, and the
   white of the caption printed on it. Painted art never re-tints (CLAUDE.md,
   the theme law), so a token there would follow the theme and put black text
   on a black painting in Day. The colour ratchet names this exact kind, and
   base.css already holds the third one — the gradient the caption sits in. The
   two that remain inline in council.js are the ones that genuinely vary per
   render: a layer's opacity, the dimmer's strength, the image's position.

   The plate's OWN corner, border and fill are not here either. They are
   [data-council-scene] in base.css and already read the kit. */
.council-scene-shade{position:absolute; z-index:2; inset:0; pointer-events:none;
  background:#090807;}
.council-scene-name{font-size:var(--t-sub); font-weight:var(--w-semi); color:#fff;}
/* the box the tab canvas sits in, behind the plate. 20px sits exactly between
   --s7 and --s8 and stays 20 until spacing is settled. */
.council-veil{padding:20px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-xl); background:var(--c-veil);}

/* THE PICTURE GIVES WAY TO THE CONVERSATION (Mark, 2026-08-31: "i like the art
   work. once we chat it should minmize. chat should be under the image ready
   to go"). The stage is only a wrapper the modifier can hang on; the plate's
   own corner, border and fill stay [data-council-scene] in base.css, which
   sets 16/7 and a 300px floor. Minimised it is the same picture in a letterbox
   band, so the composer under it is on screen with the first reply. The
   transition is on the plate because that is the element whose height moves. */
.council-stage{display:block;}
.council-stage [data-council-scene]{transition:aspect-ratio .32s ease, min-height .32s ease, width .32s ease;}
@media (prefers-reduced-motion:reduce){
  .council-stage [data-council-scene]{transition:none;}
}

/* one quiet line where a whole empty state used to stand */
.council-hint{font-size:var(--t-tiny); line-height:var(--lh-body); color:var(--muted);}

/* the room-image panel, which is the whole body of the settings modal: the
   transport, the gallery, the dimmer, and the room's reading settings */
.scene-transport{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
/* the two arrows are the kit's icon square to the pixel; only the label colour
   is the room's, because these read at full strength and .btn is muted */
.scene-step{color:var(--text);}
.scene-play{min-width:108px; height:38px; padding:0 13px; color:var(--text);}
.scene-speed{padding:8px 9px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm); background:var(--inset); color:var(--text);}
.scene-custom{align-self:flex-start;}
.scene-custom-on{border-color:var(--accent); color:var(--accent);}

.scene-dim-row{display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s6); align-items:end;}
/* NOT .settings-field: that one is the modal pages' 13px label and this is a
   14px one, which are different steps once the bridge has read them. */
.scene-dim{display:flex; flex-direction:column; gap:7px;
  font-size:var(--t-body); color:var(--muted);}
.scene-picks{display:flex; gap:5px;}
.scene-pick{padding:8px 10px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm); color:var(--muted);}
.scene-pick-on{border-color:var(--accent); color:var(--accent);}

.scene-prompt{padding:13px; line-height:inherit; color:inherit;}
.scene-empty{padding:12px; border:var(--bd) dashed var(--edge); border-radius:var(--r-md);
  color:var(--muted); font-size:var(--t-body); line-height:var(--lh-body);}
.scene-rule{height:1px; background:var(--edge);}

.scene-reading{display:flex; flex-direction:column; gap:11px;}
.scene-reading-row{display:flex; gap:var(--s7); flex-wrap:wrap;}
.scene-label{display:flex; align-items:center; gap:8px;
  font-size:var(--t-body); color:var(--muted);}
.scene-label-end{margin-left:auto;}
/* a second heading level inside the panel, under the panel's own title */
.settings-subtitle{font-size:var(--t-sub); font-weight:var(--w-semi);}
/* and the note under one of those, which is a step tighter than the note under
   a page title. --lh-body is the token; the pages' 1.6 is the one that is not. */
.settings-note-tight{margin-top:4px; line-height:var(--lh-body);}

/* ---------- slice five: the room's own content ------------------------------

   The last of the Council: the four tab canvases, the clipboard and the two
   tool buttons, and the project rows. 87 attributes, and with them the room's
   two style-string selectors in base.css finally die — they hooked
   `font-family:Georgia` and the last child of a turn, and both of those are
   classes now, so the rules have nothing left to match and are deleted.

   Sizes here are the step the markup already rendered at, read through the
   bridge rather than off the page: a written 12.5 is --t-tiny, a written 14 is
   --t-body, a written 24 is --t-head. The three Georgia surfaces are the ones
   worth naming, because they never rendered at their written size at all — the
   deleted rule was pushing all three to --t-sub with a 70ch measure, and the
   classes below carry that outright.

   Gaps stay literal for the same reason as slices two and three. */

/* the rail: the project list */
.council-project-new{padding:9px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm); background:var(--inset);}
.council-project-archive{display:flex; justify-content:space-between; padding:7px 2px 2px;}
.council-row{display:flex; align-items:center; gap:9px; padding:9px 10px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--inset);}
.council-row-on{background:var(--sel);}
.council-row-archived{border-style:dashed; background:transparent; opacity:.82;}
.council-row-open{min-width:0; flex:1; text-align:left;}
.council-row-lines{min-width:0; flex:1;}
.council-row-name{font-size:var(--t-tiny); font-weight:var(--w-semi);}

/* The clipboard's rules left with the clipboard (Mark, 2026-08-31: "remove
   the clipboard and its logic"). THE KEEP is the one clipboard. */

/* THE FADE HAD A HOOK, AND MOVING IT TO A CLASS BROKE IT. base.css suppresses
   a room's entrance animation on an UPDATE render — a re-render inside the room
   rather than an arrival into it — and it did that by matching
   `[style*="animation:fadeUp"]`, which is a style-string selector like the two
   this slice deletes. The moment these canvases carried the fade in a class
   instead, the suppression stopped reaching them and every keystroke in the
   case would have re-run the animation. base.css already names [data-council]
   and [data-council-feed]; these are the five it did not. */
[data-render-phase="update"] .council-canvas,
[data-render-phase="update"] .council-case-fold,
[data-render-phase="update"] .council-docs,
[data-render-phase="update"] .council-lib-form{animation:none!important;}

/* a tab canvas. The three tabs share it; the case fold is one step looser. */
.council-canvas{display:flex; flex-direction:column; gap:16px; animation:fadeUp .25s ease both;}
.council-canvas-title{margin-top:4px; font-size:var(--t-head); font-weight:var(--w-semi);}
.council-note{font-size:var(--t-tiny); color:var(--muted);}
/* the dashed box a canvas shows when it has nothing in it yet */
.council-blank{display:flex; align-items:center; justify-content:center; min-height:240px;
  text-align:center; border:var(--bd) dashed var(--edge); border-radius:var(--r-lg);
  color:var(--muted); font-size:var(--t-body); line-height:1.6;}
.council-blank-tall{min-height:380px;}


/* THE CASE IS A FOLD UNDER THE COMPOSER NOW (2026-08-31), not a tab and not a
   staircase: .council-step / -loose / -off were the progressive reveal that
   hid the question until the title was typed, and the markup that used them is
   gone. All three fields stand together inside the fold. */
.council-case-fold{display:flex; flex-direction:column; gap:13px;
  padding-top:var(--s6); border-top:var(--bd) solid var(--edge);
  animation:fadeUp .22s ease both;}
.council-field{display:flex; flex-direction:column; gap:7px;}
.council-step-label{display:flex; flex-direction:column; gap:4px;}
/* the quiet toggle that opens it, in the session head beside NEW SESSION */
.council-case-toggle{padding:2px 0; border-bottom:var(--bd) solid transparent;}
.council-case-toggle-on{border-bottom-color:var(--accent);}
.council-case-title{padding:13px 14px; border-radius:var(--r-lg); line-height:inherit; color:inherit;}
.council-case-question{padding:15px; border-radius:var(--r-lg); resize:vertical; color:inherit;}
.council-case-foot{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:13px;}
.council-case-note{max-width:55ch; font-size:var(--t-tiny);
  line-height:var(--lh-body); color:var(--muted);}
.council-convene{padding:13px var(--s8); border-radius:var(--r-md); background:var(--accent);}
.council-convene-off{opacity:.45;}

/* LONG-FORM READING. These three carried `font-family:Georgia` inline and
   base.css matched on that string to push them to --t-sub with a 70ch measure.
   The written sizes (14.5, 15) were never what rendered. The rule is deleted
   and the size is stated here, which is the last of the room's style-string
   selectors going. */
.council-read{width:100%; max-width:70ch; resize:vertical; padding:15px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--panel);
  font-family:Georgia,serif; font-size:var(--t-sub); line-height:1.7; color:inherit;}

/* the Session tab: the cast, the composer, and the feed under it */
.council-feed-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.council-feed-acts{display:flex; align-items:baseline; gap:var(--s5); flex-wrap:wrap;}
.council-feed-cast{display:flex; flex-wrap:wrap; gap:12px;}
.council-feed-one{width:86px; display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center;}
.council-feed-name{font-size:var(--t-tiny); line-height:1.2;}
/* THE HOUSE COMPOSER FAMILY (Mark, 2026-08-31: "the pull down does not follow
   our UX adn the send arrow and the rounds make no sense. add our normal
   controls speeach to speech etc"). The Lounge's order: input, pause, speaker,
   mic, send. The addressed-one pulldown and THE ROUNDS pill died with the
   redesign; the rounds run from the case fold's CONVENE. */
.council-composer{display:flex; align-items:center; gap:8px; padding:6px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--panel);}
.council-say{flex:1; min-width:0; padding:9px; font-size:var(--t-body);}
.council-cbtn{flex:none; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:var(--bd) solid var(--edge); border-radius:var(--r-round);
  background:var(--inset); color:var(--muted);}
.council-cbtn-on{border-color:var(--accent); color:var(--accent);}
.council-cbtn-live{border-color:var(--accent); color:var(--accent);
  animation:pulse 1.1s ease-in-out infinite;}
/* the send disc keeps the room's own shape rather than .btn-primary: the
   assistant's send took the kit in slice two and gained a border and a weight
   with it, and matching the two is a look decision, not a conversion. */
.council-send{flex:none; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-round);
  background:var(--accent); color:var(--onAccent);}
.council-log-list{display:flex; flex-direction:column; gap:24px; padding:10px 5px 34px;}

/* the four shapes a line in the feed can take. The bubble's corner is one of
   the nine asymmetric radii in the app and stays exactly as written: a
   selector matching border-radius:14px would flatten the tail that makes it a
   bubble at all. */
.council-said{align-self:flex-end; max-width:88%; padding:10px 13px;
  border:var(--bd) solid var(--edge); border-radius:14px 14px 4px 14px;
  background:var(--inset); font-size:var(--t-body); line-height:var(--lh-body);
  white-space:pre-wrap;}
.council-doc{padding:12px var(--s6); text-align:left; border:var(--bd) solid var(--accent);
  border-radius:var(--r-lg); background:var(--glow);}
.council-doc-line{margin-top:5px; font-size:var(--t-small); line-height:var(--lh-body);}
.council-sys{padding:9px 11px; border:var(--bd) dashed var(--edge); border-radius:var(--r-md);}
.council-turn-head{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.council-play{font-size:var(--t-tiny); color:var(--muted);}
.council-turn-body{margin-top:7px; max-width:70ch; font-family:Georgia,serif;
  font-size:var(--t-sub); line-height:1.62; white-space:pre-wrap;}

/* the Documents tab: a list beside an editor */
.council-docs{display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr);
  gap:var(--s6); animation:fadeUp .25s ease both;}
.council-doc-list{display:flex; flex-direction:column; gap:8px;}
.council-doc-new{padding:10px; border:var(--bd) dashed var(--edge); border-radius:var(--r-md);}
.council-doc-pick{padding:10px 11px; text-align:left; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--panel);}
.council-doc-pick-on{border-color:var(--accent); background:var(--glow);}
.council-doc-name{font-size:var(--t-tiny); font-weight:var(--w-semi);}
.council-doc-pane{min-width:0;}
.council-doc-edit{display:flex; flex-direction:column; gap:11px;}
.council-doc-head{display:flex; align-items:center; flex-wrap:wrap; gap:7px;}
.council-doc-title{flex:1; min-width:180px; font-size:var(--t-sub); font-weight:var(--w-semi);}
.council-doc-status{display:flex; gap:3px; padding:3px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset);}
.council-doc-state{padding:7px 9px; border-radius:var(--r-sm); color:var(--muted);}
.council-doc-state-on{background:var(--sel); color:var(--accent);}
.council-doc-inc{padding:7px 10px; border:var(--bd) solid var(--edge); border-radius:var(--r-sm);}
.council-doc-inc-on{border-color:var(--accent);}
.council-doc-body{width:100%; max-width:70ch; resize:vertical; padding:17px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--panel);
  font-family:Georgia,serif; font-size:var(--t-sub); line-height:1.72; color:inherit;}

/* ---------- THE EXPERTS PANEL, which was the Library tab ----------
   Mark, 2026-08-31: "remove tool box tab and call it experts we can load
   experts from there." The grid of big cards was built for the width of a
   canvas; the shelf is 200px at its narrowest, so the same information is a
   ROW: picture, name, one muted line, one press on the right. The add-expert
   form (.council-lib-form / -name / -create) is kept and reused as it stands,
   because naming a public figure is the same act wherever it is done.

   .council-lib-grid and .council-expert* went with the tab: the cards had a
   88x112 portrait and a two-button foot that cannot be drawn on this shelf. */
.council-lib-add{flex:none; align-self:flex-start; padding:2px 0;
  border-bottom:var(--bd) solid transparent;}
.council-lib-add-on{border-bottom-color:var(--accent);}
.council-lib-form{display:flex; align-items:center; gap:9px; max-width:520px;
  padding:10px 12px; border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:var(--panel); animation:fadeUp .2s ease both;}
.council-lib-name{min-width:0; flex:1; padding:7px 2px;
  border-bottom:var(--bd) solid var(--edge); font-size:var(--t-small);}
.council-lib-create{flex:none; padding:8px 11px; border-radius:var(--r-sm); background:var(--accent);}
.council-expert-img{width:100%; height:100%; object-fit:cover;}

.council-xp{display:flex; flex-direction:column; gap:7px;
  padding:var(--s2) var(--panel-pad) var(--s6); overflow:auto; flex:1; min-height:0;}
.council-xp-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;}
/* A ROW IS TWO LINES (corrected 2026-08-31 off the browser walk). It was one
   flex line, face then a name-over-control column then the action, and the
   name and the action were dividing the same ~150px: names truncated to
   "Albe…" and "Rich…" and REMOVE crowded them. The name gets line one across
   BOTH remaining columns, about 130px, which carries "Richard Feynman" at
   --t-tiny; line two carries the control and its action, so the action can
   never share a line with the name again. Same shape the old canvas card
   used, at shelf scale.

   The face spans both rows in column one, so the four children are direct
   children of the row and nothing wraps them: a wrapper is what competed for
   the width in the first place. */
.council-xp-row{display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center; column-gap:9px; row-gap:5px; padding:7px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--panel);}
.council-xp-row-on{border-color:color-mix(in srgb,var(--accent) 55%,var(--edge));}
/* 34x44 is the shape of a portrait at row scale, not a step of a scale */
.council-xp-face{grid-row:1 / span 2; width:34px; height:44px; overflow:hidden;
  border-radius:var(--r-sm); background:var(--inset); text-align:left;}
.council-xp-name{grid-column:2 / span 2; grid-row:1; min-width:0; max-width:100%;
  font-size:var(--t-tiny); font-weight:var(--w-semi); text-align:left; color:inherit;}
.council-xp-meta{grid-column:2; grid-row:2; min-width:0; max-width:100%;}
.council-xp-act{grid-column:3; justify-self:end; padding:6px 8px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-sm);}

/* A SEATED ROW SPENDS ITS SECOND LINE ON THE MODEL, and the whole of it. A
   coach label runs to 22 characters ("SONNET 5.0 · ANTHROPIC") and sharing the
   line with REMOVE left the select showing "SO". The pairing is the fact a
   seated row exists to state, so REMOVE rides up beside the name instead and
   the select spans both columns underneath. The name gives up column 3 to make
   the room and keeps clipping, which is what it is for. */
.council-xp-name-tight{grid-column:2;}
.council-xp-row-on .council-xp-act{grid-row:1;}
.council-xp-row .council-seat-model{grid-column:2 / span 2; grid-row:2;
  width:100%; max-width:none;}
.council-xp-act-go{border-color:color-mix(in srgb,var(--accent) 45%,var(--edge));}
.council-xp-empty{padding:var(--s4) 0; font-size:var(--t-tiny);
  line-height:var(--lh-body); color:var(--muted);}

/* ---------- the mind card, mounted beyond this room ----------
   rooms/mind-card.js draws every mind picker in the app now (M-15). The three
   rules above (.settings-minds, .settings-mind, .settings-mind-on,
   .settings-mind-name) are unchanged and are still the reference; these are
   the two things the shared control needed that Ann's pane got from an inline
   style, plus the two mounts that sit somewhere other than a settings page. */
.mind-card-label{display:flex; flex-direction:column; gap:3px; min-width:0;}
.mind-card-sub{display:block;}
.mind-card-cost{flex:none;}
/* INSIDE A CHARACTER'S FLOOR the ground is already --inset, so a card on
   --inset would be a card with no edge but its border. It takes the panel
   instead, which is the same relationship the card has to a settings page. */
.char-minds-rack .settings-mind{background:var(--panel);}
/* The Settings chair rack keeps its own name for the grid it sits in. */
.prefs-minds{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}

/* ---------- the Council in the house's own two panels ----------
   Mark's layout ruling, 2026-08-25: the projects and their documents took
   the left panel's second tab, and the clipboard took the Tool Box's
   reserved shelf. Both were furniture in the canvas before, competing for
   width with the thing being read.

   These two rules are all the moved markup needed: every row, chip and
   empty line inside them is a class this sheet already styles, which is
   what made the move a move rather than a rebuild. */
.council-side{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s4);}
.council-here{display:flex; align-items:center; gap:var(--s4); padding:var(--s4);
  border:1px solid var(--line); border-radius:var(--r3); background:var(--panel);}