/* ---------- TITAN AI'S RIGHT COLUMN, AND THE DOCUMENT BESIDE THE CHAT ----------
   THE RIGHT SUB-LANE OWNS THIS FILE (LANE4-PLAN.md). It is the geometry the
   right column's markup (public/rooms/titan-right.js, titan-help.js) stands
   in: house-right.js mounts titanRight() whole inside
   <aside class="house-right house-right-titan">, the same manner the Cellar's
   own panel replaces that column (.house-right-cellar, house-shell.css).
   .house-right itself already carries the column's width and edge;
   .house-right-titan only adds the flex-column layout every multi-row right
   panel needs, the same three lines .house-right-cellar and .house-right-ann
   carry.

   .titan-tabs rides the shared .house-tabs track (house-shell.css) exactly as
   .house-tabs-trio does elsewhere, so three one-word names sit on the geometry
   the rail head already uses and nothing here restates a pill.

   EVERY VALUE IS A TOKEN, read off public/styles/tokens.css: no raw colour, no
   hand-picked size, and no markup in this lane carries a style attribute (the
   census is 19 and none of it is Titan's). The one live value is the beside
   view's width, --titan-pane-w, set on the split element by armTitanRight in
   public/actions/titan-files.js; the clamp below is a second floor and ceiling
   under it, so a stale property can never paint a column nobody can read.

   NO MONO ANYWHERE. Kickers, chips and presses are all --font-ui; the one
   place mono belongs in this room is a code block inside an answer, which is
   titan.css's own rule and not restated here. */
.house-right-titan{
  flex-direction:column; align-items:stretch; justify-content:flex-start; min-width:0;
}
.titan-right{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto;
}

/* ---------- THE THREE TABS ----------
   The track is the house's. What is ours is how the three share it, and the
   first run got that wrong: the house gives every segment flex:1, three equal
   thirds of a 370 pixel column, and "Help Center" does not fit a third of it.
   The panel drew "Help Ce..." (tools/titan/titan-room.png, 2026-09-03), which
   reads as a bug rather than as a truncation somebody chose.

   SO THE TWO FIXED NAMES TAKE WHAT THEY NEED AND THE PROJECT'S TAKES THE
   REST. "Help Center" and "Ann" are house copy of a known length, so they are
   sized to their own words and never clipped; the first pill is a name a
   person typed and can be any length, so it is the one that shrinks and the
   one that wears the ellipsis. A step down in type and tighter side padding
   buy the room for all three, both off the token scale.

   tools/titan/walk-right.mjs measures every pill's scroll width against its
   client width, so a sheet that quietly clips one of them again goes red. */
.titan-tabs .house-tab{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  padding:6px var(--s2); font-size:var(--t-label);
}
/* The two house names are sized to their own words: flex:none is what stops
   the track dividing itself into three equal thirds none of them asked for. */
.titan-tabs .house-tab + .house-tab{flex:none;}

/* ---------- THE GENERAL TAB ----------
   One scrolling column of parts. min-height:0 is what makes a flex child
   actually scroll instead of growing its parent. */
.titan-gen{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--s7);
  padding:var(--s5) var(--panel-pad) var(--s8);
}
.titan-gen-part{ display:flex; flex-direction:column; gap:var(--s3); min-width:0; }
/* UPPERCASE KICKERS WITH LETTER SPACING, the house face (CLAUDE.md's look
   rules and .house-group's own manner one file over). */
.titan-gen-kick{
  font-size:var(--t-label); font-weight:var(--w-bold); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--muted); font-family:var(--font-ui);
}
.titan-gen-quiet{
  font-size:var(--t-small); color:var(--muted); line-height:var(--lh-body);
}

/* ---------- INSTRUCTIONS ----------
   A soft card, and the whole card is the press: a person clicks the words to
   write them, which is the one gesture tried first. No pill, no fill beyond
   the inset the card already is. */
