/* THE CONTACT-DETAIL ROOM (view-contact-detail: the contact card and its tabs) — its stylesheet.
 *
 * Linked right after app.css (see the room-css markers in index.html). Holds the rules
 * that only this room's elements use: the reply box and queued texts, the Signal card's
 * roll-up, the addresses and reach lists, the enrichment proposals, the inactive-address
 * toggle, the recordings row and the icon row. Rules the organisation card, the edit
 * modals, the look picker or the avatar share (.cd-tab, .cd-tabs, .ci-grid, .ci-note,
 * .cd-reach, .cd-reach-value and friends) stay in app.css.
 *
 * Moved from app.css in the 15 Oct rebuild. No !important is used here. Rules that
 * matched nothing (.cd-continuity*, .cd-inactive-emails, .cd-reach-gap) are gone, and
 * rules that stacked on one selector are folded into one.
 */

/* THE REPLY BOX ON A CONTACT'S CARD. Reuses .tx-compose so the box on the
     card and the box on the conversation reader can never drift apart; these
     rules only undo the flex-column layout the reading pane gives it, because
     here it sits in an ordinary scrolling page. */
/* ROW 2333 — "close the gap between timeline seach and text box".
     The search bar ended, then the kind chips, then 12px of the composer's own
     top padding on top of the bar's bottom margin. Three separate gaps between
     a search box and the thing directly under it, none of them decided
     together. The composer's top padding goes: the bar above it already spaces
     itself, and a box that is the next thing on the page does not need to hold
     itself away from it as well. */
.cd-compose-wrap{ margin:0 0 var(--space-3); }

.cd-compose{ padding:0; border-top:none; }

.cd-compose-note{ padding:var(--space-2) 0 0; border-top:none; font-size:var(--type-body); }

.cd-queued-row{ display:flex; gap:var(--space-2); align-items:baseline; font-size:var(--type-body); color:var(--text-dim); padding:var(--space-2) 0; }

.cd-queued-tag{ flex:none; font-family:var(--font-mono); font-size:var(--type-label); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); border:1px solid var(--glass-border); border-radius:var(--radius-pill); padding:var(--space-hair) var(--space-2); }

/* ==========================================================================
     KEEPING UP & WATCHING, ROLLED UP — row 1742.
     ==========================================================================
     The same complaint on the Signal card: four circle chips, five cadence
     chips and two watching chips stacked in a column above the one measured
     number the card exists to show.

     The chevron is .cd-know-head, which this card already uses for "How you
     know each other" — one disclosure idiom per card.

     THE HEAD KEEPS THE STATE. It is a summary line and not a label: "Every
     month · watching". A drawer that hides whether Lucid is watching your
     brother has not tidied the card, it has taken a fact off it. */
.cd-rollup{ margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--glass-border); }

.cd-rollup-said{ min-width:0; }

.cd-rollup-state{ margin:var(--space-hair) 0 0; font-size:var(--type-body); }

.cd-inactive-toggle{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-2); cursor:pointer; font-size:var(--type-label); font-weight:600; color:var(--text-faint); }

.cd-inactive-toggle:hover{ color:var(--text-dim); }

/* THE SAME LINE, SAYING THREE DIFFERENT THINGS.
     A contact's alternate addresses are read after the card has painted, so the
     line under their email address has to be able to say "still asking" and
     "that read failed" as well as "3 more". Nothing new is drawn for either —
     it is the row that was already there, with the chevron hidden, because in
     neither state is there anything to expand. Waiting is the ordinary faint
     colour and not pressable; a failure is --orange, which every theme defines,
     and IS pressable, because the words on it offer a retry that retries. */
.cd-inactive-toggle.is-waiting{ cursor:default; }

.cd-inactive-toggle.is-waiting:hover{ color:var(--text-faint); }

.cd-inactive-toggle.is-failed{ color:var(--orange); }

.cd-inactive-toggle.is-failed:hover{ color:var(--orange-2); }

.cd-inactive-toggle.is-waiting .cd-inactive-chevron,
  .cd-inactive-toggle.is-failed  .cd-inactive-chevron{ display:none; }

