/* Liidi — the lead sheet and the call outcome. Layout only: colours, type and components come from ../crm.css. */

/* head: who, how to reach them, what they want, in their own words, when and from where */
.ld-head .rec-top .seg{margin-top:4px}
.ld-temp{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2)}
.ld-quote{display:flex; flex-direction:column; align-items:flex-start; margin:4px 0 2px}
.ld-quote .quote-more{margin-left:-2px}
.ld-quote-when{margin-top:6px; font-size:13px; line-height:1.4; color:var(--ink-3)}
/* another firm's client: one quiet line under the name */
.ld-ro{margin-top:-4px; font-size:13px; line-height:1.4; color:var(--ink-3)}
/* untaken on a phone: the strip only says it; the sticky "Otan ja soitan" is the one rust button */
@media (max-width:759px){ .ld-strip > .btn{display:none} .sheet-main > .ld-strip:first-child{min-height:48px} }
.ld-pref{font-size:14px; line-height:1.45; color:var(--ink-2)}
.ld-edit{display:flex; flex-direction:column; gap:14px; padding-top:4px}
.ld-edit-actions{display:flex; justify-content:flex-end; gap:8px}

/* the stage with the homes under it: one group, "where is the deal" */
.ld-stage{margin-top:36px}
.ld-homes{margin-top:10px}
.ld-home{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto 30px; grid-template-areas:"nro line state more" ". track track .";
  column-gap:16px; row-gap:10px; align-items:baseline; padding:14px 0;
}
.ld-home + .ld-home{border-top:1px solid var(--line)}
.ld-nro{
  grid-area:nro; justify-self:start; padding:0; border:0; background:none; cursor:pointer; text-align:left;
  font:500 26px/1.15 var(--f-display); font-variant-numeric:lining-nums; color:var(--ink);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; text-decoration-thickness:1px;
  transition:text-decoration-color .15s ease-out;
}
.ld-nro:hover{text-decoration-color:var(--line-2)}
.ld-home-line{grid-area:line; min-width:0; font-size:13px; line-height:1.4; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ld-home-state{grid-area:state; justify-self:end; justify-content:flex-end; text-align:right; max-width:240px}
.ld-home-more{grid-area:more; align-self:center}
.ld-home-track{grid-area:track; max-width:440px}
.ld-add{margin:6px 0 0 -8px}
.ld-homes + .ld-add{margin-top:2px}
/* a phone: the showing right under the homes (the aside's Näytöt is not repeated in "Tiedot") */
.ld-phone-shows{margin-top:28px}
.ld-phone-shows > .sec-h{margin-bottom:8px}
.ld-phone-shows > .ld-add{margin-top:4px}
/* a narrow column (docked sheet, phone): the nro and state on top, the facts and the track under them */
@container main (max-width:560px){
  .ld-home{grid-template-columns:minmax(0,1fr) auto 30px; grid-template-areas:"nro state more" "line line line" "track track track"; column-gap:12px; row-gap:4px}
  .ld-home-track{max-width:none; margin-top:10px}
  .ld-home-state{max-width:none}
}

/* comments and history */
.ld-comments{margin-top:44px}
.ld-comments > .sec-h{align-items:center; min-height:30px}
.ld-only{margin-right:-8px}
.ld-hint{visibility:hidden}
.composer:focus-within + .ld-hint{visibility:visible}
.ld-timeline{margin-top:14px}
.ld-timeline > .event + .event{margin-top:-4px}     /* system lines sit closer together than comments */
.ld-timeline > .note.is-pending{opacity:.55}
.ld-timeline > .ld-more{align-self:flex-start; margin:2px 0 0 8px}
.ld-timeline > .empty{padding:8px 0}
@media (pointer:coarse){ .ld-hint{display:none} .ld-timeline{margin-top:16px} }
@media (max-width:759px){ .ld-comments{margin-top:36px} }

/* aside: facts on paper */
.ld-sec{min-width:0}
.ld-stack{display:flex; flex-direction:column; align-items:stretch; gap:10px}
.ld-stack > .seg{align-self:flex-start}
.kv .select{margin-top:2px}
.ld-sub{display:block; font-size:13px; color:var(--ink-3); overflow-wrap:anywhere}
.ld-sec .sec-end{color:var(--ink-3)}
.ld-path-more button{font-size:13px}
.ld-earlier{display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:16px}
.ld-earlier > p{margin-bottom:2px}
.ld-earlier-b{min-height:28px; font-size:13px; font-weight:400; text-align:left}
.ld-earlier-b[aria-expanded="true"]{font-weight:500}
.ld-earlier-path{margin:2px 0 8px 12px}
.ld-shows{display:flex; flex-direction:column; gap:6px}
.ld-show{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:14px; font-variant-numeric:tabular-nums}
.ld-struck{text-decoration:line-through; color:var(--ink-3)}
.ld-sec .ld-add{margin-top:8px}
.ld-qual{display:flex; flex-direction:column; gap:18px; padding-top:4px}
.ld-qual .options{margin-top:2px}
.ld-info{display:flex; flex-direction:column; gap:28px; padding:8px 0 4px}
.sheet-foot.ld-foot.is-typing{display:none}

/* the call outcome: a card at the bottom centre (a sheet from the bottom on a phone) */
.ld-call-pop:not(.is-sheet){top:auto !important; bottom:32px}
.ld-call{width:auto; gap:16px; padding:18px 18px 16px}
.ld-call-q{display:flex; flex-direction:column; gap:4px}
.ld-call-actions{display:flex; align-items:center; gap:8px}
.ld-call-actions .btn-quiet{margin-left:auto}
@media (max-width:759px){
  .ld-call-actions .btn{flex:1 1 0}
  .ld-call-actions .btn-quiet{margin-left:0; flex:0 0 auto}
}