/* Analytics: a home screen of tiles, on the language in home.css.

   Not a band and a sheet: this screen is the one place in the app that is
   arranged by whoever uses it, so it is built as the thing they already know
   how to arrange, the home screen of a phone. Pages of tiles; a tile is
   dragged to its place, resized or removed by the marks at its corners.

   Three colours carry it, and two of them are verdicts. Green is said only
   of what is good: a profit, money coming in, a change for the better. Red
   is said only of what is bad: a loss, what is overdue, what has run out, a
   change for the worse. Neither is ever used to tell two things apart or to
   decorate. Black is the surface that leads (the tile that leads a page)
   and the colour of every bar that is neither good nor bad. The page itself
   stays paper, and every other tile is white.

   What moves here moves all the time, which the rest of the app does not:
   the bar still being added to breathes, and the arrow beside a change nods
   the way it went. All of it is transform and opacity, rests
   while it is off the screen, and stops for anyone who has asked for less. */

.board3 {
  --bd-ink: #101114; --bd-bar: #16171a; --bd-now: #9a9ca3; --bd-in: #1c8a55; --bd-up: #177a4b; --bd-down: #c0392b; --bd-dim: var(--muted);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0;
}
.board3 > * { min-width: 0; }

/* ---------- the head: the screen's name, the dates, and its pages ---------- */
.board3 > .page-head { align-items: center; gap: 8px 16px; margin: 0; }
.board3 h1.page-title { margin: 0; font-size: var(--t-title); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.board3 > .page-head .actions.actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; overflow: visible; }
.board3 .pill { font-size: var(--t-body); }
.board3 .m-period { height: 36px; }
.bd-pages { display: flex; align-items: center; gap: 4px; min-height: 36px; margin: -4px 0; padding: 4px 0; overflow-x: auto; scrollbar-width: none; }
.bd-pages::-webkit-scrollbar { display: none; }
.bd-pages button { position: relative; flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; font: inherit; font-size: var(--t-body); font-weight: 500; color: var(--muted); white-space: nowrap; transition: background-color 150ms, color 150ms, transform 200ms var(--spring); }
.bd-pages button:hover { background: rgba(22, 23, 26, 0.05); color: var(--ink); }
.bd-pages button[aria-current="page"] { background: var(--bd-ink); color: #fff; }
.bd-pages button.aim { background: rgba(22, 23, 26, 0.12); color: var(--ink); transform: scale(1.06); }
.bd-pages .bd-plus { display: grid; place-items: center; width: 36px; padding: 0; }
.bd-rename { flex: none; width: 168px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: #fff; box-shadow: inset 0 0 0 1.5px var(--bd-ink); font: inherit; font-size: var(--t-body); font-weight: 500; color: var(--ink); outline: none; }
.bd-dots { display: flex; justify-content: center; gap: 8px; padding: 8px 0 0; }
.bd-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(22, 23, 26, 0.18); transition: background-color 200ms, transform 200ms var(--spring); }
.bd-dots i.on { background: var(--bd-ink); transform: scale(1.3); }
#bdLack:empty { display: none; }
.board3 .empty-period { margin: 0; border-radius: var(--r-lg); }
.board3 .empty-period b { font-size: var(--t-head); }
.board3 .empty-period p { font-size: var(--t-body); }

/* ---------- the grid: two across on a phone, four on a tablet, twelve on a wide screen ---------- */
.bd-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.board3 .wg { position: relative; display: grid; grid-column: span var(--phone, 2); min-width: 0; border-radius: var(--r-lg); outline: none; transition: opacity 160ms ease 140ms; }
.board3 .wg.busy { opacity: 0.55; }
.wg-in { display: grid; min-width: 0; }
.wg-in > .sold-map { display: grid; min-width: 0; margin: 0; }
.board3 .wg .card { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: none; color: var(--ink); }
.bd-none { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 48px 24px; border: 1px dashed rgba(22, 23, 26, 0.2); border-radius: var(--r-lg); text-align: center; }
.bd-none b { font-size: var(--t-head); font-weight: 600; }
.bd-none p { margin: 0 0 8px; font-size: var(--t-body); color: var(--muted); }

/* the colour a tile stands on */
.board3 .wg.t-ink .card { --bd-bar: #f1f1ee; --bd-now: rgba(241, 241, 238, 0.46); --bd-up: #4fd08a; --bd-down: #ff8473; --bd-in: #4fd08a; --bd-dim: rgba(255, 255, 255, 0.66); --muted: rgba(255, 255, 255, 0.66); --hair: rgba(255, 255, 255, 0.12); border-color: var(--bd-ink); background: var(--bd-ink); color: #fff; }
.board3 .wg.t-green .card { --bd-up: #fff; --bd-down: #fff; --bd-dim: rgba(255, 255, 255, 0.86); --muted: rgba(255, 255, 255, 0.86); border-color: #157347; background: #157347; color: #fff; }
.board3 .wg.t-red .card { --bd-up: #fff; --bd-down: #fff; --bd-dim: rgba(255, 255, 255, 0.86); --muted: rgba(255, 255, 255, 0.86); border-color: #b3392c; background: #b3392c; color: #fff; }
.board3 .wg[class*=" t-"] :focus-visible { outline-color: #fff; }
.board3 .wg[class*=" t-"] h2, .board3 .wg[class*=" t-"] .linkish { color: #fff; }

/* ---------- a tile of one figure ---------- */
.board3 .bd-stat { display: grid; align-content: start; gap: 8px; width: 100%; min-height: 120px; text-align: left; font: inherit; }
.board3 .bd-stat .bd-top { margin-bottom: 8px; }
.board3 button.bd-stat { cursor: pointer; }
.bd-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.bd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-small); font-weight: 500; color: var(--bd-dim); }
.bd-fig { display: block; font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-note { display: block; font-size: var(--t-small); line-height: 1.4; color: var(--bd-dim); overflow-wrap: anywhere; }
.board3 .pos, .board3 .line.pos > span:last-child { color: var(--bd-up); }
.board3 .neg, .board3 .line.neg > span:last-child { color: var(--bd-down); }

/* a change: an arrow that nods the way it went, and by how much */
.bd-chg { flex: none; display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-chg.good { color: var(--bd-up); }
.bd-chg.poor { color: var(--bd-down); }
.bd-chg.flat { color: var(--bd-dim); font-weight: 500; }
.bd-chg.down svg { transform: rotate(180deg); }

/* ---------- the tile that leads: the figure, and its chart ---------- */
.board3 .bd-hero { display: grid; align-content: space-between; gap: 16px; }
.bd-hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 16px; }
.bd-hero-say { flex: 1 1 240px; min-width: 0; container-type: inline-size; }
.board3 .bd-hero h2 { font-size: var(--t-head); font-weight: 500; color: var(--bd-dim); }
.bd-lead { margin: 4px 0 8px; font-size: min(var(--t-lead), 12cqw); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-lead .dim { color: rgba(255, 255, 255, 0.5); }
.bd-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--t-small); color: var(--bd-dim); }
.bd-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font-size: var(--t-small); color: var(--bd-dim); }
.bd-key span { display: inline-flex; align-items: center; gap: 8px; }
.bd-key i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--bd-now); }
.bd-key i.in { background: var(--bd-in); } .bd-key i.out { background: var(--bd-bar); }
.bd-key.two { margin-bottom: 8px; }

/* ---------- what is inside a tile, on the six sizes ---------- */
.board3 .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.board3 .card-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.board3 .card h2 { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; }
.board3 .card .sub { margin-top: 2px; font-size: var(--t-small); line-height: 1.45; color: var(--bd-dim); text-wrap: pretty; }
.board3 .head-fig { flex: none; text-align: right; }
.board3 .head-fig small { display: block; font-size: var(--t-small); color: var(--bd-dim); }
.board3 .head-fig .fig { font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.board3 .linkish { font-size: var(--t-small); }
.board3 .card-head > .linkish { flex: none; white-space: nowrap; }
.board3 .empty, .board3 .hint { margin: 0; font-size: var(--t-body); color: var(--bd-dim); }
.board3 .hint { font-size: var(--t-small); }
.board3 .line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border: 0; font-size: var(--t-body); color: var(--bd-dim); }
.board3 .line > span:first-child { min-width: 0; }
.board3 .wg .card .line > span:last-child { flex: none; display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.board3 .wg[class*=" t-"] .card .line > span:last-child { color: #fff; }
.board3 .wg .card .line.pos > span:last-child { color: var(--bd-up); }
.board3 .wg .card .line.neg > span:last-child { color: var(--bd-down); }
.board3 .line.total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hair); }
/* (a total that comes first has nothing above it to be ruled off from) */
.board3 .card-head + .line.total { margin-top: 0; padding-top: 8px; border-top: 0; }
.board3 .line.total > span:first-child { color: var(--ink); font-weight: 600; }
.board3 .wg .card .line.total > span:last-child { font-weight: 600; }
.board3 .line small { display: block; font-size: var(--t-small); font-weight: 400; color: var(--bd-dim); }
.board3 .drcr { margin-left: -4px; font-style: normal; font-size: var(--t-small); font-weight: 500; color: var(--bd-dim); }
.board3 .quiet { color: var(--bd-dim); font-weight: 400; }
.board3 .ratio-grid { display: grid; gap: 0 32px; }
.bd-ages { margin-top: 8px; }
.bd-ages .sw { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; }
.bd-links { display: grid; }
.bd-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 -8px; padding: 8px; border-radius: var(--r-ctl); font-size: var(--t-body); color: var(--bd-dim); transition: background-color 150ms; }
.bd-links a:hover { background: rgba(255, 255, 255, 0.08); }
.bd-links b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
/* lists: a name, what it comes to, and one line about it; space keeps the rows apart */
.board3 .rows, .board3 .bl { margin: 0 -8px; }
.board3 .row { padding: 8px; border-radius: var(--r-ctl); }
.board3 .row + .row::before { display: none; }
.board3 .row-name, .board3 .bl-name { font-size: var(--t-body); font-weight: 500; }
.board3 .row-meta, .board3 .bl-meta, .board3 .row-val small { font-size: var(--t-small); color: var(--bd-dim); }
.board3 .row-val, .board3 .bl-val { font-family: inherit; font-size: var(--t-body); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.board3 .tag { border-radius: 4px; }
.board3 .row-name .tag { height: 20px; padding: 0 8px; font-size: var(--t-small); }
.board3 .bl-row { border-radius: var(--r-ctl); }
.board3 .bl-bar { height: 4px; margin: 8px 0 4px; border-radius: 2px; background: rgba(22, 23, 26, 0.07); overflow: hidden; }
.board3 .bl-fill { min-width: 4px; border-radius: 2px; background: var(--bd-bar); transform-origin: 0 50%; }
.board3 button.more { margin-top: 8px; font-size: var(--t-small); }
.board3 .scroll-x { margin: 0 -16px; padding: 0 16px; }
.board3 table.data { font-size: var(--t-body); }
.board3 table.data th { padding: 0 0 8px 16px; font-size: var(--t-small); }
.board3 table.data td { padding: 8px 0 8px 16px; border-top: 0; font-family: inherit; font-size: var(--t-body); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.board3 table.data th:first-child, .board3 table.data td:first-child { padding-left: 0; font-size: var(--t-body); }
.board3 table.data td small { font-size: var(--t-small); }
.board3 .seg { flex: none; padding: 2px; border-radius: var(--r-ctl); }
.board3 .seg button { height: 32px; padding: 0 12px; border-radius: 4px; font-size: var(--t-small); font-weight: 500; }
.board3 .t-ink .seg { background: rgba(255, 255, 255, 0.1); }
.board3 .t-ink .seg button { color: rgba(255, 255, 255, 0.72); }
.board3 .t-ink .seg button[aria-pressed="true"] { background: #fff; color: var(--bd-ink); }
/* charts: the axis on the scale, and readable on black */
.board3 .chart text { font-size: var(--t-small); fill: var(--bd-dim); }
.board3 .chart .cap { font-family: var(--sans); font-size: var(--t-small); font-weight: 500; letter-spacing: -0.01em; fill: currentColor; }
.board3 .t-ink .chart line.grid { stroke: rgba(255, 255, 255, 0.1); }
.board3 .t-ink .chart line.base { stroke: rgba(255, 255, 255, 0.32); }
.board3 .t-ink .chart .hit.on, .board3 .t-ink .chart .hit:focus-visible { fill: rgba(255, 255, 255, 0.08); }
/* (the bar still being added to is paler, and breathes: it is not yet a figure to judge) */
.board3 .chart .bar.now { fill: var(--bd-now); }
/* the map of where the sales go keeps its own card, on the same corners and sizes */
/* (its fills are white on the black, where the rest of the app uses marigold: more or less is not a verdict, so it is not green) */
.board3 .map-card { --accent: #f1f1ee; padding: 16px; gap: 16px; }
.board3 .map-card h2 { color: #fff; }
.board3 .map-key, .board3 .place .n, .board3 .place .nm small { font-size: var(--t-small); }
.board3 .place .n { font-family: inherit; color: rgba(255, 255, 255, 0.5); }
.board3 .place .nm, .board3 .place .v { font-family: inherit; font-size: var(--t-body); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.board3 .place + .place { border-top: 0; }
.board3 .place .bar { height: 4px; border-radius: 2px; }
.board3 .place .bar i { border-radius: 2px; }

/* ---------- arranging: the tiles loosen, and each carries its marks ---------- */
.wg-x, .wg-size { display: none; position: absolute; z-index: 3; place-items: center; padding: 0; border: 0; border-radius: var(--r-ctl); background: #fff; color: var(--bd-ink); box-shadow: 0 0 0 1px rgba(22, 23, 26, 0.16), 0 4px 12px rgba(16, 17, 20, 0.2); transition: transform 150ms var(--spring); }
.wg-x { top: -8px; left: -8px; width: 28px; height: 28px; cursor: pointer; }
.wg-x::after { content: ""; position: absolute; inset: -8px; }
.wg-x:hover { transform: scale(1.12); }
/* the grip on a tile's right edge: dragged sideways for its width, or pressed to step it on */
.wg-size { top: 50%; right: -8px; width: 16px; height: 48px; margin-top: -24px; cursor: ew-resize; touch-action: none; }
.wg-size::after { content: ""; position: absolute; inset: -4px -6px -4px -22px; }
.wg-size i { width: 4px; height: 16px; border-inline: 1.5px solid currentColor; opacity: 0.55; }
.wg-size:hover { transform: scaleX(1.25); }
.board3 .wg.one-width .wg-size { display: none; }
/* its width, said beside the grip while it is being changed */
.board3 .wg.sizing::after { content: attr(data-width); position: absolute; z-index: 4; top: 50%; right: 16px; transform: translateY(-50%); padding: 4px 8px; border-radius: 4px; background: #fff; color: var(--bd-ink); font-size: var(--t-small); font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgba(22, 23, 26, 0.16), 0 4px 12px rgba(16, 17, 20, 0.2); pointer-events: none; }
.board3 .wg.sizing { outline: 2px solid var(--bd-ink); outline-offset: 2px; }
/* a tile just added: ringed and named for a moment, so it is seen where it landed */
.board3 .wg.added { outline: 2px solid var(--bd-ink); outline-offset: 4px; }
.board3 .wg.added::before { content: "Added"; position: absolute; z-index: 4; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; background: var(--bd-ink); color: #fff; font-size: var(--t-small); font-weight: 600; white-space: nowrap; pointer-events: none; }
.board3.resizing, .board3.resizing .wg { cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.board3.editing { padding-bottom: 104px; }
.board3.editing .wg { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.board3.editing .wg-in { pointer-events: none; --jig: 0.3deg; }
.board3.editing .w-stat .wg-in { --jig: 0.8deg; }
.board3.editing .w-third .wg-in { --jig: 0.5deg; }
.board3.editing .w-wide .wg-in, .board3.editing .w-full .wg-in { --jig: 0.2deg; }
.board3.editing .wg-x, .board3.editing .wg-size { display: grid; }
.board3.editing .wg:focus-visible { outline: 2px solid var(--bd-ink); outline-offset: 4px; }
.board3 .wg.lifted { outline: 2px dashed rgba(22, 23, 26, 0.28); outline-offset: -2px; }
.board3 .wg.lifted > * { visibility: hidden; }
.board3 .wg-ghost { cursor: grabbing; border-radius: var(--r-lg); box-shadow: 0 24px 48px rgba(16, 17, 20, 0.28); will-change: transform; transform-origin: 50% 50%; }
.board3 .wg-ghost .wg-x, .board3 .wg-ghost .wg-size { display: none; }
.board3.dragging, .board3.dragging .wg { cursor: grabbing; }
.board3.dragging .wg-x, .board3.dragging .wg-size { visibility: hidden; }
/* (a chart drawn again while arranging stands as it is: its bars do not grow in again each time a tile moves) */
.board3.editing .chart .bar, .board3.editing .bl-fill { animation: none !important; }
@media (pointer: coarse) { .board3 .wg { -webkit-touch-callout: none; } }

/* the bar at the foot while arranging, and the list of tiles to add above it */
.bd-dock { position: fixed; z-index: 40; left: 50%; bottom: 24px; display: grid; justify-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); }
.bd-dock-bar { display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px; border-radius: var(--r-lg); background: var(--bd-ink); color: #fff; box-shadow: 0 16px 40px rgba(16, 17, 20, 0.32); }
.bd-dock-bar button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; font: inherit; font-size: var(--t-body); font-weight: 500; color: rgba(255, 255, 255, 0.88); white-space: nowrap; transition: background-color 150ms; }
.bd-dock-bar button:hover, .bd-dock-bar button[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.bd-dock-bar button.go { background: #fff; color: var(--bd-ink); }
.bd-dock-bar button.go:hover { background: #e9e9e6; color: var(--bd-ink); }
.bd-dock-bar :focus-visible { outline-color: #fff; }
.bd-ask { padding: 0 8px 0 12px; font-size: var(--t-body); }
.bd-shelf { display: grid; gap: 16px; width: min(720px, calc(100vw - 32px)); max-height: min(52vh, 440px); padding: 16px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 16px 40px rgba(16, 17, 20, 0.18); }
.bd-shelf p { margin: 0; font-size: var(--t-body); color: var(--muted); }
.bd-shelf-g > span { display: block; margin-bottom: 8px; font-size: var(--t-small); font-weight: 500; color: var(--muted); }
.bd-shelf-g > div { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-shelf button { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: var(--r-ctl); background: rgba(22, 23, 26, 0.05); cursor: pointer; font: inherit; font-size: var(--t-body); color: var(--ink); transition: background-color 150ms; }
.bd-shelf button:hover { background: rgba(22, 23, 26, 0.1); }
.bd-shelf button svg { color: var(--muted); }

/* ---------- while the figures are on their way ---------- */
.bd-sk { gap: 16px; padding-top: 0; }
.bd-sk > .sk-title { width: 160px; margin-top: 8px; border-radius: var(--r-ctl); }
.bd-sk > .bd-sk-tabs, .bd-sk > .bd-sk-grid { background: none !important; animation: none !important; }
.bd-sk-tabs { display: flex; gap: 4px; }
.bd-sk-tabs i { width: 88px; height: 36px; border-radius: var(--r-ctl); }
.bd-sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bd-sk-grid i { display: block; height: 120px; border-radius: var(--r-lg); }
.bd-sk-grid i.w, .bd-sk-grid i.t, .bd-sk-grid i.h { grid-column: span 2; height: 280px; }
.bd-sk-tabs i, .bd-sk-grid i { background: linear-gradient(100deg, rgba(22, 23, 26, 0.06) 40%, rgba(22, 23, 26, 0.11) 50%, rgba(22, 23, 26, 0.06) 60%); background-size: 220% 100%; }

/* ---------- motion ---------- */
@keyframes bd-nod-up { 50% { transform: translateY(-2px); } }
@keyframes bd-nod-down { from, to { transform: rotate(180deg); } 50% { transform: rotate(180deg) translateY(-2px); } }
@keyframes bd-grow { from { transform: scaleY(0); } }
@keyframes bd-breathe { 50% { transform: scaleY(0.955); } }
@keyframes bd-fill { from { transform: scaleX(0); } }
@keyframes bd-jig { from { transform: rotate(calc(var(--jig) * -1)); } to { transform: rotate(var(--jig)); } }
@keyframes bd-from-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes bd-from-left { from { opacity: 0; transform: translateX(-40px); } }
@keyframes bd-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes bd-dock { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: no-preference) {
  .bd-chg.up svg { animation: bd-nod-up 1.8s ease-in-out infinite; }
  .bd-chg.down svg { animation: bd-nod-down 1.8s ease-in-out infinite; }
  .board3 .chart .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: bd-grow 560ms var(--spring) both; animation-delay: calc(var(--i, 0) * 24ms); }
  .board3 .chart .bar.under { transform-origin: 50% 0; }
  .board3 .chart .bar.now { animation: bd-grow 560ms var(--spring) both, bd-breathe 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 24ms), 1s; }
  .board3 .bl-fill { animation: bd-fill 640ms var(--spring) both; }
  /* what is off the screen rests */
  .board3 .wg.off .bar, .board3 .wg.off .bd-chg svg, .board3 .wg.off .wg-in { animation-play-state: paused; }
  .bd-grid.rise > * { animation: bd-rise 480ms var(--spring) both; animation-delay: calc(var(--n, 0) * 32ms); }
  .bd-grid.from-right > * { animation: bd-from-right 380ms var(--spring) both; animation-delay: calc(var(--n, 0) * 18ms); }
  .bd-grid.from-left > * { animation: bd-from-left 380ms var(--spring) both; animation-delay: calc(var(--n, 0) * 18ms); }
  .board3.editing .wg-in { animation: bd-jig 300ms ease-in-out infinite alternate; }
  .board3.editing .wg:nth-child(2n) .wg-in { animation-duration: 330ms; animation-direction: alternate-reverse; }
  .board3.editing .wg:nth-child(3n) .wg-in { animation-duration: 270ms; }
  .board3 .wg-ghost .wg-in, .board3 .wg.lifted .wg-in { animation: none; }
  .bd-dock-bar, .bd-shelf { animation: bd-dock 320ms var(--spring) both; }
}
@media (min-width: 700px) {
  .bd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .board3 .wg { grid-column: span var(--mid, 4); }
  .board3 .ratio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-sk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .bd-sk-grid i.w { grid-column: span 4; }
}
@media (min-width: 1000px) {
  .board3 > :not(.bd-dock), .bd-sk > * { width: 100%; max-width: 1360px; margin-inline: auto; }
  /* (the bar at the foot is centred on the page, which starts where the rail ends) */
  .bd-dock { left: calc(50% + 124px); max-width: calc(100vw - 280px); }
  .bd-dots { display: none; }
}
@media (min-width: 1200px) {
  .bd-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .board3 .wg { grid-column: span var(--span, 12); }
  .board3 .wg .card, .board3 .map-card { padding: 24px; }
  .board3 .scroll-x { margin: 0 -24px; padding: 0 24px; }
  .bd-sk-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bd-sk-grid i { grid-column: span 3; }
  .bd-sk-grid i.w { grid-column: span 8; }
  .bd-sk-grid i.t { grid-column: span 4; }
  .bd-sk-grid i.h { grid-column: span 6; }
}
@media (max-width: 699px) {
  .board3 { gap: 12px; }
  .board3 > .page-head { margin-top: 0; flex-wrap: wrap; align-items: flex-start; }
  .board3 > .page-head .lead { flex: 1 1 100%; }
  .board3 > .page-head .actions.actions { flex: 1 1 100%; min-width: 0; }
  .board3 > .page-head .actions:empty { display: none; }
  .board3 .m-period { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
  .board3 .m-period svg:last-child { margin-left: auto; }
  .bd-rename { font-size: 16px; }
  .board3 .m-period span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .board3 .m-period svg { flex: none; }
  /* on a phone Customise is its icon; a long press on a tile does the same */
  .board3 #editLayout { width: 44px; padding: 0; justify-content: center; }
  .board3 #editLayout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .board3 .m-period, .board3 #editLayout { height: 44px; }
  .bd-pages button, .bd-rename { height: 44px; }
  .board3 .bd-stat { min-height: 104px; }
  .bd-dock { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .bd-dock-bar { overflow-x: auto; scrollbar-width: none; }
  .bd-dock-bar button { height: 44px; }
  .bd-shelf button { height: 44px; }
  .board3.editing { padding-bottom: 96px; }
}

/* ---------- the last strays onto the six sizes, and 44 to the finger on a phone ---------- */
.board3 .scope { font-size: var(--t-small); }
.board3 .wg .card .line > span:last-child { font-size: var(--t-body); }
.board3 .wg .card.ink .seg button, .board3 .wg .card .seg button { height: 32px; font-size: var(--t-small); }
@media (max-width: 699px) {
  .board3 .seg button, .board3 button.more, .board3 .card-head > .linkish, .board3 .line .linkish { position: relative; }
  .board3 .line .linkish::after { content: ""; position: absolute; inset: -13px -8px; }
  .board3 .seg button::after, .board3 .card-head > .linkish::after { content: ""; position: absolute; inset: -6px 0; }
  .board3 button.more::after { content: ""; position: absolute; inset: -13px -8px; }
  .board3 .map-credit::after { content: ""; position: absolute; inset: -9px; }
  .board3 .card-head > .linkish::after { inset: -13px -8px; }
}

/* below the rail's width the shell's own row already names Overview and Sales: the board does not say them again, and lists only the pages under them */
@media (max-width: 999px) { .bd-pages.few { display: none; } .board3:not(.editing) .bd-pages button.fixed { display: none; } }
/* nothing glides for anyone who has asked for less motion */
@media (prefers-reduced-motion: reduce) { .board3 *, .board3 *::before, .board3 *::after { transition: none !important; } }

/* ---------- repeat buyers: a grid of months, darker where more of a group came back ---------- */
.board3 .cohort { border-spacing: 4px; font-size: var(--t-small); }
.board3 .cohort th { padding: 4px 8px; font-size: var(--t-small); }
.board3 .cohort th:first-child, .board3 .cohort td:first-child { padding: 8px 12px 8px 0; border-radius: 0; background: var(--surface); font-family: inherit; font-size: var(--t-body); }
.board3 .cohort td:first-child .linkish { font-size: var(--t-body); font-weight: 500; text-decoration: none; }
.board3 .cohort td:first-child small { font-size: var(--t-small); }
.board3 .cohort td { height: 32px; border-radius: 4px; font-family: inherit; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.board3 .cohort td.cell { background: color-mix(in srgb, var(--bd-bar) calc(var(--p) * 1%), #eeeeea); }
.board3 .cohort td.cell sup { font-size: inherit; vertical-align: baseline; }
.board3 .cohort + .hint, .board3 .scroll-x + .hint { margin-top: 12px; }

/* ---------- Reports: the list as tiles, the builder on the board's colours and sizes ---------- */
.rep3 { --c-sales: #16171a; --bd-ink: #101114; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.rep3 > * { min-width: 0; }
.rep3 > .page-head { align-items: center; gap: 8px 16px; margin: 0; }
.rep3 h1.page-title, .rep3 input.page-title { margin: 0; font-size: var(--t-title); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.rep3 .kicker, .rep3 .page-sub { font-size: var(--t-small); }
.rep3 .pill { font-size: var(--t-body); }
.rep3 .pill.small, .rep3 .tag, .rep3 .token, .rep3 .scope { font-size: var(--t-small); }
.rep3 .tag { border-radius: 4px; }
.rp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.rp-views { gap: 4px; }
.rp-views button { height: 36px; font-size: var(--t-body); font-weight: 500; color: var(--muted); }
.rp-views [aria-selected="true"], .rp-views [aria-selected="true"]:hover { background: var(--bd-ink); color: #fff; }
.rp-views small { padding: 0; background: none; font-size: var(--t-small); font-weight: 500; color: inherit; opacity: 0.7; }
.rp-bar .searchbox { flex: 1 1 220px; max-width: 320px; }
.rep3 .field { font-size: var(--t-body); }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.rp-tile { display: grid; align-content: start; gap: 4px; min-height: 104px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); transition: transform 200ms var(--spring), border-color 150ms; }
.rp-tile:hover { border-color: rgba(22, 23, 26, 0.28); transform: translateY(-2px); }
.rp-tile small, .rp-tile span { font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
.rp-tile b { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rp-none { display: grid; justify-items: center; gap: 4px; padding: 48px 24px; border: 1px dashed rgba(22, 23, 26, 0.2); border-radius: var(--r-lg); text-align: center; }
.rp-none b { font-size: var(--t-head); font-weight: 600; }
.rp-none p { margin: 0; font-size: var(--t-body); color: var(--muted); }
/* one report: its figures (the one in the chart stands on black), the chart, the rows, and the set-up beside them */
.rep3 .card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
.rep3 .rep-kpis { background: var(--line); }
.rep3 .kpi-l, .rep3 .kpi small { font-size: var(--t-small); }
.rep3 .kpi-v { font-size: var(--t-fig); }
.rep3 .rep-kpis .kpi[aria-pressed="true"] { background: var(--bd-ink); color: #fff; box-shadow: none; }
.rep3 .rep-kpis .kpi[aria-pressed="true"] .kpi-l, .rep3 .rep-kpis .kpi[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.66); font-weight: 400; }
.rep3 .rep-kpis .kpi[aria-pressed="true"] .tag.green { background: none; padding: 0; color: #4fd08a; }
.rep3 .rep-kpis .kpi[aria-pressed="true"] .tag.red { background: none; padding: 0; color: #ff8473; }
.rep3 .rep-kpis .kpi[aria-pressed="true"] .tag.plain { background: none; padding: 0; color: rgba(255, 255, 255, 0.66); }
.rep3 .rep-kpis .kpi[aria-pressed="true"]:focus-visible { outline-color: #fff; outline-offset: -4px; }
.rep3 .card h2 { font-size: var(--t-head); font-weight: 600; }
.rep3 .card .sub, .rep3 .legend, .rep3 .hint { font-size: var(--t-small); }
.rep3 .chart text { font-size: var(--t-small); }
.rep3 .chart .cap { font-family: var(--sans); font-size: var(--t-small); letter-spacing: -0.01em; }
.rep3 .index-title b { font-size: var(--t-head); font-weight: 600; }
.rep3 .index-title small { font-size: var(--t-small); }
.rep3 .index-table { font-size: var(--t-body); }
.rep3 .index-table th, .rep3 .index-table th button { font-size: var(--t-small); }
.rep3 .index-table td { font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.rep3 .index-table tbody td, .rep3 .index-table tbody tr { border-top: 0; border-bottom: 0; box-shadow: none; }
.rep3 .up { color: var(--ok-ink); } .rep3 .down { color: var(--bad); } .rep3 .quiet { color: var(--muted); }
.rep3 .rep-toggle b { font-size: var(--t-head); }
.rep3 .rep-toggle small, .rep3 .rep-l { font-size: var(--t-small); }
.rep3 .rep-checks button { font-size: var(--t-body); }
.rep3 .rep-checks i { border-radius: 4px; }
@media (min-width: 1000px) { .rep3 > * { width: 100%; max-width: 1360px; margin-inline: auto; } }
@media (min-width: 1200px) { .rp-tile { padding: 24px; } }
@media (max-width: 699px) { .rp-views button { height: 44px; } .rp-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .rp-tile { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-tile { transition: none; } }
.rep3 .rep-l small { font-size: inherit; }
@media (max-width: 699px) {
  /* 44 to the finger, and 16 in a box that is typed into */
  .rep3 .field, .rep3 .pill, .rep3 input.page-title { min-height: 44px; }
  .rep3 .field { font-size: 16px; }
  .rep3 .index-table th button { position: relative; }
  .rep3 .index-table th button::after { content: ""; position: absolute; inset: -13px -4px; }
}
/* the month still running is told by its paler ground and its mark, with its figure as readable as the rest; a column no group has reached is a dash */
.board3 .cohort td.cell.partial { opacity: 1; background: #eeeeea; color: var(--muted); }
.board3 .cohort td.cell.none { background: none; color: var(--muted); }
.rep3 .rp-views button small { padding: 0; background: none; }
@media (max-width: 699px) {
  .board3 .cohort td:first-child .linkish { position: relative; }
  .board3 .cohort td:first-child .linkish::after { content: ""; position: absolute; inset: -12px -8px; }
}