/* improve.css — the Social panel.

   Named for the file that draws most of it. The panel is `social` and holds
   four chips; Notes and Proposals are everything below the "Writing a note"
   heading, and Messages and People are the two shells at the top.

   Everything here is stated in the palette's own variables, never in a fixed
   colour, so the panel is legible on all eleven palettes and follows a reader
   who changes theirs while it is on screen.

   Two rules carried over from the panels beside it rather than reinvented:

     A CONTROL BOUNDARY IS `--border-strong`, and a region boundary is
     `--border-2`. `verify_theme` keeps that rule and its named failure is "a
     new control written by copying an old one", which is exactly what the vote
     buttons and the two acts under the box are.

     A FACT THE USER IS MEANT TO ACT ON MAY NOT BE ELLIPSISED. A label may be
     shortened, because its full text is in its `title`. The line saying what
     goes with a note is the whole of what will leave this device, so it wraps
     and is read in full, in a dock column of any width. trash.css records the
     screenshot that taught this. */

/* ── The head's two chips ───────────────────────────────────── */

/* The same control the chat head carries (Guarded, Concise, Steps), so a chip
   in this head reads as the chip it is rather than as a fourth kind of tab. */
.imp-chips { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* ── THE ONE PILL, stated once for the whole panel ────────────
   Every button on this surface is one shape: a transparent 999px
   pill on a --border-strong outline, secondary ink, going to the
   accent on hover. It was eight near-identical declarations that
   had drifted apart on padding (8/9/10/11px) and line-height
   (1.6/1.7/1.8) for a control the eye reads as one -- exactly the
   "new control written by copying an old one" that verify_theme's
   --border-strong rule is written against. A control that wants
   more presence takes `.on` (filled) or the primary size below,
   never its own padding.

   `#panel-social .pair-btn` joins the list so the People view --
   and the trust flows drawn into it -- wears the panel's pill and
   not pairing.js's coral modal button. The pairing/trust MODALS,
   which draw outside this panel, keep their own button and are out
   of this scope. */
.imp-chip, .post-btn, .ref-act, .imp-note-send, .imp-note-copy,
.imp-keep, .imp-send, .imp-vote, .shr-btn, #panel-social .pair-btn {
	background: none; border: 1px solid var(--border-strong); border-radius: 999px;
	color: var(--text-secondary); cursor: pointer;
	font-size: var(--fs-3xs-2xs); line-height: 1.7; padding: 0 10px;
}
.imp-chip:hover:not(:disabled), .post-btn:hover:not(:disabled), .ref-act:hover:not(:disabled),
.imp-note-send:hover:not(:disabled), .imp-note-copy:hover:not(:disabled),
.imp-keep:hover:not(:disabled), .imp-send:hover:not(:disabled), .imp-vote:hover:not(:disabled),
.shr-btn:hover:not(:disabled), #panel-social .pair-btn:hover:not(:disabled) {
	border-color: var(--accent); color: var(--accent-text);
}
.imp-chip:disabled, .post-btn:disabled, .ref-act:disabled, .imp-note-send:disabled,
.imp-note-copy:disabled, .imp-keep:disabled, .imp-send:disabled, .imp-vote:disabled,
.shr-btn:disabled, #panel-social .pair-btn:disabled {
	opacity: 0.5; cursor: default;
}
/* Filled while active: the chip whose view is showing, the vote that is cast.
   One chip per thing, filled while that thing is open. */
.imp-chip.on, .imp-vote.on {
	background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text);
}
/* PRIMARY: the panel's main verbs carry one step more size, and no more -- a
   Send is not louder than the answer beside it, it is just the main act. Keep
   and Send share it, and the People view's primary (`.pair-btn` that is not a
   `.ghost`) with them, so "Add somebody" reads as this panel's primary rather
   than pairing.js's. */
.imp-keep, .imp-send, .post-send, #panel-social .pair-btn:not(.ghost) {
	font-size: var(--fs-2xs-xs);
}
/* The information mark, between the chips and the closer.
   `.icon-btn` is right for the paint -- the circled "i" brings its own ring and
   must not be given a second one by a plate -- but its padding is a top BAR's
   room, and 5px 7px made a 30px box beside a 22px closer. Squared to the
   closer's box, which is what the row is measured on; the ink stays the 16px
   `.ic` either way. */
.imp-info { width: 22px; height: 22px; padding: 0; flex: none; }

