/* Shared pieces of the UI refresh (paniware-docs 08 section 3, D-181): icon badges, initials
   avatars, status pills, stat tiles, section headings, empty states and charts. Every screen
   uses these through UiHelper and ChartHelper. Colours come from theme_tokens.css only;
   logical properties keep Urdu (RTL) mirrored. */

/* ---- Tints: a soft background with the strong colour on top ------------------- */

.app-tint--blue   { background: var(--app-blue-lt);   color: var(--app-blue); }
.app-tint--green  { background: var(--app-green-lt);  color: var(--app-green); }
.app-tint--red    { background: var(--app-red-lt);    color: var(--app-red); }
.app-tint--amber  { background: var(--app-amber-lt);  color: var(--app-amber); }
.app-tint--cyan   { background: var(--app-cyan-lt);   color: var(--app-cyan); }
.app-tint--violet { background: var(--app-violet-lt); color: var(--app-violet); }
.app-tint--pink   { background: var(--app-pink-lt);   color: var(--app-pink); }
.app-tint--gray   { background: var(--app-gray-lt);   color: var(--app-gray); }
.app-tint--solid  { background: var(--app-primary);   color: var(--app-on-primary); }

/* ---- Icon badge --------------------------------------------------------------- */

.app-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  font-size: 21px;
  line-height: 1;
}
.app-icon .ti { line-height: 1; }
.app-icon--sm { inline-size: 32px; block-size: 32px; border-radius: 10px; font-size: 17px; }
.app-icon--lg { inline-size: 54px; block-size: 54px; border-radius: 17px; font-size: 25px; box-shadow: var(--app-shadow-card); }

/* ---- Initials avatar ---------------------------------------------------------- */

.app-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
}
.app-avatar--sm { inline-size: 34px; block-size: 34px; font-size: 12.5px; }
.app-avatar--lg { inline-size: 76px; block-size: 76px; font-size: 28px; }
.app-avatar--square { border-radius: 14px; font-size: 20px; }

/* ---- Status pill: a dot and a word, the colour says the state ------------------- */

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.app-pill.app-tint--gray { background: var(--app-pill-idle-bg); color: var(--app-pill-idle); }
.app-pill::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Stat tile ---------------------------------------------------------------- */

.app-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}
a.app-stat:hover { color: inherit; }
.app-stat__label { display: block; font-size: 12px; color: var(--app-text-secondary); line-height: 1.3; }
.app-stat > span:last-child { min-inline-size: 0; }
.app-stat__value { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .app-stat { gap: 10px; padding: 12px 14px; }
  .app-stat > .app-icon { display: none; }
  .app-stat__value { font-size: 16px; }
}
.app-stat__foot { display: block; font-size: 11.5px; color: var(--app-text-muted); }

/* ---- Section heading: a title and an optional "See all" ------------------------- */

.app-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 2px 10px;
}
.app-section-head h2,
.app-section-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.app-section-head a { font-size: 13px; font-weight: 600; text-decoration: none; }

/* ---- Empty state -------------------------------------------------------------- */

.app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  text-align: center;
  color: var(--app-text-secondary);
}
.app-empty .app-icon { margin-block-end: 2px; }
.app-empty__text { max-inline-size: 26rem; }

/* ---- Lists of rows inside a card (phone-first) ---------------------------------- */

.app-rows { padding-block: 4px; }
.app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
}
a.app-row:hover { color: inherit; background: var(--app-list-hover); }
.app-link-reset { color: var(--app-text-primary); text-decoration: none; }
.app-row + .app-row { border-block-start: 1px solid var(--app-list-line); }
.app-row__main { flex: 1; min-inline-size: 0; }
.app-row__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-row__sub { font-size: 12.5px; color: var(--app-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-row__end { flex: none; text-align: end; }

/* Amounts: green for money in, red for owed (D-182). */
.app-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-amount--in { color: var(--app-money-in); }
.app-amount--owed { color: var(--app-owed); }

/* ---- Charts (D-183): drawn on the server by ChartHelper ------------------------- */

.app-chart { position: relative; }
.app-chart svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.app-chart text { font-size: 11px; fill: var(--app-text-muted); }
.app-chart .app-chart__label--current { fill: var(--app-text-primary); font-weight: 700; }
.app-chart__grid { stroke: var(--app-chart-grid); stroke-width: 1; }
.app-chart__grid--dashed { stroke-dasharray: 3 4; }
.app-chart__bar { fill: var(--app-chart-bar); opacity: var(--app-chart-bar-opacity); }
.app-chart__bar--current { opacity: 1; }
.app-chart__ghost { fill: var(--app-chart-ghost); }
.app-chart__line { fill: none; stroke: var(--app-chart-bar); stroke-width: 2.5; stroke-linejoin: round; }
.app-chart__line--ghost { stroke: var(--app-chart-ghost); stroke-width: 2; stroke-dasharray: 5 5; }
.app-chart__area { fill: var(--app-chart-bar); opacity: .12; }
.app-chart__dot { fill: var(--app-card-bg); stroke: var(--app-chart-bar); stroke-width: 2; }
.app-chart__dot--current { fill: var(--app-chart-bar); stroke: var(--app-card-bg); }
.app-chart__hit { fill: transparent; cursor: pointer; }
.app-chart__col:hover .app-chart__bar,
.app-chart__col.is-active .app-chart__bar { opacity: 1; }
.app-chart__tip {
  position: absolute;
  inset-block-start: 0;
  z-index: 2;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--app-ink);
  color: var(--app-on-ink);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.app-chart__tip b { display: block; font-size: 13px; }
.app-chart__legend { display: flex; gap: 16px; justify-content: flex-end; font-size: 12px; color: var(--app-text-secondary); }
.app-chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.app-chart__swatch { inline-size: 10px; block-size: 10px; border-radius: 3px; display: inline-block; background: var(--app-chart-bar); }
.app-chart__swatch--ghost { background: var(--app-chart-ghost); }

/* ---- Filter chips with counts (D-186) ------------------------------------------ */

.app-chips { display: flex; gap: 8px; overflow-x: auto; margin-block-end: 14px; padding-block-end: 2px; scrollbar-width: none; }
.app-chips::-webkit-scrollbar { display: none; }
.app-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--app-card-bg);
  border: 1px solid var(--app-border);
  color: var(--app-text-primary);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.app-chip b { font-size: 11px; padding: 0 7px; border-radius: 999px; background: var(--app-gray-lt); color: var(--app-text-secondary); }
.app-chip.is-on, .app-chip.is-on:hover { background: var(--app-text-primary); border-color: var(--app-text-primary); color: var(--app-card-bg); }
.app-chip:hover { border-color: var(--app-primary); color: var(--app-text-primary); }
.app-chip.is-on b { background: rgba(var(--app-primary-rgb), .35); color: inherit; }

/* ---- Date heading over a group of rows (D-186) ------------------------------------ */

.app-date-head { display: flex; justify-content: space-between; margin: 16px 4px 8px; font-size: 12px; font-weight: 700; color: var(--app-text-secondary); }
.app-date-head > span:first-child { text-transform: uppercase; letter-spacing: .04em; }
.app-date-head:first-child { margin-block-start: 0; }
[lang="ur"] .app-date-head { font-size: 13px; }
[lang="ur"] .app-date-head > span:first-child { text-transform: none; letter-spacing: 0; }

/* ---- Search box: the icon inside, one rounded field (D-186) --------------------------- */

.app-search {
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: 46px;
  padding-inline: 14px 6px;
  border-radius: 14px;
  background: var(--app-card-bg);
  border: 1px solid var(--app-border);
  color: var(--app-text-secondary);
  margin: 0;
  cursor: text;
}
.app-search:focus-within { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .15); }
.app-search .ti { font-size: 19px; flex: none; }
.app-search input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--app-text-primary); font-size: 15px; }
.app-search input::placeholder { color: var(--app-text-muted); }
@media (min-width: 992px) { .app-search { block-size: 40px; border-radius: 12px; } .app-search input { font-size: 13.5px; } }

