/* Attention page-owned presentation. */

.attention-page .attention-toolbar{gap:14px;height:44px;min-height:44px;box-sizing:border-box;border-bottom-color:rgba(60,60,67,.08)}
.attention-page .mock-tabs{gap:20px}
.attention-page .attention-box{border-color:rgba(60,60,67,.10);border-radius:12px;box-shadow:none;overflow:hidden}
.attention-page .attention-row:not(.history-row){grid-template-columns:minmax(220px,1.04fr) minmax(280px,1.56fr) minmax(96px,.52fr) 20px;gap:11px;padding:12px 14px;border-bottom-color:rgba(60,60,67,.08)}
.attention-page .attention-row:hover{background:#fafafa}
.attention-page .att-product-cell{gap:9px}
.attention-page .att-thumb{width:50px;height:32px;border-color:rgba(60,60,67,.08);background:#fafafa}
.attention-page .att-time{background:transparent;border:0;padding:0;box-shadow:none}
.attention-page .attention-expanded{padding:15px 14px;background:#fafafa;border-bottom-color:rgba(60,60,67,.08)}
.attention-page .attention-expanded-inner{gap:18px}
.attention-page .key-card{margin-top:12px;background:transparent;border-radius:0;border-top:1px solid rgba(60,60,67,.10);padding:10px 0 0}
.attention-page .checklist{gap:3px}
.attention-page .check{padding:6px 0;border-radius:0;background:transparent}
.attention-page .attention-actions{margin-top:12px}
.history-attention-box .attention-row.history-row{grid-template-columns:minmax(220px,1.04fr) minmax(270px,1.38fr) 112px 88px 20px;gap:11px;padding:12px 14px;border-bottom-color:rgba(60,60,67,.08)}
.history-attention-box .history-status{padding:4px 7px}

@media(max-width:780px){
  .attention-page .attention-toolbar{gap:10px}
  .attention-page .attention-row:not(.history-row){grid-template-columns:minmax(0,1fr) auto 18px;gap:8px;padding:12px 10px}
  .attention-page .att-thumb{width:46px;height:30px}
  .history-attention-box .attention-row.history-row{grid-template-columns:minmax(0,1fr) auto 18px;gap:8px;padding:12px 10px}
  .attention-page .attention-expanded{padding:14px 12px}
}
@media(max-width:520px){
  .attention-page .attention-toolbar{gap:8px}
  .attention-page .attention-row:not(.history-row),
  .history-attention-box .attention-row.history-row{padding-left:9px;padding-right:9px}
}


/* Attention history event layout only.
   Typography and text colors remain owned by ui-typography.css. */

.history-attention-box .attention-row.history-row{
  grid-template-columns:minmax(220px,1.18fr) minmax(250px,1.28fr) 128px 96px 24px;
  align-items:center;
}
.history-attention-box .history-row .att-time{
  justify-self:start;
  text-align:left;
  padding:0;
  border:0;
  background:transparent;
  min-width:0;
}
.history-attention-box .history-row .history-status{
  justify-self:start;
  white-space:nowrap;
}
.history-attention-box .history-row .att-action-cell small[data-nb-period]{
  margin-top:3px;
}
.nb-history-event-meta{
  display:grid;
  gap:7px;
  margin-top:12px;
}
.nb-history-event-meta>div{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  align-items:baseline;
  gap:10px;
}
.nb-history-event-meta strong{
  min-width:0;
}
.nb-history-extra .att-thumb>span{
  display:block;
}

@media(max-width:780px){
  .history-attention-box .attention-row.history-row{
    grid-template-columns:minmax(0,1fr) auto 18px;
  }
  .history-attention-box .history-row .att-product-cell{grid-column:1;grid-row:1}
  .history-attention-box .history-row .att-action-cell{grid-column:1;grid-row:2}
  .history-attention-box .history-row .att-time{grid-column:2;grid-row:1;justify-self:end}
  .history-attention-box .history-row .history-status{grid-column:2;grid-row:2;justify-self:end}
  .history-attention-box .history-row .chev{grid-column:3;grid-row:1/3}
}

@media(max-width:520px){
  .nb-history-event-meta>div{grid-template-columns:74px minmax(0,1fr)}
}