/*
 * ミセモニ共通部品
 * design/tokens.css を先に読み込む。ここでは @import しない。
 * すべて .mm-ui 内だけに適用する。
 */

/* 1 色と形 */
.mm-ui {
  margin: 0;
  background: var(--mm-bg);
  color: var(--mm-text);
  font-family: var(--mm-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color-scheme: light;
  --mm-fixed-top: 0px;
  --mm-fixed-bottom: 0px;
  --mm-success-bg: var(--mm-card);
  --mm-info-bg: var(--mm-bg);
}

.mm-ui,
.mm-ui *,
.mm-ui *::before,
.mm-ui *::after {
  box-sizing: border-box;
}

.mm-ui .mm-main {
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  margin-inline: auto;
  padding: 24px 16px;
  padding-top: calc(24px + var(--mm-fixed-top));
  padding-bottom: calc(40px + var(--mm-fixed-bottom) + env(safe-area-inset-bottom, 0px));
}

.mm-ui .mm-card {
  min-width: 0;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-card);
  background: var(--mm-card);
}

.mm-ui .mm-card--form {
  padding: 24px 20px;
  margin-bottom: 24px;
}

.mm-ui .mm-card--warning {
  border-left: 4px solid var(--mm-warn-text);
}

.mm-ui .mm-card--error {
  border-color: var(--mm-error-text);
  border-left-width: 4px;
}

.mm-ui .mm-muted {
  color: var(--mm-text-sub);
}

.mm-ui .mm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.mm-ui .mm-grid > * {
  min-width: 0;
}

.mm-ui .mm-surface-navy {
  padding: 16px;
  border-radius: var(--mm-radius-control);
  background: var(--mm-navy);
  color: var(--mm-card);
}

/* 2 字 */
.mm-ui :where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.5;
}

.mm-ui h1 {
  margin: 0 0 24px;
  font-size: 26px;
}

.mm-ui h2 {
  margin: 0 0 24px;
  font-size: 24px;
}

.mm-ui h3 {
  margin: 0 0 16px;
  font-size: 20px;
}

.mm-ui :where(h4, h5, h6) {
  margin: 0 0 16px;
  font-size: 18px;
}

.mm-ui p {
  margin: 0 0 16px;
}

.mm-ui p:last-child {
  margin-bottom: 0;
}

.mm-ui :where(small, .mm-help, .mm-field-error, .mm-table) {
  font-size: 16px;
  line-height: 1.5;
}

.mm-ui :where(strong, b) {
  font-weight: 700;
}

.mm-ui .mm-number {
  font-variant-numeric: tabular-nums;
}

/* 3 押す所 */
.mm-ui :where(button, input, select, textarea) {
  font: inherit;
}

.mm-ui .mm-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.mm-ui .mm-actions--form {
  flex-direction: column;
  align-items: stretch;
}

.mm-ui :where(.mm-button, .mm-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
}

.mm-ui .mm-button {
  padding: 8px 16px;
  border: 1px solid var(--mm-green);
  border-radius: var(--mm-radius-control);
  background: var(--mm-card);
  color: var(--mm-green);
  text-decoration: none;
}

.mm-ui .mm-button--primary {
  background: var(--mm-green);
  color: var(--mm-card);
}

.mm-ui .mm-button--secondary {
  border-color: var(--mm-navy);
  color: var(--mm-navy);
}

.mm-ui .mm-button--danger {
  border-color: var(--mm-error-text);
  color: var(--mm-error-text);
}

.mm-ui .mm-button--link {
  border-color: var(--mm-line-input);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mm-ui .mm-button--large {
  min-height: 56px;
  padding: 12px 20px;
}

.mm-ui .mm-link {
  justify-content: flex-start;
  text-align: left; /* 2行に折れたリンク（エラーの一覧など）を中央に寄せない */
  padding: 8px 4px;
  border-radius: var(--mm-radius-control);
  color: var(--mm-green);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mm-ui .mm-button:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--mm-navy);
  border-color: var(--mm-navy);
  color: var(--mm-card);
  box-shadow: inset 0 0 0 2px var(--mm-card);
  transition: none;
}

