/*
 * The look of Pookie's Portal, taken from Pookie: white fur for the page and
 * cards, the chocolate of the nose for ink, the liver brown of the ears for
 * the main button, copper from the cheeks for small warm touches, and the
 * icy blue of the eyes for links and anything you can act on.
 *
 * Laid out like the Roam dashboard: one column of plain sections, home
 * first, every other page opening in its place with "‹ Back". Big numbers
 * up top, rows you tap to go deeper, hairline borders, no shadows, no tabs,
 * no sidebar, as few buttons as possible.
 *
 * The four platform colours only ever mark data (a dot, a line) and never
 * text. They were checked as a set with a colour-blindness validator (all
 * pairs, on white); change one and re-check it (PLAN.md, "Look").
 *
 * Light only for now; every value is a token, so a dark set is one block.
 */
:root {
  --page: #f6f4f1;
  --surface: #ffffff;
  --sunk: #efebe6;
  --hover: #faf8f6;
  --line: #e7e1da;
  --line-strong: #d6cdc3;

  --ink: #33221b;
  --ink-2: #5f4a3e;
  --ink-3: #76635a;

  --brown: #5b3a29;
  --brown-hover: #4a2f21;
  --on-brown: #fffaf5;
  --copper: #b07a4c;
  --copper-ink: #7a5638;
  --copper-wash: #f5ebe1;

  --blue: #3c6a96;
  --blue-ink: #2e5478;
  --blue-wash: #e7f0f8;
  --eye: #9cc0e0;

  --up: #2f6b45;
  --down: #9a4a2b;

  --p-youtube: #2b6cb0;
  --p-instagram: #c47a2c;
  --p-tiktok: #16a08c;
  --p-pinterest: #a8457f;

  --chart-line: #5b3a29;
  --grid: #eee8e1;
  --axis: #d6cdc3;
  --tip-bg: #33221b;
  --tip-ink: #fffaf5;

  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
p {
  margin: 0;
}

/* ------------------------------------------------------------ frame */

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.top-inner,
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding-block: 10px;
  flex-wrap: wrap;
}
.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.mark:hover {
  text-decoration: none;
}
.top-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.mark img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--copper);
}

/* The profile button: the first letter of who's signed in, with a small
   menu under it for Connections and Sign out. */
