/* ================================================================================================================
   MOBILE QA ROUND (every screen, modal and control on phones, landscape phones and tablets)
   ================================================================================================================ */

/* ---- details sheet: a compact sticky bar (name + Close); amount, chips and description scroll with the content ---- */
.sheet-head { position: sticky; top: 0; z-index: 2; padding: .6rem max(1.25rem, env(safe-area-inset-right, 0px)) .6rem max(1.25rem, env(safe-area-inset-left, 0px)); background: var(--surface-base); border-bottom: 1px solid var(--border-default); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.sheet-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sheet-title h2 { margin: 0; min-width: 0; flex: 1 1 auto; font-size: 1.35rem; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-summary { padding: .9rem max(1.5rem, env(safe-area-inset-right, 0px)) .2rem max(1.5rem, env(safe-area-inset-left, 0px)); }
.sheet-summary .drawer-amount { margin: 0 0 .4rem; }
.sheet-summary .muted { margin: 0 0 .5rem; }
.sheet-grid { padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); }
.drawer .dcard h3 .icon + * , .drawer .dcard h3 { overflow-wrap: anywhere; }
.drawer .history li { overflow-wrap: anywhere; }
.drawer .dcard .tags-empty, .drawer .dcard > p.muted { text-align: left; }
@media (max-width: 760px) {
  .sheet-head { padding: .5rem max(1rem, env(safe-area-inset-right, 0px)) .5rem max(1rem, env(safe-area-inset-left, 0px)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .sheet-title h2 { font-size: 1.2rem; }
  .sheet-summary { padding: .7rem max(1rem, env(safe-area-inset-right, 0px)) .1rem max(1rem, env(safe-area-inset-left, 0px)); }
  .sheet-grid { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
}
body.modal-open { overflow: hidden; }

/* the wide Balances matrix still scrolls sideways: show that it does */
.table-scroll { background: linear-gradient(to right, var(--surface-raised) 30%, transparent), linear-gradient(to left, var(--surface-raised) 30%, transparent) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.35), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), transparent) 100% 0; background-repeat: no-repeat; background-size: 2.5rem 100%, 2.5rem 100%, .9rem 100%, .9rem 100%; background-attachment: local, local, scroll, scroll; }

/* ---- Ask on phones ------------------------------------------------------------------------------------------------------- */
.ask-form { flex-wrap: wrap; }
#ask-status { flex: 1 1 100%; order: 5; min-height: 1.2em; font-size: .9rem; }
/* the live bubble's line while a turn runs: a dot that pulses, so a wait never looks like a stall */
.ask-working { display: flex; align-items: center; gap: .5rem; }
.ask-working::before { content: ''; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--clay-500); animation: ask-pulse 1.1s ease-in-out infinite; }
@keyframes ask-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.proposal { min-width: 0; max-width: 100%; }
.proposal-merchants .radio { flex-wrap: nowrap; align-items: flex-start; }
.proposal-merchants .radio input { flex: none; margin-top: .2rem; }
.proposal .table-scroll { max-width: 100%; }
@media (max-width: 700px) {
  .proposal table.compact { display: block; }
  .proposal table.compact tbody, .proposal table.compact tr { display: block; }
  .proposal table.compact tr { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; padding: .35rem 0; border-bottom: 1px solid var(--border-subtle); }
  .proposal table.compact td { display: block; padding: 0; border: 0; overflow-wrap: anywhere; }
  .proposal table.compact td:nth-child(1) { grid-column: 1; color: var(--text-secondary); font-size: .85rem; }
  .proposal table.compact td:nth-child(2) { grid-column: 1; font-weight: 600; }
  .proposal table.compact td:nth-child(3) { grid-column: 1; color: var(--text-muted); font-size: .85rem; }
  .proposal table.compact td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
  .transcript { overflow-x: hidden; }
  .md pre, .md code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .ask-body { overflow-wrap: anywhere; }
}

/* ---- touch devices of any width (tablets): comfortable targets and no iOS zoom on focus ---------------------------------- */
@media (pointer: coarse) {
  button, ui-picker, input:not([type=checkbox]):not([type=radio]), textarea, summary { min-height: var(--touch-min); }
  input, ui-picker, textarea { font-size: 1rem; }
  nav button, .icon-btn, .alerts-btn, .org-select { min-height: var(--touch-min); min-width: var(--touch-min); }
  td ui-picker, td input[type=text], td input[type=number], td button:not(.link):not(.primary) { height: auto; min-height: var(--touch-min); }
  button.link { min-height: var(--touch-min); display: inline-flex; align-items: center; }
  th .sorthead { min-height: var(--touch-min); }
  input[type=checkbox], input[type=radio] { width: 1.5rem; height: 1.5rem; min-height: 0; }
  label.radio, label.inline { min-height: var(--touch-min); display: flex; align-items: center; }
}

/* ---- small text: nothing under 12px ------------------------------------------------------------------------------------- */
.tabbar button { font-size: .75rem; }
.alerts-count, .badge, td .badge { font-size: .75rem; }
.select-page-m[hidden] { display: none !important; }
.month-nav .link, #budget-today, #reports .link { white-space: nowrap; }
.proposal .table-scroll, table.stack ~ *, .tx-groups .table-scroll { background: none; }

/* ---- design-system fidelity (checked against the published components): buttons 14px corners, Stat tiles = 20px corners + clay display number at weight 500 ---- */
.tile { border-radius: var(--radius-lg); }
.tile-value { font-weight: var(--weight-medium); color: var(--text-accent); }
.tile-value.neg { color: var(--neg-text); } .tile-value.pos { color: var(--pos-text); }
td button:not(.link):not(.primary) { border-radius: var(--radius-xs); }
@media (min-width: 701px) and (pointer: fine) { main { padding-bottom: 6rem; } }