/* ==========================================================================
   QUOTE BUILDER — PINNED TYPING ROW (quote-new2.html)

   Everything the builder looks like is quotes.css, loaded before this. What is
   different here is one thing: the row you type into does not stand in the
   document any more. It is pinned under the type strip, in a panel of its own,
   and the document below only ever receives what comes out of it.

   So this sheet is the join between those two panels and nothing else.
   ========================================================================== */

/* ---------- The typing panel ---------------------------------------------
   It is what the strip is attached to now, so it takes the flat top the strip
   expects and the document below goes back to being a card with corners. Both
   are `.tabs--attached ~ .card`, which is why the second one has to be given
   its radius back rather than never taking it. */
.qn2-entry-card { margin-bottom: 12px; }
.qn2-entry-card + .est-grid-card {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

/* THE STRIP HAS TO LAND ON WHITE. The active tab is a white tab with its bottom
   edge open, and what it opens onto is the panel it belongs to — so a coloured
   band starting 1px under it closes that edge again and the strip goes back to
   being a row of buttons floating over a panel it has nothing to do with. Worse
   here than in the document builder: with the join broken, the only thing left
   saying which panel the typing row belongs to is which one it is nearer, and
   that is the quote below it.

   So the same 12px of white the document card carries, for the same reason.
   Top only — the tables run the panel's full width. */
.qn2-entry-card { padding-top: 12px; overflow: visible; }
.qn2-entry-card .table-wrap { border-top: 0; overflow: visible; }

/* The autocomplete hangs out of the panel, and a panel one row tall is a panel
   the list is mostly outside of. It has to be above the document below it, or
   the quote's own header bands print through the options. */
.qn2-entry-card .est-ac-wrap { position: relative; z-index: 3; }

/* THE ROW IS THE ONE THING ON THE PAGE THAT TAKES TYPING, so it is allowed to
   look like it: the panel's own ground behind it rather than the white the
   document is written on (memory.md §13). The document below is white, the row
   above is not, and that is the whole difference between the two panels said
   without a word. */
.qn2-entry-card .est-entry td { background: var(--color-surface-alt); }
.qn2-entry-card .est-entry td:first-child {
  border-bottom-left-radius: var(--radius-md);
}
.qn2-entry-card .est-entry td:last-child {
  border-bottom-right-radius: var(--radius-md);
}

/* No indent on it either. The document's rows step in from the band that heads
   them because they are contents of a group; this row is not in a group — what
   it is made of is what decides that, once it is committed — so it starts at
   the panel's own edge. */
.qn2-entry-card .est-entry td:first-child { padding-left: var(--table-pad-x); }

/* ---------- The group menu joins the row menu's column --------------------
   A row's actions are one `...` now, in the column quotes.css sizes to exactly
   one 34px button — so the widths are the platform's again and nothing here has
   to touch them.

   What did not line up is the group head's own `...` directly above them. The
   head runs the section's full width; the tables inside it are inset by
   `--table-inset` at both ends (memory.md §20), and both then take a 12px pad —
   so the two menus, which are the same control asking about two things one
   under the other, stood 10px apart.

   The table keeps the inset every other table on the platform has. The one
   control moves: it is pulled in by that inset so it stands on the row menus it
   heads, and a column of `...` reads down the edge of the document. */
.est-grid-card .est-area-acts { margin-right: var(--table-inset); }

/* ---------- The quote, before anything is on it --------------------------
   The document used to hold the typing row, so it was never empty. Now it can
   be, and an empty white box under a row that fills it is a box that looks
   broken. One line, where the first item will land, gone the moment there is
   one.

   14px on the left, written out rather than taken from `--table-pad-x`: that
   variable is set on `.data-table` and this line is not in one, so naming it
   here resolves to nothing and takes the whole shorthand down with it — the
   line ends up flat against the card's edge with no padding at all. 14px is
   `.est-grid-card .est-area-head`'s own left padding, so the sentence stands
   exactly where the first group's name will stand once there is one. */
.est-grid-empty {
  padding: 20px 14px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---------- What the Viewers chip is hiding ------------------------------
   The chip stands for a list and says only its shape — "2 Viewers". That is
   the right thing to write on a chip, since names stop fitting at three, but it
   puts one of the facts a rep checks before sharing a quote a dialog away: who
   inside the house can open it. Opening a dialog to read something you are not
   changing is a trip.

   So the chip answers on hover. The panel is the list itself, and it is
   READ-ONLY: pointer-events are off, so it cannot be entered, cannot take
   focus, and never has to be dismissed. It is a fixed layer positioned from the
   chip's own rect, so the title row does not move to make space for it and no
   ancestor can clip it.

   The portal has no popover pattern to borrow, so it is built out of the same
   tokens every panel here is: the surface, the hairline, the card radius and
   the medium shadow — the one that says "above the page" without the lift of a
   dialog, which this is not. */
.qn2-peek {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  min-width: 236px;
  max-width: 340px;
  padding: 10px 0 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 12px;
}

/* What the panel is a list OF, over the names. */
.qn2-peek-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 12px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.qn2-peek-head .main { flex: 1 1 auto; min-width: 0; }

.qn2-peek-list { list-style: none; margin: 0; padding: 0; }

/* Name left, what they may do right — the two things being read, at the two
   edges of a narrow panel, so neither has to be hunted for down a ragged
   column. */
.qn2-peek-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 3px 12px;
  color: var(--color-text);
}
.qn2-peek-row .main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qn2-peek-row .r { flex: none; color: var(--color-text-muted); }

/* The line for a quote nobody has shared yet: the panel says what the chip
   would do if pressed, under a rule of its own. */
.qn2-peek-foot {
  margin: 8px 0 2px; padding: 7px 12px 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}