/* ────────────────────────────────────────────────────────────────────
   Grand CRM · design system — paper and ink
   The building's own ground: paper (--bg), petrol ink, one rust accent that means only "someone is waiting for a
   contact", Cormorant Garamond for the few large things and Inter for everything you read and work with.
   White surfaces are where you work; paper holds the facts. Surfaces never nest; hairlines only between rows.

   1 tokens · 2 base and type · 3 buttons · 4 seg · 5 fields · 6 marks (state, stage, flame, chip)
   7 surfaces, rows, sections, figures · 8 stepper, track4, bars · 9 empty, skeleton, quote, kv, fold
   10 shell (top bar, tabs, page head) · 11 sheet · 12 dialog · 13 popover and menu · 14 toast · 15 login · 16 kit
   ──────────────────────────────────────────────────────────────────── */

/* ── 1 tokens (the only colours, radii and shadows) ─────────────────── */
:root{
  --bg:#efedeb; --surface:#fcfbf9; --sunk:#e5e2dc; --line:#e7e3dd; --line-2:#d3cec6;
  --ink:#13262e; --ink-2:#3e4c53; --ink-3:#5f6a70; --ink-4:#9aa3a7;   /* ink-4: non-text only (ticks, future segments) */
  --rust:#9a4a22; --rust-soft:#f3e4da;
  --free:#3f6b52; --held:#a8742c;                                    /* dots only, never text */
  --danger:#a8322a;                                                  /* delete-confirm button + form errors only */
  --r-s:8px; --r:12px; --r-pop:10px; --r-dlg:14px;
  --shadow-1:0 1px 2px rgba(19,38,46,.04), 0 0 0 1px rgba(19,38,46,.05);
  --shadow-2:0 16px 48px rgba(19,38,46,.16), 0 0 0 1px rgba(19,38,46,.06);
  --f-ui:'Inter',system-ui,sans-serif; --f-display:'Cormorant Garamond',Georgia,serif;
  color-scheme:light;
}

/* ── 2 base and type ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink); overflow-x:clip;   /* nothing may widen a phone's page */
  font:400 14px/1.5 var(--f-ui); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0; padding:0}
ul,ol{list-style:none}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
button{cursor:pointer}
img,svg{display:block}
[hidden]{display:none !important}
::selection{background:rgba(19,38,46,.14)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.icon{flex:none; display:inline-block; vertical-align:middle; overflow:visible}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* Cormorant only at five sizes, weight 500, lining figures. Never in aligned numeric columns. */
.d-56,.d-36,.d-26,.d-22,.d-20i{font-family:var(--f-display); font-weight:500; font-variant-numeric:lining-nums; letter-spacing:0; color:var(--ink)}
.d-56{font-size:56px; line-height:1; letter-spacing:-.01em}
.d-36{font-size:36px; line-height:1.1; letter-spacing:-.005em}
.d-26{font-size:26px; line-height:1.15}
.d-22{font-size:22px; line-height:1.2}
.d-20i{font-size:20px; line-height:1.4; font-style:italic}
/* Inter: 15/600 row titles, 14 body, 13 secondary, 12 minimum */
.t-15{font-size:15px; font-weight:600; line-height:1.35}
.t-14{font-size:14px}
.t-13{font-size:13px; line-height:1.45}
.t-12{font-size:12px; line-height:1.4}
.strong{font-weight:600}
.medium{font-weight:500}
.ink{color:var(--ink)} .ink-2{color:var(--ink-2)} .ink-3{color:var(--ink-3)}
.rust{color:var(--rust)}                       /* only for the jobs of §7: late, stale, returned, expired, portals */
.late{color:var(--rust); font-weight:600}      /* a lead waiting over 2 h */
.stale{color:var(--ink); font-weight:600}      /* a lead untouched for 7 days: ink with a small rust dot, not rust text */
.stale::before{content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--rust); vertical-align:1px}
.num{font-variant-numeric:tabular-nums}
.right{text-align:right}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.grow{flex:1 1 auto; min-width:0}
.dot-sep::before{content:'·'; margin:0 .4em; color:var(--ink-3)}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:13px; line-height:1.5}
.stack{display:flex; flex-direction:column; gap:16px}
.cluster{display:flex; flex-wrap:wrap; align-items:center; gap:8px}

/* ── 3 buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:none;
  height:36px; padding:0 14px; border-radius:var(--r-s);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font:500 14px/1 var(--f-ui); white-space:nowrap; text-decoration:none; cursor:pointer; user-select:none;
  transition:background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--ink-4); background:color-mix(in srgb, var(--surface) 55%, var(--bg))}
.btn:active:not(:disabled){background:var(--bg)}
.btn[aria-pressed="true"]{background:var(--sunk); border-color:var(--line-2)}
/* a pressed toggle stays pressed under the pointer (the plain hover would win on specificity) */
.btn:not(.btn-quiet)[aria-pressed="true"]:hover:not(:disabled):not([aria-disabled="true"]){background:var(--sunk); border-color:var(--ink-4)}
.btn .icon{margin:0 -2px}
.btn-primary{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]){background:color-mix(in srgb, var(--ink) 86%, var(--surface)); border-color:color-mix(in srgb, var(--ink) 86%, var(--surface))}
.btn-primary:active:not(:disabled){background:var(--ink)}
/* rust fill: only Ota / Otan tämän / Otan ja soitan */
.btn-accent{background:var(--rust); border-color:var(--rust); color:var(--surface); font-weight:600}
.btn-accent:hover:not(:disabled):not([aria-disabled="true"]){background:color-mix(in srgb, var(--rust) 85%, var(--ink)); border-color:color-mix(in srgb, var(--rust) 85%, var(--ink))}
.btn-accent:active:not(:disabled){background:var(--rust)}
/* the row's Ota: rust words on rust-soft, filling on hover */
.btn-accent.btn-soft{background:var(--rust-soft); border-color:var(--rust-soft); color:var(--rust)}
.btn-accent.btn-soft:hover:not(:disabled):not([aria-disabled="true"]){background:var(--rust); border-color:var(--rust); color:var(--surface)}
.btn-quiet{background:transparent; border-color:transparent; color:var(--ink-2); padding:0 10px}
.btn-quiet:hover:not(:disabled):not([aria-disabled="true"]){background:rgba(19,38,46,.055); border-color:transparent; color:var(--ink)}
.btn-quiet:active:not(:disabled){background:rgba(19,38,46,.09)}
.btn-quiet[aria-pressed="true"]{background:rgba(19,38,46,.07); color:var(--ink)}
.btn-quiet[aria-pressed="true"]:hover:not(:disabled):not([aria-disabled="true"]){background:rgba(19,38,46,.09)}
.btn-danger{background:var(--danger); border-color:var(--danger); color:var(--surface)}
.btn-danger:hover:not(:disabled):not([aria-disabled="true"]){background:color-mix(in srgb, var(--danger) 86%, var(--ink)); border-color:color-mix(in srgb, var(--danger) 86%, var(--ink))}
.btn-s{height:30px; padding:0 12px; font-size:13px; gap:6px}
.btn-s.btn-quiet{padding:0 8px}
.btn-block{display:flex; width:100%}
.btn:disabled,.btn[aria-disabled="true"],.btn-icon:disabled{opacity:.42; cursor:default}
.btn.is-busy{cursor:progress; opacity:.7}
.btn-icon{
  display:inline-grid; place-items:center; flex:none; width:36px; height:36px; padding:0;
  border:0; border-radius:var(--r-s); background:transparent; color:var(--ink-2); cursor:pointer;
  transition:background-color .15s ease-out, color .15s ease-out;
}
.btn-icon:hover:not(:disabled){background:rgba(19,38,46,.06); color:var(--ink)}
.btn-icon:active:not(:disabled){background:rgba(19,38,46,.1)}
.btn-icon[aria-pressed="true"],.btn-icon[aria-expanded="true"]{background:rgba(19,38,46,.08); color:var(--ink)}
.btn-icon.btn-s{width:30px; height:30px}
.btn.btn-icon{border:1px solid var(--line-2); background:var(--surface)}
/* a word that leads somewhere: "Kaikki liidit →" */
.link{display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--ink-2); font:500 14px/1.4 var(--f-ui); cursor:pointer; text-decoration:none; transition:color .15s ease-out}
.link:hover{color:var(--ink)}
.link:hover .link-text{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.link .icon{transition:transform .15s ease-out}
.link:hover .icon-arrow-right{transform:translateX(2px)}
a.inline{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color .15s}
a.inline:hover{text-decoration-color:currentColor}

/* ── 4 seg: a choice saved on tap ──────────────────────────────────── */
.seg{display:inline-flex; flex:none; align-self:flex-start; gap:2px; padding:3px; background:var(--sunk); border-radius:10px; max-width:100%; overflow-x:auto; scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg > button{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  height:30px; padding:0 12px; border:0; border-radius:7px; background:transparent;
  color:var(--ink-2); font:500 14px/1 var(--f-ui); white-space:nowrap;
  transition:background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}
.seg > button:hover:not(:disabled){color:var(--ink); background:rgba(252,251,249,.5)}
.seg > button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1)}
.seg > button:focus-visible{outline-offset:0}
.seg .n{color:var(--ink-3); font-variant-numeric:tabular-nums}
.seg-s{padding:3px}
.seg-s > button{height:24px; padding:0 10px; font-size:13px; border-radius:7px}
.seg.is-disabled > button{cursor:default}
.seg.is-disabled > button:not([aria-pressed="true"]){color:var(--ink-3)}
.seg.is-disabled > button:hover{background:transparent}
.seg-block{display:flex; align-self:stretch}
.seg-block > button{flex:1 1 0; justify-content:center}

