/* ===========================================================================
   Mimicard house units on Draconictls.

   Self-contained island: carries Mimicard's own paper palette (--mc-*) so a
   unit reads as a different brand than the page around it, and matches the
   page it sends the reader to.

   The class prefix is deliberately "mc-", and this file is deliberately not
   named ads.css / banner.css. Names containing "ad", "ads", "banner" or
   "sponsor" are matched by EasyList cosmetic rules and would be hidden for a
   large share of this audience.

   Dark mode follows the host site's convention (html.dark-mode), not
   prefers-color-scheme, so the navbar toggle drives it.
   =========================================================================== */

.mc-u {
  --mc-bg: #faf7f2;
  --mc-bg-alt: #f0ece3;
  --mc-card: #ffffff;
  --mc-border: #e5dfd3;
  --mc-text: #2a2620;
  --mc-dim: #6b655a;
  --mc-accent: #6b8e5a;
  --mc-accent-dark: #4f6d43;
  --mc-on-accent: #ffffff;
  --mc-radius: 12px;
  --mc-jp: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;

  display: block;
  position: relative;
  margin: 1.75rem 0;
  padding: 1rem 1.15rem 1.05rem;
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  color: var(--mc-text);
  font-size: 15px;
  line-height: 1.55;
  overflow: hidden;

  /* Layout below responds to the unit's OWN width, not the viewport's. These
     units sit in containers that have nothing to do with screen size: the
     front-page tile is a third of a Bootstrap row (about 340px) on a wide
     desktop. A viewport media query leaves that tile in its two-column form
     and crushes the text against the artwork. Every layout here is therefore
     single-column by default and widens only when the unit itself is wide, so
     a browser without container queries gets the stacked version, which always
     fits. */
  container-type: inline-size;
}

html.dark-mode .mc-u {
  --mc-bg: #1a1815;
  --mc-bg-alt: #24211d;
  --mc-card: #2c2925;
  --mc-border: #3d3833;
  --mc-text: #ebe6dc;
  --mc-dim: #9c948a;
  --mc-accent: #8caf7b;
  --mc-accent-dark: #a5c496;
  --mc-on-accent: #16140f;
}

/* The whole unit is one click target: a single stretched <a> under the text,
   so there is one link and one tab stop per unit. Everything above it is
   click-through, including the button, which is a <span> and not a second
   link to the same place. */
.mc-u .mc-hit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  border-radius: var(--mc-radius);
  text-indent: -9999px;
  overflow: hidden;
}
.mc-u .mc-hit:focus-visible {
  outline: 2px solid var(--mc-accent);
  outline-offset: -3px;
}
.mc-u > *:not(.mc-hit) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* --- label ----------------------------------------------------------------
   The real wordmark, 耳カード · Mimicard, as used on the app itself. The label
   is the only brand mark in the unit, so it carries the text colour, and the
   Japanese half says what the app is for before anyone reads a word. */
.mc-label {
  display: flex;
  align-items: baseline;
  gap: 0.38rem;
  margin: 0 0 0.5rem;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mc-dim);
}
.mc-label .mc-wm {
  font-family: var(--mc-jp);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--mc-text);
}
.mc-label .mc-sep {
  color: var(--mc-dim);
  opacity: 0.55;
  text-transform: none;
}
.mc-label b {
  font-weight: 600;
  color: var(--mc-text);
  letter-spacing: 0.11em;
}

/* --- text ----------------------------------------------------------------- */
.mc-u .mc-h {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.35rem;
  color: var(--mc-text);
  letter-spacing: -0.01em;
}
.mc-u .mc-p {
  margin: 0 0 0.8rem;
  color: var(--mc-dim);
  font-size: 14.5px;
  max-width: 54ch;
}
/* A long word must break rather than run out of a narrow unit. */
.mc-u .mc-h,
.mc-u .mc-p,
.mc-u .mc-fine {
  overflow-wrap: break-word;
}
.mc-u .mc-fine {
  margin: 0.55rem 0 0;
  font-size: 12.5px;
  color: var(--mc-dim);
}

