/*
 * Zen grammar — styles for grammar.html only.
 *
 * The JLPT syllabus as a quiet index: a level switch with hairline progress,
 * numbered sections, one row per point (mark, mincho name, gloss, romaji), and
 * a point page with explanation, formation and examples with furigana.
 *
 * Marks, from nothing to most: a faint ring (not met), a ring with a dot (met
 * in your texts), half filled (in Study), a heavy ring (you said you know it),
 * filled (mastered in Study).
 *
 * Load after /css/tailwind.css and /css/zen-base.css.
 */

.grammar { display: block; outline: none; }

/* ------------------------------------------------------------------ */
/* Marks                                                                */
/* ------------------------------------------------------------------ */

.g-mark {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-sizing: border-box;
}
.g-mark.is-none { border: 1px solid var(--stone-soft); opacity: 0.6; }
.g-mark.is-met { border: 1px solid var(--stone); background: radial-gradient(circle, var(--stone) 0 1.5px, transparent 2px); }
.g-mark.is-studying { border: 1px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.g-mark.is-known { border: 2px solid var(--ink); }
.g-mark.is-mastered { background: var(--ink); }

/* ------------------------------------------------------------------ */
/* Head and search                                                      */
/* ------------------------------------------------------------------ */

.g-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  padding-bottom: 28px;
}

.g-heading { max-width: 36em; }

.g-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  font-weight: 400;
}
.g-title .ja {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.g-title .en {
  color: var(--stone);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* A Japanese interface reads 文法 already; its translated subtitle would repeat it */
html[lang|='ja'] .g-title .en { display: none; }

.g-sub {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.8;
}

.g-search { flex: 0 1 320px; }
.g-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
}

/* ------------------------------------------------------------------ */
/* Level switch                                                         */
/* ------------------------------------------------------------------ */

.g-levels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.g-level {
  display: grid;
  align-content: start;
  gap: 2px;
  margin-bottom: -1px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid transparent;
  border-inline-start: 1px solid var(--hair-soft);
  color: var(--stone);
  text-decoration: none;
}
.g-level:first-child { border-inline-start: 0; padding-inline-start: 0; }
.g-level:hover { color: var(--ink); }
.g-level[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.g-level-name {
  color: var(--text-2);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.g-level:hover .g-level-name,
.g-level[aria-current='page'] .g-level-name { color: var(--ink); }

.g-level-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.g-level-bar {
  display: flex;
  height: 2px;
  margin-top: 8px;
  background: var(--hair-soft);
}
.g-level-bar:empty { visibility: hidden; }
.g-seg.is-mastered { background: var(--ink); }
.g-seg.is-known { background: var(--text-2); }
.g-seg.is-studying { background: var(--stone); }
.g-seg.is-met { background: var(--stone-soft); }

/* ------------------------------------------------------------------ */
/* Summary, filters and the first-visit hint                           */
/* ------------------------------------------------------------------ */

.g-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 28px;
  padding: 18px 0 4px;
}

.g-summary-line {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
}
/* Takes the focus after a level tab or a filter, as the point's heading does */
.g-summary-line:focus { outline: none; }
.g-summary-level { color: var(--ink); letter-spacing: 0.06em; }

.g-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
}

.g-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
  border-bottom: 1px solid transparent;
  color: var(--text-2);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.g-filter:hover { color: var(--ink); }
.g-filter[aria-current='true'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.g-filter-n {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.g-filter.is-clear { color: var(--stone); }

.g-hint {
  max-width: 42em;
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.8;
}

/* ------------------------------------------------------------------ */
/* Sections and rows                                                    */
/* ------------------------------------------------------------------ */

.g-sections { margin-top: 8px; }

.g-section { padding-top: 32px; }

.g-section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
  font-weight: 400;
}
.g-section-no {
  min-width: 2.4em;
  color: var(--stone);
  font-size: 15px;
}
.g-section-name {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.g-section-count {
  margin-inline-start: auto;
  color: var(--stone);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.g-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-rows.is-results { margin-top: 18px; border-top: 1px solid var(--hair); }

.g-row {
  display: grid;
  grid-template-columns: 9px minmax(9em, 17em) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 18px;
  margin: 0 -10px;
  padding: 11px 10px 10px;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--ink);
  text-decoration: none;
}
.g-row:hover { background: var(--wash); }
.g-row:focus-visible { outline-offset: -2px; }
.g-row .g-mark { align-self: center; }

.g-name {
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

.g-gloss {
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.g-romaji {
  color: var(--stone);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* A point                                                              */
/* ------------------------------------------------------------------ */

/* Placeholders in names and formation (Noun, Verb, A, B): small, in the interface face */
.g-ph {
  margin-inline: 0.08em;
  color: var(--stone);
  font-family: var(--font-ui);
  font-size: 0.62em;
  letter-spacing: 0.04em;
}

.g-point {
  display: grid;
  grid-template-columns: minmax(0, 860px);
  gap: 0 72px;
}

.g-aside { display: none; }

@media (min-width: 1180px) {
  .g-point {
    grid-template-columns: minmax(0, 860px) minmax(220px, 280px);
    justify-content: space-between;
  }
  .g-aside {
    position: sticky;
    top: 24px;
    display: block;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding-top: 6px;
  }
}

.g-aside .section-label { margin-bottom: 10px; }
.g-aside-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair-soft);
}
.g-aside-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0 6px;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--text-2);
  font-size: 15px;
  text-decoration: none;
}
.g-aside-row:hover { color: var(--ink); }
.g-aside-row[aria-current='page'] { color: var(--ink); font-weight: 600; }

.g-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  color: var(--stone);
  font-size: 13px;
}
.g-back {
  color: var(--ink);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.g-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.g-crumb-section {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.g-pager {
  display: flex;
  gap: 20px;
  margin-inline-start: auto;
}
.g-pager a {
  color: var(--text-2);
  text-decoration: none;
}
.g-pager a:hover { color: var(--ink); }

.g-point-head { padding: 40px 0 22px; }
.g-point-name {
  margin: 0;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
}
.g-point-name:focus { outline: none; }
.g-point-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  color: var(--stone);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.g-point-level { color: var(--ink); }
.g-point-gloss {
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.7;
}

.g-status {
  display: grid;
  gap: 14px;
  padding: 16px 0 24px;
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair);
}
.g-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
}
.g-status-extra { color: var(--stone); }

.g-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}
.g-actions .z-toggle,
.g-actions .z-link { padding-top: 6px; font-size: 13px; }
.g-actions .export-btn { text-decoration: none; }