/* ── 5 fields ──────────────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field-label{font-size:13px; line-height:1.3; color:var(--ink-2)}
.field-hint{font-size:13px; line-height:1.4; color:var(--ink-3)}
.field-error{font-size:13px; line-height:1.4; color:var(--danger)}
.field-row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.field-row-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.form{display:flex; flex-direction:column; gap:16px}
.input,.select,.textarea{
  display:block; width:100%; height:40px; padding:0 12px; margin:0;
  border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--surface); color:var(--ink);
  font:400 14px/1.4 var(--f-ui); transition:border-color .15s ease-out, box-shadow .15s ease-out;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3); opacity:1}
.input:hover:not(:disabled):not(:focus),.select:hover:not(:disabled):not(:focus),.textarea:hover:not(:disabled):not(:focus){border-color:var(--ink-4)}
.input:focus,.select:focus,.textarea:focus,.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(19,38,46,.10)}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--bg); border-color:var(--line); color:var(--ink-3); cursor:default}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(168,50,42,.12)}
.input.num{font-variant-numeric:tabular-nums}
.input-s{height:32px; padding:0 10px}
.textarea{height:auto; min-height:88px; padding:9px 12px; line-height:1.5; resize:vertical}
.select{appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6a70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:16px 16px}
input[type="date"].input,input[type="time"].input{font-variant-numeric:tabular-nums}
input[type="date"].input::-webkit-calendar-picker-indicator{opacity:.55; cursor:pointer}
input[type="number"].input{-moz-appearance:textfield}
input[type="number"].input::-webkit-inner-spin-button{-webkit-appearance:none}
.input-wrap{position:relative; display:block}
.input-wrap > .icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.input-wrap > .icon ~ .input{padding-left:36px}
.input-wrap > .input-end{position:absolute; right:4px; top:50%; transform:translateY(-50%)}
.input-wrap > .input:has(+ .input-end){padding-right:44px}
.input-wrap > .input:has(+ .input-suffix){padding-right:32px}
.input-suffix{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.kbd{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:1px solid var(--line-2); border-radius:5px; font:500 12px/1 var(--f-ui); color:var(--ink-3); background:var(--surface)}
/* checkbox: a 18 px box, ink when checked */
.check{appearance:none; -webkit-appearance:none; flex:none; width:18px; height:18px; margin:0; border:1px solid var(--line-2); border-radius:5px; background:var(--surface); cursor:pointer; display:inline-grid; place-items:center; transition:background-color .15s, border-color .15s}
.check:hover:not(:disabled){border-color:var(--ink-4)}
.check:checked{background:var(--ink); border-color:var(--ink)}
.check:checked::after{content:''; width:10px; height:6px; margin-top:-2px; border:solid var(--surface); border-width:0 0 1.6px 1.6px; transform:rotate(-45deg)}
.check:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.check:disabled{opacity:.45; cursor:default}
.check-line{display:flex; align-items:center; gap:10px; min-height:32px; font-size:14px; cursor:pointer}
/* checkList: the multi-select (several homes) — rows of boxes, never a seg */
.check-list{display:flex; flex-direction:column; min-width:0}
.check-list > .check-line{min-height:40px; padding:0 8px; margin:0 -8px; border-radius:6px; transition:background-color .15s ease-out}
.check-list > .check-line:hover:not(.is-disabled){background:rgba(19,38,46,.05)}
.check-list > .check-line.is-disabled{cursor:default; color:var(--ink-3)}
.check-text{display:flex; flex-direction:column; flex:1 1 auto; min-width:0; line-height:1.35}
.check-sub{font-size:13px; color:var(--ink-3)}
.check-home{display:flex; align-items:baseline; gap:10px; min-width:0}
.check-nro{flex:none; min-width:32px; font-weight:600; font-variant-numeric:tabular-nums}
.check-facts{flex:1 1 auto; min-width:0; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.check-home > .state{flex:none; margin-left:auto}
/* a vertical option list: one tap saves (Lisätiedot) */
.options{display:flex; flex-direction:column}
.options > button{display:flex; align-items:center; gap:10px; min-height:32px; padding:0 8px; margin:0 -8px; border:0; border-radius:6px; background:none; text-align:left; font:400 14px/1.3 var(--f-ui); color:var(--ink-2)}
.options > button::before{content:''; width:6px; height:6px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px var(--ink-4)}
.options > button:hover:not(:disabled){background:rgba(19,38,46,.05); color:var(--ink)}
.options > button[aria-pressed="true"]{color:var(--ink); font-weight:500}
.options > button[aria-pressed="true"]::before{background:var(--ink); box-shadow:none}
.options > button:disabled{cursor:default}

/* ── 6 marks: state, stage, flame, chip ────────────────────────────── */
/* apartment state: a dot and a word. Green ring = vapaa, amber = varattu, ink = myyty. */
.state{display:inline-flex; align-items:baseline; flex-wrap:wrap; column-gap:0; font-size:14px; line-height:1.4; color:var(--ink); min-width:0}
.state-word{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.state-word::before{content:''; flex:none; width:8px; height:8px; border-radius:50%; background:var(--ink)}
.state-vapaa .state-word::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--free)}
.state-varattu .state-word::before{background:var(--held)}
.state-myyty .state-word::before{background:var(--ink)}
.state-who{color:var(--ink-2); white-space:nowrap}
/* holderLine(): "Aino Hakala · tarjous 365 000 €" — parts never break inside, only between them */
.holder-line{color:var(--ink-2); min-width:0}
.holder-line .holder-sep{color:var(--ink-3)}
.holder-line .state-late{color:var(--rust)}
.state-who::before,.state > .state-late::before{content:'·'; margin:0 .4em; color:var(--ink-3)}
.state-late{color:var(--rust); white-space:nowrap}
.state-s{font-size:13px}
.state-s .state-word{gap:7px}
.state-s .state-word::before{width:7px; height:7px}
.dot{display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:var(--ink)}
.dot-muted{background:var(--ink-4)}
.stage{font-size:13px; color:var(--ink); white-space:nowrap}
.stage-menetetty{color:var(--ink-3)}
.flame{display:inline-flex; color:var(--rust); flex:none}
/* filter chips are the only chips */
.chip{display:inline-flex; align-items:center; gap:2px; height:28px; padding:0 3px 0 10px; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--surface); font:500 13px/1 var(--f-ui); color:var(--ink); white-space:nowrap}
.chip-k{color:var(--ink-3); font-weight:400; margin-right:4px}
.chip > button{display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:5px; background:none; color:var(--ink-3)}
.chip > button:hover{background:var(--sunk); color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.count-pill{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--rust); color:var(--surface); font:600 11px/1 var(--f-ui); font-variant-numeric:tabular-nums; letter-spacing:0}
.tip{position:relative}

