/* ================================================================
   writing-task2/introduction-tense — local.css
   ================================================================ */

/* Expression vocabulary list (e.g., today — 今日、現代では) */
.it-expr-list {
  list-style: none;
  padding: .3rem 0 .6rem;
  margin: .4rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.it-expr-item {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-size: .9rem;
  line-height: 1.65;
  padding: .25rem .7rem;
  border-left: 3px solid var(--lb5);
  background: rgba(70,162,218,.025);
  border-radius: 0 4px 4px 0;
}
.it-expr-en {
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
  flex-shrink: 0;
}
.it-expr-sep {
  color: var(--gray5);
  flex-shrink: 0;
}
.it-expr-ja {
  color: var(--gray2);
  font-size: .85rem;
}

/* Wrong → Better comparison block */
.it-diff {
  margin: .4rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.it-diff__wrong {
  background: rgba(245, 161, 0, .07);
  border-left: 3px solid rgba(245, 161, 0, .5);
  border-radius: 0 6px 6px 0;
  padding: .75rem 1rem;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--black);
}
.it-diff__right {
  background: rgba(70, 162, 218, .07);
  border-left: 3px solid var(--lb3);
  border-radius: 0 6px 6px 0;
  padding: .75rem 1rem;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--black);
}
.it-diff__arrow {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--lb2);
  margin-bottom: .25rem;
}
.it-diff__ja {
  font-size: .82rem;
  color: var(--gray3);
  margin: .2rem 0 0;
  line-height: 1.6;
}
.it-diff p { margin: 0; }

/* Article/article-usage check list (✓ / △ / ✗) */
.it-check-list {
  list-style: none;
  padding: .3rem 0 .4rem;
  margin: .4rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.it-check-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  line-height: 1.65;
  padding: .15rem .5rem;
}
.it-check-item::before {
  flex-shrink: 0;
  font-weight: 700;
  font-size: .85rem;
  width: 1.1em;
  text-align: center;
  margin-top: .1rem;
}
.it-check-item--ok::before  { content: "✓"; color: #1a7a3a; }
.it-check-item--ng::before  { content: "✗"; color: #b5003a; }
.it-check-item--cau::before { content: "△"; color: #8a5a00; }

/* Small inline annotation label */
.it-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gray3);
  margin: .85rem 0 .35rem;
}

@media (max-width: 640px) {
  .it-expr-item { padding: .2rem .5rem; }
  .it-diff__wrong,
  .it-diff__right { padding: .65rem .85rem; }
}