/* Public pages and client workspaces; existing desktop and admin layouts stay scoped. */
@media(max-width:1050px){
 .public-header :is(.language-trigger,.public-auth-toggle){min-width:44px;min-height:44px}
 .public-header .public-auth-dropdown{width:320px;max-width:calc(100vw - 32px);max-height:calc(100svh - 110px);overscroll-behavior:contain}
 .public-header .public-menu-links a{min-height:48px;font-size:14px}
}
@media(max-width:999px){
 .public-page :is(.text-link,.contact-address),.public-footer .public-contact-links a{display:inline-flex;align-items:center;min-height:44px}
 body[data-workspace=client] .app-workspace{min-width:0;max-width:100%;min-height:100svh}
 body[data-workspace=client] .app-topbar{position:sticky;top:0;z-index:45;margin:0;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));min-height:68px;background:var(--solid);gap:8px}
 body[data-workspace=client] .app-breadcrumb{min-width:0;flex:1;font-size:13px}
 body[data-workspace=client] .app-breadcrumb>span,body[data-workspace=client] .app-breadcrumb>i{display:none}
 body[data-workspace=client] .app-breadcrumb strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body[data-workspace=client] .topbar-actions{gap:4px;flex:none}
 body[data-workspace=client] .top-avatar{display:none}
 body[data-workspace=client] .app-topbar .icon-button{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px;padding:10px}
 body[data-workspace=client] .app-topbar .icon{width:20px;height:20px}
 body[data-workspace=client] .language-trigger{min-height:44px}
 body[data-workspace=client] .app-rail{width:min(320px,calc(100vw - 48px));left:12px;right:auto;top:max(12px,env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(calc(-100% - 24px));padding:16px 12px;overscroll-behavior:contain;scroll-padding-block:16px}
 body[data-workspace=client].nav-open .app-rail{transform:translateX(0)}
 body[data-workspace=client] .rail-brand{padding:0 4px 18px;padding-inline-end:48px}
 body[data-workspace=client] .rail-mobile-close{display:inline-flex;position:absolute;top:14px;inset-inline-end:12px;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--subtle);border-radius:12px}
 body[data-workspace=client] .rail-workspace{margin-bottom:12px}
 body[data-workspace=client] .rail-link{min-height:48px;padding:12px;font-size:14px;line-height:1.4;gap:12px}
 body[data-workspace=client] .rail-workspace-switch{min-height:44px;line-height:1.4}
 body[data-workspace=client] .rail-user{margin-top:16px;padding-top:16px}
 body[data-workspace=client] .rail-user .icon-button{min-width:44px;min-height:44px}
 body[data-workspace=client] .app-content{padding:22px 16px 0;min-width:0}
 body[data-workspace=client] .app-footer{padding:20px 16px max(20px,env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px;overflow-wrap:anywhere}
 body[data-workspace=client] .app-footer-links{flex-wrap:wrap;gap:12px}
 body[data-workspace=client] .app-footer-links a{display:inline-flex;align-items:center;min-height:44px}
 body[data-workspace=client] :is(.page-heading,.dashboard-heading)>div{min-width:0}
 body[data-workspace=client] :is(h1,h2,h3){overflow-wrap:anywhere}
 body[data-workspace=client] :is(.button,.button.small){min-height:44px;font-size:13px;padding:10px 13px;line-height:1.4;white-space:normal}
 body[data-workspace=client] .icon-button{min-width:44px;min-height:44px}
 body[data-workspace=client] :is(.text-button,.text-link,.statistics-sort,.statistics-days-mode button){min-height:44px}
 body[data-workspace=client] :is(input:not([type=checkbox]):not([type=radio]),textarea,select){font-size:16px;min-height:44px;max-width:100%}
 body[data-workspace=client] :is(input[type=checkbox],input[type=radio]){width:20px;height:20px;flex:none}
 body[data-workspace=client] .dashboard-select-trigger{min-height:46px;height:auto;font-size:14px}
 body[data-workspace=client] .rate-filter>.dashboard-select--global .dashboard-select-trigger,
 body[data-workspace=client] .rate-choice>.dashboard-select--global .dashboard-select-trigger{min-height:46px;height:auto;padding-inline:10px;font-size:14px}
 body[data-workspace=client] .statistics-column-sort,
 body[data-workspace=client] .statistics-view-toggle button,
 body[data-workspace=client] .rate-mode button{min-height:44px}
 body[data-workspace=client] .dashboard-select--autocomplete input.dashboard-select-trigger{font-size:16px}
 body[data-workspace=client] :is(.panel,.stack,.two-col,.stats,.stat,.table-wrap,.statistics-page,.rate-selection,.manual-row,.overview-grid,.activity-grid,.dashboard-aside){min-width:0;max-width:100%}
 body[data-workspace=client] .stat-value{overflow-wrap:anywhere;white-space:normal;font-variant-numeric:tabular-nums}
 body[data-workspace=client] :is(.panel-head,.panel-footer,.chart-summary,.statistics-pagination,.hold-pagination){flex-wrap:wrap;gap:12px}
 body[data-workspace=client] .panel-head>div{min-width:0}
 body[data-workspace=client] :is(.table-wrap,.live-table-scroll){overflow:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 body[data-workspace=client] .table-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
 body[data-workspace=client] :is(.statistics-pagination,.hold-pagination)>div{flex-wrap:wrap;gap:8px}
 body[data-workspace=client] .manual-row-actions .button{min-height:44px}
 body[data-workspace=client] .manual-message{min-width:0}
 body[data-workspace=client] .manual-message p{font-size:14px}
 body[data-workspace=client] :is(.manual-phone,.manual-code) .promo-copy-button{min-width:44px;min-height:44px}
 body[data-workspace=client] .contacts-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* Keep the existing dialog and dropdown controllers, including Safari touch focus. */
 body:not([data-workspace=admin]) #dialog{max-width:580px;width:calc(100% - 24px);max-height:calc(100svh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;margin:auto}
 body:not([data-workspace=admin]) #dialog .dialog-head{position:sticky;top:0;z-index:2;background:var(--solid);padding:18px 20px;gap:10px}
 body:not([data-workspace=admin]) #dialog .dialog-head h2{min-width:0;overflow-wrap:anywhere;line-height:1.35}
 body:not([data-workspace=admin]) #dialog .dialog-body{padding:18px 20px 22px;min-width:0}
 body:not([data-workspace=admin]) #dialog :is(input:not([type=checkbox]):not([type=radio]),textarea,select){font-size:16px;min-height:46px;max-width:100%}
 body:not([data-workspace=admin]) #dialog :is(.button,.icon-button){min-height:44px;min-width:44px}
 body:not([data-workspace=admin]) #dialog .dialog-actions{flex-wrap:wrap;gap:10px}
 body:not([data-workspace=admin]) #dialog .dialog-actions .button{flex:1;white-space:normal}
 body:not([data-workspace=admin]) #dialog .dialog-note{font-size:14px}
 body:not([data-workspace=admin]) #dialog :is(.field,.form-grid,.rate-choices,.sms-full-meta){min-width:0;max-width:100%}
 body:not([data-workspace=admin]) .dashboard-select-popup .dashboard-select-option{min-height:44px;font-size:14px}
 body:not([data-workspace=admin]) .dashboard-select-popup .dashboard-select-search input{min-height:44px;font-size:16px}
 body:not([data-workspace=admin]) .language-search input{font-size:16px}
}
@media(max-width:600px){
 .public-header{position:sticky;top:max(10px,env(safe-area-inset-top));z-index:40;margin:10px 12px 0;padding:10px 12px;gap:12px;border-radius:18px}
 .public-header-actions{gap:8px}
 .public-header .brand-name{font-size:23px;letter-spacing:-.8px}
 .public-header .brand-mark{width:28px;height:28px}
 .crystal-hero{padding:36px 20px 24px}
 .crystal-hero h1{font-size:clamp(29px,8.8vw,39px);line-height:1.15;letter-spacing:-1.2px;overflow-wrap:anywhere}
 .crystal-hero>p{font-size:15px;line-height:1.7}
 .hero-actions{flex-direction:column;align-items:stretch;gap:10px;max-width:340px;margin-inline:auto}
 .hero-actions .button{width:100%;min-height:48px;font-size:14px}
 .hero-actions>.text-link{min-height:44px;font-size:14px}
 .hero-flow{flex-wrap:wrap;gap:10px;line-height:1.5}
 .public-section{padding-inline:20px;min-width:0}
 .public-section h2{font-size:clamp(25px,7.2vw,32px);line-height:1.25;overflow-wrap:anywhere}
 .public-page :is(.section-heading>p,.how-card p,.referral-banner p,.api-section p,.contact-card p){font-size:14px;line-height:1.7}
 .how-card{padding:22px 20px}
 .how-card>div{inset-inline-start:20px}
 .how-card :is(h3,p){overflow-wrap:anywhere}
 .referral-banner{padding:24px;gap:20px}
 .referral-banner>div:first-child{width:100%;min-width:0}
 .referral-banner .button{min-height:48px;max-width:100%;width:100%;white-space:normal;font-size:14px}
 .referral-number{font-size:80px;letter-spacing:-4px}
 .public-page .api-preview{min-width:0;max-width:100%}
 .public-page .api-preview pre{overflow:auto;max-width:100%;padding:20px 16px;font-size:12px;-webkit-overflow-scrolling:touch}
 .public-page .faq-question{min-height:56px;font-size:14px}
 .public-page :is(.text-link,.contact-address){min-height:44px;overflow-wrap:anywhere}
 .public-page .contact-card{min-width:0;padding:22px}
 .public-page .contact-card .button{min-height:48px;white-space:normal;font-size:14px}
 .public-footer{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:24px 0 max(24px,env(safe-area-inset-bottom))}
 .public-footer .brand-link{align-self:flex-start}
 .public-footer .public-contact-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;width:100%;min-width:0}
 .public-footer .public-contact-links a{display:flex;align-items:center;min-height:44px;font-size:13px;overflow-wrap:anywhere}
 .public-footer .public-contact-links a[href^="mailto:"]{grid-column:1/-1}
 body[data-workspace=client] .app-content{padding:20px 14px 0}
 body[data-workspace=client] :is(.page-heading,.dashboard-heading){gap:16px;margin-bottom:20px}
 body[data-workspace=client] .page-heading>.button{width:100%}
 body[data-workspace=client] .dashboard-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
 body[data-workspace=client] .dashboard-filters>.dashboard-select:nth-child(2){grid-column:1/-1;grid-row:2}
 body[data-workspace=client] .overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body[data-workspace=client] .overview-metrics>.compact-stat:last-child{grid-column:1/-1;flex-direction:row;align-items:center}
 body[data-workspace=client] .compact-label{white-space:normal;overflow-wrap:anywhere;font-size:13px}
 body[data-workspace=client] .compact-value{font-size:27px;overflow-wrap:anywhere}
 body[data-workspace=client] .balance-card{padding:22px}
 body[data-workspace=client] .balance-card>strong{font-size:clamp(29px,9vw,38px);overflow-wrap:anywhere}
 body[data-workspace=client] .balance-card>div{flex-wrap:wrap;gap:12px}
 body[data-workspace=client] .balance-card .text-button{padding:8px 0}
 body[data-workspace=client] .activity-grid{grid-template-columns:minmax(0,1fr)}
 body[data-workspace=client] .activity-panel .panel-head{flex-wrap:wrap;align-items:flex-start}
 body[data-workspace=client] .activity-panel .panel-head>.dashboard-select{width:100%;max-width:none}
 body[data-workspace=client] .sms-chart{height:200px;max-width:100%}
 body[data-workspace=client] .chart-summary{padding:16px;gap:10px;font-size:13px}
 body[data-workspace=client] .referral-card{display:flex;flex-wrap:wrap;gap:10px;padding:20px}
 body[data-workspace=client] .referral-card>strong{font-size:50px;margin:0 0 0 auto}
 body[data-workspace=client] .referral-card>p{flex-basis:100%;margin:0;font-size:13px}
 body[data-workspace=client] .referral-card>.text-link{max-width:none;width:100%;justify-content:flex-start;font-size:14px}
 body[data-workspace=client] .rate-mode{display:flex}
 body[data-workspace=client] .rate-mode button{flex:1;min-width:0;min-height:44px;padding:10px;font-size:13px;white-space:normal}
 body[data-workspace=client] .rate-toolbar{grid-template-columns:minmax(0,1fr);padding:12px;gap:10px}
 body[data-workspace=client] .rate-choices{grid-template-columns:minmax(0,1fr)}
 body[data-workspace=client] .rate-group summary{padding:14px;min-height:56px;gap:10px}
 body[data-workspace=client] .rate-group-title strong{font-size:14px}
 body[data-workspace=client] .rate-group-amount{max-width:42%;overflow-wrap:anywhere}
 body[data-workspace=client] .referral-link input{width:100%;min-width:0;font-size:16px}
 body[data-workspace=client] .referral-link .button{flex:1}
 body[data-workspace=client] .contacts-cards{grid-template-columns:minmax(0,1fr)}
 body[data-workspace=client] .contact-address{overflow-wrap:anywhere}
 /* Record lists become labelled cards; comparison reports keep local scrolling. */
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards]{overflow:visible}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] table{display:block;width:100%;min-width:0}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] tbody{display:grid;gap:12px;padding:12px}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] tr{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--solid);min-width:0}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] td{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);align-items:start;gap:6px 12px;border:0;padding:4px 0;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:13px}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] td::before{content:attr(data-label);grid-column:1;grid-row:1;font-size:12px;font-weight:600;line-height:1.5;color:var(--muted)}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] td>*{min-width:0;max-width:100%;grid-column:2}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] td[data-label=""]{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] td[data-label=""]::before{display:none}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] .row-actions{flex-wrap:wrap;width:100%;justify-content:flex-end;gap:8px}
 body[data-workspace=client] .table-wrap[data-mobile-layout=cards] .row-actions .button{flex:1}
 body:not([data-workspace=admin]) #dialog .two-col{grid-template-columns:minmax(0,1fr);gap:12px}
 body:not([data-workspace=admin]) #dialog .dashboard-select-trigger{min-height:48px}
}
@media(max-width:999px){
 html[dir=rtl] body[data-workspace=client] .app-rail{left:auto;right:12px;transform:translateX(calc(100% + 24px))}
 html[dir=rtl] body[data-workspace=client].nav-open .app-rail{transform:translateX(0)}
 html[dir=rtl] body[data-workspace=client] .app-workspace{margin-right:0}
}