/* ── 7 surfaces, rows, sections, figures ───────────────────────────── */
.surface{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-1)}
.surface.pad{padding:28px 24px}
.rows{display:block; margin:0; padding:0; list-style:none}
.rows.surface{overflow:hidden}
.row{display:grid; align-items:center; column-gap:20px; min-height:64px; padding:0 20px; position:relative; color:var(--ink); text-decoration:none; transition:background-color .15s ease-out}
.row + .row{border-top:1px solid var(--line)}
.row-tall{min-height:76px}
.row-m{min-height:56px}
.row-s{min-height:52px}
.row-xs{min-height:44px}
.row.is-link,a.row,button.row{cursor:pointer}
button.row{width:100%; border:0; background:none; text-align:left; font:inherit}
button.row + button.row{border-top:1px solid var(--line)}
.row.is-link:hover,a.row:hover,button.row:hover{background:color-mix(in srgb, var(--surface) 45%, var(--bg))}
.row.is-open,.row[aria-current="true"],.row.is-open:hover{background:var(--sunk)}
.row:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.row.is-muted .row-title{color:var(--ink-2)}
.row-title{font-size:15px; font-weight:600; line-height:1.35; color:var(--ink)}
.row-title.is-cold{color:var(--ink-2)}
/* kuuma in a row without a flame column: the flame on the name's line, before it */
.row-title > .flame{display:inline-flex; margin-right:6px; vertical-align:-1px}
.row-sub{font-size:13px; line-height:1.4; color:var(--ink-2); margin-top:2px}
.row-meta{font-size:13px; line-height:1.4; color:var(--ink-3)}
.row-lines{display:flex; flex-direction:column; min-width:0; padding:12px 0}
.row-end{justify-self:end; text-align:right}
.row-excerpt{font-size:14px; color:var(--ink-2); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
/* phone rows: line 1 = name and the time at the right, line 2 = the rest */
.row-top{display:flex; align-items:baseline; gap:12px; min-width:0}
.row-top > :first-child{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-top > :last-child:not(:first-child){flex:none; font-size:13px; font-variant-numeric:tabular-nums}
/* a flame sits on the name's line, not in the middle of a two-line row */
.row:has(> .row-lines > :nth-child(2)) > .flame{transform:translateY(-10px)}
.rows-more{display:flex; align-items:center; min-height:48px; padding:0 20px; border-top:1px solid var(--line)}
.surface > .empty,.rows > .empty{padding:24px 20px}
/* sections on paper: one heading rule everywhere */
.sec{margin-top:32px}
.sec:first-child{margin-top:0}
.sec-h{display:flex; align-items:baseline; gap:8px; min-height:20px; margin:0 0 12px; font:600 14px/1.4 var(--f-ui); color:var(--ink)}
.sec-h .n{color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums}
.sec-h .sec-end{margin-left:auto; display:flex; align-items:baseline; gap:12px; font-weight:400; color:var(--ink-2)}
.sec-toggle{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0; border:0; background:none; font:500 14px/1.4 var(--f-ui); color:var(--ink-2); transition:color .15s ease-out}
.sec-toggle:hover{color:var(--ink)}
.sec-toggle .n{color:var(--ink-3); font-variant-numeric:tabular-nums}
.sec-toggle .icon{color:var(--ink-3); transition:transform .18s ease-out}
.sec-toggle[aria-expanded="true"] .icon{transform:rotate(90deg)}
.sec-toggle[aria-expanded="true"]{color:var(--ink); font-weight:600}
.band{margin-top:48px}
.band:first-child{margin-top:0}
/* figures on paper: caption, a large number, a footnote */
.figures{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px}
.figure{display:flex; flex-direction:column; gap:8px; min-width:0; color:inherit; text-decoration:none}
.figure-cap{font-size:13px; line-height:1.3; color:var(--ink-2)}
.figure-val{font:500 56px/1 var(--f-display); font-variant-numeric:lining-nums; letter-spacing:-.01em; color:var(--ink); white-space:nowrap}
.figure-val small{font:500 36px/1 var(--f-display); letter-spacing:0}
.figure-foot{font-size:13px; line-height:1.4; color:var(--ink-3)}
a.figure .figure-cap,button.figure .figure-cap{display:inline-flex; align-items:center; gap:4px; transition:color .15s ease-out}
a.figure:hover .figure-cap,button.figure:hover .figure-cap{color:var(--ink)}
a.figure .figure-cap .icon,button.figure .figure-cap .icon{opacity:0; transform:translateX(-3px); transition:opacity .15s ease-out, transform .15s ease-out}
a.figure:hover .figure-cap .icon,button.figure:hover .figure-cap .icon{opacity:1; transform:none}
button.figure{border:0; background:none; padding:0; text-align:left; font:inherit}
.figure:focus-visible{outline-offset:6px; border-radius:4px}
/* a table inside a surface (Kävijät, Kampanjat, Käyttäjät) */
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th{height:44px; padding:0 20px; text-align:left; font:500 13px/1.3 var(--f-ui); color:var(--ink-3); white-space:nowrap; border-bottom:1px solid var(--line)}
.table td{height:52px; padding:8px 20px; border-top:1px solid var(--line); vertical-align:middle}
.table tr:first-child td{border-top:0}
.table thead + tbody tr:first-child td{border-top:0}
.table .num,.table td.num,.table th.num{text-align:right; font-variant-numeric:tabular-nums}
.surface:has(> .table),.table-wrap{overflow-x:auto; overscroll-behavior-x:contain}
.table tbody tr.is-link{cursor:pointer}
.table tbody tr.is-link:hover td{background:color-mix(in srgb, var(--surface) 45%, var(--bg))}

/* ── 8 stepper, track4, bars ───────────────────────────────────────── */
/* the stepper: seven segments in every desktop sheet; the phone form only on a phone (viewport < 760 px) */
.stepper-host{container:stepper / inline-size; min-width:0}
/* the head: the section's own title at the left, "Merkitse menetetyksi" at the right — so the track gets the full width */
.stepper-head{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; margin-bottom:10px}
.stepper-head .sec-h{margin:0}
.stepper-head .stepper-lost{margin-right:-8px}
.stepper{display:block}
/* seven equal segments; a two-word label wraps under its own segment rather than crowding the next one */
.stepper-steps{display:flex; gap:2px}
.step{
  display:flex; flex-direction:column; gap:9px; flex:1 1 0; min-height:44px;
  padding:0 0 6px; border:0; background:none; text-align:left; cursor:pointer;
}
.step-track{display:block; height:4px; background:var(--ink-4); opacity:.45; transition:background-color .15s ease-out, opacity .15s ease-out}
.step:first-child .step-track{border-radius:2px 0 0 2px}
.step:last-child .step-track{border-radius:0 2px 2px 0}
.step-label{display:flex; font-size:13px; line-height:1.3; color:var(--ink-3); padding-right:8px; overflow-wrap:normal; transition:color .15s ease-out}
.step-text{min-width:0}
.step-nro{white-space:nowrap}
.step-nro::before{content:' · '}
.step.is-done .step-track,.step.is-current .step-track{background:var(--ink); opacity:1}
.step.is-done .step-label{color:var(--ink-2)}
.step.is-current .step-label{color:var(--ink); font-weight:600}
.step:hover:not(:disabled) .step-track{opacity:1; background:var(--ink-3)}
.step.is-done:hover:not(:disabled) .step-track,.step.is-current:hover:not(:disabled) .step-track{background:var(--ink)}
.step:hover:not(:disabled) .step-label{color:var(--ink)}
.step:focus-visible{outline-offset:3px; border-radius:2px}
.step:disabled{cursor:default}
/* a read-only lead (another firm's): the segments and home tracks visibly inactive */
.step:disabled .step-track,.track4 > button:disabled .t{opacity:.45}
.step:disabled .step-label,.step.is-done:disabled .step-label,.step.is-current:disabled .step-label{color:var(--ink-3)}
.track4 > button:disabled .l,.track4 > .is-done:disabled .l,.track4 > .is-current:disabled .l{color:var(--ink-3)}
.step.is-current{cursor:default}
.stepper.is-lost .step-track{background:var(--line-2); opacity:1}
.stepper.is-lost .step-label{color:var(--ink-3); font-weight:400}
.stepper-lostline{display:flex; align-items:baseline; gap:12px; margin-top:10px; font-size:14px; color:var(--ink)}
.stepper-lostline b{font-weight:600}
.stepper-phone{display:none; flex-direction:column; gap:14px}
.stepper-now{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.stepper-now .of{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.stepper-mini{display:flex; gap:2px}
.stepper-mini i{flex:1; height:3px; background:var(--ink-4); opacity:.45}
.stepper-mini i.on{background:var(--ink); opacity:1}
.stepper-actions{display:flex; gap:8px; align-items:center}
.stepper-actions .btn-primary{flex:1 1 auto}
/* a lead-sheet column (under 700 px): every segment keeps its label, so the choices can be seen — the segments
   take the width their labels need (a two-word label wraps, "· 126" goes under its stage) instead of equal parts */
@container stepper (max-width:699px){
  .step{flex:1 1 auto}
  .step-label{font-size:12px; padding-right:6px}
  .step:last-child .step-label{padding-right:0}
}
.stepper-host.is-phone-form .stepper,.stepper-host.is-phone-form .stepper-lostline,.stepper-host.is-phone-form .stepper-head .stepper-lost{display:none}
.stepper-host.is-phone-form .stepper-phone{display:flex}
@media (max-width:759px){
  .stepper-host:not(.is-desktop-form) .stepper,.stepper-host:not(.is-desktop-form) .stepper-lostline{display:none}
  .stepper-host:not(.is-desktop-form) .stepper-phone{display:flex}
  .stepper-host:not(.is-desktop-form) .stepper-head .stepper-lost{display:none}
}
/* track4: the lead's link to one home — Kiinnostunut · Varannut · Tarjonnut · Myyty */
.track4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:2px; min-width:0}
.track4 > button{display:flex; flex-direction:column; gap:7px; min-width:0; min-height:32px; padding:0 0 4px; border:0; background:none; text-align:left; cursor:pointer}
.track4 .t{display:block; height:3px; background:var(--ink-4); opacity:.45; transition:background-color .15s ease-out, opacity .15s ease-out}
.track4 > button:first-child .t{border-radius:2px 0 0 2px}
.track4 > button:last-child .t{border-radius:0 2px 2px 0}
.track4 .l{font-size:12px; line-height:1.3; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s ease-out}
.track4 > .is-done .t,.track4 > .is-current .t{background:var(--ink); opacity:1}
.track4 > .is-done .l{color:var(--ink-2)}
.track4 > .is-current .l{color:var(--ink); font-weight:600}
.track4 > button:hover:not(:disabled) .t{opacity:1; background:var(--ink-3)}
.track4 > button.is-done:hover:not(:disabled) .t,.track4 > button.is-current:hover:not(:disabled) .t{background:var(--ink)}
.track4 > button:hover:not(:disabled) .l{color:var(--ink)}
.track4 > button:disabled{cursor:default}
.track4 > button.is-current{cursor:default}
/* bars: 6 px, ink 28 %; only the highlighted share solid ink or rust; the number beside, tabular */
.bar{display:block; height:6px; min-width:2px; border-radius:3px; background:rgba(19,38,46,.28)}
.bar.is-ink{background:var(--ink)}
.bar.is-rust{background:var(--rust)}
.bar-cell{display:flex; align-items:center; gap:12px; min-width:0}
.bar-cell .bar-track{flex:1 1 auto; min-width:40px}
.bar-cell .bar-n{flex:none; min-width:3.2ch; text-align:right; font-variant-numeric:tabular-nums}

/* ── 9 empty, skeleton, quote, kv, fold ────────────────────────────── */
.empty{margin:0; padding:24px 0; font:italic 500 20px/1.4 var(--f-display); font-variant-numeric:lining-nums; color:var(--ink-2); text-align:left}
.skel{display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--sunk) 25%, color-mix(in srgb, var(--sunk) 45%, var(--surface)) 50%, var(--sunk) 75%); background-size:300% 100%; animation:skel 1.6s ease-in-out infinite}
.skel-rows .row{min-height:64px}
.skel-lines{display:flex; flex-direction:column; gap:10px; padding:4px 0}
.skel-title{height:14px}
.skel-big{height:40px; border-radius:8px}
.skel-nro{width:40px; height:36px; border-radius:6px}
.skel-name{height:36px; margin-top:20px; border-radius:8px}
.skel-group{display:flex; flex-direction:column; gap:32px}
.skel-hero{display:flex; flex-direction:column; gap:16px}
.skel-cap{height:13px}
.skel-date{width:40%; height:56px; border-radius:10px}
.skel-aside{display:flex; flex-direction:column; gap:28px}
@keyframes skel{from{background-position:100% 0} to{background-position:0 0}}
/* the customer's own words */
.quote{margin:0; font:italic 500 20px/1.4 var(--f-display); font-variant-numeric:lining-nums; color:var(--ink); max-width:38em; overflow-wrap:anywhere}
.quote::before{content:'”'; display:inline-block; width:.45em; margin-left:-.45em; color:var(--ink-3)}
.quote::after{content:'”'; color:var(--ink-3)}
.quote.is-clamped{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.quote.is-clamped::before{margin-left:0; width:auto}
.quote-wrap{padding-left:.45em}
.quote-more{margin-top:4px}
/* facts on paper: label over value */
.kv{display:flex; flex-direction:column; gap:14px; margin:0}
.kv > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.kv dt{font-size:13px; line-height:1.35; color:var(--ink-3)}
.kv dd{margin:0; font-size:14px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.kv dd a{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.kv dd a:hover{text-decoration-color:currentColor}
/* a disclosure whose summary line says what is inside */
.fold{min-width:0}
/* one disclosure pattern with .sec-toggle: the label (and its summary or count) first, the chevron after it */
.fold-head{display:flex; align-items:flex-start; gap:6px; width:100%; min-height:40px; padding:10px 0; border:0; background:none; text-align:left; color:var(--ink); font:600 14px/20px var(--f-ui)}
.fold-chev{display:inline-block; flex:none; margin-left:6px; vertical-align:-3px; color:var(--ink-3); transition:transform .18s ease-out}
.fold.is-open > .fold-head .fold-chev{transform:rotate(90deg)}
.fold-head:hover .fold-chev{color:var(--ink)}
/* the title and what is known; in a narrow aside the summary drops under the title instead of being cut */
.fold-text{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; min-width:0}
.fold-sum{font-weight:400; font-size:13px; color:var(--ink-3); min-width:0}
.fold-body{padding:6px 0 4px}
.fold-body.flush{padding-left:0}
/* a fact edited in place (inlineEdit): plain text with a pencil on hover; the control takes its place on a click */
.ie{display:block; min-width:0}
.ie-btn{display:inline-flex; align-items:flex-start; gap:6px; max-width:calc(100% + 12px); margin:-3px -6px; padding:3px 6px; border:0; border-radius:6px; background:none; color:var(--ink); font:inherit; line-height:inherit; text-align:left; cursor:pointer; transition:background-color .15s ease-out}
.ie-btn:hover{background:rgba(19,38,46,.055)}
.ie-btn .icon{flex:none; margin-top:3px; color:var(--ink-3); opacity:0; transition:opacity .15s ease-out}
.ie-btn:hover .icon,.ie-btn:focus-visible .icon{opacity:1}
.ie-val{min-width:0; overflow-wrap:anywhere}
.ie-val.is-empty{color:var(--ink-3)}
.ie > .input,.ie > .select,.ie > .input-wrap{margin:-2px 0}
.ie > .textarea{min-height:72px; margin:2px 0}
.ie.is-saving > *{opacity:.5; transition:opacity .15s ease-out}
/* an address as it goes into an ad (linkBox): mono on sunk paper, breaking only between its parts */
.link-box{padding:12px 14px; border-radius:var(--r-s); background:var(--sunk)}
.link-box-text{display:block; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:13px; line-height:1.55; color:var(--ink); overflow-wrap:anywhere}
.link-box.is-big{padding:18px 20px}
.link-box.is-big .link-box-text{font-size:15px}
@media (max-width:759px){ .link-box.is-big .link-box-text{font-size:14px} }

/* ── 10 shell: top bar of words, phone tabs, page head ─────────────── */
.app{min-height:100vh}
.top{position:sticky; top:0; z-index:30; background:var(--bg); transition:box-shadow .15s ease-out}
.top.is-scrolled{box-shadow:inset 0 -1px 0 var(--line)}
.top-inner{display:flex; align-items:center; gap:40px; height:64px; max-width:1336px; margin:0 auto; padding:0 48px}
.wordmark{display:inline-flex; align-items:baseline; flex:none; font:500 22px/1 var(--f-display); color:var(--ink); white-space:nowrap; text-decoration:none}
.wordmark .short{display:none}
.nav{display:flex; align-items:stretch; gap:28px; height:64px; min-width:0}
.nav a{position:relative; display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font:500 14px/20px var(--f-ui); white-space:nowrap; transition:color .15s ease-out}
.nav a:hover{color:var(--ink)}
.nav-word{position:relative; display:inline-flex; flex-direction:column}
.nav-word::before{content:attr(data-w); height:0; overflow:hidden; visibility:hidden; font-weight:600}  /* holds the bold width */
.nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.nav a[aria-current="page"] .nav-word::after{content:''; position:absolute; left:0; right:0; top:calc(100% + 13px); height:2px; background:var(--ink); border-radius:1px}
.nav a:focus-visible{outline:none}
.nav a:focus-visible .nav-word{outline:2px solid var(--ink); outline-offset:4px; border-radius:2px}
.account{display:inline-flex; align-items:center; gap:6px; flex:none; height:36px; margin-left:auto; margin-right:-10px; padding:0 8px 0 10px; border:0; border-radius:var(--r-s); background:none; color:var(--ink-2); font:500 14px/1 var(--f-ui); white-space:nowrap; transition:background-color .15s ease-out, color .15s ease-out}
.account:hover,.account[aria-expanded="true"]{background:rgba(19,38,46,.055); color:var(--ink)}
.account .icon{color:var(--ink-3); margin-left:2px}
.account .firm{color:var(--ink-3)}
.account .firm::before{content:'·'; margin-right:6px}
.top-title,.top-act,.avatar,.top-find{display:none}
.app-main{max-width:1336px; margin:0 auto; padding:40px 48px 96px; container:page / inline-size; min-width:0}
/* docked lead sheet (≥ 1360 px): the list keeps the top bar's left edge and ends where the sheet begins */
body.has-dock .app-main{max-width:none; margin-left:max(0px, calc((100% - 1336px) / 2)); margin-right:840px}
.tabbar{display:none}
/* page head: the title, a sentence after it, the actions at the right */
.page-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 16px; margin-bottom:32px; min-height:40px}
.page-title{font:500 36px/1.1 var(--f-display); font-variant-numeric:lining-nums; letter-spacing:-.005em; color:var(--ink)}
.page-sub{font-size:14px; color:var(--ink-2)}
.page-sub.ink-3{color:var(--ink-3)}
.page-actions{display:flex; align-items:center; gap:8px; margin-left:auto; align-self:center}
.page-tools{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:-12px 0 24px}

@media (max-width:1023px){
  .top-inner{padding:0 32px; gap:28px}
  .nav{gap:22px}
  .app-main{padding:32px 32px 88px}
  .figures{gap:24px}
}
@media (max-width:999px){
  .wordmark .long{display:none}
  .wordmark .short{display:inline}
  .account .firm{display:none}
}
/* phone: a title bar, the page, bottom tabs */
@media (max-width:759px){
  .top-inner{height:56px; padding:0 6px 0 16px; gap:4px}
  .wordmark,.nav,.account{display:none}
  .top-title{display:block; flex:1 1 auto; min-width:0; font:500 26px/1.15 var(--f-display); font-variant-numeric:lining-nums; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .top-act{display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:none; color:var(--ink)}
  .top-act:empty{display:none}
  /* a view's search (pageHead phoneSearch): an icon left of '+', opening a field over the title */
  .top-find{display:contents}
  .top-find:empty{display:none}
  .top-search{display:none; flex:1 1 auto; align-items:center; gap:8px; min-width:0; height:40px; margin-right:2px; padding:0 0 0 12px; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--surface); color:var(--ink-3)}
  .top-search:focus-within{border-color:var(--ink); box-shadow:0 0 0 3px rgba(19,38,46,.10)}
  .top-search-input{flex:1 1 auto; min-width:0; height:38px; padding:0; border:0; background:none; outline:none; color:var(--ink); font:400 16px/1.3 var(--f-ui)}
  .top-search-input::placeholder{color:var(--ink-3)}
  .top-search-input::-webkit-search-cancel-button{display:none}
  .top-search .top-search-close{width:38px; height:38px; color:var(--ink-2)}
  .top-inner.is-searching .top-title,.top-inner.is-searching .top-find > .top-act,.top-inner.is-searching > .top-act,.top-inner.is-searching .avatar{display:none}
  .top-inner.is-searching .top-search{display:flex}
  .top-act:active{background:rgba(19,38,46,.07)}
  .avatar{display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:none}
  .avatar span{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--sunk); color:var(--ink); font:600 13px/1 var(--f-ui)}
  .avatar[aria-expanded="true"] span{background:var(--ink); color:var(--surface)}
  .app-main{padding:12px 16px calc(60px + env(safe-area-inset-bottom) + 40px)}
  .page-head{margin-bottom:20px; min-height:0}
  .page-head > .page-title{display:none}
  .page-head .page-actions{margin-left:0; width:100%}
  .page-head:not(:has(> :not(.page-title):not(.hide-phone))){display:none}
  .hide-phone{display:none !important}
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    height:calc(60px + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom);
    background:var(--bg); box-shadow:inset 0 1px 0 var(--line); transition:transform .18s ease-out;
  }
  .tab{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; padding:0; border:0; background:none; color:var(--ink-3); font:500 12px/1 var(--f-ui); text-decoration:none; -webkit-tap-highlight-color:transparent}
  .tab[aria-current="page"]{color:var(--ink); font-weight:600}
  .tab .count-pill{position:absolute; top:6px; left:calc(50% + 6px)}
  .tab:active{color:var(--ink)}
  body.has-sheet .tabbar{transform:translateY(110%)}
  .figures{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 20px}
  .figure-val{font-size:40px; line-height:1.05; white-space:normal}
  .figure-val small{font-size:26px}
  .row{padding:0 16px; column-gap:12px}
  .rows-more{padding:0 16px}
  .surface > .empty,.rows > .empty{padding:20px 16px}
  .surface.pad{padding:20px 16px}
  .field-row,.field-row-3{grid-template-columns:minmax(0,1fr)}
  /* touch: 44 px targets; fields at 16 px so iOS does not zoom in on focus */
  .btn{height:44px; padding:0 16px}
  .btn-s{height:36px; padding:0 12px}
  .btn-quiet{padding:0 12px}
  .btn-icon{width:44px; height:44px}
  .btn-icon.btn-s{width:36px; height:36px}
  .input,.select{height:44px; font-size:16px}
  .textarea{font-size:16px}
  .input-s{height:40px}
  .seg > button{height:38px; padding:0 14px}
  .seg-s > button{height:32px; padding:0 12px; font-size:14px}
  .options > button,.check-line,.sec-toggle,.fold-head,.track4 > button{min-height:44px}
  .options > button{font-size:15px}
  .table th,.table td{padding-left:16px; padding-right:16px}
  .sec{margin-top:28px}
  .band{margin-top:40px}
}
@media (min-width:760px){ .show-phone{display:none !important} }

/* ── 11 sheet: the record view ─────────────────────────────────────── */
.backdrop{position:fixed; inset:0; z-index:40; background:rgba(19,38,46,.20); animation:fade-in .18s ease-out}
.backdrop.is-clear{background:transparent; animation:none}
.backdrop.is-out{opacity:0; transition:opacity .14s ease-in}
.sheet{
  position:fixed; top:0; right:0; bottom:0; z-index:41; display:flex; flex-direction:column;
  width:min(880px, calc(100vw - 96px)); background:var(--surface); box-shadow:var(--shadow-2);
  container:sheet / inline-size; animation:sheet-in .18s ease-out; transition:transform .18s ease-out;
}
.sheet:focus{outline:none}
.sheet.is-out{transform:translateX(40px); opacity:0; transition:transform .14s ease-in, opacity .14s ease-in}
.sheet.is-under{transform:translateX(-24px)}
.sheet.is-under::after{content:''; position:absolute; inset:0; z-index:5; background:rgba(19,38,46,.06); animation:fade-in .18s ease-out}
.sheet.is-docked{top:64px; width:840px; z-index:25; box-shadow:-1px 0 0 var(--line), -1px -1px 0 var(--line); animation:dock-in .18s ease-out}
.sheet.is-docked.is-out{transform:translateX(24px)}
.sheet-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column}
.sheet-bar{
  position:sticky; top:0; z-index:3; flex:none; display:flex; align-items:center; gap:2px;
  height:52px; padding:0 14px 0 30px; background:var(--surface); transition:box-shadow .15s ease-out;
}
.sheet-bar.is-scrolled{box-shadow:inset 0 -1px 0 var(--line)}
.sheet-bar .btn-icon{color:var(--ink-2)}
.sheet-bar .sheet-close{margin-right:6px}
.sheet-bar .sheet-nav{display:flex; gap:0}
.sheet-title{flex:1 1 auto; min-width:0; margin-left:10px; font:600 14px/1.3 var(--f-ui); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0; transform:translateY(4px); transition:opacity .15s ease-out, transform .15s ease-out}
.sheet-bar.show-title .sheet-title{opacity:1; transform:none}
.sheet-body{flex:1 0 auto; display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch}
.sheet-main{--px:40px; --pt:12px; min-width:0; padding:var(--pt) var(--px) 48px; container:main / inline-size}
/* the untaken strip: rust-soft, edge to edge of the main column, right under the bar */
.strip{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; background:var(--rust-soft); color:var(--ink); font-size:14px; line-height:1.4}
.strip b{color:var(--rust); font-weight:600}
.sheet-main > .strip:first-child{margin:calc(-1 * var(--pt)) calc(-1 * var(--px)) 28px; padding:8px var(--px)}
.sheet-main > .quiet-line:first-child{margin:0 0 20px; font-size:13px; color:var(--ink-3)}
.sheet-aside{min-width:0; padding:24px; background:var(--bg); display:flex; flex-direction:column; gap:28px}
.sheet-aside:empty{display:none}
.sheet-aside .sec-h{margin-bottom:10px}
.sheet-foot{position:sticky; bottom:0; z-index:3; flex:none; display:flex; gap:8px; align-items:center; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--surface); box-shadow:inset 0 1px 0 var(--line)}
.sheet-foot:empty{display:none}
.sheet-foot > .btn{flex:1 1 0; height:44px}
/* two columns once the sheet is wide: the bar's right part sits on the aside's paper too */
@container sheet (min-width:760px){
  .sheet-body:has(> .sheet-aside:not(:empty)){grid-template-columns:minmax(0,1fr) 280px}
  .sheet:has(.sheet-aside:not(:empty)) .sheet-bar{background:linear-gradient(90deg, var(--surface) calc(100% - 280px), var(--bg) calc(100% - 280px))}
  /* docked (840 px beside the list): a 256 px aside, so the main column keeps 504 px for the seven segments */
  .sheet.is-docked .sheet-body:has(> .sheet-aside:not(:empty)){grid-template-columns:minmax(0,1fr) 256px}
  .sheet.is-docked:has(.sheet-aside:not(:empty)) .sheet-bar{background:linear-gradient(90deg, var(--surface) calc(100% - 256px), var(--bg) calc(100% - 256px))}
}
@container sheet (max-width:759px){
  .sheet-main{--px:24px; padding-bottom:40px}
  .sheet-bar{padding:0 10px 0 14px}
}
/* phone: a full page with a back arrow */
@media (max-width:759px){
  .sheet{width:100vw; box-shadow:none; animation:sheet-in-phone .2s ease-out}
  .sheet.is-under{transform:none}
  .sheet.is-under::after{display:none}
  .sheet.is-out{transform:translateX(30%); opacity:0}
  .backdrop{display:none}
  .sheet-bar{height:52px; padding:0 6px 0 4px}
  .sheet-bar .btn-icon{width:44px; height:44px}
  .sheet-bar .sheet-nav{display:none}
  .sheet-title{margin-left:2px; font-size:15px}
  .sheet-main{--px:16px; --pt:8px; padding-bottom:32px}
  .sheet-aside{padding:20px 16px 32px}
}
@keyframes sheet-in{from{transform:translateX(40px); opacity:0}}
@keyframes sheet-in-phone{from{transform:translateX(30%); opacity:0}}
@keyframes dock-in{from{transform:translateX(24px); opacity:0}}
@keyframes fade-in{from{opacity:0}}
body.is-locked{overflow:hidden}