.titan-gen-card{
  display:block; width:100%; text-align:left; margin:0;
  padding:var(--s4) var(--s5); border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:var(--inset); color:var(--ink2);
  font-family:var(--font-ui); font-size:var(--t-small); line-height:var(--lh-body);
  white-space:pre-wrap; word-break:break-word;
}
.titan-gen-card:hover,.titan-gen-card:focus-visible{ border-color:var(--accent-line); color:var(--text); }
.titan-gen-card-empty{ color:var(--muted); }
.titan-gen-box{ resize:vertical; font-family:var(--font-ui); }
.titan-gen-saved{ font-size:var(--t-label); color:var(--muted); }

/* ---------- DOCUMENTS ----------
   A row is an icon, a name that truncates, and a status word under it. The
   open row wears the accent line, which is the same way the rail marks the
   open chat: colour says which, never weight. */
.titan-doc{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3); border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:var(--inset); min-width:0;
}
.titan-doc-on{ border-color:var(--accent-line); background:var(--accent-soft); }
.titan-doc-open{
  display:flex; align-items:center; gap:var(--s3); flex:1 1 auto; min-width:0;
  padding:0; border:0; background:none; color:inherit; text-align:left;
  font-family:var(--font-ui); font-size:var(--t-small);
}
.titan-doc-static{ cursor:default; }
button.titan-doc-open:hover .titan-doc-name{ color:var(--accent); }
.titan-doc-ic{ flex:none; display:inline-flex; color:var(--muted); }
.titan-doc-main{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.titan-doc-name{
  font-size:var(--t-small); font-weight:var(--w-semi); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* THE STATUS WORD. Ready is the accent, which is the one place on this panel
   the accent means "this is working". */
.titan-doc-ok{ font-size:var(--t-label); font-weight:var(--w-semi); color:var(--accent); }
.titan-doc-wait{ font-size:var(--t-label); font-weight:var(--w-semi); color:var(--muted); }
.titan-doc-bad{ font-size:var(--t-label); font-weight:var(--w-semi); color:var(--danger); }
.titan-doc-del{
  flex:none; display:inline-flex; padding:var(--s1); border:0; background:none;
  border-radius:var(--r-sm); color:var(--muted);
}
.titan-doc-del:hover{ color:var(--danger); background:var(--sel); }
.titan-doc-err{ font-size:var(--t-tiny); color:var(--danger); line-height:var(--lh-body); }
.titan-doc-said{ font-size:var(--t-tiny); color:var(--muted); line-height:var(--lh-body); }

/* THE DASHED PRESS, and the whole part is the drop zone behind it. The dash is
   what says "put something here" without a fill, which is the one control on
   this panel that is inviting rather than quiet. */
.titan-doc-add{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; margin-top:var(--s2); padding:var(--s3);
  border:var(--bd) dashed var(--edge); border-radius:var(--r-md); background:transparent;
  color:var(--ink2); font-family:var(--font-ui); font-size:var(--t-small); font-weight:var(--w-semi);
}
.titan-doc-add:hover:not(:disabled),.titan-doc-add:focus-visible{ border-color:var(--accent); color:var(--accent); }
.titan-doc-add:disabled{ color:var(--muted); }
/* The file input is ours to open and never to show: a bare one cannot be
   styled and would be the one control on this panel that is not ours. */
.titan-doc-file{ display:none; }
/* The drop highlight is a CLASS the arm toggles on the live node, never an
   inline style: a repaint on every dragover would fight the drag itself. */
.titan-gen-over{
  outline:var(--bd-thick) dashed var(--accent); outline-offset:var(--s2); border-radius:var(--r-md);
}
.titan-spin{ animation:titan-spin 1s linear infinite; }
@keyframes titan-spin{ to{ transform:rotate(360deg); } }

/* ---------- THE HELP CENTER ----------
   The lead line, then four groups of three questions. A question is a press
   the full width of the panel, left aligned, because it is a sentence and a
   centred sentence reads as a heading. */
.titan-help{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--s7);
  padding:var(--s5) var(--panel-pad) var(--s8);
}
.titan-help-lead{
  margin:0; font-size:var(--t-small); color:var(--muted); line-height:var(--lh-body);
}
.titan-help-part{ display:flex; flex-direction:column; gap:var(--s2); min-width:0; }
.titan-help-q{
  display:block; width:100%; text-align:left; margin:0;
  padding:var(--s3) var(--s4); border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:var(--inset); color:var(--ink2);
  font-family:var(--font-ui); font-size:var(--t-small); line-height:var(--lh-body);
}
.titan-help-q:hover,.titan-help-q:focus-visible{ border-color:var(--accent-line); color:var(--text); }

/* ---------- THE DOCUMENT BESIDE THE CHAT ----------
   The stage shrinks to a left column, a grip stands between, and the document
   fills the rest. The pane's width is the live property the arm writes; the
   clamp() around it is the second floor and ceiling, so the geometry is
   correct even on a paint before the arm has run. */
.titan-split{
  display:flex; align-items:stretch; height:100%; min-height:0; min-width:0;
  --titan-pane-w:520px;
}
.titan-split-stage{ flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; }
.titan-split-grip{
  flex:none; width:7px; align-self:stretch; padding:0; border:0;
  background:var(--edge); cursor:col-resize;
}
.titan-split-grip:hover{ background:var(--accent); }
.titan-pane{
  flex:none; min-height:0; display:flex; flex-direction:column;
  width:clamp(360px, var(--titan-pane-w), 760px);
  background:var(--panel); border-left:var(--bd) solid var(--edge);
}
.titan-pane-bar{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s5); border-bottom:var(--bd) solid var(--edge);
}
.titan-pane-bar-l{ display:flex; align-items:center; gap:var(--s3); min-width:0; }
.titan-pane-bar-r{ display:flex; align-items:center; gap:var(--s2); flex:none; }
/* THE TYPE CHIP: PDF, Markdown or Text. In the house face, not mono, and it
   wears the accent because it is a label for the thing that is open. */