/* A quiet button beside a primary one. */
.app-btn-soft { display: inline-flex; align-items: center; gap: 6px; background: var(--app-surface-2); border: 1px solid var(--app-border); color: var(--app-text-primary); font-weight: 600; }
.app-btn-soft:hover { background: var(--app-hover); border-color: var(--app-border); color: var(--app-text-primary); }
.app-btn-soft .ti { font-size: 18px; }
/* A button in a tint for actions whose colour says what they do (StockHelper: damaged red,
   added green, taken out amber): the soft colour behind, the strong one for the words and
   the border. */
.app-btn-tint { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid; font-weight: 700; }
.app-btn-tint .ti { font-size: 19px; }
.app-btn-tint--red   { border-color: color-mix(in srgb, var(--app-red) 45%, transparent);   background: var(--app-red-lt);   color: var(--app-red) !important; }
.app-btn-tint--green { border-color: color-mix(in srgb, var(--app-green) 45%, transparent); background: var(--app-green-lt); color: var(--app-green) !important; }
.app-btn-tint--amber { border-color: color-mix(in srgb, var(--app-amber) 45%, transparent); background: var(--app-amber-lt); color: var(--app-amber) !important; }
.app-btn-tint--red:hover   { border-color: var(--app-red);   background: var(--app-red-lt); }
.app-btn-tint--green:hover { border-color: var(--app-green); background: var(--app-green-lt); }
.app-btn-tint--amber:hover { border-color: var(--app-amber); background: var(--app-amber-lt); }

/* ---- List table: a tinted head, rows with room, inside a card (D-186) ----------------- */

.app-table { inline-size: 100%; border-collapse: collapse; }
.app-table th { text-align: start; font-size: 11.5px; font-weight: 700; color: var(--app-list-head-fg); text-transform: uppercase; letter-spacing: .05em; padding: 12px 16px; background: var(--app-list-head-bg); border-block-end: 1px solid var(--app-list-line); white-space: nowrap; }
.app-table td { padding: 11px 16px; border-block-start: 1px solid var(--app-list-line); vertical-align: middle; transition: background-color .12s; }
.app-table thead + tbody > tr:first-child > td { border-block-start: 0; }
.app-table .text-end { text-align: end; }
[lang="ur"] .app-table th { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* "Showing 1–25 of 80" and the arrows, at the foot of a list. */
.app-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-block-start: 1px solid var(--app-list-line); font-size: 12.5px; color: var(--app-text-secondary); }
.card > .app-pager:first-child { border-block-start: 0; }
.app-pager__arrows { display: flex; gap: 6px; font-size: 18px; }
.app-pager__arrows > * { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px; }
.app-pager__arrows a:hover { background: var(--app-hover); }
.app-pager__arrows .is-off { opacity: .35; }

.app-amount--none { color: var(--app-text-muted); }

/* A chevron or arrow that points along the reading direction. */
[dir="rtl"] .app-flip-rtl { transform: scaleX(-1); display: inline-block; }

/* ---- Icon button, badge, meter (D-188) ------------------------------------------- */
.app-icon-btn { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 1px solid var(--app-input-border); border-radius: 12px; background: var(--app-card-bg); color: var(--app-text-primary); font-size: 20px; }
.app-icon-btn:hover { background: var(--app-hover); color: var(--app-text-primary); }
.app-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.app-meter { block-size: 8px; margin: 12px 0 6px; border-radius: 999px; background: var(--app-gray-lt); overflow: hidden; }
.app-meter i { display: block; block-size: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--app-amber), var(--app-red)); }
[dir="rtl"] .app-meter i { background: linear-gradient(270deg, var(--app-amber), var(--app-red)); }
.app-meter__foot { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--app-text-secondary); }

/* ---- Forms (U-7, D-193) ------------------------------------------------------------
   One look for every form: a header with a back button, grouped cards with an icon badge,
   48 px inputs with the label above, choices as tiles, a switch or chips, and one save
   bar (fixed to the bottom of a phone; on a computer in the summary card on the right, or
   under a single-column form). Pieces drawn by FormsHelper. */
