becomes a bordered card; each | is a "Label: control" line.
Labels come from the fixed column order via :nth-child ::before — the
markup/order in renderRows is unchanged, no data-label needed. Every
field stays visible + editable; nothing is hidden. Desktop is untouched
(all rules live inside this @media block). */
table.encode{min-width:0;width:100%;display:block;}
table.encode thead{display:none;}
table.encode tbody{display:block;}
table.encode tr{
display:block;border:1px solid var(--border);border-radius:8px;
background:var(--surface);padding:6px 10px 10px;margin-bottom:12px;
}
table.encode td{
display:flex;align-items:center;gap:8px;width:auto !important;
padding:5px 0;border-bottom:1px solid var(--border);
}
table.encode tr td:last-child{border-bottom:none;}
table.encode td::before{
flex:0 0 40%;max-width:40%;
font-size:11px;text-transform:uppercase;letter-spacing:.03em;
color:var(--text-secondary);font-weight:600;
}
/* Column-order labels (renderRows td order is fixed). */
table.encode td:nth-child(1)::before{content:"#";}
table.encode td:nth-child(2)::before{content:"Item";}
table.encode td:nth-child(3)::before{content:"Category";}
table.encode td:nth-child(4)::before{content:"Subcategory";}
table.encode td:nth-child(5)::before{content:"Department";}
table.encode td:nth-child(6)::before{content:"Type";}
table.encode td:nth-child(7)::before{content:"Qty";}
table.encode td:nth-child(8)::before{content:"Unit";}
table.encode td:nth-child(9)::before{content:"Unit price";}
table.encode td:nth-child(10)::before{content:"Total";}
table.encode td.rowdel::before{display:none;}
/* Row number: small muted line, not a full-height cell. */
table.encode td:nth-child(1){
justify-content:flex-start;color:var(--text-muted);font-size:12px;
padding-top:2px;padding-bottom:2px;border-bottom:none;
}
table.encode td:nth-child(1)::before{color:var(--text-secondary);}
/* The field control fills the remaining width of each line. */
table.encode td > input,
table.encode td > select,
table.encode td > .cellfill{flex:1 1 auto;min-width:0;}
table.encode input,table.encode select{
border:1px solid var(--border);background:var(--surface);
}
/* Remove (✕) control: right-aligned, no label. */
table.encode td.rowdel{justify-content:flex-end;}
/* 2B scan cue stays intact inside the stacked line — amber bar + PHOTO chip. */
table.encode td .cellfill.scanned{padding:2px 4px;}
/* Snap-invite on phones: hide the camera glyph, let the text use the full
width, and stretch the two buttons edge-to-edge on their own line. */
.scan-invite{gap:10px;}
.scan-invite-icon{display:none;}
.scan-invite > span:last-of-type{width:100%;}
.scan-invite .btn{flex:1;min-width:0;}
.detail-grid{grid-template-columns:1fr;}
.totals-bar{gap:16px;}
.filter-bar{padding:10px 12px;}
/* The 2-up card grid moves onto the BAND, not the strip: the strip stacks
its bands, each band lays its own figures out two across. Left on the
strip, the grid items would be the bands rather than the figures and the
whole phone layout would collapse into three tall single columns. */
.ap-summary{display:flex;flex-direction:column;gap:12px;}
.ap-summary-section{display:flex;flex-direction:column;gap:8px;}
.ap-summary-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;}
.ap-summary-headline,.ap-summary-note{grid-column:1/-1;}
.ap-summary-divider{grid-column:1/-1;align-self:auto;border-left:0;border-top:1px solid var(--border);padding:10px 0 0;}
.ap-summary-group{min-width:0;}
.ap-summary-value{white-space:normal;}
.ap-summary-marker{display:block;}
.save-bar{flex-wrap:wrap;}
.save-bar .btn{flex:1;min-width:140px;}
.lightbox img{max-width:95%;max-height:90%;}
/* Panel headers now carry controls (search, selects, buttons) — let them wrap. */
.panel-header{flex-wrap:wrap;gap:8px;row-gap:8px;}
.panel-header > span{flex-wrap:wrap;max-width:100%;}
.panel-header input[type="search"]{width:100% !important;min-width:0;}
.panel-header select{max-width:46vw;}
/* Stat cards: 2-up needs smaller values so peso amounts fit. */
.card-stat .value{font-size:17px;word-break:break-word;}
/* Dashboard: Sales Trend + Top Categories stack instead of squeezing 2-up. */
#dashSalesRow{grid-template-columns:1fr !important;}
.dash-money-grid{grid-template-columns:minmax(0,1fr);}
.dash-money-period{width:100%;}
.dash-money-period .filter-btn{flex:1 1 auto;padding:7px 8px;}
/* Costing: recipe list + detail stack on phones. */
#costRecipeRow{grid-template-columns:1fr !important;}
/* Toasts span the phone width instead of hugging a 360px column. */
#toastWrap{left:12px;right:12px;max-width:none;}
/* Keep the typed Clear confirmation readable without iOS input zoom. */
#invClearName{font-size:16px;}
/* Modals: tighter padding, near-full width. */
.modal{padding:14px 8px;}
.modal-card{padding:18px 14px;}
.modal-close{top:8px;right:8px;}
.ob-compare-grid{grid-template-columns:minmax(86px,1.1fr) repeat(2,minmax(0,1fr));font-size:11.5px;}
.ob-compare-grid > div{padding:6px 5px;}
#tplModal .modal-card{padding:16px 10px;}
.tpl-mode-row{align-items:stretch;}
.tpl-mode-switch{width:100%;}
.tpl-mode-switch button{flex:1;}
.tpl-toolbar{gap:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
.tpl-toolbar button,.tpl-toolbar select{flex:0 0 auto;min-height:40px;}
.tpl-visual{min-height:280px;max-height:44vh;padding:13px 10px;font-size:15px;}
.tpl-insert-list{max-height:112px;overflow-y:auto;align-content:flex-start;}
.tpl-preview iframe{height:300px;}
/* Receipt & POS line items: stack each item as labeled rows instead of a
wide table that scrolls off-screen. Labels come from each td's
data-label, so tables with different column orders all read correctly.
No horizontal scroll, nothing clipped. */
.rv-items{display:block;min-width:0;}
.rv-items thead{display:none;}
.rv-items tbody{display:block;}
.rv-items tbody tr{
display:block;border:1px solid var(--border);border-radius:8px;
background:var(--surface-2);padding:2px 10px;margin-bottom:10px;
}
.rv-items tbody td{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:7px 0;border-bottom:1px solid var(--border);
text-align:right;white-space:normal;
}
.rv-items tbody tr td:last-child{border-bottom:none;}
.rv-items tbody td::before{
content:attr(data-label);flex:0 0 auto;text-align:left;
font-size:11px;text-transform:uppercase;letter-spacing:.03em;
color:var(--text-secondary);font-weight:600;
}
.rv-items tfoot{display:block;}
.rv-items tfoot tr{display:flex;justify-content:flex-end;gap:12px;padding:8px 2px 0;font-weight:700;}
.rv-items tfoot td{padding:0;border:none;}
/* Ron Assist: size the chat to the small viewport (dvh tracks the URL bar). */
#view-ronassist > .panel{height:calc(100vh - 190px) !important;height:calc(100dvh - 190px) !important;min-height:400px;}
.ron-msg{max-width:92%;}
/* Time clock name grid: 2-up tap targets. */
#tcGrid{grid-template-columns:repeat(2,1fr) !important;}
/* Day close (per-wallet): each wallet stacks into a full-width block —
counted box, reason and Close button each on their own line, tappable. */
#cfDayClosePanel .dc-row{flex-direction:column;align-items:stretch;gap:8px;}
/* flex-basis is a HEIGHT once the row turns into a column, so the wallet
name block's `flex:1 1 150px` reserved 150px for ~40px of text — about
110px of dead white space per wallet, four times over, on the phone
where the day actually gets closed. */
#cfDayClosePanel .dc-row > div{width:100%;flex:0 0 auto !important;}
#cfDayClosePanel .dc-count{justify-content:space-between;}
#cfDayClosePanel .dc-row input{width:100% !important;box-sizing:border-box;flex:1 1 auto;}
#cfDayClosePanel .dc-row .btn{width:100%;}
#cfDayClosePanel .dc-row span[id^="dc-var-"]{text-align:left !important;min-width:0;}
/* No modal ever wider than the screen (inline max-widths are overridden). */
.modal-card{max-width:100% !important;}
/* Purchasing item-row editors (request + PO modals): the fixed Qty/Unit/₱
columns squeezed the Item input to ~1 character on phones. Stack each
line — Item full-width on top, qty/unit/price + ✕ underneath. */
.item-rows-table{display:block;}
.item-rows-table thead{display:none;}
.item-rows-table tbody{display:block;}
.item-rows-table tr{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.item-rows-table td{display:block;width:auto !important;padding:0;border:none;}
.item-rows-table td:first-child{grid-column:1/-1;}
.item-rows-table input{width:100% !important;box-sizing:border-box;}
/* Permissions matrix on a phone: the sticky permission name is what makes
sideways scrolling survivable, so keep it — just narrow it and drop the
hint text (the label carries the meaning). */
/* Must match the desktop rule's specificity (`.perm-table thead th.perm-h-area`)
or the 250px min-width wins and eats two thirds of a phone screen. */
.perm-table thead th.perm-h-area{min-width:148px;}
.perm-table tbody td:first-child{min-width:148px;}
.perm-hint{display:none;}
.perm-h-role{min-width:72px;}
.perm-table th,.perm-table td{padding:8px 7px;}
.perm-actions{justify-content:stretch;}
.perm-actions .btn{flex:1;}
/* Inventory: :hover doesn't fire reliably on a touch screen, so the
fade-on-hover row actions (desktop, above) stay always-on on a phone —
a tap must not need a hover it can't produce. */
#invItemsBody tr .acts, #invHeldBody tr .acts{opacity:1;}
.inv-more-menu{max-width:calc(100vw - 16px);}
#payHelpDrawer{width:100%;}
#payHelpDrawer .payhelp-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:480px){
.rep-statement-panels{grid-template-columns:minmax(0,1fr);}
.rep-group-cue{font-size:0;width:16px;flex:0 0 16px;text-align:center;}
.rep-group-cue::after{content:"›";font-size:19px;}
}
@media (max-width:400px){
.dash-money-grid{grid-template-columns:minmax(0,1fr) !important;}
.dash-money-block .cards{grid-template-columns:minmax(0,1fr) !important;}
.dash-money-block .dash-money-big{white-space:nowrap;}
.rep-statement-panel{padding:14px;}
.rep-statement-line{gap:6px;}
.rep-line-name{font-size:11px;}
.rep-line-share{font-size:10px;}
.rep-line-amount{font-size:11px;}
}
/* Routine checklist: the grid is wider than a phone, so the chore's NAME stays
put while the dates scroll under it — the same reason the permissions matrix
pins its first column. Without it you scroll right and lose which row you are
reading, which is the only thing that makes the ticks mean anything. */
.routine-table th:first-child, .routine-table td:first-child{
position:sticky;left:0;z-index:1;background:var(--surface);
/* box-shadow, not border-right: a border on a sticky cell scrolls with the
table's own border-collapse and leaves a gap. */
box-shadow:1px 0 0 var(--border);
}
.routine-table thead th:first-child{background:var(--surface-2,var(--surface));}
/* ---- Kiosk PIN pad: must fit ANY screen, punch buttons always reachable ----
These rules are keyed on HEIGHT, not width, and therefore deliberately live
outside the max-width:720px block above. The devices that break here are
phones in LANDSCAPE — 844px wide but only 390px tall — which no width query
would ever match. The kiosk is wall-mounted or handheld, so landscape is the
normal orientation, not an edge case. */
.kiosk-pad-card{
background:var(--surface);border-radius:16px;width:min(330px,92vw);text-align:center;
box-shadow:0 12px 40px rgba(0,0,0,.3);
display:flex;flex-direction:column;
/* dvh tracks the collapsing browser chrome on mobile; vh is the fallback for
engines without it, and is merely conservative rather than wrong. */
max-height:calc(100vh - 20px);
max-height:calc(100dvh - 20px);
margin:auto; /* centres while still allowing the overlay to scroll — with
align-items:center alone an overflowing card is clipped at
the TOP and that part becomes unreachable. */
}
/* min-height:0 is what actually lets this shrink; a flex item defaults to
min-height:auto and would refuse to become shorter than its content, pushing
the footer off-screen exactly as before. */
.kiosk-pad-scroll{overflow-y:auto;min-height:0;flex:1 1 auto;padding:26px 26px 0;}
.kiosk-pad-foot{flex:0 0 auto;padding:10px 26px 18px;}
.kiosk-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
#kioskCam{width:180px;height:135px;}
/* Short screens: shrink so the keypad stays comfortably tappable instead of
being scrolled. The footer is pinned regardless, so this is about keeping
the pad usable, not about reaching the buttons. */
@media (max-height: 700px){
.kiosk-pad-scroll{padding:16px 18px 0;}
.kiosk-pad-foot{padding:8px 18px 12px;}
.kiosk-keys{gap:7px;margin:9px 0;}
.kiosk-keys .btn{padding:9px 10px;}
#kioskCam{width:132px;height:99px;}
#kioskPadName{font-size:18px;}
#kioskPadDots{font-size:24px;height:28px;}
}
@media (max-height: 520px){
/* Landscape phones. Put the camera preview and the keypad side by side so
the pad uses the width it has plenty of instead of the height it has none
of, and drop the ornamental bits. */
.kiosk-pad-card{width:min(560px,96vw);}
.kiosk-pad-scroll{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px 0;}
.kiosk-pad-scroll > .kiosk-keys{flex:1 1 auto;margin:0;}
.kiosk-pad-side{flex:0 0 auto;max-width:44%;}
.kiosk-pad-foot{padding:8px 14px 10px;}
.kiosk-keys{gap:6px;}
.kiosk-keys .btn{padding:7px 10px;font-size:15px;}
#kioskCam{width:104px;height:78px;margin:0 0 4px;}
#kioskCamNote{display:none !important;} /* the preview itself says it */
#kioskPadName{font-size:15px;}
#kioskPadSub{font-size:12px;margin-bottom:6px;}
#kioskPadDots{font-size:20px;height:22px;letter-spacing:7px;}
#kioskPadMsg{margin-top:6px;min-height:0;font-size:13px;}
}
/* Ordinary modals already scroll (.modal is align-items:flex-start with
overflow-y:auto), so nothing in them is unreachable — but 36px of padding
top and bottom is 72px of a 390px-tall landscape phone spent on nothing.
Give it back; the in-app time-clock PIN modal then fits without scrolling. */
@media (max-height: 560px){
.modal{padding:10px 12px;}
.modal-card{padding:16px 16px;}
}
/* Public schedule link (#schedView). Two renderings of the same data; only one
shows. Below 900px the day-grouped list (the phone layout chosen deliberately
in #314) is exactly what shipped; at 900px and up the container widens and a
Monday-first fortnight grid takes its place. Decided by width, never by user
agent, and with no state. */
/* The public schedule container: 560px for the phone-first day list; the
>=900px rule below widens it for seven columns. The width lives HERE and
not on the element's inline style, because an inline max-width beats any
class rule and silently pins the grid at 560px (seen in a real browser). */
.sched-wrap{max-width:560px;}
.sched-grid{display:none;}
@media (min-width:900px){
#schedView .sched-wrap{max-width:1180px;}
.sched-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;}
.sched-list{display:none;}
}
.sched-cell{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:8px 9px;min-height:118px;min-width:0;}
.sched-cell.today{border-color:var(--accent);border-width:2px;}
.sched-cell.past{opacity:.62;}
.sched-cell-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.sched-cell-wd{font-weight:700;font-size:12.5px;}
.sched-cell-dt{font-size:11px;color:var(--text-secondary);}
.sched-cell-today{font-size:10px;font-weight:700;color:var(--accent);}
.sched-row{padding:4px 0;border-top:1px solid var(--border-light,rgba(0,0,0,.05));min-width:0;}
.sched-row-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sched-row-when{font-size:11.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums;line-height:1.3;white-space:normal;}
.sched-row-when.rest{color:var(--text-muted);}
.sched-row-dep{font-size:10.5px;color:var(--text-muted);white-space:normal;overflow-wrap:anywhere;}
.sched-cell-empty{font-size:11.5px;color:var(--text-muted);padding-top:4px;}
/* Payroll review: people, their days, then the existing day editor. */
.pay-decision-done { background: var(--success-bg); }
/* The people list fills its card: Employee takes the slack, the figures sit right-aligned
in tabular numerals so ₱0.96 and ₱600.00 line up. No min-width, so it fits at 375px. */
.pay-decision-people { width:100%; border-collapse:collapse; }
.pay-decision-people th { text-align:left; }
.pay-decision-people th, .pay-decision-people td { padding:10px; }
.pay-decision-people th:first-child { width:100%; }
.pay-decision-people th.r, .pay-decision-people td.r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pay-decision-people td:last-child, .pay-decision-people th:last-child { white-space:nowrap; }
.pay-decision-name { color:var(--accent); text-decoration:underline; background:none; border:0; text-align:left; }
/* The name is a link, as in the mockup, not a raised pill: drop the .btn shadow and padding. */
.btn.pay-decision-name { box-shadow:none; padding:2px 0; min-height:0; border-radius:0; transform:none; }
.attendance-time-edit { font-size:12.5px; color:var(--warning); background:var(--warning-bg); border-radius:6px; padding:6px 9px; margin-top:5px; width:fit-content; overflow-wrap:anywhere; max-width:100%; }
#attTimeEdits:not(:empty) { margin-bottom:14px; }
.pay-decision-day { display:grid; grid-template-columns:1fr auto; gap:10px 14px; padding:14px 10px; border-bottom:1px solid var(--border); }
.pay-decision-day.pay-decision-tickable { grid-template-columns:44px minmax(0,1fr) auto; }
.pay-decision-tick-hit { min-width:44px; min-height:44px; display:flex; align-items:flex-start; justify-content:center; box-sizing:border-box; cursor:pointer; }
.pay-decision-tick { width:18px; height:18px; margin:2px 0 0; }
.pay-decision-tick-all { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.pay-decision-tick-all input { width:18px; height:18px; margin:0; }
.pay-decision-tick-all[hidden], #payDecisionPersonDeclineSelected[hidden] { display:none; }
.pay-decision-time { font-size:13px; font-variant-numeric:tabular-nums; color:var(--text-secondary); }
.pay-decision-note, .pay-decision-reason { font-size:12px; margin-top:4px; color:var(--text-secondary); overflow-wrap:anywhere; }
.pay-decision-actions, .pay-decision-footer { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pay-decision-footer { padding-top:16px; }
.pay-decision-footer span { flex:1; font-size:12px; color:var(--text-secondary); }
.pay-decision-day > [id^="payDecisionReasonBox"] { grid-column:1/-1; background:var(--surface-2); }
.pay-decision-verdict { padding:12px; margin-top:10px; background:var(--surface-2); border-radius:6px; font-size:13px; }
@media(max-width:600px){ .pay-decision-people th, .pay-decision-people td { padding:8px 5px; } }
.pr-post-review{width:min(680px, calc(100vw - 24px));max-width:100%;box-sizing:border-box;}
.pr-post-table{width:100%;border-collapse:collapse;}
.pr-post-table th,.pr-post-table td{padding:8px 4px;white-space:normal;overflow-wrap:anywhere;}
.pr-post-table th:first-child,.pr-post-table td:first-child{width:31%;min-width:84px;text-align:left;}
.pr-post-table th:not(:first-child),.pr-post-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;}
/* A peso figure never breaks mid-number ("₱23,000.0" / "0" on a 375px phone,
QA on #533). Auto layout lets each figure column take its figure's width;
when the figures outgrow the card, the table scrolls inside its own
.table-scroll box, never the page. Headers still wrap, but only between words. */
.pr-post-table tbody th:not(:first-child),.pr-post-table tbody td:not(:first-child){white-space:nowrap;overflow-wrap:normal;}
.pr-post-table thead th:not(:first-child){overflow-wrap:normal;}
.pr-post-table .pr-post-shortfall{font-size:12px;color:var(--text-secondary);}
@media(max-width:480px){.pr-post-review{padding:14px;}.pr-post-table{font-size:11px;}}
/* Board 10: the read-only detail behind one Planned figure, stacked above
.pr-post-review (see the modal's own comment in index.html for why). */
.pr-post-detail{width:min(560px, calc(100vw - 24px));max-width:100%;box-sizing:border-box;}
.pr-post-detail-sub{color:var(--text-secondary);font-size:13px;margin:2px 0 12px;}
.pr-post-detail-table{width:100%;border-collapse:collapse;margin-bottom:14px;}
.pr-post-detail-table th,.pr-post-detail-table td{padding:7px 6px;text-align:left;white-space:normal;overflow-wrap:anywhere;}
.pr-post-detail-table th:last-child,.pr-post-detail-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pr-post-detail-table .pr-post-detail-empty{color:var(--text-secondary);text-align:center;}
.pr-post-detail-figures{display:grid;grid-template-columns:1fr auto;gap:5px 12px;margin:0 0 10px;}
.pr-post-detail-figures dt{color:var(--text-secondary);}
.pr-post-detail-figures dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;}
.pr-post-detail-warn{color:var(--warning);font-weight:700;}
.pr-post-detail-note{font-size:12px;color:var(--text-secondary);}
@media(max-width:480px){.pr-post-detail{padding:14px;}.pr-post-detail-table{font-size:11px;}}
/* Payroll explanation drawer */
.payhelp-how{font-size:12px;color:var(--accent);cursor:pointer;font-weight:600;margin-left:6px;white-space:nowrap;}
.payhelp-open{margin-left:auto;}
.payhelp-scrim{position:fixed;inset:0;background:rgba(15,20,26,.4);z-index:150;}
.payhelp-drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--surface);z-index:151;box-shadow:0 12px 32px rgba(0,0,0,.25);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);}
.payhelp-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);}
.payhelp-head h3{font-size:17px;margin:0;flex:1;}
.payhelp-head button{border:0;background:none;font-size:24px;cursor:pointer;color:var(--text-secondary);}
.payhelp-settings{padding:10px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:12px;color:var(--text-secondary);}
#payHelpChips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.payhelp-chip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 9px;color:var(--text);font-weight:600;}
.payhelp-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px;border-bottom:1px solid var(--border);}
.payhelp-tabs button{border:0;background:none;padding:7px 10px;border-radius:8px;font-weight:600;font-size:13px;color:var(--text-secondary);white-space:nowrap;cursor:pointer;}
.payhelp-tabs button[aria-selected="true"]{background:var(--accent-light);color:var(--accent);}
#payHelpBody,.payhelp-body{grid-auto-rows:max-content;}
.payhelp-body{flex:1;overflow:auto;padding:16px 18px calc(24px + env(safe-area-inset-bottom,0px));display:grid;gap:14px;align-content:start;line-height:1.5;}
.payhelp-body h4,.payhelp-body p{margin:0;}
.payhelp-body h4{font-size:15px;}
.payhelp-rule{display:grid;gap:4px;border-left:3px solid var(--accent);padding:2px 0 2px 12px;}
.payhelp-rule p{color:var(--text-secondary);}
.payhelp-calc{border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:grid;gap:10px;background:var(--surface-2);}
.payhelp-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.payhelp-fields label{display:grid;gap:3px;font-size:12px;color:var(--text-secondary);}
.payhelp-fields input{min-width:0;width:100%;border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:var(--surface);}
#payHelpResult{font-weight:700;}
.payhelp-table{overflow-x:auto;overflow-y:visible;}
.payhelp-table table{width:100%;border-collapse:collapse;}
.payhelp-table th,.payhelp-table td{padding:7px 8px;border-bottom:1px solid var(--border);text-align:left;}
.payhelp-note{background:var(--warning-bg);padding:10px 12px;border-radius:10px;}
.payhelp-foot{font-size:12px;color:var(--text-secondary);}
|