/* KraftConnect consolidated typography and visual hardening.
   Canonical single source (replaces the runtime-injected CSS layers).
   Order mirrors the previous runtime cascade: visual hardening -> page hardening -> live-ui -> platform -> admin-message -> client/artisan -> auth. */

/* ============ visual-hardening.css ============ */
/* KraftKonnect protected-page visual hardening.
   Loaded by nav-auth.js so authenticated application pages share the same QA baseline. */

/* Platform-wide card content containment.
   Keep long emails, addresses, prices, labels, buttons and generated text inside their cards. */
:where(
  .kk-card,
  .kk-admin-card,
  .kk-stat-card,
  .stats-card,
  .feature-card,
  .service-card,
  .step-card,
  .requirement-card,
  .kk-action-card,
  .kk-tip-card,
  .kk-flow-card,
  .kk-recommend-card,
  .kk-artisan-row,
  .kk-booking-card,
  .card
) {
  min-width: 0;
  max-width: 100%;
}

.kk-tip-group-title {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  color: #0b2341;
  margin: 14px 0 0;
  padding-top: 4px;
}

:where(
  .kk-card,
  .kk-admin-card,
  .kk-stat-card,
  .stats-card,
  .feature-card,
  .service-card,
  .step-card,
  .requirement-card,
  .kk-action-card,
  .kk-tip-card,
  .kk-flow-card,
  .kk-recommend-card,
  .kk-artisan-row,
  .kk-booking-card,
  .card
) * {
  min-width: 0;
  max-width: 100%;
}

