/* Desktop workspace: the page stays fixed; lists scroll inside their panels. */
html,body{height:100%;overflow:hidden}
body{min-width:1200px}
header{height:54px;padding:0 20px;gap:16px}
header h1{font-size:26px}
main{height:calc(100dvh - 54px);max-width:none;padding:0 12px 10px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;position:relative}
.contract-bar{grid-row:1;min-height:62px;padding:8px 10px;gap:22px;flex-wrap:nowrap}
#search{gap:12px;flex-shrink:0}
#search label{font-size:16px}
.search-input{width:clamp(190px,18vw,298px)}
.search-input select{height:42px;font-size:17px}
#search .primary{min-width:110px;padding:10px 18px}
.identity{gap:12px;padding-left:22px;min-width:0}
.identity h2{font-size:clamp(19px,1.6vw,25px)}
.badge{font-size:16px;padding:7px 16px}
.since{font-size:14px;padding-left:14px}
#search-error{position:absolute;z-index:2;top:56px;left:10px;right:10px;margin:0;box-shadow:0 3px 12px #233b5a22}
.contact-strip{grid-row:2;min-height:62px;margin:0;padding:9px 16px;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.contact-item{gap:12px;padding:0 16px}
.contact-item>div{min-width:0}
.contact-item p{font-size:14px}
.contact-item strong{font-size:15px;margin-bottom:4px}
.contact-item .icon{width:42px;height:42px}
.cards{grid-row:3;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{height:100%;min-height:0;padding:14px 17px 12px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b9c1d0 #eef3f6}
.card h2{font-size:clamp(20px,1.65vw,25px);margin-bottom:12px;flex-shrink:0}
.card>.scroll{flex:1;min-height:0}
.card>.link{flex-shrink:0;font-size:16px;margin-top:8px}
.counts{flex-shrink:0;margin:0 0 8px;gap:10px}
.pill{font-size:16px;padding:6px 15px}
.person{padding:7px 0 12px;gap:12px;margin-bottom:6px}
.person .icon{width:52px;height:52px}
.person p{font-size:14px;line-height:1.4}
.person strong{font-size:16px;margin-bottom:5px}
.claim{padding:10px 0;gap:10px}
.claim .link{font-size:16px}
.claim .icon{height:40px;width:40px}
.claim small{margin-top:5px}
.status{font-size:12px;padding:5px 8px}
.document{gap:14px;padding:7px 0 13px;margin-bottom:8px}
.document .icon{width:46px;height:46px}
.document button{font-size:16px}
.document p{font-size:14px;margin-top:7px}
#balance{min-height:0;overflow:auto;scrollbar-width:thin}
.balance-state{min-height:50px;font-size:22px;gap:15px;margin:0 0 12px}
.balance-state .icon{width:54px;height:54px;font-size:38px}
.account-row{padding:11px 0;font-size:16px}
.telephone{grid-row:4;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);margin:0;padding:12px 17px;min-height:0;gap:0}
.history{display:flex;flex-direction:column;padding-right:20px;min-height:0;overflow:hidden}
.history-title{gap:10px;margin-bottom:8px}
.history-title h2{font-size:22px}
.history-title>span:last-child{font-size:13px}
.telephone h3{font-size:18px;margin-bottom:7px}
.table-heading{padding:7px 12px;font-size:14px;grid-template-columns:30% 70%;flex-shrink:0}
.call-list{height:0;flex:1;min-height:100px}
.call{grid-template-columns:30% 70%;padding:8px 12px;font-size:14px}
.call>div{min-width:0}
.call strong{overflow-wrap:anywhere}
.stars{font-size:22px}
#new-contact{border-top:0;border-left:1px solid #aab8e7;margin:0;padding:0 0 0 20px}
.form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
#new-contact label{font-size:14px}
#new-contact select,#new-contact input{padding:6px 9px;height:32px}
.note-label{margin-top:6px}
#new-contact textarea{height:48px;min-height:48px;max-height:48px;resize:none;padding:6px 9px;font-size:14px;line-height:1.3}
.counter{font-size:12px;margin-top:4px}
#new-contact fieldset{margin-top:6px;gap:0}
#new-contact legend{font-size:14px;padding:3px 15px 0 0}
#new-contact .rating{gap:8px}
#new-contact .rating label{font-size:25px}
#new-contact .rating input{height:25px;width:24px;padding:0}
.form-footer{margin-top:6px;align-items:center;flex-wrap:nowrap}
.form-footer>span:first-child{font-size:13px}
.form-footer .primary{padding:9px 17px;font-size:16px}
#other-label{margin-top:6px}
#other-label:not([hidden]){display:flex;align-items:center;gap:10px}
#other-label input{flex:1;width:auto;min-width:0}
dialog{max-height:calc(100dvh - 40px);overflow:auto}
@media(min-height:900px){
 .telephone{min-height:310px;padding:18px 22px}
 .card{padding:20px 22px 16px}
 .person{padding-bottom:18px}
 .claim{padding:14px 0}
 #new-contact textarea{height:66px;min-height:66px;max-height:66px}
 .note-label{margin-top:10px}
 .form-footer{margin-top:12px}
}

main{grid-template-rows:auto auto minmax(0,1fr) minmax(0,1fr)}
.telephone,.telephone:has(#other-label:not([hidden])){height:100%;min-height:0}
.telephone{container-type:size}
@container(max-height:290px){
 #new-contact h3{font-size:16px;line-height:18px;margin-bottom:3px}
 #new-contact label{font-size:13px;line-height:14px}
 #new-contact select,#new-contact input{height:26px;padding:3px 7px;margin-top:2px}
 #new-contact .note-label{margin-top:3px}
 #new-contact textarea{height:32px;min-height:32px;max-height:32px;margin-top:2px;padding:3px 7px}
 #new-contact .counter{margin-top:2px;font-size:11px;line-height:12px}
 #new-contact fieldset{margin-top:3px}
 #new-contact legend{font-size:13px;padding-top:2px}
 #new-contact .rating label{font-size:21px;line-height:22px}
 #new-contact .rating input{height:22px}
 #new-contact .form-footer{margin-top:3px}
 #new-contact .form-footer .primary{padding:5px 12px;font-size:14px}
 #new-contact #other-label{margin-top:3px}
}