/* LAST SEEN, beside the address rather than under it. It is a qualifier on
     the thing it sits next to, and a qualifier on its own line reads as a new
     fact. Dimmer than the address and dimmer than the Primary/Previous chip,
     because the order he needs it in is: what is the address, is it current,
     when did it last work. */
.cd-addr-seen{ font-size:var(--type-label); color:var(--text-faint); white-space:nowrap; margin-left:auto; }

/* An address with no date must not reflow the row — margin-left:auto above
     pushes the date right, so a row without one keeps the same shape. */
.cd-addr.is-past .cd-addr-seen{ color:color-mix(in srgb, var(--text-faint) 70%, transparent); }

/* The numbers' own roll-up. The addresses use the card's shared
     #cdInactiveToggle; a second list cannot share one toggle, so this one
     carries its own and is styled to match rather than to stand out. */
.cd-addr-more{ margin-top:var(--space-2); }

.cd-addr-more.is-open{ color:var(--text); }

/* ==========================================================================
     FILLING IN THE BLANKS on a contact card.
     ==========================================================================

     The evidence line is the load-bearing element here and it is styled to be
     read rather than to be small. "LinkedIn, from the signature on their email
     of 12 August" is the entire reason a proposal is trustworthy; a URL that
     appeared from nowhere is not something anybody should press a button
     about, and a sentence shrunk to nine grey pixels is a URL that appeared
     from nowhere.

     Nothing in here is red either. A source that did not answer, a rate limit
     that was reached, a website that took too long — those are ordinary
     sentences about a free lookup, not faults of his.
     ========================================================================== */
.cd-prop{ border-top:1px solid var(--glass-border); padding:var(--space-3) 0 var(--space-hair); }

.cd-prop:first-of-type{ border-top:none; padding-top:var(--space-hair); }

.cd-prop-field{ font-size:var(--type-label); text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); }

.cd-prop-value{ font-size:var(--type-body); color:var(--text); word-break:break-word; margin-top:var(--space-hair); }

.cd-prop-ev{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6; margin-top:var(--space-2); padding-left:var(--space-3); border-left:2px solid var(--glass-border-hi); word-break:break-word; }

.cd-prop-acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }

.cd-prop-acts .btn{ font-size:var(--type-body); padding:var(--space-2) var(--space-3); }

.cd-enrich-cost{ font-size:var(--type-body); color:var(--text-faint); line-height:1.6; margin:var(--space-2) 0 0; }

.cd-rec-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); padding:var(--space-1) 0; border-top:1px solid var(--glass-border); }

/* ==========================================================================
   THE ADDRESSES ON A CONTACT CARD — 5 October 2026.
   Primary, then alternatives, then PREVIOUS ROLLS UP behind one line.
   Type and one tick of colour; no card per address — a list of addresses is
   a list, and this card already has enough containers on it.
   ========================================================================== */
.cd-addr-list{ display:flex; flex-direction:column; gap:1px; margin:2px 0 4px; }

/* THE ADDRESS IS THE POINT, SO IT IS NOT TRUNCATED. This was ellipsis and
   nowrap, and the photograph came back reading "m.mur..." — the contact
   card's info column is narrow and an address list where the addresses are cut
   off is a list of nothing. It wraps instead, and the verbs drop to their own
   line when there is no room beside it. */
.cd-addr{ display:flex; align-items:baseline; gap:10px; padding:5px 0; font-size:14px; color:color-mix(in srgb, var(--text) 86%, transparent); flex-wrap:wrap; }

.cd-addr-a{ min-width:0; overflow-wrap:anywhere; word-break:break-word; }

.cd-addr.is-primary .cd-addr-k{ color:color-mix(in srgb, var(--th-mid) 92%, transparent); }

.cd-addr.is-past{ color:color-mix(in srgb, var(--text) 46%, transparent); }

.cd-addr.is-past .cd-addr-a{ text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--text) 26%, transparent); }

/* The verbs stay out of the way until the row is pointed at — a list of
   addresses should read as addresses, not as a row of controls. */
.cd-addr-do{ margin-left:auto; flex:none; display:flex; gap:12px; opacity:0; transition:opacity .14s ease; }

.cd-addr:hover .cd-addr-do,
.cd-addr:focus-within .cd-addr-do{ opacity:1; }

