@charset "UTF-8";
/* Title pages (/read/<slug>/) and their index. Loaded after home.css and guide.css.
   home.css already uses .steps and .kicker: don't reuse those names here. */
.jp{font-family:var(--gothic)}
/* guide.css keeps English h1 words whole (keep-all), which also stops a long Japanese title from wrapping on phones. */
.guide h1{overflow-wrap:anywhere}
.byline{font-size:15px;color:var(--muted);margin:-6px 0 14px}
.byline .jp{color:var(--ink)}

/* At a glance: a two-column fact card. */
.glance{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px 20px;margin:22px 0 8px}
.glance dl{margin:0;display:grid;grid-template-columns:minmax(110px,auto) 1fr}
.glance dt,.glance dd{padding:11px 0;border-top:1px solid var(--line);margin:0}
.glance dt{font-size:14px;color:var(--muted);padding-right:18px}
.glance dt:first-of-type,.glance dt:first-of-type+dd{border-top:0}
.glance dd small{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* Level: five bars, the filled ones in green. */
.level{display:inline-flex;align-items:center;gap:10px;font-weight:650}
.lv{display:inline-flex;gap:3px;vertical-align:1px}
.lv i{width:18px;height:8px;border-radius:2px;background:var(--line)}
.lv i.on{background:var(--green)}
/* An estimated level (no counts): outlined bars. */
.lv.est i{background:none;box-shadow:inset 0 0 0 1.5px var(--line)}
.lv.est i.on{background:none;box-shadow:inset 0 0 0 1.5px var(--green)}

/* Coverage: how much of the text the N most common words cover; the dashed line marks 95%. */
.cover{margin:14px 0 6px;display:grid;gap:10px}
.cover-row{display:grid;grid-template-columns:118px 1fr 50px;align-items:center;gap:10px;font-size:14px}
.cover-row span:first-child{color:var(--muted)}
.cover-bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden;position:relative}
.cover-bar b{display:block;height:100%;background:var(--green);border-radius:6px}
.cover-bar::after{content:"";position:absolute;top:-3px;bottom:-3px;left:95%;border-left:2px dashed var(--ochre)}
.cover-row strong{font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.cover-key{font-size:13px;color:var(--muted);margin:4px 0 16px}
.cover-key i{display:inline-block;width:0;height:12px;border-left:2px dashed var(--ochre);margin:0 6px -1px 0}

/* Word, name and comparison tables. */
.guide .words td:first-child{width:auto;font-family:var(--gothic);font-size:19px;white-space:nowrap}
.guide .words td.rd{font-family:var(--gothic);color:var(--muted);white-space:nowrap}
.guide .words td.n,.guide .words th.n{text-align:right;padding-right:0;font-variant-numeric:tabular-nums}
.guide .words td.n{color:var(--muted)}
.guide .stats td:first-child{width:auto}
.guide .stats .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0}
.guide .stats th.num{white-space:normal}
.guide .stats tr.this td{font-weight:650}
.fine{font-size:13px;color:var(--muted)}
.guide details.more{border-top:1px solid var(--line);padding:10px 0}
.guide details.more summary{cursor:pointer;color:var(--green);font-weight:650}
.guide details.more table{margin-top:4px}

/* A title's card icon: the first character of its Japanese title. */
.title-icon{font-family:var(--gothic);font-size:22px;color:var(--green)}
.related .title-icon{font-size:18px}

@media (max-width:600px){
  .glance{padding:4px 14px}
  .glance dl{grid-template-columns:1fr}
  .glance dt{border-top:1px solid var(--line);padding:10px 0 0}
  .glance dd{border-top:0;padding:2px 0 10px}
  .glance dt:first-of-type{border-top:0}
  .cover-row{grid-template-columns:92px 1fr 46px}
  .guide .words td.rd{white-space:normal}
  .guide .words td:first-child{font-size:17px}
}