.profile {
  position: relative;
}
.avatar {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--copper-wash);
  color: var(--copper-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.avatar:hover,
.avatar[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1px var(--copper);
}
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  display: grid;
  width: max-content;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.menu-who {
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.menu a,
.menu button {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu a:hover,
.menu button:hover {
  background: var(--hover);
  text-decoration: none;
}

/* The footer, on every page: the privacy and terms pages. */
.foot {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 32px;
  font-size: 13px;
}
.foot a {
  color: var(--ink-3);
}

/* The privacy and terms pages: one centred column of plain reading. */
main.legal {
  max-width: 712px; /* 680px of text, plus the side padding */
}
.prose {
  overflow-wrap: anywhere; /* long web addresses wrap instead of widening the page */
}
.prose h2 {
  margin-top: 12px;
}
.prose ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

main {
  padding-top: 28px;
  padding-bottom: 72px;
  display: grid;
  gap: 24px;
  transition: opacity 0.15s;
}
main.loading {
  opacity: 0.5;
}

section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.back {
  font-size: 14px;
  width: fit-content;
}
.sub {
  color: var(--ink-3);
}
.small {
  font-size: 13px;
}
.demo-note {
  font-size: 13px;
  color: var(--blue-ink);
  background: var(--blue-wash);
  border-radius: 999px;
  padding: 4px 12px;
  width: fit-content;
}

/* The sign-in card: Pookie, the name, one button. */
.sign-in {
  max-width: 380px;
  margin: 8vh auto 0;
  text-align: center;
  justify-items: center;
}
.sign-in img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--copper);
}
a.demo-note:hover {
  text-decoration: none;
  filter: brightness(0.97);
}

/* ------------------------------------------------------------ the headline */

.hero {
  display: grid;
  gap: 6px;
}
.hero .when {
  color: var(--ink-3);
  font-size: 14px;
}
.hero .big {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.hero .big em {
  font-style: normal;
  color: var(--copper-ink);
}
.hero .line {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 40em;
}

/* ------------------------------------------------------------ number tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.tile {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  min-width: 0;
}
a.tile:hover {
  text-decoration: none;
  border-color: var(--line-strong);
  background: var(--hover);
}
.tile .label {
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.tile .label .chev {
  color: var(--ink-3);
}
.tile .value {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.tile .value small {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-left: 4px;
}
.tile .delta {
  font-size: 13px;
  color: var(--ink-3);
}
.delta.up {
  color: var(--up);
}
.delta.down {
  color: var(--down);
}
.tile .rows {
  display: grid;
  gap: 3px;
  font-size: 14px;
  margin-top: 2px;
}
.tile .rows div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tile .rows .who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}
.tile .rows .n {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.spark {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 8px;
  overflow: visible;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}
.dot.youtube { background: var(--p-youtube); }
.dot.instagram { background: var(--p-instagram); }
.dot.tiktok { background: var(--p-tiktok); }
.dot.pinterest { background: var(--p-pinterest); }

/* ------------------------------------------------------------ lists of rows */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.card.pad {
  padding: 16px 18px;
  display: grid;
  gap: 12px;
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  min-width: 0;
}
.row:first-child {
  border-top: 0;
}
a.row:hover {
  text-decoration: none;
  background: var(--hover);
}
.row .text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.row .text strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row .text span {
  color: var(--ink-3);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row .text span.wrap {
  white-space: normal;
}
.row .value {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row .chev {
  flex: none;
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
}
.row .mini {
  flex: none;
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.section-head a {
  font-size: 14px;
}
.day-head {
  padding: 10px 16px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--page);
  border-top: 1px solid var(--line);
}
.day-head:first-child {
  border-top: 0;
}
.row .text strong.wrap {
  white-space: normal;
}

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--sunk);
  color: var(--ink-2);
}
.badge.exact {
  background: var(--blue-wash);
  color: var(--blue-ink);
}
.badge.estimate {
  background: var(--copper-wash);
  color: var(--copper-ink);
}

.explain {
  color: var(--ink-2);
  font-size: 14px;
  max-width: 44em;
}

/* ------------------------------------------------------------ a page's top */

.page-head {
  display: grid;
  gap: 6px;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
.stat .label {
  font-size: 13px;
  color: var(--ink-3);
}
.stat .value {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.stat .value small {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 4px;
  letter-spacing: 0;
}

/* What's behind a sale: a label, then what we know. */
.facts {
  display: grid;
}
.fact {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 4px 16px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.fact:first-child {
  border-top: 0;
}
.fact .k {
  color: var(--ink-3);
  font-size: 14px;
}
.fact .v {
  display: grid;
  gap: 6px;
}
.fact .v a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* One-colour bars for "where buyers came from" and "what sold". */
.bars {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}
.bar {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.bar .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar .track {
  height: 10px;
  border-radius: 5px;
  background: var(--sunk);
  overflow: hidden;
}
.bar .fill {
  height: 100%;
  border-radius: 5px;
  background: var(--brown);
}
.bar.unknown .fill {
  background: var(--line-strong);
}
.bar.unknown .name {
  color: var(--ink-3);
}
.bar .n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 3ch;
  text-align: right;
}

/* ------------------------------------------------------------ forms and buttons */

/* The business switch in the header, the only choice on most screens. */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 12px;
  background: var(--sunk);
  max-width: 100%;
  overflow-x: auto;
}
.seg:empty {
  display: none;
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  background: var(--brown);
  color: var(--on-brown);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover {
  background: var(--brown-hover);
  text-decoration: none;
}
.btn.quiet {
  background: transparent;
  color: var(--down);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn.quiet:hover {
  background: var(--hover);
}
.textbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--blue);
  cursor: pointer;
}
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
}
label.field {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-2);
}
input,
select {
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  width: 100%;
}
.error {
  color: var(--down);
  font-size: 14px;
}
.confirm {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ charts */

.chart {
  position: relative;
  width: 100%;
}
.chart svg {
  display: block;
  overflow: visible;
}
.chart .tick {
  fill: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.chart-card {
  padding: 16px 18px 12px;
  display: grid;
  gap: 10px;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-legend .key-line {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--chart-line);
}
.chart-legend .key-line.level {
  height: 1px;
  background: var(--ink-3);
  opacity: 0.6;
}
.tip {
  position: absolute;
  pointer-events: none;
  background: var(--tip-bg);
  color: var(--tip-ink);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  min-width: 140px;
  max-width: 260px;
  z-index: 2;
}
.tip strong {
  font-size: 15px;
}
.tip .when {
  opacity: 0.75;
}
.tip .tip-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-top: 4px;
}
.tip .tip-row i {
  width: 10px;
  height: 2px;
  border-radius: 1px;
  flex: none;
  transform: translateY(-3px);
}
details.numbers summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 13px;
  width: fit-content;
}
details.numbers table {
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
details.numbers td,
details.numbers th {
  padding: 3px 16px 3px 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
details.numbers .scroll {
  max-height: 260px;
  overflow: auto;
}
.slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .hero .big {
    font-size: 40px;
  }
  h1 {
    font-size: 24px;
  }
  .fact {
    grid-template-columns: 1fr;
  }
  .row .mini {
    display: none;
  }
  .row .text span {
    white-space: normal;
  }
  .bar {
    grid-template-columns: minmax(90px, 42%) 1fr auto;
  }
}