.titan-pane-chip{
  flex:none; padding:2px var(--s3); border-radius:var(--r-pill);
  border:var(--bd) solid var(--accent-line); background:var(--accent-soft);
  color:var(--accent); font-family:var(--font-ui); font-size:var(--t-label);
  font-weight:var(--w-bold); letter-spacing:var(--ls-label); text-transform:uppercase;
}
.titan-pane-name{
  font-size:var(--t-body); font-weight:var(--w-semi); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.titan-pane-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border:0; background:none;
  border-radius:var(--r-sm); color:var(--muted);
}
.titan-pane-btn:hover{ color:var(--text); background:var(--sel); }
/* THE PDF IS THE BROWSER'S OWN VIEWER in a same-origin frame of the file door,
   which is why GET /api/chat/doc/file/* carries frame: 'self' in src/index.mjs. */
.titan-pane-pdf{
  flex:1 1 auto; min-height:0; width:100%; border:0; background:var(--inset);
}
.titan-pane-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:var(--s6) var(--s7) var(--s8);
}
.titan-pane-title{
  margin:0 0 var(--s5); font-size:var(--t-title); font-weight:var(--w-semi);
  color:var(--text); letter-spacing:var(--ls-head); line-height:var(--lh-tight);
}
/* The document's own words, drawn with the room's Markdown. The reading
   measures are titan.css's answer body's, said again here because a document
   is read at length and an answer is read in passing. */
.titan-pane-body{ color:var(--ink2); font-size:var(--t-body); line-height:var(--lh-read); }
.titan-pane-body > :first-child{ margin-top:0; }
.titan-pane-body > :last-child{ margin-bottom:0; }
.titan-pane-body p{ margin:0 0 var(--s5); }
.titan-pane-body ul,.titan-pane-body ol{ margin:0 0 var(--s5); padding-left:var(--s7); }
.titan-pane-body li{ margin:0 0 var(--s2); }
.titan-pane-body strong{ color:var(--text); font-weight:var(--w-semi); }
.titan-pane-wait{
  display:flex; align-items:center; gap:var(--s2);
  font-size:var(--t-tiny); color:var(--muted);
}
.titan-pane-bad{ font-size:var(--t-small); color:var(--danger); line-height:var(--lh-body); }

/* A narrow screen has no room for two columns, so the document takes the whole
   canvas and the grip stands down: a 360px pane beside a 200px chat is two
   things neither of which can be read. */
@media (max-width:900px){
  .titan-split{ flex-direction:column; }
  .titan-split-stage{ display:none; }
  .titan-split-grip{ display:none; }
  .titan-pane{ width:100%; border-left:0; }
}