.app-form-head { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; }
.app-form-head__back { flex: none; inline-size: 42px; block-size: 42px; }
.app-form-head__pre { color: var(--app-text-secondary); font-size: 13px; }
.app-form-head .page-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 21px; line-height: 1.25; }
.app-form-head__sub { color: var(--app-text-secondary); }

.app-form { display: flex; flex-direction: column; gap: 14px; }
.app-form__main { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
.app-form--narrow { max-inline-size: 760px; }
@media (min-width: 992px) {
  .app-form--split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
  .app-form__side { position: sticky; inset-block-start: 16px; display: flex; flex-direction: column; gap: 14px; }
}

.app-form-section { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.app-form-section__head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; }
.app-form-section__head > small { margin-inline-start: auto; color: var(--app-text-secondary); font-size: 12.5px; font-weight: 500; }

.app-dashboard .app-form .form-label, .app-form .app-form__label { display: flex; align-items: center; gap: 6px; margin-block-end: 6px; color: var(--app-text-primary) !important; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.app-form__opt { color: var(--app-text-secondary); font-size: 12.5px; font-weight: 500; }
.app-dashboard .app-form .form-control, .app-dashboard .app-form .form-select { min-block-size: 48px; border-width: 1.5px !important; border-radius: 13px !important; font-size: 15.5px !important; }
.app-dashboard .app-form textarea.form-control { min-block-size: 64px; }
.app-dashboard .app-form .form-control.is-invalid, .app-dashboard .app-form .form-select.is-invalid, .app-dashboard .app-form .app-input.is-invalid { border-color: var(--app-red) !important; box-shadow: 0 0 0 3px var(--app-red-lt) !important; }
.app-form .form-hint { margin-block-start: 6px; color: var(--app-text-secondary); font-size: 12.5px; }
.app-form .invalid-feedback { margin-block-start: 6px; color: var(--app-red); font-size: 12.5px; font-weight: 600; }
.app-form .alert { margin-block-end: 0; }

/* An input with a unit in front (Rs); --big for the amount a form is about. */
.app-input { display: flex; align-items: center; gap: 8px; min-block-size: 48px; padding-inline: 14px; border: 1.5px solid var(--app-input-border); border-radius: 13px; background: var(--app-input-bg); }
.app-input:focus-within { border-color: var(--app-input-focus-border); box-shadow: 0 0 0 3px var(--app-input-focus-ring); }
.app-input__unit { flex: none; color: var(--app-text-secondary); font-weight: 600; }
.app-dashboard .app-input input.form-control, .app-dashboard .app-input input.form-control:focus { flex: 1; min-inline-size: 0; min-block-size: 0; padding: 11px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.app-input input::-webkit-outer-spin-button, .app-input input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.app-input input[type="number"] { appearance: textfield; }
.app-input--big { min-block-size: 64px; }
.app-input--big .app-input__unit { font-size: 20px; }
.app-dashboard .app-input--big input.form-control { font-size: 28px !important; font-weight: 800; letter-spacing: -.01em; }

/* Choices: radio buttons drawn as tiles (with an icon), a segmented switch or chips. */
.app-choice { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.app-choice__item { position: relative; margin: 0; cursor: pointer; }
.app-choice__item input { position: absolute; opacity: 0; pointer-events: none; }
.app-choice__item:focus-within { outline: 2px solid var(--app-primary); outline-offset: 1px; }
.app-choice--tiles { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.app-choice--tiles .app-choice__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 1.5px solid var(--app-input-border); border-radius: 14px; background: var(--app-card-bg); font-size: 12.5px; font-weight: 600; text-align: center; }
.app-choice--tiles .app-choice__item .ti { font-size: 22px; }
.app-choice--tiles .app-choice__item:has(input:checked) { border-color: var(--app-green); background: var(--app-green-lt); color: var(--app-green); }
.app-choice--seg { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; padding: 4px; border-radius: 14px; background: var(--app-gray-lt); }
.app-choice--seg .app-choice__item { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border-radius: 10px; color: var(--app-text-secondary); font-weight: 600; text-align: center; }
.app-choice--seg .app-choice__item:has(input:checked) { background: var(--app-card-bg); color: var(--app-primary); box-shadow: var(--app-shadow-card); }
@media (max-width: 575.98px) { .app-choice--seg.app-choice--many { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 2px; } }
.app-choice--chips { display: flex; flex-wrap: wrap; }
.app-choice--chips .app-choice__item, .app-form .app-chip-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid transparent; border-radius: 999px; background: var(--app-gray-lt); color: var(--app-text-primary); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.app-choice--chips .app-choice__item:has(input:checked) { background: var(--app-text-primary); color: var(--app-card-bg); }
.app-form .app-chip-button { border-style: dashed; border-color: var(--app-input-border); background: transparent; color: var(--app-text-secondary); text-decoration: none; }

/* A switch row: what it is, a line under it, the switch at the end. */
.app-switch-row { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.app-switch-row__text { flex: 1; min-inline-size: 0; }
.app-switch-row__title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.app-switch-row__hint { color: var(--app-text-secondary); font-size: 12.5px; }
.app-switch-row .form-check-input { flex: none; inline-size: 48px; block-size: 28px; margin: 0; cursor: pointer; }

/* The customer or supplier a form is for, with what they owe. */
.app-form-who__top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.app-form-who__name { font-size: 16px; font-weight: 700; }
.app-form-who__sub { color: var(--app-text-secondary); font-size: 13px; }
.app-form-who__figs { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; border-block-start: 1px solid var(--app-list-line); }
.app-form-who__figs > div { padding: 10px 16px; }
.app-form-who__figs > div + div { border-inline-start: 1px solid var(--app-list-line); }
.app-form-who__figs > div > span { display: block; color: var(--app-text-secondary); font-size: 12.5px; }
.app-form-who__figs b { font-size: 18px; }

/* The summary card on a computer: what saving will do, then Save. */
.app-form-summary { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.app-form-summary h3 { margin: 0; font-size: 15px; }
.app-form-summary__big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.app-form-summary__line { display: flex; justify-content: space-between; gap: 10px; color: var(--app-text-secondary); font-size: 13.5px; }
.app-form-summary__line > b { color: var(--app-text-primary); font-weight: 600; text-align: end; }
.app-form-summary__line--total { padding-block-start: 10px; border-block-start: 1px solid var(--app-list-line); }
.app-form-note { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--app-content-bg); color: var(--app-text-secondary); font-size: 12.5px; }
.app-form-note .ti { flex: none; margin-block-start: 1px; font-size: 16px; }

/* The save bar. */
.app-form-bar { display: flex; align-items: center; gap: 10px; }
.app-form-bar__sum { flex: 1; min-inline-size: 0; }
.app-form-bar__line { display: block; overflow: hidden; color: var(--app-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.app-form-bar__amount { font-size: 19px; font-weight: 800; white-space: nowrap; }
.app-form-bar .btn { min-block-size: 48px; padding-inline: 18px; border-radius: 13px; font-size: 15px; font-weight: 700; }
@media (max-width: 991.98px) {
  .app-form-page .app-page-body { padding-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .app-form-bar { position: fixed; z-index: 1020; inset-block-end: 0; inset-inline: 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--app-list-line); background: var(--app-card-bg); box-shadow: var(--app-shadow-card); }
  .app-form-bar:not(:has(.app-form-bar__sum)) .btn[type="submit"] { flex: 1; }
  .app-form-summary { display: contents; }
  .app-form-summary > :not(.app-form-bar):not(.app-form-note) { display: none; }
  .app-form__side .app-form-note { margin-block-start: -4px; }
}
@media (min-width: 992px) {
  .app-form-bar__sum { display: none; }
  .app-form-summary .app-form-bar { flex-direction: column; align-items: stretch; }
  .app-form--narrow > .app-form-bar { justify-content: flex-start; }
}
.app-choice--chips button.app-choice__item { border: 0; }
.app-choice--chips .app-choice__item.is-on { background: var(--app-text-primary); color: var(--app-card-bg); }

/* Bills a payment pays: what each still owes and, live, what the money pays on it. */
.app-form-bills { border: 1px solid var(--app-list-line); border-radius: 14px; overflow: hidden; }
.app-form-bill { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.app-form-bill + .app-form-bill { border-block-start: 1px solid var(--app-list-line); }
.app-form-bill__main { flex: 1; min-inline-size: 0; }
.app-form-bill__title { font-weight: 600; }
.app-form-bill__sub { color: var(--app-text-secondary); font-size: 12.5px; }
.app-form-bill__end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; }
.app-form-bill__pays { color: var(--app-green); font-size: 13px; font-weight: 700; white-space: nowrap; }
.app-form-bill .form-check-input { inline-size: 22px; block-size: 22px; }

/* Fields folded under "+ …" until wanted. */
.app-form-more > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--app-primary); font-weight: 600; cursor: pointer; list-style: none; }
.app-form-more > summary::-webkit-details-marker { display: none; }
.app-form-more[open] > summary .ti { transform: rotate(45deg); }
.app-form-more__body { display: flex; flex-direction: column; gap: 14px; margin-block-start: 12px; }
.app-switch-row.form-switch { min-block-size: 0; padding: 0; }
.app-form-preview { display: flex; align-items: center; gap: 12px; }
.app-form-head__actions { display: flex; flex: none; gap: 8px; }

/* Lines of an order on a form (delivery completion): what, then − n + steppers. */
.app-form-lines { border: 1px solid var(--app-list-line); border-radius: 14px; overflow: hidden; }
.app-form-line { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.app-form-line + .app-form-line { border-block-start: 1px solid var(--app-list-line); }
.app-form-line__head { display: flex; justify-content: space-between; gap: 10px; }
.app-form-line__title { font-weight: 600; }
.app-form-line__sub { color: var(--app-text-secondary); font-size: 12.5px; white-space: nowrap; }
.app-form-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-form-count > label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.app-form-count > label .ti { font-size: 20px; }
.app-stepper--lg { border-radius: 14px; }
.app-stepper--lg button { inline-size: 44px; block-size: 44px; border-radius: 14px; font-size: 19px; }
.app-dashboard .app-stepper--lg input { inline-size: 3.6rem; min-block-size: 44px; font-size: 18px !important; }
.app-form-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.app-form-total > span { color: var(--app-text-secondary); }
.app-form-total > b { font-size: 24px; font-weight: 800; }
.app-dashboard .app-form .app-form-qty { flex: none; inline-size: 6.5rem; }

/* A row that is a button (a customer to start a sale with). */
.app-row--button { inline-size: 100%; border: 0; background: transparent; color: inherit; font: inherit; }
.app-row--button:hover { background: var(--app-list-hover); }
.app-rows > form + form > .app-row { border-block-start: 1px solid var(--app-list-line); }

/* ---- Record pages (U-8, D-194) ------------------------------------------------------
   One look for every page of one record: a header with what it is, who it is for and its
   pills; a hero card with the big amount; the record's cards; Details, a timeline and
   More actions on the right of a computer. A phone puts the main actions in a bar above
   the tab bar and More in a sheet from the bottom. Pieces drawn by RecordsHelper. */
.app-record-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-block-end: 16px; }
.app-record-head__back { flex: none; inline-size: 42px; block-size: 42px; }
.app-record-head__main { flex: 1; min-inline-size: 0; }
.app-record-head__pre { display: flex; align-items: center; gap: 6px; color: var(--app-text-secondary); font-size: 13px; }
.app-record-head__pre .ti { font-size: 15px; }
.app-record-head .page-title { overflow: hidden; margin: 0; font-size: 21px; line-height: 1.25; text-align: start; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
[dir="rtl"] .app-record-head .page-title { text-align: right; }
.app-dashboard .app-record-head__link { color: inherit; text-decoration: none; }
.app-dashboard .app-record-head__link:hover { color: var(--app-primary); }
.app-record-head__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.app-record-head__pills .app-pill { padding: 4px 10px; font-size: 12.5px; }
.app-record-head__actions { display: flex; flex: none; gap: 8px; }
.app-record-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.app-record-action .ti { font-size: 18px; }
@media (max-width: 991.98px) {
  .app-record-head__pills { inline-size: 100%; margin-block-start: -4px; padding-inline-start: 54px; }
}

.app-record { display: flex; flex-direction: column; gap: 14px; }
.app-record__main, .app-record__side { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
@media (min-width: 992px) {
  .app-record { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
  .app-record__side { position: sticky; inset-block-start: 16px; }
}

.app-record-hero { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; }
.app-record-hero__top { display: flex; align-items: center; gap: 14px; }
.app-record-hero__label { color: var(--app-text-secondary); font-size: 13px; font-weight: 600; }
.app-record-hero__amount { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
@media (max-width: 359.98px) { .app-record-hero__amount { font-size: 27px; } }
.app-record-hero__amount.is-struck { color: var(--app-text-muted); text-decoration: line-through; }
.app-record-hero__line { color: var(--app-text-secondary); font-size: 13.5px; }
.app-record-hero__line b, .app-record-hero__line strong { color: var(--app-text-primary); font-weight: 600; }
.app-record-progress { block-size: 8px; border-radius: 999px; background: var(--app-gray-lt); overflow: hidden; }
.app-record-progress > span { display: block; block-size: 100%; border-radius: 999px; background: var(--app-green); }

.app-record-banner { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; }
.app-record-banner > .ti { flex: none; font-size: 20px; }
.app-record-banner b { display: block; }
.app-record-banner span { color: var(--app-text-primary); }
.app-record-banner--red { background: var(--app-red-lt); color: var(--app-red); }
.app-record-banner--amber { background: var(--app-amber-lt); color: var(--app-amber); }
.app-record-banner--green { background: var(--app-green-lt); color: var(--app-green); }

.app-record-rows { border: 1px solid var(--app-list-line); border-radius: 14px; overflow: hidden; }
.app-record-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: inherit; text-decoration: none; }
a.app-record-row:hover { background: var(--app-list-hover); color: inherit; }
.app-record-row + .app-record-row { border-block-start: 1px solid var(--app-list-line); }
.app-record-row__main { flex: 1; min-inline-size: 0; }
.app-record-row__title { font-weight: 600; }
.app-record-row__sub { color: var(--app-text-secondary); font-size: 12.5px; }
.app-record-row__end { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; }
.app-record-row__amount { font-weight: 700; white-space: nowrap; }
.app-record-row__chev { flex: none; color: var(--app-text-muted); }
.app-record-row.is-struck .app-record-row__amount { color: var(--app-text-muted); text-decoration: line-through; }
.app-record-row__tag { display: inline-flex; align-items: center; gap: 5px; margin-block-start: 4px; padding: 2px 8px; border-radius: 8px; background: var(--app-cyan-lt); color: var(--app-cyan); font-size: 12px; font-weight: 600; }
.app-record-row details { margin-block-start: 6px; }

.app-record-total { display: flex; justify-content: space-between; gap: 10px; color: var(--app-text-secondary); }
.app-record-total > b { color: var(--app-text-primary); font-weight: 600; text-align: end; }
.app-record-total.text-green > b { color: var(--app-green); }
.app-record-total--big { padding-block-start: 8px; border-block-start: 1px solid var(--app-list-line); color: var(--app-text-primary); font-size: 17px; font-weight: 800; }
.app-record-total--big > b { font-weight: 800; }
.app-record-totals { display: flex; flex-direction: column; gap: 6px; padding-inline: 2px; }

.app-record-facts { display: flex; flex-direction: column; margin: 0; }
.app-record-facts > div { display: flex; justify-content: space-between; gap: 14px; padding-block: 9px; }
.app-record-facts > div + div { border-block-start: 1px solid var(--app-list-line); }
.app-record-facts dt { flex: none; max-inline-size: 45%; color: var(--app-text-secondary); font-weight: 400; }
.app-record-facts dd { min-inline-size: 0; margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.app-record-facts dd small { display: block; color: var(--app-text-secondary); font-size: 12.5px; font-weight: 500; }

.app-record-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.app-record-timeline > li { position: relative; display: flex; gap: 12px; padding-block-end: 14px; }
.app-record-timeline > li:last-child { padding-block-end: 0; }
.app-record-timeline > li:not(:last-child)::before { content: ""; position: absolute; inset-block: 32px 2px; inset-inline-start: 15px; inline-size: 2px; background: var(--app-list-line); }
.app-record-timeline__dot { border-radius: 50%; }
.app-record-timeline__title { font-weight: 600; }
.app-record-timeline__at { color: var(--app-text-secondary); font-size: 12.5px; }

.app-record-more { gap: 6px; }
.app-record-more__close { display: none; margin-inline-start: auto; inline-size: 36px; block-size: 36px; font-size: 18px; }
.app-record-more__list { display: flex; flex-direction: column; }
.app-record-more__list > * + * { border-block-start: 1px solid var(--app-list-line); }
.app-record-more__item { display: flex; align-items: center; gap: 12px; padding: 11px 2px; color: var(--app-text-primary); text-decoration: none; cursor: pointer; list-style: none; }
.app-record-more__item::-webkit-details-marker { display: none; }
a.app-record-more__item:hover { color: var(--app-primary); }
.app-record-more__text { flex: 1; min-inline-size: 0; }
.app-record-more__title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.app-record-more__hint { display: block; color: var(--app-text-secondary); font-size: 12.5px; }
.app-record-more__item--danger .app-record-more__title { color: var(--app-red); }
.app-record-more__confirm[open] > summary .ti-chevron-down { transform: rotate(180deg); }
.app-record-more__form { display: flex; flex-direction: column; gap: 10px; margin-block-end: 10px; padding: 12px; border-radius: 14px; background: var(--app-red-lt); }
.app-record-more__form p { margin: 0; color: var(--app-text-primary); font-size: 13px; }
.app-record-more__locked { display: flex; flex-direction: column; gap: 6px; margin-block: 6px; padding: 12px; border-radius: 14px; background: var(--app-amber-lt); font-size: 13px; }
.app-record-more__locked .app-record-more__title { color: var(--app-amber); }
.app-record-more__locked ul { margin: 0; padding-inline-start: 18px; }
.app-record-shade { position: fixed; z-index: 1040; inset: 0; background: var(--app-backdrop); }

.app-record-head__more { display: none; }
@media (max-width: 991.98px) {
  .app-has-record-bar .app-page-body { padding-block-end: calc(144px + env(safe-area-inset-bottom, 0px)); }
  .app-record-head__actions { position: fixed; z-index: 1020; inset-block-end: calc(57px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; display: flex; gap: 8px; padding: 10px 12px; border-block-start: 1px solid var(--app-list-line); background: var(--app-card-bg); }
  .app-record-head__actions .btn { min-block-size: 46px; padding-inline: 14px; border-radius: 13px; font-weight: 700; white-space: nowrap; }
  .app-record-head__actions .app-record-action--main { flex: 1; }
  .app-record-head__actions .app-record-action--compact, .app-record-head__more { flex: none; inline-size: 46px; padding: 0 !important; font-size: 20px; }
  .app-record-head__actions .app-record-action--compact .app-record-action__label { display: none; }
  .app-record-head__actions form { display: contents; }
  .app-record-head__more { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto; }
  .app-record-more { position: fixed; z-index: 1050; inset-block-end: 0; inset-inline: 0; max-block-size: 85vh; padding-block-end: calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; overflow-y: auto; transform: translateY(105%); transition: transform .2s ease; visibility: hidden; }
  .app-record-more.is-open { transform: none; visibility: visible; }
  .app-record-more__close { display: inline-grid; }
  .app-sheet-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .app-record-more { transition: none; } }

/* ---------- Sign-in and the account pages before the shop (UI refresh U-10, D-198) ----------
   Phone: the form on the page, no card. Computer: the screen splits, the brand panel on one
   side and the form in a card on the other. */
.app-dashboard.app-auth-page { min-block-size: 100vh; background: var(--app-content-bg); }
.app-auth { display: flex; min-block-size: 100vh; }
.app-auth__brand { flex: 0 0 min(520px, 42vw); flex-direction: column; gap: 22px; padding: 40px 44px; background: var(--app-hero); color: var(--app-on-hero); }
.app-auth__brand h2 { margin: 56px 0 0; color: inherit; font-size: 34px; line-height: 1.2; letter-spacing: -.02em; }
.app-auth__lead { margin: 0; opacity: .85; font-size: 16px; }
.app-auth__brand ul { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.app-auth__brand li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.app-auth__brand li .ti { display: grid; flex: none; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 12px; background: var(--app-on-hero-soft); font-size: 19px; }
.app-auth__brand-foot { margin-block-start: auto; opacity: .7; font-size: 13px; }
.app-auth__logo { display: flex; align-items: center; gap: 10px; color: inherit; font-size: 17px; font-weight: 800; }
.app-auth__logo .app-brand-mark { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 11px; background: var(--app-primary); color: var(--app-on-primary); }
.app-auth__logo .app-brand-mark svg { inline-size: 20px; block-size: 20px; }
.app-auth__brand .app-auth__logo { font-size: 20px; }
.app-auth__brand .app-auth__logo .app-brand-mark { inline-size: 40px; block-size: 40px; background: var(--app-on-hero-soft); }
.app-auth__side { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
.app-auth__top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.app-auth__tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.app-auth__main { display: flex; flex: 1; flex-direction: column; padding: 8px 16px 24px; }
.app-auth__card { display: flex; flex-direction: column; gap: 16px; inline-size: 100%; max-inline-size: 440px; margin-inline: auto; }
.app-auth__hello h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.app-auth__hello p { margin: 4px 0 0; color: var(--app-text-secondary); }
.app-auth__form { display: flex; flex-direction: column; gap: 14px; }
.app-auth__label-row { display: flex; align-items: baseline; gap: 8px; }
.app-auth__label-row .app-auth__link { margin-inline-start: auto; font-size: 13px; }
.app-auth__link { color: var(--app-primary); font-weight: 600; }
.app-auth__submit { min-block-size: 52px; border-radius: 14px; font-size: 16px; font-weight: 700; }
.app-auth__note { margin: 0; color: var(--app-text-secondary); font-size: 13px; text-align: center; }
.app-auth__back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--app-primary); font-weight: 600; text-align: center; }
.app-auth__error { display: flex; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--app-red-lt); color: var(--app-red); font-size: 14px; font-weight: 600; }
.app-auth__error .ti { flex: none; margin-block-start: 1px; font-size: 18px; }
.app-auth__foot { padding: 14px; color: var(--app-text-secondary); font-size: 12.5px; text-align: center; }
.app-auth__sent { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.app-auth__sent h1 { margin: 6px 0 0; font-size: 24px; font-weight: 800; }
.app-auth__sent p { margin: 0; color: var(--app-text-secondary); }
.app-auth__invite { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-card-bg); }
.app-auth__invite-title { font-size: 17px; font-weight: 800; }
@media (min-width: 992px) {
  .app-auth__top { justify-content: flex-end; padding: 18px 24px; }
  .app-auth__main { justify-content: center; padding: 20px; }
  .app-auth__card { padding: 28px; border-radius: var(--app-radius-card); background: var(--app-card-bg); box-shadow: var(--app-shadow-card); }
}

/* An icon in front of an input, the eye of a password box, a fixed value with a lock. */
.app-input__lead { flex: none; color: var(--app-text-secondary); font-size: 18px; }
.app-input__eye { flex: none; margin-inline-end: -6px; padding: 6px; border: 0; background: transparent; color: var(--app-text-secondary); font-size: 20px; line-height: 1; }
.app-input__eye:hover { color: var(--app-text-primary); }
.app-input.is-readonly { background: var(--app-content-bg); }
.app-input.is-invalid { border-color: var(--app-red); }

/* Panels (Team's Add member and each person): a sheet from the bottom of a phone, a panel
   at the side of a computer, over a shade. */
.app-panel-shade { position: fixed; z-index: 1040; inset: 0; background: var(--app-backdrop); }
.app-panel { position: fixed; z-index: 1050; inset-block-end: 0; inset-inline: 0; display: flex; flex-direction: column; max-block-size: 92vh; border-radius: 22px 22px 0 0;
  background: var(--app-card-bg); box-shadow: var(--app-shadow-raised); transform: translateY(105%); transition: transform .2s ease; }
.app-panel.is-open { transform: none; }
.app-panel__form { display: flex; flex-direction: column; min-block-size: 0; flex: 1; }
.app-panel__head { display: flex; flex: none; align-items: center; gap: 10px; padding: 14px 16px; border-block-end: 1px solid var(--app-border); }
.app-panel__head h3 { flex: 1; margin: 0; font-size: 16px; font-weight: 800; }
.app-panel__body { display: flex; flex: 1; flex-direction: column; gap: 14px; min-block-size: 0; padding: 16px; overflow-y: auto; }
.app-panel__stack { display: flex; flex-direction: column; gap: 14px; }
.app-panel__foot { display: flex; flex: none; flex-direction: column; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--app-border); }
.app-panel__foot .btn, .app-panel__stack > .btn { min-block-size: 48px; border-radius: 13px; font-weight: 700; }
.app-panel__contact { display: flex; gap: 8px; }
.app-panel__contact .btn { flex: 1; min-block-size: 46px; border-radius: 13px; font-weight: 700; }
.app-panel__contact .app-panel__whatsapp { color: var(--app-whatsapp); }
.app-panel__fold { border: 1px solid var(--app-border); border-radius: 16px; }
.app-panel__fold > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.app-panel__fold > summary::-webkit-details-marker { display: none; }
.app-panel__fold[open] > summary .ti-chevron-down { transform: rotate(180deg); }
.app-panel__fold > form { padding: 0 14px 14px; }
@media (min-width: 992px) {
  .app-panel { inset-block: 0; inset-inline: auto 0; inline-size: 440px; max-block-size: none; border-radius: 0; transform: translateX(105%); }
  [dir="rtl"] .app-panel { transform: translateX(-105%); }
  .app-panel.is-open, [dir="rtl"] .app-panel.is-open { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .app-panel { transition: none; } }

/* Roles to pick, as cards that say what each role does. */
.app-role-cards { display: flex; flex-direction: column; gap: 8px; }
.app-role-card { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--app-input-border); border-radius: 14px; background: var(--app-card-bg); cursor: pointer; }
.app-role-card input { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; opacity: 0; pointer-events: none; }
.app-role-card__box { display: grid; flex: none; place-items: center; inline-size: 22px; block-size: 22px; margin-block-start: 1px; border: 1.5px solid var(--app-input-border); border-radius: 7px; color: transparent; font-size: 15px; }
.app-role-card__title { font-weight: 700; }
.app-role-card__hint { color: var(--app-text-secondary); font-size: 12.5px; }
.app-role-card:has(input:checked) { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .08); }
.app-role-card:has(input:checked) .app-role-card__box { border-color: var(--app-primary); background: var(--app-primary); color: var(--app-on-primary); }
.app-role-card:has(input:focus-visible) { outline: 2px solid var(--app-primary); outline-offset: 2px; }

/* Team: the seats meter and the pills under each name. */
.app-team-seats { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.app-team-seats__line { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.app-use-meter { block-size: 8px; border-radius: 999px; background: var(--app-gray-lt); overflow: hidden; }
.app-use-meter > i { display: block; block-size: 100%; border-radius: inherit; background: var(--app-primary); }
.app-use-meter--full > i { background: var(--app-amber); }
.app-team-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 4px; }
.app-form-note--warn { background: var(--app-amber-lt); color: var(--app-amber); }
.app-form-note--warn a { color: inherit; font-weight: 700; text-decoration: underline; }
button.app-row { inline-size: 100%; border: 0; background: transparent; color: inherit; text-align: start; }
.app-row__chev { flex: none; color: var(--app-text-secondary); font-size: 18px; }
.app-team { display: flex; flex-direction: column; }
button.app-list-table__go { padding: 4px; border: 0; background: transparent; }

/* My account: who you are signed in as, and the password folded. */
.app-account-card { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
.app-account-card__name { font-size: 18px; font-weight: 800; }
.app-account-password > summary { list-style: none; }
.app-account-password > summary::-webkit-details-marker { display: none; }
.app-account-password__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.app-account-password[open] .app-account-password__summary .btn { display: none; }

/* Shop details: the top of a printed slip. */
.app-slip { display: flex; flex-direction: column; gap: 2px; padding: 16px 14px 18px; border: 1px dashed var(--app-input-border); border-radius: 6px; background: var(--app-card-bg);
  color: var(--app-text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; text-align: center; }
.app-slip__name { font-family: inherit; font-size: 16px; font-weight: 800; }
.app-slip__title { margin-block: 8px 6px; padding-block: 4px; border-block: 1px dashed var(--app-input-border); font-weight: 700; }
.app-slip__line { display: flex; justify-content: space-between; gap: 8px; text-align: start; }
.app-slip__line--total { margin-block-start: 4px; font-weight: 800; }

/* Accounting settings: the fixed currency, the lock date and what a cashier sees. */
.app-fixed-line { display: flex; align-items: center; gap: 8px; min-block-size: 48px; padding-inline: 14px; border-radius: 13px; background: var(--app-content-bg); }
.app-lock-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.app-lock-date strong { font-size: 20px; font-weight: 800; }
.app-lock-date__save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.app-cashier-line { display: flex; align-items: flex-start; gap: 8px; }
.app-cashier-line .ti { flex: none; margin-block-start: 2px; font-size: 18px; }

/* Plan and billing: the plan card, what the plan allows, the plans and paying. */
.app-billing { display: flex; flex-direction: column; gap: 16px; }
.app-billing__top { display: flex; flex-direction: column; gap: 12px; }
.app-plan-hero { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--app-radius-card); background: var(--app-hero); color: var(--app-on-hero); }
.app-plan-hero__label { opacity: .8; font-size: 12.5px; font-weight: 600; }
.app-plan-hero__name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; font-size: 24px; font-weight: 800; }
.app-plan-hero__price { font-size: 17px; font-weight: 700; }
.app-plan-hero__price small { opacity: .8; font-size: 12.5px; font-weight: 500; }
.app-plan-hero__line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13.5px; }
.app-plan-hero__meter { block-size: 8px; border-radius: 999px; background: var(--app-on-hero-soft); overflow: hidden; }
.app-plan-hero__meter > i { display: block; block-size: 100%; border-radius: inherit; background: var(--app-on-hero); }
.app-plan-hero__renew { align-self: flex-start; min-block-size: 44px; padding-inline: 18px; border: 0; border-radius: 13px; background: var(--app-on-hero); color: var(--app-primary-dark); font-weight: 700; }
.app-plan-hero__renew:hover { background: var(--app-on-hero); color: var(--app-primary-dark); filter: brightness(.95); }
.app-billing__uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.app-use-tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.app-use-tile__top { display: flex; align-items: center; gap: 8px; color: var(--app-text-secondary); font-size: 13px; font-weight: 600; }
.app-use-tile__value { font-size: 18px; font-weight: 800; }
.app-use-tile__link { font-size: 12.5px; font-weight: 600; }
.app-billing__heading { margin: 4px 0 0; font-size: 16px; font-weight: 800; }
.app-plan-cards { display: grid; grid-auto-columns: 80%; grid-auto-flow: column; gap: 12px; padding: 2px 2px 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
.app-plan-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1.5px solid transparent; scroll-snap-align: start; }
.app-plan-card.is-current { border-color: var(--app-primary); }
.app-plan-card__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 800; }
.app-plan-card__price { font-size: 22px; font-weight: 800; }
.app-plan-card__price small { color: var(--app-text-secondary); font-size: 13px; font-weight: 500; }
.app-plan-card__tag { min-block-size: 36px; color: var(--app-text-secondary); font-size: 12.5px; }
.app-plan-card__list { display: flex; flex: 1; flex-direction: column; gap: 6px; margin: 0; padding: 0; font-size: 13px; list-style: none; }
.app-plan-card__list li { display: flex; gap: 8px; }
.app-plan-card__list .ti { flex: none; color: var(--app-primary); font-size: 16px; }
.app-billing__bottom { display: flex; flex-direction: column; gap: 16px; }
.app-billing__instructions { display: flex; flex-direction: column; gap: 4px; margin-block-start: 10px; padding: 12px 14px; border-radius: 13px; background: var(--app-primary-light); font-size: 13.5px; }
.app-billing__total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 13px; background: var(--app-content-bg); }
.app-billing__total b { font-size: 20px; font-weight: 800; }
.app-billing__all { margin-inline-start: auto; font-size: 13px; font-weight: 600; }
@media (min-width: 992px) {
  .app-billing__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: stretch; }
  .app-plan-cards { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-inline: 0; padding: 0; overflow: visible; }
  .app-billing__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Anything picked or current is blue (D-198): green only means paid, active or money in. */
.app-choice--tiles .app-choice__item:has(input:checked) { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .1); color: var(--app-primary); }
.app-sale-pay__method.is-on { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .1); color: var(--app-primary); }

/* API keys: a new key shown once, the form and the keys. */
.app-keys { display: flex; flex-direction: column; gap: 16px; max-inline-size: 900px; }
.app-key-reveal { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--app-radius-card); background: var(--app-amber-lt); color: var(--app-text-primary); }
.app-key-reveal__title { display: flex; align-items: center; gap: 8px; color: var(--app-amber); font-weight: 800; }
.app-key-reveal__key { display: block; padding: 12px; border-radius: 12px; background: var(--app-card-bg); color: var(--app-text-primary); font-size: 14px; word-break: break-all; }
.app-key-reveal__copy { align-self: flex-start; min-block-size: 48px; padding-inline: 22px; border-radius: 13px; font-weight: 700; }
.app-keys__form .btn { align-self: flex-start; min-block-size: 48px; border-radius: 13px; font-weight: 700; }
@media (min-width: 992px) {
  .app-keys__form { flex-direction: row; align-items: flex-start; }
  .app-keys__form .btn { margin-block-start: 26px; }
}
.app-row--off { opacity: .65; }

/* Help: the big search, the start card, topics and pages. */
.app-help { display: flex; flex-direction: column; gap: 14px; }
.app-search--big { min-block-size: 54px; border-radius: 16px; }
.app-search--big input { font-size: 16px; }
.app-help__start { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--app-radius-card); background: var(--app-primary-light); color: var(--app-text-primary); }
.app-help__start-label { color: var(--app-primary); font-size: 12.5px; font-weight: 700; }
.app-help__chips { flex-wrap: nowrap; overflow-x: auto; }
.app-help__groups { display: flex; flex-direction: column; gap: 14px; }
.app-help__card-head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px 6px; font-size: 15px; font-weight: 800; }
.app-help__all { margin-inline-start: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.app-help__summary { color: var(--app-text-secondary); font-size: 12.5px; white-space: normal; }
.app-help__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 4px; }
.app-help-page { display: flex; flex-direction: column; gap: 14px; }
.app-help-page__article { display: flex; flex-direction: column; gap: 14px; padding: 18px; font-size: 15px; line-height: 1.6; }
.app-help-page__article p { margin: 0; }
.app-help-page__lead { font-size: 16.5px; font-weight: 600; }
.app-help-page__open { align-self: flex-start; min-block-size: 48px; border-radius: 13px; font-weight: 700; }
.app-help-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.app-help-steps li { position: relative; padding-inline-start: 40px; counter-increment: step; }
.app-help-steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 28px; block-size: 28px;
  border-radius: 50%; background: var(--app-primary-light); color: var(--app-primary); font-size: 13.5px; font-weight: 800; }
.app-help-page .app-help-example { display: flex; flex-direction: column; gap: 4px; border: 0; border-radius: 14px; background: var(--app-amber-lt); }
.app-help-example__head { display: flex; align-items: center; gap: 6px; color: var(--app-amber); font-weight: 800; }
.app-help-who { display: flex; align-items: flex-start; gap: 10px; }
@media (min-width: 992px) {
  .app-help__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .app-help__groups--one { grid-template-columns: minmax(0, 1fr); max-inline-size: 900px; }
  .app-help-page { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 340px); align-items: start; }
}
.app-panel__body > *, .app-panel__stack > * { flex-shrink: 0; }