/* Refill app on the TAN design (tan/tokens.css + tan/tan.css, copied verbatim
   from the tan-design skill, v11.2). Only what a shop scanner needs on top:
   thumb-size controls and the task card. Every colour is a design token. */

.rf-bar__title {
  font-family: var(--font-brand); font-size: 15px; line-height: 20px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.rf-bar__live { margin-left: auto; flex: none; }

.rf-page { max-width: 640px; }
.rf-meta { font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rf-nav { display: flex; flex-wrap: wrap; margin: var(--space-1) calc(-1 * var(--space-2)) 0; }
.rf-nav .tan-btn { height: 40px; padding: 0 var(--space-2); }
.rf-top { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }

/* Section head stays one line on a scanner: title left, count right */
.rf-head.tan-section__head { flex-direction: row; align-items: center; }

/* Thumb-size control: the design's button, taller */
.rf-btn.tan-btn { height: 56px; padding: 0 var(--space-5); font-size: 16px; min-width: 116px; border-radius: var(--radius-md); }
.rf-btn .tan-btn__glyph { font-size: 17px; }

/* Task card */
.rf-card { padding: var(--space-3); margin-bottom: var(--space-3); }
.rf-pack {
  display: block; width: 100%; height: 200px; object-fit: contain;
  background: #ffffff; border-radius: var(--radius-sm); border: 1px solid var(--hairline);
}
.rf-pack--none {
  height: 96px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-well); color: var(--ink-2); font-size: 13px;
}
.rf-code.tan-code {
  display: block; text-align: center; font-size: 24px; line-height: 30px; font-weight: 700;
  white-space: normal; overflow-wrap: anywhere; margin: var(--space-3) 0 var(--space-2);
}
.rf-row { display: flex; align-items: center; gap: var(--space-3); }
.rf-info { flex: 1 1 auto; min-width: 0; }
.rf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rf-tags .tan-code--chip { font-size: 15px; line-height: 22px; font-weight: 700; padding: 0 8px; }
.rf-tags .tan-badge { height: 24px; font-size: 13px; }
.rf-stock { font-family: var(--font-brand); font-size: 20px; line-height: 26px; font-weight: 700; margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.rf-what { font-size: 14px; line-height: 20px; color: var(--ink-2); margin-top: var(--space-1); }
.rf-nf { display: block; margin: var(--space-3) 0 0 auto; padding: var(--space-2) 0; font-size: 14px; color: var(--ink-2); }
.rf-empty { color: var(--ink-2); font-size: 14px; padding: var(--space-2) 0 var(--space-3); }

/* Shop picker: covers the screen until a shop is chosen */
.rf-picker {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--bg-page);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-6); text-align: center;
}
.rf-picker__list { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 320px; margin-top: var(--space-5); }

/* Help page */
.rf-help p, .rf-help li { font-size: 15px; line-height: 23px; }
.rf-help .tan-card { margin: var(--space-3) 0; font-size: 15px; line-height: 23px; }
.rf-help .tan-card .tan-h2 { margin-bottom: var(--space-1); }
.rf-help ul { padding-left: var(--space-5); }
.rf-help dl { margin: 0; }
.rf-help dt { font-weight: 600; margin-top: var(--space-3); }
.rf-help dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 23px; }