/* The gallery also lives in narrow deal drawers on wide desktop screens. */
.fv-list{container-type:inline-size}
@container (max-width:760px){
  .fv-list .fv-row{grid-template-columns:44px minmax(0,1fr) 40px;align-items:center}
  .fv-list .fv-col-status,.fv-list .fv-col-size,.fv-list .fv-col-date{display:none}
  .fv-list .fv-main{min-width:0}
  .fv-list .fv-name{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
  .fv-list .fv-in-main,.fv-list .fv-sub{display:block}
  .fv-list .fv-in-main{margin-top:8px}
}

/* Embedded attachments follow their content, rather than reserving a 40vh
   desktop selection canvas. Keep the disk gallery and its selection intact. */
.crm-deal-files .crm-folder-gallery,
.crm-deal-files .fv-area{min-height:0!important}
.crm-deal-files .crm-folder-gallery:has(>.crm-folder-empty){
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
}
.crm-deal-files .crm-folder-gallery:has(>.crm-folder-empty)>.crm-folder-tools{
  order:2;margin:0!important;margin-left:auto!important;
}
.crm-deal-files .crm-folder-empty{order:1;flex:1;min-width:120px}
.crm-deal-files .crm-folder-gallery>[role=alert],
.crm-deal-files .crm-folder-gallery>[role=status]{flex-basis:100%;order:3}
.crm-deal-files .crm-folder-tools{flex-wrap:wrap}
.crm-deal-files .sc-h{flex-wrap:wrap}
.crm-deal-files .sc-h>a{margin-left:auto;white-space:normal}
.crm-deal-files .fv-large{grid-template-columns:repeat(auto-fill,minmax(0,min(100%,max(200px,calc(var(--text-sm) * 16)))))}
.crm-deal-files .fv-medium{grid-template-columns:repeat(auto-fill,minmax(0,min(100%,max(144px,calc(var(--text-sm) * 11.52)))))}
.crm-deal-files .fv-small{grid-template-columns:repeat(auto-fill,minmax(0,min(100%,92px)))}
.crm-deal-files .fv-large .fv-pic{aspect-ratio:16/9}
.crm-deal-files .fv-medium .fv-pic{aspect-ratio:4/3}
/* Captions grow naturally at large personal text sizes instead of covering
   the thumbnail or hiding the label selector. Small tiles retain their view. */
.crm-deal-files :is(.fv-large,.fv-medium) .fv-over .fv-cap{
  position:static;inset:auto;min-width:0;padding:8px 10px;
  background:var(--surface);color:var(--ink);box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:auto;
}
.crm-deal-files :is(.fv-large,.fv-medium) .fv-over .fv-name{
  font-size:var(--text-sm);-webkit-line-clamp:2;
}
.crm-deal-files :is(.fv-large,.fv-medium) .fv-over .fv-meta{
  color:var(--muted);white-space:normal;overflow-wrap:anywhere;
}
.crm-deal-files :is(.fv-large,.fv-medium) .fv-over .fv-extra .sel-trigger{
  border-color:var(--line-strong);color:var(--muted);
}
.crm-deal-files :is(.fv-large,.fv-medium) .fv-over .fv-ok{
  position:static;background:var(--accent-wash);color:var(--accent);box-shadow:none;
}
.crm-deal-files :is(.fv-large,.fv-medium) .fv-over .fv-ok[data-on]{
  background:var(--accent);color:var(--accent-ink);
}

/* Related work follows one reading order and the same column edges. */
.crm-deal-blocks{margin-top:12px}
.crm-deal-blocks>.sgrid{--crm-block-min:max(280px,calc(var(--text-sm) * 22.4));grid-template-columns:repeat(auto-fit,minmax(min(100%,max(calc((100% - 10px)/2),var(--crm-block-min))),1fr));gap:10px;align-items:start}
.crm-deal-blocks>.sgrid>.sblock{margin-top:0}
.crm-deal-blocks>.sgrid>.sc{min-width:0}
.crm-deal-blocks .sc-empty{min-height:52px;padding:10px 12px;gap:10px;border-radius:var(--r-md);line-height:1.35}
.crm-deal-blocks .sc-pl{width:28px;height:28px;border-radius:7px}
.crm-deal-blocks .sc-pl svg{width:16px;height:16px}
.crm-deal-blocks .sc-empty-tx{flex:1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px 10px;overflow-wrap:anywhere}
.crm-deal-blocks .sc-empty-tx small{margin-left:auto;font-size:var(--text-xs)}
.crm-deal-blocks .sc-h{padding:0 8px 0 12px;min-height:44px;flex-wrap:wrap}
.crm-deal-blocks .sc-t{overflow-wrap:anywhere}
.crm-deal-blocks .sc-plus{width:44px;height:44px;flex:none}
.crm-deal-blocks .vrow{padding:8px 12px;gap:10px}
.crm-deal-blocks .vrow-l1{flex-wrap:wrap;gap:4px 8px}
.crm-deal-blocks .vrow-team{white-space:normal;overflow-wrap:anywhere}
.crm-deal-blocks :is(.sc-empty,.sc-plus,.vrow):focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

/* A narrow desktop drawer needs the same title space as a phone sheet. */
[data-slideover]:has(.crm-deal-heading){container:crm-deal-card / inline-size}
header:has(.crm-deal-heading){align-items:center!important;column-gap:8px!important;row-gap:8px!important}
header:has(.crm-deal-heading)>button{min-width:44px;min-height:44px;height:44px!important;flex-shrink:0}
header:has(.crm-deal-heading)>button[aria-label="Закрыть"]{width:44px!important}
.crm-deal-heading{width:100%;min-width:0;flex-wrap:wrap;row-gap:2px!important}
.crm-deal-heading>.tnum{white-space:nowrap}
.crm-deal-heading>span:last-child{flex:1 1 16ch!important;overflow-wrap:anywhere}
.crm-deal-heading [aria-label="Править название сделки"]{align-items:baseline!important;padding:2px 0!important}
.crm-deal-heading [aria-label="Править название сделки"]>span:first-child{min-width:0;word-break:normal}
.crm-deal-heading [aria-label="Править название сделки"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.crm-deal-edit-content{display:inline-flex;align-items:center;gap:6px}
.crm-deal-edit-icon{display:none}
@container crm-deal-card (max-width:620px){
  header:has(.crm-deal-heading)>button{width:44px;padding:0!important}
  header:has(.crm-deal-heading) :is(.crm-deal-archive-label,.crm-deal-archive-short){display:none!important}
  .crm-deal-edit-icon{display:inline-flex}
  .crm-deal-edit-label{display:none}
}