/* ── 12 dialog ─────────────────────────────────────────────────────── */
.dialog-backdrop{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; overflow-y:auto; background:rgba(19,38,46,.20); animation:fade-in .16s ease-out}
.dialog-backdrop.is-out{opacity:0; transition:opacity .12s ease-in}
.dialog{position:relative; display:flex; flex-direction:column; width:min(520px, 100%); min-width:0; max-height:calc(100vh - 48px); background:var(--surface); border-radius:var(--r-dlg); box-shadow:var(--shadow-2); animation:dialog-in .18s ease-out}
.dialog.is-wide{width:min(720px, 100%)}
.dialog.is-small{width:min(420px, 100%)}
.dialog-head{display:flex; align-items:flex-start; gap:12px; padding:24px 16px 0 28px}
.dialog-title{flex:1 1 auto; min-width:0; padding-top:2px; font:500 26px/1.15 var(--f-display); font-variant-numeric:lining-nums; color:var(--ink)}
.dialog-head .btn-icon{margin-top:-2px}
.dialog-body{display:flex; flex-direction:column; gap:16px; padding:20px 28px 4px; overflow-y:auto; min-height:0; min-width:0}
.dialog-body > *{flex:none}
.dialog-text{font-size:14px; line-height:1.55; color:var(--ink-2)}
.dialog-foot{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:24px 28px 24px}
.dialog-error{margin-right:auto; font-size:13px; line-height:1.4; color:var(--danger)}
.dialog-error:empty{display:none}
.dialog.is-small .dialog-head{padding-right:28px}
@keyframes dialog-in{from{transform:translateY(8px) scale(.985); opacity:0}}
@media (max-width:759px){
  .dialog-backdrop{padding:0; place-items:stretch; background:var(--surface)}
  .dialog,.dialog.is-wide{width:100%; max-height:none; min-height:100%; border-radius:0; box-shadow:none; animation:sheet-in-phone .2s ease-out}
  .dialog-head{padding:14px 6px 0 16px; align-items:center}
  .dialog-body{padding:16px 16px 24px; flex:1 1 auto}
  .dialog-foot{position:sticky; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--surface); box-shadow:inset 0 1px 0 var(--line)}
  .dialog-foot .btn{flex:1 1 0; height:44px}
  .dialog-foot .dialog-error{flex-basis:100%}
  .dialog-foot{flex-wrap:wrap}
  /* a confirm stays a small card in the middle */
  .dialog-backdrop.is-small{padding:16px; place-items:center; background:rgba(19,38,46,.20)}
  .dialog.is-small{min-height:0; border-radius:var(--r-dlg); box-shadow:var(--shadow-2); animation:dialog-in .18s ease-out}
  .dialog.is-small .dialog-head{padding:22px 20px 0}
  .dialog.is-small .dialog-body{padding:12px 20px 0}
  .dialog.is-small .dialog-foot{position:static; padding:20px; box-shadow:none; background:transparent}
}

