/* =========================================================================
   日本語 — Japanese for Social Life
   Shared design system for the lesson PDFs
   ========================================================================= */

:root {
  --ink:        #1c2333;   /* near-black navy for body text        */
  --indigo:     #2b3a67;   /* deep indigo — headings               */
  --indigo-2:   #3d5295;   /* lighter indigo                       */
  --gold:       #b8862f;   /* warm gold accent                     */
  --gold-soft:  #d9b66a;
  --sakura:     #e8a0ad;   /* cherry-blossom pink                  */
  --sakura-bg:  #fbeef0;   /* pale pink wash                       */
  --cream:      #fbf8f2;   /* page background                      */
  --paper:      #ffffff;
  --line:       #e6ddcd;   /* hairline / borders                   */
  --muted:      #6b7280;   /* secondary text                       */
  --ok-bg:      #eef6ee;
  --ok-edge:    #6fae6f;
  --warn-bg:    #fdf3e7;
  --warn-edge:  #d9962f;
  --info-bg:    #eef2fb;
  --info-edge:  #4a63a8;
}

@page {
  size: A4;
  margin: 18mm 16mm 20mm 16mm;
}

* { box-sizing: border-box; }

html {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  font-family: "Helvetica Neue", "Avenir Next", -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-size: 10.6pt;
  line-height: 1.62;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Japanese glyph styling — used inside .jp spans and table cells */
.jp, lang\:ja, .jp-cell {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Helvetica Neue", sans-serif;
  font-feature-settings: "palt" 1;
}

/* ---------- Cover ---------- */
.cover {
  position: relative;
  height: 252mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(232,160,173,0.22), transparent 55%),
    linear-gradient(160deg, #2b3a67 0%, #1c2333 100%);
  color: #fff;
  border-radius: 6px;
  padding: 0 24mm;
  page-break-after: always;
  overflow: hidden;
}
.cover::before {
  content: "日本語";
  position: absolute;
  top: -28mm; right: -10mm;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 150pt;
  color: rgba(255,255,255,0.05);
  letter-spacing: 0.1em;
}
.cover .kicker {
  font-size: 11pt; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 14mm; font-weight: 600;
}
.cover h1 {
  font-family: "Hiragino Mincho ProN", Georgia, serif;
  font-size: 40pt; line-height: 1.12; margin: 0; font-weight: 600;
  letter-spacing: 0.01em;
}
.cover .jp-title {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 22pt; color: var(--sakura); margin-top: 8mm; letter-spacing: 0.18em;
}
.cover .sub {
  margin-top: 16mm; font-size: 12.5pt; color: #cdd5e6; line-height: 1.7;
  max-width: 130mm; align-self: center;
}
.cover .rule {
  width: 60mm; height: 2px; background: var(--gold); margin: 12mm auto 0;
  border: 0;
}
.cover .lesson-no {
  position: absolute; bottom: 16mm; left: 0; right: 0;
  font-size: 10pt; letter-spacing: 0.3em; color: #9aa6c4; text-transform: uppercase;
}

/* ---------- Headings ---------- */
h2 {
  font-family: "Hiragino Mincho ProN", Georgia, serif;
  font-size: 19pt; color: var(--indigo); margin: 0 0 2mm;
  padding-top: 3mm; font-weight: 600; letter-spacing: 0.01em;
  page-break-after: avoid;
}
h2 .num {
  display: inline-block; color: var(--gold); font-size: 13pt;
  margin-right: 4mm; font-family: "Helvetica Neue"; font-weight: 700;
  letter-spacing: 0.05em;
}
h2 .jp-h { color: var(--sakura); font-size: 13pt; margin-left: 4mm; }
.section-rule { border: 0; border-top: 2px solid var(--gold); width: 28mm; margin: 0 0 6mm; }

h3 {
  font-size: 12.5pt; color: var(--indigo-2); margin: 7mm 0 2.5mm;
  font-weight: 700; letter-spacing: 0.01em; page-break-after: avoid;
}
h3 .jp-h { color: var(--muted); font-weight: 500; font-size: 10.5pt; margin-left: 3mm; }

p { margin: 0 0 3mm; }
strong { color: var(--indigo); }
em { color: var(--gold); font-style: normal; font-weight: 600; }
a { color: var(--indigo-2); }

.lead {
  font-size: 11.6pt; color: #38415a; line-height: 1.7;
  border-left: 3px solid var(--sakura); padding-left: 6mm; margin: 0 0 7mm;
}

/* ---------- Tables ---------- */
table {
  width: 100%; border-collapse: collapse; margin: 4mm 0 7mm;
  font-size: 10pt; page-break-inside: auto;
}
table.phrases { box-shadow: 0 1px 0 var(--line); }
thead { display: table-header-group; }
th {
  background: var(--indigo); color: #fff; text-align: left;
  padding: 2.6mm 3mm; font-size: 8.6pt; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
}
th:first-child { border-top-left-radius: 4px; }
th:last-child  { border-top-right-radius: 4px; }
td {
  padding: 2.8mm 3mm; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tr { page-break-inside: avoid; }
tbody tr:nth-child(even) { background: #faf6ee; }
td.jp-cell {
  font-size: 12pt; color: var(--ink); white-space: nowrap; font-weight: 500;
}
td.rdg { color: var(--gold); font-style: italic; font-size: 9.8pt; }
td.en  { color: #2c3344; }
td.note { color: var(--muted); font-size: 8.8pt; line-height: 1.45; }

/* a compact key-phrase highlight inside running text */
.kp { background: var(--sakura-bg); padding: 0.3mm 1.5mm; border-radius: 3px; }

/* ---------- Callout boxes ---------- */
.box {
  border-radius: 6px; padding: 4mm 5mm; margin: 5mm 0;
  page-break-inside: avoid; font-size: 9.9pt; line-height: 1.58;
}
.box .label {
  display: block; font-size: 8.4pt; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 1.5mm;
}
.box p:last-child { margin-bottom: 0; }
.box.culture { background: var(--sakura-bg); border-left: 4px solid var(--sakura); }
.box.culture .label { color: #c0566a; }
.box.tip     { background: var(--ok-bg); border-left: 4px solid var(--ok-edge); }
.box.tip .label { color: #3f7a3f; }
.box.warn    { background: var(--warn-bg); border-left: 4px solid var(--warn-edge); }
.box.warn .label { color: #b8761a; }
.box.info    { background: var(--info-bg); border-left: 4px solid var(--info-edge); }
.box.info .label { color: var(--info-edge); }

/* ---------- Pronunciation chips / inline ---------- */
.say { color: var(--gold); font-style: italic; }

/* dialogue blocks */
.dialogue {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 4mm 5mm; margin: 5mm 0; page-break-inside: avoid;
}
.dialogue .turn { margin-bottom: 2.5mm; }
.dialogue .turn:last-child { margin-bottom: 0; }
.dialogue .who { font-weight: 700; color: var(--indigo); font-size: 8.8pt;
  letter-spacing: 0.06em; text-transform: uppercase; display: block; }
.dialogue .ja { font-family: "Hiragino Sans", sans-serif; font-size: 11.5pt; }
.dialogue .ro { color: var(--gold); font-style: italic; font-size: 9.4pt; }
.dialogue .tr { color: var(--muted); font-size: 9.4pt; }

/* mini grid for kana/quick refs */
.grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2mm; margin: 4mm 0 6mm;
}
.grid .cell {
  background: var(--paper); border: 1px solid var(--line); border-radius: 5px;
  text-align: center; padding: 2.5mm 1mm;
}
.grid .cell .k { font-family: "Hiragino Sans"; font-size: 15pt; color: var(--indigo); }
.grid .cell .r { font-size: 8.4pt; color: var(--gold); font-style: italic; margin-top: 1mm; }

/* footer note at end of doc */
.endnote {
  margin-top: 10mm; padding-top: 4mm; border-top: 1px solid var(--line);
  font-size: 8.8pt; color: var(--muted); text-align: center; letter-spacing: 0.03em;
}

.pagebreak { page-break-before: always; }

/* running mini-header label */
.eyebrow {
  font-size: 8.4pt; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 1mm;
}

/* ---------- word-by-word breakdown (lesson 6) ---------- */
table.phrases.bd tbody tr { background: transparent; }
table.phrases.bd tr.p-row td { border-bottom: 0; }
table.phrases.bd tr.p-row.solo td { border-bottom: 1px solid var(--line); }
table.phrases.bd tr.bd-row td { border-top: 0; border-bottom: 1px solid var(--line);
  padding-top: 0.6mm; padding-bottom: 3mm; }
.bd-list { display: flex; flex-wrap: wrap; gap: 1.4mm 4mm; padding-left: 4mm;
  border-left: 2px solid var(--sakura, #e8a0ad); }
.bd-item { font-size: 8.6pt; line-height: 1.5; white-space: nowrap; }
.bd-item .w { font-size: 10.5pt; color: var(--ink); margin-right: 1.4mm; }
.bd-item .r { color: var(--gold); font-style: italic; margin-right: 1.4mm; }
.bd-item .g { color: var(--muted); }
@media screen and (max-width: 768px) {
  .bd-list { gap: 6px 16px; padding-left: 12px; }
  .bd-item { font-size: 13px; white-space: normal; }
  .bd-item .w { font-size: 16px; }
}

/*MOBILE:START*/
/* =========================================================================
   SCREEN + MOBILE LAYER
   All rules below are inside @media screen, so PDF/print output is unchanged.
   The viewport meta tag (injected per page) is what makes phones honor these.
   build_site.py copies this whole block (START..END) into any standalone
   per-language stylesheet that does not @import base.css (e.g. japanese).
   ========================================================================= */
@media screen {
  html { -webkit-text-size-adjust: 100%; }
  /* Centered, comfortable reading column on any screen */
  .lesson-wrap { max-width: 900px; margin: 0 auto; padding: 0 24px 72px; }
  /* Tables live in their own horizontal scroller, never the page */
  .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* In print/PDF the wrapper must disappear so tables paginate exactly as before */
@media print { .table-scroll { display: contents; } }

@media screen and (max-width: 768px) {
  /* Guard against any element forcing horizontal scroll. overflow:clip (not
     hidden) prevents the scroll without breaking the sticky nav. */
  html { overflow-x: clip; }
  body { font-size: 16px; line-height: 1.62; overflow-x: clip; }
  /* clip on the content column is the hard backstop: nothing inside can ever
     push the page sideways (overflow:clip keeps vertical scroll intact). */
  .lesson-wrap { padding: 0 16px 56px; max-width: 100%; overflow-x: clip; }

  /* Cover: stop being a fixed A4 page; become a fluid hero card.
     flex-start (not center) so the title/kicker are never clipped at the top. */
  .cover {
    height: auto; min-height: auto; padding: 46px 22px 50px;
    border-radius: 16px; margin: 14px 0 6px; justify-content: flex-start;
    text-align: center; align-items: center;
  }
  .cover > * { max-width: 100%; }
  .cover::before { font-size: 84px; top: -6px; right: -6px; }
  .cover .kicker { font-size: 11px; letter-spacing: .26em; margin-bottom: 18px; }
  .cover h1 { font-size: 31px; line-height: 1.14; }
  .cover .jp-title { font-size: 19px; margin-top: 14px; }
  .cover .sub { font-size: 16px; max-width: none; margin-top: 22px; line-height: 1.64; }
  .cover .rule { width: 120px; margin: 22px auto 0; }
  .cover .lesson-no { position: static; margin-top: 32px; font-size: 11px; }

  /* Headings */
  h2 { font-size: 23px; margin: 0 0 6px; padding-top: 12px; }
  h2 .num { font-size: 15px; margin-right: 10px; }
  h2 .jp-h { font-size: 15px; margin-left: 10px; }
  .section-rule { width: 90px; margin: 0 0 16px; }
  h3 { font-size: 19px; margin: 26px 0 8px; }
  h3 .jp-h { font-size: 14px; margin-left: 8px; }

  p { margin: 0 0 12px; }
  .lead { font-size: 17px; line-height: 1.66; padding-left: 16px; margin: 0 0 18px; }

  /* Tables: fit the screen and wrap their cells. min-width:0 is essential —
     a percentage min-width here makes the table expand the whole viewport.
     .table-scroll stays as a backstop (scrolls in-box if a table is ever wider). */
  .table-scroll { margin: 12px 0 18px; border: 1px solid var(--line, #e6ddcd); border-radius: 8px; }
  table { width: 100%; min-width: 0; font-size: 15px; margin: 0; }
  th, td { overflow-wrap: break-word; }
  th { font-size: 11px; padding: 10px 11px; }
  td { padding: 10px 11px; }
  td.jp-cell { white-space: normal; }
  td.jp-cell { font-size: 17px; }
  td.rdg { font-size: 14px; }
  td.note { font-size: 13px; line-height: 1.45; }

  /* Callouts & dialogue */
  .box { padding: 14px 16px; margin: 16px 0; font-size: 15px; border-radius: 10px; }
  .box .label { font-size: 11px; }
  .dialogue { padding: 14px 16px; margin: 16px 0; border-radius: 10px; }
  .dialogue .ja { font-size: 17px; }
  .dialogue .ro, .dialogue .tr { font-size: 14px; }
  .dialogue .who { font-size: 11px; }

  /* Alphabet grid: wrap instead of forcing 5 tiny columns */
  .grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; }
  .grid .cell { padding: 9px 4px; border-radius: 8px; }
  .grid .cell .k { font-size: 21px; }
  .grid .cell .r { font-size: 12px; }

  .endnote { font-size: 13px; margin-top: 30px; }
}
/*MOBILE:END*/