.cd-addr-b{ background:none; border:0; padding:0; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; color:color-mix(in srgb, var(--th-mid) 94%, transparent); }

.cd-addr-b:hover{ color:var(--text); }

.cd-inactive-chevron{ width:12px; height:12px; transition:transform var(--dur-fast) var(--ease-out); }

.cd-inactive-chevron.open,
.cd-inactive-toggle.is-open .cd-inactive-chevron{ transform:rotate(90deg); }

.ci-row{ margin:0 0 8px; }

.cd-reach-kind{ padding:var(--space-1) 0 var(--space-2); border-bottom:1px solid color-mix(in srgb, var(--text) 8%, transparent); }

.cd-reach-kind:last-of-type{ border-bottom:0; }

.cd-reach-kind > .info-label{ margin-bottom:var(--space-1); }

.cd-reach-row{ font-size:var(--type-body); position:relative; }

.cd-reach-lines{ line-height:1.4; }

.cd-reach-row.is-past .cd-reach-tag{ opacity:.7; }

.cd-reach-add{ align-self:flex-start; margin-top:var(--space-1); }

.cd-reach-none, .cd-reach-wait{ font-size:var(--type-body); color:color-mix(in srgb, var(--text) 50%, transparent); padding:var(--space-1) 0; }

.cd-reach-wait.is-failed, .cd-reach-err{ color:var(--orange); }

.cd-reach-err{ font-size:var(--type-body); font-weight:600; padding-top:var(--space-1); }

.cd-reach-paste{ font-size:var(--type-label); line-height:1.45; margin-top:var(--space-1); color:color-mix(in srgb, var(--text) 62%, transparent); }

.cd-addr.is-editing{ display:block; padding:var(--space-1) 0; }

.cd-reach-form{ display:flex; flex-direction:column; gap:var(--space-2); }

.cd-reach-form .field{ margin:0; }

.cd-reach-form-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }

.cd-reach-sel{ width:auto; min-width:0; flex:0 1 auto; }

.cd-reach-fixed{ font-size:var(--type-label); letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--text) 50%, transparent); }

.cd-reach-btns{ display:flex; gap:var(--space-2); margin-left:auto; }

@media (hover:hover){
  .cd-reach-row .cd-addr-do{ position:absolute; right:0; top:50%; transform:translateY(-50%); padding:var(--space-1) var(--space-2); border-radius:var(--radius-control); background:var(--bg-base); box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); pointer-events:none; }

  .cd-reach-row:hover .cd-addr-do,
    .cd-reach-row:focus-within .cd-addr-do{ pointer-events:auto; }
}

@media (hover:none){
  .cd-addr-do{ opacity:1; }

  .cd-reach-row .cd-addr-do{ margin-left:0; flex-basis:100%; flex-wrap:wrap; gap:var(--space-3); }
}

@media (max-width: 520px){
  .cd-reach-row .cd-addr-do{ position:static; transform:none; background:none; box-shadow:none; padding:0; margin-left:0; flex-basis:100%; flex-wrap:wrap; gap:var(--space-3); opacity:1; pointer-events:auto; }
}

/* THE DOSSIER on the contact card (20 Oct). Built from the learned-facts list's own
   classes (.ck-*, .tlk-*, .ht-verb); these few rules only add what it lacks:
   a section name, a question card and the pinned tag. Tokens only. */
.dos-head{ font-size:var(--type-label); font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--space-3); }
.dos-sec{ margin-top:var(--space-4); }
.dos-sec-name{ font-size:var(--type-label); font-weight:600; color:var(--text-dim); margin-bottom:var(--space-2); }
.dos-q{ max-width:60ch; margin-bottom:var(--space-3); padding:var(--space-3); border-left:2px solid var(--orange); background:color-mix(in srgb, var(--orange) 8%, transparent); }
.dos-q .tlk-verbs{ display:block; margin:var(--space-2) 0 0; }
.dos-pin{ font-size:var(--type-label); font-weight:600; color:var(--text-faint); }
.dos-wrap .tlk-add select.field{ flex:none; width:auto; margin:0; }
.dos-wrap .ck-foot .tlk-verbs{ display:block; margin:var(--space-1) 0 0; }