.mm-ui .mm-link:not([aria-disabled="true"]):active {
  background: var(--mm-disabled-bg);
  color: var(--mm-navy);
  transition: none;
}

.mm-ui .mm-button:is(:disabled, [aria-disabled="true"]) {
  border-color: var(--mm-line-input);
  background: var(--mm-disabled-bg);
  color: var(--mm-text-sub);
  cursor: not-allowed;
}

.mm-ui .mm-link[aria-disabled="true"] {
  color: var(--mm-text-sub);
  text-decoration: none;
  cursor: not-allowed;
}

.mm-ui .mm-button[aria-busy="true"] {
  cursor: wait;
}

.mm-ui .mm-choices {
  display: grid;
  gap: 12px;
}

.mm-ui .mm-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 44px;
  min-height: 56px;
  padding: 16px;
  border: 1px solid var(--mm-line-input);
  border-radius: var(--mm-radius-control);
  background: var(--mm-card);
  cursor: pointer;
  touch-action: manipulation;
}

.mm-ui .mm-choice > span {
  min-width: 0;
}

.mm-ui .mm-choice input:is([type="checkbox"], [type="radio"]) {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--mm-green);
}

.mm-ui .mm-choice:has(input:checked) {
  border-color: var(--mm-green);
  background: var(--mm-bg);
  box-shadow: inset 4px 0 0 var(--mm-green);
}

.mm-ui .mm-choice:has(input:disabled) {
  background: var(--mm-disabled-bg);
  color: var(--mm-text-sub);
  cursor: not-allowed;
}

.mm-ui .mm-choice:active {
  background: var(--mm-bg);
}

@media (hover: hover) {
  .mm-ui .mm-button:not(:disabled):not([aria-disabled="true"]):hover:not(:active) {
    background: var(--mm-bg);
  }

  .mm-ui .mm-button--primary:not(:disabled):not([aria-disabled="true"]):hover:not(:active) {
    background: var(--mm-navy);
    border-color: var(--mm-navy);
  }

  .mm-ui .mm-button--danger:not(:disabled):not([aria-disabled="true"]):hover:not(:active) {
    background: var(--mm-error-bg);
  }

  .mm-ui .mm-link:not([aria-disabled="true"]):hover:not(:active) {
    background: var(--mm-bg);
    color: var(--mm-navy);
  }

  .mm-ui .mm-choice:not(:has(input:disabled)):hover:not(:active) {
    border-color: var(--mm-navy);
    background: var(--mm-bg);
  }
}

/* 4 フォーカス・本文への移動・現在地 */
.mm-ui :focus-visible,
.mm-ui .mm-choice:has(input:focus-visible) {
  outline: 3px solid var(--mm-navy);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--mm-card);
}

.mm-ui .mm-surface-navy :focus-visible {
  outline-color: var(--mm-card);
  box-shadow: 0 0 0 4px var(--mm-navy);
}

.mm-ui .mm-surface-navy .mm-link {
  color: var(--mm-card);
}

.mm-ui .mm-skip {
  position: absolute;
  left: -10000px;
  top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--mm-radius-control);
  background: var(--mm-card);
  color: var(--mm-navy);
}

.mm-ui .mm-skip:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
}

/* 今いるメニュー：左の線と地の色は、メニュー（nav）の中のリンクだけ。
   パンくず（aria-label="パンくず" か .mm-breadcrumb）や、リンクでない印（span）は太字だけ（販売サイトの入れ込みで分かった・10/11） */
.mm-ui [aria-current="page"] {
  color: var(--mm-navy);
  font-weight: 700;
}

