/* yleiskuva — styles of this view only. The design system lives in ../crm.css; use its tokens and components. */

/* band 0: one rust sentence under the date, each part a way into its list */
.yk-alert{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 28px; margin:-14px 0 34px}
.yk-alert a{display:inline-flex; align-items:center; gap:6px; color:var(--rust); font:500 15px/1.4 var(--f-ui); text-decoration:none}
.yk-alert a .icon{transition:transform .15s ease-out}
.yk-alert a:hover .yk-alert-text{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.yk-alert a:hover .icon{transform:translateX(2px)}
.yk-alert a:focus-visible{outline-offset:4px; border-radius:2px}

/* a band's heading that leads to its view: the arrow shows on hover, as on the figures */
.yk-h-link{display:inline-flex; align-items:center; gap:4px; color:var(--ink); text-decoration:none}
.yk-h-link .icon{opacity:0; transform:translateX(-3px); transition:opacity .15s ease-out, transform .15s ease-out}
.yk-h-link:hover .icon,.yk-h-link:focus-visible .icon{opacity:1; transform:none}
.yk-h-link:focus-visible{outline-offset:4px; border-radius:2px}

/* band 1: Myynti — the page head's 32 px is enough air above it. Its heading is the answer: "3 / 6 myyty" in
   Cormorant 36 and the sold sum in Inter 15/600 on one baseline, the arrow on hover as on the figures. */
.yk-sale{margin-top:0}
.yk-sale-h{margin:0 0 14px; font:inherit}
.yk-answer{gap:16px; align-items:baseline}
.yk-answer .icon{align-self:center}
.yk-sum{font:600 15px/1.35 var(--f-ui); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.yk-homes{
  --n:6;
  display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:16px 8px;
  padding:16px 8px;                        /* 28/20 around the text with the columns' own 12 px: the rows' 20 px edge */
}
/* a column is the button; its 12 px pad makes the hover reach past the text while the text keeps a 32 px gap */
.yk-home{
  display:flex; flex-direction:column; align-items:flex-start; min-width:0;
  padding:12px; border:0; border-radius:var(--r-s); background:none; text-align:left; color:var(--ink); font:inherit; cursor:pointer;
  transition:background-color .15s ease-out;
}
.yk-home:hover{background:color-mix(in srgb, var(--surface) 45%, var(--bg))}
.yk-home.is-open,.yk-home.is-open:hover{background:var(--sunk)}
.yk-home:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.yk-home > *{max-width:100%}
.yk-home .state{font-size:14px}
.yk-nro{margin-top:14px; font-variant-numeric:lining-nums}
.yk-type{margin-top:10px; font-size:13px; line-height:1.4; color:var(--ink-2)}
.yk-price{margin-top:2px; font-size:15px; font-weight:600; line-height:1.35; font-variant-numeric:tabular-nums; white-space:nowrap}
.yk-who{margin-top:14px; font-size:13px; line-height:1.4; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.yk-detail{font-size:13px; line-height:1.4; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* sold: the result stays readable but steps back */
.yk-home.is-sold .yk-nro,.yk-home.is-sold .yk-price{color:var(--ink-3)}
/* loading: the skeleton sits where the real lines will be */
.yk-home.is-skel{cursor:default}
.yk-home.is-skel:hover{background:none}
.yk-home .sk-state{width:44%; margin-top:4px}
.yk-home .sk-nro{width:52%; height:44px; margin-top:20px}
.yk-home .sk-type{width:78%; margin-top:16px}
.yk-home .sk-price{width:56%; margin-top:10px}
.yk-home .sk-who{width:64%; margin-top:22px; margin-bottom:22px}
.yk-leads .skel-rows .row{min-height:76px}

/* band 2: the next showing's figure and, for an editor, its "Vaihda" under the footnote */
.yk-fig{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0}
.yk-fig > .figure{align-self:stretch; container-type:inline-size}
/* a day as words ("Huomenna", "Su 25.10.") is wider than a number: smaller, and never wider than its column */
.figure-word{font-size:min(36px, 19cqi); white-space:normal}
.yk-change{font-size:13px; font-weight:500; color:var(--ink-2); min-height:24px}
.yk-change:hover{color:var(--ink)}
.yk-change .link-text{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; text-decoration-thickness:1px}
.yk-change:focus-visible{outline-offset:3px; border-radius:2px}
/* band 2: a figure loading */
.yk-skel-val{width:50%; height:40px; margin:8px 0; border-radius:8px}
@media (max-width:759px){ .yk-skel-val{height:32px; margin:4px 0} }

/* band 3: the newest leads — name and want · their words · stage and who · when */
.yk-lead{grid-template-columns:minmax(220px,1.25fr) minmax(0,1.5fr) minmax(130px,.7fr) 176px}
.yk-stage{display:flex; flex-direction:column; min-width:0; font-size:13px; line-height:1.4}
.yk-stage > *{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.yk-owner{color:var(--ink-3)}
.yk-when{display:flex; flex-direction:column; align-items:flex-end; justify-self:end; text-align:right; font-size:13px; line-height:1.4; font-variant-numeric:tabular-nums; white-space:nowrap}
.yk-when-1{color:var(--ink-2)}
.yk-when-2{margin-top:2px}

/* tablet and small laptops: still one row of homes (down to 760 px), tighter and with a smaller number */
@container page (max-width:1000px){
  .yk-homes{gap:16px 4px; padding:12px 4px}
  .yk-home{padding:10px}
  .yk-nro{font-size:40px; line-height:1}
  .yk-home .sk-nro{height:32px}
  .yk-who,.yk-detail{white-space:normal}
  .yk-lead{grid-template-columns:minmax(200px,1.3fr) minmax(0,1.2fr) minmax(120px,.8fr) 150px}
}
@container page (max-width:860px){
  .yk-lead{grid-template-columns:minmax(0,1.4fr) minmax(120px,.8fr) 150px}
  .yk-lead .row-excerpt{display:none}
}

/* phone: two homes a row, nro 40; lead rows are two lines with the time at the right of the name */
@media (max-width:759px){
  .yk-alert{margin:0 0 24px; gap:4px 20px}
  .yk-alert a{min-height:32px}
  .yk-homes{--n:2 !important; gap:0 4px; padding:8px 4px}        /* 20/16 around the text, as the phone rows */
  .yk-home{padding:12px}
  .yk-nro{margin-top:10px; font-size:40px; line-height:1}
  .yk-type{margin-top:8px}
  .yk-who{margin-top:10px}
  .yk-home .sk-nro{height:32px; margin-top:16px}
  .yk-home .sk-who{margin-top:18px; margin-bottom:18px}
  .yk-lead{grid-template-columns:minmax(0,1fr) auto; min-height:64px}
  .yk-lead .row-excerpt,.yk-lead .yk-stage{display:none}
  .yk-lead .yk-when{align-self:start; padding-top:13px}
  .yk-sale-h .d-36{font-size:26px}
  .yk-answer{gap:12px}
}