/* Her two palettes and the ground the app stands on: every colour the app
   knows, named once here and used by name everywhere else, plus the page
   itself and her sheet of icons.
   This file is first in the head, and nothing but this file may hold a raw
   colour: a hex code anywhere else is a colour that will not turn at night. */
/* How the app looks: her island, her icons.  The markup is in the screens;
   this file only dresses it.  It lives apart from index.html because the page
   itself has to stay short enough to read in one go.

   Her island is the ground the app stands on.  She drew it full size and tall -
   the scene along the top, sand all the way down - so it covers a phone screen
   without being stretched out of shape, and her cards sit on it. */
:root{
  --sprite:url(../img/sprite-day.webp);
  --shot:url(../img/bg-day.jpg);
  /* Her second drawing: the bare sky with palm leaves in the corner.  It is the
     ground of every screen that is not Home, where the island itself stands. */
  --sky-art:url(../img/bg-sky.jpg);
  --sky:#e9f7ff; --sky2:#fbfdff;
  /* A card is solid.  Even a tenth of the island coming through it put the hut
     and the sea behind her words, and that is where they were hardest to read. */
  --card:#ffffff; --solid:#ffffff; --sheet:#ffffff;
  --bar:rgba(255,255,255,.90);
  --surround:#ffffff;                    /* beside the column on a wide window */
  /* What is laid over the island wherever words have to sit on it. */
  --veil:linear-gradient(rgba(255,255,255,.60),rgba(255,255,255,.86));
  --line:#d6e6f2;
  --shade:0 2px 10px rgba(22,70,110,.07);
  --ink:#16324a; --dim:#5b7d99;
  --pink:#e2529a; --aqua:#16b0a6; --sun:#f0a52a;
  --good:#16a07a; --hard:#5b7d99; --again:#e2529a; --star:#eaa50f;
  --warm:#fff6de; --warm-line:#eccf7e;
  /* Her words inside a sentence: known, being learned, not started yet. */
  --w-know:#0f8a63; --w-learn:#cf6d10; --w-new:#7b8ea3;
  /* The ring: learned, not learned yet, put aside. */
  --fresh:#2f9ae0; --gone:#c3d3e0;
  /* Her four states, in her colours: blue for the ones she knows, light green
     for the ones she is learning, almost white for the ones not started, grey
     for the ones she put away. */
  --r-know:#2f9ae0; --r-learn:#7ad3a4; --r-new:#ffffff; --r-hid:#c3d3e0;
  /* White on her sky needs an edge, or the ring melts into the clouds. */
  --r-edge:#7ec8ea;
}
:root[data-theme="dark"]{
  --sprite:url(../img/sprite-night.webp);
  /* How far a day drawing is turned down after dark - one knob for all of them. */
  --dim-art:brightness(.9) saturate(.9);
  --shot:url(../img/bg-night.jpg);
  /* Her sky is painted for the day.  After dark the screens keep plain blue. */
  --sky-art:url(../img/bg-sky-night.jpg);
  --sky:#0d1830; --sky2:#121e40;
  --card:#182a52; --solid:#182a52; --sheet:#16254a;
  --bar:rgba(16,27,56,.92);
  --surround:#0b1226;
  --veil:linear-gradient(rgba(11,21,46,.52),rgba(11,21,46,.84));
  --line:#2a3f6e;
  --shade:0 2px 10px rgba(0,0,0,.3);
  --ink:#eaf0ff; --dim:#9fb3d6;
  --pink:#ff8fc0; --aqua:#59d6cd; --sun:#ffc861;
  --good:#5fd6ae; --hard:#9fb3d6; --again:#ff8fc0; --star:#ffc861;
  --warm:#23355f; --warm-line:#3d548c;
  --w-know:#5fd6ae; --w-learn:#ffbe6b; --w-new:#a8b8d0;
  --fresh:#5fb5ff; --gone:#46597f;
  --r-know:#5fb5ff; --r-learn:#6fd0ae; --r-new:#e8f3ff; --r-hid:#46597f;
  --r-edge:#5f8fc4;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* Nothing scrolls as a whole page - the lists and the card scroll inside
   themselves - so a sideways swipe has nothing to slide. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
html{background:var(--sky)}
/* Her island, whole, behind everything.  It is anchored at the top, where the
   sea and the palms are; below that it is sand, so a taller screen only shows
   more beach instead of pulling the drawing about. */
/* Her island is not the ground of every screen: she asked for it on Home and
   behind a card, and for plain blue everywhere else - a screen of switches, of
   numbers or of boards is no place to read a beach through.  It is set on the
   body and not on <main>, or the strip under the header would keep showing the
   beach while the screen below it was blue. */
body{position:fixed;inset:0;margin:0;color:var(--ink);
  background:var(--sky-art) center top/cover no-repeat,var(--sky);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
body.island{background:var(--shot) center top/cover no-repeat,var(--sky)}

/* One icon off her sheet.  --x and --y are the cell, --s how big to draw it. */
.ic{--s:32px;width:var(--s);height:var(--s);flex:none;display:inline-block;vertical-align:-.28em;
  background-image:var(--sprite);background-repeat:no-repeat;
  background-size:calc(var(--s) * 8) calc(var(--s) * 6);
  background-position:calc(var(--x) * var(--s) * -1) calc(var(--y) * var(--s) * -1)}
/* One she drew outside the sheet - the gear - is a file of its own. */
/* Its picture is written on the element itself, by icons.js.  It may not come
   through a custom property: a url() inside var() is resolved against the file
   that USES it, so from here it would point at css/img/ and draw nothing. */
.ic.own{background-size:100% 100%;background-position:0 0}
/* Her board pictures are a sheet of their own, four rows deep, and painted for
   daylight like the rest of her own drawings. */
.ic.bd{background-image:url(../img/boards.webp);
  background-size:calc(var(--s) * 8) calc(var(--s) * 4)}
:root[data-theme="dark"] .ic.bd{filter:var(--dim-art)}
/* One of her day drawings kept after dark, turned down the same way her own
   files are: her night sheet draws it worse than her day sheet does. */
:root[data-theme="dark"] .ic.day{background-image:url(../img/sprite-day.webp);
  filter:var(--dim-art)}
/* Her own files are painted for daylight - beside the night sheet they glare.
   Turned down instead of drawn twice: one picture, two lights. */
:root[data-theme="dark"] .ic.own{filter:var(--dim-art)}