.mm-ui :is(nav, [role="navigation"]):not(.mm-breadcrumb):not([aria-label="パンくず"]) a[aria-current="page"] {
  border-left: 4px solid var(--mm-navy);
  border-radius: var(--mm-radius-control);
  background: var(--mm-bg);
  color: var(--mm-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.mm-ui .mm-surface-navy :is(nav, [role="navigation"]) a[aria-current="page"] {
  background: var(--mm-card);
  color: var(--mm-navy);
}

.mm-ui :where([id], :focus) {
  scroll-margin-top: calc(24px + var(--mm-fixed-top));
  scroll-margin-bottom: calc(24px + var(--mm-fixed-bottom) + env(safe-area-inset-bottom, 0px));
}

/* 5 入力欄・札・補足・エラー */
.mm-ui .mm-field {
  min-width: 0;
  margin: 0 0 28px;
}

.mm-ui fieldset.mm-field {
  padding: 0;
  border: 0;
}

.mm-ui .mm-field:last-child {
  margin-bottom: 0;
}

.mm-ui .mm-label {
  display: block;
  max-width: 100%;
  padding: 0;
  margin-bottom: 8px;
  font-weight: 700;
}

.mm-ui .mm-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--mm-radius-control);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.mm-ui .mm-tag--required {
  background: var(--mm-error-bg);
  color: var(--mm-error-text);
}

.mm-ui .mm-tag--optional {
  background: var(--mm-bg);
  color: var(--mm-text-sub);
}

.mm-ui .mm-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  padding: 12px;
  border: 1px solid var(--mm-line-input);
  border-radius: var(--mm-radius-control);
  background: var(--mm-card);
  color: var(--mm-text);
  font-size: 16px;
  line-height: 1.5;
}

.mm-ui textarea.mm-input {
  min-height: 160px;
  resize: vertical;
}

.mm-ui .mm-input::placeholder {
  color: var(--mm-text-sub);
  opacity: 1;
}

.mm-ui .mm-input:disabled {
  background: var(--mm-disabled-bg);
  color: var(--mm-text-sub);
  cursor: not-allowed;
}

.mm-ui .mm-input[readonly] {
  background: var(--mm-bg);
}

.mm-ui .mm-input[aria-invalid="true"],
.mm-ui .mm-choice:has(input[aria-invalid="true"]) {
  border-color: var(--mm-error-text);
  outline: 2px solid var(--mm-error-text);
  outline-offset: 1px;
}

.mm-ui .mm-input[aria-invalid="true"]:focus-visible,
.mm-ui .mm-choice:has(input[aria-invalid="true"]:focus-visible) {
  outline: 3px solid var(--mm-navy);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--mm-card);
}

.mm-ui .mm-help {
  margin: 8px 0 0;
  color: var(--mm-text-sub);
}

.mm-ui .mm-field-error,
.mm-ui .mm-error-summary {
  padding: 12px 16px;
  border-left: 4px solid var(--mm-error-text);
  border-radius: var(--mm-radius-control);
  background: var(--mm-error-bg);
  color: var(--mm-error-text);
  font-size: 16px;
  line-height: 1.5;
}

.mm-ui .mm-field-error {
  margin: 12px 0 0;
}

.mm-ui .mm-error-summary {
  margin: 0 0 24px;
}

.mm-ui .mm-error-summary h2 {
  margin-bottom: 8px;
  font-size: 20px;
}

.mm-ui .mm-error-summary ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 24px;
}

.mm-ui .mm-error-summary .mm-link {
  color: var(--mm-error-text);
}

.mm-ui [hidden] {
  display: none !important;
}

/* 6 状態の札：色＋字＋SVGの印 */
.mm-ui .mm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--mm-line-input);
  border-radius: var(--mm-radius-control);
  background: var(--mm-info-bg);
  color: var(--mm-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}

.mm-ui .mm-badge--success {
  border-color: var(--mm-green);
  background: var(--mm-success-bg);
  color: var(--mm-green);
}

.mm-ui .mm-badge--warning {
  border-color: var(--mm-warn-text);
  background: var(--mm-warn-bg);
  color: var(--mm-warn-text);
}