:where(
  .kk-card,
  .kk-admin-card,
  .kk-stat-card,
  .stats-card,
  .feature-card,
  .service-card,
  .step-card,
  .requirement-card,
  .kk-action-card,
  .kk-tip-card,
  .kk-flow-card,
  .kk-recommend-card,
  .kk-artisan-row,
  .kk-booking-card,
  .card
) :where(h1,h2,h3,h4,h5,h6,p,span,strong,small,a,button,label,li,td,th) {
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(
  .kk-card,
  .kk-admin-card,
  .kk-stat-card,
  .stats-card,
  .feature-card,
  .service-card,
  .step-card,
  .requirement-card,
  .kk-action-card,
  .kk-tip-card,
  .kk-flow-card,
  .kk-recommend-card,
  .kk-artisan-row,
  .kk-booking-card,
  .card
) :where(img,video,canvas,svg) {
  max-width: 100%;
}

:where(
  .kk-card,
  .kk-admin-card,
  .kk-stat-card,
  .stats-card,
  .feature-card,
  .service-card,
  .step-card,
  .requirement-card,
  .kk-action-card,
  .kk-tip-card,
  .kk-flow-card,
  .kk-recommend-card,
  .kk-artisan-row,
  .kk-booking-card,
  .card
) :where(button,a[role="button"],.kk-btn-primary,.kk-btn-outline,.kk-admin-button) {
  white-space: normal;
}

/* My Bookings */
body:has(#kk-booking-search) .kk-stat-card {
  min-height: 102px;
  padding: 17px 18px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
}

body:has(#kk-booking-search) .kk-stat-card .kk-icon-circle {
  width: 46px;
  height: 46px;
  font-size: 20px;
}

body:has(#kk-booking-search) .kk-stat-card p {
  font-size: 13px !important;
  line-height: 1.35;
  font-weight: 600 !important;
}

body:has(#kk-booking-search) .kk-stat-card h3 {
  font-size: 26px !important;
  line-height: 1.15;
  font-weight: 700 !important;
}

body:has(#kk-booking-search) .kk-stat-card .kk-link {
  font-size: 12px !important;
  font-weight: 600 !important;
}

body:has(#kk-booking-search) .kk-booking-row {
  min-width: 0;
  overflow-wrap: anywhere;
}

body:has(#kk-booking-search) .kk-booking-row h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere;
}

body:has(#kk-booking-search) .kk-booking-row .font-extrabold {
  font-weight: 700 !important;
}

body:has(#kk-booking-search) .kk-booking-row .actions button,
body:has(#kk-booking-search) .kk-booking-row .actions a {
  min-height: 40px;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body:has(#kk-booking-search) .kk-badge {
  font-weight: 700 !important;
}

body:has(#kk-booking-search) .kk-input-box,
body:has(#kk-booking-search) .kk-input-box input {
  min-width: 0;
}

@media (max-width: 640px) {
  body:has(#kk-booking-search) main > section.kk-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body:has(#kk-booking-search) .grid.sm\:grid-cols-2.xl\:grid-cols-5 {
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  body:has(#kk-booking-search) .kk-stat-card {
    min-height: 86px !important;
    padding: 12px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body:has(#kk-booking-search) .kk-stat-card .kk-icon-circle {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  body:has(#kk-booking-search) .kk-stat-card p {
    font-size: 12px !important;
  }

  body:has(#kk-booking-search) .kk-stat-card h3 {
    font-size: 22px !important;
  }

  body:has(#kk-booking-search) .kk-stat-card .kk-link {
    display: none !important;
  }

  body:has(#kk-booking-search) .kk-card.p-5 {
    padding: 14px !important;
  }

  body:has(#kk-booking-search) .kk-tab {
    min-height: 44px;
    height: 44px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
  }

  body:has(#kk-booking-search) .kk-input-box {
    height: 44px !important;
  }

  body:has(#kk-booking-search) .kk-booking-row {
    padding: 14px !important;
    gap: 9px !important;
    border-radius: 10px !important;
  }

  body:has(#kk-booking-search) .kk-booking-row .kk-avatar-text {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  body:has(#kk-booking-search) .kk-booking-row h3 {
    font-size: 15px !important;
  }

  body:has(#kk-booking-search) .kk-booking-row .text-sm {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body:has(#kk-booking-search) .kk-booking-row .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }

  body:has(#kk-booking-search) .kk-booking-row .actions button,
  body:has(#kk-booking-search) .kk-booking-row .actions a {
    width: 100%;
    min-width: 0;
    min-height: 44px !important;
    height: 44px !important;
    padding-inline: 8px !important;
    font-size: 13px !important;
    white-space: normal;
  }
}

/* Messages */
body:has(#kk-thread-list):has(#kk-messages-list) main .grid.xl\:grid-cols-\[470px_1fr\] {
  grid-template-columns: 390px minmax(0, 1fr) !important;
  gap: 22px !important;
}

body:has(#kk-thread-list):has(#kk-messages-list) aside.kk-card {
  padding: 18px !important;
}

body:has(#kk-thread-list):has(#kk-messages-list) aside.kk-card > h2 {
  font-size: 18px !important;
  line-height: 1.3;
  font-weight: 700 !important;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-search-box {
  height: 48px;
  font-size: 14px;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-search-box input {
  min-width: 0;
  font-size: 14px;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-conversation {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px 10px;
  min-width: 0;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-conversation .kk-avatar-text {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  font-size: 17px;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-conversation h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-conversation p {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body:has(#kk-thread-list):has(#kk-messages-list) section.kk-card.flex.flex-col {
  min-height: 720px !important;
  padding: 20px !important;
}

body:has(#kk-thread-list):has(#kk-messages-list) #kk-chat-avatar {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  font-size: 18px !important;
}

body:has(#kk-thread-list):has(#kk-messages-list) #kk-chat-name {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere;
}

body:has(#kk-thread-list):has(#kk-messages-list) #kk-chat-meta {
  font-size: 13px !important;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-booking-card {
  padding: 14px 16px;
  gap: 14px;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-booking-card h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-message-bubble {
  max-width: min(72%, 560px);
  font-size: 14px;
  line-height: 1.55;
  padding: 13px 15px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-time {
  font-size: 12px;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-composer {
  min-height: 62px;
  padding: 8px 12px;
}

body:has(#kk-thread-list):has(#kk-messages-list) .kk-composer input {
  min-width: 0;
  font-size: 14px;
}

body:has(#kk-thread-list):has(#kk-messages-list) #kk-composer-send {
  min-height: 44px;
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.kk-mobile-chat-back {
  display: none;
}

@media (max-width: 768px) {
  body:has(#kk-thread-list):has(#kk-messages-list) main > section.kk-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) main .grid.xl\:grid-cols-\[470px_1fr\] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) aside.kk-card {
    padding: 14px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-search-box {
    height: 44px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-conversation {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 12px 8px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-conversation .kk-avatar-text {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    font-size: 16px !important;
  }

  body.kk-message-page:not(.kk-mobile-chat-open) section.kk-card.flex.flex-col {
    display: none !important;
  }

  body.kk-message-page.kk-mobile-chat-open aside.kk-card {
    display: none !important;
  }

  body.kk-message-page.kk-mobile-chat-open section.kk-card.flex.flex-col {
    display: flex !important;
    padding: 14px !important;
    min-height: calc(100vh - 112px) !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-mobile-chat-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    width: fit-content;
    margin-bottom: 8px;
    color: #0b63ce;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 700;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) #kk-chat-avatar {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) #kk-chat-name {
    font-size: 20px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-booking-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-booking-card .kk-badge,
  body:has(#kk-thread-list):has(#kk-messages-list) .kk-booking-card .kk-btn-outline {
    grid-column: 1 / -1;
    justify-self: start;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-message-row {
    gap: 8px;
    margin: 14px 0;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-message-row > .kk-avatar-text {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    font-size: 13px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-message-bubble {
    max-width: 85%;
    padding: 12px 14px;
    font-size: 14px;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) .kk-composer {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 8px !important;
  }

  body:has(#kk-thread-list):has(#kk-messages-list) #kk-composer-send {
    width: 100%;
  }
}

/* ============ homepage-visual-hardening.css ============ */
/* KraftKonnect homepage visual hardening */
body:has(#devNoticeModal) .hero-title {
  font-size: 44px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  max-width: 590px;
}

body:has(#devNoticeModal) .hero-copy {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body:has(#devNoticeModal) .hero-artisan-visual {
  min-height: 380px !important;
}

body:has(#devNoticeModal) .hero-artisan-visual img {
  width: min(100%, 440px) !important;
}

body:has(#devNoticeModal) .section-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body:has(#devNoticeModal) .service-card h4,
body:has(#devNoticeModal) .artisan-card h4,
body:has(#devNoticeModal) .mini-artisan-card h3,
body:has(#devNoticeModal) .work-card h3 {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(#devNoticeModal) .service-card p,
body:has(#devNoticeModal) .artisan-card p,
body:has(#devNoticeModal) .mini-artisan-card p,
body:has(#devNoticeModal) .work-card p {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body:has(#devNoticeModal) .stats-card h3,
body:has(#devNoticeModal) section .text-2xl.font-extrabold {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

body:has(#devNoticeModal) .cta-card h2 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body:has(#devNoticeModal) .cta-card button,
body:has(#devNoticeModal) .hero-bg button {
  min-height: 48px !important;
  height: 48px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body:has(#devNoticeModal) .dev-modal-card {
  width: min(100%, 500px);
  padding: 24px;
}

body:has(#devNoticeModal) #devNoticeTitle {
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

body:has(#devNoticeModal) .dev-modal-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body:has(#devNoticeModal) .dev-modal-primary,
body:has(#devNoticeModal) .dev-modal-secondary {
  min-height: 46px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  body:has(#devNoticeModal) .hero-bg .max-w-\[1320px\] {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  body:has(#devNoticeModal) .hero-bg .grid {
    gap: 24px !important;
    min-height: auto !important;
  }

  body:has(#devNoticeModal) .hero-title {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  body:has(#devNoticeModal) .hero-copy {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body:has(#devNoticeModal) .hero-artisan-visual {
    min-height: 210px !important;
  }

  body:has(#devNoticeModal) .hero-artisan-visual img {
    width: min(78vw, 260px) !important;
  }

  body:has(#devNoticeModal) .section-title {
    font-size: 20px !important;
  }

  body:has(#devNoticeModal) .page-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body:has(#devNoticeModal) .cta-card {
    padding: 18px !important;
    gap: 16px !important;
  }

  body:has(#devNoticeModal) .cta-card h2 {
    font-size: 20px !important;
  }

  body:has(#devNoticeModal) .cta-card button,
  body:has(#devNoticeModal) .hero-bg button {
    width: 100%;
    min-height: 48px !important;
  }

  body:has(#devNoticeModal) .dev-modal-card {
    padding: 18px !important;
  }

  body:has(#devNoticeModal) #devNoticeTitle {
    font-size: 21px !important;
  }
}

/* ============ safety-visual-hardening.css ============ */
/* Safety Center visual hardening */
body:has([data-open-incident]):has([data-open-emergency]) .hero-title {
  font-size: 44px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .hero-copy {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .page-section {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* The bottom support CTA duplicates the sidebar support option, so do not render it. */
body:has([data-open-incident]):has([data-open-emergency]) section:has(.kk-support-banner) {
  display: none !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-sos-panel {
  padding: 18px !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-sos-box {
  width: 64px;
  height: 64px;
  font-size: 22px;
  font-weight: 700;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-btn-primary,
body:has([data-open-incident]):has([data-open-emergency]) .kk-btn-outline,
body:has([data-open-incident]):has([data-open-emergency]) .kk-btn-danger {
  min-height: 44px;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-section-card {
  padding: 16px !important;
}

/* Main-page sections use the shared 22px section-heading scale. */
body:has([data-open-incident]):has([data-open-emergency]) .kk-section-title,
body:has([data-open-incident]):has([data-open-emergency]) .kk-sos-panel h2,
body:has([data-open-incident]):has([data-open-emergency]) .kk-section-card > h2,
body:has([data-open-incident]):has([data-open-emergency]) .kk-support-banner h2 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

/* Sidebar cards are panels, not full sections. */
body:has([data-open-incident]):has([data-open-emergency]) aside .kk-card h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-action-card {
  min-height: 158px;
  padding: 18px 16px;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-icon-circle {
  width: 46px;
  height: 46px;
  font-size: 20px;
  margin-bottom: 12px;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-action-card h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-action-card p,
body:has([data-open-incident]):has([data-open-emergency]) .kk-tip-card p,
body:has([data-open-incident]):has([data-open-emergency]) .kk-flow-card p,
body:has([data-open-incident]):has([data-open-emergency]) aside .kk-card > p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-tip-card {
  min-height: 126px;
  padding: 15px 12px;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-tip-card h3,
body:has([data-open-incident]):has([data-open-emergency]) .kk-flow-card h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-faq-row {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-faq-row p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) aside .kk-card {
  padding: 16px !important;
}

/* Emergency/support contact rows use the compact card-item hierarchy. */
body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row {
  grid-template-columns: 38px minmax(0, 1fr) auto 38px;
  gap: 8px;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row h3 {
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row p {
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row strong,
body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row > a:not(.contact-call) {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row a,
body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row strong {
  overflow-wrap: anywhere;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-support-banner p,
body:has([data-open-incident]):has([data-open-emergency]) .kk-sos-panel p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

@media (max-width: 640px) {
  body:has([data-open-incident]):has([data-open-emergency]) .hero-title {
    font-size: 34px !important;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .hero-copy {
    font-size: 14px !important;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-section-title,
  body:has([data-open-incident]):has([data-open-emergency]) .kk-sos-panel h2,
  body:has([data-open-incident]):has([data-open-emergency]) .kk-section-card > h2,
  body:has([data-open-incident]):has([data-open-emergency]) .kk-support-banner h2 {
    font-size: 20px !important;
  }

  body:has([data-open-incident]):has([data-open-emergency]) aside .kk-card h2 {
    font-size: 17px !important;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-sos-panel {
    padding: 14px !important;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-sos-box {
    width: 54px;
    height: 54px;
    font-size: 20px;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-action-card {
    min-height: 140px;
    padding: 14px;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-icon-circle {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-tip-card {
    min-height: 118px;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row > strong,
  body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row > a,
  body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row .contact-call {
    grid-column: 1 / -1;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-contact-row .contact-call {
    width: 100% !important;
    min-height: 44px;
  }

  body:has([data-open-incident]):has([data-open-emergency]) aside .kk-card {
    padding: 14px !important;
  }

  body:has([data-open-incident]):has([data-open-emergency]) .kk-support-banner p,
  body:has([data-open-incident]):has([data-open-emergency]) .kk-sos-panel p {
    font-size: 14px !important;
  }
}

/* ============ safety-center-redesign-alignment.css ============ */
/* Align the redesigned safety centre to the platform standard. The page keeps
   its own markup/class names but inherits the platform typography, spacing and
   colour tokens so it matches the rest of the site. */
body:has([data-open-incident]):has([data-open-emergency]) {
  font-family: "Open Sans", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  background: #f8fafc !important;
  color: #0b2341 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .kk-container {
  width: min(1320px, calc(100% - 48px)) !important;
}

/* Hero */
body:has([data-open-incident]):has([data-open-emergency]) .hero-title {
  font-size: 44px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .hero-copy {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .breadcrumb {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

/* Section headings */
body:has([data-open-incident]):has([data-open-emergency]) .section-heading {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #0b2341 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .section-description {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

/* Cards */
body:has([data-open-incident]):has([data-open-emergency]) .kk-card {
  background: #ffffff !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 16px !important;
}

/* Action cards */
body:has([data-open-incident]):has([data-open-emergency]) .action-card h3,
body:has([data-open-incident]):has([data-open-emergency]) .action-card h4 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #0b2341 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .action-card p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #475569 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .action-link {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0b63ce !important;
}

/* Safety essentials boxes */
body:has([data-open-incident]):has([data-open-emergency]) .safety-box h3,
body:has([data-open-incident]):has([data-open-emergency]) .safety-box h4 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #0b2341 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .safety-item p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #475569 !important;
}

/* How safety works / process */
body:has([data-open-incident]):has([data-open-emergency]) .process-item h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #0b2341 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .process-item p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #475569 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .verification-note {
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #475569 !important;
}

/* FAQ */
body:has([data-open-incident]):has([data-open-emergency]) .faq-item summary {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  color: #0b2341 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .faq-answer {
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: #475569 !important;
}

/* Support CTA */
body:has([data-open-incident]):has([data-open-emergency]) .support-cta h2 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .support-cta p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* Buttons */
body:has([data-open-incident]):has([data-open-emergency]) .kk-btn-primary,
body:has([data-open-incident]):has([data-open-emergency]) .kk-btn-outline,
body:has([data-open-incident]):has([data-open-emergency]) .kk-btn-danger,
body:has([data-open-incident]):has([data-open-emergency]) .support-white-btn,
body:has([data-open-incident]):has([data-open-emergency]) .support-outline-btn {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* Emergency notice */
body:has([data-open-incident]):has([data-open-emergency]) .emergency-notice h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has([data-open-incident]):has([data-open-emergency]) .emergency-notice p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

@media (max-width: 640px) {
  body:has([data-open-incident]):has([data-open-emergency]) .hero-title {
    font-size: 34px !important;
  }
  body:has([data-open-incident]):has([data-open-emergency]) .hero-copy {
    font-size: 14px !important;
  }
  body:has([data-open-incident]):has([data-open-emergency]) .section-heading,
  body:has([data-open-incident]):has([data-open-emergency]) .support-cta h2 {
    font-size: 20px !important;
  }
}

/* ============ client-dashboard-layout.css ============ */
/* Client dashboard: keep heading above KPI cards, matching the artisan dashboard. */
body.kk-client-dashboard-page main > section.kk-container > div:first-of-type {
  display: block !important;
}
body.kk-client-dashboard-page main > section.kk-container > div:first-of-type > div:first-child {
  margin-bottom: 20px !important;
}
body.kk-client-dashboard-page main > section.kk-container > div:first-of-type > .grid {
  width: 100% !important;
}

/* ============ artisan-dashboard-visual-hardening.css ============ */
/* Artisan Dashboard visual hardening */

/* Keep the page introduction above the KPI cards, matching the other dashboards.
   The original markup places both inside one responsive grid; force that wrapper
   to a single full-width column so the stats always begin on their own row. */
body:has(.kk-wallet-card):has(.kk-dashboard-stat) main > section.kk-container > .grid:has(.kk-dashboard-stat) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) main > section.kk-container > .grid:has(.kk-dashboard-stat) > div:first-child {
  width: 100%;
  max-width: 760px;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) main > section.kk-container > .grid:has(.kk-dashboard-stat) > .grid:has(> .kk-dashboard-stat) {
  width: 100%;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) main h1 {
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) main h1 + p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  overflow-wrap: anywhere;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) main h1 + p + p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
  color: #64748b !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-dashboard-stat {
  min-height: 98px !important;
  padding: 16px 18px !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 13px !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-dashboard-stat .kk-icon-circle {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  font-size: 20px !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-dashboard-stat p {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-dashboard-stat h3 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-section-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-review-card,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-wallet-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row h3,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card h3,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-review-card h3 {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row .font-extrabold,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card .font-extrabold,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-review-card .font-extrabold,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-wallet-card .font-extrabold {
  font-weight: 700 !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row .actions button,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row .actions a,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card button,
body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card a {
  min-height: 40px;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card {
  min-height: 142px !important;
  padding: 16px !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-review-card {
  min-height: 102px !important;
  padding: 14px !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-progress-ring {
  width: 104px !important;
  height: 104px !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-progress-ring-inner {
  width: 74px !important;
  height: 74px !important;
  font-weight: 700 !important;
}

body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-support-tile {
  min-height: 84px !important;
  padding: 14px 8px !important;
}

@media (max-width: 640px) {
  body:has(.kk-wallet-card):has(.kk-dashboard-stat) main > section.kk-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) main > section.kk-container > .grid:has(.kk-dashboard-stat) {
    gap: 16px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) main h1 {
    font-size: 26px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) main h1 + p,
  body:has(.kk-wallet-card):has(.kk-dashboard-stat) main h1 + p + p {
    font-size: 14px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .grid:has(> .kk-dashboard-stat) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-dashboard-stat {
    min-height: 88px !important;
    padding: 12px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-dashboard-stat .kk-icon-circle {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    font-size: 16px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-dashboard-stat p {
    font-size: 12px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-dashboard-stat h3 {
    font-size: 22px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-section-title {
    font-size: 20px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row {
    padding: 14px !important;
    gap: 9px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row .actions button,
  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-job-row .actions a,
  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card button,
  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card a {
    min-height: 44px !important;
    height: auto !important;
    padding: 8px !important;
    white-space: normal !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-request-card,
  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-review-card {
    min-height: auto !important;
  }

  body:has(.kk-wallet-card):has(.kk-dashboard-stat) .kk-wallet-card {
    min-height: 88px !important;
    padding: 14px !important;
  }
}

/* ============ profile-visual-hardening.css ============ */
/* Account Profile visual hardening */
body:has(#profile-form) main {
  max-width: 1120px;
}

body:has(#profile-form) #profile-role {
  font-weight: 700 !important;
}

body:has(#profile-form) main h1 {
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body:has(#profile-form) main h1 + p {
  font-size: 15px !important;
  line-height: 1.55;
  font-weight: 400 !important;
}

body:has(#profile-form) #profile-form {
  max-width: 850px;
  padding: 22px !important;
}

body:has(#profile-form) .kk-label {
  font-size: 13px !important;
  font-weight: 700 !important;
}

body:has(#profile-form) .kk-input,
body:has(#profile-form) .kk-select,
body:has(#profile-form) .kk-textarea {
  min-width: 0;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body:has(#profile-form) .kk-input,
body:has(#profile-form) .kk-select {
  min-height: 44px;
  height: 44px;
}

body:has(#profile-form) .kk-btn-primary {
  min-height: 44px;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Security belongs in Settings; avoid duplicating password management on Profile. */
body:has(#profile-form) #password-form {
  display: none !important;
}

@media (max-width: 640px) {
  body:has(#profile-form) main {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body:has(#profile-form) main > .flex:first-child {
    margin-bottom: 16px !important;
  }

  body:has(#profile-form) main h1 {
    font-size: 26px !important;
  }

  body:has(#profile-form) main h1 + p {
    font-size: 14px !important;
  }

  body:has(#profile-form) #dashboard-link {
    width: 100%;
    min-height: 44px;
  }

  body:has(#profile-form) #profile-form {
    max-width: none;
    padding: 16px !important;
  }

  body:has(#profile-form) #profile-form .grid {
    gap: 14px !important;
  }

  body:has(#profile-form) #profile-save {
    width: 100%;
    min-height: 44px;
  }
}

/* ============ settings-visual-hardening.css ============ */
/* Account Settings visual hardening */
body:has(#settings-password-form) main h1 {
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body:has(#settings-password-form) #settings-role {
  font-weight: 700 !important;
}

body:has(#settings-password-form) main h1 + p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

body:has(#settings-password-form) .kk-card {
  padding: 22px !important;
}

body:has(#settings-password-form) .kk-card h2 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body:has(#settings-password-form) .kk-row {
  padding: 15px 0;
  align-items: flex-start;
}

body:has(#settings-password-form) .kk-row h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(#settings-password-form) .kk-row p,
body:has(#settings-password-form) .kk-card > p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  overflow-wrap: anywhere;
}

body:has(#settings-password-form) .kk-toggle {
  width: 44px;
  height: 24px;
  flex-basis: 44px;
}

body:has(#settings-password-form) .kk-toggle span {
  width: 18px;
  height: 18px;
}

body:has(#settings-password-form) .kk-input {
  min-width: 0;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body:has(#settings-password-form) label {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body:has(#settings-password-form) .kk-btn-primary,
body:has(#settings-password-form) #settings-password-submit {
  min-height: 44px;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body:has(#settings-password-form) aside .kk-card {
  padding: 18px !important;
}

body:has(#settings-password-form) aside .kk-card h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

@media (max-width: 640px) {
  body:has(#settings-password-form) main {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body:has(#settings-password-form) main h1 {
    font-size: 26px !important;
  }

  body:has(#settings-password-form) main h1 + p {
    font-size: 14px !important;
  }

  body:has(#settings-password-form) .kk-card,
  body:has(#settings-password-form) aside .kk-card {
    padding: 16px !important;
  }

  body:has(#settings-password-form) .kk-card h2 {
    font-size: 20px !important;
  }

  body:has(#settings-password-form) aside .kk-card h2 {
    font-size: 17px !important;
  }

  body:has(#settings-password-form) .kk-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body:has(#settings-password-form) .kk-row > div {
    min-width: 0;
    flex: 1 1 auto;
  }

  body:has(#settings-password-form) .kk-toggle {
    align-self: flex-start;
    margin-top: 2px;
  }

  body:has(#settings-password-form) aside .kk-card .flex.flex-wrap a {
    min-height: 44px;
  }
}

/* ============ bookings-support-typography.css ============ */
/* Bookings: Safety & Support typography aligned with the KraftKonnect platform hierarchy. */
body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) > .kk-section-title {
  font-family: "Open Sans", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row .kk-icon-circle {
  width: 42px !important;
  height: 42px !important;
  font-size: 18px !important;
}

body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row > div:last-child {
  min-width: 0;
}

body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row h3 {
  margin: 0 !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row p {
  margin-top: 3px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  overflow-wrap: anywhere;
}

body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-link {
  font-family: "Open Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) > .kk-section-title {
    font-size: 17px !important;
  }

  body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row .kk-icon-circle {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row h3 {
    font-size: 15px !important;
  }

  body:has(#kk-booking-search) .kk-sidebar-card:has(.kk-support-row) .kk-support-row p {
    font-size: 13px !important;
  }
}

/* ============ join-artisan-visual-hardening.css ============ */
/* Join Artisan onboarding visual hardening */
body:has(.step-nav):has(.artisan-preview-card) .hero-title {
  font-size: clamp(2.125rem, 3.5vw, 2.75rem) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .hero-copy {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .section-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .form-heading {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .side-card h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .side-card h3,
body:has(.step-nav):has(.artisan-preview-card) .onboarding-card h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .side-card p,
body:has(.step-nav):has(.artisan-preview-card) .onboarding-card p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .step-tab {
  min-height: 52px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 8px 10px !important;
}

body:has(.step-nav):has(.artisan-preview-card) .step-tab .step-number {
  font-weight: 700 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .form-section {
  padding: 18px 18px 12px !important;
}

body:has(.step-nav):has(.artisan-preview-card) .form-label {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(.step-nav):has(.artisan-preview-card) .form-control {
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 0;
}

body:has(.step-nav):has(.artisan-preview-card) textarea.form-control {
  min-height: 92px !important;
  height: 92px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

body:has(.step-nav):has(.artisan-preview-card) .upload-card {
  min-height: 46px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere;
}

body:has(.step-nav):has(.artisan-preview-card) .artisan-preview-card,
body:has(.step-nav):has(.artisan-preview-card) .join-card,
body:has(.step-nav):has(.artisan-preview-card) .side-card {
  border-radius: 10px !important;
}

body:has(.step-nav):has(.artisan-preview-card) .artisan-hero-img {
  height: 210px !important;
}

body:has(.step-nav):has(.artisan-preview-card) button[type="submit"],
body:has(.step-nav):has(.artisan-preview-card) .join-card button,
body:has(.step-nav):has(.artisan-preview-card) .join-card a {
  min-height: 44px;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  body:has(.step-nav):has(.artisan-preview-card) .step-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .step-tab {
    justify-content: flex-start !important;
    padding: 9px 12px !important;
    min-height: 54px !important;
    border-bottom: 1px solid #edf2f7;
  }

  body:has(.step-nav):has(.artisan-preview-card) .step-tab::after {
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: auto !important;
    height: 3px !important;
  }
}

@media (max-width: 640px) {
  body:has(.step-nav):has(.artisan-preview-card) .hero-title {
    font-size: 34px !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .hero-copy {
    font-size: 14px !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .section-title {
    font-size: 20px !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .form-heading,
  body:has(.step-nav):has(.artisan-preview-card) .side-card h2 {
    font-size: 17px !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .side-card h3,
  body:has(.step-nav):has(.artisan-preview-card) .onboarding-card h3 {
    font-size: 15px !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .form-section {
    padding: 15px 14px 10px !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .step-tab {
    font-size: 11px !important;
    gap: 7px !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .step-tab .step-number {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px;
  }

  body:has(.step-nav):has(.artisan-preview-card) .form-control,
  body:has(.step-nav):has(.artisan-preview-card) .upload-card,
  body:has(.step-nav):has(.artisan-preview-card) button[type="submit"],
  body:has(.step-nav):has(.artisan-preview-card) .join-card button,
  body:has(.step-nav):has(.artisan-preview-card) .join-card a {
    min-height: 46px !important;
  }

  body:has(.step-nav):has(.artisan-preview-card) .artisan-hero-img {
    height: 180px !important;
  }
}

/* ============ for-artisans-visual-hardening.css ============ */
/* For Artisans public page visual hardening */
body:has(.hero-dashboard):has(.dash-grid) .hero-title {
  font-size: clamp(2.125rem, 3.5vw, 2.75rem) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

body:has(.hero-dashboard):has(.dash-grid) .hero-copy {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body:has(.hero-dashboard):has(.dash-grid) .hero-bg .grid.lg\:grid-cols-2 {
  min-height: 470px !important;
}

body:has(.hero-dashboard):has(.dash-grid) .hero-dashboard {
  border-radius: 14px !important;
  padding: 14px !important;
}

body:has(.hero-dashboard):has(.dash-grid) .dash-grid {
  gap: 10px !important;
}

body:has(.hero-dashboard):has(.dash-grid) .dash-col {
  gap: 10px !important;
}

body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col {
  min-height: 290px !important;
}

body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col::before {
  width: 250px !important;
  height: 250px !important;
}

body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col img {
  width: min(100%, 275px) !important;
  max-height: 290px !important;
}

body:has(.hero-dashboard):has(.dash-grid) .dash-card,
body:has(.hero-dashboard):has(.dash-grid) .dash-stat-card {
  border-radius: 10px !important;
  padding: 12px !important;
  min-width: 0;
  overflow-wrap: anywhere;
}

body:has(.hero-dashboard):has(.dash-grid) .dash-stats {
  gap: 10px !important;
  margin-top: 10px !important;
}

body:has(.hero-dashboard):has(.dash-grid) .section-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body:has(.hero-dashboard):has(.dash-grid) .font-extrabold {
  font-weight: 700 !important;
}

body:has(.hero-dashboard):has(.dash-grid) .feature-card h3,
body:has(.hero-dashboard):has(.dash-grid) .step-card h3,
body:has(.hero-dashboard):has(.dash-grid) .service-card h3,
body:has(.hero-dashboard):has(.dash-grid) .requirement-card h3,
body:has(.hero-dashboard):has(.dash-grid) .support-card h3,
body:has(.hero-dashboard):has(.dash-grid) .testimonial-card h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(.hero-dashboard):has(.dash-grid) .requirement-card {
  min-height: 172px !important;
}

body:has(.hero-dashboard):has(.dash-grid) a[href="join_artesan.html"],
body:has(.hero-dashboard):has(.dash-grid) .cta-card button,
body:has(.hero-dashboard):has(.dash-grid) .cta-card a {
  min-height: 48px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (max-width: 1024px) {
  body:has(.hero-dashboard):has(.dash-grid) .hero-bg .grid.lg\:grid-cols-2 {
    min-height: 0 !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col {
    min-height: 210px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col::before {
    width: 190px !important;
    height: 190px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col img {
    width: min(58vw, 220px) !important;
    max-height: 220px !important;
  }
}

@media (max-width: 640px) {
  body:has(.hero-dashboard):has(.dash-grid) .hero-title {
    font-size: 34px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .hero-copy {
    font-size: 14px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .hero-bg .max-w-\[1320px\] {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .hero-dashboard {
    padding: 10px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-grid {
    gap: 8px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-col {
    gap: 8px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col {
    min-height: 155px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col::before {
    width: 145px !important;
    height: 145px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-artisan-col img {
    width: min(52vw, 165px) !important;
    max-height: 165px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-card,
  body:has(.hero-dashboard):has(.dash-grid) .dash-stat-card {
    padding: 10px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .section-title {
    font-size: 20px !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) .requirement-card {
    min-height: auto !important;
  }

  body:has(.hero-dashboard):has(.dash-grid) a[href="join_artesan.html"],
  body:has(.hero-dashboard):has(.dash-grid) .cta-card button,
  body:has(.hero-dashboard):has(.dash-grid) .cta-card a {
    min-height: 44px !important;
  }
}

/* ============ live-ui-regression-fixes.css ============ */
/* KraftKonnect live UI regression fixes — 2026-08-29.
   These rules intentionally avoid the old page-marker :has() guards so the
   live-data structures keep their layout even when legacy marker classes are
   removed from the HTML. */

/* Admin Dashboard: keep paired cards at their natural height. */
body:has(#kk-verification-table) main section > .grid {
  align-items: start;
}

/* Admin recent bookings: compact three-column summary that survives long IDs. */
.kk-admin-booking-head,
#data-admin-bookings .kk-admin-booking-row {
  display: grid !important;
  grid-template-columns: minmax(72px, .55fr) minmax(0, 2.6fr) minmax(92px, .75fr) !important;
  gap: 14px !important;
  min-width: 0;
}

.kk-admin-booking-head {
  color: #7b8ea8;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

#data-admin-bookings .kk-admin-booking-row {
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid #ecf1f7;
  font-size: 13px;
}

#data-admin-bookings .kk-admin-booking-row > *,
#data-admin-bookings .kk-admin-booking-details,
#data-admin-bookings .kk-admin-booking-parties,
#data-admin-bookings .kk-admin-meta-value {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#data-admin-bookings .kk-admin-booking-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

#data-admin-bookings .kk-admin-meta-label {
  display: block;
  color: #7b8ea8;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}

#data-admin-bookings .kk-admin-meta-value {
  display: block;
  color: #263f60;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}

#data-admin-bookings .kk-admin-booking-id {
  color: #1e63e9;
  font-weight: 700;
}

#data-admin-bookings .kk-admin-booking-service {
  margin-top: 7px;
  color: #0b2552;
  font-weight: 700;
}

#data-admin-bookings .kk-admin-booking-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

#data-admin-bookings .kk-admin-booking-status {
  justify-self: start;
}

/* Admin Verification Queue: one top-level artisan row, expandable documents. */
.kk-verification-group-head,
#kk-verification-table .kk-verification-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(120px, .75fr) minmax(100px, .7fr) minmax(150px, 1fr) !important;
  gap: 14px !important;
  min-width: 0;
}

#kk-verification-table .kk-verification-group {
  border-top: 1px solid #ecf1f7;
}

#kk-verification-table .kk-verification-summary {
  align-items: center;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}

#kk-verification-table .kk-verification-summary::-webkit-details-marker {
  display: none;
}

#kk-verification-table .kk-verification-summary > *,
#kk-verification-table .kk-verification-artisan-copy,
#kk-verification-table .kk-verification-doc-count {
  min-width: 0;
  overflow-wrap: anywhere;
}

#kk-verification-table .kk-verification-artisan {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#kk-verification-table .kk-verification-artisan-copy strong,
#kk-verification-table .kk-verification-doc-count strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

#kk-verification-table .kk-verification-artisan-copy span,
#kk-verification-table .kk-verification-doc-count span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  overflow-wrap: anywhere;
}

#kk-verification-table .kk-verification-location {
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#kk-verification-table .kk-verification-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#kk-verification-table .kk-review-toggle {
  color: #1e63e9;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#kk-verification-table .kk-verification-documents {
  margin: 0 0 14px 42px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

#kk-verification-table .kk-verification-document-head,
#kk-verification-table .kk-verification-document-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(100px, .8fr) minmax(90px, .65fr) minmax(210px, 1.25fr) !important;
  gap: 12px !important;
  align-items: center;
  min-width: 0;
}

#kk-verification-table .kk-verification-document-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Safety Center: support CTA group after the repaired contact row. */
.kk-safety-support-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.kk-safety-support-actions > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Robust glyphs for places where the remote icon font has failed in production. */
.kk-icon-fallback-symbol {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  font-family: "Open Sans", sans-serif !important;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.artisan-preview-card .icon-box .kk-icon-fallback-symbol {
  font-size: 20px;
}

/* Keep dashboard loading/error messages readable and bounded. */
body:has(.kk-dashboard-stat) .kk-live-state {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .kk-admin-booking-head,
  .kk-verification-group-head,
  #kk-verification-table .kk-verification-document-head {
    display: none !important;
  }

  #data-admin-bookings .kk-admin-booking-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
  }

  #data-admin-bookings .kk-admin-booking-details {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #data-admin-bookings .kk-admin-booking-status {
    grid-column: 2;
    grid-row: 1;
  }

  #kk-verification-table .kk-verification-summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 9px 12px !important;
    padding: 14px !important;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-top: 10px;
  }

  #kk-verification-table .kk-verification-doc-count,
  #kk-verification-table .kk-verification-location,
  #kk-verification-table .kk-verification-review {
    grid-column: 1 / -1;
  }

  #kk-verification-table .kk-verification-review {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #kk-verification-table .kk-verification-documents {
    margin: 8px 0 14px !important;
  }

  #kk-verification-table .kk-verification-document-row {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px !important;
    margin-top: 8px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px;
    background: #fff;
  }
}

@media (max-width: 640px) {
  #data-admin-bookings .kk-admin-booking-parties {
    grid-template-columns: minmax(0, 1fr);
  }

  .kk-safety-support-actions a {
    width: 100%;
  }
}

/* ============ platform-typography-system.css ============ */
/* KraftKonnect global typography system
   Reference: index.html / homepage visual scale.
   Loaded after page-specific hardening so every page shares one type hierarchy. */

:root {
  --kk-type-font: "Open Sans", sans-serif;
  --kk-type-body: 15px;
  --kk-type-body-mobile: 14px;
  --kk-type-hero: 44px;
  --kk-type-hero-mobile: 34px;
  --kk-type-page: 32px;
  --kk-type-page-mobile: 26px;
  --kk-type-section: 22px;
  --kk-type-section-mobile: 20px;
  --kk-type-panel: 18px;
  --kk-type-card: 16px;
  --kk-type-small: 13px;
  --kk-type-badge: 12px;
  --kk-weight-regular: 400;
  --kk-weight-medium: 500;
  --kk-weight-semibold: 600;
  --kk-weight-bold: 700;
}

body:not(#kk-typography-never) {
  font-family: var(--kk-type-font) !important;
  font-size: var(--kk-type-body) !important;
  line-height: 1.55 !important;
  font-weight: var(--kk-weight-regular);
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:not(#kk-typography-never) button,
body:not(#kk-typography-never) input,
body:not(#kk-typography-never) select,
body:not(#kk-typography-never) textarea {
  font-family: var(--kk-type-font) !important;
}

/* Remove visual over-weighting left by legacy Tailwind utility classes. */
body:not(#kk-typography-never) .font-extrabold,
body:not(#kk-typography-never) .font-black {
  font-weight: var(--kk-weight-bold) !important;
}

body:not(#kk-typography-never) h1,
body:not(#kk-typography-never) h2,
body:not(#kk-typography-never) h3,
body:not(#kk-typography-never) h4,
body:not(#kk-typography-never) h5,
body:not(#kk-typography-never) h6 {
  font-family: var(--kk-type-font) !important;
  letter-spacing: 0 !important;
}

/* Marketing heroes use the index.html scale. */
body:not(#kk-typography-never) .hero-title,
body:not(#kk-typography-never) .kk-hero h1,
body:not(#kk-typography-never) .hero-bg h1 {
  font-size: var(--kk-type-hero) !important;
  line-height: 1.12 !important;
  font-weight: var(--kk-weight-bold) !important;
}

body:not(#kk-typography-never) .hero-copy,
body:not(#kk-typography-never) .kk-hero p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: var(--kk-weight-medium) !important;
}

/* Search is a denser utility page, but remains in the same index type family. */
body:not(#kk-typography-never):has(#kk-service-search):has(#kk-results-card) .kk-hero h1 {
  font-size: 36px !important;
  line-height: 1.12 !important;
}

/* Internal pages and dashboards. */
body:not(#kk-typography-never) main h1:not(.hero-title),
body:not(#kk-typography-never) .kk-auth-form-title {
  font-size: var(--kk-type-page) !important;
  line-height: 1.2 !important;
  font-weight: var(--kk-weight-bold) !important;
}

body:not(#kk-typography-never) .kk-section-title,
body:not(#kk-typography-never) .section-title,
body:not(#kk-typography-never) .kk-section-header h2 {
  font-size: var(--kk-type-section) !important;
  line-height: 1.3 !important;
  font-weight: var(--kk-weight-bold) !important;
}

body:not(#kk-typography-never) .kk-panel-title,
body:not(#kk-typography-never) .form-heading,
body:not(#kk-typography-never) .faq-item h3 {
  font-size: var(--kk-type-panel) !important;
  line-height: 1.35 !important;
  font-weight: var(--kk-weight-bold) !important;
}

body:not(#kk-typography-never) .kk-card h3,
body:not(#kk-typography-never) .kk-artisan-row h3,
body:not(#kk-typography-never) .kk-recommend-card h3,
body:not(#kk-typography-never) .feature-card h4,
body:not(#kk-typography-never) .service-card h4,
body:not(#kk-typography-never) .step-card h4,
body:not(#kk-typography-never) .requirement-card h4,
body:not(#kk-typography-never) .kk-action-card h3,
body:not(#kk-typography-never) .kk-tip-card h3,
body:not(#kk-typography-never) .kk-flow-card h3 {
  font-size: var(--kk-type-card) !important;
  line-height: 1.35 !important;
  font-weight: var(--kk-weight-bold) !important;
}

/* Navigation follows the homepage: 14px, semibold. */
body:not(#kk-typography-never) nav a,
body:not(#kk-typography-never) nav button,
body:not(#kk-typography-never) .kk-nav-link,
body:not(#kk-typography-never) .kk-role-nav a {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: var(--kk-weight-semibold) !important;
}

/* Controls and form hierarchy. */
body:not(#kk-typography-never) .kk-btn-primary,
body:not(#kk-typography-never) .kk-btn-outline,
body:not(#kk-typography-never) .kk-btn-ghost,
body:not(#kk-typography-never) .kk-btn-danger,
body:not(#kk-typography-never) button[type="submit"] {
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: var(--kk-weight-bold) !important;
}

body:not(#kk-typography-never) label,
body:not(#kk-typography-never) .form-label,
body:not(#kk-typography-never) .kk-label,
body:not(#kk-typography-never) .kk-auth-label,
body:not(#kk-typography-never) .kk-filter-title {
  font-size: var(--kk-type-small) !important;
  line-height: 1.4 !important;
  font-weight: var(--kk-weight-bold) !important;
}

body:not(#kk-typography-never) .kk-badge,
body:not(#kk-typography-never) .kk-tag,
body:not(#kk-typography-never) .kk-pill {
  font-size: var(--kk-type-badge) !important;
  line-height: 1.3 !important;
  font-weight: var(--kk-weight-bold) !important;
}

/* Dashboard numbers match the restrained index statistics scale. */
body:not(#kk-typography-never) .kk-dashboard-stat h3,
body:not(#kk-typography-never) .kk-stat-card .text-\[18px\],
body:not(#kk-typography-never) .kk-stat-card .text-\[20px\],
body:not(#kk-typography-never) .stats-card h3 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: var(--kk-weight-bold) !important;
}

/* Footer mirrors index.html rather than inheriting page-level boldness. */
body:not(#kk-typography-never) .kk-footer-title {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: var(--kk-weight-bold) !important;
}

body:not(#kk-typography-never) .kk-footer-link,
body:not(#kk-typography-never) footer p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: var(--kk-weight-regular) !important;
}

/* Keep normal body copy calm. Explicit small text utilities remain small. */
body:not(#kk-typography-never) main > section > p,
body:not(#kk-typography-never) main > .kk-container > p {
  font-weight: var(--kk-weight-regular) !important;
}

@media (max-width: 640px) {
  body:not(#kk-typography-never) {
    font-size: var(--kk-type-body-mobile) !important;
  }

  body:not(#kk-typography-never) .hero-title,
  body:not(#kk-typography-never) .kk-hero h1,
  body:not(#kk-typography-never) .hero-bg h1 {
    font-size: var(--kk-type-hero-mobile) !important;
  }

  body:not(#kk-typography-never):has(#kk-service-search):has(#kk-results-card) .kk-hero h1 {
    font-size: 30px !important;
  }

  body:not(#kk-typography-never) .hero-copy,
  body:not(#kk-typography-never) .kk-hero p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body:not(#kk-typography-never) main h1:not(.hero-title),
  body:not(#kk-typography-never) .kk-auth-form-title {
    font-size: var(--kk-type-page-mobile) !important;
  }

  body:not(#kk-typography-never) .kk-section-title,
  body:not(#kk-typography-never) .section-title,
  body:not(#kk-typography-never) .kk-section-header h2 {
    font-size: var(--kk-type-section-mobile) !important;
  }

  body:not(#kk-typography-never) .kk-panel-title,
  body:not(#kk-typography-never) .form-heading {
    font-size: 17px !important;
  }

  body:not(#kk-typography-never) .kk-card h3,
  body:not(#kk-typography-never) .kk-artisan-row h3,
  body:not(#kk-typography-never) .kk-recommend-card h3 {
    font-size: 15px !important;
  }

  body:not(#kk-typography-never) .kk-dashboard-stat h3,
  body:not(#kk-typography-never) .stats-card h3 {
    font-size: 24px !important;
  }
}

/* ============ admin-message-typography.css ============ */
/* Admin + Messages typography aligned with the index.html platform system. */
body.kk-admin-message-page,
body:has(.kk-admin-page) {
  font-family: "Open Sans", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body:has(.kk-admin-page) .kk-admin-heading h1,
body.kk-message-page main h1 {
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body:has(.kk-admin-page) .kk-admin-heading p,
body.kk-message-page main h1 + p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

body:has(.kk-admin-page) .kk-admin-panel-title,
body.kk-message-page aside.kk-card > h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* Messages: use the same panel/card/body hierarchy as the rest of KraftKonnect. */
body.kk-message-page #kk-chat-name {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.kk-message-page .kk-conversation h3,
body.kk-message-page #kk-chat-booking-title,
body.kk-message-page .kk-booking-card h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.kk-message-page #kk-chat-meta,
body.kk-message-page #kk-thread-count,
body.kk-message-page .kk-time,
body.kk-message-page .kk-conversation p,
body.kk-message-page .kk-booking-card p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

body.kk-message-page .kk-message-bubble,
body.kk-message-page .kk-composer input {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

body.kk-message-page .kk-search-box,
body.kk-message-page .kk-search-box input {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

body.kk-message-page .kk-tab {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

body.kk-message-page .kk-tab.active {
  font-weight: 700 !important;
}

body.kk-message-page .kk-badge,
body.kk-message-page .kk-day-chip,
body.kk-message-page .kk-unread {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.kk-message-page .kk-user-pill,
body.kk-message-page .kk-btn-primary,
body.kk-message-page .kk-btn-outline {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* Admin stat typography shared across operational pages. */
body:has(.kk-admin-page) .kk-admin-stat-label {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

body:has(.kk-admin-page) .kk-admin-stat-value {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

/* Dashboard only: keep six KPI cards horizontal on wide screens. Inside each
   card, icon + label occupy row one and the value spans row two. */
body:has([data-admin-stat="users"]) .kk-admin-stat-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body:has([data-admin-stat="users"]) .kk-admin-stat {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-rows: 44px auto !important;
  column-gap: 12px !important;
  row-gap: 10px !important;
  align-items: center !important;
  align-content: start !important;
}

body:has([data-admin-stat="users"]) .kk-admin-stat > div:last-child {
  display: contents !important;
}

body:has([data-admin-stat="users"]) .kk-admin-stat-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

body:has([data-admin-stat="users"]) .kk-admin-stat-label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-height: 0 !important;
}

body:has([data-admin-stat="users"]) .kk-admin-stat-value {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: 0 !important;
}

/* Incident page: exactly four equal cards fill the complete available row. */
body:has([data-incident-stat="total"]) .kk-admin-stat-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body:has(.kk-admin-page) .kk-admin-button {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(.kk-admin-page) .kk-admin-table-head,
body:has(.kk-admin-page) .kk-admin-verification-head,
body:has(.kk-admin-page) .kk-admin-document-head {
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body:has(.kk-admin-page) .font-extrabold,
body:has(.kk-admin-page) .font-black,
body.kk-message-page .font-extrabold,
body.kk-message-page .font-black {
  font-weight: 700 !important;
}

@media (max-width: 1150px) {
  body:has([data-admin-stat="users"]) .kk-admin-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body:has([data-admin-stat="users"]) .kk-admin-stat-grid,
  body:has([data-incident-stat="total"]) .kk-admin-stat-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.kk-admin-message-page,
  body:has(.kk-admin-page) {
    font-size: 14px !important;
  }

  body:has(.kk-admin-page) .kk-admin-heading h1,
  body.kk-message-page main h1 {
    font-size: 26px !important;
  }

  body:has(.kk-admin-page) .kk-admin-panel-title,
  body.kk-message-page aside.kk-card > h2,
  body.kk-message-page #kk-chat-name {
    font-size: 17px !important;
  }

  body.kk-message-page .kk-conversation h3,
  body.kk-message-page #kk-chat-booking-title,
  body.kk-message-page .kk-booking-card h3 {
    font-size: 15px !important;
  }

  body.kk-message-page .kk-message-bubble,
  body.kk-message-page .kk-composer input,
  body.kk-message-page .kk-search-box,
  body.kk-message-page .kk-search-box input {
    font-size: 14px !important;
  }

  body:has([data-admin-stat="users"]) .kk-admin-stat {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-rows: 38px auto !important;
    column-gap: 10px !important;
    row-gap: 9px !important;
  }

  body:has(.kk-admin-page) .kk-admin-stat-value {
    font-size: 22px !important;
  }
}

@media (max-width: 480px) {
  body:has([data-incident-stat="total"]) .kk-admin-stat-grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ============ client-artisan-typography-standard.css ============ */
/* KraftKonnect Client + Artisan typography standard.
   Loaded after the global typography system on role-facing pages so legacy
   component rules cannot re-introduce 800-weight headings or undersized copy. */

body.kk-client-artisan-type-page {
  font-family: "Open Sans", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400;
}

body.kk-client-artisan-type-page .font-extrabold,
body.kk-client-artisan-type-page .font-black {
  font-weight: 700 !important;
}

/* Shared links, tabs and compact navigation controls. */
body.kk-client-artisan-type-page .kk-link,
body.kk-client-artisan-type-page .kk-tab {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page .kk-filter-title {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page .kk-filter-chip,
body.kk-client-artisan-type-page .kk-service-tile,
body.kk-client-artisan-type-page .kk-choice,
body.kk-client-artisan-type-page .kk-step {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

body.kk-client-artisan-type-page .kk-step.active,
body.kk-client-artisan-type-page .kk-step.complete,
body.kk-client-artisan-type-page .kk-choice.active-blue,
body.kk-client-artisan-type-page .kk-choice.active-orange {
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page .kk-step-circle,
body.kk-client-artisan-type-page .kk-next-number,
body.kk-client-artisan-type-page .step-number {
  font-weight: 700 !important;
}

/* Forms: labels 13/700, entered text 14/500, primary controls 14/700. */
body.kk-client-artisan-type-page .kk-label,
body.kk-client-artisan-type-page .form-label,
body.kk-client-artisan-type-page label.kk-label {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page .kk-input,
body.kk-client-artisan-type-page .kk-select,
body.kk-client-artisan-type-page .kk-textarea,
body.kk-client-artisan-type-page .form-control,
body.kk-client-artisan-type-page input:not([type="checkbox"]):not([type="radio"]),
body.kk-client-artisan-type-page textarea,
body.kk-client-artisan-type-page select {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

body.kk-client-artisan-type-page .kk-btn-primary,
body.kk-client-artisan-type-page .kk-btn-outline,
body.kk-client-artisan-type-page .kk-btn-danger,
body.kk-client-artisan-type-page .kk-btn-ghost,
body.kk-client-artisan-type-page button[type="submit"] {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* Dashboard hierarchy. */
body.kk-client-artisan-type-page:has(.kk-dashboard-stat) main h1 + p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

body.kk-client-artisan-type-page:has(.kk-dashboard-stat) main h1 + p + p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

body.kk-client-artisan-type-page .kk-dashboard-stat > div:last-child > p:first-child,
body.kk-client-artisan-type-page .kk-stat-card > div:last-child > p:first-child {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

body.kk-client-artisan-type-page .kk-dashboard-stat h3,
body.kk-client-artisan-type-page .kk-stat-card h3 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page .kk-dashboard-stat .kk-link,
body.kk-client-artisan-type-page .kk-stat-card .kk-link {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Safety/support tiles shared by Client and Artisan dashboards. */
body.kk-client-artisan-type-page .kk-support-tile h3 {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page .kk-support-tile p {
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* Booking details is a shared Client / Artisan operational page. */
body.kk-client-artisan-type-page:has(#kk-booking-detail) #kk-detail-reference {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page:has(#kk-booking-detail) #kk-detail-counterpart {
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

body.kk-client-artisan-type-page:has(#kk-booking-detail) .kk-card h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page:has(#kk-booking-detail) #kk-detail-description {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

body.kk-client-artisan-type-page:has(#kk-booking-detail) .kk-fact span {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

body.kk-client-artisan-type-page:has(#kk-booking-detail) .kk-fact strong {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

body.kk-client-artisan-type-page:has(#kk-booking-detail) .kk-history-item p:first-child {
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page:has(#kk-booking-detail) .kk-history-item p + p {
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* Book Service: internal page heading/copy plus stepper and options. */
body.kk-client-artisan-type-page:has(.kk-stepper) main h1 + p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

body.kk-client-artisan-type-page:has(.kk-stepper) .kk-step {
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.kk-client-artisan-type-page:has(.kk-stepper) .kk-step.active,
body.kk-client-artisan-type-page:has(.kk-stepper) .kk-step.complete {
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page:has(.kk-stepper) .kk-choice,
body.kk-client-artisan-type-page:has(.kk-stepper) .kk-upload {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Public artisan profile. */
body.kk-client-artisan-type-page:has(.kk-profile-img-wrap) .kk-tab {
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page:has(.kk-profile-img-wrap) .kk-profile-avatar,
body.kk-client-artisan-type-page:has(.kk-profile-img-wrap) .kk-mini-avatar {
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page:has(.kk-profile-img-wrap) .kk-sidebar-card h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page:has(.kk-profile-img-wrap) .kk-work-card figcaption,
body.kk-client-artisan-type-page:has(.kk-profile-img-wrap) .kk-check-line,
body.kk-client-artisan-type-page:has(.kk-profile-img-wrap) .kk-review-mini p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* Find Artisans utility controls and result metadata. */
body.kk-client-artisan-type-page:has(#kk-service-search):has(#kk-results-card) .kk-filter-chip,
body.kk-client-artisan-type-page:has(#kk-service-search):has(#kk-results-card) .kk-service-tile {
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.kk-client-artisan-type-page:has(#kk-service-search):has(#kk-results-card) .kk-artisan-row h3 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page:has(#kk-service-search):has(#kk-results-card) .kk-artisan-row p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* FAQ / supporting copy should not inherit legacy 800-weight rules. */
body.kk-client-artisan-type-page .kk-faq-row,
body.kk-client-artisan-type-page .faq-item summary {
  font-weight: 700 !important;
}

body.kk-client-artisan-type-page .kk-faq-row p,
body.kk-client-artisan-type-page .faq-item p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

body.kk-client-artisan-type-page .kk-table-head {
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  body.kk-client-artisan-type-page {
    font-size: 14px !important;
  }

  body.kk-client-artisan-type-page .kk-dashboard-stat h3,
  body.kk-client-artisan-type-page .kk-stat-card h3 {
    font-size: 24px !important;
  }

  body.kk-client-artisan-type-page:has(.kk-dashboard-stat) main h1 + p,
  body.kk-client-artisan-type-page:has(.kk-dashboard-stat) main h1 + p + p,
  body.kk-client-artisan-type-page:has(.kk-stepper) main h1 + p {
    font-size: 14px !important;
  }

  body.kk-client-artisan-type-page:has(#kk-booking-detail) .kk-card h2,
  body.kk-client-artisan-type-page:has(.kk-profile-img-wrap) .kk-sidebar-card h2 {
    font-size: 17px !important;
  }
}

/* ============ client-artisan-typography-guard.css ============ */
/* Final weight guard for Client/Artisan role-facing UI.
   Decorative/control text may be bold, but never heavier than the platform's 700 maximum. */
body.kk-client-artisan-type-page :where(
  strong,
  b,
  .font-extrabold,
  .font-black,
  .kk-user-pill,
  .kk-user-trigger,
  .kk-avatar-text,
  .kk-profile-avatar,
  .kk-mini-avatar,
  .kk-message-avatar,
  .kk-unread,
  .kk-badge,
  .kk-tag,
  .kk-pill,
  .kk-day-chip,
  .kk-page-btn,
  .kk-progress-ring-inner,
  .kk-tip-number,
  .kk-flow-number,
  .kk-step-circle,
  .kk-next-number,
  .step-tab,
  .step-number,
  .kk-upload,
  .upload-card,
  .kk-filter-title,
  .kk-faq-row,
  .kk-footer-title
) {
  font-weight: 700 !important;
}

/* ============ auth-visual-hardening.css ============ */
/* Final authentication-page visual layer. Loaded after page CSS. */
body:has(.kk-auth-primary) .kk-auth-form-title {
  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body:has(.kk-auth-primary) .kk-auth-intro {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

body:has(.kk-auth-primary) .kk-auth-label {
  font-size: 13px !important;
  font-weight: 700 !important;
}

body:has(.kk-auth-primary) .kk-auth-input {
  min-height: 46px !important;
  height: 46px !important;
  min-width: 0;
}

body:has(.kk-auth-primary) .kk-auth-input input {
  min-width: 0;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body:has(.kk-auth-primary) .kk-auth-primary {
  min-height: 48px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body:has(.kk-auth-primary) .kk-card {
  overflow-wrap: anywhere;
}

body:has(.kk-auth-primary) .kk-social-btn {
  min-height: 44px;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Login / registration split page */
body:has(.kk-auth-visual) main {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

body:has(.kk-auth-visual) .kk-auth-visual {
  min-height: 480px !important;
  padding: 42px 36px !important;
}

body:has(.kk-auth-visual) .kk-auth-visual h1 {
  font-size: 34px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

body:has(.kk-auth-visual) .kk-auth-visual h1 + p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body:has(.kk-auth-visual) .kk-benefit {
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 14px !important;
  margin-top: 20px !important;
}

body:has(.kk-auth-visual) .kk-benefit .kk-icon-circle {
  width: 46px !important;
  height: 46px !important;
  font-size: 20px !important;
}

body:has(.kk-auth-visual) .kk-benefit h3 {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body:has(.kk-auth-visual) .kk-benefit p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body:has(.kk-auth-visual) .kk-trust-item {
  min-height: 92px !important;
  padding: 14px 22px !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 14px !important;
}

body:has(.kk-auth-visual) .kk-trust-item .kk-icon-circle {
  width: 44px !important;
  height: 44px !important;
  font-size: 19px !important;
}

/* Focused Forgot / Reset panels */
body:has(#forgot-panel) main,
body:has(#reset-panel) main {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

body:has(#forgot-panel) #forgot-panel,
body:has(#forgot-panel) #forgot-success,
body:has(#reset-panel) #reset-panel,
body:has(#reset-panel) #reset-success {
  padding: 28px !important;
}

body:has(#forgot-panel) .w-14.h-14,
body:has(#reset-panel) .w-14.h-14 {
  width: 48px !important;
  height: 48px !important;
  font-size: 20px !important;
}

@media (max-width: 768px) {
  body:has(.kk-auth-primary) .kk-auth-form-title {
    font-size: 26px !important;
  }

  body:has(.kk-auth-visual) main {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  body:has(.kk-auth-visual) .kk-auth-visual {
    display: none !important;
  }

  body:has(.kk-auth-visual) main section > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(.kk-auth-visual) main .kk-card {
    padding: 18px !important;
  }

  /* The desktop trust strip repeats the hidden visual-panel benefits on phones. */
  body:has(.kk-auth-visual) .kk-trust-strip {
    display: none !important;
  }

  body:has(#forgot-panel) main,
  body:has(#reset-panel) main {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  body:has(#forgot-panel) #forgot-panel,
  body:has(#forgot-panel) #forgot-success,
  body:has(#reset-panel) #reset-panel,
  body:has(#reset-panel) #reset-success {
    padding: 18px !important;
  }
}