@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

/*
 * Shared final cascade for the existing SOAM Link screens.
 * It intentionally changes presentation only: existing IDs, state classes,
 * form controls, event selectors and data attributes stay untouched.
 */
:root {
  --soam-font-family: "Inter", "IBM Plex Sans JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}

html { font-family: var(--soam-font-family); }

.soam-font-unify,
.soam-font-unify button,
.soam-font-unify input,
.soam-font-unify select,
.soam-font-unify textarea {
  font-family: var(--soam-font-family) !important;
}

.soam-font-unify {
  --bg: var(--soam-bg);
  --surface: var(--soam-surface);
  --ink: var(--soam-ink);
  --ink-2: var(--soam-ink-2);
  --ink-soft: var(--soam-muted);
  --ink-faint: var(--soam-faint);
  --line: var(--soam-line);
  --accent: var(--soam-accent);
  --accent-soft: var(--soam-accent-soft);
  --teal: var(--soam-teal);
  --teal-soft: var(--soam-teal-soft);
  --amber: var(--soam-amber);
  --amber-soft: var(--soam-amber-soft);
  --error: var(--soam-red);
  --error-soft: var(--soam-red-soft);
  --violet: var(--soam-violet);
  --violet-soft: var(--soam-violet-soft);
  --navy: var(--soam-navy);
  --sans: var(--soam-font-family);
  --gothic: var(--soam-font-family);
  --serif: var(--soam-font-family);
  --sl-sans: var(--soam-font-family);
  --sl-display: var(--soam-font-family);
  --sl-mono: var(--soam-font-family);
  --font-soam-jp: var(--soam-font-family);
  --font-soam-latin: var(--soam-font-family);
  --soam-radius-card: 16px;
  background: var(--soam-bg);
  color: var(--soam-ink);
  font-synthesis: none;
}

.soam-font-unify *,
.soam-font-unify *::before,
.soam-font-unify *::after { box-sizing: border-box; }

.soam-font-unify h1,
.soam-font-unify h2,
.soam-font-unify h3,
.soam-font-unify h4,
.soam-font-unify h5,
.soam-font-unify h6 { font-family: var(--soam-font-family) !important; }

.soam-font-unify h1 { font-size: clamp(22px, 3vw, 37px); line-height: 1.35; }
.soam-font-unify h2 { line-height: 1.45; }
.soam-font-unify p { overflow-wrap: break-word; }

.soam-font-unify .card,
.soam-font-unify .panel,
.soam-font-unify .authBox,
.soam-font-unify .auth-card,
.soam-font-unify .kpi,
.soam-font-unify .modal-card,
.soam-font-unify .modal-content {
  border-color: var(--soam-line);
  border-radius: var(--soam-radius-card);
}

.soam-font-unify .card,
.soam-font-unify .panel,
.soam-font-unify .authBox,
.soam-font-unify .auth-card,
.soam-font-unify .kpi {
  box-shadow: 0 1px 3px rgba(16, 22, 42, .06);
}

.soam-font-unify .btn,
.soam-font-unify .btnPrimary,
.soam-font-unify .sl-ui-btn,
.soam-font-unify .actions > button,
.soam-font-unify .authTabs button,
.soam-font-unify .linkCopy button,
.soam-font-unify .sl-menu-button {
  min-height: 44px;
  border-radius: var(--soam-radius-button);
  font-weight: 600;
  line-height: 1.25;
}

.soam-font-unify .btn.sm,
.soam-font-unify .btn-sm,
.soam-font-unify .copyBtn,
.soam-font-unify .linkCopy button { min-height: 32px; }

.soam-font-unify .sl-menu-button { min-width: 44px; }

.soam-font-unify .btn,
.soam-font-unify .btnPrimary,
.soam-font-unify .sl-ui-btn,
.soam-font-unify .actions > button { white-space: nowrap; }

.soam-font-unify input,
.soam-font-unify select,
.soam-font-unify textarea {
  min-height: 44px;
  border-color: var(--soam-line);
  border-radius: var(--soam-radius-button);
  color: var(--soam-ink);
}

.soam-font-unify textarea { min-height: 96px; }

.soam-font-unify .content,
.soam-font-unify .wrap,
.soam-font-unify main {
  min-width: 0;
}

.soam-font-unify .content { padding: var(--soam-space-6) var(--soam-space-6) var(--soam-space-12); }
.soam-font-unify .wrap { padding: var(--soam-space-6) var(--soam-space-5) var(--soam-space-12); }

.soam-font-unify .scroll-x { max-width: 100%; -webkit-overflow-scrolling: touch; }
.soam-font-unify .scroll-x table { min-width: 640px; }

.soam-font-unify .empty,
.soam-font-unify .sl-ui-empty-state { min-height: 0; padding: var(--soam-space-6); }

.soam-font-unify .modal,
.soam-font-unify .modal-backdrop,
.soam-font-unify [role="dialog"] { max-width: 100%; }

.soam-font-unify .sl-preview-disclaimer {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--soam-space-3);
  padding: 6px 10px;
  border: 1px solid var(--soam-line);
  border-radius: var(--soam-radius-button);
  background: var(--soam-surface);
  color: var(--soam-ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* Links that act as the primary control for a prelaunch public route keep the
   same touch target as buttons without changing their existing destination. */
.soam-font-unify .claude-public-menu summary,
.soam-font-unify .claude-public-menu a,
.soam-font-unify .claude-public-role-card a,
.soam-font-unify .claude-public-trust-grid a,
.soam-font-unify .sl-lock-cta-buttons a,
.soam-font-unify .policy-nav a,
.soam-font-unify .topbar > a,
.soam-font-unify .al-reset-link,
.soam-font-unify .labels > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

@media (max-width: 980px) {
  /* The maker information grid's four fixed columns caused an 817px-wide
     tablet to overflow. Keep the same content and hierarchy, but release it
     into a natural single-column section before the phone breakpoint. */
  .soam-font-unify .sl-lock-maker-bottom-grid .sl-container { grid-template-columns: minmax(0, 1fr); }
  .soam-font-unify .sl-lock-point-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soam-font-unify .sl-lock-point-grid > * { min-width: 0; }
}

@media (max-width: 768px) {
  .soam-font-unify .content,
  .soam-font-unify .wrap { padding: var(--soam-space-5) var(--soam-space-4) var(--soam-space-10); }
  .soam-font-unify .formGrid,
  .soam-font-unify .form-grid,
  .soam-font-unify .result-grid,
  .soam-font-unify .judgment-grid { grid-template-columns: 1fr; }
  .soam-font-unify .console { grid-template-columns: 1fr; gap: var(--soam-space-4); }
  .soam-font-unify .console-nav { position: static; flex-direction: row; overflow-x: auto; }
  .soam-font-unify .console-nav > * { flex: 0 0 auto; }
  .soam-font-unify .sidebar { position: static; height: auto; }
  .soam-font-unify .topbar { padding: var(--soam-space-4); }
  .soam-font-unify .authBox,
  .soam-font-unify .auth-card { margin-top: var(--soam-space-5); padding: var(--soam-space-6) var(--soam-space-5); }
}

@media (max-width: 480px) {
  .soam-font-unify .content,
  .soam-font-unify .wrap { padding-inline: var(--soam-space-3); }
  .soam-font-unify .card .ch,
  .soam-font-unify .card .cb { padding-inline: var(--soam-space-4); }
  .soam-font-unify .actions,
  .soam-font-unify .auth-row,
  .soam-font-unify .claude-public-hero__actions { display: grid; grid-template-columns: 1fr; }
  .soam-font-unify .actions > button,
  .soam-font-unify .auth-row > button,
  .soam-font-unify .sl-ui-btn { width: 100%; justify-content: center; }
  .soam-font-unify .kpiGrid { grid-template-columns: 1fr; }
  .soam-font-unify .auth-row input { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .soam-font-unify *, .soam-font-unify *::before, .soam-font-unify *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}