/* Nihongo Sensei — the standalone course.
 *
 * The palette is 藍 (indigo) and 朱 (vermilion), the two pigments Japanese
 * printing has used for centuries: indigo carries the interface, vermilion is
 * reserved for the teacher's red pen — what is due, what was wrong. Paper is
 * a cool grey-white, deliberately not the cream used by the church service,
 * so the two products never look like the same site.
 *
 * Type follows the Japanese convention the learner is being taught to read:
 * 明朝 (mincho, serif) for Japanese content, as in printed books, and
 * ゴシック (gothic, sans) for the interface, as on signage. The distinction is
 * real to a Japanese reader, so the app teaches it by using it.
 */
:root {
  --ink: #16181d;
  --ink-soft: #5a6270;
  --paper: #f5f6f8;
  --surface: #ffffff;
  --indigo: #27447c;
  --indigo-soft: #eaeef6;
  --vermilion: #c8402c;
  --sage: #4c7a5b;
  --rule: #e2e5ea;
  --radius: 10px;
  --jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ui-sans: "Inter", system-ui, -apple-system, "Segoe UI", "Noto Sans JP",
             "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

body.nihongo {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui-sans);
  -webkit-font-smoothing: antialiased;
}

/* Masthead: a rule and a wordmark, nothing more. The product is the study
 * session, so the chrome stays out of its way. */
.ns-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.ns-wordmark {
  font-family: var(--jp-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .01em;
}
.ns-wordmark .jp { color: var(--indigo); margin-right: .45rem; }
.ns-wordmark:hover { color: var(--indigo); }

.ns-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .93rem;
  padding: .35rem .6rem;
  border-radius: 6px;
}
.ns-link:hover { color: var(--indigo); background: var(--indigo-soft); }
.ns-link.active { color: var(--indigo); font-weight: 600; }

.ns-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* 原稿用紙 — the squared manuscript paper Japanese schoolchildren write on.
 * One square per character, so a kanji sits in its box exactly as it would in
 * a writing exercise. This is the one decorative element, and it is doing a
 * job: it frames the glyph and says "this is handwriting practice". */
.ns-genko {
  display: inline-grid;
  place-items: center;
  width: 8.5rem;
  height: 8.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 50% 50%;
  background-position: center;
  opacity: 1;
}
.ns-genko .glyph {
  font-family: var(--jp-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--ink);
}

.ns-jp { font-family: var(--jp-serif); }

/* Vermilion is the red pen: due counts, corrections, nothing else. Spending
 * it anywhere else would stop it meaning anything. */
.ns-due { color: var(--vermilion); font-weight: 600; }
.ns-ok { color: var(--sage); font-weight: 600; }

.ns-btn {
  background: var(--indigo);
  color: #fff;
  border: 1px solid var(--indigo);
  border-radius: 6px;
  padding: .5rem 1.1rem;
  font-size: .95rem;
  text-decoration: none;
  display: inline-block;
}
.ns-btn:hover { background: #1d3663; color: #fff; }
.ns-btn-quiet {
  background: transparent;
  color: var(--indigo);
  border-color: var(--rule);
}
.ns-btn-quiet:hover { background: var(--indigo-soft); color: var(--indigo); }

.ns-eyebrow {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.ns-trial {
  background: var(--indigo-soft);
  border: 1px solid #d4dced;
  border-radius: var(--radius);
  padding: .6rem .9rem;
  font-size: .9rem;
  color: var(--ink);
}

.ns-foot {
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .82rem;
}

a:focus-visible, button:focus-visible, .ns-btn:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 576px) {
  .ns-genko { width: 6.5rem; height: 6.5rem; }
  .ns-genko .glyph { font-size: 3.75rem; }
}