/*
 * 画面部品のスタイル。製品側は Tailwind のユーティリティで書かれているため、
 * ここでは同じ見え方になる CSS を手で書いている。対応する製品側の実装は
 * frontend/src/shared/ui/ と frontend/src/features/project/components/。
 */

/* ---------------------------------------------------------------- 汎用部品 */

.icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon--sm {
  width: 0.875rem;
  height: 0.875rem;
}

.icon--lg {
  width: 1.25rem;
  height: 1.25rem;
}

.icon--xl {
  width: 2rem;
  height: 2rem;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ボタン。frontend/src/shared/ui/button.tsx の variants と同じ組み合わせ。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition:
    background-color 120ms ease,
    color 120ms ease;
  white-space: nowrap;
}

.btn--sm {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
}

.btn--secondary {
  background: var(--color-bg-3);
  color: var(--color-fg);
}

.btn--secondary:hover {
  background: var(--color-bg-4);
}

.btn--ghost {
  background: transparent;
  color: var(--color-fg);
}

.btn--ghost:hover {
  background: var(--color-bg-2);
}

.btn--outline {
  border-color: var(--color-line);
  background: var(--color-bg);
  color: var(--color-fg);
}

.btn--outline:hover {
  background: var(--color-bg-3);
}

.btn--icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

/* 行の削除など、枠は通常色で文字だけ警告色にするボタン。 */
.btn.btn--danger-text {
  color: var(--color-crit);
}

.btn:disabled {
  pointer-events: none;
  background: var(--color-bg-2);
  color: var(--color-fg-4);
  border-color: var(--color-line-2);
}

.btn:focus-visible,
.select:focus-visible,
.field-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  outline-offset: 0;
}

.select {
  appearance: none;
  height: 2rem;
  width: 100%;
  padding: 0 2rem 0 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg-2);
  color: var(--color-fg);
  cursor: pointer;
}

.select:hover {
  background: var(--color-bg-3);
}

.select-wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.select-wrap > .icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-fg-2);
}

.field-input,
.field-textarea {
  width: 100%;
  border: 1px solid var(--color-line-2);
  background: var(--color-bg);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.field-textarea {
  min-height: 4rem;
  resize: vertical;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.field__label {
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

.sod-input {
  width: 4rem;
  border: 1px solid var(--color-line-2);
  background: var(--color-bg);
  padding: 0.25rem 0.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* セグメントタブ (連続行の表示方法)。 */
.segmented {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  border: 1px solid var(--color-line-2);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 0.125rem;
}

.segmented__item {
  border-radius: var(--radius-md);
  padding: 0.375rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-fg-2);
}

.segmented__item:hover {
  color: var(--color-fg);
  background: color-mix(in srgb, var(--color-bg-2) 50%, transparent);
}

.segmented__item[aria-selected='true'] {
  background: var(--color-bg-2);
  color: var(--color-fg);
}

/* ------------------------------------------------------------------ app bar */

.appbar {
  border-bottom: 1px solid var(--color-line);
  flex: none;
}

.appbar__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.5rem;
}

.appbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-fg);
  text-decoration: none;
}

.appbar__logo {
  height: 1.5rem;
  width: auto;
  fill: currentColor;
}

.appbar__product {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.appbar__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-fg-2);
}

.appbar__back:hover {
  color: var(--color-fg);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  min-width: 0;
  list-style: none;
  padding: 0;
}

.crumbs__sep {
  color: var(--color-fg-2);
  display: flex;
}

.crumbs__link {
  color: var(--color-fg-3);
  text-decoration: none;
}

.crumbs__link:hover {
  color: var(--color-fg);
}

.crumbs__current {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spacer {
  flex: 1;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-btn__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.popover {
  position: fixed;
  z-index: 50;
  min-width: 11rem;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: 0.25rem;
  color: var(--color-fg);
}

.popover__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
}

.popover__item:hover {
  background: var(--color-bg-2);
}

.popover__sep {
  height: 1px;
  background: var(--color-line);
  margin: 0.25rem 0;
}

/* -------------------------------------------------------------------- page */

.page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.page__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  flex: 1;
  min-height: 0;
}

.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-line-2);
  flex: none;
}

.tabbar__tabs {
  display: flex;
  gap: 1.5rem;
}

.tabbar__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  align-self: center;
}

.tab {
  border-bottom: 2px solid transparent;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-fg-2);
  transition: color 120ms ease;
}

.tab:hover {
  color: var(--color-fg);
}

.tab[aria-selected='true'] {
  border-bottom-color: var(--color-primary);
  color: var(--color-fg);
  font-weight: 500;
}

.tab:disabled {
  color: var(--color-fg-4);
  cursor: not-allowed;
}

.tab__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* ------------------------------------------------------- 案件データ (CD-01c) */

.metaband {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 0.25rem;
  background: var(--color-bg-2);
  padding: 1rem;
  font-size: 0.875rem;
  flex: none;
}

