/* The two surfaces the live update owns (lean-rollout ticket 115).
 *
 * `app.css` gains nothing from this ticket: the offline line is the shell's, on every
 * page at once, and the "there are new transactions" bar belongs to the list it sits
 * over. Both are here so the loop's own look is one file, and every value is a token --
 * no hex, no px, no timing (AGENTS.md, scripts/lint_hardcodes.py).
 */

/* --- the offline line ----------------------------------------------------------------
 * Above the workspace, so it is the same line on the overview, the transaction list and
 * every settings page. It is a NOTICE and not an error: the figures under it are real
 * figures that were read at a real time, which is the brief's rule
 * ("คงยอดล่าสุดไว้โดยระบุว่าเก่า ไม่ล้างเป็น 0"), so it wears the warning surface rather
 * than the error one.
 */
.live-offline{display:flex;align-items:center;gap:var(--space-16);flex-wrap:wrap;
  margin:0 0 var(--space-20);padding:var(--space-16) var(--space-20);
  background:var(--color-feedback-warning-bg);color:var(--color-feedback-hold-text);
  border:1px solid var(--color-border-lead);border-radius:var(--radius-card)}
.live-offline[hidden]{display:none}
.live-offline .icon{flex:0 0 auto;inline-size:var(--size-24);block-size:var(--size-24)}
.live-offline-copy{flex:1 1 var(--size-280);min-inline-size:0}
.live-offline-copy strong{display:block;font-size:var(--text-base);font-weight:var(--weight-semibold)}
.live-offline-copy p{margin:var(--space-4) 0 0;font-size:var(--text-sm);color:inherit;
  line-height:var(--leading-normal)}
.live-offline button{flex:0 0 auto;min-block-size:var(--size-44)}

/* --- the new-transactions bar ---------------------------------------------------------
 * Brief: "ถ้ารายการกำลังถูกอ่านโดยผู้ใช้ มีรายการใหม่ให้แสดง 'มีรายการใหม่ …' โดยไม่เลื่อน
 * ทุกแถวหนีจากเมาส์". It is a BUTTON, because the whole point of it is that the rows
 * land when the reader says so and not before. Sticky at the top of the list region so
 * it stays reachable while a long list is being read, and above the table's own header
 * (`--z-sticky`) for the same reason.
 */
.tx-new-rows{position:sticky;inset-block-start:var(--space-0);z-index:var(--z-sticky);
  display:flex;align-items:center;justify-content:center;gap:var(--space-8);
  inline-size:100%;margin:0 0 var(--space-12);
  padding:var(--space-12) var(--space-16);min-block-size:var(--size-44);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--color-text-on-primary);background:var(--color-action-primary);
  border:1px solid var(--color-action-primary);border-radius:var(--radius-pill);
  cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}
.tx-new-rows[hidden]{display:none}
.tx-new-rows:hover{background:var(--color-action-primary-hover);
  border-color:var(--color-action-primary-hover)}
.tx-new-rows:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.tx-new-rows .icon{flex:0 0 auto}

@media (max-width: 48rem){
  .live-offline{padding:var(--space-12) var(--space-14);gap:var(--space-12)}
  .live-offline button{inline-size:100%}
}

@media (prefers-reduced-motion: reduce){
  .tx-new-rows{transition:none}
}