/* ── 13 popover and menu ───────────────────────────────────────────── */
.popover{position:fixed; z-index:60; min-width:220px; max-width:min(380px, calc(100vw - 16px)); max-height:calc(100vh - 16px); overflow-y:auto; padding:6px; background:var(--surface); border-radius:var(--r-pop); box-shadow:var(--shadow-2); animation:pop-in .14s ease-out}
.popover.is-out{opacity:0; transition:opacity .1s ease-in}
.popover.is-up{animation-name:pop-in-up}
.popover-form{display:flex; flex-direction:column; gap:14px; width:300px; max-width:100%; padding:14px 14px 12px}
.popover-title{font:600 14px/1.4 var(--f-ui); color:var(--ink)}
.popover-text{font-size:13px; line-height:1.5; color:var(--ink-2)}
.popover-actions{display:flex; justify-content:flex-end; gap:8px; padding-top:2px}
.popover-search{padding:4px 4px 6px}
.popover-search .input{height:36px}
.popover-list{display:flex; flex-direction:column; max-height:320px; overflow-y:auto}
.popover-list > *{flex:none}   /* a scrolling list never squeezes its rows */
.popover-empty{padding:12px 10px; font-size:13px; color:var(--ink-3)}
.menu-item{
  display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:6px 10px; margin:0;
  border:0; border-radius:6px; background:none; text-align:left; color:var(--ink); font:400 14px/1.3 var(--f-ui); cursor:pointer;
}
.menu-item:hover:not(:disabled),.menu-item:focus-visible,.menu-item.is-active{background:var(--bg); outline:none}
.menu-item:disabled{color:var(--ink-3); cursor:default}
.menu-item > .icon{color:var(--ink-3)}
.menu-item .menu-label{flex:1 1 auto; min-width:0}
.menu-item .menu-sub{display:block; margin-top:1px; font-size:13px; color:var(--ink-3)}
.menu-item:has(.menu-sub){padding-top:8px; padding-bottom:8px}
.menu-item .menu-hint{margin-left:auto; padding-left:12px; font-size:13px; color:var(--ink-3); white-space:nowrap}
.menu-item .menu-check{margin-left:auto; color:var(--ink)}
.menu-item[aria-checked="true"]{font-weight:600}
.menu-item .menu-nro{flex:none; width:36px; font-weight:600; font-variant-numeric:tabular-nums}
.menu-sep{height:1px; margin:6px -6px; background:var(--line)}
.menu-head{padding:8px 10px 4px; font-size:13px; line-height:1.4; color:var(--ink-3)}
/* a quiet line under a list: "Myydyt: 118, 128, 132" */
.menu-note{padding:8px 10px 6px; font-size:13px; line-height:1.4; color:var(--ink-3)}
/* checkMenu: several on at once — a box before the label, ink when checked */
.menu-item.is-check[aria-checked="true"]{font-weight:400}
.menu-box{flex:none; position:relative; width:18px; height:18px; border:1px solid var(--line-2); border-radius:5px; background:var(--surface); transition:background-color .15s, border-color .15s}
.menu-item.is-check[aria-checked="true"] .menu-box{background:var(--ink); border-color:var(--ink)}
.menu-item.is-check[aria-checked="true"] .menu-box::after{content:''; position:absolute; left:3.5px; top:4px; width:10px; height:6px; border:solid var(--surface); border-width:0 0 1.6px 1.6px; transform:rotate(-45deg)}
.pop-backdrop{position:fixed; inset:0; z-index:59; background:rgba(19,38,46,.20); animation:fade-in .16s ease-out}
@keyframes pop-in{from{transform:translateY(-4px); opacity:0}}
@keyframes pop-in-up{from{transform:translateY(4px); opacity:0}}
@media (max-width:759px){
  /* on a phone a popover is a sheet from the bottom */
  .popover.is-sheet{left:0 !important; right:0; top:auto !important; bottom:0; width:100%; max-width:none; max-height:80vh; padding:8px 8px calc(10px + env(safe-area-inset-bottom)); border-radius:var(--r-dlg) var(--r-dlg) 0 0; animation:sheet-up .2s ease-out}
  .popover.is-sheet::before{content:''; display:block; width:36px; height:4px; margin:2px auto 8px; border-radius:2px; background:var(--line-2)}
  .popover.is-sheet .menu-item{min-height:48px; font-size:15px; padding:8px 12px}
  .popover.is-sheet .popover-form{width:100%; padding:8px 12px 8px}
  .popover.is-sheet .popover-actions .btn{flex:1 1 0; height:44px}
  .popover.is-sheet .popover-list{max-height:none}
  .popover.is-sheet .menu-head{padding:4px 12px 8px}
}
@keyframes sheet-up{from{transform:translateY(40%); opacity:0}}

