/* キーみち(/tools/kii-michi/)。色・余白は、トークンで指定する */
.kii {
  max-width: 60rem;
  margin-inline: auto;
}

.kii__lead {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

.kii__howto {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.kii__howto summary {
  min-height: var(--tap-size);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: var(--font-weight-bold);
}

.kii__howto ol {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-6);
}

/* 保存の状態などの案内。色だけでなく、太い破線の枠でも示す */
.kii__notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-soft);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
}

/* タブ。選んでいるタブは、色だけでなく、太字と下の太い線でも示す */
.kii__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.kii-tab {
  min-height: var(--tap-size);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-normal);
}

.kii-tab[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-black);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

.kii-panel > h2 {
  margin-top: 0;
}

.kii-panel h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--font-size-xl);
}

.kii-panel h4 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-lg);
}

/* フォーム */
.kii-form {
  display: grid;
  gap: var(--space-4);
  max-width: 40rem;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.kii-form > h3 {
  margin: 0;
}

.kii-field {
  display: grid;
  gap: var(--space-2);
}

.kii-field > label,
.kii-field > legend {
  font-weight: var(--font-weight-bold);
}

.kii-field__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* 16px 以上にして、iOS の入力時の自動ズームを防ぐ */
.kii-input {
  width: 100%;
  min-height: var(--tap-size);
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-base);
}

.kii-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.kii-row > .kii-input {
  flex: 1 1 12rem;
  width: auto;
}

/* 入力の間違い。色だけでなく、太い文字と印でも示す */
.kii-error {
  margin: 0;
  font-weight: var(--font-weight-black);
}

.kii-error::before {
  content: "⚠ ";
}

.kii-preview {
  margin: 0;
  min-height: 1.7em;
  font-size: var(--font-size-xs);
}

.kii-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.kii-radio label {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  gap: var(--space-2);
}

.kii-radio input,
.kii-check input {
  width: 1.25rem;
  height: 1.25rem;
}

.kii-check {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.kii-check label {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  gap: var(--space-2);
}

/* キー(kbd)。1つのキー操作を、1つの枠で示す */
.kbd {
  display: inline-block;
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop-sm);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.7;
  white-space: nowrap;
}

.kbd-arrow {
  margin: 0 var(--space-1);
  color: var(--color-text-muted);
}

/* アプリ・操作・ルートの一覧 */
.kii-items {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.kii-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.kii-item__main {
  display: flex;
  flex: 1 1 14rem;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  overflow-wrap: anywhere;
}

.kii-item__name {
  font-weight: var(--font-weight-bold);
}

.kii-item__note {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.kii-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kii-item.is-current {
  background: var(--color-soft);
  border-width: 4px;
}

.kii-empty {
  padding: var(--space-4);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-sm);
}

/* ルートの手順 */
.kii-steps {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-8);
}

.kii-steps > li {
  padding-left: var(--space-2);
}

.kii-steps .kii-item {
  align-items: flex-start;
}

/* 表(一覧・チートシート) */
.kii-table {
  width: 100%;
  margin-bottom: var(--space-6);
  border-collapse: collapse;
  background: var(--color-surface);
}

.kii-table caption {
  padding: var(--space-2) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.kii-table th,
.kii-table td {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
}

.kii-table th {
  background: var(--color-soft);
}

.kii-scroll {
  overflow-x: auto;
}

/* チートシート(画面での表示と、印刷) */
.kii-sheet {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.kii-sheet__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-2xl);
}

.kii-sheet__meta {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.kii-sheet h3:first-of-type {
  margin-top: 0;
}

.kii-markdown {
  width: 100%;
  min-height: 12rem;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--font-size-xs);
}

/* 練習 */
.kii-practice__progress {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-bold);
}

.kii-practice__step {
  max-width: 48rem;
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

.kii-practice__app {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.kii-panel .kii-practice__title {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--font-size-2xl);
  overflow-wrap: anywhere;
}

.kii-practice__keys {
  margin: var(--space-4) 0;
}

.kii-practice__hidden,
.kii-practice__self {
  margin: var(--space-4) 0;
  color: var(--color-text-muted);
}

.kii-practice__self {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

/* キーを受け付ける枠。受け付けているかは、色だけでなく、文字と枠の線(破線・実線)でも示す */
.kii-practice__answer {
  display: grid;
  gap: var(--space-2);
  place-items: center;
  min-height: 8rem;
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  background: var(--color-soft);
  border: 4px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
}

.kii-practice__answer[data-active="true"] {
  background: var(--color-accent);
  border-style: solid;
  color: var(--color-on-accent);
}

.kii-practice__answer:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.kii-practice__state {
  font-weight: var(--font-weight-black);
}

.kii-practice__prompt {
  font-size: var(--font-size-lg);
}

.kii-practice__feedback {
  min-height: 1.7em;
  margin: var(--space-3) 0;
  font-weight: var(--font-weight-black);
}

/* 結果の表: 手順の名前は折り返しにくく、件数の列は折り返さない */
.kii-table--result td:first-child {
  min-width: 11rem;
}

.kii-table--result th:nth-last-child(-n + 2),
.kii-table--result td:nth-last-child(-n + 2) {
  white-space: nowrap;
}

.kii-practice__summary {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

@media (width >= 48rem) {
  .kii-form--wide {
    max-width: 48rem;
  }
}

/* 印刷: チートシートだけを、白い紙に出す */
@media print {
  body > *:not(main),
  .kii__intro,
  .kii__tabs,
  .kii-panel:not([data-panel="sheet"]),
  .kii-sheet-controls,
  .kii-markdown-box,
  .kii-panel > h2,
  .kii-panel > p,
  dialog {
    display: none !important;
  }

  body {
    background: var(--color-surface);
    color: var(--color-text);
  }

  .main {
    padding: 0;
  }

  .kii-sheet {
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .kii-sheet h3,
  .kii-table caption {
    break-after: avoid;
  }

  .kii-table,
  .kii-steps > li {
    break-inside: avoid;
  }

  .kbd {
    box-shadow: none;
  }
}