/* Easy Analytics' app (R88): easyanalytics.co's type and colours, and the dark
   icon rail picked in R79 (option 11), which opens with Menu. */
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #0b0b0f;
  --muted: #33333d;
  --quiet: #4a4a55;
  --line: #e1e1e8;
  --soft: #f6f6f9;
  --accent: #2346e8;
  --accent-dark: #1a33b0;
  --accent-soft: #e9ecfb;
  --bot: #8a3a06;
  --bot-soft: #fff1e3;
  --rail: #14161b;
  --rail-ink: #d7d9de;
  --rail-quiet: #9196a0;
  --rail-on: #2a2e37;
  --head: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--soft); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.55; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
h1, h2 { font-family: var(--head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.15rem; }
p { margin: 0; }
code { font-size: 0.85em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The shell: the rail and the page. */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1 1 auto; min-width: 0; padding: 1.75rem 2rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; max-width: 72rem; }
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

.rail { flex: none; width: 4.75rem; background: var(--rail); color: var(--rail-ink); padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.25rem; transition: width 0.2s ease; }
.rail-top { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.brand { font-family: var(--head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: #fff; text-decoration: none; white-space: nowrap; }
.brand b { color: #8ea2ff; }
.brand:hover { color: #fff; }
.brand-full { display: none; }
.rail-menu { position: relative; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: transparent; color: var(--rail-ink); border: 1px solid #343843; border-radius: 0.45rem; cursor: pointer; }
.rail-items { display: flex; flex-direction: column; gap: 1rem; }
.rail-group { position: relative; display: flex; flex-direction: column; gap: 0.2rem; border-top: 1px solid var(--rail-on); padding-top: 1rem; }
.rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 2.75rem; padding: 0.55rem 0.6rem; border-radius: 0.45rem; color: #c8cbd2; text-decoration: none; }
.rail-item:hover { background: #1f2229; color: #fff; }
.rail-item[aria-current='page'] { background: var(--rail-on); color: #fff; font-weight: 600; }
.rail-item svg { flex: none; }
.rail-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail-account { margin-top: auto; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.avatar { width: 2.2rem; height: 2.2rem; border-radius: 999px; background: #fff; color: var(--rail); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rail-account .link { display: none; font: inherit; font-size: 0.8rem; background: none; border: 0; color: var(--rail-quiet); cursor: pointer; padding: 0.25rem; }
.rail-open .rail-account .link { display: inline; }
.rail-account .link:hover { color: #fff; }

.rail-open .rail { width: 15rem; }
.rail-open .rail-top { flex-direction: row; justify-content: space-between; }
.rail-open .brand { padding-left: 0.5rem; }
.rail-open .brand-full { display: inline; }
.rail-open .brand-short { display: none; }
.rail-open .rail-group { border-top: 0; padding-top: 0; }
.rail-open .rail-label { position: static; width: auto; height: auto; clip: auto; margin: 0 0 0.3rem 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rail-quiet); }
.rail-open .rail-item { justify-content: flex-start; }
.rail-open .rail-text { position: static; width: auto; height: auto; clip: auto; overflow: hidden; text-overflow: ellipsis; }
.rail-open .rail-account { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 0.5rem; }

/* Cards, buttons, forms. */
.card { background: #fff; border: 1px solid var(--line); border-radius: 0.9rem; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.narrow { max-width: 30rem; }
.lead { font-size: 1.05rem; color: var(--muted); }
.muted { color: var(--quiet); font-size: 0.92rem; }
.fine { font-size: 0.85rem; color: var(--quiet); }
.notice { background: var(--accent-soft); border-radius: 0.5rem; padding: 0.7rem 0.9rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 600; text-decoration: none; color: #fff; background: var(--ink); border: 0; border-radius: 0.45rem; padding: 0.7rem 1.1rem; min-height: 2.75rem; cursor: pointer; }
.btn:hover { color: #fff; background: #23232b; }
.btn-cloud { background: var(--accent); align-self: flex-start; }
.btn-cloud:hover { background: var(--accent-dark); }
.btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid #c9c9d2; }
.btn-ghost:hover { background: var(--soft); color: var(--ink); }
.connect { display: flex; flex-direction: column; gap: 0.6rem; max-width: 34rem; }
.connect label { font-weight: 600; }
.connect input { font: inherit; padding: 0.7rem 0.9rem; border: 2px solid var(--ink); border-radius: 0.45rem; }

/* Sites. */
.site-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.9rem 1.1rem; color: var(--ink); text-decoration: none; }
.site-card:hover { border-color: #c9c9d2; color: var(--ink); }
.site-name { font-weight: 700; margin-right: auto; }
.pill { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; }
.pill-on { background: var(--accent-soft); color: var(--accent-dark); }
.pill-off { background: #ececf1; color: var(--quiet); }
.today { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.kpi-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.kpi { font-family: var(--head); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.kpi-people { color: var(--accent); }
.kpi-bots { color: var(--bot); }

/* The first look: one bar per day. Widths come from classes (no inline styles). */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.bars li { display: grid; grid-template-columns: 3.2rem 1fr 4.5rem; align-items: center; gap: 0.6rem; }
.bar-day { color: var(--quiet); font-variant-numeric: tabular-nums; }
.bar { display: block; height: 0.6rem; background: var(--soft); border-radius: 0.2rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: #c9c9d2; border-radius: 0.2rem; }
.bar-n { text-align: right; font-variant-numeric: tabular-nums; }
.w0 { width: 0; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; }
.w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; }
.w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }

/* What Easy Analytics did in the customer's account. */
.scroll { overflow-x: auto; max-height: 24rem; }
.activity { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.activity th { text-align: left; font-weight: 600; color: var(--quiet); border-bottom: 1px solid var(--line); padding: 0.4rem 0.5rem; position: sticky; top: 0; background: #fff; }
.activity td { border-bottom: 1px solid #f0f0f4; padding: 0.4rem 0.5rem; vertical-align: top; }

/* Pages without the rail (signing in). */
.plain { max-width: 34rem; margin: 0 auto; padding: 3rem 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.brand-plain { color: var(--ink); }
.brand-plain:hover { color: var(--ink); }
.brand-plain b { color: var(--accent); }

/* Phones: the rail becomes a bar along the top; Menu opens the pages over the page. */
@media (max-width: 700px) {
  .shell { flex-direction: column; }
  .rail { width: auto; padding: 0.75rem 1rem; gap: 0.75rem; }
  .rail-top { flex-direction: row; justify-content: space-between; }
  .brand-full { display: inline; }
  .brand-short { display: none; }
  .rail-items, .rail-account { display: none; }
  .rail-open .rail { width: auto; }
  .rail-open .rail-items, .rail-open .rail-account { display: flex; }
  .main { padding: 1.25rem 1rem 2.5rem; }
  h1 { font-size: 1.6rem; }
}

/* Strict mode's code to copy. */
.code { width: 100%; font: 0.78rem/1.45 ui-monospace, 'SF Mono', Menlo, monospace; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--soft); color: var(--ink); resize: vertical; }

/* The dashboard (milestone 3): tabs over one line chart, and lists with a bar behind each row (R78, R82). */
.periods { display: flex; flex-wrap: wrap; gap: 0.25rem; background: #fff; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.25rem; }
.periods a { font-size: 0.9rem; color: var(--muted); text-decoration: none; border-radius: 0.35rem; padding: 0.45rem 0.75rem; min-height: 2.5rem; display: inline-flex; align-items: center; }
.periods a[aria-current] { background: var(--rail); color: #fff; font-weight: 600; }
.site-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.site-pick a { font-size: 0.9rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; }
.site-pick a[aria-current] { border-color: var(--ink); font-weight: 600; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 0.9rem; overflow: hidden; }
.panel-bots { border-color: #f3d9bf; }
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs-bots { border-bottom-color: #f3d9bf; }
.tab { flex: 1 1 11rem; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.9rem 1.25rem; min-height: 5.5rem; background: #fafafc; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
.tabs-bots .tab { background: #fffbf7; }
.tab:hover { color: var(--ink); background: #fff; }
.tab[aria-current] { background: #fff; border-bottom-color: var(--accent); }
.tabs-bots .tab[aria-current] { border-bottom-color: #d9741f; }
.tab-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.tabs-bots .tab-label { color: #6b3a12; }
.tab-n { font-family: var(--head); font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.tab[aria-current] .tab-n { color: var(--accent); }
.tabs-bots .tab[aria-current] .tab-n { color: var(--bot); }
.tab-words { font-size: 0.82rem; color: var(--quiet); }
.chart-wrap { padding: 1rem 1.5rem 1.25rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.9rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch { display: inline-block; width: 1.3rem; border-top: 2.5px solid var(--accent); }
.swatch-bots { border-top-color: #d9741f; }
.swatch-prev { border-top: 2px dashed #a8a8b3; }
.chart { position: relative; height: 13rem; margin: 0.6rem 0.75rem 2rem 3.4rem; }
.plot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot .axis { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot .area { fill: rgba(35, 70, 232, 0.08); }
.chart-bots .plot .area { fill: rgba(217, 116, 31, 0.1); }
.plot .ghost { fill: none; stroke: #a8a8b3; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.plot .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-bots .plot .line { stroke: #d9741f; }
.plot .dot { stroke: var(--accent); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-bots .plot .dot { stroke: #d9741f; }
.plot .hit { fill: transparent; }
.plot .hit:hover { fill: rgba(11, 11, 15, 0.04); }
.y { position: absolute; right: calc(100% + 0.6rem); transform: translateY(50%); font-size: 0.75rem; color: var(--quiet); white-space: nowrap; }
.xs { position: absolute; left: 0; right: 0; top: calc(100% + 0.45rem); height: 1rem; }
.x { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.75rem; color: var(--quiet); white-space: nowrap; }
.x-first { transform: none; }
.x-last { transform: translateX(-100%); }
.peak { position: absolute; transform: translate(-50%, -0.6rem); font-size: 0.78rem; font-weight: 600; color: #6b3a12; background: #fff; padding: 0 0.35rem; border-radius: 0.25rem; white-space: nowrap; }
.peak-first { transform: translate(0, -0.6rem); }
.peak-last { transform: translate(-100%, -0.6rem); }
.numbers { margin-top: 0.5rem; font-size: 0.85rem; }
.numbers summary { cursor: pointer; color: var(--quiet); }
.numbers table { border-collapse: collapse; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.numbers td, .numbers th { padding: 0.2rem 0.75rem 0.2rem 0; text-align: right; }
.numbers td:first-child, .numbers th:first-child { text-align: left; }
.bots-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9rem; background: var(--bot-soft); color: #6b3a12; border: 1px solid #f3d9bf; border-radius: 999px; padding: 0.45rem 0.95rem; text-decoration: none; }
.bots-link:hover { color: var(--bot); }
.lists { display: flex; flex-wrap: wrap; gap: 1rem; }
.list-card { flex: 1 1 10rem; min-width: 0; padding: 0.9rem 0.85rem; gap: 0.4rem; }
.list-card h2 { font-family: var(--body); font-size: 0.88rem; letter-spacing: 0; }
.list-bots { border-color: #f3d9bf; }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.rows li { position: relative; display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.22rem 0.45rem; border-radius: 0.25rem; overflow: hidden; font-size: 0.88rem; }
.rows li i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); }
.rows-bots li i { background: #fce6d2; }
.row-name { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-n { position: relative; flex: none; font-variant-numeric: tabular-nums; }
.at0 { left: 0%; } .up0 { bottom: 0%; }
.at1 { left: 1%; } .up1 { bottom: 1%; }
.at2 { left: 2%; } .up2 { bottom: 2%; }
.at3 { left: 3%; } .up3 { bottom: 3%; }
.at4 { left: 4%; } .up4 { bottom: 4%; }
.at5 { left: 5%; } .up5 { bottom: 5%; }
.at6 { left: 6%; } .up6 { bottom: 6%; }
.at7 { left: 7%; } .up7 { bottom: 7%; }
.at8 { left: 8%; } .up8 { bottom: 8%; }
.at9 { left: 9%; } .up9 { bottom: 9%; }
.at10 { left: 10%; } .up10 { bottom: 10%; }
.at11 { left: 11%; } .up11 { bottom: 11%; }
.at12 { left: 12%; } .up12 { bottom: 12%; }
.at13 { left: 13%; } .up13 { bottom: 13%; }
.at14 { left: 14%; } .up14 { bottom: 14%; }
.at15 { left: 15%; } .up15 { bottom: 15%; }
.at16 { left: 16%; } .up16 { bottom: 16%; }
.at17 { left: 17%; } .up17 { bottom: 17%; }
.at18 { left: 18%; } .up18 { bottom: 18%; }
.at19 { left: 19%; } .up19 { bottom: 19%; }
.at20 { left: 20%; } .up20 { bottom: 20%; }
.at21 { left: 21%; } .up21 { bottom: 21%; }
.at22 { left: 22%; } .up22 { bottom: 22%; }
.at23 { left: 23%; } .up23 { bottom: 23%; }
.at24 { left: 24%; } .up24 { bottom: 24%; }
.at25 { left: 25%; } .up25 { bottom: 25%; }
.at26 { left: 26%; } .up26 { bottom: 26%; }
.at27 { left: 27%; } .up27 { bottom: 27%; }
.at28 { left: 28%; } .up28 { bottom: 28%; }
.at29 { left: 29%; } .up29 { bottom: 29%; }
.at30 { left: 30%; } .up30 { bottom: 30%; }
.at31 { left: 31%; } .up31 { bottom: 31%; }
.at32 { left: 32%; } .up32 { bottom: 32%; }
.at33 { left: 33%; } .up33 { bottom: 33%; }
.at34 { left: 34%; } .up34 { bottom: 34%; }
.at35 { left: 35%; } .up35 { bottom: 35%; }
.at36 { left: 36%; } .up36 { bottom: 36%; }
.at37 { left: 37%; } .up37 { bottom: 37%; }
.at38 { left: 38%; } .up38 { bottom: 38%; }
.at39 { left: 39%; } .up39 { bottom: 39%; }
.at40 { left: 40%; } .up40 { bottom: 40%; }
.at41 { left: 41%; } .up41 { bottom: 41%; }
.at42 { left: 42%; } .up42 { bottom: 42%; }
.at43 { left: 43%; } .up43 { bottom: 43%; }
.at44 { left: 44%; } .up44 { bottom: 44%; }
.at45 { left: 45%; } .up45 { bottom: 45%; }
.at46 { left: 46%; } .up46 { bottom: 46%; }
.at47 { left: 47%; } .up47 { bottom: 47%; }
.at48 { left: 48%; } .up48 { bottom: 48%; }
.at49 { left: 49%; } .up49 { bottom: 49%; }
.at50 { left: 50%; } .up50 { bottom: 50%; }
.at51 { left: 51%; } .up51 { bottom: 51%; }
.at52 { left: 52%; } .up52 { bottom: 52%; }
.at53 { left: 53%; } .up53 { bottom: 53%; }
.at54 { left: 54%; } .up54 { bottom: 54%; }
.at55 { left: 55%; } .up55 { bottom: 55%; }
.at56 { left: 56%; } .up56 { bottom: 56%; }
.at57 { left: 57%; } .up57 { bottom: 57%; }
.at58 { left: 58%; } .up58 { bottom: 58%; }
.at59 { left: 59%; } .up59 { bottom: 59%; }
.at60 { left: 60%; } .up60 { bottom: 60%; }
.at61 { left: 61%; } .up61 { bottom: 61%; }
.at62 { left: 62%; } .up62 { bottom: 62%; }
.at63 { left: 63%; } .up63 { bottom: 63%; }
.at64 { left: 64%; } .up64 { bottom: 64%; }
.at65 { left: 65%; } .up65 { bottom: 65%; }
.at66 { left: 66%; } .up66 { bottom: 66%; }
.at67 { left: 67%; } .up67 { bottom: 67%; }
.at68 { left: 68%; } .up68 { bottom: 68%; }
.at69 { left: 69%; } .up69 { bottom: 69%; }
.at70 { left: 70%; } .up70 { bottom: 70%; }
.at71 { left: 71%; } .up71 { bottom: 71%; }
.at72 { left: 72%; } .up72 { bottom: 72%; }
.at73 { left: 73%; } .up73 { bottom: 73%; }
.at74 { left: 74%; } .up74 { bottom: 74%; }
.at75 { left: 75%; } .up75 { bottom: 75%; }
.at76 { left: 76%; } .up76 { bottom: 76%; }
.at77 { left: 77%; } .up77 { bottom: 77%; }
.at78 { left: 78%; } .up78 { bottom: 78%; }
.at79 { left: 79%; } .up79 { bottom: 79%; }
.at80 { left: 80%; } .up80 { bottom: 80%; }
.at81 { left: 81%; } .up81 { bottom: 81%; }
.at82 { left: 82%; } .up82 { bottom: 82%; }
.at83 { left: 83%; } .up83 { bottom: 83%; }
.at84 { left: 84%; } .up84 { bottom: 84%; }
.at85 { left: 85%; } .up85 { bottom: 85%; }
.at86 { left: 86%; } .up86 { bottom: 86%; }
.at87 { left: 87%; } .up87 { bottom: 87%; }
.at88 { left: 88%; } .up88 { bottom: 88%; }
.at89 { left: 89%; } .up89 { bottom: 89%; }
.at90 { left: 90%; } .up90 { bottom: 90%; }
.at91 { left: 91%; } .up91 { bottom: 91%; }
.at92 { left: 92%; } .up92 { bottom: 92%; }
.at93 { left: 93%; } .up93 { bottom: 93%; }
.at94 { left: 94%; } .up94 { bottom: 94%; }
.at95 { left: 95%; } .up95 { bottom: 95%; }
.at96 { left: 96%; } .up96 { bottom: 96%; }
.at97 { left: 97%; } .up97 { bottom: 97%; }
.at98 { left: 98%; } .up98 { bottom: 98%; }
.at99 { left: 99%; } .up99 { bottom: 99%; }
.at100 { left: 100%; } .up100 { bottom: 100%; }
@media (max-width: 600px) { .x-extra { display: none; } .tab { flex-basis: 9rem; padding: 0.75rem 1rem; min-height: 4.75rem; } .tab-n { font-size: 1.7rem; } }
.check { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.5rem 0; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; flex: none; }
.check span { display: flex; flex-direction: column; }