/* ===========================================================================
   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;
  }
}