/* =====================================================================
   feedback.css — stat tiles, inline notices, empty states, progress.
   ===================================================================== */

/* -- Stat tiles ------------------------------------------------------ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.stat {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.stat__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}
.stat__value {
    margin-top: 6px;
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.028em;
    font-variant-numeric: tabular-nums;
}
.stat__meta { margin-top: 4px; font-size: var(--fs-sm); color: var(--c-ink-3); }

.stat__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    font-size: 19px;
    background: var(--c-sunken);
    color: var(--c-ink-2);
}
.stat__icon--brand { background: var(--c-brand-tint); color: var(--c-brand); }
.stat__icon--warn  { background: var(--c-warn-tint);  color: var(--c-warn); }
.stat__icon--info  { background: var(--c-info-tint);  color: var(--c-info); }
.stat__icon--bad   { background: var(--c-bad-tint);   color: var(--c-bad); }
.stat__icon--lg    { width: 52px; height: 52px; font-size: 23px; }

/* -- Compact tiles ---------------------------------------------------
   For a screen where the numbers are context rather than the subject.
   On Generate Bill the table is the work and the tiles only say how much
   of it there is, so they should not take a third of the fold to do it. */
.stat-grid--sm {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.stat-grid--sm .stat        { padding: 12px 14px; gap: 8px; align-items: center; }
.stat-grid--sm .stat__value { margin-top: 2px; font-size: var(--fs-xl); }
.stat-grid--sm .stat__meta  { margin-top: 1px; font-size: var(--fs-xs); }
.stat-grid--sm .stat__icon  { width: 32px; height: 32px; font-size: 15px; }

/* -- Inline notice ---------------------------------------------------
   For a message that belongs on the page rather than in a toast. */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    line-height: 1.5;
}
.notice i { flex-shrink: 0; margin-top: 1px; font-size: 16px; }
.notice__title { display: block; font-weight: 600; margin-bottom: 2px; }

.notice--ok   { background: var(--c-ok-tint);   border-color: var(--c-ok-line);   color: #0c5b3c; }
.notice--warn { background: var(--c-warn-tint); border-color: var(--c-warn-line); color: #7c4906; }
.notice--bad  { background: var(--c-bad-tint);  border-color: var(--c-bad-line);  color: #8d221a; }
.notice--info { background: var(--c-info-tint); border-color: #cfe0ee;            color: #17497a; }

/* -- Empty state ----------------------------------------------------- */
.empty { padding: 54px 24px; text-align: center; color: var(--c-ink-3); }
.empty--sm { padding: 34px 20px; }

.empty__icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 13px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-sunken);
    color: var(--c-ink-3);
    font-size: 20px;
}
.empty__title { margin-bottom: 4px; font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.empty__text  { max-width: 44ch; margin: 0 auto; font-size: var(--fs-md); }

/* -- Meter -----------------------------------------------------------
   Width comes from --value on the element, so the view sets one custom
   property instead of writing a style attribute. */
.meter {
    height: 6px;
    background: var(--c-sunken);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.meter__fill {
    height: 100%;
    width: var(--value, 0%);
    border-radius: var(--radius-pill);
    background: var(--c-brand);
    transition: width var(--t-slow) var(--ease-out);
}

.meter-row + .meter-row { margin-top: 14px; }
.meter-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: var(--fs-md);
}