/* ── 14 toast ──────────────────────────────────────────────────────── */
.toasts{position:fixed; left:0; right:0; bottom:24px; z-index:70; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px}
.toast{pointer-events:auto; display:flex; align-items:center; gap:14px; min-height:44px; max-width:560px; padding:10px 18px; border-radius:var(--r); background:var(--ink); color:var(--surface); box-shadow:var(--shadow-2); font:500 14px/1.4 var(--f-ui); animation:toast-in .18s ease-out}
.toast.has-action{padding-right:8px}
.toast-text{min-width:0}
.toast-action{flex:none; height:30px; padding:0 12px; border:0; border-radius:7px; background:rgba(252,251,249,.12); color:var(--surface); font:600 14px/1 var(--f-ui); cursor:pointer; transition:background-color .15s ease-out}
.toast-action:hover{background:rgba(252,251,249,.2)}
.toast-action:focus-visible{outline-color:var(--surface)}
.toast.is-out{opacity:0; transform:translateY(6px); transition:opacity .15s ease-in, transform .15s ease-in}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)}}
/* with the lead sheet docked, a toast is about what changed in it: centred under the sheet, not across the seam */
body.has-dock .toasts{left:calc(100vw - 840px)}
@media (max-width:759px){
  .toasts{bottom:calc(60px + env(safe-area-inset-bottom) + 12px)}
  body.has-sheet .toasts,body.no-tabs .toasts{bottom:calc(16px + env(safe-area-inset-bottom))}
  body.has-sheet.has-foot .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
  .toast{width:100%}
}

