/* Green Point dashboard. The idea: the "point" of Green Point becomes the unit of the page, every chat is a point.
   Brand from greenpointschool.com: deep green ink, mint fields in tone steps (no outlines, no shadows), e-Ukraine.
   Chart colours validated with the dataviz validator: light #1f8a5b/#df8a26 on #e2f2e9, dark #1a7f52/#c48214 on #14251d. */

/* shortcut: fonts come from the school site's CDN (CORS *); self-host them if the site ever moves. */
@font-face { font-family: "e-Ukraine"; font-weight: 400; font-display: swap;
  src: url("https://cdn.prod.website-files.com/6926f653532876144d2e25fb/6927377f68048e731ab802db_e-Ukraine-Regular.otf") format("opentype"); }
@font-face { font-family: "e-Ukraine"; font-weight: 500; font-display: swap;
  src: url("https://cdn.prod.website-files.com/6926f653532876144d2e25fb/6927377f1ff9fccc50d4445e_e-Ukraine-Medium.otf") format("opentype"); }
@font-face { font-family: "e-Ukraine Head"; font-weight: 500; font-display: swap;
  src: url("https://cdn.prod.website-files.com/6926f653532876144d2e25fb/6927377fbf2a4cd5e47d245e_e-UkraineHead-Medium.otf") format("opentype"); }
@font-face { font-family: "e-Ukraine Head"; font-weight: 700; font-display: swap;
  src: url("https://cdn.prod.website-files.com/6926f653532876144d2e25fb/6927377fc51a26559976a63b_e-UkraineHead-Bold.otf") format("opentype"); }

:root {
  color-scheme: light;
  --ground: #eef8f2;
  --field: #e2f2e9;
  --field-2: #d1e8dc;
  --raised: #f8fcfa;
  --ink: #143428;
  --ink-2: #3e6052;
  --brand: #235c46;
  --on-brand: #f3fbf7;
  --series: #1f8a5b;
  --signal: #df8a26;
  --signal-ink: #8c4d08;
  --others: #b8d7c7;
  --grid: rgba(20, 52, 40, 0.09);
  --baseline: rgba(20, 52, 40, 0.24);
  --overlay: rgba(9, 26, 19, 0.36);

  --sans: "e-Ukraine", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "e-Ukraine Head", "e-Ukraine", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hero: clamp(116px, 34vw, 184px);
  --t-fig: 44px;
  --t-head: 24px;
  --t-body: 16px;
  --t-small: 13px;

  --r-panel: 30px;
  --r-tile: 18px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-bar: 2;
  --z-sheet: 10;
  --z-tip: 20;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0c1712; --field: #14251d; --field-2: #1c3228; --raised: #11201a;
    --ink: #e3f2e9; --ink-2: #a5c2b4; --brand: #86d3aa; --on-brand: #0c1712;
    --series: #1a7f52; --signal: #c48214; --signal-ink: #f0b866; --others: #2c4a3c;
    --grid: rgba(227, 242, 233, 0.08); --baseline: rgba(227, 242, 233, 0.22); --overlay: rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0c1712; --field: #14251d; --field-2: #1c3228; --raised: #11201a;
  --ink: #e3f2e9; --ink-2: #a5c2b4; --brand: #86d3aa; --on-brand: #0c1712;
  --series: #1a7f52; --signal: #c48214; --signal-ink: #f0b866; --others: #2c4a3c;
  --grid: rgba(227, 242, 233, 0.08); --baseline: rgba(227, 242, 233, 0.22); --overlay: rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--t-body)/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button {
  font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:is(button, input, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
svg { display: block; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app {
  max-width: 820px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 20px calc(48px + env(safe-area-inset-bottom));
}

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); }
.brand-mark { width: 28px; height: 28px; }
.brand-word { font: 700 16px/1 var(--head); letter-spacing: 0.03em; text-transform: uppercase; }
.top-date { color: var(--ink-2); font-size: var(--t-small); }

/* ---------- hero: the one number ---------- */
.hero { padding: 36px 0 8px; display: grid; gap: 14px; }
.hero-num {
  font: 700 var(--t-hero)/0.8 var(--head); letter-spacing: -0.055em; color: var(--brand);
  margin-left: -0.04em;
}
.hero h1 { font: 500 var(--t-head)/1.18 var(--head); letter-spacing: -0.015em; max-width: 15em; text-wrap: balance; }
.hero p { max-width: 34em; text-wrap: pretty; }
.hero p q { font-weight: 500; quotes: "«" "»"; }

.pill {
  display: inline-flex; align-items: center; gap: 14px; justify-self: start; margin-top: 6px;
  height: 52px; padding: 0 6px 0 22px; border-radius: 999px; background: var(--brand); color: var(--on-brand);
  font-weight: 500; transition: transform 0.35s var(--ease);
}
.pill-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--on-brand) 16%, transparent);
  transition: transform 0.45s var(--ease);
}
.pill-icon svg { width: 18px; height: 18px; }
.pill:hover .pill-icon { transform: translate(3px, -1px) scale(1.05); }
.pill:active { transform: scale(0.97); }

