/************************************************************************
LICENSE:

This file is released into the Public Domain by its author:

Stephan Beal
https://wanderinghorse.net

Maintenance achtung: morbad-css-mini-cards.css is generated from
morbad-css-mini-cards.in.css. The generated file is stored in SCM so that
clients can simply clone/download it and use it without requiring
build tools.
************************************************************************/

.dd-card-wrapper-mini {
  transform-origin: top left;
  padding: 0.25em;
  margin: 0;
  display: block;
  float: left;
  background: inherit;
  color: inherit;
  /*position: relative;*/
  border: 0;
}

/************************************************************************
Card bootstrapping...
************************************************************************/
.dd-card-size-mini {
  /*
      Potential TODO: replace dd-card-size-mini with classes (dd-card mini)
      so that we can eventually consolidate some of the mini- and
      large-card CSS more easily. Theoretically we'd just need, in the
      CSS, to s/dd-card-size-mini/dd-card.mini/g, but making the
      corresponding change in the JS code would be a bit more work.
   */
  font-size: unset;
}
/* Ensure that these are reset. */
.dd-card-size-mini div {
  margin: 0;
  padding: 0;
}

.dd-card-size-mini.dd-card-skill,
.dd-card-size-mini.dd-card-triumph,
.dd-card-size-mini.dd-card-weakness {
  /*
      US Mini cards are 41x63mm and 63 === 41*1.53658. If, however,
      we render directly to a 41mm card, we have to set the font sizes
      to be tiny, tiny, tiny. The layout seems easier to develop if we
      scale it up by 2x. Then, when needed, we can use CSS
      {transform:scale(0.5)} to get a 41mm-wide card.
   */
  min-width: 82mm;
  max-width: 82mm;
  min-height: 126mm /*calc(82mm * 1.53658)*/ /* ==> 125.99956 */;
  max-height: 126mm /*calc(82mm * 1.53658)*/;
  padding: 0;
  margin: 0;
  border: 0;
  background: black;
  display: inline-block;
  border-radius: 6mm;
  position: relative
    /* needed for placement of .dd-xp-val-wrapper and .dd-copyright */;
  font-family: "dominican";
}