/* THE HEAD WRAPS, AND NO CHIP SHRINKS. Four chips beside a heading, an
   information mark and a closer do not fit a 390px dock, and `.railhead` is a
   flex ROW whose heading takes `flex: 1` — so the chips were squeezed below
   their own labels and "Messages" and "People" were drawn one on top of the
   other, each clipped, on a phone. Screenshot: dev/shots/social-phone.png,
   2026-08-17.

   Scoped to this panel, because every other head in the app carries one control
   or two and none of them needs a second line. The heading keeps `flex: 1` so
   it still pushes the chips right when there IS room, but may not shrink; the
   chips take a line of their own when there is not. */
#panel-social .railhead { flex-wrap: wrap; row-gap: 2px; }
#panel-social .railhead > span:first-child { flex: 1 0 auto; }
/* AND THE CROSS KEEPS THE CORNER WHILE THE CHIPS WRAP. `order` decides which
   items a flex line takes, so the heading and the head's controls make the
   first line and the chips -- given a whole line by `flex-basis: 100%` -- make
   the second. Without it the closer wrapped along with the chips and finished
   248px in from the panel's right edge and 47px down, which is the one panel in
   the app whose cross was not in its top-right corner. */
#panel-social .railhead > .railhead-acts { order: 1; display: flex; align-items: center; gap: 4px; flex: none; }
#panel-social .imp-chips { order: 2; flex-basis: 100%; }
.imp-chips { flex-wrap: wrap; row-gap: 3px; min-width: 0; }
/* A chip is its label. Below that width it is not a shorter chip, it is an
   unreadable one — the same rule this file keeps for the line under the note
   box, one level down. */
.imp-chip { flex: none; white-space: nowrap; }

.imp-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.imp-view[hidden] { display: none; }

/* ── Messages and People ────────────────────────────────────── */

/* What each of the two shells says while it is a shell. `.rail-note` is the
   app's own "there is nothing here" paragraph, used unchanged so this reads as
   the same kind of sentence as "No chats yet." It is HIDDEN by the lane that
   fills the list, not removed, so an emptied list gets its sentence back. */
.imp-off { padding: 12px 10px; }
.imp-off[hidden] { display: none; }

.imp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 8px; }

/* ── A private message ──────────────────────────────────────── */

/* js/post.js draws this and owns no stylesheet, so it is dressed here, beside
   the panel it lives in. Everything is in the palette's own variables, as the
   top of this file requires.

   THE ONE RULE THAT IS NOT DECORATION: a message carries NO OFFICIAL SHAPE.
   There is no seal, no badge, no accent-coloured frame and no icon on any row,
   because the only thing that could earn one is a verified signature and this
   panel draws every message the same. A stranger's first message and the
   operator's fifth look alike, and that is deliberate -- an app that dresses
   one of them up is an app somebody can dress themselves up in. */

.post-tray, .post-list, .post-notices { padding: 2px 10px; }
.post-tray h3 {
	margin: 8px 0 4px; font-size: var(--fs-3xs); letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}

.post-msg, .post-req, .post-notice {
	padding: 8px 0; border-bottom: 1px solid var(--border);
}
.post-msg:last-child, .post-req:last-child { border-bottom: 0; }

/* Your own words, set apart by INDENT rather than by colour: a sent message and
   a received one are the same kind of thing and colour would rank them. */
.post-out { padding-left: 14px; border-left: 2px solid var(--border-strong); }

.post-who { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.post-name { font-size: var(--fs-xs); color: var(--text-primary); overflow-wrap: anywhere; }
/* The fingerprint, which is the part that cannot be chosen. Monospaced so two
   of them can be compared by eye, and quiet so it does not read as a title. */
.post-fp {
	font-family: var(--font-mono); font-size: var(--fs-3xs);
	color: var(--text-muted); overflow-wrap: anywhere;
}

/* What somebody wrote, whole, with their own line breaks. Not clipped: this is
   the message, and a message shortened to fit a column is a message the reader
   has to go somewhere else to finish. */
.post-body {
	margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
	font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5;
}
.post-body:empty { display: none; }

/* It arrived and it will not open. Said, rather than left as a gap -- and the
   reason underneath it, because "something went wrong" that names nothing is
   what sends somebody to the console. */
.post-bad { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--warn); }
.post-bad-why {
	margin: 2px 0 0; font-size: var(--fs-3xs-2xs); color: var(--text-muted);
	overflow-wrap: anywhere;
}

.post-refs { margin-top: 4px; }