/* --- button --------------------------------------------------------------- */
.mc-u .mc-cta {
  display: inline-block;
  padding: 0.42rem 0.95rem;
  background: var(--mc-accent);
  color: var(--mc-on-accent);
  border: 1px solid var(--mc-accent);
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
/* The button is a <span>, so its own :hover never fires. Hovering anywhere on
   the unit lights it, which is the truth: the whole unit is the link. */
.mc-u:hover .mc-cta,
.mc-u .mc-hit:focus-visible ~ * .mc-cta {
  background: var(--mc-accent-dark);
  border-color: var(--mc-accent-dark);
}

/* --- Japanese type -------------------------------------------------------- */
.mc-u .mc-jp {
  font-family: var(--mc-jp);
}
.mc-u ruby > rt {
  font-size: 0.48em;
  font-family: var(--mc-jp);
  color: var(--mc-dim);
  font-weight: normal;
}

/* ===========================================================================
   Layout: bar. One line on desktop, stacks on phones.
   Stands in for a 728x90 / responsive top unit.
   =========================================================================== */
.mc-u.mc-bar {
  padding: 0.8rem 1.1rem;
}
.mc-bar .mc-bar-in {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
}
.mc-bar .mc-bar-txt {
  min-width: 0;
}
.mc-bar .mc-h {
  font-size: 16.5px;
  margin-bottom: 0.1rem;
}
.mc-bar .mc-p {
  font-size: 13.5px;
  margin: 0;
}
.mc-bar .mc-label {
  margin-bottom: 0.2rem;
}
.mc-bar .mc-cta {
  text-align: center;
}

@container (min-width: 34rem) {
  .mc-bar .mc-bar-in {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .mc-bar .mc-bar-txt {
    flex: 1 1 18rem;
  }
  .mc-bar .mc-swap,
  .mc-bar .mc-cta {
    flex: 0 0 auto;
  }
  .mc-bar .mc-cta {
    text-align: left;
  }
}

/* The sound-match strip: "kanuzei" becomes 可能性 */
.mc-swap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  background: var(--mc-card);
  border: 1px solid var(--mc-border);
  border-radius: 9px;
  padding: 0.45rem 0.7rem;
}
.mc-swap .mc-heard {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--mc-dim);
}
.mc-swap .mc-arrow {
  color: var(--mc-accent);
  font-size: 13px;
}
.mc-swap .mc-word {
  font-family: var(--mc-jp);
  font-size: 21px;
  line-height: 1.5;
}
.mc-swap .mc-gloss {
  font-size: 13px;
  color: var(--mc-dim);
}

/* ===========================================================================
   Layout: panel. The end-of-chapter and in-content unit.
   One column by default, two side by side once the unit is wide enough.
   =========================================================================== */
.mc-panel .mc-panel-in {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.05rem;
}
.mc-panel .mc-panel-txt {
  min-width: 0;
}
.mc-panel .mc-art {
  flex: none;
  min-width: 0;
}

@container (min-width: 32rem) {
  .mc-panel .mc-panel-in {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
  .mc-panel .mc-panel-txt {
    flex: 1 1 18rem;
  }
  .mc-panel .mc-art {
    flex: 0 0 14rem;
  }
}

/* The review specimen: a card mid-answer, built from text so it stays sharp,
   restyles for dark mode and costs no image request. */
.mc-spec {
  background: var(--mc-card);
  border: 1px solid var(--mc-border);
  border-radius: 10px;
  padding: 0.85rem 0.9rem 0.9rem;
  text-align: center;
}
.mc-spec .mc-spec-w {
  font-family: var(--mc-jp);
  font-size: 34px;
  line-height: 1.7;
  display: block;
  margin-bottom: 0.1rem;
}
.mc-spec .mc-spec-w rt {
  font-size: 11px;
  padding-bottom: 3px;
}
.mc-spec .mc-spec-s {
  font-family: var(--mc-jp);
  font-size: 14px;
  color: var(--mc-dim);
  margin: 0 0 0.6rem;
}
.mc-spec .mc-spec-s u {
  text-decoration-color: var(--mc-accent);
  text-underline-offset: 3px;
}
/* The grammar card leads with the sentence instead of a headword. */
.mc-spec .mc-spec-s.is-lead {
  font-size: 17px;
  margin-top: 0.4rem;
}
/* A translation under a card. Sentence case, unlike the uppercase section
   labels, because it is content and not a label. */
.mc-spec .mc-spec-gloss {
  margin: 0.7rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--mc-border);
  font-size: 12px;
  color: var(--mc-dim);
  text-align: left;
}
.mc-spec .mc-spec-q {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mc-dim);
  margin: 0 0 0.5rem;
}
.mc-spec .mc-spec-choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.mc-spec .mc-spec-choices li {
  border: 1px solid var(--mc-border);
  border-radius: 6px;
  padding: 0.33rem 0.2rem;
  font-size: 13px;
  color: var(--mc-dim);
  background: var(--mc-bg);
  overflow-wrap: break-word;
}
.mc-spec .mc-spec-choices li.mc-right {
  border-color: var(--mc-accent);
  color: var(--mc-text);
  font-weight: 600;
  background: rgba(107, 142, 90, 0.11);
}
html.dark-mode .mc-spec .mc-spec-choices li.mc-right {
  background: rgba(140, 175, 123, 0.16);
}

/* The kanji breakdown under the answer. This is the part that says the app is
   about reading as well as meaning, so it is in the artwork of every creative
   that shows a card. */