/* ---------- sections ---------- */
.section { margin-top: 64px; }
.section-head { display: grid; gap: 8px; margin-bottom: 22px; }
.section-head h2 { font: 500 var(--t-head)/1.18 var(--head); letter-spacing: -0.015em; text-wrap: balance; }
.section-head p { max-width: 36em; text-wrap: pretty; }
.panel { background: var(--field); border-radius: var(--r-panel); padding: 26px 22px; }
.panel .section-head { margin-bottom: 18px; }

/* Double bezel in tone steps: a darker tray holding a lighter plate. */
.tray { background: var(--field-2); border-radius: calc(var(--r-panel) + 6px); padding: 6px; }
.tray > .plate { background: var(--field); border-radius: var(--r-panel); padding: 24px 22px 22px; }

/* ---------- the field of points ---------- */
.points { --pt: 22px; display: flex; flex-wrap: wrap; gap: calc(var(--pt) * 0.32); margin: 4px 0 22px; }
.pt {
  position: relative; width: var(--pt); height: var(--pt); border-radius: 50%; flex: none;
  background: var(--series); transition: transform 0.3s var(--ease);
}
.pt.signal { background: var(--signal); }
.pt.snoozed { background: transparent; box-shadow: inset 0 0 0 2px var(--series); } /* taste-skill-ignore: a ring is the point's shape, not a shadow */
.pt.off { background: var(--field-2); }
.points .pt:hover { transform: scale(1.18); }
.key { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.key li { display: flex; align-items: center; gap: 9px; font-size: var(--t-small); color: var(--ink-2); }
.key b { color: var(--ink); font-weight: 500; font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.key .pt { --pt: 12px; }

/* ---------- two figures ---------- */
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.figure-num { font: 700 var(--t-fig)/1 var(--head); letter-spacing: -0.035em; }
.figure p { margin-top: 10px; text-wrap: pretty; }
.trend { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: var(--t-small); color: var(--ink-2); }
.trend svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.trend.down { color: var(--signal-ink); }

/* ---------- charts (real interface, data-ui) ---------- */
.chart { position: relative; }
.chart svg { width: 100%; overflow: visible; }
.chart text { font: 400 var(--t-small) var(--sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart .cap { font-weight: 500; fill: var(--ink); }
.chart .hit { fill: transparent; }
.chart .col { cursor: pointer; outline: none; }
.chart .col:hover .bar, .chart .col:focus-visible .bar { opacity: 0.8; }
.chart .col:focus-visible .hit { fill: var(--grid); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font-weight: 400; font-size: var(--t-small); color: var(--ink-2); text-align: right; padding: 0 0 10px 12px; }
td { padding: 12px 0 12px 12px; text-align: right; border-top: 1px solid var(--grid); } /* taste-skill-ignore: real table rows */
th:first-child, td:first-child { text-align: left; padding-left: 0; }
td:first-child { font-weight: 500; }

/* ---------- teachers ---------- */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.rank li { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; }
.rank .name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .count { font: 700 26px/1 var(--head); letter-spacing: -0.02em; grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; }
.rank .meta { font-size: var(--t-small); color: var(--ink-2); }
.rank .track { grid-column: 1 / -1; height: 8px; margin-top: 6px; }
.rank .fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--signal); transform-origin: left; }
.empty { color: var(--ink-2); }
.warn-num { display: inline-flex; align-items: center; gap: 8px; }
.warn-num .pt { --pt: 9px; }

/* ---------- controls ---------- */
.text-btn {
  min-height: 44px; padding: 0 4px; color: var(--ink-2); font-size: 15px;
  text-decoration: underline; text-decoration-color: var(--baseline); text-underline-offset: 4px;
  transition: color 0.2s var(--ease);
}
.text-btn:hover { color: var(--ink); }
.view-toggle { margin-top: 6px; font-size: var(--t-small); }

/* ---------- chat list ---------- */
.tools { position: sticky; top: 0; z-index: var(--z-bar); background: var(--ground); margin: 0 -20px; padding: 10px 20px 12px; }
.search { position: relative; display: block; }
.search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.search input {
  width: 100%; height: 50px; padding: 0 16px 0 46px; border: 0; border-radius: 16px;
  background: var(--field); color: var(--ink); font: inherit; outline: none;
  transition: background 0.2s var(--ease);
}
.search input::placeholder { color: var(--ink-2); }
.search input:focus { background: var(--field-2); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.filter {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--field); color: var(--ink); font-size: 15px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.filter b { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color 0.25s var(--ease); }
.filter:active { transform: scale(0.96); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.filter[aria-pressed="true"] b { color: inherit; opacity: 0.7; }

.chats { list-style: none; margin: 8px 0 0; padding: 6px; display: grid; gap: 4px; background: var(--field-2); border-radius: calc(var(--r-tile) + 6px); }
.chat {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; width: 100%;
  min-height: 68px; padding: 12px 16px; border-radius: 8px; background: var(--raised); text-align: left;
  scroll-margin-top: 150px; transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.chats li:first-child .chat { border-radius: var(--r-tile) var(--r-tile) 8px 8px; }
.chats li:last-child .chat { border-radius: 8px 8px var(--r-tile) var(--r-tile); }
.chats li:only-child .chat { border-radius: var(--r-tile); }
.chat:hover { background: var(--field); }
.chat:active { transform: scale(0.99); }
.chat .pt { --pt: 12px; grid-row: span 2; }
.chat-title { font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.chat-sub { grid-column: 2; font-size: var(--t-small); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-val { grid-column: 3; grid-row: 1 / span 2; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-val.signal { color: var(--signal-ink); font-weight: 500; }
.more { display: block; margin: 12px auto 0; }
.state { color: var(--ink-2); padding: 32px 4px; text-wrap: pretty; }
.foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 44px; color: var(--ink-2); font-size: var(--t-small); }
.foot .text-btn { font-size: var(--t-small); }

/* ---------- first load keeps the page's shape ---------- */
.ghost { background: var(--field); border-radius: 14px; }
.ghost-num { width: 46%; height: 116px; margin-top: 36px; border-radius: 24px; }
.ghost-line { height: 22px; margin-top: 16px; width: 80%; }
.ghost-line.short { width: 52%; }
.ghost-panel { height: 260px; margin-top: 56px; border-radius: var(--r-panel); }

/* ---------- chat sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet-scrim { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity 0.4s var(--ease); }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  max-width: 820px; margin: 0 auto; background: var(--ground); border-radius: 30px 30px 0 0;
  padding: 10px 20px calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.55s var(--ease);
}
.sheet.open .sheet-scrim { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-grip { width: 40px; height: 5px; border-radius: 5px; background: var(--field-2); margin: 0 auto 8px; }
.sheet-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--field); color: var(--ink);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.sheet-close svg { width: 18px; height: 18px; }
.sheet-close:hover { background: var(--field-2); }
.sheet-close:active { transform: scale(0.94); }
.sheet h2 { font: 500 26px/1.15 var(--head); letter-spacing: -0.02em; margin: 26px 52px 12px 0; overflow-wrap: anywhere; text-wrap: balance; }
.sheet-status { display: flex; align-items: center; gap: 10px; }
.sheet-status .pt { --pt: 12px; }
.facts { list-style: none; margin: 22px 0 14px; padding: 6px; display: grid; gap: 4px; background: var(--field-2); border-radius: calc(var(--r-tile) + 6px); }
.facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 16px; background: var(--raised); border-radius: 8px; }
.facts li:first-child { border-radius: var(--r-tile) var(--r-tile) 8px 8px; }
.facts li:last-child { border-radius: 8px 8px var(--r-tile) var(--r-tile); }
.facts span { color: var(--ink-2); flex: none; }
.facts b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.sheet .panel { margin-top: 14px; }
.sheet .panel h3 { font: 500 18px/1.25 var(--head); }
.sheet .panel p { color: var(--ink-2); margin-top: 6px; font-size: var(--t-small); }
.sheet .pill { margin-top: 22px; }

.tooltip {
  position: fixed; z-index: var(--z-tip); pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
  max-width: min(280px, 80vw); background: var(--ink); color: var(--ground); border-radius: 14px; padding: 9px 13px;
  font-size: var(--t-small); line-height: 1.4;
}
.tooltip strong { display: block; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tooltip span { opacity: 0.8; }

/* ---------- motion: only with script (html.motion), never under reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion [data-rise] {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 80ms);
  }
  .motion .in [data-rise], .motion [data-rise].in { opacity: 1; transform: none; }
  .motion .points .pt { animation: pop 0.6s var(--ease-out) both; animation-delay: var(--pd, 0ms); animation-play-state: paused; }
  .motion .in .points .pt { animation-play-state: running; }
  .motion .points .pt.signal::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--signal);
    animation: breathe 2.8s var(--ease) infinite; animation-delay: var(--bd, 0ms);
  }
  .motion section:not(.in) .bar { transform: scaleY(0); }
  .motion .bar { transform-box: fill-box; transform-origin: bottom; transition: transform 0.9s var(--ease-out); transition-delay: calc(200ms + var(--i, 0) * 45ms); }
  .motion section:not(.in) .fill { transform: scaleX(0); }
  .motion .fill { transition: transform 1s var(--ease-out); transition-delay: calc(250ms + var(--i, 0) * 70ms); }
  .ghost { animation: wait 1.4s var(--ease) infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheet-panel, .sheet-scrim { transition: none; }
}
@keyframes pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes breathe { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.1); } }
@keyframes wait { to { opacity: 0.45; } }

/* ---------- wider screens (Telegram Desktop, tablets) ---------- */
@media (min-width: 720px) {
  .app { padding-left: 32px; padding-right: 32px; }
  .tools { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
  .hero { grid-template-columns: auto 1fr; column-gap: 40px; align-items: end; padding-top: 56px; }
  .hero-num { grid-row: span 3; }
  .hero h1 { font-size: 30px; }
  .section { margin-top: 88px; }
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 88px; }
  .duo > .section { margin-top: 0; }
  .panel, .tray > .plate { padding: 30px 30px 26px; }
}