/* ── 15 login ──────────────────────────────────────────────────────── */
.login{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px 16px}
.login-box{display:flex; flex-direction:column; gap:16px; width:min(360px, 100%); margin-top:-8vh}
.login-mark{margin:0 -60px 24px; font:500 44px/1.05 var(--f-display); font-variant-numeric:lining-nums; text-align:center; color:var(--ink); white-space:nowrap}
.login-box .btn{height:40px; margin-top:8px}
.login-error{min-height:20px; font-size:13px; line-height:1.4; color:var(--danger); text-align:center}
@media (max-width:759px){ .login-mark{font-size:36px; margin-bottom:20px} }

/* ── record parts: shared by the lead and apartment sheets ─────────── */
.rec-head{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px 24px}
.rec-lines{display:flex; flex-direction:column; gap:10px; min-width:0}
.rec-lines > .d-36,.rec-lines > .d-56{margin-bottom:2px}
/* the name with one control at its right (the temperature); the lines under it use the full width */
.rec-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-bottom:2px}
.rec-top > :first-child{min-width:0; overflow-wrap:anywhere}
.contact-line{display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; font-size:14px; color:var(--ink)}
.contact-line a{display:inline-flex; align-items:center; gap:6px; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color .15s}
.contact-line a:hover{text-decoration-color:currentColor}
.contact-line a.btn-icon{text-decoration:none; width:30px; height:30px; margin:0 -6px}
.want-line{font-size:15px; font-weight:500; line-height:1.4; color:var(--ink)}
.meta-line{font-size:13px; line-height:1.45; color:var(--ink-3)}
/* rows straight on a sheet: the hover reaches 12 px past the text, the hairline stays on the text column */
.rows-flush > .row{margin:0 -12px; padding:0 12px; border-radius:8px}
.rows-flush > .row + .row{border-top:0}
.rows-flush > .row + .row::before{content:''; position:absolute; top:0; left:12px; right:12px; height:1px; background:var(--line)}
.rows-flush > .row:hover::before,.rows-flush > .row:hover + .row::before{opacity:0}
.rows-flush > .row.is-link:hover,.rows-flush > button.row:hover{background:color-mix(in srgb, var(--surface) 40%, var(--bg))}
/* timeline: comments as paper-tinted blocks, system events as single muted lines */
.timeline{display:flex; flex-direction:column; gap:10px}
.note{padding:12px 16px; border-radius:10px; background:var(--bg)}
.note-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:13px; line-height:1.4}
.note-head b{font-weight:600; color:var(--ink)}
.note-head time{color:var(--ink-3)}
.note-text{margin-top:4px; font-size:15px; line-height:1.5; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.event{display:flex; align-items:baseline; gap:10px; padding:4px 16px; font-size:13px; line-height:1.45; color:var(--ink-3)}
.event::before{content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--ink-4); transform:translateY(-1px)}
.event.has-icon::before{display:none}
.event > .icon{align-self:center; margin:0 -2px 0 -3px; color:var(--ink-3)}
.event time{margin-left:auto; padding-left:12px; white-space:nowrap; font-variant-numeric:tabular-nums}
.composer{position:relative}
.composer .textarea{min-height:76px; padding-right:52px; resize:none; overflow-y:hidden}
.textarea.is-auto{resize:none; overflow-y:hidden}
.composer .composer-send{position:absolute; right:6px; bottom:6px}
.composer-hint{margin-top:6px; font-size:12px; color:var(--ink-3)}
/* a path through the site: "12.04 Asunto 126" */
.path{display:flex; flex-direction:column; gap:5px; font-size:13px; line-height:1.4; color:var(--ink)}
.path > li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px}
.path time{color:var(--ink-3); font-variant-numeric:tabular-nums}
.path .is-click{color:var(--ink-2)}
.path .is-contact{color:var(--ink); font-weight:600}   /* rust for contacts stays in Kävijät's traffic (.kv-sess-path) */

