/* ============================================================
   MOBILE PAGE BODIES — account & tools (registrar)

   Dashboard sections, Settings (profile, security, appearance, financial,
   notifications), Team, WHOIS contacts, Tags, Support, Watchlist and the
   website builder. Builds on mobile-pages.css (table.m-cards, .m-wrap,
   .m-stack) and mobile-shell.css (.mobile-sticky-actions, sheets).

   Every rule sits inside @media (max-width: 767px) (src/lib/mobile.js
   MOBILE_QUERY). The class hooks the pages carry for it (m-dash, m-sms-row,
   m-hit, m-whois-*, m-tag-*, m-ticket*, m-build*, m-refine, ...) have no
   styles at 768px and up, so tablet and desktop render exactly as before.
   ============================================================ */

@media (max-width: 767px) {
  /* ---------- Dashboard ---------- */
  /* Overview stats side by side, compact. */
  .m-dash .bento-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .m-dash .stat-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
  .m-dash .stat-card-icon {
    top: var(--space-3);
    right: var(--space-3);
  }
  .m-dash .stat-card-label {
    padding-right: 36px;
    letter-spacing: 0.04em;
  }
  .m-dash .stat-card-value {
    font-size: var(--text-2xl);
  }
  /* Quick actions: one grouped list per section instead of a card each. */
  .m-dash .quick-action-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
  }
  .m-dash .quick-action-card {
    min-height: 56px;
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: 0;
    background: none;
  }
  .m-dash .quick-action-card + .quick-action-card {
    border-top: 1px solid var(--border-subtle);
  }
  .m-dash .quick-action-card:hover {
    background: none;
  }
  .m-dash .quick-action-card:active {
    background: var(--bg-hover);
  }
  .m-dash .quick-action-icon {
    width: 32px;
    height: 32px;
  }
  .m-dash .section-header {
    margin-bottom: var(--space-3);
  }
  /* Expiring / recent domain cards open the domain: full-card tap feedback. */
  .m-dash table.m-cards tbody tr[tabindex]:active {
    background: var(--bg-hover);
  }

  /* ---------- Settings ---------- */
  /* Password show/hide: a 44px target at the field's right edge. */
  .m-pw-eye {
    right: 0 !important;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
  /* One-time codes keep their large digits (the 16px input floor in
     mobile-pages.css would shrink them). */
  .modal input.m-code-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    font-size: 22px !important;
    min-height: 52px;
  }
  /* Language picker: two columns instead of a 15-row list. */
  .m-lang-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  .m-lang-grid > * {
    min-width: 0;
    min-height: 48px;
    padding: var(--space-2) var(--space-3) !important;
  }
  /* Notification channels: the SMS number gets its own full-width line,
     Verify and the toggle under it. */
  .m-sms-row .m-sms-controls {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap;
    justify-content: space-between !important;
  }
  .m-sms-row .m-sms-phone {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-width: 0;
  }
  .m-sms-phone .form-input {
    min-height: 44px;
  }
  .m-sms-phone select {
    flex-shrink: 1 !important;
    min-width: 0;
    max-width: 42%;
    min-height: 44px;
  }
  .m-sms-phone input {
    min-width: 0;
  }
  /* Notification categories: each checkbox gets a 44px tap cell. */
  .m-notif-table th,
  .m-notif-table td {
    padding-inline: 2px !important;
  }
  .m-notif-table td:first-child {
    padding-left: 0 !important;
  }
  .m-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .m-hit input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  /* ---------- Team (dc-team-kit tables as divided cards) ---------- */
  .page-content .card:has(> table.m-cards) {
    padding-inline: var(--space-4);
  }
  table.m-cards td[data-m="primary"]:has(> div) {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  table.m-cards td[data-m="primary"] > div {
    font-size: var(--text-xs);
    font-weight: 400;
  }
  /* The grant editor that opens under a member: a plain full-width block. */
  table.m-cards td[data-m="full"] {
    display: block;
    text-align: left !important;
    padding: var(--space-2) 0 0;
  }
  table.m-cards tr:has(> td[data-m="full"]) {
    display: block;
    padding-top: 0;
  }
  /* Its grant rows (chip + Edit cap / Remove) wrap instead of overflowing. */
  table.m-cards td[data-m="full"] div:has(> span > .badge) {
    flex-wrap: wrap;
  }
  table.m-cards td[data-m="full"] .badge {
    white-space: normal;
    text-align: left;
  }
  table.m-cards td[data-m="full"] .btn-sm {
    min-height: 44px;
  }
  /* Inside a section card the rows sit flush with the card's own gutter and
     the (hidden) header row leaves no gap or rule behind. */
  .card table.m-cards-flat thead:not(:has(input)) {
    display: none;
  }
  .card table.m-cards-flat tbody tr {
    padding-inline: 0;
  }
  .card:has(#team-invite-email) {
    margin-bottom: var(--space-4);
  }

  /* ---------- WHOIS profiles ---------- */
  .m-whois-card .m-whois-head {
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3) !important;
  }
  .m-whois-card .m-whois-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .m-whois-card .m-whois-title > div:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .m-whois-card .m-whois-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  .m-whois-card .m-whois-actions .btn-ghost {
    margin-right: auto;
  }
  .m-whois-card .m-whois-fields {
    grid-template-columns: 1fr 1fr !important;
  }
  .m-whois-card .m-whois-fields > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ---------- Tags ---------- */
  .m-tag-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
  }
  .m-tag-card {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  }
  .m-tag-card .m-tag-main {
    min-width: 0;
  }
  .m-tag-card .m-tag-main > div:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .modal .color-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: var(--space-2);
  }
  .modal .color-option {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 48px;
    border-radius: var(--radius-md);
  }
  .modal .color-option:hover {
    transform: none;
  }
  .modal .m-color-input {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
  }

  /* ---------- Support ---------- */
  .m-ticket {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3) !important;
  }
  .m-ticket > div:first-child {
    flex: 1 1 auto;
  }
  /* Subjects wrap to two lines rather than one ellipsized line. */
  .m-ticket .m-ticket-subject {
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
  }
  .m-ticket:active {
    background: var(--bg-hover);
  }
  .m-check-row {
    min-height: 44px;
    align-items: center !important;
    font-size: var(--text-sm) !important;
    color: var(--text-secondary) !important;
  }
  .m-check-row input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0 !important;
  }
  .m-reply .btn {
    width: 100%;
  }
  .m-reply > div {
    justify-content: stretch !important;
  }

  /* Row and card actions on these pages: full 44px targets (mobile-pages.css
     floors .btn-sm at 40px). */
  :is(.m-watchlist, .m-dash) table.m-cards .btn,
  .card table.m-cards td[data-m="actions"] .btn,
  .m-whois-actions .btn,
  .m-tag-card .btn-icon {
    min-height: 44px;
  }
  .m-tag-card .btn-icon,
  .m-whois-actions .btn-icon {
    min-width: 44px;
  }

  /* ---------- Website builder ---------- */
  .m-build .card {
    padding: var(--space-4) !important;
  }
  .m-build .form-group + .btn,
  .m-build .card > .btn {
    width: 100%;
    margin-top: var(--space-2);
  }
  .m-build details > summary {
    padding-block: 12px;
    margin-bottom: 0;
  }
  /* Fact rows: inputs stack, the remove button stays at the right. */
  .m-build-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
  }
  .m-build-row:not(:has(> button)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .m-build-row > input {
    grid-column: 1;
    width: auto !important;
    min-width: 0;
  }
  .m-build-row > button {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 44px;
    padding: 0;
  }
  .m-build-result-head {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  /* Regenerate and "Publish to <domain>" stack full width; a long domain
     wraps inside its button instead of pushing it off-screen. */
  .m-build-result-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .m-build-result-actions > .btn {
    flex: 1 1 100%;
    min-width: 0;
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .m-refine {
    flex-wrap: wrap;
  }
  .m-refine > input {
    flex: 1 1 100% !important;
  }
  .m-refine > .btn {
    flex: 1 1 100%;
  }
  .m-build label > input[type="checkbox"] {
    flex-shrink: 0;
  }
  .m-build iframe {
    height: 70dvh !important;
  }
}