/*
 * You Can Do It: Charge Up's look (/styles.css, loaded first), plus what only this app has: the day's score ring,
 * the level, each person's colour, the badges and five tabs. Settings › Appearance picks the style on each phone:
 * Japandi (Charge Up's earth colours) or Black and white (Dog Care's look, data-style="mono" on <html>).
 */

/* Black and white: Dog Care's colours under Charge Up's names. The only colour left is red, for a warning. */
:root[data-style="mono"] {
  --paper: #ffffff;
  --sand: #f3f3f2;
  --sand-deep: #e2e2e0;
  --ink: #111111;
  --ink-soft: #6b6b6b;
  --line: #e6e6e6;
  --line-strong: #cccccc;
  --olive: #111111;
  --olive-soft: #ececeb;
  --ochre: #111111;
  --ochre-soft: #ececeb;
  --clay: #6b6b6b;
  --clay-soft: #f0f0ef;
  --terra: #d92d20;
  --terra-soft: #fdecea;
  --stone: #9a9a9a;
  --card: #ffffff;
  --knob: #ffffff;
  --hero: #111111;
  --hero-ink: #ffffff;
  --hero-soft: #b5b5b5;
  --hero-hot: #ffffff;
  --hero-line: rgba(255, 255, 255, .18);
  --warn-ink: #111111;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E");
  color-scheme: light;
}
:root[data-style="mono"][data-theme="dark"] {
  --paper: #111111;
  --sand: #1e1e1e;
  --sand-deep: #303030;
  --ink: #f2f2f2;
  --ink-soft: #a3a3a3;
  --line: #2a2a2a;
  --line-strong: #4a4a4a;
  --olive: #f2f2f2;
  --olive-soft: #2a2a2a;
  --ochre: #f2f2f2;
  --ochre-soft: #2a2a2a;
  --clay: #a3a3a3;
  --clay-soft: #262626;
  --terra: #ff6b5e;
  --terra-soft: #3d1915;
  --stone: #777777;
  --card: #181818;
  --knob: #f2f2f2;
  --hero: #1e1e1e;
  --hero-ink: #f2f2f2;
  --hero-soft: #a3a3a3;
  --hero-hot: #f2f2f2;
  --hero-line: rgba(242, 242, 242, .14);
  --warn-ink: #f2f2f2;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2f2f2' stroke-width='1.6'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="mono"]:not([data-theme="light"]) {
    --paper: #111111;
    --sand: #1e1e1e;
    --sand-deep: #303030;
    --ink: #f2f2f2;
    --ink-soft: #a3a3a3;
    --line: #2a2a2a;
    --line-strong: #4a4a4a;
    --olive: #f2f2f2;
    --olive-soft: #2a2a2a;
    --ochre: #f2f2f2;
    --ochre-soft: #2a2a2a;
    --clay: #a3a3a3;
    --clay-soft: #262626;
    --terra: #ff6b5e;
    --terra-soft: #3d1915;
    --stone: #777777;
    --card: #181818;
    --knob: #f2f2f2;
    --hero: #1e1e1e;
    --hero-ink: #f2f2f2;
    --hero-soft: #a3a3a3;
    --hero-hot: #f2f2f2;
    --hero-line: rgba(242, 242, 242, .14);
    --warn-ink: #f2f2f2;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2f2f2' stroke-width='1.6'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
/* In black and white: the tall bar of the mark stays white, the scrim goes neutral, and days that aren't
   full show grey so full days and today stand out. People keep their own colours. */
:root[data-style="mono"] .ot-mark .c { fill: var(--paper); }
:root[data-style="mono"] .overlay { background: rgba(0, 0, 0, .45); }
:root[data-style="mono"] .bar i { background: var(--stone); }
:root[data-style="mono"] .bar i.full, :root[data-style="mono"] .bar.sel i { background: var(--ink); }
:root[data-style="mono"] .c-ochre { background: #b98330; }
:root[data-style="mono"] .c-olive { background: #5f6f3e; }
:root[data-style="mono"] .c-clay { background: #8b6f57; }
:root[data-style="mono"] .c-terra { background: #b0502e; }
:root[data-style="mono"] .c-stone { background: #8a8378; }
:root[data-style="mono"] .ot-avatar { color: #ffffff; }

.ot > .kid-head, .ot > .charge, .ot > .next, .ot > .period, .ot > .week, .ot > .rewards, .ot > .ot-cheers { margin-bottom: 14px; }
.ot > .kid-head { align-items: center; }
.ot-tabs { grid-template-columns: repeat(5, 1fr); }
.ot-tabs button { font-size: 11px; }

/* The mark: three rising bars. */
.ot-mark .b { fill: var(--ink); }
.ot-mark .s { fill: var(--paper); opacity: .55; }
.ot-mark .c { fill: var(--ochre); }

/* Today */
.ot-boost { color: var(--hero-hot); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 14px; }
.ot-hero-top { display: flex; align-items: center; gap: 18px; }
.ot-ring { width: 112px; height: 112px; flex: none; }
.ot-ring circle { fill: none; stroke-width: 12; }
.ot-ring .track { stroke: var(--hero-line); }
.ot-ring .done { stroke: var(--hero-hot); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.ot-ring text { fill: var(--hero-ink); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; text-anchor: middle; dominant-baseline: central; }
.ot-hero-big { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin-top: 2px; }
.ot-hero-sub { color: var(--hero-soft); font-weight: 600; font-size: 15px; }
.ot-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ot-hero .ic.sm { color: var(--hero-hot); width: 22px; height: 22px; margin-left: -3px; }
.ot-tip { font-size: 14px; margin-top: -4px; }

.ot-lvl {
  display: grid; justify-items: end; gap: 0; min-width: 128px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 16px; background: var(--card); text-align: right;
}
.ot-lvl b { font-size: 16px; letter-spacing: -0.02em; }
.ot-lvl small { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.ot-lvl-bar { width: 100%; height: 6px; margin: 6px 0 0; }

.ot-cheers { background: var(--olive-soft); border-radius: 18px; padding: 10px 16px; display: grid; gap: 4px; }
.ot-cheers p { display: flex; align-items: center; gap: 8px; }
.ot-cheers .ic.sm { color: var(--olive); }
.ot-cheers small { color: var(--ink-soft); font-weight: 600; }

/* A full day, a level or a badge */
.ot-celebrate { text-align: center; }
.ot-cele-item { display: grid; justify-items: center; gap: 6px; margin-bottom: 14px; }
.ot-cele-item h2 { margin: 4px 0 0; }
.ot-celebrate .ic.big { background: var(--ochre-soft); color: var(--ochre); }

/* People: a first letter in their colour */
.ot-avatar {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  font-weight: 700; font-size: 16px; color: var(--paper); background: var(--ochre);
}
.c-ochre { background: var(--ochre); }
.c-olive { background: var(--olive); }
.c-clay { background: var(--clay); }
.c-terra { background: var(--terra); }
.c-stone { background: var(--stone); }
.c-kid { background: var(--ink); }
.ot-who { justify-content: flex-start; gap: 12px; padding-left: 10px; }

/* Scores */
.ot-row-bar { display: block; height: 8px; margin: 6px 0 4px; }
.ot-place { display: inline-grid; place-items: center; width: 36px; height: 36px; font-weight: 700; color: var(--ink-soft); flex: none; }
.ot-rank .row-icon { color: var(--ochre); }
.ot-pts { font-size: 20px; letter-spacing: -0.02em; }
.ot-h-sub { font-size: 15px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.bar.ot-future { opacity: .4; }
.bar i.full { background: var(--olive); }
.bar.sel i.full { background: var(--ink); }

.ot-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ot-medal { display: grid; gap: 2px; align-content: start; padding: 12px; border-radius: 16px; background: var(--card); opacity: .55; }
.ot-medal b { font-size: 15px; margin-top: 6px; }
.ot-medal small { font-size: 13px; color: var(--ink-soft); line-height: 1.3; }
.ot-medal .ic { background: var(--sand); color: var(--ink-soft); }
.ot-medal.got { opacity: 1; }
.ot-medal.got .ic { background: var(--ochre-soft); color: var(--ochre); }

/* Signing in, and adding someone in Settings */
.ot-pin-who { display: flex; align-items: center; gap: 10px; }
.ot-add { display: flex; gap: 8px; margin-top: 10px; }
.ot-add .input { min-height: 44px; min-width: 0; }
.ot-add-person { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ot-add-person h3 { font-size: 16px; }
.ot-add-person .err { margin: 4px 0; min-height: 0; }