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

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

Stephan Beal
https://wanderinghorse.net

Maintenance achtung: morbad/css/*.css are generated from
morbad.d/css/*.in.css. The generated files are stored in SCM so that
clients can simply clone/download it and use it without requiring
build tools.
************************************************************************/

/*
Common DD colors (obtained using a color picker on the rulebook, so might be off):

(Reminder to self: the Lair graphics on pg 23 of the rulebook would
have been a better starting point/reference for most of these!)

skill yellow: #ffdf00 is just a tick too dark when printed. Maybe
#ffef00 (looks lovely on my printer).

action halo yellow: #ffde00 (halo around action icons)

skill blue: #61d4fb (comes out nice on my printer)..

skill green: #c3d82d

skill orange: #f7941d (from the rulebook) is too dark when printed.
#f7ab1d is almost too yellow, but we'll try it. #f7a51d might also be
okay.

purple: #91268f used as the background color of several action icons.
#b146af is a bit brighter, possibly more suitable for printing.

skill magenta:...

- Color-dropped from scanned cards says: #ba1059, but #cf0a5d is a bit
  ligher, providing more (much-needed) contrast for black-on-magenta.
  #db175c might be okay.

- But... the rulebook says #ec008c, #eb008a, and #eb008b. Those look
  way too bright on the screen but print out okay. #d9185c is a tick
  brighter but "not quite right". #d4185a is not "canon", but it's a
  bit easier to read black text on this bg. Looking closely at the
  Voidwalker mastery, it seems that there may be two different
  magentas: Mastery magenta and skill body block magenta, but i can't
  say for certain whether that's a trick of the light.


Large cards:

red (Highlands/Resolve Immediately): #ef3b2d

Settlement Encounter green: #bce1ad or #b1d5a3? (something close to
that, anyway).  #a1d78b is also close, but is a bit too close to the
skill green.  This CSS file currently calls this color "green-se".


Despite support for CSS variables not being sooo widespread yet, it's
extremely tempting to use those for our standard colors:

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

*/

/************************************************************************
Card misc. crunchy bits...
************************************************************************/

.dd-card .nowrap {white-space: nowrap;}
.dd-card .italic {font-style: italic}
.dd-card .strong {font-weight: bold}
.dd-card .underline {text-decoration: underline}
.dd-card .letter-spacing-small-gap {
    /* Kludge for non-existent gap between "{::PARTY::}1" */
    letter-spacing: 0.75mm;
}