.metaband__label {
  color: var(--color-fg-2);
}

.metaband__value {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.metaband__value > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metaband__edit {
  flex: none;
  border-radius: var(--radius-sm);
  padding: 0.125rem;
  color: var(--color-fg-3);
  display: inline-flex;
}

.metaband__edit:hover {
  background: var(--color-bg-3);
  color: var(--color-fg);
}

.metaband__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.bopcard {
  max-width: 880px;
  border: 1px solid var(--color-line-2);
  flex: none;
}

.bopcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-line-2);
  padding: 0.75rem 1rem;
}

.bopcard__head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.bopcard__required {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-crit);
}

.bopcard__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bopcard__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.stat__label {
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

.stat__value {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.bopcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--color-line-2);
  background: var(--color-bg-2);
  padding: 0.75rem 1rem;
}

/* 中央寄せの状態表示 (生成中 GEN-02 / 生成失敗 GEN-03)。 */
.center-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 5rem 0;
  text-align: center;
}

.dots {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dots > span {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-fg-3);
  font-size: 0.875rem;
  text-decoration: none;
}

.link-quiet:hover {
  color: var(--color-fg);
}

/* ------------------------------------------------------ PFMEA レビュー表 */

.review {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
}

.review__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-fg-2);
  flex: none;
}

.review__bar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.review__scroll {
  overflow: auto;
  flex: 1;
  min-height: 12rem;
}

.review__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--color-line-2);
  padding-top: 0.75rem;
  flex: none;
}

.rev-table {
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
}

.rev-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg-2);
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

.rev-table th {
  border: 1px solid var(--color-line-2);
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.rev-table td {
  border: 1px solid var(--color-line-2);
  padding: 0.5rem 0.75rem;
  vertical-align: top;
}

.rev-table tbody tr {
  cursor: pointer;
}

.rev-table tbody tr:hover {
  background: var(--color-bg-2);
}

.rev-table tbody tr.is-high {
  background: color-mix(in srgb, var(--color-crit) 5%, transparent);
}

.c-num {
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

th.c-sod {
  text-align: center;
  background: color-mix(in srgb, var(--color-bg-2) 60%, transparent);
}

td.c-sod {
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--color-bg-2) 30%, transparent);
}

.c-mode {
  font-weight: 500;
}

.rev-table td:focus {
  outline: none;
}

