/* Bottom sheet (.fsheet) và các thành phần trong sheet */
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:40;
  background:var(--color-surface-primary);
  border-top:1px solid var(--color-border-default);
  border-radius:var(--radius-40) var(--radius-40) 0 0;
  box-shadow:var(--elevation-floating);
  transform:translateY(102%);
  transition:transform .2s cubic-bezier(.32,.72,0,1), visibility 0s linear .2s;
  visibility:hidden;
  max-height:calc(100% - 80px); overflow-y:auto;   /* trần = chiều cao trang − 80px */
}
.sheet.on{transform:translateY(0); visibility:visible; transition-delay:0s}
/* ============ Figma: Sheet ============
   Kiểu sheet mới. Áp dần cho từng sheet khi redesign (thêm class .fsheet);
   sheet chưa redesign vẫn dùng .sheet cũ ở trên. */
.fsheet{
  display:flex; flex-direction:column;
  padding:0 0 calc(var(--spacing-16) + env(safe-area-inset-bottom));
  background:var(--color-background-primary);
  border-top:0; border-radius:var(--radius-24) var(--radius-24) 0 0;
  box-shadow:none;
  overflow:hidden;     /* chỉ phần nội dung cuộn, hàng nút luôn đứng yên */
}
.fsheet:focus-visible{outline:none}
.sheet__toolbar{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; padding-bottom:var(--spacing-10)}
/* iOS grabber 36×5 */
.sheet__grabber{width:36px; height:5px; margin:5px 0 var(--spacing-10); border-radius:var(--radius-pill); background:var(--neutral-300)}
/* Figma Grabber: pt 5, pb 10 — mọi sheet */
/* .fsheet đứng trước để thắng rule cũ ".sheet h3" */
.fsheet .sheet__title{
  font:var(--text-headline); letter-spacing:var(--tracking-headline);
  margin:0; height:48px; display:flex; align-items:center; justify-content:center;
  color:var(--color-text-primary);
}
.sheet__content{flex:1 1 auto; min-height:0; overflow-y:auto}
/* Figma: Sheet title có dòng phụ (Navigation Title + Body/Compact tertiary) */
.sheet__heading{height:48px; max-width:calc(100% - 32px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--spacing-2); text-align:center}
.fsheet .sheet__heading .sheet__title{height:auto; display:block}
.sheet__subtitle::first-letter{text-transform:uppercase}
/* dòng mô tả luôn viết hoa chữ đầu */
.sheet__subtitle{margin:0; font:var(--text-compact); letter-spacing:var(--tracking-compact); color:var(--color-text-tertiary); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sheet__heading > *{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Figma: Description block */
.description-block{margin:0; padding:var(--spacing-8) var(--spacing-16); font:var(--text-compact); letter-spacing:var(--tracking-compact); color:var(--color-text-secondary)}
.sheet__pad{padding:var(--spacing-8) var(--spacing-16)}
.button-bar{flex:0 0 auto; display:flex; gap:var(--spacing-12); padding:var(--spacing-16)}
.button-bar[hidden]{display:none}
.button-bar .btn{flex:1 1 0}
/* Figma: Text Field — nhãn 13/18, ô cao 44 bo 12, viền border/subtle */
.text-field{padding:var(--spacing-8) var(--spacing-16); display:flex; flex-direction:column; gap:var(--spacing-6)}
.text-field__label{font:var(--text-footnote); letter-spacing:var(--tracking-footnote); color:var(--color-text-primary)}
.text-field__label .req{color:var(--color-status-error)}
.text-field__input{
  font:var(--text-input); letter-spacing:var(--tracking-input);
  width:100%; min-width:0; height:44px; padding:0 var(--spacing-12) 0 var(--spacing-16);
  background:var(--color-background-primary);
  border:1px solid var(--color-border-subtle); border-radius:var(--radius-12);
  color:var(--color-text-primary);
  outline:none; transition:border-color .12s ease;
}
.text-field__input::placeholder{color:var(--color-text-tertiary)}
.text-field__input:focus{border-color:var(--color-border-focus)}
.text-field__input.err{border-color:var(--color-status-error)}
.text-field__input.warn{animation:nudge .3s ease}
/* ô có nút xoá: nút 24px nằm trong mép phải (pr 12, gap 8) */
.text-field__box{position:relative}
.text-field__box .text-field__input{padding-right:calc(var(--spacing-12) + 24px + var(--spacing-8))}   /* lề 12 + nút xoá 24 + 8 */
.text-field__clear{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:grid; place-items:center; border-radius:6px;
}
.text-field__clear::after{content:""; position:absolute; inset:-10px}
.text-field__clear[hidden]{display:none}
.text-field__clear .icon{display:block; color:var(--color-text-tertiary)}
.text-field__error{font:var(--text-footnote); letter-spacing:var(--tracking-footnote); margin:0; color:var(--color-status-error)}
.text-field__error[hidden]{display:none}
/* Figma: Section Title — Other/All Cap + ghi chú Body/Compact */
.section-title{padding:var(--spacing-16) var(--spacing-16) var(--spacing-4); display:flex; flex-direction:column; gap:var(--spacing-2); color:var(--color-text-tertiary)}
.section-title__label{font:var(--text-all-cap); letter-spacing:var(--tracking-all-cap); margin:0; text-transform:uppercase}
.section-title__note{font:var(--text-footnote); letter-spacing:var(--tracking-footnote); margin:0; }
/* hàng thêm mới (ô nhập + Thêm) nằm trong khung xám: đệm 12 hai bên (Figma);
   hàng sửa (--edit) nằm thẳng trong sheet nên giữ lề 16 của sheet */
.text-field-section{display:flex; gap:var(--spacing-8); padding:var(--spacing-12)}
.text-field-section--edit{padding:var(--spacing-12) var(--spacing-16)}
.text-field-section[hidden]{display:none}
/* còn dùng ở trang tham gia (#joinSlots) */
.fs-group{background:var(--color-background-tertiary); border-radius:var(--radius-8)}
.text-field-section .text-field__input{flex:1 1 auto}
.text-field-section--edit{align-items:flex-end}
.text-field-section--edit[hidden]{display:none}
.text-field-section--edit + .text-field__error{padding:0 var(--spacing-16); margin-top:calc(-1 * var(--spacing-8))}
.text-field-section__field{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--spacing-6)}
.text-field-section__field .text-field__label{min-height:20px; display:flex; align-items:center; gap:var(--spacing-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.text-field-section__field .text-field__input{font-variant-numeric:tabular-nums}
/* Figma: Hero message */
.act-head{display:flex; flex-direction:column; gap:var(--spacing-2); padding:var(--spacing-8); text-align:center; overflow-wrap:anywhere}
.fsheet .act-head h3{font:var(--text-title-2); letter-spacing:var(--tracking-title-2); margin:0; color:var(--color-text-primary)}
.act-head p{font:var(--text-body); letter-spacing:var(--tracking-body); margin:0; color:var(--color-text-tertiary)}
.hero-message{display:flex; flex-direction:column; align-items:center; gap:var(--spacing-12); padding:var(--spacing-16)}
.hero-message__icon{display:flex; padding:var(--spacing-12); border-radius:var(--radius-pill); background:var(--color-status-success-surface)}
.hero-message__icon .icon{display:block; color:var(--color-status-success)}
.hero-message__text{display:flex; flex-direction:column; gap:var(--spacing-8); padding:var(--spacing-8); text-align:center}
.fsheet .hero-message__text h3{font:var(--text-title-2); letter-spacing:var(--tracking-title-2); margin:0; color:var(--color-text-primary)}
.hero-message__text p{font:var(--text-body); letter-spacing:var(--tracking-body); margin:0; color:var(--color-text-secondary)}
/* Figma: List-Item/Invite-link */
.fs-invite{padding:var(--spacing-8) var(--spacing-16)}
.fs-invite[hidden]{display:none}
.inv-card{
  display:flex; align-items:center; gap:var(--spacing-12);
  padding:var(--spacing-12) var(--spacing-12) var(--spacing-12) var(--spacing-16);
  background:var(--color-background-tertiary); border-radius:var(--radius-8);
}
.inv-txt{font:var(--text-footnote); letter-spacing:var(--tracking-footnote); flex:1 1 auto; min-width:0; min-height:48px; display:flex; flex-direction:column; justify-content:center; gap:var(--spacing-2); }
.inv-url{color:var(--color-text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inv-exp{color:var(--color-text-tertiary)}
.inv-exp:empty{display:none}
/* ---- currency ---- */
/* Sheet Tiền tệ: chỉ danh sách cuộn, phần còn lại đứng yên. Màn thấp thì
   danh sách co lại (dưới 300px) thay vì đẩy ô tỉ giá ra khỏi sheet. */
#curSheet .sheet__content, #homeSheet .sheet__content{overflow:hidden; display:flex; flex-direction:column}
#curSheet .sheet__content > *, #homeSheet .sheet__content > *{flex:0 0 auto}
#curSheet .sheet__content > .sheet__pad, #homeSheet .sheet__content > .sheet__pad{flex:0 1 auto; min-height:0; display:flex; flex-direction:column}
.cur-list{min-height:88px; position:relative; max-height:300px; overflow-y:auto; border-radius:var(--radius-8); background:var(--color-background-tertiary); scrollbar-width:thin}
/* Figma: List-Content của link mời — nền background/tertiary bo 12, vạch thụt 16 hai bên */
.inv-list{list-style:none; margin:0; padding:0; background:var(--color-background-tertiary); border-radius:var(--radius-12)}
.inv-list .inv-empty{font:var(--text-body-small); letter-spacing:var(--tracking-body-small); color:var(--color-text-tertiary); min-height:72px}
.cur-rate[hidden]{display:none}
.text-field__input.text-field__input--48{height:48px; font-variant-numeric:tabular-nums}