.g-block { padding: 30px 0 6px; }
.g-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  margin-bottom: 12px;
}

.g-prose {
  max-width: 40em;
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}

.g-formation {
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-formation li {
  padding: 8px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-family: var(--font-jp);
  font-size: 16px;
}
.g-formation li:first-child { border-top: 1px solid var(--hair-soft); }

.g-view-toggles {
  display: flex;
  gap: 18px;
  font-size: 12px;
}
.g-view-toggles .z-toggle { padding-top: 4px; }

.g-examples {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair-soft);
}

.g-example {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 16px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--hair-soft);
}

.g-ex-jp {
  margin: 0;
  font-size: 22px;
  line-height: 2;
  letter-spacing: 0.04em;
}
.g-ex-jp rt {
  color: var(--text-2);
  font-size: 0.48em;
  letter-spacing: 0;
}
/* The point itself in each example, underlined in the grammar colour the analyzer uses */
.g-hl {
  padding-bottom: 2px;
  background: none;
  border-bottom: 2px solid var(--grammar);
  color: inherit;
}
.g-point[data-furigana='off'] .g-ex-jp rt { display: none; }
.g-point[data-furigana='off'] .g-ex-jp { line-height: 1.7; }

.g-ex-en {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}
.g-point[data-english='off'] .g-ex-en { display: none; }

.g-ex-analyse {
  align-self: center;
  color: var(--stone);
  font-size: 12px;
  text-decoration: underline;
  text-decoration-color: var(--hair);
  text-underline-offset: 4px;
}
.g-ex-analyse:hover { color: var(--ink); text-decoration-color: currentColor; }

.g-play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.g-play:hover { border-color: var(--ink); }
.g-play-icon {
  width: 0;
  height: 0;
  margin-inline-start: 2px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.g-play[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.g-play[aria-pressed='true'] .g-play-icon {
  width: 8px;
  height: 8px;
  margin: 0;
  border: 0;
  background: currentColor;
}

.g-aliases {
  margin: 26px 0 0;
  color: var(--stone);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.g-aliases .ja { color: var(--text-2); font-size: 14px; }

.g-loading {
  padding: 24px 0;
  color: var(--text-2);
  font-size: 13px;
}

/* An analyzer pattern the syllabus has no point for (?pattern=): its name comes from the URL, so let it wrap */
.g-pattern .g-point-name { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ */
/* Small screens                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .g-row { grid-template-columns: 9px minmax(9em, 13em) minmax(0, 1fr); }
  .g-romaji { display: none; }
}

@media (max-width: 560px) {
  .g-head { padding-bottom: 22px; }
  .g-title .ja { font-size: 34px; }
  .g-search { flex-basis: 100%; }

  .g-level { padding: 10px 8px 10px; }
  .g-level-name { font-size: 18px; }
  .g-level-count { font-size: 11px; }

  .g-row {
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 2px 14px;
  }
  .g-row .g-mark { align-self: start; margin-top: 10px; }
  .g-gloss {
    grid-column: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .g-filters { gap: 0 16px; }
  .g-filter { font-size: 12px; }
  .g-pager { flex-basis: 100%; margin-inline-start: 0; }
  .g-point-head { padding-top: 28px; }
  .g-point-name { font-size: 32px; }
  .g-ex-jp { font-size: 19px; }
  .g-example { grid-template-columns: 36px minmax(0, 1fr); }
  .g-ex-analyse { grid-column: 2; justify-self: start; margin-top: 4px; }
}

@media (pointer: coarse) {
  .g-play { width: 44px; height: 44px; }
  .g-example { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .g-filter { min-height: 44px; }
}

@media (pointer: coarse) and (max-width: 560px) {
  .g-example { grid-template-columns: 44px minmax(0, 1fr); }
}