/* ── boot: nothing but paper until the shell is ready ──────────────── */
.boot{min-height:100vh}
.app-error{max-width:520px; margin:20vh auto 0; padding:0 24px}

/* ── 16 kit (#/kit): the component showcase only ───────────────────── */
.kit-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 48px}
.kit-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.kit-col{display:flex; flex-direction:column; gap:16px; min-width:0}
.kit-note{font-size:13px; color:var(--ink-3)}
.kit-type{display:grid; grid-template-columns:120px minmax(0,1fr); align-items:baseline; gap:12px 24px}
.kit-icons{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:4px}
.kit-icons > div{display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 8px 12px; border-radius:8px; color:var(--ink); font-size:12px}
.kit-icons > div span{color:var(--ink-3)}
.kit-aside{padding:24px; background:var(--bg); border-radius:var(--r)}
.kit-phone{width:342px; max-width:100%}
.kit-new{grid-template-columns:minmax(220px,1.2fr) minmax(0,1.6fr) 168px 92px}
.kit-work{grid-template-columns:16px minmax(240px,2fr) minmax(140px,1fr) 150px 160px 72px}
.kit-new-p{grid-template-columns:minmax(0,1fr) auto}
.kit-work-p{grid-template-columns:16px minmax(0,1fr)}
/* a linked home in the lead sheet: nro, facts, state, ⋯ — and the four-step track under the facts */
.kit-home{display:grid; grid-template-columns:64px 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}
.kit-home + .kit-home{border-top:1px solid var(--line)}
.kh-nro{grid-area:nro} .kh-line{grid-area:line} .kh-state{grid-area:state; justify-self:end} .kh-more{grid-area:more; align-self:center} .kh-track{grid-area:track; max-width:440px}
@container (max-width:460px){
  .kit-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}
  .kh-track{max-width:none; margin-top:10px}
}
@media (max-width:759px){
  .kit-grid{grid-template-columns:minmax(0,1fr)}
  .kit-type{grid-template-columns:96px minmax(0,1fr); gap:10px 16px}
}

/* fingers: small controls keep their look but get a larger hit area */
@media (pointer:coarse){
  .btn-s,.seg-s > button,.chip > button,.toast-action{position:relative}
  .btn-s::after,.seg-s > button::after,.chip > button::after,.toast-action::after{content:''; position:absolute; inset:-7px -2px}
}

/* motion: none for those who ask */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s !important; animation-iteration-count:1 !important; transition-duration:0s !important; scroll-behavior:auto !important}
}