.mm-ui .mm-badge--error {
  border-color: var(--mm-error-text);
  background: var(--mm-error-bg);
  color: var(--mm-error-text);
}

.mm-ui .mm-badge--pending {
  background: var(--mm-bg);
  color: var(--mm-text-sub);
}

.mm-ui .mm-badge--info {
  border-color: var(--mm-navy);
  background: var(--mm-info-bg);
  color: var(--mm-navy);
}

.mm-ui .mm-icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 7 表のカード化・横はみ出し防止 */
.mm-ui :where(main, section, form, fieldset, .mm-field, .mm-live) {
  min-width: 0;
}

.mm-ui :where(img, video, svg) {
  max-width: 100%;
}

.mm-ui :where(img, video) {
  height: auto;
}

.mm-ui .mm-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-card);
  background: var(--mm-card);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.mm-ui .mm-table caption {
  padding: 0 0 12px;
  color: var(--mm-text);
  font-weight: 700;
  text-align: left;
}

.mm-ui .mm-table :where(th, td) {
  min-width: 0;
  padding: 12px;
  border-bottom: 1px solid var(--mm-line);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.mm-ui .mm-table thead th {
  background: var(--mm-bg);
  color: var(--mm-text-sub);
  font-weight: 700;
}

.mm-ui .mm-table thead th:first-child {
  border-top-left-radius: var(--mm-radius-card);
}

.mm-ui .mm-table thead th:last-child {
  border-top-right-radius: var(--mm-radius-card);
}

.mm-ui .mm-table tbody tr:last-child > * {
  border-bottom: 0;
}

.mm-ui .mm-table .mm-actions {
  gap: 8px;
}

@media (max-width: 640px) {
  .mm-ui .mm-table {
    display: block;
    border: 0;
    background: none;
  }

  .mm-ui .mm-table caption {
    display: block;
  }

  /* 見出しを読み上げから消さず、視覚的にだけ隠す。 */
  .mm-ui .mm-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .mm-ui .mm-table tbody {
    display: grid;
    gap: 16px;
    width: 100%;
  }

  .mm-ui .mm-table tbody tr {
    display: block;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-card);
    background: var(--mm-card);
  }

  .mm-ui .mm-table tbody :where(td, th) {
    display: block;
    width: 100%;
    padding: 8px 0;
    border: 0;
  }

  .mm-ui .mm-table tbody :where(td, th)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--mm-text-sub);
    font-weight: 700;
  }
}

@media (min-width: 768px) {
  .mm-ui .mm-main {
    padding-inline: 24px;
  }

  .mm-ui h1 {
    font-size: 32px;
  }

  .mm-ui h2 {
    font-size: 28px;
  }

  .mm-ui .mm-card--form {
    padding: 32px;
  }

  .mm-ui .mm-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-ui .mm-actions--form {
    flex-direction: row;
    align-items: center;
  }
}

/* 8 更新領域：場所を確保するだけ。自動更新・点滅・回転はしない。 */
.mm-ui .mm-live {
  min-width: 0;
  position: relative;
}

.mm-ui .mm-live-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 8px;
  color: var(--mm-text-sub);
  font-variant-numeric: tabular-nums;
}

.mm-ui .mm-live-status > span {
  min-width: 0;
}

.mm-ui .mm-live[aria-busy="true"] {
  outline: 1px dashed var(--mm-line-input);
  outline-offset: 4px;
}

/* 9 メニューの数・構成は今回の対象外。 */

/* 10 動き：180msの操作状態変化だけ */
.mm-ui :where(.mm-button, .mm-link, .mm-choice) {
  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    color 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .mm-ui,
  .mm-ui *,
  .mm-ui *::before,
  .mm-ui *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .mm-ui :focus-visible,
  .mm-ui .mm-choice:has(input:focus-visible) {
    outline: 3px solid;
    box-shadow: none;
  }

  .mm-ui .mm-choice:has(input:checked) {
    border-width: 3px;
  }

  .mm-ui .mm-input[aria-invalid="true"] {
    border-width: 3px;
  }
}