.rev-table td.is-selected {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.order {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

/* リスクのバッジ (RPN / AP)。 */
.badge {
  display: inline-flex;
  min-width: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge--high {
  background: var(--color-crit);
  color: var(--color-bg);
}

.badge--mid {
  background: var(--color-warn);
  color: var(--color-bg);
}

.badge--low {
  border: 1px solid var(--color-ok);
  background: color-mix(in srgb, var(--color-ok) 10%, transparent);
  color: var(--color-ok);
}

.badge--ap {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.origin-tag {
  display: inline-block;
  border: 1px solid;
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.origin-tag--known {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.origin-tag--new {
  border-color: var(--color-warn);
  color: var(--color-warn);
}

/* 右クリックメニュー (REV-04a)。 */
.ctx-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.ctx-menu {
  position: fixed;
  z-index: 50;
  min-width: 14rem;
  border: 1px solid var(--color-line-2);
  background: var(--color-bg);
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.ctx-menu__item {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  text-align: left;
}

.ctx-menu__item:hover {
  background: var(--color-bg-2);
}

.ctx-menu__item--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ctx-menu__item--danger {
  color: var(--color-crit);
}

.ctx-menu__sep {
  margin: 0.25rem 0;
  border-top: 1px solid var(--color-line-2);
}

.ctx-menu__key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-fg-3);
}

/* ----------------------------------------------------------------- ダイアログ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-fg) 40%, transparent);
  backdrop-filter: blur(4px);
  animation: overlay-in 520ms ease-out;
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
}

.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  pointer-events: none;
}

.dialog {
  pointer-events: auto;
  width: 100%;
  max-width: 28rem;
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  animation: dialog-in 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.dialog--wide {
  max-width: 1160px;
  max-height: 85vh;
}

.dialog--pad {
  padding: 1.25rem;
  gap: 1rem;
}

.dialog__title {
  font-size: 1rem;
  font-weight: 500;
}

.dialog__desc {
  font-size: 0.875rem;
  color: var(--color-fg-2);
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-line-2);
  padding: 1rem 1.25rem;
  flex: none;
}

.dialog__head-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dialog__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-line-2);
  background: var(--color-bg-2);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  flex: none;
}

.dialog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--color-line-2);
  padding: 0.75rem 1.25rem;
  flex: none;
}

.dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.dialog__scroll {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* 取込データのプレビュー (CD-01d)。列幅は合計 100%。 */
.preview-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 0.875rem;
}

.preview-table thead {
  position: sticky;
  top: 0;
  background: var(--color-bg-2);
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

.preview-table th {
  border-bottom: 1px solid var(--color-line-2);
  border-right: 1px solid var(--color-line-2);
  border-top: 1px solid var(--color-line-2);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: bottom;
  font-weight: 500;
}

.preview-table th:first-child,
.preview-table td:first-child {
  border-left: 1px solid var(--color-line-2);
}

.preview-table td {
  border-bottom: 1px solid var(--color-line-2);
  border-right: 1px solid var(--color-line-2);
  padding: 0.5rem 0.75rem;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.625;
}

.preview-table tr.has-missing {
  background: color-mix(in srgb, var(--color-warn) 10%, transparent);
}

.preview-table td.is-missing {
  color: var(--color-warn);
}

/* 行編集モーダル (REV-01c)。 */
.rowmodal__body {
  display: flex;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.rowmodal__form {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
  padding: 1.25rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.sod-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.sod-row__score {
  margin-left: auto;
  text-align: right;
}

.sod-row__score-value {
  font-size: 1.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rowmodal__aside {
  display: flex;
  width: 400px;
  flex: none;
  flex-direction: column;
  border-left: 1px solid var(--color-line-2);
  background: var(--color-bg-2);
}

.rowmodal__aside-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-line-2);
  padding: 0.75rem 1rem;
}

.rowmodal__aside-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
  overflow: auto;
  padding: 0.875rem;
}

.evidence {
  border: 1px solid var(--color-line-2);
  background: var(--color-bg);
  padding: 0.75rem;
}

.evidence__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.evidence__ref {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

.evidence__text {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

.nav-position {
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

/* Excel 出力モーダル (EX-01) とアカウント設定 (AC-01)。 */
.fieldset {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line-2);
  margin: 0;
  padding: 0;
}

.fieldset__title {
  border-bottom: 1px solid var(--color-line-2);
  background: var(--color-bg-2);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.fieldset__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.option input {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex: none;
  accent-color: var(--color-primary);
}

.option__text {
  display: flex;
  flex-direction: column;
}

.option__desc {
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

.file-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-left: 2px solid var(--color-primary);
  background: var(--color-bg-2);
  padding: 0.5rem 0.75rem;
}

.file-preview__name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-3);
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.theme-choices {
  display: flex;
  gap: 0.5rem;
}

.theme-choice {
  display: flex;
  flex: 1;
  cursor: pointer;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--color-line-2);
  background: var(--color-bg);
  padding: 0.5rem;
}

.theme-choice:hover {
  border-color: var(--color-line);
}

.theme-choice.is-selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.theme-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.theme-choice__swatch {
  display: flex;
  height: 50px;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--color-line-2);
  padding: 0.5rem;
}

.theme-choice__swatch i {
  display: block;
  height: 5px;
  background: currentColor;
  opacity: 0.45;
}

.theme-choice__swatch i:first-child {
  width: 62%;
  opacity: 0.8;
}

.theme-choice__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
}

.radio-dot {
  display: flex;
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
}

.is-selected .radio-dot {
  border-color: var(--color-primary);
}

.radio-dot > span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  opacity: 0;
}

.is-selected .radio-dot > span {
  opacity: 1;
}

/* ------------------------------------------------------------ トースト・注記 */

.toasts {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 60;
  display: flex;
  width: min(420px, calc(100vw - 3rem));
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: 0.75rem 1rem;
  animation: dialog-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.toast__icon {
  margin-top: 0.125rem;
  color: var(--color-primary);
}

.toast__body {
  min-width: 0;
  flex: 1;
}

.tooltip {
  position: fixed;
  z-index: 60;
  border: 1px solid var(--color-line);
  background: var(--color-fg);
  color: var(--color-bg);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  max-width: 22rem;
}

.tooltip__lines {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* --------------------------------------------------------- デモ操作パネル */
/*
 * ここから下は製品画面には無い、デモ運用のための操作面。顧客に見せる画面と
 * 混ざらないよう、右下に隔離して置く。
 */

.demo-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-fg-2);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  opacity: 0.75;
}

.demo-fab:hover {
  opacity: 1;
  color: var(--color-fg);
}

.demo-panel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 56;
  width: min(420px, calc(100vw - 2rem));
  max-height: min(80vh, 640px);
  overflow: auto;
  border: 1px dashed var(--color-line);
  background: var(--color-bg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.demo-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.demo-panel__note {
  font-size: 0.75rem;
  color: var(--color-fg-2);
}

.demo-panel__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.demo-panel__source {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-fg-2);
  overflow-wrap: anywhere;
}

.demo-panel__error {
  border-left: 2px solid var(--color-crit);
  background: color-mix(in srgb, var(--color-crit) 5%, transparent);
  color: var(--color-crit);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}

.demo-panel__files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.hidden {
  display: none !important;
}

/* 言語切替（アプリバー） */
.lang-seg { margin-right: 0.5rem; flex: none; }
.lang-seg .segmented__item { padding: 0.25rem 0.5rem; font-size: 0.6875rem; font-weight: 600; }
.lang-seg .segmented__item[aria-pressed='true'] {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}