.dd-bg-black {background-color: #000000}
.dd-fg-black {color: #000000}
.dd-fg-blue {color: #67d6fd}
.dd-bg-blue {background-color: #67d6fd}
/* Color "default" is provided solely to simplify certain automation */
.dd-fg-default {color: inherit}
.dd-bg-default {background-color: inherit}
.dd-fg-green {color: #c3d82d}
.dd-bg-green {background-color: #c3d82d}
.dd-fg-green-se {color: #bce1ad}
.dd-bg-green-se {background-color: #bce1ad}
.dd-fg-grey {color: #dadada}
.dd-bg-grey {background-color: #dadada}
.dd-fg-magenta {color: #f9139b}
.dd-bg-magenta {background-color: #f9139b}
.dd-fg-orange {color: #f7ab1d}
.dd-bg-orange {background-color: #f7ab1d}
.dd-fg-purple {color: #b146af}
.dd-bg-purple {background-color: #b146af}
.dd-fg-red {color: #ef3b2d}
.dd-bg-red {background-color: #ef3b2d}
.dd-fg-white {color: white}
.dd-bg-white {background-color: white}
.dd-fg-yellow {color: #ffef00}
.dd-bg-yellow {background-color: #ffef00}
/* The "inherit" entries are only to assist in certain automation */
.dd-fg-inherit {color: inherit}
.dd-bg-inherit {background-color: inherit}

.dd-fg-override,
.dd-bg-override {
    /*
       These classes are for special-case CSS-selection of
       strongly-matching CSS rules which define a bg/fg color which we
       would very much like to override with dd-fg-XXX or
       dd-bg-XXX, but cannot do so because the rule declaring the
       color is a better CSS match, so it overrides our
       dd-fg/bg-XXX. The intent of these tags is that such
       tightly-matching rules can use these as exclusion cases:

       some-rule:not(.dd-bg-override) { ... }

       to allow clients to override the fg/bg using a combination of
       dd-fg/bg-XXX and dd-fg/bg-override.

       That's the theory, anyway. The wrinkle in that is that the JS
       code which handles setting of the dd-bg/fg classes necessarily
       removes any conflict classes before it sets one, and the name
       dd-fg/bg-override is such a class name, so it would also get
       removed by those APIs. Applying the override last would,
       because of how card JSON is structured/used, open us up to
       having multiple fg/bg color classes set on the same element,
       which would only lead to Grief.
   */
}

/************************************************************************
   dd-font-size-XXX are primarily used by automation which tries to
   guesstimate font sizes. The XX initially referred to a font
   percentage, but relative percentages have proven problematic,
   so they still logically refer to a percentage but perhaps not
   the browser's idea of that percentage.

   font size 100 is the basis: 12pt. Each 1-point increment of that
   is 1% of 12pt, so 0.12pt.

   Reminder to self: to fish the computed font sizes out of DOM elements,
   something like this works:

var sizeMap = (function(){
    var targetElem=document.querySelector('.dd-card-wrapper-mini');
    var min = 50, max = 400, step = 5, e, i, style;
    var rc = {};
    for(i = min; i <= max; i+=step){
        e = document.createElement('span');
        e.style.fontSize = i+'%';
        targetElem.appendChild(e);
        style = window.getComputedStyle(e);
        rc[i] = parseFloat(style.fontSize);
        targetElem.removeChild(e);
    };
    return rc;
})();

To convert those pixel-size values to pt sizes, multiply them by 0.75
(i.e. px*3/4). At least, that's what one web page i read says. i hope
it's right. It seems to be.

Here's another snippet which builds a reference list of font sizes
into a TABLE, suitable for printing out as a guide when constructing
cards:

HTML:
      <table id='font-sizes'>
        <thead><th>DD size</th><th>pt</th><th>Text</th></thead>
        <tbody></tbody>
      </table>

JS:
(function(){
    const t = morbad.selectOne('#font-sizes'),
      tbody = t.querySelector('tbody'),
      dom = morbad.dom;
            
    const max = 120, sample = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, SED DO EIUSMOD TEMPOR INCIDIDUNT";
    var pts = 6;
    for(let i = 50; i < 140; i += 5, pts += 0.6 ){
       const tr = dom.create('tr');
       dom.append(tbody, tr);
       dom.append(
         tr,
         dom.append(dom.create('td'), i),
         dom.append(dom.create('td'), pts.toFixed(1)),
         dom.append(dom.addClass(dom.create('td'), 'dd-font-size-'+i) , sample)
       );
     }
})();

Notes on font size legibility on large-format cards, noting that for
mini-format cards the effective font size is HALF the dd-font-size-XX
value because of how the cards are scaled:

6pt: UPPER CASE 50 is still legible (barely) but lower case is... not
recommended.

6.6pt: UPPER CASE 55 is still quite legibile, but lower case is
extremely borderline.

7.2pt: UPPER CASE is well within our comfort zone for card headers.

7.8pt: Lower case below this size is "not really" recommended.

After much frustration with the font size granularity for Encounter
cards, we've added 1% granularity for dd-font-size-XX, in the range
(50,250), falling back to 5% after at higher values. Even so, the
automated font size calculation will continue to use 5% as its basis
in order to prevent it from taking ages to complete, and a user can
tweak the result in 1-step increments after that (so long as the font
size is below our upper threshold).

Why not simply offer 1% granularity all the way to to the max font
size? Simply because of the CSS/memory bloat. Doing so, compared to
5%, requires literally 5x as much CSS for extremely little
benefit. Font sizes > 20-ish points are, in this framework, rarely
seen except on very terse (pre-downscaled) mini-format cards and in
card names.

So why set font sizes this way at all, rather than using arbitrary
font size units? Because (1) automating that sort of size calculation
is much more difficult, (2) because it would require applying font
sizes directly as style attributes of DOM elements, and (3) from a
software development perspective (2) is icky.


Potential TODO: "re-center" our font sizes from a basis of 12pt to
10pt. The main reason is to simplify in-the-head font size calculation
and provide a 1-to-1 mental mapping of dd-font-size-XYZ to XY.Zpt, but
it's not really clear that doing so is necessary. A re-centering of
the font size basis would require modifying the fontSizePercent
property of every single card (by +20 points, in the case of a
12-to-10 conversion).


Potential TODO: modify JS-side morbad.setFontSizeHint() and/or one of
the related methods to dynamically install dd-font-size-XYZ for
arbitrary not-yet-in-CSS XYZ values. With that in place, a value like
417 would become valid.

************************************************************************/
.dd-font-size-encounter-name {font-size: 11pt}
/* special case for internal encounter card use! If we recenter the fonts
   at 10pt we can get rid of this, as dd-font-size-110 would be 11pt.*/

/** .dd-font-size-50 .. 95 */
.dd-font-size-50{font-size:6.0pt} .dd-font-size-51{font-size:6.12pt} .dd-font-size-52{font-size:6.24pt} .dd-font-size-53{font-size:6.36pt} .dd-font-size-54{font-size:6.48pt} 
.dd-font-size-55{font-size:6.6pt} .dd-font-size-56{font-size:6.72pt} .dd-font-size-57{font-size:6.84pt} .dd-font-size-58{font-size:6.96pt} .dd-font-size-59{font-size:7.08pt} 
.dd-font-size-60{font-size:7.2pt} .dd-font-size-61{font-size:7.32pt} .dd-font-size-62{font-size:7.44pt} .dd-font-size-63{font-size:7.56pt} .dd-font-size-64{font-size:7.68pt} 
.dd-font-size-65{font-size:7.8pt} .dd-font-size-66{font-size:7.92pt} .dd-font-size-67{font-size:8.04pt} .dd-font-size-68{font-size:8.16pt} .dd-font-size-69{font-size:8.28pt} 
.dd-font-size-70{font-size:8.4pt} .dd-font-size-71{font-size:8.52pt} .dd-font-size-72{font-size:8.64pt} .dd-font-size-73{font-size:8.76pt} .dd-font-size-74{font-size:8.88pt} 
.dd-font-size-75{font-size:9.0pt} .dd-font-size-76{font-size:9.12pt} .dd-font-size-77{font-size:9.24pt} .dd-font-size-78{font-size:9.36pt} .dd-font-size-79{font-size:9.48pt} 
.dd-font-size-80{font-size:9.6pt} .dd-font-size-81{font-size:9.72pt} .dd-font-size-82{font-size:9.84pt} .dd-font-size-83{font-size:9.96pt} .dd-font-size-84{font-size:10.08pt} 
.dd-font-size-85{font-size:10.2pt} .dd-font-size-86{font-size:10.32pt} .dd-font-size-87{font-size:10.44pt} .dd-font-size-88{font-size:10.56pt} .dd-font-size-89{font-size:10.68pt} 
.dd-font-size-90{font-size:10.8pt} .dd-font-size-91{font-size:10.92pt} .dd-font-size-92{font-size:11.04pt} .dd-font-size-93{font-size:11.16pt} .dd-font-size-94{font-size:11.28pt} 
.dd-font-size-95{font-size:11.4pt} .dd-font-size-96{font-size:11.52pt} .dd-font-size-97{font-size:11.64pt} .dd-font-size-98{font-size:11.76pt} .dd-font-size-99{font-size:11.88pt} 

/** .dd-font-size-100 .. 145 */
.dd-font-size-100{font-size:12.0pt} .dd-font-size-101{font-size:12.12pt} .dd-font-size-102{font-size:12.24pt} .dd-font-size-103{font-size:12.36pt} .dd-font-size-104{font-size:12.48pt} 
.dd-font-size-105{font-size:12.6pt} .dd-font-size-106{font-size:12.72pt} .dd-font-size-107{font-size:12.84pt} .dd-font-size-108{font-size:12.96pt} .dd-font-size-109{font-size:13.08pt} 
.dd-font-size-110{font-size:13.2pt} .dd-font-size-111{font-size:13.32pt} .dd-font-size-112{font-size:13.44pt} .dd-font-size-113{font-size:13.56pt} .dd-font-size-114{font-size:13.68pt} 
.dd-font-size-115{font-size:13.8pt} .dd-font-size-116{font-size:13.92pt} .dd-font-size-117{font-size:14.04pt} .dd-font-size-118{font-size:14.16pt} .dd-font-size-119{font-size:14.28pt} 
.dd-font-size-120{font-size:14.4pt} .dd-font-size-121{font-size:14.52pt} .dd-font-size-122{font-size:14.64pt} .dd-font-size-123{font-size:14.76pt} .dd-font-size-124{font-size:14.88pt} 
.dd-font-size-125{font-size:15.0pt} .dd-font-size-126{font-size:15.12pt} .dd-font-size-127{font-size:15.24pt} .dd-font-size-128{font-size:15.36pt} .dd-font-size-129{font-size:15.48pt} 
.dd-font-size-130{font-size:15.6pt} .dd-font-size-131{font-size:15.72pt} .dd-font-size-132{font-size:15.84pt} .dd-font-size-133{font-size:15.96pt} .dd-font-size-134{font-size:16.08pt} 
.dd-font-size-135{font-size:16.2pt} .dd-font-size-136{font-size:16.32pt} .dd-font-size-137{font-size:16.44pt} .dd-font-size-138{font-size:16.56pt} .dd-font-size-139{font-size:16.68pt} 
.dd-font-size-140{font-size:16.8pt} .dd-font-size-141{font-size:16.92pt} .dd-font-size-142{font-size:17.04pt} .dd-font-size-143{font-size:17.16pt} .dd-font-size-144{font-size:17.28pt} 
.dd-font-size-145{font-size:17.4pt} .dd-font-size-146{font-size:17.52pt} .dd-font-size-147{font-size:17.64pt} .dd-font-size-148{font-size:17.76pt} .dd-font-size-149{font-size:17.88pt} 

/** .dd-font-size-150 .. 195 */
.dd-font-size-150{font-size:18.0pt} .dd-font-size-151{font-size:18.12pt} .dd-font-size-152{font-size:18.24pt} .dd-font-size-153{font-size:18.36pt} .dd-font-size-154{font-size:18.48pt} 
.dd-font-size-155{font-size:18.6pt} .dd-font-size-156{font-size:18.72pt} .dd-font-size-157{font-size:18.84pt} .dd-font-size-158{font-size:18.96pt} .dd-font-size-159{font-size:19.08pt} 
.dd-font-size-160{font-size:19.2pt} .dd-font-size-161{font-size:19.32pt} .dd-font-size-162{font-size:19.44pt} .dd-font-size-163{font-size:19.56pt} .dd-font-size-164{font-size:19.68pt} 
.dd-font-size-165{font-size:19.8pt} .dd-font-size-166{font-size:19.92pt} .dd-font-size-167{font-size:20.04pt} .dd-font-size-168{font-size:20.16pt} .dd-font-size-169{font-size:20.28pt} 
.dd-font-size-170{font-size:20.4pt} .dd-font-size-171{font-size:20.52pt} .dd-font-size-172{font-size:20.64pt} .dd-font-size-173{font-size:20.76pt} .dd-font-size-174{font-size:20.88pt} 
.dd-font-size-175{font-size:21.0pt} .dd-font-size-176{font-size:21.12pt} .dd-font-size-177{font-size:21.24pt} .dd-font-size-178{font-size:21.36pt} .dd-font-size-179{font-size:21.48pt} 
.dd-font-size-180{font-size:21.6pt} .dd-font-size-181{font-size:21.72pt} .dd-font-size-182{font-size:21.84pt} .dd-font-size-183{font-size:21.96pt} .dd-font-size-184{font-size:22.08pt} 
.dd-font-size-185{font-size:22.2pt} .dd-font-size-186{font-size:22.32pt} .dd-font-size-187{font-size:22.44pt} .dd-font-size-188{font-size:22.56pt} .dd-font-size-189{font-size:22.68pt} 
.dd-font-size-190{font-size:22.8pt} .dd-font-size-191{font-size:22.92pt} .dd-font-size-192{font-size:23.04pt} .dd-font-size-193{font-size:23.16pt} .dd-font-size-194{font-size:23.28pt} 
.dd-font-size-195{font-size:23.4pt} .dd-font-size-196{font-size:23.52pt} .dd-font-size-197{font-size:23.64pt} .dd-font-size-198{font-size:23.76pt} .dd-font-size-199{font-size:23.88pt} 

/** .dd-font-size-200 .. 245 */
.dd-font-size-200{font-size:24.0pt} .dd-font-size-201{font-size:24.12pt} .dd-font-size-202{font-size:24.24pt} .dd-font-size-203{font-size:24.36pt} .dd-font-size-204{font-size:24.48pt} 
.dd-font-size-205{font-size:24.6pt} .dd-font-size-206{font-size:24.72pt} .dd-font-size-207{font-size:24.84pt} .dd-font-size-208{font-size:24.96pt} .dd-font-size-209{font-size:25.08pt} 
.dd-font-size-210{font-size:25.2pt} .dd-font-size-211{font-size:25.32pt} .dd-font-size-212{font-size:25.44pt} .dd-font-size-213{font-size:25.56pt} .dd-font-size-214{font-size:25.68pt} 
.dd-font-size-215{font-size:25.8pt} .dd-font-size-216{font-size:25.92pt} .dd-font-size-217{font-size:26.04pt} .dd-font-size-218{font-size:26.16pt} .dd-font-size-219{font-size:26.28pt} 
.dd-font-size-220{font-size:26.4pt} .dd-font-size-221{font-size:26.52pt} .dd-font-size-222{font-size:26.64pt} .dd-font-size-223{font-size:26.76pt} .dd-font-size-224{font-size:26.88pt} 
.dd-font-size-225{font-size:27.0pt} .dd-font-size-226{font-size:27.12pt} .dd-font-size-227{font-size:27.24pt} .dd-font-size-228{font-size:27.36pt} .dd-font-size-229{font-size:27.48pt} 
.dd-font-size-230{font-size:27.6pt} .dd-font-size-231{font-size:27.72pt} .dd-font-size-232{font-size:27.84pt} .dd-font-size-233{font-size:27.96pt} .dd-font-size-234{font-size:28.08pt} 
.dd-font-size-235{font-size:28.2pt} .dd-font-size-236{font-size:28.32pt} .dd-font-size-237{font-size:28.44pt} .dd-font-size-238{font-size:28.56pt} .dd-font-size-239{font-size:28.68pt} 
.dd-font-size-240{font-size:28.8pt} .dd-font-size-241{font-size:28.92pt} .dd-font-size-242{font-size:29.04pt} .dd-font-size-243{font-size:29.16pt} .dd-font-size-244{font-size:29.28pt} 
.dd-font-size-245{font-size:29.4pt} .dd-font-size-246{font-size:29.52pt} .dd-font-size-247{font-size:29.64pt} .dd-font-size-248{font-size:29.76pt} .dd-font-size-249{font-size:29.88pt} 

/** .dd-font-size-250+. As of here, we use 5% granularity. */
.dd-font-size-250{font-size:30.0pt} 
.dd-font-size-255 {font-size: 30.6pt}
.dd-font-size-260 {font-size: 31.2pt}
.dd-font-size-265 {font-size: 31.8pt}
.dd-font-size-270 {font-size: 32.4pt}
.dd-font-size-275 {font-size: 33.0pt}
.dd-font-size-280 {font-size: 33.6pt}
.dd-font-size-285 {font-size: 34.2pt}
.dd-font-size-290 {font-size: 34.8pt}
.dd-font-size-295 {font-size: 35.4pt}
.dd-font-size-300 {font-size: 36.0pt}
.dd-font-size-305 {font-size: 36.6pt}
.dd-font-size-310 {font-size: 37.2pt}
.dd-font-size-315 {font-size: 37.8pt}
.dd-font-size-320 {font-size: 38.4pt}
.dd-font-size-325 {font-size: 39.0pt}
.dd-font-size-330 {font-size: 39.6pt}
.dd-font-size-335 {font-size: 40.2pt}
.dd-font-size-340 {font-size: 40.8pt}
.dd-font-size-345 {font-size: 41.4pt}
.dd-font-size-350 {font-size: 42.0pt}
.dd-font-size-355 {font-size: 42.6pt}
.dd-font-size-360 {font-size: 43.2pt}
.dd-font-size-365 {font-size: 43.8pt}
.dd-font-size-370 {font-size: 44.4pt}
.dd-font-size-375 {font-size: 45.0pt}
.dd-font-size-380 {font-size: 45.6pt}
.dd-font-size-385 {font-size: 46.2pt}
.dd-font-size-390 {font-size: 46.8pt}
.dd-font-size-395 {font-size: 47.4pt}
.dd-font-size-400 {font-size: 48.0pt}


@media print {
/*
    A hint to the browser to print the background colors and images.
    Without these, the colors are gone. Some versions of Firefox have
    an option to toggle this in the print dialog. Chrome, AFAIK, does not.
    Also...

    Firefox (as of this writing) does an absolutely amazing thing when
    printing, and splits the cards into page-sized groups. Chrome does
    the more expected/conventional thing and truncates the cards at
    page boundaries. Update: it turns out that this behaviour, in both
    browsers, is somewhat inconsistent. The only reliable way to get
    either to wrap cards "properly" across pages is to place the cards
    directly in the BODY element, and not a containing sub-element
    (except in a .dd-card-wrapper-mini). Apparently, as soon as the
    sub-element spans a page, both browsers will truncate cards which
    span pages.
*/
  .dd-card-size-mini, .dd-card-size-standard {
    -webkit-print-color-adjust: exact; /*chrome/webkit*/
    color-adjust: exact; /*firefox/IE */
  }

  .dd-no-print {
      display: none !important;
  }

  body {
      /* Maybe this has an effect, maybe not... */
      margin: 0;
      padding: 0;
  }
} /* end @media print */