.dd-card-skill header,
.dd-card-skill .dd-body,
.dd-card-skill footer,
.dd-card-weakness header,
.dd-card-weakness .dd-body,
.dd-card-weakness footer,
.dd-card-triumph header,
.dd-card-triumph .dd-body,
.dd-card-triumph footer {
  position: absolute;
  display: block;
  border-radius: 1mm;
  min-width: 74mm /* 82mm scaled card width minus 2x4mm scaled side borders */;
  max-width: 74mm;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/************************************************************************
Card headers...
************************************************************************/

.dd-card-skill header,
.dd-card-weakness header,
.dd-card-triumph header {
  position: relative;
  top: 4mm;
  left: 4mm;
  max-height: 17mm;
  min-height: 17mm;
  min-width: 74mm;
  max-width: 74mm;
  text-align: center;
}
.dd-card-skill header {
  color: black;
  background: #ffef00;
  text-transform: uppercase;
}
.dd-card-skill.mastery header {
  color: #ffef00;
  background: #f9139b;
}
.dd-card-weakness header,
.dd-card-triumph header {
  background-color: black;
}

/*
  Sidebar: .dd-card-type used to be an H2, but H2 has
  inexplicably different space-handling behaviour than
  we need. Consider this body text:

  Blah + <span...>content</span>

  In a DIV, both spaces around that '+' are honored. In an H2, for
  whatever reason, the right-side space is not honored, leading to a
  display of +<span>...

  That's reproducible in both FF and Chrome, so it apparently makes
  sense to *someone* out there.
*/
.dd-card-size-mini header h1 {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dd-card-size-mini header h1 {
  margin: 2mm auto 0 auto;
}

.dd-card-skill header .dd-card-name,
.dd-card-weakness header .dd-card-name,
.dd-card-triumph header .dd-card-name {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 74mm;
  max-width: 74mm;
  min-height: 11mm;
  max-height: 11mm;
  font-weight: bold;
  line-height: 0.9em;
  margin: 0;
  padding: 0;
}
.dd-card-skill header .dd-card-name {
  margin: 1mm 0 0 0;
}

.dd-card-size-mini header .dd-card-name {
  text-transform: uppercase;
}
.dd-card-weakness header .dd-card-name,
.dd-card-triumph header .dd-card-name {
  color: #f9139b;
}

.dd-card-skill header .dd-card-type,
.dd-card-weakness header .dd-card-type,
.dd-card-triumph header .dd-card-type {
  position: absolute;
  top: 11mm;
  left: 0;
  min-width: 74mm;
  max-width: 74mm;
  min-height: 6mm;
  max-height: 6mm;
  /*border: 1px dotted green;*/
  font-size: 15pt;
  overflow: hidden;
  line-height: 15pt;
  margin: 0;
  padding: 0;
  text-transform: uppercase
    /*
     Note that keywords in this field will also be up-cased. If
     they're not, the small letters are unreadable at this size.
   */;
}
.dd-card-triumph header .dd-card-type {
  /* Make this one a tick smaller because these labels can be longer */
  font-size: 14pt /*13.6pt*/;
}

.dd-card-skill header .dd-card-type {
  padding-top: 1mm;
}

.dd-card-skill:not(.mastery) header .dd-card-type::before {
  content: "SKILL";
}
.dd-card-skill.mastery header .dd-card-type::before {
  content: "MASTERY";
}
.dd-card-size-mini header .dd-card-type {
  font-weight: bolder;
}
.dd-card-weakness header .dd-card-type {
  color: #c3d82d;
}
.dd-card-triumph header .dd-card-type {
  color: #f7ab1d;
}

.dd-card-skill .dd-copyright,
.dd-card-weakness .dd-copyright,
.dd-card-triumph .dd-copyright {
  display: inline-block;
  position: absolute;
  top: 20.5mm;
  right: 6mm;
  font-size: 12pt;
  color: black;
  background: #ffef00;
  margin: 0;
  padding: 0 1.25mm;
  text-transform: uppercase;
  border-radius: 1mm;
  min-height: 4mm;
  max-height: 4mm;
  z-index: 100;
  line-height: 0.95em;
}
.dd-card-skill.mastery .dd-copyright {
  /* Bold the MASTERY copyright or else the text is too difficult
       to see. */
  font-weight: bolder;
  color: #ffef00;
  background: #f9139b;
}
.dd-card-weakness .dd-copyright {
  color: black;
  background: #c3d82d;
}
.dd-card-weakness .dd-copyright {
  color: black;
  background: #c3d82d;
}
.dd-card-triumph .dd-copyright {
  color: black;
  background: #f7ab1d;
}

.dd-card-size-mini .dd-copyright.goblinko::before {
  content: "©Goblinko";
}
.dd-card-size-mini .dd-copyright:not(.goblinko)::before {
  content: "Homebrew";
}

/************************************************************************
Card bodies...
************************************************************************/

.dd-card-skill .dd-body,
.dd-card-weakness .dd-body,
.dd-card-triumph .dd-body {
  top: 24mm;
  left: 4mm;
  max-height: 84mm;
  min-height: 84mm;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column;
  align-content: stretch;
  align-items: stretch;
  /*font-family: "baskerville";
    line-height: 1.1em; */
}
.dd-card-skill .dd-body {
  background: #ffef00;
  color: black;
}
.dd-card-weakness .dd-body {
  background: #c3d82d;
  color: black;
}
.dd-card-triumph .dd-body {
  background: #f7ab1d;
  color: black;
  min-height: 96mm;
  max-height: 96mm;
}
.dd-card-triumph .dd-body > section {
  min-height: 96mm;
  max-height: 96mm;
  /* We need to pin this element's size so that automated font
       size calculation can Do The Right Thing (or close to it). */
}

.dd-card-skill .dd-body > section,
.dd-card-weakness .dd-body > section,
.dd-card-triumph .dd-body > section {
  flex: 0 1 auto;
  text-align: center;
  padding: 2mm 2mm 0mm 2mm;
  margin: 0;
  line-height: 0.935em /* very finely-tuned for the Caslon font */;
}

/*
  BRs have been a major pain in my backside.
  As of 2019-07-17, we no longer emit them
  from the markup parser.
*/
/*.dd-card-size-mini .dd-body section hr + br,
.dd-card-size-mini .dd-body section div + br
{
    display: contents;
    content: "";
    margin: 0 0 0 0;
    padding: 0;
}*/

.dd-card-size-mini .dd-body section {
  /**
       This pre-line setting is absolutely critical to the proper handling of
       line breaks. i tried programmatically replacing \n's with BRs but that
       was a disaster, leading to different results across different browsers.
   */
  white-space: pre-line;
}

.dd-card-skill .dd-body > section {
  /* pin min/max height to the same as the containing body
       so that font size calculation can do the right thing. */
  max-height: 84mm;
  min-height: 84mm;
}

.dd-card-skill:not(.mastery) .dd-body > section.mastery {
  display: none;
}
.dd-card-skill.mastery .dd-body > section.skill {
  display: none;
}

.dd-card-size-mini .dd-body .dd-keyword-ref {
  white-space: nowrap;
}

.dd-card-size-mini .dd-body section div.dd-colorbox {
  display: block;
  margin: 1.5mm
    /*needed for letters which dangle ("yg") in the box above this one*/ -2mm /* undo containing SECTION's side padding */
    1mm -2mm;
  padding: 2mm 1.5mm 2mm /* needed for letters which "dip", e.g. "g" */ 1.5mm;
}

.dd-card-size-mini .dd-body section div.dd-colorbox:first-child {
  /* When a dd-colorbox is the first element in the body, we can/should
       eliminate the extra top margin. e.g., Combat Reflexes.
   */
  margin-top: 0;
}

.dd-card-size-mini .dd-body hr,
.dd-card-size-mini .dd-body section hr {
  color: black;
  background: black;
  border: none;
  height: 0.75mm;
  padding: 0;
  margin-top: 1.5mm;
  margin-bottom: 1mm;
  /* Negative left/right margins to merge with the card border */
  margin-left: -2.1mm;
  margin-right: -2.1mm;
}
.dd-card-size-mini .dd-body hr.thick,
.dd-card-size-mini .dd-body section hr.thick {
  height: 1.5mm;
}

/************************************************************************
Attribute modifier blocks...
************************************************************************/
.dd-card-size-mini .dd-body section .dd-attr-mod {
  min-height: 1.6em;
  max-height: 1.6em;
  min-width: 2em;
  max-width: 2em;
  display: inline-block;
  margin: 0.5mm 0 0 0;
  padding: 1mm 0 0 0;
  line-height: 0.8em;
  color: #000 /* so a colorbox doesn't make it unreadable */;
  overflow: hidden;
}
.dd-card-size-mini .dd-body section .dd-attr-mod div {
  /* Unfortunately need another level of indirection to avoid
       that these elements are treated as display:block */
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  align-content: stretch;
  text-align: center;
}
.dd-card-size-mini .dd-body section .dd-attr-mod div span {
  margin: 0;
  padding: 0;
}
.dd-card-size-mini .dd-body section .dd-attr-mod div span:first-child {
  /* The "+N" part of the attribute modifier */
  font-weight: bold;
}

.dd-card-size-mini .dd-body section .dd-attr-mod:not(.penalty) {
  background: #ffef00
    /* on the physical Lycanthropy mastery card, the bg of this
       SECTION is magenta, and we don't want to inherit that. */;
  border: 1.5mm solid #f7ab1d;
}

.dd-card-size-mini .dd-body section .dd-attr-mod.penalty {
  background: #c3d82d;
  border: 1.25mm solid #61b347;
}

/************************************************************************
Action blocks & their glyphs...

Some related, but card-type-agnostic, styles are in common.css. Some
of these rules expect to be extending such rules.
************************************************************************/
.dd-card-size-mini section .dd-action-block {
  margin: 1.5mm
    /*needed for letters which dangle ("yg") in the box above this one*/ -1mm /* undo SOME of containing SECTION's side padding */
    1mm -1mm;
  /* ^^^^ these margins are NOT what we want for the top-most VISIBLE section
       in the skill. We try to handle that in a follow-up selector below.
     */
  padding: 2mm 1.5mm 1.5mm /* needed for letters which "dip", e.g. "g" */ 1.5mm;
  /*border-radius: 1mm; */ /* the originals have hard corners */
  min-height: 13mm /* b/c .dd-action-glyph is fixed at 12mm. */;
}

.dd-card-size-mini section .dd-action-block .dd-action-glyph {
  /* Overridden/extended from common.css */
  min-width: 12mm;
  max-width: 12mm;
  min-height: 12mm;
  max-height: 12mm;
  line-height: 6mm
    /* w/o this i'm seeing slight differences
                        in the layout between cards */;
  margin: -1mm 1.5mm 0
    /* bottom margin is only needed when 5+ rest actions wrap a line, in
                    which case a margin of 1.5-2mm is needed. We're
                    going to leave the margin at 0 for the
                    common/expected cases because 2mm is a lot of
                    wasted space given our layout constraints. */
    0;
  padding: 1mm 1mm 0mm 1mm;
}
/* For the {{bold settlement}}-style actions */
.dd-card-size-mini section .dd-action-glyph.two-and {
  min-height: 32mm;
  max-height: 32mm;
  padding: 1mm 1mm 0 1mm;
}
/*

   The FLOATed, oversized .dd-action-glyph.two-and apparently does not
   count for purposes of growing its parent container, so let's make
   sure that that container is at least as tall as the glyph
   container. This affects the Streetwise and Dopesmoker Masteries, at
   a minimum.
*/
.dd-card-size-mini section .dd-action-block.two-and {
  min-height: 31mm;
  /*padding: 1mm 1mm 0mm 1mm;*/
}

/**
    Remove the top margin for the first .dd-action-block in the skill
    resp. mastery body section type matching that skill.

    This is not strictly correct, because it's conceivably possible to
    have a .dd-action-block which is not the top-most element in the
    section, but it's close to what we want.

    The DOM structure allows a .dd-body to have multiple SECTION
    elements, including sections common to both the skill and mastery
    form, but the JSON/JS-based system for building cards has no way
    of representing that, so we won't really know if this will
    backfire on us until someone makes such a card by hand.

    Aaarrggg. Dopesmoker mastery is the outlier. If we do this then
    that card gets the bottom pixels of a dangling "y" stuck in the top
    of its .dd-action-block (which follows non-block text). Hmmm...
    we can introduce {{colorbox=yellow}} markup which blends in with
    the background but would work around this.
*/
.dd-card-skill.mastery .dd-body >
    section:not(.mastery) ~ section.mastery .dd-action-block:first-child,
.dd-card-skill:not(.mastery) .dd-body >  section:first-child
                                         /* ^^^^ will, for the automated cases,
                                            be a non-.mastery section */
                                 .dd-action-block:first-child,
.dd-card-weakness > section:first-child .dd-action-block:first-child {
  margin-top: 0;
}

/** Shrink top padding of the first SECTION in the body part of a
    skill/mastery card, taking care to count only the currently visible
    sections . */
.dd-card-skill:not(.mastery) .dd-body section:not(.mastery):nth-of-type(1) {
  padding-top: 0.5mm;
}
/*
.dd-card-skill.mastery .dd-body section:not(.skill):nth-of-type(1)
this css fails to match on the final :nth-of-type(1) part, and i have no clue why, so
we'll take advantage of the fact that the automation only ever generates one
(relevant) SECTION per dd-body, even though the model allows more than one, and...
*/
.dd-card-skill.mastery .dd-body section:not(.skill) {
  padding-top: 0.5mm;
}

/************************************************************************
XP cost/value
************************************************************************/
.dd-card-size-mini .dd-xp-val-wrapper {
  /**
       Skill cards: the skill cost label on the bottom/left, just
       above the REQ footer. This is only visible for skills, not
       masteries.

       Weakness cards: this displays at the base of the .dd-body.
   */
  color: #ffef00;
  background: black;
  margin: 0;
  display: none;
  font-weight: bold;
}

.dd-card-weakness .dd-xp-val-wrapper {
  font-size: 18pt;
  min-height: 6mm;
  max-height: 6mm;
  padding: 0 2mm 0 2mm;
  color: #f9139b;
  background: black;
  margin: 0;
  display: inline-block;
  position: absolute;
  left: calc(50% - 11.5mm) /* 11==rough guess at half this object's width*/;
  bottom: 17.5mm;
  z-index: 100;
  border-radius: 1mm 1mm 0 0;
  line-height: 1.25em
    /* we require an explicit value to keep page-level
                           line height from being inherited */;
}
.dd-card-weakness .dd-xp-val-wrapper .dd-xp-val::before {
  content: "+";
}
.dd-card-skill:not(.mastery) .dd-xp-val-wrapper {
  display: inline-block;
  height: 6mm;
  padding: 0mm 2mm 1mm 1mm;
  border-radius: 0 1mm 0 0;
  vertical-align: middle;
  position: absolute;
  bottom: 16mm
    /* The official cards use a value of ~16mm, but that is, IMO, a horrid
        design flaw, as it leads to no end of Grief when trying to pack an
        extra line of text onto a card. Changing this to 13.75mm gives just
        just enough extra space that we can sqeeeze in a bit more text and it
        does not (visually) collide with the dd-req-list-outer element.

        Obviously, using any value other than The Official One is sacrilege,
        but those extra 2.25mm are just screaming to be set free.
    */;
  /*top: 16mm;*/
  /* ^^^ aligns it alongside the skill/mastery label, where it cannot
       overlap/block any text */
  left: 3.8mm
    /* at high resolutions, there's a tiny, tiny gap between
                   this an the border if we use 4mm*/;
  font-size: 18pt;
  line-height: 1.25em
    /* we require an explicit value to keep page-level
                           line height from being inherited */;
}

/************************************************************************
Card footers...
************************************************************************/

.dd-card-skill footer,
.dd-card-weakness footer {
  bottom: 4mm;
  left: 4mm;
  min-height: 10mm;
  max-height: 10mm;
  position: absolute;
  line-height: 0.95em;
  max-width: 74mm;
  min-width: 74mm;
}

.dd-card-weakness footer {
  /*font-size: 120%;*/ /* must be modified based on length of weakness.req value. */
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: normal;
  /*background: #ff000077;*/
  line-height: 1.25em
    /* we require an explicit value to keep page-level
                           line height from being inherited */;
}

.dd-card-skill footer .dd-req-label,
.dd-card-weakness footer .dd-req-label {
  position: absolute;
  bottom: -1mm;
  min-height: 10mm;
  max-height: 10mm;
  max-width: 11mm;
  min-width: 11mm;
  font-weight: bold;
  padding: 0;
  margin: 0 1mm -2mm 0;
  background: black;
  color: #ffef00;
  text-align: left;
  text-transform: uppercase;
  border-radius: 0;
  font-size: 21pt;
  line-height: 0.5em;
}

.dd-card-weakness footer > div {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  padding: 0mm 2mm 0 0;
  /*flex-grow: 1;
    flex-shrink: 1;*/
}
.dd-card-weakness footer .dd-req-label {
  padding: 0;
  color: #f9139b;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: top;
  margin: 2mm 0 0 0;
  /*font-size: 145%;*/
}

.dd-card-skill footer .dd-req-label::before {
  content: "REQ";
}
.dd-card-weakness footer .dd-req-label::before {
  content: "REQ|";
}

/**
   .dd-req-list-outer is a layout kludge to allow us to vertically
   center the .dd-req-list contents without having to give it
   display:flex, as flexbox has unwanted side-effects when we
   introduce non-text DOM nodes into the list (e.g. keyword glyphs).
*/
.dd-card-skill footer .dd-req-list-outer,
.dd-card-weakness footer .dd-req-list-outer {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 14mm;
  /*text-align: left;*/
  min-height: 10mm;
  max-height: 10mm;
  margin: 0;
  border-radius: 1mm 1mm 2mm 1mm;
  max-width: calc(74mm /*footer*/ - 11mm /*.dd-req-label*/ - 3mm /*magic*/);
  min-width: calc(74mm /*footer*/ - 11mm /*.dd-req-label*/ - 3mm /*magic*/);
  padding: 0.5mm 1mm 0.5mm 1mm;
  line-height: 0.95em;
  /*
      We use flexbox to vertically center the inner .dd-req-list...
      We can't simply make .dd-req-list flexbox because that breaks
      the layout when we add non-text DOM nodes to it (keyword
      glyphs).
   */
  display: flex;
  align-items: center;
  overflow: hidden;
}
.dd-card-skill:not(.mastery) footer .dd-req-list-outer {
  background: #ffef00;
  color: black;
}
.dd-card-skill.mastery footer .dd-req-list-outer {
  background: #f9139b;
  color: #ffef00;
  font-weight: bold;
}
.dd-card-weakness footer .dd-req-list-outer {
  color: #c3d82d;
  background: black;
  font-weight: bold;
}
.dd-card-size-mini footer .dd-req-list-outer .dd-req-list {
  text-transform: uppercase
    /*
      Note that we have to work around (in JS code) the special case
      of lower-casing the word "or" in requirements lists :/.
   */;
  line-height: 0.9em;
  margin: 0;
  padding: 0;
  overflow: visible;
  /* no - breaks our careful flex centering min-height: 10mm; */
  max-height: 9mm
    /* max-height, matching from dd-req-list-outer - margin, is needed
       for automatic font size calculation to work. */;
  font-weight: bold
    /*
      True story: bolding this actually shrinks the text, allowing
      a couple of the more pathological cases of long text to get a
      slightly larger font for the same amount of space.

     "Wild w/ Spider Cider, Goblin Jar, or Daemon's Blood"
     length = 51

     W/ bold, it gets a better fit and can take a larger font.
   */;
  /*display: flex;
    flex-direction: row;*/
}

.dd-card-size-mini footer .dd-req-list-outer .dd-req-list > * {
  vertical-align: middle;
}

/*.dd-card-size-mini footer .dd-req-list-outer > .dd-req-list > * {
    line-height: 0.9em;
}*/

.dd-card-size-mini .lowercase {
  /* Part of the constellation of kludges for lower-casing the
       word "or" in card requirement text. */
  text-transform: lowercase;
}

/**
   If a .dd-card-weakness is flagged with the no-req-list class then
   its footer is hidden, the .dd-xx-val-wrapper is shifted downwards,
   and the body is extended to take up that extra space.
*/
.dd-card-weakness.no-req-list footer {
  display: none;
}
.dd-card-weakness.no-req-list .dd-body {
  max-height: 98mm;
  min-height: 98mm;
}
.dd-card-weakness.no-req-list .dd-body > section {
  /* 98mm == height of .dd-body when there's NOT a visible .dd-req-list-outer.
       minus 6mm == height of .dd-xp-val-wrapper */
  min-height: 92mm;
  max-height: 92mm;
  /* We need to pin this element's size so that automated font
       size calculation can Do The Right Thing (or close to it). */
}
.dd-card-weakness:not(.no-req-list) .dd-body > section {
  /* 84mm == height of .dd-body when there's a visible .dd-req-list-outer.
       minus 6mm == height of .dd-xp-val-wrapper */
  min-height: 78mm;
  max-height: 78mm;
  /* We need to pin this element's size so that automated font
       size calculation can Do The Right Thing (or close to it). */
}
.dd-card-weakness.no-req-list .dd-xp-val-wrapper {
  bottom: 4mm;
  line-height: 1.25em
    /* we require an explicit value to keep page-level
                           line height from being inherited */;
}

.dd-card-size-mini .dd-body section span.section-label {
  /** We do this so that "features" which include only a label and
        an attribute modifier block don't look quite so silly. */
  vertical-align: top;
  font-weight: bold;
}