.mc-spec .mc-spec-label {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mc-dim);
  text-align: left;
  margin: 0.75rem 0 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--mc-border);
}
.mc-spec .mc-spec-k {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
  text-align: left;
}
.mc-spec .mc-spec-k li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 12.5px;
}
.mc-spec .mc-spec-k .k {
  font-family: var(--mc-jp);
  font-size: 19px;
  line-height: 1.35;
  flex: 0 0 auto;
}
.mc-spec .mc-spec-k .g {
  color: var(--mc-dim);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
.mc-spec .mc-spec-k .r {
  font-family: var(--mc-jp);
  font-size: 13.5px;
  color: var(--mc-accent-dark);
  flex: 0 0 auto;
}

/* Three stacked "you wrote / your card" rows, for the panel art. The header is
   what tells the reader which column is which; without it the rows are two
   unexplained lists. */
.mc-rows-head {
  display: flex;
  gap: 0.5rem;
  padding: 0 0.62rem 0.3rem;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-dim);
}
.mc-rows-head span:first-child {
  flex: 1 1 auto;
}
.mc-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-rows li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  background: var(--mc-card);
  border: 1px solid var(--mc-border);
  border-radius: 8px;
  margin-bottom: 0.35rem;
}
.mc-rows li:last-child {
  margin-bottom: 0;
}
.mc-rows .mc-heard {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--mc-dim);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-rows .mc-arrow {
  color: var(--mc-accent);
  flex: 0 0 auto;
  font-size: 12px;
}
.mc-rows .mc-word {
  font-family: var(--mc-jp);
  font-size: 18px;
  line-height: 1.6;
  flex: 0 0 auto;
}

/* ===========================================================================
   Layout: strip. The slim footer unit, one line of text.
   =========================================================================== */
.mc-u.mc-strip {
  padding: 0.7rem 1rem;
  margin: 0 auto 0.85rem;
  max-width: 44rem;
  text-align: center;
  background: transparent;
  border-style: dashed;
}
.mc-strip .mc-h {
  font-size: 15px;
  display: inline;
  margin: 0;
}
.mc-strip .mc-p {
  display: inline;
  margin: 0;
  font-size: 14px;
}
.mc-strip .mc-strip-go {
  color: var(--mc-accent-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
html.dark-mode .mc-strip .mc-strip-go {
  color: var(--mc-accent);
}

/* ===========================================================================
   Layout: tile. Fills one cell of the Bootstrap novel-card grid on the front
   page, so it sits in the flow instead of interrupting it.
   =========================================================================== */
.mc-u.mc-tile {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.15rem 1.2rem;
}
.mc-tile .mc-h {
  font-size: 20px;
}
.mc-tile .mc-art {
  margin: 0.35rem 0 1rem;
}
.mc-tile .mc-tile-foot {
  margin-top: auto;
}

/* Respect a reader who asked for less motion, and keep print clean. */
@media (prefers-reduced-motion: reduce) {
  .mc-u .mc-cta {
    transition: none;
  }
}
@media print {
  .mc-u {
    display: none !important;
  }
}

/* ===========================================================================
   The navbar slot.

   This one is not a unit, it is a link in the site's own chrome, which is the
   placement most likely to be read as "this site owns that app". A nav item
   that matches the novel menus IS a section of the site as far as a reader is
   concerned, so the job here is to make it read as a link out: the brand
   leads, the descriptor trails in a lighter weight, a divider separates it
   from the menu, and an arrow says it leaves. Muted by default and only
   coloured on hover, so it sits below the menu in the reading order.

   Keyed off .navbar .nav-link with the same specificity the host style uses
   (style.css sets dark-mode nav links with !important, so the dark rule here
   matches that).
   =========================================================================== */
.navbar .nav-link.mc-nav {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: #6c757d;
  padding-left: 1rem;
  border-left: 1px solid #dcdcdc;
  margin-left: 0.35rem;
}
.navbar .nav-link.mc-nav:hover,
.navbar .nav-link.mc-nav:focus {
  color: #4f6d43;
}

.mc-nav .mc-nav-wm {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
  font-size: 0.95em;
  letter-spacing: 0.02em;
}
.mc-nav .mc-nav-name {
  font-weight: 600;
}
.mc-nav .mc-nav-tag {
  font-size: 0.85em;
  opacity: 0.8;
}
.mc-nav .mc-nav-out {
  font-size: 0.7em;
  opacity: 0.65;
}

/* The menu stacks on mobile, where a left border reads as nothing. Separate
   it from the item above instead.

   This is the ONE viewport media query allowed in this file, and the ban
   elsewhere is the reason it is fine here: the units are sized by their
   container, but the navbar really is driven by the viewport, because
   Bootstrap's navbar-expand-lg collapses it at exactly 992px. The breakpoint
   below must stay in step with that class. Do not convert this to a
   container query and do not add one for the .mc-u units. */
@media (max-width: 991.98px) {
  .navbar .nav-link.mc-nav {
    border-left: 0;
    border-top: 1px solid #dcdcdc;
    margin-left: 0;
    padding-left: 0;
    margin-top: 0.35rem;
    padding-top: 0.6rem;
  }
}

html.dark-mode .navbar .nav-link.mc-nav {
  color: #8f8f8f !important;
  border-color: #333;
}
html.dark-mode .navbar .nav-link.mc-nav:hover,
html.dark-mode .navbar .nav-link.mc-nav:focus {
  color: #8caf7b !important;
}