.post-acts { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
/* `.post-btn` is the one pill (top of file). Nothing of its own. */

/* The relay's own row: no author, no reply control, its own section. It is not
   in the message stream and must not read as though it were, so it is set in
   the muted colour every other piece of app furniture uses. */
.post-notice p {
	margin: 0; font-size: var(--fs-3xs-2xs); color: var(--text-muted);
	line-height: 1.45;
}

/* ── The box, and what it says about who can read it ────────── */

.post-write {
	display: flex; flex-direction: column; gap: 6px;
	padding: 9px 10px; border-top: 1px solid var(--border);
	background: var(--bg-secondary);
}
.post-to {
	background: var(--bg-tertiary); color: var(--text-primary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	padding: 4px 6px; font: inherit; font-size: var(--fs-xs);
}
/* WHO CAN READ THIS, above the button, where the hand passes on its way to it
   -- the same placement and the same reasoning as `.imp-public` above. It wraps
   and is read in full at any dock width, because by this file's own rule a fact
   the user is meant to act on may not be ellipsised. */
.post-audience {
	margin: 0; font-size: var(--fs-3xs-2xs); color: var(--text-secondary);
	line-height: 1.45; overflow-wrap: anywhere;
}
.post-text {
	width: 100%; box-sizing: border-box; min-height: 72px; resize: vertical;
	background: var(--bg-tertiary); color: var(--text-primary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	padding: 7px 8px; font: inherit; font-size: var(--fs-sm); line-height: 1.45;
}
.post-text:focus { outline: none; border-color: var(--accent); }
.post-text::placeholder { color: var(--text-muted); }
/* Named again on the button. A control labelled plain "Send" in two places that
   do opposite things is the defect the wording exists to prevent, so this one
   is no louder than the public one beside it and says which channel it is. */
/* The one pill, at the primary size, laid at the start of its row. */
.post-send { align-self: flex-start; }
.post-note { margin: 0; min-height: 1.2em; font-size: var(--fs-3xs-2xs); color: var(--accent-text); }
.post-note:empty { min-height: 0; }

/* Nothing here yet, and nobody to write to. Two different sentences: the first
   is an empty list, the second is a stage a new account is in and says what to
   do next rather than disabling a control with no explanation. */
.post-empty, .post-nobody {
	margin: 12px 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
}
.post-nobody { margin: 0; }

/* ── A reference, drawn as a chip ───────────────────────────── */

/* NOT a link, and drawn so that it does not look like one: no underline, no
   link colour, a bordered box with a button in it. A reference is navigation
   inside this app, and a chip that looked like a URL would be a chip somebody
   tries to copy out.

   It arrives SHUT. Nothing is read until the button is pressed -- ten proposal
   chips resolved on opening an inbox is ten metered requests against the
   reader's own allowance -- so the first state is a kind, an id and one
   control. */
.ref-chip {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px;
	margin: 5px 0; padding: 6px 8px;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-3xs-2xs);
}
.ref-kind {
	flex: none; font-size: var(--fs-3xs); letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--text-muted);
}
.ref-name { flex: 1; min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.ref-note { flex-basis: 100%; color: var(--text-muted); overflow-wrap: anywhere; }
/* The one pill (top of file); it only holds its place in the chip's flex row. */
.ref-act { flex: none; }

/* There is no opening this. The same word `attachTile` uses for an attachment
   that cannot be reached and for a trashed Diamond, so the three read alike.
   The reason is TEXT and not only a tooltip: a tooltip is unavailable to a
   touch, and a chip that is silently inert on a phone is the failure this whole
   state exists to end. */
.ref-chip.shut { opacity: 0.75; border-style: dashed; }
.ref-chip.shut .ref-name { color: var(--text-muted); }
/* The sender's own description, drawn only where the resolution failed and said
   to be theirs. It is the one thing on this chip that did not come from this
   device, so it is set apart and never styled as a title. */
.ref-said {
	flex-basis: 100%; color: var(--text-secondary); font-style: italic;
	overflow-wrap: anywhere;
}

/* ── Writing a note ─────────────────────────────────────────── */

.imp-write { padding: 8px 10px; border-bottom: 1px solid var(--border); }

.imp-box {
	width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical;
	background: var(--bg-tertiary); color: var(--text-primary);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	padding: 7px 8px; font: inherit; font-size: var(--fs-sm);
	line-height: 1.45;
}
.imp-box:focus { outline: none; border-color: var(--accent); }
.imp-box::placeholder { color: var(--text-muted); }

/* What goes with the note: the exact characters that will be appended, in a
   row with a closer on it. Closing it takes the line off the screen and off
   the wire — so it has to be READABLE, in full, or the closer is a choice
   nobody could make. */
.imp-with {
	display: flex; align-items: flex-start; gap: 6px; margin-top: 6px;
	padding: 5px 4px 5px 7px;
	background: var(--bg-secondary); border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.imp-with[hidden] { display: none; }
.imp-with-label { display: block; font-size: var(--fs-3xs); letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.imp-with-body { flex: 1; min-width: 0; }
.imp-with-text { font-size: var(--fs-3xs-2xs); color: var(--text-secondary);
	line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }

/* What pressing Send does, said above Send. It is read on the way to the
   button, so it sits between the note and the buttons rather than under them —
   and it is a fact the user is meant to act on, so by this file's own rule it
   wraps and is read in full at any dock width rather than being ellipsised. The
   colour is `--text-secondary` and not `--text-muted`: this is one step louder
   than the notes around it and no more, because a panel that shouts at somebody
   for reporting a fault gets fewer reports. */
.imp-public {
	margin: 7px 0 0; font-size: var(--fs-3xs-2xs); color: var(--text-secondary);
	line-height: 1.45; overflow-wrap: anywhere;
}
/* Not offered where Send is not offered: a person with no voice cannot send,
   and telling them their notes will be published would be false. */
.imp-public[hidden] { display: none; }

.imp-acts { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
/* `.imp-keep` and `.imp-send` are the one pill at the primary size (top of
   file). Send is the one act here that reaches the network, and it is NOT
   louder than Keep -- both carry the primary size, because they are two honest
   answers to the same question and making one shout would be the panel guessing
   which was meant. */
.imp-send[hidden] { display: none; }

/* Who it goes as. Beside the button and not in a tooltip: a person must never
   find out afterwards that their name went too. */
.imp-as { flex-basis: 100%; font-size: var(--fs-3xs-2xs); color: var(--text-muted); }
/* Said only when there is no voice: with one, `.imp-public` above the buttons
   says it and says more. Stated rather than left to the browser, because an
   empty flex item with a 100% basis still takes a row of the wrap. */
.imp-as[hidden] { display: none; }
.imp-say { min-height: 1.2em; margin-top: 5px; font-size: var(--fs-3xs-2xs); color: var(--accent-text); }

/* ── The compose box, and the queue under it ────────────────── */

/* The compose box sits at the top of the Proposals view now, not in a view of
   its own: write a note, post it (verbatim or polished) straight as a proposal.
   `.imp-write` already dresses it; `.imp-compose` only keeps it from growing so
   the proposals list below stays the thing the view is for. The box gives way,
   with its own scroller, exactly as the old notes list made it. */
#improve-props-view > .imp-compose { flex: 0 1 auto; min-height: 0; overflow-y: auto; }

/* The queue: notes waiting to send. Collapses when empty so the compose box sits
   straight above the proposals in the ordinary case, and takes a capped, scrolling
   height when it fills rather than pushing the proposals off the screen. */
.imp-queue:empty { display: none; }
.imp-queue { flex: 0 1 auto; max-height: 40%; overflow-y: auto; border-bottom: 1px solid var(--border); }
.imp-queue-head { font-weight: 600; }

.imp-note { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.imp-note:last-child { border-bottom: 0; }
/* The note as it was written, newlines and all -- the panel is the only place it
   still exists until it sends, so it is shown whole rather than as a first line,
   but it stops growing so one long note does not hide the rest of the queue. */
.imp-note-text {
	white-space: pre-wrap; overflow-wrap: anywhere;
	font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.45;
	max-height: 7.5em; overflow-y: auto;
}
.imp-note-foot { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.imp-note-state { font-size: var(--fs-3xs-2xs); color: var(--text-muted); }
/* `.imp-note-send` and `.imp-note-copy` are the one pill (top of file). */
.imp-note-drop { margin-left: auto; }

/* ── Settings ────────────────────────────────────────────────── */

/* The voice this device posts with, and the drafts the model prepared. Two
   sections, each under a small eyebrow, drawn by improve.js's `drawSettings`. */
.imp-settings { padding: 8px 10px; overflow-y: auto; }
.imp-set-head { margin: 12px 0 6px; }
.imp-set-head:first-child { margin-top: 2px; }
.imp-set-note { margin: 0 0 6px; }

/* ── Proposals ──────────────────────────────────────────────── */

/* Which build the counts are from. It sits above the list, where somebody
   reading the numbers meets it before them rather than after — the same place
   and the same reasoning as `.trash-note`. */
.imp-asat { padding: 6px 10px; font-size: var(--fs-3xs-2xs); color: var(--text-muted);
	border-bottom: 1px solid var(--border); }
.imp-asat:empty { display: none; }

.imp-props { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 8px; }
.imp-props .rail-note { padding: 12px 10px; }

.imp-prop { border-bottom: 1px solid var(--border); }

/* The admin panel's shape: a coloured dot, a label and a value. A row that can
   be acted on is a button, and this one opens the thing it names. */
.imp-prop-row {
	display: flex; align-items: center; gap: 7px; width: 100%;
	background: none; border: none; cursor: pointer; text-align: left;
	padding: 7px 10px; color: var(--text-primary); font: inherit;
	font-size: var(--fs-xs);
}
.imp-prop-row:hover { background: var(--bg-tertiary); }
.imp-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.imp-prop[data-state="open"]     .imp-dot { background: var(--accent); }
/* `accepted` is the forge's word; `taken` was this panel's before it read the
   forge, and no proposal now carries it. Without this line the dot fell through
   to `--text-muted` and an accepted proposal was drawn IDENTICALLY to a declined
   one — the two outcomes a reader most needs told apart. */
.imp-prop[data-state="accepted"] .imp-dot { background: var(--warn); }
.imp-prop[data-state="done"]     .imp-dot { background: var(--ok); }
.imp-prop[data-state="declined"] .imp-dot { background: var(--text-muted); }
.imp-prop-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-prop-tally { flex: none; font-size: var(--fs-3xs-2xs); color: var(--text-muted);
	font-variant-numeric: tabular-nums; }

.imp-prop-body { padding: 0 10px 9px 24px; }
.imp-prop-body[hidden] { display: none; }
.imp-prop-says { margin: 0 0 5px; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
.imp-prop-facts { font-size: var(--fs-3xs-2xs); color: var(--text-muted); }

.imp-votes { display: flex; gap: 6px; margin-top: 7px; }
/* `.imp-vote` is the one pill, and `.imp-vote.on` its filled cast state, both at
   the top of this file. */
/* There is no `.held` state and there is no rule for one. A dashed "cast but not
   counted yet" variant was drawn here for a client-side vote queue, and that queue was
   rejected -- two stores of truth about one proposal, and the client's is stale the
   moment somebody else votes (`dev/IMPROVE_CONTRACT.md` §5.8). Nothing has set the class
   since; the rule outlived its setter until 2026-08-28. A vote is cast against the forge
   or it is not cast, so `.on` is the only state there is to draw. */

/* ============================================================
   The Share view — www/js/share.js
   ------------------------------------------------------------
   Two blocks in the order a person meets them: taking a share in
   needs nothing but the file, and sending one needs a Diamond and
   somebody to send it to. Its own `shr-` prefix rather than
   borrowing the `post-` furniture above, because these belong to
   a different module and a reader tracing a class should land in
   the file that draws it.
   ============================================================ */

.shr-block {
	padding: 9px 10px;
	border-bottom: 1px solid var(--border);
}
.shr-block:last-child { border-bottom: 0; }

.shr-head {
	margin: 0 0 4px;
	font-size: var(--fs-xs); font-weight: 600;
	color: var(--text-primary);
}

/* What the control is for, and what it will not do without asking. Quiet, and
   never trimmed: the sentence about a page being somebody else's program is the
   whole of the consent design being legible before anybody presses anything. */
.shr-note {
	margin: 0 0 7px;
	font-size: var(--fs-3xs-2xs); line-height: 1.45;
	color: var(--text-muted);
}

.shr-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* `.shr-btn` is the one pill (top of file); it keeps a focus ring of its own. */
.shr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Who it goes to. The skin gives a form input room to type and this is a
   toolbar; the same collision that made the file viewer's edit boxes 43px tall
   in a row of 22px buttons, so the height is stated here too. */
.imp-list .shr-who {
	background: var(--bg-tertiary); border: 1px solid var(--border-strong);
	color: var(--text-primary); border-radius: var(--radius-sm);
	padding: 1px 6px; height: auto; min-height: 0;
	font-size: var(--fs-3xs-2xs); line-height: 1.7;
	max-width: 60%;
}
.imp-list .shr-who:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* What happened. Never clipped and never a spinner: a sentence saying a file
   was saved and must now be given to somebody is an instruction, and half of
   one is no use. */
.shr-say {
	margin: 7px 0 0;
	font-size: var(--fs-3xs-2xs); line-height: 1.5;
	color: var(--text-secondary);
	white-space: pre-wrap; overflow-wrap: anywhere;
}
.shr-say[hidden] { display: none; }
.shr-warn { color: var(--warn); }

/* ── The triage plan ────────────────────────────────────────── */

/* One draft in a plan, told from the next one.
 *
 * `triage.js` draws its rows out of `.imp-*` on purpose -- the box is
 * `.imp-box`, the acts are `.imp-acts`, the refusal is `.imp-err` -- and it
 * needed nothing of its own until there were several drafts on the screen at
 * once. Photographed at a 300px dock and at 390px: a draft's last button and
 * the next draft's "New proposal" sit against each other with nothing between
 * them, so a list of separately sendable items reads as one wall of text and
 * a reader cannot see which box a Send belongs to. Every OTHER trg- class is
 * still bare, and should stay that way; this is the one thing the screen asked
 * for.
 *
 * `--border`, and the same 1px it is drawn at on `.imp-note` and `.imp-prop`
 * two hundred lines above -- the drafts are a list of items in the same panel
 * and a louder line would say they were a different kind of thing. See the
 * rule at the head of this file: a divider is not a control's boundary. */
.trg-draft { padding: 8px 0; border-bottom: 1px solid var(--border); }
.trg-draft:last-child { border-bottom: none; }

/* ── The approve-list queue ─────────────────────────────────────
 *
 * LANE NOTE: this block is the approve-list lane's (js/approvelist.js). Another
 * lane may also edit improve.css; keep this delimited so the two do not collide.
 *
 * It mirrors `.trg-draft` directly above -- one queued draft told from the next
 * by the same 1px `--border`, because the queue is a list of items in the same
 * panel and a louder line would say they were a different kind of thing. The row
 * head is laid out so the tick, the kind and the target do not run together,
 * which is the same defect the `.trg-draft` rule two lines up was drawn out of.
 * Every other apl- class reuses `.imp-box`, `.imp-acts`, `.imp-err`, `.imp-as`
 * and needs nothing of its own. */

/* THE QUEUE SCROLLS INSIDE THE PANEL, and takes the floor while it is on
 * screen. `host()` draws the drafts into `#improve-approve`, which had no rule
 * of its own until a plan of twenty drafts overran it: a bare flex child grows
 * to its whole content, and `.social`'s clip then hides every draft below the
 * fold with nothing to scroll to them. Photographed 2026-08-30 at 1400px and at
 * a phone's 390px, twenty drafts deep.
 *
 * The idiom is `.imp-notes`/`.imp-props` above -- `min-height: 0` on a flex
 * child is what lets it shrink past its content so its own `overflow-y` engages
 * -- with two turns of its own:
 *
 *   IT COLLAPSES WHEN EMPTY. `host()` leaves the div in place between runs, so
 *   without this an empty queue would still claim a flex share and starve the
 *   notes list. The same `:empty` rule `.imp-asat` keeps.
 *
 *   IT IS THE ACTIVE TASK, so it keeps a floor and the kept-notes list below
 *   gives way -- the reverse of that list's usual claim, because somebody
 *   reviewing fresh drafts is not reading old notes. Both floors at once would
 *   re-overflow the view, so the sibling rule drops the notes floor exactly
 *   while a queue is up. */
.imp-approve:empty { display: none; }
.imp-approve { flex: 1 1 0%; min-height: 55%; overflow-y: auto; padding: 2px 0 8px; }
.imp-approve:not(:empty) ~ .imp-notes { min-height: 0; }

.apl-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.apl-row:last-child { border-bottom: none; }
.apl-rowhead { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.apl-tick { align-self: center; }

/* The "Raised -- see it in Improve" confirmation, shown after a proposal is
   posted or queued. The hub link opens the Improve panel (tracker.js). */
.imp-raised { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 2px;
	font-size: var(--fs-2xs-xs); color: var(--text-muted); }
.imp-raised[hidden] { display: none; }
.imp-raised-hub { background: none; border: none; padding: 0; font: inherit; cursor: pointer;
	color: var(--accent-text); text-decoration: underline; }
.imp-raised-hub:hover { color: var(--accent-hover); }