/*
 *  flor.css
 *  Flor: the Garden themes (Flor Cozy Kit) on top of Hana Reader's app.css.
 *  Cream paper, deep teal ink, sage, peach, butter, a little blush;
 *  Nunito to read, Pangolin for headwords and titles (fonts/, OFL).
 */
html[data-chrome='garden'], html[data-chrome='garden-night'] {
  --sans: 'Nunito', 'Flor IPA', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Pangolin', 'Flor IPA', 'Nunito', 'Comic Sans MS', cursive;
  --radius: 18px;
}
html[data-chrome='garden'] {
  --ink-0: #fbf3e4; --ink-1: #fffaf0; --ink-2: #f6ecda; --ink-3: #eadcc4; --ink-4: #d9c7a8;
  --fg: #2e4347; --fg-dim: #566a6e; --fg-faint: #5e6e6b;
  --celadon: #a65530; --celadon-deep: #8a4322; --amber: #b8860b; --alert: #c8553d;
  --shadow: 0 18px 40px -18px rgba(90, 60, 30, .35);
  color-scheme: light;
}
html[data-chrome='garden-night'] {
  --ink-0: #2a2233; --ink-1: #322840; --ink-2: #3a2f4a; --ink-3: #4a3d5c; --ink-4: #5e4f72;
  --fg: #f3eadb; --fg-dim: #d2c6d6; --fg-faint: #a898b2;
  --celadon: #f0a074; --celadon-deep: #c97a52; --amber: #e3c46a; --alert: #e0806b;
  color-scheme: dark;
}
html[data-chrome^='garden'] .button.primary { background: #ffb884; border-color: #ffb884; color: #2e4347; font-weight: 800; border-radius: 99px; }
html[data-chrome^='garden'] .button { border-radius: 99px; }
html[data-chrome^='garden'] h1 { font-family: var(--serif); font-weight: 400; }
html[data-chrome^='garden'] .glossary-content summary { color: var(--celadon-deep); }
html[data-chrome='garden-night'] .garden { --g-sage: #7fa28a; --g-peach: #e89a68; --g-butter: #d8c06e; --g-blush: #d98a9b; --g-bed: #3a2f4a; --g-sky: #322840; }

.rail-mark img { width: 30px; height: 30px; display: block; margin: 0 auto; }
.shelf-garden { max-width: 640px; margin: 0 0 22px; }
.shelf-garden:empty { display: none; }

.flor-install {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 500;
  width: min(440px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 18px;
  background: var(--ink-1); border: 1.5px solid var(--ink-3); box-shadow: var(--shadow); color: var(--fg); font-size: 14px;
  display: grid; gap: 6px;
}
.flor-install .bar { height: 10px; border-radius: 99px; background: var(--ink-3); overflow: hidden; }
.flor-install .bar span { display: block; height: 100%; width: 0; background: #a9c4ae; border-radius: 99px; transition: width .2s ease; }
.flor-install .label { color: var(--fg-dim); font-size: 12.5px; }

/* app.css gives these a display of their own, which beat [hidden]. */
.rail-tab[hidden], .head-actions [hidden], label.button[hidden], .button[hidden] { display: none !important; }
/* Phones: the tab bar is at the bottom; the card sits above it. */
@media (max-width: 760px) {
  .flor-install { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}