/* ShowCountdown redesign: mobile + Japanese polish overlay.
   Purpose: raises touch targets to 40-44px on small screens and refines
   Japanese type metrics. Layout, colour and desktop chrome are left alone.
   Load order: last, after every other stylesheet.
   Rollback: remove the sc-redesign-polish.css <link>. Nothing depends on it. */

/* ==========================================================================
   1. Japanese type (all viewports)
   ========================================================================== */

html:lang(ja) {
  --sc-font-sans: "Inter", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-break: strict;
  overflow-wrap: break-word;
}

html:lang(ja) body {
  line-height: 1.75;
}

html:lang(ja) body :is(h1, h2, h3) {
  font-weight: 700;
  letter-spacing: 0;
  line-break: strict;
}

/* Unsupported browsers ignore this and keep normal CJK breaking */
@supports (word-break: auto-phrase) {
  html:lang(ja) body :is(h1, h2, h3) {
    word-break: auto-phrase;
  }
}

html:lang(ja) body .auth-page :is(h1, h2, h3),
html:lang(ja) body .marketing-page :is(h1, h2, h3, .instant-hero h1, .hero-copy h1, .case-hero h1, .hub-hero h1) {
  font-weight: 700;
  letter-spacing: 0;
}

/* ==========================================================================
   2. Marketing and auth chrome (phones and small tablets)
   ========================================================================== */

@media (max-width: 760px) {
  html .sc-theme-toggle,
  html .mobile-nav-toggle,
  html .marketing-page .language-link,
  html .auth-page .language-link {
    flex: none;
    min-width: 44px;
    min-height: 44px;
  }

  html .marketing-page .language-link,
  html .auth-page .language-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  html .marketing-header .marketing-brand {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  html .marketing-header .marketing-actions {
    min-width: 0;
  }

  html .marketing-footer .marketing-brand,
  html .marketing-page .marketing-footer > div a,
  html .marketing-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  html .marketing-page .breadcrumbs a {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  html .marketing-page .trust-strip a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Timer and preset chips, and the calculator's copy action, stop just short of 40px */
  html .marketing-page :is(.timer-link-group a, .preset-links a, .calculator-directory a, .inline-timer-links a, .card-timer-links a, .online-use-card > div a, .policy-links a, .popular-timer-panel nav a) {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  html .marketing-page .calculator-answer button {
    min-height: 40px;
  }

  html .marketing-page .breadcrumbs ol {
    row-gap: 0;
  }

  html .inline-link,
  html .marketing-page .inline-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
  }

  html .auth-page .auth-switch a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   3. Room chrome (phones and small tablets)
   One topbar row: the switcher gives up width first, the icons never do.
   ========================================================================== */

@media (max-width: 760px) {
  html .app-shell .topbar {
    gap: 4px;
    min-width: 0;
  }

  html .app-shell .topbar .brand,
  html .app-shell .topbar .topbar-status {
    flex: none;
  }

  html .app-shell .topbar .topbar-spacer {
    flex: 0 1 0;
    min-width: 0;
  }

  html .app-shell .topbar .topbar-status {
    padding-inline: 8px;
    letter-spacing: .04em;
  }

  html .app-shell .event-switcher {
    flex: 0 1 auto;
    min-width: 0;
    height: 40px;
  }

  html .app-shell .icon-button,
  html .app-shell .utility-button,
  html .topbar .sc-theme-toggle,
  html .role-header .sc-theme-toggle {
    flex: none;
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  html .app-shell .room-grid :is(.add-button, .message-composer button) {
    min-height: 40px;
  }

  /* The rundown keeps its columns; only the action column grows */
  html .room-grid .cue-columns,
  html .room-grid .cue-row {
    grid-template-columns: 26px minmax(0, 1fr) 58px 100px;
    column-gap: 8px;
  }

  html .app-shell .room-grid .go-button {
    min-width: 52px;
    height: 40px;
  }

  html .room-grid .cue-menu-trigger {
    flex: none;
    width: 40px;
    height: 40px;
  }

  html .room-grid .cue-row-actions {
    gap: 4px;
  }
}

/* ==========================================================================
   4. Narrow phones
   ========================================================================== */

@media (max-width: 420px) {
  html .sc-theme-toggle,
  html .mobile-nav-toggle,
  html .marketing-page .language-link,
  html .auth-page .language-link {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Under 360px the status keeps its dot and yields the label to the switcher */
@media (max-width: 359px) {
  html .app-shell .topbar .topbar-status {
    width: 24px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
}