/* Commercial section: Details to add (pages/toadd.js). Classes start with .xta.
 * A filter card, then one card per project with one row per step that still needs something. */

/* Filters: search and two pickers on one line, stacked on a phone; the count under them */
.xta-tools{min-width:0}
.xta-band{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:12px 16px;padding:12px 16px;min-width:0}
.xta-fg{display:flex;flex-direction:column;gap:8px;min-width:0}
.xta-lb{font-size:12px;font-weight:500;line-height:16px;color:#5E6B7D}
.xta-tools .search-inp{flex:none;min-width:0}
.xta-tools .sel{width:100%;min-width:0}
.xta-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:44px;padding:6px 16px;border-top:1px solid #EEF1F4;background:#FAFBFC;border-radius:0 0 11px 11px}
.xta-n{font-size:13px;font-weight:500;color:#3B4758;white-space:nowrap}

/* The list: one card per project */
.xta-list{display:flex;flex-direction:column;gap:16px;min-width:0}
.xta-p{min-width:0;overflow:hidden}
.xta-hd{display:flex;flex-direction:column;gap:4px;padding:12px 16px 12px;border-bottom:1px solid #EEF1F4;min-width:0}
.xta-ttl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.xta-name{font-size:14px;font-weight:600;color:#0E1726;text-decoration:none;overflow-wrap:anywhere;min-width:0}
.xta-name:hover{text-decoration:underline}
.xta-sub{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:12px;color:#5E6B7D;overflow-wrap:anywhere;min-width:0}
.xta-sub strong{font-weight:500;color:#7A4E00}

/* A step: its stage, what is missing, Add details */
.xta-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xta-st{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:12px 16px;min-width:0}
.xta-st + .xta-st{border-top:1px solid #EEF1F4}
.xta-ph{--c:#2a78d6;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#3B4758;min-width:0;overflow-wrap:anywhere}
.xta-dot{width:9px;height:9px;flex:0 0 9px;border-radius:3px;background:var(--c)}
.xta-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.xta-t{font-size:13px;font-weight:500;color:#0E1726;overflow-wrap:anywhere}
.xta-m{font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xta-add{white-space:nowrap}

/* What else was not recorded: optional, so quiet */
.xta-also{margin:0;padding:8px 16px 12px;border-top:1px dashed #E3E7EC;font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.xta-also span{color:#5E6B7D;font-weight:500}

@media (max-width:760px){
  .xta-band{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 16px}
  .xta-fq{grid-column:1/-1}
  .xta-foot{padding:6px 16px}
  .xta-hd{padding:12px 16px 8px}
  .xta-st{grid-template-columns:minmax(0,1fr);padding:12px 16px}
  .xta-add{justify-self:start}
  .xta-also{padding:8px 16px 12px}
}
@media (max-width:360px){
  .xta-band{grid-template-columns:minmax(0,1fr)}
}