/* Your list (/my-list/) in the Deck design (v2 list page): one row per kept name, then the
   surname, the sisters check and the side-by-side table. Tokens, the collapsed name (.nt), the
   strip and "Show all" are site.css's. Logical properties (Arabic). */
.listpage{min-width:0}
.list-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.list-head h1{display:flex;align-items:center;gap:10px}
.list-dev{margin-top:4px}
.list-sur{width:260px;max-width:100%}
.list-msg{margin-top:24px;font-size:var(--t3)}
.list-acts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px}

/* the rows */
.krows{list-style:none;margin-top:16px;display:grid;gap:12px}
.krow{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:16px}
@media (min-width:760px){.krow{grid-template-columns:260px minmax(0,1fr);gap:32px}}
@media (max-width:479px){.krow{padding:16px}}
.krow .name{font-size:clamp(32px,6vw,48px);margin:0;padding-inline-end:40px}
.krow .rm{position:absolute;inset-inline-end:12px;top:12px}
.krow .sent{margin-top:0}
@media (min-width:760px){.krow .sent{padding-inline-end:32px;align-self:center}}
.krow-more{grid-column:1/-1;display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
@media (min-width:760px){.krow-more{grid-template-columns:260px minmax(0,1fr);gap:32px}}
.krow-more .mean{margin-top:4px}
.krow-more .hn{margin-top:0}
.krow-more .nrow-go{margin-top:12px;font-size:var(--t2)}
.krow-x .sent{font-size:var(--t2)}

/* with the surname, together as sisters */
.tog{list-style:none}
.tog li{padding:12px 0;border-bottom:1px solid var(--line)}
.full{font-size:var(--t1);color:var(--ink2)}
.full b{display:block;font:600 var(--t3)/1.3 var(--display);color:var(--ink)}

/* side by side */
.sidet{min-width:420px}
.sidet th:first-child{position:sticky;inset-inline-start:0;background:var(--ground);z-index:1;min-width:150px}
.sidet td{white-space:nowrap}
.sidet thead th.num{font:600 var(--t3)/1.2 var(--display);text-transform:none;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:559px){
 .sidet{min-width:0;font-size:var(--t1)}
 .sidet th:first-child{min-width:0;width:34%}
 .sidet td{padding-inline-end:8px}
 .sidet td .sw{width:8px;height:8px;margin-inline-end:4px;vertical-align:0}
 .sidet thead th.num{font-size:var(--t2)}
}