/* candyblur-ui (working title): what this branch changes against the device
 * (docs/workflow.md) - a look of its own: a soft, colourful wallpaper, tiles
 * and cards of frosted material over it, one set of controls. Web only: the blur behind the materials and
 * the transitions are nothing the panel could draw.
 *
 * Loaded after tokens.css. Tokens that exist there are given other values
 * here; what the device has no word for (wallpaper, materials) is new.
 *
 * Three rules of docs/architecture.md do not hold on this branch:
 *   4  things do move (a sheet rises, a tile changes colour over 0.2 s);
 *   5  text is laid out by the browser from the TTF (--text-render), so it
 *      can be any size, ends in an ellipsis and is smooth; --ground is unused;
 *   8  colours are no longer the firmware's palette. */

:root {
  /* core/text.js: `native` - the browser's own text; anything else - the
   * device's glyph tables */
  --text-render: native;

  --radius: 14px;
  --tile-radius: 22px;
  --control-radius: 12px;
  --sheet-radius: 26px;

  /* Cards: what a page's content stands in, wherever it is not a tile. One
   * radius, one inset for what is in them, one gap between two of them -
   * sideways and upright alike - and two heights: a card that fills the page
   * (down to as far from the foot as the content begins under the header),
   * and one that leaves room for the footer under it. Rows of a list and an
   * open menu are cards in this sense too. */
  --card-radius: 18px;
  --card-pad: 16px;
  --card-gap: 12px;
  --card-col-w: 324px;            /* one of two columns: (CONTENT_W - card-gap) / 2 */
  --card-full-h: 372px;           /* content-top .. SCREEN_H - 22 */
  --card-over-foot-h: 300px;      /* content-top .. foot-y - card-gap */

  /* Where a page's content begins - one line for every page, 22 px under the
   * header (the firmware's CONTENT_TOP and LIST_TOP are 84; the cards of this
   * look began at 86, and now everything does). */
  --content-top: 86px;
  --list-top: 86px;

  /* The one area a page scrolls in (components/scroller.js, pageScroller):
   * from the header's lower edge - so what scrolls away goes under the
   * header, not into a cut across the page - to the foot of the screen and
   * out to its right edge, the bar clear of the content. The content begins
   * `inset` lower, on --content-top, and the page keeps `end` free under its
   * last thing. */
  --page-area-y: 64px;            /* HEADER_H */
  --page-area-w: 701px;           /* SCREEN_W - CONTENT_LEFT */
  --page-area-inset: 22px;        /* content-top - HEADER_H */
  --page-bar-padding: 19px;
  --page-end: 20px;

  /* The menu's side (Einstellungen / Bildschirm; the display's
   * data-menu-side, set by app.js from the stored `menuSide`). Every x in
   * these stylesheets and in every page is written for the column on the
   * left and stays that: with the column on the right the page is not laid
   * out again, it is moved - everything of a page lives in one layer
   * (components/frame.js, .page-layer) and that layer stands --menu-w further
   * left. What belongs to the glass - the wallpaper, a sheet and its shade,
   * a select's open menu, the alarm, the keypad, the off screen - is not in
   * the layer and stays where it was. Nothing is mirrored.
   * (Firmware: Layout::menuX / pageX, AlarmAwareView's pageLayer.)
   *   --menu-x           where the column stands
   *   --page-x           where the page layer stands
   *   --header-bar-grow  the header bar ends a pixel short of the glass; on
   *                      the right that pixel would lie between the bar and
   *                      the column, and an alarm's red would stop a hairline
   *                      before it (HeaderBar::initialize) */
  --menu-x: 0px;
  --page-x: 0px;
  --header-bar-grow: 0px;

  /* The one footer a page may have, where it has something to do that is
   * not a row's business (calibrate, save, start): buttons of one size,
   * from the content's left edge, clear of Back in the right corner. */
  --foot-y: 398px;
  --foot-h: 48px;
  --foot-w: 220px;

  /* how much is left of a control that is not available just now */
  --disabled-opacity: 0.32;

  --blur-material: blur(22px) saturate(1.7);
  --blur-shade: blur(10px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* A finger on something that takes it: it darkens, and nothing else -
   * buttons, tiles, switches, selects, Back. */
  --press: brightness(0.9);
  /* A choice of a few (components/rows.css): a recessed track as tall as any
   * control, the part in force a lifted patch this far inside it. */
  --segment-inset: 3px;
}

[data-menu-side="right"] {
  --menu-x: calc(var(--screen-w) - var(--menu-w));
  --page-x: calc(-1 * var(--menu-w));
  --header-bar-grow: var(--border);
}

:root, [data-theme="light"] {
  --wallpaper: linear-gradient(140deg, #b4cdf0 0%, #d2c5ee 50%, #f5cfbd 100%);
  --color-page: #d2c5ee;

  --color-ink: #1c1c1e;
  --color-muted: #5a5f6e;
  --color-inactive: #9a9fad;
  --color-divider: rgb(60 60 67 / 0.16);
  --color-recess: rgb(118 118 128 / 0.18);
  --color-neutral: rgb(118 118 128 / 0.18);
  --color-on-neutral: #1c1c1e;
  --color-confirm: #34c759;
  --color-battery-full: #34c759;
  --color-battery-mid: #34c759;
  --color-battery-low: #ff9500;
  --color-alarm: #ff3b30;
  --color-alarm-ground: #ff3b30;
  /* An alarm's state, as a colour (the alarm sheet, the header bar): red while
   * the condition stands, yellow once it has ended and nobody has acknowledged
   * it. A fill, what is drawn on it, and a word naming the state on a sheet.
   * White on the red 3.6:1 (the device's own pair), the ink on the yellow
   * 11.3:1 - white would be 1.5; the words on the sheet 5.0 and 5.5:1. */
  --alarm-active: #ff3b30;
  --on-alarm-active: #ffffff;
  --alarm-active-ink: #d70015;
  --alarm-resolved: #ffcc00;
  --on-alarm-resolved: #1c1c1e;
  --alarm-resolved-ink: #8a5a00;
  --color-scrim: #1c1c2e;
  --color-menu-active: var(--color-accent);

  /* the kinds of reading: one colour each, worn by the badge and the graph */
  --color-power-border: #34c759;
  --color-temp-border: #ff9500;
  --color-water-border: #32ade6;
  --color-waste-border: #a2845e;
  --color-tilt-border: #5856d6;
  --color-light-border: #ffcc00;
  --color-lamp-lit: #ffcc00;

  /* materials: what tiles, bars and sheets are made of */
  --material-off: rgb(255 255 255 / 0.36);
  --material-info: rgb(255 255 255 / 0.56);
  --material-on: #ffffff;
  --material-bar: rgb(255 255 255 / 0.3);
  --material-sheet: rgb(246 246 250 / 0.84);
  --material-menu: rgb(250 250 252 / 0.9);
  --shadow-on: 0 6px 16px rgb(60 50 110 / 0.16);
  --shadow-sheet: 0 24px 60px rgb(30 25 70 / 0.3);
  --shade: rgb(40 36 70 / 0.22);

  /* what is written on a tile that is off, and on one that is on */
  --tile-ink-off: #454a59;
  --tile-muted-off: #6d7282;
  --tile-ink-on: #1c1c1e;
  --tile-muted-on: #6d6d72;
  --badge-off: rgb(118 118 128 / 0.2);
  --segment-on: #ffffff;
}

[data-theme="dark"] {
  --wallpaper: linear-gradient(140deg, #16264a 0%, #2a2152 50%, #4a2a40 100%);
  --color-page: #2a2152;

  --color-ink: #ffffff;
  --color-muted: #b9bccb;
  --color-inactive: #7d8192;
  --color-divider: rgb(235 235 245 / 0.16);
  --color-recess: rgb(118 118 128 / 0.32);
  --color-neutral: rgb(118 118 128 / 0.32);
  --color-on-neutral: #ffffff;
  --color-confirm: #30d158;
  --color-battery-full: #30d158;
  --color-battery-mid: #30d158;
  --color-battery-low: #ff9f0a;
  --color-alarm: #ff453a;
  --color-alarm-ground: #ff453a;
  /* the state's colours (above): white on the red 3.4:1, the ink on the yellow
   * 12.1:1, the words on the sheet 4.9 and 9.8:1 */
  --alarm-active: #ff453a;
  --on-alarm-active: #ffffff;
  --alarm-active-ink: #ff6961;
  --alarm-resolved: #ffd60a;
  --on-alarm-resolved: #1c1c1e;
  --alarm-resolved-ink: #ffd60a;
  --color-scrim: #000000;
  --color-menu-active: var(--color-accent);

  --color-power-border: #30d158;
  --color-temp-border: #ff9f0a;
  --color-water-border: #64d2ff;
  --color-waste-border: #ac8e68;
  --color-tilt-border: #7d7aff;
  --color-light-border: #ffd60a;
  --color-lamp-lit: #ffd60a;

  --material-off: rgb(18 18 28 / 0.42);
  --material-info: rgb(18 18 28 / 0.42);
  /* on, in the dark: the same glass, lit - not a white card */
  --material-on: rgb(255 255 255 / 0.24);
  --material-bar: rgb(10 10 20 / 0.3);
  --material-sheet: rgb(44 44 52 / 0.82);
  --material-menu: rgb(58 58 66 / 0.92);
  --shadow-on: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 6px 18px rgb(0 0 0 / 0.2);
  --shadow-sheet: 0 24px 60px rgb(0 0 0 / 0.5);
  --shade: rgb(0 0 0 / 0.36);

  --tile-ink-off: rgb(255 255 255 / 0.78);
  --tile-muted-off: rgb(255 255 255 / 0.5);
  --tile-ink-on: #ffffff;
  --tile-muted-on: rgb(255 255 255 / 0.72);
  --badge-off: rgb(255 255 255 / 0.14);
  --segment-on: rgb(255 255 255 / 0.3);
}

/* Six more accents than the firmware has (Palette::accents ends at 5:
 * teal, blue, violet, magenta, amber, graphite). The swatch of each is
 * --color-accent-N, as tokens.css has it for the first six. */
/* accent 6: red */
[data-theme="light"][data-accent="6"] { --color-accent: #E5484D; --color-on-accent: #FFFFFF; }
[data-theme="dark"][data-accent="6"] { --color-accent: #FF6369; --color-on-accent: #FFFFFF; }
/* accent 7: orange */
[data-theme="light"][data-accent="7"] { --color-accent: #F2670F; --color-on-accent: #FFFFFF; }
[data-theme="dark"][data-accent="7"] { --color-accent: #FF8B3E; --color-on-accent: #14181D; }
/* accent 8: green */
[data-theme="light"][data-accent="8"] { --color-accent: #2E9E5B; --color-on-accent: #FFFFFF; }
[data-theme="dark"][data-accent="8"] { --color-accent: #3DD68C; --color-on-accent: #14181D; }
/* accent 9: mint */
[data-theme="light"][data-accent="9"] { --color-accent: #12A594; --color-on-accent: #FFFFFF; }
[data-theme="dark"][data-accent="9"] { --color-accent: #0BD8B6; --color-on-accent: #14181D; }
/* accent 10: indigo */
[data-theme="light"][data-accent="10"] { --color-accent: #4F5BD5; --color-on-accent: #FFFFFF; }
[data-theme="dark"][data-accent="10"] { --color-accent: #8D95FF; --color-on-accent: #FFFFFF; }
/* accent 11: rose */
[data-theme="light"][data-accent="11"] { --color-accent: #E93D82; --color-on-accent: #FFFFFF; }
[data-theme="dark"][data-accent="11"] { --color-accent: #FF78A9; --color-on-accent: #14181D; }

[data-theme="light"] { --color-accent-6: #E5484D; }
[data-theme="dark"] { --color-accent-6: #FF6369; }
[data-theme="light"] { --color-accent-7: #F2670F; }
[data-theme="dark"] { --color-accent-7: #FF8B3E; }
[data-theme="light"] { --color-accent-8: #2E9E5B; }
[data-theme="dark"] { --color-accent-8: #3DD68C; }
[data-theme="light"] { --color-accent-9: #12A594; }
[data-theme="dark"] { --color-accent-9: #0BD8B6; }
[data-theme="light"] { --color-accent-10: #4F5BD5; }
[data-theme="dark"] { --color-accent-10: #8D95FF; }
[data-theme="light"] { --color-accent-11: #E93D82; }
[data-theme="dark"] { --color-accent-11: #FF78A9; }

/* ------------------------------------------------------------ nothing yet */

/* A value that is not known - a clock never set, a reading without a device.
 * The firmware writes dashes ("--", "--:--", "--.--."); here a quiet bar with
 * round ends stands in their place, breathing a little, as wide as a short
 * value of that size. The words stay what they were (core/text.js marks them
 * [data-empty]); a button's "-" is a caption and stays one. */
acu-text[data-empty]:not(.button-caption) > span {
  display: inline-block;
  min-width: min(2.4em, 100%);      /* core/text.js, NOTHING_EM: what a layout leaves for it */
  max-width: 100%;
  height: 0.7em;
  line-height: 0.7em;
  vertical-align: middle;
  border-radius: 0.35em;
  background-color: var(--color-recess);
  color: transparent;
  animation: nothing-yet 1.4s ease-in-out infinite alternate;
}

@keyframes nothing-yet {
  from { opacity: 1; }
  to   { opacity: 0.5; }
}