/* ───── Tunables ───── */
:root{
  --row-pad:      .375rem .75rem;
  --row-gap:      .125rem;
  --row-radius:   .375rem;
  --row-border:   .25rem;

  --row-bg:        #ffffff;
  --row-bg-hover:  #f7fafe;
  --row-shadow-h:  0 1px 4px rgba(0,0,0,.05);

  --row-separator: #e5e7eb;          /* subtle line between rows */
}

/* ───── Row container  ───── */
.row{
  margin-top: 0.25rem;                           /* separation handled by line below */
  padding:var(--row-pad);

  display:flex;
  flex-direction:column;
  gap:var(--row-gap);

  background:var(--row-bg);
  border-radius:var(--row-radius);
  box-sizing:border-box;

  transition:background-color .15s ease,box-shadow .15s ease;
  box-shadow:var(--row-shadow-h);
  border-inline-start:var(--row-border) solid transparent;
  border-inline-end:var(--row-border) solid transparent;
  border-block-start:var(--row-border) solid transparent;
  border-block-end:var(--row-border) solid transparent;
  border-radius:var(--row-radius);
  color:var(--fg-row);

}
/* separator between rows */
.row:not(:last-child){border-bottom:1px solid var(--row-separator);}

.row:hover{
  background:var(--row-bg-hover);
  box-shadow:var(--row-shadow-h);
}

/* ───── Header ───── */
.row-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--row-gap);
  font:600 1rem/1.4 var(--font-family,system-ui);
  color:var(--fg-header);
}
.row-actions{display:flex;gap:.25rem;align-items:center;}

/* ───── Cells ───── */
.row .label{
    flex: 0 1 85%;   /* occupy up to 60 % of the row */
    max-width: 85%;
    white-space: normal;   /* keep wrapping */
}
.row .amount {flex:0 0 6rem; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.row .page,
.row .refine{cursor:pointer;color:var(--fg-link);text-decoration:underline;}
.row .refine_text{margin-top:.1rem;font-weight:400;cursor:pointer;}

.row .value {font-size:1.05rem; white-space:normal; }
.row .name, 
.row .aspect{font-size:0.95rem; white-space:normal; font-weight: bold; color:#6f6f6f;} 

/* ───── Status variants  ───── */
.row.success  {border-inline-start:var(--row-border) solid forestgreen;}
.row.critical {border-inline-start:var(--row-border) solid lightcoral;}
.row.warning  {border-inline-start:var(--row-border) solid yellowgreen;}
.row.default  {border-inline-start:var(--row-border) solid var(--primary-color-light);}

/* ───── Card separation ───── */
.row{
  margin:.4rem 0;                              /* space between cards    */
  border-radius:.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,.06);        /* soft lift             */
}
/* optional: keep hover lift subtle */
.row:hover{box-shadow:0 2px 6px rgba(0,0,0,.08);}


.additional-info,
.explanation {
    font-size: 0.95rem;
    color: var(--text-muted, #6b7280);
}


.explanation.strong {
    font-size: 0.95rem;
    font-weight: bold;
}